/* The pitch page at nuuko.app. Tokens come from the app's design system (light, dark, person colours).
   The phone and laptop screens are real HTML, sized in em from the frame width, so they scale as one piece. */
:root {
  color-scheme: light dark;
  --serif: 'Crimson Pro', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --bg: light-dark(#F3EFE5, #1C1917);
  --band: light-dark(#ECE6D8, #231F1D);
  --surface: light-dark(#FDFCF9, #2A2523);
  --ink: light-dark(#3D342C, #F5F0E8);
  --soft: light-dark(#635E5A, #C4BCB0);
  --accent: light-dark(#4F7356, #8FB896);
  --on-accent: light-dark(#FFFFFF, #1C1917);
  --tint: light-dark(rgba(107, 143, 113, .14), rgba(143, 184, 150, .16));
  --clay: light-dark(#8A5C43, #D4A088);
  --line: light-dark(rgba(61, 52, 44, .13), rgba(245, 240, 232, .12));
  --line-strong: light-dark(#8D877E, #857D73);
  --plum: light-dark(#8B4A5E, #CF8FA0);
  --sage: light-dark(#6B8F71, #8FB896);
  --terra: light-dark(#9A6B51, #C99478);
  --slate: light-dark(#5E7A8C, #9DB4C4);
  --wood: light-dark(#8A6E55, #6B5442);
  --rule: light-dark(rgba(94, 122, 140, .16), rgba(157, 180, 196, .12));
  --bezel: light-dark(#2B2622, #0E0C0B);
  --bezel-edge: light-dark(#4A423B, #3A3430);
  --halo: light-dark(rgba(61, 52, 44, .22), rgba(0, 0, 0, .55));
  --shadow: 0 2px 6px light-dark(rgba(61, 52, 44, .08), rgba(245, 240, 232, .06)), 0 24px 60px var(--halo);
}
html.light { color-scheme: light; }
html.dark { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.draft { /* new copy ria will replace; no styling on purpose */ }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 1.35rem/1 var(--serif); text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 10px 14px; border-radius: 999px; font: 500 .875rem/1 var(--sans); color: var(--soft); text-decoration: none; }
.nav-links a:hover { color: var(--ink); background: var(--tint); }
.nav-links .btn { color: var(--on-accent); padding: 0 18px; min-height: 40px; margin-left: 6px; }
.nav-links .btn:hover { background: var(--accent); }
@media (max-width: 760px) { .nav-links a:not(.btn):not([href="login.html"]) { display: none; } }

/* buttons, tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 500 1rem/1.2 var(--sans); text-decoration: none; background: var(--accent); color: var(--on-accent); }
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--tint); filter: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 .75rem/1.4 var(--sans); letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.live { background: var(--tint); color: var(--accent); }
.tag.testing { background: light-dark(rgba(154, 107, 81, .14), rgba(212, 160, 136, .16)); color: var(--clay); }
.tag.coming { color: var(--soft); border: 1px dashed var(--line-strong); }
.tag.coming::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

/* sections */
section { padding: clamp(56px, 9vw, 112px) 0; }
section.band { background: var(--band); }
.head { display: grid; gap: 14px; max-width: 40rem; margin-bottom: clamp(32px, 5vw, 56px); }
.head h2 { font: 600 clamp(1.75rem, 3.6vw, 2.5rem)/1.12 var(--serif); letter-spacing: -.015em; }
.head p { font: 400 1.1875rem/1.55 var(--serif); color: var(--soft); }
.eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 .8125rem/1 var(--sans); color: var(--soft); }

/* hero */
.hero { padding-top: clamp(36px, 6vw, 80px); overflow: hidden; }
.hero .wrap { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.hero h1 { font: 600 clamp(2.25rem, 5.4vw, 3.75rem)/1.08 var(--serif); letter-spacing: -.02em; }
.hero .sub { font: 400 1.25rem/1.55 var(--serif); color: var(--soft); margin-top: 20px; max-width: 32rem; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* device frames */
.phone { --w: var(--pw, 250px); position: relative; flex: none; width: var(--w); aspect-ratio: 9 / 19; padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .15); background: var(--bezel); box-shadow: inset 0 0 0 1.5px var(--bezel-edge), var(--shadow); }
.phone::after { content: ''; position: absolute; z-index: 3; top: calc(var(--w) * .052); left: 50%; width: calc(var(--w) * .26); height: calc(var(--w) * .05); transform: translateX(-50%); border-radius: 99px; background: var(--bezel); }
.scr { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .12); background: var(--bg); color: var(--ink); font: 400 calc(var(--w) / 22)/1.4 var(--sans); text-align: left; }
.laptop { --w: var(--lw, 640px); width: var(--w); flex: none; }
.lid { padding: calc(var(--w) * .012) calc(var(--w) * .012) calc(var(--w) * .016); border-radius: calc(var(--w) * .02) calc(var(--w) * .02) 4px 4px; background: var(--bezel); box-shadow: inset 0 0 0 1.5px var(--bezel-edge), var(--shadow); }
.lscr { aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--w) * .008); background: var(--bg); color: var(--ink); font: 400 calc(var(--w) / 70)/1.4 var(--sans); text-align: left; display: flex; flex-direction: column; }
.deck { width: 108%; margin: 0 0 0 -4%; height: calc(var(--w) * .022); border-radius: 0 0 calc(var(--w) * .04) calc(var(--w) * .04); background: linear-gradient(light-dark(#D4CDC0, #4A433D), light-dark(#B3AC9F, #2C2724)); }

/* the pairing used in every device section: laptop big, phone beside or over it */
.pair { --lw: min(680px, 100vw - 32px); --pw: min(250px, 100vw - 96px); display: flex; flex-direction: column; align-items: center; gap: 40px; }
.pair .laptop { order: 2; }
.pair .phone { order: 1; }
@media (min-width: 960px) {
  .pair { --lw: clamp(480px, 50vw, 720px); --pw: clamp(190px, 17vw, 250px); flex-direction: row; align-items: flex-end; justify-content: center; gap: 0; }
  .pair .laptop { order: 1; }
  .pair .phone { order: 2; margin: 0 0 calc(var(--lw) * .022 + 4px) 14px; z-index: 2; }
  .hero .pair { --lw: clamp(300px, 28vw, 410px); --pw: calc(var(--lw) * .48); justify-content: flex-start; }
}
.caption { margin-top: 20px; text-align: center; font: 500 .875rem/1.4 var(--sans); color: var(--soft); }

/* app UI inside the frames. em sizes only. */
.ic { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.a-status { height: 2.6em; flex: none; }
.a-top { display: flex; align-items: center; gap: .6em; height: 2.6em; padding: 0 1.2em; border-bottom: 1px solid var(--line); flex: none; font: 600 1.15em/1 var(--serif); }
.a-top img { width: 1.3em; height: 1.3em; }
.a-body { flex: 1; min-height: 0; padding: 1.2em 1.2em 0; overflow: hidden; position: relative; }
.a-h { font: 600 1.9em/1.1 var(--serif); letter-spacing: -.015em; }
.a-h2 { font: 600 1.15em/1.25 var(--serif); }
.a-meta { font: 500 .8em/1.4 var(--sans); color: var(--soft); }
.a-small { font: 400 .85em/1.45 var(--sans); color: var(--soft); }
.a-prose { font: 400 1em/1.55 var(--serif); font-size: 1.05em; }
.a-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1em; padding: 1em; }
.a-btn { display: flex; align-items: center; justify-content: center; min-height: 2.9em; border-radius: 99px; border: 1px solid var(--line-strong); font: 500 .9em/1.1 var(--sans); padding: 0 1em; white-space: nowrap; }
.a-btn.p { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.a-sticky { display: flex; gap: .6em; padding: .8em 1.2em; border-top: 1px solid var(--line); background: var(--bg); flex: none; }
.a-sticky .a-btn { flex: 1; }
.a-sticky .a-btn.p { flex: 1.4; }
.a-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: .5em .4em .9em; border-top: 1px solid var(--line); background: var(--bg); flex: none; }
.a-tab { display: grid; justify-items: center; gap: .1em; font: 500 .72em/1.3 var(--sans); color: var(--soft); }
.a-tab .pill { display: grid; place-items: center; width: 4em; height: 2em; border-radius: 99px; }
.a-tab .ic { width: 1.35em; height: 1.35em; }
.a-tab.on { color: var(--ink); font-weight: 600; }
.a-tab.on .pill { background: var(--tint); }
.a-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.a-chip { display: inline-flex; align-items: center; gap: .5em; min-height: 2.4em; padding: 0 1em; border-radius: 99px; border: 1px solid var(--line-strong); font: 400 .95em/1 var(--serif); font-size: 1em; }
.a-chip.on { background: var(--tint); border: 2px solid var(--accent); font-weight: 600; padding: 0 calc(1em - 1px); }
.a-chip.add { border-style: dashed; color: var(--soft); }
.dot { width: .7em; height: .7em; border-radius: 50%; background: var(--c); flex: none; }
.dot.ring { background: none; box-shadow: inset 0 0 0 .13em var(--soft); }

/* the shelf */
.shelf { margin-top: 1.4em; }
.books { display: flex; align-items: flex-end; gap: .4em; padding: 0 .6em; }
.book { position: relative; width: 3.7em; height: var(--h); border-radius: .4em .4em .15em .15em; background: var(--c); display: flex; justify-content: center; padding-top: .7em; font: 600 1.05em/1.1 var(--serif); box-shadow: inset -.2em 0 0 rgba(0, 0, 0, .13); }
.book::after { content: ''; position: absolute; left: .5em; right: .5em; bottom: 1.1em; height: .13em; border-radius: 1px; background: rgba(253, 252, 249, .38); }
.book.add { background: none; border: .1em dashed var(--line-strong); color: var(--soft); align-items: center; padding: 0; box-shadow: none; font: 400 1.6em/1 var(--sans); }
.book.add::after { display: none; }
.book:not(.add) { color: light-dark(#FDFCF9, #1C1917); }
.plank { height: .65em; border-radius: .2em; background: var(--wood); }
.shelf .a-meta { text-align: center; margin-top: .7em; }

/* bars, timeline, words */
.rows { display: grid; gap: 1em; }
.who { display: flex; align-items: center; gap: .5em; margin-bottom: .2em; }
.who b { font: 600 1.1em/1.2 var(--serif); }
.who .a-meta { margin-left: auto; }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; height: 3.2em; border-bottom: 1px solid var(--line); }
.bars i { justify-self: center; width: .95em; height: calc(var(--n) * .62em); min-height: .5em; border-radius: .25em .25em 0 0; background: var(--c); }
.bars i[style*="--n:0"] { visibility: hidden; }
.axis { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font: 500 .75em/1.4 var(--sans); color: var(--soft); margin-top: .3em; }
.events { list-style: none; padding: 0; margin: .6em 0 0; position: relative; }
.events::before { content: ''; position: absolute; left: .32em; top: .7em; bottom: .7em; width: 1px; background: var(--line-strong); opacity: .5; }
.events li { display: grid; grid-template-columns: .75em 4em 1fr; gap: .8em; align-items: baseline; padding: .3em 0; font-size: .9em; }
.events li::before { content: ''; width: .7em; height: .7em; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 .15em var(--c); }
.events li:first-child::before { background: var(--c); }
.events .when { font: 500 .85em/1.4 var(--sans); color: var(--soft); white-space: nowrap; }
.words { font: 400 1.05em/1.7 var(--serif); }
.words s { text-decoration: none; color: var(--line-strong); margin: 0 .2em; }
.kind { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; min-height: 1.9em; font-size: .9em; }
.track { position: relative; height: 1em; margin-right: .5em; background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.track .seg { position: absolute; top: calc(50% - 1px); height: 2px; left: calc(min(var(--a), var(--b)) * 100%); width: calc((max(var(--a), var(--b)) - min(var(--a), var(--b))) * 100%); background: var(--line-strong); }
.track .was, .track .now { position: absolute; top: .1em; width: .8em; height: .8em; margin-left: -.4em; border-radius: 50%; }
.track .was { left: calc(var(--a) * 100%); background: var(--surface); box-shadow: inset 0 0 0 .14em var(--soft); }
.track .now { left: calc(var(--b) * 100%); background: var(--accent); }

/* write page */
.paper { padding: 0 1em 1em; border: 1px solid var(--line); border-radius: 1em; background-color: var(--surface); background-image: linear-gradient(transparent calc(1.8em - 1px), var(--rule) 0); background-size: 100% 1.8em; background-position: 0 1em; font: 400 1.05em/1.8 var(--serif); }
.paper p { padding-top: 1em; }
.paper p + p { padding-top: 0; }
.caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: var(--accent); }
.q { font: italic 400 1.3em/1.35 var(--serif); }
.links { display: flex; flex-wrap: wrap; gap: .9em; font: 500 .85em/1 var(--sans); color: var(--clay); text-decoration: underline; text-underline-offset: .25em; }

/* calendar (library month) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .8em; }
.stats div { background: var(--surface); border: 1px solid var(--line); border-radius: .8em; padding: .5em; text-align: center; font: 500 .7em/1.3 var(--sans); color: var(--soft); }
.stats b { display: block; font: 600 1.7em/1.1 var(--serif); color: var(--ink); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15em; margin-top: .7em; text-align: center; font: 500 .75em/1 var(--sans); color: var(--soft); }
.cal span { display: grid; justify-items: center; align-content: center; gap: .3em; height: 2.9em; border-radius: .6em; color: var(--ink); }
.cal span.h { height: 1.6em; color: var(--soft); }
.cal span i { width: .8em; height: .8em; border-radius: 50%; background: var(--c); }
.cal span.dim { color: var(--soft); opacity: .6; }
.cal span.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.gentle { display: flex; align-items: center; justify-content: space-between; margin-top: .8em; padding: .7em .9em; border-radius: 1em; background: var(--tint); font: 500 .9em/1.2 var(--sans); }
.gentle .dots { display: flex; gap: .3em; }
.gentle .dots i { width: .6em; height: .6em; border-radius: 50%; background: var(--accent); opacity: .85; }
.gentle .dots i.o { opacity: .25; }

/* circle */
.mem { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; }
.mem span { padding: .25em .8em; border-radius: 99px; background: var(--tint); font: 500 .8em/1.4 var(--sans); }
.react { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .7em; }
.react span { padding: .3em .75em; border-radius: 99px; border: 1px solid var(--line-strong); font: 500 .75em/1.3 var(--sans); }
.react span.on { background: var(--tint); border-color: var(--accent); color: var(--accent); }
.pg { margin-top: .7em; }
.pg .a-meta { display: flex; justify-content: space-between; }

/* steps */
.steps { display: grid; gap: 28px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: 18px; align-content: start; }
.step .n { font: 600 .8125rem/1 var(--sans); color: var(--clay); }
.step h3 { font: 600 1.5rem/1.2 var(--serif); }
.step p { font: 400 1.0625rem/1.5 var(--serif); color: var(--soft); }
.piece { --w: 300px; font-size: calc(var(--w) / 22); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.2em; min-height: 11em; display: grid; align-content: center; gap: .9em; box-shadow: 0 1px 2px rgba(61, 52, 44, .05); }
.piece .paper { padding-bottom: .6em; }
.piece .shelf { margin-top: 0; }
.piece .a-btn { width: max-content; margin-inline: auto; }

/* feature cards */
.cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card { display: grid; gap: 12px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.card h3 { font: 600 1.375rem/1.2 var(--serif); }
.card p { color: var(--soft); font: 400 1.0625rem/1.5 var(--serif); }
a.card { text-decoration: none; transition: transform .2s, border-color .2s; }
a.card:hover { border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { a.card:hover { transform: translateY(-3px); } }
.card .kick { font: 500 .8125rem/1.3 var(--sans); color: var(--soft); }
.card .ask { font: italic 400 1.1875rem/1.4 var(--serif); color: var(--ink); }
.card .go { font: 500 .875rem/1 var(--sans); color: var(--clay); text-decoration: underline; text-underline-offset: .25em; }

/* device sections */
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; } .split.flip { grid-template-columns: auto minmax(0, 1fr); } .split.flip > :first-child { order: 2; } }
.duo-phones { display: flex; gap: clamp(16px, 4vw, 40px); justify-content: center; flex-wrap: wrap; --pw: min(250px, 100vw - 96px); }
.facts { display: grid; gap: 14px; margin-top: 24px; list-style: none; padding: 0; }
.facts li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font: 400 1.1875rem/1.4 var(--serif); }
.facts li:last-child { border-bottom: 1px solid var(--line); }

/* made by, final, footer */
.made { text-align: center; }
.made p { font: 400 1.25rem/1.5 var(--serif); }
.made a { color: var(--clay); text-underline-offset: .25em; }
.final .wrap { display: grid; justify-items: center; gap: 20px; text-align: center; padding: clamp(32px, 6vw, 64px) 16px; border-radius: 28px; background: var(--tint); }
.final img { width: 48px; height: 48px; }
.final h2 { font: 600 clamp(1.75rem, 3.6vw, 2.5rem)/1.15 var(--serif); letter-spacing: -.015em; }
.final p { font: 400 1.1875rem/1.5 var(--serif); color: var(--soft); }
footer { padding: 40px 0 64px; border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { font: 500 .9375rem/1.2 var(--sans); color: var(--soft); text-decoration: none; padding: 10px 0; }
footer a:hover { color: var(--ink); }
footer small { color: var(--soft); font: 400 .8125rem/1.4 var(--sans); }