/* ==========================================================================
   Golf Simulators For Less
   Design system. Dark canvas, one loud green, photography does the talking.
   No framework. No utility soup. Everything here is used.
   ========================================================================== */

:root{
  /* Ink */
  --ink-900:#07090A;
  --ink-850:#0A0D0E;
  --ink-800:#0E1214;
  --ink-750:#12181A;
  --ink-700:#182022;
  --ink-600:#222C2E;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  /* Paper */
  --paper:#F4F7F1;
  --paper-2:#E7ECE2;

  /* Brand green, anchored on the logo and brightened for screen */
  --g-900:#16210A;
  --g-700:#5E9022;
  --g-600:#74AF2A;
  --g-500:#8CC63F;
  --g-400:#A6E04A;
  --g-300:#C6F45E;

  --txt:#E8EDE6;
  --txt-dim:#9AA69B;
  --txt-faint:#6B776D;

  --radius:3px;
  --radius-lg:6px;

  --wrap:1280px;
  --gut:clamp(1.1rem,4vw,2.75rem);

  --f-display:"Helvetica Neue","Arial Narrow","Roboto Condensed",Impact,system-ui,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.42s;

  --hd-h:76px;
  --scale:1;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink-900);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:calc(1rem * var(--scale));
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
}

img,picture,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.wrap--wide{width:min(100% - (var(--gut) * 2),1560px)}
.wrap--narrow{width:min(100% - (var(--gut) * 2),820px)}

.skip{
  position:fixed;top:-100px;left:16px;z-index:400;
  background:var(--g-500);color:#06210A;font-weight:800;
  padding:.85rem 1.3rem;border-radius:var(--radius);
  transition:top .2s var(--ease);
}
.skip:focus{top:16px}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--g-400);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--f-display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.028em;
  text-wrap:balance;
  overflow-wrap:break-word;
  hyphens:none;
}

/* Display headings fill their container. JS measures and sets --fit for an
   exact fit; this clamp is the pre-JS and no-JS baseline so nothing jumps. */
.fit{
  font-size:var(--fit,clamp(2.1rem,8.2vw,6.4rem));
  text-transform:uppercase;
  font-stretch:condensed;
  line-height:.88;
  white-space:nowrap;
  hyphens:none;
}
.fit--wrap{white-space:normal;text-wrap:balance}

h1{font-size:clamp(2.35rem,6.4vw,5rem);text-transform:uppercase;font-stretch:condensed}
h2{font-size:clamp(1.85rem,4vw,3.35rem);text-transform:uppercase;font-stretch:condensed}
h3{font-size:clamp(1.22rem,2.05vw,1.72rem);letter-spacing:-.015em;line-height:1.12}
h4{font-size:clamp(1.02rem,1.5vw,1.2rem);letter-spacing:-.005em;line-height:1.24}

p{margin:0 0 1.15em}
.lede{font-size:clamp(1.1rem,1.85vw,1.42rem);line-height:1.5;color:#CFD8CC;max-width:62ch}
.prose{max-width:74ch}
.prose p{color:#C3CCC1;font-size:1.045rem}
.prose p strong{color:var(--txt);font-weight:700}
.prose h2{margin:2.6em 0 .7em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2em 0 .55em;color:#fff}
.prose a:not(.btn){
  color:var(--g-400);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(166,224,74,.42);
}
.prose a:not(.btn):hover{text-decoration-color:var(--g-400)}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.15rem;color:#C3CCC1}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--g-500)}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.705rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--g-500);
  margin:0 0 .85rem;
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--g-500);flex:none;
}
.eyebrow--plain::before{display:none}

.num{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--txt-faint);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn{
  --bg:var(--g-500);--fg:#07210A;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--bg);color:var(--fg);
  font-family:var(--f-display);
  font-weight:800;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;
  padding:1rem 1.65rem;
  border:0;border-radius:var(--radius);
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease);
  box-shadow:0 0 0 0 rgba(140,198,63,0);
  min-height:48px;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.34) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn:hover{background:var(--g-400);transform:translateY(-2px);box-shadow:0 10px 34px -12px rgba(140,198,63,.72)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.2rem 2.2rem;font-size:1.06rem;min-height:56px}
.btn--sm{padding:.68rem 1.15rem;font-size:.82rem;min-height:40px}
.btn--block{display:flex;width:100%}
.btn--ghost{--bg:transparent;--fg:var(--txt);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{--bg:rgba(255,255,255,.06);--fg:#fff;box-shadow:inset 0 0 0 1px var(--g-500)}
.btn--dark{--bg:var(--ink-700);--fg:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--dark:hover{--bg:var(--ink-600)}

/* --------------------------------------------------------------------------
   Header. Split nav, square logo centred.
   -------------------------------------------------------------------------- */

.hd{
  position:sticky;top:0;z-index:120;
  background:rgba(7,9,10,.78);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hd.is-solid{background:rgba(7,9,10,.96)}

.hd__bar{
  width:min(100% - (var(--gut) * 2),1560px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  min-height:var(--hd-h);
  gap:1rem;
}

.hd__logo{
  justify-self:center;
  display:block;width:92px;
  padding:.45rem 0;
  transition:transform .3s var(--ease);
}
.hd__logo img{width:92px;height:92px}
.hd__logo:hover{transform:scale(1.045)}

.hd__side{min-width:0}
.hd__side--r{justify-self:end}
.hd__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.hd__side--r .hd__list{justify-content:flex-end;gap:.35rem}

.hd__link{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;cursor:pointer;
  font-family:var(--f-display);
  font-weight:700;font-size:.9rem;letter-spacing:.035em;text-transform:uppercase;
  color:var(--txt);
  padding:.75rem .85rem;border-radius:var(--radius);
  position:relative;white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.hd__link::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.5rem;height:2px;
  background:var(--g-500);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.hd__link:hover{color:#fff}
.hd__link:hover::after,.has-mega[aria-open="true"] .hd__link::after{transform:scaleX(1)}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .25s var(--ease)}
.hd__link[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-2px);opacity:1}
.hd__globe{padding:.7rem}
.hd__cta{margin-left:.4rem}

/* Mega menu */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:linear-gradient(180deg,var(--ink-850),var(--ink-800));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.mega[hidden]{display:block!important;visibility:hidden}
.mega.is-open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}
.mega__in{
  width:min(100% - (var(--gut) * 2),1560px);margin-inline:auto;
  display:grid;grid-template-columns:320px 1fr 1fr;gap:clamp(1.5rem,3vw,3.5rem);
  padding:2.2rem 0 2.6rem;
}
.mega__h{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--g-500);margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
}
.mega__links{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mega__links--2{grid-template-columns:1fr 1fr;gap:.1rem 1.5rem}
.mega__links a{
  display:block;padding:.5rem .7rem;margin-left:-.7rem;border-radius:var(--radius);
  color:#C3CCC1;font-size:.94rem;font-weight:500;
  transition:color .18s var(--ease),background .18s var(--ease),padding-left .2s var(--ease);
}
.mega__links a:hover{color:#fff;background:rgba(255,255,255,.05);padding-left:1rem}
.mega__all{
  display:inline-block;margin-top:1.1rem;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-400);border-bottom:1px solid rgba(166,224,74,.4);padding-bottom:2px;
}
.mega__all:hover{border-color:var(--g-400)}
.megafeat{display:block;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-750)}
.megafeat .pic{aspect-ratio:16/10}
.megafeat .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.megafeat:hover .pic img{transform:scale(1.06)}
.megafeat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,10,.1) 30%,rgba(7,9,10,.94))}
.megafeat__tag,.megafeat__t,.megafeat__d{position:relative;z-index:2;display:block;padding-inline:1.05rem}
.megafeat__tag{
  position:absolute;top:.9rem;left:.9rem;padding:.28rem .6rem;
  background:var(--g-500);color:#07210A;border-radius:2px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.megafeat__t{margin-top:-3.6rem;font-family:var(--f-display);font-weight:800;font-size:1.28rem;text-transform:uppercase;letter-spacing:-.01em}
.megafeat__d{font-size:.86rem;color:var(--txt-dim);padding-bottom:1.05rem;margin-top:.3rem;line-height:1.4}

/* Translate panel */
.hd__tr{position:relative}
.trpanel{
  position:absolute;right:0;top:calc(100% + .55rem);z-index:130;
  width:250px;padding:1rem;
  background:var(--ink-800);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.92);
}
.trpanel__h{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-500);margin:0 0 .7rem}
.trpanel__n{font-size:.72rem;color:var(--txt-faint);margin:.7rem 0 0;line-height:1.4}
.goog-te-combo{
  width:100%;padding:.6rem;border-radius:var(--radius);
  background:var(--ink-700);color:var(--txt);border:1px solid var(--line-2);font:inherit;font-size:.9rem;
}
.goog-logo-link,.goog-te-gadget span{display:none!important}
.goog-te-gadget{color:transparent!important;font-size:0!important}
body{top:0!important}
.skiptranslate iframe{display:none!important}

.hd__burger{display:none;background:none;border:0;cursor:pointer;padding:.7rem;justify-self:end}
.burger__box{display:block;width:24px}
.burger__box i{display:block;height:2px;background:var(--txt);margin:5px 0;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.hd__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.hd__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile sheet */
.msheet{
  position:fixed;inset:var(--hd-h) 0 0;z-index:115;
  background:var(--ink-900);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.msheet[hidden]{display:block!important;visibility:hidden}
.msheet.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.msheet__in{padding:1.6rem var(--gut) calc(6.5rem + env(safe-area-inset-bottom))}
.msheet__grp{margin-bottom:1.8rem}
.msheet__h{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500);margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.msheet__lead{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.35rem;margin-bottom:.6rem}
.msheet ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.1rem}
.msheet ul a{display:block;padding:.62rem 0;color:#C3CCC1;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.05)}
.msheet ul a:active{color:var(--g-400)}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-900)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg .pic,.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,9,10,.97) 0%,rgba(7,9,10,.86) 42%,rgba(7,9,10,.42) 72%,rgba(7,9,10,.66) 100%),
    linear-gradient(180deg,rgba(7,9,10,.86) 0%,transparent 28%,transparent 62%,rgba(7,9,10,.95) 100%);
}
/* Sized so the headline, the actions and the quote form all land above the
   fold, both columns optically centred between the header and the fold. */
.hero__in{
  width:min(100% - (var(--gut) * 2),1560px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,420px);
  gap:clamp(1.5rem,3.4vw,4rem);align-items:center;
  padding:clamp(1.5rem,3vw,2.6rem) 0;
  min-height:calc(100svh - var(--hd-h));
}
/* min-width:0 is load bearing. Grid and flex children default to min-width
   auto, which lets a white-space:nowrap heading widen its own track and push
   the page sideways. Every container that holds a .fit heading needs this. */
.hero__copy{max-width:52rem;min-width:0}
.hero__in > *{min-width:0}
.hero h1,.hero .fit{margin-bottom:1rem}
.hero__sub{font-size:clamp(1rem,1.45vw,1.24rem);color:#CBD4C8;max-width:54ch;line-height:1.5}
.hero__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Launch monitor style data strip. Brand motif, reused across the site. */
.readout{
  display:flex;flex-wrap:wrap;gap:0;margin-top:1.7rem;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:rgba(10,13,14,.62);backdrop-filter:blur(6px);
  overflow:hidden;
}
.readout__c{
  flex:1 1 130px;padding:.95rem 1.15rem;
  border-right:1px solid var(--line);
}
.readout__c:last-child{border-right:0}
.readout__k{
  display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--txt-faint);margin-bottom:.32rem;
}
.readout__v{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1;color:var(--g-400);
  letter-spacing:-.02em;
}
.readout__v small{font-size:.52em;color:var(--txt-dim);font-weight:700;margin-left:.2em}

/* --------------------------------------------------------------------------
   Quote form
   -------------------------------------------------------------------------- */

.qf{
  background:linear-gradient(165deg,rgba(18,24,26,.97),rgba(10,13,14,.99));
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:clamp(1.3rem,2.2vw,1.85rem);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  position:relative;
}
.qf::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--g-700),var(--g-400),var(--g-700));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.qf--hero{position:relative;z-index:3}
.qf__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qf__hd{margin-bottom:1.15rem}
.qf__eyebrow{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--g-500);margin:0 0 .45rem;
}
.qf__t{font-family:var(--f-display);font-weight:800;font-size:clamp(1.28rem,2vw,1.55rem);text-transform:uppercase;letter-spacing:-.018em;line-height:1.02;margin:0 0 .35rem}
.qf__s{font-size:.865rem;color:var(--txt-dim);margin:0;line-height:1.45}
.qf__grid{display:grid;grid-template-columns:1fr 1fr;gap:.72rem}
.fld{margin:0;display:flex;flex-direction:column;gap:.34rem;grid-column:1 / -1;min-width:0}
.fld--half{grid-column:span 1}
.fld label,.fld legend{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-dim);padding:0;
}
.fld__opt{color:var(--txt-faint);letter-spacing:.06em;text-transform:none;font-size:.94em}
.fld input,.fld select,.fld textarea{
  width:100%;min-width:0;
  padding:.72rem .8rem;
  background:var(--ink-900);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  color:var(--txt);
  font-family:var(--f-body);font-size:.95rem;
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
  min-height:44px;
}
.fld textarea{min-height:78px;resize:vertical}
.fld select{
  appearance:none;cursor:pointer;padding-right:2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238CC63F' d='M1 1.6 6 6.6l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:11px;
}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(255,255,255,.3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--g-500);background:var(--ink-850);
  box-shadow:0 0 0 3px rgba(140,198,63,.16);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--txt-faint)}
.fld--dims{border:0;margin:0;padding:0;grid-column:1 / -1}
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.34rem}
.dim{display:flex;flex-direction:column;gap:.26rem;min-width:0}
.dim label{font-size:.6rem}
.fld.has-error input,.fld.has-error select{border-color:#E5534B;box-shadow:0 0 0 3px rgba(229,83,75,.16)}
.fld__err{color:#FF8B84;font-size:.76rem;margin:0}
/* Stepped form */
.qfnav{list-style:none;margin:0 0 .55rem;padding:0;display:flex;gap:.35rem}
.qfnav li{
  flex:1;display:flex;align-items:center;gap:.4rem;min-width:0;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-faint);transition:color .25s var(--ease);
}
.qfnav li.is-on,.qfnav li.is-done{color:var(--g-400)}
.qfnav__n{
  width:19px;height:19px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:.62rem;
  border:1px solid currentColor;
}
.qfnav li.is-on .qfnav__n{background:var(--g-500);border-color:var(--g-500);color:#07210A;font-weight:700}
.qfnav li.is-done .qfnav__n{background:rgba(140,198,63,.2)}
.qfnav__l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qfbar{height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin-bottom:1.05rem}
.qfbar i{display:block;height:100%;background:linear-gradient(90deg,var(--g-600),var(--g-400));transition:width .38s var(--ease)}
.qfstep{border:0;margin:0;padding:0;min-width:0}
.qfstep[hidden]{display:none}
.qf__nav{display:flex;gap:.55rem;align-items:center;margin-top:1.05rem}
.qf__nav .btn{flex:1}
.qf__nav [data-back]{flex:0 0 auto;padding-inline:1rem}
/* .btn sets display, which outranks the user agent [hidden] rule. Restore it. */
.qf__nav [hidden],.qf [hidden].qfsum{display:none}
.qfsum{border:1px solid var(--line);border-radius:var(--radius);padding:.85rem .95rem;background:rgba(255,255,255,.02);grid-column:1 / -1}
.qfsum__h{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-500);margin:0 0 .5rem}
.qfsum__l{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.82rem}
.qfsum__l dt{color:var(--txt-faint);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.qfsum__l dd{margin:0;color:#D2DACF;overflow-wrap:anywhere}
/* Without JS every step shows and the single submit works normally. */
.qf:not(.is-js) .qfnav,.qf:not(.is-js) .qfbar,.qf:not(.is-js) [data-next],.qf:not(.is-js) [data-back]{display:none}
.qf:not(.is-js) .qfstep[hidden]{display:block}
.qf:not(.is-js) .qfstep{margin-bottom:.9rem}
.qf.is-js [data-send]{display:none}
.qf.is-js.is-last [data-send]{display:inline-flex}
.qf.is-js.is-last [data-next]{display:none}
.qf__go{margin-top:0}
.qf__fine{font-size:.735rem;color:var(--txt-faint);margin:.85rem 0 0;line-height:1.45}
.qf__msg{margin-top:.7rem;font-size:.88rem}
.qf__msg.is-ok{color:var(--g-400)}
.qf__msg.is-bad{color:#FF8B84}
.qf.is-done .qf__grid,.qf.is-done .qf__go,.qf.is-done .qf__fine{display:none}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.sec{padding:clamp(3.6rem,7vw,7rem) 0;position:relative}
.sec--tight{padding:clamp(2.6rem,4.5vw,4.2rem) 0}
.sec--paper{background:var(--paper);color:#12181A}
.sec--paper p{color:#3C4740}
.sec--paper .eyebrow{color:var(--g-700)}
.sec--paper .eyebrow::before{background:var(--g-700)}
.sec--ink{background:var(--ink-850)}
.sec--edge{border-top:1px solid var(--line)}

.sechd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(1.2rem,3vw,3rem);align-items:end;margin-bottom:clamp(2rem,3.5vw,3.2rem)}
.sechd > *{min-width:0}
.sechd__p{color:var(--txt-dim);margin:0;font-size:1.02rem}
.sec--paper .sechd__p{color:#4E5A51}

/* Editorial layout.
   A prose column capped at ~74ch inside a full width wrapper leaves the whole
   right hand side empty, which reads as a black void. Every long text run is
   paired with a sticky media rail so the space carries imagery and a call to
   action instead of nothing. */
.ed{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,26vw,380px));
  gap:clamp(1.8rem,4vw,4.5rem);
  align-items:start;
}
.ed > *{min-width:0}
.ed__main{max-width:74ch}
.ed__rail{position:sticky;top:calc(var(--hd-h) + 1.4rem);display:grid;gap:1rem}
.ed__rail figure{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-800)}
.ed__rail .pic{display:block}
.ed__rail .pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ed__rail figure:hover .pic img{transform:scale(1.04)}
.ed__rail figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.6rem .9rem .75rem;
  background:linear-gradient(transparent,rgba(7,9,10,.92));
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:#D6DED4;
}
.railcta{
  border:1px solid rgba(140,198,63,.32);border-radius:var(--radius-lg);
  background:linear-gradient(155deg,rgba(140,198,63,.11),rgba(10,13,14,0) 72%);
  padding:1.15rem 1.2rem;
}
.railcta__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--g-500);margin:0 0 .45rem}
.railcta__t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.12rem;line-height:1.05;letter-spacing:-.012em;margin:0 0 .5rem}
.railcta__d{font-size:.85rem;color:var(--txt-dim);margin:0 0 1rem;line-height:1.45}
.raillinks{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.raillinks a{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.6rem .7rem;margin-inline:-.7rem;border-radius:var(--radius);
  font-size:.88rem;color:#C3CCC1;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.raillinks a::after{content:"";width:12px;height:1px;background:var(--g-500);flex:none;transition:width .22s var(--ease)}
.raillinks a:hover{background:rgba(255,255,255,.05);color:#fff}
.raillinks a:hover::after{width:22px}
.sec--paper .ed__rail figcaption{color:#EDEFEA}
.sec--paper .railcta__d{color:#4E5A51}

@media (max-width:1024px){
  .ed{grid-template-columns:1fr;gap:2rem}
  .ed__main{max-width:none}
  .ed__rail{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .ed__rail .railcta{grid-column:1 / -1}
}
@media (max-width:640px){
  .ed__rail{grid-template-columns:1fr}
}

/* Split feature block, image and copy, alternating */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4.5rem);align-items:center}
.split > *{min-width:0}
.split--flip .split__media{order:2}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden}
.split__media .pic{aspect-ratio:4/3}
.split__media .pic img{width:100%;height:100%;object-fit:cover}
.split__badge{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  background:rgba(7,9,10,.86);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:.5rem .85rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-400);
}

/* Card grid.
   Flex rather than grid on purpose. An auto-fit grid leaves an empty cell
   whenever the item count is not a multiple of the column count, which reads
   as a dead black block. With flex-grow the final row expands to fill the
   width instead, so there is never a hole regardless of how many cards a page
   has. Counts are also padded server side, see pad_cards() in bootstrap. */
.cards{display:flex;flex-wrap:wrap;gap:clamp(1rem,1.8vw,1.6rem)}
.card{
  flex:1 1 268px;max-width:100%;
  position:relative;display:flex;flex-direction:column;
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:rgba(140,198,63,.42);box-shadow:0 24px 50px -28px rgba(0,0,0,.9)}
.card .pic{aspect-ratio:16/10;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .pic img{transform:scale(1.055)}
.card__b{padding:1.2rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.card__k{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-500);margin:0 0 .5rem}
.card__t{font-family:var(--f-display);font-weight:800;font-size:1.2rem;text-transform:uppercase;letter-spacing:-.012em;line-height:1.05;margin:0 0 .5rem}
.card__d{font-size:.9rem;color:var(--txt-dim);margin:0 0 1rem;line-height:1.5;flex:1}
.card__go{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--g-400);
  display:inline-flex;align-items:center;gap:.45rem;
}
.card__go::after{content:"";width:14px;height:1px;background:currentColor;transition:width .25s var(--ease)}
.card:hover .card__go::after{width:26px}
.card__link{position:absolute;inset:0;z-index:3}
.card--paper{background:#fff;border-color:rgba(0,0,0,.09)}
.card--paper .card__t{color:#12181A}
.card--paper .card__d{color:#5A665D}

/* Photo mosaic. Image heavy on purpose, and packed with explicit areas so
   there is never an empty cell left showing the page background. */
.mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(150px,1fr);
  grid-template-areas:
    "a a b b"
    "a a c d"
    "e e f f";
  gap:clamp(.55rem,1vw,.95rem);
}
.mosaic figure{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-800);min-height:0}
.mosaic .pic{width:100%;height:100%;display:block}
.mosaic .pic img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s var(--ease)}
.mosaic figure:hover .pic img{transform:scale(1.05)}
.mosaic figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.5rem .95rem .8rem;
  background:linear-gradient(transparent,rgba(7,9,10,.9));
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#D6DED4;
}
.mosaic .m-a{grid-area:a}
.mosaic .m-b{grid-area:b}
.mosaic .m-c{grid-area:c}
.mosaic .m-d{grid-area:d}
.mosaic .m-e{grid-area:e}
.mosaic .m-f{grid-area:f}

/* Full bleed image breaker */
.breaker{position:relative;height:clamp(300px,46vh,540px);overflow:hidden;isolation:isolate}
.breaker .pic,.breaker img{width:100%;height:100%;object-fit:cover}
.breaker::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,10,.72),rgba(7,9,10,.35) 45%,rgba(7,9,10,.9))}
.breaker__c{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:var(--gut)}
.breaker__c .fit{max-width:min(100%,1200px)}
.breaker__p{color:#CBD4C8;max-width:52ch;margin:1rem auto 0}

/* Steps */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.step{background:var(--ink-850);padding:clamp(1.3rem,2.4vw,2rem);display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;transition:background .25s var(--ease)}
.step:hover{background:var(--ink-800)}
.step__n{
  counter-increment:s;
  font-family:var(--f-mono);font-size:.78rem;color:var(--g-500);
  border:1px solid rgba(140,198,63,.35);border-radius:50%;
  width:38px;height:38px;display:grid;place-items:center;flex:none;
}
.step__n::before{content:"0" counter(s)}
.step h3{margin:0 0 .4rem}
.step p{margin:0;color:var(--txt-dim);font-size:.95rem}

/* Comparison table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;min-width:520px;font-size:.93rem}
.tbl caption{text-align:left;padding:1rem 1.15rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-500);border-bottom:1px solid var(--line)}
.tbl th,.tbl td{padding:.85rem 1.15rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:500;background:var(--ink-800);
}
.tbl tbody th{font-weight:700;color:#fff;width:34%}
.tbl td{color:var(--txt-dim)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.sec--paper .tbl-wrap{border-color:rgba(0,0,0,.1)}
.sec--paper .tbl th,.sec--paper .tbl td{border-color:rgba(0,0,0,.08)}
.sec--paper .tbl thead th{background:var(--paper-2);color:#4E5A51}
.sec--paper .tbl tbody th{color:#12181A}
.sec--paper .tbl td{color:#4E5A51}

/* Callouts */
.callout{
  border-left:3px solid var(--g-500);
  background:linear-gradient(90deg,rgba(140,198,63,.075),transparent 65%);
  padding:1.15rem 1.35rem;border-radius:0 var(--radius) var(--radius) 0;
  margin:2rem 0;
}
.callout p{margin:0;color:#D2DACF;font-size:.97rem}
.callout--warn{border-left-color:#E9B949;background:linear-gradient(90deg,rgba(233,185,73,.09),transparent 65%)}
.bottomline{
  border:1px solid rgba(140,198,63,.3);
  background:linear-gradient(150deg,rgba(140,198,63,.09),rgba(10,13,14,0) 70%);
  border-radius:var(--radius-lg);padding:clamp(1.2rem,2.2vw,1.7rem);margin:2.2rem 0;
}
.bottomline p:last-child{margin-bottom:0}

/* Spec list */
.specs{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.specs li{background:var(--ink-850);padding:.95rem 1.15rem;display:grid;grid-template-columns:minmax(140px,.42fr) 1fr;gap:1rem;font-size:.93rem}
.specs dt,.specs b{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--g-500);font-weight:500}
.specs span{color:var(--txt-dim)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.25rem 3rem 1.25rem 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.5vw,1.16rem);
  letter-spacing:-.008em;line-height:1.3;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--g-400)}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:13px;height:13px;
  border-right:2px solid var(--g-500);border-bottom:2px solid var(--g-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{padding:0 3rem 1.4rem 0;color:var(--txt-dim);font-size:.98rem;line-height:1.65}
.faq__a p:last-child{margin-bottom:0}
.sec--paper .faq,.sec--paper .faq details{border-color:rgba(0,0,0,.1)}
.sec--paper .faq__a{color:#4E5A51}

/* Author / E-E-A-T block */
.author{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.1rem,2vw,1.6rem);background:var(--ink-850);margin-top:2.6rem;
}
.author img{width:64px;height:64px;border-radius:50%;background:var(--ink-700)}
.author__n{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.05rem;margin:0}
.author__r{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--g-500);margin:.25rem 0 .6rem}
.author__b{font-size:.9rem;color:var(--txt-dim);margin:0}
.author__pending{font-size:.82rem;color:var(--txt-faint);font-style:italic}

/* Chips / market links */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.52rem .85rem;border:1px solid var(--line-2);border-radius:100px;
  font-size:.85rem;color:#C3CCC1;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.chips a:hover{border-color:var(--g-500);color:#fff;background:rgba(140,198,63,.09)}
.chips span{font-family:var(--f-mono);font-size:.68rem;color:var(--g-500)}

/* Breadcrumbs */
.crumbs{padding:1rem 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.78rem;color:var(--txt-faint)}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--txt-faint);opacity:.5}
.crumbs li:last-child::after{display:none}
.crumbs a{color:var(--txt-dim)}
.crumbs a:hover{color:var(--g-400)}

/* Local fact tiles */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin:1.8rem 0}
.fact{background:var(--ink-850);padding:1.1rem 1.2rem}
.fact__k{font-family:var(--f-mono);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-faint);margin:0 0 .4rem}
.fact__v{font-family:var(--f-display);font-weight:800;font-size:1.32rem;line-height:1.05;color:var(--g-400);margin:0;letter-spacing:-.015em}
.fact__d{font-size:.8rem;color:var(--txt-dim);margin:.35rem 0 0;line-height:1.4}

/* Marquee */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:.9rem 0;background:var(--ink-850)}
.marq__t{display:flex;gap:2.6rem;width:max-content;animation:marq 46s linear infinite}
.marq__t span{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.02em;color:var(--txt-faint);white-space:nowrap;display:flex;align-items:center;gap:2.6rem}
.marq__t span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--g-500)}
@keyframes marq{to{transform:translateX(-50%)}}
.marq:hover .marq__t{animation-play-state:paused}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ft{background:var(--ink-850);border-top:1px solid var(--line);margin-bottom:0}
.ft__cta{
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(140,198,63,.16),transparent 58%),
    linear-gradient(180deg,var(--ink-800),var(--ink-850));
  border-bottom:1px solid var(--line);
  padding:clamp(3rem,6vw,5.5rem) 0;text-align:center;
}
.ft__cta-h{margin-bottom:1rem}
.ft__cta-p{color:var(--txt-dim);max-width:60ch;margin:0 auto 2rem}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,3rem);padding:clamp(2.6rem,5vw,4rem) 0 2.4rem}
.ft__brand img{width:88px;height:88px;margin-bottom:1rem}
.ft__tag{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.02rem;margin:0 0 .6rem;color:var(--g-400)}
.ft__blurb{font-size:.9rem;color:var(--txt-dim);max-width:34ch}
.ft__phone{display:block;font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:#fff;margin-top:.8rem}
.ft__mail{display:block;font-size:.9rem;color:var(--g-400);margin-top:.35rem}
.ft__h{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--g-500);margin:0 0 1rem;padding-bottom:.65rem;border-bottom:1px solid var(--line)}
.ft__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.05rem}
.ft__col a{display:block;padding:.35rem 0;font-size:.9rem;color:var(--txt-dim);transition:color .18s var(--ease),transform .18s var(--ease)}
.ft__col a:hover{color:#fff;transform:translateX(3px)}
.ft__markets{padding-bottom:2.4rem}
.ft__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.ft__chips a{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .75rem;border:1px solid var(--line);border-radius:100px;font-size:.8rem;color:var(--txt-dim);transition:border-color .2s,color .2s}
.ft__chips a:hover{border-color:var(--g-500);color:#fff}
.ft__chips span{font-family:var(--f-mono);font-size:.66rem;color:var(--g-600)}
.ft__chips .is-all{border-color:rgba(140,198,63,.4);color:var(--g-400)}
.ft__legal{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding:1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:.8rem;color:var(--txt-faint)}
.ft__legal p{margin:0}
.ft__legal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.2rem}
.ft__legal a:hover{color:var(--g-400)}

/* --------------------------------------------------------------------------
   Mobile dock. Always in reach, above the safe area.
   -------------------------------------------------------------------------- */

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:118;
  display:none;grid-template-columns:repeat(4,1fr);
  background:rgba(10,13,14,.93);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid var(--line-2);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -14px 40px -20px rgba(0,0,0,.9);
}
.dock__i{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;
  padding:.6rem .3rem .55rem;min-height:60px;
  background:none;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-dim);
  transition:color .18s var(--ease),background .18s var(--ease);
}
.dock__i svg{width:21px;height:21px}
.dock__i:active,.dock__i:hover{color:#fff;background:rgba(255,255,255,.05)}
.dock__i--go{color:var(--g-400)}
.dock__i--go svg{filter:drop-shadow(0 0 6px rgba(140,198,63,.5))}

/* --------------------------------------------------------------------------
   Accessibility widget
   -------------------------------------------------------------------------- */

.a11y-fab{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:135;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--g-500);color:#07210A;border:0;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(140,198,63,.75);
  transition:transform .25s var(--ease),background .2s var(--ease);
}
.a11y-fab:hover{transform:scale(1.08);background:var(--g-400)}
.a11y{
  position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:136;
  width:min(340px,calc(100vw - 32px));
  max-height:min(76vh,640px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--ink-800);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.95);
}
.a11y[hidden]{display:none}
.a11y__hd{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.15rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ink-800);z-index:2}
.a11y__hd h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:-.01em}
.a11y__x{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--txt-dim);padding:.2rem .4rem}
.a11y__x:hover{color:#fff}
.a11y__body{padding:1.15rem}
.a11y__row{margin-bottom:1.1rem}
.a11y__lab{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:.5rem}
.a11y__steps{display:flex;gap:.35rem;flex-wrap:wrap}
.a11y__steps button{
  flex:1 1 auto;padding:.5rem .4rem;min-height:38px;
  background:var(--ink-750);border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--txt-dim);font-size:.78rem;cursor:pointer;
  transition:all .18s var(--ease);
}
.a11y__steps button:hover{border-color:var(--g-600);color:#fff}
.a11y__steps button.is-on{background:var(--g-500);border-color:var(--g-500);color:#07210A;font-weight:700}
.a11y__toggles{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.1rem}
.a11y__toggles label{display:flex;align-items:center;gap:.7rem;padding:.55rem .3rem;cursor:pointer;font-size:.9rem;color:#C3CCC1;border-radius:var(--radius)}
.a11y__toggles label:hover{background:rgba(255,255,255,.04);color:#fff}
.a11y__toggles input{width:18px;height:18px;accent-color:var(--g-500);cursor:pointer;flex:none}
.a11y__ft{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.a11y__stmt{font-size:.78rem;color:var(--g-400);text-decoration:underline;text-underline-offset:3px}
.a11y-ruler{position:fixed;left:0;right:0;height:46px;z-index:134;pointer-events:none;background:rgba(140,198,63,.14);border-block:2px solid rgba(140,198,63,.6);mix-blend-mode:screen}
.a11y-ruler[hidden]{display:none}

/* Accessibility modes */
html.a11y-contrast{--txt:#fff;--txt-dim:#EAEAEA;--txt-faint:#CFCFCF;--ink-900:#000;--ink-850:#000;--ink-800:#0A0A0A;--ink-750:#111;--ink-700:#161616;--line:rgba(255,255,255,.42);--line-2:rgba(255,255,255,.62);--g-400:#B9FF4D;--g-500:#A8F03C}
html.a11y-contrast .hero__bg::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.94) 55%,rgba(0,0,0,.72) 100%)}
html.a11y-contrast .sec--paper{background:#fff;color:#000}
html.a11y-contrast .sec--paper p,html.a11y-contrast .sec--paper .sechd__p{color:#111}
html.a11y-contrast .prose p,html.a11y-contrast .card__d{color:#EDEDED}
html.a11y-dyslexic,html.a11y-dyslexic body{font-family:"Comic Sans MS",Verdana,Tahoma,sans-serif}
html.a11y-dyslexic h1,html.a11y-dyslexic h2,html.a11y-dyslexic h3,html.a11y-dyslexic h4,
html.a11y-dyslexic .fit,html.a11y-dyslexic .btn{font-family:Verdana,Tahoma,sans-serif;letter-spacing:0;text-transform:none;font-stretch:normal}
html.a11y-dyslexic .fit{white-space:normal}
html.a11y-links a:not(.btn){text-decoration:underline!important;text-underline-offset:2px;outline:1px dotted currentColor;outline-offset:2px}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.a11y-pause *{animation-play-state:paused!important}
html.a11y-images .pic,html.a11y-images .breaker,html.a11y-images .mosaic,html.a11y-images .hero__bg{display:none!important}
html.a11y-images .hero{background:linear-gradient(160deg,var(--ink-800),var(--ink-900))}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 2l24 15-11 2 6 12-5 2-6-12-8 7z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 4 2,auto!important}
html.a11y-space-1 body{letter-spacing:.045em;word-spacing:.14em;line-height:1.85}
html.a11y-space-2 body{letter-spacing:.085em;word-spacing:.22em;line-height:2.1}
html.a11y-space-1 p,html.a11y-space-2 p{max-width:none}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .marq__t{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Blur up placeholder */
.pic{display:block;background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.pic img{opacity:0;transition:opacity .55s var(--ease)}
.pic img.is-loaded,.no-js .pic img{opacity:1}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  .mega__in{grid-template-columns:280px 1fr 1fr}
  .hd__link{font-size:.83rem;padding:.7rem .6rem}
}

@media (max-width:1024px){
  :root{--hd-h:64px}
  /* Logo stays centred at every breakpoint. It is the brand mark. */
  .hd__bar{grid-template-columns:1fr auto 1fr}
  .hd__side{display:none}
  .hd__logo{width:56px;grid-column:2;justify-self:center}
  .hd__logo img{width:56px;height:56px}
  .hd__burger{display:block;grid-column:3;justify-self:end}
  .dock{display:grid}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .a11y-fab{bottom:calc(74px + env(safe-area-inset-bottom));width:46px;height:46px}
  .a11y{bottom:calc(130px + env(safe-area-inset-bottom))}
  .hero__in{grid-template-columns:1fr;gap:1.4rem;min-height:calc(100svh - var(--hd-h))}
  .hero__sub{max-width:none}
  .ft__grid{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:1 / -1}
  .split{grid-template-columns:1fr;gap:1.6rem}
  .split--flip .split__media{order:0}
  .sechd{grid-template-columns:1fr;align-items:start}
  .mosaic{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:"a a" "a a" "b b" "c d" "e e" "f f";
  }
}

/* Short viewports: drop the stat strip rather than push the form below the
   fold. The form is the conversion, the stats are decoration. */
@media (max-height:760px) and (min-width:1025px){
  .hero .readout{display:none}
  .hero__sub{font-size:1rem}
}
@media (max-width:1024px){
  .hero .readout{display:none}
  .hero__acts{margin-top:1.1rem;gap:.6rem}
  .hero__acts .btn--lg{padding:.9rem 1.35rem;font-size:.92rem;min-height:48px;flex:1 1 auto}
  .hero__sub{font-size:1rem;line-height:1.45}
  .hero .fit{margin-bottom:.75rem}
  /* Local pages carry a long intro as the hero sub. Clamp it on small screens
     so the form clears the fold. The full text stays in the DOM for crawlers
     and screen readers, and shows in full from tablet up. */
  .hero--local .hero__sub{
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Compact the hero form so step one clears the fold on a phone. */
  .qf--hero{padding:1rem 1.05rem 1.15rem}
  .qf--hero .qf__hd{margin-bottom:.8rem}
  .qf--hero .qf__s{display:none}
  .qf--hero .qf__grid{gap:.6rem}
  .qf--hero .qf__fine{display:none}
  .qf--hero .qfnav__l{display:none}
  .qf--hero .qfnav li{flex:0 0 auto}
}

@media (max-width:640px){
  :root{--gut:1.1rem}
  .qf__grid{grid-template-columns:1fr}
  .fld--half{grid-column:1 / -1}
  .dims{grid-template-columns:1fr 1fr}
  .dim:first-child{grid-column:1 / -1}
  .msheet ul{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
  .ft__legal{flex-direction:column;align-items:flex-start;gap:.7rem}
  .readout__c{flex:1 1 50%;border-bottom:1px solid var(--line)}
  .specs li{grid-template-columns:1fr;gap:.3rem}
  .step{grid-template-columns:1fr;gap:.7rem}
  .breaker{height:clamp(260px,50vh,380px)}
  .faq summary{padding-right:2.2rem}
  .faq__a{padding-right:0}
}

@media print{
  .hd,.dock,.a11y,.a11y-fab,.ft__cta,.qf,.marq,.skip{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding:1rem 0}
}