/* ============================================================
   Cut Above — the marketing site's stylesheet.

   Same tokens as the product: ocean for structure, mint for the one incisive
   accent, cool greys, IBM Plex, every corner sharp, surfaces flat. Light is
   the default; dark follows the system unless the visitor chooses, and the
   choice is remembered (site.js). Motion is GSAP-driven from site.js and is
   transform/opacity only; everything here is static layout.
   ============================================================ */

:root{
  --ocean:#087EAD; --ocean-600:#066A92; --ocean-900:#073246; --ocean-50:#E6F2F8;
  --mint:#25C9B6; --mint-600:#189E8E; --mint-50:#E3F8F5;
  --amber:#C7891A; --amber-50:#FBF3E1;
  --ground:#F4F6F8; --sheet:#ffffff; --ink:#0B1A2A; --muted:#5B6B7A;
  --line:#D9DFE6; --rule:#C6CED7; --mono-dim:#6E7C8A;
  --chrome:#073246; --on-chrome:#E6F2F8;
  --shader-a:#087EAD; --shader-b:#25C9B6; --shader-bg:#F4F6F8;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#0A1620; --sheet:#0F1F2C; --ink:#E8EEF3; --muted:#9BAAB8;
  --line:#1E3040; --rule:#2A3E50; --mono-dim:#7D8C9A;
  --ocean:#2E9CC9; --ocean-50:#0F2A3A; --mint-50:#0E2B29; --amber-50:#2B2210;
  --chrome:#060D14;
  --shader-a:#0E5B7E; --shader-b:#189E8E; --shader-bg:#0A1620;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A1620; --sheet:#0F1F2C; --ink:#E8EEF3; --muted:#9BAAB8;
    --line:#1E3040; --rule:#2A3E50; --mono-dim:#7D8C9A;
    --ocean:#2E9CC9; --ocean-50:#0F2A3A; --mint-50:#0E2B29; --amber-50:#2B2210;
    --chrome:#060D14;
    --shader-a:#0E5B7E; --shader-b:#189E8E; --shader-bg:#0A1620;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);margin:0;
  font-family:"IBM Plex Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--ocean)}
img,svg{max-width:100%}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mint-600)}
h1{font-weight:600;font-size:clamp(2.2rem,5.2vw,3.6rem);
  line-height:1.04;letter-spacing:-.028em;margin:0;text-wrap:balance;max-width:22ch}
h1 em{font-style:normal;color:var(--ocean);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:2px;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1) .4s}
.is-ready h1 em::after{transform:scaleX(1)}
h2{font-weight:600;font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.02em;margin:0 0 .5rem;text-wrap:balance}
h3{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--mono-dim);margin:0 0 .85rem;font-weight:500}
p{max-width:64ch}
.lede{color:var(--muted);font-size:1.08rem;max-width:56ch}
.muted{color:var(--muted)}
.small{font-size:.88rem}

/* ---------------------------------------------------------------- nav ---- */
.beta{background:var(--mint);color:#062621;font-size:.82rem;line-height:1.4}
.beta .wrap{display:flex;align-items:center;gap:.75rem;padding-top:.45rem;padding-bottom:.45rem}
.beta__tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(6,38,33,.45);padding:.15rem .45rem;flex:none}
.beta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.beta__short{display:none}
@media (max-width:640px){.beta__long{display:none}.beta__short{display:inline}}
nav.top{background:var(--chrome);color:var(--on-chrome);position:sticky;top:0;z-index:20}
nav.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--mint) 0,var(--mint) var(--cut,0%),transparent var(--cut,0%));
  }
nav.top .wrap{display:flex;align-items:center;gap:1.25rem;padding-top:.8rem;padding-bottom:.8rem}
nav.top .brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;margin-right:.5rem}
nav.top .brand svg{width:26px;height:26px;display:block}
nav.top .links{display:flex;gap:1.25rem;align-items:center}
nav.top a.item{color:var(--on-chrome);opacity:.78;text-decoration:none;font-size:.9rem;position:relative;padding:.25rem 0}
nav.top a.item::after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1px;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
nav.top a.item:hover,nav.top a.item[aria-current="page"]{opacity:1}
nav.top a.item:hover::after,nav.top a.item[aria-current="page"]::after{transform:scaleX(1)}
nav.top .spacer{flex:1}
nav.top a.signin{color:#fff;text-decoration:none;font-size:.86rem;border:1px solid rgba(255,255,255,.35);padding:.42rem .8rem;white-space:nowrap}
nav.top a.signin:hover{border-color:var(--mint);color:var(--mint)}
nav.top a.try{background:var(--mint);color:#062621;text-decoration:none;font-size:.86rem;font-weight:600;padding:.48rem .9rem;white-space:nowrap}
nav.top a.try:hover{background:#7FE0D4}
.theme{appearance:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--on-chrome);
  width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;padding:0}
.theme:hover{border-color:var(--mint);color:var(--mint)}
.theme svg{width:16px;height:16px}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme .sun{display:block}
  :root:not([data-theme="light"]) .theme .moon{display:none}
}
.menu{display:none;appearance:none;background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--on-chrome);
  width:34px;height:34px;place-items:center;cursor:pointer;padding:0}
@media (max-width:52rem){
  nav.top .links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--chrome);flex-direction:column;
    align-items:flex-start;gap:.2rem;padding:.75rem 1.25rem 1rem;border-bottom:1px solid var(--rule)}
  nav.top.open .links{display:flex}
  nav.top a.item{padding:.45rem 0}
  .menu{display:inline-grid}
  nav.top a.signin{display:none}
}
nav.top .narrow-only{display:none}
nav.top .brand span{white-space:nowrap}
nav.top .brand svg{flex:none}
/* A phone has room for the brand, the trial and the menu; the demo moves into the menu. */
@media (max-width:34rem){
  nav.top .wide-only{display:none}
  nav.top .links .narrow-only{display:inline-block}
}

/* ------------------------------------------------------------ buttons ---- */
.cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.9rem}
.btn{display:inline-block;padding:.7rem 1.2rem;text-decoration:none;position:relative;overflow:hidden;
  font-weight:500;font-size:.94rem;border:1px solid var(--ocean);letter-spacing:.005em;cursor:pointer;
  font-family:inherit;line-height:1.4;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s,border-color .18s,color .18s}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.btn:hover::after{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ocean);color:#fff}
.btn.primary:hover{background:var(--ocean-600);border-color:var(--ocean-600)}
.btn.ghost{color:var(--ocean);background:transparent}
.btn.ghost:hover{border-color:var(--mint-600);color:var(--mint-600)}
.btn.accent{background:var(--mint);border-color:var(--mint);color:#062621;font-weight:600}
.btn.accent:hover{background:#7FE0D4;border-color:#7FE0D4}
.btn.accent::after{background:var(--ocean-900)}
.btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.btn:disabled{opacity:.6;cursor:default}

/* --------------------------------------------------------------- bands --- */
section.band{padding:3.75rem 0;border-bottom:1px solid var(--line)}
section.band:last-of-type{border-bottom:0}
section.band.sheet{background:var(--sheet)}
section.hero{padding:5.5rem 0 4.5rem;position:relative;overflow:hidden;background:var(--shader-bg);min-height:min(78vh,720px);display:flex;align-items:center}
section.hero canvas.shader{position:absolute;inset:0;width:100%;height:100%;display:block}
section.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 72%,transparent) 48%,transparent 78%)}
:root[data-theme="dark"] section.hero .veil{background:linear-gradient(90deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 70%,transparent) 50%,transparent 80%)}
section.hero .wrap{position:relative;width:100%}
section.hero .lede{max-width:52ch}
section.hero .proof{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2.25rem;font-size:.84rem;color:var(--muted)}
section.hero .proof span::before{content:"";display:inline-block;width:.5rem;height:1px;background:var(--mint);vertical-align:middle;margin-right:.5rem}
section.hero.compact{min-height:0;padding:4rem 0 3rem}

/* ---------------------------------------------------------------- grid ---- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:1.5rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.card{background:var(--sheet);padding:1.4rem;position:relative}
.card::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--mint);transition:width .28s cubic-bezier(.2,.8,.2,1)}
.card:hover::before{width:100%}
.card h4{margin:0 0 .35rem;font-size:1.02rem;font-weight:600}
.card p{margin:0;color:var(--muted);font-size:.92rem}
.card a{display:inline-block;margin-top:.8rem;font-size:.9rem}
.card .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-600);margin-bottom:.5rem}
.card ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.9rem}
.card ul li{margin:.2rem 0}

/* ---------------------------------------------------------- feature rows -- */
.feature{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;align-items:center;padding:2.5rem 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature.flip>.copy{order:2}
.feature .copy h2{font-size:1.45rem}
.feature .shot{background:var(--sheet);border:1px solid var(--line);aspect-ratio:16/10;position:relative;overflow:hidden}
.feature .shot img{width:100%;height:100%;object-fit:cover;display:block}
.feature .shot .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--mono-dim);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.feature .shot::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left}
.feature.is-in .shot::after{transform:scaleX(1);transition:transform .6s cubic-bezier(.2,.8,.2,1) .15s}
@media (max-width:48rem){.feature{grid-template-columns:1fr;gap:1.25rem}.feature.flip>.copy{order:0}}

/* -------------------------------------------------------------- counts ---- */
.counts{display:flex;flex-wrap:wrap;gap:2rem;padding:1.1rem 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin:1.5rem 0}
.counts div{display:flex;flex-direction:column}
.counts b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.5rem;font-weight:500;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ocean)}
.counts span{color:var(--mono-dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;margin-top:.45rem}

/* -------------------------------------------------------------- tables ---- */
table.rename{border-collapse:collapse;width:100%;max-width:34rem;margin-top:.5rem}
table.rename th{text-align:left;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--mono-dim);padding-bottom:.5rem;font-weight:500}
table.rename td{padding:.45rem 0;border-top:1px solid var(--line)}
.was{color:var(--muted);text-decoration:line-through;width:42%}
.arrow{color:var(--mint);width:2.5rem;text-align:center}
.now{font-weight:600;font-size:1.05rem;color:var(--ink)}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.5rem}
.step{background:var(--sheet);border:1px solid var(--rule);padding:.34rem .7rem;font-size:.86rem}
.sep{color:var(--mint)}
ul.plain{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem;max-width:64ch}
ul.plain li{padding-left:1.1rem;position:relative}
ul.plain li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--mint)}
.twrap{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;font-size:.92rem;margin-top:1rem}
table.data th{text-align:left;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--mono-dim);padding:.5rem .75rem .5rem 0;
  border-bottom:1px solid var(--rule);font-weight:500;white-space:nowrap}
table.data td{padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.callout{background:var(--sheet);border:1px solid var(--line);border-left:2px solid var(--mint);padding:1rem 1.2rem;
  margin:1.5rem 0;max-width:64ch}
.callout p{margin:0}

/* --------------------------------------------------------------- tiers ---- */
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:1.75rem}
.tier{background:var(--sheet);padding:1.6rem;display:flex;flex-direction:column;position:relative}
.tier.featured{outline:2px solid var(--mint);outline-offset:-2px}
.tier .name{font-weight:600;font-size:1.1rem}
.tier .for{color:var(--muted);font-size:.9rem;margin-top:.2rem;min-height:2.7em}
.tier .price{margin:1.1rem 0 .2rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.65rem;font-weight:500;color:var(--ocean);letter-spacing:-.02em}
.tier .price small{display:block;font-size:.72rem;color:var(--mono-dim);letter-spacing:.02em;margin-top:.25rem;font-family:"IBM Plex Sans",sans-serif}
.tier .price .from{font-size:.9rem;font-weight:400;color:var(--mono-dim);letter-spacing:0}
.tier .price small.fair{color:var(--mint-600);margin-top:.35rem}
.price-controls{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:space-between;margin-top:1.75rem}
.seg{display:inline-flex;border:1px solid var(--line)}
.seg button{appearance:none;background:transparent;border:0;border-right:1px solid var(--line);color:var(--muted);font:inherit;font-size:.85rem;padding:.5rem .9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.seg button:last-child{border-right:0}
.seg button small{font-size:.7rem;color:var(--mono-dim)}
.seg button.active{background:var(--ocean);color:#fff}
.seg button.active small{color:rgba(255,255,255,.75)}
.tier ul{list-style:none;margin:1rem 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.9rem;flex:1}
.tier ul li{padding-left:1.1rem;position:relative}
.tier ul li::before{content:"";position:absolute;left:0;top:.7em;width:.55rem;height:1px;background:var(--mint)}
.tier ul li.off{color:var(--mono-dim)}
.tier ul li.off::before{background:var(--rule)}
.tier .btn{align-self:flex-start}
.tier .tag{position:absolute;top:0;right:0;background:var(--mint);color:#062621;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem}

/* --------------------------------------------------------------- forms ---- */
form.lead{background:var(--sheet);border:1px solid var(--line);padding:1.6rem;max-width:40rem;margin-top:1.5rem}
form.lead .row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:40rem){form.lead .row{grid-template-columns:1fr}}
form.lead label{display:block;font-size:.8rem;font-weight:600;margin:0 0 .35rem;color:var(--ink)}
form.lead .f{margin-bottom:1rem}
form.lead input,form.lead select,form.lead textarea{width:100%;font:inherit;font-size:.94rem;padding:.6rem .7rem;
  background:var(--ground);color:var(--ink);border:1px solid var(--rule);border-radius:0;outline:none}
form.lead input:focus,form.lead select:focus,form.lead textarea:focus{border-color:var(--ocean);box-shadow:inset 0 -2px 0 var(--mint)}
form.lead textarea{min-height:6rem;resize:vertical}
form.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.lead .fine{font-size:.8rem;color:var(--mono-dim);margin-top:.9rem}
form.lead .done{display:none;padding:1rem 1.2rem;border-left:2px solid var(--mint);background:var(--mint-50);color:var(--ink)}
form.lead.is-done .fields{display:none}
form.lead.is-done .done{display:block}
form.lead .err{color:#A12D24;font-size:.85rem;margin-top:.6rem;display:none}
form.lead.has-err .err{display:block}

/* ------------------------------------------------------------- footer ---- */
footer.site{background:var(--chrome);color:var(--on-chrome);padding:2.75rem 0 3rem;font-size:.85rem;position:relative}
footer.site::before{content:"";position:absolute;left:0;top:0;width:38%;height:1px;background:var(--mint)}
footer.site a{color:var(--on-chrome);opacity:.8;text-decoration:none}
footer.site a:hover{opacity:1;color:var(--mint)}
footer.site strong{color:#fff;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
footer.site .cols{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
footer.site ul{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
footer.site p{opacity:.7}

/* --------------------------------------------------------------- motion --- */
[data-reveal]{opacity:0;transform:translateY(18px);will-change:transform,opacity}
.no-js [data-reveal],.reduced [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
}
@media (max-width:34rem){ .counts{gap:1.15rem} section.band{padding:2.5rem 0} section.hero{padding:3.5rem 0 3rem;min-height:0} }

/* ------------------------------------------------------- pack explorer ---- */
.picker{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.25rem}
.picker button{font:inherit;font-size:.9rem;padding:.5rem .95rem;background:var(--sheet);color:var(--muted);
  border:1px solid var(--rule);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.picker button:hover{color:var(--ink);border-color:var(--ocean)}
.picker button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.picker button[aria-pressed="true"]{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.pack{background:var(--sheet);border:1px solid var(--line);padding:2rem;position:relative}
.pack::before{content:"";position:absolute;left:0;top:0;height:2px;width:38%;background:var(--mint)}
.pack[hidden]{display:none}
.packhead h2{margin:0}
.packhead .lede{margin:.4rem 0 0}
.pack section{margin-top:2rem}
.pack section h3{margin-bottom:.7rem}
.note{color:var(--muted);font-size:.89rem;margin:0 0 .8rem;max-width:62ch}
.tiny{color:var(--mono-dim);font-size:.75rem;margin:.6rem 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace}
.chip{display:inline-block;background:var(--ground);color:var(--ink);border:1px solid var(--line);padding:.3rem .65rem;font-size:.86rem;margin:0 .35rem .4rem 0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.5rem}
.fieldgroup h4{color:var(--mint-600);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 .6rem;font-weight:500}
.fieldgroup ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem;font-size:.92rem}
.opts{display:block;color:var(--mono-dim);font-size:.78rem;margin-top:.05rem}
.scaffolds{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:1.25rem}
.scaffold{border-left:2px solid var(--mint);padding:.15rem 0 .15rem 1rem}
.scaffold h4{margin:0 0 .3rem;font-size:1rem}
.phases{margin:.6rem 0 0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.22rem;font-size:.9rem;color:var(--muted)}
.autos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem;max-width:62ch}
.autos li{padding-left:1.1rem;position:relative}
.autos li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--mint)}
.fit{margin-top:2.25rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.fit summary{cursor:pointer;color:var(--muted);font-size:.87rem}
.fit p{color:var(--muted);font-size:.9rem;margin:.8rem 0 0;max-width:70ch}

/* ------------------------------------------------------------ one system ---
   Six modules, one screen each. Without JavaScript, on a phone, or with
   reduced motion, the panels stack (the default below). With motion on a wide
   screen, site.js adds .modules--h: the section pins under the nav and the
   panels travel sideways as the page scrolls, each over its own shader
   wallpaper, while the cut draws along the bottom. Panels are dark in both
   themes so the wallpapers and the white copy read the same everywhere. */
.modules{border-bottom:1px solid var(--line);--navh:0px}
.modules__intro{background:var(--sheet);padding:3.75rem 0 2.25rem}
.modules__intro p{max-width:40rem}
.modules__pin{position:relative;background:#041A26}
.modules__track{display:grid;gap:1px;background:#0B2A3A}
.mod{position:relative;overflow:hidden;min-height:78vh;background:#051E2C;color:#E6F2F8;isolation:isolate}
.mod__bg{position:absolute;top:0;bottom:0;left:-8%;width:116%;height:100%;display:block;z-index:-2}
.mod__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(3,18,27,.88) 0%,rgba(3,18,27,.7) 38%,rgba(3,18,27,.12) 66%,rgba(3,18,27,0) 100%),
             linear-gradient(0deg,rgba(3,18,27,.55) 0%,rgba(3,18,27,0) 42%)}
.mod__copy{position:absolute;left:max(1.25rem,calc((100vw - 68rem)/2 + 1.25rem));bottom:clamp(4.5rem,13vh,8rem);max-width:min(31rem,calc(100vw - 2.5rem))}
.plan-tag{display:inline-block;margin-left:.6rem;padding:.1rem .4rem;border:1px solid currentColor;color:inherit;text-decoration:none}
.plan-tag:hover{background:var(--mint);color:#062621;border-color:var(--mint)}
.mod__copy .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#6FE3D4;margin-bottom:.8rem}
.mod__copy h3{font-family:inherit;text-transform:none;letter-spacing:-.025em;color:#fff;font-weight:600;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;margin:0 0 1rem}
.mod__copy p{color:#C9DCE7;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6;margin:0 0 1.1rem;max-width:28rem}
.mod__copy ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mod__copy li{position:relative;padding-left:1.1rem;color:#DCEAF1;font-size:.93rem;line-height:1.45}
.mod__copy li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:#25C9B6}
.modules__rail{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;align-items:center;padding:1rem 1.25rem;background:#041A26;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.modules__rail button{display:none}
.modules__all{color:#6FE3D4;text-decoration:none;letter-spacing:.08em}
.modules__all:hover{color:#fff}
.modules__cut{display:none}

/* Wide screens with motion: one pinned stage, panels side by side. */
.modules--h .modules__pin{height:calc(100vh - var(--navh));overflow:hidden}
.modules--h .modules__track{display:flex;gap:0;width:calc(var(--n) * 100vw);height:100%;will-change:transform}
.modules--h .mod{flex:0 0 100vw;min-height:0;height:100%}
.modules--h .mod + .mod{box-shadow:-1px 0 0 rgba(111,227,212,.18)}
.modules--h .modules__rail{position:absolute;left:0;right:0;bottom:0;z-index:2;background:transparent;
  padding:1.1rem max(1.25rem,calc((100vw - 68rem)/2 + 1.25rem)) 1.35rem}
.modules--h .modules__rail button{display:inline;background:none;border:0;padding:.25rem 0;margin:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:rgba(230,242,248,.5);transition:color .2s}
.modules--h .modules__rail button:hover,.modules--h .modules__rail button[aria-current="true"]{color:#fff}
.modules--h .modules__rail button:focus-visible{outline:1px solid #25C9B6;outline-offset:4px}
.modules--h .modules__all{margin-left:auto}
.modules--h .modules__cut{display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:#25C9B6;
  transform-origin:0 50%;transform:scaleX(0);z-index:3}

@media (max-width:40rem){
  .mod{min-height:88vh}
  .mod__veil{background:linear-gradient(0deg,rgba(3,18,27,.9) 0%,rgba(3,18,27,.72) 48%,rgba(3,18,27,.1) 100%)}
  .mod__copy{bottom:2.25rem}
}

/* ---------------------------------------------------------- falcon stage ---
   Falcon continues the modules stage. Stacked (phones, reduced motion, no JS):
   a dark block after the panels, over its own aurora, the four exchanges one
   under another. Pinned (.modules--h): an overlay on the last panel, whose
   aurora keeps running underneath; site.js plays the exchanges as the page
   scrolls, so the modules hand over to Falcon without an edge. */
.fstage{position:relative;overflow:hidden;background:#051E2C;color:#E6F2F8;isolation:isolate;padding:3.5rem 0 1rem}
.fstage__bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;opacity:.85}
.fstage__inner{max-width:68rem;margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,33rem);gap:2.5rem;align-items:center}
.fstage__copy .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#6FE3D4;margin-bottom:.8rem}
.fstage__copy h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 1.6rem;max-width:26rem}
.fstage__steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:none}
.fstage__steps li{border-left:1px solid rgba(111,227,212,.28);padding:.1rem 0 .1rem 1rem}
.fstage__steps b{display:block;color:#fff;font-weight:600;font-size:1rem;margin-bottom:.15rem}
.fstage__steps span{display:block;color:#B9CFDB;font-size:.9rem;line-height:1.5;max-width:24rem}

.fchat{background:rgba(3,19,28,.9);border:1px solid rgba(111,227,212,.22);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fchat__head{display:flex;align-items:center;gap:.55rem;padding:.75rem 1rem;border-bottom:1px solid rgba(111,227,212,.16);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#6FE3D4}
.fchat__head i{width:7px;height:7px;border-radius:50%;background:#25C9B6;display:inline-block}
.fchat__body{padding:1rem;display:grid;gap:1.4rem}
.fscene{display:grid;gap:.7rem}
.fscene .u{justify-self:end;max-width:85%;margin:0;background:#0E3446;color:#fff;padding:.55rem .8rem;font-size:.9rem;line-height:1.45}
.fscene .f p{margin:0 0 .6rem;color:#DCEAF1;font-size:.9rem;line-height:1.5}
.fcard{border:1px solid rgba(111,227,212,.2);background:rgba(8,32,45,.9);padding:.75rem .85rem;display:grid;gap:.45rem;font-size:.84rem}
.fcard--confirm{border-color:rgba(199,137,26,.55);background:rgba(40,30,10,.35)}
.fcard__label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#E4B35A}
.fcard .r{display:flex;gap:.7rem;align-items:baseline;min-width:0}
.fcard .r span{flex:0 0 3.6rem;color:#8FA9B8;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem}
.fcard .r b{flex:1 1 auto;color:#fff;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard .r em{font-style:normal;color:#6FE3D4;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.74rem;white-space:nowrap}
.fcard__body{margin:.1rem 0 0;color:#C9DCE7;line-height:1.5}
.fcard__att{color:#8FA9B8;font-size:.78rem}
.fcard__btns{display:flex;gap:.5rem;align-items:center;margin-top:.2rem;position:relative;min-height:1.9rem}
.fcard__btns .btn-c{background:#25C9B6;color:#062621;font-weight:600;padding:.35rem .8rem;display:inline-block}
.fcard__btns .btn-d{border:1px solid rgba(230,242,248,.3);color:#DCEAF1;padding:.32rem .75rem;display:inline-block}
.fcard__btns .done{display:none;color:#6FE3D4;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.08em}
.fcard__meet{display:flex;flex-wrap:wrap;gap:.3rem .7rem;align-items:center;padding-bottom:.35rem;border-bottom:1px solid rgba(111,227,212,.14)}
.fcard__meet b{color:#fff;font-weight:600}
.fcard__meet span{color:#8FA9B8;font-size:.76rem}
.fcard .chip{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.15rem .45rem;margin-left:auto}
.fcard .chip--rec{display:none;background:rgba(37,201,182,.18);color:#6FE3D4}
.fcard .chip--rev{background:rgba(199,137,26,.2);color:#E4B35A}
.fstage__strip{max-width:68rem;margin:2.5rem auto 0;padding:1rem 1.25rem 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  border-top:1px solid rgba(111,227,212,.16);font-size:.84rem;color:#B9CFDB}
.fstage__strip p{margin:0;flex:1 1 26rem}
.fstage__strip a{color:#6FE3D4;text-decoration:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.fstage__strip a:hover{color:#fff}

/* Pinned: an overlay on the last panel. */
.modules--h .fstage{position:absolute;inset:0;padding:0;background:transparent;display:flex;flex-direction:column;justify-content:center;pointer-events:none;z-index:1}
.modules--h .fstage__bg{display:none}
.modules--h .fstage__inner{width:100%;padding:0 1.25rem}
.modules--h .fstage__copy,.modules--h .fchat,.modules--h .fstage__strip{pointer-events:auto}
.modules--h .fchat__body{position:relative;height:25rem;padding:0}
.modules--h .fscene{position:absolute;inset:1rem;align-content:start}
.modules--h .fcard__btns .done{display:inline-block;position:absolute;left:0;top:50%;transform:translateY(-50%)}
.modules--h .fcard .chip--rec{display:inline-block}
.modules--h .fcard .chip--rev{position:absolute;right:.85rem}
.modules--h .fcard__meet{position:relative}
.modules--h .fstage__strip{position:absolute;left:0;right:0;bottom:0;margin:0;max-width:none;border-top:0;
  padding:1.1rem max(1.25rem,calc((100vw - 68rem)/2 + 1.25rem)) 1.35rem}
.modules--h .fstage__steps li{opacity:.42}

@media (max-width:52rem){
  .fstage__inner{grid-template-columns:1fr;gap:2rem}
}

/* ---------------------------------------------------------- industry packs ---
   Light paper with a faint dot grid. Two rows: the packs, and under them the
   plans they carry. With JS and motion (.packs--run) each row is a loop that
   drifts on its own, quickens with the page's scroll and rests under the
   pointer. Otherwise each row is a sideways scroller and the copies are hidden. */
section.packs{position:relative;padding:4.25rem 0 2.25rem;border-bottom:1px solid var(--line);overflow:hidden;
  background-color:var(--sheet);
  background-image:radial-gradient(color-mix(in srgb,var(--rule) 70%,transparent) 1px,transparent 1.2px);
  background-size:22px 22px;background-position:11px 11px}
.packs__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1rem 3rem;align-items:end;margin-bottom:2.4rem}
.packs__head h2{margin:0;font-size:clamp(1.7rem,3.1vw,2.4rem);line-height:1.1;max-width:30rem}
.packs__head p{margin:0;font-size:.95rem;max-width:32rem}
.packs__row{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 max(1.25rem,calc((100vw - 68rem)/2 + 1.25rem))}
.packs__row::-webkit-scrollbar{display:none}
.packs__track{display:flex;width:max-content}
.packs__set{display:flex;gap:1rem;padding-right:1rem;margin:0;list-style:none}
.packs__clone{display:none}

.pk{flex:0 0 21rem;scroll-snap-align:start;display:flex;flex-direction:column;gap:.9rem;position:relative;
  background:var(--sheet);border:1px solid var(--line);padding:1.3rem 1.3rem 1.1rem;color:var(--ink);text-decoration:none;
  transition:border-color .2s}
.pk::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.pk:hover,.pk:focus-visible{border-color:var(--rule)}
.pk:hover::before,.pk:focus-visible::before{transform:scaleX(1)}
.pk__k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-600)}
.pk h4{margin:-.45rem 0 0;font-size:1.14rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pk__words{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.pk__words li{display:flex;align-items:baseline;gap:.55rem;font-size:.92rem}
.pk__words s{color:var(--mono-dim);text-decoration-color:color-mix(in srgb,var(--mono-dim) 70%,transparent);min-width:6.6rem}
.pk__words b{font-weight:600;color:var(--ocean)}
.pk__words li::before{content:"\2192";order:1;color:var(--rule);flex:0 0 auto;font-size:.85rem}
.pk__words s{order:0}.pk__words b{order:2}
.pk__stages{list-style:none;margin:0;padding:.75rem 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.35rem .3rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;color:var(--muted)}
.pk__stages li{display:inline-flex;align-items:center;gap:.3rem}
.pk__stages li+li::before{content:"\203A";color:var(--rule);font-size:.8rem;line-height:1}
.pk__stages li:last-child{color:var(--mint-600)}
.pk__counts{margin:auto 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:.8rem}
.pk__counts div{display:flex;flex-direction:column}
.pk__counts dd{margin:0;font-size:1.3rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.pk__counts dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mono-dim);margin-top:.2rem}
.pk__go{font-size:.86rem;color:var(--ocean);font-weight:500}
.pk--next{background:var(--mint-50);border-color:color-mix(in srgb,var(--mint) 40%,var(--line))}
.pk--next p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.pk--next .pk__go{margin-top:auto}

.packs__row--plans{margin-top:1.4rem;scroll-snap-type:none}
.packs__plans{gap:0;padding-right:0}
.packs__plans li{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:.7rem 1.6rem .7rem 0;font-size:.95rem;color:var(--ink)}
.packs__plans li i{width:6px;height:6px;background:var(--mint);flex:0 0 auto}
.packs__plans em{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mono-dim)}
.packs__row--plans{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--sheet) 82%,transparent)}

.packs__foot{display:flex;justify-content:flex-end;align-items:center;gap:1.4rem;margin-top:1.4rem}
.packs__foot a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ocean);text-decoration:none}
.packs__foot a:hover{color:var(--ink)}
.packs__pause{background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;padding:.35rem .7rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.packs__pause:hover{border-color:var(--rule);color:var(--ink)}
.packs__pause .play{display:none}
.packs__pause[aria-pressed="true"] .pause{display:none}
.packs__pause[aria-pressed="true"] .play{display:inline}

/* Running: the rows become loops, softened at both edges. */
.packs--run .packs__row{overflow:hidden;scroll-snap-type:none;padding:3px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.packs--run .packs__clone{display:flex}
.packs--run .packs__track{will-change:transform}

@media (max-width:52rem){
  .packs__head{grid-template-columns:1fr}
  .pk{flex-basis:min(19rem,84vw);padding:1.1rem 1.05rem 1rem}
  .pk__counts dt{font-size:.54rem;letter-spacing:.04em}
  .pk__words s{min-width:5.6rem}
}
/* -------------------------------------------------- industries directory ---
   A bento of the packs, then the same numbers as a table. Static and fully
   readable by default; site.js only adds the entrance and the cycling word. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rename-hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;margin-top:1.8rem;font-size:clamp(1.4rem,3vw,2rem);font-weight:600;letter-spacing:-.02em}
.rh__from s{color:var(--mono-dim);text-decoration-color:color-mix(in srgb,var(--mono-dim) 70%,transparent)}
.rh__arrow{color:var(--rule)}
.rh__to{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;color:var(--ocean)}
.rh__to li::after{content:attr(data-of);margin-left:.5rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim)}
.rh__of{display:none}
.rename-hero--run .rh__to{display:grid}
.rename-hero--run .rh__to li{grid-area:1/1;opacity:0;will-change:transform,opacity}
.rename-hero--run .rh__to li::after{display:none}
.rename-hero--run .rh__of{display:inline;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim);min-width:9rem}

.dir .bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.bt{grid-column:span 2;display:flex;flex-direction:column;gap:.85rem;position:relative;background:var(--ground);border:1px solid var(--line);
  padding:1.3rem 1.3rem 1.1rem;color:var(--ink);text-decoration:none;transition:border-color .2s}
.bt--wide{grid-column:span 3}
.bt::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.bt:hover,.bt:focus-visible{border-color:var(--rule)}
.bt:hover::before,.bt:focus-visible::before{transform:scaleX(1)}
.bt h3{margin:0;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:1.2rem;font-weight:600;text-transform:none;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.bt>p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bt--next>p{-webkit-line-clamp:unset;display:block;max-width:34rem}
.bt--wide h3{font-size:1.45rem}
.bt--next{grid-column:span 4;background:var(--mint-50);border-color:color-mix(in srgb,var(--mint) 40%,var(--line))}
.bt--next .pk__go{margin-top:auto}
.bt .pk__words s{min-width:6.6rem}
.bt .pk__counts{margin-top:auto}

.dir__h{margin:3.2rem 0 1rem;font-size:1.3rem;letter-spacing:-.01em}
.dir__table{overflow-x:auto;border:1px solid var(--line);background:var(--ground)}
.dir__table table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:36rem}
.dir__table th,.dir__table td{padding:.8rem 1rem;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.dir__table tr:last-child th,.dir__table tr:last-child td{border-bottom:0}
.dir__table th:first-child,.dir__table td:first-child{text-align:left}
.dir__table thead th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim);white-space:nowrap}
.dir__table tbody th{font-weight:600}
.dir__table tbody th a{text-decoration:none;color:var(--ink)}
.dir__table tbody tr:hover{background:var(--sheet)}
.dir__table tbody tr:hover th a{color:var(--ocean)}

@media (max-width:52rem){
  .dir .bento{grid-template-columns:1fr}
  .bt,.bt--wide,.bt--next{grid-column:auto}
}

.mine{margin-top:3.4rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:1.2rem 3rem;align-items:start}
.mine .dir__h{margin-top:0}
.mine .muted{margin:0;max-width:26rem}
.mine__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mine__list li{border:1px solid var(--line);background:var(--ground);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem}
.mine__list b{font-weight:600}
.mine__list span{color:var(--muted);font-size:.92rem;line-height:1.5}
.mine__falcon{grid-column:1/-1;margin:.4rem 0 0;padding:1.1rem 1.3rem;background:var(--mint-50);border:1px solid color-mix(in srgb,var(--mint) 40%,var(--line));font-size:.98rem;max-width:none}
@media (max-width:52rem){.mine,.mine__list{grid-template-columns:1fr}}

/* ------------------------------------------------------------- falcon reel ---
   The 30s film under the Falcon hero. A flat 16:9 frame; the mint cut draws
   across its top edge the first time it comes into view (site.js reel()). */
section.reel-band{padding:2.5rem 0 3.25rem}
.reel{margin:0;position:relative}
.reel::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--mint);z-index:1;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.reel.is-in::before{transform:scaleX(1)}
.reel__v{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#051E2C;border:1px solid var(--line)}
.reel__v::cue{font-family:"IBM Plex Sans",system-ui,sans-serif;background:rgba(3,18,27,.82);color:#EAF4F8}
.reel figcaption{margin-top:.75rem;font-size:.85rem;color:var(--muted)}
.reduced .reel::before{transition:none}
/* ------------------------------------------------------------ falcon page ---
   Static and fully readable by default. site.js adds the looping demo, the
   line that fills as the steps scroll in, and the partner/associate switch. */
.fx-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.5rem 3.5rem;align-items:center}
.fx-demo{background:var(--sheet);border:1px solid var(--line);position:relative}
.fx-demo::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint)}
.fx-demo__bar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mono-dim)}
.fx-demo__bar i{width:7px;height:7px;background:var(--mint)}
.fx-demo__body{padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.8rem;min-height:23rem}
.fx-q{align-self:flex-end;max-width:85%;background:var(--ocean-50);border:1px solid var(--line);padding:.6rem .85rem;font-size:.93rem}
.fx-a{border-left:2px solid var(--mint);padding:.1rem 0 .1rem .9rem;font-size:.93rem}
.fx-a small,.fx-prop small{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-600);margin-bottom:.3rem}
.fx-a p{margin:0}
.fx-chip{display:inline-block;margin-top:.55rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;color:var(--mono-dim);border:1px solid var(--line);padding:.15rem .5rem}
.fx-prop{border:1px solid var(--rule);background:var(--ground);padding:.85rem 1rem;position:relative;font-size:.9rem}
.fx-prop::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint)}
.fx-prop small{color:var(--ocean)}
.fx-prop>div:not(.fx-prop__go){display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-bottom:1px solid var(--line)}
.fx-prop>div span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim);padding-top:.15rem}
.fx-prop__go{display:flex;gap:.6rem;align-items:center;margin-top:.8rem}
.fx-btn{display:inline-block;background:var(--mint);color:#062621;font-weight:600;font-size:.82rem;padding:.4rem .9rem}
.fx-btn--ghost{background:none;border:1px solid var(--rule);color:var(--muted);font-weight:500}
.fx-prop__go em{font-style:normal;font-size:.8rem;color:var(--mint-600)}


.fx-steps{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 1.4rem;position:relative}
.fx-steps::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.fx-steps::after{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--mint);transform:scaleX(var(--fill,1));transform-origin:left}
.fx-steps li{position:relative;padding-top:1.6rem;display:flex;flex-direction:column;gap:.35rem}
.fx-steps li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;background:var(--sheet);border:2px solid var(--mint);z-index:1}
.fx-steps b{font-weight:600}
.fx-steps span{color:var(--muted);font-size:.9rem;line-height:1.5}

.fxb{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-top:1.2rem}
.fxb__i{grid-column:span 2;background:var(--sheet);border:1px solid var(--line);padding:1.4rem;position:relative;transition:border-color .2s}
.fxb__i--3{grid-column:span 3}
.fxb__i::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.fxb__i:hover{border-color:var(--rule)}
.fxb__i:hover::before{transform:scaleX(1)}
.fxb__i h4{margin:0 0 .4rem;font-size:1.05rem;font-weight:600}
.fxb__i p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}

section.fx-sec{background:var(--ocean-900);color:#E8EEF3;border-bottom:1px solid var(--line)}
.fx-sec h2{color:#fff}
.fx-sec h3{color:var(--mint)}
.fx-sec a{color:#7fd6cc}
.fx-sec__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2rem 3.5rem;margin-top:1.8rem;align-items:start}
.fx-who{background:#0F1F2C;border:1px solid #2A3E50;padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;position:relative}
.fx-who::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint)}
.fx-who .fx-q{background:#12293a;border-color:#2A3E50;color:#E8EEF3}
.fx-who .fx-a{color:#E8EEF3;min-height:6.4rem}
.fx-who__tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.fx-who__tabs button{background:none;border:1px solid #2A3E50;color:#9BAAB8;cursor:pointer;padding:.45rem .8rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.fx-who__tabs button[aria-pressed="true"]{border-color:var(--mint);color:#fff}
.fx-who__note{margin:0;font-size:.86rem;color:#9BAAB8;line-height:1.5}
.fx-safe{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fx-safe li{padding:.85rem 0;border-bottom:1px solid #1E3040;display:flex;flex-direction:column;gap:.2rem}
.fx-safe li:first-child{padding-top:0}
.fx-safe b{font-weight:600;color:#fff}
.fx-safe span{color:#9BAAB8;font-size:.9rem;line-height:1.5}
.fx-sec__foot{display:flex;gap:1.6rem;margin:2rem 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.fx-sec__foot a{text-decoration:none}

.fxw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
.fxw__i{border:1px solid var(--line);background:var(--ground);padding:1.6rem;position:relative}
.fxw__i::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.fxw__i:hover::before{transform:scaleX(1)}
.fxw__i h3{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:1.25rem;font-weight:600;text-transform:none;letter-spacing:-.01em;color:var(--ink);margin:0 0 .5rem}
.fxw__i p{margin:0;color:var(--muted);line-height:1.6}

@media (max-width:52rem){
  .fx-hero,.fx-sec__grid,.fxw{grid-template-columns:1fr}
  .fxb{grid-template-columns:1fr}
  .fxb__i,.fxb__i--3{grid-column:auto}
  .fx-steps{grid-template-columns:1fr;gap:1.2rem 0;padding-left:1.6rem}
  .fx-steps::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .fx-steps::after{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:none}
  .fx-steps li{padding-top:0}
  .fx-steps li::before{left:-1.6rem;top:.25rem}
  .fx-demo__body{min-height:0}
}

/* ----------------------------------------------------------- product page ---
   Drawn complete by default. site.js sets a start state and plays each sketch as it
   scrolls into view, and runs the thread in the hero. Transform and opacity only. */
.pd-thread{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 .8rem;position:relative;max-width:64rem}
.pd-thread::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--rule)}
.pd-thread li[data-node]{position:relative;padding-top:1.5rem;display:flex;flex-direction:column;gap:.25rem}
.pd-thread li[data-node]::before{content:"";position:absolute;left:0;top:1px;width:11px;height:11px;background:var(--sheet);border:2px solid var(--mint)}
.pd-thread li[data-node]::after{content:"";position:absolute;left:0;top:5px;height:2px;width:100%;background:var(--mint);transform:scaleX(var(--on,1));transform-origin:left}
.pd-thread span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-600)}
.pd-thread b{font-weight:500;font-size:.88rem;line-height:1.4;color:var(--ink)}
.pd-thread__dot{display:none}
.pd-thread--run .pd-thread__dot{display:block;position:absolute;left:0;top:2px;width:9px;height:9px;background:var(--ocean);z-index:2;will-change:transform}

.pd-mock{display:flex;flex-direction:column}
.pd-bar{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mono-dim);flex:0 0 auto}
.pd-bar i{width:7px;height:7px;background:var(--mint)}
.pd-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.8rem;font-size:.82rem;flex:1;min-height:0}
.pd-note{margin-top:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.06em;color:var(--mono-dim)}
.pd-search{display:flex;justify-content:space-between;border:1px solid var(--line);padding:.5rem .7rem;color:var(--mono-dim)}
.pd-search em{font-style:normal;color:var(--ink)}
.pd-rows,.pd-gantt,.pd-cap{list-style:none;margin:0;padding:0}
.pd-rows li{display:grid;grid-template-columns:1.3fr 1fr auto;gap:.8rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--line)}
.pd-rows b{font-weight:600}
.pd-rows span{color:var(--muted)}
.pd-rows em,.pd-inv em{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.06em;color:var(--mint-600)}

.pd-kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;align-items:start}
.pd-kan h5{margin:0 0 .5rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim)}
.pd-card,.pd-slot{margin:0;padding:.6rem .7rem;border:1px solid var(--line);background:var(--ground);display:flex;flex-direction:column;gap:.15rem;min-height:3.2rem}
.pd-card b{font-weight:600}
.pd-card span{color:var(--muted)}
.pd-card--go{border-color:var(--mint);will-change:transform}
.pd-slot{border-style:dashed;color:var(--mono-dim);font-size:.72rem;justify-content:center;align-items:center}

.pd-gantt{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem}
.pd-gantt li{display:grid;grid-template-columns:5.5rem 1fr;gap:.8rem;align-items:center}
.pd-gantt span{color:var(--muted)}
.pd-gantt i{display:block;height:.9rem;margin-left:calc(var(--s) * 1%);width:calc(var(--w) * 1%);background:var(--ocean);transform-origin:left;will-change:transform}
.pd-gantt i.pd-ms{background:var(--mint);width:.9rem}

.pd-week{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.pd-week span{border:1px solid var(--line);padding:.5rem .6rem;display:flex;flex-direction:column;background:var(--ground)}
.pd-week em{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim)}
.pd-week b{font-size:1.1rem;font-weight:600}
.pd-inv{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border:1px solid var(--line);padding:.55rem .7rem;background:var(--ground)}
.pd-inv b{font-weight:600}
.pd-margin{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;color:var(--muted)}
.pd-margin div{height:.6rem;background:var(--line)}
.pd-margin i{display:block;height:100%;background:var(--mint);transform:scaleX(var(--m));transform-origin:left;will-change:transform}
.pd-margin b{color:var(--ink);font-weight:600;min-width:2.4rem;text-align:right}

.pd-cap{display:flex;flex-direction:column;gap:.75rem}
.pd-cap li{display:grid;grid-template-columns:3.5rem 1fr 2.6rem;gap:.8rem;align-items:center}
.pd-cap div{height:.6rem;background:var(--line)}
.pd-cap i{display:block;height:100%;background:var(--ocean);transform:scaleX(var(--c));transform-origin:left;will-change:transform}
.pd-cap b{text-align:right;font-weight:600}
.pd-body--chat .fx-q{font-size:.82rem}
.pd-body--chat .fx-a,.pd-body--chat .fx-prop{font-size:.82rem}

.pd-words{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem 3.5rem;align-items:start}
.pd-words h2{margin:.2rem 0 .8rem}
.pd-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.pd-tabs button{background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;padding:.5rem .8rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.pd-tabs button:hover{border-color:var(--rule);color:var(--ink)}
.pd-tabs button[aria-pressed="true"]{border-color:var(--mint);color:var(--ink)}
.pd-vocab{background:var(--sheet);border:1px solid var(--line);position:relative}
.pd-vocab::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint)}
.pd-vocab__list{list-style:none;margin:0;padding:.6rem 1.1rem 1rem;display:grid}
.pd-vocab__list li{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:1rem}
.pd-vocab__list li:last-child{border-bottom:0}
.pd-vocab__list s{min-width:8rem;color:var(--mono-dim);text-decoration-color:color-mix(in srgb,var(--mono-dim) 70%,transparent)}
.pd-vocab__list li::before{content:"\2192";order:1;color:var(--rule)}
.pd-vocab__list s{order:0}.pd-vocab__list b{order:2;color:var(--ocean);font-weight:600}

@media (max-width:52rem){
  .pd-thread{grid-template-columns:1fr;gap:1rem 0;padding-left:1.6rem;margin-top:1.8rem}
  .pd-thread::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .pd-thread li[data-node]{padding-top:0}
  .pd-thread li[data-node]::before{left:-1.6rem;top:.2rem}
  .pd-thread li[data-node]::after{display:none}
  .pd-words{grid-template-columns:1fr}
  .feature .shot.pd-mock{aspect-ratio:auto;min-height:19rem}
}
.pd-vocab__list[hidden]{display:none}
.feature .shot.pd-mock{aspect-ratio:auto;min-height:16rem}

/* ------------------------------------------------------- company home page ---
   Cut Above Technologies and its product showcase pages. Drawn complete by default;
   site.js plays the scenes and the hero. Transform and opacity only. */
.brand__sub{font-style:normal;font-weight:400;color:var(--mono-dim)}
nav.top .brand__sub{color:#9BAAB8}
@media (max-width:52rem){.brand__sub{display:none}}

.cp-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.5rem 3.5rem;align-items:center}
.cp-beta{margin:1.2rem 0 0;padding:.7rem 1rem;border:1px solid color-mix(in srgb,var(--mint) 45%,var(--line));background:var(--mint-50);font-size:.92rem;max-width:34rem}
.cp-go{font-weight:600;text-decoration:none}
.cp-go:hover{text-decoration:underline}

.cp-claim{background:var(--sheet);border:1px solid var(--line);position:relative}
.cp-claim::before,.sc::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint)}
.cp-checks{list-style:none;margin:0;padding:0}
.cp-checks li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;align-items:baseline;padding:.95rem 1.2rem;border-bottom:1px solid var(--line)}
.cp-checks i{grid-row:1/3;width:11px;height:11px;background:var(--mint);align-self:center}
.cp-checks b{font-weight:600}
.cp-checks span{color:var(--muted);font-size:.9rem}
.cp-claim__stamp{padding:.85rem 1.2rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-600)}

.sc__bar{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mono-dim)}
.sc__bar i{width:7px;height:7px;background:var(--mint)}
.cp-claim .sc__bar{border-bottom:1px solid var(--line)}
.sc{background:var(--sheet);border:1px solid var(--line);position:relative;display:flex;flex-direction:column}
.sc__body{padding:1.1rem;display:flex;flex-direction:column;gap:.8rem;font-size:.88rem;flex:1}
.cp-row .shot.cp-shot,.feature .shot.cp-shot{aspect-ratio:auto;background:none;border:0;overflow:visible}
.cp-shot .sc{min-height:19rem}
.cp-shot .sc::after{display:none}
.feature .shot.cp-shot::after{display:none}
.sc-find{border:1px solid var(--rule);background:var(--ground);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.35rem;position:relative}
.sc-find::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--ocean)}
.sc-find small,.sc-sup span,.sc-act em{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim)}
.sc-find b{font-weight:600;font-size:1rem}
.sc-find p{margin:0;color:var(--muted);line-height:1.5}
.sc-find .fx-chip{align-self:flex-start;margin-top:.2rem}
.sc-act{display:flex;gap:.6rem;align-items:center}
.sc-cov{list-style:none;margin:0;padding:.8rem 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.sc-cov b{display:block;font-size:1.3rem;font-weight:600;line-height:1.1}
.sc-cov span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mono-dim)}
.sc-sup{display:flex;flex-direction:column;gap:.15rem}
.sc-sup b{font-size:1.05rem;font-weight:600}
.sc-chk{list-style:none;margin:0;padding:0}
.sc-chk li{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line)}
.sc-chk i{width:11px;height:11px;background:var(--mint)}
.sc-chk span{font-weight:500}
.sc-chk em{font-style:normal;color:var(--muted);font-size:.82rem}
.sc-badge{align-self:flex-start;background:var(--mint);color:#062621;font-weight:600;padding:.45rem .9rem;display:flex;gap:.8rem;align-items:baseline}
.sc-badge em{font-style:normal;font-weight:400;font-size:.76rem}
.sc-acc{list-style:none;margin:0;padding:0}
.sc-acc li{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line)}
.sc-b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border:1px solid var(--line)}
.sc-b--ok{background:var(--mint);color:#062621;border-color:var(--mint)}
.sc-b--part{color:var(--ink);border-color:var(--rule)}
.sc-b--un{color:var(--mono-dim);border-style:dashed}
.sc-note{margin:0;color:var(--muted);line-height:1.5}
.sc-mod{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.sc-mod li{border:1px dashed var(--rule);padding:1.1rem .5rem;text-align:center;color:var(--mono-dim)}

.cp-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem 3.5rem;align-items:start}
.cp-about h2{margin:.2rem 0 .8rem}
.cp-ways{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.cp-ways li{border:1px solid var(--line);background:var(--sheet);padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.3rem}
.cp-ways b{font-weight:600}
.cp-ways span{color:var(--muted);line-height:1.5}

.cp-t__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.cp-t__st{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-600)}
.cp-t__st--soon{color:var(--mono-dim)}
.cp-t__ar{font-size:1.3rem;color:var(--mono-dim);line-height:1}
.fx-steps{grid-template-columns:repeat(var(--cols,5),minmax(0,1fr))}

@media (max-width:52rem){
  .cp-hero,.cp-about{grid-template-columns:1fr}
  .fx-steps{grid-template-columns:1fr}
  .cp-shot .sc{min-height:0}
}

/* Each product's sketch wears its own accent (set inline as --pa). */
.cp-claim::before,.sc::before{background:var(--pa,var(--mint))}
.sc__bar i,.sc-chk i{background:var(--pa,var(--mint))}
.sc .fx-btn:not(.fx-btn--ghost){background:var(--pa,var(--mint));color:var(--pa-ink,#062621)}
.sc-badge{background:var(--pa,var(--mint));color:var(--pa-ink,#062621)}
.sc[data-scene="shfaaf"] .sc-b--ok{background:#4c7a52;border-color:#4c7a52;color:#fff}
.sc[data-scene="shfaaf"] .sc-b--part{color:#a8790f;border-color:#a8790f}

/* --------------------------------------------------------- cinematic home ---
   Dark first. Full-screen product scenes pinned one after another on desktop;
   a plain stack on phones and with reduced motion. Transform and opacity only. */
.cx-intro{display:none}
.intro .cx-intro{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:grid;place-items:center;align-content:center;gap:2rem;text-align:center}
.intro,.intro body{overflow:hidden}
.cx-intro__mark{width:2.6rem;height:2.6rem;color:#fff}
.cx-intro__mark svg{width:100%;height:100%;display:block}
.cx-intro__t{margin:0;font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:300;letter-spacing:.01em;display:flex;gap:.5em;flex-wrap:wrap;justify-content:center}
.cx-intro__bar{position:absolute;left:50%;bottom:3.5rem;width:min(16rem,50vw);height:1px;background:rgba(255,255,255,.18);transform:translateX(-50%)}
.cx-intro__bar i{display:block;height:100%;background:var(--mint);transform-origin:left;transform:scaleX(0)}

.cx-hero{min-height:calc(100vh - 3.6rem);display:flex;align-items:center;padding:6rem 0 4rem}
.cx-hero>.wrap{width:100%}
.cx-h1{font-weight:200;font-size:clamp(3rem,9.5vw,8.6rem);line-height:.98;letter-spacing:-.04em;margin:.6rem 0 0;max-width:15ch}
.cx-h1 em{font-weight:300}
.cx-hero__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:2rem 4rem;align-items:start;margin-top:3rem}
.cx-hero .lede{font-size:1.25rem;max-width:34rem}

.cx-say{padding:7rem 0}
.cx-say__t{margin:0;font-weight:200;font-size:clamp(1.8rem,4.2vw,3.6rem);line-height:1.18;letter-spacing:-.02em;max-width:26ch}

.cx-prods{background:#000}
.cx-prod{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:radial-gradient(60% 55% at 78% 45%,color-mix(in srgb,var(--pa,#25C9B6) 22%,transparent),transparent 70%),#05080c;color:#E8EEF3}
.cx-prod:nth-child(even){background:radial-gradient(60% 55% at 22% 45%,color-mix(in srgb,var(--pa,#25C9B6) 22%,transparent),transparent 70%),#0c0f14}
.cx-prod__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 5rem;align-items:center;width:100%;padding-block:4rem}
.cx-prod:nth-child(even) .cx-prod__copy{order:2}
.cx-prod__name{font-weight:200;font-size:clamp(3rem,7.5vw,7rem);line-height:1;letter-spacing:-.04em;margin:.5rem 0 1.2rem;color:#fff}
.cx-prod__line{margin:0 0 1.3rem;font-size:1.2rem;line-height:1.5;color:#B9C6D2;max-width:30rem}
.cx-prod .plain{color:#C9D4DD}
.cx-prod .cp-t__st{color:var(--pa,#25C9B6)}
.cx-prod .cp-go{color:#fff;border-bottom:1px solid var(--pa,#25C9B6);padding-bottom:.15rem}
.cx-prod__go{margin:1.4rem 0 0}
.cx-prod__scene .sc{min-height:24rem;font-size:1rem}
.cx-prod .sc{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#E8EEF3}
.cx-prod .sc__bar{border-color:rgba(255,255,255,.14);color:#8E9DAB}
.cx-prod .sc .fx-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.cx-prod .sc .fx-a,.cx-prod .sc-find p,.cx-prod .sc-note,.cx-prod .sc-chk em{color:#B9C6D2}
.cx-prod .sc .fx-prop,.cx-prod .sc-find{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.18)}
.cx-prod .sc .fx-btn--ghost,.cx-prod .sc-b{color:#B9C6D2;border-color:rgba(255,255,255,.22)}
.cx-prod .sc-cov span,.cx-prod .sc-find small,.cx-prod .sc-sup span,.cx-prod .sc-act em,.cx-prod .sc .fx-chip{color:#8E9DAB;border-color:rgba(255,255,255,.18)}
.cx-prod .sc-chk li,.cx-prod .sc-acc li,.cx-prod .sc-cov{border-color:rgba(255,255,255,.12)}
.cx-prod .sc-mod li{border-color:rgba(255,255,255,.22);color:#8E9DAB}
.cx-prod .sc-b--ok{background:#4c7a52;border-color:#4c7a52;color:#fff}
.cx-prod .sc-b--part{color:#d9a63a;border-color:#a8790f}

.cx-ways{padding:8rem 0}
.cx-ways__lede{font-weight:200;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.2;letter-spacing:-.02em;max-width:30ch;margin:.4rem 0 3rem}
.cx-ways__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cx-ways__list li{background:var(--ground);padding:2rem 1.6rem;display:flex;flex-direction:column;gap:.6rem}
.cx-ways__list b{font-weight:300;font-size:1.6rem;letter-spacing:-.01em}
.cx-ways__list span{color:var(--muted);line-height:1.55}

.cx-end{padding:9rem 0 7rem}
.cx-end__t{margin:0 0 1rem;font-weight:200;font-size:clamp(3rem,9vw,8rem);line-height:1;letter-spacing:-.04em}

@media (max-width:56rem){
  .cx-hero{min-height:0;padding:4rem 0}
  .cx-hero__row,.cx-prod__in,.cx-ways__list{grid-template-columns:1fr}
  .cx-prod{min-height:0}
  .cx-prod:nth-child(even) .cx-prod__copy{order:0}
  .cx-prod__scene .sc{min-height:0}
  .cx-say,.cx-ways,.cx-end{padding:4.5rem 0}
}

/* Richer backgrounds and stacked scenes (replaces the flat gradients and the pinning above). */
.cx-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cx-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 45%,#000,transparent 88%);mask-image:radial-gradient(75% 65% at 50% 45%,#000,transparent 88%)}
.cx-bg::after{content:"";position:absolute;inset:0;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.cx-bg i{position:absolute;width:78vmax;height:78vmax;will-change:transform;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pa,#25C9B6) 62%,transparent),transparent)}
.cx-bg i+i{width:64vmax;height:64vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--pb,#087EAD) 55%,transparent),transparent)}
.cx-bg i:first-child{left:-22vmax;top:-30vmax;animation:cx-drift 19s ease-in-out infinite alternate}
.cx-bg i+i{right:-20vmax;bottom:-32vmax;animation:cx-drift 24s ease-in-out infinite alternate-reverse}
@keyframes cx-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(7vmax,5vmax,0)}}
.reduced .cx-bg i,.cx-bg--still i{animation:none}
@media (prefers-reduced-motion:reduce){.cx-bg i{animation:none}}

.cx-hero,.cx-say,.cx-end,.cx-ways{position:relative;overflow:hidden}
.cx-hero>.wrap,.cx-say>.wrap,.cx-end>.wrap,.cx-ways>.wrap{position:relative;z-index:1}
.cx-hero .cx-bg{z-index:0}
.cx-hero .shader,.cx-hero .veil{z-index:0}

.cx-prods{background:#04070b}
.cx-prod,.cx-prod:nth-child(even){background:linear-gradient(165deg,#0a1520 0%,#04070b 60%)}
.cx-prod__in{position:relative;z-index:1}
.cx-prod__cut{position:absolute;left:0;top:0;width:100%;height:2px;background:var(--pa,#25C9B6);transform-origin:left;z-index:2}
.cx-prod .sc{background:rgba(8,16,24,.62);border-color:rgba(255,255,255,.16)}
.cx-hero .eyebrow{color:#8fe3d8}
.cx-prod .cp-t__st{color:color-mix(in srgb,var(--pa,#25C9B6) 35%,#fff)}
.cx-prod .cp-t__st--soon{color:#9BB0C2}

/* Energy: masked word and letter reveals, a marquee, and glows that drift with the scroll. */
@keyframes cx-drift{from{translate:0 0}to{translate:7vmax 5vmax}}
.cx-bg i{will-change:transform,translate}
.cx-wd,.cx-ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em}
.cx-wd>i,.cx-ch>i{display:inline-block;font-style:normal}
.cx-h1{max-width:14ch}
.cx-h1 em{display:inline-block}
.cx-prod__name{padding-top:.1em}

/* The intro: it stays until the visitor scrolls, and it breathes. */
.intro .cx-intro{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;text-align:center;padding:0 1.5rem;overflow:hidden;cursor:pointer}
.cx-intro__glow{position:absolute;left:50%;top:50%;width:92vmin;height:92vmin;margin:-46vmin 0 0 -46vmin;background:radial-gradient(closest-side,rgba(37,201,182,.5),rgba(8,126,173,.22) 55%,transparent);will-change:transform}
.cx-intro__mark{position:relative;width:3.4rem;height:3.4rem;color:#fff}
.cx-intro__t{position:relative;margin:0;font-weight:200;font-size:clamp(2.6rem,7.4vw,6.8rem);line-height:1.02;letter-spacing:-.04em;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .26em;max-width:13ch;will-change:transform}
.cx-intro__t [data-w]{display:inline-block}
.cx-intro__t [data-hl]{color:#5fe1cf;font-weight:300}
.cx-intro__go{position:absolute;left:0;right:0;bottom:2.6rem;margin:auto;width:max-content;visibility:hidden;opacity:0;background:none;border:0;color:#BFD3DC;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}
.cx-intro__go svg{width:1.5rem;height:1.5rem}
.cx-intro__go:hover,.cx-intro__go:focus-visible{color:#fff}
.cx-nw{display:inline-block;white-space:nowrap}

/* Logos */
.cx-logo{display:inline-flex;align-items:center;margin-bottom:1.4rem;color:#fff}
.cx-logo img,.cx-logo svg{display:block;height:2.6rem;width:auto}
.cx-logo--cms svg{height:3rem;width:3rem}
.cx-logo--musaddaq img{height:3.4rem}
.cx-logo--air{background:#0a1626;padding:.55rem .8rem}
.cx-logo--air img{height:2.4rem}
.cx-logo--shfaaf{background:#f6efe0;padding:.5rem .9rem}
.cx-logo--shfaaf img{height:2.4rem}

/* Products as a full-screen vertical slider (the page scrolls natively and snaps to each product). */
.cx-dots,.cx-arrow{display:none}
.cx-prods--slider{height:calc(var(--n,5) * 100vh);position:relative}
.cx-prods--slider .cx-prods__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.cx-prods--slider .cx-prod{position:absolute;inset:0;height:100%;min-height:0}
.cx-prods--slider .cx-prod:first-of-type{visibility:visible}
.cx-prods--slider.is-drag{cursor:grabbing;user-select:none}
.cx-prods--slider .cx-dots{display:flex;position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);flex-direction:column;gap:1rem;z-index:6}
.cx-dots button{position:relative;width:11px;height:11px;border:1px solid rgba(255,255,255,.65);background:transparent;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.cx-dots button:hover,.cx-dots button:focus-visible{transform:scale(1.3)}
.cx-dots button.is-on{background:var(--mint);border-color:var(--mint)}
.cx-dots button span{position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.65);padding:.25rem .55rem;opacity:0;pointer-events:none;transition:opacity .2s}
.cx-dots button:hover span,.cx-dots button:focus-visible span{opacity:1}
.cx-prods--slider .cx-arrow{display:grid;place-items:center;position:absolute;left:0;right:0;margin:auto;width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.3);color:#fff;cursor:pointer;z-index:6;transition:background .2s,border-color .2s,opacity .2s}
.cx-arrow svg{width:1.3rem;height:1.3rem}
.cx-arrow--up{top:5.2rem}
.cx-arrow--down{bottom:1.6rem}
.cx-arrow:hover{background:var(--mint);border-color:var(--mint);color:#062621}
.cx-arrow.is-off{opacity:.35}
@media (max-width:56rem){.cx-prods__stage{display:block}}

/* ------------------------------------------------------ showcase pages (dark, cinematic) ---
   Hero with parallax, a fixed vertical scroll, a bento, the limits, and a way to the other products. */
.sx-page{background:#04070b;color:#E8EEF3}
.sx-page .band{background:transparent;border-color:rgba(255,255,255,.08)}
.sx-page h3{color:#8FE3D8}
.sx-page .muted{color:#9BB0C2}
.sx-hero{min-height:calc(100vh - 3.6rem);display:flex;align-items:center;padding:5rem 0 4rem;position:relative;overflow:hidden}
.sx-hero>.wrap{width:100%;position:relative;z-index:1}
.sx-hero__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:center}
.sx-h1{font-size:clamp(2.4rem,4.8vw,4.5rem);max-width:16ch;margin-top:.8rem}
.sx-hero .lede{font-size:1.15rem;max-width:34rem;margin-top:1.2rem}
.sx-hero .cp-beta{background:rgba(255,255,255,.06);color:#E8EEF3;border-color:rgba(255,255,255,.2)}
.sx-hero .cta{margin-top:1.6rem}
.sx-hero__scene .sc{min-height:24rem;background:rgba(8,16,24,.62);border-color:rgba(255,255,255,.16);color:#E8EEF3}
.sx-page .sc__bar{border-color:rgba(255,255,255,.14);color:#8E9DAB}
.sx-page .sc .fx-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.sx-page .sc .fx-a,.sx-page .sc-find p,.sx-page .sc-note,.sx-page .sc-chk em{color:#B9C6D2}
.sx-page .sc .fx-prop,.sx-page .sc-find{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.18)}
.sx-page .sc .fx-btn--ghost,.sx-page .sc-b{color:#B9C6D2;border-color:rgba(255,255,255,.22)}
.sx-page .sc-cov span,.sx-page .sc-find small,.sx-page .sc-sup span,.sx-page .sc-act em,.sx-page .sc .fx-chip{color:#8E9DAB;border-color:rgba(255,255,255,.18)}
.sx-page .sc-chk li,.sx-page .sc-acc li,.sx-page .sc-cov{border-color:rgba(255,255,255,.12)}
.sx-page .sc-b--ok{background:#4c7a52;border-color:#4c7a52;color:#fff}
.sx-page .sc-b--part{color:#d9a63a;border-color:#a8790f}

.sx-fixed,.sx-bento-sec,.sx-close,.sx-more{position:relative}
.sx-bento-sec{overflow:hidden}
.sx-fixed__stage{position:relative}
.sx-fixed__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 5rem;align-items:center;padding-block:5rem}
.sx-fixed__copy{position:relative;padding-left:1.8rem}
.sx-rail{position:absolute;left:0;top:3.2rem;bottom:0;width:2px;background:rgba(255,255,255,.14)}
.sx-rail i{display:block;position:absolute;inset:0;background:var(--pa,var(--mint));transform-origin:top;transform:scaleY(1)}
.sx-steps{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:2rem}
.sx-step{display:flex;flex-direction:column;gap:.6rem}
.sx-step b{font-weight:200;font-size:clamp(2rem,4.4vw,4rem);line-height:1.04;letter-spacing:-.035em;color:#fff}
.sx-step span{color:#B9C6D2;font-size:1.1rem;line-height:1.55;max-width:30rem}
.sx-fixed__scene .sc{min-height:24rem;background:rgba(8,16,24,.62);border-color:rgba(255,255,255,.16);color:#E8EEF3}
.sx-fixed--on{height:calc(var(--n,5) * 72vh + 100vh)}
.sx-fixed--on .sx-fixed__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.sx-fixed--on .sx-fixed__in{width:100%;padding-block:0}
.sx-fixed--on .sx-steps{position:relative;display:block;min-height:15rem;margin-top:2rem}
.sx-fixed--on .sx-step{position:absolute;left:0;right:0;top:0}
.sx-fixed--on .sx-rail{bottom:auto;height:calc(100% - 3.2rem)}
.sx-fixed--on .sx-rail i{transform:scaleY(0)}

.sx-h2{font-weight:200;font-size:clamp(2rem,4.6vw,4rem);letter-spacing:-.035em;line-height:1.05;margin:.4rem 0 2.4rem;color:#fff}
.sx-bento-sec,.sx-close,.sx-more{padding:6rem 0}
.sx-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;position:relative}
.sx-tile{position:relative;overflow:hidden;grid-column:span 2;min-height:13rem;padding:1.6rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.6rem;transition:border-color .25s}
.sx-tile::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--pa,var(--mint));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sx-tile:hover{border-color:rgba(255,255,255,.28)}
.sx-tile:hover::before{transform:scaleX(1)}
.sx-spot{position:absolute;left:0;top:0;width:22rem;height:22rem;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(closest-side,color-mix(in srgb,var(--pa,var(--mint)) 32%,transparent),transparent)}
.sx-tile:hover .sx-spot{opacity:1}
.sx-tile h4{position:relative;margin:0;font-weight:300;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.02em;color:#fff}
.sx-tile p{position:relative;margin:0;color:#B9C6D2;line-height:1.6}
.sx-bento--6 .sx-tile:nth-child(1){grid-column:span 4}
.sx-bento--6 .sx-tile:nth-child(4){grid-column:span 4}
.sx-bento--6 .sx-tile:nth-child(5),.sx-bento--6 .sx-tile:nth-child(6){grid-column:span 3}
.sx-bento--5 .sx-tile:nth-child(1),.sx-bento--5 .sx-tile:nth-child(2){grid-column:span 3}
.sx-bento--6 .sx-tile:nth-child(1) h4,.sx-bento--5 .sx-tile:nth-child(1) h4{font-size:clamp(1.6rem,3vw,2.6rem)}

.sx-more__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1.4rem}
.sx-more__i{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#fff;text-decoration:none;transition:border-color .25s,transform .25s}
.sx-more__i:hover{border-color:var(--mint);transform:translateY(-4px)}
.sx-more__i b{font-weight:300;font-size:1.4rem;letter-spacing:-.01em}
.sx-more__i>span:last-child{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#8E9DAB}
.sx-more__i .cx-logo{margin-bottom:.4rem}

@media (max-width:56rem){
  .sx-hero{min-height:0;padding:3.5rem 0}
  .sx-hero__in,.sx-fixed__in{grid-template-columns:1fr}
  .sx-fixed__in{padding-block:3.5rem}
  .sx-bento{grid-template-columns:1fr}
  .sx-bento .sx-tile{grid-column:auto!important;min-height:0}
  .sx-bento-sec,.sx-close,.sx-more{padding:4rem 0}
  .sx-rail{display:none}
  .sx-fixed__copy{padding-left:0}
}
.sx-fixed__stage .cx-bg{z-index:0}
.sx-close__t{margin:0 0 2rem;font-weight:200;font-size:clamp(2.2rem,5.6vw,4.8rem);line-height:1.05;letter-spacing:-.04em;color:#fff}

/* ------------------------------------------------- price comparison (the /cms hero item) ---
   Drawn complete by default (the team of eight); site.js re-prices it from the slider. */
section.cmp{padding:5.5rem 0;background:var(--sheet);border-bottom:1px solid var(--line)}
.cmp__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:2.5rem 4rem;align-items:start}
.cmp h2{font-weight:300;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.04;letter-spacing:-.035em;margin:.3rem 0 1rem;max-width:14ch}
.cmp .lede{max-width:34rem}
.cmp__pts{list-style:none;margin:1.6rem 0 1.6rem;padding:0;display:grid;gap:1rem}
.cmp__pts li{display:flex;flex-direction:column;gap:.15rem;padding-left:1.1rem;position:relative}
.cmp__pts li::before{content:"";position:absolute;left:0;top:.6em;width:.55rem;height:2px;background:var(--mint)}
.cmp__pts b{font-weight:600}
.cmp__pts span{color:var(--muted);line-height:1.5;font-size:.95rem}
.cmp__card{border:1px solid var(--line);background:var(--ground);padding:1.5rem;position:relative}
.cmp__card::before{content:"";position:absolute;left:-1px;top:-1px;height:2px;width:calc(100% + 2px);background:var(--mint)}
.cmp__ctl{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;margin-bottom:1.4rem}
.cmp__ctl label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mono-dim)}
.cmp__ctl output{font-size:2.4rem;font-weight:200;letter-spacing:-.03em;line-height:1;justify-self:end}
.cmp__ctl input{grid-column:1/-1;width:100%;accent-color:var(--mint);cursor:pointer;margin:.6rem 0 0}
.cmp__rows{display:grid;gap:.9rem}
.cmp__row{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr) 4.6rem;gap:1rem;align-items:center}
.cmp__name{font-weight:600;line-height:1.2}
.cmp__name small{display:block;font-weight:400;font-size:.74rem;color:var(--muted);margin-top:.15rem}
.cmp__track{height:.8rem;background:var(--line)}
.cmp__track i{display:block;height:100%;background:var(--ocean);transform:scaleX(var(--w,1));transform-origin:left;will-change:transform}
.cmp__row--us .cmp__track i{background:var(--mint)}
.cmp__val{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.cmp__row--us .cmp__val{color:var(--mint-600)}
.cmp__note{margin:1.2rem 0 0;color:var(--muted);font-size:.8rem;line-height:1.55}
.cmp__src{margin-top:2rem;border-top:1px solid var(--line);padding-top:1rem}
.cmp__src summary{cursor:pointer;color:var(--ocean);font-weight:500}
.cmp__tablewrap{overflow-x:auto;margin:1rem 0}
.cmp__src table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:44rem}
.cmp__src th,.cmp__src td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line)}
.cmp__src thead th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mono-dim);white-space:nowrap}
.cmp__src tbody th{font-weight:600}
@media (max-width:56rem){
  .cmp__in{grid-template-columns:1fr}
  section.cmp{padding:3.5rem 0}
  .cmp__row{grid-template-columns:minmax(0,1fr) 4.6rem;grid-template-areas:"name val" "track track";gap:.35rem 1rem}
  .cmp__name{grid-area:name}.cmp__val{grid-area:val}.cmp__track{grid-area:track}
}
.proof a{color:inherit;text-decoration:none;border-bottom:1px solid var(--mint)}
.proof a:hover{color:var(--ink)}