/* What you get, what it costs, the Levels and the price step (ADR 0021), ported from the approved prototype. Prefix o-. */
/* 30-offer: what you get, what it costs. Prefix o-.
   Drawing language: the logo's bars on a unit grid (u), one orange dot per drawing.
   Base styles show the end state. The script adds .o-armed (hidden start state) only when motion is allowed,
   then .o-go when a block scrolls into view. Every number is written into the markup; the count-up is an overlay. */
.o-sec{position:relative;background:var(--paper);color:var(--ink)}
.o-sec b,.o-sec strong{font-weight:800}
.o-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.o-h2,.o-h3{margin:0}
.o-h2{font-size:var(--fs-h2)}
.o-h2 span,.o-h3 span{display:block}
.o-h3{font-size:clamp(32px,3.2vw,48px);font-weight:800;letter-spacing:-0.035em;line-height:1.04;text-wrap:balance}
.o-h3 .ink{color:var(--ink)} .o-h3 .beacon{color:var(--beacon)}
.o-lead{margin-top:clamp(14px,1.4vw,22px);font-size:var(--fs-lead);color:var(--muted-2);max-width:56ch}
.o-call{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
@media (hover:hover){.o-call:hover{color:var(--beacon-text)}}

/* count-up overlay: the real number stays in the DOM, the animated copy sits on top while it counts */
.o-cnt{position:relative;display:inline-block}
.o-cnt-a{display:none}
.o-armed .o-cnt-a{display:block;position:absolute;left:0;top:0;white-space:nowrap}
.o-armed .o-cnt-v{visibility:hidden}
.o-armed.o-counted .o-cnt-a{display:none}
.o-armed.o-counted .o-cnt-v{visibility:visible}

/* ---------- What you get ---------- */
.o-gethead{padding-block:clamp(32px,3.2vw,48px) clamp(28px,3vw,44px)}
.o-gethead .o-lead{margin-top:clamp(14px,1.4vw,22px)}
.o-part{position:relative;overflow:hidden;padding-block:clamp(32px,3.4vw,56px)}
.o-part .o-part-in{position:relative;z-index:1}
.o-part-top .o-part-in{align-items:start}
.o-surface{background:var(--surface)}
.o-part-in{display:grid;gap:clamp(36px,5vw,80px);align-items:center}
.o-part-text h3{font-size:clamp(30px,3vw,46px);font-weight:800;letter-spacing:-0.035em;line-height:1.04;margin:0;text-wrap:balance}
.o-part-text p{margin-top:18px;max-width:46ch;color:var(--muted-2)}
.o-part-text p.o-note{margin-top:14px;font-size:var(--fs-small);color:var(--mwa-muted)}
@media (min-width:900px){
  .o-part-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .o-part-r .o-part-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .o-part-r .o-part-text{order:2}
}
.o-fig{width:100%;margin-inline:auto}

/* figure 1: AI hires across the first year. One bar for each quarter, one segment for each AI hire at work. Tap a bar and the orange dot travels to it. */
.o-hires{max-width:640px}
.o-sbox{container-type:inline-size;width:100%}
.o-q{position:relative;aspect-ratio:11/7;display:grid;grid-template-columns:repeat(4,minmax(0,2fr));column-gap:calc(100%/11);align-items:end}
/* one hairline for each AI hire: the lines sit at one, two, three and four hires, so every bar top meets its line */
.o-q::before{content:"";position:absolute;left:0;right:0;bottom:0;height:78%;pointer-events:none;background:repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),var(--line-strong) calc(25% - 1px) 25%);opacity:.8}
/* the selected quarter's AI hires speak: the logo's three bars (tall, short, tall) in white inside each hire */
.o-sg::after{content:"";position:absolute;right:12%;bottom:24%;width:clamp(11px,3cqw,20px);height:clamp(10px,2.7cqw,18px);background:linear-gradient(#fff,#fff) 0 100%/26% 100% no-repeat,linear-gradient(#fff,#fff) 50% 100%/26% 70% no-repeat,linear-gradient(#fff,#fff) 100% 100%/26% 100% no-repeat;transform:scaleY(0);transform-origin:50% 100%;transition:transform 300ms var(--mwa-ease)}
.o-qc[aria-pressed="true"] .o-sg::after{transform:none}
.o-live .o-qc[aria-pressed="true"] .o-sg::after{animation:o-meter 1.5s var(--ease-move) infinite;animation-delay:calc(var(--k, 0)*170ms)}
@keyframes o-meter{0%,100%{transform:scaleY(.6)}30%{transform:scaleY(1)}62%{transform:scaleY(.74)}}
/* the hire added that quarter rises into place when you pick it */
.o-sg.o-add{animation:o-add 560ms var(--mwa-ease) 220ms both}
@keyframes o-add{from{transform:scaleY(0)}to{transform:none}}
.o-qc{position:relative;display:flex;flex-direction:column-reverse;gap:clamp(2px,.55cqw,4px);height:var(--h);padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;transform-origin:50% 100%}
.o-qc:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.o-sg{position:relative;flex:1 1 0;min-height:0;background:var(--ink);transform-origin:50% 100%;transition:opacity 260ms var(--ease-move)}
.o-wl{position:absolute;left:14%;top:50%;width:58%;height:clamp(3px,.9cqw,6px);margin-top:calc(clamp(3px,.9cqw,6px)/-2);background:#FFFFFF;transform:scaleX(.62);transform-origin:0 50%}
.o-live .o-qc[aria-pressed="true"] .o-wl{animation:o-work 3.4s var(--ease-move) infinite;animation-delay:calc(var(--k)*260ms)}
@media (hover:hover){.o-live .o-qc:hover .o-wl{animation:o-work 2s var(--ease-move) infinite;animation-delay:calc(var(--k)*160ms)}}
@keyframes o-work{0%{transform:scaleX(0)}34%{transform:scaleX(1)}80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.o-qdot{position:absolute;left:0;top:0;width:calc(100%*1.1/11);aspect-ratio:1;pointer-events:none;will-change:transform;transition:transform 640ms var(--ease-move)}
.o-qdot i{display:block;width:100%;height:100%;border-radius:50%;background:var(--beacon)}
.o-qdot i.o-hop{animation:o-hop 640ms linear both}
@keyframes o-hop{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}50%{transform:translateY(-34%);animation-timing-function:cubic-bezier(.6,0,.8,.3)}100%{transform:translateY(0)}}
.o-ground{position:relative;height:4px}
.o-ground::before{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(-1*(max(0px,(100vw - var(--wrap))/2) + var(--gutter)));background:var(--ink);transform-origin:0 50%}
.o-labs{display:grid;grid-template-columns:repeat(4,minmax(0,2fr));column-gap:calc(100%/11);margin-top:10px;font-size:15px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.o-labs span{white-space:nowrap;color:var(--muted-2);transition:color 200ms}
.o-labs span.o-sel{color:var(--ink)}
.o-labs small{display:block;margin-top:2px;font-size:var(--fs-micro);font-weight:500;color:var(--muted-2);white-space:normal}
.o-labs .o-nm{display:none;white-space:nowrap}
@container (min-width:560px){.o-labs .o-nm{display:block}}
.o-hires-cap{margin-top:18px;min-height:4.6em;font-size:var(--fs-small);color:var(--muted-2);max-width:46ch}
.o-hires-cap b{display:block;font-size:clamp(17px,1.3vw,19px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.o-nw{white-space:nowrap}
.o-hires-hint{margin-top:6px;font-size:var(--fs-micro);color:var(--muted-2)}

/* figure 3: the two founders and how often you meet them */
.o-crew{max-width:700px;display:grid;gap:clamp(24px,3vw,36px);align-items:start}
@media (min-width:700px) and (max-width:899px),(min-width:1200px){.o-crew{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
.o-crew-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);max-width:360px}
.o-crew-ph figure{margin:0}
.o-ph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2)}
@media (max-width:599px){.o-ph{aspect-ratio:1/1}}
.o-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.o-crew-ph figcaption{margin-top:10px;font-size:var(--fs-micro);line-height:1.35;color:var(--muted-2)}
.o-crew-ph figcaption strong{display:block;color:var(--ink);font-size:16px;font-weight:700}
.o-cad-h{margin:0;font-size:var(--fs-small);font-weight:700}
.o-cad{position:relative;--cadl:clamp(116px,9.4vw,136px)}
.o-cad-w{display:grid;grid-template-columns:var(--cadl) minmax(0,1fr);column-gap:12px;margin:10px 0 0;font-size:var(--fs-micro);font-weight:600;color:var(--muted-2)}
.o-cwk{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,1vw,8px)}
.o-cwk i{font-style:normal;white-space:nowrap;text-align:center;transition:color 200ms}
.o-cwk i.o-now{color:var(--ink);font-weight:800}
/* the weeks play: the dot walks week 1 to week 4 on the top line, and each meeting in that week speaks */
.o-wdot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--beacon);pointer-events:none;opacity:0;transition:transform 560ms var(--ease-move),opacity 0s}
.o-cad.o-play .o-wdot{opacity:1}
.o-cb i{position:relative}
.o-cb i::after{content:"";position:absolute;left:50%;bottom:20%;width:clamp(12px,1.3vw,18px);height:46%;margin-left:calc(clamp(12px,1.3vw,18px)/-2);background:linear-gradient(#fff,#fff) 0 100%/26% 100% no-repeat,linear-gradient(#fff,#fff) 50% 100%/26% 70% no-repeat,linear-gradient(#fff,#fff) 100% 100%/26% 100% no-repeat;transform:scaleY(0);transform-origin:50% 100%;transition:transform 240ms var(--mwa-ease)}
.o-cb i.off::after{display:none}
.o-cb i.o-now::after{transform:none;animation:o-meter 1.1s var(--ease-move) infinite}
.o-cad ul{margin-top:6px}
.o-cr{position:relative;display:grid;grid-template-columns:var(--cadl) minmax(0,1fr);column-gap:12px;align-items:end;padding:14px 0 12px;border-top:1px solid var(--line-strong);cursor:default;outline-offset:2px}
.o-cr:last-child{border-bottom:1px solid var(--line-strong)}
.o-cr::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 380ms var(--mwa-ease)}
.o-cr:hover::after,.o-cr:focus-visible::after,.o-cr.o-sel::after{transform:scaleX(1)}
.o-cnl{display:block}
.o-cn{display:block;font-size:16px;font-weight:800;line-height:1.2}
.o-cl{display:block;margin-top:2px;font-size:13px;font-weight:600;line-height:1.25;color:var(--muted-2)}
.o-cr:hover .o-cl,.o-cr.o-sel .o-cl,.o-cr:focus-visible .o-cl{color:var(--ink)}
.o-cb{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,1vw,8px);align-items:end;height:48px}
.o-cb i{display:block;height:100%;background:var(--ink);transform-origin:50% 100%}
.o-cb i.off{height:5px;background:var(--line-strong)}
@media (max-width:420px){.o-cad{--cadl:100px}.o-cad-w,.o-cr{column-gap:10px}.o-cn{font-size:15px}}

/* ---------- What it costs ---------- */
.o-chartband{position:relative;background:var(--surface);padding-block:clamp(48px,5.6vw,92px) clamp(48px,5.4vw,84px);overflow-x:clip}
.o-chart-in{position:relative;z-index:1;display:grid;gap:clamp(32px,5vw,80px);align-items:end}
@media (min-width:1000px){.o-chart-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}.o-chart-text{display:flex;flex-direction:column;justify-content:space-between;gap:48px}}
.o-chart{margin:0;position:relative;max-width:760px;width:100%;justify-self:end;align-self:end}
/* 40 hours of an office week as 40 bars on one baseline, five groups of eight; the first 15.8 are filled */
.o-hrs{--hh:clamp(110px,15vw,230px);--hg:clamp(1px,.3vw,5px);--hd:clamp(6px,1.4vw,18px);position:relative;display:flex;align-items:flex-end;height:var(--hh);margin-top:clamp(30px,3.4vw,48px)}
.o-hc{position:relative;flex:1 1 0;min-width:0;height:100%;margin-left:var(--hg);overflow:visible !important}
.o-hc::before{content:"";position:absolute;inset:0;background:var(--line-strong)}
.o-hc:first-child{margin-left:0}
.o-hc.o-d{margin-left:var(--hd)}
.o-hc::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%}
.o-hc.o-on::after{transform:none}
.o-hc.o-part::after{right:var(--part,20%)}
.o-hdot{position:absolute;left:0;bottom:calc(100% + clamp(8px,.9vw,12px));width:clamp(16px,2.2vw,30px);aspect-ratio:1;pointer-events:none;transition:transform 220ms var(--ease-move)}
.o-hdot i{display:block;width:100%;height:100%;border-radius:50%;background:var(--beacon)}
.o-hdot i.o-hop{animation:o-hop 420ms linear both}
.o-go .o-hdot i.o-in{animation:o-drop 560ms var(--mwa-ease) 1700ms both}
@keyframes o-drop{from{transform:translateY(-320%)}to{transform:none}}
.o-hrs{touch-action:pan-y;cursor:crosshair}
.o-hbase{position:relative;height:4px}
.o-hbase::before{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(-1*(max(0px,(100vw - var(--wrap))/2) + var(--gutter)));background:var(--ink);transform-origin:0 50%}
.o-brk{display:block;height:12px;margin-top:12px;border:2px solid var(--ink);border-top:0;transform-origin:0 50%}
.o-brk-p{width:39.5%}
.o-meas{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;font-size:clamp(15px,1.2vw,18px);font-weight:600;line-height:1.35;color:var(--muted-2)}
.o-meas b{font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.o-meas-p{margin-top:clamp(20px,2.2vw,30px)}
.o-hnote{margin:14px 0 0;font-size:var(--fs-micro);color:var(--muted-2)}
.o-chart-text h3{font-size:clamp(26px,2.4vw,36px);font-weight:800;letter-spacing:-0.03em;line-height:1.08;margin:0;text-wrap:balance}
.o-chart-text p{margin-top:16px;max-width:46ch;color:var(--muted-2)}
.o-chart-text .o-src{font-size:var(--fs-micro);color:var(--muted-2);max-width:52ch}
.o-ct-h{margin-bottom:clamp(20px,2.4vw,32px)}

/* levels */
.o-levelsec{padding-block:clamp(56px,6.4vw,100px) clamp(16px,2vw,28px)}
.o-levels{--lg:clamp(24px,3vw,48px);--edge:calc(max(0px,(100vw - var(--wrap))/2) + var(--gutter));margin-top:clamp(32px,4vw,56px);display:grid;gap:clamp(40px,5vw,56px) var(--lg)}
/* the three price stacks share one ground line that runs edge to edge, like the logo's bars */
.o-levels .o-ps{border-bottom-color:transparent;margin-top:calc(var(--dd) + clamp(22px,2.4vw,34px))}
.o-levels .o-ps::after{content:"";position:absolute;left:0;right:calc(-1*var(--lg));bottom:-4px;height:4px;background:var(--ink);transform-origin:0 50%}
.o-levels .o-lv-first .o-ps::after{left:calc(-1*var(--edge))}
.o-levels .o-lv:last-child .o-ps::after{right:calc(-1*var(--edge))}
.o-lv{display:grid;align-content:start}
.o-lv-rule{height:4px;background:linear-gradient(var(--line-strong),var(--line-strong)) 0 0/100% 1px no-repeat;transform-origin:0 50%}
.o-lv-first .o-lv-rule{background:var(--ink)}
.o-cap{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:20px}
.o-cap i{display:block;width:10px;height:34px;background:var(--line-strong);transform-origin:50% 100%}
.o-cap i:nth-child(2){height:24px}
.o-cap i.on{background:var(--ink)}
.o-cap-s{height:22px;gap:3px;margin:0 0 8px}
.o-cap-s i{width:6px;height:22px}
.o-cap-s i:nth-child(2){height:16px}
/* price as a stack of weekly units on one baseline: Partner is one $375 block, Growth two, Embedded five */
.o-levels .o-cap{display:none}
.o-ps{--u:clamp(18px,2.2vw,32px);--sp:3px;--w:clamp(56px,6.6vw,96px);--dd:clamp(14px,1.6vw,22px);position:relative;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:var(--sp);justify-content:flex-start;height:calc(var(--u)*5 + var(--sp)*4 + 4px);margin-top:clamp(20px,2.2vw,32px);width:100%;border-bottom:4px solid var(--ink);box-sizing:content-box}
.o-ps>i{display:block;flex:none;width:var(--w);height:var(--u);background:var(--ink);transform-origin:50% 100%}
.o-ps-d{position:absolute;left:calc(var(--w)/2 - var(--dd)/2);width:var(--dd);aspect-ratio:1;border-radius:50%;background:var(--beacon);bottom:calc(var(--n)*(var(--u) + var(--sp)) + 8px)}
.o-lvtab .o-ps{--u:11px;--sp:2px;--w:26px;--dd:9px;width:26px;margin:0 0 8px;border-bottom:0;height:calc(var(--u)*5 + var(--sp)*4)}
.o-armed:not(.o-go) .o-ps-d{opacity:0;transform:translateY(-300%)}
.o-armed .o-ps-d{transition:transform 600ms var(--mwa-ease) calc(var(--d,0)*1ms),opacity 0s linear calc(var(--d,0)*1ms)}
.o-armed:not(.o-go) .o-ps{border-bottom-color:transparent}
.o-armed .o-ps{transition:border-color 0s linear 200ms}
/* point at a Level and the dot hops onto its stack; it goes back to Partner when you leave. Nothing dims, so the dot stays full orange. */
.o-ps-dh{background:none}
.o-ps-dh i{display:block;width:100%;height:100%;border-radius:50%;background:var(--beacon)}
.o-ps-dh i.o-hop{animation:o-hop2 560ms linear both}
@keyframes o-hop2{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}50%{transform:translateY(-180%);animation-timing-function:cubic-bezier(.6,0,.8,.3)}100%{transform:translateY(0)}}
@media (hover:hover){.o-lv-rule{transition:background-color 260ms}.o-lv:hover .o-lv-rule{background:var(--ink)}}
.o-lvtab[data-sel]:not([data-sel="3"]) .o-ps-d{visibility:hidden}
.o-lv-name{margin:14px 0 0;font-size:clamp(24px,2vw,30px);font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.o-price{margin-top:12px;font-weight:800;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums;font-size:clamp(44px,4.4vw,68px);display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.18em}
.o-price .o-from,.o-price .o-per{font-size:clamp(17px,1.3vw,20px);font-weight:600;letter-spacing:0;color:var(--muted-2);white-space:nowrap}
.o-bill{margin-top:8px;font-size:clamp(17px,1.3vw,20px);font-weight:600;line-height:1.3;color:var(--muted-2);font-variant-numeric:tabular-nums}
.o-who{margin-top:10px;font-size:var(--fs-small);color:var(--muted-2);max-width:34ch}
.o-facts{margin:22px 0 0}
.o-facts div{padding:14px 0;border-top:1px solid var(--line-strong)}
.o-facts div:last-child{border-bottom:1px solid var(--line-strong)}
.o-facts dt{font-size:14px;color:var(--muted-2)}
.o-facts dd{margin:2px 0 0;font-size:18px;font-weight:700}
.o-facts dd.o-no{color:var(--muted-2);font-weight:600}
@media (min-width:900px){
  .o-levels{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto}
  .o-lv{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}
/* phone and tablet: one compact table, Levels as columns */
.o-lvtab{display:none;width:100%;margin-top:clamp(24px,4vw,36px);border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.o-lvtab th,.o-lvtab td{vertical-align:top;text-align:left;padding:12px 8px 12px 0;border-top:1px solid var(--line-strong);font-size:15px;line-height:1.3}
.o-lvtab thead th,.o-lvtab thead td{border-top:0;padding:0 8px 10px 0}
.o-lvtab thead th{font-size:clamp(16px,3.6vw,22px);font-weight:800;letter-spacing:-0.02em;border-top:1px solid var(--line-strong);padding-top:14px}
.o-lvtab thead th.o-first{border-top:4px solid var(--ink)}
.o-lvtab tbody th{width:31%;font-weight:500;font-size:14px;color:var(--muted-2)}
.o-lvtab td{font-weight:700}
.o-lvtab td small.o-fr{display:block;font-size:12px;font-weight:600;color:var(--muted-2)}
.o-lvtab td.o-no{font-weight:600;color:var(--muted-2)}
.o-lvtab td.o-pr{font-size:clamp(19px,5vw,32px);font-weight:800;letter-spacing:-0.035em;line-height:1.05}
.o-lvtab td.o-pr small{display:block;font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted-2)}
/* tap a Level's name and its column stays in full ink while the other two step back; tap it again to put them back */
.o-lvtab thead th{cursor:pointer;-webkit-tap-highlight-color:transparent}
.o-lvtab :is(th,td){transition:opacity 260ms var(--ease-move)}
.o-lvtab thead th{transition:opacity 260ms var(--ease-move),border-color 260ms}
.o-lvtab[data-sel] :is(th,td):not(:first-child){opacity:.4}
.o-lvtab[data-sel="1"] :is(th,td):nth-child(2),.o-lvtab[data-sel="2"] :is(th,td):nth-child(3),.o-lvtab[data-sel="3"] :is(th,td):nth-child(4){opacity:1}
.o-lvtab[data-sel] thead th.o-first{border-top-width:1px}
.o-lvtab[data-sel="1"] thead th:nth-child(2),.o-lvtab[data-sel="2"] thead th:nth-child(3),.o-lvtab[data-sel="3"] thead th:nth-child(4){border-top:4px solid var(--ink)}
.o-lvwho{display:grid;gap:8px;margin-top:20px;font-size:var(--fs-small);color:var(--muted-2)}
.o-lvwho b{color:var(--ink);font-weight:800}
@media (max-width:899px){.o-levels{display:none}.o-lvtab{display:table}}
@media (min-width:900px){.o-lvwho{display:none}}
@media (max-width:420px){.o-lvtab th,.o-lvtab td{font-size:14px;padding-right:12px}.o-lvtab thead th{font-size:14.5px;padding-right:12px}.o-lvtab tbody th{font-size:13px;width:28%}}
/* under 380px "Embedded" ran into "Growth", and "Capacitación" was wider than the label column: tighter cells,
   smaller level names, and row labels that hyphenate in the page's language */
@media (max-width:379px){.o-lvtab th,.o-lvtab td{padding-right:6px}.o-lvtab thead th{font-size:12.5px;letter-spacing:-0.03em;padding-right:6px}.o-lvtab tbody th{-webkit-hyphens:auto;hyphens:auto}}
.o-lv-top{display:block}
.o-disc{margin-top:clamp(28px,3.4vw,44px);max-width:760px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.o-disc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font-size:17px;font-weight:700}
.o-disc summary::-webkit-details-marker{display:none}
@media (hover:hover){.o-disc summary:hover .o-dt{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}}
.o-di{position:relative;flex:none;width:18px;height:18px}
.o-di::before,.o-di::after{content:"";position:absolute;background:var(--ink);transition:transform 320ms var(--ease-move)}
.o-di::before{left:0;right:0;top:7.5px;height:3px}
.o-di::after{top:0;bottom:0;left:7.5px;width:3px}
.o-disc[open] .o-di::after{transform:scaleY(0)}
.o-signing{margin:0 0 14px;display:grid;gap:0}
.o-signing div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--line-strong)}
.o-signing dt{font-size:var(--fs-small);font-weight:800}
.o-signing dd{margin:0;font-size:var(--fs-small);color:var(--muted-2);font-variant-numeric:tabular-nums}
@media (max-width:599px){.o-signing div{grid-template-columns:minmax(0,1fr)}}
.o-pick{margin-top:clamp(20px,2.4vw,32px);max-width:46em;font-size:var(--fs-lead);font-weight:600;color:var(--muted-2)}
.o-pick a{color:var(--ink);padding-block:12px}
.o-pick-act{margin-top:clamp(20px,2.4vw,28px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
@media (max-width:599px){.o-pick-act .btn{width:100%}}

/* honest price step */
.o-stepband{margin-top:clamp(48px,5.4vw,84px);background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(48px,5.6vw,92px);overflow-x:clip}
.o-slots{margin-top:clamp(28px,3.4vw,52px)}
.o-slot-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,4vw,56px);align-items:end;padding-top:clamp(28px,3.4vw,44px)}
.o-sg-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(3px,.9vw,10px);align-items:end}
.o-sl{--k:1.9;position:relative;aspect-ratio:1/calc(var(--g)*var(--k));background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);transform-origin:50% 100%}
@media (max-width:599px){.o-sl{--k:4.4}}
/* every spot is an empty frame that rises from the baseline; nobody has taken one. The dot lands in the first. */
.o-sg-2 .o-sl{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line-strong)}
.o-sg-3 .o-sl{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line-strong);opacity:.85}
.o-sl-dot{--dw:clamp(12px,40%,26px);position:absolute;left:50%;width:var(--dw);margin-left:calc(var(--dw) / -2);aspect-ratio:1;border-radius:50%;background:var(--beacon);bottom:12%}
.o-sl-ghost{position:absolute;left:0;right:0;bottom:100%;height:100%;box-shadow:inset 0 0 0 1.5px var(--line-strong);opacity:0}
.o-slot-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,4vw,56px)}
.o-sg-l{margin-top:12px;font-size:clamp(15px,1.3vw,19px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted-2)}
.o-sg-l small{display:block;font-size:var(--fs-small);font-weight:500;color:var(--muted-2)}
.o-sg-l b{display:block;color:var(--ink);font-size:inherit}
.o-sg-b{display:block;font-size:var(--fs-small);font-weight:700;color:var(--muted-2)}
.o-sg-l1{color:var(--ink)}
.o-slots-rule{position:relative;height:4px}
.o-slots-rule::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1*(max(0px,(100vw - var(--wrap))/2) + var(--gutter)));right:calc(-1*(max(0px,(100vw - var(--wrap))/2) + var(--gutter)));background:var(--ink);transform-origin:0 50%}
@media (max-width:599px){.o-wk{display:none}}
.o-step-note{margin-top:clamp(16px,2vw,24px);max-width:52em;font-size:var(--fs-lead);color:var(--muted-2)}
.o-step-dot{margin-top:12px;font-size:var(--fs-micro);color:var(--muted-2)}
.o-fine-a{display:inline-block;padding:11px 2px;margin:-11px -2px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
@media (hover:hover){.o-fine-a:hover{color:var(--beacon-text)}}
.o-fine{padding-block:clamp(24px,2.6vw,40px) clamp(48px,5.6vw,88px);font-size:var(--fs-small);line-height:1.55;color:var(--muted-2);max-width:68ch}

/* wide screens: larger drawings, same 1320px column */
@media (min-width:1700px){
  .o-hires{max-width:720px}
  .o-crew{max-width:720px}
  .o-chart{max-width:820px}
  .o-part-text p{font-size:19px}
  .o-slot-groups{--base:210px}
}

/* ---------- motion: start states and transitions (only when armed) ---------- */
.o-armed:not(.o-go) .o-sl,.o-armed:not(.o-go) .o-sg,.o-armed:not(.o-go) .o-cb i,.o-armed:not(.o-go) .o-cap i,.o-armed:not(.o-go) .o-ps>i{transform:scaleY(0)}
.o-armed:not(.o-go) .o-wl{transform:scaleX(0)}
.o-armed:not(.o-go) .o-hc::after{transform:scaleY(0)}
.o-armed:not(.o-go) .o-draw,.o-armed:not(.o-go) .o-lv-rule,.o-armed:not(.o-go) .o-brk{transform:scaleX(0)}
.o-armed:not(.o-go) .o-ground::before,.o-armed:not(.o-go) .o-hbase::before,.o-armed:not(.o-go) .o-slots-rule::before{transform:scaleX(0)}
.o-armed:not(.o-go) .o-ph{clip-path:inset(100% 0 0 0)}
.o-armed:not(.o-go) .o-hdot,.o-armed:not(.o-go) .o-sl-dot,.o-armed:not(.o-go) .o-qdot{opacity:0}
.o-armed:not(.o-go) .o-sl-dot{transform:translateY(-760%)}
.o-levels.o-armed:not(.o-go) .o-ps::after{transform:scaleX(0)}
.o-levels.o-armed .o-ps::after{transition:transform 820ms var(--mwa-ease)}
.o-levels.o-armed .o-lv:nth-child(2) .o-ps::after{transition-delay:200ms}
.o-levels.o-armed .o-lv:nth-child(3) .o-ps::after{transition-delay:400ms}
.o-armed:not(.o-go) .o-hc::before{opacity:0}
.o-armed:not(.o-go) .o-cn,.o-armed:not(.o-go) .o-cl{opacity:0}
.o-armed .o-sg{transition:transform 640ms var(--mwa-ease) calc(var(--d,0)*1ms),opacity 260ms var(--ease-move)}
.o-armed .o-hc::after{transition:transform 180ms var(--mwa-ease)}
.o-armed:not(.o-done) .o-hc::after{transition:transform 520ms var(--mwa-ease) calc(var(--e,0)*1ms)}
.o-armed .o-hc::before{transition:opacity 240ms linear calc(var(--d,0)*1ms)}
.o-armed .o-sl{transition:transform 900ms var(--mwa-ease) calc(var(--d,0)*1ms)}
.o-armed .o-cb i,.o-armed .o-cap i,.o-armed .o-ps>i{transition:transform 560ms var(--mwa-ease) calc(var(--d,0)*1ms)}
.o-armed .o-cn,.o-armed .o-cl{transition:opacity 300ms linear calc(var(--d,0)*1ms + 200ms)}
.o-armed .o-draw,.o-armed .o-lv-rule,.o-armed .o-brk,.o-armed .o-ground::before,.o-armed .o-hbase::before,.o-armed .o-slots-rule::before{transition:transform 1100ms var(--mwa-ease) calc(var(--d,0)*1ms)}
.o-armed .o-ph{transition:clip-path 900ms var(--mwa-ease) calc(var(--d,0)*1ms)}
.o-armed .o-sl-dot{transition:transform 700ms var(--mwa-ease) calc(var(--d,0)*1ms),opacity 0s linear calc(var(--d,0)*1ms)}
.o-armed .o-hdot{transition:transform 220ms var(--ease-move),opacity 0s linear 1700ms}
.o-armed .o-qdot{transition:transform 640ms var(--ease-move),opacity 0s}