/* Gridiron: one stylesheet. Each app page sets --accent, --accent-ink and --accent-text on <body>.
   Per-app animated scenes live in css/scenes/<slug>.css. */
:root{
  --ink:#0e1110; --ink-2:#161a19; --ink-3:#1f2422;
  --chalk:#f6f4ef; --paper:#fff; --white:#fff; --soft:#efece5;
  --char:#151817; --muted:#5d625f; --line:#e4e0d7;
  --ember:#ff5a1f; --ember-ink:#1a0a03; --gold:#ffb21e;
  --accent:#ff5a1f; --accent-ink:#1a0a03; --accent-text:#c2410c;
  --display:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:18px; --shadow:0 1px 2px rgba(16,20,18,.05),0 12px 32px -12px rgba(16,20,18,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--chalk);color:var(--char);font:16px/1.6 var(--sans);overflow-x:hidden}
img,svg,video{max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ember);color:var(--ember-ink);padding:10px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.muted{color:var(--muted)}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
.kicker{font:600 .8rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:999px;border:1.5px solid transparent;font:700 .95rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-lg{min-height:54px;padding:15px 28px;font-size:1.02rem}
.btn-sm{min-height:34px;padding:6px 14px;font-size:.85rem}
.btn-gold{background:var(--ember);color:var(--ember-ink);box-shadow:0 8px 24px -8px rgba(255,90,31,.6)}
.btn-gold:hover{background:#ff6f3a}
.btn-ghost{border-color:rgba(246,244,239,.35);color:var(--chalk)}
.btn-ghost:hover{border-color:var(--chalk);background:rgba(255,255,255,.06)}
.btn-line{border-color:rgba(21,24,23,.25);color:var(--char);background:transparent}
.btn-line:hover{border-color:var(--char)}
.btn-clover{background:var(--accent);color:var(--accent-ink)}
.btn-acc{background:var(--accent);color:var(--accent-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn-row.center{justify-content:center}

/* logo */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.g-mark{flex:none;color:currentColor}
.wordmark{font:800 1.6rem/1 var(--display);letter-spacing:.06em}
.top .gm-b,.foot .gm-b,.og .gm-b{fill:#2a4694}.top .gm-n,.foot .gm-n,.og .gm-n{fill:#1d3470}
.foot-mark{display:flex;justify-content:center;padding:56px 0 8px}.foot-mark .g-mark{width:min(360px,62vw);height:auto}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(14,17,16,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);color:var(--chalk);border-bottom:1px solid rgba(255,255,255,.07)}
.top-in{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:var(--chalk);cursor:pointer}
.menu-ic,.menu-ic::before,.menu-ic::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s}
.menu-ic::before,.menu-ic::after{content:"";position:absolute;left:0}
.menu-ic::before{top:-6px}.menu-ic::after{top:6px}
.menu-btn[aria-expanded=true] .menu-ic{background:transparent}
.menu-btn[aria-expanded=true] .menu-ic::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-ic::after{transform:translateY(-6px) rotate(-45deg)}
.nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);padding:8px 16px 18px;flex-direction:column;gap:2px;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-links.open{display:flex}
.nav-links a{color:var(--chalk);text-decoration:none;font-weight:600;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-links a.btn{margin-top:10px;border:0;padding:10px 18px;color:var(--ember-ink)}
@media(min-width:900px){
  .menu-btn{display:none}
  .nav-links{display:flex;position:static;flex-direction:row;align-items:center;gap:24px;padding:0;border:0;background:none}
  .nav-links a{border:0;padding:6px 0;font-size:.95rem;color:#c9ccc8}
  .nav-links a:not(.btn):hover{color:#fff}
  .nav-links a.btn{margin:0;color:var(--ember-ink)}
}

/* hero */
.hero{position:relative;color:var(--chalk);overflow:hidden;padding:48px 0 60px;background:
  radial-gradient(55% 70% at 85% 15%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),
  radial-gradient(45% 60% at 5% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
  var(--ink)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none}
.hero-in{position:relative;display:grid;gap:40px;align-items:center}
.hero .kicker{color:#aeb3af}
.hero-h{font-size:clamp(2.9rem,10vw,5.4rem);margin-bottom:18px}
.hero-sub{font-size:1.14rem;color:#c6cbc7;max-width:56ch}
.hero-note{margin-top:18px;font-size:.9rem;color:#8f9591}
.hero-art{min-width:0}
.hero-app .app-kicker{display:flex;align-items:center;gap:10px;color:var(--chalk)}
.hero-app .app-name{display:block;color:var(--accent);font-size:.5em;letter-spacing:.02em;margin-bottom:10px}
.partner-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.12);font-size:.72rem;letter-spacing:.06em;color:#dfe2de}
@media(min-width:900px){.hero{padding:84px 0 96px}.hero-in{grid-template-columns:1.05fr .95fr;gap:56px}.hero-solo{grid-template-columns:1fr}.hero-solo .hero-copy{max-width:860px}}

/* strip */
.strip{background:var(--paper);border-bottom:1px solid var(--line)}
.strip-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;padding-bottom:18px}
.strip p{font-weight:600;max-width:70ch}
.clover-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:.88rem;white-space:nowrap}
.clover-badge svg{color:#7ac70c}

/* sections */
.sec{padding:64px 0}
.sec-soft{background:var(--soft)}
.sec-dark{background:var(--ink);color:var(--chalk)}
.sec-dark .kicker{color:#aeb3af}
.sec-head{max-width:760px;margin:0 auto 36px;text-align:center}
.sec-head-left{margin-left:0;text-align:left}
.sec-head h2,.sec h2.display{font-size:clamp(2.2rem,6.5vw,3.6rem);margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:1.08rem}
.sec-dark .sec-head p{color:#b9beba}
.accent-k{color:var(--accent-text)}
.split{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.sec{padding:100px 0}.split{grid-template-columns:1.2fr .8fr;gap:64px}}

/* app cards */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:var(--paper);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);overflow:hidden;transition:transform .25s,box-shadow .25s}
.card::after{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);pointer-events:none;transition:transform .4s}
.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,20,18,.06),0 22px 44px -16px rgba(16,20,18,.28)}
.card:hover::after{transform:scale(1.25)}
.card-top{display:flex;gap:12px;align-items:center}
.card-name{font:800 1.55rem/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.card-name a{text-decoration:none}
.card-name a::before{content:"";position:absolute;inset:0}
.card-cat{font-size:.85rem;color:var(--muted)}
.card-promise{font-weight:600;font-size:1.03rem;flex:1}
.card-btns{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.card-btns .btn{min-height:40px;padding:8px 16px;font-size:.88rem}
.card .partner-tag{background:var(--soft);color:var(--muted);margin-left:6px;vertical-align:middle}
.mark{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.mark svg{width:26px;height:26px;fill:currentColor}

/* journey */
.journey{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.leg{position:relative;padding:22px 18px 18px 74px;border-radius:var(--r);background:var(--ink-3)}
.yard{position:absolute;left:18px;top:18px;font:800 2.2rem/1 var(--display);color:var(--ember)}
.leg h3{font:800 1.5rem/1.05 var(--display);text-transform:uppercase;margin-bottom:6px}
.leg p{color:#c1c6c2;font-size:.95rem;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(255,255,255,.08);text-decoration:none;font-weight:600;font-size:.9rem;color:var(--chalk)}
.chip:hover{background:rgba(255,255,255,.16)}
.chip .mark{width:28px;height:28px;border-radius:999px}
.chip .mark svg{width:17px;height:17px}
.journey-foot{margin-top:24px;text-align:center;color:#b9beba}
.journey-foot a{color:var(--gold);font-weight:600}
@media(min-width:980px){.journey{grid-template-columns:repeat(5,1fr)}.leg{padding:70px 18px 20px}.yard{top:18px}}

/* why */
.why{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:620px){.why{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.why{grid-template-columns:repeat(4,1fr)}}
.why li{background:var(--paper);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.why h3{font:800 1.4rem/1.05 var(--display);text-transform:uppercase;margin-bottom:8px}
.why p{color:var(--muted)}

/* free tile, band */
.free-tile{background:var(--ink);color:var(--chalk);border-radius:var(--r);padding:32px;text-align:center;background:radial-gradient(70% 90% at 50% 0%,color-mix(in srgb,var(--accent) 40%,transparent),transparent),var(--ink)}
.free-big{font:800 7rem/1 var(--display);color:#fff}
.band{background:linear-gradient(110deg,var(--ember),#ff8a3d);color:var(--ember-ink);padding:52px 0}
.band .kicker{color:var(--ember-ink);opacity:.75}
.band h2{font-size:clamp(2.2rem,6.5vw,3.4rem);margin-bottom:10px}
.band-in{display:grid;gap:20px;align-items:center}
.band .btn-gold{background:var(--ink);color:#fff;box-shadow:none}
@media(min-width:900px){.band-in{grid-template-columns:1fr auto}}

/* numbers */
.stats{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats li{background:var(--paper);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.stat-n{font:800 clamp(2.4rem,7vw,3.4rem)/1 var(--display);color:var(--char)}
.stats span:last-child{color:var(--muted);font-size:.95rem}

/* cta */
.cta-final{position:relative;color:var(--chalk);text-align:center;padding:76px 0;background:radial-gradient(60% 90% at 50% 120%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%),var(--ink)}
.cta-final .kicker{color:#aeb3af}
.cta-final h2{font-size:clamp(2.4rem,8vw,4.2rem);margin-bottom:12px}
.cta-final p{color:#c1c6c2;max-width:54ch;margin:0 auto 22px}

/* app page */
.features{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:620px){.features{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.features{grid-template-columns:repeat(3,1fr)}}
.features li{background:var(--paper);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.features h3{font:800 1.45rem/1.05 var(--display);text-transform:uppercase;margin-bottom:8px}
.features p{color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:step}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:step;position:relative;padding:24px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:14px;background:var(--accent);color:var(--accent-ink);font:800 1.4rem/1 var(--display)}
.steps h3{font:800 1.45rem/1.05 var(--display);text-transform:uppercase;margin-bottom:6px}
.steps p{color:var(--muted)}
.outcomes{list-style:none;margin:16px 0 0;padding:0}
.outcomes li{position:relative;padding:12px 0 12px 36px;font-weight:600;border-bottom:1px solid var(--line)}
.outcomes li::before{content:"";position:absolute;left:0;top:14px;width:22px;height:22px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.stat-line{margin-top:16px;font-weight:700;color:var(--accent-text)}
.price-card{background:var(--paper);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.price-card::after{content:"";position:absolute;width:260px;height:260px;right:-120px;bottom:-140px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 25%,transparent),transparent);pointer-events:none}
.price-card-wide{margin-top:20px;text-align:center}
.price-card-wide .btn{margin-top:14px}
.price-big{font:800 2.5rem/1.05 var(--display);text-transform:uppercase;margin-bottom:8px}
.price-big small{font-size:.5em;color:var(--muted)}
.cards-3{grid-template-columns:1fr}
@media(min-width:900px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.faq details{background:var(--paper);border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:18px 48px 18px 20px;font-weight:700;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:14px;font:600 1.5rem/1 var(--sans);color:var(--muted)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 20px 18px;color:var(--muted)}
.sec .faq{margin-top:18px}
.scene{position:relative}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{font:600 .78rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--soft)}
tbody th{font-weight:600}
.row-app{display:flex;align-items:center;gap:12px;text-decoration:none}
.row-app .mark{width:38px;height:38px;border-radius:11px}
.row-app .mark svg{width:21px;height:21px}
.row-app small{display:block;color:var(--muted);font-weight:400;font-size:.82rem}
.row-app .g-mark{color:var(--char)}
td.price{font-weight:700}
.row-bundle{background:#fff4ec}
.tick{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--char);color:#fff;font-weight:700}

/* forms */
.form{background:var(--paper);border-radius:var(--r);padding:24px;display:grid;gap:16px;box-shadow:var(--shadow)}
.f-row{display:grid;gap:6px}
.f-2{display:grid;gap:16px}
@media(min-width:620px){.f-2{grid-template-columns:1fr 1fr}}
.form label,.form legend{font-weight:700}
.form input,.form select{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--char)}
.form input:focus,.form select:focus{border-color:var(--ember);outline:none;box-shadow:0 0 0 4px rgba(255,90,31,.15)}
.f-apps{border:0;padding:0;margin:0}
.f-checks{display:grid;gap:8px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:620px){.f-checks{grid-template-columns:1fr 1fr}}
.check{display:flex;align-items:center;gap:10px;font-weight:500!important;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer}
.check input{width:20px;min-height:20px;height:20px;accent-color:var(--ember)}
.hp{position:absolute;left:-9999px}
.form-msg{font-weight:600;min-height:1.4em}
.form-msg.ok{color:#1d6b3c}.form-msg.err{color:#b3261e}
.prose p,.prose li{margin-bottom:14px;font-size:1.04rem}
.prose h1{font-size:clamp(2.6rem,8vw,4rem);margin-bottom:18px}
.prose h2{font:800 1.6rem/1.1 var(--display);text-transform:uppercase;margin:28px 0 10px}

/* footer */
.foot{background:var(--ink);color:#b9beba;padding:52px 0 32px;font-size:.92rem}
.foot a{color:var(--chalk);text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot-grid{display:grid;gap:26px}
@media(min-width:900px){.foot-grid{grid-template-columns:1.2fr 2fr 1fr}}
.brand-foot{color:var(--chalk);margin-bottom:10px}
.foot-line{margin-top:6px}
.foot-h{font:600 .78rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8f9591;margin-bottom:10px}
.foot-list{list-style:none;margin:0;padding:0;columns:2;column-gap:20px}
.foot-list li{padding:3px 0;break-inside:avoid}
.fine{margin-top:28px;padding-top:18px;border-top:1px solid #262b29;font-size:.8rem;color:#8f9591}

/* ---------- product mockups ---------- */
.mock{background:var(--white);color:var(--char);border-radius:16px;box-shadow:0 22px 50px rgba(0,0,0,.35);font-size:.86rem;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.m-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--char);color:#c8ccc6;font-size:.8rem}
.m-bar b{color:#fff;margin-right:auto}
.m-live{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 8px;font-weight:700;font-size:.72rem}
.ph-h{font-weight:700;margin-bottom:4px}
.expo-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px;background:#eceae3}
.col-h{font:800 .78rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px 2px}
.tk{background:#fff;border-radius:8px;padding:7px;margin-bottom:6px;box-shadow:inset 3px 0 0 #ff5a1f;display:grid;gap:1px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tk b{font-size:.8rem}.tk span{font-size:.72rem;color:var(--muted);line-height:1.25}.tk i{font-style:normal;font-weight:700;font-size:.72rem}
.tk.ok{box-shadow:inset 3px 0 0 #1d6b3c}.tk.drv{box-shadow:inset 3px 0 0 #1a73ff}
.expo-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:9px 14px;font-size:.76rem;color:var(--muted)}
.expo-foot b{color:var(--char)}
@media(prefers-reduced-motion:no-preference){
  .tk.t1{animation:slidein 6s ease-in-out infinite}
  .tk.t2{animation:slidein 6s ease-in-out 1.5s infinite}
  .tk.t3{animation:slidein 6s ease-in-out 3s infinite}
  .tk.drv{animation:slidein 6s ease-in-out 4.5s infinite}
}
@keyframes slidein{0%{transform:translateX(-14px);opacity:0}10%,85%{transform:none;opacity:1}100%{transform:translateX(14px);opacity:0}}
.phone{max-width:340px;margin:0 auto;border-radius:34px;padding:10px;background:var(--char)}
.ph-screen{background:#f6f5f1;border-radius:26px;overflow:hidden;padding:12px;display:grid;gap:10px}
.ph-card{background:#fff;border-radius:12px;padding:12px;display:grid;gap:4px;justify-items:start}
.ph-card.addon{grid-template-columns:1fr auto;align-items:center;border:2px dashed var(--accent)}
.ph-total{display:flex;justify-content:space-between;padding:4px 6px;font-size:1rem}
.map{position:relative;border-radius:12px;overflow:hidden;background:#eef1f3}
.map svg{display:block;width:100%;height:auto}
.map-eta{position:absolute;right:10px;bottom:10px;background:var(--char);color:#fff;font-weight:700;border-radius:8px;padding:3px 8px}
.drivers{list-style:none;margin:0;padding:0;background:#fff;border-radius:12px}
.drivers li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #eee;font-weight:600}
.drivers span{margin-left:auto;color:var(--muted);font-weight:400}
.dot{width:10px;height:10px;border-radius:50%;background:#c3c7c3}.dot.on{background:var(--accent)}
.food{background:#fbe9d2;border-radius:12px}.food svg{display:block;width:100%;height:auto}
.sms{gap:8px}
.sms-h{text-align:center;font-weight:700;color:var(--muted);font-size:.78rem}
.bub{background:#e7e8e3;border-radius:16px 16px 16px 4px;padding:8px 12px;max-width:86%;justify-self:start;margin:0}
.bub.me{background:var(--accent);color:var(--accent-ink);border-radius:16px 16px 4px 16px;justify-self:end}
.mock-pair{display:grid;gap:14px;max-width:420px;margin:0 auto}
.streak{padding:16px}
.weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.weeks span{text-align:center;padding:8px 0;border-radius:8px;background:#eee;font-weight:700;color:var(--muted)}
.weeks .on{background:var(--accent);color:var(--accent-ink)}
.pts{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid #eee}
.mail-row{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid #eee}
.mail-row span{color:var(--muted)}
.mail-row.unread{background:#fff8de}
.mail-body{padding:16px 14px;display:grid;gap:8px;justify-items:start}
.mail-h{font:800 1.5rem/1 var(--display);text-transform:uppercase}
.adcard{display:grid;gap:0}
.ad{padding:16px;display:grid;gap:8px;justify-items:start;background:linear-gradient(135deg,#f3ecfa,#fff)}
.ad-tag{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ad-h{font:800 1.4rem/1.05 var(--display);text-transform:uppercase}
.ad-res{padding:14px}
.ad-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #eee}
.ad-row b{text-align:right}
.ad-row.total{border-bottom:0;font-size:.95rem}
.dash .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}
.tile{background:#f2f1ec;border-radius:10px;padding:10px;display:grid}
.tile span{font-size:.72rem;color:var(--muted)}.tile b{font:800 1.4rem/1.1 var(--display)}
.hours{display:flex;align-items:flex-end;gap:5px;height:80px;padding:0 12px}
.hours i{flex:1;background:var(--accent);border-radius:3px 3px 0 0;opacity:.85}
.hours-l{display:flex;justify-content:space-between;padding:4px 12px 10px;font-size:.7rem;color:var(--muted)}
.cmp-row{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;padding:4px 12px 10px}
.cmp-row .bar{display:block;height:12px;border-radius:6px;background:var(--accent)}
.call{display:grid;gap:8px;padding-bottom:12px}
.call .bub{margin:0 12px}
.call .bub.me{margin-left:auto}
.ticket{margin:4px 12px 0;padding:10px 12px;border-radius:10px;border:2px dashed var(--accent);background:#fff}
.review{padding:18px;display:grid;gap:10px}
.stars{font-size:2rem;color:var(--accent);letter-spacing:4px;line-height:1}
.rv-row{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:#f2f1ec}
.rv-row.low{background:#fdecec}
.giftcard{padding:14px;display:grid;gap:12px;background:#f6f5f1}
.gc{border-radius:14px;padding:18px;background:linear-gradient(135deg,var(--accent),#8a6519);color:var(--accent-ink)}
.gc-k{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.gc-v{font:800 2.6rem/1 var(--display);margin:8px 0}
.lunchacct .ad-row{padding:10px 14px}
.tbd{padding:40px 20px;text-align:center;border:2px dashed #b9b29f;background:#fafaf7}
.register{max-width:420px;margin:0 auto;background:#14201a;color:#e6ece6}
.reg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.reg-grid span{background:#1f3127;border-radius:10px;padding:16px 4px;text-align:center;font-weight:700}
.reg-grid small{display:block;color:#9fb3a4;font-weight:500}
.reg-total{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid #2a3d31}
.reg-total b{color:var(--gold);font-size:1.2rem}
.reg-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
.reg-pay span{background:var(--ember);color:var(--ember-ink);border-radius:10px;padding:12px;text-align:center;font-weight:700}
.reg-pay .cash{background:#3a4a40}

/* share card template */
.og{width:1200px;height:630px;display:flex;flex-direction:column;justify-content:space-between;padding:64px 72px;color:var(--chalk);background:
  radial-gradient(60% 80% at 85% 10%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%),var(--ink);position:relative;overflow:hidden}

.og-top{display:flex;align-items:center;justify-content:space-between}
.og-brand{display:flex;align-items:center;gap:14px;font:800 44px/1 var(--display);letter-spacing:.08em}
.og-brand .g-mark{width:68px;height:63px}.og-brand .wordmark{font-size:52px}
.og .mark{width:84px;height:84px;border-radius:20px}.og .mark svg{width:50px;height:50px}
.og-k{font:700 24px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#c6cbc7;margin-bottom:18px}
.og-t{font:800 92px/.95 var(--display);text-transform:uppercase;max-width:1000px}
.og-s{font:500 30px/1.3 var(--sans);color:#d9e2d6;margin-top:18px}