/* ============================================================
   Shared Roof Exec — the system
   Identity v1.4 · site map v4 (nine moments) — V2 refined
   Palette and type live in Branding/sharedroofexec-identity.md.
   Change them there first.

   THE GROUNDS   Four: cream, sand, sea, deep teal. Every section
                 declares its own — nothing inherits from body.
                 Accents follow the ground and none of them cross:
                 saffron + surf on deep teal; berry, indigo and teal
                 on the light grounds. Identity v1.3 §3.1 is the table.
   THE RULE      The hairline is the only structural device. No cards,
                 no boxes, no pills, no rounded containers, no icons.
   THE TYPE      D1 and D2 sit above h1. Everything else stays small.
                 D1 line breaks are art direction — spans, never <br>.
   THE MOTION    Numbers move. Prose never does.
   ============================================================ */

:root{
  /* grounds */
  --cream:#F4EDE2;
  --sand:#EDE1D1;
  --sea:#D6E8E6;
  --deep-teal:#0B3B3A;

  /* marks */
  --ink:#241F1E;
  --ink-soft:#5B524E;
  --teal:#0A6463;
  --berry:#B32455;
  --berry-dark:#8E1C44;
  --indigo:#2C4C8C;
  --saffron:#E39B2C;
  --surf:#93C8BD;
  --on-dark:#C7D6D3;

  /* rules */
  --rule:#DCD1C1;
  --rule-sand:#D6C4AB;
  --rule-sea:#B4D2CE;
  --rule-dark:#1E5250;

  --display:"Libre Franklin",Helvetica,Arial,sans-serif;
  --body:"Source Serif 4",Georgia,serif;

  --focus:var(--berry);

  --shell:1240px;
  --measure:46rem;   /* one text width for the whole site — see the note below */
  --gutter:1.25rem;
  --rhythm:4rem;
}
@media (min-width:56rem){ :root{ --gutter:2.5rem; --rhythm:6rem; } }

/* ---------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--indigo);text-underline-offset:.16em;text-decoration-thickness:from-font;}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;background:var(--berry);color:var(--cream);
  padding:.75rem 1.25rem;z-index:100;font-family:var(--display);font-weight:700;}
.skip:focus{left:0;}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;} }

/* ---------------------------------------------------------- grounds
   Every moment declares one. Nothing inherits from body — this is the
   rule that stops ink landing on deep teal at 1.32:1.                */
.m{background:var(--bg);color:var(--fg);padding-block:var(--rhythm);}
/* a punctuation moment is not a room — it gets less air, not the same air */
.m--tight{padding-block:calc(var(--rhythm) * .62);}
.m a{color:var(--link);}
.m--cream{--bg:var(--cream);    --fg:var(--ink); --fg2:var(--ink-soft);--accent:var(--berry); --struct:var(--teal);--hair:var(--rule);     --link:var(--indigo);}
.m--sand {--bg:var(--sand);     --fg:var(--ink); --fg2:var(--ink-soft);--accent:var(--berry); --struct:var(--teal);--hair:var(--rule-sand);--link:var(--indigo);}
.m--sea  {--bg:var(--sea);      --fg:var(--ink); --fg2:var(--ink-soft);--accent:var(--berry); --struct:var(--teal);--hair:var(--rule-sea); --link:var(--indigo);}
.m--teal {--bg:var(--deep-teal);--fg:var(--cream);--fg2:var(--on-dark);--accent:var(--saffron);--struct:var(--surf);--hair:var(--rule-dark);--link:var(--surf);}
/* The focus ring is an accent and follows the ground like the rest of them.
   Saffron measures 2.01:1 on cream — a ring nobody can see is not a ring.   */
.m--teal,.mast,.site-foot,.skip{--focus:var(--saffron);}

/* ---------------------------------------------------------- composition
   The failure this layer exists to prevent: a column of prose alone at the
   left gutter of a 1160px shell, repeated twelve times. Every moment either
   fills the shell or places something in BOTH fields. Nothing sits alone.

     STAGE   one statement, type sized to fill 80-95% of the shell   .m1 .m8 .m11
     BLEED   edge to edge media, no shell                            .m2
     LEDGER  full-width rows on hairlines                            .roles .terms
     FACING  two fields, asymmetric — neither may be empty           .face
     STACK   full-width heading over full-width body                 .m5

   No moment repeats the layout of the one before it. That alone is what
   keeps twelve moments from reading as one template.                     */
.face{display:grid;gap:2.25rem 4rem;align-items:start;}
/* Two fields from 56rem, not 64rem: between those widths every facing pair
   used to stack, and the narrow field's figure (a portrait, a receipt, the
   co-founding panel) ran the full shell at 800px wide — the one thing this
   layer exists to prevent. Gaps tighten in that band. */
@media (min-width:56rem){
  .face{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.25rem 3rem;}
  .face--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .face--bottom{align-items:end;}
}
@media (min-width:64rem){ .face{gap:2.25rem 4rem;} }
/* Stacked, a figure or panel in the narrow field keeps a field's width. */
@media (max-width:56rem){
  .face .doc,.face .plate-fig{max-width:30rem;}
  .face .offer,.face .panel{max-width:34rem;}
}

/* ---------------------------------------------------------- the chapter marker
   A reader must never wonder whether a new section has started. Two devices,
   on every moment: the ground changes at every boundary without exception,
   and a hairline runs the full shell with a one-to-three-word noun under it.
   The hairline is the identity's own device (identity v1.3 §1) and it is what
   makes a boundary unmistakable on a ground that did not change much.        */
.mark{font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--struct);
  border-top:1px solid var(--hair);padding-top:1.1rem;margin:0 0 3.25rem;}
/* p:last-child below zeroes the bottom margin of a marker that is the only
   child of its wrapper, which silently welded four markers to the block under
   them. This wins on specificity, so a marker keeps its air wherever it sits. */
.m .mark{margin:0 0 3.25rem;}

/* ---------------------------------------------------------- type */
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;}
/* Display lines that aren't headings balance too, so no statement ends on a
   single word at any width. Hand-set breaks still win where they exist. */
.d1,.d2,.d3,.after,.closing,.exit p,.said p,.tagline{text-wrap:balance;}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);line-height:1.06;letter-spacing:-.024em;}
h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.012em;}
p{margin:0 0 1.1em;text-wrap:pretty;}   /* no one-word last lines in body copy */
p:last-child{margin-bottom:0;}
.prose{max-width:62ch;}
.prose p{font-size:1.12rem;line-height:1.6;}

.eyebrow{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--struct);margin:0 0 2.25rem;line-height:1.7;
}
.small{font-family:var(--display);font-weight:400;font-size:.8rem;
  letter-spacing:.04em;color:var(--fg2);}

/* the display tier — identity v1.3 §4 */
/* D1 and D2 size on vw while the shell caps at 1240px, so one value cannot
   hold Stage's 80-95% fill: it falls as the viewport narrows and only reaches
   the spec above ~1570px. Each Stage line is hand-set instead (§8.9), the vw
   term chosen so the type caps where the shell caps. Hierarchy is preserved:
   M1 84px > M11 72px > M8 64px — the close is the largest after moment 1.   */
.d1{font-family:var(--display);font-weight:700;margin:0;
  font-size:clamp(2.5rem, var(--d1-vw,8.4vw), var(--d1-max,8.25rem));
  line-height:.94;letter-spacing:-.035em;}
.m1 .d1 {--d1-vw:7.1vw;--d1-max:5.5rem;}
.m11 .d1{--d1-vw:5.8vw;--d1-max:4.5rem;}
.d1 .ln{display:inline;}
@media (min-width:48rem){ .d1 .ln{display:block;} }
@media (max-width:48rem){ .d1{letter-spacing:-.026em;line-height:1;} }

.d2{font-family:var(--display);font-weight:700;margin:0;
  font-size:clamp(2.5rem, var(--d2-vw,5.5vw), var(--d2-max,4.5rem));
  line-height:1;letter-spacing:-.03em;}
.m8 .d2{--d2-vw:5.6vw;--d2-max:4.15rem;}
/* D3 — the facing statement. Loud enough to anchor a moment, quiet enough
   that it never argues with D1 two screens away. */
.d3{font-family:var(--display);font-weight:700;margin:0;
  font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1.12;letter-spacing:-.022em;
  max-width:20ch;}
.d2 .ln{display:inline;}
@media (min-width:48rem){ .d2 .ln{display:block;} }

/* ---------------------------------------------------------- CTA
   A plain verb. No urgency, no benefit promise, no scarcity — that rule is
   about the label. The button itself is FILLED, never a ghost outline: this
   page carries two CTAs and the one that matters cannot be a thin rectangle.

   The fill follows the ground, because no single fill works on both:
     light grounds   berry fill, cream label   5.47 label · 5.47 vs ground
     deep teal       saffron fill, ink label   6.97 label · 5.29 vs ground
   Berry on deep teal measures 1.94:1 against the ground — the button shape
   itself disappears, never mind the text. Identity v1.3 §3.1.               */
.cta{display:inline-block;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:.02em;text-decoration:none;padding:1rem 1.9rem;border:1px solid transparent;
  background:var(--berry);color:var(--cream);
  transition:background .15s ease,color .15s ease,border-color .15s ease;}
.cta:hover{background:var(--berry-dark);color:var(--cream);}
.m--teal .cta,.site-foot .cta{background:var(--saffron);color:var(--ink);border-color:var(--saffron);}
.m--teal .cta:hover,.site-foot .cta:hover{background:var(--cream);color:var(--deep-teal);border-color:var(--cream);}

/* The masthead button is persistent utility, not the ask. It stays quiet so
   the close is the only filled button a reader meets on the way down. */
.mast .cta{background:transparent;color:var(--cream);border-color:var(--cream);}
.mast .cta:hover{background:var(--berry);border-color:var(--berry);color:var(--cream);}

/* a keep-reading link, not a button */
.more{font-family:var(--display);font-weight:700;font-size:.95rem;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15rem;}
.more:hover{opacity:.72;}

/* ---------------------------------------------------------- masthead
   Sticky, no JavaScript. Every page opens on deep teal, so the bar is
   invisible at rest and resolves once the reader scrolls onto a light
   ground. The contact button lives outside <nav>: on phones the four
   links drop to a second row and the button stays beside the lockup,
   so a phone reader is never without navigation.                      */
.mast{position:sticky;top:0;z-index:50;padding-block:1.1rem;
  background:var(--deep-teal);}
.mast .shell{display:flex;align-items:center;gap:2rem;}
.mast .brand{display:block;line-height:0;}
.mast img{width:134px;}
.mast nav{margin-left:auto;display:flex;gap:1.75rem;align-items:center;}
.mast a{font-family:var(--display);font-weight:700;font-size:.82rem;
  color:var(--cream);text-decoration:none;}
.mast a:hover{color:var(--berry);}
.mast .cta{font-size:.82rem;padding:.55rem 1.05rem;line-height:1.2;}
/* One row for as long as one row fits — the four links, the lockup and the
   button need about 700px. Below that the links take a second row, set
   tight so the sticky bar stays under 90px on a phone. */
@media (max-width:52rem){
  .mast{padding-block:.85rem .9rem;}
  .mast .shell{display:grid;grid-template-columns:1fr auto;row-gap:.7rem;align-items:center;}
  .mast .brand{grid-column:1;grid-row:1;}
  .mast img{width:118px;}
  .mast .cta{grid-column:2;grid-row:1;font-size:.78rem;padding:.5rem .9rem;}
  .mast nav{grid-column:1 / -1;grid-row:2;margin:0;flex-wrap:wrap;gap:.25rem 1.1rem;}
  .mast nav a{font-size:.76rem;}
  .mast a[aria-current]{padding-bottom:.1rem;}
}
@media (max-width:30rem){ .mast img{width:107px;} .mast nav{gap:.25rem .95rem;} }

/* ============================================================
   HOMEPAGE — v2 (nine moments)
   Grounds alternate at every boundary: teal, cream, teal, cream,
   sand, sea, cream, sand, teal. No moment repeats the layout of the
   one before it.
   ============================================================ */

/* ---------------------------------------------------------- 1 · hero
   Centred, not bottom-hung: the whole statement fits the first screen
   on a 1366x768 laptop and a 390x844 phone. */
.h-hero{min-height:min(86svh,46rem);display:flex;align-items:center;padding-block:4.5rem 5rem;}
.h-hero .d1{--d1-vw:6.9vw;--d1-max:5.3rem;}
.h-hero .support{font-family:var(--body);font-size:1.2rem;line-height:1.5;
  color:var(--accent);margin:2.5rem 0 0;max-width:46rem;}
.support .ln{display:inline;}
@media (min-width:48rem){ .support .ln{display:block;} }
@media (max-width:48rem){ .h-hero{padding-block:3.5rem 4rem;} .h-hero .support{font-size:1.1rem;margin-top:2rem;} }

/* ---------------------------------------------------------- 2 · the screen */
.plate{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gutter);}
.plate figure{margin:0;position:relative;}
.plate .mark{margin-bottom:2.25rem;}
.plate img{width:100%;}
.plates{display:grid;gap:3rem 4rem;}
/* The one card on the page: a screen is a surface and wants an edge. */
.plates figure{background:var(--cream);border:1px solid rgba(220,209,193,.75);
  border-radius:16px;padding:1.5rem;
  box-shadow:0 1px 2px rgba(36,31,30,.05), 0 10px 30px rgba(36,31,30,.07);}
@media (max-width:48rem){ .plates figure{padding:1rem;border-radius:12px;} .plates{gap:1.5rem;} .plates figcaption{font-size:.72rem;margin-top:.7rem;} }
/* The disclosure belongs to the screen it describes, so it sits on the card —
   the same place the interior pages put it, not loose on the ground. */
.plates figcaption{margin-top:.9rem;}
/* A crop cannot magnify, so the profitability table is re-set at 700px and
   returns as its own card under 48rem rather than being dropped. */
.plates .on-phone{display:none;}
@media (max-width:48rem){ .plates .on-phone{display:block;} }
@media (min-width:64rem){ .plates{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;} }
/* One block, running the full width of both plates — not a note capped to the
   left column. It stays readable at that measure because it is short: four
   sentences land in two or three lines, so the eye never has far to travel
   back. Sized a step up from body copy so the full width reads as intended. */
.plate .caption{margin:2.25rem 0 0;max-width:none;font-size:1.2rem;line-height:1.6;}
.disclosure{margin:1rem 0 0;}

/* ---------------------------------------------------------- 3 · the problem
   Two marks on a rule, the space between them widening on scroll; then a
   facing pair — the heading in the narrow field, the prose in the wide. */
.gap{margin:0 0 3.5rem;}
.gap-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  border-top:2px solid var(--struct);padding-top:1.35rem;
  width:calc(66% + 34% * var(--open,1));min-width:min-content;
  transition:width .6s cubic-bezier(.22,.61,.36,1);}
.gap-inner .sys{width:auto;flex:0 0 auto;}
.sys--acculynx{height:clamp(1.05rem,2.1vw,1.7rem);}
.sys--qbo{height:clamp(1.5rem,3vw,2.45rem);}
@media (prefers-reduced-motion:reduce){ .gap-inner{width:100%;transition:none;} }
.h-problem .d3{max-width:16ch;}
.h-problem .prose{max-width:none;}
.h-problem .prose p{font-size:1.2rem;line-height:1.55;}

/* ---------------------------------------------------------- 4 · what you get
   A masthead, not a feature grid. They stack on phones; never cards. */
.h-get h2 .ln{display:inline;}
@media (min-width:48rem){ .h-get h2 .ln{display:block;} }
.roles{list-style:none;margin:3.25rem 0 0;padding:0;}
.roles li{display:grid;gap:.4rem 2rem;padding:1.6rem 0;border-top:1px solid var(--hair);}
.roles li:last-child{border-bottom:1px solid var(--hair);}
@media (min-width:56rem){
  .roles li{grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr);align-items:start;}
}
.roles .n{font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.1em;color:var(--accent);}
.roles h3{font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.02em;}
.roles p{margin:0;font-size:1.05rem;line-height:1.55;}
/* A standalone explanatory block under a full-width ledger runs the shell, like
   the plate caption does. Capped to a measure it reads as a left column with
   dead space beside it, which is what it is not. */
.h-get .hitl{margin:2.25rem 0 0;font-size:1.2rem;line-height:1.6;max-width:none;}
.closing{font-family:var(--display);font-weight:700;margin:3.5rem 0 0;
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.08;letter-spacing:-.022em;}
.closing .ln{display:inline;}
@media (min-width:48rem){ .closing .ln{display:block;} }
.h-get .more{margin-top:2rem;display:inline-block;}

/* ---------------------------------------------------------- 5 · who you're hiring */
.author{display:grid;gap:3rem;align-items:start;}
@media (min-width:56rem){ .author{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:start;} }
@media (min-width:64rem){ .author{gap:4.5rem;} }
.author figure{margin:0;}
.shot{aspect-ratio:4/5;overflow:hidden;background:#E6DDD0;}
.shot img{width:100%;height:100%;object-fit:cover;}
.author .copy .d3{max-width:22ch;margin-bottom:1.75rem;}
.author .copy .prose{max-width:none;}
.author .copy .prose p{font-size:1.12rem;line-height:1.6;}
.sig{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;
  max-width:none;color:var(--fg2);margin:2.25rem 0 0;
  display:flex;gap:1.5rem;flex-wrap:wrap;line-height:1.4;}
/* inside .prose the paragraph size would otherwise win and the signature
   renders a third larger on About than on the homepage */
.m .sig{font-size:.78rem;line-height:1.4;}
.sig span{text-transform:uppercase;}
.sig a{color:var(--struct);text-decoration:none;letter-spacing:.02em;padding-block:.75rem;margin-block:-.75rem;}
.sig a:hover{color:var(--accent);}
@media (max-width:56rem){ .author figure{max-width:22rem;} }

/* ---------------------------------------------------------- 5b · the turn
   A punctuation band, sized to hold each sentence on one line at desktop. */
.h-turn .d2{--d2-vw:4.4vw;--d2-max:3.4rem;line-height:1.08;}
@media (max-width:48rem){ .h-turn .d2{font-size:1.85rem;line-height:1.12;letter-spacing:-.022em;} .h-turn .d2 .ln{display:block;} .h-turn .d2 .ln + .ln{margin-top:.35em;} }

/* ---------------------------------------------------------- 6 · proof */
.said{font-family:var(--body);font-size:clamp(1.5rem,3.2vw,2.3rem);
  line-height:1.28;letter-spacing:-.008em;margin:0;}
.said-by{margin:2rem 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;}
.said-by .who{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.02em;
  line-height:1.3;padding-left:1.25rem;border-left:1px solid var(--hair);}
.said-by .role{display:block;font-weight:400;font-size:.85rem;color:var(--fg2);}
.said-by .client{margin:0;line-height:0;}
.said-by .client img{width:150px;}
.said-foot{padding-top:1.1rem;border-top:1px solid var(--hair);}
.said-foot p{font-size:1.02rem;line-height:1.55;margin:0 0 .75rem;}
.said-foot .ref{font-family:var(--display);font-weight:700;font-size:1rem;margin-top:1rem;}
.client{display:inline-block;}
.client img{height:auto;}

/* ---------------------------------------------------------- the terms ledger
   Used by the pricing and co-founding pages. */
.terms{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);
  font-variant-numeric:tabular-nums;}
.terms li{display:grid;gap:.25rem 2rem;padding:1rem 0;border-bottom:1px solid var(--hair);}
@media (min-width:38rem){ .terms li{grid-template-columns:minmax(0,3fr) minmax(0,9fr);} }
.terms .k{font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--struct);padding-top:.2rem;}
.terms .v{font-size:1.02rem;line-height:1.5;}
.terms .v strong{font-family:var(--display);font-weight:700;font-size:1.05rem;}

/* ---------------------------------------------------------- 9 · close
   The single ask on the page, and the number beside it. */
.h-close{padding-block:6rem 3.5rem;}
.h-close .eyebrow{margin-bottom:1.75rem;}
.h-close .d1{--d1-vw:5.8vw;--d1-max:4.5rem;}
.h-close .sub{font-size:1.2rem;line-height:1.55;max-width:none;margin:2rem 0 0;color:var(--fg2);}
.h-close .ask{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;}
.h-close .cta{font-size:1.15rem;padding:1.15rem 2.4rem;}
.h-close .alt{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--accent);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.15rem;}
.h-close .alt:hover{color:var(--cream);}

/* ---------------------------------------------------------- M12 footer */
.site-foot{background:var(--deep-teal);color:var(--cream);padding-block:calc(var(--rhythm) * .7) var(--rhythm);}
.site-foot a{color:var(--cream);}
.foot-lockup{width:178px;margin-bottom:1.5rem;display:block;}
.site-foot .tagline{font-family:var(--display);font-weight:700;font-size:1.15rem;
  line-height:1.35;max-width:none;margin:0;}
.foot-nav{margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;
  font-family:var(--display);font-weight:700;font-size:.82rem;}
.foot-nav a{text-decoration:none;}
.foot-nav a:hover{color:var(--saffron);}
.foot-meta{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-size:.9rem;color:var(--on-dark);}

/* ============================================================
   INTERIOR PAGES — v3
   Same grounds, same rule, same tier. Only the parts the homepage
   has no use for live here.
   ============================================================ */

/* the thesis line sits high, not centred in a tall band */
.p1{padding-block:7rem 5rem;}
@media (max-width:48rem){ .p1{padding-block:4.5rem 3.5rem;} }

/* a short standfirst under an h2, wider measure than body prose */
/* A lede inside a facing layout is bounded by its field; one that sits full
   width should run full width. A 46rem cap in a 1240px shell reads as a left
   column with dead space beside it. Long-form answers keep a measure — see .qa. */
.lede{font-size:1.2rem;line-height:1.55;max-width:none;margin:1.6rem 0 0;color:var(--fg2);}


/* the design rules: four lines on rules. Not cards, not icons, not a grid. */
.manifesto{list-style:none;margin:0;padding:0;}
.manifesto li{display:grid;gap:.4rem 2rem;border-top:1px solid var(--hair);padding:1.4rem 0;}
@media (min-width:38rem){ .manifesto li{grid-template-columns:3.5rem minmax(0,1fr);align-items:baseline;} }
.manifesto li:last-child{border-bottom:1px solid var(--hair);}
.manifesto .n{font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.1em;color:var(--accent);}
.manifesto .v{font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:-.018em;}

/* the first thirty days: a sequence on the rule, never a stepped-card row */
.steps{list-style:none;margin:3rem 0 0;padding:0;border-top:1px solid var(--hair);
  max-width:52rem;}
.steps li{display:grid;gap:.25rem 2rem;padding:1.05rem 0;border-bottom:1px solid var(--hair);}
@media (min-width:38rem){ .steps li{grid-template-columns:4rem minmax(0,1fr);align-items:start;} }
.steps .k{font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.1em;color:var(--accent);}
.steps .v{font-size:1.05rem;line-height:1.5;}

/* ---------------------------------------------------------- /how-it-works
   One job for one week. The marks carry the clock.
   PAGE-SCOPED: every selector here starts with .p1, .map, .h1-.h7, .doc,
   .screens/.screen, .steps--wide or .after, none of which the homepage uses.
   Do not add rules here that touch .face, .mark, .m, .d1-.d3 or any other
   shared class — README.md §1. */
.mast a[aria-current]{border-bottom:1px solid currentColor;padding-bottom:.2rem;}
.p1 .d2{--d2-vw:5.6vw;--d2-max:4.5rem;}
.t1 .d2{--d2-vw:6.4vw;--d2-max:5rem;}
.p1 .lede{color:var(--fg2);max-width:52ch;margin:1.75rem 0 0;}
/* the hero grid: a quarter for the words, the rest for her hand. Scoped to
   .p1 so the homepage's .face is untouched. */
@media (min-width:64rem){ .p1 .face{grid-template-columns:minmax(0,7fr) minmax(0,17fr);gap:2.25rem 3rem;} .p1 .d2{--d2-vw:4vw;--d2-max:3.3rem;} }
.p1 .face--bottom{align-items:center;}
/* the map: her hand, cream on deep teal */
.map{margin:2.5rem 0 0;}
@media (min-width:56rem){ .map{margin:0;} }
.map img{width:100%;}
@media (max-width:48rem){ .map{margin-inline:calc(-1 * var(--gutter));} .map figcaption{padding-inline:var(--gutter);} }
.map figcaption{margin-top:1.25rem;}
/* a ledger whose keys are phrases, not numbers */
.steps--wide{max-width:none;}
@media (min-width:38rem){ .steps--wide li{grid-template-columns:9rem minmax(0,1fr);} }
.steps--wide .k{font-size:.78rem;text-transform:uppercase;color:var(--struct);}
.steps--wide .v{font-size:1.08rem;line-height:1.55;max-width:62ch;}
.steps--wide li{padding:1.25rem 0;}
/* the sentence after a ledger — display weight, one thought */
.after{font-family:var(--display);font-weight:700;margin:2.75rem 0 0;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.25;letter-spacing:-.018em;max-width:34ch;}
.h1 .prose,.h3 .prose,.h5 .prose{max-width:none;}
.h2 .steps,.h6 .steps{margin-top:2.75rem;}
.h6 .lede{margin-top:1.4rem;}
/* a document or a screen beside the prose: a receipt, a credit memo, a
   QuickBooks screen, the job-performance plate. All of them sit on a card,
   the same one the homepage plates use — a white screenshot dissolves into
   a light ground and floats loose on a dark one. */
.doc,.screen,.plate-fig{margin:0;background:var(--cream);
  border:1px solid rgba(220,209,193,.75);border-radius:16px;padding:1.5rem;
  box-shadow:0 1px 2px rgba(36,31,30,.05), 0 10px 30px rgba(36,31,30,.07);}
/* inside a card the ground is cream, so the caption cannot use the section's
   on-dark secondary — that measures 1.29:1 on cream. */
.doc figcaption,.screen figcaption,.plate-fig figcaption,
.doc .small,.screen .small,.plate-fig .small{color:var(--ink-soft);}
/* A card takes the ground it sits on, the same way every accent here does.
   On deep teal a cream card turns the whole object into paper; the panel
   keeps the ground and lets the screen inside it read as the screen. */
.m--teal .doc,.m--teal .screen,.m--teal .plate-fig{
  background:rgba(147,200,189,.07);border-color:var(--rule-dark);box-shadow:none;}
.m--teal .doc figcaption,.m--teal .screen figcaption,.m--teal .plate-fig figcaption,
.m--teal .doc .small,.m--teal .screen .small,.m--teal .plate-fig .small{color:var(--on-dark);}
/* only the image disclosure belongs on a card. The sentence explaining the
   screen is body copy and sits on the ground with the rest of the prose. */
.screen-note{font-size:1.08rem;line-height:1.55;max-width:none;
  margin:1.25rem 0 0;color:var(--fg2);}
.doc img{width:100%;}
.doc figcaption{margin-top:1rem;}
.doc--receipt{max-width:none;}
.h2 .face{align-items:center;}
.h2 .after{max-width:none;margin-top:3rem;}
/* the ledger needs the shell until desktop; the receipt follows it, capped */
@media (max-width:64rem){ .h2 .face{grid-template-columns:none;} .h2 .doc{max-width:30rem;} }
.h2 h2{margin-bottom:3rem;}
/* Friday: two wide screens, full shell, each with its sentence under it */
.screens{margin-top:3rem;}
.screens .screen + .screen-note + .screen{margin-top:3.5rem;}
.screen{margin:0;}
.screen img{width:100%;}
.screen figcaption{margin-top:1.1rem;}

.h4 .disclosure{margin-top:2rem;}
/* the facing plate: the portrait crop carries the right field */
@media (min-width:56rem){ .face--plate{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;} }
.plate-fig{margin:0;}
.plate-fig img{width:100%;}
.plate-fig .disclosure{margin-top:1rem;}
/* the plate is 1080x1320 — portrait, and at the full width of a 7-column
   field it dwarfs the paragraph beside it. Capped, and pushed to the shell
   edge so its right side lands where every other rule does. */
@media (min-width:56rem){ .h5 .plate-fig{max-width:27rem;justify-self:end;} }
.h2 h2,.h3 h2,.h5 h2,.h7 .d3{margin-bottom:1.5rem;}
/* the close: the hand-set first line was wider than the shell at D2's default
   size, so it wrapped and broke mid-phrase. Sized to land on the break. */
.h7 .d2{--d2-vw:4.35vw;--d2-max:3.45rem;}
@media (max-width:48rem){ .h7 .d2{font-size:2.05rem;line-height:1.08;} }
.h7 .cta{margin-top:2.6rem;font-size:1.15rem;padding:1.15rem 2.4rem;}

/* the folded FAQ — a rule, a question, an answer. No chevrons, no boxes. */
.qa{border-top:1px solid var(--hair);}
.qa details{border-bottom:1px solid var(--hair);}
.qa summary{font-family:var(--display);font-weight:700;font-size:1.05rem;
  line-height:1.4;padding:1.4rem 2.5rem 1.4rem 0;cursor:pointer;position:relative;
  list-style:none;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+";position:absolute;right:0;top:1.25rem;
  font-weight:400;font-size:1.4rem;line-height:1;color:var(--struct);}
.qa details[open] summary::after{content:"\2013";}
.qa summary:hover{color:var(--accent);}
.qa details p{font-size:1.05rem;line-height:1.6;max-width:var(--measure);margin:0 0 1em;}
.qa details p:first-of-type{margin-top:-.2rem;}
.qa details p:last-child{margin-bottom:1.8rem;}

/* four arguments, two up. Stacked in one capped column they doubled the page
   height and left 400px of nothing beside them. */
.args{display:grid;gap:3rem 4rem;margin:3rem 0 0;padding:0;list-style:none;}
@media (min-width:56rem){ .args{grid-template-columns:repeat(2,minmax(0,1fr));} }
.args li{border-top:1px solid var(--hair);padding-top:1.4rem;}
.args .k{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--struct);margin-bottom:.8rem;}
.args .v{font-size:1.05rem;line-height:1.6;}

/* the risk table — the one place a real table is the right form, because the
   reader who reaches it is in evaluation mode and wants the column */
.risk{width:100%;border-collapse:collapse;margin:0;
  font-variant-numeric:tabular-nums;}
.risk th{font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--struct);
  text-align:left;padding:0 2rem 1rem 0;border-bottom:1px solid var(--hair);}
.risk td{font-size:1.05rem;line-height:1.55;padding:1.2rem 2rem 1.2rem 0;
  border-bottom:1px solid var(--hair);vertical-align:top;}
.risk td:first-child{width:38%;}
.risk tr:last-child td{border-bottom:1px solid var(--hair);}
@media (max-width:48rem){
  .risk,.risk tbody,.risk tr,.risk td{display:block;width:auto;}
  .risk thead{position:absolute;left:-9999px;}
  .risk tr{border-bottom:1px solid var(--hair);padding:1.2rem 0;}
  .risk td{border:0;padding:0;}
  .risk tr:last-child td{border-bottom:0;}
  .risk td:first-child{width:auto;font-family:var(--display);font-weight:700;
    font-size:1rem;margin-bottom:.4rem;}
}
.t6 h2{margin-bottom:0;}
.t6 .lede{margin-bottom:3rem;}

/* the co-founding seat, teased where a buyer is already thinking about price.
   A panel on deep teal, not a plate — it holds an offer, not a document. */
/* A bordered panel on the ground: the co-founding teaser, the sample text.
   .offer is the one you can click. Both take the section's own hairline. */
.offer,.panel{border:1px solid var(--hair);border-radius:16px;
  padding:2rem 2rem 1.75rem;background:rgba(147,200,189,.06);}
.offer{display:block;text-decoration:none;
  transition:background .15s ease,border-color .15s ease;}
.offer:hover{background:rgba(147,200,189,.11);border-color:var(--struct);}
.offer .eyebrow,.panel .eyebrow{margin-bottom:1.2rem;}
.panel p{font-size:1.05rem;line-height:1.55;color:var(--fg2);margin:0 0 1.1em;}
.panel p:last-child{margin-bottom:0;}
.panel .msg{font-size:1.12rem;line-height:1.6;color:var(--fg);}
.offer h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:.9rem;}
.offer p{font-size:1.05rem;line-height:1.55;color:var(--fg2);margin:0 0 1.4rem;}
.offer .go{font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--struct);border-bottom:1px solid currentColor;padding-bottom:.15rem;}

/* one CTA per interior page, at the end */
.exit{margin-top:4.5rem;}
main > .m:last-child:has(.cta){padding-bottom:calc(var(--rhythm) * .6);}
.exit p{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.022em;
  max-width:30ch;margin:0 0 1.9rem;}
.exit .ln{display:inline;}
@media (min-width:48rem){ .exit .ln{display:block;} .exit p{max-width:none;} }
.exit .more{display:none;}

/* ---------------------------------------------------------- /terms
   PAGE-SCOPED: every selector starts with .t1–.t10 or .duo. The hero
   override exists because .p1 .face is the how-it-works hero grid and
   would otherwise claim this page's hero too.                        */
@media (min-width:56rem){
  .t1 .face{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;}
  .t1 .d2{--d2-vw:5.2vw;--d2-max:4.5rem;}
}
.t1 .lede{max-width:none;}
.t2 .args{margin-top:0;}
.t2 .closing{font-family:var(--display);font-weight:700;margin:3.5rem 0 0;
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.08;letter-spacing:-.022em;}
.t3 .more{margin-top:2.25rem;display:inline-block;}
.t4 .note{margin:2rem 0 0;font-size:1.02rem;color:var(--fg2);max-width:none;}
.t5 .prose{max-width:none;}
/* the four proofs run the shell, so their rules end where the heading does */
.t6 .note{margin:2.75rem 0 0;font-size:1.12rem;line-height:1.6;
  color:var(--fg2);max-width:none;}
.t7 .d3{margin:0 0 3rem;max-width:none;}
.t9 .qa{margin-top:.5rem;}
/* an interior page's single ask, sized below the homepage close */
.exit--close{margin-top:0;}
.exit--close p{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;margin-bottom:2.4rem;}
.exit--close .cta{font-size:1.15rem;padding:1.15rem 2.4rem;}

/* ---------------------------------------------------- /co-founding-seat
   PAGE-SCOPED: .c1-.c6 only. */
.c1 .d2{--d2-vw:6.6vw;--d2-max:5.2rem;}
/* This hero has no facing field, so the how-it-works 52ch lede cap would leave
   it stranded at 42% of the shell. */
.c1 .lede{max-width:none;}
.c3 .prose{max-width:none;}
.c2 .note{margin:2.5rem 0 0;font-size:1.05rem;line-height:1.6;
  color:var(--fg2);max-width:none;}
.c2 .more{margin-top:1.6rem;display:inline-block;}
.c4 .note{margin:2rem 0 0;font-size:1.02rem;color:var(--fg2);max-width:none;}
.c5 .qa{margin-top:.5rem;}

/* ---------------------------------------------------------- /contact
   PAGE-SCOPED: .k1-.k5 and .phone. */
@media (min-width:56rem){
  .k1 .face{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;}
  .k1 .d2{--d2-vw:6.4vw;--d2-max:5.2rem;}
}
/* the number is the page. Saffron measures 5.29:1 on deep teal; the link
   colour for the ground is surf, so this has to out-specify .m a. */
.m--teal .phone{display:inline-block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1;letter-spacing:-.022em;
  color:var(--accent);text-decoration:none;margin:1.6rem 0 0;
  border-bottom:2px solid currentColor;padding-bottom:.25rem;}
.m--teal .phone:hover{color:var(--cream);}
.k1 .lede{max-width:none;margin-top:1.8rem;}
.k2 .note{margin:2.5rem 0 0;font-size:1.05rem;line-height:1.6;
  color:var(--fg2);max-width:none;}
.k3 .note{margin:2rem 0 0;font-size:1.02rem;color:var(--fg2);max-width:none;}
.k4 .qa{margin-top:.5rem;}

/* ---------------------------------------------------- /about-michelle
   PAGE-SCOPED: .a1-.a7. The hero override is here for the same reason the
   terms one is — .p1 .face is how-it-works' hero grid. */
@media (min-width:56rem){
  .a1 .face{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;}
  .a1 .d2{--d2-vw:6vw;--d2-max:4.8rem;}
}
.a1 .lede{max-width:none;}
.a2 h2{margin-bottom:.5rem;}
.a2 .after{max-width:none;margin-top:3rem;}
.a2 .steps--wide .v{max-width:none;}
.a3 h2{margin-bottom:1.75rem;}
.a3 .prose,.a5 .prose{max-width:none;}
/* the turn: one line, smaller than the homepage close, larger than a heading */
.a4 .d2{--d2-vw:4.6vw;--d2-max:3.6rem;white-space:nowrap;}
@media (max-width:48rem){ .a4 .d2{white-space:normal;} }
/* the van shot is 1600x2230 — portrait enough to run the section on its own
   if it is left at field width */
@media (min-width:56rem){
  .a5 .face{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;}
  .a-van{max-width:22rem;}
}

/* ---------------------------------------------------------- /roadmap
   PAGE-SCOPED: .r1-.r7. */
.r1 .d2{--d2-vw:5.8vw;--d2-max:4.6rem;}
.r1 .lede{max-width:none;}
.r2 h2{margin-bottom:.25rem;}
.r2 .lede{margin:1.5rem 0 2.5rem;font-size:1.12rem;line-height:1.6;color:var(--fg);}
.r2 .duo,.r4 .steps{margin-top:0;}
.r2 .after,.r4 .after{max-width:none;margin-top:3rem;}
.r3 .prose,.r5 .prose{max-width:none;}
.r4 h2{margin-bottom:.25rem;}
.r4 .lede{margin-bottom:3rem;}
.r4 .steps--wide .v{max-width:none;}
.r6 .qa{margin-top:.5rem;}

/* two prose fields, equal. .face is 5/7 and .args carries rules — this is
   for the one moment that is simply two paragraphs side by side. */
.duo{display:grid;gap:2.25rem 4rem;}
@media (min-width:56rem){ .duo{grid-template-columns:repeat(2,minmax(0,1fr));} }
.duo .prose{max-width:none;}

/* ---------------------------------------------------------- /privacy
   PAGE-SCOPED: .v1-.v7 and .stamp. */
.v1 .d2{--d2-vw:5.6vw;--d2-max:4.4rem;}
.v1 .lede{max-width:none;}
.stamp{font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);
  margin:2.25rem 0 0;line-height:1.7;}
.v7 .stamp{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid var(--hair);
  text-transform:none;letter-spacing:.04em;font-weight:400;font-size:.9rem;}
.v4 .d2{--d2-vw:4.4vw;--d2-max:3.5rem;}
.v6 .qa{margin-top:.5rem;}
.v5 .args{margin-top:0;}