@import url("fonts.css");

/* ============================================================================
   tiny space — design tokens
   Change a value here and it propagates everywhere. Nothing below hardcodes a
   colour, a face, or a radius.
   ========================================================================= */
:root {
  /* ==========================================================================
     Synced with unnamed-project/src/board/tokens.css. The board and this page
     are one system; when the tokens diverge, that file wins.

     1. ACCENTS ARE OUTLINES, NOT FILLS. Coral is what YOU owe. Lagoon is what
        IT did. An accent appears as a 1px border and as TEXT in its deep stop
        — never as a wash. Nothing large is ever flooded with colour.
     2. THE GROUND IS WHITE. Cream is only for things nested INSIDE a surface.
     3. HAIRLINES, NOT SHADOWS.
     4. RADII ARE UNEQUAL ON PURPOSE.

     The one FILL is INK: the primary button. It's the darkest thing on the
     page, so it wins attention without spending a colour to do it.
     ====================================================================== */

  /* --- ground --- */
  --paper:       #FFFFFF;
  --cream:       #F5F4F2;   /* nested inside a surface only: tab track, inputs */
  --cream-2:     #EDEBE7;   /* pressed / nested cream */
  --line:        #E6E3DE;
  --line-strong: #D5D0C8;
  --ink:         #171922;   /* not pure black — type wants a little warmth */
  --ink-2:       #6B665E;
  --ink-3:       #9C948A;

  /* --- coral: it's on YOU. Outline + deep text. */
  --coral:       #FF8A5B;
  --coral-hover: #FF7540;
  --coral-deep:  #C7401F;   /* links, focus rings, "you're needed" type  (5.0:1) */
  --coral-sub:   #FFE9DF;   /* the quietest coral ground */
  --on-coral:    #171922;   /* if it ever IS a fill, it carries ink      (7.5:1) */

  /* --- lagoon: the SYSTEM did it. Same split, same reason. */
  --lagoon:      #219EBC;
  --lagoon-deep: #126782;   /* system text on white                      (6.0:1) */
  --lagoon-sub:  #DCEFF5;
  --on-lagoon:   #171922;

  /* --- pastels: the blocks behind the photography, and nothing else. --- */
  --apricot: #F8DDCB;
  --sage:    #CFE0D0;
  --lilac:   #DED6EC;
  --sky:     #CFDDEE;
  --butter:  #F7E7B8;
  --red:     #B3261E;

  /* --- type: four faces, four jobs --- */
  --display: "Chillax", ui-rounded, "Avenir Next", system-ui, sans-serif;
  --body:    "Switzer", "Avenir Next", system-ui, sans-serif;
  --voice:   "Gambetta", "Iowan Old Style", Georgia, serif;
  --data:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --s1: .78rem; --s2: .92rem; --s3: 1.05rem; --s4: 1.3rem; --s5: 1.9rem;

  /* --- radii: unequal, on purpose --- */
  --r-chip:    0px;
  --r-panel:   14px;
  --r-card:    12px;
  --r-control: 999px;
  --r-input:   10px;

  --wrap: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121319; --cream: #1B1D26; --line: #33374A;
    --ink: #F3EFE8; --ink-2: #A19A90; --ink-3: #6E6960;
    /* Deep INVERTS its job on a dark ground: its role is legibility, not darkness. */
    --line-strong: #454A5F; --cream-2: #232633;
    --lagoon: #45B8D6; --lagoon-deep: #7CD4EA; --on-lagoon: #0E1018; --lagoon-sub: #143A46;
    /* coral still takes ink if it ever fills; the deep stop inverts and lightens */
    --coral: #FF8A5B; --coral-hover: #FFA07A; --coral-deep: #FFA98D;
    --coral-sub: #3C2419; --on-coral: #171922;
    --apricot: #4A3A31; --sage: #33443A; --lilac: #3A3448; --sky: #2C3A4A; --butter: #4A4130;
  }
}

/* ============================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* The [hidden] attribute is only a UA `display:none`, so ANY class that sets a
   display (flex, grid…) silently beats it and the element stays on screen. This
   one line is what makes every `hidden` in the demo actually hide. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--s3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; max-width: 62ch; }
a { color: var(--coral-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; border-radius: 2px; }

/* THE VOICE — every deck, and nothing else. */
.deck {
  font-family: var(--voice);
  font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

/* No tinted sections. The page is white from top to bottom, and the eye is
   carried by whitespace and imagery instead of by coloured bands. */
section { position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; }

/* ---------------------------------------------------------------------------
   IMAGERY — where ALL the colour lives.

   true.global's colour engine, exactly: a loud picture and a vivid shape sitting
   on a white page. Not a tinted section, not a wash — a saturated block, offset
   and tilted, with the photograph overlapping it. Each photo is paired with its
   COMPLEMENT (green forest → coral block, warm ridge → lagoon block) because that
   is what makes both of them ring.
--------------------------------------------------------------------------- */
.shot { position: relative; display: block; margin: 0; isolation: isolate; }

/* the vivid block */
.shot::before {
  content: "";
  position: absolute;
  inset: -6% 10% 12% -8%;
  border-radius: 22px;
  background: var(--block, linear-gradient(145deg, #FFC9B0, #FF9B76));
  transform: rotate(-4deg);
  z-index: -1;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;        /* REQUIRED. The width/height attributes on <img> land as a
                          presentational height, and aspect-ratio is only honoured
                          when height is auto — without this the ratio is ignored. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  transform: rotate(1.2deg);
}
/* mirrored, so two image blocks on one page don't lean the same way */
.shot.flip::before { inset: -6% -8% 12% 10%; transform: rotate(4deg); }
.shot.flip img { transform: rotate(-1.2deg); }

/* On a narrow screen the mirrored block's right:-8% pokes past the viewport, and
   because it's a pseudo-element nothing in the DOM shows it — it just silently
   widens the page and body{overflow-x:hidden} clips every element by 16px. Below
   880px the block goes back to the left, where there's room for it. */
@media (max-width: 880px) {
  .shot.flip::before { inset: -6% 10% 12% -8%; transform: rotate(-4deg); }
}

/* the two pairings */
.shot--coral  { --block: linear-gradient(145deg, #FFC9B0, var(--coral)); }
.shot--lagoon { --block: linear-gradient(145deg, #9BDCEF, #219EBC); }

/* ---------------------------------------------------------------------------
   SPLIT — picture one side, words the other. Deliberately unequal, and with a
   lot of air: on a white page the whitespace is the layout.
--------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1.05fr .95fr; }
}
.split-text { display: flex; flex-direction: column; gap: .7rem; }
.split-text h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.05; }

/* ============================================================================
   WORDMARK — the planet is hiding in the name.
   Dotless "ı" (U+0131) + an oversized lagoon disc for the tittle.
   ========================================================================= */
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
  display: inline-block;
  white-space: nowrap;
}
.tittle { position: relative; }
.tittle::after {
  content: "";
  position: absolute;
  left: 50%; bottom: .92em;
  width: .19em; height: .19em;
  margin-left: -.095em;
  border-radius: 50%;
  background: var(--lagoon);
}

/* ============================================================================
   THE MARK
   ========================================================================= */
.mark { display: block; overflow: visible; --ground: var(--paper); }
.mark .ring   { stroke: var(--ink); fill: none; stroke-width: 2.6; }
.mark .planet { fill: var(--lagoon); }
/* The moon must stay legible on two grounds: the paper behind the mark, and the
   planet's own face when it transits. Ink does both. The hairline of ground
   colour drawn UNDER the fill only stops it merging into the ring it rides. */
.mark .moon {
  fill: var(--ink);
  stroke: var(--ground);
  stroke-width: 1;
  paint-order: stroke;
}

/* Only the moon moves. A logo that spins as a whole is a fidget spinner. */
.moon-orbit {
  transform-box: fill-box;      /* without this the offset resolves against the
                                   viewBox origin and the moon lands nowhere */
  transform-origin: center;
  offset-path: path("M 57.03 21.89 A 27 9 -22 0 1 6.97 42.11 A 27 9 -22 0 1 57.03 21.89");
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: orbit 16s linear infinite;
}
@keyframes orbit { to { offset-distance: 100%; } }

/* ============================================================================
   NAV — a one-page site has nothing to navigate to.
   ========================================================================= */
.nav { padding-top: 1.4rem; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand .wordmark { font-size: 1.3rem; }

/* ============================================================================
   BUTTONS — lagoon fill carries INK, not white. See the token note.
   ========================================================================= */
.btn {
  font-family: var(--body); font-weight: 600; font-size: var(--s2);
  padding: .72rem 1.25rem;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-decoration: none;
  transition: transform .14s ease, background-color .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; }
/* MARKETING vs PRODUCT — the one place the two systems legitimately differ.
   .btn-primary is the page's call to action: coral, carrying ink (7.5:1; white on
   coral is 2.3:1 and fails). .btn-dark is the product's primary, and inside the
   mock screens ink is the ONLY fill there is — a working UI can't afford to spend
   a colour on a button it shows forty times. */
.btn-primary { background: var(--coral); border-color: var(--coral); color: var(--on-coral); }
.btn-primary:hover { background: var(--coral-hover); border-color: var(--coral-hover); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn-ghost:hover { border-color: var(--ink-3); }
/* the quiet second option: a hairline, never a second fill competing with the first */
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-sm { padding: .5rem .95rem; font-size: var(--s1); }

/* ============================================================================
   HERO — the whole page.

   One job: get an email address. Headline, the promise, the field, and one
   picture to keep it from feeling like a holding page. Nothing else exists.
   ========================================================================= */
.hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  display: flex; align-items: center;
  min-height: calc(100svh - 12rem);   /* the fold IS the site — fill it */
}
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero-text { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.02;
  max-width: 13ch;
}
/* the three promises, in the voice face. This is the only deck on the site. */
.hero .deck {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: none;
}

/* ============================================================================
   THE TWO AUDIENCES — the only thing below the fold.

   Same proposition, two buyers. Each gets a picture, a claim, and three lines.
   No numbering: these are parallel facts, not a sequence, and numbers that
   encode nothing are decoration.
   ========================================================================= */
section.band { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }

.split {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse > .shot { order: 2; }
}
.split-text { display: flex; flex-direction: column; gap: .7rem; }
.split-text h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.05; }
.split-text .deck { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink-2); }

.eyebrow {
  font-family: var(--data); font-size: var(--s1);
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
  margin: 0;
}

/* small print — the coding-agent compatibility line. Quiet, factual, in the mono
   voice so it reads as a spec note rather than a claim. */
.fine {
  margin-top: .4rem;
  font-family: var(--data);
  font-size: var(--s1);
  color: var(--ink-3);
  line-height: 1.5;
}

/* the spine band: the one place the idea is stated outright, now that the personas
   don't spell it out column by column. */
.spine { text-align: center; }
.spine-in { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.spine h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; }
.spine .deck { text-align: center; max-width: 48ch; }

/* ============================================================================
   CLOSING — the page has one job, so it asks twice
   ========================================================================= */
/* The border and padding belong to the SECTION; the centring belongs to the inner
   box. Putting both on one class meant the rule and the padding rendered twice. */
.close { border-top: 1px solid var(--line); padding: clamp(3rem, 7vw, 5rem) 0; }
.close-in {
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  text-align: center;
}
.close h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.1; }
.close .deck { text-align: center; max-width: 34ch; }

/* ============================================================================
   WAITLIST FORM
   ========================================================================= */
.signup { margin-top: .6rem; width: 100%; max-width: 32rem; }
.signup-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.signup input {
  flex: 1 1 15rem;
  font-family: var(--body); font-size: var(--s3);
  padding: .85rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
}
.signup input:hover { border-color: var(--ink-3); }
.signup .btn { padding: .85rem 1.5rem; font-size: var(--s3); }
.signup input::placeholder { color: var(--ink-3); }
.signup-msg { margin-top: .7rem; font-size: var(--s2); color: var(--lagoon-deep); font-weight: 600; }
.signup-msg[data-state="error"] { color: #B3261E; }

/* ============================================================================
   FOOTER
   ========================================================================= */
footer { padding: 2rem 0 3rem; }
.foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot small { color: var(--ink-3); font-family: var(--data); font-size: var(--s1); }

@media (prefers-reduced-motion: reduce) {
  .moon-orbit { animation: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}