/* ═════════ THE DECISION · stack, price, compare, founder, faq (award pass, 2026-11-10) ═════════
   Shared by the five sections where an owner decides. Every rule here is scoped to those sections.
   Gutters follow the new hero and close (--gx on the left, --gr on the right, 18px on phones), headings
   take their tracking, and every colour is a token so the six schemes re-skin all of it.
   Copy rule (Sean, 2026-11-10): a section shows one headline, one line and the labels of its demo or table;
   every other sentence sits in the section's one closed "Details" fold (.dz-more). */
:is(.stack,.founder,.price,.compare,.faq){position:relative}
:is(.stack,.founder,.price,.compare,.faq)>.dz{padding-left:max(var(--gx,clamp(20px,7.36vw,150px)),env(safe-area-inset-left,0px));padding-right:max(var(--gr,clamp(20px,3.4vw,64px)),env(safe-area-inset-right,0px))}
:is(.stack,.founder,.price,.compare,.faq) h2{letter-spacing:-.04em;max-width:none}
:is(.stack,.founder,.price,.compare,.faq) [hidden]{display:none!important}
:is(.stack,.founder,.price,.compare,.faq) :is(p,li,small) a{color:var(--ink0);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line2)}
:is(.stack,.founder,.price,.compare,.faq) :is(p,li,small) a:hover{text-decoration-color:var(--ink0)}
/* a control you can tab to always shows where you are */
:is(.stack,.founder,.price,.compare,.faq) :is(button,summary,a):focus-visible{outline:2px solid var(--win);outline-offset:3px;border-radius:10px}
/* the small uppercase label that heads a column or a card */
:is(.stack,.founder,.price,.compare,.faq) .dz-kick{font:400 12px/1.2 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
/* the section's one line under its headline */
:is(.stack,.founder,.price,.compare) .dz-line{font-size:var(--ds-size-lede);line-height:1.4;color:var(--ink);max-width:40ch;text-wrap:balance}
/* the one fold: "Details" */
.dz-more>summary{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 2px;font:400 14px/1 var(--f-t);color:var(--ink0);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;transform-origin:0 50%}
.dz-more>summary::-webkit-details-marker{display:none}
.dz-more>summary::before{content:"";flex:none;width:11px;height:11px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1.5px 100% no-repeat;transition:transform .25s}
.dz-more[open]:not(.dz-closing)>summary::before{transform:rotate(45deg)}
.dz-more>summary:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dz-more>div{display:grid;gap:8px;max-width:76ch;padding:2px 0 10px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.dz-more>div b{font-weight:400;color:var(--ink0)}
/* ═════════ 2 · EIGHT LOGINS. OR ONE. ═════════
   One figure (Lufga 200, on an odometer in a box as wide as its widest digit) and one ledger: each tool on the
   left is struck as its job is filed into the SCAIL card on the right. Still frame = everything filed, "1 login".
   On wide screens the figure is exactly as tall as the eight rows it counts (Lufga's digits are 0.69em tall).
   One headline, one line; the two longer sentences sit in Details. Scoped to .stack. */
.stack{padding-top:var(--ds-section);padding-bottom:clamp(26px,4.4vw,64px)}
.stack .sk-in{--skr:36px;--skh:44px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;grid-template-areas:"h n" "l l" "g g" "m m";align-items:start}
.stack .sk-in>*{min-width:0}
.stack h2{grid-area:h}
.stack .sk-line{grid-area:l;margin-top:8px}
.stack .sk-more{grid-area:m;margin-top:6px}

/* the count: the digit keeps one box (0.6em wide), so 8 rolling down to 1 moves nothing around it */
.stack .sk-count{grid-area:n;position:relative;justify-self:end;width:.6em;height:calc(.69em + 22px);margin-top:.03em;font:200 34vw/1.1 var(--f-d);letter-spacing:0;color:var(--ink0)}
/* the reel is 1.1em tall; only the band between the digit's top and its baseline shows while it rolls */
.stack .sk-num{position:absolute;right:0;top:-.175em;line-height:1.1;clip-path:inset(.15em -.4em .2em -.4em)}
.stack .sk-unit{position:absolute;right:0;bottom:0;font:400 13px/1.2 var(--f-t);letter-spacing:0;color:var(--ink2);white-space:nowrap}

/* the ledger */
.stack .sk-ledger{--skl:42%;grid-area:g;position:relative;margin-top:16px}
.stack .sk-ledger::before{content:"";position:absolute;left:var(--skl);right:0;top:0;bottom:0;border-radius:var(--ds-r-card);background:var(--glass);border:1px solid var(--line);box-shadow:var(--ds-shadow-card)}
.stack .sk-cols,.stack .sk-row{position:relative;display:grid;grid-template-columns:var(--skl) minmax(0,1fr);align-items:center}
.stack .sk-cols{min-height:var(--skh)}
.stack .sk-cols .dz-kick{padding-right:12px}
.stack .sk-brand{display:flex;align-items:center;gap:8px;padding:0 14px;min-width:0}
.stack .sk-brand img{flex:none}
.stack .sk-brand b{font-weight:400;font-size:13px;letter-spacing:.16em;color:var(--ink0)}
.stack .sk-pill{margin-left:auto;font:400 10.5px/1 var(--f-t);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:4px 8px;white-space:nowrap}
.stack .sk-row{min-height:var(--skr);border-top:1px solid var(--line)}
.stack .sk-old{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 10px 5px 0}
.stack .sk-old small{flex:none;width:12px;font-size:11.5px;line-height:1;color:var(--ink3);font-variant-numeric:tabular-nums}
.stack .sk-lw,.stack .sk-ok{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stack .sk-tool{min-width:0;font:300 14px/1.2 var(--f-d);letter-spacing:-.01em;color:var(--ink0)}
/* a replaced tool is struck. Narrow screens: a plain line-through, set when the row is filed. Wide screens: the line is drawn along the name (below). */
.stack .sk-row.on .sk-tool{color:var(--ink2);text-decoration:line-through;text-decoration-thickness:1px}
.stack .sk-pw{display:none}
.stack .sk-new{display:flex;align-items:center;gap:9px;min-width:0;padding:5px 12px}
.stack .sk-dock{flex:none;width:14px;height:14px;border-radius:5px;border:1px dashed var(--line2)}
.stack .sk-row.on .sk-dock{border:1px solid var(--ink0);background:var(--ink0)}
.stack .sk-feat{display:block;min-width:0;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;font:300 14px/1.2 var(--f-d);letter-spacing:-.01em;color:var(--ink0)}
.stack .sk-feat>span{display:block;will-change:transform}

@media (min-width:760px){
  .stack .sk-in{--skr:44px}
  .stack .sk-ledger{--skl:44%}
  .stack .sk-old small{width:50px}
  .stack .sk-lw{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .stack .sk-ok{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin-left:auto;flex:none;font-style:normal;font-size:11.5px;line-height:1;border-radius:999px;padding:5px 10px;background:var(--line);color:var(--ink2)}
  .stack .sk-old{gap:12px;padding-right:18px}
  .stack .sk-new{gap:12px;padding:6px 16px}
  .stack .sk-dock{width:16px;height:16px}
  .stack .sk-tool,.stack .sk-feat{font:200 clamp(17px,1.6vw,23px)/1.2 var(--f-d);letter-spacing:-.02em}
  .stack .sk-count{font-size:min(30vw,300px)}
}
@media (min-width:1000px){
  .stack .sk-in{--skr:40px;--skh:48px;--skt:clamp(26px,3.4vw,50px);grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px);grid-template-areas:"h l l" "n g g" ". m m"}
  /* the one line, set as a statement on the headline's last baseline */
  .stack .sk-line{align-self:end;margin:0 0 .28em;max-width:none;font:200 clamp(24px,2.5vw,40px)/1.15 var(--f-d);letter-spacing:-.03em;color:var(--ink0)}
  /* the figure stands on the ledger's last row and reaches its first: 8 rows / 0.69 */
  .stack .sk-count{justify-self:start;width:auto;height:calc(var(--skh) + var(--skr)*8);margin-top:var(--skt);font-size:calc(var(--skr)*8/.69)}
  .stack .sk-num{left:-.03em;right:auto;top:calc(var(--skh) - .175em)}
  .stack .sk-unit{left:0;right:auto;top:0;bottom:auto;display:flex;align-items:center;height:var(--skh);font:200 clamp(22px,2vw,30px)/1 var(--f-d);letter-spacing:-.03em;color:var(--ink0)}
  .stack .sk-ledger{--skl:46%;margin-top:var(--skt)}
  .stack .sk-more{margin-top:10px}
  /* the strike is drawn along the name as the tool is replaced (a 1px line scaled from the left) */
  .stack .sk-row.on .sk-tool{text-decoration:none}
  .stack .sk-tool{white-space:nowrap;transition:color .25s}
  .stack .sk-tool>span{position:relative;display:inline-block}
  .stack .sk-tool>span::after{content:"";position:absolute;left:-3px;right:-3px;top:57%;height:1px;background:currentColor;transform:scaleX(var(--sk,1));transform-origin:0 50%}
  .stack .sk-dock{transition:background-color .2s,border-color .2s}
  /* rows keep one height so the figure, which is cut to eight of them, stays level with the ledger */
  .stack .sk-row{height:var(--skr)}
  .stack .sk-feat{white-space:nowrap}
}
@media (min-width:1000px) and (max-width:1279px){
  /* not enough room for the word beside each row: the filled square says it, the word stays for screen readers */
  .stack .sk-ok{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:1280px){
  .stack .sk-in{--skr:46px;--skh:52px;grid-template-columns:minmax(0,.86fr) minmax(0,1fr) minmax(0,1fr)}
  .stack .sk-pw{display:block;margin-left:auto;flex:none;border:1px solid var(--line2);border-radius:8px;padding:4px 9px 5px;font-size:9px;line-height:1;letter-spacing:.2em;color:var(--ink3);background:var(--glass)}
}
@media (min-width:1680px){
  .stack .sk-in{--skr:54px;--skh:58px}
  .stack .sk-tool,.stack .sk-feat{font-size:26px}
}
/* the film (one dot, one round): styled in hero.css, with the sphere it shares */
/* the night: styled in hero.css, with the sphere it shares */
/* ═════════ YOUR TURN · one stage, three steps (import · approve · mail) ═════════
   Everything here is scoped to .play and its classes carry the pl- prefix (the film owns many short names).
   Without motion the three sections read top to bottom in normal flow, each in its finished frame; that is
   the base. html.ds-motion turns it into one stage: tabs on every size and, on a desk with a mouse (wide and
   tall enough), a sticky screen that scroll walks through one step at a time. On touch and under 1000px there
   is no pinning and nothing is tied to scroll. No value here is timed: home.js drives it.
   Copy per step: one headline, one line, and one closed "Details"; the demo carries the rest. */
.play{position:relative;padding-top:var(--ds-section);--pl-copy:clamp(236px,26.4%,330px);--pl-gap:clamp(18px,2vw,28px);
  --pl-ramp:linear-gradient(100deg,var(--ds-r1),var(--ds-r2) 25%,var(--ds-r3) 50%,var(--ds-r5) 75%,var(--ds-r6))}
.play .sec,.play .rows{padding-top:0}
.pl-hd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px clamp(14px,1.6vw,22px)}
.pl-title{font:200 clamp(42px,5.2vw,76px)/.92 var(--f-d);letter-spacing:-.045em;color:var(--ink0);white-space:nowrap}
.pl-title .mw{padding-bottom:.16em;margin-bottom:-.16em}
.pl-sub{padding-bottom:.9em;line-height:1}
.pl-tabs{display:none}
.pl-stage{display:grid;row-gap:clamp(44px,5vw,76px);margin-top:clamp(22px,2.4vw,34px)}
.pl-stage>section{min-width:0}
.pl-panel{display:grid;gap:var(--pl-gap);min-width:0}
.pl-panel>*{min-width:0}
.pl-copy h2{font-size:clamp(30px,2.9vw,42px);line-height:1.04;max-width:13ch}
.pl-stepk{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:400 12.5px/1 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.pl-stepk i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink0);color:#fff;letter-spacing:0;font-size:12px}
.pl-line{margin-top:12px;font-size:clamp(16px,1.25vw,18.5px);line-height:1.42;color:var(--ink);max-width:30ch}
/* the one fold per step: everything that is not the headline, the line or a label in the demo */
.pl-det{position:relative;margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.pl-det>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;list-style:none;cursor:pointer;font:400 14px/1 var(--f-t);color:var(--ink0)}
.pl-det>summary::-webkit-details-marker{display:none}
.pl-det>summary::before{content:"";width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);background:rgba(255,255,255,.7) linear-gradient(var(--ink0),var(--ink0)) 50% 50%/10px 1.5px no-repeat}
.pl-det>summary::after{content:"";position:absolute;left:15px;top:17px;width:1.5px;height:10px;background:var(--ink0)}
.pl-det[open]>summary::after{display:none}
.pl-det-in{max-width:46ch;padding:2px 0 4px}
.pl-det-in p+p{margin-top:8px}
.pl-det-in b{font-weight:400;color:var(--ink0)}
.pl-smp{font-size:12.5px;line-height:1.35;color:var(--ink3)}
.pl-foot{display:none}
.pl-end{margin-top:clamp(28px,3vw,44px)}
.pl-end .cta-row{margin-top:0}

/* ── step 1 · import ── */
.pl-imp{display:grid;gap:14px}
.pl-card{container-type:inline-size;display:flex;flex-direction:column;min-width:0;padding:clamp(18px,1.8vw,26px);background:var(--glass);border:1px solid var(--line);border-radius:var(--ds-r-card);box-shadow:var(--ds-shadow-card)}
.pl-card h3{font-size:clamp(20px,1.7vw,25px)}
.pl-pull{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.pl-pull .btn{min-height:48px;padding:0 22px;font-size:15.5px}
.pl-pst{flex:1 1 11em;min-width:0;min-height:2.7em;display:flex;align-items:center;font-size:14px;line-height:1.35;color:var(--ink)}
.pl-bar{height:8px;border-radius:8px;background:var(--bg2);overflow:hidden;margin-top:14px}
.pl-bar i{display:block;height:100%;width:100%;background:var(--ink0);transform-origin:0 50%}
/* the pull, drawn: three bureaus side by side, each a column of tradelines; the nine flagged ones are set in ink */
.pl-bur{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,4%,18px);margin-top:12px;min-height:0;font-size:12.5px;line-height:1.2;color:var(--ink3)}
.pl-bur li{display:flex;flex-direction:column;min-width:0;min-height:0}
.pl-bur b{position:relative;padding-left:14px;font-weight:400;white-space:nowrap}
.pl-bur b::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2)}
.pl-bur li.is-on b{color:var(--ink)}
.pl-bur li.is-on b::before{background:var(--ink0);box-shadow:none}
.pl-rows{flex:1 1 auto;display:grid;grid-template-rows:repeat(7,minmax(0,1fr));min-height:64px;max-height:170px;margin-top:8px;padding-right:12px}
.pl-rows i{position:relative;display:block;align-self:center;width:var(--w,100%);height:3px;border-radius:2px;background:var(--line2);transform-origin:0 50%}
.pl-rows i:nth-child(2n){--w:82%}
.pl-rows i:nth-child(3n){--w:62%}
.pl-bur.is-flag .pl-rows i.f{background:var(--ink0)}
.pl-rows i.f::after{content:"";position:absolute;left:calc(100% + 5px);top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--ink0);transform:scale(0)}
.pl-bur.is-flag .pl-rows i.f::after{transform:none}
.pl-kpis{display:flex;justify-content:space-between;gap:clamp(14px,5.5cqw,24px);padding-top:14px}
.pl-kpis>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.pl-kpis dd{font:200 clamp(36px,4.5vw,68px)/1.1 var(--f-d);font-size:clamp(30px,15.4cqw,70px);letter-spacing:0;color:var(--ink0);font-variant-numeric:tabular-nums;min-height:1.1em;white-space:nowrap}
.pl-kpis dd.is-wait{color:var(--ink3);opacity:.38}
.pl-kpis dt{order:2;font-size:12.5px;line-height:1.2;color:var(--ink3);margin-top:2px;white-space:nowrap}
.pl-flag dd{position:relative}
.pl-flag dd::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:1.5px;background:var(--ink0);transform-origin:0 50%}
.pl-flag dd.is-wait::after{transform:scaleX(0)}
.pl-card>.pl-smp{margin-top:12px}
.pl-drop{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;margin-top:16px;padding:12px 14px;border:1.5px dashed var(--line2);border-radius:18px;text-align:left;background:rgba(255,255,255,.6);min-height:96px}
.pl-drop.is-over{border-color:var(--ink0);background:var(--ds-paper)}
/* the printout a client scanned crooked on their phone: a page lying askew on the glass, read line by line */
.pl-scanbox{position:relative;flex:1 1 auto;min-height:84px;max-height:320px;border-radius:12px;background:var(--bg2);overflow:hidden}
.pl-scanpg{position:absolute;left:50%;top:50%;height:80%;aspect-ratio:.76;border-radius:2px;background:var(--ds-paper);box-shadow:0 0 0 1px var(--line),0 10px 16px -10px rgba(14,14,16,.45);padding:12% 11%;display:grid;grid-template-rows:repeat(9,minmax(0,1fr));transform:translate(-50%,-50%) rotate(-7deg) skewX(3deg)}
.pl-scanpg i{display:block;align-self:center;height:36%;min-height:2px;border-radius:3px;background:var(--line2);transform-origin:0 50%}
.pl-scanpg i:nth-child(3n){width:62%}
.pl-scanpg i:first-child{width:46%;height:62%;background:var(--ink2)}
.pl-scan{position:absolute;left:-6%;right:-6%;top:0;height:2px;background:var(--pl-ramp);transform:translateY(-8px)}
.pl-dtx{min-width:0}
.pl-dtx b{display:block;font-weight:400;font-size:15px;line-height:1.3;color:var(--ink0)}
.pl-dtx span{display:block;color:var(--ink2);font-size:13px;line-height:1.35;margin-top:3px}
.pl-parsed{margin-top:8px}
.pl-parsed li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.3}
.pl-parsed em{font-style:normal;color:var(--ink3);font-size:12.5px;white-space:nowrap}
@media (min-width:1000px){
  .pl-panel{grid-template-columns:var(--pl-copy) minmax(0,1fr)}
  .pl-imp{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ════════ motion: one stage ════════ */
.ds-motion .pl-stepk{display:none}
.ds-motion .pl-hd{flex-wrap:nowrap}
.ds-motion .pl-tabs{position:relative;display:inline-flex;margin-left:auto;padding:4px;border-radius:999px;background:var(--bg2);isolation:isolate;margin-bottom:.3em}
.pl-knob{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--ink0);z-index:-1}
.pl-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 8px;border-radius:999px;font:400 15px/1 var(--f-t);color:var(--ink0);white-space:nowrap}
.pl-tabs button i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ds-paper);font-size:13px;color:var(--ink0);box-shadow:inset 0 0 0 1px var(--line)}
.pl-tabs button[aria-selected="true"]{color:#fff}
.pl-tabs button[aria-selected="true"] i{box-shadow:none}
.pl-tabs button.is-done:not([aria-selected="true"]) i{background:var(--ink0);color:#fff;box-shadow:none}
.pl-tabs button:focus-visible{outline-offset:2px;border-radius:999px}
.ds-motion .pl-stage{row-gap:0}
.ds-motion .play[data-step="1"] :is(section.rows,section.mail),
.ds-motion .play[data-step="2"] :is(section.import,section.mail),
.ds-motion .play[data-step="3"] :is(section.import,section.rows){display:none}
.ds-motion .pl-kpis dd.odo{display:inline-flex}
.pl-num{display:flex;align-items:flex-end;gap:10px;font:200 clamp(120px,14.5vw,210px)/.74 var(--f-d);letter-spacing:-.05em;color:var(--ink0)}
.pl-num b{font-weight:200}
.pl-num span{font-size:.14em;line-height:1;letter-spacing:0;color:var(--ink3);padding-bottom:.18em;white-space:nowrap}
.pl-next{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;margin-bottom:2px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line2);font:400 14.5px/1 var(--f-t);color:var(--ink0);white-space:nowrap}
@media (min-width:1000px){
  .ds-motion .pl-copy{display:flex;flex-direction:column;min-height:0}
  .ds-motion .pl-foot{display:flex;align-items:flex-end;gap:16px;margin-top:auto;padding-top:16px}
}

/* a desk with a mouse: the scene is one screen, held while scroll walks the three steps */
@media (min-width:1000px) and (min-height:700px) and (pointer:fine){
  .ds-motion .play:not(.is-flow){padding-top:0;height:calc(100vh + var(--pl-run,150vh))}
  .ds-motion .play:not(.is-flow) .pl-pin>.wrap{width:100%}
  .ds-motion .play:not(.is-flow) .pl-pin{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-content:center;row-gap:clamp(10px,1.6vh,18px);padding:calc(var(--hd) + clamp(10px,1.8vh,22px)) 0 60px}
  .ds-motion .play:not(.is-flow) .pl-stage{margin-top:0;min-height:0;height:100%;max-height:720px;align-self:center;grid-template-rows:minmax(0,1fr)}
  .ds-motion .play:not(.is-flow)[data-step] .pl-stage>section{display:block;grid-area:1/1;min-height:0;height:100%}
  .ds-motion .play:not(.is-flow) .pl-panel{height:100%;align-items:stretch}
  .ds-motion .play:not(.is-flow)[data-step="1"] :is(section.rows,section.mail) .pl-panel,
  .ds-motion .play:not(.is-flow)[data-step="2"] :is(section.import,section.mail) .pl-panel,
  .ds-motion .play:not(.is-flow)[data-step="3"] :is(section.import,section.rows) .pl-panel{visibility:hidden}
  .ds-motion .play:not(.is-flow) .pl-end{margin-top:0}
  .ds-motion .play:not(.is-flow) .pl-end .cta-row{flex-wrap:nowrap;gap:12px 18px}
  .ds-motion .play:not(.is-flow) .pl-end .cta-row .btn{flex:none}
  .ds-motion .play:not(.is-flow) .pl-end .cta-row .terms,.ds-motion .play:not(.is-flow) .pl-end .cta-row .obj{flex:0 1 auto;margin:0;max-width:none}
  .ds-motion .play:not(.is-flow) .pl-end .cta-row .obj{padding-left:18px;border-left:1px solid var(--line2)}
  .ds-motion .play:not(.is-flow) .pl-imp{min-height:0;align-items:stretch}
  /* the screen has a fixed height, so an opened Details lies over the column instead of pushing it */
  .ds-motion .play:not(.is-flow) .pl-det[open]>.pl-det-in{position:absolute;left:-6px;top:calc(100% + 4px);z-index:9;width:min(420px,calc(100vw - 2*var(--m)));max-width:none;max-height:min(46vh,380px);overflow:auto;padding:16px 18px;border-radius:18px;background:var(--ds-paper);box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(14,14,16,.5)}
}
@media (min-width:1000px) and (min-height:700px) and (max-height:820px) and (pointer:fine){
  .ds-motion .play:not(.is-flow) .pl-parsed li{padding:6px 2px;font-size:13.5px}
  .ds-motion .play:not(.is-flow) .pl-num{font-size:clamp(110px,11vw,150px)}
}

/* phones and narrow screens: tabs, one step at a time, native scroll only */
@media (max-width:999px){
  .play{padding-top:34px;--pl-gap:12px}
  .pl-hd{align-items:center}
  .pl-sub{padding-bottom:0;margin-left:auto}
  .ds-motion .pl-hd{flex-wrap:wrap}
  .ds-motion .pl-tabs{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:2px 0 0}
  .pl-tabs button{justify-content:center;padding:0 10px 0 6px;min-height:46px}
  .ds-motion .pl-stage{margin-top:16px}
  .pl-copy h2{max-width:none;font-size:clamp(28px,7.4vw,40px)}
  .pl-line{margin-top:8px;font-size:16px;max-width:none}
  .pl-det{margin-top:2px}
  .pl-end{margin-top:14px}
  .pl-end .cta-row .btn.ghost{min-height:46px}
  .pl-num{display:none}
  .ds-motion :is(.pl-p1,.pl-p2)>.pl-copy{display:contents}
  .ds-motion :is(.pl-p1,.pl-p2) .pl-line{margin-top:-4px}
  .ds-motion :is(.pl-p1,.pl-p2) .pl-det{margin-top:calc(var(--pl-gap)*-1 + 2px)}
  .ds-motion .pl-foot{display:flex;order:9}
  .pl-next{width:100%;justify-content:center;min-height:46px;margin:0}
  .pl-end .cta-row{gap:10px}
  .pl-end .cta-row .obj{margin-top:-6px}
  /* the two ways in share one row you can swipe (native scroll-snap) */
  .ds-motion .pl-imp{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--m)*-1);padding:2px var(--m) 14px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .ds-motion .pl-imp::-webkit-scrollbar{display:none}
  .ds-motion .pl-imp>.pl-card{scroll-snap-align:center;box-shadow:var(--ds-shadow-lift)}
  .pl-card{padding:16px}
  .pl-kpis dd{font-size:clamp(28px,13.6cqw,42px)}
  .pl-rows{max-height:96px}
  .pl-scanbox{max-height:110px}
  .pl-dtx span{font-size:12.5px}
}
@media (max-width:999px) and (min-width:640px){
  .ds-motion .pl-imp{grid-auto-columns:minmax(0,1fr);overflow:visible;margin-inline:0;padding:0}
}
/* ═════════ YOUR TURN · step 2 · approve: the same row in three states ═════════ */
.pl-states{display:grid;gap:14px;align-content:center;min-width:0}
.pl-state{display:grid;gap:8px;min-width:0}
.pl-st-tx b{display:block;font:300 clamp(20px,1.75vw,26px)/1.1 var(--f-d);letter-spacing:-.02em;color:var(--ink0);white-space:nowrap}
/* the row itself (also the result row of step 3) */
.pl-drow{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:80px;padding:16px 20px;border-radius:var(--ds-r-card);background:var(--ds-paper);border:1px solid var(--line)}
.pl-drow>*{position:relative}
.pl-drow b{display:block;font-size:clamp(16px,1.25vw,18.5px);font-weight:400;line-height:1.25;color:var(--ink0)}
.pl-drow small{display:block;color:var(--ink2);font-size:clamp(13px,1vw,14.5px);line-height:1.38;margin-top:2px}
.pl-bu{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--bg2);font:400 12.5px/1 var(--f-t);letter-spacing:.08em;color:var(--ink0)}
.pl-stat{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:var(--bg2);font:400 13.5px/1 var(--f-t);color:var(--ink0);white-space:nowrap}
.pl-stat.pl-ink{background:var(--ink0);color:#fff}
.pl-stat[hidden],.pl-acts [hidden]{display:none}
.pl-drow.pl-done{background:var(--win-soft);border-color:var(--line);border-color:color-mix(in srgb,var(--win) 20%,transparent)}
.pl-drow.pl-done .pl-stat{background:var(--win);color:#fff}
.pl-drow.pl-done .pl-bu{background:var(--ds-paper)}
.pl-wash{position:absolute!important;inset:0;background:var(--bg2);transform-origin:0 50%;transform:scaleX(0)}
.pl-s-arr .pl-drow{background:rgba(255,255,255,.62)}
.pl-s-arr .pl-drow b{color:var(--ink)}
.pl-livewrap{position:relative;min-width:0}
.pl-sw{display:none}
.pl-sw button{min-height:44px;border-radius:999px;font:400 14.5px/1 var(--f-t);color:var(--ink0);white-space:nowrap}
.pl-sw button[aria-pressed="true"]{background:var(--ink0);color:#fff}
.pl-live{z-index:2;min-height:96px;padding:20px 22px;box-shadow:var(--ds-shadow-lift)}
.pl-live b{font-size:clamp(17px,1.36vw,20px)}
.pl-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.pl-acts .a{min-height:44px;padding:0 18px;border-radius:999px;font:400 14.5px/1 var(--f-t);white-space:nowrap}
.pl-a1{background:var(--ink0);color:#fff}
.pl-a2{background:var(--bg2);color:var(--ink0)}
/* the draft letter, tucked under the row it belongs to */
.pl-draft{position:relative;z-index:1;margin:-14px clamp(14px,2.4vw,36px) 0;transform-origin:50% 0}
.pl-draft-in{background:var(--ds-paper);padding:30px clamp(18px,2.2vw,30px) 16px;border-radius:0 0 6px 6px;box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line),0 34px 44px -36px rgba(14,14,16,.5)}
.pl-d-re{font-size:14.5px;line-height:1.4;color:var(--ink0);font-weight:400}
.pl-d-tx{margin-top:6px;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.55;color:var(--ink);border-radius:6px;outline-offset:6px}
.pl-d-tx[contenteditable="true"]{cursor:text;box-shadow:0 0 0 6px var(--ds-paper),0 0 0 7px var(--line2)}
.pl-d-ft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.3;color:var(--ink2)}
@media (min-width:1000px){
  .pl-state{grid-template-columns:clamp(104px,9.6vw,136px) minmax(0,1fr);column-gap:clamp(12px,1.4vw,20px);align-items:start}
  .pl-st-tx{padding-top:26px}
  .pl-s-live .pl-st-tx{padding-top:34px}
  .pl-state:not(.is-cur) .pl-st-tx b{color:var(--ink3)}
}
@media (min-width:1000px) and (min-height:700px) and (max-height:820px) and (pointer:fine){
  .ds-motion .play:not(.is-flow) .pl-states{gap:10px}
  .ds-motion .play:not(.is-flow) .pl-st-tx{padding-top:20px}
  .ds-motion .play:not(.is-flow) .pl-s-live .pl-st-tx{padding-top:27px}
  .ds-motion .play:not(.is-flow) .pl-drow{min-height:70px;padding:12px 18px}
  .ds-motion .play:not(.is-flow) .pl-live{min-height:84px;padding:16px 20px}
  .ds-motion .play:not(.is-flow) .pl-draft-in{padding:26px 22px 12px}
  .ds-motion .play:not(.is-flow) .pl-d-ft{margin-top:8px;padding-top:8px}
}
@media (max-width:999px){
  .pl-states{gap:12px}
  .pl-state{gap:6px}
  .pl-st-tx b{font-size:18px}
  .pl-drow{grid-template-columns:auto minmax(0,1fr);gap:8px 12px;min-height:0;padding:12px 14px;border-radius:18px}
  .pl-drow .pl-stat,.pl-drow .pl-acts{grid-column:1/-1;justify-self:start}
  .pl-drow .pl-acts{justify-content:flex-start}
  .pl-bu{width:38px;height:38px;border-radius:11px}
  .pl-live{padding:14px}
  .pl-draft{margin:-12px 10px 0}
  .pl-draft-in{padding:22px 14px 10px}
  .pl-d-tx{font-size:13.5px;line-height:1.45}
  .pl-d-tx:not([contenteditable="true"]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pl-d-re{font-size:13.5px}
  .pl-d-ft{margin-top:8px;padding-top:8px}
  .pl-drow .pl-stat{min-height:30px;font-size:13px}
  .pl-d-ft{display:none}
  /* on a phone the row is shown in one state at a time: a small switch walks it through the three */
  .ds-motion .pl-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:999px;background:var(--bg2)}
  .ds-motion .pl-states.has-sw .pl-state:not(.is-shown){display:none}
  .ds-motion .pl-states.has-sw .pl-st-tx{display:none}
}
/* ═════════ YOUR TURN · step 3 · mail: a sheet of paper, its envelope, the route and the tracking record ═════════
   The desk is authored in design units (--u). On a 1x desk screen --ss is 2: the paper is laid out at twice its
   size and scaled by half inside the 3D transform, so the tilted sheet is rasterised at 2x and its type stays sharp.
   Paper is always white; ink, hairlines and the ramp come from the tokens. Base rules are the still frame (flat,
   in flow); html.ds-motion puts everything on one tilted plane. */
.pl-p3{position:relative}
.pl-desk{position:relative;--ss:1;--u:calc(1px*var(--ss));--k:1;--dw:470;--dh:664;--shx:13;--shy:34;--sw:444;--sh:576;--ew:400;--eh:174;--tiltx:7deg;--tiltz:-2.4deg;--tx:-380;--ty:372;--chw:240;--chh:58;--chg:10;
  --pl-pap2:var(--ds-ground);--pl-pap3:var(--ds-ground-2)}
.pl-plane{display:grid;gap:10px;justify-items:start}
.pl-sh,.pl-fly,.pl-flysh,.pl-arc{display:none}
.pl-who2{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8*var(--u))}
.pl-who-n{font:200 calc(23*var(--u))/1 var(--f-d);letter-spacing:-.02em;color:var(--ink0);white-space:nowrap}
.pl-hint{display:none;flex-basis:100%;font-size:calc(12.5*var(--u));line-height:1.35;color:var(--ink2)}
.pl-h-tap{display:none}
/* the client file's items, as physical tabs */
.pl-chip{display:flex;align-items:center;gap:calc(11*var(--u));width:calc(var(--chw)*var(--u));max-width:100%;height:calc(var(--chh)*var(--u));padding:0 calc(12*var(--u)) 0 calc(14*var(--u));background:var(--ds-paper);border-radius:calc(10*var(--u));box-shadow:0 0 0 calc(1*var(--u)) var(--line),0 calc(16*var(--u)) calc(26*var(--u)) calc(-16*var(--u)) rgba(14,14,16,.42);text-align:left;-webkit-tap-highlight-color:transparent}
.pl-chip .pl-ring{flex:none;width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%;box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--ink3)}
.pl-chip[aria-pressed="true"] .pl-ring{background:var(--ink0);box-shadow:none}
.pl-chx{min-width:0;display:block}
.pl-chip b{display:block;font:400 calc(13.5*var(--u))/1.25 var(--f-t);color:var(--ink0);white-space:nowrap}
.pl-chip b span{white-space:nowrap}
.pl-chip em{display:block;font-style:normal;font-size:calc(11.5*var(--u));line-height:1.3;color:var(--ink3)}
.pl-grip{display:none;margin-left:auto;flex:none;width:calc(3*var(--u));height:calc(3*var(--u));border-radius:50%;background:var(--ink3);box-shadow:0 calc(6*var(--u)) 0 var(--ink3),0 calc(-6*var(--u)) 0 var(--ink3)}
.pl-chip:focus-visible{outline-width:calc(2*var(--u));outline-offset:calc(3*var(--u));border-radius:calc(10*var(--u))}
.pl-carry{display:grid;gap:16px;width:100%;justify-items:start}
/* the sheet */
.pl-sheet{order:1;position:relative;width:min(100%,calc(var(--sw)*var(--u)));background:var(--ds-paper);box-shadow:0 0 0 1px var(--line),0 30px 50px -34px rgba(14,14,16,.45)}
.pl-page{position:relative;min-height:calc(var(--sh)*var(--u)*.8);background:var(--ds-paper);padding:calc(30*var(--u)) calc(34*var(--u)) calc(22*var(--u));font:300 calc(14*var(--u))/calc(22*var(--u)) var(--f-t);color:var(--ink);display:flex;flex-direction:column;text-align:left}
.pl-lh{display:flex;justify-content:space-between;align-items:baseline;gap:calc(12*var(--u));padding-bottom:calc(12*var(--u));border-bottom:calc(1*var(--u)) solid var(--line2)}
.pl-lh-firm{font:200 calc(25*var(--u))/1 var(--f-d);letter-spacing:-.02em;color:var(--ink0);white-space:nowrap}
.pl-lh-url{font-size:calc(11*var(--u));line-height:1;color:var(--ink3);letter-spacing:.02em;white-space:nowrap}
.pl-l-date{margin-top:calc(18*var(--u));font-size:calc(12*var(--u));color:var(--ink2);min-height:calc(22*var(--u))}
.pl-l-re{font-size:calc(14*var(--u));color:var(--ink0);font-weight:400;min-height:calc(22*var(--u))}
.pl-l-body{position:relative;flex:1;margin-top:calc(16*var(--u))}
.pl-l-p{display:none;margin-bottom:calc(11*var(--u))}
.pl-l-p.is-on{display:block}
.pl-l-p small{display:block;font:400 calc(9.5*var(--u))/1.2 var(--f-t);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:calc(3*var(--u))}
.pl-l-empty{position:absolute;left:0;right:0;top:calc(18*var(--u));font:200 calc(30*var(--u))/1.12 var(--f-d);letter-spacing:-.03em;color:var(--ink3)}
.pl-l-empty[hidden]{display:none}
.pl-l-sign{display:grid;gap:calc(1*var(--u));margin-bottom:calc(16*var(--u));font-size:calc(12*var(--u));line-height:1.35;color:var(--ink2)}
.pl-l-sign b{font:200 calc(22*var(--u))/1.15 var(--f-d);letter-spacing:-.02em;color:var(--ink0)}
.pl-l-sign small{font-size:calc(10.5*var(--u));color:var(--ink3)}
.pl-l-foot{font-size:calc(10*var(--u));line-height:1.3;color:var(--ink3);letter-spacing:.02em;border-top:calc(1*var(--u)) solid var(--line);padding-top:calc(9*var(--u))}
/* a typed line: rows of real text, each under a paper-white cover that slides off it (transform only) */
.pl-ln{display:block;position:relative;white-space:nowrap;overflow:hidden}
.pl-cv{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ds-paper);will-change:transform}
.pl-ln.is-done .pl-cv{visibility:hidden}
.pl-caret{position:absolute;left:0;top:0;width:calc(6.5*var(--u));height:calc(6.5*var(--u));margin-top:calc(-3.25*var(--u));border-radius:50%;background:currentColor;color:var(--ds-r2);will-change:transform;visibility:hidden;pointer-events:none}
.pl-caret.is-on{visibility:visible}
/* the envelope: in the still frame only its address side shows, lying under the letter */
.pl-env{order:2;position:relative;width:min(100%,calc(var(--ew)*var(--u)));aspect-ratio:400/174}
.pl-envface{position:absolute;inset:0}
.pl-env svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.pl-env svg *{vector-effect:non-scaling-stroke;stroke-width:calc(1*var(--u));stroke:var(--line2)}
.pl-pap{fill:var(--ds-paper)}.pl-pap-b{fill:var(--pl-pap3)}.pl-pap-p{fill:var(--ds-paper)}.pl-pap-f{fill:var(--pl-pap2)}.pl-pap-g{fill:var(--pl-pap2)}
.pl-env .pl-crease{fill:none;stroke:var(--line)}
.pl-env .pl-ink-f{fill:var(--ink0);stroke:none}
.pl-envback,.pl-envpocket,.pl-flap{display:none}
.pl-ret{position:absolute;left:4.5%;top:9%;font-size:calc(9.5*var(--u));line-height:1.3;color:var(--ink2);white-space:nowrap}
.pl-ret b{display:block;font:200 calc(15*var(--u))/1.15 var(--f-d);color:var(--ink0)}
.pl-ret span{display:block}
.pl-to{position:absolute;left:30%;top:56%;width:34%}
.pl-to small{display:block;font:400 calc(8.5*var(--u))/1.2 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.pl-to b{display:block;font:200 calc(19*var(--u))/1.2 var(--f-d);color:var(--ink0);white-space:nowrap}
.pl-to i{display:block;height:calc(1*var(--u));background:var(--line2);margin-top:calc(7*var(--u))}
.pl-to i+i{width:62%}
.pl-cert{position:absolute;right:4.5%;top:9%;width:43%;padding:calc(8*var(--u)) calc(9*var(--u)) calc(7*var(--u));background:var(--ds-paper);box-shadow:inset 0 0 0 calc(1*var(--u)) var(--ink0);border-radius:calc(3*var(--u));display:grid;gap:calc(5*var(--u));overflow:hidden}
.pl-cert-cv,.pl-n-cv{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:var(--ds-paper);will-change:transform}
.pl-cert-h{font:400 calc(8.5*var(--u))/1 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink0);white-space:nowrap}
.pl-bars{display:block;height:calc(18*var(--u));position:relative}
.pl-cert-n{position:relative;overflow:hidden;font:400 calc(8.7*var(--u))/1 var(--f-t);letter-spacing:.01em;white-space:nowrap;color:var(--ink0)}
.pl-cert-s{font:400 calc(7.5*var(--u))/1 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
/* the flat layer over the desk: Halo's mark, the one control, the result */
.pl-deskui{display:grid;gap:16px;margin-top:16px}
.pl-halo{position:absolute;right:6px;top:-8px;width:44px;height:44px}
.pl-halo canvas{display:none;position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}
.pl-halo img{width:100%;height:100%}
.pl-mailbar{display:none;align-items:center;gap:10px;white-space:nowrap}
.pl-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;min-width:196px;padding:0 24px;border-radius:999px;background:var(--ink0);color:#fff;font:400 15.5px/1 var(--f-t);box-shadow:0 18px 30px -18px rgba(14,14,16,.6)}
.pl-pill[aria-disabled="true"]{cursor:default}
.pl-pill.is-busy{background:var(--ds-paper);color:var(--ink0);box-shadow:inset 0 0 0 1px var(--line2),0 18px 30px -22px rgba(14,14,16,.5)}
.pl-replay{height:48px;padding:0 20px;border-radius:999px;background:var(--ds-paper);box-shadow:inset 0 0 0 1px var(--line2),0 18px 30px -22px rgba(14,14,16,.5);font:400 14.5px/1 var(--f-t);color:var(--ink0)}
.pl-replay[hidden]{display:none}
.pl-result{display:grid;gap:10px}
.pl-winfig{font:200 clamp(72px,9vw,132px)/.86 var(--f-d);letter-spacing:-.05em;color:var(--win);white-space:nowrap}
.pl-winfig{overflow:hidden;padding:.06em .04em .04em 0}
.pl-winfig-in{display:inline-block;will-change:transform}
.pl-winfig small{font-size:.2em;letter-spacing:0}
.pl-result .pl-drow b{font-size:clamp(15.5px,1.2vw,17.5px)}
.pl-result .pl-wash{background:var(--win-soft)}
/* the route and the tracking record */
.pl-side{display:grid;gap:16px;min-width:0;align-content:start}
.pl-route{position:relative;min-width:0}
.pl-stops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.pl-stops li{--d:44px;display:grid;grid-template-columns:var(--d) minmax(0,1fr);column-gap:10px;align-items:center;color:var(--ink3)}
.pl-ic{grid-row:1/3;display:grid;place-items:center;width:var(--d);height:var(--d);border-radius:50%;background:var(--ds-paper);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink3)}
.pl-ic svg{width:62%;height:62%;fill:var(--ds-paper);stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.pl-stops b{align-self:end;font-weight:400;font-size:15px;line-height:1.2;color:var(--ink2);white-space:nowrap}
.pl-stops small{align-self:start;font-size:12.5px;line-height:1.3;color:var(--ink3);white-space:nowrap}
.pl-stops li.is-on .pl-ic{box-shadow:inset 0 0 0 1.5px var(--ink0);color:var(--ink0)}
.pl-stops li.is-on b{color:var(--ink0)}
.pl-stops li.is-on small{color:var(--ink2)}
.pl-trk{padding:18px 20px 16px;border-radius:var(--ds-r-card);background:var(--glass);border:1px solid var(--line);box-shadow:var(--ds-shadow-card)}
.pl-trk-hd{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:14px;line-height:1.3}
.pl-trk-hd b{font-weight:500;color:var(--ink0)}
.pl-trk-hd>span{color:var(--ink2);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.pl-trk-t{color:var(--line2)}
.pl-trk ol{margin-top:10px;display:grid;gap:1px}
.pl-trk li{position:relative;padding:5px 0 5px 24px;font-size:14.5px;line-height:1.35;color:var(--ink3)}
.pl-trk li::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);background:var(--ds-paper)}
.pl-trk li+li::after{content:"";position:absolute;left:4px;top:-50%;height:calc(100% - 9px);margin-top:4.5px;width:1px;background:var(--line2)}
.pl-trk li.is-on{color:var(--ink0)}
.pl-trk li.is-on::before{background:var(--ink0);box-shadow:none}
.pl-trk-ft{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--ink2)}
@media (min-width:1000px){
  .pl-p3{grid-template-columns:var(--pl-copy) minmax(0,1.17fr) minmax(0,1fr)}
}

/* ════════ motion: the desk in 3D ════════ */
.ds-motion .pl-desk{--ss:2;perspective:1700px;perspective-origin:50% 42%;min-height:0;aspect-ratio:var(--dw)/var(--dh);touch-action:pan-y}
@media (min-resolution:1.5dppx){.ds-motion .pl-desk{--ss:1}}
.ds-motion .pl-plane{position:absolute;left:50%;top:50%;display:block;width:calc(var(--dw)*var(--u));height:calc(var(--dh)*var(--u));margin:calc(var(--dh)*var(--u)/-2) 0 0 calc(var(--dw)*var(--u)/-2);transform-style:preserve-3d;transform:rotateX(var(--tiltx)) rotateZ(var(--tiltz)) scale(calc(var(--k)/var(--ss)))}
.ds-motion .pl-plane>*,.ds-motion .pl-carry>*{position:absolute}
.ds-motion .pl-carry{left:0;top:0;width:100%;height:100%;display:block;transform-style:preserve-3d;pointer-events:none}
.ds-motion .pl-carry>*{pointer-events:auto}
/* the one long soft shadow, laid out at an eighth of its size and scaled up: a blur does not need the pixels */
.ds-motion .pl-sh{display:block;pointer-events:none;--q:calc(var(--u)/8);transform-origin:0 0;transform:scale(8);will-change:transform,opacity;border-radius:calc(4*var(--q));background:rgba(14,14,16,.06)}
.pl-sh-sheet{left:calc(var(--shx)*var(--u));top:calc(var(--shy)*var(--u));width:calc(var(--sw)*var(--q));height:calc(var(--sh)*var(--q));box-shadow:calc(30*var(--q)) calc(58*var(--q)) calc(84*var(--q)) calc(-34*var(--q)) rgba(14,14,16,.42),calc(6*var(--q)) calc(10*var(--q)) calc(18*var(--q)) calc(-8*var(--q)) rgba(14,14,16,.16)}
.ds-motion .pl-sh-env{left:calc((var(--shx) + (var(--sw) - var(--ew))/2)*var(--u));top:calc((var(--shy) + var(--sh) - var(--eh) - 10)*var(--u));width:calc((var(--ew) - 90)*var(--q));height:calc((var(--eh) - 90)*var(--q));margin:calc(62*var(--u)) 0 0 calc(54*var(--u));border-radius:calc(30*var(--q));background:rgba(14,14,16,.12);box-shadow:0 0 calc(54*var(--q)) calc(34*var(--q)) rgba(14,14,16,.12);opacity:0}
.ds-motion .pl-sh-pack{left:calc(var(--shx)*var(--u));top:calc((var(--shy) + var(--sh)/3)*var(--u));width:calc((var(--sw)*.86 - 90)*var(--q));height:calc((var(--sh)/3*.86 - 90)*var(--q));margin:calc(70*var(--u)) 0 0 calc(80*var(--u));border-radius:calc(30*var(--q));background:rgba(14,14,16,.12);box-shadow:0 0 calc(54*var(--q)) calc(34*var(--q)) rgba(14,14,16,.12);opacity:0}
.ds-motion .pl-who2{left:calc(var(--tx)*var(--u));top:calc(var(--ty)*var(--u));width:calc((var(--chw) + 50)*var(--u));transform:translateZ(calc(2*var(--u)))}
.ds-motion .pl-who2 .ds-sample{font-size:calc(10*var(--u));padding:calc(4*var(--u)) calc(8*var(--u));border-width:calc(1*var(--u))}
.ds-motion .pl-hint{display:block}
.ds-motion .pl-chip{left:0;top:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform;
  --x:var(--x0);--y:var(--y0);--r:var(--r0);transform:translate3d(calc(var(--x)*var(--u)),calc(var(--y)*var(--u)),calc(6*var(--u))) rotate(calc(var(--r)*1deg))}
.ds-motion .pl-chip[aria-pressed="true"]{--x:var(--x1);--y:var(--y1);--r:var(--r1)}
.ds-motion .pl-chip.is-drag{cursor:grabbing}
.ds-motion .pl-grip{display:block}
.pl-chip[data-i="0"]{--x0:calc(var(--tx) + 0);--y0:calc(var(--ty) + 72);--r0:-2;--x1:calc(var(--shx) + 22 - var(--chw));--y1:calc(var(--ty) + 70);--r1:0}
.pl-chip[data-i="1"]{--x0:calc(var(--tx) + 12);--y0:calc(var(--ty) + 72 + var(--chh) + var(--chg));--r0:1.4;--x1:calc(var(--shx) + 22 - var(--chw));--y1:calc(var(--ty) + 70 + var(--chh) + var(--chg));--r1:0}
.pl-chip[data-i="2"]{--x0:calc(var(--tx) - 2);--y0:calc(var(--ty) + 72 + (var(--chh) + var(--chg))*2);--r0:-1;--x1:calc(var(--shx) + 22 - var(--chw));--y1:calc(var(--ty) + 70 + (var(--chh) + var(--chg))*2);--r1:0}
.ds-motion .pl-sheet{left:calc(var(--shx)*var(--u));top:calc(var(--shy)*var(--u));width:calc(var(--sw)*var(--u));height:calc(var(--sh)*var(--u));background:none;box-shadow:none;transform-style:preserve-3d;transform:translateZ(calc(10*var(--u)))}
.ds-motion .pl-page{position:absolute;left:0;top:0;width:calc(var(--sw)*var(--u));height:calc(var(--sh)*var(--u));min-height:0}
.ds-motion .pl-sheet>.pl-page{box-shadow:inset 0 0 0 calc(1*var(--u)) var(--line);transform:translateZ(calc(2*var(--u)))}
/* the fold: three hinged panels, each a window onto its own copy of the finished letter */
.pl-fold{position:absolute;inset:0;transform-style:preserve-3d}
.pl-pn{position:absolute;left:0;width:100%;height:calc(var(--sh)*var(--u)/3);transform-style:preserve-3d;will-change:transform}
.pl-pm{top:calc(var(--sh)*var(--u)/3)}
.pl-pt{top:calc(var(--sh)*var(--u)/-3);transform-origin:50% 100%;transform:translateZ(calc(1.2*var(--u)))}
.pl-pb{top:calc(var(--sh)*var(--u)/3);transform-origin:50% 0;transform:translateZ(calc(.6*var(--u)))}
.pl-face{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--ds-paper)}
.pl-face.pl-back{transform:rotateX(180deg);background:var(--pl-pap2);box-shadow:inset 0 0 0 calc(1*var(--u)) var(--line)}
.pl-pt>.pl-face>.pl-page{top:0}
.pl-pm>.pl-face>.pl-page{top:calc(var(--sh)*var(--u)/-3)}
.pl-pb>.pl-face>.pl-page{top:calc(var(--sh)*var(--u)*-2/3)}
.pl-pt>.pl-front{box-shadow:inset 0 calc(1*var(--u)) 0 var(--line),inset calc(1*var(--u)) 0 0 var(--line),inset calc(-1*var(--u)) 0 0 var(--line)}
.pl-pm>.pl-front{box-shadow:inset calc(1*var(--u)) 0 0 var(--line),inset calc(-1*var(--u)) 0 0 var(--line)}
.pl-pb>.pl-front{box-shadow:inset 0 calc(-1*var(--u)) 0 var(--line),inset calc(1*var(--u)) 0 0 var(--line),inset calc(-1*var(--u)) 0 0 var(--line)}
.pl-face>.pl-page{box-shadow:none}
.pl-face>.pl-page.pl-ghost{background:none;opacity:.075;transform:none}
.pl-shade{position:absolute;inset:0;background:var(--ink0);opacity:0;pointer-events:none;will-change:opacity}
.pl-sheet.pl-fresh{pointer-events:none;visibility:hidden;will-change:transform}
/* the envelope, waiting under the sheet */
.ds-motion .pl-env{left:calc((var(--shx) + (var(--sw) - var(--ew))/2)*var(--u));top:calc((var(--shy) + var(--sh) - var(--eh) - 10)*var(--u));width:calc(var(--ew)*var(--u));height:calc(var(--eh)*var(--u));aspect-ratio:auto;transform-style:preserve-3d;visibility:hidden}
.ds-motion .pl-envface{display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
.ds-motion .pl-envback{transform:translateZ(calc(1*var(--u)))}
.ds-motion .pl-envfront{transform:translateZ(calc(.5*var(--u))) rotateY(180deg)}
.ds-motion .pl-envpocket{transform:translateZ(calc(5*var(--u)))}
.ds-motion .pl-flap{display:block;position:absolute;left:0;top:0;width:100%;height:55.2%;transform-origin:50% 0;transform-style:preserve-3d;transform:translateZ(calc(1*var(--u))) rotateX(180deg)}
.pl-flapface{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pl-flapin{transform:rotateY(180deg)}
.pl-flapface .pl-shade{clip-path:polygon(0 0,100% 0,100% 5%,53% 95%,47% 95%,0 5%)}
.ds-motion .pl-cert-cv,.ds-motion .pl-n-cv{display:block}
.pl-fly .pl-cert-cv,.pl-fly .pl-n-cv{display:none!important}
/* the flat layer */
.ds-motion .pl-deskui{position:absolute;inset:0;display:block;margin:0;pointer-events:none;z-index:4}
.ds-motion .pl-deskui>*{pointer-events:auto;position:absolute}
.ds-motion .pl-halo{left:50%;right:auto;top:4%;width:52px;height:52px;margin:-26px 0 0 -26px;pointer-events:none}
.ds-motion .pl-halo canvas{display:block}
.ds-motion .pl-halo:not(.is-nogl) img{visibility:hidden}
.ds-motion .pl-halo.is-nogl canvas,.pl-halo.is-svg canvas,.pl-halo.is-svg img{display:none}
.pl-halo svg{position:absolute;inset:0;width:100%;height:100%}
.play.is-touch .pl-trail{display:none}
.ds-motion .pl-mailbar{display:flex;left:50%;top:92%;transform:translate(-50%,-50%)}
.ds-motion .pl-result{left:50%;top:48%;width:min(100%,480px);transform:translate(-50%,-50%);visibility:hidden;pointer-events:none}
.ds-motion .pl-result.is-on{visibility:visible;pointer-events:auto}
.ds-motion .pl-winfig{font-size:calc(var(--k)*150px)}
/* the route */
.ds-motion .pl-arc{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pl-track{fill:none;stroke:var(--line2);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.pl-trail{fill:none;stroke:var(--ink0);stroke-width:1.5;stroke-linecap:butt;stroke-dasharray:0 99999}
.ds-motion .pl-fly{display:block;position:absolute;left:0;top:0;width:0;height:0;z-index:7;visibility:hidden;pointer-events:none;perspective:900px;will-change:transform}
.pl-fly-in{position:absolute;transform-style:preserve-3d;will-change:transform;box-shadow:0 0 0 1px var(--line2)}
.pl-fly-in .pl-envfront{position:absolute;inset:0;transform:none;-webkit-backface-visibility:visible;backface-visibility:visible}
.pl-fly-in svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.pl-fly-in svg *{vector-effect:non-scaling-stroke;stroke-width:1px;stroke:var(--line2)}
.pl-fly-in .pl-ink-f{fill:var(--ink0);stroke:none}
.ds-motion .pl-flysh{display:block;position:absolute;left:0;top:0;width:160px;height:36px;margin:-18px 0 0 -80px;border-radius:50%;background:radial-gradient(closest-side,rgba(14,14,16,.3),rgba(14,14,16,0));z-index:1;visibility:hidden;pointer-events:none;will-change:transform,opacity}

/* a desk: stops stand on a receding ground, the tracking record sits under them */
@media (min-width:1000px){
  .ds-motion .pl-side{grid-template-rows:minmax(0,1fr) auto;gap:10px;align-content:stretch}
  .ds-motion .pl-route{min-height:200px}
  .ds-motion .pl-stops{display:block;position:absolute;inset:0}
  .ds-motion .pl-stops li{position:absolute;left:var(--x);top:var(--y);grid-template-columns:var(--d) max-content;transform:translate(calc(var(--d)/-2),-50%)}
  .ds-motion .pl-stops li:nth-child(1){--x:6%;--y:86%;--d:46px}
  .ds-motion .pl-stops li:nth-child(2){--x:22%;--y:63%;--d:40px}
  .ds-motion .pl-stops li:nth-child(3){--x:38%;--y:41%;--d:34px}
  .ds-motion .pl-stops li:nth-child(4){--x:53%;--y:19%;--d:30px}
  .ds-motion .pl-stops li:nth-child(3) b{font-size:14px}.ds-motion .pl-stops li:nth-child(4) b{font-size:13.5px}
  .ds-motion .pl-trk{padding:16px 20px 14px}
}
@media (min-width:1000px) and (min-height:700px) and (pointer:fine){
  .ds-motion .play:not(.is-flow) .pl-p3{align-items:stretch}
  .ds-motion .play:not(.is-flow) .pl-desk{aspect-ratio:auto;height:100%}
  .ds-motion .play:not(.is-flow) .pl-side{height:100%;min-height:0}
}
@media (min-width:1000px) and (min-height:700px) and (max-height:820px) and (pointer:fine){
  .ds-motion .play:not(.is-flow) .pl-desk{--chh:50;--chg:8}
  .ds-motion .play:not(.is-flow) .pl-trk li{padding:3px 0 3px 24px;font-size:14px}
  .ds-motion .play:not(.is-flow) .pl-trk{padding:12px 18px 12px}
  .ds-motion .play:not(.is-flow) .pl-trk-ft{margin-top:6px;padding-top:8px}
}

/* phones and narrow screens: the items ride the top edge of the sheet as tabs, the desk lies flat, and the route and
   the tracking record take the sheet's place once it has left */
@media (max-width:999px){
  .pl-desk{--dw:358;--dh:500;--shx:24;--shy:70;--sw:310;--sh:400;--ew:270;--eh:117;--tiltx:0deg;--tiltz:0deg;--chw:100;--chh:60}
  .ds-motion .pl-desk{--ss:1;width:min(100%,560px);margin-inline:auto;perspective:2600px}
  .pl-page{padding:calc(20*var(--u)) calc(20*var(--u)) calc(14*var(--u));font-size:calc(12.2*var(--u));line-height:calc(17.4*var(--u))}
  .pl-lh{padding-bottom:calc(8*var(--u))}
  .pl-lh-firm{font-size:calc(20*var(--u))}
  .pl-l-date{margin-top:calc(10*var(--u));min-height:calc(17.4*var(--u));font-size:calc(11*var(--u))}
  .pl-l-re{font-size:calc(12.2*var(--u));min-height:calc(17.4*var(--u))}
  .pl-l-body{margin-top:calc(9*var(--u))}
  .pl-l-p{margin-bottom:calc(7*var(--u))}
  .pl-l-p small{font-size:calc(8.6*var(--u))}
  .pl-l-empty{font-size:calc(23*var(--u))}
  .pl-l-sign{display:none}
  .pl-l-foot{font-size:calc(9*var(--u));padding-top:calc(7*var(--u))}
  .ds-motion .pl-who2{left:calc(var(--shx)*var(--u));top:0;width:calc(var(--sw)*var(--u));flex-wrap:nowrap}
  .ds-motion .pl-who-n,.ds-motion .pl-who2 .ds-sample{display:none}
  .ds-motion .pl-hint{flex-basis:auto;font-size:calc(12.5*var(--u))}
  .pl-h-drag{display:none}.pl-h-tap{display:inline}
  .ds-motion .pl-chip{height:calc(var(--chh)*var(--u));padding:0 calc(5*var(--u)) calc(12*var(--u)) calc(9*var(--u));gap:0;border-radius:calc(9*var(--u)) calc(9*var(--u)) 0 0;cursor:pointer;box-shadow:0 0 0 calc(1*var(--u)) var(--line2)}
  .ds-motion .pl-chip b{font-size:calc(10.6*var(--u));white-space:normal;line-height:1.16}
  .ds-motion .pl-chip em{font-size:calc(9.8*var(--u))}
  .ds-motion .pl-chip .pl-ring,.ds-motion .pl-grip{display:none}
  .ds-motion .pl-chip[aria-pressed="true"]{background:var(--ink0)}
  .ds-motion .pl-chip[aria-pressed="true"] b{color:#fff}
  .ds-motion .pl-chip[aria-pressed="true"] em{color:var(--ds-night-ink-2)}
  .pl-chip[data-i="0"]{--x0:calc(var(--shx) + 0);--y0:24;--r0:0;--x1:calc(var(--shx) + 0);--y1:16;--r1:0}
  .pl-chip[data-i="1"]{--x0:calc(var(--shx) + 105);--y0:24;--r0:0;--x1:calc(var(--shx) + 105);--y1:16;--r1:0}
  .pl-chip[data-i="2"]{--x0:calc(var(--shx) + 210);--y0:24;--r0:0;--x1:calc(var(--shx) + 210);--y1:16;--r1:0}
  .pl-cert{width:52%;padding:calc(6*var(--u)) calc(6*var(--u)) calc(5*var(--u));gap:calc(3.5*var(--u))}
  .pl-cert-n{font-size:calc(7.2*var(--u))}
  .pl-bars{height:calc(13*var(--u))}
  .pl-to{left:8%;top:60%}
  .pl-to b{font-size:calc(16*var(--u))}
  .ds-motion .pl-halo{width:30px;height:30px;margin:-15px 0 0 -15px}
  .ds-motion .pl-p3{position:relative;grid-template-columns:minmax(0,1fr)}
  .ds-motion .pl-p3>.pl-copy{grid-area:1/1}
  .ds-motion .pl-p3>.pl-desk,.ds-motion .pl-p3>.pl-side{grid-area:2/1;width:min(100%,560px);margin-inline:auto}
  .ds-motion .pl-side{position:relative;display:block;pointer-events:none;z-index:5}
  .ds-motion .pl-route{position:absolute;left:0;right:0;top:0;height:44%;visibility:hidden}
  .ds-motion .pl-stops{display:block;position:absolute;inset:0}
  .ds-motion .pl-stops li{position:absolute;left:var(--x);top:var(--y);--d:30px;grid-template-columns:var(--d);grid-template-rows:var(--d) auto auto;justify-items:center;row-gap:1px;text-align:center;width:var(--d);transform:translate(-50%,calc(var(--d)/-2))}
  .ds-motion .pl-stops li:nth-child(1){--x:13%;--y:66%}
  .ds-motion .pl-stops li:nth-child(2){--x:37%;--y:49%}
  .ds-motion .pl-stops li:nth-child(3){--x:61%;--y:32%}
  .ds-motion .pl-stops li:nth-child(4){--x:84%;--y:15%}
  .ds-motion .pl-stops .pl-ic{grid-row:1}
  .ds-motion .pl-stops b{align-self:auto;font-size:12.5px;margin-top:4px}
  .ds-motion .pl-stops small{font-size:11px;line-height:1.2}
  .ds-motion .pl-trk{position:absolute;left:0;right:0;top:46%;padding:11px 16px 11px;visibility:hidden;pointer-events:auto;box-shadow:var(--ds-shadow-lift)}
  .ds-motion .pl-trk-hd{flex-wrap:nowrap;gap:8px;font-size:13px}
  .ds-motion .pl-trk-hd>span{font-size:11.5px;letter-spacing:-.01em}
  .ds-motion .pl-trk ol{margin-top:6px}
  .ds-motion .pl-trk li{padding:2px 0 2px 22px;font-size:13.5px;line-height:1.3}
  .ds-motion .pl-trk-ft{margin-top:5px;padding-top:7px;font-size:12.5px;line-height:1.3}
  .ds-motion .pl-p3.is-routing .pl-route,.ds-motion .pl-p3.is-away .pl-trk{visibility:visible}
  .ds-motion .pl-arc{visibility:hidden}
  .ds-motion .pl-p3.is-routing:not(.is-won) .pl-arc{visibility:visible}
  .ds-motion .pl-result{top:21%;width:100%;gap:6px}
  .ds-motion .pl-winfig{font-size:calc(var(--k)*84px);text-align:center}
  .pl-winfig{font-size:72px}
}
/* ═════════ 12 · PRICE · one monumental figure, the picker, three lines per plan, the plan table, the add-ons ═════════
   The figure is sized so the widest price it can show ($19,990 a year, 3.05em of Lufga 200) fits its column,
   so every plan and both billing periods roll at final size. Pricing reads as a number and three short lines;
   the sentences are in the section's Details fold. Scoped to .price. */
.price .pz-head{display:grid;gap:8px 56px}
@media (min-width:1000px){.price .pz-head{grid-template-columns:auto minmax(0,1fr);align-items:end}.price .pz-line{padding-bottom:.5em;max-width:none}}

/* the picker: four plans and their prices in one glance; the knob stretches to the choice */
.price .pz-pick{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(18px,2.6vw,36px)}
.price .tiers{max-width:100%;margin:0;padding:5px;border-radius:22px;flex-wrap:nowrap}
.price .tiers .knob{top:5px;bottom:5px;border-radius:17px}
.price .tiers button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;height:auto;min-height:56px;padding:8px 22px;border-radius:17px;font:300 17px/1 var(--f-d);letter-spacing:-.01em;text-align:left;transition:color .18s}
.price .tiers button::after{content:attr(data-p);min-width:7ch;font:400 12.5px/1 var(--f-t);letter-spacing:0;color:var(--ink2);font-variant-numeric:tabular-nums;transition:color .18s}
.price .tiers button:not([data-p])::after{content:none}
.price .tiers button[aria-pressed="true"]::after{color:var(--bg);opacity:.74}
.price .pz-bill{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14.5px;color:var(--ink2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.price .pz-sw{position:relative;width:52px;height:30px;border-radius:999px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);flex:none}
.price .pz-sw::before{content:"";position:absolute;inset:-7px}
.price .pz-sw i{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--ink0)}
.price .pz-sw[aria-checked="true"]{background:var(--ink0)}
.price .pz-sw[aria-checked="true"] i{background:var(--bg);transform:translateX(22px)}

/* the stage: the figure, then the chosen plan in three lines and its button */
.price .pz-stage{display:grid;gap:18px;margin-top:clamp(16px,2.6vw,38px)}
.price .pz-mon{min-width:0}
.price .pz-chip{display:none;align-items:center;gap:8px;height:34px;padding:0 13px 0 8px;border-radius:999px;background:var(--glass);box-shadow:0 0 0 1px var(--line);font-size:13px;line-height:1;color:var(--ink0)}
.price .pz-amount{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;column-gap:.06em;font:200 min(29vw,260px)/1.1 var(--f-d);letter-spacing:0;color:var(--ink0);white-space:nowrap}
/* digits are 0.69em tall and sit 0.175em below the top of a 1.1 line: the box is cropped to them, and the dollar sign hangs from their top */
.price .pz-cur{align-self:flex-start;font-size:.3em;line-height:1;margin:.1em 0 0}
/* rolling digits show only between the tops of the digits and just under the comma (the reels are 1.1em tall) */
.price .pz-num{display:inline-flex;height:.9em;margin:-.14em 0 .08em;line-height:1.1;font-variant-numeric:normal;clip-path:inset(.15em -.4em -.1em -.4em)}
.price .pz-per{flex:0 0 100%;font:200 clamp(20px,2.1vw,30px)/1.2 var(--f-d);letter-spacing:-.02em;color:var(--ink0)}
.price .pz-note{margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--ink2)}
.price .pz-plan{min-width:0;display:flex;flex-direction:column}
.price .pz-for{font:200 clamp(21px,2vw,30px)/1.18 var(--f-d);letter-spacing:-.025em;color:var(--ink2);text-wrap:balance}
.price .pz-for b{font-weight:200;color:var(--ink0)}
.price .pz-incl{display:grid;align-content:start;margin-top:12px;font-size:16px;line-height:1.35}
.price .pz-incl li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);overflow:hidden}
.price .pz-incl li:last-child{border-bottom:1px solid var(--line)}
.price .pz-incl li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink0);transform:translateY(-2px)}
.price .pz-incl li span{display:block}
.price .pz-plan .cta-row{margin-top:18px}
@media (min-width:1000px){
  .price .pz-stage{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:56px;align-items:start}
  .price .pz-chip{display:inline-flex;margin-bottom:12px}
  .price .pz-amount{font-size:min(14vw,280px)}
  /* beside the figure when there is room ($199 a month, $9,990 a year), under it only when the figure is at its widest ($19,990) */
  .price .pz-per{flex:0 0 auto}
  .price .pz-note{margin-top:6px;font-size:16px}
  .price .pz-plan{padding-top:46px}
}
@media (min-width:1000px) and (max-width:1279px){
  .price .pz-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:40px}
  .price .pz-plan .cta-row .btn{padding:0 20px}
}

/* the plan table: open on wide screens with the chosen plan's column lit; folded on phones (as before) */
.price .plantable{margin-top:clamp(26px,3.6vw,52px)}
.price .pt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}
.price .plantable h3{margin:0;font-weight:200;font-size:clamp(22px,2vw,30px);letter-spacing:-.03em}
.price .pt-more{display:none}
.price .tscroll{position:relative;overflow:visible}
.price .pt-band{position:absolute;z-index:0;left:0;top:0;bottom:0;width:0;border-radius:18px;background:var(--glass);box-shadow:0 0 0 1px var(--line),var(--ds-shadow-lift);pointer-events:none}
.price .plantable table{position:relative;z-index:1;width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;font-size:14.5px;line-height:1.4}
.price .plantable th,.price .plantable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:300;vertical-align:top}
.price .plantable tr>:first-child{padding-left:0;width:28%}
.price .plantable thead th{font:200 clamp(18px,1.6vw,24px)/1.2 var(--f-d);letter-spacing:-.02em;color:var(--ink0);border-bottom-color:var(--line2);padding-top:16px;padding-bottom:14px}
.price .plantable thead th:first-child{font:400 12px/1.2 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);vertical-align:bottom}
.price .plantable tbody th{color:var(--ink2)}
.price .plantable td{color:var(--ink)}
.price .plantable tbody tr:last-child>*{border-bottom:0}
.price .plantable[data-sel="starter"] td:nth-child(2),.price .plantable[data-sel="pro"] td:nth-child(3),.price .plantable[data-sel="scale"] td:nth-child(4),.price .plantable[data-sel="enterprise"] td:nth-child(5){color:var(--ink0);font-weight:400}

/* the add-ons, as priced: a name, a price, one short qualifier each */
.price .pz-adds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:clamp(18px,2.4vw,30px)}
.price .pz-adds li{display:grid;align-content:start;gap:2px;padding:12px 0 12px;border-top:1px solid var(--line2);min-width:0}
.price .pz-an{font-size:13px;line-height:1.3;color:var(--ink2)}
.price .pz-ap{font:200 clamp(20px,1.9vw,28px)/1.15 var(--f-d);letter-spacing:-.03em;color:var(--ink0)}
.price .pz-adds small{font-size:12.5px;line-height:1.35;color:var(--ink2)}
.price .pz-more{margin-top:4px}
@media (min-width:861px){
  .price .pz-adds{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,40px)}
  .price .pz-adds li{padding:14px 0 16px}
  .price .pz-adds small{font-size:13.5px}
}
@media (max-width:860px){
  /* one row at a time, the four plans side by side under the row's name (zz-phone-tables stacked them one per line) */
  .price .plantable.can-fold .pt-head{display:block}
  .price .plantable.can-fold .pt-more{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;margin:10px 0 0;padding:0 2px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);font:400 15px/1 var(--f-t);color:var(--ink0);text-align:left}
  .price .pt-more::after{content:"";flex:none;width:11px;height:11px;margin-right:4px;border-right:1.5px solid var(--ink0);border-bottom:1.5px solid var(--ink0);transform:translateY(-3px) rotate(45deg);transition:transform .25s}
  .price .pt-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .price .plantable.can-fold:not(.open) .tscroll{display:none}
  .price .plantable table,.price .plantable thead,.price .plantable tbody{display:block;width:100%}
  .price .plantable thead{position:sticky;top:var(--hd);z-index:3;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;background:var(--bg);box-shadow:0 1px 0 var(--line2)}
  .price .plantable tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;border:0}
  .price .plantable tr>:first-child{width:auto}
  .price .plantable thead th{display:block;width:auto;padding:12px 6px 10px 6px;border:0;font-size:14px;letter-spacing:-.01em}
  .price .plantable thead th:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .price .plantable tbody th{display:block;grid-column:1/-1;width:auto;padding:12px 6px 2px;border:0;font-weight:400;font-size:13px;color:var(--ink2)}
  .price .plantable td{display:block;width:auto;padding:2px 6px 12px;border:0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
  .price .plantable td::before{content:none}
  .price .pt-band{border-radius:12px}
}
@media (max-width:759px){
  .price .tiers{display:flex;width:100%}
  .price .tiers button{flex:1 1 0;min-width:0;padding:8px 0 8px 12px;font-size:15px}
  .price .tiers button::after{font-size:12px}
  .price .pz-pick{gap:6px}
  .price .pz-incl{font-size:15.5px}
  .price .pz-incl li{padding:7px 0}
  .price .pz-plan .cta-row{margin-top:14px}
  .price .plantable{margin-top:20px}
  .price .pz-adds{margin-top:14px}
  .price .pz-adds li{padding:10px 0}
}
@media (max-width:380px){.price .tiers button{padding-left:9px;font-size:14px}}
/* ═════════ 13 · COMPARE · the verdict rides beside the table ═════════
   Wide screens: the heading, its one line and the trial button stay in view on the left while the table scrolls
   past on the right, SCAIL's column on glass. Phones: eight folded groups, each row three values side by side.
   Every row comes from G_ROWS in js/compare.js, word for word. Scoped to .compare. */
.compare .cx-line{margin-top:12px}
.compare .cx-filter{margin-top:20px;max-width:100%}
.compare .cx-filter button[data-t="only"]::before{content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:var(--win);vertical-align:middle}
.compare .cx-filter button[data-t="only"][aria-pressed="true"]::before{background:currentColor}
.compare .cx-wrap{margin-top:14px}
.compare .cx-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14.5px;line-height:1.4}
.compare .cx-t thead th{position:sticky;top:var(--hd);z-index:3;background-color:var(--bg);text-align:left;vertical-align:bottom;padding:14px 14px 12px;font:200 clamp(16px,1.35vw,20px)/1.15 var(--f-d);letter-spacing:-.02em;color:var(--ink0);border-bottom:1px solid var(--line2)}
.compare .cx-t thead th:first-child{width:36%;padding-left:0;font:400 12px/1.2 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.compare .cx-t thead th small{display:block;margin-top:3px;font:300 12.5px/1.3 var(--f-t);letter-spacing:0;color:var(--ink2)}
.compare .cx-t thead th:nth-child(2){background-image:linear-gradient(var(--glass),var(--glass));box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 1px 0 var(--line);border-radius:14px 14px 0 0}
.compare .cx-t tbody th{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:300;color:var(--ink);vertical-align:top}
.compare .cx-t td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-weight:300;color:var(--ink2);vertical-align:top;overflow-wrap:break-word}
.compare .cx-t td:nth-child(2){color:var(--ink0);font-weight:400;background:var(--glass);box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)}
.compare .cx-t tr[hidden]{display:none!important}
/* "Yes" keeps its word and gains a tick; a dash stays a dash, quieter */
.compare .cx-y::before{content:"";display:inline-block;width:.68em;height:.36em;margin:0 .55em .22em .1em;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);vertical-align:middle}
.compare .cx-n{color:var(--ink3)}
.compare .cx-only{display:inline-block;margin-left:8px;font:400 10.5px/1 var(--f-t);letter-spacing:.06em;text-transform:uppercase;color:var(--win);border:1px solid var(--win);border-radius:999px;padding:3px 7px;vertical-align:2px;white-space:nowrap}
/* a group: a line of Lufga that folds; the dots are its rows that only SCAIL has (the same rows carry the tag) */
.compare .cx-t .cx-g th{padding:0;border-bottom:1px solid var(--line2)}
.compare .cx-g button{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:8px 0;text-align:left;font:200 clamp(20px,1.9vw,28px)/1.15 var(--f-d);letter-spacing:-.03em;color:var(--ink0);cursor:pointer;-webkit-tap-highlight-color:transparent}
.compare .cx-g small{flex:none;width:2.2em;font:400 12px/1 var(--f-t);letter-spacing:.06em;color:var(--ink3);font-variant-numeric:tabular-nums}
.compare .cx-g .cx-nm{min-width:0}
.compare .cx-dots{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-left:auto;max-width:130px}
.compare .cx-dots i{width:6px;height:6px;border-radius:50%;background:var(--win)}
.compare .cx-g .cx-chev{flex:none;width:11px;height:11px;margin:0 6px 4px 4px;border-right:1.5px solid var(--ink0);border-bottom:1.5px solid var(--ink0);transform:rotate(45deg);transition:transform .25s}
.compare .cx-g button[aria-expanded="true"] .cx-chev{transform:translateY(5px) rotate(-135deg)}
.compare .cx-more{margin-top:8px}
.compare .cx-cta{margin-top:clamp(14px,2vw,28px)}
@media (min-width:1280px){
  .compare .cx-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(36px,4.4vw,72px);grid-template-rows:auto 1fr auto;grid-template-areas:"rail filter" "rail table" "cta more"}
  .compare .cx-in>*{min-width:0}
  .compare .cx-rail{grid-area:rail;align-self:start}
  .compare .cx-line{margin-top:18px}
  .compare .cx-filter{grid-area:filter;justify-self:start;margin-top:.5em}
  .compare .cx-wrap{grid-area:table}
  .compare .cx-more{grid-area:more}
  .compare .cx-cta{grid-area:cta;align-self:end}
  /* with the script: the heading, its line and the button ride down the table together (heights measured once) */
  .compare .cx-in.cx-ride .cx-rail,.compare .cx-in.cx-ride .cx-cta{grid-area:1/1/4/2;align-self:start;position:sticky}
  .compare .cx-in.cx-ride .cx-rail{top:calc(var(--hd) + 26px)}
  .compare .cx-in.cx-ride .cx-cta{top:calc(var(--hd) + 26px + var(--cx-rail-h,0px));margin-top:var(--cx-rail-h,0px);padding-top:clamp(18px,2vw,28px)}
}
@media (max-width:860px){
  /* phones: the three names ride above each value, so a row reads on its own */
  .compare .cx-t,.compare .cx-t tbody,.compare .cx-t tr,.compare .cx-t th{display:block;width:100%}
  .compare .cx-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .compare .cx-t tbody tr:not(.cx-g){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;border-bottom:1px solid var(--line)}
  .compare .cx-t tbody tr:not(.cx-g) th{grid-column:1/-1;padding:11px 0 5px;border:0;font-weight:400;font-size:14px;color:var(--ink0)}
  .compare .cx-t td{display:block;padding:0 0 11px;border:0;font-size:13px;line-height:1.35}
  .compare .cx-t td:nth-child(2){background:none;box-shadow:none}
  .compare .cx-t td::before{content:attr(data-l);display:block;margin-bottom:1px;font:400 11px/1.3 var(--f-t);color:var(--ink3)}
  .compare .cx-g button{min-height:44px;padding:5px 0;gap:10px;font-size:19px;font-weight:300;letter-spacing:-.02em}
  .compare .cx-g small{width:1.9em;font-size:11px}
  .compare .cx-dots{max-width:64px;gap:3px}
  .compare .cx-dots i{width:5px;height:5px}
}
@media (max-width:759px){
  .compare{padding-top:48px}
  .compare h2{font-size:min(8.5vw,36px)}
  .compare .cx-line{margin-top:8px}
  .compare .cx-filter{display:flex;flex-wrap:nowrap;margin-top:14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .compare .cx-filter::-webkit-scrollbar{display:none}
  .compare .cx-filter button{flex:none}
  .compare .cx-wrap{margin-top:8px}
}
/* ═════════ 11 · SIX SCHEMES AS THEATRE: each tile wears its own ground and ramp; a press re-skins the page ═════════ */
.sc-grid{display:grid;gap:36px;align-items:start}
@media (min-width:1000px){.sc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}}
.sc-hint{margin-top:14px;font-size:15px;color:var(--ink2)}
.sclist{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px;isolation:isolate}
.sclist .knob{display:none}
.sclist button{--tile:#fff;--tile-ink:var(--ink0);display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start;text-align:left;padding:14px 14px 13px;border-radius:20px;min-height:112px;
  background:var(--tile);color:var(--tile-ink);box-shadow:inset 0 0 0 1px rgba(14,14,16,.1);transform-origin:50% 50%;transition:box-shadow .25s}
.sclist .sw6{display:flex;height:34px;border-radius:10px;overflow:hidden;background:rgba(14,14,16,.06);margin-bottom:8px}
.sclist .sw6 i{flex:1}
.sclist b{font-weight:400;font-size:16px;color:var(--tile-ink)}
.sclist button>span:last-child{font-size:13px;line-height:1.35;color:color-mix(in srgb,var(--tile-ink) 72%,var(--tile))}
.sclist button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--tile-ink),0 22px 44px -28px rgba(14,14,16,.5)}
.sclist button:hover{box-shadow:inset 0 0 0 1px rgba(14,14,16,.32)}
.sclist button[aria-pressed="true"]:hover{box-shadow:inset 0 0 0 2px var(--tile-ink),0 22px 44px -28px rgba(14,14,16,.5)}
@media (min-width:1320px){.sclist{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.sclist button{padding:12px 12px 11px;min-height:0}.sclist .sw6{height:28px}}
/* ═════════ SIX SCHEMES, FOUR LOOKS: the sample dashboard carries the portal's own Display button and its one panel ═════════
   The four looks are the portal's (Light, Dark, Glass, Glass dark). Glass is a material, not a relabel: a coloured
   field sits behind frosted panels (translucent gradient fill, live blur with saturation, a bright edge, an inner
   highlight), the same recipe the portal uses. .scapp is the wrapper that sticks; .sc-clip is the card and clips the
   swipe; the panel sits outside the clip so it is never cut off. */
.scapp{position:sticky;top:calc(var(--hd) + 16px)}
.sc-clip{position:relative;border-radius:var(--ds-r-panel);overflow:hidden;box-shadow:var(--ds-shadow-card);touch-action:pan-y;isolation:isolate}
.sc-screen{--sbg:var(--ds-s-bg);--sink:var(--ds-s-ink);--card:rgba(255,255,255,.7);--pill:#fff;--hair:rgba(14,14,16,.09);--track:rgba(14,14,16,.08);--edge:transparent;--pshadow:none;
  --pillsh:inset 0 1px 0 rgba(255,255,255,.7),0 14px 30px -20px rgba(14,14,16,.45);
  --k1:var(--ds-r1);--k2:var(--ds-r2);--k3:var(--ds-r3);--k4:var(--ds-r4);--k5:var(--ds-r5);--k6:var(--ds-r6);
  position:relative;isolation:isolate;border-radius:inherit;background:var(--sbg);color:var(--sink);padding:clamp(18px,2.2vw,28px);box-shadow:inset 0 0 0 1px var(--hair)}
/* Dark: the night ground, light ink, and the scheme's hues lifted so they read on it */
.sc-screen:is([data-look="dark"],[data-look="glass-dark"]){--sbg:#0C0C0F;--sink:#F5F5F7;--card:rgba(255,255,255,.065);--pill:#1B1B20;--hair:rgba(255,255,255,.12);--track:rgba(255,255,255,.14);
  --pillsh:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px -20px rgba(0,0,0,.8);
  --k1:color-mix(in oklch,var(--ds-r1) 80%,#fff);--k2:color-mix(in oklch,var(--ds-r2) 80%,#fff);--k3:color-mix(in oklch,var(--ds-r3) 80%,#fff);--k4:color-mix(in oklch,var(--ds-r4) 80%,#fff);--k5:color-mix(in oklch,var(--ds-r5) 80%,#fff);--k6:color-mix(in oklch,var(--ds-r6) 80%,#fff)}
/* Glass: frosted panels over a coloured field */
.sc-screen:is([data-look="glass"],[data-look="glass-dark"]){--card:linear-gradient(145deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.22) 100%);--pill:var(--card);--edge:rgba(255,255,255,.8);
  --pshadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),0 24px 60px -28px rgba(20,20,30,.3);--pillsh:var(--pshadow)}
.sc-screen[data-look="glass-dark"]{--card:linear-gradient(145deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.07) 48%,rgba(255,255,255,.035) 100%);--edge:rgba(255,255,255,.24);
  --pshadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),0 24px 60px -28px rgba(0,0,0,.7)}
.sc-field{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;border-radius:inherit;
  background:
    radial-gradient(54% 36% at 14% 36%,color-mix(in srgb,var(--k1) 62%,transparent),transparent 72%),
    radial-gradient(52% 38% at 88% 30%,color-mix(in srgb,var(--k6) 58%,transparent),transparent 72%),
    radial-gradient(58% 34% at 70% 76%,color-mix(in srgb,var(--k3) 54%,transparent),transparent 72%),
    radial-gradient(48% 32% at 12% 86%,color-mix(in srgb,var(--k5) 52%,transparent),transparent 72%)}
.sc-screen[data-look="dark"] .sc-field{opacity:.22}
.sc-screen[data-look="glass"] .sc-field{opacity:.78}
.sc-screen[data-look="glass-dark"] .sc-field{opacity:.86}
.sc-screen :is(.gauges figure,.bars,.scrow){background:var(--card);border:1px solid var(--edge);box-shadow:var(--pshadow)}
.sc-screen:is([data-look="glass"],[data-look="glass-dark"]) :is(.gauges figure,.bars,.scrow,.sc-display){-webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sc-screen[data-look="glass"]{--card:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.72))}
  .sc-screen[data-look="glass-dark"]{--card:linear-gradient(145deg,rgba(40,40,48,.86),rgba(30,30,36,.8))}
}
.sc-screen header{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.sc-screen .dom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;opacity:.72}
.sc-screen .ds-sample{flex:none;color:inherit;border-color:color-mix(in srgb,currentColor 26%,transparent);opacity:.82}
.mini{position:relative;width:28px;height:28px;flex:none}
.mini canvas,.mini img{position:absolute;inset:-6px;width:40px;height:40px}
.mini img{display:none}
.ds-still .mini img,.no-gl .mini img,.is-ghost .mini img{display:block}
.ds-still .mini canvas,.no-gl .mini canvas,.is-ghost .mini canvas{display:none}
.crumb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font-size:13.5px;margin-top:14px}
.crumb b{font-weight:500}
.sc-screen .h5{margin-top:18px;font-weight:400;font-size:12.5px;color:inherit;opacity:.7}
.gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.gauges figure{padding:10px;border-radius:16px}
.gauges .t{stroke:var(--track)}
.gauges figcaption{text-align:center;font-size:13px;margin-top:4px}
.gauges b{font:200 22px/1 var(--f-d)}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:10px;padding:12px;border-radius:16px}
.bars i{flex:1;height:calc(var(--h) * 100%);border-radius:6px 6px 3px 3px;background:var(--k1);transform-origin:50% 100%}
.bars i:nth-child(2){background:var(--k2)}.bars i:nth-child(3){background:var(--k3)}.bars i:nth-child(4){background:var(--k4)}.bars i:nth-child(5){background:var(--k5)}.bars i:nth-child(6){background:var(--k6)}
.scrow{display:flex;justify-content:space-between;margin-top:12px;padding:12px 14px;border-radius:14px;font-size:14px}
.scrow em{font-style:normal;color:var(--sink);display:inline-flex;align-items:center;gap:7px}
.scrow em::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k1)}

/* the Display button: one pill, as on the portal's dashboard */
.sc-display{position:relative;margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px 0 12px;border-radius:999px;border:1px solid var(--edge);
  background:var(--pill);color:var(--sink);font-size:14px;font-weight:300;line-height:1;box-shadow:var(--pillsh)}
.sc-display::before{content:"";position:absolute;inset:-4px -2px}
.sc-display svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;flex:none}
.sc-display svg circle{fill:var(--sbg)}
.sc-display[aria-expanded="true"]{background:var(--sink);color:var(--sbg);border-color:transparent}
.sc-display[aria-expanded="true"] svg circle{fill:var(--sink)}
.sc-display:focus-visible,.sc-panel button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.sc-display.is-hint::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:1.5px solid var(--k1);opacity:0;pointer-events:none;animation:scHint 2.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes scHint{0%{opacity:.75;transform:scale(.94)}70%,100%{opacity:0;transform:scale(1.22)}}

/* the one panel: Language, Colors, Look. It is a menu, so it is the solid ground of the look it is in */
.sc-panel{--p-bg:#F5F5F7;--p-ink:#0E0E10;--p-ink2:#4C4C55;--p-ink3:#666670;--p-hair:rgba(14,14,16,.1);--p-chip:rgba(14,14,16,.065);
  position:absolute;z-index:6;right:clamp(10px,1.4vw,18px);top:calc(clamp(18px,2.2vw,28px) + 50px);width:min(304px,calc(100% - 20px));padding:4px 14px 14px;border-radius:22px;
  background:var(--p-bg);color:var(--p-ink);border:1px solid var(--p-hair);box-shadow:0 30px 70px -30px rgba(14,14,16,.55),0 6px 18px -12px rgba(14,14,16,.3);transform-origin:100% 0}
.sc-panel[hidden]{display:none}
.scapp:is([data-look="dark"],[data-look="glass-dark"]) .sc-panel{--p-bg:#16161B;--p-ink:#F5F5F7;--p-ink2:#C2C2CB;--p-ink3:#9A9AA4;--p-hair:rgba(255,255,255,.13);--p-chip:rgba(255,255,255,.1);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 6px 18px -12px rgba(0,0,0,.6)}
.scapp[data-look="glass"] .sc-panel{background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.22)),#F5F5F7;border-color:rgba(255,255,255,.8)}
.scapp[data-look="glass-dark"] .sc-panel{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035)),#16161B;border-color:rgba(255,255,255,.24)}
.sc-panel section{padding:12px 0 13px}
.sc-panel section + section{border-top:1px solid var(--p-hair)}
.sc-panel section:last-child{padding-bottom:0}
.sc-panel h3{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 9px;font-family:inherit;font-weight:400;font-size:11px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--p-ink3)}
.sc-panel h3 em{font-style:normal;letter-spacing:0;text-transform:none;font-size:13px;color:var(--p-ink2)}
.sc-lang,.sc-looks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sc-panel :is(.sc-lang,.sc-looks) button{position:relative;display:flex;align-items:center;gap:7px;min-height:40px;min-width:0;padding:0 10px;border-radius:13px;background:var(--p-chip);color:var(--p-ink2);font-size:13.5px;font-weight:300;line-height:1;white-space:nowrap;text-align:left}
.sc-lang button{justify-content:center}
.sc-panel :is(.sc-lang,.sc-looks) button[aria-pressed="true"]{background:var(--p-ink);color:var(--p-bg)}
.sc-looks svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sc-swatches{display:flex;align-items:center;justify-content:space-between;gap:2px}
.sc-swatches button{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:transparent}
.sc-swatches button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--p-ink)}
.sc-swatches .sw{display:block;width:24px;height:24px;border-radius:50%}
.sc-swatches .s-spectra{background:conic-gradient(from 218deg in oklch,#FF3D9A,#F5202C,#FF7A00,#FFC81F,#2FBFA5,#2E9BE0,#FF3D9A)}
.sc-swatches .s-vellum{background:conic-gradient(from 218deg in oklch,#E9A63B,#DCC97D,#EFE6CF,#9FB0A3,#5E7D99,#E9A63B)}
.sc-swatches .s-meridian{background:conic-gradient(from 218deg in oklch,#FF7150,#A98CF6,#5EE3DC,#FFF1A8,#2457FF,#FF7150)}
.sc-swatches .s-riptide{background:conic-gradient(from 218deg in oklch,#4FE3D0,#2AA79B,#B49BE8,#CFF3EC,#8B6FE8,#4FE3D0)}
.sc-swatches .s-graphite{background:conic-gradient(from 218deg in oklch,#FFFFFF,#D4D4D8,#71717A,#18181B,#71717A,#D4D4D8,#FFFFFF)}
.sc-swatches .s-monogram{background:conic-gradient(from 218deg in oklch,#F9A8D4,#EC4899,#BE185D,#831843,#BE185D,#EC4899,#F9A8D4)}
/* the tour presses an option: a ring leaves the button so the eye sees which one */
.sc-panel button.is-tap::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:1.5px solid var(--p-ink);opacity:0;pointer-events:none;animation:scTap .55s ease-out}
@keyframes scTap{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.16)}}

/* the swipe: the old look rides on top as a still copy and is wiped away behind a bright seam */
.sc-screen.is-ghost{position:absolute;inset:0;z-index:3;pointer-events:none}
.sc-seam{position:absolute;top:0;bottom:0;left:-1px;width:2px;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,#fff 16%,#fff 84%,transparent);box-shadow:0 0 26px 7px rgba(255,255,255,.5)}

/* which look is on, under the screen */
.sc-now{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;font-size:14px;color:var(--ink2)}
.sc-now b{font-weight:500;color:var(--ink0)}
.sc-dots{display:inline-flex;align-items:center;gap:6px}
.sc-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink0);opacity:.24;transition:opacity .3s,transform .3s}
.sc-dots i.is-on{opacity:1;transform:scale(1.35)}
.sc-how{margin-left:auto}
@media (max-width:999px){.scapp{position:relative;top:0}.bars{height:84px}.sc-screen .h5{margin-top:12px}}
@media (max-width:420px){.sc-display{padding:0 12px 0 10px}.sc-how{margin-left:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.sc-display.is-hint::after,.sc-panel button.is-tap::after{animation:none}}
/* ═════════ THE WHOLE FIRM · shared by portal, the reel (feat, mobile, desk, partners), funding and training ═════════
   Sean, 2026-11-10: "way too much copy". Each section shows its headline, ONE supporting line and its demo. Every
   other fact sits in ONE closed disclosure labelled "Details" (a real <details>, so the fact stays on the page). */
:is(.portal,.fr,.funding,.training) .firm-line{font-size:clamp(16px,1.25vw,18px);line-height:1.45;color:var(--ink);max-width:44ch;text-wrap:pretty}
:is(.portal,.fr,.funding,.training) .firm-dt{font-size:14px;line-height:1.5;color:var(--ink2)}
:is(.portal,.fr,.funding,.training) .firm-dt summary{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding-right:10px;cursor:pointer;list-style:none;font-size:14px;line-height:1;color:var(--ink0);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
:is(.portal,.fr,.funding,.training) .firm-dt summary::-webkit-details-marker{display:none}
:is(.portal,.fr,.funding,.training) .firm-dt summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);font:300 15px/1 var(--f-t);color:var(--ink0)}
:is(.portal,.fr,.funding,.training) .firm-dt summary:hover::before{background:var(--ink0);color:#fff;box-shadow:none}
:is(.portal,.fr,.funding,.training) .firm-dt[open] summary::before{transform:rotate(45deg)}
:is(.portal,.fr,.funding,.training) .firm-dt summary:focus-visible{outline-offset:2px;border-radius:999px}
:is(.portal,.fr,.funding,.training) .firm-dt>:not(summary){max-width:62ch}
:is(.portal,.fr,.funding,.training) .firm-dt p + p,:is(.portal,.fr,.funding,.training) .firm-dt p + dl,:is(.portal,.fr,.funding,.training) .firm-dt dl div + div{margin-top:8px}
:is(.portal,.fr,.funding,.training) .firm-dt dt{color:var(--ink0)}
:is(.portal,.fr,.funding,.training) .firm-dt a{color:var(--ink0);text-underline-offset:3px}
.ds-motion :is(.portal,.fr,.funding,.training) .firm-dt summary::before{transition:transform .2s}
/* without JavaScript a switch has no knob: the pressed side carries its own ground so its label stays readable */
html:not(.ds-motion):not(.ds-still) :is(.portal,.fr) .ds-seg button[aria-pressed="true"]{background:var(--ink0)}

/* ═════════ THE CLIENT'S SIDE · one portal window in the firm's scheme, and the same portal in Español ═════════ */
.portal{--po-paper:color-mix(in srgb,var(--bg) 44%,#fff)}
.portal .po-head{display:grid;gap:12px}
.portal .po-copy .firm-dt{margin-top:2px}
.portal .po-stage{display:grid;gap:14px;margin-top:clamp(18px,2.4vw,34px)}
.portal .po-flip{min-width:0;perspective:1800px}
.portal .po-flip-in{position:relative;height:100%;transform-style:preserve-3d}
.portal .po-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--ds-r-panel);background:var(--po-paper);box-shadow:inset 0 0 0 1px var(--line),var(--ds-shadow-lift)}
.portal .po-front{display:none}
.portal.po-flips .po-front{display:block;position:absolute;inset:0;transform:rotateY(180deg);padding:clamp(16px,2vw,26px)}
.portal .po-ff{margin-top:18px;font:200 clamp(30px,3vw,44px)/1.05 var(--f-d);letter-spacing:-.03em;color:var(--ink0)}
.portal .po-ffrows{display:grid;gap:8px;margin-top:22px}
.portal .po-ffrows span{padding:12px 14px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--ink)}
.portal .po-win{display:flex;flex-direction:column;height:100%;padding:clamp(16px,2vw,26px)}
.portal .po-bar{display:flex;align-items:center;gap:8px 14px;padding-bottom:12px;min-width:0}
.portal .po-bar .dom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal .po-brand{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1;color:var(--ink0)}
.portal .po-brand b{font-weight:400}
.portal .po-skin{margin-left:auto;flex:none;font-size:12px;line-height:1;color:var(--ink2);white-space:nowrap}
.portal .po-skin b{font-weight:400;color:var(--ink0)}
.portal .po-front .ds-sample{margin-left:auto}
/* the brand stripe: six flat steps of the scheme's ramp */
.portal .po-stripe{display:flex;flex:none;height:3px;border-radius:2px;overflow:hidden}
.portal .po-stripe i{flex:1;background:var(--ds-r1)}
.portal .po-stripe i:nth-child(2){background:var(--ds-r2)}.portal .po-stripe i:nth-child(3){background:var(--ds-r3)}.portal .po-stripe i:nth-child(4){background:var(--ds-r4)}.portal .po-stripe i:nth-child(5){background:var(--ds-r5)}.portal .po-stripe i:nth-child(6){background:var(--ds-r6)}
.portal .po-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 20px;padding-top:clamp(14px,1.7vw,24px)}
.portal .po-hi{font:200 clamp(26px,2.7vw,40px)/1.05 var(--f-d);letter-spacing:-.03em;color:var(--ink0)}
.portal .po-sub{margin-top:6px;font-size:14px;line-height:1.3;color:var(--ink2)}
.portal .po-fig{font:200 clamp(54px,6vw,92px)/.78 var(--f-d);letter-spacing:-.05em;color:var(--ink0);font-variant-numeric:tabular-nums;white-space:nowrap}
.portal .po-fig small{margin-left:8px;font:300 14px/1 var(--f-d);letter-spacing:0;color:var(--ink3)}
.portal .po-day{grid-column:1/-1;position:relative;height:14px;overflow:hidden}
.portal .po-day::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:1px;background:var(--line2)}
.portal .po-day-run{position:absolute;left:0;top:0;width:37.78%;height:14px}
.portal .po-day-run i{position:absolute;left:0;right:0;top:5px;height:4px;border-radius:2px;background:var(--ds-r1)}
.portal .po-day-run b{position:absolute;right:-7px;top:0;width:14px;height:14px;border-radius:50%;background:var(--po-paper);box-shadow:inset 0 0 0 3.5px var(--ds-r1)}
.portal .po-kpi{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px 28px;align-items:end;margin-top:clamp(12px,1.4vw,18px);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.portal .po-kpi small{display:block;font-size:12px;line-height:1.3;color:var(--ink3)}
.portal .po-kpi b{display:block;font:200 clamp(34px,3.2vw,46px)/1.1 var(--f-d);letter-spacing:-.03em;color:var(--ink0);font-variant-numeric:tabular-nums}
.portal .po-kpi p{font-size:14px;line-height:1.4;color:var(--ink2);max-width:46ch}
.portal .po-cols{display:grid;gap:14px 24px;margin-top:14px}
.portal .po-h{margin-bottom:2px;font-size:12.5px;line-height:1.3;color:var(--ink2)}
.portal .po-row,.portal .po-moves li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.35;color:var(--ink)}
.portal .po-row small{display:block;font-size:12px;color:var(--ink3)}
.portal .po-pane>:last-child{border-bottom:0}
.portal .po-moves{counter-reset:mv}
.portal .po-moves li{counter-increment:mv;display:flex;gap:10px}
.portal .po-moves li::before{content:counter(mv);font:300 13px/1.4 var(--f-d);color:var(--ink3)}
.portal .po-es{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(14px,1.8vw,22px);border-radius:var(--ds-r-panel);background:var(--po-paper);box-shadow:inset 0 0 0 1px var(--line),var(--ds-shadow-lift)}
.portal .po-es-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.portal .po-es-view{flex:1 1 auto;display:flex;flex-direction:column;padding:14px 16px 10px;border-radius:20px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.4;color:var(--ink)}
.portal .po-es-nav{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.portal .po-es-t{margin-top:12px;font:300 clamp(19px,1.6vw,22px)/1.2 var(--f-d);letter-spacing:-.02em;color:var(--ink0)}
.portal .po-es-who{margin-top:2px;font-size:13px;color:var(--ink2)}
.portal .po-es-m{margin-top:10px;min-height:2.8em}
.portal .po-es-h{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--ink2)}
.portal .po-es-r{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.portal .po-es-r:last-child{border-bottom:0}
.portal .po-es-r em{font-style:normal;color:var(--ink2)}
.portal .po-dots{display:none}
@media (min-width:700px){.portal .po-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){
  .portal .po-es-view{font-size:15px;padding:16px 18px 12px}
  .portal .po-es-t{margin-top:16px;font-size:clamp(21px,1.9vw,27px)}
  .portal .po-es-m{margin-top:14px}
  .portal .po-es-r{padding:10px 0;font-size:14.5px}
  .portal .po-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:56px;align-items:end}
  .portal .po-stage{grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr);gap:22px;align-items:stretch}
}
@media (max-width:999px){
  /* two cards in a native scroll-snap reel: the window, then the same portal in Español */
  .portal .po-stage{display:flex;gap:12px;margin-inline:calc(var(--m) * -1);padding-inline:var(--m);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .portal .po-stage::-webkit-scrollbar{display:none}
  .portal .po-flip{flex:0 0 min(calc(100% - 36px),600px);scroll-snap-align:start}
  .portal .po-es{flex:0 0 min(calc(100% - 36px),380px);scroll-snap-align:start}
  .portal .po-face,.portal .po-es{box-shadow:inset 0 0 0 1px var(--line);border-radius:26px}
  .portal .po-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .portal .po-dots i{width:6px;height:6px;border-radius:3px;background:var(--line2)}
  .portal .po-dots i.is-on{width:18px;background:var(--ink0)}
  .portal .cta-row{margin-top:18px}
}
@media (max-width:699px){
  .portal .po-skin,.portal .po-brand b,.portal .po-fig{display:none}
  .portal .po-hero{grid-template-columns:minmax(0,1fr)}
  .portal .po-hi{font-size:25px}
  .portal .po-sub{font-size:13.5px}
  .portal .po-kpi{grid-template-columns:auto minmax(0,1fr);gap:8px 22px;padding:12px 0}
  .portal .po-kpi p{grid-column:1/-1;font-size:13.5px}
  /* with JavaScript the three lists share one slot: three chips, one list at a time */
  .portal .po-cols.po-tabbed{grid-template-columns:minmax(0,1.3fr) minmax(0,1.22fr) minmax(0,.86fr);gap:0 5px;margin-top:12px}
  .portal .po-tabbed .po-box{display:contents}
  .portal .po-tabbed .po-h{grid-row:1;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:12px;color:var(--ink0);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .portal .po-tabbed .is-on .po-h{background:var(--ink0);color:#fff;box-shadow:none}
  .portal .po-tabbed .po-pane{grid-row:2;grid-column:1/-1;display:none;min-height:176px;padding-top:6px}
  .portal .po-tabbed .is-on .po-pane{display:block}
}
/* ═════════ THE WHOLE FIRM · the reel shell (.fr wraps feat, mobile, desk, partners) ═════════
   Wide screens (1080px and up): one panel open at full size, three rails that still show their numeral and their
   headline; the switch is a real tab list. Narrower: a native scroll-snap reel with a peek of the next card; the tab
   row shows the position. Without JavaScript every panel is simply open (stacked on wide screens, a reel on phones).
   Colour comes only from tokens, so the six schemes re-skin it. */
.fr{--fr-rail:clamp(124px,9.8vw,142px);--fr-h:clamp(540px,43vw,640px);--fr-paper:color-mix(in srgb,var(--bg) 44%,#fff);padding-top:var(--ds-section)}
.fr .fr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-bottom:16px}
.fr .fr-kick{font:300 clamp(20px,1.9vw,27px)/1.1 var(--f-d);letter-spacing:-.02em;color:var(--ink0)}
.fr .fr-tabs{position:relative;display:none;padding:4px;border-radius:999px;background:var(--bg2);isolation:isolate}
.fr.fr-js .fr-tabs{display:inline-flex}
.fr .fr-tabs .knob{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--ink0);z-index:-1}
.fr .fr-tab{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font:400 14px/1 var(--f-t);color:var(--ink0);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.fr .fr-tab i{font:300 12px/1 var(--f-d);font-style:normal;color:var(--ink2);font-variant-numeric:tabular-nums}
.fr .fr-tab.is-on{color:#fff}
.fr .fr-tab.is-on i{color:rgba(255,255,255,.74)}
.fr .fr-tab:focus-visible{outline-offset:2px;border-radius:999px}
/* while the reel tours by itself, a hairline in the open tab shows how long the panel holds */
.fr .fr-tab::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:1px;background:rgba(255,255,255,.72);transform:scaleX(var(--tour,0));transform-origin:0 50%}
.fr .fr-s{position:relative;min-width:0}
.fr .fr-n{font:200 clamp(56px,5.4vw,80px)/.8 var(--f-d);letter-spacing:-.055em;color:var(--ink0);font-variant-numeric:tabular-nums;white-space:nowrap}
.fr .fr-n small{margin-left:10px;font:300 13px/1 var(--f-d);letter-spacing:0;color:var(--ink3)}
.fr .fr-s h2{font-size:clamp(30px,2.9vw,42px);line-height:1.03;max-width:13ch}
.fr .firm-dt{margin-top:4px}
.fr .dom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fr .cta-row{margin-top:10px}

@media (min-width:1080px){
  .fr .fr-track{border-top:1px solid var(--line2)}
  .fr .fr-s{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(20px,2.4vw,36px);row-gap:14px;padding:26px 0 30px}
  .fr .fr-s + .fr-s{border-top:1px solid var(--line)}
  .fr .fr-head{grid-column:1;grid-row:1}
  .fr .fr-head h2{margin-top:16px}
  .fr .fr-n small{display:none}
  .fr .fr-body{grid-column:1/-1;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;pointer-events:none}
  .fr .fr-body>*{pointer-events:auto}
  .fr .fr-copy{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  /* the Details ring sits on the same line as the rails’ arrows; open, its text grows upward into the free column */
  .fr .fr-copy .firm-dt{margin-top:auto}
  .fr .fr-copy .firm-dt[open]{display:flex;flex-direction:column-reverse;gap:6px}
  .fr .fr-copy .firm-dt summary::before{width:40px;height:40px;font-size:17px}
  .fr .fr-copy .firm-dt summary{gap:12px}
  .fr .fr-demo{grid-column:2;grid-row:1/-1;align-self:center}
  /* with JavaScript: one row, one panel open, three rails */
  .fr.fr-js .fr-track{display:flex;min-height:var(--fr-h);border-bottom:1px solid var(--line2)}
  .fr.fr-js .fr-s{flex:0 0 var(--fr-rail);padding:24px 0 22px 20px;border-top:0;border-left:1px solid var(--line)}
  .fr.fr-js .fr-s:first-child{border-left:0;padding-left:0}
  .fr.fr-js .fr-s.is-on{flex:1 1 0;padding-right:clamp(16px,1.8vw,26px)}
  .fr.fr-js .fr-s:last-child.is-on{padding-right:0}
  .fr.fr-js .fr-s:not(.is-on){display:block;cursor:pointer;overflow:hidden}
  .fr.fr-js .fr-s:not(.is-on) .fr-body{display:none}
  .fr.fr-js .fr-s:not(.is-on) .fr-n{color:var(--ink3)}
  .fr.fr-js .fr-s:not(.is-on):hover .fr-n{color:var(--ink0)}
  .fr.fr-js .fr-s:not(.is-on) h2{font-size:clamp(13.5px,1.14vw,16.5px);line-height:1.18;letter-spacing:-.015em;max-width:none;padding-right:4px;text-wrap:pretty}
  /* the rail's way in: a ring with an arrow that fills on hover */
  .fr.fr-js .fr-s:not(.is-on)::after{content:"→";position:absolute;left:20px;bottom:22px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);font:300 17px/1 var(--f-t);color:var(--ink0)}
  .fr.fr-js .fr-s:first-child:not(.is-on)::after{left:0}
  .fr.fr-js .fr-s:not(.is-on):hover::after{background:var(--ink0);color:#fff;box-shadow:none}
  .ds-motion .fr.fr-js .fr-s:not(.is-on)::after{transition:transform .2s}
  .ds-motion .fr.fr-js .fr-s:not(.is-on):hover::after{transform:translateX(4px)}
}

@media (max-width:1079px){
  .fr .fr-top{padding-bottom:12px}
  .fr .fr-tabs{width:100%}
  .fr .fr-tabs .knob{left:4px;width:calc((100% - 8px) / 4)}
  .fr .fr-tab{flex:1 1 0;justify-content:center;gap:6px;padding:0 4px;font-size:13px}
  .fr .fr-tab::after{display:none}
  .fr .fr-track{display:flex;gap:12px;max-width:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .fr .fr-track::-webkit-scrollbar{display:none}
  .fr .fr-s{flex:0 0 min(calc(100% - 36px),430px);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px;border-radius:26px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line)}
  .fr .fr-n{font-size:44px}
  .fr .fr-s h2{font-size:clamp(25px,7.2vw,30px);max-width:none;margin-top:12px}
  .fr .firm-line{font-size:clamp(14.5px,4vw,15.5px)}
  .fr .fr-body{display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
  .fr .fr-demo{margin-top:auto}
  /* the one Details of a card sits in its top corner; open, it covers the card like the back of it */
  .fr .fr-s .firm-dt{position:absolute;top:8px;right:10px;z-index:3;margin:0}
  .fr .fr-s .firm-dt[open]{inset:0;padding:62px 18px 20px;border-radius:26px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line2);overflow:auto}
  .fr .fr-s .firm-dt[open] summary{position:absolute;top:8px;right:10px}
}
@media (max-width:359px){.fr .fr-tab i{display:none}}

/* ═════════ 01 · THE FILE, ANNOTATED ═════════ */
.feat .fe-board{position:relative}
.feat .fe-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;display:none}
.feat .fe-leaders path{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:var(--len,600);stroke-dashoffset:calc(var(--len,600) * (1 - var(--p,1)))}
.feat .fe-leaders path.is-on{stroke:var(--ink0);stroke-width:1.4}
.feat .fe-leaders circle{fill:var(--line2)}
.feat .fe-leaders circle.is-on{fill:var(--ink0)}
.fr:not(.fr-js) .feat .fe-notes{display:none}
.feat .fe-note{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;line-height:1.2;color:var(--ink0);text-align:left;-webkit-tap-highlight-color:transparent}
.feat .fe-note:hover{box-shadow:inset 0 0 0 1px var(--ink0)}
.feat .fe-note.is-on{background:var(--ink0);color:#fff;box-shadow:none}
.feat .fe-note:focus-visible{outline-offset:2px;border-radius:999px}
.feat .fe-panel{display:grid;gap:8px;padding:12px;border-radius:24px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line),var(--ds-shadow-lift);font-size:13px;line-height:1.4;color:var(--ink)}
.feat .fe-part{padding:10px 12px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.fr.fr-js .feat .fe-part.is-on{box-shadow:inset 0 0 0 1.5px var(--ink0)}
.feat .fe-h{margin-bottom:6px;font-size:11.5px;letter-spacing:.02em;color:var(--ink2)}
.feat .fe-bub{width:fit-content;max-width:94%;padding:7px 10px;border-radius:12px 12px 12px 4px;background:var(--bg2);font-size:12.5px;line-height:1.35}
.feat .fe-bub + .fe-bub{margin-top:5px}
.feat .fe-bub.fe-me{margin-left:auto;border-radius:12px 12px 4px 12px;background:var(--ink0);color:#fff}
.feat .fe-part .ds-seg button{min-height:36px;height:36px;padding:0 12px;font-size:13px}
.feat .fe-lang{margin-top:8px;min-height:2.8em;font-size:12.5px}
.feat .fe-chk{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:3px 0;font-size:12.5px}
.feat .fe-chk span:not(.fe-need){flex:1 1 7.5em;min-width:0}
.feat .fe-tick{flex:none;width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line2);background:var(--fr-paper)}
.feat .fe-tick.is-on{background:var(--ink0);box-shadow:none}
.feat .fe-need{margin-left:auto;color:var(--ink2)}
.feat .fe-kv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 10px;padding:3px 0;font-size:12.5px}
.feat .fe-kv span{white-space:nowrap}
.feat .fe-kv span:last-child{margin-left:auto;color:var(--ink2);text-align:right}
.feat .fe-kv.fe-sc{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between}
.feat .fe-kv.fe-sc span{margin:0;font:300 13.5px/1.2 var(--f-d);color:var(--ink0);font-variant-numeric:tabular-nums}
.feat #feSay{min-height:2.9em}
@media (min-width:1080px){
  .fr .feat{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .fr .feat .fr-head{display:flex;align-items:flex-end;gap:clamp(14px,1.8vw,26px)}
  .fr .feat .fr-head h2{margin:0;max-width:none}
  .fr.fr-js .feat:not(.is-on) .fr-head{display:block}
  .fr.fr-js .feat:not(.is-on) .fr-head h2{margin-top:16px}
  .fr .feat .fr-copy{grid-column:2;grid-row:1;align-self:end;gap:2px}
  .fr .feat .fr-copy .firm-dt{margin-top:0}
  .fr .feat .fr-copy .firm-dt[open]{flex-direction:column}
  .fr .feat .fr-copy .firm-dt summary::before{width:22px;height:22px;font-size:15px}
  .fr .feat .fr-copy .firm-dt summary{gap:9px}
  .fr .feat .fe-board{grid-column:1/-1;grid-row:2;align-self:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,26vw,372px)) minmax(0,1fr);column-gap:clamp(24px,2.2vw,32px);align-items:center}
  .feat .fe-leaders{display:block}
  .feat .fe-notes{display:contents}
  .feat .fe-note{border-radius:22px}
  .feat .fe-note:focus-visible{border-radius:22px}
  .feat .fe-note:nth-child(-n+3){grid-column:1;justify-self:end}
  .feat .fe-note:nth-child(n+4){grid-column:3;justify-self:start}
  .feat .fe-note:nth-child(1),.feat .fe-note:nth-child(4){grid-row:1}
  .feat .fe-note:nth-child(2),.feat .fe-note:nth-child(5){grid-row:2}
  .feat .fe-note:nth-child(3),.feat .fe-note:nth-child(6){grid-row:3}
  .feat .fe-panel{grid-column:2;grid-row:1/4}
}
@media (min-width:1440px){
  /* room for the whole panel: six parts, two columns, the lit one outlined */
  .feat .fe-panel{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .feat .fe-part[data-part="halo"]{grid-column:1;grid-row:1}
  .feat .fe-part[data-part="steps"]{grid-column:1;grid-row:2}
  .feat .fe-part[data-part="score"]{grid-column:1;grid-row:3}
  .feat .fe-part[data-part="lang"]{grid-column:2;grid-row:1}
  .feat .fe-part[data-part="mail"]{grid-column:2;grid-row:2}
  .feat .fe-part[data-part="bill"]{grid-column:2;grid-row:3}
}
@media (max-width:1439px){
  /* less room (phones, and a narrower open panel): one part at a time, at reading size */
  .fr.fr-js .feat .fe-part:not(.is-on){display:none}
  .fr.fr-js .feat .fe-panel{display:block;min-height:232px;padding:0;border-radius:0;background:none;box-shadow:none;font-size:14.5px}
  .fr.fr-js .feat .fe-part,.fr.fr-js .feat .fe-part.is-on{display:flex;flex-direction:column;justify-content:center;min-height:232px;height:100%;padding:16px;border-radius:20px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line2)}
  .fr.fr-js .feat .fe-h{margin-bottom:10px;font-size:13px}
  .fr.fr-js .feat .fe-bub{max-width:100%;padding:10px 13px;font-size:14.5px}
  .fr.fr-js .feat .fe-lang{margin-top:12px;font-size:15.5px}
  .fr.fr-js .feat .fe-chk{padding:8px 0;font-size:15.5px}
  .fr.fr-js .feat .fe-kv{padding:8px 0;font-size:15.5px}
  .fr.fr-js .feat .fe-tick{width:18px;height:18px;border-radius:5px}
  .fr.fr-js .feat .fe-kv.fe-sc{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:0}
  .fr.fr-js .feat .fe-kv.fe-sc span{font-size:34px;line-height:1.12;letter-spacing:-.03em;text-align:left;color:var(--ink0)}
  .fr.fr-js .feat .fe-part[data-part="bill"] .fe-kv{display:grid;gap:4px}
  .fr.fr-js .feat .fe-part[data-part="bill"] .fe-kv span:last-child{font:200 30px/1.1 var(--f-d);letter-spacing:-.03em;color:var(--ink0);text-align:left}
  .fr.fr-js .feat .fe-part .ds-seg button{min-height:44px;height:44px;padding:0 18px;font-size:14.5px}
}
@media (max-width:1079px){
  /* phones: six labels are six chips; one caption and one part show at a time */
  .fr .feat .fe-board{display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
  .feat .fe-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .feat .fe-note{min-height:48px;border-radius:14px;padding:6px 12px;font-size:13.5px}
  .feat .fe-note:focus-visible{border-radius:14px}
  .fr.fr-js .feat .fe-panel{flex:1 1 auto}
  .fr.fr-js .feat .fe-part,.fr.fr-js .feat .fe-part.is-on{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
}
/* ═════════ 02 · THE APP ═════════ */
.mobile .mo-stores{display:flex;flex-wrap:wrap;gap:6px}
.mobile .store{font-size:12.5px;line-height:1;padding:9px 12px;border-radius:999px;background:var(--bg2);color:var(--ink2);white-space:nowrap}
.mobile .mo-stage{position:relative;display:grid;justify-items:center;gap:10px}
.mobile .mo-phone{position:relative;width:min(250px,78%);border-radius:38px;background:var(--ink0);padding:8px;box-shadow:0 44px 80px -48px rgba(14,14,16,.6)}
.mobile .mo-scr{position:relative;border-radius:31px;background:var(--bg);overflow:hidden;padding:24px 12px 12px}
.mobile .mo-top{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink0)}
.mobile .mo-top b{letter-spacing:.16em;font-weight:400}
.mobile .mo-h{font:200 21px/1.1 var(--f-d);letter-spacing:-.02em;color:var(--ink0);margin:14px 0 10px}
.mobile .mo-q{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:40px;padding:8px 10px;border-radius:13px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;line-height:1.2;margin-top:6px;color:var(--ink)}
.mobile .mo-q em{flex:none;font-style:normal;font-size:11px;padding:4px 8px;border-radius:999px;background:var(--bg2);color:var(--ink0)}
.mobile .mo-q.mo-live{background:var(--ink0);color:#fff;box-shadow:none}
.mobile #phCall{font-variant-numeric:tabular-nums}
.mobile .mo-sheet{display:grid;gap:3px;margin-top:10px;padding:12px;border-radius:20px;background:var(--fr-paper);box-shadow:0 -10px 26px -14px rgba(14,14,16,.32),inset 0 0 0 1px var(--line);font-size:12.5px;line-height:1.3}
.mobile .mo-sheet b{font-weight:500;color:var(--ink0)}
.mobile .mo-sheet span{color:var(--ink2)}
.mobile .mo-sheet em{font-style:normal;margin-top:6px;display:flex;justify-content:center;padding:9px;border-radius:999px;background:var(--ink0);color:#fff}
/* the four notices: a 2 by 2 grid at rest (and with motion off) */
.mobile .mo-toasts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.mobile .mo-toast{display:grid;align-content:center;gap:2px;min-height:50px;padding:8px 13px;border-radius:15px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line),var(--ds-shadow-lift);font-size:12.5px;line-height:1.25;color:var(--ink)}
.mobile .mo-toast small{font-size:11.5px;color:var(--ink3)}
.mobile .mo-tick .mo-toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile .mo-toast.mo-win{box-shadow:inset 0 0 0 1px var(--win),var(--ds-shadow-lift)}
.mobile .mo-toast.mo-win small{color:var(--win)}
/* with motion, where there is no room beside the phone, they take turns in one slot over the top of its screen */
.mobile .mo-tick .mo-toasts{position:absolute;left:50%;top:14px;display:block;width:min(232px,76%);height:50px;margin-left:calc(min(232px,76%) / -2);overflow:hidden;border-radius:15px}
.mobile .mo-tick .mo-toast{position:absolute;inset:0;visibility:hidden;box-shadow:inset 0 0 0 1px var(--line2)}
.mobile .mo-tick .mo-toast.mo-win{box-shadow:inset 0 0 0 1px var(--win)}
.mobile .mo-tick .mo-toast.is-on{visibility:visible}
@media (min-width:1080px){
  .mobile .mo-stage{align-self:center;width:100%;padding:6px 0}
  .mobile .mo-phone{width:250px}
}
@media (min-width:1280px){
  .fr .mobile{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr)}
  /* the four notices land in the margins beside the phone, touching its edge and no more */
  .mobile .mo-stage:not(.mo-tick) .mo-toasts{position:absolute;inset:0;display:block;pointer-events:none}
  .mobile .mo-stage:not(.mo-tick) .mo-toast{position:absolute;width:clamp(128px,calc(50% - 108px),172px)}
  .mobile .mo-stage:not(.mo-tick) #pt0{left:0;top:7%}
  .mobile .mo-stage:not(.mo-tick) #pt1{right:0;top:25%}
  .mobile .mo-stage:not(.mo-tick) #pt2{left:0;bottom:30%}
  .mobile .mo-stage:not(.mo-tick) #pt3{right:0;bottom:9%}
}
@media (max-width:1079px){
  /* the card ends on the phone, which rises out of its bottom edge (this panel's trial button is the bar at the foot of the screen) */
  .fr .mobile{overflow:hidden;padding-bottom:0}
  .fr .mobile .mo-stores{flex-wrap:nowrap;gap:4px;margin-top:4px}
  .fr .mobile .cta-row{display:none}
  .mobile .store{font-size:11.5px;padding:8px 7px;letter-spacing:-.005em}
  .mobile .mo-toasts{order:-1}
  .mobile .mo-phone{width:100%;padding-bottom:0;border-radius:36px 36px 0 0;box-shadow:none}
  .mobile .mo-scr{border-radius:29px 29px 0 0;padding-bottom:14px}
  .mobile .mo-h{margin:12px 0 8px;font-size:clamp(16px,4.7vw,19px)}
  .mobile .mo-q{min-height:38px;padding:6px 10px;margin-top:5px;font-size:12.5px}
  .mobile .mo-q em{font-size:11.5px}
  .mobile .mo-sheet{margin-top:8px;padding:10px 12px}
  .mobile .mo-sheet em{margin-top:4px;padding:8px}
}
@media (max-width:379px){.fr .mobile .mo-stores{flex-wrap:wrap}}
/* ═════════ 03 · THE DESK ═════════ */
.desk .de-ts{padding:14px 16px 16px;border-radius:24px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line),var(--ds-shadow-lift);min-width:0}
.desk .de-ts header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.desk .de-ts table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.25}
.desk .de-ts th,.desk .de-ts td{padding:11px 6px;text-align:left;border-bottom:1px solid var(--line);font-weight:300;color:var(--ink)}
.desk .de-ts td{font-variant-numeric:tabular-nums;text-align:right}
.desk .de-ts thead th{font-size:11.5px;color:var(--ink3);font-weight:400;text-align:right}
.desk .de-ts thead th:first-child{text-align:left}
.desk .de-ts tbody th{white-space:nowrap}
.desk .de-ini{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bg2);font-size:10.5px;color:var(--ink0);margin-right:8px;vertical-align:middle}
.desk .de-ts tbody th small{display:block;margin:1px 0 0 34px;font-size:11.5px;color:var(--win)}
.desk .de-clock{display:flex;align-items:center;gap:12px;margin-top:14px;padding:5px 5px 5px 16px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.desk .de-clock span{font-size:13px;color:var(--ink2);white-space:nowrap}
.desk .de-clock b{margin-left:auto;font:200 24px/1 var(--f-d);font-variant-numeric:tabular-nums;color:var(--ink0)}
.desk .de-clock .btn{min-height:44px;min-width:112px;padding:0 16px;font-size:14px}
.desk .de-clock .btn.is-on{background:var(--win)}
@media (min-width:1080px){
  .desk .de-ts{padding:18px 20px 20px}
  .desk .de-ts table{font-size:14.5px}
  .desk .de-ts th,.desk .de-ts td{padding:15px 8px}
  .desk .de-ts thead th{font-size:12px;padding:12px 8px}
  .desk .de-clock{margin-top:18px;padding:7px 7px 7px 20px}
  .desk .de-clock b{font-size:clamp(22px,2.05vw,30px)}
  .desk .de-clock .btn{min-height:50px;min-width:clamp(100px,8.6vw,124px);font-size:15px}
}
@media (max-width:1079px){
  .fr .desk .de-ts{display:flex;flex-direction:column;flex:1 1 auto;padding:12px 12px 14px}
  .desk .de-ts table{flex:1 1 auto;font-size:13px}
  .desk .de-ts th,.desk .de-ts td{padding:10px 3px}
  .desk .de-ts thead th{font-size:11px}
  .desk .de-ini{width:22px;height:22px;margin-right:6px;font-size:9.5px}
  .desk .de-ts tbody th small{margin-left:28px}
  .desk .de-clock{gap:8px;padding-left:13px}
  .desk .de-clock span{font-size:12.5px}
  .desk .de-clock b{font-size:19px}
  .desk .de-clock .btn{min-width:94px;padding:0 12px;font-size:13.5px}
}
@media (max-width:379px){
  /* the smallest phones: the initials (decoration) step aside so all five columns fit */
  .desk .de-ini{display:none}
  .desk .de-ts tbody th small{margin-left:0}
  .desk .de-ts th,.desk .de-ts td{padding-left:2px;padding-right:2px}
  .desk .de-ts thead th{font-size:10.5px}
  .desk .de-clock span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .desk .de-clock b{margin-left:0}
  .desk .de-clock .btn{margin-left:auto}
}
/* ═════════ 04 · PARTNERS ═════════ */
.partners .pa-card{padding:14px 16px 16px;border-radius:24px;background:var(--fr-paper);box-shadow:inset 0 0 0 1px var(--line),var(--ds-shadow-lift);min-width:0}
.partners .pa-card header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.partners .pa-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.partners .pa-kpi small{display:block;font-size:11.5px;line-height:1.3;color:var(--ink3)}
.partners .pa-kpi b{display:block;font:200 clamp(22px,2.1vw,30px)/1.15 var(--f-d);letter-spacing:-.03em;color:var(--ink0);font-variant-numeric:tabular-nums;white-space:nowrap}
.partners .pa-kpi span{display:block;font-size:12px;line-height:1.3;color:var(--ink2)}
.partners .pa-h{margin-top:14px;font-size:12px;line-height:1.3;color:var(--ink2)}
.partners .pa-tier{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px;padding:4px;border-radius:999px;background:var(--bg2);isolation:isolate}
.partners .pa-tier span:not(.knob){text-align:center;font-size:12.5px;line-height:1;padding:10px 0;color:var(--ink2)}
.partners .pa-tier span.is-on{color:#fff}
.partners .pa-tier .knob{position:absolute;left:0;top:4px;bottom:4px;border-radius:999px;background:var(--ink0);z-index:-1;width:calc((100% - 8px) / 4);transform:translateX(calc(200% + 4px))}
.partners .pa-sm{margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--ink2)}
.partners .pa-funnel{display:grid;gap:7px;margin-top:8px}
.partners .pa-funnel div{display:grid;grid-template-columns:94px minmax(0,1fr) 28px;align-items:center;gap:10px;font-size:13px;line-height:1.2;color:var(--ink)}
.partners .pa-funnel i{display:block;height:10px;border-radius:5px;background:var(--ds-r1);width:calc(var(--w) * 100%);transform-origin:0 50%}
.partners .pa-funnel div:nth-child(2) i{background:var(--ds-r3)}
.partners .pa-funnel div:nth-child(3) i{background:var(--ds-r5)}
.partners .pa-funnel b{font-weight:300;font-variant-numeric:tabular-nums;text-align:right}
.partners .pa-link{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding:5px 5px 5px 16px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.partners .pa-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink)}
.partners .pa-link button{flex:none;min-height:44px;min-width:118px;padding:0 16px;border-radius:999px;background:var(--ink0);color:#fff;font-size:13.5px}
@media (max-width:1079px){
  .partners .pa-card{padding:12px 12px 14px}
  .partners .pa-kpi{gap:6px}
  .partners .pa-kpi b{font-size:21px}
  .partners .pa-kpi span{font-size:11.5px}
  .partners .pa-funnel div{grid-template-columns:86px minmax(0,1fr) 24px;gap:8px}
}
/* ═════════ THE WHOLE FIRM · the deck (under 1080px) and the hold (wide screens) ═════════
   Sean, 2026-11-10: "When scrolling on a mobile device, you just keep scrolling, so it's easy to miss that there are
   other buttons ... maybe we stack them, and as you scroll, it stacks on top of each other." Under 1080px the four
   cards are a deck in the page's own scroll: each one sticks under the header and the next slides up over it. No
   tabs, no sideways swipe, nothing pinned by script (native sticky; the step-back is the browser's scroll timeline
   where it has one, a short transition where it does not). */
@media (max-width:1079px){
  .fr .fr-tabs,.fr.fr-js .fr-tabs{display:none}
  .fr .fr-top{padding-bottom:10px}
  .fr .fr-track{display:block;overflow:visible;scroll-snap-type:none;border-top:0;padding-top:2px;--fr-top:min(calc(var(--hd) + 10px),calc(100svh - var(--fr-deck,560px) - 118px))}
  .fr .fr-s{position:sticky;top:calc(var(--fr-top) + var(--k,0)*10px);flex:none;width:auto;max-width:560px;overflow:hidden;min-height:var(--fr-deck,0px);margin:0 auto 16px;transform-origin:50% 0;box-shadow:inset 0 0 0 1px var(--line),0 -14px 34px -26px rgba(14,14,16,.45)}
  .fr .fr-s:nth-child(2){--k:1}.fr .fr-s:nth-child(3){--k:2}.fr .fr-s:nth-child(4){--k:3}
  .fr .fr-s:last-child{margin-bottom:0}
  /* 02 · the whole phone shows (it used to rise out of the card's bottom edge, cut off) */
  .fr .mobile{overflow:hidden;padding-bottom:18px}
  .mobile .mo-phone{width:min(228px,70%);padding:7px;border-radius:36px;box-shadow:0 30px 56px -38px rgba(14,14,16,.6)}
  .mobile .mo-scr{border-radius:29px;padding-bottom:12px}
  .mobile .mo-tick .mo-toasts{width:min(210px,64%);margin-left:calc(min(210px,64%) / -2)}
}
/* a card under the top one steps back a little and greys over; it stays opaque, so nothing shows through the deck */
@media (max-width:1079px){
  .fr .fr-s::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;background:var(--bg);opacity:0;pointer-events:none}
  @supports (animation-timeline:view()){
    .ds-motion .fr .fr-track{timeline-scope:--fr-b,--fr-c,--fr-d}
    .ds-motion .fr .fr-s:nth-child(2){view-timeline:--fr-b block}
    .ds-motion .fr .fr-s:nth-child(3){view-timeline:--fr-c block}
    .ds-motion .fr .fr-s:nth-child(4){view-timeline:--fr-d block}
    .ds-motion .fr .fr-s:nth-child(1),.ds-motion .fr .fr-s:nth-child(1)::after{animation-timeline:--fr-b}
    .ds-motion .fr .fr-s:nth-child(2),.ds-motion .fr .fr-s:nth-child(2)::after{animation-timeline:--fr-c}
    .ds-motion .fr .fr-s:nth-child(3),.ds-motion .fr .fr-s:nth-child(3)::after{animation-timeline:--fr-d}
    .ds-motion .fr .fr-s:not(:last-child){animation-name:fr-under;animation-timing-function:linear;animation-fill-mode:both;animation-range:entry 30% entry 100%}
    .ds-motion .fr .fr-s:not(:last-child)::after{animation-name:fr-fog;animation-timing-function:linear;animation-fill-mode:both;animation-range:entry 30% entry 100%}
  }
  @supports not (animation-timeline:view()){
    .ds-motion .fr .fr-s{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
    .ds-motion .fr .fr-s::after{transition:opacity .5s}
    .ds-motion .fr .fr-s.is-under{transform:translate3d(0,-6px,0) scale(.94)}
    .ds-motion .fr .fr-s.is-under::after{opacity:.6}
  }
}
@keyframes fr-under{to{transform:translate3d(0,-6px,0) scale(.94)}}
@keyframes fr-fog{to{opacity:.6}}
/* wide screens: the reel holds under the header inside a taller box while the scroll opens each panel */
.fr.is-held{position:sticky;top:var(--hd)}
/* ═════════ FUNDING DESK · the lender ring, five figures, the builder's seven stations, the price ═════════ */
.funding .fu-head{display:grid;gap:12px}
.funding .fu-copy .firm-dt{margin-top:2px}
.funding .fu-stage{display:grid;gap:14px;align-items:center;margin-top:clamp(12px,1.8vw,26px)}
.funding .fu-dial{position:relative;width:min(100%,460px);aspect-ratio:1;margin-inline:auto}
.funding .fu-dial canvas,.funding .fu-ring{position:absolute;inset:0;width:100%;height:100%}
/* the ring is WebGL; without it (reduced motion, no WebGL) the same 109 points are flat dots in the scheme's ramp */
.funding .fu-ring{display:none}
.funding .fu-still .fu-ring{display:block}
.funding .fu-still canvas{display:none}
.funding .fu-ring .fu-r1{fill:var(--ds-r1)}.funding .fu-ring .fu-r2{fill:var(--ds-r2)}.funding .fu-ring .fu-r3{fill:var(--ds-r3)}.funding .fu-ring .fu-r4{fill:var(--ds-r4)}.funding .fu-ring .fu-r5{fill:var(--ds-r5)}.funding .fu-ring .fu-r6{fill:var(--ds-r6)}
.funding .fu-arc{position:absolute;inset:21%;width:58%;height:58%}
.funding .fu-arc circle{fill:none;stroke-width:10}
.funding .fu-arc-t{stroke:var(--line)}
.funding .fu-arc-v{stroke:var(--ink0);stroke-linecap:round}
.funding .fu-dial-tx{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.funding .fu-dial-tx b{font:200 clamp(60px,8vw,116px)/1.1 var(--f-d);letter-spacing:-.04em;color:var(--ink0);font-variant-numeric:tabular-nums}
.funding .fu-dial-tx span{margin-top:-2px;font-size:13px;line-height:1.2;color:var(--ink2)}
.funding .fu-figs>div{display:grid;grid-template-columns:clamp(104px,13vw,190px) minmax(0,1fr);align-items:baseline;column-gap:clamp(14px,2vw,28px);padding:clamp(9px,1.1vw,15px) 0;border-top:1px solid var(--line)}
.funding .fu-figs>div:last-child{border-bottom:1px solid var(--line)}
.funding .fu-figs dt{font:200 clamp(34px,4.4vw,64px)/1 var(--f-d);letter-spacing:-.04em;color:var(--ink0);font-variant-numeric:tabular-nums;white-space:nowrap}
.funding .fu-figs dd{font-size:clamp(14.5px,1.2vw,17px);line-height:1.3;color:var(--ink)}
.funding .fu-steps-h{margin-top:clamp(16px,2vw,28px);font-size:12.5px;line-height:1.3;color:var(--ink2)}
.funding .fu-steps{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.funding .fu-steps li{position:relative;z-index:1;padding:9px 12px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;line-height:1;color:var(--ink0);white-space:nowrap}
.funding .fu-price{display:grid;gap:8px 40px;margin-top:clamp(16px,2vw,28px);padding-top:16px;border-top:1px solid var(--line2);font-size:15px;line-height:1.45;color:var(--ink)}
.funding .fu-price b{font-weight:500;color:var(--ink0)}
.funding .fu-legal{font-size:13.5px;color:var(--ink2)}
.funding .fu-more{font-size:15px}
.funding .fu-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink0);text-decoration:underline;text-underline-offset:4px}
.funding .cta-row{margin-top:clamp(10px,1.4vw,18px)}
@media (min-width:1000px){
  .funding .fu-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:56px;align-items:end}
  .funding .fu-stage{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);column-gap:clamp(32px,4vw,64px)}
  .funding .fu-dial{width:min(100%,440px)}
  /* seven stations on one hairline */
  .funding .fu-steps{flex-wrap:nowrap;justify-content:space-between}
  .funding .fu-steps::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line2)}
  .funding .fu-price{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .funding .fu-more{justify-self:end}
}
@media (max-width:999px){
  .funding .fu-stage{margin-top:2px;gap:6px}
  .funding .fu-dial{width:min(70%,300px)}
  /* a small dial: the arc sits wider so the reading and its label fit inside it */
  .funding .fu-arc{inset:13%;width:74%;height:74%}
  .funding .fu-arc circle{stroke-width:8}
  .funding .fu-dial-tx b{font-size:clamp(46px,13vw,76px)}
  .funding .fu-dial-tx span{font-size:11.5px}
  .funding .fu-figs>div{padding:6px 0}
  .funding .fu-figs dt{font-size:30px}
  .funding .fu-price{font-size:14.5px}
}
/* ═════════ LIVE TRAINING · one line of monumental figures, each hanging from a hairline ═════════ */
.training .tn-grid{display:grid;gap:14px}
.training .tn-copy .firm-line{margin-top:10px}
.training .tn-copy .firm-dt{margin-top:2px}
.training .tn-cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,22px)}
.training .tn-cd>div{padding-top:4px;border-top:1px solid var(--line2)}
.training .tn-cd b{display:block;font:200 clamp(50px,9vw,128px)/1.1 var(--f-d);letter-spacing:-.045em;color:var(--ink0);font-variant-numeric:tabular-nums;white-space:nowrap}
.training .tn-cd small{display:block;margin-top:-2px;font-size:12.5px;line-height:1.2;color:var(--ink2)}
.training .tn-next{margin:12px 0 14px;font-size:14px;line-height:1.4;color:var(--ink2)}
@media (min-width:1000px){
  .training .tn-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:56px;align-items:end}
  .training h2{max-width:none}
  .training .tn-count{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px}
  .training .tn-cd{grid-column:1/-1}
  .training .tn-next{margin:14px 0 0;font-size:15px}
  .training .tn-count .btn{margin-top:14px}
}
@media (max-width:999px){
  .training .tn-copy .firm-line{font-size:16px}
}
/* ═════════ FOUNDER · small and quiet, just before the FAQ ═════════
   The portrait (small: the file is 560 x 700), the headline at a quiet size, one line, one link. The rest of
   what the section used to say is in its Details fold. Scoped to .founder. */
.founder{padding-top:clamp(40px,4.6vw,72px)}
.founder .fo-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;grid-template-areas:"pic h" "line line" "link link" "more more";align-items:center}
.founder .fo-pic{grid-area:pic;overflow:hidden;width:60px;aspect-ratio:4/5;border-radius:12px;background:var(--bg2)}
.founder .fo-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.founder h2{grid-area:h;font-size:clamp(24px,2.7vw,40px);line-height:1.06;text-wrap:balance}
.founder .fo-line{grid-area:line;margin-top:12px;font-size:15px;line-height:1.45;color:var(--ink2);max-width:62ch}
.founder .fo-line mark{background:none;color:var(--ink0)}
.founder .fo-link{grid-area:link;margin-top:2px;font-size:14.5px}
.founder .fo-link a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.founder .fo-more{grid-area:more;margin-top:-4px}
@media (min-width:760px){
  .founder .fo-in{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(20px,2.6vw,36px);grid-template-areas:"pic h link" "pic line line" "pic more more";grid-template-rows:auto auto 1fr;align-items:start;padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line2)}
  .founder .dz.fo-in{margin-left:max(var(--gx,clamp(20px,7.36vw,150px)),env(safe-area-inset-left,0px));margin-right:max(var(--gr,clamp(20px,3.4vw,64px)),env(safe-area-inset-right,0px));padding-left:0;padding-right:0}
  .founder .fo-pic{width:clamp(96px,8.4vw,128px);border-radius:16px}
  .founder h2{padding-top:.08em}
  .founder .fo-line{margin-top:8px;font-size:16.5px;max-width:none}
  .founder .fo-link{margin-top:0;align-self:center}
  .founder .fo-more{margin-top:2px}
}
/* ═════════ 19 · FAQ ═════════
   Seven questions, every answer closed until asked for. Phones: one list. Wide screens: two columns of questions
   under the headline, so the section is a few lines tall and nothing sits empty beside it. An answer opens under
   its question; a stretchy bar marks it. The <details> pairs are never touched. Scoped to .faq. */
.faq .fq-in{display:grid;gap:clamp(14px,2.2vw,32px)}
.faq .fq-qs{display:grid;border-top:1px solid var(--line2)}
.faq .fq-col{position:relative;min-width:0}
.faq .fq-knob{position:absolute;z-index:1;left:0;top:0;width:2px;height:0;border-radius:2px;background:var(--ink0);pointer-events:none}
.faq .fq-qs details{border-bottom:1px solid var(--line);overflow:hidden}
.faq .fq-qs summary{list-style:none;position:relative;display:flex;align-items:center;min-height:50px;padding:10px 40px 10px 14px;font:300 18px/1.22 var(--f-d);letter-spacing:-.02em;color:var(--ink0);cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq .fq-qs summary::-webkit-details-marker{display:none}
.faq .fq-qs summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:1.5px solid var(--ink0);border-bottom:1.5px solid var(--ink0);transform:rotate(45deg);transition:transform .25s}
.faq .fq-qs details[open]:not(.fq-closing) summary::after{transform:translateY(5px) rotate(-135deg)}
.faq .fq-qs details p{padding:0 14px 16px;color:var(--ink2);font-size:15.5px;line-height:1.5;max-width:62ch}
@media (min-width:760px){
  .faq .fq-qs summary{min-height:60px;padding:14px 44px 14px 20px;font:200 clamp(20px,1.8vw,27px)/1.2 var(--f-d);letter-spacing:-.03em}
  .faq .fq-qs details p{padding:0 20px 22px;font-size:16.5px}
}
@media (min-width:1000px){
  .faq .fq-qs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(36px,4.4vw,72px);align-items:start;border-top:0}
  .faq .fq-col{border-top:1px solid var(--line2)}
}
/* the close: styled in hero.css, with the sphere it shares */
/* ═════════ DENSITY, 2026-11-09 ═════════
   Sean: "The desktop version has so much dead negative space." Every full-width empty band was measured
   (scratch gaps.mjs) and fixed where it starts. No content changed. */
.c-copy .lede{margin-top:18px}
.c-coda{padding-top:0}
@media (max-width:999px){.c-coda{margin-top:-12px}}
@media (min-width:1000px){
  /* logins: the closing line sits under the copy; the stage is as tall as the motion needs */
  .c-pin{grid-template-rows:auto minmax(0,1fr);grid-template-areas:"copy scene" "coda scene";align-items:start;row-gap:22px}
  .c-copy{grid-area:copy}
  .scene{grid-area:scene;align-self:center}
  .c-coda{grid-area:coda;max-width:46ch;font-size:15.5px}
  .ds-motion .scene{height:min(540px,62svh)}
  .night + .sec{padding-top:clamp(40px,4.4vw,72px)}
  /* funding: a shorter tail on its tinted band */
  .funding{padding-bottom:clamp(32px,3.4vw,48px)}
}
/* certified mail: the tracking card rides beside the route instead of under it */
@media (min-width:1200px){
  .route{display:flex;align-items:center;justify-content:flex-end;padding-top:0;min-height:clamp(400px,29vw,430px)}
  .arc{right:auto;width:calc(100% - 476px);height:calc(100% - 40px)}   /* an svg ignores right:, so it gets its width; 40px left under it for the lowest caption */
  .stops{right:476px;height:calc(100% - 40px)}
  .trk{margin:0;width:420px;flex:none}
}
/* compare: heading and paragraph share the row, like every other section head */
.compare .split .lede{margin-top:0}

/* ── PHONE TABLES (2026-11-09) ───────────────────────────────────────────────
   The plan table was 760px at the least, so a phone showed Starter and half of Pro and left
   Scale and Enterprise behind a sideways swipe nothing pointed to. At 860px and under it now
   reads like the comparison table below it: one row at a time, each plan's value beside its
   name (data-l, already in the markup). The sample timesheet lost its last column by 20px on
   a 390px phone: tighter cell padding there. */
@media (max-width:860px){
  .plantable table{min-width:0}
  .plantable table,.plantable tbody,.plantable tr,.plantable tbody th,.plantable td{display:block;width:100%}
  .plantable thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .plantable tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .plantable tbody th{border:0;padding:0 0 6px;font-weight:400;color:var(--ink0)}
  .plantable td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;border:0;padding:4px 0}
  .plantable td::before{content:attr(data-l);color:var(--ink3);font-size:13px}
}
@media (max-width:420px){.ts th,.ts td{padding-left:5px;padding-right:5px}}

/* ── SELLS ON ARRIVAL (2026-11-09) ───────────────────────────────────────────
   The first screen names the category, the starting price and who built it. The comparison folds
   on every screen (open in full it was 4,259px tall on desktop), and on phones the plan table folds
   under the plan card, which already shows the chosen plan. */
.fine a,.hproof a{color:var(--ink0);text-underline-offset:3px}
.ctable tr.grp button{cursor:pointer}
.ctable tr.grp button i{display:block;margin-left:auto;width:12px;height:12px;border-right:1.5px solid var(--ink0);border-bottom:1.5px solid var(--ink0);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.ctable tr.grp button[aria-expanded="false"] i{transform:rotate(-45deg)}
.pt-more{display:none}
@media (max-width:860px){
  .plantable.can-fold .pt-more{display:inline-flex;margin:4px 0 8px}
  .plantable.can-fold:not(.open) .tscroll{display:none}
}

/* ═════════ AWARD PASS, 2026-11-10: shared conversion primitives ═════════
   One block every section uses for its button, so the trial terms always sit beside the trial button.
   Markup (data-cta names the spot for the click report):
     <div class="cta-row" data-cta="after-night">
       <a class="btn" href="/signup" data-magnetic>Start your 14-day trial <span class="arr" aria-hidden="true">→</span></a>
       <a class="btn ghost" href="https://www.calendly.com/scailapp/scail-live-demo">Book a live demo</a>
       <p class="terms">Card on file, nothing charged until day 15.</p>
       <p class="obj">One objection, answered with a fact already on this site.</p>
     </div> */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(22px,2.4vw,34px)}
.cta-row .terms{flex-basis:100%;margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.cta-row .obj{flex-basis:100%;margin:-4px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink3);max-width:62ch}
.cta-row .obj a,.cta-row .terms a{color:var(--ink0);text-underline-offset:3px}
.cta-row.center{justify-content:center;text-align:center}
.cta-row.center .obj{margin-inline:auto}
@media (max-width:560px){.cta-row .btn{flex:1 1 100%}}
/* proof slots: real numbers, ratings and quotes go here once Sean supplies them; until then they take no space */
.proof-slot[hidden]{display:none!important}
/* the monumental statement size (Lufga 200), for one line per scene at most */
.h-mono{font:200 clamp(54px,11.2vw,188px)/.9 var(--f-d);letter-spacing:-.05em;color:var(--ink0);max-width:none;text-wrap:balance}
.kick{font:400 12.5px/1 var(--f-t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

/* the quiet persistent button on phones: appears once the hero button has left the screen, steps aside
   whenever another trial button or the workspace form is on screen, and never covers the footer */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:12px;padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
  background:rgba(245,245,247,.97);box-shadow:0 -1px 0 var(--line);transform:translateY(110%)}   /* no live blur: a blurred bar re-blurs the page under it on every scrolled frame, which phones feel */
.stick p{flex:1 1 auto;min-width:0;margin:0;font-size:12.5px;line-height:1.3;color:var(--ink2)}
.stick p b{display:block;font-weight:400;font-size:14px;color:var(--ink0)}
.stick .btn{flex:none;min-height:44px;padding:0 18px;font-size:15px}
@media (max-width:999px){.stick{display:flex}}
.stick.on{transform:none}
.ds-motion .stick{transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.stick[hidden]{display:none!important}
/* the terms beside the header button on wide screens */
.hd-terms{font-size:12.5px;line-height:1;color:var(--ink2);white-space:nowrap;margin-right:14px;display:none}
@media (min-width:1240px){.hd-terms{display:inline-block}}

/* ═════════ SIX SCHEMES AS THEATRE (award pass, 2026-11-10): one press re-skins the whole page ═════════
   Per scheme: the ramp made safe for headline accents on its ground (--t1..6) and on the night ground (--n1..6),
   and the ground and inks. Computed by .award/scripts/scheme-contrast.mjs (every text pair at 3.3:1 or better for the
   large accent, 4.5:1 or better for body inks). Spectra is the default and needs none of this. */
html[data-scheme="vellum"]{--t1:#5E7D99;--t2:#6F8776;--t3:#9E7C2C;--t4:#B8702D;--t5:#A8663F;--t6:#7A5240;--n1:#5E7D99;--n2:#7E9A86;--n3:#B08A2E;--n4:#C97A2E;--n5:#A8663F;--n6:#815B4A;--ds-ground:#F2F0E9;--ds-ground-2:#E5E3DC;--ds-ink-strong:#0E0E0E;--ds-ink:#171716;--ds-ink-2:#484846;--ds-ink-3:#5A5957}
html[data-scheme="meridian"]{--t1:#2457FF;--t2:#7B5FD6;--t3:#209993;--t4:#B07F20;--t5:#E0512F;--t6:#C2331F;--n1:#2457FF;--n2:#7B5FD6;--n3:#1F9C96;--n4:#C08A1E;--n5:#E0512F;--n6:#C2331F;--ds-ground:#FBFAF6;--ds-ground-2:#EDEDE9;--ds-ink-strong:#11110F;--ds-ink:#1A1A18;--ds-ink-2:#4D4D4A;--ds-ink-3:#5F5F5C}
html[data-scheme="riptide"]{--t1:#12324A;--t2:#1E7F8C;--t3:#17928B;--t4:#448BAD;--t5:#6B4FCE;--t6:#8B6FE8;--n1:#4D6478;--n2:#1E7F8C;--n3:#12BFAE;--n4:#4E9FC4;--n5:#6B4FCE;--n6:#8B6FE8;--ds-ground:#E8F3F2;--ds-ground-2:#DBE7E7;--ds-ink-strong:#0B1F2E;--ds-ink:#142837;--ds-ink-2:#465864;--ds-ink-3:#576873}
html[data-scheme="graphite"]{--t1:#18181B;--t2:#2D2D31;--t3:#3F3F46;--t4:#52525B;--t5:#6B6B72;--t6:#828289;--n1:#636366;--n2:#636367;--n3:#636369;--n4:#616169;--n5:#6B6B72;--n6:#85858C;--ds-ground:#EEF0F3;--ds-ground-2:#E1E3E6;--ds-ink-strong:#0A0B0C;--ds-ink:#131415;--ds-ink-2:#444547;--ds-ink-3:#555758}
html[data-scheme="monogram"]{--t1:#BE185D;--t2:#DB2777;--t3:#9D174D;--t4:#831843;--t5:#EC4899;--t6:#A81E5A;--n1:#BE185D;--n2:#DB2777;--n3:#AB3B5F;--n4:#9B4560;--n5:#EC4899;--n6:#AE3163;--ds-ground:#FAFAF5;--ds-ground-2:#ECECE7;--ds-ink-strong:#0A0A0A;--ds-ink:#131313;--ds-ink-2:#474746;--ds-ink-3:#595957}
/* everything else follows from those tokens: lines, the prism word, the header glass, the phone bar */
html[data-scheme]:not([data-scheme="spectra"]){
  --ds-line:color-mix(in srgb,var(--ds-ink-strong) 10%,transparent);--ds-line-2:color-mix(in srgb,var(--ds-ink-strong) 18%,transparent);
  --ds-prism:linear-gradient(100deg,var(--t1) 0%,var(--t2) 25%,var(--t3) 50%,var(--t5) 75%,var(--t6) 100%);
}
/* on the night ground the accent uses the stops lightened until they read on near-black */
html[data-scheme]:not([data-scheme="spectra"]) .nt .nt-in:not(.day){--ds-prism:linear-gradient(100deg,var(--n1) 0%,var(--n2) 25%,var(--n3) 50%,var(--n5) 75%,var(--n6) 100%)}
html[data-scheme]:not([data-scheme="spectra"]) .v5c-top.ds-scrolled{background:color-mix(in srgb,var(--ds-ground) 82%,transparent)}
html[data-scheme]:not([data-scheme="spectra"]) .v5c-top :is(.v5c-mark,.v5c-link):not(.n){color:var(--ds-ink-strong)}
html[data-scheme]:not([data-scheme="spectra"]) .v5c-top .v5c-btn:not(.n){background:var(--ds-ink-strong)}
html[data-scheme]:not([data-scheme="spectra"]) .stick{background:color-mix(in srgb,var(--ds-ground) 97%,transparent)}
html[data-scheme]:not([data-scheme="spectra"]) .hud{background:color-mix(in srgb,var(--ds-ground) 78%,#fff)}

/* the reveal: the new scheme spreads from the pressed swatch as a growing circle (View Transitions API;
   where it is missing, or motion is reduced, the scheme simply changes) */
html.vt-scheme::view-transition-old(root),html.vt-scheme::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-scheme::view-transition-old(root){z-index:1}
html.vt-scheme::view-transition-new(root){z-index:2}

/* while another scheme is on, one chip names it and brings Spectra back */
.scheme-chip{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;
  background:var(--ds-ink-strong);color:#fff;font:400 14px/1 var(--f-t);white-space:nowrap;box-shadow:0 18px 40px -18px rgba(14,14,16,.55);cursor:pointer}
.scheme-chip i{flex:none;width:26px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--ds-r1),var(--ds-r2),var(--ds-r3),var(--ds-r4),var(--ds-r5),var(--ds-r6));box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.scheme-chip b{font-weight:400}
.scheme-chip span{opacity:.72}
.scheme-chip[hidden]{display:none}
.scheme-chip:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:999px){.scheme-chip{bottom:calc(78px + env(safe-area-inset-bottom,0px))}}