/* Nordica Apps: white, airy, the green of variegatanordica.com. Fonts are self-hosted. */
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:400 650;font-display:swap}
:root{--ink:#1f2a24;--head:#253d32;--green:#4f7a43;--green-d:#3f6b3a;--mint:#eef4ea;--sand:#f8f6f2;--line:#e9e5de;--muted:#66706a;--faint:#9aa39d;--star:#c9821d;
--r:22px;--shadow:0 1px 2px rgba(31,42,36,.05),0 14px 40px rgba(31,42,36,.09);--shadow-s:0 1px 2px rgba(31,42,36,.06),0 8px 24px rgba(31,42,36,.10);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#fff}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.6 Inter,system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}a{color:var(--green-d)}
h1,h2,h3{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:600;color:var(--head);letter-spacing:-.01em;line-height:1.02;margin:0}
h1 em,h2 em{font-style:normal;color:var(--green)}
h1{font-size:clamp(44px,6.4vw,76px)}h2{font-size:clamp(34px,4.4vw,52px);margin-bottom:22px}h3{font-size:26px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font:600 12.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 14px}
.lead{font-size:19px;color:var(--muted);max-width:560px;margin:22px 0 28px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--green-d);color:#fff;text-decoration:none;font-weight:600;font-size:15.5px;padding:13px 22px;border-radius:999px;border:1px solid var(--green-d);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(63,107,58,.25)}.btn.sm{padding:8px 16px;font-size:14px}
.btn.ghost{background:#fff;color:var(--head);border-color:var(--line)}.btn.ghost:hover{border-color:#cfc8bd;box-shadow:none}
.btn.soon{background:var(--mint);color:var(--green-d);border-color:#d6e5cf;cursor:default}.btn.soon:hover{transform:none;box-shadow:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(233,229,222,.7)}
.navin{display:flex;align-items:center;gap:20px;height:66px}.navin nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.navin nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}.navin nav a:hover{color:var(--green-d)}.navin nav a.btn{color:#fff}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--head);font:600 22px/1 "Barlow Condensed",sans-serif;letter-spacing:.01em}.brand b{color:var(--green);font-weight:600}

/* hero */
.hero{padding:64px 0 84px;overflow:hidden}
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.crumb{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;margin-bottom:22px}.crumb:hover{color:var(--green-d)}
.appid{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-weight:600;font-size:16px;color:var(--head)}
.appid img{width:56px;height:56px;border-radius:15px;box-shadow:var(--shadow-s)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 28px}
.pill{font-size:13.5px;font-weight:600;padding:6px 13px;border-radius:999px;background:var(--sand);color:var(--muted)}.pill.free{background:var(--mint);color:var(--green-d)}

/* the stage: the storefront scene with two floating details. The details stack above (right) and below (left)
   the scene and overlap its edge; each label and arrow is centred on its own card. */
.stage{display:flex;flex-direction:column;padding:8px 0 12px}
.stage .main{position:relative;z-index:1;margin:0;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.float{position:relative;z-index:2;margin:0;display:flex;flex-direction:column;align-items:center;width:max-content;max-width:100%}
.fb{align-self:flex-end;margin:0 -2% -30px 0}.fa{align-self:flex-start;margin:-30px 0 0 -3%}
.float figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;font:600 20px/1.05 "Barlow Condensed",sans-serif;color:var(--head);max-width:240px}
.arrow{width:30px;height:36px;flex:none;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin:3px 0 4px}.arrow.up{transform:scaleY(-1)}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:no-preference){
  .stage .float{animation:rise .8s .3s both}.stage .fa{animation-delay:.55s}
  .stage .float .mk-card{animation:bob 7s ease-in-out 1.4s infinite}.stage .fa .mk-card{animation-delay:2.6s}
}
/* bands and sections */
.band{background:var(--sand);padding:84px 0;border-radius:36px;margin:0 12px}
section.wrap{padding-top:84px;padding-bottom:84px}
.steps{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 26px;font-size:17px;font-weight:500;color:var(--head)}
.steps li span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--green-d);font:600 20px/1 "Barlow Condensed",sans-serif;margin-bottom:16px}
.feats .row{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;margin-top:44px}
.feats .row.flip{grid-template-columns:1fr 1.3fr}.feats .row.flip .shot{order:2}
.feats .shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.feats .row p{font:600 clamp(24px,2.6vw,32px)/1.12 "Barlow Condensed",sans-serif;color:var(--head);margin:0}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 30px 26px}
.plan.freeplan{border-color:#cfe0c7;box-shadow:0 0 0 4px var(--mint)}
.plan .amt{font:600 44px/1 "Barlow Condensed",sans-serif;color:var(--head);margin:12px 0 6px}.plan .amt small{font:400 15px Inter,sans-serif;color:var(--muted)}
.plan .trial{margin:0;color:var(--green);font-size:14.5px;font-weight:600}
.plan ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}.plan li{display:flex;gap:10px;font-size:15.5px}
.plan li svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.star{color:var(--star)}.note{color:var(--muted);font-size:15px;margin:22px 0 0}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vals div{border:1px solid var(--line);border-radius:var(--r);padding:24px}.vals b{display:block;font:600 22px/1.1 "Barlow Condensed",sans-serif;color:var(--head);margin-bottom:8px}.vals p{margin:0;color:var(--muted);font-size:15.5px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-s);border-color:#ddd6cb}
.card img{width:52px;height:52px;border-radius:14px;flex:none}
.card .t{flex:1;min-width:0}.card b{display:block;font:600 21px/1.1 "Barlow Condensed",sans-serif;color:var(--head);margin-bottom:4px}
.card .t>span{display:block;font-size:14.5px;color:var(--muted);line-height:1.45}.card small{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--green)}
.card .go{color:var(--faint);font-size:18px}.card:hover .go{color:var(--green)}
.group+.group{margin-top:56px}.group h2{margin-bottom:6px}.group .sub{color:var(--muted);margin:0 0 22px}
.more .cards{margin-top:6px}.help{padding-top:0!important;color:var(--muted);font-size:15px}
.storygrid{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}.storygrid p{margin:0 0 16px;color:var(--muted);font-size:17.5px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0;max-width:820px}
.faq summary{cursor:pointer;list-style:none;font:600 23px/1.2 "Barlow Condensed",sans-serif;color:var(--head);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--green);font-size:26px;line-height:1}.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);margin:10px 0 0}
.contact{text-align:center}.contact p{color:var(--muted);margin:0 0 24px}
.nf{text-align:center;padding:120px 24px!important}.nf .lead{margin:20px auto}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:84px;padding:48px 0 28px}
.footin{display:grid;grid-template-columns:1fr 2.2fr;gap:40px}.footin p{color:var(--muted);font-size:14.5px;max-width:300px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.cols h4{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cols a{display:block;color:var(--ink);text-decoration:none;font-size:14.5px;padding:3px 0}.cols a:hover{color:var(--green-d)}
.fine{color:var(--faint);font-size:13px;margin-top:28px}

/* storefront mockups (mockups.cjs): real products, the apps' widgets drawn in HTML */
.mk-scene{padding:18px;font-size:14px;line-height:1.4;color:#222}
.mk-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--sand)}.mk-photo.tall{aspect-ratio:4/5;height:100%}
.mk-pdp{display:grid;grid-template-columns:1fr 1.05fr;gap:18px;align-items:start}
.mk-pdp-info h4,.mk-h{font:600 22px/1.05 "Barlow Condensed",sans-serif;color:var(--head);margin:2px 0 6px}
.mk-shop,.mk-mini{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 4px;font-weight:600}
.mk-price{font-weight:650;font-size:16px;margin:0 0 10px}.mk-price s,.mk-tier s,.mk-tile s,.mk-change s,.mk-trade s{color:var(--faint);font-weight:400}.mk-price small{color:var(--muted);font-weight:400;font-size:12.5px}
.mk-btn{display:block;text-align:center;background:#1f2a24;color:#fff;border-radius:10px;padding:10px;font-weight:600;font-size:13.5px;margin-top:10px}.mk-btn.sm{padding:7px;font-size:12.5px}
.mk-tiers{display:grid;gap:7px}
.mk-tier{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:11px;padding:9px 10px;font-size:13px}
.mk-tier.on{border-color:var(--green-d);background:var(--mint)}.mk-tier b{font-weight:600;white-space:nowrap}.mk-tier>span:last-child{text-align:right;white-space:nowrap}.mk-tier i{font-style:normal;font-size:10.5px;background:var(--green-d);color:#fff;border-radius:6px;padding:1px 5px;margin-left:4px}
.mk-tier em{position:absolute;right:8px;top:-9px;font-style:normal;font-size:10px;font-weight:700;background:#d9a441;color:#fff;border-radius:6px;padding:1px 6px}
.mk-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid #b9b3a9;display:inline-block;flex:none}.on>.mk-radio,.on .mk-radio{border:4px solid var(--green-d)}
.mk-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);padding:12px 14px;font-size:13.5px;color:#222}
.mk-swatches{display:flex;gap:7px;margin:6px 0 4px}.mk-swatches span{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.mk-swatches .on{outline:2px solid var(--green-d);outline-offset:2px}
.mk-lay{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}.mk-lay span{border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px;background:#fff}.mk-lay .on{border-color:var(--green-d);background:var(--mint);color:var(--green-d);font-weight:600}
.mk-lay .full{color:var(--faint);text-decoration:line-through}.mk-lay.big span{padding:9px 14px;font-weight:600;font-size:14px}
.mk-line{display:flex;justify-content:space-between;gap:14px;align-items:center}.mk-line b{white-space:nowrap;color:var(--green-d)}
.mk-ok{width:16px;height:16px;flex:none;fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.mk-toast{display:flex;gap:9px;align-items:center}
.mk-grid4{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mk-grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mk-tile{position:relative}.mk-tile p{margin:7px 0 1px;font-size:12.5px;color:#444}.mk-tile b{font-size:13px}
.mk-tile.out img{opacity:.45;filter:grayscale(.6)}.mk-tile.out p,.mk-tile.out b{color:var(--faint)}
.mk-badge{position:absolute;left:8px;top:8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;color:#fff;background:#1f2a24}
.mk-badge.new{background:var(--green-d)}.mk-badge.sale{background:#c4553f}.mk-badge.low{background:#fff;color:#a8551d;box-shadow:0 1px 4px rgba(0,0,0,.15)}.mk-badge.best{background:#d9a441}.mk-badge.pre{background:#2d4a7a}.mk-badge.soldout{background:#8a8f8b}
.mk-badge.round{border-radius:50%;width:38px;height:38px;display:grid;place-items:center;padding:0}.mk-badge.ribbon{border-radius:0 6px 6px 0}.mk-badge.soft{background:#fff1e3;color:#a8551d;box-shadow:none}
.mk-badge.inline{position:static;display:inline-block;margin:0 0 8px}
.mk-badgeset{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mk-badgeset .mk-badge{position:static}
.mk-chip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;background:var(--sand)}
.mk-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:stretch}
.mk-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.mk-panel.wide{border:0;padding:4px}
.mk-big{font:600 34px/1 "Barlow Condensed",sans-serif;color:var(--head);margin:2px 0 8px}.mk-big small{font:500 13px Inter,sans-serif;color:var(--muted)}
.mk-bar{height:7px;border-radius:9px;background:var(--sand);overflow:hidden}.mk-bar i{display:block;height:100%;background:linear-gradient(90deg,#8fc28a,var(--green))}
.mk-sub{font-size:12px;color:var(--muted);margin:8px 0 2px}
.mk-reward{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:8px 0;font-size:13px}.mk-reward b{color:var(--green-d)}.mk-reward.dim{opacity:.45}
.mk-tiersvip{display:flex;gap:8px}.mk-tiersvip span{flex:1;border-radius:10px;padding:8px 10px;font-weight:650;font-size:13px}.mk-tiersvip small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.mk-tiersvip .silver{background:linear-gradient(135deg,#f1f2f3,#dfe2e5)}.mk-tiersvip .gold{background:linear-gradient(135deg,#fbf0d4,#efd39a)}
.mk-note{font-size:12.5px;color:var(--muted);margin:0 0 8px;display:flex;gap:6px;align-items:center}
.mk-pay{display:grid;gap:7px}.mk-pay label{display:flex;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:11px;padding:9px 10px;font-size:13px}.mk-pay label.on{border-color:var(--green-d);background:var(--mint)}.mk-pay b{margin-left:auto}
.mk-sum div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}.mk-sum div+div{color:var(--muted)}
.mk-engrave{position:relative}.mk-name{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%) rotate(-4deg);font:italic 600 26px/1 Georgia,serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);letter-spacing:.02em}
.mk-field{display:block}.mk-field span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}.mk-field b{display:block;border:1.5px solid var(--green-d);border-radius:9px;padding:7px 10px;font-weight:500;background:#fff}
.mk-caret{display:inline-block;width:1.5px;height:15px;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:caret 1s steps(1) infinite}@keyframes caret{50%{opacity:0}}
.mk-script{font-family:Georgia,serif;font-style:italic}
.mk-trade{margin:0 0 8px;font-size:13px;color:var(--green-d);font-weight:600}.mk-trade span{background:var(--mint);border-radius:6px;padding:2px 7px}
.mk-breaks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}.mk-breaks div{border:1px solid var(--line);border-radius:9px;padding:6px;text-align:center;font-size:12px}.mk-breaks b{display:block;color:var(--green-d)}
.mk-form{display:grid;gap:7px;min-width:190px}.mk-input{border:1px solid var(--line);border-radius:8px;padding:6px 9px;color:var(--faint);font-size:12.5px}
.mk-change{display:grid;grid-template-columns:38px 1fr auto auto;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}.mk-change b{color:var(--green-d)}
.mk-thumb{width:38px;height:38px;border-radius:9px;object-fit:cover}.mk-row{display:flex;align-items:center;gap:12px}.mk-row .mk-btn{flex:none;padding:10px 16px}
.mk-undo{background:var(--mint);border-radius:8px;padding:3px 9px}
.mk-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.mk-dates div{border:1px solid var(--line);border-radius:10px;padding:7px 10px}.mk-dates span{display:block;font-size:11px;color:var(--muted)}
.mk-cal{display:flex;gap:5px}.mk-cal span{width:26px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:11.5px;background:var(--sand);color:var(--muted)}.mk-cal .on{background:var(--green-d);color:#fff}
.mk-switch{display:flex;align-items:center;gap:14px;font-weight:600}.mk-toggle{width:38px;height:22px;border-radius:999px;background:#cfd6cc;position:relative;flex:none}.mk-toggle.on{background:var(--green-d)}.mk-toggle::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s}.mk-toggle.on::after{left:19px}
.mk-map{position:relative;border-radius:14px;overflow:hidden}.mk-map svg{display:block;width:100%;height:auto}
.mk-pin{position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#8fae86;box-shadow:0 2px 6px rgba(0,0,0,.2)}.mk-pin.on{background:var(--green-d);width:24px;height:24px}
.mk-list{position:absolute;right:12px;top:12px;bottom:12px;width:44%;background:#fff;border-radius:12px;padding:6px;box-shadow:var(--shadow-s);display:grid;align-content:start;gap:4px}
.mk-list div{border-radius:9px;padding:8px 10px;font-size:12.5px}.mk-list div.on{background:var(--mint)}.mk-list b{display:block;font-size:13.5px}.mk-list span{color:var(--muted)}
.mk-specs{border-top:1px solid var(--line);margin-top:6px;padding-top:8px}.mk-specs div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-bottom:1px dashed var(--line)}.mk-specs span{color:var(--muted)}
.mk-dl{margin:10px 0 0;font-weight:600;font-size:13px;color:var(--green-d)}.mk-dl small{color:var(--faint);font-weight:400}
.mk-warn{display:flex;gap:8px;align-items:center;font-size:12.5px;margin:7px 0 0}.mk-warn i,.mk-sym{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;font-style:normal;font-weight:700;font-size:12px;border:2px solid #c4553f;color:#c4553f;border-radius:4px;transform:rotate(45deg) scale(.85)}
.mk-warn i{transform:none;border-radius:50%}.mk-sym{transform:none;border-radius:50%}
.mk-low{font-size:12.5px;color:var(--muted);background:var(--sand);border-radius:9px;padding:8px 10px;margin:0 0 4px}.mk-low b{color:var(--ink)}
.mk-warncard b{display:block;color:#a8551d;font-size:13.5px;margin-bottom:2px}.mk-warncard span{color:var(--muted);font-size:12.5px}
.mk-desc{font-size:13.5px;line-height:1.55;margin:4px 0 10px}.mk-desc mark{background:#fde7c7;border-bottom:2px solid #e2a04a;padding:0 2px;border-radius:3px}
.mk-tip{border-left:3px solid #e2a04a;background:#fffaf2;border-radius:0 10px 10px 0;padding:8px 10px;font-size:12.5px}.mk-tip b{display:block;margin-bottom:2px}.mk-tip span{color:var(--muted)}
.float .mk-card{white-space:nowrap}.float .mk-badgeset{flex-wrap:nowrap}.float .mk-line span{white-space:nowrap}
@media (max-width:640px){.mk-pdp,.mk-split{grid-template-columns:1fr}.mk-photo.tall{aspect-ratio:1}.mk-list{position:static;width:auto;margin-top:8px;box-shadow:none;border:1px solid var(--line)}.float .mk-card{min-width:0}}

/* home: proof points under the hero */
.proof{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:8px}.proof li{display:flex;gap:7px;align-items:center;font-size:14.5px;color:var(--muted)}
.proof svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* home: goal tabs, each with its own colour so they stand apart from the green app cards.
   One group of apps at a time (all groups shown without JS). */
.t-sell{--tc:#b8582f;--tbg:#fbede5}.t-run{--tc:#2f6db4;--tbg:#e9f1fb}.t-eu{--tc:#6a4fc2;--tbg:#f0ecfc}
.tabs{display:none}.tabbed .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 26px}
.tabs button{all:unset;cursor:pointer;position:relative;display:block;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px 18px 16px 44px;
  transition:background-color .35s,border-color .35s,box-shadow .35s,transform .3s cubic-bezier(.2,.8,.2,1)}
.tabs button::before{content:"";position:absolute;left:18px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 4px var(--tbg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tabs button:hover{transform:translateY(-2px);border-color:var(--tc)}.tabs button:focus-visible{outline:2px solid var(--tc);outline-offset:2px}
.tabs b{display:block;font:600 24px/1.1 "Barlow Condensed",sans-serif;color:var(--head);transition:color .35s}.tabs span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.tabs [aria-selected=true]{background:var(--tbg);border-color:var(--tc);box-shadow:0 10px 26px -12px var(--tc)}.tabs [aria-selected=true] b{color:var(--tc)}.tabs [aria-selected=true]::before{transform:scale(1.25)}
.pane+.pane{margin-top:40px}.panetitle{font-size:28px;margin:0 0 14px}
.tabbed .pane{display:none}.tabbed .pane.on{display:block}.tabbed .panetitle{display:none}.tabbed .pane+.pane{margin-top:0}
.panes{overflow:hidden;margin:-12px;padding:12px}
/* switching: the old cards slide out to one side, the new ones slide in from the other, one after another */
@keyframes outL{to{opacity:0;transform:translateX(-80px)}}@keyframes outR{to{opacity:0;transform:translateX(80px)}}
@keyframes inR{from{opacity:0;transform:translateX(90px)}}@keyframes inL{from{opacity:0;transform:translateX(-90px)}}
.pane.leave-l .card{animation:outL .38s cubic-bezier(.4,0,.6,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.pane.leave-r .card{animation:outR .38s cubic-bezier(.4,0,.6,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.pane.enter-r .card{animation:inR .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 75ms)}
.pane.enter-l .card{animation:inL .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 75ms)}
.cards{align-items:stretch}.card{height:100%;align-items:stretch}.card img,.card .go{align-self:flex-start}
.card .t{display:flex;flex-direction:column}.card .t small{margin-top:auto;padding-top:12px}

/* ---------- a little life: varied, slow, never in the way (all off with reduced motion) ---------- */
/* key words: a hand-drawn underline draws in, stays, wipes away, and comes back now and then */
h1 em,h2 em{background:linear-gradient(color-mix(in srgb,currentColor 28%,transparent),color-mix(in srgb,currentColor 28%,transparent)) no-repeat 0 92%/0 .09em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;animation:ink 11s cubic-bezier(.6,.05,.3,1) infinite;animation-delay:var(--d,1s)}
@keyframes ink{0%{background-size:0 .09em;background-position:0 92%}9%{background-size:100% .09em;background-position:0 92%}79%{background-size:100% .09em;background-position:100% 92%}88%,100%{background-size:0 .09em;background-position:100% 92%}}
/* "Inside the app": screenshots glide in from their side with a slight tilt, then float; captions get a soft highlight */
.js .feats .row .shot{opacity:0;transform:translateX(-46px) rotate(-1.2deg);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js .feats .row.flip .shot{transform:translateX(46px) rotate(1.2deg)}
.js .feats .row.in .shot{opacity:1;transform:none;animation:bob 9s ease-in-out 1.4s infinite}
.feats .row p span{background:linear-gradient(transparent 60%,var(--mint) 60%) no-repeat left/0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 4px;transition:background-size 1.3s cubic-bezier(.2,.8,.2,1) .7s}
.feats .row.in p span,html:not(.js) .feats .row p span{background-size:100% 100%}
.js .feats .row p{opacity:0;transform:translateY(10px);transition:opacity .8s .35s,transform .8s .35s}.js .feats .row.in p{opacity:1;transform:none}
/* proof ticks draw themselves, one after another */
.proof svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .7s cubic-bezier(.6,0,.3,1) forwards}
.proof li:nth-child(1) path{animation-delay:.9s}.proof li:nth-child(2) path{animation-delay:1.15s}.proof li:nth-child(3) path{animation-delay:1.4s}
@keyframes draw{to{stroke-dashoffset:0}}
/* step numbers pop in; value cards and steps lift on hover */
.js .steps li.in span{animation:pop .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0) * 120ms + .2s)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.steps li,.vals div,.plan{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.steps li:hover,.vals div:hover{transform:translateY(-4px);box-shadow:var(--shadow-s)}
/* the free plan breathes slowly */
.plan.freeplan{animation:breathe 6s ease-in-out infinite}@keyframes breathe{50%{box-shadow:0 0 0 7px var(--mint),0 18px 40px -22px rgba(63,107,58,.45)}}
/* in the scenes: "Most popular" pulses, switches flip on */
.mk-tier em{animation:tag 3.4s ease-in-out infinite}@keyframes tag{50%{transform:translateY(-2px) scale(1.06)}}
.mk-toggle.on{animation:tog 1s .9s both}@keyframes tog{from{background:#cfd6cc}}.mk-toggle.on::after{animation:knob 1s .9s both}@keyframes knob{from{left:3px}}
/* buttons: a light sheen passes on hover */
.btn{position:relative;overflow:hidden}.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.btn:hover::after{transform:translateX(120%)}.btn.soon::after,.btn.ghost::after{display:none}

/* reveal on scroll (only with JS), cards one after another */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 70ms)}.js .reveal.in{opacity:1;transform:none}
.js .card.reveal.in{transition-delay:0s,0s;transition-property:transform,box-shadow,border-color}

@media (max-width:980px){
  .herogrid,.storygrid{grid-template-columns:minmax(0,1fr);gap:28px}.hero{padding:36px 0 56px}
  .vals{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}
  .feats .row,.feats .row.flip{grid-template-columns:1fr;gap:18px}.feats .row.flip .shot{order:0}
}
@media (max-width:640px){
  body{font-size:16px}.wrap{padding:0 16px}.band{margin:0;border-radius:24px;padding:56px 0}section.wrap{padding-top:56px;padding-bottom:56px}
  .navin nav a:not(.btn){display:none}.navin{height:58px}
  .lead{font-size:17px}.steps,.plans,.vals,.cards,.cols,.footin{grid-template-columns:1fr}
  .tabbed .tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.tabs button{padding:30px 6px 10px;border-radius:14px;text-align:center}.tabs button::before{left:50%;top:12px;margin-left:-6px}.tabs b{font-size:18px}.tabs span{display:none}
  /* the floating details stay on one line; on narrow phones they may shrink their text a little */
  .fb{margin:0 0 -22px 0}.fa{margin:-22px 0 0 0}.float figcaption{font-size:18px}.float .mk-card{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ================= v3: 90° arrows, breathing room, pill goal switch, clickable cards, centred plans ================= */
/* stage: details sit apart from the scene; label beside a 90° arrow whose tip is the card's middle */
.stage{gap:18px;padding:0}.fb{margin:0 4% 0 0}.fa{margin:0 0 0 2%}
.float figcaption{display:grid;grid-template-columns:1fr 48px 1fr;align-items:start;width:460px;max-width:92vw;max-width:min(460px,92vw);text-align:left;margin:0}
.fb figcaption .lab{grid-column:1;justify-self:end;text-align:right;padding-top:0;margin-right:-2px}
.fa figcaption .arrow{grid-column:2;grid-row:1}.fa figcaption .lab{grid-column:3;grid-row:1;justify-self:start;align-self:end;margin-left:-2px}
.arrow{width:48px;height:44px;margin:0;stroke-width:2.2}.arrow.up{transform:scale(-1,-1)}
.arrow path:first-child{stroke-dasharray:1;stroke-dashoffset:1;animation:line 1s cubic-bezier(.6,0,.3,1) .9s forwards}
.arrow path:last-child{opacity:0;animation:fadein .3s 1.75s forwards}
@keyframes line{to{stroke-dashoffset:0}}@keyframes fadein{to{opacity:1}}

/* Inside the app: three screens, lots of air, an arrow from each caption to its screen */
.feats .row{margin-top:110px;gap:64px;grid-template-columns:1.25fr 1fr}.feats .row.flip{grid-template-columns:1fr 1.25fr}
.feats h2+.row{margin-top:56px}
.cap{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sidearrow{width:70px;height:46px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.feats .row.flip .cap{align-items:flex-end;text-align:right}.feats .row.flip .sidearrow{transform:scaleX(-1)}
.js .sidearrow path:first-child{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.3,1) .9s}
.js .sidearrow path:last-child{opacity:0;transition:opacity .3s 1.8s}
.js .row.in .sidearrow path:first-child{stroke-dashoffset:0}.js .row.in .sidearrow path:last-child{opacity:1}
.feats .shot{max-width:620px;justify-self:center;width:100%}

/* plans: centred, two or three side by side */
.pricing .wrap{text-align:center}.pricing .eyebrow{display:block}
.plans{margin:0 auto;justify-content:center;max-width:none;text-align:left}
.plans.n2{grid-template-columns:repeat(2,minmax(0,360px))}.plans.n3{grid-template-columns:repeat(3,minmax(0,340px))}
.star.top{color:#7a5bd1}

/* the goal switch: a row of pills (not cards), each in its own colour */
.tabbed .tabs{display:inline-flex;flex-wrap:wrap;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px;margin:4px 0 18px;box-shadow:var(--shadow-s)}
.tabs button{padding:10px 20px 10px 38px;border-radius:999px;border:0;font:600 15px/1 Inter,sans-serif;color:var(--muted);background:transparent}
.tabs button::before{left:18px;top:50%;margin-top:-5px;width:10px;height:10px;box-shadow:none}
.tabs button:hover{transform:none;color:var(--head);background:var(--sand)}
.tabs [aria-selected=true]{background:var(--tc);color:#fff;box-shadow:0 8px 20px -10px var(--tc)}.tabs [aria-selected=true]::before{background:#fff;transform:none}
.panesub{color:var(--muted);margin:0 0 20px;font-size:16px}.panesub span{color:var(--tc);font-weight:600}
.pane.t-sell,.pane.t-run,.pane.t-eu{--tc:var(--green-d)}.tabbed .pane.t-sell .panesub span{color:#b8582f}.tabbed .pane.t-run .panesub span{color:#2f6db4}.tabbed .pane.t-eu .panesub span{color:#6a4fc2}
.pane .panesub,.pane .panetitle{animation:none}

/* app cards: obviously clickable */
.card{cursor:pointer;padding:22px;gap:18px}
.card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 2px 4px rgba(31,42,36,.05),0 18px 40px -18px rgba(63,107,58,.35)}
.card .more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;padding:8px 14px;border-radius:999px;background:var(--mint);color:var(--green-d);font-weight:600;font-size:13.5px;transition:background .25s,color .25s}
.card .more i{font-style:normal;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.card:hover .more{background:var(--green-d);color:#fff}.card:hover .more i{transform:translateX(4px)}
.card .t small{margin-top:auto;padding-top:12px}.card .go{display:none}
.cards{gap:20px}

/* "for Shopify" everywhere it matters */
.shopbadge{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--mint);color:var(--green-d);font-size:14.5px;font-weight:500}
.shopbadge b{font-weight:700}.shopbadge svg,.forshop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.forshop{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:3px 9px;border-radius:999px;background:var(--mint);color:var(--green-d);font-size:12.5px;font-weight:600;vertical-align:2px}

@media (max-width:980px){.plans.n3{grid-template-columns:repeat(2,minmax(0,340px))}.feats .row,.feats .row.flip{margin-top:64px;gap:20px}}
@media (max-width:640px){
  .plans.n2,.plans.n3{grid-template-columns:minmax(0,1fr)}
  .float figcaption{width:auto;max-width:100%;grid-template-columns:1fr 40px 1fr}.float figcaption .lab{font-size:17px}.arrow{width:40px;height:38px}
  .fb{margin:0}.fa{margin:0}
  .tabbed .tabs{display:flex;border-radius:18px}.tabs button{flex:1;padding:10px 8px 10px 26px;font-size:13.5px}.tabs button::before{left:10px}
  .feats .row .cap,.feats .row.flip .cap{align-items:flex-start;text-align:left}.feats .row.flip .sidearrow{transform:none}.sidearrow{display:none}
  .forshop{margin:6px 0 0;display:flex;width:max-content}
}

/* ================= v4: arrows never touch text or cards; no floating on hero cards; top-bar CTA ================= */
.float figcaption{grid-template-columns:1fr 48px 1fr;width:max-content;min-width:100%;max-width:none}
.float figcaption .lab{white-space:nowrap;line-height:1.1}
.fb figcaption{margin-bottom:8px}.fb figcaption .lab{align-self:start;margin-top:-1px;padding-right:6px}
.fa figcaption{margin-top:8px}.fa figcaption .lab{align-self:end;margin-bottom:-1px;padding-left:6px}
.stage .float .mk-card,.stage .fa .mk-card{animation:none!important}
/* top bar: a call to action slides in once you scroll past the top */
.trycta{opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.scrolled .trycta{opacity:1;transform:none;pointer-events:auto}
.trycta.soon{background:var(--mint);color:var(--green-d);border-color:#d6e5cf;cursor:default}
@media (max-width:640px){
  .float figcaption{display:block;width:auto;min-width:0;text-align:center}.float figcaption .arrow{display:none}
  .float figcaption .lab{white-space:normal;padding:0}.fb figcaption{margin-bottom:6px}.fa figcaption{margin-top:6px}
  .scrolled .navin nav .btn:not(.trycta){display:none}
}

/* ================= v5 ================= */
.navin nav a.btn.ghost{color:var(--head)}.navin nav a.btn.ghost:hover{color:var(--green-d)}
/* steps: number on the left, level with its text */
.steps li{display:flex;align-items:center;gap:16px;padding:22px 24px}
.steps li span{margin:0;flex:none}
/* goal switch: quicker, and never blocks a click */
.pane.leave-l .card,.pane.leave-r .card{animation-duration:.22s;animation-delay:calc(var(--i,0) * 25ms)}
.pane.enter-r .card,.pane.enter-l .card{animation-duration:.55s;animation-delay:calc(var(--i,0) * 55ms)}

/* ================= v6 ================= */
/* top bar call to action: on its own, in the middle of the bar */
.navin{position:relative}
.navin>.trycta{position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap}
.trycta.soon{cursor:pointer;display:inline-flex;align-items:center;gap:8px}.trycta.soon b{font-weight:650;text-decoration:underline;text-underline-offset:3px}
.trycta.soon:hover{background:#dcefd3}
.trycta.soon i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(79,122,61,.5);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(79,122,61,.45)}70%,100%{box-shadow:0 0 0 8px rgba(79,122,61,0)}}
@media (max-width:980px){.navin>.trycta{position:static;translate:none;order:3}}
@media (max-width:640px){.trycta.soon{font-size:13px;padding-inline:12px}.trycta.soon .long{display:none}}
/* Inside the app: the interface shown big enough to read */
.feats .row{grid-template-columns:1.6fr 1fr}.feats .row.flip{grid-template-columns:1fr 1.6fr}
.feats .shot{max-width:760px}
.feats .shot img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;background:#fff}
.trycta.soon .short{display:none}@media (max-width:640px){.trycta.soon .short{display:inline}}

/* ================= v7: Inside the app as small scenes of the app's own cards ================= */
.feats .shot.scene{border:0;box-shadow:none;overflow:visible;max-width:none;padding:clamp(22px,5%,44px);border-radius:28px;
  background:radial-gradient(120% 90% at 0% 0%,#e4efdc 0,rgba(228,239,220,0) 60%),radial-gradient(90% 80% at 100% 100%,#f6e7d6 0,rgba(246,231,214,0) 65%),#f3f1ea}
.feats .row.flip .shot.scene{background:radial-gradient(120% 90% at 100% 0%,#e4efdc 0,rgba(228,239,220,0) 60%),radial-gradient(90% 80% at 0% 100%,#efe3f0 0,rgba(239,227,240,0) 65%),#f3f1ea}
.scene .cards{position:relative;width:100%;margin:0 auto}
.feats .scene img.card{position:absolute;height:auto;max-height:none;display:block;border-radius:12px;background:#fff;border:1px solid rgba(37,61,50,.08);
  box-shadow:0 1px 2px rgba(31,42,36,.06),0 14px 34px -14px rgba(31,42,36,.28)}
.feats .scene img.c1,.feats .scene img.c2{box-shadow:0 2px 4px rgba(31,42,36,.07),0 26px 50px -18px rgba(31,42,36,.38)}
.feats .scene.side img.c1{box-shadow:0 1px 2px rgba(31,42,36,.06),0 14px 34px -14px rgba(31,42,36,.28)}
/* the front card settles in just after the scene */
.js .feats .row .scene img.c1,.js .feats .row .scene img.c2{opacity:0;transform:translate(18px,14px);transition:opacity .8s .45s,transform 1s cubic-bezier(.2,.8,.2,1) .45s}
.js .feats .row .scene img.c2{transition-delay:.7s}
.js .feats .row.in .scene img.c1,.js .feats .row.in .scene img.c2{opacity:1;transform:none}
.feats .row{grid-template-columns:1.75fr 1fr}.feats .row.flip{grid-template-columns:1fr 1.75fr}
.feats .shot.scene{width:100%}
@media (max-width:860px){.feats .row,.feats .row.flip{grid-template-columns:1fr}.feats .shot.scene{padding:18px;border-radius:20px}.feats .scene img.card{border-radius:8px}}
@media (max-width:640px){.navin .brand span{white-space:nowrap}.navin>.trycta.soon{font-size:12px;padding:0 10px;gap:6px;margin-left:auto;flex:none}.trycta.soon i{width:6px;height:6px}.navin{gap:10px}}@media (max-width:360px){.trycta.soon .short{display:none}}
.feats .scene img.card.soft{border-radius:22px}@media (max-width:860px){.feats .scene img.card.soft{border-radius:14px}}

/* ================= v8: hands-on demos in the hero (mockups.cjs → demo) ================= */
.demo-stage{display:flex;flex-direction:column;align-items:stretch}
.dm-hint{display:flex;align-items:center;gap:6px;margin:0 0 8px auto;padding-right:clamp(40px,22%,140px);font:600 clamp(18px,1.8vw,22px)/1.1 "Barlow Condensed",sans-serif;color:var(--green-d)}
.dm-hint .arrow{width:40px;height:36px}
.demo{--bc:#3f6b3a;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;padding:14px;border-radius:22px;background:#f3f1ea;border:1px solid var(--line);box-shadow:var(--shadow)}
.dm-preview{display:flex;align-items:center;justify-content:center;background:#ece9e0;border-radius:16px;padding:16px}
.dm-card{width:100%;max-width:220px;background:#fff;border-radius:14px;padding:10px 10px 12px;box-shadow:0 8px 24px -14px rgba(31,42,36,.35)}
.dm-img{position:relative;aspect-ratio:1;border-radius:10px;background:#f6f4ef;display:grid;place-items:center;overflow:hidden}
.dm-tee{width:78%;height:auto}
.dm-title{margin:10px 2px 2px;font:600 15px/1.3 Inter,sans-serif;color:var(--head);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dm-price{margin:2px;font:14px Inter,sans-serif;color:var(--ink)}.dm-price s{color:var(--faint);margin-left:4px}
.dm-stack{display:flex;flex-direction:column;gap:4px}.dm-title .dm-stack{flex-direction:row;flex-wrap:wrap}
.dm-img .dm-stack{position:absolute;padding:8px}
.at-tl{top:0;left:0;align-items:flex-start}.at-tc{top:0;left:50%;transform:translateX(-50%);align-items:center}.at-tr{top:0;right:0;align-items:flex-end}
.at-ml{top:50%;left:0;transform:translateY(-50%);align-items:flex-start}.at-mc{top:50%;left:50%;transform:translate(-50%,-50%);align-items:center}.at-mr{top:50%;right:0;transform:translateY(-50%);align-items:flex-end}
.at-bl{bottom:0;left:0;align-items:flex-start}.at-bc{bottom:0;left:50%;transform:translateX(-50%);align-items:center}.at-br{bottom:0;right:0;align-items:flex-end}
.dm-b{font:600 11.5px/1 Inter,sans-serif;padding:5px 8px;border-radius:6px;white-space:nowrap;animation:dmpop .35s cubic-bezier(.2,.8,.2,1)}
.dm-b.solid{background:var(--bc);color:#fff}
.dm-b.outline{background:#fff;color:var(--bc);box-shadow:inset 0 0 0 1.5px var(--bc)}
.dm-b.soft{background:color-mix(in srgb,var(--bc) 16%,#fff);color:var(--bc);border-radius:999px}
@keyframes dmpop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.dm-panel{background:#fff;border-radius:16px;padding:12px 12px 14px;border:1px solid var(--line);font:13px Inter,sans-serif;color:var(--ink)}
.dm-h{margin:10px 2px 6px;font:600 12px Inter,sans-serif;color:var(--head)}.dm-h:first-child{margin-top:0}
.dm-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;margin-bottom:5px;cursor:pointer}
.dm-row:hover{border-color:#cfd9c8}.dm-row span{display:flex;flex-direction:column;line-height:1.25}.dm-row b{font-weight:600;font-size:13px}.dm-row small{color:var(--muted);font-size:11px}
.dm-row input{position:absolute;opacity:0;pointer-events:none}
.dm-tg{flex:none;width:30px;height:18px;border-radius:9px;background:#d7d9d4;position:relative;transition:background .2s}
.dm-tg::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.dm-row input:checked+.dm-tg{background:var(--green)}.dm-row input:checked+.dm-tg::after{transform:translateX(12px)}
.dm-row input:focus-visible+.dm-tg{outline:2px solid var(--green);outline-offset:2px}
.dm-seg{display:flex;background:#f1efe9;border-radius:9px;padding:3px;gap:2px;margin-bottom:8px}
.dm-seg button{flex:1;border:0;background:none;border-radius:7px;padding:6px 4px;font:500 12px Inter,sans-serif;color:var(--muted);cursor:pointer}
.dm-seg button.on{background:#fff;color:var(--head);box-shadow:0 1px 3px rgba(31,42,36,.12)}
.dm-spots{display:grid;grid-template-columns:repeat(3,26px);gap:4px;margin:0 0 4px 2px;transition:opacity .2s}.dm-spots.off{opacity:.35}
.dm-spots button{height:22px;border:0;border-radius:6px;background:#eef0eb;cursor:pointer;position:relative}
.dm-spots button::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#c2c8bd}
.dm-spots button.on{background:var(--green)}.dm-spots button.on::after{background:#fff}
.dm-sw{display:flex;gap:7px;margin:0 2px 8px}
.dm-sw button{width:22px;height:22px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px #fff,0 0 0 3px transparent}
.dm-sw button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
@media (max-width:640px){.demo{grid-template-columns:1fr;padding:10px}.dm-hint{margin-left:0;padding-right:0}.dm-card{max-width:240px}}
/* Badges demo, round 2: Sale + Custom, placement by the title, colours per badge */
.dm-badges .dm-row{display:flex;flex-direction:column;align-items:stretch;gap:7px;cursor:default;padding:8px 9px}
.dm-sw-row{display:flex;align-items:center;gap:9px;cursor:pointer}.dm-sw-row b{font-weight:600;font-size:13px}
.dm-sw-row input{position:absolute;opacity:0;pointer-events:none}
.dm-sw-row input:checked+.dm-tg{background:var(--green)}.dm-sw-row input:checked+.dm-tg::after{transform:translateX(12px)}
.dm-sw-row input:focus-visible+.dm-tg{outline:2px solid var(--green);outline-offset:2px}
.dm-seg.sm{margin:0}.dm-seg.sm button{padding:5px 3px;font-size:11.5px}
.dm-seg.grid2{display:grid;grid-template-columns:1fr 1fr}
.dm-input{width:100%;box-sizing:border-box;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:13px Inter,sans-serif;color:var(--ink)}
.dm-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,122,67,.15)}
.dm-l{display:block;margin:4px 2px 5px;font:12px Inter,sans-serif;color:var(--muted)}
.dm-for{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dm-for select{font:500 12px Inter,sans-serif;border:1px solid var(--line);border-radius:8px;padding:5px 6px;background:#fff;color:var(--head)}
.dm-sw .dm-inherit{background:repeating-linear-gradient(45deg,#fff 0 3px,#e3e6df 3px 6px);box-shadow:0 0 0 2px #fff,0 0 0 3px #cfd5ca}
.dm-sw .dm-inherit.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--green)}
.dm-sw button[data-v="#ffffff"],.dm-sw button[data-v="#f3e7c9"]{box-shadow:0 0 0 2px #fff,0 0 0 3px #d9ddd5}
.dm-sw button[data-v="#ffffff"].on,.dm-sw button[data-v="#f3e7c9"].on{box-shadow:0 0 0 2px #fff,0 0 0 4px #9aa39d}
.dm-round input{width:100%;accent-color:var(--green)}
.dm-more{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--mint);font:12px/1.4 Inter,sans-serif;color:var(--green-d)}
.dm-badges .dm-b{animation:none;transition:border-radius .15s}
.dm-title{gap:6px}.dm-title.side-end{justify-content:space-between;flex-wrap:nowrap}.dm-title.side-below{flex-direction:column;align-items:flex-start}
.dm-title.side-below .dm-tb{order:2}
.dm-tb{display:inline-flex;gap:4px;flex-wrap:wrap}
/* Ask a question dialog */
.ask{border:0;padding:0;border-radius:22px;width:min(440px,calc(100vw - 32px));box-shadow:0 30px 80px -20px rgba(31,42,36,.45);color:var(--ink)}
.ask::backdrop{background:rgba(31,42,36,.35);backdrop-filter:blur(3px)}
.ask[open]{animation:askin .3s cubic-bezier(.2,.8,.2,1)}@keyframes askin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.askin,.askdone{position:relative;display:grid;gap:12px;padding:26px 24px 24px}
.ask h3{margin:0;font:600 26px/1.1 "Barlow Condensed",sans-serif;color:var(--head);padding-right:30px}
.asksub{margin:-4px 0 4px;color:var(--muted);font-size:14px}
.ask label{display:grid;gap:6px;font:500 13px Inter,sans-serif;color:var(--head)}
.ask input,.ask textarea{font:15px Inter,sans-serif;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;resize:vertical}
.ask input:focus,.ask textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,122,67,.15)}
.ask .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.askx{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:var(--sand);font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.askx:hover{color:var(--head)}
.askerr{margin:0;color:#7a2a1c;background:#fbeae6;border-radius:10px;padding:8px 12px;font-size:13px}
.ask .btn{justify-self:start;border:0;cursor:pointer;font:inherit}
.ask [hidden]{display:none!important}
.dm-badges .dm-row .dm-input{position:static;opacity:1;pointer-events:auto}
/* Badges demo, round 3: bigger product with the colours under it; spot picker centred */
.dm-badges{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start}
.dm-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.dm-badges .dm-preview{padding:22px 18px}
.dm-badges .dm-card{max-width:290px}
.dm-colours{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center}
.dm-colours .dm-h,.dm-colours .dm-for,.dm-colours .dm-round{grid-column:1/-1}
.dm-colours .dm-l{margin:0}.dm-colours .dm-sw{margin:0}
.dm-where[data-show="image"]{text-align:center}
.dm-spots{margin:0 auto 4px;justify-content:center}
/* Bundles demo */
.dm-bundles{--ac:#2F5D50;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start}
.dm-bundles .dm-preview{padding:18px 16px}.dm-bundles .dm-card{max-width:300px}
.dm-img.short{aspect-ratio:16/9}.dm-img.short .dm-tee{width:40%}
.dm-offer{margin:10px 0 0}
.dm-oh{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 12px Inter,sans-serif;color:var(--head);justify-content:center}
.dm-oh.line::before,.dm-oh.line::after{content:"";flex:1;height:1px;background:#d9ddd5}.dm-oh.none{display:none}
.dm-tiers{display:grid;gap:6px}
.dm-bundles[data-layout="cards"] .dm-tiers{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}
.dm-tier{position:relative;display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1.5px solid #e2e5df;background:#fff;padding:9px 10px;font:12px Inter,sans-serif;color:var(--ink);cursor:pointer;border-radius:var(--rad,10px);transition:border-color .15s,background .15s}
.dm-bundles[data-corners="square"]{--rad:2px}.dm-bundles[data-corners="round"]{--rad:18px}
.dm-tier.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 7%,#fff)}
.dm-tier em{position:absolute;top:-8px;right:8px;font:600 9.5px/1 Inter,sans-serif;font-style:normal;background:var(--ac);color:#fff;padding:3px 6px;border-radius:999px}
.dm-radio{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid #c2c8bd}.dm-tier.on .dm-radio{border:4px solid var(--ac)}
.dm-tn{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.dm-tn b{font-weight:600}.dm-tn i{font-style:normal;color:var(--ac);font-weight:600;font-size:11px}.dm-tn small{color:var(--muted);font-size:11px}
.dm-tp{display:flex;flex-direction:column;align-items:flex-end}.dm-tp b{font-weight:600}.dm-tp s{color:var(--faint);font-size:11px}
.dm-bundles[data-layout="cards"] .dm-tier{flex-direction:column;align-items:center;text-align:center;padding:14px 6px 9px;gap:4px}
.dm-bundles[data-layout="cards"] .dm-radio{display:none}.dm-bundles[data-layout="cards"] .dm-tn,.dm-bundles[data-layout="cards"] .dm-tp{align-items:center}
.dm-bundles[data-layout="cards"] .dm-tier em{right:50%;transform:translateX(50%);white-space:nowrap}
.dm-cart{display:block;margin-top:10px;text-align:center;background:#1f1f1f;color:#fff;border-radius:var(--rad,10px);padding:10px;font:600 13px Inter,sans-serif}
.dm-design{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center}
.dm-design .dm-h{grid-column:1/-1}.dm-design .dm-l,.dm-design .dm-sw,.dm-design .dm-seg{margin:0}
.dm-design .dm-seg button{padding:5px 3px;font-size:11.5px}
.dm-tedit{display:grid;gap:6px;margin-bottom:8px}
.dm-trow{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;font:13px Inter,sans-serif}
.dm-trow>span{min-width:52px}.dm-trow em{color:var(--muted);font-style:normal;font-size:12px}
.dm-trow label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.dm-trow input{width:54px;height:28px;border:1px solid var(--line);border-radius:7px;padding:0 6px;font:13px Inter,sans-serif;color:var(--ink)}
.dm-trow input:focus{outline:none;border-color:var(--green)}
.dm-x{margin-left:auto;width:24px;height:24px;border:0;border-radius:50%;background:#f1efe9;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.dm-add{border:1px dashed #c9d2c3;background:none;border-radius:10px;padding:7px;width:100%;font:500 12.5px Inter,sans-serif;color:var(--green-d);cursor:pointer;margin-bottom:10px}
.dm-add[hidden]{display:none}
.dm-pop{margin:2px 2px 0}.dm-pop b{font-weight:500;font-size:12.5px}
@media (max-width:640px){.dm-bundles,.dm-badges{grid-template-columns:1fr}}
.dm-hint a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* Demos, round 4: two columns of equal height, the "much more" note under both, more breathing room */
.demo.dm-badges,.demo.dm-bundles{align-items:stretch;gap:16px;padding:16px}
.dm-left,.dm-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.dm-left .dm-preview{flex:1}
.dm-right .dm-panel:last-child{flex:1}
.demo .dm-panel{padding:14px 14px 16px}
.demo .dm-h{margin:16px 2px 9px}.demo .dm-panel>.dm-h:first-child{margin-top:0}
.dm-badges .dm-row{margin-bottom:8px}
.dm-where{margin-top:12px}.dm-where .dm-l{margin-bottom:8px}
.dm-colours,.dm-design{row-gap:10px}
.dm-round .dm-l{margin-bottom:6px}
.demo>.dm-more{grid-column:1/-1;margin:0;text-align:center}
.dm-bundles .dm-img.short{aspect-ratio:2/1}
.dm-tedit{gap:8px;margin-bottom:10px}.dm-add{margin-bottom:12px}
/* Loyalty demo */
.demo.dm-loyalty{--ac:#3f6b3a;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:stretch;gap:16px;padding:16px}
.dm-loyalty .dm-preview{padding:16px}
.dm-rp{width:100%;max-width:290px;background:#fff;border-radius:16px;padding:16px;box-shadow:0 8px 24px -14px rgba(31,42,36,.35);font:13px Inter,sans-serif;color:var(--ink);position:relative}
.dm-rp-t{margin:0 0 4px;font:600 15px Inter,sans-serif;color:var(--head)}
.dm-rp-big{margin:0;color:var(--muted)}.dm-rp-big b{font:600 30px/1.1 Inter,sans-serif;color:var(--ac);margin-right:4px}
.dm-rp-tier{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 6px;font-size:11.5px;color:var(--muted)}
.dm-chip{background:color-mix(in srgb,var(--ac) 12%,#fff);color:var(--ac);font-weight:600;padding:3px 8px;border-radius:999px}
.dm-bar{height:6px;border-radius:3px;background:#eceee9;overflow:hidden;margin-bottom:12px}.dm-bar i{display:block;height:100%;background:var(--ac);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.dm-rw{display:grid;gap:6px}
.dm-rwi{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #e6e8e3;border-radius:10px}
.dm-rwi span{display:flex;flex-direction:column}.dm-rwi b{font-weight:600}.dm-rwi small{color:var(--muted);font-size:11px}
.dm-rwi button{flex:none;border:0;border-radius:8px;padding:6px 10px;font:600 11.5px Inter,sans-serif;background:var(--ac);color:#fff;cursor:pointer}
.dm-rwi button:disabled{background:#f1f1ee;color:var(--muted);cursor:default}
.dm-empty{margin:0;color:var(--muted);font-size:12px}
.dm-rp-h{margin:12px 0 4px;font:600 12px Inter,sans-serif;color:var(--head)}
.dm-ways{margin:0;padding-left:16px;color:var(--muted);font-size:12px;line-height:1.6}
.dm-order{margin-top:12px;width:100%;border:1.5px dashed color-mix(in srgb,var(--ac) 45%,#fff);background:color-mix(in srgb,var(--ac) 6%,#fff);color:var(--ac);border-radius:10px;padding:9px;font:600 12.5px Inter,sans-serif;cursor:pointer}
.dm-order:hover{background:color-mix(in srgb,var(--ac) 12%,#fff)}
.dm-toast{position:absolute;left:50%;top:12px;transform:translate(-50%,-6px);margin:0;padding:6px 12px;border-radius:999px;background:#1f2a24;color:#fff;font:600 12px Inter,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.dm-toast.on{opacity:1;transform:translate(-50%,0)}
.dm-look{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:10px;align-items:center}
.dm-look .dm-h{grid-column:1/-1}.dm-look .dm-l,.dm-look .dm-sw{margin:0}
.dm-bonus{padding:6px 0}.dm-bonus span{flex:1;font-size:12.5px}.dm-bonus em{font-style:normal;color:var(--muted);font-size:12px}
.dm-loyalty .dm-seg{margin-bottom:0}
@media (max-width:640px){.demo.dm-loyalty{grid-template-columns:1fr}}
.dm-toast{top:auto;bottom:58px}
/* ================= v9 ================= */
/* phones: the top bar's call to action takes no room until it shows, so Contact stays on the right */
@media (max-width:980px){html:not(.scrolled) .navin>.trycta{display:none}}
/* demo panels: labels sit above their controls, so nothing runs out of its frame */
.dm-colours,.dm-design,.dm-look{display:block}
.dm-colours .dm-l,.dm-design .dm-l,.dm-look .dm-l{display:block;margin:12px 2px 6px}
.dm-colours .dm-h+.dm-l,.dm-design .dm-h+.dm-l,.dm-look .dm-h+.dm-l{margin-top:0}
.dm-colours .dm-for{display:flex;margin:0 2px 2px}
.dm-seg{min-width:0}.dm-seg button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-sw{flex-wrap:wrap}
/* Loyalty, round 2: a fixed frame (the left column scrolls inside the right one's height), editable values */
.dm-loyalty .dm-left{contain:size}
.dm-loyalty .dm-preview{flex:1;min-height:0;overflow:auto;align-items:flex-start}
.dm-pre{margin:0 2px -4px;font:600 12px Inter,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dm-line{display:flex;align-items:center;gap:8px;padding:4px 0}
.dm-line .dm-sw-row{flex:1;min-width:0}.dm-line .dm-sw-row span{font-size:12.5px}
.dm-num{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font:12px Inter,sans-serif;white-space:nowrap}
.dm-num input{width:58px;height:26px;border:1px solid var(--line);border-radius:7px;padding:0 6px;font:12.5px Inter,sans-serif;color:var(--ink);background:#fff}
.dm-num input:focus{outline:none;border-color:var(--green)}
.dm-tiersed .dm-num input{width:50px}
.dm-tiersed.off{opacity:.4;pointer-events:none}
.dm-tname{flex:1;font:600 12.5px Inter,sans-serif}.dm-tname.copper,.dm-chip.copper{color:#a2592a}.dm-tname.silver{color:#6d7a80}.dm-tname.gold{color:#a77e14}
.dm-chip.copper{background:#f6e6da}
.dm-vip-h .dm-sw-row span{font:600 12px Inter,sans-serif;color:var(--head)}
.dm-loyalty .dm-order{margin-top:14px}
.dm-toast{bottom:14px}
/* phones: the demo opens from a button */
.dm-open{display:none}
.dm-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;margin-left:6px;transition:transform .25s}
@media (max-width:640px){
  .demo-stage .dm-hint{display:none}
  .dm-open{display:inline-flex;align-items:center;align-self:flex-start;cursor:pointer;font:inherit}
  .demo-stage:not(.open) .demo{display:none}
  .demo-stage.open .dm-open svg{transform:rotate(180deg)}
  .demo-stage.open .demo{margin-top:12px;animation:askin .35s cubic-bezier(.2,.8,.2,1)}
  .dm-loyalty .dm-left{contain:none}
}
.demo.dm-loyalty{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
.dm-loyalty .dm-preview{overflow-x:hidden;scrollbar-width:thin;justify-content:center}
.dm-toast{white-space:normal;width:max-content;max-width:88%;text-align:center}
.dm-colrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.dm-colrow .dm-l{margin:0}.dm-colrow .dm-sw{margin:0;gap:5px;flex-wrap:nowrap}.dm-colrow .dm-sw button{width:18px;height:18px}
@media (max-width:640px){.demo.dm-loyalty{grid-template-columns:1fr}.dm-colrow .dm-sw{flex-wrap:wrap}.dm-open svg{width:16px;height:16px;flex:none}}
.dm-chev{width:7px;height:7px;margin:-3px 0 0 10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}.demo-stage.open .dm-chev{transform:rotate(-135deg);margin-top:3px}
/* ================= v10: wider demo frames; Loyalty without tiers ================= */
@media (min-width:981px){.herogrid:has(.demo-stage){grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px}}
.demo.dm-loyalty{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.dm-loyalty .dm-rp{max-width:320px}
.dm-loyalty .dm-colrow{display:flex;padding:12px 14px;margin:0;border:1px solid var(--line)}
.dm-loyalty .dm-colrow .dm-sw button{width:20px;height:20px}
.dm-rname{flex:1;min-width:0;font:12.5px Inter,sans-serif;display:flex;align-items:center;gap:4px;white-space:nowrap}
.dm-line .dm-sw-row:has(+.dm-rname){flex:none}
.dm-cash{display:inline-flex;align-items:center;gap:1px;color:var(--muted)}
.dm-cash input{width:38px;height:24px;border:0;border-bottom:1.5px dashed #c6cec0;background:transparent;padding:0 2px;font:600 12.5px Inter,sans-serif;color:var(--ink);text-align:center;-moz-appearance:textfield}
.dm-cash input::-webkit-inner-spin-button,.dm-cash input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dm-cash input:focus{outline:none;border-bottom-color:var(--green)}
@media (max-width:640px){.demo.dm-loyalty{grid-template-columns:1fr}}
@media (min-width:641px){.demo.dm-loyalty{grid-template-rows:610px auto}.dm-loyalty .dm-right{contain:size}.dm-loyalty .dm-right .dm-panel{display:flex;flex-direction:column}.dm-loyalty .dm-order{margin-top:auto}}
@media (min-width:641px){.demo.dm-loyalty{grid-template-rows:575px auto}}
/* Loyalty: the frame is as tall as its content (measured in site.js), and stays put while you click */
@media (min-width:641px){
  .demo.dm-loyalty{grid-template-rows:var(--frame,auto) auto}
  .demo.dm-loyalty.measuring{grid-template-rows:auto auto}
  .demo.dm-loyalty.measuring .dm-left,.demo.dm-loyalty.measuring .dm-right{contain:none}
  .demo.dm-loyalty.measuring .dm-preview{flex:none}
  .dm-loyalty .dm-order{margin-top:14px}
}
.dm-loyalty .dm-preview{align-items:center}
/* Loyalty: confetti on a claim (as in the app), the purchase button level with the colour row */
.dm-rp{overflow:hidden}
.dm-confetti{position:absolute;inset:0;pointer-events:none;z-index:3}
.dm-confetti i{position:absolute;top:-12px;left:var(--x);width:7px;height:12px;border-radius:2px;opacity:0;animation:dmfall 1.8s ease-in var(--d) forwards}
@keyframes dmfall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(420px) rotate(var(--r))}}
.dm-loyalty .dm-colrow,.dm-loyalty .dm-right>.dm-order{height:50px;box-sizing:border-box;flex:none}
.dm-loyalty .dm-right>.dm-order{margin:0;border-radius:16px;font-size:13px}
.dm-loyalty .dm-right>.dm-panel{flex:1}
.demo>.dm-more{text-wrap:balance}

/* ================= v11: the other hands-on demos (.dm-std) ================= */
.demo.dm-std{--ac:#3f6b3a;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch;gap:16px;padding:16px}
.dm-std .dm-preview{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding:16px;align-items:center}
.dm-std .dm-right>.dm-panel{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.dm-std .dm-card{position:relative;max-width:300px}
@media (min-width:641px){
  .dm-std.fitted{grid-template-rows:var(--frame) auto}
  .dm-std.fitted .dm-left,.dm-std.fitted .dm-right{contain:size}
  .dm-std.measuring .dm-preview,.dm-std.measuring .dm-right>.dm-panel{flex:none;overflow:visible}
}
@media (max-width:640px){.demo.dm-std{grid-template-columns:1fr}}
.dm-std .dm-h{margin:14px 2px 8px}.dm-std .dm-panel>.dm-h:first-child,.dm-std .dm-panel>.dm-tline:first-child{margin-top:0}
.dm-tline{display:flex;padding:5px 0}.dm-tline span{font-size:12.5px;line-height:1.3}
.dm-lt{flex:1;min-width:0;font:12.5px Inter,sans-serif;color:var(--ink)}
.dm-input.dm-sm{width:auto;flex:0 1 140px;height:28px;font-size:12.5px}
.dm-line .dm-tline{flex:1}
.dm-std .dm-seg{margin-bottom:0}
.dm-std .dm-sw{margin:0 2px}
.dm-colrow2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.dm-colrow2 .dm-l{margin:0}.dm-colrow2 .dm-seg{flex:0 1 170px}
.dm-note{margin:2px 0 4px 39px;font:11.5px/1.4 Inter,sans-serif;color:var(--muted)}
.dm-std .dm-cart{margin-top:10px;background:var(--ac,#1f1f1f)}
.dm-std .dm-l{margin:10px 2px 6px}
.dm-pctl.off{opacity:.35;pointer-events:none}

/* Personalizer */
.dm-print{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;max-width:44%;pointer-events:none;transition:top .3s,left .3s}
.dm-print.at-chest{left:61%;top:38%;transform:translate(-50%,-50%) scale(.62)}.dm-print.at-low{top:62%}
.dm-ptext{font-size:20px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:clip}
.dm-ptext.f-script{font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;font-weight:400}.dm-ptext.f-serif{font-family:Georgia,"Times New Roman",serif;font-weight:600}.dm-ptext.f-clean{font-family:Inter,sans-serif;font-weight:650;letter-spacing:.02em}
.dm-icon{font-style:normal;font-size:18px}
.dm-field{display:grid;gap:4px;margin:8px 0 6px}.dm-flabel{font:600 11.5px Inter,sans-serif;color:var(--head)}
.dm-pick{margin-top:6px}.dm-pick[hidden]{display:none}
.dm-icons{display:flex;gap:6px}.dm-icons button{flex:1;height:28px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font:13px Inter,sans-serif;color:var(--ink)}
.dm-icons button.on{border-color:var(--green);background:var(--mint);color:var(--green-d)}
.dm-pers .dm-price small{color:var(--muted);font-size:11.5px;margin-left:4px}
.dm-pers .dm-img{aspect-ratio:4/3}.dm-pers .dm-tee{width:62%}

/* Green Claims */
.dm-gl{flex-direction:column;align-items:stretch;justify-content:flex-start}
.dm-text{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:none;font-size:13px}
.dm-read{background:#fff;border-radius:12px;padding:10px 12px;font:13px/1.6 Inter,sans-serif;color:var(--ink);border:1px solid var(--line)}
.dm-read mark{border-radius:4px;padding:0 2px}.dm-read mark.l2{background:#fbd9d1;color:#7a2a1c}.dm-read mark.l1{background:#fbedc6;color:#6b4e0a}
.dm-gsum{display:flex;gap:8px}.dm-gsum span{font:600 12px Inter,sans-serif;padding:4px 9px;border-radius:999px}
.dm-gsum .l2{background:#fbe3dd;color:#7a2a1c}.dm-gsum .l1{background:#fbf0d2;color:#6b4e0a}.dm-gsum .ok{background:var(--mint);color:var(--green-d)}
.dm-finds{display:grid;gap:8px}
.dm-find{border:1px solid var(--line);border-radius:12px;padding:10px 11px;font:12px/1.45 Inter,sans-serif;color:var(--ink);animation:askin .3s}
.dm-ft{margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px}.dm-ft i{width:7px;height:7px;border-radius:50%;background:#d9a52b}.dm-find.l2 .dm-ft i{background:#c4452c}
.dm-ft small{color:var(--muted);font-size:11px}
.dm-fw,.dm-fd{margin:0 0 4px;color:var(--muted)}.dm-fd b{color:var(--ink)}.dm-fd span{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
.dm-fb{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.dm-fb button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 9px;font:600 11.5px Inter,sans-serif;color:var(--head);cursor:pointer}
.dm-fb button:first-child{background:var(--green);border-color:var(--green);color:#fff}
.dm-allok{margin:0;padding:12px;border-radius:12px;background:var(--mint);color:var(--green-d);font:12.5px/1.5 Inter,sans-serif}

/* Pre-order */
.dm-pbadge{position:absolute;top:8px;left:8px;font:600 11px/1 Inter,sans-serif;padding:5px 8px;border-radius:6px;background:var(--ac);color:#fff}
.dm-pbadge.outline{background:#fff;color:var(--ac);box-shadow:inset 0 0 0 1.5px var(--ac)}.dm-pbadge.soft{background:color-mix(in srgb,var(--ac) 15%,#fff);color:var(--ac)}.dm-pbadge.none{display:none}
.dm-ship{margin:2px 2px 8px;font:12px Inter,sans-serif;color:var(--muted)}
.dm-pay{display:grid;gap:6px}.dm-pay[hidden]{display:none}
.dm-opt{display:flex;align-items:center;gap:8px;width:100%;border:1.5px solid #e2e5df;background:#fff;border-radius:10px;padding:8px 10px;font:12.5px Inter,sans-serif;color:var(--ink);cursor:pointer;text-align:left}
.dm-opt span:nth-child(2){flex:1}.dm-opt.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 6%,#fff)}.dm-opt.on .dm-radio{border:4px solid var(--ac)}
.dm-due{margin-top:8px;border-radius:10px;background:#f6f4ef;padding:8px 10px;font:12px Inter,sans-serif;display:grid;gap:3px}
.dm-due div{display:flex;justify-content:space-between}.dm-due.one div+div{display:none}

/* Sold-out Sorting */
.dm-sold .dm-preview{align-items:flex-start}
.dm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.dm-tile{background:#fff;border-radius:10px;padding:6px 6px 7px;font:11.5px Inter,sans-serif;color:var(--ink);box-shadow:0 4px 12px -8px rgba(31,42,36,.3)}
.dm-tile[hidden]{display:none}
.dm-timg{position:relative;aspect-ratio:1;border-radius:7px;background:#f6f4ef;display:grid;place-items:center}.dm-timg .dm-tee{width:70%}
.dm-so{position:absolute;top:5px;left:5px;font:600 9.5px/1 Inter,sans-serif;background:#1f2a24;color:#fff;padding:3px 6px;border-radius:5px;opacity:0;transition:opacity .2s}
.dm-tile.out .dm-so{opacity:1}.dm-tile.out .dm-tee{opacity:.45}
.dm-tile b{display:block;margin:5px 1px 0;font-weight:600}.dm-tp{color:var(--muted);margin-left:1px}
.dm-sizes{display:flex;gap:4px;margin-top:5px}.dm-sizes button{flex:1;height:22px;border:1px solid var(--line);border-radius:6px;background:#fff;font:600 10.5px Inter,sans-serif;color:var(--head);cursor:pointer}
.dm-sizes button.gone{background:#f1f0ec;color:var(--faint);text-decoration:line-through}

/* Store Locator */
.dm-locp{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px}
.dm-search{display:flex;gap:6px}.dm-search[hidden]{display:none}.dm-search .dm-input{flex:1;height:34px}
.dm-go{border:0;border-radius:8px;padding:0 12px;background:var(--ac,#1f2a24);color:#fff;font:600 12px Inter,sans-serif;cursor:pointer}
.dm-loc .dm-go{background:var(--pin)}
.dm-sugg{display:flex;gap:6px;flex-wrap:wrap}.dm-sugg:empty{display:none}.dm-sugg button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font:12px Inter,sans-serif;cursor:pointer}
.dm-map{--land:#eef1ea;--water:#cfe0ef;--road:#ffffff;position:relative;height:150px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.dm-map[data-look="dark"]{--land:#2a3130;--water:#1b2a35;--road:#3b4442}.dm-map[data-look="minimal"]{--land:#f6f6f4;--water:#e6ebee;--road:#f6f6f4}.dm-map[data-look="pastel"]{--land:#f4ece0;--water:#d8e8f0;--road:#fff7ee}
.dm-map svg{width:100%;height:100%;display:block}.m-land{fill:var(--land)}.m-water{fill:var(--water)}.m-road{stroke:var(--road);stroke-width:3;fill:none}
.dm-pin{position:absolute;width:16px;height:16px;margin:-16px 0 0 -8px;border:0;padding:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pin);cursor:pointer;opacity:.8;transition:transform .2s}
.dm-pin.on{opacity:1;transform:rotate(-45deg) scale(1.35);box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.dm-you{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#2f80ed;box-shadow:0 0 0 4px rgba(47,128,237,.25)}
.dm-list{display:grid;gap:6px}
.dm-store{display:grid;grid-template-columns:1fr auto;gap:1px 8px;text-align:left;width:100%;border:1.5px solid #e6e8e3;background:#fff;border-radius:10px;padding:7px 10px;font:12px Inter,sans-serif;color:var(--ink);cursor:pointer}
.dm-store.on{border-color:var(--pin)}.dm-store b{font-weight:600}.dm-store span,.dm-store em{grid-column:1;color:var(--muted);font-style:normal;font-size:11px}.dm-store em{color:var(--green-d)}
.dm-store u{grid-column:2;grid-row:1/span 3;align-self:center;color:var(--pin);font-weight:600;text-decoration:none}

/* Omnibus */
.dm-salechip{position:absolute;top:8px;left:8px;font:600 11px/1 Inter,sans-serif;padding:5px 8px;border-radius:999px;background:#c4452c;color:#fff}
.dm-oprice{margin:2px 2px 4px;font:14px Inter,sans-serif}.dm-oprice b{font-weight:650;color:#c4452c}.dm-oprice s{color:var(--faint);margin-left:4px}
.dm-low{margin:0 2px 8px;font:11px/1.45 Inter,sans-serif}.dm-low.s-m{font-size:12.5px}
.dm-chart{position:relative;height:66px;background:#f6f4ef;border-radius:8px}.dm-chart svg{width:100%;height:100%;display:block}
.c-line{fill:none;stroke:#7f8a84;stroke-width:1.6;vector-effect:non-scaling-stroke}.c-low{stroke:#3f6b3a;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.c-now{fill:#c4452c}
.c-lab{position:absolute;left:8px;font:600 10px Inter,sans-serif;color:var(--green-d)}
.dm-check{margin:10px 0 0;padding:8px 10px;border-radius:10px;font:12px/1.45 Inter,sans-serif}.dm-check b{display:block}
.dm-check.bad{background:#fbe9e4;color:#7a2a1c}.dm-check.good{background:var(--mint);color:var(--green-d)}

/* Delivery */
.dm-dcart{padding:12px}
.dm-dq{margin:0 0 8px;font:600 14px Inter,sans-serif;color:var(--head)}
.dm-deliv .dm-search{margin-top:8px}
.dm-dres{margin:8px 0 0;padding:7px 10px;border-radius:9px;font:12px/1.4 Inter,sans-serif}.dm-dres.yes{background:var(--mint);color:var(--green-d)}.dm-dres.no{background:#fbe9e4;color:#7a2a1c}
.dm-days,.dm-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px}
.dm-days button,.dm-slots button{border:1.5px solid #e2e5df;background:#fff;border-radius:8px;padding:6px 2px;font:11px Inter,sans-serif;color:var(--ink);cursor:pointer}
.dm-days button.on,.dm-slots button.on{border-color:var(--green);background:var(--green);color:#fff}
.dm-days button:disabled,.dm-slots button:disabled{background:#f4f3ef;color:var(--faint);cursor:default;border-color:#f4f3ef}
.dm-dsum{margin:10px 0 0;font:600 12px Inter,sans-serif;color:var(--green-d);min-height:16px}
.dm-wk{display:flex;gap:4px}.dm-wk button{flex:1;height:28px;border:1px solid var(--line);border-radius:7px;background:#fff;font:600 11px Inter,sans-serif;color:var(--muted);cursor:pointer}
.dm-wk button.on{background:var(--green);border-color:var(--green);color:#fff}
.dm-slotset{display:grid;grid-template-columns:repeat(3,auto);gap:0 10px;justify-content:start}
.dm-seg button:disabled{opacity:.4;cursor:default}
.dm-green .dm-find{animation:none}.dm-fw{margin:0 0 2px;color:var(--muted)}
.dm-green .dm-fb button{padding:4px 8px;font-size:11px}
.feats{overflow-x:clip}

/* ================= v12: more air everywhere, evenly spread settings ================= */
.demo .dm-panel{padding:16px 16px 18px}
.demo .dm-h{margin:18px 2px 10px}.demo .dm-panel>.dm-h:first-child{margin-top:0}
.dm-line,.dm-tline{padding:7px 0}
.dm-std .dm-l,.demo .dm-l{margin:12px 2px 8px}
.dm-colrow2{margin-top:14px}
.dm-seg{gap:3px}
.dm-sw{gap:8px}
/* settings fill their column evenly instead of leaving a gap at the bottom */
.dm-std .dm-right>.dm-panel,.dm-badges .dm-right>.dm-panel{display:flex;flex-direction:column;justify-content:space-between}
.dm-std .dm-right>.dm-panel>*,.dm-badges .dm-right>.dm-panel>*{flex:none}
/* shopper cards: room between every element */
.dm-std .dm-card{padding:12px 12px 14px}
.dm-std .dm-card>*+*{margin-top:10px}
.dm-std .dm-card .dm-title{margin-top:12px}
.dm-cart+.dm-cart{margin-top:8px}
.dm-buy{background:#fff!important;color:var(--head);box-shadow:inset 0 0 0 1.5px #1f2a24}.dm-buy[hidden]{display:none}
.dm-tp2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:nowrap}.dm-tp2>b{font:600 14px Inter,sans-serif;color:var(--ink);white-space:nowrap}
/* Badges: two more tweaks */
.dm-badges .dm-round+.dm-round{margin-top:10px}
/* Personalizer: a bigger shirt, text always inside the print area */
.dm-pers .dm-img{aspect-ratio:1}.dm-pers .dm-tee{width:86%}
.dm-print{width:40%;justify-content:center;max-width:none}.dm-print[hidden]{display:none}
.dm-ptext{text-overflow:clip;overflow:visible}
.dm-pers .dm-card{max-width:320px}
/* Green Claims: products list, link, fix-all */
.dm-gh{display:flex;justify-content:space-between;align-items:center;margin:0;font:13px Inter,sans-serif;color:var(--head)}.dm-gcount{color:var(--muted);font-size:12px}
.dm-plist{display:grid;gap:6px}
.dm-prow{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid #e6e8e3;background:#fff;border-radius:10px;padding:5px 10px 5px 5px;font:12.5px Inter,sans-serif;color:var(--ink);cursor:pointer;text-align:left}
.dm-prow.on{border-color:var(--green)}.dm-prow b{flex:1;font-weight:600}
.dm-pth{width:30px;height:30px;border-radius:7px;background:#f6f4ef;display:grid;place-items:center}.dm-pth .dm-tee{width:80%}
.dm-prow em{font-style:normal;font:600 11px Inter,sans-serif;padding:2px 8px;border-radius:999px}.dm-prow em.l2{background:#fbe3dd;color:#7a2a1c}.dm-prow em.l1{background:#fbf0d2;color:#6b4e0a}.dm-prow em.ok{background:var(--mint);color:var(--green-d)}
.dm-gdesc{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 0;font:600 12px Inter,sans-serif;color:var(--head)}
.dm-elink{font:500 12px Inter,sans-serif;color:var(--green-d);text-decoration:none}.dm-elink:hover{text-decoration:underline}
.dm-gl{gap:10px}.dm-green .dm-text{min-height:70px}
.dm-gtop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.dm-gtop .dm-gsum{margin:0}
.dm-fixall{border:0;border-radius:9px;padding:7px 11px;background:var(--green);color:#fff;font:600 12px Inter,sans-serif;cursor:pointer}
.dm-pro{display:inline-block;margin-left:4px;font:700 10px Inter,sans-serif;color:#7a5410;background:#fdf3de;border-radius:999px;padding:1px 6px}
.dm-gtoast{margin:0;max-height:0;overflow:hidden;opacity:0;transition:all .3s;font:12px Inter,sans-serif;background:var(--mint);color:var(--green-d);border-radius:9px;padding:0 10px}
.dm-gtoast.on{max-height:60px;opacity:1;padding:8px 10px}
.dm-green .dm-right>.dm-panel{justify-content:flex-start;gap:12px}
/* Sold-out: name and price on one line, recent changes */
.dm-tn2{display:flex;justify-content:space-between;gap:4px;margin:6px 1px 0;font:11.5px Inter,sans-serif}.dm-tn2 b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;margin:0}.dm-tn2 span{color:var(--muted);flex:none}
.dm-log{list-style:none;margin:0;padding:0;display:grid;gap:8px}.dm-log li{font:12px/1.35 Inter,sans-serif;color:var(--ink);padding-left:12px;border-left:2px solid var(--line)}.dm-log small{display:block;color:var(--muted);font-size:11px}
/* Store Locator: a real map of Denmark */
.dm-map{height:auto;aspect-ratio:600/676;max-height:260px;--water:#d7e6f1;--land:#f3f1ea;--near:#e8e6df}
.dm-map svg{width:100%;height:100%}
.dm-map .m-water{fill:var(--water)}.dm-map .m-land{fill:var(--land);stroke:#c9c4b5;stroke-width:1}.dm-map .m-near{fill:var(--near)}
.dm-map[data-look="dark"]{--water:#1d2a33;--land:#3a4240;--near:#2c3331}.dm-map[data-look="minimal"]{--water:#eef1f3;--land:#ffffff;--near:#f6f6f6}.dm-map[data-look="pastel"]{--water:#d4e8ef;--land:#f6e9dc;--near:#efe6dc}
.dm-map{aspect-ratio:auto;height:230px}.dm-map svg{position:absolute;inset:0}
.dm-loc .dm-pin{background:var(--ac)}.dm-loc .dm-go{background:var(--ac)}.dm-loc .dm-store.on{border-color:var(--ac)}.dm-loc .dm-store u{color:var(--ac)}
.dm-me{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;font-size:16px;color:var(--ac);cursor:pointer}.dm-me[hidden]{display:none}
.dm-osm{position:absolute;right:6px;bottom:4px;font:9px Inter,sans-serif;color:rgba(0,0,0,.4)}
.dm-credit{margin:0;text-align:center;font:11px Inter,sans-serif;color:var(--faint)}.dm-credit[hidden]{display:none}
/* Omnibus: settings only */
.dm-ocol{flex-direction:column;align-items:center;justify-content:center;gap:14px}
.dm-low.st-box{border:1px solid var(--lc,#66706a);border-radius:8px;padding:6px 8px}
.dm-auto{margin:0 0 4px;padding:9px 11px;border-radius:10px;background:var(--mint);color:var(--green-d)}
.dm-coll{width:100%;max-width:300px}.dm-coll[hidden]{display:none}.dm-coll .dm-l{margin:0 2px 6px}
.dm-ccards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dm-ccard{background:#fff;border-radius:10px;padding:6px;font:11px Inter,sans-serif;display:grid;gap:3px}.dm-ccard>span{aspect-ratio:4/3;background:#f6f4ef;border-radius:7px;display:grid;place-items:center}.dm-ccard .dm-tee{width:55%}
.dm-ccard i{font-style:normal}.dm-ccard i b{color:#c4452c}.dm-ccard s{color:var(--faint)}.dm-clow{font-size:9.5px!important;line-height:1.35}
.dm-std .dm-locp,.dm-std .dm-gl{align-items:stretch;justify-content:flex-start}
.dm-map{background:var(--water)}.dm-mapin{position:relative;height:100%;aspect-ratio:600/676;margin:0 auto}
.dm-mapin svg{position:absolute;inset:0;width:100%;height:100%}.dm-pins{position:absolute;inset:0}
.dm-green .dm-text{min-height:88px}.dm-gdesc{gap:8px}