/* HK Checkout: the HK Upload Desk look (dark warm glass, gold gradient, Instrument Serif + Manrope). */
:root{
  --bg:#0b0a09; --panel:rgba(26,23,20,.62); --panel2:rgba(34,30,26,.55); --line:rgba(222,196,152,.13);
  --text:#f4efe6; --muted:#a39a8b; --gold:#d6b27a; --cream:#efdcb3; --bronze:#a9793f; --green:#9ccaa6;
  --amber:#e7b866; --red:#e38b7f; --r:22px; --grad:linear-gradient(120deg,#f6e6c3,#d6b27a 48%,#9d7444);
  --ink:#17130e; --shadow:0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px var(--line) inset;
  font-family:"Manrope",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 700px at 85% -10%,rgba(214,178,122,.14),transparent 60%),
             radial-gradient(900px 600px at -10% 110%,rgba(169,121,63,.11),transparent 60%),var(--bg);background-attachment:fixed}
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
h1,h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:0}
p{margin:0}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.center{text-align:center}
.mono{font-family:"IBM Plex Mono",monospace}
.glass{background:var(--panel);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow);border-radius:var(--r)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;
  animation:shine 6s linear infinite;font-style:italic}
@keyframes shine{to{background-position:200% 0}}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);padding:.38rem .75rem;border-radius:99px;background:rgba(214,178,122,.1);box-shadow:0 0 0 1px rgba(214,178,122,.28) inset}
.link{color:var(--cream);font-weight:600;font-size:.9rem;text-decoration:none;border-bottom:1px solid rgba(239,220,179,.35)}
.link:hover{border-color:var(--cream)}

/* layout */
.wrap{max-width:1120px;margin:0 auto;padding:0 18px 40px}
.wrap.narrow{max-width:980px}
.wrap.tiny{max-width:440px;padding-top:40px}
.top{max-width:1120px;margin:12px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-family:"Instrument Serif",Georgia,serif;font-size:1.45rem;letter-spacing:.01em;white-space:nowrap}
.brand img{border-radius:50%;box-shadow:0 0 22px rgba(214,178,122,.35)}
.brand b{font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;color:var(--text);
  font:700 .95rem "Manrope",system-ui,sans-serif;letter-spacing:.01em;padding:.85rem 1.25rem;border-radius:14px;text-decoration:none;
  transition:transform .2s,box-shadow .3s,background .3s;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{color:var(--ink);background:var(--grad);background-size:180% 100%;box-shadow:0 10px 30px -8px rgba(214,178,122,.75)}
.btn.primary:hover{background-position:100% 0}
.btn.ghost{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.small{padding:.6rem .95rem;font-size:.85rem;border-radius:12px}
.btn.wide{width:100%}
.btn.big{padding:1.05rem 1.25rem;font-size:1.05rem;border-radius:16px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.glow::after{content:"";position:absolute;inset:-2px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);
  transform:translateX(-120%);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(120%)}}

/* icons (CSS masks) */
[class^="i-"],[class*=" i-"]{display:inline-block;width:18px;height:18px;background:currentColor;flex:none;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-arrow{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
.i-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E")}
.i-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.4-4A8 8 0 1112 20a8 8 0 01-3.9-1z'/%3E%3C/svg%3E")}
.i-image{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E")}

/* plans page */
.hero{text-align:center;margin:56px auto 40px;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02}
.hero h1 em{white-space:nowrap}
.hero .lead{color:var(--muted);font-size:1.08rem;max-width:560px}
.hero.small{text-align:left;align-items:flex-start;margin:30px 0 22px}
.hero.small h1{font-size:2.6rem}
.group{margin:34px 0 10px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin:0 4px 16px}
.group-head h2{font-size:2.1rem}
.plans{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.plans.n1{grid-template-columns:1fr}
.plans.n1 .plan{display:grid;grid-template-columns:1.1fr 1fr;grid-template-areas:"top feat" "tag feat" "price feat" "cta feat";column-gap:34px;align-content:start}
.plans.n1 .plan-top{grid-area:top}.plans.n1 .tagline{grid-area:tag}.plans.n1 .price{grid-area:price}.plans.n1 .btn{grid-area:cta;align-self:start}
.plans.n1 .feat{grid-area:feat;margin:0;align-self:center}
.plan{padding:24px 20px 22px;display:flex;flex-direction:column;gap:12px;transition:transform .25s,box-shadow .3s}
.plan:hover{transform:translateY(-3px)}
.plan.popular{box-shadow:0 30px 70px -26px rgba(214,178,122,.45),0 0 0 1px rgba(214,178,122,.55) inset;
  background:linear-gradient(180deg,rgba(214,178,122,.12),rgba(26,23,20,.62) 45%)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan h3{font-size:1.25rem}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--grad);padding:.3rem .55rem;border-radius:99px}
.tagline{color:var(--muted);font-size:.92rem;min-height:2.8em}
.price{display:flex;align-items:baseline;gap:.4rem;margin:2px 0 4px}
.price b{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:.9rem}
.feat{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:9px;font-size:.92rem}
.feat li{display:flex;gap:.6rem;align-items:flex-start;color:#e9e2d6}
.feat li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat}
.how{margin:44px 0 10px;padding:28px 24px}
.how h2{font-size:2rem;margin-bottom:18px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how-grid b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);color:var(--ink);font-weight:800;margin-bottom:10px}
.how-grid h4{font-size:1.02rem;margin-bottom:4px}
.how-grid p{color:var(--muted);font-size:.92rem}
.faq{margin:40px 0 0}
.faq h2{font-size:2rem;margin:0 4px 12px}
.faq details,.more{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary,.more summary{list-style:none;cursor:pointer;padding:16px 4px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker,.more summary::-webkit-details-marker{display:none}
.faq summary::after,.more summary::after{content:"+";color:var(--gold);font-weight:500;font-size:1.2rem;line-height:1}
.faq details[open] summary::after,.more[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 4px 16px;max-width:760px}
.foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:.8rem;padding:30px 18px 36px;text-align:center}
.foot img{border-radius:50%}

/* steps */
.steps{list-style:none;display:flex;gap:8px;padding:0;margin:26px 0 18px;counter-reset:s}
.steps li{flex:1;display:flex;align-items:center;gap:.55rem;font-size:.84rem;font-weight:600;color:var(--muted);padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.035);box-shadow:0 0 0 1px var(--line) inset}
.steps li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;font-size:.78rem;font-weight:800;box-shadow:0 0 0 1px var(--line) inset}
.steps li.on{color:var(--text);box-shadow:0 0 0 1px rgba(214,178,122,.55) inset;background:rgba(214,178,122,.08)}
.steps li.on span{background:var(--grad);color:var(--ink);box-shadow:none}
.steps li.done{color:var(--cream)}
.steps li.done span{background:rgba(156,202,166,.18);box-shadow:0 0 0 1px rgba(156,202,166,.5) inset}
.steps li.done span::before{content:"";width:12px;height:12px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat}

/* checkout */
.checkout{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.checkout.order{grid-template-columns:1fr 320px}
.checkout.order .summary{order:2}
.summary{padding:22px 20px;display:flex;flex-direction:column;gap:10px;position:sticky;top:16px}
.summary h2{font-size:1.9rem}
.summary h3{font-size:1.05rem;margin-bottom:6px}
.form,.pay{padding:24px 22px}
.form h2{font-size:1.9rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:16px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:.84rem;font-weight:600;color:var(--cream)}
.fld i{font-style:normal;color:var(--muted);font-weight:500;font-size:.78rem}
.fld small{color:var(--muted);font-weight:500;font-size:.76rem}
.fld input,.fld select{font:500 1rem "Manrope",system-ui,sans-serif;color:var(--text);background:rgba(0,0,0,.28);border:0;border-radius:12px;
  padding:.8rem .9rem;box-shadow:0 0 0 1px var(--line) inset;outline:0;transition:box-shadow .2s;width:100%;min-width:0}
.fld select{appearance:none;-webkit-appearance:none}
.fld input::placeholder{color:#6f675b}
.fld input:focus,.fld select:focus{box-shadow:0 0 0 1.5px var(--gold) inset}
.fld input.bad{box-shadow:0 0 0 1.5px var(--red) inset}
.more{margin-top:16px}
.more .grid2{margin:0 0 6px}
.agree{display:flex;gap:.6rem;align-items:flex-start;margin:16px 0 18px;font-size:.92rem;cursor:pointer}
.agree input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold);flex:none}
.err{color:var(--red);min-height:1.2em;font-size:.9rem;margin-top:10px}
.fine{display:flex;align-items:center;justify-content:center;gap:.45rem;color:var(--muted);font-size:.8rem;margin-top:4px}
.fine i{width:14px;height:14px}
.terms{margin:26px 4px 0;color:var(--muted);font-size:.86rem}
.terms h3{color:var(--text);font-size:.95rem;margin-bottom:8px}
.terms ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

/* order / pay */
.order-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.88rem}
.status{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .65rem;border-radius:99px;white-space:nowrap}
.s-awaiting{color:var(--amber);background:rgba(231,184,102,.12);box-shadow:0 0 0 1px rgba(231,184,102,.35) inset}
.s-verifying{color:var(--cream);background:rgba(214,178,122,.12);box-shadow:0 0 0 1px rgba(214,178,122,.45) inset}
.s-paid{color:var(--green);background:rgba(156,202,166,.12);box-shadow:0 0 0 1px rgba(156,202,166,.45) inset}
.s-rejected{color:var(--red);background:rgba(227,139,127,.12);box-shadow:0 0 0 1px rgba(227,139,127,.45) inset}
.amount{font-size:3rem;font-weight:800;letter-spacing:-.02em;margin:14px 0 0;font-variant-numeric:tabular-nums}
.paybox{margin-top:20px}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.apps .btn{padding:.8rem .4rem;font-size:.88rem}
.desk-note{display:none;color:var(--muted);font-size:.92rem;margin-top:4px}
.desk .paybox>.btn,.desk .apps{display:none}
.desk .desk-note{display:block}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;margin:20px 0 14px;text-transform:uppercase;letter-spacing:.12em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.qrwrap{display:flex;justify-content:center}
.qrwrap svg{width:216px;height:216px;border-radius:16px;background:#fff;padding:6px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.kv{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:.9rem}
.kv>span{color:var(--muted);width:96px;flex:none}
.kv b{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}
.paybox .kv{margin-top:16px}
.copy{flex:none;background:rgba(255,255,255,.06);color:var(--text);border:0;box-shadow:0 0 0 1px var(--line) inset;border-radius:10px;padding:.45rem .8rem;
  font:700 .8rem "Manrope",system-ui,sans-serif;cursor:pointer}
.paidform{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.paidform h3{font-size:1.1rem}
.filebtn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border-radius:12px;cursor:pointer;color:var(--cream);
  font-weight:600;font-size:.9rem;box-shadow:0 0 0 1px var(--line) inset;background:rgba(255,255,255,.03)}
.filebtn input{display:none}
.proofprev{max-height:180px;max-width:100%;border-radius:12px;align-self:center;box-shadow:0 0 0 1px var(--line)}
.note{border-radius:14px;padding:12px 14px;font-size:.9rem;margin-top:16px}
.note.warn{background:rgba(227,139,127,.1);box-shadow:0 0 0 1px rgba(227,139,127,.35) inset;color:#f3cbc5}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 6px 8px}
.state h2{font-size:2rem}
.state .kv{width:100%;max-width:360px}
.ring{width:58px;height:58px;border-radius:50%;border:3px solid rgba(214,178,122,.2);border-top-color:var(--gold);animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.tick{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--ink);box-shadow:0 0 40px rgba(214,178,122,.5)}
.tick i{width:30px;height:30px}
.state .btn{max-width:360px;margin-top:6px}
.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:9;
  background:#f4efe6;color:var(--ink);padding:12px 16px;border-radius:14px;font-size:.9rem;font-weight:600;transition:.25s;width:max-content;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* receipt (prints on white) */
html:has(.p-receipt),.p-receipt{background:#f3efe8;color:#17130e}
.p-receipt .noise{display:none}
.receipt{max-width:720px;margin:28px auto;background:#fff;border-radius:18px;padding:34px 34px 30px;box-shadow:0 20px 60px -30px rgba(0,0,0,.35);position:relative}
.receipt header{display:flex;align-items:center;gap:14px;border-bottom:3px solid #d6b27a;padding-bottom:18px}
.receipt header img{border-radius:50%}
.receipt header div{display:flex;flex-direction:column}
.receipt header b{font-size:1.2rem}
.receipt header span{color:#8a8175;font-size:.85rem}
.receipt h1{margin-left:auto;font-size:2.2rem;color:#17130e}
.receipt table{width:100%;border-collapse:collapse;font-size:.92rem}
.receipt .meta{margin:18px 0}
.receipt .meta th{text-align:left;color:#8a8175;font-weight:500;width:34%;padding:6px 0;vertical-align:top}
.receipt .meta td{padding:6px 0;font-weight:600}
.receipt .items th{text-align:left;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#8a8175;border-bottom:1px solid #eee7dc;padding:8px 0}
.receipt .items td{padding:12px 0;border-bottom:1px solid #eee7dc}
.receipt .items td small{display:block;color:#8a8175;font-size:.8rem}
.receipt .items td:last-child,.receipt .items th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.receipt tfoot td{font-weight:800;font-size:1.1rem;padding-top:14px;border:0}
.paid-stamp{position:absolute;right:34px;bottom:104px;transform:rotate(-12deg);color:#3f8f55;border:3px solid #3f8f55;border-radius:10px;padding:2px 12px;font-weight:800;letter-spacing:.15em;opacity:.8}
.receipt .small{color:#8a8175;margin:18px 0}
@media print{.noprint{display:none!important}.p-receipt{background:#fff}.receipt{box-shadow:none;margin:0}}

/* admin */
.orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ord{padding:16px 16px 14px;display:flex;flex-direction:column;gap:6px}
.ord:target{box-shadow:0 0 0 1.5px var(--gold) inset,var(--shadow)}
.ord-top{display:flex;justify-content:space-between;align-items:center}
.ord-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.ok-t{color:var(--green);font-weight:700}
.warn-t{color:var(--amber);font-weight:700}
.card{padding:20px;margin-top:16px}
.card h3{font-size:1.05rem;margin-bottom:4px}

@media (max-width:980px){
  .plans{grid-template-columns:1fr 1fr}
  .checkout,.checkout.order{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:640px){
  .top{margin:8px 10px 0;padding:8px 12px}
  .brand{font-size:1.25rem}
  .hero{margin:36px auto 26px}
  .plans,.plans.n1 .plan{grid-template-columns:1fr}
  .plans.n1 .plan{display:flex}
  .how-grid,.grid2{grid-template-columns:1fr}
  .steps li{font-size:0;justify-content:center;padding:9px 6px;gap:0}
  .steps li.on{font-size:.8rem;gap:.45rem;flex:2.2}
  .wrap{padding:0 12px 32px}
  .form,.pay{padding:20px 16px}
  .amount{font-size:2.6rem}
  .receipt{margin:0;border-radius:0;padding:24px 18px}
  .receipt h1{font-size:1.7rem}
  .paid-stamp{bottom:92px;right:18px}
}

/* validity, group note, comparison table (Harsh's plan sheet) */
.valid{font-size:.8rem;color:var(--cream);opacity:.85;margin:-6px 0 2px}
.summary .valid{margin:-4px 0 4px}
.gnote{color:var(--muted);font-size:.86rem;margin:14px 4px 0}
.compare{margin-top:16px;padding:0;overflow:hidden}
.compare summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;display:flex;justify-content:space-between}
.compare summary::-webkit-details-marker{display:none}
.compare summary::after{content:"+";color:var(--gold);font-size:1.2rem;line-height:1}
.compare[open] summary::after{content:"–"}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.compare th,.compare td{padding:11px 12px;border-top:1px solid var(--line);text-align:center}
.compare tbody th{text-align:left;font-weight:500;color:#e9e2d6;position:sticky;left:0;background:#16130f;z-index:1;min-width:190px}
.compare thead th{font-size:.95rem;font-weight:800;color:var(--text);vertical-align:bottom}
.compare thead th span{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:2px}
.compare thead th.pop{color:var(--cream)}
.compare thead th:first-child,.compare tfoot th{position:sticky;left:0;background:#16130f;z-index:1}
.compare tr.sec th{text-align:left;font-family:"Instrument Serif",Georgia,serif;font-size:1.2rem;font-weight:400;color:var(--cream);
  background:rgba(214,178,122,.07);position:static;padding-top:14px}
.compare td.y i{width:16px;height:16px;color:var(--gold)}
.compare td.n{color:#5d564c}
.compare td.num{font-weight:800;font-variant-numeric:tabular-nums}
.compare td.num.zero{color:#5d564c;font-weight:600}
.compare tfoot td{padding:14px 8px}
.compare tfoot .btn{width:100%}
@media (max-width:640px){
  .compare table{font-size:.82rem}
  .compare th,.compare td{padding:10px 8px}
  .compare tbody th{min-width:150px}
}
.swipe{display:none;color:var(--muted);font-size:.8rem;margin:-6px 20px 10px}
@media (max-width:640px){.swipe{display:block}}
.agree.wide2{grid-column:1/-1;margin:4px 0 0}

/* state picker, screenshot box, desk extras (24 Oct 2026) */
.sel{position:relative;display:block}
.sel::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(45deg);pointer-events:none}
.sel select{padding-right:2.4rem;cursor:pointer}
.fld select:invalid{color:#6f675b}
.fld select option,.fld select optgroup{color:#17130e;background:#fff}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 14px;border-radius:16px;cursor:pointer;
  text-align:center;border:1.5px dashed rgba(214,178,122,.45);background:rgba(214,178,122,.05);transition:.2s}
.drop:hover{background:rgba(214,178,122,.09)}
.drop input{display:none}
.drop i{width:26px;height:26px;color:var(--gold);margin-bottom:4px}
.drop b{font-size:1rem}
.drop span{color:var(--muted);font-size:.84rem}
.drop.has{border-style:solid;border-color:rgba(156,202,166,.55)}
.drop .proofprev{margin-top:10px}
.thumb{display:block;margin-top:6px}
.thumb img{max-width:100%;max-height:220px;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.states{margin-top:6px;color:var(--cream)}
em.def{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--grad);
  padding:.15rem .45rem;border-radius:99px;margin-left:6px}
.card .kv .copy+.copy{margin-left:-4px}
.card .kv>span{width:200px}
@media (max-width:640px){.card .kv{flex-wrap:wrap}.card .kv>span{width:100%}}