/* ── page-only layout. Components come from system.css and the Astryx clone;
      nothing here restyles either. ─────────────────────────────────────── */
.page{max-width:74rem;margin-inline:auto;padding-inline:var(--space-5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-5)}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.wordmark span{color:var(--magenta)}

.hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(1rem,2.5vw,2.25rem) clamp(2rem,4vw,3.25rem);
}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,1.4rem+3.6vw,4rem);line-height:1.02;letter-spacing:-.025em;
  margin:var(--space-4) 0 0;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;
}
.hero h1 em{font-style:normal;color:var(--magenta)}
.hero p.lede{margin-top:var(--space-4);max-width:52ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-6)}
.hero .after{margin-top:var(--space-3)}

/* The scrolling column is the frozen .marquee, given a fixed viewport height
   so it reads as a strip of a longer roll rather than a list that ended. */
/* Two instances of the frozen .marquee side by side. Nothing about the
   component is restyled — a second column is the only way to show that the
   promise is forty portraits and not one, which a single tall photo actively
   contradicts. The two tracks carry a different image order so they never
   read as one synchronised pair. */
.hero__roll{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);height:clamp(21rem,44vw,31rem)}
/* Two columns all the way down. One wide column at 4/5 crops a portrait
   through the middle of the face, which on a page selling portraits is the
   worst possible place to lose one. */
@media (max-width:860px){.hero__roll{height:17rem;margin-top:var(--space-6)}}

.strip{padding-block:clamp(1.75rem,3.5vw,3rem)}
.strip__head{max-width:56ch;margin-bottom:var(--space-6)}
.setup{
  position:absolute;left:var(--space-2);bottom:var(--space-2);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.55);border-radius:var(--radius-sm);
  padding:3px 7px;backdrop-filter:blur(4px);
}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--magenta)}
.priceline{display:flex;align-items:baseline;gap:var(--space-2);margin-block:var(--space-3)}
.priceline b{font-family:var(--font-display);font-size:2.6rem;font-weight:700;letter-spacing:-.02em}
.spec{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.spec li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);align-items:baseline}
.spec i{width:5px;height:5px;border-radius:50%;background:var(--magenta);display:block}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
/* The cloned Collapsible was measured from Astryx's React component, which
   drives its open state with data-open. This page uses native <details>, so
   the same rules are re-pointed at [open] here rather than edited into the
   clone — otherwise the content grid never expands and every answer bleeds
   through its neighbour, which is exactly what shipped. */
details.ax-collapsible{border-bottom:var(--border-width) solid var(--rule);padding-block:var(--space-4)}
details.ax-collapsible:first-of-type{border-top:var(--border-width) solid var(--rule)}
details.ax-collapsible > summary{list-style:none}
details.ax-collapsible > summary::-webkit-details-marker{display:none}
details.ax-collapsible > summary::after{
  content:"+";font-family:var(--font-mono);font-size:1.1rem;color:var(--ink-soft);
  transition:transform var(--duration-fast) var(--ease-standard);
}
details.ax-collapsible[open] > summary::after{content:"–"}
details.ax-collapsible .ax-collapsible__content{overflow:hidden}
details.ax-collapsible[open] .ax-collapsible__content{grid-template-rows:1fr}
details.ax-collapsible .ax-collapsible__content-inner{min-height:0;padding-block:0}
/* Padding lives only on the open state. At grid-template-rows:0fr the track
   collapses the CONTENT but not the padding, which cannot shrink — so a
   closed answer kept a 12px sliver and the accordion never quite shut. */
details.ax-collapsible[open] .ax-collapsible__content-inner{padding-block:var(--space-3) var(--space-1)}


/* ── the crop demonstration ─────────────────────────────────────────────── */
.crops{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:760px){.crops{grid-template-columns:1fr}}
.crop{border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-sunk);position:relative}
.crop img{width:100%;height:100%;object-fit:cover;display:block}
.crop--wide{aspect-ratio:16/9}
.crop__cap{
  display:flex;gap:var(--space-2);align-items:baseline;margin-top:var(--space-3);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.crop__cap b{color:var(--magenta);font-weight:500}
.crop__cap span{color:var(--ink-soft);text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:13px}
.sizes{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-end;margin-top:var(--space-6)}
.size{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.size img{display:block;object-fit:cover;background:var(--paper-sunk)}
.size__l{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.size--circle img{width:96px;height:96px;border-radius:50%}
.size--thumb img{width:48px;height:48px;border-radius:var(--radius-sm)}
.size--sig img{width:64px;height:64px;border-radius:var(--radius-sm)}
.size--vert img{width:84px;height:112px;border-radius:var(--radius-md)}

.foot{
  padding-block:var(--space-7);margin-top:var(--space-8);
  border-top:var(--border-width) solid var(--rule);
}

/* ══ segment pages ═══════════════════════════════════════════════════════
   Each segment landing proves a different claim, so each one owns a layout
   the others do not use. Everything here is additive: no rule below touches
   .marquee, .proof-item or anything in the Astryx clone. */

/* The `width`/`height` attributes on an <img> are presentational hints that
   resolve to a definite height, and a definite height makes `aspect-ratio`
   inert — the tile then stretches to the file's own 760px and the grid breaks.
   Every rule below that sizes an image by aspect-ratio therefore also says
   height:auto. The attributes stay: they are what reserves the space before
   the file arrives, which is the whole reason to write them. */

/* Pass / fail. Two rows, labelled, same width — the comparison only reads if
   the eye can run straight down from one row to the other. */
.pf{display:grid;gap:var(--space-5)}
.pf__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
@media (max-width:900px){.pf__row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pf__lab{
  display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
}
.pf__lab b{font-weight:500}
.pf__lab--pass b{color:var(--magenta)}
.pf__lab--fail b{color:var(--ink-soft)}
.pf__lab span{font-family:var(--font-body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.pf__cell{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--paper-sunk);aspect-ratio:1}
.pf__cell img{width:100%;height:100%;object-fit:cover;display:block}
.pf--fail .pf__cell img{filter:saturate(.94)}

/* Before / after. Deliberately not a slider: a slider lets the reader move
   the seam until the claim is whatever they wanted it to be. */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:640px){.ba{grid-template-columns:1fr}}
.ba figure{margin:0}
.ba img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--radius-lg);background:var(--paper-sunk)}
.ba figcaption{
  margin-top:var(--space-3);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
}
.ba figcaption b{color:var(--magenta);font-weight:500}

/* Forty. The number is the argument, so the tiles are small on purpose —
   large tiles would show four and prove nothing. */
.forty{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (max-width:900px){.forty{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:560px){.forty{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}}
.forty img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:var(--radius-sm);background:var(--paper-sunk);
}

/* A team that was never in one room. The hire date under each face is the
   whole point: the newest one has to be recent enough to be impossible. */
.team{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:900px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
.team figure{margin:0}
.team img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--radius-md);background:var(--paper-sunk)}
.team figcaption{
  margin-top:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--ink-soft);text-transform:uppercase;
}
.team figcaption em{font-style:normal;color:var(--magenta)}

/* One portrait, five real containers. Not a diagram of the crops: the actual
   shapes at the actual sizes, because "5 crops included" is a bullet point
   and this is a demonstration. */
.cont{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-end}
.cont__i{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.cont__i img{display:block;object-fit:cover;background:var(--paper-sunk)}
.cont__l{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cont--circle img{width:104px;height:104px;border-radius:50%}
.cont--thumb img{width:44px;height:44px;border-radius:var(--radius-sm)}
.cont--sig img{width:60px;height:60px;border-radius:var(--radius-sm)}
.cont--vert img{width:90px;height:120px;border-radius:var(--radius-md)}
.cont--wide{flex:1 1 320px;min-width:0}
.cont--wide img{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--radius-lg)}

/* Executive. Three portraits at a size that lets the reader look at the
   skin — the segment that is being asked for $59 is the one that will. */
.big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:820px){.big{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.big{grid-template-columns:1fr}}
.big img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--radius-lg);background:var(--paper-sunk)}
.big figure{margin:0}
.big figcaption{margin-top:var(--space-2);font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}

/* A single hero portrait, when the segment's proof is quality and not count. */
.solo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--radius-xl);background:var(--paper-sunk)}

/* The crumb back to the general page. Seven landings that do not admit each
   other exist read as seven companies. */
.crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
/* An 11px line of text is a 14px tap target, which a thumb misses. The link
   keeps its size and gains the reach. */
.crumb a{color:inherit;display:inline-block;padding-block:6px}

/* The seven segment pages, from the general one. Cards rather than a list:
   the sentence under each name is the fear that page opens with, and it is
   what tells the reader which one is theirs. */
.whogrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media (max-width:900px){.whogrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.whogrid{grid-template-columns:1fr}}
.who{
  display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit;
  padding:var(--space-4);border:var(--border-width) solid var(--rule);
  border-radius:var(--radius-lg);background:var(--paper);
  transition:border-color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.who:hover{border-color:var(--magenta);transform:translateY(-2px)}
.who b{font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.who span{font-size:.82rem;line-height:1.45;color:var(--ink-soft)}