/* Claudia: palette, type and components on top of Ethereal (HTML5 UP).
   Ink #1F1A33 · Iris #5B4BC4 · Mist #E7E1F4 · Paper #F7F3EC
   Rose #D6477A (composes) · Teal #13917F (computes) · Apricot #F2A057 (creates) */

a:hover { color: #F7B576; }

/* Hero gradient: ink to iris to rose, so white text always has contrast */
.panel > *.color0, .panel.color0 {
	background-image: url("../../images/overlay.png"), linear-gradient(45deg, #1F1A33 8%, #5B4BC4 62%, #D6477A);
	background-size: 128px 128px, auto;
}

/* Buttons: sentence case, Inter */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
	font-family: "Inter", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Wordmark: Sacramento, only for "claudia" */
h1.wordmark {
	font-family: "Sacramento", cursive;
	font-weight: 400;
	font-size: 8rem;
	line-height: 0.95;
	letter-spacing: 0;
	margin: 0 0 0.2rem -0.3rem;
	color: #F7F3EC;
}
.tagline {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.9rem;
	line-height: 1.2;
	color: #F7F3EC;
	margin: 0 0 1rem 0;
}
ul.actions.cta { margin-top: 1.75rem; }
.os-line { margin: 1.75rem 0 0 0; font-size: 0.85rem; color: #E6E0F5; }
.os-line .icon { margin-right: 0.15rem; }
.os-line .icon:before { font-size: 0.95rem; }

/* App cards */
.apps .app { text-align: left; }
.app-icon { display: block; margin: 0 0 1.25rem 0; border-radius: 22%; }
.app h3 { margin-bottom: 0.25rem; }
.app-verb { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #F7B576; margin-bottom: 0.9rem; }

/* Feature grid */
.features .feature .icon:before,
.runs .run .icon:before { font-size: 2rem; display: block; margin-bottom: 1rem; color: #F7F3EC; }
.runs .run .icon:before { font-size: 2.4rem; }
.feature h3, .run h3, .os-card h3, .step h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.chips { list-style: none; margin: 0.75rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips li { padding: 0.3rem 1rem; border-radius: 2rem; box-shadow: inset 0 0 0 1px rgba(247, 243, 236, 0.5); font-size: 0.85rem; }
.usecases { margin-top: 0.5rem; }

/* Download */
.os-card { text-align: center; padding: 2rem 1.25rem 1.75rem 1.25rem; border-radius: 0.6rem; box-shadow: inset 0 0 0 1px rgba(247, 243, 236, 0.35); }
.os-card.native { box-shadow: inset 0 0 0 2px #F2A057; }
.os-card .icon:before { font-size: 3rem; display: block; margin-bottom: 0.75rem; color: #F7F3EC; }
.os-card .actions { justify-content: center; margin-left: 0; }
.os-card .actions li { padding-left: 0; }
.os-note { font-size: 0.85rem; margin-bottom: 1.25rem; }
.tag { display: inline-block; vertical-align: middle; margin-left: 0.4rem; padding: 0.1rem 0.6rem; border-radius: 1rem; background: #F2A057; color: #1F1A33; font: 500 0.6rem "Inter", sans-serif; letter-spacing: 0.04em; }
.status { align-self: flex-end; font-size: 0.85rem; }

/* Get started */
.step .num { display: block; font-family: "Fraunces", Georgia, serif; font-size: 3.2rem; line-height: 1; color: #F7B576; margin-bottom: 0.75rem; }
.step pre { margin-top: 1rem; }

/* Ink panel: the dark brand surface */
.panel > *.ink, .panel.ink {
	background-image: url("../../images/overlay.png");
	background-size: 128px 128px;
	background-color: #1F1A33;
}

/* Teal panels: tint with teal and iris only, so rose/apricot do not muddy the green */
.panel.color4, .panel > *.color4, .panel.color4-alt, .panel > *.color4-alt {
	background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(19, 145, 127, 0.0) 20%, rgba(91, 75, 196, 0.32));
	background-size: 128px 128px, auto;
	background-color: #0F7D6E;
}

/* Small screens: let the three calls to action wrap */
ul.actions.cta { flex-wrap: wrap; }
ul.actions.cta li { padding-bottom: 0.6rem; }

/* ---------- Page background (try-out variables) ---------- */
:root { --page-bg: #F7F3EC; --nav-fg: #1F1A33; --nav-soft: rgba(31, 26, 51, 0.72); }
html[data-bg="sand"]  { --page-bg: #E6DCCB; }
html[data-bg="mist"]  { --page-bg: #E7E1F4; }
html[data-bg="lilac"] { --page-bg: #D3CCEB; }
html[data-bg="sage"]  { --page-bg: #D7E3DD; }
html[data-bg="ink"]   { --page-bg: #1F1A33; --nav-fg: #F7F3EC; --nav-soft: rgba(247, 243, 236, 0.78); }
html { background: var(--page-bg); }
body:after { background-color: var(--page-bg) !important; }

/* ---------- Top navigation ---------- */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1.8rem; pointer-events: none; }
#nav > * { pointer-events: auto; }
#nav .brand { font-family: "Sacramento", cursive; font-size: 2.6rem; line-height: 1; color: var(--nav-fg); border: 0; }
#nav .brand:hover { color: var(--nav-fg); opacity: 0.75; }
#nav nav { display: flex; gap: 1.6rem; }
#nav nav a { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.85rem "Inter", sans-serif; color: var(--nav-soft); border: 0; }
#nav nav a i { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; }
#nav nav a:hover, #nav nav a.current { color: var(--nav-fg); }
#nav nav a.current { box-shadow: 0 2px 0 0 currentColor; }

/* ---------- Scroll arrows ---------- */
.scroll-arrow { position: fixed; top: 50%; z-index: 10001; width: 3.1rem; height: 3.1rem; margin-top: -1.55rem; border-radius: 50%; background: #F7F3EC; color: #1F1A33; border: 0; text-align: center; box-shadow: 0 0.2rem 1.1rem rgba(31, 26, 51, 0.38); transition: opacity 0.3s ease, transform 0.3s ease; left: 0; }
.scroll-arrow:hover { color: #5B4BC4; transform: scale(1.07); }
.scroll-arrow .icon { display: block; line-height: 3.1rem; font-size: 1.6rem; }
.scroll-arrow .icon:before { line-height: 3.1rem; }
.scroll-arrow.hidden { opacity: 0; pointer-events: none; }
.scroll-arrow.right.nudge .icon { animation: arrow-nudge 1.8s ease-in-out infinite; }
@keyframes arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.3rem); } }

/* ---------- Transitions between sections ---------- */
.panel + .panel > *:first-child { box-shadow: inset 1px 0 0 rgba(247, 243, 236, 0.4), inset 2.4rem 0 2rem -1.8rem rgba(0, 0, 0, 0.32); }
.reveal { opacity: 0; transform: translateX(2.2rem); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .scroll-arrow.right.nudge .icon { animation: none; } }

/* ---------- Background try-out swatches ---------- */
#bgpick { position: fixed; left: 1.4rem; bottom: 1.1rem; z-index: 10001; display: flex; align-items: center; gap: 0.45rem; font: 500 0.7rem "Inter", sans-serif; color: var(--nav-soft); }
#bgpick span { margin-right: 0.3rem; }
#bgpick button { all: unset; box-sizing: border-box; width: 1.3rem; height: 1.3rem; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(31, 26, 51, 0.35); }
#bgpick button.on { box-shadow: 0 0 0 2px var(--page-bg), 0 0 0 4px #5B4BC4; }
html[data-bg="ink"] #bgpick button { box-shadow: inset 0 0 0 1px rgba(247, 243, 236, 0.45); }

/* ---------- App pages ---------- */
.app a { border: 0; }
.app h3 a { border: 0; }
.app-title { font-size: 3.6rem; line-height: 1; margin: 0.3rem 0 0.4rem 0; }
.app-title .tag { font-size: 0.6rem; vertical-align: middle; position: relative; top: -0.15rem; }
.app-verb.big { font-size: 0.8rem; }
.content > .app-icon { margin-bottom: 1.2rem; }
.stack > .feature + .feature { margin-top: 2.2rem; }
.features .feature .icon:before { font-size: 1.7rem; margin-bottom: 0.7rem; }
.usecase .icon:before { display: block; font-size: 1.9rem; margin-bottom: 0.8rem; color: #F7F3EC; }
.usecase h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.usecase p { font-size: 0.9rem; }

/* Apricot: light surface, ink text */
.panel > *.apricot, .panel.apricot {
	background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(255, 255, 255, 0.0) 30%, rgba(255, 255, 255, 0.28));
	background-size: 128px 128px, auto;
	background-color: #F2A057;
}
.apricot, .apricot h1, .apricot h2, .apricot h3, .apricot p, .apricot strong, .apricot a { color: #1F1A33; }
.apricot .app-verb { color: #5b3308; }
.apricot .button { color: #1F1A33 !important; box-shadow: inset 0 0 0 2px rgba(31, 26, 51, 0.4); }
.apricot .button:hover { background-color: rgba(31, 26, 51, 0.08) !important; }
.apricot .button.primary { background-color: #1F1A33; color: #F7F3EC !important; box-shadow: none; }
.apricot .tag { background: #1F1A33; color: #F7F3EC; }

/* ---------- Small screens ---------- */
@media screen and (max-width: 736px) {
	body { padding-top: 3.4rem; }
	#nav { background: var(--page-bg); padding: 0.4rem 1rem; }
	#nav .brand { font-size: 2.1rem; }
	#nav nav { gap: 0.9rem; }
	#nav nav a { font-size: 0.75rem; }
	.scroll-arrow, #bgpick { display: none; }
	.reveal { transform: translateY(1.5rem); }
	.app-title { font-size: 2.8rem; }
}
.apricot .feature .icon:before, .apricot .icon:before { color: #1F1A33; }
.apricot .intro h2.major:after, .apricot h2.major:after { background: rgba(31,26,51,.35); }

/* ---- One screen per panel (desktop): no panel wider than the front page ---- */
@media screen and (min-width: 737px) {
	.panel > .intro { width: 16rem; padding: 3rem 1.5rem 2rem 2.5rem; }
	.panel > .intro.joined { width: 15rem; padding-right: 0; }
	.panel > .intro.joined + .inner { padding-left: 2rem; }
	.panel > .inner { padding: 3rem 2.5rem 2rem 2.5rem; }
	.panel > .inner.columns > * { margin-left: 2.5rem; }
	.panel > .inner.columns > :first-child { margin-left: 0; }
	.panel > .inner.columns.divided > * { margin-left: 4.5rem; }
	.panel > .inner.columns.divided > :first-child { margin-left: 0; }
	.panel > .inner.columns.divided > *:before { margin-left: -2.25rem; }
	.panel > .inner.columns > .span-2-5,
	.panel > .inner.columns > .span-2-75,
	.panel > .inner.columns > .span-2-25 { width: 19rem; }
	.status-note { font-size: .8rem; opacity: .8; margin-top: 1.2rem; }
}