/* Meta Ads Business Calculator - Get Bee Seen brand styles.
   Tokens live in :root; dark theme overrides follow. Motion section is at the bottom. */
:root{
  --green:#196144; --sage:#3E5D48; --gold:#FFB933; --cream:#FFF2DC; --on-gold:#123F2C;
  --bg:#FFF2DC; --surface:#FFFFFF; --surface2:#FFF7EA; --ink:#262626; --head:#196144; --muted:#5F6B63; --line:#EBD9B8;
  --bar:#196144; --peach:#FFE7B0;
  --good:#12704B; --good-bg:#DDEFE4; --warn:#8A5A00; --warn-bg:#FFE7B0; --bad:#B8342A; --bad-bg:#FBE3DE;
  --svc:#196144; --b2b:#3E5D48; --b2c:#196144;
  --shadow:0 2px 0 rgba(25,97,68,.10),0 18px 40px rgba(25,97,68,.18);
  --display:'Alfa Slab One','Cooper Black',Georgia,serif;
  --body:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23FFF2DC' stroke-opacity='.09' stroke-width='2'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E2219; --surface:#15301F; --surface2:#1B3A2B; --ink:#F3EAD6; --head:#FFF2DC; --muted:#AEBFB3; --line:#2B4C3B;
    --bar:#FFB933; --peach:#3A3010;
    --good:#5FD3A0; --good-bg:#12382A; --warn:#FFC85A; --warn-bg:#3A3010; --bad:#FF8F84; --bad-bg:#3D1C19;
    --shadow:0 2px 0 rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E2219; --surface:#15301F; --surface2:#1B3A2B; --ink:#F3EAD6; --head:#FFF2DC; --muted:#AEBFB3; --line:#2B4C3B;
  --bar:#FFB933; --peach:#3A3010;
  --good:#5FD3A0; --good-bg:#12382A; --warn:#FFC85A; --warn-bg:#3A3010; --bad:#FF8F84; --bad-bg:#3D1C19;
  --shadow:0 2px 0 rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);scroll-behavior:smooth}

*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;color:var(--head);font-weight:400}
p{margin:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
img{max-width:100%}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--green)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--head)}
.brand img{height:34px;width:auto;display:block}
.brand span{font-family:var(--display);font-weight:400;font-size:16px;padding-left:12px;border-left:2px solid var(--gold);line-height:1.1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
@media (max-width:760px){.brand span{display:none}}
.top nav{display:flex;gap:22px;font-weight:600;font-size:14px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--head)}
@media (max-width:640px){.top nav a:not(:last-child){display:none}}

/* hero: deep green, hex texture */
.hero{background:var(--green) var(--hex);color:var(--cream);padding:64px 0 88px;position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:44px;grid-template-columns:1fr;position:relative}
@media (min-width:960px){.hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center;gap:64px}}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--on-gold);font-weight:700;font-size:13px;padding:6px 16px;border-radius:999px;margin-bottom:20px}
.kicker img{height:20px;width:auto}
.hero h1{color:var(--cream)}
.app-name{display:block;font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold);margin-bottom:8px}
.statement{display:block;font-size:clamp(42px,6.6vw,80px);font-weight:400;letter-spacing:-.02em;line-height:1.02}
.lead{margin-top:22px;font-size:18px;font-weight:600;max-width:32em;line-height:1.5;color:var(--cream)}
.desc{margin-top:12px;color:rgba(255,242,220,.78);max-width:36em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s,filter .12s;font-family:var(--body)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--on-gold)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border-color:var(--cream);color:var(--cream)}
.btn-ghost:hover{background:rgba(255,242,220,.12)}
.btn-green{background:var(--green);color:var(--cream)}
.btn-green:hover{filter:brightness(1.12)}
.btn-line{background:transparent;border-color:var(--green);color:var(--head)}
:root[data-theme="dark"] .btn-line{border-color:var(--cream)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-line{border-color:var(--cream)}}
.btn-line:hover{background:color-mix(in srgb,var(--gold) 22%,transparent)}
.btn-sm{min-height:38px;padding:0 18px;font-size:13px}

/* receipt (always cream, sits on the green hero) */
.receipt{--ink:#191816;--muted:#5d6a61;--line:#E7D5B0;--head:#196144;background:var(--cream);color:var(--ink);padding:28px 28px 46px;box-shadow:var(--shadow);position:relative;max-width:460px;width:100%;justify-self:center;border-radius:14px 14px 0 0;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.receipt-wrap{position:relative;justify-self:center;width:100%;max-width:460px}
.badge-float{position:absolute;right:-22px;top:-46px;width:104px;height:auto;transform:rotate(10deg);z-index:2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
@media (max-width:520px){.badge-float{right:-6px;width:84px;top:-40px}}
.receipt h2{font-size:26px}
.receipt .sub{color:var(--muted);font-size:13px;margin:4px 0 20px;line-height:1.5}
.rc-row{margin-bottom:16px}
.rc-row label{display:flex;justify-content:space-between;font-weight:600;font-size:13px;margin-bottom:6px}
input[type=range]{width:100%;accent-color:var(--green);height:24px;margin:0}
.rc-out{border-top:2px dashed var(--green);margin-top:20px;padding-top:16px;display:grid;gap:6px}
.rc-out div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rc-out span{color:var(--muted);font-size:14px}
.rc-out b{font-family:var(--display);font-weight:400;font-size:28px;color:var(--head);white-space:nowrap}
.rc-out .big{background:var(--gold);margin:6px -12px 0;padding:8px 12px;border-radius:12px}
.rc-out .big span{color:var(--on-gold);font-weight:600}
.rc-out .big b{font-size:clamp(26px,8.5vw,34px);color:var(--on-gold)}
.rc-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}

/* gold ribbon with rounded swoosh cut bottom-left */
.ribbon{background:var(--gold);color:var(--on-gold);border-radius:0 0 0 48px;margin-top:-40px;position:relative;z-index:2;padding:16px 0}
.ribbon .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;font-weight:700;font-size:14px}
.ribbon img{height:26px;width:auto}
.ribbon .sep{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green)}

/* phase banners */
section{scroll-margin-top:76px}
.sec{padding:56px 0 24px}
.banner{background:var(--green) var(--hex);color:var(--cream);border-radius:20px;padding:22px 26px;display:flex;gap:18px;align-items:center;margin-bottom:28px}
.banner .num{flex:none;width:54px;height:54px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:28px;line-height:1}
.banner h2{color:var(--cream);font-size:clamp(26px,3.6vw,38px)}
.banner p{color:rgba(255,242,220,.8);margin-top:4px;font-size:14px;max-width:46em}

/* model cards: flush white, gold icon circle */
.models{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:760px){.models{grid-template-columns:repeat(2,minmax(0,1fr))}}
.model{background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.model:hover{border-color:var(--green)}
.model[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 4px var(--gold)}
.model .badge{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--green);display:grid;place-items:center}
.model h3{font-size:clamp(24px,7.5vw,28px)}
.model p{color:var(--muted);font-size:14px}
.model ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.model li{font-size:12px;font-weight:600;padding:3px 12px;border-radius:999px;border:1.5px solid var(--gold);color:var(--head)}
.model .flow{font-size:12px;color:var(--muted);font-weight:600;padding:10px 14px;background:var(--surface2);border-radius:12px;border-left:4px solid var(--gold)}
.model .btn{margin-top:auto}

/* calculator */
.calc{padding:0 0 56px}
.empty{background:var(--surface);border:2px dashed var(--gold);border-radius:22px;padding:40px 24px;text-align:center}
.empty img{height:64px;width:auto;margin-bottom:8px}
.empty h3{font-size:28px;margin-bottom:6px}
.empty p{color:var(--muted);margin-bottom:20px}
.empty .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.calc-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.tabs{display:flex;gap:6px;background:var(--surface);padding:5px;border-radius:999px;flex-wrap:wrap;border:1.5px solid var(--line)}
.tab{border:0;background:transparent;padding:9px 18px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--green);color:var(--cream)}
.tab[aria-selected="true"]::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-right:8px}
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tools label{font-size:13px;font-weight:600;color:var(--muted)}
select{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;min-height:40px;max-width:100%}
.calc-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1040px){.calc-grid{grid-template-columns:430px minmax(0,1fr);align-items:start}
  .res-col{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);max-height:calc(100vh - 104px);overflow:auto;padding-right:6px}}
.form-col{background:var(--surface);border-radius:22px;padding:26px 24px 6px}
fieldset{border:0;padding:0;margin:0 0 26px}
legend{font-family:var(--display);font-weight:400;font-size:21px;padding:0;margin-bottom:14px;display:flex;align-items:center;gap:10px;color:var(--head)}
legend::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--green)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;line-height:1.35}
.inp{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;background:var(--surface2);overflow:hidden}
.inp:focus-within{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 60%,transparent)}
.inp input{flex:1;min-width:0;border:0;background:transparent;padding:10px 14px;font-weight:700;font-size:16px;outline:none}
.inp .u{padding:0 14px;color:var(--cream);font-weight:700;background:var(--green);align-self:stretch;display:grid;place-items:center;font-size:14px}
.field input[type=range]{margin-top:8px}
.field small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}

.panel{background:var(--surface);border-radius:22px;padding:22px 24px;margin-bottom:18px}
.panel h3{font-size:22px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.panel h3::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--green)}
.panel .note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.verdict{border-radius:20px;padding:20px 22px;margin-bottom:18px;border:2px solid;display:flex;gap:16px;align-items:flex-start}
.verdict .vi{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff}
.verdict.good{background:var(--good-bg);border-color:var(--good)} .verdict.good .vi{background:var(--good);color:var(--bg)}
.verdict.ok{background:var(--good-bg);border-color:var(--good)} .verdict.ok .vi{background:var(--good);color:var(--bg)}
.verdict.warn{background:var(--warn-bg);border-color:var(--gold)} .verdict.warn .vi{background:var(--gold);color:var(--on-gold)}
.verdict.bad{background:var(--bad-bg);border-color:var(--bad)} .verdict.bad .vi{background:var(--bad);color:#fff}
.verdict h3{font-size:22px;margin-bottom:4px}
.verdict.good h3,.verdict.ok h3{color:var(--good)} .verdict.warn h3{color:var(--warn)} .verdict.bad h3{color:var(--bad)}
.verdict p{font-size:14px;color:var(--ink)}
.cards{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}
@media (min-width:640px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--surface);border-radius:18px;padding:16px 18px;border-left:5px solid var(--gold);container-type:inline-size}
.card .k{font-size:12px;font-weight:600;color:var(--muted)}
.card .v{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,32px);font-size:clamp(17px,14cqi,32px);color:var(--head);margin:0;line-height:1.15;overflow-wrap:anywhere}
.card .s{font-size:12px;color:var(--muted);line-height:1.4}
.card.good{border-left-color:var(--good)} .card.good .v{color:var(--good)}
.card.bad{border-left-color:var(--bad)} .card.bad .v{color:var(--bad)}
.card.warn .v{color:var(--warn)}
.more{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:640px){.more{grid-template-columns:1fr 1fr;column-gap:28px}}
.more div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.more span{color:var(--muted)}
.more b{text-align:right}

.frow{display:grid;grid-template-columns:minmax(110px,1.1fr) 2fr minmax(90px,1fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.fl{font-weight:600;font-size:13px;line-height:1.3}
.fl small,.fv small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.fbar{height:16px;background:var(--surface2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.fbar i{display:block;height:100%;background:var(--bar);border-radius:999px;min-width:6px}
.fv{text-align:right;font-size:13px}
.fv b{font-size:15px}
@media (max-width:520px){.frow{grid-template-columns:1fr 1fr}.fbar{grid-column:1/-1;order:3}}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
th{font-weight:700;color:var(--cream);background:var(--green);font-size:12px}
th:first-child{border-radius:12px 0 0 12px} th:last-child{border-radius:0 12px 12px 0}
td.good{color:var(--good);font-weight:700} td.bad{color:var(--bad);font-weight:700}
tr.tot td{font-weight:800;border-top:2px solid var(--green);border-bottom:0;font-size:14px}
.tscroll{overflow-x:auto}
.meter{margin-top:6px}
.meter .track{position:relative;height:20px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.meter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.meter .mark{position:absolute;left:50%;top:0;bottom:0;width:3px;background:var(--gold)}
.meter .lab{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.goal-in{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.goal-in label{font-weight:600}
.goal-in .inp{max-width:230px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.actions .btn-line{border-color:var(--green)}
.disc{font-size:12px;color:var(--muted);margin-top:14px}

/* how it works: dark-green stage cards, gold highlight last */
.steps{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--green) var(--hex);color:var(--cream);border-radius:22px;padding:24px}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:24px;margin-bottom:14px;line-height:1}
.step h3{font-size:24px;color:var(--cream);margin-bottom:6px}
.step p{color:rgba(255,242,220,.82);font-size:14px}
.step.hi{background:var(--gold);color:var(--on-gold)}
.step.hi .n{background:var(--green);color:var(--cream)}
.step.hi h3{color:var(--on-gold)} .step.hi p{color:var(--on-gold)}
.cmp{margin-top:40px}
.cmp h3{font-size:28px;margin-bottom:14px}
.cmp table{background:var(--surface);border-radius:18px;overflow:hidden;font-size:14px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:12px 16px}
.cmp th{border-radius:0!important;font-size:13px}
.cmp tr:last-child td{border-bottom:0}

/* signature footer */
.sign{margin:48px auto 0;background:var(--green) var(--hex);color:var(--cream);border-radius:26px;padding:34px;display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
@media (min-width:760px){.sign{grid-template-columns:auto 1fr;padding:34px 44px}}
.sign img{width:120px;height:auto;justify-self:center}
.sign h2{color:var(--cream);font-size:clamp(26px,3.4vw,36px)}
.sign p{color:rgba(255,242,220,.85);margin-top:8px;max-width:44em;font-size:14px}
.sign .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sign .chips span{font-size:12px;font-weight:600;padding:4px 14px;border-radius:999px;border:1.5px solid var(--gold);color:var(--gold)}
footer{padding:0 0 56px}
footer .fine{color:var(--muted);font-size:12px;margin-top:22px;max-width:62em;line-height:1.6}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%) translateY(20px);background:var(--green);color:var(--cream);border:2px solid var(--gold);padding:12px 20px;border-radius:18px;font-weight:600;font-size:14px;line-height:1.45;text-align:center;width:max-content;max-width:min(calc(100vw - 32px),520px);opacity:0;pointer-events:none;transition:.2s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media print{
  .top,.hero,.ribbon,#models,.sec.how,footer,.form-col,.actions,.calc-head .tools,.goal-in,.banner,#sims,.tgt{display:none!important}
  .res-col{position:static!important;max-height:none!important;overflow:visible!important}
  body{background:#fff}
}


/* ================= DOOR MODULE + OPTION CONTROLS ================= */
.olab{display:block;font-weight:600;font-size:14px;margin-bottom:8px;line-height:1.35}
.seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--surface2);border:1.5px solid var(--line);border-radius:999px;padding:4px}
.seg button{flex:1 1 auto;border:0;background:transparent;border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;min-height:36px}
.seg button[aria-checked="true"]{background:var(--green);color:var(--cream)}
.seg-mode{flex:none;padding:3px}.seg-mode button{padding:6px 14px;min-height:32px}
.ocards{display:grid;gap:8px}
.ocard{display:flex;flex-direction:column;gap:2px;text-align:left;border:2px solid var(--line);background:var(--surface2);border-radius:14px;padding:10px 14px;font:inherit;color:var(--ink);cursor:pointer}
.ocard b{font-size:14px;color:var(--head)}.ocard span{font-size:12px;color:var(--muted)}
.ocard[aria-checked="true"]{border-color:var(--green);box-shadow:0 0 0 3px var(--gold)}
.chipset,.pchips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--gold);background:transparent;color:var(--head);border-radius:999px;padding:5px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;min-height:32px}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.osel{width:100%;border-radius:14px;background:var(--surface2)}
.crow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,150px);gap:10px;align-items:center;margin-bottom:8px}
.crow label{font-size:13px;font-weight:600;line-height:1.3}
.crow .inp input,.mxr .inp input{padding:7px 10px;font-size:14px}
.crow .inp .u,.mxr .inp .u{padding:0 9px;font-size:12px}
.mx{margin-bottom:12px}
.mxh,.mxr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.mxh{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px}
.mxr{margin-bottom:6px}.mxr>span{font-size:13px;font-weight:600}
details.grp{border:1.5px solid var(--line);border-radius:16px;margin:0 0 10px;background:var(--surface)}
details.grp summary{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 16px;cursor:pointer;font-family:var(--display);font-size:18px;color:var(--head);list-style:none}
details.grp summary::-webkit-details-marker{display:none}
details.grp summary::after{content:"+";font-family:var(--body);font-weight:700;font-size:18px;color:var(--gold);margin-left:4px}
details.grp[open] summary::after{content:"×"}
details.grp summary span{flex:1}
details.grp summary b{font-family:var(--body);font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.gbody{padding:4px 16px 12px}
.gnote{font-size:13px;color:var(--ink);background:var(--surface2);border-left:4px solid var(--gold);border-radius:10px;padding:10px 12px;margin:4px 0 12px;line-height:1.5}
.gnote:empty{display:none}
.gnote .ref{margin-top:8px;font-size:12px;color:var(--muted)}
.gnote .ref i{color:var(--ink)}
.gnote .btn,.gnote .pchips{margin-top:8px}
.intro{font-size:13px;line-height:1.5;background:var(--peach);border-radius:14px;padding:12px 14px;margin-bottom:22px}
.intro .btn{margin-top:10px}
.h4{font-family:var(--display);font-size:17px;color:var(--head);margin:18px 0 6px}
table .sub,td.sub{color:var(--muted);font-size:12px}
table.fc td:first-child,table.simt td:first-child,table.mref td,table.mref th{text-align:left}
table.fc .rngc{color:var(--muted);font-size:12px;white-space:nowrap}
table.fc td.good b{color:var(--good)} table.fc td.bad b{color:var(--bad)}
table.mref td.sub{min-width:150px}
.kpi3{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.kpi3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi{border-radius:16px;background:var(--surface2);border-left:5px solid var(--gold);padding:14px 16px;display:flex;flex-direction:column;gap:4px;container-type:inline-size}
.kpi.good{border-left-color:var(--good)} .kpi.bad{border-left-color:var(--bad)}
.kpi .kk{font-size:12px;font-weight:600;color:var(--muted)}
.kpi .kv{font-family:var(--display);font-weight:400;font-size:clamp(22px,16cqi,34px);color:var(--head);line-height:1.1;overflow-wrap:anywhere}
.kpi.good .kv{color:var(--good)} .kpi.bad .kv{color:var(--bad)}
.kpi .ks{font-size:12px;color:var(--muted);line-height:1.4}
.ins{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.5}
.ins li::marker{color:var(--gold)}
.more.be div{align-items:flex-start}
.more.be span small,.more.be b small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.more.be b small.good{color:var(--good)} .more.be b small.bad{color:var(--bad)}
.wf{display:grid;gap:6px}
.wfr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:10px;align-items:center;font-size:13px}
.wfr b{text-align:right;white-space:nowrap}
.wfr.tot{border-top:2px solid var(--green);padding-top:8px;margin-top:2px;font-weight:700}
.wft{position:relative;height:14px;background:var(--surface2);border-radius:999px;overflow:hidden}
.wft i{position:absolute;top:0;bottom:0;background:var(--gold);border-radius:999px}
.wft i.wfp{background:var(--green)} .wft i.wfg{background:var(--good)} .wft i.wfb{background:var(--bad)}
@media (max-width:520px){.wfr{grid-template-columns:minmax(0,1fr) auto}.wft{grid-column:1/-1;order:3}}
.simrow{margin-bottom:12px}
.simrow label{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;margin-bottom:4px}
#sims .pchips{margin:4px 0 14px;align-items:center}
.pcust{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.pcust .inp{width:120px}.pcust .inp input{padding:6px 8px;font-size:13px}
#sims .btn{margin-top:10px}
.tgt{margin-bottom:14px}.tgt button{font-size:12px}

/* ================= MOTION ================= */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes wordUp{from{opacity:0;transform:translateY(60%) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes badgeIn{from{opacity:0;transform:rotate(-200deg) scale(.3)}to{opacity:1;transform:rotate(10deg) scale(1)}}
@keyframes float{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(6deg) translateY(-8px)}}
@keyframes ribbonIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0 round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
/* the bee crosses the hero, rests off screen on the right, then starts again from the left (loops forever) */
@keyframes fly{
  0%{transform:translate(0,0) rotate(-6deg)}
  12%{transform:translate(18vw,-36px) rotate(8deg)}
  24%{transform:translate(36vw,14px) rotate(-8deg)}
  36%{transform:translate(52vw,-48px) rotate(8deg)}
  50%{transform:translate(68vw,-6px) rotate(-6deg)}
  64%{transform:translate(86vw,-40px) rotate(6deg)}
  80%,100%{transform:translate(112vw,-14px) rotate(0)}}
@keyframes buzz{from{transform:rotate(-6deg) translateY(-2px)}to{transform:rotate(6deg) translateY(2px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}}
@keyframes pop{0%{transform:scale(.97)}55%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes spinIn{from{transform:rotate(-180deg) scale(.5)}to{transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* hero load sequence (one orchestrated moment) */
.kicker{animation:popIn .6s cubic-bezier(.3,1.4,.5,1) .1s backwards}
.app-name{animation:rise .6s cubic-bezier(.2,.8,.2,1) .2s backwards}
.statement .w{display:inline-block;animation:wordUp .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.3s + var(--i)*.09s)}
.lead{animation:rise .7s cubic-bezier(.2,.8,.2,1) .95s backwards}
.desc{animation:rise .7s cubic-bezier(.2,.8,.2,1) 1.05s backwards}
.cta{animation:rise .7s cubic-bezier(.2,.8,.2,1) 1.15s backwards}
.receipt-wrap{animation:rise .9s cubic-bezier(.2,.8,.2,1) .55s backwards}
.badge-float{animation:badgeIn .9s cubic-bezier(.3,1.4,.5,1) 1.2s backwards,float 5s ease-in-out 2.1s infinite}
.ribbon{animation:ribbonIn .9s cubic-bezier(.2,.8,.2,1) .8s backwards}
.bee-fly{position:absolute;left:-80px;bottom:110px;width:54px;z-index:3;pointer-events:none;animation:fly 10s cubic-bezier(.45,0,.55,1) 1.8s infinite both}
.bee-fly img{display:block;width:100%;height:auto;animation:buzz .14s ease-in-out infinite alternate;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.empty img{animation:bob 3s ease-in-out infinite}

/* scroll reveals (only hidden when JS is running) */
.js-rv .rv:not(.in){opacity:0;transform:translateY(28px)}
.rv.in{animation:rise .75s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--d,0)*110ms)}
.banner.rv.in{animation:wipe .9s cubic-bezier(.2,.8,.2,1) backwards}
.banner.rv:not(.in){transform:none}
.banner.in .num{animation:popIn .6s cubic-bezier(.3,1.4,.5,1) .5s backwards}
.step.in .n{animation:popIn .6s cubic-bezier(.3,1.4,.5,1) calc(.25s + var(--d,0)*110ms) backwards}

/* interactions */
.btn{transition:transform .15s,filter .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.model{transition:border-color .15s,box-shadow .2s,transform .2s}
.model:hover{transform:translateY(-4px)}
.model:hover .badge{animation:wiggle .6s ease-in-out}
.model[aria-pressed="true"] .badge{background:var(--green);color:var(--gold)}
.model .badge{transition:background .2s,color .2s}
.tab{transition:background .2s,color .2s}
.fbar i,.meter .fill{transition:width .75s cubic-bezier(.2,.8,.2,1)}
.card{transition:transform .2s}
.card:hover{transform:translateY(-2px)}
.verdict.pop{animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
.verdict.pop .vi{animation:spinIn .6s cubic-bezier(.3,1.4,.5,1)}
.verdict .vi{transition:background .3s}

/* calculator entrance when a model is chosen */
.calc-grid.enter .form-col{animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards}
.calc-grid.enter .res-col{animation:rise .6s cubic-bezier(.2,.8,.2,1) .12s backwards}
.fresh>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--k,0)*70ms + .2s)}
.fresh>:nth-child(2){--k:1}.fresh>:nth-child(3){--k:2}.fresh>:nth-child(4){--k:3}.fresh>:nth-child(5){--k:4}.fresh>:nth-child(6){--k:5}.fresh>:nth-child(7){--k:6}.fresh>:nth-child(8){--k:7}.fresh>:nth-child(9){--k:8}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-rv .rv:not(.in){opacity:1!important;transform:none!important}
  .bee-fly{display:none}
}

/* ================= RIBBON TICKER (permanent) ================= */
.ribbon.ticking{padding:14px 0 14px 34px}
.tk{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-track{display:flex;width:max-content;animation:tick var(--tk-d,120s) linear infinite}
.tk:hover .tk-track{animation-play-state:paused}
.tk-run{display:flex;align-items:center;gap:22px;padding-right:22px;flex:none;font-weight:700;font-size:14px;white-space:nowrap}
.tk-run img{height:24px;width:auto}
.tk-run .sep{flex:none}
@keyframes tick{to{transform:translateX(-50%)}}
@media (max-width:640px){.ribbon.ticking{padding-left:18px}.tk-run{gap:16px;padding-right:16px;font-size:13px}}

/* ================= MULTI INDUSTRY PLATFORM ================= */
.industries{display:grid;gap:26px}
.ifilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ifilter label{font-weight:600;font-size:14px}.ifilter .inp{flex:1 1 260px;max-width:420px}
.igroup h3{font-size:22px;margin-bottom:12px}
.igrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.ind{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:8px 12px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .2s}
.ind:hover{border-color:var(--green)}
.ind[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 3px var(--gold)}
.ind .badge{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--green);display:grid;place-items:center}
.ind h4{font-family:var(--display);font-weight:400;font-size:17px;color:var(--head);margin:0;line-height:1.2}
.ind p{font-size:12px;color:var(--muted);margin:2px 0 0;line-height:1.4}
.ind small{display:block;font-size:11px;color:var(--muted);font-style:italic}
.ind .btn{grid-column:1/-1;justify-self:start}
.ind[hidden],.igroup[hidden]{display:none}
.picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.picker label{font-size:13px;font-weight:600;color:var(--muted)}
.picker select{font-weight:700;min-width:min(100%,260px)}
.cards.k10{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.cards.k10{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.flowv{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flowv .fs{display:flex;flex-direction:column;align-items:center;background:var(--surface2);border:1.5px solid var(--line);border-radius:14px;padding:8px 12px;min-width:72px;text-align:center}
.flowv .fs b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--head);line-height:1.1}
.flowv .fs span{font-size:11px;color:var(--muted);line-height:1.3;max-width:110px}
.flowv .fs.fr{background:var(--green);border-color:var(--green)} .flowv .fs.fr b{color:var(--gold)} .flowv .fs.fr span{color:var(--cream)}
.flowv .fa{color:var(--gold);font-weight:700}
.warnbox{background:var(--bad-bg);border:2px solid var(--bad);border-radius:16px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.warnbox p{margin:0}.warnbox p+p{margin-top:6px}
.sens{display:grid;gap:6px}
.sr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.st{height:12px;background:var(--surface2);border-radius:999px;overflow:hidden}
.st i{display:block;height:100%;border-radius:999px}.st i.up{background:var(--good)}.st i.dn{background:var(--bad)}
.sr b{white-space:nowrap;text-align:right}.sr b.good{color:var(--good)}.sr b.bad{color:var(--bad)}
@media (max-width:520px){.sr{grid-template-columns:minmax(0,1fr) auto}.st{grid-column:1/-1;order:3}}
table.bench td,table.bench th{text-align:left}
small.src{display:block;font-size:11px;color:var(--muted)}
.avpin{display:grid;gap:0 12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.avpin{grid-template-columns:minmax(0,1fr)}}
table.fc td.good{color:var(--good)} table.fc td.bad{color:var(--bad)}
.cbuild{background:var(--surface2);border-radius:16px;padding:14px!important}
.cst{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,110px) auto;gap:8px;align-items:center;margin-bottom:8px}
.cst .cn{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-size:12px;font-weight:700}
.cst>input{border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 10px;font:inherit;font-size:14px;min-width:0;color:var(--ink)}
.cst .inp input{padding:7px 8px;font-size:14px}.cst .inp .u{padding:0 8px;font-size:12px}
.cdel{border:0;background:transparent;color:var(--bad);font-size:20px;cursor:pointer;width:32px;height:32px;border-radius:50%}
.rep-ov{position:fixed;inset:0;z-index:100;background:rgba(14,34,25,.6);display:grid;place-items:start center;overflow:auto;padding:24px 12px}
.rep{background:#fff;color:#191816;border-radius:18px;max-width:880px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.rep-bar{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:12px 16px;background:#FFF2DC;border-radius:18px 18px 0 0;border-bottom:1px solid #EBD9B8}
.rep-bar span{display:flex;flex-wrap:wrap;gap:6px}
.rep-doc{padding:24px;font-size:14px;line-height:1.55}
.rep-doc header{border-bottom:3px solid #FFB933;margin-bottom:16px;padding-bottom:8px}
.rep-doc h1{font-family:var(--display);font-weight:400;font-size:28px;color:#196144;margin:4px 0}
.rep-doc h2{font-family:var(--display);font-weight:400;font-size:18px;color:#196144;margin:20px 0 8px}
.rep-doc .rk{color:#196144;font-weight:700;font-size:12px;margin:0}
.rep-doc table{font-size:13px;color:#191816}.rep-doc th{background:#196144;color:#FFF2DC;text-align:left}
.rep-doc td{border-bottom:1px solid #EBD9B8}.rep-doc td:first-child{text-align:left}
.rep-doc ul{padding-left:20px}.rep-doc li{margin-bottom:6px}.rep-doc .small,.rep-doc footer{font-size:12px;color:#5F6B63}
.rep-doc footer{margin-top:24px;border-top:1px solid #EBD9B8;padding-top:10px}
body.rep-open{overflow:hidden}
@media print{
  body.rp-print>*:not(#report){display:none!important}
  body.rp-print .rep-ov{position:static;background:none;padding:0;overflow:visible}
  body.rp-print .rep{box-shadow:none;max-width:none}
  body.rp-print .rep-bar{display:none}
  #avp,.picker{display:none!important}
}