/* Tezvex — bento design system */
:root{
  --bg:#e8ecf1; --tile:#fff; --ink:#14161c; --muted:#5d6574; --line:#e2e6ed; --field:#f2f4f8;
  --accent:#4a3cf7; --accent-d:#3a2ed6; --accent-soft:#e5e2ff; --lime:#d9f56b; --lav:#dcd8ff; --sun:#ffe6a3;
  --ok:#157a46; --ok-bg:#dff5e8; --warn:#8a5a00; --warn-bg:#fff0c9; --bad:#b3261e; --bad-bg:#fde4e2;
  --gap:14px; --r-tile:28px; --r-in:14px;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif; --body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--body);text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.025em;line-height:1.08}
p{margin:0 0 .8em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.shell{max-width:1240px;margin:0 auto;padding:12px 16px 40px}
main{display:block;padding-top:var(--gap)}
.muted{color:var(--muted)}.small{font-size:13px}.capitalize{text-transform:capitalize}.preserve{white-space:pre-wrap}

/* top bar */
.topbar{position:sticky;top:10px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-radius:999px;padding:8px 10px 8px 22px;box-shadow:0 1px 0 #0001,0 10px 30px -18px #0005}
.brand{display:flex;align-items:center;gap:9px;font:800 22px var(--display);letter-spacing:-.04em}
.brand i{width:22px;height:22px;border-radius:7px;background:var(--ink);position:relative;display:inline-block}
.brand i:after{content:"";position:absolute;inset:5px 5px auto auto;width:8px;height:8px;border-radius:3px;background:var(--lime)}
.topbar nav{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600}
.topbar nav a,.nav-button{padding:9px 14px;border-radius:999px;color:var(--ink)}
.topbar nav a:hover,.nav-button:hover{background:var(--field)}
.nav-button{border:0;background:none;font:inherit;font-weight:600;cursor:pointer}
.topbar nav .nav-cta{background:var(--ink);color:#fff}.topbar nav .nav-cta:hover{background:var(--accent)}
.cart-nav{display:inline-flex;align-items:center;gap:8px;background:var(--lime)}
.cart-nav:hover{background:#cdeb52!important}
.cart-badge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;display:inline-grid;place-items:center}
form.inline{display:inline;margin:0}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap);align-items:stretch}
.tile{background:var(--tile);border-radius:var(--r-tile);padding:26px;min-width:0;position:relative;overflow:hidden}
.tile.flat{padding:0}
.tile.ink{background:var(--ink);color:#fff}.tile.ink .muted{color:#aab1c0}
.tile.lime{background:var(--lime)}.tile.lav{background:var(--lav)}.tile.sun{background:var(--sun)}.tile.accent{background:var(--accent);color:#fff}
.tile.lime .muted,.tile.lav .muted,.tile.sun .muted{color:#3b4150}
.tile h2{font-size:22px;margin-bottom:14px}.tile h3{font-size:18px;margin-bottom:8px}
.tile-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.tile-head h2{margin:0}
.tile-head a{font-size:13px;font-weight:700;color:var(--accent)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:1/-1}
.r2{grid-row:span 2}
@media(max-width:1000px){.bento>*{grid-column:span 6}.bento>.c7,.bento>.c8,.bento>.c9,.bento>.c12,.bento>.c6.feature{grid-column:1/-1}.r2{grid-row:auto}}
@media(max-width:640px){.bento>*{grid-column:1/-1!important}.tile{padding:20px;border-radius:24px}.topbar{padding-left:16px;border-radius:26px;flex-wrap:wrap}.topbar nav{flex-wrap:wrap}.bento>.product-card{grid-column:span 1!important}.bento.products{grid-template-columns:repeat(2,minmax(0,1fr))}.bento.products>.product-card.feature{grid-column:1/-1!important}}

/* page head */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 8px 18px}
.pagehead h1{font-size:clamp(30px,4.5vw,46px)}.pagehead p{margin:8px 0 0;color:var(--muted)}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}
.dash-nav{display:flex;gap:6px;overflow-x:auto;padding:6px;background:rgba(255,255,255,.65);border-radius:999px;margin-bottom:var(--gap);scrollbar-width:none}
.dash-nav::-webkit-scrollbar{display:none}
.dash-nav a{white-space:nowrap;padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted)}
.dash-nav a:hover{background:#fff;color:var(--ink)}.dash-nav a.active{background:var(--ink);color:#fff}

/* buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 20px;border:0;border-radius:999px;font:700 14px var(--body);cursor:pointer;transition:background .15s,transform .15s;text-align:center}
.button:hover{transform:translateY(-1px)}.button:active{transform:none}
.button.primary,.primary{background:var(--ink);color:#fff!important}.primary:hover{background:var(--accent)}
.button.secondary,.secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}.secondary:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.button.soft{background:var(--field);color:var(--ink)}.button.soft:hover{background:var(--accent-soft)}
.button.lime{background:var(--lime);color:var(--ink)}.button.lime:hover{background:#cdeb52}
.tile.ink .button.primary{background:var(--lime);color:var(--ink)!important}.tile.ink .button.secondary{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff5}
.button.full,.full{width:100%}.button[disabled],.button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.button.sm{min-height:36px;padding:7px 14px;font-size:13px}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.text-button{border:0;background:none;padding:6px 10px;border-radius:999px;font:700 13px var(--body);color:var(--accent);cursor:pointer}
.text-button:hover{background:var(--accent-soft)}.text-button.danger,.danger{color:var(--bad)}.text-button.danger:hover{background:var(--bad-bg)}

/* forms */
.stack{display:grid;gap:16px}
label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#2c3340}
label small{font-weight:400;color:var(--muted)}
input,textarea,select{width:100%;min-height:46px;border:2px solid transparent;border-radius:var(--r-in);padding:11px 14px;background:var(--field);color:var(--ink);font:400 15px var(--body);outline:none;transition:border-color .15s,background .15s}
textarea{resize:vertical;min-height:90px}
input:focus,textarea:focus,select:focus{border-color:var(--accent);background:#fff}
input[readonly]{color:var(--muted);cursor:not-allowed}
input[type=color]{padding:4px;height:46px;cursor:pointer}
input[type=file]{padding:10px;font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.qty-input{width:84px;min-height:40px;text-align:center}

/* flash */
.flash{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-radius:20px;margin-bottom:var(--gap);font-weight:600;font-size:14px;background:#fff}
.flash.success{background:var(--ok-bg);color:var(--ok)}.flash.error{background:var(--bad-bg);color:var(--bad)}.flash.warning{background:var(--warn-bg);color:var(--warn)}
.flash a{text-decoration:underline}

/* hero / marketing */
.hero-tile{padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;justify-content:space-between;min-height:440px}
.hero-tile h1{font-size:clamp(40px,6.4vw,84px);letter-spacing:-.045em;line-height:.98;max-width:11ch}
.hero-tile p{max-width:46ch;font-size:18px;color:var(--muted);margin-top:20px}
.receipt{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(-60px,-4vw,-30px);width:270px;background:#fff;border:2px dashed #14161c33;border-radius:18px;padding:20px 20px 74px;transform:rotate(5deg);box-shadow:0 24px 50px -24px #0006;font:500 13px/1.9 var(--body)}
.receipt b{font:800 15px var(--display)}.receipt div{display:flex;justify-content:space-between;gap:12px}.receipt hr{border:0;border-top:1.5px dashed #14161c33;margin:8px 0}
@media(max-width:1000px){.receipt{display:none}}
.big{font:800 clamp(40px,5vw,64px)/1 var(--display);letter-spacing:-.04em;display:block;margin-bottom:8px}
.feature-tile{display:flex;flex-direction:column;justify-content:space-between;min-height:200px}
.glyph{width:44px;height:44px;border-radius:14px;background:#14161c14;display:grid;place-items:center;font:800 20px var(--display);margin-bottom:28px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:26px 8px 14px}
.section-title h2{font-size:clamp(26px,3.4vw,38px)}

/* product cards */
.product-card{display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px #0007}
.pimg{display:block;position:relative;aspect-ratio:1/1;background:linear-gradient(135deg,var(--lav),#f1f2f7);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.product-card:hover .pimg img{transform:scale(1.04)}
.pph{position:absolute;inset:0;display:grid;place-items:center;font:800 64px var(--display);color:#4a3cf766}
.badge{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.product-info{padding:16px 18px 18px;display:grid;gap:10px;align-content:start;flex:1}
.product-info h3{font-size:17px;margin:0;letter-spacing:-.015em;line-height:1.25}
.muted-link{font-size:12.5px;color:var(--muted);font-weight:600}.muted-link:hover{color:var(--accent)}
.price-row{display:flex;align-items:baseline;gap:8px}.price-row strong{font:800 18px var(--display)}.price-row del{color:var(--muted);font-size:13px}
.product-card.feature .pimg{aspect-ratio:auto;flex:1;min-height:320px}
.product-card.feature .product-info h3{font-size:26px}
.product-card.feature .product-info{padding:22px 24px 24px}
.product-info form{margin:0}

/* storefront */
.shop .store-hero{background:var(--store-primary,#14161c);color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;padding:clamp(26px,4vw,48px)}
.shop .store-hero h1{font-size:clamp(38px,5.4vw,72px);letter-spacing:-.045em;line-height:1;margin-bottom:12px;overflow-wrap:anywhere}
.shop .store-hero>div>p{font-size:18px;color:#ffffffcc;margin:0;max-width:44ch}
.store-badge{align-self:flex-start;background:var(--store-accent,#f59e0b);color:#14161c;font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px}
.shop .button.primary,.shop .primary{background:var(--store-primary,#14161c)}.shop .primary:hover{filter:brightness(1.25)}
.shop .tile.ink .button.primary,.shop .store-hero .button.primary{background:var(--store-accent,#f59e0b);color:#14161c!important}
.store-info-panel{display:flex;flex-direction:column;justify-content:center}
.store-info-panel p{white-space:pre-wrap;font-size:16px;margin:0;color:#2c3340}
.store-contact-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--ink);color:#fff}
.store-contact-panel .muted{color:#aab1c0}
.contact-chips{display:flex;gap:10px;flex-wrap:wrap}.contact-chips span{background:#ffffff1a;padding:10px 16px;border-radius:999px;font-size:14px}
.contact-chips .button.secondary{background:var(--lime);color:var(--ink);box-shadow:none}

/* product detail */
.breadcrumb{font-size:13px;color:var(--muted);margin:6px 8px 16px}.breadcrumb a{font-weight:700;color:var(--ink)}
.detail-image{padding:0;min-height:420px}.detail-image img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}
.detail-image .pimg{aspect-ratio:1/1;height:100%}
.detail-price{font:800 34px var(--display);letter-spacing:-.03em;margin:14px 0}.detail-price del{font:500 17px var(--body);color:var(--muted);margin-left:10px}
.stock-chip{display:inline-block;background:var(--ok-bg);color:var(--ok);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.stock-chip.low{background:var(--warn-bg);color:var(--warn)}
.buy-form{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:end;margin:22px 0 10px}
.buy-form .button{grid-column:1/-1}
.review-item{padding:16px 0;border-top:1px solid var(--line)}.review-item p{margin:6px 0 4px}
.review-stars{color:#e0a100;letter-spacing:2px}

/* tables */
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th{font-size:12px;font-weight:700;color:var(--muted);padding:0 12px 10px;white-space:nowrap}
td{padding:14px 12px;border-top:1px solid var(--line);font-size:14px;vertical-align:middle}
td small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
td a{font-weight:700}td a:hover{color:var(--accent)}
.table-product{display:flex;align-items:center;gap:12px;min-width:200px}
.table-product img,.mini-placeholder{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none}
.mini-placeholder{display:grid;place-items:center;background:var(--lav);font:800 16px var(--display)}
.row-actions{display:flex;gap:4px;align-items:center}.row-actions form{margin:0}
.pill{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--field);font-size:12px;font-weight:700;text-transform:capitalize;white-space:nowrap}
.pill.s-pending,.pill.s-processing{background:var(--warn-bg);color:var(--warn)}
.pill.s-confirmed,.pill.s-shipped{background:var(--accent-soft);color:var(--accent-d)}
.pill.s-delivered,.pill.s-published,.pill.s-paid,.pill.s-active{background:var(--ok-bg);color:var(--ok)}
.pill.s-cancelled,.pill.s-draft,.pill.s-paused{background:var(--bad-bg);color:var(--bad)}
.empty{text-align:center;padding:36px 16px}.empty h3{font-size:22px;margin-bottom:8px}.empty p{color:var(--muted)}.empty a{font-weight:700;color:var(--accent)}

/* stats */
.stat b{display:block;font:800 clamp(30px,3.4vw,46px)/1 var(--display);letter-spacing:-.04em;margin:10px 0 6px;overflow-wrap:anywhere}
.stat span{font-weight:600;font-size:14px}.stat small{display:block;opacity:.7;font-size:13px}
.meter{height:10px;border-radius:99px;background:#ffffff26;overflow:hidden;margin:14px 0 8px}.meter i{display:block;height:100%;background:var(--lime);border-radius:99px}
.bars{display:flex;align-items:flex-end;gap:10px;height:180px;padding-top:10px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;font-size:12px;color:var(--muted)}
.bar i{display:block;width:100%;max-width:56px;min-height:4px;border-radius:12px 12px 4px 4px;background:var(--accent)}
.bar:last-child i{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}
.link-list{display:grid;gap:8px}.link-list a,.link-list button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 16px;border-radius:16px;background:var(--field);font:700 14px var(--body);border:0;cursor:pointer;text-align:left;color:var(--ink)}
.link-list a:hover,.link-list button:hover{background:var(--accent-soft)}
.low-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #ffffff22;font-size:14px}.low-row:first-of-type{border-top:0}

/* cart / checkout */
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.cart-line:first-child{border-top:0;padding-top:0}
.cart-line .thumb{width:64px;height:64px;border-radius:16px;object-fit:cover;background:var(--lav);display:grid;place-items:center;font:800 20px var(--display)}
.cart-line b{display:block}.cart-line small{color:var(--muted)}
.cart-controls{display:flex;align-items:center;gap:6px}
.summary-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14px}.summary-line b{white-space:nowrap}
.summary-line.total{border-top:1.5px dashed #ffffff44;margin-top:8px;padding-top:16px;font:800 22px var(--display)}
.sticky{position:sticky;top:84px}
.payment-methods{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.payment-methods{grid-template-columns:1fr}}
.payment-method{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--field);border:2px solid transparent;position:relative}
.payment-method.selected{border-color:var(--ink);background:#fff}.payment-method.disabled{opacity:.55}
.payment-method b{display:block;font-size:14px}.payment-method small{color:var(--muted);font-size:12px}
.payment-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:800 14px var(--display);background:var(--lime);flex:none}
.upi-mark{background:var(--lav)}
.payment-check{margin-left:auto;font-weight:800}.coming-soon{margin-left:auto;font-size:11px;font-weight:700;background:var(--sun);padding:3px 9px;border-radius:99px}
.pin-status{font-weight:600;color:var(--muted)}
.pin-status[data-state=success]{color:var(--ok)}.pin-status[data-state=error]{color:var(--bad)}.pin-status[data-state=warn]{color:var(--warn)}.pin-status[data-state=loading]{color:var(--accent)}
.success-wrap{max-width:560px;margin:40px auto}.success-card{text-align:center;padding:48px 28px}
.success-icon{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:30px;margin:0 auto 22px}
.order-number{background:#fff;border:2px dashed #14161c44;border-radius:18px;padding:16px;margin:22px auto;max-width:340px}.order-number span{display:block;font-size:13px;color:var(--muted)}.order-number b{font:800 22px var(--display);letter-spacing:.02em;overflow-wrap:anywhere}
.totals{max-width:320px;margin:18px 0 0 auto}.totals p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:6px 0}.totals .total{font:800 20px var(--display);border-top:1.5px solid var(--line);margin-top:6px;padding-top:12px}

/* auth */
.auth-card h1{font-size:clamp(32px,4vw,46px);margin-bottom:10px}
.auth-pitch{display:flex;flex-direction:column;justify-content:space-between;min-height:360px}
.auth-pitch h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em}

/* pricing */
.price-tag{font:800 44px var(--display);letter-spacing:-.04em}.price-tag small{font:500 14px var(--body);color:var(--muted);margin-left:4px}
.tile.ink .price-tag small{color:#aab1c0}
.pricing ul{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:9px;font-size:14px}.pricing li:before{content:"✓";font-weight:800;margin-right:9px;color:var(--ok)}
.tile.ink.pricing li:before{color:var(--lime)}

/* editor */
.section-list{display:grid;gap:10px;margin:14px 0}
.draggable-section{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--field);border-radius:18px;cursor:grab;user-select:none;transition:background .15s,transform .15s}
.draggable-section.is-dragging{opacity:.55;transform:scale(.98);background:var(--accent-soft)}
.drag-handle{font-size:20px;color:var(--muted);touch-action:none;cursor:grab}
.section-icon{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.section-label{display:grid;flex:1}.section-label small{color:var(--muted);font-weight:400}.drag-hint{font-size:12px;color:var(--muted)}
.theme-current{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px;background:var(--field);border-radius:16px}.theme-current small{display:block;color:var(--muted)}
.theme-swatch{width:36px;height:36px;border-radius:12px}
.upload-drop{display:grid;place-items:center;gap:6px;text-align:center;padding:26px 16px;border:2px dashed #14161c33;border-radius:20px;cursor:pointer;position:relative;background:#fff}
.upload-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0}.upload-drop.drag-active{background:var(--accent-soft);border-color:var(--accent)}
.upload-icon{font:800 24px var(--display)}
.theme-format{margin-top:16px;display:grid;gap:6px;font-size:13px}.theme-format code{background:var(--field);padding:5px 10px;border-radius:8px;width:max-content}
.text-link{color:var(--accent);font-weight:700}
.img-preview{width:100%;aspect-ratio:1/1;border-radius:20px;object-fit:cover;background:var(--field);display:block;margin-bottom:12px}

/* filter chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{padding:8px 14px;border-radius:999px;background:var(--field);font-size:13px;font-weight:700;color:var(--muted)}
.chip:hover{background:var(--accent-soft);color:var(--ink)}.chip.active{background:var(--ink);color:#fff}

/* footer + legal */
.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:22px 12px 8px;font-size:13px;color:var(--muted)}
.footer-links{display:flex;gap:18px}.footer-links a:hover{color:var(--accent)}
.legal-page{max-width:820px;margin:0 auto}.legal-page h1{font-size:clamp(32px,4vw,48px);margin-bottom:12px}.legal-page h2{font-size:21px;margin:26px 0 8px}.legal-page p,.legal-page li{color:#2c3340}
.legal-page .eyebrow{display:none}
.panel{background:#fff;border-radius:var(--r-tile);padding:26px;margin-bottom:var(--gap)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* payment method radio cards + helpers */
fieldset.payment-methods{border:0;margin:0;padding:0;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
label.payment-method{cursor:pointer;color:var(--ink)}
label.payment-method input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
label.payment-method .payment-check{opacity:0}
label.payment-method:has(input:checked){border-color:var(--ink);background:#fff}
label.payment-method:has(input:checked) .payment-check{opacity:1}
label.payment-method:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.pill.s-awaiting_payment,.pill.s-failed{background:var(--warn-bg);color:var(--warn)}
.pill.s-failed{background:var(--bad-bg);color:var(--bad)}

/* ===== Home page additions (append to public/css/app.css) ===== */
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.brand svg{width:28px;height:28px;border-radius:9px;display:block}
.brand i{display:none}
.ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#14161c12;margin-bottom:26px}
.tile.ink .ico{background:#ffffff1c;color:var(--lime)}
.tile.lime .ico,.tile.lav .ico,.tile.sun .ico{background:#14161c14}
.facts .tile{padding:20px 22px;display:flex;gap:14px;align-items:center}
.facts .ico{margin:0;width:44px;height:44px;flex:none}
.facts b{display:block;font:700 15px/1.25 var(--display);letter-spacing:-.01em}.facts span{font-size:13px;color:var(--muted)}
.feature-tile p{margin:0}
.mock{background:#f2f4f8;border-radius:18px;padding:12px;margin-top:22px}
.mock-bar{display:flex;gap:6px;margin-bottom:10px}.mock-bar i{display:block;width:9px;height:9px;border-radius:50%;background:#14161c26}
.mock-hero{background:var(--ink);border-radius:12px;padding:14px;margin-bottom:8px;color:#fff;font:700 15px var(--display)}
.mock-hero small{display:block;font:400 11px var(--body);color:#ffffffaa;margin-top:2px}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-card{background:#fff;border-radius:12px;padding:8px}
.mock-img{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,var(--lav),#fff)}
.mock-card:nth-child(2) .mock-img{background:linear-gradient(135deg,var(--lime),#fff)}.mock-card:nth-child(3) .mock-img{background:linear-gradient(135deg,var(--sun),#fff)}
.mock-line{height:7px;border-radius:4px;background:#14161c1f;margin-top:7px}.mock-line.s{width:55%}
.step-num{font:800 15px var(--display);background:var(--ink);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:26px}
.tile.lime .step-num{background:var(--ink)}
.faq details{padding:0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px 26px;font:700 17px/1.3 var(--display);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:500 26px/1 var(--body);color:var(--accent);flex:none}
.faq details[open] summary:after{content:"\2013"}
.faq details p{padding:0 26px 24px;margin:0;color:var(--muted)}
.plan-note{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.plan-badge{display:inline-block;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;margin-left:6px;vertical-align:middle}
.pricing .price-was{color:var(--muted);font-size:13px;margin:0 0 4px}.pricing .price-was del{margin-right:6px}
.tile.ink.pricing .price-was{color:#aab1c0}
.pricing li:before{content:none!important}
.pricing li{display:flex;gap:10px;align-items:flex-start}
.pricing li .i{width:18px;height:18px;margin-top:2px;color:var(--ok)}
.tile.ink.pricing li .i{color:var(--lime)}
.pricing .button{margin-top:auto}
.pricing{display:flex;flex-direction:column}
.cta-tile{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(28px,4vw,48px)}
.cta-tile h2{font-size:clamp(30px,4.4vw,56px);letter-spacing:-.04em;max-width:16ch;margin:0}

/* ===== v2: pro hero, comparison, onboarding ===== */
.hl{background:linear-gradient(transparent 62%,var(--lime) 62%);padding:0 .06em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-pro{padding:clamp(28px,4.5vw,56px);display:flex;flex-direction:column;justify-content:center;min-height:470px}
.hero-pro h1{font-size:clamp(42px,6vw,80px);letter-spacing:-.045em;line-height:.98;max-width:12ch}
.hero-pro>p{max-width:48ch;font-size:18px;color:var(--muted);margin:22px 0 0}
.hero-sub{font-size:13px;color:var(--muted);margin:16px 0 0}
.dash-tile{padding:14px;display:flex;flex-direction:column;gap:10px}
.dash-mock{background:#fff;color:var(--ink);border-radius:20px;padding:16px;flex:1}
.dm-bar{display:flex;gap:6px;margin-bottom:14px}.dm-bar i{display:block;width:9px;height:9px;border-radius:50%;background:#14161c26}
.dm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font:700 16px var(--display);letter-spacing:-.02em}
.dm-head span{font:600 11px var(--body);background:var(--ok-bg);color:var(--ok);padding:4px 9px;border-radius:99px}
.dm-stats{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;margin-bottom:12px}
.dm-stat{border-radius:16px;padding:12px;background:var(--field);min-width:0}.dm-stat.lime{background:var(--lime)}
.dm-stat small{display:block;font-size:11px;color:#3b4150}.dm-stat b{display:block;font:800 clamp(17px,2vw,22px) var(--display);letter-spacing:-.03em;white-space:nowrap}
.mini-bars{display:flex;align-items:flex-end;gap:6px;height:56px;margin:2px 0 14px}.mini-bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--accent-soft)}.mini-bars i:last-child{background:var(--accent)}
.dm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.dm-row b{font-weight:700}.dm-row small{color:var(--muted);display:block;font-size:11px}.dm-row .pill{font-size:11px}
.dash-cap{font-size:12px;color:#aab1c0;padding:0 6px 4px;display:flex;justify-content:space-between;gap:8px}
.built-for{display:flex;flex-direction:column;gap:18px;justify-content:center}
.built-for h3{margin:0}.chip.w{background:#fff;color:var(--ink);cursor:default}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pillars div{background:#14161c0d;border-radius:16px;padding:14px 16px}.pillars b{display:block;font:800 26px var(--display);letter-spacing:-.03em}.pillars span{font-size:13px;color:var(--muted)}
.section-title p{margin:8px 0 0;color:var(--muted);max-width:56ch}
.compare h2{margin-bottom:6px}.compare>p{margin:0;color:var(--muted)}
.compare ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px}
.compare li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.compare li .i{width:20px;height:20px;margin-top:1px}
.compare.bad .i{color:var(--bad)}.compare.good .i{color:var(--lime)}.compare.good>p{color:#aab1c0}
.steps .tile{display:flex;flex-direction:column;padding:22px}
.step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.step-top .step-num{margin:0}
.time-chip{background:var(--field);padding:5px 11px;border-radius:99px;font-size:12px;font-weight:700}
.tile.lime .time-chip{background:#14161c14}
.steps h3{margin-bottom:6px}.steps .tile>p{font-size:14px;margin:0}
.step-mock{margin-top:auto;padding-top:20px}
.sm-box{background:var(--field);border-radius:16px;padding:12px;display:grid;gap:8px}
.tile.lime .sm-box{background:#ffffff80}
.sm-in{height:30px;border-radius:9px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:11.5px;color:var(--muted)}
.sm-btn{height:32px;border-radius:99px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.sm-prod{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:8px;font-size:12px;font-weight:700}
.sm-prod small{display:block;font-weight:500;color:var(--muted)}
.sm-thumb{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--lav),#fff);flex:none}
.sm-opt{background:#fff;border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;gap:8px}
.sm-opt small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.sm-opt.on{box-shadow:inset 0 0 0 2px var(--ink)}.sm-opt .i{width:18px;height:18px}
.sm-link{background:#fff;border-radius:999px;padding:6px 6px 6px 14px;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:600;gap:8px}
.sm-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sm-link b{background:var(--ink);color:#fff;border-radius:99px;padding:6px 12px;font-size:11px;flex:none}
.total-strip{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding:20px 26px}
.total-strip h3{margin:0;font-size:20px}.total-strip ul{list-style:none;display:flex;gap:10px 24px;flex-wrap:wrap;margin:0;padding:0;font-size:14px;font-weight:600}
.total-strip li{display:flex;gap:8px;align-items:center}.total-strip .i{width:18px;height:18px;color:var(--lime)}
@media(max-width:640px){.dm-stats{grid-template-columns:1fr 1fr}.dm-stats .dm-stat.lime{grid-column:1/-1}.pillars{grid-template-columns:1fr}}

/* icon sizing in existing components */
.payment-check .i{width:18px;height:18px}.payment-mark .i{width:20px;height:20px}
.success-icon .i{width:30px;height:30px;stroke-width:2.4}
.link-list .i{width:18px;height:18px}
.contact-chips .i{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.section-icon .i{width:20px;height:20px}
.auth-pitch .ico{margin-bottom:0}

/* Production mobile usability pass */
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-wrap:anywhere}
button,input,select,textarea{font:inherit}
button,a,.button{touch-action:manipulation}
.topbar{min-width:0}
.topbar nav{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.topbar nav a,.topbar .nav-button{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:680px}
.product-card img,.detail-image img{display:block;width:100%;height:auto;object-fit:cover}
input,textarea,select{max-width:100%;font-size:16px}
@media(max-width:768px){
  .shell{padding:10px 12px 28px}
  .topbar{position:relative;top:auto;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:22px}
  .brand{font-size:21px;flex:none}
  .topbar nav{flex:1 1 100%;justify-content:flex-start;gap:4px}
  .topbar nav a,.topbar .nav-button{padding:9px 11px;min-height:42px;font-size:14px}
  .topbar nav form.inline{display:inline-flex}
  .hero-pro{min-height:0;padding:clamp(24px,7vw,36px)}
  .hero-pro h1{font-size:clamp(36px,10vw,58px);line-height:1.02;max-width:15ch}
  .hero-pro>p{font-size:16px}
  .actions{align-items:stretch}
  .actions .button{flex:1 1 180px}
  .section-title{align-items:flex-start;gap:12px}
  .section-title h2{font-size:clamp(24px,6vw,32px)}
  .form-grid{grid-template-columns:minmax(0,1fr)!important}
  .pagehead{padding:18px 4px 14px}
  .dash-nav{border-radius:16px;max-width:100%}
  .footer{gap:12px;align-items:flex-start;flex-direction:column}
  .footer-links{flex-wrap:wrap;gap:8px 16px}
  .table-wrap{border-radius:12px}
  .tile{min-width:0}
  .bento.products{gap:10px}
  .product-card{min-width:0}
  .product-card h3,.product-card p{overflow-wrap:anywhere}
  .buy-form{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:420px){
  .shell{padding-inline:8px}
  .tile{padding:17px;border-radius:20px}
  .tile.flat{padding:0}
  .topbar{padding:11px;border-radius:18px}
  .topbar nav a,.topbar .nav-button{padding:8px 9px;font-size:13px}
  .bento.products{grid-template-columns:minmax(0,1fr)}
  .bento.products>.product-card.feature{grid-column:1/-1!important}
  .button{white-space:normal}
  .pillars{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}