/* ═══════════════════════════════════════════════════════════════════════
   Bhesh — landing page

   The palette and the type are not chosen here. They are the look card's own:
   near-black ground, one bright paper surface, brass hairline, Bricolage set
   against a serif. The card is the product; a site that looked like something
   else would be advertising a different app.

   The one bold move is the hero, where the model's garments leave his body and
   become the wardrobe. Everything around it is deliberately quiet — hairlines,
   space, no glow, no gradient, no stars.
   ═══════════════════════════════════════════════════════════════════════ */

/* 60 / 30 / 10 — the same split as the app, because a person meets this page and
   that app within a minute of each other.
   60  --bg              the ground
   30  --surface, --paper  raised panels, and the look card's own cream
   10  --brand + --go    identity, and the one thing to do

   Brass stays the brand: it is printed on every card that leaves this app, so it
   is not ours to swap. --go is reserved for what we are asking the visitor to
   do -- start, and subscribe -- and appears nowhere else on the page. The
   moment it also marks a heading or a hover state it stops meaning anything. */
:root {
  --bg:        #0E0F12;
  --surface:   #16181D;
  --surface-2: #1E2128;
  --line:      #262A32;
  --line-firm: #333844;
  --paper:     #F3F1EC;   /* the cards' own ground — never changes */
  --ink:       #ECEAE4;
  --soft:      #94908A;
  --dim:       #6A675F;
  --brand:     #C89050;   /* the card's brass, lifted for dark */
  --go:        #0FAE84;   /* actions only — start, subscribe */
  --on-go:     #05221A;
  --accent:    var(--brand);
  --rust:      #9C5433;   /* the card's occasion label */

  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;

  --pad: clamp(20px, 5vw, 76px);
  --gutter: min(1320px, 100% - var(--pad) * 2);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  background: var(--paper); color: #1B1813;
  padding: 10px 16px; border-radius: 8px; font-weight: 600;
}

section { display: grid; grid-template-columns: var(--gutter); justify-content: center; }
section > * { grid-column: 1; }

/* ── nav ───────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 30px;
  padding: 16px var(--pad);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.mark {
  font-weight: 800; font-size: 15px; letter-spacing: .16em;
  text-decoration: none; margin-right: auto;
}

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14.5px; color: var(--soft); text-decoration: none;
  transition: color .18s;
}
.nav-links a:hover { color: var(--ink); }

.nav-cta {
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  padding: 9px 20px; border-radius: 999px;
  border: 1px solid var(--line-firm);
  transition: border-color .2s, background .2s, color .2s;
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(20px, 3vw, 40px);
  align-items: center;
}

.hero { padding-bottom: clamp(30px, 4vw, 54px); }

.eyebrow {
  font-size: 11.5px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 22px;
}

h1 em { font-style: normal; color: var(--accent); }

h1 {
  font-size: clamp(42px, 7.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 300;
  margin: 0 0 26px;
}

.count {
  font-weight: 800;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 20.5px);
  line-height: 1.62;
  color: var(--soft);
  max-width: 34em;
  margin: 0 0 34px;
}

/* start form ─ a real field, because the app's first screen is this field
   and sending someone to a blank one they have to find is a wasted step. */
.start {
  display: flex; align-items: center; gap: 0;
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  max-width: 440px;
  transition: border-color .2s;
}
.start:focus-within { border-color: var(--accent); }

.cc { color: var(--dim); font-size: 16px; margin-right: 9px; }

.start input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--ink); font: inherit; font-size: 16px;
  padding: 12px 0;
}
.start input::placeholder { color: var(--dim); }

.start button {
  flex: none;
  background: var(--go); color: var(--on-go);
  border: 0; border-radius: 999px;
  padding: 13px 28px;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: transform .18s, background .18s;
}
.start button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.start button:active { transform: translateY(0); }

.fineprint { font-size: 13.5px; color: var(--dim); margin: 14px 0 0; }

/* Full gutter width so it starts at the page's left margin; the paragraph
   inside carries the reading limit. Putting both on one element made max-width
   win over width, and the note drifted into the middle of the page. */
.hero-note { width: var(--gutter); margin: 0 auto clamp(58px, 7vw, 104px); }
.hero-note p {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; color: var(--dim);
  max-width: 56ch;
  padding-left: 17px;
  border-left: 1px solid var(--line-firm);
}


/* ── the wheel ────────────────────────────────────────────────────────────
   Twenty cards laid on the rim of a circle whose centre sits far below the
   fold. `rotate(θ) translateY(-R)` puts each card on the rim AND tilts it
   tangentially in one transform -- the tilt is not a separate fudge, it falls
   out of the position.

   The twenty are the same ten twice. Turning the rim by exactly ten steps
   arrives at an arrangement identical to the start, so the loop is seamless
   with no JavaScript and no clone-shuffling.

   The hub is a disc of the page's own background sitting over the cards'
   inner ends. It is what draws the clean arc along the bottom. */

.wheel {
  /* A tight radius bends the fan into a horseshoe. What reads as a fan is a
     circle far larger than the viewport, showing only a shallow slice of arc. */
  --r: 1900px;           /* rim radius */
  --step: 6deg;          /* angle between neighbours */
  --cw: 268px;           /* card width */
  --drop: 214px;         /* how far the top card sits below the band's top */

  position: relative;
  height: clamp(342px, 39vw, 560px);
  overflow: hidden;
  margin-bottom: clamp(26px, 3vw, 44px);
}

.rim {
  position: absolute;
  left: 50%; top: calc(var(--r) + var(--drop));
  width: 0; height: 0;
  animation: turn 68s linear infinite;
}

.wc {
  position: absolute;
  left: 0; top: 0;
  width: var(--cw); height: auto;
  /* The rim is a zero-size origin point, so the global `img { max-width:100% }`
     resolves to 100% of nothing and collapses every card. */
  max-width: none;
  margin-left: calc(var(--cw) / -2);
  margin-top: calc(var(--cw) * -0.703);      /* half of a 460x647 card */
  border-radius: 13px;
  background: var(--paper);
  box-shadow:
    0 0 0 1px rgba(200, 144, 80, .20),
    0 26px 52px -20px rgba(0, 0, 0, .95);
  /* Centred on ten so the visible arc starts filled rather than sliding in. */
  transform: rotate(calc((var(--i) - 9.5) * var(--step))) translateY(calc(var(--r) * -1));
}

@keyframes turn { to { transform: rotate(calc(var(--step) * -10)); } }

.hub {
  position: absolute;
  left: 50%; top: calc(var(--r) + var(--drop));
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1);
  border-radius: 50%;
  background: var(--bg);
  transform: scale(.908);          /* just inside the cards' lower ends */
}

@media (max-width: 900px) {
  .wheel { --r: 1060px; --cw: 176px; --drop: 148px; --step: 6.4deg; }
}

/* ── section furniture ────────────────────────────────────────────────── */

.sec-h {
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 400;
  margin: 0 0 16px;
  max-width: 20ch;
}

.sec-sub {
  font-family: var(--serif);
  font-size: 17.5px; line-height: 1.62;
  color: var(--soft);
  max-width: 60ch;
  margin: 0 0 clamp(38px, 5vw, 66px);
}

/* ── how ───────────────────────────────────────────────────────────────── */

.how { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(40px, 4.5vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.steps li { position: relative; }

.num {
  display: block;
  font-size: 12px; letter-spacing: .2em; font-weight: 600;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.step-art {
  height: 340px;
  border-radius: 14px;
  margin-bottom: 22px;
  display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px 16px 0;
}
/* Real screens off the running app. They are cropped by the frame rather than
   scaled down to fit, so the type in them stays the size it really is. */
.step-art img { width: 100%; border-radius: 9px 9px 0 0; }

.steps h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -.012em;
  margin: 0 0 9px;
}
.steps p { margin: 0; color: var(--soft); font-size: 15.5px; }

/* ── proof ─────────────────────────────────────────────────────────────── */

.proof { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }

.figures {
  margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.figures > div { background: var(--bg); padding: 30px 26px 28px; }

.figures dt {
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 300; letter-spacing: -.045em; line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.figures dt span { font-size: .44em; letter-spacing: -.01em; color: var(--accent); margin-left: 2px; }

.figures dd {
  margin: 12px 0 14px;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
}
.figures p {
  margin: 0; font-size: 14.5px; line-height: 1.58; color: var(--soft);
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* ── cards ─────────────────────────────────────────────────────────────── */

.cards {
  padding: clamp(56px, 8vw, 104px) 0;
  border-top: 1px solid var(--line);
}
.cards-copy .sec-sub { margin-bottom: clamp(34px, 4vw, 52px); }

.deck {
  display: flex; gap: clamp(14px, 2.4vw, 34px);
  justify-content: center;
  padding: 10px 0 24px;
}
.deck img {
  width: min(30%, 300px);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(200, 144, 80, .22),
    0 34px 66px -26px rgba(0, 0, 0, .95);
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.deck img:nth-child(1) { transform: rotate(-3.2deg) translateY(16px); }
.deck img:nth-child(3) { transform: rotate(3.2deg)  translateY(16px); }
.deck img:hover { transform: rotate(0) translateY(-6px); }

@media (max-width: 700px) {
  .deck {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 2px;
    margin-inline: calc(var(--pad) * -1);
    padding-left: var(--pad); padding-right: var(--pad);
  }
  .deck img { width: 63vw; flex: none; scroll-snap-align: center; transform: none; }
  .deck img:nth-child(1), .deck img:nth-child(3) { transform: none; }
}

/* ── more ──────────────────────────────────────────────────────────────── */

.more { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }

.feats {
  display: grid; gap: clamp(24px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.feats article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px 26px;
  transition: border-color .25s, transform .25s;
}
.feats article:hover { border-color: var(--line-firm); transform: translateY(-3px); }
.feats h3 {
  font-size: 19px; font-weight: 600; margin: 0 0 10px;
  letter-spacing: -.012em;
}
.feats h3::before {
  content: ""; display: block;
  width: 22px; height: 1px; background: var(--accent);
  margin-bottom: 16px;
}
.feats p { margin: 0; font-size: 15px; color: var(--soft); }

/* ── pricing ───────────────────────────────────────────────────────────── */

.price { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }

.plans {
  display: grid; gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  max-width: 860px;
}
.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
}
.plan.lead { border-color: rgba(200, 144, 80, .42); background: var(--surface-2); }

.tag {
  position: absolute; top: -10px; left: 26px;
  background: var(--accent); color: #14110C;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
}
.plan h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
           color: var(--accent); margin: 0 0 12px; font-weight: 600; }
.amt { font-size: 44px; font-weight: 300; letter-spacing: -.04em; margin: 0 0 22px; }
.amt span { font-size: 15px; letter-spacing: 0; color: var(--soft); margin-left: 8px; }

.plan ul { list-style: none; margin: 0 0 22px; padding: 0; }
.plan li {
  font-size: 15px; color: var(--soft);
  padding: 9px 0 9px 22px; position: relative;
  border-bottom: 1px solid var(--line);
}
.plan li:last-child { border-bottom: 0; }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 8px; height: 1px; background: var(--accent);
}

/* Filled = the action. It used to be the card's cream, which is beautiful and
   passive: a pale rounded thing on a dark page reads as decoration, not as the
   one place to press. Ghost buttons stay outlined, so Free and Premium sit in a
   clear order rather than shouting together. */
.btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--go); color: var(--on-go);
  border-radius: 999px; padding: 14px 26px;
  font-size: 15px; font-weight: 600;
  transition: transform .18s, background .18s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn.ghost {
  background: none; color: var(--ink);
  border: 1px solid var(--line-firm);
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: none; }
.btn.big { padding: 17px 44px; font-size: 16.5px; display: inline-block; }

/* Fills the shorter plan's column rather than letting the button float at the
   bottom of an empty box. It is the plan's actual pitch, not filler. */
.pitch {
  flex: 1;
  font-family: var(--serif); font-size: 19px; line-height: 1.45;
  color: var(--ink); margin: 0 0 26px;
  padding-top: 20px; border-top: 1px solid var(--line);
  max-width: 16ch;
}
.plan.lead ul { margin-bottom: 0; }

.honest { font-size: 13px; color: var(--dim); margin: 14px 0 0; text-align: center; }

/* ── close ─────────────────────────────────────────────────────────────── */

.close {
  padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 5vw, 70px);
  border-top: 1px solid var(--line);
  align-items: center;
  text-align: center;
}

.close-copy h2 {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.08; letter-spacing: -.032em; font-weight: 300;
  margin: 0 0 18px;
}
/* `margin: 0 auto 32px`, and the auto has to live in this shorthand rather than
   in a margin-inline above it: the shorthand sets both side margins, so an
   earlier `margin-inline: auto` was being cancelled by this very rule. The line
   then sat hard against the left edge of its own 40ch column while the heading
   and the button either side of it stayed centred. */
.close-copy p {
  font-family: var(--serif); font-size: 18px; color: var(--soft);
  max-width: 40ch; margin: 0 auto 32px;
}

/* ── foot ──────────────────────────────────────────────────────────────── */

.foot {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: baseline;
  padding: 30px var(--pad) 44px;
  border-top: 1px solid var(--line);
}
.foot .mark { margin-right: 0; color: var(--soft); }
.tagline {
  font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--dim);
}

/* ── reveal ────────────────────────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(20px); }
.rise.seen {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .rise { opacity: 1; transform: none; }
  .rim { animation: none; }
}


/* ── legal pages ──────────────────────────────────────────────────────────
   One measure, generous leading, and the same paper-and-brass vocabulary as
   everything else. These are the pages someone reads when they are worried
   about their money or their photographs, so they are set to be read rather
   than to be got past. */

.legal {
  width: min(720px, 100% - var(--pad) * 2);
  margin: clamp(46px, 7vw, 88px) auto clamp(60px, 8vw, 104px);
}
.legal h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 300;
  margin: 0 0 14px;
}
.stamp {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 40px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.legal h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  margin: 38px 0 12px; color: var(--ink);
}
.legal p, .legal li {
  font-family: var(--serif);
  font-size: 16.5px; line-height: 1.68; color: var(--soft);
}
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 600; }

.pairs { margin: 0 0 18px; }
.pairs > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 6px 24px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.pairs dt {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--ink);
}
.pairs dd {
  margin: 0; font-family: var(--serif); font-size: 15.5px;
  line-height: 1.6; color: var(--soft);
}
@media (max-width: 620px) {
  .pairs > div { grid-template-columns: 1fr; gap: 4px; }
}

/* An unfilled business detail must be impossible to miss on a rendered page —
   these are the fields that fail activation, and a grey blank would ship. */
mark.todo {
  background: rgba(200, 144, 80, .16);
  color: var(--accent);
  border: 1px dashed rgba(200, 144, 80, .5);
  border-radius: 5px;
  padding: 1px 7px;
  font-family: var(--sans); font-size: 13px; font-style: normal;
}

.foot { align-items: center; }
.foot-links {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-right: auto;
}
.foot-links a {
  font-size: 13.5px; color: var(--soft); text-decoration: none;
  transition: color .18s;
}
.foot-links a:hover { color: var(--accent); }

/* The price anchor. Brass, not --go: it is a fact about the price, and --go
   belongs to the button below it. One accent per decision. */
.plan .anchor {
  margin: -10px 0 20px;
  font-size: 14px; font-weight: 650; color: var(--accent);
  letter-spacing: -.005em;
}