/* ══════════════════════════════════════════════════════════════════════════
   home.css — the marketing pages' own layer, on top of site.css.

   Lifted out of index.html on 2026-09-08, unchanged, so that pricing.html can
   wear the same clothes without a second copy of it. Two pages sharing one
   file is the whole reason this exists: a duplicated eighty-eight kilobytes
   would have drifted apart within a week.
   ═══════════════════════════════════════════════════════════════════════ */
.hero{max-width:1140px; margin:0 auto; padding:64px 26px 0; text-align:center}

/* line-height stays at .98. Loosening it to 1.10 did hide the symptom, but by
   pushing the two lines apart, which put a band of air around the pill and was
   not what was wrong. See the pill rule below for what actually was. */
h1{font-family:Gabarito,sans-serif; margin:0; color:var(--ink);
  font-size:clamp(40px,6.4vw,80px); font-weight:800; line-height:.98;
  letter-spacing:-.045em; text-wrap:balance}
/* WHY LINE ONE IS LIFTED. The p and g of "program" were never clipped: the
   pill's fill was painting over their tails, because it sits later in the
   document and the two are siblings at the same level. The real fix is in
   index.html, where the pill's vertical padding was cut so its top edge stops
   short of line one's ink. This is the belt to that braces: if the font ever
   falls back to a face with deeper descenders, z-index keeps line one above
   the fill and the tails stay whole. Tried and rejected: moving the fill to a
   pseudo element at z-index -1. The slot's clip-path makes its own stacking
   context, so the negative layer fell through it and left a grey box. */
/* .05em is the no-script floor for the daylight between the two lines: at line-height
   .98 the line box is shorter than the em box, so the tails of p and g hang below it
   and into the pill's fill. The script measures the real overhang and sets this exactly;
   this is what stands if it never runs, alongside the z-index. */
h1 .l1{display:block; position:relative; z-index:1; padding-bottom:.05em}
/* nowrap holds "The agent [verb] it." together as one line. The non-breaking space
   before "it." in the markup is the belt to that braces: if this ever stops being
   nowrap, the break lands after "agent" and never orphans "it." on its own row. */
h1 .line2{display:block; white-space:nowrap}
/* On a phone the pill plus "it." is wider than the screen; let it wrap and the pill
   takes its own line rather than pushing the page sideways. */
@media (max-width:620px){
  h1 .line2{white-space:normal}
  h1 .pill{margin-bottom:.06em}
}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* The pill is the feature list. It does not describe what the agent does; it cycles
   through it, and the dot takes the colour of whatever it is doing. */
/* BASELINE, NOT BOX. vertical-align:top aligned the pill's box to the top of the line,
   so the word inside sat lower than the words either side of it — the thing Notion never
   does. An inline-flex box takes its baseline from its FIRST flex item, so the word is
   first in the DOM and the dot is moved back to the left with order:-1. The active word
   is in normal flow (see .slot i.on) so there is a real baseline to take. */
h1 .pill{display:inline-flex; align-items:baseline; gap:.26em; background:var(--sunbg);
  border-radius:999px; padding:.06em .34em .12em .34em; vertical-align:baseline;
  transition:background-color .5s ease}
h1 .pill .dot{order:-1; width:.3em; height:.3em; border-radius:999px; background:var(--sun);
  flex:0 0 auto; align-self:center; transition:background-color .5s ease}
/* Clip TOP AND BOTTOM ONLY. overflow:hidden clipped horizontally too, and with negative
   letter-spacing a glyph's ink sits past its advance width — which is how "Plans" lost
   its s. The slide needs vertical clipping; nothing ever needed horizontal. */
h1 .slot{position:relative; display:inline-block; white-space:nowrap;
  clip-path:inset(0 -.09em 0 -.06em);   /* enough for a glyph's ink, not for a whole word.
     The script rewrites the top and bottom insets to the pill's own padding, so a word
     sliding in or out is cut at the edge of the lozenge and not before it. */
  /* Width, deliberately: the slot has to grow to the next word and carry the rest of
     the line with it. A transform would slide the sentence instead of setting it. */
  transition:width .62s cubic-bezier(.16,1,.3,1)}
h1 .slot i{position:absolute; left:0; top:0; font-style:normal; white-space:nowrap;
  opacity:0; transform:translateY(.45em);
  transition:opacity .42s ease, transform .52s cubic-bezier(.16,1,.3,1)}
/* the visible word is IN FLOW: it is what gives the pill its baseline and its height */
h1 .slot i.on{position:relative; opacity:1; transform:none}
h1 .slot i.out{opacity:0; transform:translateY(-.45em)}
h1 .meas{position:absolute; visibility:hidden; white-space:nowrap; pointer-events:none;
  left:-9999px; top:0}
@media (prefers-reduced-motion:reduce){
  h1 .pill{transition:none} h1 .slot i{transition:none}
}

.sub{margin:26px auto 0; max-width:72ch; font-size:clamp(17px,1.5vw,20px);
  line-height:1.45; color:#5E6382; font-weight:500}
.cta{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px}
.btn.soft{background:var(--viobg); border-color:var(--viobg); color:var(--vioi)}
.fine{margin-top:18px; font-size:14.5px; color:var(--muted); font-weight:500}

/* ── the two static proofs ────────────────────────────────────────────────
   Lifted out of the rail. They keep the card styling but lose the rail's
   fixed height and width: outside a scroller a card should be as tall as
   its content, and the pair should sit side by side where there is room. */
.proof2{max-width:1240px; margin:56px auto 0; padding:0 26px; text-align:left;
  display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1fr); gap:20px}
.proof2 .card,.proof2 .card.wide{flex:none; width:auto; height:auto; min-height:0;
  scroll-snap-align:none}
.proof2 .card.num{justify-content:flex-start}
.proof2 .card .foot{margin-top:auto; padding-top:22px}
.proof2 .card.num .big{margin-top:6px}
@media (max-width:900px){
  .proof2{grid-template-columns:1fr; margin-top:44px}
  .proof2 .card,.proof2 .card.wide{padding:26px 24px}
}
@media (max-width:620px){
  .proof2{padding:0 20px; gap:16px}
}

/* ── the rail ──────────────────────────────────────────────────────────────
   One idea per card, and the pace belongs to the reader. Cards run the full
   width of the window — the first one lines up with the headline's left edge
   and the rest carry on past the right, so it reads as a strip you can pull
   rather than a widget parked in the middle. A card is either a sentence or a
   thing happening, never both; the last version tried both and moved too fast
   to absorb. Cards animate only while they are the one in the middle.
   ------------------------------------------------------------------------- */
.railwrap{margin-top:64px; width:100vw; margin-left:calc(50% - 50vw)}
.rail{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px max(24px, calc(50vw - 626px)) 14px;
  scrollbar-width:none; -ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 404px; height:566px; border-radius:30px; scroll-snap-align:center;
  padding:34px 32px; display:flex; flex-direction:column; overflow:hidden;
  position:relative; text-align:left; background:var(--wash); border:1px solid var(--edge)}
.card h3{margin:0; font-family:Gabarito,sans-serif; font-size:34px; line-height:1.05;
  letter-spacing:-.036em; font-weight:700; color:var(--ink); text-wrap:balance}
.card .k{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px}
.card .foot{margin-top:auto; padding-top:18px; font-size:15px; line-height:1.45;
  font-weight:500; color:var(--body)}
.card.say{background:var(--sunbg); border-color:#F3DFA6; justify-content:space-between}
.card.say h3{font-size:44px; line-height:1.01; letter-spacing:-.04em}
.card.say.v{background:var(--viobg); border-color:var(--violn)}
.card.say.g{background:var(--grnbg); border-color:#BFE6D0}
.card.say.s{background:var(--skybg); border-color:#BFDFE9}
.card.say.r{background:var(--redbg); border-color:#F3C9C9}

.win{margin-top:22px; background:#fff; border:1px solid var(--edge); border-radius:16px;
  overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column}
.win.bare{background:transparent; border:0}
.win .top{height:28px; display:flex; align-items:center; gap:5px; padding:0 11px;
  border-bottom:1px solid var(--line); background:#F7F8FC; flex:0 0 auto}
.win .top i{width:6px; height:6px; border-radius:99px; background:#DCDFEC; display:block}
.win .top span{margin-left:7px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:#6B7085; text-transform:uppercase}
.win .body{padding:12px 13px; display:flex; flex-direction:column; gap:8px;
  min-height:0; overflow:hidden}
.win.bare .body{padding:0}

.cellrow{display:grid; grid-template-columns:1fr auto; gap:9px; align-items:center;
  font-size:13.5px; font-weight:600; color:var(--ink); padding:7px 0;
  border-bottom:1px solid var(--line)}
.cellrow > span{min-width:0}
.cellrow small{display:block; font-size:11.5px; color:var(--muted); font-weight:600; margin-top:2px}
.tagm{border-radius:99px; padding:3px 9px; font-size:11px; font-weight:700; white-space:nowrap}
.tagm.r{background:var(--redbg); color:var(--redi)} .tagm.a{background:var(--ambbg); color:var(--ambi)}
.tagm.g{background:var(--grnbg); color:var(--grni)} .tagm.s{background:var(--skybg); color:#0A5C74}
.tagm.v{background:var(--viobg); color:var(--vioi)}

.bub{border-radius:14px 14px 14px 4px; padding:10px 12px; font-size:13.5px; line-height:1.4;
  font-weight:600; background:var(--viobg); color:var(--vioi); align-self:flex-start; max-width:92%}
.bub.me{align-self:flex-end; background:var(--ink); color:#fff; font-weight:500;
  border-radius:14px 14px 4px 14px}

/* current state → future state */
.gapr{display:grid; grid-template-columns:1fr 20px 1fr; gap:8px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line)}
.gapr .n{background:var(--wash); border-radius:9px; padding:8px 9px; font-size:12px;
  font-weight:600; color:var(--muted)}
.gapr .f{background:var(--skybg); border-radius:9px; padding:8px 9px; font-size:12px;
  font-weight:600; color:#0A5C74}
.gapr .ar{color:#6B7085; display:grid; place-items:center}

/* the ripple */
.hop{display:flex; flex-direction:column; gap:0}
.hop .n{border-radius:11px; padding:9px 11px; font-size:13px; font-weight:700;
  border:1.5px solid var(--edge); background:#fff; color:var(--ink);
  transition:background-color .45s ease, border-color .45s ease, color .45s ease}
.hop .j{height:16px; margin-left:16px; border-left:2px solid #C9CBDE}
.card.live .hop .n.h1{background:var(--viobg); border-color:var(--violn); color:var(--vioi);
  transition-delay:.1s}
.card.live .hop .n.h2{background:var(--ambbg); border-color:#F0DCC0; color:var(--ambi);
  transition-delay:.5s}
.card.live .hop .n.h3{background:var(--redbg); border-color:#F3C9C9; color:var(--redi);
  transition-delay:.9s}
.card.live .hop .n.h4{background:var(--redbg); border-color:var(--red); color:var(--redi);
  transition-delay:1.3s}

/* capacity */
.cap{display:grid; grid-template-columns:64px 1fr 56px; gap:10px; align-items:center;
  font-size:13px; font-weight:600; color:var(--ink); padding:5px 0}
.cap .tk{height:11px; border-radius:99px; background:var(--wash); overflow:hidden}
.cap .tk b{display:block; height:100%; width:var(--w); border-radius:99px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.card.live .cap .tk b{transform:scaleX(1)}
.cap .n{font-size:12px; color:var(--muted); font-weight:600; text-align:right}

/* gantt */
.gan{display:flex; flex-direction:column; gap:7px}
.gan .g{display:grid; grid-template-columns:88px 1fr; gap:9px; align-items:center;
  font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--ink)}
.gan .ln{height:13px; border-radius:5px; background:var(--wash); position:relative}
.gan .ln b{position:absolute; top:0; bottom:0; left:var(--l); width:var(--w);
  border-radius:5px; background:var(--c); transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.card.live .gan .ln b{transform:scaleX(1)}
.card.live .gan .g:nth-child(2) b{transition-delay:.1s}
.card.live .gan .g:nth-child(3) b{transition-delay:.2s}
.card.live .gan .g:nth-child(4) b{transition-delay:.3s}
.card.live .gan .g:nth-child(5) b{transition-delay:.4s}
.card.live .gan .g:nth-child(6) b{transition-delay:.5s}

.mini{border:2px solid var(--sun); background:var(--sunbg); border-radius:16px; padding:13px;
  display:flex; flex-direction:column; gap:9px}
.mini b{font-family:Gabarito,sans-serif; font-size:16px; color:var(--ink); letter-spacing:-.02em}
.mini .o{display:flex; align-items:center; gap:9px; border-radius:12px; border:1.5px solid;
  padding:8px 10px; font-size:13.5px; font-weight:700; font-family:Gabarito,sans-serif;
  transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease}
.mini .o .d{width:17px; height:17px; border-radius:99px; display:grid; place-items:center;
  color:#fff; flex:0 0 auto}
.mini .o.g{background:#fff; border-color:var(--grn); color:var(--grni)} .mini .o.g .d{background:var(--grn)}
.mini .o.r{background:#fff; border-color:var(--red); color:var(--redi)} .mini .o.r .d{background:var(--red)}
.card.live .mini .o.r{transform:scale(1.03); box-shadow:0 0 0 4px rgba(217,44,44,.16);
  transition-delay:1.4s}
.card.live .mini .o.g{opacity:.35; transition-delay:1.4s}

.docm{display:flex; flex-direction:column; gap:10px}
.docm .rag{display:flex; gap:5px; flex-wrap:wrap}
.docm .rag span{font-size:11px; font-weight:700; border-radius:99px; padding:4px 9px}
.docm .bars{display:flex; gap:5px; align-items:flex-end; height:56px}
.docm .bars i{flex:1; border-radius:3px 3px 0 0; display:block; height:var(--h);
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card.live .docm .bars i{transform:scaleY(1)}
.docm .ln{height:8px; border-radius:99px; background:var(--line)}

.hand{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700;
  color:var(--suni); background:#fff; border:1.5px dashed var(--sun);
  border-radius:11px; padding:10px 12px}
.hand .cur{width:2px; height:1em; background:var(--ink); animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{opacity:0}}

/* ── controls ───────────────────────────────────────────────────────────
   A 7px dot is not a control, it is a status light. These are buttons: 44px
   arrows either side, and each dot carries a transparent 26px hit area so a
   thumb finds it. The arrows are the primary way through; the dots say where
   you are.
   ---------------------------------------------------------------------- */
.ctl{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:26px}
.arw{width:46px; height:46px; border-radius:99px; background:#fff; border:1.5px solid var(--edge);
  display:grid; place-items:center; color:var(--ink); cursor:pointer; flex:0 0 auto;
  transition:background-color .22s ease, border-color .22s ease, transform .22s ease}
.arw:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.arw:active{transform:scale(.94)}
.dots{display:flex; align-items:center; gap:2px; background:var(--wash); border-radius:99px;
  padding:0 8px}
.dots .dot{border:0; background:none; padding:11px 4px; display:block; cursor:pointer;
  line-height:0}
.dots .dot i{display:block; width:9px; height:9px; border-radius:99px; background:#C7CAE0;
  transform-origin:center; transition:transform .35s cubic-bezier(.16,1,.3,1),
  background-color .3s ease}
.dots .dot:hover i{background:#9096B8}
.dots .dot.on i{transform:scaleX(2.9); background:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .hand .cur{animation:none}
  .cap .tk b,.gan .ln b,.docm .bars i{transition:none}
}
/* ── card character ──────────────────────────────────────────────────────
   Thirteen identical rectangles read as a table, not a story. So: two widths,
   four kinds. A statement card is type only. A number card is one fact at
   ridiculous scale. A people card puts faces (initials, honestly — no invented
   photographs) against the work they carry. A product card shows the thing.
   ---------------------------------------------------------------------- */
.card{flex:0 0 508px; height:606px; padding:38px 36px}
.card.wide{flex:0 0 812px}
.card h3{font-size:35px}
.card.say h3{font-size:50px}
.card .foot{font-size:16px; padding-top:18px}

/* ── colour, not grey ────────────────────────────────────────────────────
   Nine cards, seven grounds. Two stay paper because they are documents, and a
   document on a tint reads as a poster. Nothing else is grey: a rail of grey
   rectangles is a table with rounded corners.
   ---------------------------------------------------------------------- */
.card.vioc{background:var(--viobg); border-color:var(--violn)}
.card.skyc{background:#E7F2F8; border-color:#BEDCE8}
.card.ambc{background:var(--ambbg); border-color:#F0DCC0}
.card.redc{background:var(--redbg); border-color:#F3C9C9}
.card.grnc{background:var(--grnbg); border-color:#BFE6D0}
.card.sunc{background:var(--sunbg); border-color:#F3DFA6}
.card.paper{background:#fff; border-color:var(--edge)}
.card.skyc h3,.card.skyc .big{color:#0A5C74} .card.skyc .foot{color:#2F6376}
.card.ambc .foot{color:var(--ambs)}
.card.redc h3,.card.redc .big{color:var(--redi)} .card.redc .foot{color:#8E2B2B}
.card.grnc h3,.card.grnc .big{color:#0A5330} .card.grnc .foot{color:var(--grns)}
.card.sunc .foot{color:#6A4A12}
.card.sunc .hand{border-color:#E0B93F}
/* the agent bubble is violet, so on the violet card it disappears; give it paper */
.card.vioc .bub:not(.me){background:#fff}
/* a block that floats in the middle of a statement card, between headline and foot */
.midblock{flex:0 0 auto; margin:auto 0}
.face{border-color:#fff}

/* ── the overnight run ───────────────────────────────────────────────────
   Four lines, no sub-clauses, set at headline size. They arrive ONE AT A
   TIME, roughly half a second apart, because the point of the card is that
   things kept happening while nobody watched — and a stack that fades in all
   at once is a list, not a night's work.
   ---------------------------------------------------------------------- */
.card.viod{background:#EBE8FD; border-color:#D2CBFA}
.card.viod h3{padding-right:132px}   /* keep the headline clear of the badge */
.run{position:absolute; top:34px; right:36px; display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.09em; color:#2C6547;
  background:#DCF6E7; border-radius:99px; padding:7px 13px}
.run i{width:7px; height:7px; border-radius:99px; background:var(--grn); display:block;
  animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.18}}

.tl{display:flex; flex-direction:column; justify-content:center; flex:1; min-height:0;
  margin-top:14px}
.tl .e{display:grid; grid-template-columns:118px 1fr; gap:22px; align-items:baseline;
  padding:19px 0; opacity:0; transform:translateY(13px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1)}
.tl .e + .e{border-top:1px solid rgba(58,44,168,.14)}
.card.live .tl .e{opacity:1; transform:none}
.card.live .tl .e:nth-child(2){transition-delay:.55s}
.card.live .tl .e:nth-child(3){transition-delay:1.1s}
.card.live .tl .e:nth-child(4){transition-delay:1.65s}
.tl time{font-family:Gabarito,sans-serif; font-weight:800; font-size:27px; color:#6C5CE8;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.tl .w{font-family:Gabarito,sans-serif; font-weight:700; font-size:31px; line-height:1.1;
  letter-spacing:-.032em; color:var(--ink)}

/* ── the pack, as an object ──────────────────────────────────────────────
   Three bordered boxes inside a card is three cards inside a card. This is
   one document instead, with two sheets showing behind it, and the status is
   a single proportional bar rather than a row of badges.
   ---------------------------------------------------------------------- */
.stack{position:relative; flex:1; min-height:0; margin-top:26px}
.pg{background:#fff; border:1px solid #D8E4EB; border-radius:18px}
.pg.b1,.pg.b2{position:absolute; left:0; right:0; top:0; bottom:0}
.pg.b2{transform:rotate(-2.6deg) translateY(10px); opacity:.5}
.pg.b1{transform:rotate(1.9deg) translateY(5px); opacity:.75}
.pg.top{position:relative; height:100%; padding:30px 32px; display:flex; flex-direction:column;
  justify-content:center; gap:15px; box-shadow:0 26px 48px -30px rgba(12,12,20,.5)}
.pg .ttl{font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#647781}
.ragbar{display:flex; gap:5px; margin-bottom:10px}
/* Proportional, but a segment still has to hold its own label: 8% of a phone-width
   sheet is 20px, and "2 stuck" does not fit in 20px. A floor keeps the bar honest
   enough to read as a proportion and legible enough to read as a number. */
.ragbar .s{flex:1 1 var(--f); min-width:82px; border-radius:11px; padding:14px 12px;
  display:flex; flex-direction:column; gap:2px; font-size:13px; font-weight:600;
  overflow:hidden; white-space:nowrap; transform:scaleX(.55); transform-origin:left center;
  opacity:0; transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .5s ease}
.card.live .ragbar .s{transform:none; opacity:1}
.card.live .ragbar .s:nth-child(2){transition-delay:.12s}
.card.live .ragbar .s:nth-child(3){transition-delay:.24s}
.ragbar b{font-family:Gabarito,sans-serif; font-size:30px; font-weight:800; letter-spacing:-.04em;
  line-height:1}
.ragbar .g{background:var(--grnbg); color:var(--grns)} .ragbar .g b{color:var(--grni)}
.ragbar .a{background:var(--ambbg); color:var(--ambs)} .ragbar .a b{color:var(--ambi)}
.ragbar .r{background:var(--redbg); color:#8E2B2B}   .ragbar .r b{color:var(--redi)}
.asks{display:flex; flex-direction:column; gap:12px; margin-top:2px}
.asks .q{font-family:Gabarito,sans-serif; font-size:26px; font-weight:700; letter-spacing:-.03em;
  line-height:1.15; color:var(--ink); padding-left:18px; position:relative}
.asks .q::before{content:''; position:absolute; left:0; top:.34em; width:8px; height:8px;
  border-radius:99px; background:var(--sun)}

/* ── two things, one wide card ───────────────────────────────────────────
   align-items:start left the bottom half of these cards empty, which reads as
   a card that failed to load rather than one with room to breathe. Both
   columns are full-height flex columns with their content centred, so the two
   halves balance each other and the card is filled by its own content. The
   pieces inside are also sized up: a wide card is not a narrow card with more
   margin.
   ---------------------------------------------------------------------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:34px; flex:1; min-height:0;
  margin-top:22px; align-items:stretch}
.two > *{min-width:0; display:flex; flex-direction:column; justify-content:center}
.two .big{margin-top:0; font-size:clamp(80px,8.4vw,112px)}
.two .cap2{font-size:15.5px; font-weight:500; line-height:1.45; margin-top:18px}
.two .win{margin-top:0; flex:0 0 auto}
.two .art{margin-top:20px}
.two .quote p{font-size:31px}
.two .hop .n{padding:12px 14px; font-size:14.5px}
.two .hop .j{height:22px; margin-left:18px}
.two .mini{padding:17px}
.two .mini b{font-size:19px}
.two .mini .o{padding:11px 13px; font-size:15px}
.two .mini .o .d{width:19px; height:19px}

/* a number, at the size the fact deserves */
.big{font-family:Gabarito,sans-serif; font-weight:800; letter-spacing:-.055em;
  line-height:.86; color:var(--ink); font-size:clamp(84px,11vw,124px);
  font-variant-numeric:tabular-nums; margin-top:auto}
.big.sm{font-size:clamp(64px,8vw,92px)}
.card.num{justify-content:flex-end}
.card.num h3{font-size:26px; margin-top:14px; letter-spacing:-.028em}

/* people */
.faces{display:flex; margin-top:auto; padding-left:2px}
.face{width:74px; height:74px; border-radius:99px; display:grid; place-items:center;
  font-family:Gabarito,sans-serif; font-weight:800; font-size:24px; color:#fff;
  border:3px solid var(--wash); margin-left:-14px}
.face:first-child{margin-left:0}
.face.p{background:#5B4BE1} .face.d{background:#0E7C9B} .face.r{background:#B85C08}
.face.a{background:#0C854A} .face.x{background:#C9CBDE; color:#676C8A}
.load{display:flex; flex-direction:column; gap:16px; margin-top:26px}
.load .l{display:grid; grid-template-columns:60px 1fr auto; gap:14px; align-items:center;
  font-size:16.5px; font-weight:700; color:var(--ink)}
.load .tk{height:18px; border-radius:99px; background:#fff; overflow:hidden;
  border:1px solid rgba(29,31,69,.09)}
.load .tk b{display:block; height:100%; width:var(--w); border-radius:99px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.card.live .load .tk b{transform:scaleX(1)}
.load .n{font-size:14px; font-weight:700; color:var(--muted)}

/* a line the agent actually says */
.quote{display:flex; flex-direction:column; gap:16px}
.quote p{font-family:Gabarito,sans-serif; font-size:27px; line-height:1.16;
  letter-spacing:-.028em; font-weight:700; color:var(--ink); margin:0}
.quote .by{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700;
  color:var(--muted)}
.quote .by span{width:28px; height:28px; border-radius:9px; background:var(--vio); color:#fff;
  display:grid; place-items:center; font-family:Gabarito,sans-serif; font-size:12px}

/* ── artwork ─────────────────────────────────────────────────────────────
   Drawn, not photographed. No stock people, no invented customers — shapes
   that belong to this palette and say something about the card they sit on.
   ---------------------------------------------------------------------- */
.art{margin-top:auto; width:100%; display:block}
.art .fade{opacity:.5}
.card.say .art{margin-top:24px}

/* ── phone ───────────────────────────────────────────────────────────────
   Last in the sheet on purpose. Card sizing is set in three places above and
   the later rule wins, so a narrow-screen block placed any earlier is dead
   CSS. Both widths collapse to one thumb-width card, the overnight lines keep
   their size but lose the wide time column, and the pack sheet tightens up.
   ---------------------------------------------------------------------- */
@media (max-width:620px){
  .card,.card.wide{flex:0 0 86vw; height:auto; min-height:530px; padding:26px 24px}
  .card h3{font-size:28px} .card.say h3{font-size:35px}
  .card .foot{font-size:14.5px; padding-top:14px}
  .rail{padding-left:20px; padding-right:20px; scroll-padding-left:20px}
  .big{font-size:clamp(76px,22vw,104px)} .big.sm{font-size:clamp(58px,17vw,80px)}
  /* Every card in the rail is as tall as the tallest, so the long cards set the
     height and the short ones pay for it in empty space. Trim the long ones,
     and centre the short ones so what space is left sits either side of the
     content rather than pooling under it. */
  /* Three rules across 342px leaves a dangling divider wherever the row wraps,
     so on a phone the figures are separated by space instead of by lines. */
  .figs{flex-wrap:wrap; gap:18px 0}
  .figs .f{border-right:0; padding-right:0; margin-right:30px}
  .figs .f span{white-space:normal; max-width:11ch}
  .two{grid-template-columns:1fr; gap:18px; margin-top:16px}
  .two .quote p{font-size:21px}
  .two .hop .n{padding:9px 11px; font-size:13.5px} .two .hop .j{height:15px}
  .two .art{margin-top:12px}
  .two .mini{padding:13px} .two .mini b{font-size:17px}
  .tl{margin-top:10px}
  .tl .e{grid-template-columns:1fr; gap:2px; padding:14px 0}
  .tl time{font-size:16px}
  .tl .w{font-size:25px}
  .stack{margin-top:20px}
  .pg.top{padding:20px 18px; gap:11px}
  .ragbar{gap:4px; margin-bottom:6px}
  .ragbar .s{padding:11px 8px; font-size:11px; min-width:66px} .ragbar b{font-size:22px}
  .asks .q{font-size:19px}
  /* no room beside a 28px headline: the badge goes back into the flow above it */
  .run{position:static; align-self:flex-start; margin-bottom:14px; padding:5px 10px;
    font-size:10.5px}
  .card.viod h3{padding-right:0}
  .card.say,.card.num{justify-content:center}
  .card.say .foot,.card.num .foot{margin-top:26px}
  .midblock{margin:24px 0 0}
  .faces{margin-top:24px}
  .art{opacity:.85}
  .ctl{gap:8px} .arw{width:42px; height:42px}
}

/* ══ THE STACK ═══════════════════════════════════════════════════════════
   Four panels, each sticky at a slightly lower offset than the last, so a
   panel parks and the next one slides up over it leaving its chip showing.
   The rail above is a horizontal scan; this is the vertical read, where the
   detail and the arithmetic live. The whole section sits on its own warm
   ground so it reads as a chapter rather than more page, with a hairline
   down each edge of the column tying the panels into one column.
   ═══════════════════════════════════════════════════════════════════════ */
.band{position:relative; background:#F6F5F1; border-top:1px solid #E9E7E0;
  border-bottom:1px solid #E9E7E0; margin-top:96px; padding:2px 0 1px}
.band .rule{position:absolute; top:0; bottom:0; width:1px; background:#E4E1D8;
  pointer-events:none}
.band .rule.l{left:calc(50% - 620px)}
.band .rule.r{left:calc(50% + 619px)}
@media (max-width:1300px){ .band .rule{display:none} }

.deep{max-width:1240px; margin:0 auto; padding:0 26px}
.deephd{max-width:920px; margin:104px auto 44px; padding:0 26px; text-align:center}
.deephd h2{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(34px,4.4vw,58px);
  font-weight:800; letter-spacing:-.042em; line-height:1.03; color:var(--ink);
  text-wrap:balance}
.deephd p{margin:18px auto 0; max-width:58ch; font-size:clamp(16.5px,1.4vw,19px);
  line-height:1.5; color:#6A6A80; font-weight:500}

.stack5{padding-bottom:110px}
/* 88px, not 18px: 70px of sticky bar plus the 18px the stack always had.
   Pinning at 18 would park each panel's first two lines behind the header. */
.panel{position:sticky; top:calc(88px + var(--i) * 76px); border-radius:40px;
  border:1px solid var(--pe); background:var(--pb); overflow:hidden;
  padding:36px 46px 40px; margin-bottom:24px;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:44px;
  align-items:center; min-height:520px}
.panel > .txt{min-width:0}

/* the chip, with its own echo trailing off to the right */
.chip3{display:inline-flex; align-items:center; position:relative; margin-bottom:22px}
.chip3 b{position:relative; z-index:3; background:var(--pa); color:#fff; border-radius:99px;
  padding:8px 17px; font-size:12px; font-weight:800; letter-spacing:.13em}
.chip3 i{position:absolute; top:0; bottom:0; border-radius:99px; background:var(--pa);
  display:block}
.chip3 i.e1{right:-13px; width:44px; z-index:2; opacity:.42}
.chip3 i.e2{right:-25px; width:44px; z-index:1; opacity:.2}

.panel h3{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(31px,3.4vw,45px);
  font-weight:800; line-height:1.04; letter-spacing:-.042em; color:var(--ink);
  text-wrap:balance}
.panel h3 em{font-style:normal; color:var(--pa); display:block}
.panel .lede{margin-top:18px; font-size:16.5px; line-height:1.55; color:var(--pt);
  font-weight:500; max-width:50ch}

/* the figures — real counts from a real workbook, not a stat-tile template */
.figs{display:flex; gap:0; margin-top:26px}
.figs .f{padding:0 26px 0 0; margin-right:26px; border-right:1px solid var(--pe)}
.figs .f:last-child{border-right:0; margin-right:0; padding-right:0}
.figs .f b{display:block; font-family:Gabarito,sans-serif; font-size:33px; font-weight:800;
  letter-spacing:-.045em; line-height:1; color:var(--pa)}
.figs .f span{display:block; margin-top:7px; font-size:13.5px; font-weight:600;
  color:var(--pt); line-height:1.35; white-space:nowrap}

/* ── who is asking ───────────────────────────────────────────────────────
   Three buttons, and the proof line and the call to action underneath both
   change with them. Not logos: we have no client logos to show, and inventing
   them would be the one dishonest thing on this page. What actually differs
   between readers here is which of the three they are.
   ---------------------------------------------------------------------- */
.roles{display:flex; gap:7px; margin-top:30px}
.role{width:42px; height:42px; border-radius:13px; border:1.5px solid var(--pe);
  background:#fff; display:grid; place-items:center; cursor:pointer; color:#9A9DB4;
  transition:color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.role:hover{color:var(--pa); border-color:var(--pa); transform:translateY(-2px)}
.role.on{color:#fff; background:var(--pa); border-color:var(--pa);
  box-shadow:0 7px 16px -10px rgba(15,15,22,.45)}
.proof{margin-top:16px; font-size:15.5px; line-height:1.5; font-weight:500; color:var(--pt);
  max-width:44ch; min-height:3em}
.proof b{color:var(--ink); font-weight:700}
.pbtn{display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:Gabarito,sans-serif; font-size:16px; font-weight:700; text-decoration:none;
  color:#fff; background:var(--pa); border-radius:13px; padding:12px 20px;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease}
.pbtn:hover{transform:translateY(-2px); box-shadow:0 13px 24px -14px rgba(15,15,22,.5)}
.pbtn.dark{background:var(--ink); box-shadow:none}
.pbtn.dark:hover{box-shadow:0 13px 24px -14px rgba(15,15,22,.55)}

/* the drawn object, in its own studio */
.scene{border-radius:26px; overflow:hidden; aspect-ratio:1/1; width:100%;
  background:linear-gradient(#FBFAF7 0%, #FBFAF7 52%, #EDE6DA 52%, #E4DACB 100%)}
.scene svg{width:100%; height:100%; display:block}

/* ── the objects move ────────────────────────────────────────────────────
   Each scene plays once, when its panel first comes into view. The order is
   the order the thing actually happens in: the sentence lands, then the rows
   appear; the lens comes down, then the row lights; the chain draws, then the
   last node slips and the ripple shows.
   ---------------------------------------------------------------------- */
.scene .fx,.scene .slide,.scene .drop,.scene .lens,.scene .catch,.scene .slip{
  opacity:0; transform-box:fill-box; transform-origin:center}
.scene .fx{transform:translateY(16px)}
.scene .slide{transform:translateX(38px)}
.scene .drop{transform:translateY(-42px)}
.scene .lens{transform:translate(26px,-58px) scale(.86)}
.scene .catch{transform:scaleX(.9)}
.scene .slip{transform:translateX(-26px)}
.scene .draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.scene .hand{opacity:0; transform-box:fill-box; transform-origin:center}

.panel.seen .scene .fx,.panel.seen .scene .slide,.panel.seen .scene .drop,
.panel.seen .scene .lens,.panel.seen .scene .catch,.panel.seen .scene .slip,
.summary.seen .arch .fx{
  animation:fxin .72s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
.panel.seen .scene .lens{animation-duration:1s; animation-delay:.55s}
.panel.seen .scene .catch{animation-delay:1.15s}
.panel.seen .scene .slip{animation-delay:1.1s}
.panel.seen .scene .draw,.summary.seen .arch .draw{
  animation:drawin 1.1s cubic-bezier(.4,0,.2,1) var(--d,0s) forwards}
.panel.seen .scene .hand{animation:handin 1.2s cubic-bezier(.16,1,.3,1) .55s forwards}
@keyframes fxin{to{opacity:1; transform:none}}
@keyframes drawin{from{stroke-dashoffset:var(--len)} to{stroke-dashoffset:0}}
@keyframes handin{from{opacity:0; transform:rotate(-150deg)} to{opacity:1; transform:none}}

/* ── how it is built ─────────────────────────────────────────────────────
   The four panels are what it does. This is what it runs on, in four tiles
   and a loop: you, the sheet you own, the reasoning, the inbox — and the tap
   travelling back into the sheet. Each caption is the reason that piece was
   chosen, not a feature.
   ---------------------------------------------------------------------- */
.summary{background:#EDEBE5; border:1px solid #E2DFD6; border-radius:40px;
  padding:46px 46px 50px; margin-bottom:104px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:38px 52px}
.slab{display:block; font-size:12px; font-weight:800; letter-spacing:.15em; color:#0C728E;
  margin-bottom:18px}
.summary h3{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(27px,2.7vw,36px);
  font-weight:800; line-height:1.05; letter-spacing:-.042em; color:var(--ink);
  text-wrap:balance}
.summary h3 em{font-style:normal; display:block; color:#0C728E; text-wrap:balance}
.sside{display:flex; align-items:flex-end}
.sside p{font-size:16.5px; line-height:1.55; color:#5A5A70; font-weight:500}

.arch{grid-column:1/-1; position:relative; margin-top:14px; padding-bottom:64px;
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:start;
  gap:0 6px}
.node{opacity:0; transform:translateY(16px)}
.summary.seen .node{animation:fxin .7s cubic-bezier(.16,1,.3,1) var(--nd,0s) forwards}
.tile{border-radius:18px; overflow:hidden; background:var(--tb); border:1px solid #E2DFD6;
  aspect-ratio:240/150}
.tile svg{width:100%; height:100%; display:block}
.node b{display:block; margin-top:16px; font-family:Gabarito,sans-serif; font-size:19px;
  font-weight:800; letter-spacing:-.028em; color:var(--ink)}
.node span{display:block; margin-top:7px; font-size:14.5px; line-height:1.45;
  font-weight:500; color:#5F5F76; max-width:26ch}
.arw2{align-self:center; margin-top:-58px; display:grid; place-items:center; color:#B4B1A6;
  padding:0 2px}
/* The return path is a bracket, not a picture: it has to land on the centre of two
   specific tiles at every width, which a fixed viewBox cannot do. */
.arch .loop{position:absolute; left:37%; right:11%; bottom:30px; height:42px;
  border:2px dashed #B9B6AB; border-top:0; border-radius:0 0 20px 20px;
  pointer-events:none}
.arch .loop::before{content:''; position:absolute; left:-6px; top:-1px; width:0; height:0;
  border:6px solid transparent; border-bottom-color:#B9B6AB; border-top:0}
.loopcap{position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background:#EDEBE5; padding:0 14px; font-size:13.5px; font-weight:600; color:#67677A;
  white-space:nowrap}

@media (max-width:1000px){
  .panel{grid-template-columns:1fr; gap:30px; padding:34px 30px 36px; min-height:0}
  .panel .scene{order:2; max-width:440px}
  .figs .f b{font-size:29px}
  .summary{grid-template-columns:1fr; gap:24px; padding:34px 30px 40px}
  .sside{align-items:flex-start}
  .arch{grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 4px; padding-bottom:0}
  .arch .loop,.loopcap{display:none}
  .arw2{display:none}
}
@media (max-width:620px){
  .band{margin-top:64px}
  .deephd{margin:70px auto 28px}
  .panel{position:static; border-radius:28px; padding:28px 22px 30px; margin-bottom:16px}
  .stack5{padding-bottom:34px}
  .panel .lede{font-size:16px}
  .summary{border-radius:28px; padding:28px 22px 32px; margin-bottom:70px}
  .arch{grid-template-columns:1fr; gap:24px}
  .node span{max-width:none}
  .proof{min-height:0}
  /* Three rules across 342px leaves a dangling divider wherever the row wraps,
     so on a phone the figures are separated by space instead of by lines. */
  .figs{flex-wrap:wrap; gap:18px 0}
  .figs .f{border-right:0; padding-right:0; margin-right:30px}
  .figs .f span{white-space:normal; max-width:11ch}
}
@media (prefers-reduced-motion:reduce){
  .panel{position:static}
  .scene .fx,.scene .slide,.scene .drop,.scene .lens,.scene .catch,.scene .slip,
  .scene .hand,.node{opacity:1; transform:none; animation:none}
  .scene .draw,.arch .draw{stroke-dashoffset:0; animation:none}
}



/* ══ ABOVE THE TICKET ════════════════════════════════════════════════════
   The last version of this section argued its case in paragraphs and read
   like a defence. This one states three values and shows the artefact behind
   each, with the whole "not a replacement" answer compressed into one line
   under the heading. The mocks are the real deliverables, cropped by the card
   so they read as product rather than illustration.
   ═══════════════════════════════════════════════════════════════════════ */
.bento{max-width:1240px; margin:112px auto 0; padding:0 26px}
.bhd{margin-bottom:34px}
.bhd h2{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(34px,4.6vw,60px);
  font-weight:800; letter-spacing:-.045em; line-height:1.02; color:var(--ink)}
.bhd p{margin:16px 0 0; max-width:56ch; font-size:clamp(16.5px,1.4vw,18.5px);
  line-height:1.5; color:#6A6A80; font-weight:500}

.bgrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
/* These are links now. They always carried a hover arrow, which is the standard
   signal for "this goes somewhere", and until now they went nowhere. */
.bnt{position:relative; border-radius:28px; padding:30px 32px 0; overflow:hidden;
  display:flex; flex-direction:column; min-height:432px; border:1px solid;
  text-decoration:none; color:inherit;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease}
.bnt:hover{transform:translateY(-3px); box-shadow:0 18px 36px -26px rgba(29,31,69,.55)}
.bnt.v{background:var(--viobg); border-color:var(--violn); --ba:#5B4BE1}
.bnt.s{background:#E9F3F8; border-color:#C4DDE8; --ba:#0E7C9B}
.bnt.g{background:var(--grnbg); border-color:#BFE6D0; --ba:#0F9D58}
/* The wide card is a two-column grid, so its children have to be two boxes and not
   four loose ones — the label and the headline live in .btxt together. */
.bnt.wide{grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:44px; align-items:center; padding:40px 42px; min-height:412px}
.btxt{min-width:0}
.bnt .k2{font-size:14.5px; font-weight:600; color:var(--muted)}
.bnt h3{margin:8px 0 0; font-family:Gabarito,sans-serif; font-size:26px; font-weight:800;
  line-height:1.15; letter-spacing:-.034em; color:var(--ink); padding-right:56px;
  text-wrap:balance}
.bnt.wide h3{font-size:clamp(28px,3vw,40px); line-height:1.06; letter-spacing:-.042em;
  padding-right:0}
.bnt.wide h3 em{font-style:normal; display:block; color:var(--ba)}
.go{position:absolute; top:30px; right:32px; width:40px; height:40px; border-radius:99px;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.bnt:hover .go{transform:translateX(3px)}
/* On the wide card a top-right arrow sits on top of the mock. It belongs under the
   headline instead, where it reads as the link it is. */
.bnt.wide .go{position:static; margin-top:26px}

/* the deliverable itself, cropped by the card */
.mk{margin-top:26px; background:#fff; border:1px solid rgba(29,31,69,.09); border-radius:16px;
  padding:0 0 4px; box-shadow:0 26px 52px -34px rgba(15,15,22,.4); flex:1; min-height:0;
  overflow:hidden}
.bnt.wide .mk{margin-top:0; flex:0 0 auto}
.mkbar{display:flex; align-items:center; gap:9px; padding:13px 16px;
  border-bottom:1px solid var(--line)}
.mkbar i{width:9px; height:9px; border-radius:3px; flex:0 0 auto}
.mkbar i.g{background:#0C854A} .mkbar i.v{background:#5B4BE1}
.mkbar b{font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.mkbar em{margin-left:auto; font-style:normal; font-size:12px; font-weight:600;
  color:var(--muted); white-space:nowrap}
.mkrow{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 62px; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:600;
  color:var(--ink)}
.mkrow span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mkrow span:nth-child(2){color:var(--muted)}
.mkrow span:last-child{color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.mkrow.hd{background:#F7F8FC; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#6B7085; padding:8px 16px}
.mkrow.hd span{color:#6B7085}
.mkrow .none{color:var(--redi); font-weight:700}

.mkhd{display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--line)}
.av2{width:26px; height:26px; border-radius:99px; background:var(--sun); color:var(--suni);
  display:grid; place-items:center; font-family:Gabarito,sans-serif; font-weight:800;
  font-size:12px; flex:0 0 auto}
.mkhd b{font-size:13.5px; font-weight:700; color:var(--ink)}
.mkhd em{margin-left:auto; font-style:normal; font-size:12px; font-weight:600; color:var(--muted)}
.mkbrief{margin:16px; border:2px solid var(--sun); background:var(--sunbg); border-radius:16px;
  padding:15px; display:flex; flex-direction:column; gap:11px}
.mkbrief .lt{align-self:flex-start; background:var(--red); color:#fff; border-radius:99px;
  padding:4px 11px; font-size:12px; font-weight:700}
.mkbrief b{font-family:Gabarito,sans-serif; font-size:18px; letter-spacing:-.028em;
  color:var(--ink)}
.mkbrief p{font-size:13.5px; line-height:1.4; color:var(--body); font-weight:500}
.opt2{display:flex; align-items:center; gap:10px; border:2px solid; border-radius:13px;
  padding:10px 13px; background:#fff; font-family:Gabarito,sans-serif; font-size:15px;
  font-weight:700}
.opt2 i{width:18px; height:18px; border-radius:99px; flex:0 0 auto}
.opt2.g{border-color:var(--grn); color:var(--grni)} .opt2.g i{background:var(--grn)}
.opt2.r{border-color:var(--red); color:var(--redi)} .opt2.r i{background:var(--red)}

.ragb{display:flex; gap:4px; margin:15px 16px 0}
.ragb span{flex:1 1 var(--f); min-width:72px; border-radius:10px; padding:11px 10px;
  display:flex; flex-direction:column; gap:1px; font-size:12px; font-weight:600;
  white-space:nowrap; overflow:hidden}
.ragb b{font-family:Gabarito,sans-serif; font-size:24px; font-weight:800; letter-spacing:-.04em;
  line-height:1}
.ragb .g{background:var(--grnbg); color:var(--grns)} .ragb .g b{color:var(--grni)}
.ragb .a{background:var(--ambbg); color:var(--ambs)} .ragb .a b{color:var(--ambi)}
.ragb .r{background:var(--redbg); color:#8E2B2B}   .ragb .r b{color:var(--redi)}
.pk{display:block; margin:18px 16px 8px; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#6B7085}
.dl{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
  margin:0 16px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;
  font-weight:600; color:var(--ink)}
.dl em{font-style:normal; font-size:11.5px; font-weight:700; border-radius:99px; padding:3px 9px;
  white-space:nowrap; background:var(--ambbg); color:var(--ambi)}
.dl:first-of-type em{background:var(--redbg); color:var(--redi)}
.mv2{display:flex; align-items:center; gap:9px; margin:0 16px; padding:7px 0; font-size:14px;
  font-weight:600; color:var(--ink)}
.mv2 i{width:7px; height:7px; border-radius:99px; flex:0 0 auto}

/* ── the demo picker ─────────────────────────────────────────────────────
   The old version of this listed twelve things and quietly mixed three
   different taxonomies: ERP is a kind of implementation, logistics is an
   industry, Salesforce is a platform. They are not siblings. They are three
   tags on the same object, so they are three tags on the same object now.
   And it is the demo selector rather than a list of claims, which means the
   call to action is on the card at rest, not on hover.
   ---------------------------------------------------------------------- */
/* ── the demo, as one thing to do rather than six ───────────────────────
   This was six cards in six colours, which asked the reader to compare
   before they had any reason to care. It is one dark banner now: the
   programs are a row of names, the seeded fault changes with the name, and
   there is exactly one button.
   ─────────────────────────────────────────────────────────────────────── */
.dpick{background:var(--ink); border-radius:34px; padding:46px 48px 44px;
  margin:96px 0 0;
  position:relative; overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size:30px 30px}
.dplive{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800;
  letter-spacing:.13em; color:#8FE8B8; background:rgba(61,220,132,.14); border-radius:99px;
  padding:7px 14px}
.dpick h3{margin:20px 0 0; max-width:17ch; font-family:Gabarito,sans-serif;
  font-size:clamp(30px,3.6vw,46px); font-weight:800; letter-spacing:-.044em; line-height:1.03;
  color:#fff; text-wrap:balance}
.dpl p{margin:16px 0 0; max-width:52ch; font-size:clamp(16px,1.35vw,18px); line-height:1.55;
  color:#B8BCDD; font-weight:500}

.dpsel{margin-top:30px; padding-top:28px; border-top:1px solid #33366A}
@media (min-width:900px){
  .dpick{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
    gap:56px; align-items:center; padding:48px 52px}
  .dpsel{margin-top:0; padding-top:0; border-top:0;
    border-left:1px solid #33366A; padding-left:46px}
}
.dprow{display:flex; flex-wrap:wrap; gap:8px}
.dpt2{cursor:pointer; border:1.5px solid #3A3D70; background:transparent; border-radius:99px;
  padding:9px 16px; font-family:Gabarito,sans-serif; font-size:14.5px; font-weight:700;
  color:#C9CCE6; transition:border-color .18s ease, background-color .18s ease, color .18s ease}
.dpt2:hover{border-color:#6F74B0; color:#fff}
.dpt2[aria-selected="true"]{background:var(--sun); border-color:var(--sun); color:var(--suni)}

.dpick .dpseed{display:flex; gap:11px; align-items:flex-start; margin-top:22px; min-height:3em;
  font-size:clamp(17px,1.7vw,21px); line-height:1.45; font-weight:600; color:#fff;
  max-width:44ch}
.dpick .dpseed::before{content:''; flex:0 0 auto; width:3px; align-self:stretch;
  background:var(--sun); border-radius:2px}

.dpact{margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px}
.dpfine{font-size:13.5px; font-weight:500; color:#8A90BE}

@media (max-width:820px){
  .dpick{padding:32px 24px 30px; border-radius:26px; margin-top:64px}
  .dpick .dpseed{min-height:0}
  .dpact .btn{width:100%; justify-content:center}
}

.dp:hover .dpgo svg{transform:translateX(3px)}

.dpfree{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.fr{display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:700;
  color:var(--grns); background:var(--grnbg); border-radius:999px; padding:7px 14px}
.fr svg{color:var(--grn); flex:0 0 auto}


/* ══ BRING US YOURS ══════════════════════════════════════════════════════
   A link asking somebody to get in touch collects nothing. A form collects
   the six things that make the first call useful, and a place to drop the
   charter or plan they already have. Submissions go wherever FORM_ENDPOINT
   points; with no endpoint set it falls back to a pre-filled email so the
   page is never a dead end.
   ═══════════════════════════════════════════════════════════════════════ */
/* Dark here put a third near-black slab under the dark closing CTA and above the
   footer, and the page started reading as three footers in a row. Sun is the one
   brand colour nothing else on the page uses at this size. */
.bring{margin:20px 0 104px; background:#FFFAEF; border:2px solid #EFDFB2;
  border-radius:34px; padding:44px 46px 46px}
.brhd{max-width:62ch; margin-bottom:32px}
.brhd h3{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(26px,3vw,38px);
  font-weight:800; letter-spacing:-.04em; line-height:1.06; color:var(--ink); text-wrap:balance}
.brhd p{margin:14px 0 0; font-size:16.5px; line-height:1.55; color:#6B6455; font-weight:500}
.brf{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 20px}
.fld{display:flex; flex-direction:column; gap:8px; min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:14.5px; font-weight:700; color:var(--ink)}
.opt3{font-weight:600; color:#756E5C; font-size:13px}
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea{
  width:100%; background:#fff; border:1.5px solid #E9DFC4; border-radius:13px;
  padding:13px 15px; font-family:inherit; font-size:15.5px; font-weight:500; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease}
.fld input::placeholder,.fld textarea::placeholder{color:#A79E8A}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(15,15,22,0.08); outline:none}
.fld textarea{resize:vertical; line-height:1.5}
.fld select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A79E8A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:42px}
.fld select option{background:#fff; color:var(--ink)}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red)}
.errm{font-size:13.5px; font-weight:600; color:var(--redi)}

.drop{position:relative; background:#fff; border:2px dashed #DFD2AE; border-radius:16px;
  padding:24px; text-align:center; transition:border-color .2s ease, background-color .2s ease}
.drop.over{border-color:var(--ink); background:#FFFCF2}
.drop input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0;
  cursor:pointer}
.dropm{display:flex; flex-direction:column; align-items:center; gap:5px; color:#756E5C;
  pointer-events:none}
.dropm b{font-family:Gabarito,sans-serif; font-size:16px; font-weight:700; color:var(--ink)}
.dropm em{font-style:normal; font-size:13.5px; font-weight:500}
.fnames{display:block; font-size:14px; font-weight:600; color:var(--suni); line-height:1.5}

.brsub{flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px}
.brsub .btn{flex:0 0 auto}
.brsub .btn[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.brnote{font-size:14.5px; line-height:1.5; color:#6B6455; font-weight:500; max-width:42ch}
.brnote.ok{color:var(--grni); font-weight:700}
.brnote.err{color:var(--redi); font-weight:700}

@media (max-width:820px){
  .bring{padding:32px 24px 34px; border-radius:26px}
  .brf{grid-template-columns:1fr}
  .brsub{flex-direction:column; align-items:stretch}
  .brsub .btn{width:100%; justify-content:center}
}

.dpfoot{margin-top:24px; max-width:70ch; font-size:16px; line-height:1.55; color:var(--body);
  font-weight:500}
.dpfoot a{color:var(--vio); font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--violn)}
.dpfoot a:hover{border-color:var(--vio)}

@media (max-width:1000px){
  .bgrid{grid-template-columns:1fr}
  .bnt.wide{grid-template-columns:1fr; gap:26px; padding:30px 26px}
  .bnt.wide .go{top:30px; right:26px}

}
@media (max-width:620px){
  .bento{margin-top:72px}
  .bnt{border-radius:24px; padding:26px 22px 0; min-height:400px}
  .bnt h3{font-size:23px; padding-right:48px}
  .go{top:26px; right:22px; width:36px; height:36px}
  .mkrow{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); font-size:12.5px; padding:10px 13px}
  .mkrow span:last-child{display:none}
  .mkbar,.mkhd{padding:11px 13px}
  .mkbrief{margin:13px; padding:13px}
  .ragb{margin:13px 13px 0} .ragb span{min-width:64px; padding:9px 8px; font-size:11px}
  .ragb b{font-size:20px}
  .pk,.dl,.mv2{margin-left:13px; margin-right:13px}
  .dpick{margin-top:54px}
  .dphd{margin-bottom:22px}
  .dpkey{line-height:2.3}
  .dp{padding:22px 20px 18px; border-radius:22px}
  .dpi{width:46px; height:46px; border-radius:15px}
  .dp > b{font-size:20px; margin-top:15px; padding-right:96px}
  .sx b{font-size:24px} .sx em{font-size:12px}
  .dpgo{font-size:15px; padding:14px 14px}
  .dphd{max-width:none}
  .fr{font-size:13.5px; padding:6px 12px}
}

/* ══ WHO IT IS FOR ═══════════════════════════════════════════════════════
   One program, five jobs. A tab rail on the left, one big panel on the right
   that carries the whole answer for whoever you are, including a single
   headline figure that means something to them and nothing to the others.
   The C-suite panel is the dark one on purpose: it is the only one whose
   value is measured in surprises avoided rather than hours saved.
   ═══════════════════════════════════════════════════════════════════════ */
.who,.hours{max-width:1240px; margin:0 auto; padding:0 26px}
.who{margin-top:104px}
.whohd{max-width:820px; margin:0 0 40px}
.whohd h2{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(31px,3.9vw,50px);
  font-weight:800; letter-spacing:-.042em; line-height:1.04; color:var(--ink);
  text-wrap:balance}
.whohd p{margin:16px 0 0; max-width:58ch; font-size:clamp(16.5px,1.4vw,18.5px);
  line-height:1.5; color:#6A6A80; font-weight:500}

.pwrap{display:grid; grid-template-columns:296px minmax(0,1fr); gap:22px; align-items:start}
.ptabs{display:flex; flex-direction:column; gap:4px; background:#fff;
  border:1px solid var(--edge); border-radius:24px; padding:10px;
  box-shadow:0 24px 44px -34px rgba(15,15,22,0.34)}
.ptab{display:flex; align-items:center; gap:13px; padding:12px 13px; border:0;
  background:none; border-radius:16px; cursor:pointer; text-align:left; width:100%;
  transition:background-color .2s ease}
.ptab:hover{background:var(--wash)}
.ptab .pico{flex:0 0 auto; width:40px; height:40px; border-radius:13px; display:grid;
  place-items:center; background:var(--wash); color:#6A6D81;
  transition:background-color .25s ease, color .25s ease}
.ptab.on .pico{background:var(--pk); color:#fff}
.ptab.on{background:var(--wash)}
.plab b{display:block; font-family:Gabarito,sans-serif; font-size:16.5px; font-weight:700;
  letter-spacing:-.02em; color:var(--muted); transition:color .2s ease}
.ptab.on .plab b{color:var(--ink)}
.plab em{display:block; font-style:normal; margin-top:2px; font-size:12.5px; font-weight:500;
  color:#6A6D81; line-height:1.3}

.ppanels{position:relative}
.ppanel{display:none; grid-template-columns:minmax(0,1.22fr) minmax(0,.86fr); gap:38px;
  align-items:center; background:var(--pb); border:1px solid var(--pe);
  border-radius:32px; padding:40px 42px; min-height:452px}
.ppanel.on{display:grid; animation:pfade .45s ease}
@keyframes pfade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.ppanel h3{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(27px,2.9vw,38px);
  font-weight:800; line-height:1.05; letter-spacing:-.04em; color:var(--ph);
  text-wrap:balance}
.plede{margin-top:16px; font-size:16.5px; line-height:1.55; color:var(--pt); font-weight:500;
  max-width:46ch}
.pgets{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.pgets li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; line-height:1.45;
  font-weight:600; color:var(--ph)}
.pgets svg{flex:0 0 auto; margin-top:2px; color:var(--pa)}
.pstat{margin-top:26px; padding-top:20px; border-top:1px solid var(--pe);
  display:flex; align-items:baseline; gap:16px}
.pstat b{font-family:Gabarito,sans-serif; font-size:44px; font-weight:800;
  letter-spacing:-.05em; line-height:1; color:var(--pa); white-space:nowrap}
.pstat span{font-size:14.5px; line-height:1.4; font-weight:600; color:var(--pt); max-width:30ch}
.pscene{border-radius:24px; overflow:hidden; aspect-ratio:320/240; width:100%;
  background:linear-gradient(#FBFAF7 0%, #FBFAF7 58%, #EDE6DA 58%, #E4DACB 100%)}
.pscene svg{width:100%; height:100%; display:block}

/* ══ A WEEK, BEFORE AND AFTER ════════════════════════════════════════════
   Two bars of the same forty hours, so the point is the shape rather than a
   number we are asking anyone to trust. The size buttons scale the table
   underneath, and the note says out loud that these are assumptions.
   ═══════════════════════════════════════════════════════════════════════ */
.hours{margin-top:118px; margin-bottom:118px}
.sizer{display:inline-flex; gap:4px; background:var(--wash); border-radius:99px; padding:5px;
  margin-bottom:32px}
.sz{border:0; background:none; border-radius:99px; padding:10px 18px; cursor:pointer;
  font-family:Gabarito,sans-serif; font-size:15px; font-weight:700; color:var(--muted);
  transition:background-color .2s ease, color .2s ease}
.sz:hover{color:var(--ink)}
.sz.on{background:var(--ink); color:#fff}

.weeks{background:#fff; border:1px solid var(--edge); border-radius:28px; padding:32px 34px;
  box-shadow:0 26px 50px -40px rgba(15,15,22,0.38)}
.wk + .wk{margin-top:26px}
.wlab{display:block; font-size:13.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin-bottom:11px}
.bar{display:flex; gap:3px; height:58px; border-radius:14px; overflow:hidden}
.sg{flex:0 0 var(--w); background:var(--c); display:grid; place-items:center;
  min-width:0; overflow:hidden; transform:scaleX(0); transform-origin:left center;
  transition:flex-basis .7s cubic-bezier(.16,1,.3,1)}
.hours.seen .sg{animation:sgin .8s cubic-bezier(.16,1,.3,1) var(--sd,0s) forwards}
@keyframes sgin{to{transform:none}}
.sg i{font-style:normal; font-family:Gabarito,sans-serif; font-size:17px; font-weight:800;
  color:#fff; letter-spacing:-.02em}
.legend{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; padding-top:20px;
  border-top:1px solid var(--line)}
.lg{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--body)}
.lg i{width:11px; height:11px; border-radius:4px; flex:0 0 auto}

.ftable{margin-top:26px; background:var(--wash); border:1px solid var(--edge);
  border-radius:28px; padding:10px 30px 22px}
.fhd,.frow,.ftot{display:grid; grid-template-columns:minmax(0,1fr) 210px 96px; gap:22px;
  align-items:center}
.fhd{padding:18px 0 14px; font-size:12.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--edge)}
.fhd span:last-child{grid-column:3; text-align:right; white-space:nowrap}
.frow{padding:15px 0; border-bottom:1px solid var(--edge); opacity:0;
  transform:translateY(10px)}
.hours.seen .frow{animation:fxin .6s cubic-bezier(.16,1,.3,1) var(--fd,0s) forwards}
.fn{font-size:16px; font-weight:600; color:var(--ink)}
.fbar{height:12px; border-radius:99px; background:#E6E7F0; overflow:hidden}
.fbar i{display:block; height:100%; width:var(--w); border-radius:99px; background:var(--vio);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hours.seen .fbar i{transform:scaleX(1)}
.fh{font-family:Gabarito,sans-serif; font-size:19px; font-weight:800; letter-spacing:-.03em;
  color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.ftot{padding:20px 0 6px}
.ftot span{font-family:Gabarito,sans-serif; font-size:19px; font-weight:800;
  letter-spacing:-.03em; color:var(--ink)}
.ftot b{grid-column:3; text-align:right; font-family:Gabarito,sans-serif; font-size:30px;
  font-weight:800; letter-spacing:-.04em; color:var(--grn); font-variant-numeric:tabular-nums}
.fnote{margin-top:20px; max-width:70ch; font-size:14px; line-height:1.55; color:var(--muted);
  font-weight:500}

@media (max-width:1000px){
  .pwrap{grid-template-columns:1fr; gap:16px}
  .ptabs{flex-direction:row; overflow-x:auto; border-radius:20px; padding:8px;
    scrollbar-width:none}
  .ptabs::-webkit-scrollbar{display:none}
  /* A horizontal rail is only a rail if you can see there is more of it: keep the
     tabs compact enough that the next one is always peeking past the edge. */
  .ptab{flex:0 0 auto; width:auto; gap:10px; padding:9px 13px; min-width:0}
  .ptab .pico{width:34px; height:34px; border-radius:11px}
  .plab b{font-size:15px; white-space:nowrap}
  .plab em{display:none}
  .ppanel{grid-template-columns:1fr; gap:28px; padding:32px 26px; min-height:0}
  .ppanel .pscene{order:2; max-width:440px}
  .fhd,.frow,.ftot{grid-template-columns:minmax(0,1fr) 96px}
  .fbar{display:none}
  .fhd span:last-child,.ftot b{grid-column:2}
}
@media (max-width:620px){
  .who{margin-top:64px} .hours{margin-top:76px; margin-bottom:76px}
  .whohd{margin-bottom:26px}
  .ppanel{border-radius:26px; padding:26px 22px}
  .plede{font-size:16px}
  .pstat{flex-direction:column; gap:6px; align-items:flex-start}
  .pstat span{max-width:none}
  .weeks{padding:22px 20px; border-radius:22px}
  .bar{height:46px} .sg i{font-size:14px}
  .ftable{padding:6px 20px 18px; border-radius:22px}
  .fn{font-size:15px}
  .sizer{width:100%; justify-content:space-between}
  .sz{flex:1; padding:10px 6px; font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ppanel.on{animation:none}
  .sg{transform:none; animation:none}
  .frow{opacity:1; transform:none; animation:none}
  .fbar i{transition:none}
}



/* ══ PRICING ═════════════════════════════════════════════════════════════
   Per program, never per seat. The page spends its whole length promising
   that nobody signs up for anything, so a per-seat price would contradict
   the product in its own pricing table. A program is also the unit a buyer
   already has a budget line for.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── THE MONEY, INSIDE THE HOURS SECTION ─────────────────────────────────
   Four numbers and three bars. Everything that was body copy is behind a
   <details>, so the argument reads in seconds and still survives being
   checked. Nothing here is a saving: it is what the program already burns,
   what one more person costs, and what this costs. No assumption about how
   well the agent works is doing any work in that.
   ---------------------------------------------------------------------- */
.wlab{display:flex; align-items:baseline; gap:12px}
.wtag{margin-left:auto; font-style:normal; font-size:13px; font-weight:700; letter-spacing:-.01em;
  text-transform:none; color:var(--redi); background:var(--redbg); border-radius:999px;
  padding:5px 12px}
.wtag.on{color:var(--grni); background:var(--grnbg)}

.kpis{margin-top:20px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.kpi{background:var(--wash); border:1px solid var(--edge); border-radius:24px;
  padding:26px 26px 24px}
/* The money card sets a smaller face than the hours cards, so its line box was
   shorter and everything under it rode up: three cards in a row with their
   sub-copy on three different baselines. Reserve the tall number's line box on
   all of them and sit the text on the bottom of it, so the numerals share a
   baseline and the sentences beneath start level. */
.kpi b{display:flex; align-items:flex-end; min-height:calc(clamp(34px,3.6vw,50px) * .9);
  font-family:Gabarito,sans-serif; font-size:clamp(34px,3.6vw,50px);
  font-weight:800; letter-spacing:-.05em; line-height:.9; color:var(--kc,var(--ink));
  font-variant-numeric:tabular-nums}
.kpi span{display:block; margin-top:12px; font-size:15.5px; font-weight:600; line-height:1.4;
  letter-spacing:-.015em; color:var(--body)}

.versus{margin:0 0 20px; background:#fff; border:1px solid var(--edge); border-radius:28px;
  padding:30px 34px 28px}
.vshd{font-family:Gabarito,sans-serif; font-size:clamp(21px,2.2vw,28px); font-weight:800;
  letter-spacing:-.035em; color:var(--ink); margin:0; text-wrap:balance}
.vsrows{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.vsrow{display:grid; grid-template-columns:minmax(0,238px) minmax(0,1fr) 128px;
  gap:20px; align-items:center}
.vsn{font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--ink); line-height:1.3}
.vsn em{display:block; font-style:normal; font-size:12.5px; font-weight:500; color:var(--muted);
  margin-top:3px}
.vstrack{height:34px; border-radius:10px; background:var(--wash);
  border:1px solid var(--edge); overflow:hidden}
/* Width is unconditional. It used to be painted only under .hours.seen, so the
   moment this card moved into the pricing section the bars rendered empty: an
   animation hook that silently doubled as the thing that made them exist. */
.vstrack i{display:block; height:100%; width:var(--w); background:var(--ink); border-radius:9px;
  transition:width .6s cubic-bezier(.16,1,.3,1)}
.vsrow.us .vstrack i{background:var(--sun)}
.vsrow.us2 .vstrack i{background:#C9C2F6}
.vsfig{text-align:right; font-family:Gabarito,sans-serif; font-size:19px; font-weight:800;
  letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.15}
.vsfig em{display:block; margin-top:3px; font-family:Figtree,sans-serif; font-style:normal;
  font-size:12.5px; font-weight:600; letter-spacing:0; color:var(--muted)}
.vsrow.us .vsfig{color:var(--ambi)}
.vskick{margin-top:22px; padding:16px 20px; background:var(--sunbg); border-radius:15px;
  font-size:16.5px; line-height:1.4; font-weight:700; letter-spacing:-.02em; color:var(--ink)}

/* the long version, folded away. Present for anyone who wants to check it,
   absent for everyone who does not. */
.mores{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px}
.more{flex:1 1 300px; border:1px solid var(--edge); border-radius:16px; background:#fff}
.more[open]{flex-basis:100%}
.more summary{cursor:pointer; list-style:none; padding:14px 20px; font-size:14px;
  font-weight:700; letter-spacing:-.01em; color:var(--muted);
  display:flex; align-items:center; gap:9px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:''; width:8px; height:8px; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(-1px,1px); transition:transform .2s ease}
.more[open] summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.more summary:hover{color:var(--ink)}
.more > *:not(summary){margin:0 20px 18px}
.more .ftable{margin-top:0; background:none; border:0; padding:0}
.more .fnote{margin-top:0; margin-bottom:12px; max-width:80ch}
.more .fnote b{color:var(--ink); font-weight:700}

/* the OR between the two monthly options. Two rows on one axis read as a list
   of things you buy; a labelled break reads as a fork. The words are in the
   markup rather than a ::before so a screen reader gets them too, and the row
   is aria-hidden because the copy above the tiers already says it in prose. */
/* the capacity card. Chips rather than a number alone, because "two" only lands
   when you can see the second one appear next to the first. */
.cap{margin-top:20px; background:var(--ink); border-radius:28px; padding:32px 36px 30px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px;
  align-items:center; box-shadow:0 40px 70px -50px rgba(15,15,22,.6)}
.capeye{display:block; font-size:12px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sun); margin-bottom:20px}
.caprow{display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:16px;
  align-items:center; padding:14px 0; border-top:1px solid #33366A}
.caprow:last-child{border-bottom:1px solid #33366A}
.caplab{font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:#9AA0C8}
.capchips{display:flex; gap:7px; flex-wrap:wrap}
.capchips i{display:block; width:26px; height:34px; border-radius:7px; background:#2E3162;
  border:1px solid #3E4278}
.caprow.on .capchips i{background:var(--sun); border-color:var(--sun)}
.caprow b{font-family:Gabarito,sans-serif; font-size:21px; font-weight:800; letter-spacing:-.035em;
  color:#D2D6EE; white-space:nowrap}
.caprow.on b{color:#fff}
.capsay{display:flex; flex-direction:column; gap:14px}
.capsay p{font-size:15.5px; line-height:1.6; font-weight:500; color:#A8ADD4}
.capsay p + p{padding-top:14px; border-top:1px solid #33366A; color:#C6CCE6}
.capsay b{color:#fff; font-weight:700}
@media (max-width:1000px){
  .cap{grid-template-columns:1fr; gap:24px; padding:26px 22px 24px; border-radius:24px}
  .caprow{grid-template-columns:92px minmax(0,1fr) auto; gap:12px}
  .caprow b{font-size:18px}
}

.vsor{display:flex; align-items:center; gap:14px; margin:2px 0}
.vsor::before,.vsor::after{content:''; flex:1 1 auto; height:1px; background:var(--edge)}
.vsor span{flex:0 0 auto; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); background:var(--wash);
  border:1px solid var(--edge); border-radius:999px; padding:6px 14px}
.vsor.sm span{letter-spacing:.14em}

.wtop{margin:0 0 18px; font-size:13px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted)}
.wsay{margin-top:18px; font-size:15.5px; font-weight:700; letter-spacing:-.015em;
  color:var(--ink)}
.kpi b.rng{font-size:clamp(26px,2.7vw,37px); letter-spacing:-.04em}

/* the person block inside the featured tier */
.tperson{display:flex; gap:13px; align-items:center; margin-top:22px; padding:14px 16px;
  background:#262950; border:1px solid #3A3E74; border-radius:16px}
.tperson .tppic{width:46px; height:46px; border-radius:999px; flex:0 0 auto; object-fit:cover}
.tperson .ini{display:flex; align-items:center; justify-content:center; background:var(--sun);
  color:var(--suni); font-family:Gabarito,sans-serif; font-size:16px; font-weight:800}
.tpn{font-family:Gabarito,sans-serif; font-size:15.5px; font-weight:800; letter-spacing:-.025em;
  color:#fff; line-height:1.2}
.tpr{display:block; margin-top:3px; font-size:12.5px; line-height:1.4; font-weight:600;
  color:#9AA0C8}

@media (max-width:1000px){
  .kpis{grid-template-columns:1fr}
  /* label and figure share the first row, the bar runs under both */
  .vsrow{grid-template-columns:minmax(0,1fr) auto; gap:10px 16px}
  .vsfig{white-space:normal}
  .vsn{grid-column:1; grid-row:1}
  .vsfig{grid-column:2; grid-row:1; align-self:start; text-align:right}
  .vstrack{grid-column:1 / -1; grid-row:2; height:26px}
}
@media (max-width:760px){
  .human{margin-top:70px}
  .versus{padding:24px 20px 24px; border-radius:24px}
  .kpi{padding:22px 22px 20px; border-radius:20px}
}

.price{max-width:1240px; margin:118px auto 0; padding:0 26px}
.tiers{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
  align-items:stretch}
.tier{background:#fff; border:1px solid var(--edge); border-radius:30px; padding:32px 32px 34px;
  display:flex; flex-direction:column}
.tier.feat{background:var(--ink); border-color:var(--ink); position:relative;
  box-shadow:0 40px 70px -46px rgba(15,15,22,0.6)}
.tname{font-family:Gabarito,sans-serif; font-size:22px; font-weight:800; letter-spacing:-.03em;
  color:var(--ink)}
.tkind{display:block; margin-top:5px; font-size:13.5px; font-weight:600; color:var(--muted)}
.tprice{display:flex; align-items:baseline; gap:9px; margin-top:22px}
.tprice b{font-family:Gabarito,sans-serif; font-size:42px; font-weight:800; letter-spacing:-.05em;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.tprice em{font-style:normal; font-size:14.5px; font-weight:600; color:var(--muted)}
.tline{margin-top:16px; font-size:15.5px; line-height:1.5; font-weight:500; color:var(--body);
  min-height:7.5em}
@media (max-width:760px){ .tline{min-height:0} }
.tcta{display:block; margin-top:22px; text-align:center; text-decoration:none;
  font-family:Gabarito,sans-serif; font-size:16px; font-weight:700; border-radius:13px;
  padding:13px 18px; background:var(--wash); color:var(--ink);
  border:1.5px solid var(--edge);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), background-color .2s ease}
.tcta:hover{transform:translateY(-2px); background:#EFF0F6}
.tfeat{list-style:none; margin:26px 0 0; padding:26px 0 0; border-top:1px solid var(--edge);
  display:flex; flex-direction:column; gap:12px; flex:1 1 auto}
.tfeat li{display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.45;
  font-weight:500; color:var(--body)}
.tfeat svg{flex:0 0 auto; margin-top:2px; color:var(--grn)}
.tcap{display:flex; gap:11px; align-items:flex-start; margin-top:20px; padding:14px 18px;
  background:var(--wash); border:1px solid var(--edge); border-radius:16px;
  font-size:14.5px; line-height:1.5; font-weight:500; color:var(--body)}
.tcap svg{flex:0 0 auto; margin-top:2px; color:var(--muted)}
.tcap b{color:var(--ink); font-weight:700}

.tier.feat .tname{color:#fff}
.tier.feat .tkind{color:#9AA0C8}
.tier.feat .tprice b{color:var(--sun)}
.tier.feat .tprice em,.tier.feat .tline{color:#A8ADD4}
.tier.feat .tcta{background:var(--sun); border-color:var(--sun); color:var(--suni)}
.tier.feat .tcta:hover{background:#FFDE6B}
.tier.feat .tfeat,.tier.feat .tnote{border-color:#33366A}
.tier.feat .tfeat li{color:#D2D6EE}
.tier.feat .tfeat svg{color:#5FD79B}
.tier.feat .tnote{color:#9AA0C8}



/* ── true in every plan ──────────────────────────────────────────────────
   This was five identical green ticks in a row, which is what every pricing
   page in the category does and says nothing. Almost all of these promises
   are absences, so the number leads: an infinity, then four zeroes. The
   zeroes ARE the pitch, at the size the pitch deserves.
   ---------------------------------------------------------------------- */
.always{margin-top:24px; border:1px solid var(--edge); border-radius:26px; overflow:hidden;
  background:#fff}
.alwhd{display:block; padding:17px 26px; font-size:12.5px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:#6A6D81; background:var(--wash);
  border-bottom:1px solid var(--edge)}
.alwrow{display:grid; grid-template-columns:repeat(5, minmax(0,1fr))}
.alw{padding:28px 24px 26px; border-right:1px solid var(--edge); position:relative;
  overflow:hidden}
.alw:last-child{border-right:0}
.alw::before{content:''; position:absolute; inset:0; background:var(--awb); opacity:0;
  transition:opacity .3s ease}
.alw:hover::before{opacity:.55}
.alw > *{position:relative}
.alw b.inf{font-size:clamp(56px,5.6vw,78px); line-height:.72}
.alw b{display:block; font-family:Gabarito,sans-serif; font-size:clamp(44px,4.4vw,60px);
  font-weight:800; letter-spacing:-.055em; line-height:.9; color:var(--aw);
  font-variant-numeric:tabular-nums}
.alw span{display:block; margin-top:12px; font-size:16px; font-weight:700; letter-spacing:-.018em;
  color:var(--ink); line-height:1.25}
.alw em{display:block; margin-top:5px; font-style:normal; font-size:13.5px; line-height:1.4;
  font-weight:500; color:var(--muted)}

@media (max-width:1000px){
  .alwrow{grid-template-columns:repeat(2, minmax(0,1fr))}
  .alw{border-bottom:1px solid var(--edge)}
  .alw:nth-child(2n){border-right:0}
  .alw:last-child{grid-column:1/-1; border-bottom:0}
}
@media (max-width:620px){
  .always{border-radius:20px}
  .alwhd{padding:14px 20px; font-size:11.5px}
  .alw{padding:22px 20px 20px}
  .alw b{font-size:44px}
  .alw span{font-size:15px}
}

/* ── the guarantee ───────────────────────────────────────────────────────
   Above the price rather than under it, so the number is read by somebody
   who already knows what happens if it does not work. Numbered because it is
   a sequence with real dates in it, not three features: the marker earns its
   place. Only the last step costs anything, so only the last step is dark.
   ---------------------------------------------------------------------- */
.promise{margin:0 0 20px; background:var(--ink); border-radius:28px; padding:34px 36px 30px}
.prhd{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(24px,2.6vw,33px);
  font-weight:800; letter-spacing:-.038em; line-height:1.12; color:#fff; max-width:22ch}
.prsteps{list-style:none; counter-reset:pr; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.prsteps li{counter-increment:pr; position:relative; padding:20px 20px 18px;
  background:rgba(255,255,255,.055); border:1px solid #33366A; border-radius:18px}
.prsteps li:last-child{background:var(--sun); border-color:var(--sun)}
.prwhen{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#9AA0C8}
.prwhen::before{content:counter(pr); display:grid; place-items:center; width:19px; height:19px;
  border-radius:99px; background:#33366A; color:#fff; font-size:11px; letter-spacing:0}
.prsteps li:last-child .prwhen{color:var(--suni)}
.prsteps li:last-child .prwhen::before{background:var(--suni); color:var(--sun)}
.prsteps b{display:block; margin-top:11px; font-family:Gabarito,sans-serif; font-size:19px;
  font-weight:800; letter-spacing:-.028em; line-height:1.2; color:#fff}
.prsteps em{display:block; margin-top:8px; font-style:normal; font-size:14.5px; line-height:1.5;
  font-weight:500; color:#A8ADD4}
.prsteps li:last-child b{color:var(--suni)}
.prsteps li:last-child em{color:#6A5326}
.prfoot{margin:18px 0 0; font-size:14.5px; font-weight:500; color:#9AA0C8}
@media (max-width:1000px){
  .prsteps{grid-template-columns:1fr; gap:12px}
  .promise{padding:28px 24px 24px; border-radius:24px}
}

.portfolio{margin-top:20px; background:var(--viobg); border:1px solid var(--violn);
  border-radius:26px; padding:30px 34px; display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between}
.portfolio h3{margin:0; font-family:Gabarito,sans-serif; font-size:26px; font-weight:800;
  letter-spacing:-.032em; color:var(--ink)}
.portfolio p{margin-top:9px; max-width:58ch; font-size:16px; line-height:1.5; font-weight:500;
  color:#4C4C77}
.portfolio .btn{background:var(--vio); border-color:var(--vio); flex:0 0 auto}
.payline{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px}
.paych{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600;
  color:var(--body); background:#fff; border:1px solid var(--edge); border-radius:99px;
  padding:9px 16px}
.paych svg{color:var(--muted); flex:0 0 auto}
.pnote{margin-top:18px; max-width:74ch; font-size:14.5px; line-height:1.55; color:var(--muted);
  font-weight:500}

@media (max-width:1000px){
  .tiers{grid-template-columns:1fr; gap:16px}
  .tline{min-height:0}
  .portfolio{padding:26px 24px}
}
@media (max-width:620px){
  .price{margin-top:76px}
  .tier{padding:26px 24px 28px; border-radius:24px}
  .tprice b{font-size:36px}
  .portfolio .btn{width:100%; justify-content:center}
  .portfolio h3{font-size:22px}
}

/* ══ THE ASK ═════════════════════════════════════════════════════════════
   The page ended on a table before this. It ends on the ask now, and on the
   person: this is sold as a service, so the last thing anyone reads is who
   they would actually be hiring, and what the three steps cost them.
   ═══════════════════════════════════════════════════════════════════════ */
.start{max-width:1240px; margin:118px auto 0; padding:0 26px}
.startbox{background:var(--ink); border-radius:40px; padding:56px 56px 58px;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:52px;
  align-items:start}
.sleft h2{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(33px,3.9vw,52px);
  font-weight:800; letter-spacing:-.045em; line-height:1.02; color:#fff; text-wrap:balance}
.sleft > p{margin:18px 0 0; max-width:44ch; font-size:17.5px; line-height:1.55;
  color:#A8ADD4; font-weight:500}
.scta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
/* The $300 call came off the buttons here when "Start my program" took its
   place: two buttons of equal weight made a $300 consulting hour look like
   the alternative to the product, which it is not. It is still on the page,
   said in a sentence, which is the weight it should have had. */
.sfine{margin:16px 0 0; max-width:56ch; font-size:14px; line-height:1.55;
  font-weight:500; color:rgba(255,255,255,.62)}
.sfine a{color:var(--sun); font-weight:700}
.btn.light{background:var(--sun); border-color:var(--sun); color:var(--suni)}
/* On the dark closing section a shadow does nothing; the lift and a touch
   more light do the work instead. */
.btn.light:hover{box-shadow:none; filter:brightness(1.06)}
.btn.ghost{background:transparent; border-color:#43467A; color:#fff}
.btn.ghost:hover{border-color:#6E72B4; box-shadow:none}

.steps{margin-top:38px; padding-top:30px; border-top:1px solid #33366A;
  display:flex; flex-direction:column; gap:17px}
/* A bare text node is not a grid item, so the label and its caption have to share
   one .stx box or the caption drops into the 32px number column, one word per line. */
.st{display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; align-items:start;
  font-family:Gabarito,sans-serif; font-size:18px; font-weight:700; letter-spacing:-.026em;
  color:#fff}
.stx{min-width:0; padding-top:3px}
.st b{width:32px; height:32px; border-radius:99px; background:#2C2F5E; color:#9AA0E4;
  display:grid; place-items:center; font-size:14px; font-weight:800}
.st em{display:block; font-style:normal; margin-top:3px; font-family:Figtree,sans-serif;
  font-size:14.5px; font-weight:500; color:#8A90BE; letter-spacing:0}

/* who you would actually be hiring */
.mecard{background:#22254E; border:1px solid #33366A; border-radius:28px; padding:30px 30px 26px}
.meav{width:52px; height:52px; border-radius:99px; background:var(--sun); color:var(--suni);
  display:grid; place-items:center; font-family:Gabarito,sans-serif; font-weight:800;
  font-size:19px; letter-spacing:-.02em}
.mecard > b{display:block; margin-top:18px; font-family:Gabarito,sans-serif; font-size:24px;
  font-weight:800; letter-spacing:-.032em; color:#fff}
.mecard > em{display:block; margin-top:7px; font-style:normal; font-size:15px; line-height:1.45;
  font-weight:500; color:#9AA0C8}
.melist{margin-top:22px; padding-top:20px; border-top:1px solid #33366A;
  display:flex; flex-direction:column; gap:13px}
.melist span{display:block; font-size:15px; font-weight:700; color:#fff}
.melist i{display:block; margin-top:2px; font-style:normal; font-size:13.5px; line-height:1.4;
  font-weight:500; color:#898FBA}
.mebook{display:block; margin-top:20px; padding-top:17px; border-top:1px solid #33366A;
  font-size:14px; font-weight:600; color:#9AA0C8}
.mebook i{font-style:italic; color:#fff}

/* ── the footer ─────────────────────────────────────────────────────────
   Every link here goes somewhere that exists today. Pages that have not been
   built are not listed: a footer full of dead columns is worse than a short
   honest one.
   -------------------------------------------------------------------- */
/* NOT .foot — the rail and panel cards already own that name, and a bare .foot rule
   here painted a grey band and a border across every card footer on the page. */
.sitefoot{margin-top:118px; border-top:1px solid var(--line); background:var(--wash)}

@media (max-width:1000px){
  .startbox{grid-template-columns:1fr; gap:36px; padding:40px 30px 44px}
}
@media (max-width:620px){
  .start{margin-top:76px}
  .startbox{border-radius:28px; padding:32px 24px 36px}
  .sleft > p{font-size:16.5px}
  .scta .btn{flex:1; justify-content:center}
  .mecard{padding:24px 22px 22px; border-radius:22px}
}

/* ══ THE ARITHMETIC ══════════════════════════════════════════════════════
   Not a claim. The reader's own three numbers, multiplied in front of them,
   with every assumption on the page and editable. A savings figure nobody
   can trace is worth less than one they typed themselves.
   ═══════════════════════════════════════════════════════════════════════ */
.roi{max-width:1240px; margin:0 auto 130px; padding:0 26px}
.roibox{background:var(--ink); border-radius:40px; padding:52px 54px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:52px;
  align-items:center}
.roibox h2{margin:0; font-family:Gabarito,sans-serif; font-size:clamp(30px,3.3vw,44px);
  font-weight:800; letter-spacing:-.042em; line-height:1.05; color:#fff}
.roibox h2 em{font-style:normal; color:var(--sun); display:block}
.roibox .lede{margin-top:18px; font-size:16.5px; line-height:1.55; color:#A8ADD4;
  font-weight:500; max-width:44ch}
.inputs{display:flex; flex-direction:column; gap:22px; margin-top:32px}
.inp{display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:center}
.inp label{font-size:15.5px; font-weight:600; color:#CBCFEA}
.inp output{font-family:Gabarito,sans-serif; font-size:23px; font-weight:800; color:#fff;
  letter-spacing:-.03em; min-width:82px; text-align:right; font-variant-numeric:tabular-nums}
.inp input[type=range]{grid-column:1/-1; width:100%; -webkit-appearance:none; appearance:none;
  height:6px; border-radius:99px; background:#343864; outline-offset:6px}
.inp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px;
  border-radius:99px; background:var(--sun); border:3px solid var(--ink); cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.inp input[type=range]::-moz-range-thumb{width:24px; height:24px; border-radius:99px;
  background:var(--sun); border:3px solid var(--ink); cursor:pointer}

.out{background:#22254E; border-radius:28px; padding:38px 36px; display:flex;
  flex-direction:column; gap:6px}
.out .big2{font-family:Gabarito,sans-serif; font-size:clamp(52px,6vw,80px); font-weight:800;
  letter-spacing:-.05em; line-height:.95; color:var(--sun); font-variant-numeric:tabular-nums}
.out .capline{font-size:16px; font-weight:600; color:#CBCFEA; margin-top:6px}
.out .split{margin-top:26px; padding-top:22px; border-top:1px solid #343864;
  display:flex; flex-direction:column; gap:13px}
.out .r{display:flex; justify-content:space-between; gap:16px; font-size:15px;
  font-weight:600; color:#A8ADD4}
.out .r b{color:#fff; font-variant-numeric:tabular-nums; font-weight:700}
.out .fine2{margin-top:22px; font-size:13.5px; line-height:1.5; color:#7A7FA8; font-weight:500}

@media (max-width:900px){
  .roibox{grid-template-columns:1fr; gap:34px; padding:36px 26px 38px; border-radius:30px}
  .out{padding:28px 24px}
}
@media (prefers-reduced-motion:reduce){ .panel{position:static} }


/* ── the price, in one breath ────────────────────────────────────────────
   What a home page owes a stranger is the number and a way in. The arguing
   happens on /pricing, where somebody who already wants it goes to justify
   it. Light on purpose: this sits where a run of dark blocks used to be.
   ---------------------------------------------------------------------- */
.pteaser{max-width:1240px; margin:118px auto 0; padding:0 26px}
.ptin{background:var(--wash); border:1px solid var(--edge); border-radius:34px;
  padding:44px 44px 38px}
.pthd h2{margin:0; max-width:20ch; font-family:Gabarito,sans-serif;
  font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-.042em; line-height:1.04;
  color:var(--ink)}
.pthd p{margin:16px 0 0; max-width:60ch; font-size:clamp(16px,1.3vw,18px); line-height:1.55;
  font-weight:500; color:var(--body)}
.ptrow{margin-top:30px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.ptcard{display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid var(--edge); border-radius:22px; padding:24px 24px 22px;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s ease,
    box-shadow .2s ease}
.ptcard:hover{transform:translateY(-3px); border-color:#CFD2E6;
  box-shadow:0 22px 40px -30px rgba(15,15,22,.45)}
.ptcard.on{background:var(--ink); border-color:var(--ink)}
.ptn{font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted)}
.ptcard.on .ptn{color:#9AA0C8}
.ptp{display:flex; align-items:baseline; gap:8px; margin-top:12px;
  font-family:Gabarito,sans-serif; font-size:34px; font-weight:800; letter-spacing:-.05em;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.ptcard.on .ptp{color:var(--sun)}
.ptp em{font-style:normal; font-size:13.5px; font-weight:600; color:var(--muted)}
.ptcard.on .ptp em{color:#9AA0C8}
.ptl{margin-top:14px; flex:1 1 auto; font-size:15px; line-height:1.5; font-weight:500;
  color:var(--body)}
.ptcard.on .ptl{color:#A8ADD4}
.ptgo{margin-top:18px; display:inline-flex; align-items:center; gap:7px;
  font-family:Gabarito,sans-serif; font-size:15.5px; font-weight:700; color:var(--vioi)}
.ptgo::after{content:'\2192'; transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.ptcard:hover .ptgo::after{transform:translateX(3px)}
.ptcard.on .ptgo{color:var(--sun)}
.ptfoot{margin:22px 0 0; font-size:15px; font-weight:500; color:var(--muted)}
.ptfoot a{color:var(--ink); font-weight:700}
@media (max-width:1000px){
  .ptrow{grid-template-columns:1fr}
  .ptin{padding:30px 24px 26px; border-radius:26px}
}
@media (max-width:620px){ .pteaser{margin-top:76px} }

/* ── thirty days with a person in it ─────────────────────────────────────
   The add-on is the thing worth selling and it was one paragraph under a
   table. A month of work should be shown as a month: six moments with real
   dates and a named deliverable each, so somebody can see what they get on
   a Tuesday rather than infer it from a price.
   ---------------------------------------------------------------------- */
.svc{max-width:1240px; margin:26px auto 0; padding:0 26px}
.svcin{background:var(--viobg); border:1px solid var(--violn); border-radius:32px;
  padding:40px 42px 36px}
.svchd{display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end;
  justify-content:space-between}
.svchd h2{margin:0; max-width:19ch; font-family:Gabarito,sans-serif;
  font-size:clamp(26px,2.9vw,38px); font-weight:800; letter-spacing:-.04em; line-height:1.06;
  color:var(--ink)}
.svcp{margin:14px 0 0; max-width:64ch; font-size:16.5px; line-height:1.55; font-weight:500;
  color:#4C4C77}
.svcprice{flex:0 0 auto; text-align:right}
.svcprice b{display:block; font-family:Gabarito,sans-serif; font-size:42px; font-weight:800;
  letter-spacing:-.05em; line-height:1; color:var(--vioi); font-variant-numeric:tabular-nums}
.svcprice em{display:block; margin-top:6px; font-style:normal; font-size:14px; font-weight:600;
  color:#6A6A96}
.days{list-style:none; margin:32px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.days li{background:#fff; border:1px solid var(--violn); border-radius:18px;
  padding:20px 20px 18px; position:relative}
.dwhen{display:block; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vio)}
.days b{display:block; margin-top:9px; font-family:Gabarito,sans-serif; font-size:17.5px;
  font-weight:800; letter-spacing:-.028em; line-height:1.22; color:var(--ink)}
.days em{display:block; margin-top:8px; font-style:normal; font-size:14.5px; line-height:1.5;
  font-weight:500; color:var(--body)}
.svcfoot{margin:26px 0 0; display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between}
.svcnote{margin:0; max-width:66ch; font-size:14.5px; line-height:1.55; font-weight:500;
  color:#5A5A82}
.svcnote b{color:var(--ink); font-weight:700}
.svcfoot .btn{background:var(--vio); border-color:var(--vio); flex:0 0 auto}
@media (max-width:1000px){
  .days{grid-template-columns:1fr}
  .svcin{padding:28px 24px 24px; border-radius:26px}
  .svcprice{text-align:left}
}

.svcbtns{display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto}
.svcbtns .btn{display:inline-flex; align-items:center; gap:9px}
.svcbtns .btn.pay{background:var(--vio); border-color:var(--vio)}
.svcbtns .btn.alt{background:#fff; border-color:var(--violn); color:var(--vioi)}
.svcbtns .btn.alt:hover{background:#F7F5FF}

/* the promise each card makes, above the detail that backs it */
.ptv{display:block; margin-top:14px; font-family:Gabarito,sans-serif; font-size:18.5px;
  font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--ink)}
.ptcard.on .ptv{color:var(--sun)}
.ptl{margin-top:9px}

/* two, not three: the services line is an add-on and must not read as a peer */
.ptrow.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ptadd{margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 28px;
  align-items:center; text-decoration:none; background:#fff; border:1px solid var(--violn);
  border-radius:20px; padding:22px 26px;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s ease}
.ptadd:hover{transform:translateY(-2px); border-color:#BFB6F5}
.pan{grid-column:1; font-family:Gabarito,sans-serif; font-size:17.5px; font-weight:800;
  letter-spacing:-.028em; color:var(--vioi)}
.pal{grid-column:1; font-size:15px; line-height:1.5; font-weight:500; color:var(--body);
  max-width:78ch}
.pago{grid-column:2; grid-row:1/4; display:inline-flex; align-items:center; gap:7px;
  font-family:Gabarito,sans-serif; font-size:15.5px; font-weight:700; color:var(--vioi);
  white-space:nowrap}
.pago::after{content:'\2192'; transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.ptadd:hover .pago::after{transform:translateX(3px)}
@media (max-width:1000px){
  .ptrow.two{grid-template-columns:1fr}
  .ptadd{grid-template-columns:1fr; padding:20px 22px}
  .pago{grid-column:1; grid-row:auto; margin-top:10px}
}

/* two tiers, not three: the second program is a quantity, not a plan */
.tiers.two{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px}
@media (max-width:1000px){ .tiers.two{grid-template-columns:1fr} }

/* ── EQUAL CARDS, BECAUSE IT IS AN EQUAL PRODUCT ─────────────────────────
   The paid card was inverted to black, which is what a pricing page does to
   say "this is the better one". Here that is a lie: it is the same agent. So
   both cards are the same card, and the only mark on the paid one is a quiet
   ring and a label saying who it is for. Design follows the model.
   ---------------------------------------------------------------------- */
.ptcard.on{background:#fff; border-color:var(--violn); box-shadow:0 0 0 3px #F3F1FE}
.ptcard.on:hover{border-color:#BFB6F5}
.ptcard.on .ptn{color:var(--vioi)}
.ptcard.on .ptp{color:var(--ink)}
.ptcard.on .ptp em{color:var(--muted)}
.ptcard.on .ptv{color:var(--ink)}
.ptcard.on .ptl{color:var(--body)}
.ptcard.on .ptgo{color:var(--vioi)}

.tier.feat{background:#fff; border-color:var(--violn); box-shadow:0 0 0 3px #F3F1FE}
.tier.feat .tname{color:var(--ink)}
.tier.feat .tkind{color:var(--vioi)}
.tier.feat .tprice b{color:var(--ink)}
.tier.feat .tprice em,.tier.feat .tline{color:var(--body)}
.tier.feat .tcta{background:var(--vio); border-color:var(--vio); color:#fff}
.tier.feat .tcta:hover{background:#4B3BD1}
.tier.feat .tfeat,.tier.feat .tnote{border-color:var(--violn)}
.tier.feat .tfeat li{color:var(--body)}
.tier.feat .tfeat svg{color:var(--grn)}
.tier.feat .tnote{color:var(--muted)}
.tier.feat .tpn{color:var(--ink)}
.tier.feat .tpr{color:var(--muted)}

/* the honest bit, given the room it deserves rather than a footnote's */
.pthon{margin:18px 0 0; padding:18px 22px; background:#fff; border:1px solid var(--edge);
  border-left:3px solid var(--sun); border-radius:14px; max-width:96ch;
  font-size:15.5px; line-height:1.6; font-weight:500; color:var(--body)}

/* ══ THE PROGRAM, DRAWN ═══════════════════════════════════════════════════
   Three rows of coloured segments and a row of people under them. Identical
   on both cards on purpose: that IS the pitch, and a picture makes it in one
   glance where three paragraphs of prose could not. The segment colours are
   the same five the hours legend uses, so it reads as the same program the
   rest of the page has been talking about rather than decoration.
   ═══════════════════════════════════════════════════════════════════════ */
.pg{display:block; margin-bottom:22px; padding:16px 16px 14px; border-radius:16px;
  background:var(--wash); border:1px solid var(--edge)}
.pgr{display:flex; gap:3px; margin-bottom:5px}
.pgr i{height:9px; width:var(--w); background:var(--c); border-radius:3px; opacity:.9}
.pgw{display:flex; align-items:center; gap:5px; margin-top:13px; padding-top:12px;
  border-top:1px dashed #D9DBE9}
.pgw b{width:15px; height:15px; border-radius:99px; background:#C9CCE0; flex:0 0 auto}
.pgw b.me{background:var(--vio)}
.pgw em{font-style:normal; font-size:12.5px; font-weight:800; color:var(--muted);
  margin-left:2px}
.ptcard.on .pg{background:#FBFAFF; border-color:var(--violn)}
.ptcard.on .pgw b{background:#B9BDDD}
.ptcard.on .pgw b.me{background:var(--vio)}

/* bullets, not paragraphs: a price block is scanned, never read */
.ptb{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column;
  gap:9px; flex:1 1 auto}
.ptb li{position:relative; padding-left:20px; font-size:15px; line-height:1.45;
  font-weight:500; color:var(--body)}
.ptb li::before{content:''; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-radius:3px; background:var(--grn)}
.ptb li b{color:var(--ink); font-weight:700}
.ptv{margin-top:2px}

/* the cheap door: a strip, and obviously a different kind of thing */
.ptadd{background:linear-gradient(180deg,#FFFDF6,#FFF8E6); border-color:var(--sunln)}
.ptadd:hover{border-color:#EFD489}
.patag{grid-column:1; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sunh)}
.ptadd .pan{color:var(--ink)}
.ptadd .pago{color:var(--suni); background:var(--sun); border-radius:11px;
  padding:11px 18px}
.ptadd:hover .pago{background:#FFDE6B}
@media (max-width:1000px){ .patag{grid-column:1} }

/* the cheap door keeps the violet border it inherited, which fought the cream
   fill. One warm thing, warm all the way through. */
.ptadd{border-color:var(--sunln); box-shadow:none}
.ptadd:hover{border-color:#E9CB74}
.patag{color:var(--sunh)}
/* and the honest panel is a note, not an alert: no heavy rule down its side */
.pthon{border-left-width:1px; border-left-color:var(--edge); background:var(--paper);
  border-radius:14px; padding:16px 20px; box-shadow:inset 3px 0 0 var(--sun)}
/* Free and its qualifier were colliding */
.ptp em{margin-left:1px}

/* ══ ONE CARD, TWO PRICES ═════════════════════════════════════════════════
   The structure is the pitch. Two prices across the top, one list underneath
   that belongs to both of them, and a hairline between the halves that stops
   at the divider so the eye reads down into the shared part rather than
   across into a comparison.
   ═══════════════════════════════════════════════════════════════════════ */
.pcard{margin-top:28px; background:#fff; border:1px solid var(--edge); border-radius:26px;
  overflow:hidden}
.pctop{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:0 8px; padding:38px 40px 34px}
.pcside{display:flex; flex-direction:column; gap:0; min-width:0}
.pcq{font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted)}
.pcside.on .pcq{color:var(--vioi)}
.pcp{display:flex; align-items:baseline; gap:10px; margin-top:12px;
  font-family:Gabarito,sans-serif; font-size:clamp(38px,4.4vw,58px); font-weight:800;
  letter-spacing:-.055em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.pcp em{font-style:normal; font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--muted)}
.pcb{margin-top:20px; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:Gabarito,sans-serif; font-size:16px; font-weight:700; border-radius:13px;
  padding:12px 20px; background:var(--wash); border:1.5px solid var(--edge); color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), background-color .2s ease,
    border-color .2s ease}
.pcb::after{content:'\2192'; transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.pcb:hover{transform:translateY(-2px); background:#EFF0F6}
.pcb:hover::after{transform:translateX(3px)}
.pcb.pri{background:var(--vio); border-color:var(--vio); color:#fff}
.pcb.pri:hover{background:#4B3BD1}
/* The divider, and the word that makes it a choice rather than a table.
   The word is in the markup AND was in a ::before, so it rendered twice. It
   is a rule, the word, a rule: three flex children, full height. */
.pcor{align-self:stretch; display:flex; flex-direction:column; align-items:center;
  gap:12px; margin:0 34px; font-size:12.5px; font-weight:800; letter-spacing:.06em;
  color:#9DA1BC; text-transform:uppercase}
.pcor::before,.pcor::after{content:''; flex:1 1 auto; width:1px; min-height:22px;
  background:var(--line)}
/* Free is four characters and $18,000 is seven, so left alignment made one
   half look abandoned. Centred, they read as the two answers to one question. */
.pcside{align-items:center; text-align:center}
/* "Live demo" is words where the other side is a number, and the price size
   (clamp up to 58px) makes two words look like a headline rather than the
   other half of a pair. Sized to sit level with the figure beside it.

   And its caption stacks rather than sitting alongside: "a year, never per
   seat" is four words and fits beside $24,000, but a sentence describing what
   the demo IS wraps to two lines and drags the words off centre. Under it,
   the pair reads the same way the price does. */
.pcside:not(.on) .pcp{font-size:clamp(30px,3.1vw,40px); letter-spacing:-.04em;
  flex-direction:column; align-items:center; gap:8px}
.pcside:not(.on) .pcp em{max-width:30ch; line-height:1.45}

/* the half that is literally shared */
.pcsame{background:var(--wash); border-top:1px solid var(--edge); padding:26px 40px 30px}
.pcg{list-style:none; margin:18px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px 30px}
.pcg li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.45;
  font-weight:500; color:var(--body)}
.pcg li::before{content:''; position:absolute; left:0; top:3px; width:16px; height:16px;
  border-radius:99px; background:var(--grnbg);
  box-shadow:inset 0 0 0 1.5px rgba(12,133,74,.28)}
.pcg li::after{content:''; position:absolute; left:5px; top:8px; width:6px; height:3px;
  border-left:1.8px solid var(--grn); border-bottom:1.8px solid var(--grn);
  transform:rotate(-45deg)}

.pcnote{margin:16px 2px 0; font-size:14.5px; line-height:1.6; font-weight:500;
  color:var(--muted); max-width:96ch}

@media (max-width:900px){
  .pctop{grid-template-columns:1fr; gap:0; padding:28px 24px 24px}
  /* Stacked, the divider turns on its side: rule, word, rule in a row. The
     old rule collapsed it to a 1px line and left the word painted on top of
     the price beneath it. */
  .pcor{width:auto; align-self:auto; flex-direction:row; gap:14px; margin:22px 0}
  .pcor::before,.pcor::after{width:auto; height:1px; min-height:0}
  .pcsame{padding:22px 24px 26px}
  .pcg{grid-template-columns:1fr; gap:11px}
  .pcard{border-radius:22px}
}

/* ══ WHAT IS TRUE ON BOTH SIDES ═══════════════════════════════════════════
   Six ticks in a grid is what every pricing page in this category does, and
   this codebase already said so once, about a row it replaced for the same
   reason. A tick means "yes" and nothing else; a number means something.
   Four of these are zeroes and one is an infinity, and the zeroes ARE the
   pitch, so they are set at the size the pitch deserves.

   The label sits ON the rule between the prices and the facts, because the
   whole point of the band is that it belongs to both halves above it.
   ═══════════════════════════════════════════════════════════════════════ */
.pcsame{position:relative; background:var(--wash); border-top:1px solid var(--edge);
  padding:38px 40px 32px}
.pcsl{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--edge); border-radius:99px; padding:5px 16px;
  font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:#6A6D81; white-space:nowrap}
.pfrow{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0}
.pf{position:relative; padding:4px 18px; border-right:1px solid var(--edge)}
.pf:first-child{padding-left:0}
.pf:last-child{border-right:0; padding-right:0}
/* Five figures at three sizes, one of them a glyph with no descender and a
   different optical centre. Left to themselves they floated at three
   different heights across the row. Aligned to a common floor instead, so
   the eye reads five facts rather than five accidents. */
.pf b{display:flex; align-items:flex-end; min-height:50px;
  font-family:Gabarito,sans-serif; font-size:clamp(34px,3.5vw,46px);
  font-weight:800; letter-spacing:-.055em; line-height:1; color:var(--pc);
  font-variant-numeric:tabular-nums}
.pf b.inf{font-size:clamp(46px,4.6vw,62px); line-height:.82}
.pf b.sm{font-size:clamp(26px,2.4vw,33px); letter-spacing:-.04em; line-height:1.08}
.pf span{display:block; margin-top:11px; font-size:15px; font-weight:700;
  letter-spacing:-.015em; line-height:1.25; color:var(--ink)}
.pf em{display:block; margin-top:5px; font-style:normal; font-size:13.5px; line-height:1.4;
  font-weight:500; color:var(--muted)}

@media (max-width:1000px){
  .pfrow{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 0}
  .pf{padding:0 16px; border-right:1px solid var(--edge)}
  .pf:nth-child(2n){border-right:0; padding-right:0}
  .pf:nth-child(2n+1){padding-left:0}
  .pf:last-child{grid-column:1/-1}
}
@media (max-width:560px){
  .pfrow{grid-template-columns:1fr; gap:20px}
  .pf{padding:0; border-right:0}
  .pf b{font-size:38px}
}

/* ══ THE PAID CONSULTATION ════════════════════════════════════════════════
   The one thing on this page with a person in it, and the only one that pays
   the same week. It gets a card rather than a footnote: warm ground so it
   reads as a different KIND of offer to the two prices above it, and a face,
   because at $300 what is being bought is somebody's twenty two years.
   ═══════════════════════════════════════════════════════════════════════ */
.upsell{margin-top:22px; display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:0;
  background:linear-gradient(180deg,#FFFDF7,#FFF7E4); border:1px solid var(--sunln);
  border-radius:26px; overflow:hidden}
.upl{padding:34px 36px 32px; min-width:0}
.uptag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--sunh); background:#fff; border:1px solid #F0E2BC;
  border-radius:99px; padding:5px 13px}
.upl h3{margin:16px 0 0; max-width:19ch; font-family:Gabarito,sans-serif;
  font-size:clamp(25px,2.7vw,34px); font-weight:800; letter-spacing:-.04em; line-height:1.08;
  color:var(--ink)}
.upsub{margin:12px 0 0; max-width:60ch; font-size:16px; line-height:1.55; font-weight:500;
  color:#5C5433}
/* THE MENU. Five items the buyer picks ONE of, so no numbers: numbering says
   sequence, and this is a choice. Compact single rows, because a menu is
   scanned, not read. */
.uplab{display:block; margin:24px 0 9px; font-size:11px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sunh); opacity:.85}
.upmenu{list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:#F0E2BC; border:1px solid #F0E2BC; border-radius:14px; overflow:hidden}
.upmenu li{background:#fff; padding:11px 16px 12px; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:2px 10px}
.upmenu b{font-family:Gabarito,sans-serif; font-size:17px; font-weight:800;
  letter-spacing:-.03em; line-height:1.2; color:var(--ink)}
.upmenu span{font-size:13.5px; line-height:1.4; font-weight:500; color:#6B6142}

/* THE SHAPE OF THE CALL, drawn to scale. flex:10/20/15 out of forty five, so
   the middle block really is twice the first. Two muted bookends because they
   are the same kind of thing; the ink block is what was bought. */
.uptbar{display:flex; gap:3px; height:9px; margin:0 0 11px}
.uptbar span{border-radius:99px; min-width:0}
.uptbar .ta{background:#C9C7E2}
.uptbar .tb{background:var(--ink)}
.uptleg{list-style:none; margin:0; padding:0; display:flex; gap:3px}
.uptleg li{min-width:0; padding-right:10px}
.uptleg b{display:block; font-family:Gabarito,sans-serif; font-size:15.5px; font-weight:800;
  letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums}
.uptleg span{display:block; margin-top:2px; font-size:12.5px; line-height:1.35;
  font-weight:500; color:#6B6142}

/* The one unboxed statement in a panel of boxes, which is how it reads as the
   conclusion rather than another feature. */
.upout{margin:16px 0 0; font-size:13.5px; line-height:1.5; font-weight:600; color:var(--ink)}

/* the buying half: its own panel, so the price and the button are one object */
.upbuy{background:#fff; border-left:1px solid var(--sunln); padding:34px 30px 32px;
  display:flex; flex-direction:column; justify-content:center}
.upp{display:flex; flex-direction:column; font-family:Gabarito,sans-serif;
  font-size:52px; font-weight:800; letter-spacing:-.055em; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums}
.upp em{margin-top:9px; font-family:Figtree,sans-serif; font-style:normal; font-size:13.5px;
  font-weight:600; letter-spacing:0; color:var(--muted)}
.upcta{margin-top:20px; display:block; text-align:center; text-decoration:none;
  font-family:Gabarito,sans-serif; font-size:16.5px; font-weight:800; border-radius:14px;
  padding:15px 20px; background:var(--ink); color:#fff; border:1.5px solid var(--ink);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), background-color .2s ease}
.upcta:hover{transform:translateY(-2px); background:#2A2C5C}
/* Three bulleted lines of mechanics were competing with the deliverable for
   the same eye. They are conditions of sale, so they read as one small line. */
.upfine{margin:14px 0 0; font-size:13px; line-height:1.5; font-weight:500; color:var(--muted)}

/* WHAT THEY LEAVE WITH. The artifact, not the advice, so it gets the weight:
   the thing named in ink, the detail under it, a sun tick to mark each as
   something handed over rather than something claimed. */
.uplab.dl{margin-top:22px; padding-top:20px; border-top:1px solid #EFEAF3}
.updel{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.updel li{position:relative; padding-left:26px}
.updel li::before{content:''; position:absolute; left:0; top:3px; width:16px; height:16px;
  border-radius:99px; background:var(--sun);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
  background-color:#B8860B}
.updel b{display:block; font-family:Gabarito,sans-serif; font-size:16.5px; font-weight:800;
  letter-spacing:-.03em; line-height:1.2; color:var(--ink)}
.updel span{display:block; margin-top:3px; font-size:13px; line-height:1.45; font-weight:500;
  color:var(--muted)}

@media (max-width:960px){
  .upsell{grid-template-columns:1fr}
  .upl{padding:26px 22px 24px}
  .upmenu li{padding:11px 14px 12px}
  .uptleg{flex-direction:column; gap:9px}
  .uptleg li{padding-right:0}
  .uptleg b{display:inline; margin-right:8px}
  .uptleg span{display:inline; margin-top:0}
  .upbuy{border-left:0; border-top:1px solid var(--sunln); padding:24px 22px 26px}
  .upp{flex-direction:row; align-items:baseline; gap:12px}
  .upp em{margin-top:0}
}