@font-face{font-family:"Bebas Neue";src:url(/fonts/BebasNeue-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/BricolageGrotesque.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --tomato:#c8341f;      /* accents, large text on cream (4.77:1) */
  --tomato-d:#b3261e;    /* blocks with white text (6.54:1) */
  --basil:#2f6b3a;       /* white text 6.39:1, cream 5.76:1 */
  --cream:#f8f3e4;
  --paper:#fffdf7;
  --ink:#1e1a17;
  --yolk:#e9b949;        /* only with ink text (9.46:1) */
  --muted:#5b524a;       /* secondary text on cream 6.88:1 */
  --soft:#c9bfae;        /* secondary text on ink 9.5:1 */
  --crust:#d9924a;
  --hh:58px;             /* sticky header height */
  --r:18px;
  --b:2.5px solid var(--ink);
  --sh:4px 4px 0 var(--ink);
  --focus:var(--ink);
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --head:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (min-width:980px){:root{--hh:62px}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.55 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
svg{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:16px}
@media (min-width:900px){.wrap{padding-inline:32px}}
.tab{font-variant-numeric:tabular-nums}

/* anchors: every jump target sits just under the sticky header (#7) */
.anchor{scroll-margin-top:calc(var(--hh) + 12px)}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border:2px solid currentColor;border-radius:999px;margin:0 0 12px}
.h2{font:400 clamp(38px,9vw,80px)/.92 var(--display);letter-spacing:.005em;margin:0 0 12px;text-transform:uppercase}
.h2 .acc{color:var(--tomato)}
.lead{font:500 clamp(16px,1.9vw,19px)/1.45 var(--head);max-width:40ch;margin:0}
.small{font-size:13px;line-height:1.45}
section{position:relative}
.sec{padding-block:clamp(48px,8vw,96px)}

/* buttons */
.btn{--bg:var(--paper);--fg:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border:var(--b);border-radius:999px;background:var(--bg);color:var(--fg);font:700 16px/1.1 var(--head);text-decoration:none;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-red{--bg:var(--tomato-d);--fg:#fff}
.btn-yolk{--bg:var(--yolk)}
.btn-ink{--bg:var(--ink);--fg:var(--cream)}
.btn svg{width:18px;height:18px;flex:none}

.card{background:var(--paper);border:var(--b);border-radius:var(--r);box-shadow:var(--sh)}

.ping{position:relative;display:inline-block;width:9px;height:9px;border-radius:50%;background:#2e9e4f;flex:none}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.6);opacity:0}}

.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.07s}.js .rv.d2{transition-delay:.14s}.js .rv.d3{transition-delay:.21s}

/* ============ header ============ */
.top{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:var(--b)}
.top .wrap{display:flex;align-items:center;gap:12px;height:calc(var(--hh) - 2.5px)}
.logo{display:flex;align-items:center;gap:7px;text-decoration:none;font:400 27px/1 var(--display);letter-spacing:.02em}
.logo svg{width:25px;height:25px}
.nav{display:none;gap:22px;margin-left:auto;font:600 15px var(--head)}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2.5px solid transparent}
.nav a:hover{border-bottom-color:var(--tomato)}
.top .btn{margin-left:auto;min-height:40px;padding:0 15px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
@media (min-width:980px){.nav{display:flex}.top .btn{margin-left:8px;min-height:42px;padding:0 18px;font-size:15px}}

/* ============ hero ============ */
.hero{padding-block:20px 44px;overflow:hidden}
.hero .wrap{display:grid;gap:28px;align-items:center}
@media (min-width:980px){.hero{padding-block:40px 64px}.hero .wrap{grid-template-columns:1fr 1fr;gap:40px}}
.hero .eyebrow{color:var(--basil);margin-bottom:22px}
@media (min-width:980px){.hero .eyebrow{margin-bottom:28px}}
.h1{font:400 clamp(44px,12.4vw,104px)/.88 var(--display);text-transform:uppercase;margin:0;letter-spacing:.005em}
@media (min-width:980px){.h1{font-size:min(92px,6.6vw)}}
.h1 .l{display:block}
.h1 .l2{color:var(--tomato)}
.js .h1 .l{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.js .h1 .l2{animation-delay:.1s}
@keyframes rise{from{opacity:0;transform:translateY(40%)}}
.paid{margin:14px 0 0}
.paid strong{font:800 clamp(23px,4vw,34px)/1.1 var(--head);letter-spacing:-.02em}
.paid strong em{font-style:normal;background:var(--yolk);padding:0 .18em;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fine{font-size:13px;color:var(--muted);max-width:46ch;margin:6px 0 0;line-height:1.45}
.hero p.intro{font:500 16px/1.5 var(--body);max-width:42ch;margin:12px 0 0}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ctas .btn{flex:1 1 220px}
@media (min-width:600px){.ctas .btn{flex:0 0 auto}}
.ticks{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font:600 13px/1.3 var(--head)}
.ticks li{display:flex;align-items:center;gap:6px}
.ticks svg{width:16px;height:16px;color:var(--basil);flex:none}

/* pizza + USP legend (#10) */
.pz-stage{position:relative;width:100%;max-width:470px;margin-inline:auto}
.pizza-box{position:relative;width:min(100%,330px);margin-inline:auto;aspect-ratio:1/1}
@media (min-width:980px){.pizza-box{width:min(100%,360px)}}
.pizza-box .plate{position:absolute;inset:1%;border-radius:50%;background:var(--basil);border:var(--b);box-shadow:7px 7px 0 var(--ink)}
.pizza{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pizza .crust{fill:var(--crust);stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.pizza .sauce{fill:var(--tomato)}
.pizza .cheese{fill:#f4cf6a}
.pizza .pep{fill:var(--tomato-d);stroke:var(--ink);stroke-width:2.5}
.pizza .oli{fill:none;stroke:var(--ink);stroke-width:3.2}
.pizza .leaf{fill:var(--basil);stroke:var(--ink);stroke-width:2}
.pizza .bdg{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;transition:fill .3s}
.pizza .bdt{font:400 21px/1 var(--display);fill:var(--ink)}
.slice,.pull,.hlg{transform-box:view-box;transform-origin:200px 200px}
.hlg{transition:transform .45s cubic-bezier(.3,1.4,.5,1),filter .3s}
.hlg.on{transform:translate(var(--hx),var(--hy));filter:brightness(1.07)}
.hlg.on .bdg{fill:var(--yolk)}
.js .slice{animation:sliceIn .5s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(.25s + var(--i) * .16s)}
@keyframes sliceIn{from{opacity:0;transform:rotate(-40deg) scale(.4)}}
.pull-on{transform:translate(var(--dx),var(--dy))}
.js .pull-on{transform:none;animation:pullOut .7s 1.75s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pullOut{to{transform:translate(var(--dx),var(--dy))}}
.tag{position:absolute;right:-4%;top:0;width:min(58%,205px);background:var(--paper);border:var(--b);border-radius:15px 15px 15px 5px;padding:10px 12px 10px 28px;box-shadow:4px 4px 0 var(--ink);transform:rotate(7deg);z-index:3}
.tag::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:2.5px solid var(--ink);background:var(--cream)}
.tag b{display:block;font:800 clamp(15px,3.8vw,18px)/1.12 var(--head);letter-spacing:-.01em}
.tag span{display:block;margin-top:4px;font:600 12px/1.25 var(--body);color:var(--muted)}
.js .tag{animation:tagPop .6s 2.2s cubic-bezier(.3,1.6,.5,1) both}
@keyframes tagPop{from{opacity:0;transform:rotate(-12deg) scale(.5) translateY(20px)}}
.stamp{position:absolute;left:-4%;top:-3%;width:clamp(78px,24%,104px);z-index:4;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.usps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.usps li{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px 6px 6px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);font:700 13px/1.2 var(--head);cursor:default;transition:background .3s,transform .3s}
.usps li .n{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);background:var(--cream);font:400 16px/21px var(--display);text-align:center}
.usps li.on{background:var(--yolk);transform:translateY(-2px)}
.usps li.on .n{background:var(--paper)}
.js .usps li{animation:uspIn .45s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(.3s + var(--i) * .16s)}
@keyframes uspIn{from{opacity:0;transform:translateY(8px) scale(.94)}}
@media (min-width:600px){.usps li{font-size:14px}}

/* ============ marquee (#16) ============ */
.band-wrap{position:relative;z-index:2;overflow:hidden;padding-block:36px;margin-block:-36px}
@supports (overflow-x:clip){.band-wrap{overflow:visible;overflow-x:clip;padding-block:0;margin-block:0}}
.band-wrap + section{padding-top:clamp(64px,9vw,108px)}
.band{background:var(--ink);color:var(--yolk);transform:rotate(-1.6deg);margin-inline:-40px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;width:max-content;animation:mq 60s linear infinite}
.track ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:none}
.track li{display:flex;align-items:center;gap:18px;padding:13px 18px 10px 0;font:400 clamp(24px,3.6vw,34px)/1 var(--display);letter-spacing:.03em;white-space:nowrap}
.track li::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--tomato);box-shadow:0 0 0 2.5px var(--yolk)}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ============ problems (A texts) ============ */
.probs{display:grid;gap:14px;margin-top:28px}
@media (min-width:860px){.probs{grid-template-columns:repeat(3,1fr);gap:18px}}
.prob{padding:18px 18px 20px}
.prob .k{display:inline-block;font:400 16px/1 var(--display);letter-spacing:.08em;background:var(--ink);color:var(--cream);border-radius:999px;padding:6px 10px 4px;margin-bottom:12px}
.prob h3{font:800 20px/1.15 var(--head);margin:0 0 10px;letter-spacing:-.01em}
.prob ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.prob li{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:var(--muted)}
.prob li::before{content:"✕";flex:none;font:800 13px/1.5 var(--head);color:var(--tomato-d)}
.verbs{margin-top:40px;text-align:center}
.verbs .big{font:400 clamp(34px,7vw,64px)/.95 var(--display);text-transform:uppercase;margin:0}
.verbs .big span:nth-child(2){color:var(--tomato)}
.verbs p{max-width:48ch;margin:12px auto 0;font:500 16px/1.5 var(--head)}
.impact{display:grid;gap:12px;margin-top:26px}
@media (min-width:860px){.impact{grid-template-columns:repeat(3,1fr);gap:16px}}
.imp{display:grid;grid-template-columns:1fr 1fr;border:var(--b);border-radius:16px;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.imp div{padding:12px 14px;font:600 14px/1.3 var(--head)}
.imp b{display:block;font:400 20px/1 var(--display);letter-spacing:.05em;margin-bottom:4px}
.imp .less{background:var(--paper)}
.imp .less b{color:var(--tomato-d)}
.imp .more{background:var(--yolk);border-left:var(--b)}

/* ============ before / after (#11-15) ============ */
.ba-sec{background:var(--basil);color:#fff;border-block:var(--b);--focus:var(--yolk)}
.ba-sec .eyebrow{color:#fff}
.ba-sec .lead{color:#fff}
.seg{display:inline-flex;margin-top:18px;padding:4px;background:var(--ink);border-radius:999px;border:var(--b)}
.seg button{min-height:42px;min-width:96px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--cream);font:700 15px var(--head);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--yolk);color:var(--ink)}
.view{margin-top:24px}
.seg-ba{margin-top:0}
.two-ph{display:grid;gap:26px;justify-items:center;margin-top:18px}
.ph-col{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.ph-label{font:400 26px/1 var(--display);letter-spacing:.04em;padding:6px 14px 4px;border:var(--b);border-radius:10px;background:var(--cream);color:var(--ink);transform:rotate(-3deg)}
.ph-label.ph-new{background:var(--yolk);transform:rotate(2deg)}
.scr{position:absolute;inset:0;overflow:hidden}
@media (min-width:600px){.seg-ba{display:none}.two-ph{grid-template-columns:1fr 1fr;align-items:start;margin-top:0}}
@media (max-width:599px){.two-ph[data-show="after"] .ph-before,.two-ph[data-show="before"] .ph-after{display:none}}
.phone{position:relative;width:min(260px,76vw);aspect-ratio:9/18.5;border:9px solid var(--ink);border-radius:38px;background:#fff;overflow:hidden;box-shadow:9px 9px 0 rgba(30,26,23,.45)}
.phone::before{content:"";position:absolute;top:6px;left:50%;width:66px;height:17px;margin-left:-33px;border-radius:10px;background:var(--ink);z-index:8}

/* slider (from A) */
.ba{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--pos:50%}
.phone .ba{position:absolute;inset:0}
.ba-old,.ba-new{position:absolute;inset:0;overflow:hidden}
.ba-new{clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:7;pointer-events:none}
.ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1.5px var(--ink)}
.ba-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--tomato-d);color:#fff;border:var(--b);display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}
.ba-knob svg{width:20px;height:20px}
.ba-tag{position:absolute;top:30px;z-index:6;font:400 15px/1 var(--display);letter-spacing:.08em;padding:5px 8px 3px;border:2px solid var(--ink);border-radius:7px;pointer-events:none}
.ba-tag.l{left:8px;background:var(--cream);color:var(--ink)}
.ba-tag.r{right:8px;background:var(--yolk);color:var(--ink)}
.ba-range{position:absolute;left:0;right:0;bottom:0;width:100%;height:1px;margin:0;opacity:0}
.ba-range:focus-visible + .ba-line .ba-knob{outline:3px solid var(--yolk);outline-offset:3px}

/* old site: A's ugly one (#14). Colours are deliberately dated. */
.old{height:100%;background:#000080 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='3' cy='3' r='1' fill='%23ffffff' opacity='.35'/%3E%3C/svg%3E");font-family:"Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue",cursive;color:#000;padding:8px;font-size:11px}
.phone .old{padding:30px 5px 6px}
.old table{width:100%;max-width:760px;margin:0 auto;border-collapse:separate;border-spacing:3px;background:#ffff66;border:3px outset #c0c0c0}
.old td{border:2px inset #c0c0c0;padding:4px;vertical-align:top}
.old .o-h{background:#cc0000;color:#ffff00;text-align:center;font-size:19px;font-weight:bold;text-shadow:2px 2px #000;letter-spacing:1px}
.old .o-news{background:#00ff00;color:#c00000;font-weight:bold;font-size:10px;white-space:nowrap;overflow:hidden;max-width:0}
.old .o-news span{display:inline-block;animation:oldmq 9s linear infinite}
@keyframes oldmq{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.old .o-nav{width:30%;background:#c0c0c0;font-family:"Times New Roman",Times,serif;font-size:11px}
.old .o-nav a{display:block;color:#0000ee;text-decoration:underline;margin:3px 0}
.old .o-body{font-family:"Times New Roman",Times,serif;font-size:9.5px;line-height:1.25;color:#333}
.old .o-body b{color:#800000}
.old .o-img{margin:6px 0;border:2px dashed #888;background:#fff;height:78px;display:flex;align-items:center;justify-content:center;gap:6px;color:#555;font-size:9px;font-family:Arial,sans-serif;text-align:center}
.old .o-img i{display:inline-block;flex:none;width:12px;height:12px;border:1px solid #888;background:linear-gradient(45deg,transparent 45%,red 45%,red 55%,transparent 55%)}
.old .o-ctr{background:#000;color:#0f0;font-family:"Courier New",monospace;padding:2px 4px;display:inline-block;letter-spacing:2px}
.old .o-foot{font-size:8.5px;text-align:center;color:#444;font-family:Arial,sans-serif}
.old .o-blink{color:#800080;font-weight:bold;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.old .o-hours{background:#ffcc99;font-size:9px;font-family:Arial,sans-serif;margin:4px 0}
.phone .old .o-nav{font-size:9px}
.phone .old .o-body{font-size:8.5px}
.phone .old .o-h{font-size:14px}

/* new site, phone (C) */
.new-m{background:var(--cream);font-family:var(--body);color:var(--ink)}
.new-m .n-bar{padding:30px 12px 8px;background:var(--ink);color:var(--cream);font:700 11px/1 var(--head);display:flex;align-items:center;gap:7px}
.new-m .n-bar .ping{width:7px;height:7px}
.new-m .n-head{padding:12px 12px 10px;background:var(--tomato-d);color:#fff}
.new-m .n-head b{display:block;font:400 30px/.9 var(--display);letter-spacing:.02em}
.new-m .n-head span{display:block;font:500 11px/1.2 var(--body);margin-top:4px}
.new-m .n-call{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 12px 2px;min-height:40px;border-radius:999px;background:var(--basil);color:#fff;font:700 14px var(--head);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.new-m .n-call svg{width:15px;height:15px}
.new-m .n-tabs{display:flex;gap:5px;padding:10px 12px 4px}
.new-m .n-tabs span{font:700 10.5px/1 var(--head);padding:6px 9px;border-radius:999px;border:2px solid var(--ink)}
.new-m .n-tabs span:first-child{background:var(--ink);color:var(--cream)}
.new-m ul{list-style:none;margin:0;padding:0 12px}
.new-m li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 0;border-bottom:2px dotted #b9ae9a}
.new-m li b{font:700 13px/1.1 var(--head)}
.new-m li i{display:block;font:400 10.5px/1.3 var(--body);color:var(--muted);font-style:normal;margin-top:2px}
.new-m li span{font:700 13px var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.pin{position:absolute;z-index:6;width:25px;height:25px;border-radius:50%;background:var(--yolk);color:var(--ink);border:2px solid var(--ink);font:400 17px/21px var(--display);text-align:center;box-shadow:2px 2px 0 var(--ink)}
.js .pin{animation:pinPop 2.4s ease-in-out infinite}
.pin.p2{animation-delay:.3s}.pin.p3{animation-delay:.6s}
@keyframes pinPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.2)}}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:min(320px,100%)}
.notes h3{font:400 22px/1 var(--display);letter-spacing:.06em;margin:0 0 2px}
.notes li{display:flex;align-items:center;gap:10px;background:rgba(30,26,23,.28);border:2px solid var(--ink);border-radius:13px;padding:9px 12px;font:600 14px/1.3 var(--head);color:#fff}
.notes .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--yolk);color:var(--ink);border:2px solid var(--ink);font:400 17px/22px var(--display);text-align:center}
.notes .bad{background:var(--cream);color:var(--tomato-d);font:800 15px/22px var(--head)}

/* desktop view: a real desktop layout, scaled to fit (#12) */
.desk{position:relative;max-width:980px;margin-inline:auto;border:var(--b);border-radius:14px;overflow:hidden;background:#fff;box-shadow:7px 7px 0 rgba(30,26,23,.45)}
.desk .bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#efe7d6;border-bottom:var(--b)}
.desk .dots{display:flex;gap:5px}.desk .dots i{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.3}
.desk .url{flex:1;min-width:0;height:26px;display:flex;align-items:center;padding:0 10px;border-radius:7px;background:#fff;border:1.5px solid var(--ink);font:600 12px var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk-fit{position:relative;aspect-ratio:1000/560;overflow:hidden}
.desk-fit .ba{position:absolute;left:0;top:0;width:1000px;height:560px;transform-origin:0 0;transform:scale(var(--s,.34))}
.desk .ba-knob{width:54px;height:54px}
.desk .ba-knob svg{width:26px;height:26px}
.desk .ba-tag{top:14px;font-size:20px;padding:7px 11px 4px}
.desk .ba-tag.l{left:14px}.desk .ba-tag.r{right:14px}
.view-d .notes-row{display:grid;gap:16px;margin-top:22px;justify-items:center}
@media (min-width:700px){.view-d .notes-row{grid-template-columns:1fr 1fr;justify-items:stretch}.view-d .notes{width:auto}}
.new-d{height:100%;background:var(--cream);color:var(--ink);font-family:var(--body);display:flex;flex-direction:column}
.new-d .n-top{display:flex;justify-content:space-between;align-items:center;padding:14px 32px;background:var(--ink);color:var(--cream);font:600 14px var(--head)}
.new-d .n-top b{font:400 30px/1 var(--display);letter-spacing:.03em}
.new-d .n-top span{display:flex;gap:22px;align-items:center}
.new-d .n-top .open{display:inline-flex;align-items:center;gap:7px;color:var(--cream)}
.new-d .n-hero{background:var(--tomato-d);color:#fff;padding:36px 32px 34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.new-d .n-hero h4{margin:0;font:400 76px/.9 var(--display);letter-spacing:.01em;text-transform:uppercase}
.new-d .n-hero p{margin:10px 0 0;font:500 17px/1.4 var(--head)}
.new-d .n-btns{display:flex;gap:12px}
.new-d .n-btns span{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;background:var(--basil);color:#fff;border:2.5px solid var(--ink);font:700 17px var(--head);box-shadow:3px 3px 0 var(--ink)}
.new-d .n-btns span+span{background:var(--paper);color:var(--ink)}
.new-d .n-btns svg{width:17px;height:17px}
.new-d .n-main{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;padding:26px 32px;flex:1}
.new-d h5{margin:0 0 10px;font:400 30px/1 var(--display);letter-spacing:.04em}
.new-d .n-row{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:2px dotted #b9ae9a;font-size:16px}
.new-d .n-row b{font:700 17px var(--head)}
.new-d .n-row i{flex:1}
.new-d .n-row span{font-weight:700;font-variant-numeric:tabular-nums}
.new-d .n-info{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:16px 18px;font-size:16px}
.new-d .n-info p{margin:0 0 6px;display:flex;justify-content:space-between}
.ba-foot{display:flex;align-items:center;gap:8px;margin:16px 0 0;font:600 15px/1.35 var(--head)}
.ba-foot svg{flex:none;width:18px;height:18px;color:var(--yolk)}

/* ============ steps (A texts) ============ */
.steps-sec .eyebrow{color:var(--basil)}
.snap{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:26px -16px 0;padding:4px 16px 20px;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;list-style:none}
.snap > *{scroll-snap-align:start}
@media (min-width:600px){.snap{grid-auto-columns:44%}}
@media (min-width:1100px){.snap{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible;margin:32px 0 0;padding:0}}
.stp{display:flex;flex-direction:column;padding:16px 16px 16px;min-height:100%}
.stp .no{font:400 60px/.8 var(--display);color:var(--tomato)}
.stp h3{font:800 17px/1.25 var(--head);margin:10px 0 6px;letter-spacing:-.01em}
.stp > p{margin:0;font-size:14px;color:var(--muted)}
.stp ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.stp li{display:flex;gap:7px;align-items:flex-start;font:600 13px/1.35 var(--head)}
.stp li svg{flex:none;width:15px;height:15px;color:var(--basil);margin-top:1px}
.mock{margin-top:auto;padding-top:14px}
.mk{border:2px solid var(--ink);border-radius:12px;background:var(--cream);padding:10px;font-size:12px;line-height:1.35}
.mk .row2{display:flex;align-items:center;gap:7px;font-weight:700}
.mk .muted{color:var(--muted)}
.code{display:flex;gap:3px;margin-top:7px}
.code span{flex:1;min-width:0;height:30px;border:2px solid var(--ink);border-radius:7px;background:#fff;display:grid;place-items:center;font:400 19px/1 var(--display)}
.url2{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:5px 9px;font-weight:600}
.url2 svg{width:11px;height:11px}
.mk .fakebtn{display:flex;justify-content:center;align-items:center;min-height:36px;border-radius:999px;background:var(--tomato-d);color:#fff;border:2px solid var(--ink);font:700 13px var(--head);box-shadow:2px 2px 0 var(--ink)}
.ovn{height:52px;border-radius:10px;background:var(--ink);position:relative;overflow:hidden;border:2px solid var(--ink)}
.ovn::before{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:12px;border-radius:50%;background:radial-gradient(closest-side,#f07a3a,transparent);animation:glow 2.2s ease-in-out infinite alternate}
.ovn span{position:absolute;left:9px;top:8px;display:flex;align-items:center;gap:6px;color:var(--cream);font:700 11px var(--head)}
@keyframes glow{from{opacity:.5}to{opacity:1}}
.selfnote{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px;padding:14px 16px;border:2.5px dashed var(--ink);border-radius:16px;font:600 15px/1.4 var(--head)}
.selfnote b{font:400 22px/1 var(--display);letter-spacing:.03em;background:var(--yolk);padding:5px 9px 3px;border-radius:7px;border:2px solid var(--ink)}

/* ============ why not diy (A texts, C look) ============ */
.diy{background:var(--ink);color:var(--cream);--focus:var(--yolk)}
.diy .eyebrow{color:var(--yolk)}
.diy .lead{color:var(--cream)}
.bento{display:grid;gap:14px;margin-top:28px}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.bento{grid-template-columns:repeat(3,1fr);gap:16px}}
.feat{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--paper);color:var(--ink);border:2.5px solid var(--cream);border-radius:18px;box-shadow:4px 4px 0 var(--tomato-d)}
.feat h3{margin:0 0 5px;font:800 18px/1.2 var(--head)}
.feat p{margin:0;font-size:14.5px;color:var(--muted)}
.wdg{margin-top:auto;border:2px solid var(--ink);border-radius:12px;background:var(--cream);padding:12px;font-size:13px}
.gauge-w{display:flex;align-items:center;gap:14px}
.gauge{position:relative;width:78px;height:78px;flex:none}
.gauge svg{width:78px;height:78px;transform:rotate(-90deg)}
.gauge .val{position:absolute;inset:0;display:grid;place-items:center;font:400 30px/1 var(--display);font-variant-numeric:tabular-nums}
.gauge-w b{display:block;font:700 14px var(--head)}
.gauge-w span{color:var(--muted)}
.up-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:600}
.up-h span{display:inline-flex;align-items:center;gap:6px;color:var(--basil);font-weight:700}
.up-bars{display:flex;gap:2px;height:26px;margin:9px 0 5px}
.up-bars i{flex:1;border-radius:2px;background:var(--basil);transform-origin:bottom}
.js .feat.in .up-bars i{animation:barUp .4s ease both;animation-delay:calc(var(--i) * 18ms)}
@keyframes barUp{from{transform:scaleY(0)}}
.up-f{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.sec-row{display:flex;gap:10px;align-items:center}
.sec-row svg{width:34px;height:34px;color:var(--basil);flex:none}
.sec-row b{display:block;font:700 14px var(--head)}
.sec-row small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.bk{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bk li{display:flex;align-items:center;gap:7px;font-weight:600}
.bk li small{margin-left:auto;color:var(--muted);font-weight:500}
.bk svg{width:15px;height:15px;color:var(--basil);flex:none}
.bk li:not(:first-child){color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font:700 13px var(--head);padding:6px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}
.tags b{font:400 17px/1 var(--display);margin-right:3px}
.edit .er{display:flex;align-items:center;gap:8px}
.edit .er b{font:700 14px var(--head)}
.edit .price{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums}
.edit .price s{color:var(--muted);font-weight:500}
.edit .save{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.edit .sbtn{font:700 12.5px var(--head);padding:7px 14px;border-radius:999px;background:var(--ink);color:var(--cream);border:2px solid var(--ink)}
.edit .ok{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--head);color:var(--basil);opacity:0;transform:translateX(-6px);transition:.35s}
.edit .ok svg{width:15px;height:15px}
.edit.done .ok{opacity:1;transform:none}

/* self-edit phone (#60): final state is the default; JS arms and plays it once */
.edit2{display:flex;gap:12px;align-items:center}
.mphone{flex:none;width:136px;border:5px solid var(--ink);border-radius:20px;background:var(--paper);padding:0 8px 10px;box-shadow:3px 3px 0 var(--tomato-d)}
.mp-top{width:40px;height:6px;border-radius:4px;background:var(--ink);margin:6px auto 8px}
.mp-h{font:400 15px/1 var(--display);letter-spacing:.05em;margin-bottom:6px}
.mp-f{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-bottom:6px}
.mp-l{font:700 11px/1.1 var(--head)}
.mp-in{min-width:52px;text-align:right;padding:4px 6px;border:2px solid var(--ink);border-radius:7px;background:#fff;font:700 11.5px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;transition:box-shadow .3s}
.mp-btn{margin-top:8px;min-height:28px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:2px solid var(--ink);background:var(--basil);color:#fff;font:700 11.5px var(--head)}
.mp-btn .t1{display:none}
.mp-btn .t2{display:inline-flex;align-items:center;gap:4px}
.mp-btn svg{width:12px;height:12px}
.edit2 .v-old{display:none}
.prev{flex:1;min-width:0;transition:opacity .45s,transform .45s}
.pv-site{display:block;border:2px solid var(--ink);border-radius:10px;background:var(--paper);overflow:hidden;font-size:11.5px}
.pv-url{display:block;padding:4px 8px;background:var(--ink);color:var(--cream);font:600 10.5px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-r{display:flex;justify-content:space-between;gap:6px;padding:5px 8px;border-bottom:1.5px dotted #b9ae9a}
.pv-r:last-child{border-bottom:0}
.pv-r b{font:700 11.5px var(--head)}
.pv-r span{font-weight:700;font-variant-numeric:tabular-nums}
.pv-ok{display:flex;align-items:center;gap:5px;margin:8px 0 0;font:700 12.5px/1.25 var(--head);color:var(--basil)}
.pv-ok svg{flex:none;width:15px;height:15px}
.edit2.armed .f1 .v-old,.edit2.armed .f2 .v-old{display:inline}
.edit2.armed .f1 .v-new,.edit2.armed .f2 .v-new{display:none}
.edit2.armed.s1 .f1 .v-old,.edit2.armed.s2 .f2 .v-old{display:none}
.edit2.armed.s1 .f1 .v-new,.edit2.armed.s2 .f2 .v-new{display:inline}
.edit2.armed.s1 .f1 .mp-in,.edit2.armed.s2 .f2 .mp-in{box-shadow:0 0 0 3px var(--yolk)}
.edit2.armed.s3 .f1 .mp-in,.edit2.armed.s3 .f2 .mp-in{box-shadow:none}
.edit2.armed:not(.s3) .mp-btn{background:var(--ink)}
.edit2.armed:not(.s3) .t1{display:inline}
.edit2.armed:not(.s3) .t2{display:none}
.edit2.armed:not(.s4) .prev{opacity:0;transform:translateX(-8px)}
.chat{display:grid;gap:7px}
.bub{max-width:88%;padding:8px 10px;border-radius:12px;border:2px solid var(--ink);font-size:12.5px;line-height:1.35}
.bub.q{justify-self:end;background:var(--ink);color:var(--cream);border-bottom-right-radius:3px}
.bub.a{background:var(--paper);border-bottom-left-radius:3px}
.bub.a b{display:block;font:700 13px var(--head)}
.bub.a small{color:var(--muted)}
.ctr{display:flex;align-items:center;gap:12px}
.ctr .aa{font:400 44px/1 var(--display);background:var(--ink);color:var(--cream);border-radius:10px;padding:8px 12px 4px}
.ctr b{display:block;font:700 14px var(--head)}
.ctr small{color:var(--muted)}
.clock{display:flex;align-items:baseline;gap:8px}
.clock b{font:400 48px/.9 var(--display)}
.clock span{font:600 13px var(--head);color:var(--muted)}
.cmp{margin-top:40px;background:var(--cream);color:var(--ink);border:2.5px solid var(--cream);border-radius:20px;overflow:hidden;box-shadow:6px 6px 0 var(--tomato-d)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:2px solid #e2d8c3;font-size:14px;line-height:1.35}
.cmp thead th{font:400 24px/1 var(--display);letter-spacing:.03em;border-bottom:2.5px solid var(--ink);padding-top:16px}
.cmp tbody th{font:700 15px/1.25 var(--head)}
.cmp .us{background:var(--tomato-d);color:#fff;font-weight:700}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
@media (max-width:759px){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp table,.cmp tbody{display:block}
  .cmp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:2.5px solid var(--ink)}
  .cmp tr:last-child{border-bottom:0}
  .cmp tbody th{grid-column:1/-1;padding:12px 12px 6px;border:0;font-size:15px}
  .cmp td{padding:8px 8px 12px;border:0;font-size:13px;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
  .cmp td::before{content:attr(data-l);display:block;font:400 15px/1 var(--display);letter-spacing:.04em;margin-bottom:4px;color:var(--muted)}
  .cmp td.us::before{color:#fff}
  .cmp td.us{border-radius:11px 11px 0 0}
}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:32px}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,1fr);gap:14px}}
.stat{border:2.5px solid var(--cream);border-radius:18px;padding:16px 14px;color:var(--ink);background:var(--cream)}
.stat:nth-child(1){background:var(--tomato-d);color:#fff}
.stat:nth-child(2){background:var(--yolk)}
.stat:nth-child(3){background:var(--basil);color:#fff}
.stat .num{display:flex;align-items:baseline;gap:3px;font:400 clamp(50px,9vw,80px)/.85 var(--display);font-variant-numeric:tabular-nums}
.stat .num small{font-size:.45em}
.stat p{margin:8px 0 0;font:600 13.5px/1.35 var(--head)}

/* ============ price (menu + builder) ============ */
.price-sec .eyebrow{color:var(--tomato)}
.pb{display:grid;gap:20px;margin-top:28px;align-items:start}
@media (min-width:980px){.pb{grid-template-columns:1.1fr .9fr;gap:32px}.rc-col{position:sticky;top:calc(var(--hh) + 16px)}}
.step{padding:18px 16px 20px;margin-bottom:16px}
@media (min-width:600px){.step{padding:22px 22px 22px}}
.step-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.step-n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--tomato-d);color:#fff;border:var(--b);font:400 24px/33px var(--display);text-align:center}
.step-h h3{margin:0;font:800 clamp(18px,2.3vw,21px)/1.15 var(--head);letter-spacing:-.01em}
.fields{display:grid;gap:12px}
@media (min-width:600px){.fields{grid-template-columns:1.4fr 1fr}}
.fld label{display:block;font:700 13px/1.25 var(--head);margin-bottom:5px}
.inp{width:100%;min-height:48px;padding:0 13px;border:var(--b);border-radius:12px;background:#fff;font:600 16px var(--body)}
textarea.inp{min-height:76px;padding:10px 13px;resize:vertical;line-height:1.4}
.inp:focus{outline:none;box-shadow:0 0 0 4px var(--yolk)}
.inp-kr{position:relative}
.inp-kr .inp{padding-right:42px;font-variant-numeric:tabular-nums}
.inp-kr::after{content:"kr";position:absolute;right:13px;top:50%;transform:translateY(-50%);font:700 15px var(--head);color:var(--muted);pointer-events:none}
.hint{font-size:13px;color:var(--muted);margin:10px 0 0}
.err{font:600 13px var(--body);color:var(--tomato-d);margin:6px 0 0}
.err:empty{margin:0}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chipb{min-height:40px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);font:600 13px var(--head);cursor:pointer}
.chipb:hover{background:var(--yolk)}
.chipb .tab{color:var(--muted)}
.tier{display:flex;gap:12px;align-items:flex-start;padding:13px;border:var(--b);border-radius:14px;background:#eef5ec}
.tier .ot{flex:1;min-width:0}
.tier .ot b{display:block;font:800 17px/1.2 var(--head)}
.tier .ot span{display:block;font-size:13.5px;color:var(--ink);margin-top:3px}
.plus{flex:none;font:400 18px/1 var(--display);background:var(--yolk);border:2px solid var(--ink);border-radius:8px;padding:6px 8px 3px;white-space:nowrap;text-align:center}
.plus small{display:block;font:600 10.5px/1.1 var(--body);letter-spacing:0;margin-top:2px}
.sub-h{margin:16px 0 0;font:400 18px/1 var(--display);letter-spacing:.08em;color:var(--muted)}
.opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:13px;border:var(--b);border-radius:14px;background:#fff;cursor:pointer;margin-top:9px;transition:background .15s}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.box{flex:none;width:26px;height:26px;border:var(--b);border-radius:8px;background:#fff;display:grid;place-items:center;margin-top:1px}
.box svg{width:16px;height:16px;opacity:0;transform:scale(.4);transition:.15s;color:#fff}
.opt input:checked ~ .box{background:var(--basil)}
.opt input:checked ~ .box svg{opacity:1;transform:none}
.opt:has(input:checked){background:#eef5ec}
.opt input:focus-visible ~ .box{outline:3px solid var(--ink);outline-offset:3px}
.ot{flex:1;min-width:0}
.ot b{display:block;font:700 16px/1.25 var(--head)}
.ot span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.soon-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:18px 0 0;font:800 15px var(--head)}
.soon-h .st{font:400 15px/1 var(--display);letter-spacing:.06em;background:var(--ink);color:var(--yolk);padding:5px 8px 3px;border-radius:7px;transform:rotate(-3deg)}
.soon{margin-top:9px;padding:13px;border:2.5px dashed var(--ink);border-radius:14px;background:var(--cream)}
.soon .top-r{display:flex;align-items:flex-start;gap:12px}
.soon .plus{background:transparent;border-style:dashed}
.vote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.vote button{min-height:40px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font:700 14px var(--head);cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.vote button:hover{background:var(--yolk)}
.vote .thx{display:none;align-items:center;gap:6px;font:700 14px var(--head);color:var(--basil)}
.vote .thx svg{width:16px;height:16px}
.vote.voted button{display:none}
.vote.voted .thx{display:inline-flex}
.plans{display:grid;gap:10px;border:0;padding:0;margin:0}
@media (min-width:600px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;display:block;cursor:pointer}
.plan input{position:absolute;opacity:0;width:1px;height:1px}
.plan .pc{display:block;height:100%;padding:14px 14px 15px;border:var(--b);border-radius:14px;background:#fff;transition:.15s}
.plan input:checked + .pc{background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 var(--tomato-d)}
.plan input:focus-visible + .pc{outline:3px solid var(--ink);outline-offset:3px}
.plan b{display:block;font:400 28px/1 var(--display);letter-spacing:.02em}
.plan span{display:block;font-size:14px;margin-top:3px}
.plan .sticker{position:absolute;right:10px;top:-12px;font:400 16px/1 var(--display);letter-spacing:.04em;background:var(--yolk);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:6px 10px 4px;transform:rotate(6deg)}
.notice{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font:600 14px/1.4 var(--head)}
.notice svg{flex:none;width:19px;height:19px;color:var(--basil);margin-top:1px}

/* receipt = the menu card */
.rc-wrap{filter:drop-shadow(2.5px 0 0 var(--ink)) drop-shadow(-2.5px 0 0 var(--ink)) drop-shadow(0 2.5px 0 var(--ink)) drop-shadow(0 -2.5px 0 var(--ink)) drop-shadow(5px 5px 0 var(--ink))}
.rc{background:var(--paper);padding:20px 18px 36px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;font-variant-numeric:tabular-nums}
@media (min-width:600px){.rc{padding:24px 24px 40px}}
.rc-h{text-align:center;border-bottom:2px dashed var(--ink);padding-bottom:12px}
.rc-h b{display:block;font:400 34px/1 var(--display);letter-spacing:.06em}
.rc-h span{display:block;font:600 11px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.rows{list-style:none;margin:0;padding:10px 0;border-bottom:2px dashed var(--ink)}
.row{display:grid;grid-template-columns:1fr auto;gap:1px 10px;padding:6px 0;font-size:14px}
.row .l{font-weight:600}
.row .q{grid-column:1;font-size:12.5px;color:var(--muted)}
.row .k{grid-column:2;grid-row:1/span 2;align-self:center;font-weight:700;text-align:right;line-height:1.25}
.row .k small{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.row s{color:var(--muted);font-weight:500}
.row.new-row{animation:rowIn .35s ease both}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}}
.sum{padding:10px 0;border-bottom:2px dashed var(--ink)}
.setup{position:relative;padding:12px 0 6px;margin-top:12px;border-top:2px dashed var(--ink);border-bottom:2px dashed var(--ink)}
.how{margin:10px 0 0;font:600 15px/1.4 var(--head)}
.pun{margin:5px 0 0;font:500 13.5px/1.4 var(--body);color:var(--muted)}
.pay{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;margin:10px 0 0;padding:9px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--yolk);font:600 15px/1.3 var(--head)}
.pay b{font:800 18px/1.2 var(--head);font-variant-numeric:tabular-nums}
.pay small{font:600 12px var(--body)}
.gift{display:inline-block;margin:6px 0 4px;padding:7px 10px 6px;border:2.5px solid var(--tomato-d);color:var(--tomato-d);border-radius:8px;font:400 17px/1.05 var(--display);letter-spacing:.04em;transform:rotate(-2.5deg);background:var(--paper)}
.gift-s{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.total{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:14px 0 4px}
.total .l{font:800 15px/1.2 var(--head)}
.total .l span{display:block;font:500 12px var(--body);color:var(--muted);margin-top:3px}
.total .big{text-align:right}
.total .big b{display:block;font:400 clamp(38px,7.6vw,50px)/.9 var(--display);letter-spacing:.01em;color:var(--tomato-d)}
.total .big span{font:700 12px var(--body)}
.pies{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 3px;min-height:28px}
.pies svg{width:28px;height:28px}
.pies svg.pop{animation:piePop .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes piePop{from{transform:scale(0) rotate(-90deg)}}
.why{margin:10px 0 0;padding:11px;border-radius:12px;background:var(--cream);border:2px solid var(--ink);font-size:13px;line-height:1.45}
.why b{font-family:var(--head)}
.foot-n{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.45}
.barcode{height:30px;margin:14px auto 0;width:74%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 8px,var(--ink) 8px 9px,transparent 9px 12px)}
.thanks{text-align:center;font:400 16px/1 var(--display);letter-spacing:.12em;margin-top:6px}
.rc-col .btn{width:100%;margin-top:22px}
.trustline{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font:600 13.5px/1.35 var(--head)}
.trustline li{display:flex;gap:7px;align-items:flex-start}
.trustline svg{flex:none;width:17px;height:17px;color:var(--basil);margin-top:1px}

/* ============ forms (#34-37) ============ */
.forms{background:var(--tomato-d);color:#fff;border-block:var(--b);--focus:var(--yolk)}
.forms .eyebrow{color:#fff}
.forms .lead{color:#fff}
.fgrid{display:grid;gap:18px;margin-top:24px}
@media (min-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:22px;align-items:start}}
.fcard{color:var(--ink);padding:18px 16px 18px;--focus:var(--ink);position:relative}
@media (min-width:600px){.fcard{padding:22px 22px 22px}}
.fcard h3{font:400 clamp(28px,4.5vw,34px)/.95 var(--display);letter-spacing:.02em;margin:0 0 5px}
.fcard form > p.sub{margin:0 0 14px;color:var(--muted);font-size:14px}
.fcard .fld{margin-bottom:11px}
.fcard .opt-t{font-weight:500;color:var(--muted)}
.fcard .btn{width:100%;margin-top:4px}
.two{display:grid;gap:0 10px}
@media (min-width:480px){.two{grid-template-columns:1fr 1fr}}
.fs{border:0;padding:0;margin:0 0 11px}
.fs legend{font:700 13px/1.25 var(--head);margin-bottom:6px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 13px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:700 14px var(--head);transition:.12s}
.chip input:checked + span{background:var(--ink);color:var(--cream)}
.chip input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;font-size:13.5px;line-height:1.4;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--basil)}
.consent a{font-weight:700}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.done{display:none;text-align:center;padding:6px 0}
.done svg{width:62px;height:62px;margin:0 auto 10px}
.done h4{font:400 32px/1 var(--display);letter-spacing:.02em;margin:0 0 6px}
.done p{margin:0 auto 14px;max-width:34ch}
.done .again{min-height:42px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font:700 14px var(--head);cursor:pointer}
.fcard.sent form{display:none}
.fcard.sent .done{display:block;animation:rise .5s ease both}
.priv{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ============ faq ============ */
.faq .eyebrow{color:var(--tomato)}
.faq-grid{display:grid;gap:10px;margin-top:22px;max-width:860px}
details.q{background:var(--paper);border:var(--b);border-radius:15px;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
details.q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:12px 16px;font:700 16px/1.3 var(--head)}
details.q summary::-webkit-details-marker{display:none}
details.q summary .pm{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;background:var(--yolk);transition:transform .2s}
details.q summary .pm svg{width:14px;height:14px}
details.q[open] summary .pm{transform:rotate(45deg);background:var(--cream)}
details.q .a{padding:0 16px 16px;max-width:68ch;font-size:15px}
details.q .a p{margin:0 0 8px}
details.q .a p:last-child{margin:0}
.faq-more{margin:18px 0 0;font:600 15px var(--head)}

/* ============ final cta ============ */
.final{background:var(--yolk);border-block:var(--b);text-align:center;overflow:hidden}
.final .h2{max-width:16ch;margin-inline:auto}
.final p{font:500 17px/1.45 var(--head);max-width:42ch;margin:0 auto}
.final .ctas{justify-content:center}

/* ============ footer ============ */
.foot{background:var(--ink);color:var(--cream);padding-block:48px 32px;--focus:var(--yolk)}
.fg{display:grid;gap:28px}
@media (min-width:900px){.fg{grid-template-columns:1.2fr 1fr 1fr}}
.foot .logo{color:var(--cream)}
.foot h4{font:400 21px/1 var(--display);letter-spacing:.06em;color:var(--yolk);margin:0 0 12px}
.foot p,.foot li{font-size:14px;line-height:1.55;color:var(--soft)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.foot .tl li{display:flex;gap:8px;color:var(--cream)}
.foot .tl svg{flex:none;width:16px;height:16px;color:var(--yolk);margin-top:3px}
.foot a{color:var(--cream)}
.bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:36px;padding-top:18px;border-top:2px solid #3a322c;font-size:13px;color:var(--soft)}

/* ============ mobile bar ============ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--ink);transform:translateY(110%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.mbar.show{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
.mbar .btn{flex:1;min-height:48px;padding:0 10px;font-size:15px;box-shadow:none;border-color:var(--cream)}
.mbar .btn-red{border-color:var(--tomato-d)}
@media (max-width:899px){body{padding-bottom:72px}}
@media (min-width:900px){.mbar{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .pull-on{transform:translate(var(--dx),var(--dy))}
  }
.hour-help{display:block;margin-top:6px;font-size:.8rem;line-height:1.4;opacity:1}

/* ============ legal pages (/se/integritetspolicy, /se/villkor) ============ */
.legal{padding-block:clamp(32px,6vw,72px)}
.legal .doc{max-width:74ch}
.legal .meta{color:var(--muted);font:500 14px/1.4 var(--head);margin:0 0 22px}
.legal .summary{padding:16px 18px 6px;margin:0 0 8px}
.legal .summary h2{margin-top:0}
.legal h2{font:800 clamp(20px,2.6vw,24px)/1.2 var(--head);letter-spacing:-.01em;margin:34px 0 8px}
.legal h3{font:700 17px/1.3 var(--head);margin:20px 0 6px}
.legal p{margin:0 0 12px}
.legal ul{padding-left:1.2em;margin:0 0 12px}
.legal li{margin:4px 0}
.legal .tbl{overflow-x:auto;margin:0 0 12px}
.legal table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px;background:var(--paper)}
.legal th,.legal td{border:1.5px solid var(--ink);padding:8px 10px;text-align:left;vertical-align:top}
.legal thead th{font:700 14px/1.3 var(--head);background:var(--cream)}
.legal address{font-style:normal;margin:0 0 12px}