/* ---------- the landing page ----------

   REBUILT 4 Sep 2026. The first version borrowed login.css and drew six
   bordered cards on a flat charcoal ground, in none of the brand's six
   colours. Kiana: "The landing page looks dead and shitty. I don't like it at
   all... make sure to make use of our brand colors. We have a fucking rainbow
   palette. Don't constrain yourself too much with the old ways."

   Three things carry this page, and only three:

   1. THE CONSOLE. The fader from the wordmark, six of them, one per room, in
      nav order so the band runs the spectrum. It is the reader's own object,
      a mixing desk, and it is the only large graphic on the page.
   2. THE TINT. Each room panel sits on its own accent mixed 7% into the
      surface, with that accent as a hard rule along its top edge. Six panels
      that are quietly six colours, rather than six grey boxes.
   3. AIR. The old page was cramped because it inherited a 392px login column.
      Sections here breathe at 76px and the hero opens at 88.

   What is NOT here, on purpose: no giant numbers. BOLD's big-type answer was
   rejected on sight in July, so the life on this page comes from colour and
   composition, not from scale. The headline is 56px at its widest, which is
   what off-beat's own hero measures.

   Everything else, the ink ladder, .btn, .mono, .mark and the focus ring,
   comes from styles.css, so the page cannot drift from the app it sells. */

.landing-body{
  /* The app's body already lays two faint radials, purple and blue. A page
     whose whole argument is the palette gets four more, one per remaining
     accent, placed down the page so the ground shifts hue as you scroll
     instead of sitting still. All are under 6%: this has to read as light in
     the room, never as a gradient anyone would name. */
  background:
    radial-gradient(1200px 620px at 78% -14%, color-mix(in srgb, var(--acc-home) 11%, transparent), transparent 62%),
    radial-gradient(900px 520px at -6% 12%, color-mix(in srgb, var(--acc-book) 8%, transparent), transparent 58%),
    radial-gradient(1000px 560px at 96% 46%, color-mix(in srgb, var(--acc-catalog) 5%, transparent), transparent 58%),
    radial-gradient(900px 520px at -10% 74%, color-mix(in srgb, var(--acc-career) 5%, transparent), transparent 58%),
    radial-gradient(1000px 560px at 84% 98%, color-mix(in srgb, var(--acc-revenue) 6%, transparent), transparent 60%),
    var(--bg);
  /* NOT background-attachment:fixed. Six radial layers repainted every frame
     tore visibly on scroll here, and iOS Safari ignores it on the body
     anyway. Unfixed, the stack paints once over the full page height, which
     is what the percentages were written for: the ground shifts hue as you
     go down rather than sitting still behind a moving page. */
}

/* THE APP'S <main> IS THE SHELL'S, NOT THIS PAGE'S.
   styles.css line 505 gives every main a 1180px cap and a clamped 20-56px
   side padding, for a page that sits to the right of a rail. This page has no
   rail, so that inherited padding shifted everything inside main 45px left of
   the header and the footer, which centre themselves on the body. Reset it,
   and let the one width rule below do the work for all three. */
.lmain{ max-width:none; padding:0; min-width:0 }

/* One column, one width, set once. Every direct child of main and the two
   bars use it, so nothing on the page has its own idea of the margin. */
.ltop, .lmain > *, .lfoot{
  width:100%; max-width:1060px; margin-inline:auto;
  padding-inline:var(--s6); box-sizing:border-box;
}

/* ---------- the two bars ---------- */

.ltop{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding-top:var(--s6); padding-bottom:var(--s6);
}
.ltop-nav{ display:flex; align-items:center; gap:var(--s5) }

.lockup{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink);
}
.lockup .word{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:600; font-size:19px; letter-spacing:.01em; line-height:1;
  color:var(--ink);
}
.lockup.small .word{ font-size:16px }
/* THE HYPHEN IS STRUCTURE, NOT PUNCTUATION. off-beat's wordmark lights its
   hyphen in the signature colour, and this is its sibling. */
.lockup .word .dash{ color:var(--brand) }
.lockup:hover .word{ color:var(--ink) }

/* .linkish lives in login.css, which this page no longer loads, so it is
   restated here. The coarse-pointer block in styles.css floors it at 44px. */
.linkish{
  color:var(--ink-2); text-decoration:none;
  font-size:13.5px; font-weight:500; white-space:nowrap;
}
.linkish:hover, .linkish:focus-visible{ color:var(--page,var(--brand)) }

/* ---------- the hero, and the console inside it ----------

   Two columns, and the second one is the whole reason the page is not dead:
   the first version put the headline in a 392px column and left the right half
   of a 1280px screen empty. The console fills it with the product's own mark. */

.hero{
  padding-top:56px; padding-bottom:var(--s8);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:var(--gap-col); align-items:center;
}

/* THE KICKER, borrowed from off-beat and used for every section head on this
   page. Mono, small, widely tracked, with a rule that runs out to the right
   edge: it says "a section starts here" without spending a heading size on it,
   which is how a page stays this quiet and still has structure. */
.kicker{
  display:flex; align-items:center; gap:var(--s4);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 var(--s5);
}
.kicker .rule{
  flex:1; height:1px; min-width:24px;
  background:linear-gradient(to right, var(--line), transparent);
}

.hero h1{
  /* 54 at the top end is roughly off-beat's own hero measure. It is not BOLD's
     answer: nothing else on the page goes above 25, so the headline carries
     the size alone and no data ever wears it. */
  font-size:clamp(32px, 4.6vw, 54px);
  line-height:1.06; letter-spacing:-.025em;
  max-width:13ch;
  text-wrap:balance;
  margin:0 0 var(--s5);
}
/* em is already Fraunces italic in --page, which falls back to the brand
   purple: the one serif word on the page, and the only place the headline
   takes a colour. */
.hero h1 em{ letter-spacing:-.01em }

.hero .lede{
  color:var(--ink-2);
  font-size:16.5px; line-height:1.55;
  max-width:42ch;
  margin:0 0 var(--s7);
}

.cta{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s5);
  margin:0 0 var(--s4);
}
.btn.big{ padding:11px 22px; font-size:14.5px }

.hero-note{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}

/* ---------- the console ---------- */

.console{ --h:196px }
.deck{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:var(--s3);
  padding:var(--s7) var(--s5) var(--s5);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  /* a face, not a card: darker than the surface so the lit faders are the
     brightest thing in it, with one throw of the signature purple behind */
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-2) 82%, transparent);
  box-shadow:var(--shadow);
}
.ch{ display:flex; flex-direction:column; align-items:center; gap:var(--s4) }

.fader{
  position:relative; display:block;
  width:14px; height:var(--h);
  border-radius:7px;
  /* a SLOT, cut into the face: darker than the panel behind it, with a
     hairline lip. A track lighter than its surround reads as an unfilled bar
     chart, which is the one thing this graphic must not look like. */
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent);
}
.fader .lit{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--f) * var(--h));
  border-radius:7px;
  /* brightest under the cap and only slightly drained at the foot: a fader
     that fades out at the bottom reads as unlit rather than set low */
  background:linear-gradient(to top,
    color-mix(in srgb, var(--acc) 68%, transparent),
    var(--acc));
  transform-origin:50% 100%;
  transform:scaleY(0);
  animation:fader-rise .78s cubic-bezier(.2,.85,.25,1) forwards;
  animation-delay:calc(var(--i) * 85ms);
}
.fader .knob{
  position:absolute; left:50%; bottom:calc(var(--f) * var(--h));
  width:34px; height:11px; margin-left:-17px; margin-bottom:-5.5px;
  border-radius:5px;
  /* a cap, lit along its own top edge the way a moulded fader knob is */
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--acc) 78%, var(--ink)),
    var(--acc) 55%,
    color-mix(in srgb, var(--acc) 74%, var(--bg)));
  /* a dark seam so the cap reads as an object sitting on the track rather
     than as a wider piece of the same bar, and one soft throw of its own
     colour underneath so six caps light the face */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg) 60%, transparent),
    0 8px 24px -6px var(--acc);
  opacity:0;
  animation:knob-rise .78s cubic-bezier(.2,.85,.25,1) forwards;
  animation-delay:calc(var(--i) * 85ms);
}
@keyframes fader-rise{ to{ transform:scaleY(1) } }
@keyframes knob-rise{
  from{ opacity:0; transform:translateY(calc(var(--f) * var(--h))) }
  to  { opacity:1; transform:translateY(0) }
}

.chname{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--acc) 60%, var(--ink-3));
  text-align:center; line-height:1.1;
}

/* ---------- sections ---------- */

.sec{ padding-top:76px }
/* every section head on this page is a kicker, so h2 has to be reset back off
   its global size; the heading level is structure, the mono line is the look */
h2.kicker{ font-weight:400 }

/* ---------- the six rooms ----------

   Not a grid of bordered cards. Each panel is its own accent mixed into the
   surface, with the accent itself as a hard rule along the top edge. Seven
   per cent is enough that six panels read as six colours side by side and
   little enough that a single panel never reads as coloured. */

.rooms{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(268px, 1fr));
  gap:var(--gap-box);
}
.room{
  position:relative; overflow:hidden;
  background:color-mix(in srgb, var(--acc) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--acc) 20%, var(--line-soft));
  border-radius:var(--radius);
  padding:var(--pad-card);
  transition:background var(--t), border-color var(--t);
}
.room::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--acc);
}
.room:hover{
  background:color-mix(in srgb, var(--acc) 11%, var(--surface));
  border-color:color-mix(in srgb, var(--acc) 38%, var(--line-soft));
}
.rname{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc);
  margin:0 0 var(--s3);
}
.room h3{ font-size:19px; margin:0 0 var(--s2) }
.room p{ color:var(--ink-2); font-size:14.5px; line-height:1.55; margin:0 }

/* ---------- the import band, and the limit ----------

   Both are the same shape: a label column and a prose column, filling the
   full 1060 rather than trailing off at the halfway mark. The first version
   of this page left the whole lower right of a desktop screen empty, which is
   most of what "dead" meant. */

.band, .honest-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap-col); align-items:center;
}

.band{
  background:color-mix(in srgb, var(--acc) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--acc) 20%, var(--line-soft));
  border-radius:var(--radius);
  padding:var(--s7) var(--s7) var(--s8);
}
.band-said h3{ font-size:22px; letter-spacing:-.015em; margin:0 0 var(--s3); max-width:20ch }
.band-said p{
  color:var(--ink-2); font-size:14.5px; line-height:1.6; max-width:44ch; margin:0;
}
.chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s3);
}
.chips li{
  padding:10px 16px;
  border:1px solid color-mix(in srgb, var(--acc) 30%, var(--line-soft));
  border-radius:999px;
  background:color-mix(in srgb, var(--acc) 10%, var(--surface));
  color:color-mix(in srgb, var(--acc) 62%, var(--ink));
  font-size:12px; letter-spacing:.04em; line-height:1;
}

.honest-row h3{
  font-size:22px; letter-spacing:-.015em; margin:0; max-width:20ch;
}
.honest-row p{
  color:var(--ink-2); font-size:15px; line-height:1.6; max-width:52ch; margin:0;
  padding-left:var(--s5);
  /* one plain grey rail, the only block on the page with no accent */
  border-left:2px solid var(--line);
}

/* ---------- the price ----------

   The same band shape as the import block and the limit, so the lower half of
   the page keeps one rhythm rather than inventing a layout per section. It
   wears Revenue's orange, which is the room money already lives in, so the
   colour is not decoration: a reader who has been in the app knows that hue
   means money before they read a word of this. */

.price{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--gap-col); align-items:center;
  background:color-mix(in srgb, var(--acc) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--acc) 20%, var(--line-soft));
  border-radius:var(--radius);
  padding:var(--s7);
}
.price-fig{
  display:flex; align-items:baseline; gap:8px;
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:600; font-size:42px; line-height:1; letter-spacing:-.03em;
  color:var(--ink);
  /* a price is a figure in a column of one, but tabular digits still stop the
     9s and the 3 from setting at different widths against the currency */
  font-variant-numeric:tabular-nums;
  margin:0 0 var(--s3);
}
.price-fig .cur{
  font-size:12px; font-weight:400; letter-spacing:.1em;
  color:var(--acc); align-self:flex-start; margin-top:4px;
}
.price-fig .per{
  font-family:"Inter",system-ui,sans-serif;
  font-size:14px; font-weight:400; letter-spacing:0; color:var(--ink-3);
}
.price-what{ color:var(--ink-2); font-size:14.5px; line-height:1.55; margin:0; max-width:32ch }

.price-lines{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s4);
}
.price-lines li{
  color:var(--ink-2); font-size:14.5px; line-height:1.55;
  padding-left:var(--s4);
  border-left:2px solid color-mix(in srgb, var(--acc) 32%, var(--line-soft));
}
.price-lines b{ color:var(--ink); font-weight:600 }

/* ---------- the close ----------

   The six accents flattened into one six-stop rule along the top edge. It is
   the console's palette said a second time, in a single stroke, and the only
   place on the page where all six touch. */

.close{ padding-top:96px; padding-bottom:var(--s8) }
.close-panel{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:var(--s8) var(--s7);
  background:
    radial-gradient(90% 160% at 12% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%),
    var(--surface);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s7);
}
.close-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right,
    var(--acc-home)    0%,  var(--acc-home)    16.66%,
    var(--acc-book)    16.66%, var(--acc-book)    33.33%,
    var(--acc-career)  33.33%, var(--acc-career)  50%,
    var(--acc-catalog) 50%,    var(--acc-catalog) 66.66%,
    var(--acc-revenue) 66.66%, var(--acc-revenue) 83.33%,
    var(--acc-voice)   83.33%, var(--acc-voice)   100%);
}
.close-panel h2{
  font-size:clamp(22px, 2.8vw, 28px); letter-spacing:-.02em;
  max-width:16ch; text-wrap:balance; margin:0 0 var(--s2);
}
.close-panel p:not(.cta){ color:var(--ink-3); font-size:14.5px; margin:0 }
.close-panel .cta{ margin:0 }

/* ---------- the foot ---------- */

.lfoot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s4);
  padding-top:var(--s5); padding-bottom:var(--s7);
  border-top:1px solid var(--line-soft);
  /* the rule has to reach the same 1060 the content does, so the border sits
     on the padded box rather than on a full-bleed parent */
  margin-top:var(--s7);
}
.lfoot .mono{ font-size:11.5px; letter-spacing:.06em; color:var(--ink-3) }

/* ---------- narrow ---------- */

@media(max-width:940px){
  /* the console stops being a column beside the headline and becomes a band
     under it, which is also the order a phone reads them in */
  .hero{ grid-template-columns:1fr; gap:var(--s8); align-items:start }
  .hero h1{ max-width:16ch }
  .console{ --h:150px }
}
@media(max-width:760px){
  .band, .honest-row, .price{ grid-template-columns:1fr; gap:var(--s6) }
  .band, .price{ padding:var(--s6) }
  .honest-row p{ padding-left:var(--s4) }
  .close-panel{ padding:var(--s7) var(--s6); gap:var(--s6) }
}
@media(max-width:600px){
  .ltop, .lmain > *, .lfoot{ padding-inline:var(--s5) }
  .hero{ padding-top:var(--s7); padding-bottom:56px }
  .sec{ padding-top:56px }
  .close{ padding-top:64px }
  .close-panel h2{ max-width:none }
  /* six channels still fit a 375px screen; the tracks shorten so the console
     does not eat the whole second screenful */
  .console{ --h:132px }
  .deck{ gap:var(--s1); padding:var(--s6) var(--s3) var(--s4) }
  .fader{ width:11px }
  .fader .knob{ width:27px; height:10px; margin-left:-13.5px; margin-bottom:-5px }
  .chname{ font-size:8.5px; letter-spacing:.04em }
  /* the two calls to action stack rather than wrapping into a ragged row */
  .cta{ gap:var(--s4) }
}

/* Motion is decoration here: the faders say the same thing standing still. */
@media(prefers-reduced-motion:reduce){
  .fader .lit{ animation:none; transform:scaleY(1) }
  .fader .knob{ animation:none; opacity:1; transform:none }
}