/* Identity v4 (sky and peach) with the bold edges approved for this site on 2026-11-01.
   Source: ~/projects/personal-brand/DESIGN.md. Mobile first; desktop overrides at the bottom. */
:root {
  --ink: #231F20;
  --paper: #FFFDF6;
  --peach: #FFA58A;
  --lime: #D9EE83;
  --sky: #A9D3F0;
  --edge: 4px solid var(--ink);
  --gutter: 16px;
  --mesh:
    radial-gradient(52% 62% at 6% 16%, #F4AC83 0, #F4AC8300 100%),
    radial-gradient(46% 56% at 4% 82%, #7FA8EA 0, #7FA8EA00 100%),
    radial-gradient(44% 50% at 42% 8%, #F6E6DE 0, #F6E6DE00 100%),
    radial-gradient(48% 62% at 62% 100%, #F6B493 0, #F6B49300 100%),
    radial-gradient(44% 62% at 100% 22%, #7FA8EA 0, #7FA8EA00 100%),
    linear-gradient(120deg, #BFE1F5, #A9D3F0);
  --display: 'Bricolage Grotesque', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 500 17px/1.5 'Inter Tight', Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }

/* ---------- Hero ---------- */

/* Every layer needs its own size, or the gradient tiles into bands. */
.hero {
  border-bottom: var(--edge);
  padding: 20px var(--gutter) 44px;
  background-color: var(--sky);
  background-image: var(--mesh);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero {
    background-size: 170% 170%, 170% 170%, 170% 170%, 170% 170%, 170% 170%, 170% 170%;
    animation: drift 26s ease-in-out infinite alternate;
  }
  @keyframes drift {
    from { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    to { background-position: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
  }
}

.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.address {
  background: var(--paper);
  border: var(--edge);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 4px 12px;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* 44px tall so they are easy to tap on phones; nowrap stops "Say hi" breaking onto two lines at 320px. */
.nav-links { display: flex; gap: 4px 14px; list-style: none; font-weight: 700; white-space: nowrap; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 3px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--ink); }

.slab {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: .02em .13em .09em;
  transform: rotate(-2deg);
}

/* Hero drawing. The name is laid over the visible part of the middle screen (right of the hair),
   sized in container units so it stays on the screen at any width. */
.hero-art { position: relative; container-type: inline-size; width: 100%; max-width: 760px; margin: 14px auto 18px; }
.hero-art img { display: block; width: 100%; height: auto; }
/* Live screens on the drawing's monitors. The outer layer covers the whole drawing and is masked to the traced
   screen shape, so its edges are exact. The inner box carries the content and follows the screen's tilt.
   Corners on the 1600px image: left TL 222,38 TR 525,24 BL 234,237; right TL 1020,27 TR 1313,35 BL 1014,242.
   Sizes are in container units (cqw) so everything scales with the drawing. */
.screen {
  position: absolute;
  inset: 0;
  text-align: left;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.screen-in {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: .5cqw;
  padding: 0 .9cqw .6cqw;
  transform-origin: 0 0;
  font: 700 1.15cqw/1.25 'Inter Tight', Arial, sans-serif;
}
/* The title bar bleeds past the box; the mask trims it to the screen edge. */
.screen-bar { margin: -2cqw -2cqw .2cqw; padding: 2.25cqw 2.9cqw .35cqw; background: var(--sky); border-bottom: .25cqw solid var(--ink); }
.screen-ads { -webkit-mask-image: url(../assets/img/screen-mask-left.png); mask-image: url(../assets/img/screen-mask-left.png); background: var(--paper); }
.screen-ads .screen-in { left: 13.88%; top: 4.62%; width: 18.96%; height: 24.2%; transform: rotate(-2.65deg) skewX(.8deg); }
.screen-ads-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6cqw; flex: 1; padding-right: 1.4cqw; }
.screen-ads-row b { display: grid; place-items: end start; padding: .3cqw; border: .2cqw solid var(--ink); font-size: 1cqw; background: var(--peach); }
.screen-ads-row b:nth-child(2) { background: var(--sky); }
.screen-ads-row b:nth-child(3) { background: var(--lime); }
.screen-cap { font-size: 1cqw; }
.screen-bot { -webkit-mask-image: url(../assets/img/screen-mask-right.png); mask-image: url(../assets/img/screen-mask-right.png); background: #141517; }
.screen-bot .screen-in { left: 63.75%; top: 3.28%; width: 18.32%; height: 26.1%; transform: rotate(1.56deg) skewX(.5deg); gap: .1cqw; color: var(--paper); font: 500 1cqw/1.25 ui-monospace, Menlo, monospace; }
.screen-bot .screen-bar { margin-bottom: .4cqw; color: var(--ink); font-family: 'Inter Tight', Arial, sans-serif; font-weight: 700; }
.screen-bot span { color: var(--sky); }
.screen-bot .ok { color: var(--lime); padding-left: 1.2em; }
.screen-bot .no { color: var(--peach); padding-left: 1.2em; }

@media (prefers-reduced-motion: no-preference) {
  /* The terminal types its lines one by one, the ads pop in, then both loop. */
  .screen-bot p:not(.screen-bar) { animation: type-line 9s steps(18) infinite backwards; }
  .screen-bot p:nth-child(3) { animation-delay: .9s; }
  .screen-bot p:nth-child(4) { animation-delay: 1.8s; }
  .screen-bot p:nth-child(5) { animation-delay: 2.7s; }
  .screen-bot p:nth-child(6) { animation-delay: 3.6s; }
  .screen-bot p:nth-child(7) { animation-delay: 4.5s; }
  @keyframes type-line { 0% { clip-path: inset(0 100% 0 0); } 8%, 100% { clip-path: inset(0 0 0 0); } }
  .screen-ads-row b, .screen-cap { animation: ad-pop 6s cubic-bezier(.3, 1.6, .5, 1) infinite backwards; }
  .screen-ads-row b:nth-child(2) { animation-delay: .5s; }
  .screen-ads-row b:nth-child(3) { animation-delay: 1s; }
  .screen-cap { animation-delay: 1.6s; }
  @keyframes ad-pop { 0% { opacity: 0; scale: .6; } 8%, 85% { opacity: 1; scale: 1; } 95%, 100% { opacity: 0; scale: 1; } }
}
.desk { position: relative; display: flex; flex-direction: column; }
.desk-center { position: relative; z-index: 1; text-align: center; }
.line { font: 800 clamp(30px, 3.6vw, 52px)/1.04 var(--display); letter-spacing: -.02em; max-width: 17ch; margin: 0 auto; }
.hand {
  font: 600 clamp(25px, 2.4vw, 32px)/1.1 Caveat, cursive;
  margin-top: 12px;
  transform: rotate(-1.5deg);
}
.sub { max-width: 46ch; font-size: 18px; margin: 18px auto 24px; }

/* Windows. Phones: a pile of three above the headline. Desktop: scattered round the edges. */
.windows { position: relative; height: 330px; margin-top: 34px; }
.win {
  position: absolute;
  width: 64%;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: grab;
  user-select: none;
  transform: rotate(var(--tilt, 0deg));
}
.win.is-dragging { cursor: grabbing; box-shadow: 9px 9px 0 var(--ink); }
.win-bar { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-bottom: 3px solid var(--ink); background: var(--sky); font-weight: 700; touch-action: none; }
.win-bar i { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--peach); }
.win-bar i:nth-child(2) { background: var(--lime); }
.win-bar i:nth-child(3) { background: var(--paper); }
.win-bar span { margin-left: 6px; }
.win-body { padding: 10px 12px 12px; }
.win-chat { --tilt: -2deg; left: 0; top: 0; width: 62%; }
.win-note { --tilt: 2deg; right: 0; top: 22px; width: auto; }
.win-mood { --tilt: 1.5deg; right: 0; top: 168px; width: 80%; }

.chat { display: grid; gap: 6px; }
.chat p { padding: 4px 9px; border: 2px solid var(--ink); max-width: 88%; }
.chat .me { justify-self: end; background: var(--lime); }
.chat .ai { background: var(--sky); }
.win-note { padding: 8px 12px; background: var(--lime); font: 600 20px/1.05 Caveat, cursive; }
.win-note .nope { font-size: 18px; text-align: right; }
.mood { display: flex; flex-wrap: wrap; gap: 6px; }
.pin { padding: 3px 7px; border: 2px solid var(--ink); background: #FFE7DD; font-size: 13px; }
.pin:nth-child(2) { transform: rotate(2deg); background: #E3F0FB; }
.angle { width: 100%; margin-top: 4px; font: 600 20px/1 Caveat, cursive; }

@media (prefers-reduced-motion: no-preference) {
  /* Pop open on load, then bob gently. */
  .win { animation: win-open .5s cubic-bezier(.3, 1.6, .5, 1) backwards, bob 4.5s ease-in-out .6s infinite alternate; }
  .win-mood { animation-duration: .5s, 5.5s; }
  .win-note { animation-duration: .5s, 3.8s; }
  @keyframes bob { to { transform: rotate(var(--tilt, 0deg)) translateY(-10px); } }
  .win:nth-child(2) { animation-delay: .12s; }
  .win:nth-child(3) { animation-delay: .24s; }
  .win:nth-child(4) { animation-delay: .36s; }
  .win:nth-child(5) { animation-delay: .48s; }
  @keyframes win-open { from { opacity: 0; scale: .7; } }
  }

.button {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: var(--edge);
  padding: 14px 22px;
  font: 700 17px/1.2 'Inter Tight', Arial, sans-serif;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--paper);
  cursor: pointer;
}
.button:hover { background: var(--paper); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.button:disabled { opacity: .6; cursor: wait; }

/* ---------- Sections ---------- */

.section { padding: 48px var(--gutter); }
.section h2 { font: 800 clamp(34px, 4.4vw, 60px)/1 var(--display); letter-spacing: -.02em; margin: 14px 0 16px; }
.intro { max-width: 60ch; margin-bottom: 28px; }

.tag { display: inline-block; border: 3px solid var(--ink); padding: 1px 12px; font-weight: 700; }
.tag-paper { background: var(--paper); }
.seen { background: var(--sky); }
.bet { background: var(--lime); }
.proven { background: var(--peach); }

.cards { display: grid; gap: 22px; list-style: none; }
.card { border: var(--edge); box-shadow: 8px 8px 0 var(--ink); padding: 22px; background: var(--paper); }
.card h3 { font: 800 26px/1.1 var(--display); margin: 14px 0 8px; }

/* Currently open tabs: a browser window drawn with the same bold edges. */
/* Centred sections: heading and intro in the middle, content block centred at full reading width. */
#tabs, .brain > h2, .brain > .intro { text-align: center; }
#tabs .intro, .brain > .intro { margin-left: auto; margin-right: auto; }
.browser { border: var(--edge); box-shadow: 8px 8px 0 var(--ink); background: var(--paper); max-width: 1120px; margin: 0 auto; text-align: left; }
/* The strip scrolls sideways on its own, so the page never does. */
.tabstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 10px 0;
  background: var(--sky);
  border-bottom: var(--edge);
}
.tabstrip::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  border: var(--edge);
  border-bottom: 0;
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
  padding: 8px 14px 10px;
  font: 700 16px/1 'Inter Tight', Arial, sans-serif;
  cursor: pointer;
  opacity: .7;
}
.tab[aria-selected="true"] { background: var(--lime); opacity: 1; }
.tab:hover { opacity: 1; }
.panel { padding: 22px; }
/* 3D brain accents (Envato Elements, owner's licence). Decorative, so alt is empty. */
.panel-art { display: block; width: 140px; height: auto; margin: -6px 0 6px auto; }
.panel-lead { font: 800 clamp(24px, 3vw, 34px)/1.1 var(--display); margin-bottom: 12px; max-width: 28ch; }
.panel p + p { max-width: 56ch; }
.news { border-top: var(--edge); background: var(--peach); }
.news-card { border: var(--edge); box-shadow: 8px 8px 0 var(--ink); background: var(--paper); padding: 24px; max-width: 860px; margin: 0 auto; text-align: center; }
.news-card .signup { max-width: 620px; margin-left: auto; margin-right: auto; }
.news-card h2 { margin-top: 0; }
.news-card > p { max-width: 56ch; margin: 0 auto 18px; }

.freebies { display: grid; gap: 20px; margin-top: 18px; }
.freebie { border: var(--edge); padding: 20px; background: var(--paper); }
.freebie h3 { font: 800 24px/1.1 var(--display); margin: 12px 0 8px; }
.freebie.soon { background: var(--lime); align-self: start; }
.panel > .button { margin-top: 20px; box-shadow: 6px 6px 0 var(--peach); }

/* clip, not hidden: hidden would break the sticky brain. Stops the phone glow adding sideways scroll. */
.brain { overflow-x: clip; border-top: var(--edge); background: var(--sky); background-image: var(--mesh); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }

/* Scroll-lit brain. Levels are cumulative: 1 front lobe, 2 back lobe, 3 lower lobe, 4 everything.
   It floats on the gradient: never put it in a box. */
.brain-layout { display: grid; gap: 24px; }
.brain-figure { position: sticky; top: 8px; z-index: 2; margin: 0 auto; width: 100%; max-width: 340px; perspective: 1100px; }
/* Phones: the steps scroll up behind the brain, so a soft glow (not a box) keeps their text from showing through. */
.brain-figure::before {
  content: "";
  position: absolute;
  inset: -18% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, #C4DDF2 62%, #C4DDF200 100%);
}
.brain-svg { display: block; width: 100%; max-height: var(--brain-h, 250px); overflow: visible; }
.spark-lines path { fill: none; stroke: var(--ink); stroke-width: 26; stroke-linecap: round; opacity: 0; transition: opacity .4s ease; }

/* Each lobe lights up as soft colour spots that fade in and keep drifting slowly. */
.ink path { fill: var(--ink); }
.spots-layer { mix-blend-mode: color; }
.spots { opacity: 0; transition: opacity 1.1s ease; }
.spots circle { transform-box: fill-box; transform-origin: center; }
[data-level="1"] .spots-builder, [data-level="2"] .spots-builder, [data-level="3"] .spots-builder, [data-level="4"] .spots-builder,
[data-level="2"] .spots-maker, [data-level="3"] .spots-maker, [data-level="4"] .spots-maker,
[data-level="3"] .spots-meet, [data-level="4"] .spots-meet, [data-level="4"] .spots-all { opacity: 1; }
[data-level="4"] .spark-lines path { opacity: 1; }

/* 3D feel: shading clipped to the brain, a floor shadow, and a tilt in depth per level.
   Blend and clip sit on separate groups (same Chrome quirk as the spots). */
.shade-lo { mix-blend-mode: multiply; opacity: .55; }
.brain-floor { transform-box: fill-box; transform-origin: center; }
.brain-svg { transition: rotate 1s cubic-bezier(.3, 1.3, .5, 1); }
[data-level="1"] .brain-svg { rotate: .3 1 0 16deg; }
[data-level="2"] .brain-svg { rotate: .3 -1 0 16deg; }
[data-level="3"] .brain-svg { rotate: -1 0 0 14deg; }

/* Gentle turn toward each lobe as it switches on (owner request, past the 2 degree tilt rule). */
.brain-turn { transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.3, 1.3, .5, 1); }
[data-level="1"] .brain-turn { transform: rotate(-4deg); }
[data-level="2"] .brain-turn { transform: rotate(3deg); }
[data-level="3"] .brain-turn { transform: rotate(-2deg) translateY(-4px); }

.brain-labels { position: relative; display: flex; justify-content: space-between; font: 600 24px/1 Caveat, cursive; margin-top: 4px; }
.label { opacity: .3; transition: opacity .4s ease; }
.label-all {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  background: var(--ink);
  color: var(--paper);
  padding: 2px 10px 4px;
  transform: rotate(-2deg);
  opacity: 0;
}
[data-level="1"] .label-builder, [data-level="2"] .label-builder, [data-level="3"] .label-builder, [data-level="4"] .label-builder,
[data-level="2"] .label-maker, [data-level="3"] .label-maker, [data-level="4"] .label-maker,
[data-level="3"] .label-meet, [data-level="4"] .label-meet,
[data-level="4"] .label-all { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .spots circle { animation: drift-spot 9s ease-in-out infinite alternate; }
  .spots circle:nth-child(2) { animation-duration: 12s; animation-delay: -3s; }
  .spots circle:nth-child(3) { animation-duration: 15s; animation-delay: -6s; }
  .brain-float { animation: float 5s ease-in-out infinite alternate; }
  .brain-floor { animation: floor 5s ease-in-out infinite alternate; }
  @keyframes float { to { transform: translateY(-28px); } }
  @keyframes floor { to { transform: scale(.82); opacity: .6; } }
  [data-level="4"] .brain-svg { animation: buzz 1.6s ease-in-out infinite alternate; }
  [data-level="4"] .spark-lines path { animation: blink 1.4s ease-in-out infinite; }
  @keyframes drift-spot { from { transform: translate(-60px, -36px) scale(.9); } to { transform: translate(60px, 40px) scale(1.12); } }
  @keyframes buzz { from { transform: rotate(-1deg) scale(1); } to { transform: rotate(1deg) scale(1.02); } }
  @keyframes blink { 50% { opacity: .25; } }
}
@media (prefers-reduced-motion: reduce) {
  .spots, .label, .spark-lines path, .brain-turn { transition: none; }
  .brain-turn { transform: none !important; }
  .brain-svg { rotate: none !important; transition: none; }
}

.brain-steps { position: relative; z-index: 1; display: grid; gap: 55vh; padding: 30vh 0 20vh; }
/* Phones: the bubble is too tall to read while it scrolls past, so it pins just under the brain
   (8px top + 250px brain + labels) while you scroll past the empty runway after it (plus the grid gap).
   A margin would not work: sticky never moves an element's margin box past its container. Desktop resets this. */
.brain-steps .take { position: sticky; top: calc(var(--brain-h, 250px) + 68px); align-self: start; margin: 0; }
/* Short phones (iPhone SE and smaller): a smaller brain so the pinned bubble fits under it. */
@media (max-width: 859px) and (max-height: 740px) { .brain { --brain-h: 150px; } }
@media (max-width: 859px) and (max-height: 600px) {
  .brain { --brain-h: 110px; }
  .brain .take { padding: 34px 9% 36px; }
  .brain .take p:not(.take-hand) { font-size: 20px; }
}
.take-runway { height: 1px; }

/* Steps float on the gradient, no boxes: outlined number, a marker swipe in the lobe's colour, a small tilt each. */
.step-builder { --hl: #6FB0F2; transform: rotate(-1.5deg); }
.step-maker { --hl: #B9E04A; transform: rotate(1.5deg); }
.step-meet { --hl: #FF946F; transform: rotate(-1deg); }
.step-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 800 clamp(36px, 9vw, 58px)/1 var(--display); }
.step-num { font-size: .62em; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.step mark {
  color: var(--ink);
  background: linear-gradient(176deg, transparent 50%, var(--hl) 50%, var(--hl) 90%, transparent 90%);
  padding: 0 .1em;
}
.step:not(.take) p { margin-top: 14px; max-width: 32ch; font-size: 19px; line-height: 1.45; font-weight: 500; }
/* brain.js adds is-live, then is-on as each step scrolls in, so it pops up into place. */
.brain-steps.is-live .step { opacity: .2; translate: 0 36px; transition: opacity .5s ease, translate .7s cubic-bezier(.3, 1.5, .5, 1); }
.brain-steps.is-live .step.is-on { opacity: 1; translate: 0 0; }
.brain-steps.is-live .step.is-past { opacity: 0; transition-duration: .35s; }

/* The hot take is the brain's thought: a bubble with a dot trail that points back at the brain.
   Phones: the brain is above, so the trail goes up. Desktop: the brain is to the left. */
.take {
  position: relative;
  margin-top: 64px;
  max-width: 620px;
  border: var(--edge);
  border-radius: 40% 44% 42% 46% / 34% 38% 36% 40%;
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--paper);
  padding: 48px 12% 54px;
  text-align: center;
}
.take p:not(.take-hand) { font: 800 clamp(23px, 2.8vw, 34px)/1.15 var(--display); margin-top: 14px; }
.take-hand { display: inline-block; font: 600 30px/1 Caveat, cursive; margin-top: 12px; transform: rotate(-3deg); }
.trail { position: absolute; left: 36%; bottom: 100%; width: 0; height: 0; }
.trail i { position: absolute; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.trail i:nth-child(1) { width: 26px; height: 20px; left: -6px; bottom: 6px; }
.trail i:nth-child(2) { width: 17px; height: 14px; left: -22px; bottom: 36px; }
.trail i:nth-child(3) { width: 10px; height: 10px; left: -32px; bottom: 58px; }
/* Pops out of the brain: the dots appear from the brain outward, then the bubble grows from the trail. */
.brain-steps.is-live .take { scale: .55; transform-origin: 36% 0; transition: opacity .4s ease .25s, translate .6s ease .25s, scale .6s cubic-bezier(.3, 1.6, .5, 1) .25s; }
.brain-steps.is-live .take.is-on { scale: 1; }
.brain-steps.is-live .take.is-past { opacity: 0; transition: opacity .35s ease; }
.brain-steps.is-live .trail i { scale: 0; transition: scale .3s cubic-bezier(.3, 1.8, .5, 1); }
.brain-steps.is-live .is-on .trail i { scale: 1; }
.brain-steps.is-live .is-on .trail i:nth-child(2) { transition-delay: .08s; }
.brain-steps.is-live .is-on .trail i:nth-child(1) { transition-delay: .16s; }


.signup { margin-top: 20px; }
/* Bot trap field: off screen rather than display:none, which some bots skip. */
.signup .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup label { display: block; font: 800 20px/1.1 var(--display); margin-bottom: 12px; }
.signup-row { display: grid; gap: 14px; }
.signup input {
  width: 100%;
  min-width: 0;
  border: var(--edge);
  background: var(--paper);
  padding: 13px 14px;
  font: 500 17px 'Inter Tight', Arial, sans-serif;
  color: var(--ink);
}
.signup .button { box-shadow: 6px 6px 0 var(--peach); }
.fine { margin-top: 12px; font-size: 15px; }
.status { margin-top: 6px; font-weight: 700; min-height: 1.5em; }

/* Placeholder for copy the owner has to supply; loud on purpose so it isn't shipped by accident. */
.insert { margin: 0 0 22px; padding: 10px 12px; border: 3px dashed var(--ink); font-weight: 700; background: var(--peach); }
.panel .insert { margin: 16px 0 0; }

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 22px var(--gutter);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

/* Footer fuel: drawn icons in paper ink on the dark footer, with tiny loops (steam, fizz, tab shuffle). */
.fuel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fuel-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fuel-icon { width: 34px; height: 34px; flex: none; overflow: visible; fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fuel-coffee .cup { fill: var(--peach); }
.fuel-can .can { fill: #D8DCE0; }
.fuel-can .stripe { fill: #E2343F; stroke: none; }
.fuel-can .fizz { fill: var(--paper); stroke: none; }
.fuel-tabs .tab-back { fill: var(--sky); }
.fuel-tabs .tab-front { fill: var(--lime); }
.fuel-tabs path { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .fuel-coffee .steam { animation: steam 2.4s ease-in-out infinite; }
  @keyframes steam { 0%, 100% { opacity: .2; translate: 0 2px; } 50% { opacity: 1; translate: 0 -1px; } }
  .fuel-can .fizz { animation: fizz 1.8s ease-in infinite; }
  .fuel-can .fizz:nth-of-type(2) { animation-delay: .6s; }
  .fuel-can .fizz:nth-of-type(3) { animation-delay: 1.2s; }
  @keyframes fizz { from { opacity: 0; translate: 0 6px; } 40% { opacity: 1; } to { opacity: 0; translate: 0 -4px; } }
  .fuel-tabs .tab-back { animation: shuffle 3.2s ease-in-out infinite; }
  @keyframes shuffle { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 3px -2px; } 90% { translate: -1px 0; } }
}

/* ---------- Desktop ---------- */

@media (min-width: 860px) {
  :root { --gutter: clamp(24px, 4vw, 56px); }
  .hero { padding-top: 28px; padding-bottom: 68px; }
  .desk { min-height: 640px; justify-content: center; padding: 24px 0; }
  .hero-art { width: max(480px, min(900px, 100vw - 600px)); max-width: none; }
  .desk-center { max-width: 720px; margin: 0 auto; }
  .windows { position: absolute; inset: 0; height: auto; margin: 0; pointer-events: none; }
  .win { pointer-events: auto; width: 250px; }
  .win-chat { --tilt: 1.5deg; left: 1%; top: auto; bottom: 110px; width: 250px; }
  .win-mood { --tilt: -1.5deg; right: 1%; top: auto; bottom: 130px; width: 250px; }
  .win-note { --tilt: -2deg; left: auto; right: 3%; top: auto; bottom: 0; width: auto; font-size: 22px; }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .card:nth-child(2) { transform: rotate(-1deg); }
  .signup-row { grid-template-columns: minmax(0, 1fr) auto; }
    .panel { padding: 32px; }
  .has-art { position: relative; padding-right: 240px; min-height: 230px; }
  .panel-art { position: absolute; right: 24px; top: 50%; width: 200px; margin: 0; transform: translateY(-50%) rotate(-2deg); }
  .freebies { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .brain-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .brain-figure { top: 10vh; max-width: 640px; z-index: 0; }
  .brain-figure::before { content: none; }
  .step-maker { margin-left: 12%; }
  .step:not(.take) p { font-size: 20px; }
  .brain-svg { max-height: min(540px, 64vh); }
  .brain-labels { font-size: 30px; margin-top: 10px; }
  /* Extra room so the last card can reach the middle of the screen and switch the full brain on. */
  .brain-steps { gap: 30vh; padding: 10vh 0 25vh; }
  .brain-steps .take { position: relative; top: auto; }
  .take-runway { display: none; }
  .take { padding: 56px 11% 60px; }
  .brain-steps.is-live .take { transform-origin: 0 40%; }
  .trail { left: auto; right: 100%; bottom: auto; top: 38%; }
  .trail i:nth-child(1) { left: auto; bottom: auto; right: -6px; top: -4px; width: 38px; height: 30px; }
  .trail i:nth-child(2) { left: auto; bottom: auto; right: 46px; top: -34px; width: 26px; height: 21px; }
  .trail i:nth-child(3) { left: auto; bottom: auto; right: 88px; top: -56px; width: 16px; height: 14px; }
  }