/*TOKENS*/
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --mist:#F4F7EF; --mist-2:#E6ECDC;
  --tint-a:#DDF3E6; --tint-b:#E9EDCF;
  --ink:#1E2318; --muted:#626A58; --line:#E2E8D8;
  --accent:#5E6B2F; --accent-ink:#FFFFFF; --accent-2:#3F8F6B;
  --orb-1:#CFEFDD; --orb-2:#E4EAC2;
  --font:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11140E; --surface:#181C14; --mist:#1D2219; --mist-2:#262C20; --tint-a:#1C2B23; --tint-b:#252A18;
    --ink:#F2F5EC; --muted:#A6AE9C; --line:#2D3326; --accent:#B5C27A; --accent-ink:#1A1E12; --accent-2:#7FD1A9; --orb-1:#1B2E24; --orb-2:#262B17;
  }
}
:root[data-theme="dark"]{
  --bg:#11140E; --surface:#181C14; --mist:#1D2219; --mist-2:#262C20; --tint-a:#1C2B23; --tint-b:#252A18;
  --ink:#F2F5EC; --muted:#A6AE9C; --line:#2D3326; --accent:#B5C27A; --accent-ink:#1A1E12; --accent-2:#7FD1A9; --orb-1:#1B2E24; --orb-2:#262B17;
}
/*/TOKENS*/
:root{
  --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface));
  --ok:#2B8A57; --warn:#B4541A;
  --r-md:18px; --r-lg:28px; --max:1160px; --gutter:clamp(22px,5.5vw,72px);
  --spring:cubic-bezier(.16,1,.3,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{letter-spacing:-0.035em;line-height:1.04;margin:0;font-weight:600}
h1{font-size:clamp(40px,6.8vw,88px)}
h2{font-size:clamp(30px,3.8vw,48px)}
h3{font-size:clamp(20px,2.1vw,25px);letter-spacing:-0.02em;line-height:1.2}
p{margin:0}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:38em;line-height:1.5}
.muted{color:var(--muted)}
.small{font-size:14px}
section{position:relative}
.pad{padding:clamp(56px,7vw,96px) 0}
.band{background:var(--mist)}
.band-line{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font-weight:500;font-size:16px;text-decoration:none;position:relative;overflow:hidden;transition:transform .5s var(--spring), background-color .4s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--spring)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:var(--accent-soft)}
.btn-quiet{background:var(--mist);color:var(--ink)}
.btn-quiet:hover{background:var(--mist-2)}
.btn-sm{height:40px;padding:0 16px;font-size:14.5px}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 76%,transparent);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-0.04em;text-decoration:none}
.logo-mark{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 210deg,var(--accent),var(--accent-2),var(--accent));position:relative;transition:background .5s}
.logo-mark::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg)}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{text-decoration:none;font-size:14.5px;padding:8px 11px;white-space:nowrap;border-radius:999px;color:var(--muted);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);background:var(--mist)}
.menu-btn{display:none;width:42px;height:42px;border:0;background:transparent;border-radius:50%;cursor:pointer}
.menu-btn span{display:block;width:18px;height:1.6px;background:var(--ink);margin:4px auto}
@media (max-width:1240px){
  .nav-links{position:fixed;top:calc(62px + env(safe-area-inset-top,0px));left:0;right:0;flex-direction:column;align-items:stretch;padding:12px 20px 24px;background:var(--bg);border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s var(--spring)}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{font-size:19px;padding:14px 8px;border-radius:12px}
  .menu-btn{display:block}
  .nav-cta-desk{display:none}
}
main{padding-top:62px}
.page{display:none}
html:not(.js) .page[data-page="home"]{display:block}
.page.show{display:block;animation:pagein .9s var(--spring) both}
@keyframes pagein{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}

/* ===== HERO ===== */
.scrolly{height:360vh}
.sticky{position:sticky;top:calc(62px + env(safe-area-inset-top,0px));height:calc(100vh - 62px);height:calc(100svh - 62px);display:flex;align-items:center;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9;pointer-events:none;will-change:transform}
.orb.o1{width:46vw;height:46vw;max-width:620px;max-height:620px;background:var(--orb-1);right:-8vw;top:-10vh;animation:drift1 22s ease-in-out infinite alternate}
.orb.o2{width:36vw;height:36vw;max-width:480px;max-height:480px;background:var(--orb-2);left:-10vw;bottom:-14vh;animation:drift2 26s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-6vw,8vh) scale(1.08)}}
@keyframes drift2{to{transform:translate(7vw,-6vh) scale(1.12)}}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;width:100%;position:relative}
.hero-q{font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-0.02em;color:var(--muted);margin-bottom:12px}
.line-mask{display:block;overflow:hidden;padding-bottom:.06em}
.line-mask > span{display:block;transform:translateY(105%);transition:transform 1.3s var(--spring)}
.loaded .line-mask > span{transform:none}
.loaded .line-mask.d2 > span{transition-delay:.12s}
.price-big{font-size:clamp(72px,12.5vw,170px);font-weight:600;letter-spacing:-0.06em;line-height:1;display:flex;align-items:flex-start;white-space:nowrap}
.price-big .cur{font-size:.42em;margin-top:.12em;margin-right:.05em;font-weight:500;transition:color .6s}
.price-big .gst{font-size:.16em;font-weight:500;letter-spacing:-0.01em;margin-top:.5em;margin-left:.3em;color:var(--muted);opacity:0;transform:translateY(8px);transition:opacity .6s, transform .8s var(--spring)}
.price-big.landed .gst{opacity:1;transform:none}
.price-big.landed .odo,.price-big.landed .cur{color:var(--accent)}
/* odometer */
.odo{display:inline-flex;height:1em;line-height:1;transition:color .6s;font-variant-numeric:tabular-nums}
.dg{display:inline-block;width:.6em;height:1em;overflow:hidden;position:relative;transition:width .7s var(--spring), opacity .5s}
.dg .col{display:flex;flex-direction:column;transition:transform 1.25s var(--spring)}
.dg:nth-child(2) .col{transition-delay:.05s}.dg:nth-child(4) .col{transition-delay:.1s}.dg:nth-child(5) .col{transition-delay:.15s}.dg:nth-child(6) .col{transition-delay:.2s}
.dg .col span{height:1em;display:block;text-align:center}
.dg.cm{width:.26em}
.dg.cm .col span{text-align:left}
.dg.hide{width:0;opacity:0}
.stage-label{margin-top:22px;height:30px;position:relative;font-size:clamp(17px,1.7vw,21px);font-weight:500}
.stage-label > span{position:absolute;left:0;top:0;opacity:0;transform:translateY(12px);filter:blur(4px);transition:opacity .7s, transform .9s var(--spring), filter .7s}
.stage-label > span.on{opacity:1;transform:none;filter:none}
.struck{color:var(--muted);position:relative}
.struck::after{content:"";position:absolute;left:0;right:0;top:55%;height:2px;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform .9s .3s var(--spring)}
.on > .struck::after{transform:scaleX(1)}
.hero-sub{margin-top:24px;max-width:30em;color:var(--muted);font-size:clamp(16px,1.4vw,19px)}
.hero-actions{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap;opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .8s, transform 1s var(--spring), filter .8s;pointer-events:none}
.hero-actions.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.progress-rail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;height:2px;background:var(--line);border-radius:2px;max-width:var(--max);margin:0 auto}
.progress-rail i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}
.scroll-hint{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);transition:opacity .5s;display:flex;align-items:center;gap:8px}
.scroll-hint i{width:18px;height:28px;border:1.5px solid var(--muted);border-radius:10px;position:relative}
.scroll-hint i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;border-radius:2px;background:var(--muted);transform:translateX(-50%);animation:wheel 1.8s var(--spring) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}

/* 3D exploded stage */
.stage-wrap{perspective:1800px;perspective-origin:50% 40%}
.stage{position:relative;width:100%;aspect-ratio:4/3.1;transform-style:preserve-3d;will-change:transform}
.ly{position:absolute;transform-style:preserve-3d;will-change:transform;border-radius:14px}
.ly-base{inset:0;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.ly-base .bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ly-base .bar i{width:10px;height:10px;border-radius:50%;background:var(--mist-2)}
.ly-base .bar span{margin-left:10px;flex:1;height:24px;border-radius:7px;background:var(--mist);font-size:12px;color:var(--muted);display:flex;align-items:center;padding:0 10px;white-space:nowrap;overflow:hidden}
.ly-nav{top:15%;left:5%;right:5%;height:6%;display:flex;justify-content:space-between;align-items:center;padding:0 3%;background:var(--surface);border:1px solid var(--line)}
.ly-nav b{width:22%;height:34%;border-radius:6px;background:var(--ink)}
.ly-nav span{display:flex;gap:6px;width:36%}.ly-nav span i{flex:1;height:7px;border-radius:4px;background:var(--mist-2)}
.ly-head{top:27%;left:5%;width:56%;height:19%;padding:3%;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:10%}
.ly-head i{display:block;height:28%;border-radius:6px;background:var(--ink)}
.ly-head i:last-child{width:68%}
.ly-text{top:49%;left:5%;width:46%;height:9%;padding:0 3%;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:16%}
.ly-text i{display:block;height:20%;border-radius:4px;background:var(--mist-2)}
.ly-text i:last-child{width:72%}
.ly-btn{top:62%;left:5%;width:22%;height:7.5%;border-radius:999px;background:var(--accent);transition:background .5s}
.ly-img{top:27%;right:5%;width:34%;height:40%;border-radius:18px;background:linear-gradient(150deg,var(--tint-a),var(--tint-b));overflow:hidden}
.ly-img::before{content:"";position:absolute;width:70%;height:70%;border-radius:50%;background:var(--accent-2);opacity:.55;right:-14%;bottom:-16%}
.ly-img::after{content:"";position:absolute;width:38%;height:38%;border-radius:12px;background:var(--surface);left:14%;top:16%;transform:rotate(-8deg);box-shadow:0 10px 20px -10px rgba(0,0,0,.2)}
.ly-cards{top:75%;left:5%;right:5%;height:16%;display:grid;grid-template-columns:repeat(3,1fr);gap:3%}
.ly-cards i{border-radius:12px;background:var(--mist);border:1px solid var(--line)}
.ly-cards i:nth-child(2){background:var(--tint-a)}
.ly-badge{right:-3%;bottom:-5%;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:8px}
.ly-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-2)}
@media (max-width:900px){
  .scrolly{height:300vh}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-visual{order:-1;max-width:400px;width:88%;margin:0 auto}
  .hero-sub{display:none}
  .ly-badge{font-size:11px;padding:7px 11px}
}

/* Reveal: blur and spring */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1.1s var(--spring), transform 1.3s var(--spring)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* Statement */
.statement{font-size:clamp(30px,4.6vw,58px);font-weight:600;letter-spacing:-0.04em;line-height:1.08;max-width:17em}
.statement .w{color:var(--mist-2);transition:color .6s}
.statement .w.lit{color:var(--ink)}

/* Ownership */
.own-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:70px}
.tree{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 18px;font-size:15px;box-shadow:0 40px 80px -60px rgba(30,40,20,.4)}
.tree-head{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.tree-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tree-row:last-child{border-bottom:0}
.tree-row .f{display:flex;align-items:center;gap:10px}
.tree-row .f svg{width:16px;height:16px;color:var(--muted);flex:none}
.tree-row.in1 .f{padding-left:24px}
.owner{font-size:13px;font-weight:500;color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:999px}
.nos{display:grid;gap:28px}
.no-item h3{margin-bottom:6px}

/* Tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
@media (max-width:980px){.tiers{grid-template-columns:1fr!important}}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;display:flex;flex-direction:column}
.tier.feature{background:linear-gradient(170deg,var(--tint-a),var(--surface) 46%);border:1.5px solid color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 40px 80px -50px color-mix(in srgb,var(--accent) 70%,transparent)}
.tier-name{font-size:17px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.tier-tag{font-size:12.5px;font-weight:500;color:var(--accent);background:var(--accent-soft);padding:4px 11px;border-radius:999px}
.tier-price{font-size:64px;font-weight:600;letter-spacing:-0.05em;margin:18px 0 4px;line-height:1}
.tier-price small{font-size:17px;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:4px}
.tier-for{color:var(--muted);margin-bottom:24px}
.ticks{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:11px;flex:1}
.ticks li{position:relative;padding-left:29px;font-size:15.5px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--accent-soft)}
.ticks li::after{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ticks li.x{color:var(--muted)}
.ticks li.x::before{background:var(--mist)}
.ticks li.x::after{background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 9h6' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 9h6' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
@media (max-width:820px){.tiers,.own-grid{grid-template-columns:1fr}.tier{padding:28px}}

/* Quick calc */
.quick{margin-top:22px;background:var(--mist);border-radius:var(--r-lg);padding:32px 36px;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center}
.quick-out{text-align:right}
.quick-out .n{font-size:52px;font-weight:600;letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:820px){.quick{grid-template-columns:1fr;padding:26px}.quick-out{text-align:left}}

/* Range */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,var(--accent) var(--fill,30%),var(--mist-2) var(--fill,30%))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--mist-2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:0;margin-top:-11px;box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.range-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.range-head b{font-size:22px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}

/* Swatch strip */
.swatch-strip{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.sw{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;position:relative;transition:transform .5s var(--spring)}
.sw:hover{transform:scale(1.1)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ink)}

/* Work */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.work{text-decoration:none;display:block;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:transform .7s var(--spring)}
.work:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(30,40,20,.4)}
.work-shot{aspect-ratio:16/10;padding:22px 22px 0;background:var(--c-bg);overflow:hidden}
.work-shot .browser{background:var(--c-page);border-radius:12px 12px 0 0;height:100%;box-shadow:0 20px 40px -24px rgba(0,0,0,.35);overflow:hidden;transition:transform .9s var(--spring)}
.work:hover .work-shot .browser{transform:translateY(-6px) scale(1.015)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 13px;border-bottom:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.025)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.12)}
.browser-url{margin-left:10px;flex:1;height:22px;border-radius:6px;background:rgba(255,255,255,.8);font-size:11.5px;color:#666;display:flex;align-items:center;padding:0 10px;overflow:hidden;white-space:nowrap}
.ws-body{padding:18px}
.ws-nav{display:flex;justify-content:space-between;margin-bottom:22px}
.ws-nav b{display:block;width:70px;height:10px;border-radius:5px;background:var(--c-ink)}
.ws-nav span{display:flex;gap:6px}.ws-nav span i{width:26px;height:6px;border-radius:3px;background:var(--c-ink);opacity:.2}
.ws-title{font-weight:600;font-size:clamp(15px,2vw,22px);letter-spacing:-0.03em;line-height:1.1;color:var(--c-ink);max-width:13em}
.ws-btn{display:inline-block;margin-top:14px;padding:6px 14px;border-radius:999px;font-size:11px;font-weight:500;background:var(--c-acc);color:var(--c-acc-ink)}
.work-meta{padding:22px 26px 26px}
.work-meta h3{margin-bottom:6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--muted)}
.work-meta .url{font-size:14px;color:var(--accent);margin-top:14px;display:inline-block;font-weight:500}
@media (max-width:820px){.work-grid{grid-template-columns:1fr}}

/* Compare */
.compare{margin-top:56px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.compare-scroll{overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;min-width:680px}
.compare th,.compare td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top}
.compare thead th{font-weight:600;font-size:15px;background:var(--mist)}
.compare thead th.us{background:var(--accent);color:var(--accent-ink)}
.compare td.us{background:var(--accent-soft);font-weight:500}
.compare tr:last-child td{border-bottom:0}
.compare .total td{font-size:20px;font-weight:600;letter-spacing:-0.02em}

/* Mini steps (home) */
.ministeps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:56px;counter-reset:s}
.ministep{border-top:2px solid var(--line);padding-top:20px}
.ministep::before{counter-increment:s;content:counter(s);display:block;font-size:38px;font-weight:600;letter-spacing:-0.05em;color:var(--accent);line-height:1;margin-bottom:14px}
.ministep h3{font-size:19px;margin-bottom:6px}
.ministep p{font-size:15px;color:var(--muted)}
@media (max-width:900px){.ministeps{grid-template-columns:1fr 1fr!important}}
@media (max-width:520px){.ministeps{grid-template-columns:1fr!important}}

/* Reasons */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.reason{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.reason .ic{width:44px;height:44px;border-radius:14px;background:var(--tint-a);display:grid;place-items:center;margin-bottom:20px;color:var(--accent)}
.reason h3{font-size:20px;margin-bottom:8px}
@media (max-width:820px){.reasons{grid-template-columns:1fr}}

/* CTA band */
.cta-band{text-align:center;padding:clamp(90px,13vw,170px) 0;overflow:hidden}
.cta-band h2{max-width:13em;margin:0 auto}
.cta-band .lede{margin:22px auto 34px}

/* ===== PRICING ===== */
.page-head{padding:clamp(70px,10vw,120px) 0 44px;position:relative;overflow:hidden}
.page-head .lede{margin-top:20px}
.page-head .orb{opacity:.7}
.page-head .wrap{position:relative}
.calc{display:grid;grid-template-columns:1.25fr .9fr;gap:28px;align-items:start;padding-bottom:100px}
.calc-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.calc-group+.calc-group{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.calc-group h3{font-size:19px;margin-bottom:4px}
.calc-group > p{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);cursor:pointer;transition:border-color .3s, background .3s;margin-bottom:9px;user-select:none}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.opt.on{border-color:var(--accent);background:var(--accent-soft)}
.opt .l{display:flex;flex-direction:column}
.opt .l b{font-weight:500;font-size:15.5px}
.opt .l span{font-size:13.5px;color:var(--muted)}
.opt .r{display:flex;align-items:center;gap:12px;flex:none}
.pill{font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--mist);color:var(--muted);white-space:nowrap}
.pill.studio{background:var(--accent-soft);color:var(--accent)}
.toggle{width:46px;height:28px;border-radius:999px;background:var(--mist-2);position:relative;transition:background .3s;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .5s var(--spring)}
.opt.on .toggle{background:var(--accent)}
.opt.on .toggle::after{transform:translateX(18px)}
.receipt{position:sticky;top:calc(86px + env(safe-area-inset-top,0px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;overflow:hidden;box-shadow:0 40px 80px -60px rgba(30,40,20,.45)}
.r-tier{display:flex;justify-content:space-between;align-items:center}
.r-tier b{font-size:15px;font-weight:600}
.r-total{font-size:clamp(56px,6vw,78px);font-weight:600;letter-spacing:-0.055em;line-height:1;margin:16px 0 4px;display:flex;align-items:baseline}
.r-total small{font-size:17px;letter-spacing:0;font-weight:500;color:var(--muted);margin-left:6px}
.r-lines{margin:22px 0;padding:18px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);display:grid;gap:9px;font-size:14.5px}
.r-lines div{display:flex;justify-content:space-between;gap:12px}
.r-lines div span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.r-save{background:var(--mist);border-radius:16px;padding:18px;margin-bottom:20px}
.save-bars{display:grid;gap:9px;margin-top:12px}
.sbar{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.sbar i{display:block;height:10px;border-radius:6px;background:var(--mist-2);transition:width .9s var(--spring)}
.sbar.us i{background:var(--accent)}
.r-save .big{font-size:24px;font-weight:600;letter-spacing:-0.03em}
.r-note{font-size:12.5px;color:var(--muted);margin-top:14px}
.upgrade-note{font-size:13.5px;color:var(--accent);background:var(--accent-soft);border-radius:12px;padding:10px 14px;margin-top:12px;display:none}
.upgrade-note.on{display:block}
@media (max-width:900px){.calc{grid-template-columns:1fr}.receipt{position:relative;top:0}.calc-panel{padding:22px}}

/* ===== DESIGN LAB ===== */
.lab{display:grid;grid-template-columns:.95fr 1.3fr;gap:28px;align-items:start;padding-bottom:100px}
.lab-controls{display:grid;gap:16px}
.lab-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.lab-card h3{font-size:18px;margin-bottom:6px}
.lab-card > p.small{margin-bottom:16px}
.palettes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pal{border:1px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;background:var(--surface);text-align:left;transition:border-color .2s, transform .5s var(--spring)}
.pal:hover{transform:translateY(-2px)}
.pal[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pal .chips{display:flex;height:34px;border-radius:9px;overflow:hidden;margin-bottom:8px}
.pal .chips i{flex:1}
.pal .chips i:first-child{flex:2}
.pal b{font-weight:500;font-size:14px}
.seg{display:flex;background:var(--mist);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{flex:1;border:0;background:transparent;padding:9px 8px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--muted);min-width:64px;transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.text-in{width:100%;height:46px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--surface)}
.text-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.text-in{height:auto;min-height:80px;padding:12px 14px;resize:vertical}
/* hex inputs */
.hexes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hex{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.hex-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 8px 6px 6px;background:var(--surface);transition:border-color .2s}
.hex-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hex-row.bad{border-color:var(--warn)}
.hex-row .chip{width:32px;height:32px;border-radius:8px;flex:none;border:1px solid rgba(0,0,0,.08)}
.hex-row input{border:0;outline:0;background:transparent;width:100%;font-size:15px;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}
.hex-err{font-size:13px;color:var(--warn);margin-top:10px;min-height:1em}
/* wheel */
.wheel-box{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.wheel{position:relative;width:200px;height:200px;touch-action:none;cursor:crosshair}
.wheel canvas{width:200px;height:200px;border-radius:50%;display:block;box-shadow:0 10px 30px -12px rgba(0,0,0,.3)}
.wheel .knob{position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}
.wheel-side{display:grid;gap:12px}
.wheel-hex{display:flex;align-items:center;gap:10px}
.wheel-hex i{width:42px;height:42px;border-radius:12px;border:1px solid rgba(0,0,0,.08)}
.wheel-hex b{font-size:20px;font-weight:600;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.lgt{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.lgt input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#000,var(--hue-mid,#5E6B2F),#fff)}
.lgt input[type=range]::-moz-range-track{background:linear-gradient(to right,#000,var(--hue-mid,#5E6B2F),#fff)}
.lgt input[type=range]::-moz-range-progress{background:transparent}
.harm{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.harm button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font-size:13px;transition:border-color .2s}
.harm button:hover{border-color:var(--accent)}
.harm button i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
@media (max-width:480px){.wheel-box{grid-template-columns:1fr;justify-items:center}.wheel-side{width:100%}}
.checks{display:grid;gap:8px}
.check{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:10px 12px;background:var(--mist);border-radius:10px}
.badge{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.badge.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
.badge.bad{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn)}
.lab-stage{position:sticky;top:calc(86px + env(safe-area-inset-top,0px))}
.device-toggle{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.preview-wrap{display:flex;justify-content:center}
.preview{--p:#5E6B2F;--s:#CFEFDD;--pb:#FFFFFF;--pi:#1E2318;--pf:var(--font);width:100%;background:var(--pb);color:var(--pi);font-family:var(--pf);border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(20,30,10,.45);transition:width .8s var(--spring), background-color .5s, color .5s}
.preview.phone{width:360px;max-width:100%}
.pv-bar{display:flex;gap:6px;padding:11px 14px;background:rgba(0,0,0,.04);border-bottom:1px solid rgba(0,0,0,.06)}
.pv-bar i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.14)}
.pv-nav{display:flex;justify-content:space-between;align-items:center;padding:18px 26px}
.pv-logo{font-weight:700;font-size:18px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px}
.pv-logo i{width:20px;height:20px;border-radius:6px;background:var(--p);transition:background-color .5s}
.pv-links{display:flex;gap:18px;font-size:13.5px;opacity:.7}
.pv-hero{padding:34px 26px 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.pv-hero h4{font-size:clamp(26px,3.2vw,40px);line-height:1.05;margin:0 0 12px;letter-spacing:-0.03em;font-weight:600}
.pv-hero p{font-size:14.5px;opacity:.75;margin-bottom:18px;max-width:24em}
.pv-btns{display:flex;gap:8px;flex-wrap:wrap}
.pv-b1{background:var(--p);color:var(--pbt,#fff);padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:500;transition:background-color .5s}
.pv-b2{border:1.5px solid var(--p);color:var(--p);padding:9px 17px;border-radius:999px;font-size:13.5px;font-weight:500}
.pv-art{aspect-ratio:1;border-radius:22px;background:var(--s);position:relative;overflow:hidden;transition:background-color .5s}
.pv-art::before{content:"";position:absolute;width:70%;height:70%;border-radius:50%;background:var(--p);right:-18%;bottom:-18%;transition:background-color .5s}
.pv-art::after{content:"";position:absolute;width:34%;height:34%;border-radius:10px;background:var(--pb);left:16%;top:16%;transform:rotate(-8deg)}
.pv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 26px 30px}
.pv-card{background:color-mix(in srgb,var(--pi) 4%,var(--pb));border-radius:14px;padding:16px;font-size:13px}
.pv-card i{display:block;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--p) 18%,var(--pb));margin-bottom:10px}
.pv-card b{display:block;font-size:14px;margin-bottom:3px}
.pv-card span{opacity:.65}
.preview.phone .pv-hero{grid-template-columns:1fr}
.preview.phone .pv-art{max-width:180px}
.preview.phone .pv-cards{grid-template-columns:1fr}
.preview.phone .pv-links{display:none}
.pv-strip{display:flex;height:10px}
.pv-strip i{flex:1;transition:background-color .5s}
.lab-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:14.5px;opacity:0;pointer-events:none;transition:.5s var(--spring);z-index:80}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:980px){.lab{grid-template-columns:1fr}.lab-stage{position:relative;top:0;order:-1}.pv-cards{grid-template-columns:1fr}}

/* ===== HOW IT WORKS ===== */
.journey{display:grid;grid-template-columns:120px 1fr;gap:0 40px;position:relative;padding-bottom:40px}
.j-rail{position:relative}
.j-rail .track{position:sticky;top:calc(120px + env(safe-area-inset-top,0px));height:calc(100vh - 220px);width:2px;background:var(--line);margin-left:67px;border-radius:2px}
.j-rail .track i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent);border-radius:2px}
.j-steps{display:grid;gap:30px}
.j-step{display:grid;grid-template-columns:1fr 1fr;gap:34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;position:relative;transition:border-color .6s}
.j-step.active{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 40px 80px -60px color-mix(in srgb,var(--accent) 80%,transparent)}
.j-num{position:absolute;left:-118px;top:34px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-weight:600;font-size:18px;transition:background .5s, color .5s, border-color .5s}
.j-step.active .j-num,.j-step.past .j-num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.j-when{font-size:13.5px;font-weight:500;color:var(--accent);background:var(--accent-soft);display:inline-block;padding:4px 11px;border-radius:999px;margin-bottom:14px}
.j-step h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.j-cols{display:grid;gap:18px}
.j-cols h4{font-size:14px;font-weight:600;margin:0 0 8px}
.j-cols ul{margin:0;padding:0 0 0 18px;color:var(--muted);font-size:15px;display:grid;gap:5px}
@media (max-width:900px){.journey{grid-template-columns:1fr}.j-rail{display:none}.j-num{position:static;margin-bottom:16px}.j-step{grid-template-columns:1fr;padding:26px;gap:18px}}
.gantt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;margin-top:56px}
.g-row{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;margin-top:18px}
.g-row b{font-size:15px}
.g-bar{display:flex;height:40px;border-radius:12px;overflow:hidden;background:var(--mist)}
.g-bar span{display:flex;align-items:center;padding:0 10px;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--spring)}
.gantt.in .g-bar span{transform:scaleX(1)}
.g-bar span:nth-child(1){background:var(--tint-b)}
.g-bar span:nth-child(2){background:var(--tint-a);transition-delay:.15s}
.g-bar span:nth-child(3){background:color-mix(in srgb,var(--accent-2) 30%,var(--surface));transition-delay:.3s}
.g-bar span:nth-child(4){background:var(--accent);color:var(--accent-ink);transition-delay:.45s}
.g-scale{display:grid;grid-template-columns:110px 1fr;gap:16px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.g-scale div{display:flex;justify-content:space-between}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.box h3{margin-bottom:8px}
.box > p{color:var(--muted);margin-bottom:18px}
.cl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cl li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px}
.cl li::before{content:"";width:20px;height:20px;border-radius:6px;border:1.5px solid var(--accent);margin-top:2px}
.cl li span{color:var(--muted);display:block;font-size:14px}
.promises{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 40px;margin-top:56px}
.promise{padding:28px 0;border-top:2px solid var(--accent)}
.promise h3{font-size:20px;margin-bottom:8px}
@media (max-width:820px){.two-col,.promises{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:820px;padding-bottom:100px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:clamp(18px,1.8vw,21px);font-weight:500;letter-spacing:-0.015em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .5s var(--spring)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:40em}

/* Start */
.start{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start;padding-bottom:100px}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;gap:16px}
.form label{display:grid;gap:7px;font-size:14px;font-weight:500}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .err{color:var(--warn);font-size:13.5px;display:none}
.form .err.on{display:block}
.summary-card{background:var(--mist);border-radius:var(--r-lg);padding:28px;display:grid;gap:16px;position:sticky;top:calc(86px + env(safe-area-inset-top,0px))}
.summary-card .row{display:flex;justify-content:space-between;gap:14px;font-size:15px}
.summary-card .row span:first-child{color:var(--muted)}
.summary-card .btn-quiet{background:var(--surface)}
.summary-card .btn-quiet:hover{background:var(--mist-2)}
.sum-chips{display:flex;height:28px;border-radius:8px;overflow:hidden;width:140px}
.sum-chips i{flex:1}
.done{display:none;text-align:center;padding:40px 10px}
.done.on{display:block}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--accent);margin:0 auto 20px;display:grid;place-items:center;color:var(--accent-ink)}
@media (max-width:900px){.start{grid-template-columns:1fr}.form .two{grid-template-columns:1fr}.form{padding:22px}.summary-card{position:relative;top:0}}

/* Footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px;color:var(--muted)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}
.foot a{text-decoration:none;display:block;padding:4px 0}
.foot a:hover{color:var(--ink)}
.foot h4{color:var(--ink);font-size:14px;margin:0 0 8px;font-weight:600}
.foot-base{margin-top:44px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}
@media (max-width:700px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1/-1}}

/* ===== v3 additions ===== */
.avail{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;padding:6px 13px 6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 24px -14px rgba(0,0,0,.25)}
.avail i{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative;flex:none}
.avail i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:0;animation:ping 2.4s var(--spring) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.hero-avail{margin-bottom:22px}
/* carousel */
.car-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.car-btns{display:flex;gap:8px}
.car-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:border-color .3s,color .3s,transform .5s var(--spring)}
.car-btn:hover{border-color:var(--accent);color:var(--accent)}
.car-btn:active{transform:scale(.94)}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:48px;padding-bottom:8px;scroll-behavior:smooth}
.carousel::-webkit-scrollbar{display:none}
.carousel > *{scroll-snap-align:start}
@media (max-width:900px){.carousel{grid-auto-columns:80%}}
.feat-card .art{aspect-ratio:10/8.4;border-radius:24px;background:var(--surface);overflow:hidden;position:relative;margin-bottom:22px;display:grid;place-items:center}
.feat-card:nth-child(3n+2) .art{background:var(--tint-a)}
.feat-card:nth-child(3n) .art{background:var(--tint-b)}
.feat-card h3{margin-bottom:8px}
.feat-card p{color:var(--muted)}
.inc{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.inc.add{background:var(--mist);color:var(--muted)}
/* mini mocks */
.mk{width:76%;background:var(--surface);border-radius:14px;box-shadow:0 24px 44px -26px rgba(0,0,0,.35);padding:16px;display:grid;gap:8px;font-size:12px;color:var(--ink);transition:transform .9s var(--spring)}
.feat-card:hover .mk,.feat-card:hover .mk-grid,.feat-card:hover .mk-phone{transform:translateY(-6px) rotate(-1deg)}
.mk b{font-size:13px}
.mk-l{display:block;height:7px;border-radius:4px;background:var(--mist-2)}
.mk-l.s{width:58%}.mk-l.a{background:color-mix(in srgb,var(--accent) 50%,var(--surface))}
.mk-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:78%;transition:transform .9s var(--spring)}
.mk-grid i{aspect-ratio:1.25;border-radius:10px;position:relative;box-shadow:0 10px 20px -14px rgba(0,0,0,.4)}
.mk-grid em{position:absolute;left:7px;bottom:6px;font-style:normal;font-size:10.5px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.mk-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12px;color:var(--muted)}
.mk-search b{color:var(--accent-2);font-size:14px}
.mk-res{display:grid;gap:5px;padding:7px;border-radius:9px}
.mk-res.hl{background:var(--accent-soft);outline:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.mk-stars{color:#E8A317;letter-spacing:2px;font-size:15px}
.mk-who{display:flex;align-items:center;gap:8px;color:var(--muted);margin-top:4px}
.mk-who span{width:22px;height:22px;border-radius:50%;background:var(--tint-a)}
.mk-tool{display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px}
.mk-tool span{font-size:11px;padding:2px 6px;border-radius:5px;background:var(--mist);color:var(--muted)}
.mk-tool .sv{background:var(--accent);color:var(--accent-ink)}
.mk-edit{font-size:18px;font-weight:600;letter-spacing:-0.02em;display:flex;align-items:center}
.caret{width:2px;height:20px;background:var(--accent);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mk-phone{width:42%;aspect-ratio:9/17;border-radius:26px;background:var(--surface);border:6px solid var(--ink);box-shadow:0 30px 50px -30px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:14px 10px 22px;gap:8px;transition:transform .9s var(--spring)}
.mk-call{width:52px;height:52px;border-radius:50%;background:var(--accent-2);display:grid;place-items:center;color:#fff;animation:ring 2.4s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 50%,transparent)}50%{box-shadow:0 0 0 12px transparent}}
.mk-phone small{font-size:11px;font-weight:600}
.mk-field{border:1px solid var(--line);border-radius:8px;padding:7px 9px;color:var(--muted);font-size:11px}
.mk-drop{border:1.5px dashed color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:9px;padding:12px;text-align:center;color:var(--accent);font-size:11px;font-weight:500}
.mk-btn{justify-self:start;background:var(--accent);color:var(--accent-ink);padding:5px 14px;border-radius:999px;font-size:11px;font-weight:500}
.mk-bars{display:flex;align-items:flex-end;gap:5px;height:70px}
.mk-bars i{flex:1;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--accent-2) 55%,var(--surface))}
.mk-bars i:last-child{background:var(--accent)}
.mk-stats{display:flex;justify-content:space-between;color:var(--muted);font-size:10.5px}
.mk-stats b{display:block;color:var(--ink);font-size:15px}
.mk-card{transform:rotate(-4deg);padding:20px}
.mk-card small{color:var(--muted)}
.mk-mail{margin-top:10px;font-size:12.5px;font-weight:500;color:var(--accent)}
.mk-acc{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0;font-weight:500}
.mk-motion{height:150px;align-content:center}
.mk-motion i{display:block;height:16px;border-radius:6px;background:var(--mist-2);animation:slidein 2.8s var(--spring) infinite}
.mk-motion i:nth-child(1){width:80%;background:var(--ink)}
.mk-motion i:nth-child(2){width:60%;animation-delay:.12s}
.mk-motion i:nth-child(3){width:34%;height:24px;border-radius:999px;background:var(--accent);animation-delay:.24s}
@keyframes slidein{0%{opacity:0;transform:translateY(16px)}25%,80%{opacity:1;transform:none}100%{opacity:0}}
/* guarantee */
.guarantee{overflow:hidden}
.g-in{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center}
.seal{width:220px;height:220px;position:relative;display:grid;place-items:center}
.seal svg{position:absolute;inset:0;animation:spin 28s linear infinite}
.seal-core{width:120px;height:120px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;text-align:center;font-weight:600;font-size:15px;line-height:1.2;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--accent) 80%,transparent)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.g-in{grid-template-columns:1fr;gap:30px}.seal{width:170px;height:170px}.seal-core{width:96px;height:96px;font-size:13px}}
/* work v3 */
.work{text-decoration:none}
.work-shot{border:0;width:100%;display:block;cursor:zoom-in;text-align:left;font:inherit;color:inherit}
.work-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
/* modal */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadein .4s ease both}
.modal-in{position:relative;display:grid;justify-items:center;gap:16px;animation:popin .7s var(--spring) both;max-height:100%}
@keyframes fadein{from{opacity:0}}
@keyframes popin{from{opacity:0;transform:translateY(30px) scale(.94)}}
.pm-head{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 10px 30px -14px rgba(0,0,0,.3)}
.pm-head .car-btn{width:38px;height:38px}
.phone{width:300px;max-width:78vw;height:min(600px,68vh);border-radius:46px;background:#0E0F0C;padding:12px;box-shadow:0 50px 90px -40px rgba(0,0,0,.6);position:relative}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:14px;background:#0E0F0C;z-index:2}
.phone-screen{width:100%;height:100%;border-radius:36px;overflow-y:auto;background:var(--c-page,#fff);color:var(--c-ink,#111);scrollbar-width:none;font-family:var(--font)}
.phone-screen::-webkit-scrollbar{display:none}
.pms-nav{display:flex;justify-content:space-between;align-items:center;padding:52px 18px 14px;font-weight:700;font-size:14px;letter-spacing:-0.02em}
.pms-nav span{display:grid;gap:4px}.pms-nav span i{display:block;width:18px;height:2px;background:currentColor}
.pms-hero{padding:22px 18px 26px}
.pms-hero h5{font-size:26px;line-height:1.05;letter-spacing:-0.03em;margin:0 0 10px}
.pms-hero p{font-size:13px;opacity:.7;margin-bottom:16px}
.pms-btn{display:inline-block;background:var(--c-acc);color:var(--c-acc-ink);padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:600}
.pms-img{height:170px;margin:0 18px;border-radius:18px;background:linear-gradient(140deg,var(--c-bg),var(--c-acc))}
.pms-sec{padding:22px 18px;display:grid;gap:10px}
.pms-sec h6{font-size:16px;margin:0;letter-spacing:-0.02em}
.pms-card{border-radius:14px;padding:14px;background:color-mix(in srgb,var(--c-ink) 5%,var(--c-page));font-size:12.5px}
.pms-card b{display:block;margin-bottom:3px}
.pms-quote{margin:4px 18px 0;padding:18px;border-radius:16px;background:var(--c-bg);font-size:13px}
.pms-cta{margin:22px 18px;padding:22px;border-radius:18px;background:var(--c-acc);color:var(--c-acc-ink)}
.pms-cta b{font-size:18px;display:block;margin-bottom:6px}
.pms-foot{padding:20px 18px 40px;font-size:11px;opacity:.6}
/* before after */
.ba{position:relative;aspect-ratio:16/8.6;border-radius:28px;overflow:hidden;border:1px solid var(--line);margin-top:48px;box-shadow:0 50px 90px -60px rgba(0,0,0,.45);--pos:50%;user-select:none}
.ba-old,.ba-new{position:absolute;inset:0}
.ba-new{clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 12px rgba(0,0,0,.25);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:50px;height:50px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none;color:#333}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-range:focus-visible + .ba-knob{outline:3px solid var(--accent);outline-offset:3px}
.ba-tag{position:absolute;top:16px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:#222;pointer-events:none}
.ba-tag.l{left:16px}.ba-tag.r{right:16px;background:var(--accent);color:var(--accent-ink)}
.old{background:#E9E9E9;font-family:'Times New Roman',Times,serif;color:#333;height:100%;display:flex;flex-direction:column}
.old-ad{background:#FFF59D;color:#5d5200;font-family:Arial,sans-serif;font-size:clamp(9px,1.1vw,12px);padding:5px 12px;text-align:center}
.old-nav{background:#2E4F8A;color:#fff;display:flex;gap:16px;padding:10px 16px;font-size:clamp(10px,1.2vw,14px);text-decoration:underline}
.old-hero{margin:14px;background:repeating-linear-gradient(45deg,#cfcfcf 0 10px,#d8d8d8 10px 20px);flex:1;display:grid;place-items:center;text-align:center;padding:10px}
.old-hero h5{font-size:clamp(16px,2.6vw,32px);margin:0;color:#B00020;font-style:italic}
.old-hero p{font-size:clamp(10px,1.2vw,14px);margin:6px 0 0}
.old-foot{font-family:Arial,sans-serif;font-size:clamp(8px,1vw,11px);color:#777;padding:8px 14px;text-align:center}
.new{background:var(--bg);height:100%;display:grid;grid-template-rows:auto 1fr;font-family:var(--font)}
.new-nav{display:flex;justify-content:space-between;align-items:center;padding:clamp(10px,2vw,22px) clamp(14px,3vw,36px);font-weight:700;letter-spacing:-0.03em;font-size:clamp(12px,1.5vw,18px)}
.new-nav span{display:flex;gap:clamp(8px,1.6vw,22px);font-weight:400;font-size:clamp(10px,1.1vw,14px);color:var(--muted)}
.new-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:4%;align-items:center;padding:0 clamp(14px,3vw,36px) 4%}
.new-hero h5{font-size:clamp(22px,4.4vw,58px);line-height:1;letter-spacing:-0.045em;margin:0 0 3%;font-weight:600}
.new-hero p{font-size:clamp(10px,1.3vw,16px);color:var(--muted);margin-bottom:5%}
.new-btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:clamp(6px,1vw,12px) clamp(12px,1.8vw,22px);border-radius:999px;font-size:clamp(10px,1.2vw,15px);font-weight:500}
.new-img{aspect-ratio:1;border-radius:clamp(14px,2.4vw,30px);background:linear-gradient(150deg,var(--tint-a),var(--tint-b));position:relative;overflow:hidden}
.new-img::before{content:"";position:absolute;width:64%;height:64%;border-radius:50%;background:var(--accent-2);opacity:.6;right:-12%;bottom:-12%}
.new-img::after{content:"Same-day callouts";position:absolute;left:10%;top:12%;background:var(--surface);border-radius:12px;padding:6% 8%;font-size:clamp(9px,1.1vw,13px);font-weight:600;box-shadow:0 12px 24px -12px rgba(0,0,0,.3)}
@media (max-width:640px){.ba{aspect-ratio:3/4}.new-hero{grid-template-columns:1fr}.new-img{width:60%}}
/* reviews */
.rev{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:18px}
.rev .stars{color:#E8A317;letter-spacing:3px;font-size:18px}
.rev blockquote{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.45;letter-spacing:-0.01em;flex:1}
.rev .who{display:flex;align-items:center;gap:12px;font-size:14.5px}
.rev .who i{width:40px;height:40px;border-radius:50%;background:var(--tint-a);display:grid;place-items:center;font-style:normal;font-weight:600;color:var(--accent)}
.rev .who span{color:var(--muted);display:block;font-size:13.5px}
.ph-tag{font-size:11.5px;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface));padding:2px 8px;border-radius:999px;align-self:flex-start}
/* team */
.team{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.mate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.mate .av{width:96px;height:96px;border-radius:50%;background:linear-gradient(150deg,var(--tint-a),var(--tint-b));display:grid;place-items:center;font-size:30px;font-weight:600;color:var(--accent);letter-spacing:-0.03em}
.mate h3{margin-bottom:4px}
.mate .role{color:var(--accent);font-size:14.5px;font-weight:500;margin-bottom:10px}
@media (max-width:820px){.team{grid-template-columns:1fr}.mate{grid-template-columns:1fr}}
/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.ind{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .7s var(--spring),border-color .3s}
.ind:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.ind .em{font-size:30px;line-height:1;margin-bottom:18px;display:block}
.ind h3{font-size:20px;margin-bottom:6px}
.ind p{color:var(--muted);font-size:15px}
.ind .go{display:inline-block;margin-top:14px;color:var(--accent);font-weight:500;font-size:14.5px}
@media (max-width:900px){.ind-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ind-grid{grid-template-columns:1fr}}
.needs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.need{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px}
.need b{display:block;font-size:18px;letter-spacing:-0.015em;margin-bottom:6px}
.need p{color:var(--muted);font-size:15px}
@media (max-width:820px){.needs{grid-template-columns:1fr}}
.sitemap{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sitemap span{padding:8px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14.5px}
.preset-box{margin-top:30px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
/* extras groups */
.xgroup + .xgroup{margin-top:18px}
.xgroup h4{font-size:13.5px;font-weight:600;color:var(--muted);margin:0 0 10px}
.opt.locked{cursor:default}
.opt.locked .toggle{opacity:.55}
/* receipt v3 */
.r-avail{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:12px}
.r-avail i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.deposit{display:flex;justify-content:space-between;align-items:center;background:var(--accent-soft);border-radius:14px;padding:12px 16px;margin-top:18px;font-size:14.5px}
.deposit b{font-size:18px;letter-spacing:-0.02em}
.r-share{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
/* plans */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:50px;max-width:900px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:30px;display:flex;flex-direction:column}
.plan.hl{border:1.5px solid var(--accent);background:linear-gradient(170deg,var(--tint-a),var(--surface) 50%)}
.plan h3{font-size:20px;display:flex;justify-content:space-between;align-items:center}
.plan .pp{font-size:46px;font-weight:600;letter-spacing:-0.05em;margin:4px 0 4px;line-height:1}
.plan .pp small{font-size:15px;letter-spacing:0;color:var(--muted);font-weight:500;margin-left:4px}
.plan > p{color:var(--muted);font-size:15px;margin-bottom:18px;min-height:4.4em}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
/* motion picker preview */
.preview.play .pv-hero h4,.preview.play .pv-hero p,.preview.play .pv-btns,.preview.play .pv-card{animation:var(--m-text) var(--m-dur) var(--spring) both}
.preview.play .pv-art{animation:var(--m-art) var(--m-dur) var(--spring) both}
.preview.play .pv-hero p{animation-delay:calc(var(--m-stag) * 1)}
.preview.play .pv-btns{animation-delay:calc(var(--m-stag) * 2)}
.preview.play .pv-art{animation-delay:calc(var(--m-stag) * 1.5)}
.preview.play .pv-card:nth-child(1){animation-delay:calc(var(--m-stag) * 3)}
.preview.play .pv-card:nth-child(2){animation-delay:calc(var(--m-stag) * 3.6)}
.preview.play .pv-card:nth-child(3){animation-delay:calc(var(--m-stag) * 4.2)}
@keyframes mFade{from{opacity:0}}
@keyframes mRise{from{opacity:0;transform:translateY(26px)}}
@keyframes mRiseFar{from{opacity:0;transform:translateY(70px)}}
@keyframes mDrop{from{opacity:0;transform:translateY(-60px) scale(1.12)}}
@keyframes mCine{from{opacity:0;transform:translateY(40px) scale(.96);filter:blur(12px)}}
@keyframes mCineArt{from{opacity:0;transform:perspective(700px) rotateY(-40deg) rotateX(12deg) scale(.8);filter:blur(8px)}}
@keyframes mSoftArt{from{opacity:0;transform:scale(.97)}}
.motion-desc{font-size:14px;color:var(--muted);margin-top:12px;min-height:2.6em}
/* print */
#printQuote{display:none}
@media print{
  body *{visibility:hidden}
  #printQuote,#printQuote *{visibility:visible}
  #printQuote{display:block;position:absolute;left:0;top:0;width:100%;padding:30px;color:#111;font-family:var(--font)}
  #printQuote h1{font-size:30px;margin-bottom:6px}
  #printQuote table{width:100%;border-collapse:collapse;margin:20px 0}
  #printQuote td{padding:8px 0;border-bottom:1px solid #ddd}
  #printQuote .tot td{font-weight:700;font-size:18px}
  #printQuote .chips{display:flex;gap:6px}#printQuote .chips i{width:40px;height:24px;border-radius:5px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ===== v4 additions ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 22px 20px;position:relative}
.stat .lbl{font-size:12.5px;font-weight:500;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.stat .val{font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-0.045em;line-height:1;margin:14px 0 6px;font-variant-numeric:tabular-nums}
.stat .val small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:4px}
.stat .sub{font-size:13px;color:var(--muted)}
.stat .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stat .ph-tag{position:absolute;right:14px;bottom:14px}
.stats-band{padding:34px 0 10px}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}}
.ba-badges{position:absolute;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;z-index:2}
.ba-badges.r{right:16px;top:56px;justify-content:flex-end}
.ba-badges.l{left:16px;bottom:16px}
.ba-badges span{font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:#222;box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.ba-badges.l span{background:#FDECEC;color:#A12A2A}
.ba-badges .g::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px}
.reb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.reb{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
.reb h3{font-size:19px;margin-bottom:6px;color:var(--accent)}
.reb p{font-size:14.5px;color:var(--muted)}
@media (max-width:820px){.reb-cards{grid-template-columns:1fr}}
/* bloat vs edge */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:50px;align-items:start}
.vs-card{border-radius:28px;padding:32px;position:relative;overflow:hidden}
.vs-card.bad{background:var(--mist)}
.vs-card.good{background:var(--surface);border:1px solid var(--line);box-shadow:0 50px 90px -60px rgba(15,30,50,.5)}
.vs-card.good::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:var(--tint-a)}
.vs-tag{display:inline-block;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px}
.bad .vs-tag{background:#FDECEC;color:#A12A2A}
.good .vs-tag{background:var(--tint-a);color:var(--accent);position:relative;z-index:1}
.vs-card h3{font-size:24px;margin:14px 0 22px;position:relative;z-index:1}
.vs-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px 16px 48px;position:relative;margin-bottom:10px}
.good .vs-item{background:var(--mist)}
.vs-item b{display:block;font-size:16px;letter-spacing:-0.01em;margin-bottom:3px}
.vs-item span{display:block;font-size:14px;line-height:1.45;color:var(--muted)}
.vs-item::before{content:"";position:absolute;left:18px;top:19px;width:18px;height:18px;border-radius:50%}
.bad .vs-item::before{background:#FDECEC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='%23C0392B' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.good .vs-item::before{background:var(--tint-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='%232B8A57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.vs-foot{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-top:18px;color:var(--muted)}
.vs-foot b{font-weight:600}
.bad .vs-foot b{color:#A12A2A}.good .vs-foot b{color:var(--ok)}
@media (max-width:860px){.vs{grid-template-columns:1fr}}
/* ten days */
.days{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:28px}
.days-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.days-head b{font-size:19px;letter-spacing:-0.02em}
.days-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.day{border-radius:14px;background:var(--mist);padding:12px 10px 14px;min-height:118px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(14px);transition:opacity .7s var(--spring),transform .9s var(--spring)}
.days.in .day{opacity:1;transform:none}
.day span{font-size:11.5px;color:var(--muted);font-weight:500}
.day b{font-size:14px;letter-spacing:-0.01em;line-height:1.2}
.day i{font-style:normal;font-size:11.5px;line-height:1.3;margin-top:auto}
.day.you{background:var(--accent);color:var(--accent-ink)}
.day.you span{color:inherit;opacity:.8}
.day.live{background:var(--tint-a)}
.days-legend{display:flex;gap:18px;margin-top:16px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.days-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:7px;vertical-align:-1px}
@media (max-width:900px){.days-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:520px){.days-grid{grid-template-columns:1fr 1fr}.day{min-height:auto}}
.need-you{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--accent);color:var(--accent-ink);margin-left:6px}
/* onboarding */
.onb{display:grid;grid-template-columns:1fr 280px;gap:22px;margin-top:50px;align-items:start}
.onb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.onb-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px}
.onb-card .n{font-size:13px;font-weight:600;color:var(--accent)}
.onb-card h3{font-size:19px;margin:10px 0 8px}
.onb-card > p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.onb-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:transparent;padding:7px 0;cursor:pointer;font-size:14.5px;line-height:1.35}
.onb-item i{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);margin-top:1px;display:grid;place-items:center;transition:background .3s,border-color .3s}
.onb-item[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}
.onb-item[aria-pressed="true"] i::after{content:"";width:9px;height:5px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg) translate(1px,-1px)}
.onb-meter{position:sticky;top:calc(90px + env(safe-area-inset-top,0px));background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px;text-align:center}
.ring{width:150px;height:150px;margin:6px auto 14px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .bg{stroke:var(--mist-2)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s var(--spring)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:600;letter-spacing:-0.04em}
.onb-meter p{font-size:14px;color:var(--muted)}
@media (max-width:1000px){.onb{grid-template-columns:1fr}.onb-meter{position:relative;top:0}}
@media (max-width:820px){.onb-cards{grid-template-columns:1fr}}
.ind-note{margin-top:22px;font-size:15px;color:var(--muted)}
.ind-note a{color:var(--accent);font-weight:500}
/* ===== v5 rebuild slider ===== */
.ba{aspect-ratio:16/10.4}
.ba-old,.ba-new{overflow:hidden}
.old{background:#ECECEC;font-family:'Times New Roman',Times,serif;color:#333;height:100%;display:flex;flex-direction:column;font-size:clamp(8px,1vw,13px)}
.old-ad{background:#FFF59D;color:#5d5200;font-family:Arial,sans-serif;font-size:.9em;padding:.4em 1em;text-align:center}
.old-head{display:flex;justify-content:space-between;align-items:center;padding:.8em 1.2em;background:#fff;border-bottom:3px double #999}
.old-head b{display:block;font-size:2em;color:#B00020;letter-spacing:.04em}
.old-head em{font-size:1em;color:#555}
.old-phone{font-family:Arial,sans-serif;font-weight:bold;color:#fff;background:#D32F2F;padding:.5em .9em;border:2px outset #f66}
.old-nav{background:#2E4F8A;color:#fff;display:flex;gap:1.4em;padding:.6em 1.2em;text-decoration:underline;font-size:1.05em}
.old-offer{background:#000;color:#FFEB3B;font-family:'Courier New',monospace;font-weight:bold;text-align:center;padding:.35em;animation:oldblink 1.1s steps(1) infinite}
@keyframes oldblink{50%{color:#F44336}}
.old-body{flex:1;display:grid;grid-template-columns:22% 1fr;gap:1em;padding:1em 1.2em;min-height:0}
.old-box{background:#fff;border:1px solid #aaa;padding:.6em;margin-bottom:.8em;display:flex;flex-direction:column;gap:.3em}
.old-box b{background:#2E4F8A;color:#fff;margin:-.6em -.6em .3em;padding:.3em .6em;font-family:Arial,sans-serif;font-size:.9em}
.old-box u{color:#1a0dab}
.old-counter{font-family:'Courier New',monospace;background:#000;color:#0f0;padding:.2em .4em;align-self:flex-start;letter-spacing:.15em}
.old-main{background:#fff;border:1px solid #aaa;padding:1em;overflow:hidden}
.old-main h5{font-size:2.2em;margin:0 0 .3em;color:#B00020;font-style:italic;text-align:center}
.old-main > p{margin:0 0 .8em;text-align:center}
.old-img{height:28%;min-height:40px;background:repeating-linear-gradient(45deg,#cfcfcf 0 10px,#dadada 10px 20px);display:grid;place-items:center;color:#888;font-family:Arial,sans-serif;font-weight:bold;margin-bottom:.8em;border:1px dashed #999}
.old-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.old-cols p{margin:0;font-size:.95em}
.old-cols b{display:block;color:#2E4F8A;text-decoration:underline}
.old-foot{font-family:Arial,sans-serif;font-size:.85em;color:#777;padding:.5em 1.2em;text-align:center;background:#ddd}
.new2{background:var(--bg);height:100%;display:flex;flex-direction:column;font-family:var(--font);font-size:clamp(8px,1vw,14px);color:var(--ink)}
.n2-nav{display:flex;justify-content:space-between;align-items:center;padding:1.6em 3em;gap:1em}
.n2-nav b{font-size:1.35em;letter-spacing:-0.03em;display:flex;align-items:center;gap:.5em}
.n2-nav b i{width:1em;height:1em;border-radius:50%;background:var(--accent)}
.n2-nav > span:not(.n2-btn){display:flex;gap:2em;color:var(--muted);margin-left:auto;margin-right:1.6em}
.n2-nav em{font-style:normal}
.n2-btn{background:var(--accent);color:var(--accent-ink);padding:.7em 1.4em;border-radius:999px;font-weight:500;white-space:nowrap}
.n2-hero{flex:1;display:grid;grid-template-columns:1.05fr .95fr;gap:3em;align-items:center;padding:0 3em;min-height:0}
.n2-pill{display:inline-block;font-size:.9em;padding:.35em .9em;border-radius:999px;background:var(--accent-soft);color:var(--accent);margin-bottom:1em}
.n2-copy h5{font-size:3.6em;line-height:1;letter-spacing:-0.045em;margin:0 0 .35em;font-weight:600}
.n2-copy p{color:var(--muted);font-size:1.15em;margin:0 0 1.4em;max-width:26em}
.n2-btns{display:flex;gap:.6em;flex-wrap:wrap}
.n2-ghost{border:1.5px solid var(--line);padding:.65em 1.3em;border-radius:999px;font-weight:500}
.n2-img{height:86%;border-radius:1.6em;background:linear-gradient(150deg,var(--tint-a),var(--tint-b));position:relative;overflow:hidden}
.n2-img::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:var(--accent-2);opacity:.55;right:-12%;bottom:-14%}
.n2-img::after{content:"";position:absolute;width:30%;aspect-ratio:1;border-radius:1em;background:var(--surface);opacity:.8;left:14%;bottom:16%;transform:rotate(-8deg)}
.n2-float{position:absolute;left:10%;top:12%;background:var(--surface);border-radius:.9em;padding:.8em 1.1em;font-weight:600;box-shadow:0 12px 24px -12px rgba(0,0,0,.3);z-index:1}
.n2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em;padding:1.6em 3em 2.2em}
.n2-cards div{background:var(--mist);border-radius:1.1em;padding:1.1em 1.2em;display:grid;gap:.25em}
.n2-cards i{width:1.8em;height:1.8em;border-radius:.6em;background:var(--accent-soft);margin-bottom:.4em}
.n2-cards b{font-size:1.1em}
.n2-cards span{color:var(--muted);font-size:.95em}
.ba-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:44px}
.ba-cap > div{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ba-cap b{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px}
.ba-cap b.bad{background:#FDECEC;color:#A12A2A}
.ba-cap b.good{background:var(--accent);color:var(--accent-ink)}
.ba-cap span{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--mist);color:var(--muted)}
.ba-cap + .ba{margin-top:14px}
.old-img{height:38%!important}
.ba-hint{position:absolute;top:50%;left:var(--pos);transform:translate(-120%,-50%);background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;padding:7px 12px;border-radius:999px;pointer-events:none;white-space:nowrap;transition:opacity .5s}
.ba-hint.off{opacity:0}
.ba-badges.l{bottom:40px}
@media (max-width:700px){
  .ba{aspect-ratio:3/4.4}
  .old,.new2{font-size:9px}
  .old-body{grid-template-columns:1fr}.old-side{display:none}
  .n2-nav > span:not(.n2-btn){display:none}
  .n2-hero{grid-template-columns:1fr;gap:1.4em;padding:0 1.6em}
  .n2-img{height:140px}
  .n2-cards{grid-template-columns:1fr;padding:1.2em 1.6em}
  .n2-nav{padding:1.4em 1.6em}
  .ba-badges{display:none}
}
/* ===== v6: total control ===== */
.tc-badge{display:inline-block;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.tc{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:48px;align-items:stretch}
.tc-dash{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -60px rgba(0,0,0,.45)}
.tc-top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.tc-top b{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15px}
.tc-top b i{width:14px;height:14px;border-radius:4px;background:var(--accent)}
.tc-body{display:grid;grid-template-columns:150px 1fr}
.tc-side{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.tc-side span{font-size:14px;padding:8px 10px;border-radius:9px;color:var(--muted)}
.tc-side span.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.tc-form{padding:20px;display:grid;gap:14px}
.tc-form label,.tc-lbl{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.tc-form textarea{min-height:70px}
.tc-photos{display:flex;gap:8px;margin-top:-6px}
.tc-photos button{width:58px;height:44px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:transform .4s var(--spring)}
.tc-photos button:hover{transform:translateY(-2px)}
.tc-photos button[aria-pressed="true"]{border-color:var(--ink)}
.tc-photos [data-ph="0"]{background:linear-gradient(150deg,var(--tint-a),var(--accent-2))}
.tc-photos [data-ph="1"]{background:linear-gradient(150deg,#F3E3C8,#C98A4B)}
.tc-photos [data-ph="2"]{background:linear-gradient(150deg,#DCE6F2,#4F6D8F)}
.tc-photos [data-ph="3"]{background:linear-gradient(150deg,var(--tint-b),var(--accent))}
.tc-pub{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tc-pub .ok{color:var(--ok);font-weight:500}
.tc-site{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.tc-pv{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.tc-pv-img{height:170px;border-radius:16px;background:linear-gradient(150deg,var(--tint-a),var(--accent-2));transition:background .6s}
.tc-pv-price{align-self:flex-start;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.tc-pv h5{font-size:clamp(22px,2.3vw,30px);line-height:1.05;letter-spacing:-0.035em;margin:0;font-weight:600}
.tc-pv p{color:var(--muted);font-size:15px}
.tc-pv .flash{animation:tcflash .8s ease}
@keyframes tcflash{0%{background:color-mix(in srgb,var(--accent) 22%,transparent)}100%{background:transparent}}
.tc-points{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.tc-points h3{font-size:19px;margin-bottom:6px}
@media (max-width:900px){.tc{grid-template-columns:1fr}.tc-body{grid-template-columns:1fr}.tc-side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.tc-side span{white-space:nowrap}.tc-points{grid-template-columns:1fr}}
/* stripe products */
.prod-box{display:none;margin-top:10px;background:var(--mist);border-radius:14px;padding:14px 16px}
.prod-box.on{display:block}
/* zero-lock hosting plans */
.plans{grid-template-columns:repeat(3,1fr)!important;max-width:none!important}
.plan{position:relative}
.plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.plan-tag{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);letter-spacing:.02em}
.plan.hl .plan-tag{background:var(--accent);color:var(--accent-ink)}
.plan-note{font-size:12.5px;font-weight:500;color:var(--accent)}
.plan.free .plan-note{color:var(--ok)}
.plan h3{font-size:20px;margin-bottom:8px}
.plan .btn[aria-disabled="true"]{pointer-events:none;opacity:.85}
.plan .ticks{align-content:start}
.tc-pv .n2-btn{align-self:flex-start}
.plans-foot{margin-top:18px;font-size:14px;color:var(--muted)}
@media (max-width:900px){.plans{grid-template-columns:1fr!important}}
.iso .iso-plate{left:6%;right:6%;top:14%;bottom:8%;border-radius:28px;background:linear-gradient(145deg,#3A4420,#232912);box-shadow:none}
.iso-card{width:34%;height:40%;border-radius:18px;background:var(--surface);border:1px solid var(--line);padding:5% 5%;display:flex;flex-direction:column;gap:4%;font-size:clamp(10px,1.1vw,14px)}
.iso-card .ic{width:22%;aspect-ratio:1;border-radius:8px;background:var(--tint-a)}
.iso-card b{font-weight:600;color:var(--ink)}
.iso-card em{font-style:normal;font-weight:700;font-size:1.6em;letter-spacing:-0.03em;color:var(--ink)}
.iso-card em small{font-size:.5em;font-weight:500;color:var(--muted)}
.iso-card i{display:block;height:6%;border-radius:4px;background:var(--mist-2)}
.iso-card i:last-child{width:65%}
.iso-card.c1{left:10%;top:52%}
.iso-card.c2{left:36%;top:32%;background:linear-gradient(160deg,var(--accent),#46521F);border-color:transparent}
.iso-card.c2 b,.iso-card.c2 em{color:#fff}.iso-card.c2 em small{color:rgba(255,255,255,.7)}
.iso-card.c2 .ic{background:rgba(255,255,255,.18)}.iso-card.c2 i{background:rgba(255,255,255,.22)}
.iso-card.c3{left:60%;top:12%}
.iso-card .tag{position:absolute;right:8%;top:7%;background:var(--accent-2);color:#fff;font-size:.72em;font-weight:600;padding:3px 8px;border-radius:999px}
.iso-cube{width:9%;aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,var(--accent-2),var(--accent))}
.iso-cube.q1{left:2%;top:4%}.iso-cube.q2{right:4%;bottom:26%;width:7%;background:linear-gradient(135deg,var(--accent-2),#2F6F57)}.iso-cube.q3{right:16%;top:-2%;width:6%;background:linear-gradient(135deg,#F6D7A8,#E9B872)}

/* ===== v7 static hero ===== */
.scrolly{height:240vh}
@media (max-width:900px){.scrolly{height:190vh}}
.hero-h{font-size:clamp(34px,4.3vw,62px);letter-spacing:-0.045em;line-height:1.02;margin-top:4px}
.strike{text-decoration:none;color:var(--muted);position:relative;white-space:nowrap}
.strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.07em;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform 1.1s .9s var(--spring)}
.loaded .strike::after{transform:scaleX(1)}
.hero-h2{font-size:clamp(24px,2.7vw,36px);font-weight:600;letter-spacing:-0.03em;line-height:1.15;margin-top:16px}
.hero-h2 .hl{color:var(--accent)}
.hero-sub{display:block!important}
.hero-h .line-mask{white-space:nowrap}
.scroll-hint{left:auto!important;right:var(--gutter);transform:none!important}
.hero-from{margin-top:20px;font-size:14px;color:var(--muted)}
.hero-from b{color:var(--ink)}
.hero-actions.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.iso-steps{display:flex;justify-content:center;gap:8px;margin-top:8px}
.iso-steps span{font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);opacity:.35;transition:opacity .5s,background .5s,color .5s}
.iso-steps span.on{opacity:1;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ly[data-at]{will-change:transform,opacity}
@media (max-width:900px){.iso-cube{display:none}.sticky{align-items:flex-start;padding-top:18px}.hero-visual{max-width:290px!important}.hero-actions{margin-top:20px}.hero-actions .btn{height:44px}.hero-h2{margin-top:10px}.hero-sub{margin-top:14px!important;font-size:15px!important}.hero-from{margin-top:12px}.hero-h{font-size:clamp(30px,8.4vw,46px)}.scroll-hint{display:none}.hero-visual{order:0;margin-top:10px}.hero-sub{font-size:16px}}
/* ===== v8 ===== */
.host-teaser{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.host-teaser h3{margin-bottom:6px}
.plans{grid-template-columns:repeat(4,1fr)!important;gap:16px!important}
.plan{padding:26px!important}
.plan .pp{font-size:40px!important}
.plan.hands .plan-tag{background:var(--tint-b);color:var(--ink)}
.plan-fine{font-size:12.5px;color:var(--muted);margin:-14px 0 18px;padding:8px 10px;border-radius:10px;background:var(--mist)}
@media (max-width:1180px){.plans{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:640px){.plans{grid-template-columns:1fr!important}}
/* team */
.tm-intro{text-align:center;max-width:860px;margin:0 auto}
.tm-intro h2{font-size:clamp(30px,4.2vw,52px)}
.tm-intro .lede{margin:22px auto 0}
.tm-channel{display:flex;gap:16px;align-items:center;max-width:640px;margin:34px auto 0;background:var(--accent-soft);border-radius:18px;padding:18px 22px}
.tm-ch-ic{width:46px;height:46px;flex:none;border-radius:14px;background:var(--surface);display:grid;place-items:center;color:var(--accent)}
.tm-channel b{display:block;font-size:17px;letter-spacing:-0.01em}
.tm-channel span{font-size:14.5px;color:var(--muted)}
.tm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.tm{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:32px;display:flex;flex-direction:column;gap:18px;transition:transform .7s var(--spring)}
.tm:hover{transform:translateY(-5px);box-shadow:0 40px 70px -46px rgba(0,0,0,.35)}
.tm-head{display:flex;align-items:center;gap:18px}
.tm-av{width:84px;height:84px;flex:none;border-radius:22px;background:linear-gradient(150deg,var(--tint-a),var(--tint-b));display:grid;place-items:center;color:var(--accent);position:relative;font-size:30px;font-weight:600}
.tm-av i{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--ok);border:3px solid var(--surface)}
.tm h3{font-size:clamp(21px,2vw,25px)}
.tm-role{font-size:14.5px;font-weight:500;color:var(--accent);margin-top:4px}
.tm > p{color:var(--muted);font-size:15.5px;flex:1}
.tm-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tm-focus{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:8px 12px;border-radius:12px;background:var(--mist)}
.tm-focus svg{color:var(--accent)}
.tm-loc{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
@media (max-width:860px){.tm-grid{grid-template-columns:1fr}.tm{padding:24px}}
/* animated rebuild cards */
.reb{position:relative;overflow:hidden;transition:transform .8s var(--spring),border-color .4s}
.reb::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.reb:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 40px 70px -46px rgba(0,0,0,.4)}
.reb:hover::before{opacity:1}
.reb-viz{height:96px;border-radius:14px;background:var(--mist);margin-bottom:18px;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:10px;position:relative;overflow:hidden}
.race-row{display:grid;grid-template-columns:86px 1fr 38px;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.race-row.us span{color:var(--accent);font-weight:600}
.race-track{height:8px;border-radius:6px;background:var(--mist-2);overflow:hidden}
.race-track i{display:block;height:100%;width:0;border-radius:6px;background:#D9534F}
.race-row.us .race-track i{background:var(--accent)}
.go .race-track i.slow{width:100%;transition:width 3s linear .3s}
.go .race-track i.fast{width:100%;transition:width .45s var(--spring) .3s}
.race-t{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.hosts{flex-direction:row;align-items:center;gap:14px}
.unlock{width:48px;height:48px;flex:none;border-radius:14px;background:var(--surface);display:grid;place-items:center;color:var(--accent)}
.unlock .shackle{transform-origin:16px 10px;transition:transform .9s var(--spring) .4s}
.go .unlock .shackle{transform:rotate(-28deg) translate(-1px,-1px)}
.marq{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marq-in{display:flex;gap:8px;width:max-content;animation:marq 12s linear infinite}
.marq-in span{font-size:13px;font-weight:500;padding:7px 12px;border-radius:999px;background:var(--surface);white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}
.zero{align-items:flex-start;gap:4px}
.zero .was{font-size:12px;color:var(--muted)}
.zero-num{display:flex;align-items:baseline;gap:6px}
.zero-num b{font-size:34px;font-weight:600;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.zero-num small{font-size:13px;color:var(--muted)}
.zero-bar{position:absolute;left:16px;right:16px;bottom:12px;height:4px;border-radius:4px;background:var(--mist-2);overflow:hidden}
.zero-bar i{display:block;height:100%;width:100%;background:#D9534F;transform-origin:left;transition:transform 1.8s var(--spring) .3s,background .6s 1.6s}
.go .zero-bar i{transform:scaleX(0)}
.go .zero-num b{color:var(--ok)}
/* apple-style icons + industry cards */
.app-ic{width:60px;height:60px;border-radius:27%;display:grid;place-items:center;position:relative;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.08),0 10px 22px -10px var(--c2),0 2px 5px rgba(0,0,0,.08);overflow:hidden;transition:transform .7s var(--spring)}
.app-ic::after{content:"";position:absolute;left:0;right:0;top:0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));border-radius:27% 27% 40% 40% / 27% 27% 20% 20%;pointer-events:none}
.app-ic svg{width:54%;height:54%;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.app-ic.big{width:84px;height:84px}
.ind{position:relative;overflow:hidden;padding:28px!important;display:flex!important;flex-direction:column;gap:2px}
.ind::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c1) 22%,transparent),transparent 70%);transition:transform .9s var(--spring)}
.ind:hover::before{transform:scale(1.35)}
.ind:hover .app-ic{transform:translateY(-3px) rotate(-6deg) scale(1.05)}
.ind .app-ic{margin-bottom:22px}
.ind h3{position:relative}
.ind-grid{grid-template-columns:repeat(4,1fr)!important}
@media (max-width:1100px){.ind-grid{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:560px){.ind-grid{grid-template-columns:1fr!important}}
.ind-other{border-style:dashed!important;background:transparent!important}
.tm-channel span{display:block;line-height:1.45}
.ind-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;position:relative}
.ind-tags span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--muted)}
.ind .go{margin-top:auto!important;padding-top:16px;position:relative}
/* ===== v9 flow ===== */
.scrolly{height:170vh!important}
@media (max-width:900px){.scrolly{height:150vh!important}}
.cta-band{padding:clamp(64px,8vw,110px) 0!important}
.carousel{margin-top:36px!important}
.work-grid{margin-top:40px!important}
.work-shot{aspect-ratio:16/8.6!important}
.tiers,.ministeps,.tm-grid,.vs,.ind-grid{margin-top:40px!important}
.statement{font-size:clamp(28px,3.8vw,48px)!important}
.sub-h2{font-size:clamp(26px,3vw,38px)!important;margin-top:84px}
.ba{aspect-ratio:auto!important;height:min(68vh,58vw)}
@media (max-width:700px){.ba{height:auto!important;aspect-ratio:3/4.4!important}}
.tm{padding:26px!important;gap:14px!important}
.tm-av{width:72px!important;height:72px!important}
.tm-channel{margin-top:26px!important}
.stats-band{padding:28px 0 0!important}
.sec-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
/* guarantee inline */
.g-inline{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:30px 34px;grid-template-columns:auto 1fr!important;gap:34px!important}
.g-inline .seal{width:150px;height:150px}
.g-inline .seal-core{width:84px;height:84px;font-size:12.5px}
.g-title{font-size:clamp(22px,2.4vw,30px)}
@media (max-width:760px){.g-inline{grid-template-columns:1fr!important;padding:24px}}
/* see it */
.see{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.see-ctl{margin-top:20px}
.see-lbl{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.see-pals{display:flex;gap:8px;flex-wrap:wrap}
.spal{width:46px;height:46px;border-radius:14px;border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;display:flex;transform:rotate(45deg);transition:transform .5s var(--spring),border-color .3s}
.spal i{flex:1;transform:rotate(0)}
.spal:hover{transform:rotate(45deg) scale(1.08)}
.spal[aria-pressed="true"]{border-color:var(--ink)}
.see-stage{perspective:1600px}
.see-pv{transform:rotateY(-6deg) rotateX(2deg);transition:transform 1s var(--spring),width .8s var(--spring),background-color .5s,color .5s;box-shadow:0 60px 100px -60px rgba(0,0,0,.45)}
.see-stage:hover .see-pv{transform:none}
@media (max-width:960px){.see{grid-template-columns:1fr}.see-pv{transform:none}.see-pv .pv-cards{grid-template-columns:1fr}}
/* why: badges + money bar */
.own-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.own-badges span{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;padding:9px 14px;border-radius:999px;background:var(--accent-soft)}
.own-badges svg{color:var(--accent)}
.money{margin-top:44px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:30px}
.money-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.money-head b{display:block;font-size:20px;letter-spacing:-0.02em}
.money-head span{font-size:14px;color:var(--muted)}
.money-total{font-size:clamp(40px,5vw,60px);font-weight:600;letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums;transition:color .6s}
.go .money-total{color:var(--accent)}
.money-bar{display:flex;height:64px;border-radius:16px;overflow:hidden;gap:3px;background:var(--mist)}
.mseg{flex:0 0 var(--w);background:var(--c);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:flex-basis 1.2s var(--spring),opacity .8s;min-width:0}
.mseg em{font-style:normal;font-size:12px;font-weight:600;color:#2a2f37;white-space:nowrap;padding:0 6px;overflow:hidden;text-overflow:ellipsis}
.mseg.keep em{color:var(--accent-ink)}
.go .mseg:not(.keep){flex-basis:0;opacity:0}
.go .mseg.keep{flex-basis:100%}
.go .mseg:nth-child(1){transition-delay:.1s}.go .mseg:nth-child(2){transition-delay:.2s}.go .mseg:nth-child(3){transition-delay:.3s}.go .mseg:nth-child(4){transition-delay:.4s}.go .mseg:nth-child(5){transition-delay:.5s}.go .mseg:nth-child(6){transition-delay:.6s}.go .mseg.keep{transition-delay:.7s}
.money-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13px;color:var(--muted)}
.money-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.money-note{margin-top:16px;font-size:16px}
@media (max-width:700px){.mseg em{display:none}.money-bar{height:40px}}
/* quick answers */
.qa{margin-top:64px}
.qa h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:16px}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:18px 30px 18px 0;font-weight:500;font-size:17px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:22px;color:var(--muted);transition:transform .4s var(--spring)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 0 18px;color:var(--muted);font-size:15.5px}
@media (max-width:760px){.qa-grid{grid-template-columns:1fr}}
/* v9 compact homepage */
.tier .ticks{align-content:start}
[data-page="home"] #homeWork{grid-template-columns:repeat(4,1fr)!important;gap:16px}
[data-page="home"] #homeWork .work-shot{aspect-ratio:4/3!important;padding:14px 14px 0}
[data-page="home"] #homeWork .ws-body{padding:12px}
[data-page="home"] #homeWork .ws-title{font-size:14px}
[data-page="home"] #homeWork .work-meta{padding:16px 18px 18px}
[data-page="home"] #homeWork .work-meta h3{font-size:17px}
[data-page="home"] #homeWork .work-meta > p,[data-page="home"] #homeWork .tags{display:none}
[data-page="home"] #homeWork .work-acts{margin-top:12px}
[data-page="home"] #homeWork .work-acts .btn{height:36px;padding:0 12px;font-size:13.5px}
@media (max-width:1100px){[data-page="home"] #homeWork{grid-template-columns:1fr 1fr!important}}
@media (max-width:560px){[data-page="home"] #homeWork{grid-template-columns:1fr!important}}
.ba{height:min(60vh,52vw)!important}
[data-page="home"] .ind{padding:22px!important}
[data-page="home"] .ind .app-ic{width:52px;height:52px;margin-bottom:16px}
[data-page="home"] .ind h3{font-size:18px}
[data-page="home"] .ind-tags span:nth-child(2){display:none}
[data-page="home"] .ind .go{padding-top:12px}
.tier{padding:30px!important}
.tier-price{font-size:54px!important;margin:12px 0 4px!important}
.ticks{gap:8px!important}
.ticks li{font-size:15px!important}
.tier-for{margin-bottom:18px!important}
.quick{padding:24px 30px!important}
.money{padding:26px!important;margin-top:34px!important}
.sub-h2{margin-top:64px!important}
/* ===== v10 demo viewer ===== */
.dv{position:fixed;inset:0;z-index:95;background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));animation:fadein .35s ease both}
.dv[hidden]{display:none}
.dv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-radius:16px 16px 0 0;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dv-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.dv-dots{display:flex;gap:6px}.dv-dots i{width:11px;height:11px;border-radius:50%;background:var(--mist-2)}
.dv-dots i:first-child{background:#FF5F57}.dv-dots i:nth-child(2){background:#FEBC2E}.dv-dots i:nth-child(3){background:#28C840}
.dv-url{font-size:13px;color:var(--muted);background:var(--mist);border-radius:8px;padding:6px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.dv-right{display:flex;align-items:center;gap:8px}
.dv-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.dv-mid{width:200px}
.dv-stage{flex:1;min-height:0;background:var(--mist);border-radius:0 0 16px 16px;display:flex;justify-content:center;overflow:hidden}
.dv-frame{width:100%;height:100%;transition:width .7s var(--spring);background:#fff;overflow:hidden;position:relative}
.dv-frame.phone{width:390px;max-width:100%;margin:16px 0;height:calc(100% - 32px);border-radius:36px;border:10px solid #111;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.dv-scroll{height:100%;overflow-y:auto;container-type:inline-size;scroll-behavior:smooth}
@media (max-width:700px){.dv-mid,.dv-tag{display:none}.dv{padding:0}.dv-bar{border-radius:0}.dv-stage{border-radius:0}}

/* ===== demo site base ===== */
.dm{--muted:color-mix(in srgb,var(--ink) 62%,var(--bg));--line2:color-mix(in srgb,var(--ink) 12%,var(--bg));background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.55;min-height:100%}
.dm *{box-sizing:border-box}
.dm h1,.dm h2,.dm h3,.dm h4{font-family:var(--fh);margin:0;letter-spacing:var(--ls,-0.025em);line-height:1.08;font-weight:var(--fw,650)}
.dm h1{font-size:clamp(34px,5.6cqi,66px)}
.dm h1 + .dm-lead{margin-top:20px}
.dm h2{font-size:clamp(28px,4.2cqi,46px)}
.dm h3{font-size:19px;line-height:1.2}
.dm p{margin:0}
.dm a{color:inherit;text-decoration:none}
.dm button{font-family:inherit}
.dm-w{max-width:1140px;margin:0 auto;padding:0 clamp(18px,5cqi,56px)}
.dm-sec{padding:clamp(56px,8cqi,96px) 0}
.dm-sec.alt{background:var(--soft)}
.dm-sec.dark{background:var(--b);color:#fff}
.dm-sec.dark .dm-muted{color:rgba(255,255,255,.72)}
.dm-muted{color:var(--muted)}
.dm-lead{font-size:clamp(16px,1.7cqi,19px);color:var(--muted);max-width:36em;margin-top:16px}
.dm-kick{display:inline-block;font-size:13px;font-weight:600;color:var(--a);margin-bottom:12px}
.dm-nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.dm-nav .dm-w{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.dm-logo{font-family:var(--fh);font-weight:700;font-size:20px;letter-spacing:var(--ls,-0.02em);display:flex;align-items:center;gap:10px;cursor:pointer}
.dm-logo i{width:26px;height:26px;border-radius:8px;background:var(--a);display:grid;place-items:center;color:#fff;font-style:normal;font-size:13px}
.dm-links{display:flex;gap:22px;font-size:14.5px;color:var(--muted)}
.dm-links span{cursor:pointer}.dm-links span:hover{color:var(--ink)}
.dm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:var(--br,999px);background:var(--a);color:var(--ai,#fff);font-weight:600;font-size:15px;border:0;cursor:pointer;transition:transform .4s var(--spring),filter .3s}
.dm-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.dm-btn.gh{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.dm-btn.sm{height:38px;padding:0 16px;font-size:14px}
.dm-btn.full{width:100%}
.dm-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.dm-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5cqi,64px);align-items:center}
.dm-hero{padding:clamp(40px,7cqi,90px) 0 clamp(48px,7cqi,96px)}
.dm-ill{width:100%;height:auto;display:block;border-radius:24px}
.dm-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--muted)}
.dm-trust b{color:var(--ink)}
.dm-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.dm-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.dm-g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.dm-card{background:var(--card,#fff);border:1px solid var(--line2);border-radius:var(--rc,18px);padding:24px;transition:transform .5s var(--spring)}
.dm-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(0,0,0,.35)}
.dm-card h3{margin:14px 0 6px}
.dm-card p{font-size:15px;color:var(--muted)}
.dm-ic{width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--a) 14%,#fff);color:var(--a);display:grid;place-items:center}
.dm-ic svg{width:24px;height:24px}
.dm-ph{border-radius:var(--rc,18px);background:linear-gradient(var(--ang,140deg),var(--p1),var(--p2));position:relative;overflow:hidden;aspect-ratio:var(--ar,4/3)}
.dm-ph::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;right:-20%;bottom:-30%;background:rgba(255,255,255,.18)}
.dm-ph::after{content:"";position:absolute;width:40%;aspect-ratio:1;border-radius:30%;left:10%;top:12%;background:rgba(255,255,255,.12);transform:rotate(12deg)}
.dm-ph span{position:absolute;left:14px;bottom:12px;z-index:1;font-size:12.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.28);padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.dm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dm-stats div{padding:20px 0;border-top:2px solid var(--a)}
.dm-stats b{display:block;font-family:var(--fh);font-size:clamp(28px,3.6cqi,40px);letter-spacing:-0.03em;line-height:1}
.dm-stats span{font-size:14px;color:var(--muted)}
.dm-quote{font-family:var(--fh);font-size:clamp(20px,2.4cqi,28px);line-height:1.3;letter-spacing:-0.01em}
.dm-stars{color:#E8A317;letter-spacing:2px}
.dm-who{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px}
.dm-who i{width:36px;height:36px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-style:normal;font-weight:600;color:var(--a)}
.dm-chips{display:flex;flex-wrap:wrap;gap:8px}
.dm-chip{border:1.5px solid var(--line2);background:var(--card,#fff);color:var(--ink);border-radius:var(--br,999px);padding:9px 15px;font-size:14px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.dm-chip:hover{border-color:var(--a)}
.dm-chip[aria-pressed="true"]{background:var(--a);border-color:var(--a);color:var(--ai,#fff)}
.dm-chip[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.dm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:28px}
.dm-tab{border:0;background:transparent;font-size:15px;font-weight:600;padding:10px 16px;border-radius:var(--br,999px);color:var(--muted);cursor:pointer}
.dm-tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.dm-panel{display:none;margin-top:22px}
.dm-panel.on{display:block;animation:dmIn .6s var(--spring) both}
@keyframes dmIn{from{opacity:0;transform:translateY(12px)}}
.dm-menu{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.dm-item{display:flex;gap:10px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line2)}
.dm-item div{flex:1}
.dm-item b{font-weight:600}
.dm-item small{display:block;color:var(--muted);font-size:13.5px}
.dm-item .pr{font-family:var(--fh);font-weight:600;white-space:nowrap}
.dm-form{display:grid;gap:14px}
.dm-form label{display:grid;gap:6px;font-size:13.5px;font-weight:600}
.dm-in{height:48px;border:1.5px solid var(--line2);border-radius:var(--bi,12px);padding:0 14px;font:inherit;font-size:15px;background:var(--card,#fff);color:var(--ink);width:100%}
textarea.dm-in{height:96px;padding:12px 14px;resize:vertical}
.dm-in:focus{outline:none;border-color:var(--a)}
.dm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dm-drop{border:2px dashed color-mix(in srgb,var(--a) 50%,var(--line2));border-radius:14px;padding:18px;text-align:center;font-size:14px;color:var(--muted);cursor:pointer}
.dm-drop b{color:var(--a)}
.dm-ok{display:none;text-align:center;padding:30px 10px}
.dm-ok.on{display:block;animation:dmIn .6s var(--spring) both}
.dm-ok .tk{width:56px;height:56px;border-radius:50%;background:var(--a);color:var(--ai,#fff);display:grid;place-items:center;margin:0 auto 14px;font-size:26px}
.dm-box{background:var(--card,#fff);border:1px solid var(--line2);border-radius:var(--rc,22px);padding:clamp(20px,3cqi,32px)}
.dm-sum{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--soft);font-size:14.5px}
.dm-foot{background:var(--b);color:rgba(255,255,255,.75);padding:48px 0 30px;font-size:14px}
.dm-foot .dm-w{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.dm-foot b{color:#fff;display:block;margin-bottom:8px;font-family:var(--fh)}
.dm-foot small{display:block;margin-top:30px;opacity:.6;grid-column:1/-1}
.dm details{border-bottom:1px solid var(--line2)}
.dm summary{list-style:none;cursor:pointer;padding:16px 26px 16px 0;font-weight:600;position:relative}
.dm summary::-webkit-details-marker{display:none}
.dm summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:22px;color:var(--a)}
.dm details[open] summary::after{content:"–"}
.dm details p{padding-bottom:16px;color:var(--muted);font-size:15px}
.dm-ba{position:relative;border-radius:var(--rc,20px);overflow:hidden;aspect-ratio:16/8;--pos:50%;margin-top:30px}
.dm-ba .l,.dm-ba .r{position:absolute;inset:0}
.dm-ba .r{clip-path:inset(0 0 0 var(--pos))}
.dm-ba .ln{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-1px);pointer-events:none}
.dm-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.dm-ba em{position:absolute;top:12px;font-style:normal;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;pointer-events:none}
.dm-row{display:grid;grid-template-columns:90px 1fr auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line2)}
.dm-row b{font-family:var(--fh)}
.dm-row .sp{font-size:13px;color:var(--muted)}
.dm-avatar{width:100%;aspect-ratio:5/4;border-radius:var(--rc,18px);background:linear-gradient(150deg,var(--soft),color-mix(in srgb,var(--a) 35%,var(--soft)));display:grid;place-items:center;font-family:var(--fh);font-size:40px;font-weight:600;color:var(--a)}
.dm-plan{display:flex;flex-direction:column}
.dm-plan .pp{font-family:var(--fh);font-size:40px;letter-spacing:-0.03em;margin:10px 0 2px}
.dm-plan ul{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:8px;font-size:14.5px;flex:1}
.dm-plan li::before{content:"✓";color:var(--a);font-weight:700;margin-right:8px}
.dm-plan.hl{background:var(--b);color:#fff;border-color:var(--b)}
.dm-plan.hl p,.dm-plan.hl li{color:rgba(255,255,255,.8)}
.dm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;counter-reset:st}
.dm-steps div{padding-top:16px;border-top:2px solid var(--line2)}
.dm-steps div::before{counter-increment:st;content:counter(st);display:block;font-family:var(--fh);font-size:30px;color:var(--a);margin-bottom:8px}
.dm-steps b{display:block;margin-bottom:4px}
.dm-steps span{font-size:14.5px;color:var(--muted)}
.dm-banner{background:var(--a);color:var(--ai,#fff);text-align:center;font-size:14px;font-weight:600;padding:9px 12px}
.dm-step{display:inline-flex;align-items:center;border:1.5px solid var(--line2);border-radius:999px;overflow:hidden}
.dm-step button{width:40px;height:40px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--ink)}
.dm-step b{min-width:36px;text-align:center}
.dm-range{width:100%;accent-color:var(--a)}
.dm-big{font-family:var(--fh);font-size:clamp(40px,5cqi,56px);letter-spacing:-0.04em;line-height:1}
.dr{opacity:0;transform:translateY(22px);transition:opacity .9s var(--spring),transform 1s var(--spring)}
.dr.in{opacity:1;transform:none}
.dr2{transition-delay:.1s}.dr3{transition-delay:.2s}
@container (max-width:760px){
  .dm-links,.dm-hide-m{display:none!important}
  .dm-logo{font-size:17px;white-space:nowrap}
  .dm-nav .dm-btn.sm{white-space:nowrap;padding:0 13px;font-size:13px;height:36px}
  .dm-nav .dm-w{height:60px}
  .dm-split,.dm-g2,.dm-menu,.dm-two{grid-template-columns:1fr}
  .dm-g3,.dm-g4,.dm-stats,.dm-steps{grid-template-columns:1fr 1fr}
  .dm-foot .dm-w{grid-template-columns:1fr}
  .dm-row{grid-template-columns:64px 1fr auto}
  .dm-row .sp{display:none}
  .dm-ba{aspect-ratio:4/3}
}
@container (max-width:460px){.dm-g3,.dm-g4{grid-template-columns:1fr}}
/* per-demo personality */
.dm-ironbark{--ls:-0.035em;--fw:800}
.dm-ironbark h1{text-transform:none}
.dm-rose{--fw:500;--ls:-0.01em}
.dm-rose h1,.dm-rose h2{font-style:italic}
.dm-ember{--fw:600}
.dm-pulse{--ls:0.01em;--fw:800}
.dm-pulse h1,.dm-pulse h2,.dm-pulse .dm-logo{text-transform:uppercase}
.dm-pulse h1{font-size:clamp(40px,8cqi,96px);line-height:.92}
.dm-ledger{--fw:600}
/* demo entry points on the agency site */
.ind-acts{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative}
.ind-acts .go{margin:0!important;padding:0!important}
.ind-demo{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:12px;position:relative}
.ind-dot{width:10px;height:10px;border-radius:50%}
.demo-box{margin-top:30px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 24px}
.demo-swatch{display:flex;align-items:center;gap:16px}
.demo-swatch .mini{width:120px;height:76px;border-radius:12px;position:relative;overflow:hidden;flex:none;box-shadow:0 12px 24px -14px rgba(0,0,0,.4)}
.demo-swatch .mini b{position:absolute;left:10px;top:10px;font-size:11px;color:#fff}
.demo-swatch .mini i{position:absolute;left:10px;bottom:10px;width:46px;height:14px;border-radius:999px}
@media (max-width:640px){.demo-box{grid-template-columns:1fr}}

/* ===== v11 Motion Planner ===== */
#mp{--mist2:var(--mist-2);--olive:var(--accent);--olive-ink:var(--accent-ink);--lime:var(--accent-2);--soft:var(--accent-soft);--violet:#5B3FB0;--bounce:cubic-bezier(.34,1.56,.64,1);--ui:var(--font)}
#mp .btn-sm{height:38px}
@media (min-width:1051px){#mp .mp-rcpt{top:calc(80px + env(safe-area-inset-top,0px))}}
/* layout */
.mp-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;padding-bottom:80px}
@media (max-width:1050px){.mp-layout{grid-template-columns:1fr}}

/* wizard */
.mp-wiz{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,32px)}
.mp-wiz-tabs{display:flex;gap:6px;background:var(--mist);border-radius:14px;padding:4px;width:fit-content;margin-bottom:22px}
.mp-wiz-tabs button{border:0;background:transparent;padding:9px 16px;border-radius:10px;cursor:pointer;font-size:14.5px;color:var(--muted);font-weight:500}
.mp-wiz-tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.mp-prog{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:22px}
.mp-prog i{height:5px;border-radius:5px;background:var(--mist2);position:relative;overflow:hidden}
.mp-prog i::after{content:"";position:absolute;inset:0;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--spring)}
.mp-prog i.on::after{transform:scaleX(1)}
.mp-step{display:none}
.mp-step.on{display:block;animation:mpstepIn .6s var(--spring) both}
@keyframes mpstepIn{from{opacity:0;transform:translateX(16px)}}
.mp-step h2{font-size:clamp(22px,2.4vw,30px)}
.mp-step > p{color:var(--muted);margin:6px 0 18px}
.mp-inds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mp-ind{border:1.5px solid var(--line);background:var(--surface);border-radius:18px;padding:14px;cursor:pointer;text-align:left;display:grid;gap:10px;transition:border-color .3s,transform .5s var(--spring)}
.mp-ind:hover{transform:translateY(-3px);box-shadow:0 18px 30px -24px rgba(0,0,0,.4)}
.mp-ind[aria-pressed="true"]{border-color:var(--olive);box-shadow:0 0 0 2px var(--olive)}
.mp-ind b{font-size:14px;line-height:1.25}
.mp-app{width:44px;height:44px;border-radius:27%;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 16px -8px var(--c2)}
.mp-app::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
.mp-app svg{width:56%;height:56%;position:relative;z-index:1}
.mp-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.mp-opt{border:1.5px solid var(--line);background:var(--surface);border-radius:18px;padding:16px;cursor:pointer;text-align:left;transition:border-color .3s,transform .5s var(--spring)}
.mp-opt:hover{transform:translateY(-2px)}
.mp-opt[aria-pressed="true"]{border-color:var(--olive);box-shadow:0 0 0 2px var(--olive)}
.mp-opt b{display:block;font-size:16px;margin-bottom:4px}
.mp-opt span{font-size:14px;color:var(--muted)}
.mp-feelprev{height:54px;border-radius:12px;background:var(--mist);margin-bottom:12px;position:relative;overflow:hidden}
.mp-feelprev i{position:absolute;left:12px;height:9px;border-radius:5px;background:var(--olive)}
.mp-fp-min i{animation:mpfpMin 3s ease-in-out infinite}.mp-fp-min i:nth-child(1){top:14px;width:50%}.mp-fp-min i:nth-child(2){top:30px;width:30%;opacity:.5;animation-delay:.2s}
@keyframes mpfpMin{0%,100%{opacity:.25}50%{opacity:1}}
.mp-fp-en i{animation:mpfpEn 1.6s var(--bounce) infinite}.mp-fp-en i:nth-child(1){top:12px;width:45%}.mp-fp-en i:nth-child(2){top:28px;width:60%;background:var(--lime);animation-delay:.15s}
@keyframes mpfpEn{0%{transform:translateX(-110%)}40%,100%{transform:none}}
.mp-fp-cin{background:#141812}.mp-fp-cin i{left:50%;top:50%;width:14px;height:14px;border-radius:4px;background:var(--lime);animation:mpfpCin 2.4s var(--spring) infinite}
.mp-fp-cin i:nth-child(2){animation-delay:.3s;background:#fff}
@keyframes mpfpCin{0%{transform:translate(-50%,-50%) scale(.2) rotate(0);opacity:0}40%{opacity:1}100%{transform:translate(calc(-50% + 70px),-50%) scale(1.6) rotate(180deg);opacity:0}}
.mp-wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);gap:10px;flex-wrap:wrap}
.mp-skip{font-size:14px;color:var(--muted)}

/* plan */
.mp-plan{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,32px);display:none}
.mp-plan.on{display:block;animation:mpstepIn .7s var(--spring) both}
.mp-plan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.mp-plan-head h2{font-size:clamp(24px,2.6vw,34px)}
.mp-why{margin-top:10px;color:var(--muted);font-size:15px;max-width:46em}
.mp-lvl{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.mp-lvl i{width:22px;height:7px;border-radius:4px;background:var(--mist2);transition:background .4s}
.mp-lvl i.on{background:var(--olive)}
.mp-picked{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:20px}
.mp-pk{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:start;animation:mppkIn .6s var(--spring) both;background:var(--bg)}
@keyframes mppkIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.mp-pk small{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.mp-pk b{font-size:14.5px}
.mp-pk .mp-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}

/* tags */
.mp-pr{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}
.mp-pr.E{background:#E6F4EC;color:#21704A}
.mp-pr.S{background:#EEE9FB;color:var(--violet)}
.mp-pr.A{background:#FFF2DC;color:#9A5B00}
.mp-pr.R{background:var(--mist2);color:var(--muted)}

/* library */
.mp-lib-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:46px 0 16px}
.mp-lib-head h2{font-size:clamp(26px,3vw,38px)}
.mp-filters{display:flex;gap:6px;flex-wrap:wrap}
.mp-filters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13.5px;cursor:pointer;color:var(--muted)}
.mp-filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mp-cat{background:var(--surface);border:1px solid var(--line);border-radius:24px;display:grid;grid-template-columns:230px 1fr;overflow:hidden;margin-bottom:14px}
.mp-cdemo{position:relative;background:var(--dbg,#EEF2E4);display:grid;place-items:center;overflow:hidden;min-height:200px;border-right:1px solid var(--line)}
.mp-cdemo > *{transform:scale(.62)}
.mp-cdemo .d-par{transform:none}
.mp-cdemo .d-trv{position:relative;inset:auto;width:430px;height:260px;flex:none;transform:scale(.5)}
.mp-cbody{padding:18px 20px 20px}
.mp-ctop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mp-ctop h3{font-size:20px}
.mp-ctop p{font-size:14px;color:var(--muted);margin-top:2px}
.mp-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px}
.mp-chip{position:relative;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px 10px 38px;cursor:pointer;text-align:left;display:grid;gap:3px;transition:border-color .3s,background .3s,transform .4s var(--spring)}
.mp-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--olive) 45%,var(--line))}
.mp-chip::before{content:"";position:absolute;left:12px;top:13px;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);transition:background .3s,border-color .3s}
.mp-chip[aria-pressed="true"]{border-color:var(--olive);background:var(--soft)}
.mp-chip[aria-pressed="true"]::before{background:var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.3L12 5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--olive)}
.mp-chip b{font-size:14px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.mp-chip span{font-size:12.5px;color:var(--muted);line-height:1.35}
.mp-chip .mp-dots{display:flex;gap:3px;margin-top:2px}
.mp-chip .mp-dots i{width:10px;height:4px;border-radius:2px;background:var(--mist2)}
.mp-chip .mp-dots i.on{background:var(--olive)}
.mp-chip.rec::after{content:"Recommended";position:absolute;right:10px;bottom:9px;font-size:10.5px;font-weight:600;color:var(--olive)}
.mp-chip.hide{display:none}
.mp-chip.na{opacity:.45}
@media (max-width:760px){.mp-cat{grid-template-columns:1fr}.mp-cdemo{min-height:170px;border-right:0;border-bottom:1px solid var(--line)}}

/* receipt */
.mp-rcpt{position:sticky;top:calc(16px + env(safe-area-inset-top,0px));background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:22px;display:grid;gap:14px;box-shadow:0 40px 70px -60px rgba(0,0,0,.4)}
.mp-rcpt h3{font-size:18px}
.mp-r-pkg{display:flex;justify-content:space-between;align-items:center;background:var(--mist);border-radius:14px;padding:12px 14px}
.mp-r-pkg b{font-size:15px}
.mp-r-pkg span{font-size:13px;color:var(--muted)}
.mp-r-lines{display:grid;gap:6px;font-size:13.5px;max-height:230px;overflow:auto;padding-right:4px}
.mp-r-lines div{display:flex;justify-content:space-between;gap:10px}
.mp-r-lines div span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-r-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:12px}
.mp-r-total b{font-size:38px;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.mp-r-total small{font-size:13px;color:var(--muted)}
.mp-r-note{font-size:12px;color:var(--muted)}
.mp-r-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.mp-r-counts div{background:var(--mist);border-radius:12px;padding:8px 4px}
.mp-r-counts b{display:block;font-size:20px;letter-spacing:-0.02em}
.mp-r-counts span{font-size:11.5px;color:var(--muted)}
.mp-upg{font-size:13px;background:#EEE9FB;color:var(--violet);border-radius:12px;padding:10px 12px;display:none}
.mp-upg.on{display:block}
@media (max-width:1050px){.mp-rcpt{position:fixed;left:10px;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;padding:14px 16px;gap:8px;grid-template-columns:1fr auto;align-items:center}.mp-rcpt > :not(.mp-r-total):not(.mp-rc-act){display:none}.mp-r-total{border:0;padding:0}.mp-r-total b{font-size:26px}.mp-rc-act .btn{height:40px}#mp{padding-bottom:100px}}
.mp-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.5s var(--spring);z-index:80}
.mp-toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== DEMOS ===== */
/* 1 reveal */
.d-rev{width:78%;display:grid;gap:12px}
.d-rev i{display:block;height:16px;border-radius:8px;background:#46521F;animation:mpdRev 4.2s var(--spring) infinite}
.d-rev i:nth-child(1){width:90%;height:26px}
.d-rev i:nth-child(2){width:70%;background:#9AA77A;animation-delay:.12s}
.d-rev i:nth-child(3){width:55%;background:#9AA77A;animation-delay:.24s}
.d-rev i:nth-child(4){width:34%;height:34px;border-radius:999px;background:#C9F27C;animation-delay:.36s}
@keyframes mpdRev{0%,8%{opacity:0;transform:translateY(26px);filter:blur(6px)}30%,80%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translateY(-6px)}}
/* 2 parallax */
.d-par{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#FFE8C9,#FFF6E8)}
.d-par .sun{position:absolute;width:70px;height:70px;border-radius:50%;background:#FFB347;left:60%;top:22%}
.d-par .mly{position:absolute;left:0;bottom:0;width:200%;height:var(--h);animation:mppar var(--s) linear infinite}
.d-par .mly svg{width:100%;height:100%;display:block}
@keyframes mppar{to{transform:translateX(-50%)}}
/* 3 loading */
.d-load{width:76%;display:grid;gap:14px;justify-items:center}
.d-load .lt{width:70px;height:70px;border-radius:22px;background:linear-gradient(145deg,#46521F,#1E2510);display:flex;align-items:center;justify-content:center;letter-spacing:-0.04em;color:#F6F8EE;font-weight:800;font-size:22px;animation:mpbreathe 1.6s ease-in-out infinite}
.d-load .lt span{color:#C9F27C}
@keyframes mpbreathe{50%{transform:scale(.92)}}
.d-load .pb{width:100%;height:6px;border-radius:6px;background:#DDE3CF;overflow:hidden}
.d-load .pb i{display:block;height:100%;width:30%;background:#46521F;border-radius:6px;animation:mppb 2.2s var(--spring) infinite}
@keyframes mppb{0%{width:0}70%{width:100%}100%{width:100%;opacity:0}}
.d-load .sk{width:100%;display:grid;gap:7px}
.d-load .sk i{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,#E3E8D8 25%,#F4F7EC 50%,#E3E8D8 75%);background-size:200% 100%;animation:mpshim 1.4s linear infinite}
.d-load .sk i:nth-child(2){width:80%}.d-load .sk i:nth-child(3){width:60%}
@keyframes mpshim{to{background-position:-200% 0}}
/* 4 travel */
.d-trv{position:absolute;inset:0}
.d-trv svg{position:absolute;inset:0;width:100%;height:100%}
.d-trv .road{fill:none;stroke:#46521F;stroke-width:4;stroke-linecap:round;stroke-dasharray:620;stroke-dashoffset:620;animation:mpdraw 4s ease-in-out infinite}
@keyframes mpdraw{0%{stroke-dashoffset:620}60%,100%{stroke-dashoffset:0}}
.d-trv .car{position:absolute;left:0;top:0;width:26px;height:16px;border-radius:5px;background:#C9F27C;border:2px solid #1E2510;offset-path:path('M30,220 C90,60 170,250 240,120 S360,40 400,70');offset-rotate:auto;animation:mpcar 4s ease-in-out infinite}
@keyframes mpcar{0%{offset-distance:0%}60%,100%{offset-distance:100%}}
.d-trv .pin{position:absolute;right:12%;top:14%;width:18px;height:18px;border-radius:50% 50% 50% 0;background:#B4541A;transform:rotate(-45deg);animation:mppin 4s ease-in-out infinite}
@keyframes mppin{0%,55%{transform:rotate(-45deg) scale(0)}65%,100%{transform:rotate(-45deg) scale(1)}}
/* 5 video */
.d-vid{width:82%;display:grid;gap:12px}
.d-vid .screen{position:relative;aspect-ratio:16/9;border-radius:14px;background:#141812;overflow:hidden;display:grid;place-items:center;perspective:400px}
.d-vid .prod{width:56px;height:56px;transform-style:preserve-3d;animation:mpspinY 4s linear infinite}
.d-vid .prod i{position:absolute;inset:0;border-radius:10px;background:linear-gradient(145deg,#5C6B2A,#2A3311);border:1px solid rgba(201,242,124,.3)}
.d-vid .prod i:nth-child(1){transform:translateZ(28px)}.d-vid .prod i:nth-child(2){transform:rotateY(90deg) translateZ(28px)}.d-vid .prod i:nth-child(3){transform:rotateY(180deg) translateZ(28px)}.d-vid .prod i:nth-child(4){transform:rotateY(-90deg) translateZ(28px)}
@keyframes mpspinY{to{transform:rotateX(-18deg) rotateY(360deg)}}
.d-vid .mp-rec{position:absolute;left:10px;top:10px;font-size:10px;font-family:'JetBrains Mono',monospace;color:#C9F27C;display:flex;gap:6px;align-items:center}
.d-vid .mp-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF5A4E;animation:mpblinkR 1s steps(1) infinite}
@keyframes mpblinkR{50%{opacity:0}}
.d-vid .scrub{position:relative;height:6px;border-radius:6px;background:#DDE3CF}
.d-vid .scrub i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:#46521F;animation:mpscrub 4s linear infinite}
.d-vid .scrub b{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #46521F;transform:translate(-50%,-50%);animation:mpknob 4s linear infinite}
@keyframes mpscrub{from{width:0}to{width:100%}}
@keyframes mpknob{from{left:0}to{left:100%}}
/* 6 micro */
.d-mic{display:grid;gap:18px;justify-items:center}
.d-mic .mbtn{position:relative;overflow:hidden;padding:12px 26px;border-radius:999px;background:#46521F;color:#fff;font-weight:600;font-size:14px;animation:mppress 3s var(--spring) infinite}
.d-mic .mbtn::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);animation:mpripple 3s ease-out infinite}
@keyframes mppress{0%,30%,100%{transform:none}35%{transform:scale(.94)}45%{transform:scale(1.03)}}
@keyframes mpripple{0%,33%{transform:translate(-50%,-50%) scale(0);opacity:1}60%,100%{transform:translate(-50%,-50%) scale(18);opacity:0}}
.d-mic .row{display:flex;gap:22px;align-items:center}
.d-mic .tg{width:52px;height:30px;border-radius:999px;background:#C7CDB8;position:relative;animation:mptgbg 3s steps(1) infinite}
.d-mic .tg::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);animation:mptgk 3s var(--spring) infinite}
@keyframes mptgbg{0%{background:#C7CDB8}50%{background:#46521F}}
@keyframes mptgk{0%,45%{transform:none}55%,95%{transform:translateX(22px)}}
.d-mic .heart{width:30px;height:30px;color:#D6455D;animation:mpheart 3s var(--spring) infinite}
@keyframes mpheart{0%,60%{transform:scale(1);opacity:.35}68%{transform:scale(1.45);opacity:1}78%,100%{transform:scale(1);opacity:1}}
/* 7 page transitions */
.d-pg{position:relative;width:78%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.d-pg .pa,.d-pg .pb2{position:absolute;inset:0;padding:16px;display:grid;align-content:start;gap:8px}
.d-pg .pa i,.d-pg .pb2 i{display:block;height:10px;border-radius:5px;background:#D9DFC9}
.d-pg .pa i:first-child{height:44px;background:#C9F27C}
.d-pg .pb2{background:#1E2510;animation:mppgB 4s steps(1) infinite}
.d-pg .pb2 i{background:#46521F}.d-pg .pb2 i:first-child{height:60px;background:#5C6B2A}
@keyframes mppgB{0%,49%{opacity:0}50%,100%{opacity:1}}
.d-pg .wipe{position:absolute;inset:0;background:#C9F27C;transform:translateX(-101%);animation:mpwipe 4s var(--spring) infinite}
@keyframes mpwipe{0%,30%{transform:translateX(-101%)}48%,52%{transform:translateX(0)}70%,100%{transform:translateX(101%)}}
/* 8 3D */
.d-3d{perspective:600px;position:relative;width:200px;height:200px;display:grid;place-items:center}
.d-3d .cube{width:80px;height:80px;position:relative;transform-style:preserve-3d;animation:mprot3 8s linear infinite}
.d-3d .cube i{position:absolute;inset:0;border-radius:12px;border:1px solid rgba(255,255,255,.25)}
.d-3d .cube i:nth-child(1){transform:translateZ(40px);background:linear-gradient(145deg,#C9F27C,#7FAF2A)}
.d-3d .cube i:nth-child(2){transform:rotateY(90deg) translateZ(40px);background:#46521F}
.d-3d .cube i:nth-child(3){transform:rotateY(180deg) translateZ(40px);background:#5C6B2A}
.d-3d .cube i:nth-child(4){transform:rotateY(-90deg) translateZ(40px);background:#2A3311}
.d-3d .cube i:nth-child(5){transform:rotateX(90deg) translateZ(40px);background:#9AB55A}
.d-3d .cube i:nth-child(6){transform:rotateX(-90deg) translateZ(40px);background:#1E2510}
@keyframes mprot3{to{transform:rotateX(360deg) rotateY(720deg)}}
.d-3d .morb{position:absolute;width:10px;height:10px;border-radius:50%;background:#C9F27C;box-shadow:0 0 12px #C9F27C;animation:mporbit 3s linear infinite;offset-path:path('M100,20 A80,30 0 1,1 99.9,20');}
.d-3d .morb:nth-child(2){animation-delay:-1s}.d-3d .morb:nth-child(3){animation-delay:-2s}
@keyframes mporbit{to{offset-distance:100%}}
/* 9 text */
.d-txt{width:86%;display:grid;gap:16px;text-align:left;color:#1E2510}
.d-txt .big{font-size:26px;font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.d-txt .big .w{color:#46521F;border-right:3px solid #46521F;padding-right:2px;white-space:nowrap;animation:mpcaret .8s steps(1) infinite}
@keyframes mpcaret{50%{border-color:transparent}}
.d-txt .scr{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.1em;color:#5C6B2A}
.d-txt .mq{overflow:hidden;white-space:nowrap;border-top:1px solid #CBD3B5;border-bottom:1px solid #CBD3B5;padding:6px 0}
.d-txt .mq span{display:inline-block;animation:mpmq 8s linear infinite;font-weight:600;font-size:14px}
@keyframes mpmq{to{transform:translateX(-50%)}}
/* 10 data */
.d-dat{width:84%;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.d-dat .num{font-size:36px;font-weight:700;letter-spacing:-0.04em;color:#1E2510;font-variant-numeric:tabular-nums}
.d-dat .num small{display:block;font-size:12px;font-weight:500;color:#5C6B2A;letter-spacing:0}
.d-dat .bars{display:flex;align-items:flex-end;gap:7px;height:90px}
.d-dat .bars i{flex:1;border-radius:5px 5px 0 0;background:#9AB55A;height:var(--h);transform-origin:bottom;animation:mpgrow 3.6s var(--spring) infinite;animation-delay:var(--d)}
.d-dat .bars i:last-child{background:#46521F}
@keyframes mpgrow{0%,5%{transform:scaleY(0)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.d-dat .donut{grid-column:1/-1;display:flex;gap:14px;align-items:center;font-size:13px;color:#46521F;font-weight:600}
.d-dat .donut svg{width:56px;height:56px;transform:rotate(-90deg)}
.d-dat .donut circle{fill:none;stroke-width:8}
.d-dat .donut .fg{stroke:#46521F;stroke-dasharray:138;stroke-dashoffset:138;stroke-linecap:round;animation:mpdonut 3.6s var(--spring) infinite}
@keyframes mpdonut{0%,5%{stroke-dashoffset:138}40%,85%{stroke-dashoffset:34}100%{stroke-dashoffset:138}}

/* 11 sales demo */
.d-sale{position:relative;width:200px;height:250px;border-radius:28px;background:#fff;border:6px solid #1E2510;overflow:hidden;box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}
.d-sale .ln{height:9px;border-radius:5px;background:#E3E8D8;margin:10px 14px 0}
.d-sale .ln.h{height:30px;background:#C9D6A8;margin-top:18px}
.d-sale .mtoast{position:absolute;left:10px;right:10px;top:12px;background:#1E2510;color:#F2F4EE;font-size:10.5px;border-radius:12px;padding:8px 10px;display:flex;gap:8px;align-items:center;transform:translateY(-140%);animation:mptoast 5s var(--spring) infinite}
.d-sale .mtoast i{width:20px;height:20px;border-radius:50%;background:#C9F27C;flex:none}
@keyframes mptoast{0%,10%{transform:translateY(-140%)}18%,55%{transform:none}65%,100%{transform:translateY(-140%)}}
.d-sale .bar{position:absolute;left:0;right:0;bottom:0;background:#46521F;color:#fff;font-size:12px;font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;transform:translateY(100%);animation:mpcta 5s var(--spring) infinite}
.d-sale .bar span{background:#C9F27C;color:#1E2510;border-radius:999px;padding:5px 10px;font-size:11px}
@keyframes mpcta{0%,30%{transform:translateY(100%)}40%,90%{transform:none}100%{transform:translateY(100%)}}
.d-sale .cart{position:absolute;right:12px;top:58px;width:26px;height:26px;border-radius:8px;background:#F2F3EE;display:grid;place-items:center;font-size:12px}
.d-sale .cart b{position:absolute;right:-5px;top:-5px;width:15px;height:15px;border-radius:50%;background:#D6455D;color:#fff;font-size:9px;display:grid;place-items:center;animation:mpbump 5s var(--spring) infinite}
@keyframes mpbump{0%,70%{transform:scale(0)}76%{transform:scale(1.5)}82%,100%{transform:scale(1)}}
.d-sale .fly{position:absolute;left:40px;top:150px;width:14px;height:14px;border-radius:4px;background:#C9F27C;border:2px solid #46521F;animation:mpfly 5s var(--spring) infinite;opacity:0}
@keyframes mpfly{0%,60%{opacity:0;transform:none}62%{opacity:1}72%{opacity:1;transform:translate(118px,-88px) scale(.5)}74%,100%{opacity:0;transform:translate(118px,-88px) scale(.3)}}


@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ===== v12 intake ===== */
.ik{padding:0 0 30px}
.ik-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3.4vw,40px);box-shadow:0 40px 80px -60px rgba(0,0,0,.35)}
.ik-step{display:none}
.ik-step.on{display:block;animation:ikIn .6s var(--spring) both}
@keyframes ikIn{from{opacity:0;transform:translateY(12px)}}
.ik-card h2{font-size:clamp(24px,2.8vw,36px)}
.ik-paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.ik-path{position:relative;text-align:left;text-decoration:none;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:26px;cursor:pointer;display:flex;flex-direction:column;gap:10px;overflow:hidden;font:inherit;transition:transform .6s var(--spring),border-color .3s}
.ik-path::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--tint-a),transparent 70%);transition:transform 1s var(--spring)}
.ik-path:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 30px 60px -40px color-mix(in srgb,var(--accent) 70%,transparent)}
.ik-path:hover::before{transform:scale(1.5)}
.ik-path[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.ik-path > *{position:relative}
.ik-pic{width:54px;height:54px;border-radius:16px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;transition:transform .7s var(--spring)}
.ik-pic svg{width:28px;height:28px}
.ik-path:hover .ik-pic{transform:rotate(-10deg) scale(1.06)}
.ik-path b{font-size:clamp(20px,2vw,24px);letter-spacing:-0.02em;margin-top:6px}
.ik-sub{color:var(--muted);font-size:15px}
.ik-list{display:grid;gap:6px;margin:6px 0 4px}
.ik-list i{font-style:normal;font-size:14px;display:flex;gap:8px;align-items:center}
.ik-list i::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.1L11.5 5.6' fill='none' stroke='%23657a2a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ik-go{margin-top:auto;font-weight:600;color:var(--accent);font-size:15px}
.ik-skip{margin-top:18px;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
@media (max-width:760px){.ik-paths{grid-template-columns:1fr}}
.ik-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ik-badge{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.ik-count{font-size:13px;color:var(--muted)}
.ik-prog{height:5px;border-radius:5px;background:var(--mist-2);margin:14px 0 26px;overflow:hidden}
.ik-prog i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width .7s var(--spring)}
.ik-qt{font-size:clamp(22px,2.6vw,32px);letter-spacing:-0.03em;line-height:1.15}
.ik-qs{color:var(--muted);margin-top:6px}
.ik-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ik-opt{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:14px 18px;font:inherit;font-size:15.5px;cursor:pointer;transition:border-color .25s,background .25s,transform .4s var(--spring)}
.ik-opt:hover{border-color:var(--accent);transform:translateY(-2px)}
.ik-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.ik-fields{display:grid;gap:12px;margin-top:22px;max-width:620px}
.ik-fields label{display:grid;gap:6px;font-size:14px;font-weight:500}
.ik-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.ik-res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ik-price{text-align:right;display:grid}
.ik-price b{font-size:clamp(40px,5vw,60px);letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums}
.ik-price small{font-size:13px;color:var(--muted)}
.ik-res-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.ik-res-grid h4{font-size:14px;color:var(--muted);margin:0 0 10px}
.ik-res-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ik-res-grid li{border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14.5px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;animation:ikIn .6s var(--spring) both}
.ik-res-grid li b{font-size:15px}
.ik-res-grid li small{grid-column:1/-1;color:var(--muted);font-size:13.5px}
.ik-res-grid li .tg{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;align-self:start}
.ik-notes li{background:var(--mist);border-color:transparent;grid-template-columns:1fr}
.ik-notes li.warn{background:color-mix(in srgb,var(--warn) 10%,var(--surface));color:var(--ink)}
.ik-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.ik-hidden{display:none}
@media (max-width:760px){.ik-res-grid{grid-template-columns:1fr}.ik-price{text-align:left}}

/* ===== v13 plan-your-website flow ===== */
.pf{padding:0 0 36px}
.pf-card{background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:clamp(20px,3.4vw,40px);box-shadow:0 40px 80px -60px rgba(0,0,0,.35)}
.pf-dots{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;counter-reset:d}
.pf-dots li{font-size:12px;font-weight:500;color:var(--muted);padding-top:12px;position:relative;text-align:center}
.pf-dots li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:5px;background:var(--mist-2);transition:background .5s}
.pf-dots li.pf-done::before,.pf-dots li.on::before{background:var(--accent)}
.pf-dots li.on{color:var(--ink);font-weight:600}
@media (max-width:640px){.pf-dots li{font-size:0}.pf-dots li.on{font-size:11px}}
.pf-screen{min-height:300px;animation:pfIn .55s var(--spring) both}
@keyframes pfIn{from{opacity:0;transform:translateX(18px)}}
.pf-q{font-size:clamp(24px,3vw,38px);letter-spacing:-0.035em;line-height:1.1}
.pf-sub{color:var(--muted);margin-top:8px;font-size:16px}
.pf-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:24px}
.pf-opt{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:18px;padding:16px 18px;font:inherit;text-align:left;cursor:pointer;display:grid;gap:3px;transition:border-color .25s,background .25s,transform .45s var(--spring)}
.pf-opt b{font-size:16px}
.pf-opt span{font-size:13.5px;color:var(--muted)}
.pf-opt:hover{border-color:var(--accent);transform:translateY(-2px)}
.pf-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.pf-opt.notsure{border-style:dashed}
.pf-field{display:grid;gap:6px;font-size:14px;font-weight:500;margin-top:20px;max-width:520px}
.pf-inds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:22px}
.pf-ind{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:18px;padding:14px;font:inherit;text-align:left;cursor:pointer;display:grid;gap:10px;transition:border-color .3s,transform .5s var(--spring)}
.pf-ind:hover{transform:translateY(-3px);box-shadow:0 18px 30px -24px rgba(0,0,0,.4)}
.pf-ind[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pf-ind b{font-size:14px;line-height:1.25}
.pf-ind .app-ic{width:44px;height:44px}
.pf-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.pf-hint{font-size:13.5px;color:var(--muted);text-align:center}
.pf-look{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.pf-look .pf-opt{padding:22px}
.pf-look .pf-opt b{font-size:18px}
.pf-pals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.pf-pal{border:1.5px solid var(--line);background:var(--surface);border-radius:20px;padding:10px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;transition:transform .45s var(--spring),border-color .3s}
.pf-pal:hover{transform:translateY(-3px)}
.pf-pal[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pf-mini{border-radius:12px;overflow:hidden;background:var(--pb);color:var(--pi);padding:10px 12px 12px;display:grid;gap:6px;height:118px;border:1px solid rgba(0,0,0,.06)}
.pf-mini i{display:block;border-radius:4px}
.pf-mini .l{width:40%;height:7px;background:var(--pi);opacity:.85}
.pf-mini .h{width:85%;height:13px;background:var(--pi);margin-top:6px}
.pf-mini .h2{width:60%;height:13px;background:var(--pi)}
.pf-mini .b{width:34%;height:16px;border-radius:999px;background:var(--p);margin-top:4px}
.pf-mini .c{display:flex;gap:5px;margin-top:4px}.pf-mini .c i{flex:1;height:18px;border-radius:6px;background:var(--s)}
.pf-pal b{display:block;font-size:14px;margin:8px 4px 2px}
@media (max-width:760px){.pf-pals{grid-template-columns:1fr 1fr}.pf-look{grid-template-columns:1fr}}
.pf-feelprev{height:60px;border-radius:12px;background:var(--mist);position:relative;overflow:hidden;margin-bottom:10px}
.pf-feelprev i{position:absolute;left:12px;height:10px;border-radius:5px;background:var(--accent)}
.pf-fp-calm i{animation:pfCalm 3s ease-in-out infinite}.pf-fp-calm i:nth-child(1){top:16px;width:50%}.pf-fp-calm i:nth-child(2){top:34px;width:30%;opacity:.5;animation-delay:.25s}
@keyframes pfCalm{0%,100%{opacity:.25}50%{opacity:1}}
.pf-fp-mod i{animation:pfMod 1.6s var(--bounce) infinite}.pf-fp-mod i:nth-child(1){top:14px;width:45%}.pf-fp-mod i:nth-child(2){top:32px;width:62%;background:var(--accent-2);animation-delay:.15s}
@keyframes pfMod{0%{transform:translateX(-115%)}40%,100%{transform:none}}
.pf-fp-cine{background:#141812}.pf-fp-cine i{left:50%;top:50%;width:14px;height:14px;border-radius:4px;background:var(--accent-2);animation:pfCine 2.4s var(--spring) infinite}.pf-fp-cine i:nth-child(2){animation-delay:.3s;background:#fff}
@keyframes pfCine{0%{transform:translate(-50%,-50%) scale(.2) rotate(0);opacity:0}40%{opacity:1}100%{transform:translate(calc(-50% + 80px),-50%) scale(1.6) rotate(180deg);opacity:0}}
/* plan */
.pf-plan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.pf-badge{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.pf-price{text-align:right;display:grid}
.pf-price b{font-size:clamp(44px,5.4vw,66px);letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums}
.pf-price small{font-size:13px;color:var(--muted)}
.pf-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:26px}
.pf-grid h4{font-size:13.5px;color:var(--muted);margin:18px 0 10px;font-weight:600}
.pf-grid h4:first-child{margin-top:0}
.pf-inc{display:flex;flex-wrap:wrap;gap:6px}
.pf-inc span{font-size:13px;padding:5px 11px;border-radius:999px;background:var(--mist)}
.pf-items{display:grid;gap:8px}
.pf-item{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px;animation:pfIn .5s var(--spring) both}
.pf-item b{font-size:15px}
.pf-item small{grid-column:2/-1;color:var(--muted);font-size:13px}
.pf-item .pr{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.pf-item.off{opacity:.55}
.pf-item.off b{text-decoration:line-through}
.pf-sw{width:44px;height:26px;border-radius:999px;background:var(--mist-2);position:relative;border:0;cursor:pointer;flex:none;transition:background .3s}
.pf-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .45s var(--spring)}
.pf-sw[aria-checked="true"]{background:var(--accent)}
.pf-sw[aria-checked="true"]::after{transform:translateX(18px)}
.pf-side{display:grid;gap:12px;align-content:start}
.pf-box{border:1px solid var(--line);border-radius:18px;padding:16px}
.pf-box h5{margin:0 0 10px;font-size:14px}
.pf-swatches{display:flex;height:30px;border-radius:9px;overflow:hidden;width:150px}
.pf-swatches i{flex:1}
.pf-host{display:grid;gap:6px}
.pf-host button{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.pf-host button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.pf-host button span{color:var(--muted);font-size:13px;white-space:nowrap}
.pf-notes{display:grid;gap:8px}
.pf-notes p{font-size:14px;background:var(--mist);border-radius:12px;padding:10px 12px}
.pf-notes p.warn{background:color-mix(in srgb,var(--warn) 12%,var(--surface))}
.pf-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pf-link{border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0;font-size:14px}
@media (max-width:860px){.pf-grid{grid-template-columns:1fr}.pf-price{text-align:left}}
.pf-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);z-index:45;background:var(--ink);color:var(--bg);border-radius:999px;padding:10px 20px;display:flex;align-items:baseline;gap:10px;box-shadow:0 20px 40px -16px rgba(0,0,0,.45);transition:transform .7s var(--spring);white-space:nowrap}
.pf-bar.on{transform:translate(-50%,0)}
.pf-bar span{font-size:13px;opacity:.75}
.pf-bar b{font-size:20px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.pf-bar small{font-size:12px;opacity:.65}
.pf-next{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-next button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:14px;font:inherit;text-align:left;cursor:pointer;display:grid;gap:3px}
.pf-next button b{font-size:15px}
.pf-next button span{font-size:13px;color:var(--muted)}
.pf-next button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:640px){.pf-next{grid-template-columns:1fr}}
.pf-launch{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px}
.pf-launch p{color:var(--muted);margin-bottom:16px}
.pf-launch-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ===== v14 flow additions ===== */
.pf-h3{font-size:15px;font-weight:600;margin:24px 0 10px;letter-spacing:-0.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);vertical-align:2px;letter-spacing:0}
.pf-tag.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
#pfNext[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.pf-pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pf-pkg{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;padding:20px;text-align:left;cursor:pointer;font:inherit;display:grid;gap:6px;align-content:start;transition:border-color .3s,transform .5s var(--spring)}
.pf-pkg:hover{transform:translateY(-3px)}
.pf-pkg[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--accent-soft)}
.pf-pkg.pop{background:linear-gradient(170deg,var(--tint-a,#EEF5E1),var(--surface) 60%)}
.pf-pkg.pop[aria-pressed="true"]{background:var(--accent-soft)}
.pf-pkg-n{font-size:14px;font-weight:600;color:var(--muted)}
.pf-pkg b{font-size:30px;letter-spacing:-0.04em;line-height:1.05}
.pf-pkg b small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:3px}
.pf-pkg-d{font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.pf-pkgs{grid-template-columns:1fr}}
.pf-feats{display:grid;gap:8px}
.pf-feat{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px;transition:border-color .3s,background .3s}
.pf-feat.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-soft)}
.pf-feat b{font-size:15px;display:block}
.pf-feat span{font-size:13px;color:var(--muted)}
.pf-pr{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);white-space:nowrap;color:var(--ink)!important}
.pf-prods{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--ink)}
.pf-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.pf-step button{border:0;background:none;width:30px;height:30px;font-size:17px;cursor:pointer;color:var(--ink)}
.pf-step b{min-width:28px;text-align:center;font-size:14px}
.pf-prods small{color:var(--muted)}
.pf-note{font-size:13px;color:var(--muted);margin-top:8px}
.pf-modal{position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:20px}
.pf-modal.on{display:grid}
.pf-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pfFade .3s ease both}
.pf-modal-in{position:relative;background:var(--surface);color:var(--ink);border-radius:24px;padding:26px;width:min(480px,100%);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);animation:pfPop .5s var(--spring) both}
.pf-modal-in h3{font-size:21px;letter-spacing:-0.02em}
.pf-modal-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@keyframes pfFade{from{opacity:0}}
@keyframes pfPop{from{opacity:0;transform:translateY(16px) scale(.97)}}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pf-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.pf-chip:hover{border-color:var(--accent)}
.pf-ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14.5px}
.pf-design{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;align-items:start}
@media (max-width:860px){.pf-design{grid-template-columns:1fr}}
.pf-pals{grid-template-columns:repeat(3,1fr)!important;margin-top:0!important}
.pf-pal.sm{padding:8px}
.pf-swx{display:flex;height:34px;border-radius:9px;overflow:hidden}
.pf-swx i{flex:1}
.pf-swx.inl{display:inline-flex;width:80px;height:16px;border-radius:4px;vertical-align:-3px}
.pf-brand{margin-top:14px;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.pf-brand summary{cursor:pointer;font-weight:600;font-size:14.5px}
.pf-hexes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pf-hexes label{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.pf-hex{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:5px 8px}
.pf-hex i{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.1);flex:none}
.pf-hex input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:14px;text-transform:uppercase;color:var(--ink)}
.pf-fonts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pf-font{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 6px;cursor:pointer;font-size:15px}
.pf-font[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.pf-prev{position:sticky;top:90px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--pb);color:var(--pi);font-family:var(--pf);box-shadow:0 30px 60px -40px rgba(0,0,0,.4);transition:background .4s,color .4s}
.pf-prev-bar{display:flex;gap:6px;padding:10px 12px;background:rgba(0,0,0,.05)}
.pf-prev-bar i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.15)}
.pf-prev-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:13px}
.pf-prev-nav b{display:flex;align-items:center;gap:8px;font-size:15px}
.pf-prev-nav b i{width:16px;height:16px;border-radius:5px;background:var(--p)}
.pf-prev-nav span{opacity:.6;font-size:12px}
.pf-prev-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;padding:10px 18px 18px;align-items:center}
.pf-prev-hero h4{font-size:24px;line-height:1.05;margin:0 0 8px;letter-spacing:-0.03em}
.pf-prev-hero p{font-size:13px;opacity:.7;margin-bottom:12px}
.pf-prev-btn{display:inline-block;background:var(--p);color:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600}
.pf-prev-art{aspect-ratio:1;border-radius:16px;background:var(--s);position:relative;overflow:hidden}
.pf-prev-art::after{content:"";position:absolute;width:62%;height:62%;border-radius:50%;background:var(--p);right:-14%;bottom:-14%}
.pf-prev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 18px}
.pf-prev-cards i{height:46px;border-radius:10px;background:color-mix(in srgb,var(--pi) 6%,var(--pb))}
.pf-mbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.pf-mf{margin:0!important;display:flex;gap:6px;flex-wrap:wrap}
.pf-mf button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:7px 13px;font:inherit;font-size:13.5px;cursor:pointer}
.pf-mf button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pf-mcats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media (max-width:860px){.pf-mcats{grid-template-columns:1fr}}
.pf-mcat{border:1px solid var(--line);border-radius:18px;padding:14px}
.pf-mcat-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pf-mcat-h b{font-size:15px}
.pf-lv{display:flex;gap:3px}.pf-lv i{width:14px;height:5px;border-radius:3px;background:var(--mist-2)}.pf-lv i.on{background:var(--accent)}
.pf-mchips{display:flex;flex-wrap:wrap;gap:6px}
.pf-mchip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;transition:border-color .2s,background .2s}
.pf-mchip:hover{border-color:var(--accent)}
.pf-mchip.on{border-color:var(--accent);background:var(--accent-soft)}
.pf-mchip b{font-weight:500}
.pf-mchip.on b::before{content:"✓ ";color:var(--accent)}
.pf-mt{font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:999px;background:var(--mist);color:var(--muted);white-space:nowrap}
.pf-mt.E{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
.pf-mt.S{background:#EEE9FB;color:#5B3FB0}
.pf-mt.A{background:#FFF2DC;color:#9A5B00}
.pf-cl{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pf-cl:last-child{border-bottom:0}
.pf-cl > span:first-child{color:var(--muted);flex:none;width:150px}
.pf-cl > span:last-child{text-align:right}
.pf-barlink{border:0;background:none;color:inherit;opacity:.7;text-decoration:underline;font:inherit;font-size:12px;cursor:pointer;margin-left:4px}
.pf-side .pf-next{grid-template-columns:1fr}

/* ===== v15: Studio9 logo ===== */
.s9-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#4E5B22,#1E2510);box-shadow:inset 0 0 0 1px rgba(201,242,124,.28),0 6px 14px -8px rgba(30,37,16,.6);display:flex;align-items:center;justify-content:center;flex:none;font-family:'Unbounded',sans-serif;font-weight:800;font-size:14px;letter-spacing:-0.06em;color:#F6F8EE;line-height:1;transition:transform .6s var(--spring)}
.s9-mark em{font-style:normal;color:#C9F27C}
.logo:hover .s9-mark{transform:rotate(-8deg) scale(1.05)}
.s9-mark.sm{width:28px;height:28px;border-radius:9px;font-size:10.5px}
.s9-word{display:flex;flex-direction:column;line-height:1}
.s9-word b{font-family:'Unbounded',sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.03em}
.s9-word b em{font-style:normal;color:#8DBF35}
.s9-word small{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:5px}
/* ===== v15: about ===== */
.ab-story{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,70px);align-items:center}
.ab-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ab-facts div{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px}
.ab-facts b{display:block;font-size:clamp(34px,4vw,48px);letter-spacing:-0.05em;line-height:1;color:var(--accent)}
.ab-facts span{font-size:14px;color:var(--muted);margin-top:8px;display:block}
.ab-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.ab-val{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;transition:transform .6s var(--spring)}
.ab-val:hover{transform:translateY(-4px);box-shadow:0 30px 50px -40px rgba(0,0,0,.35)}
.ab-ic{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:14px}
.ab-ic svg{width:22px;height:22px}
.ab-val h3{font-size:19px;margin-bottom:6px}
.ab-val p{color:var(--muted);font-size:15px}
.ab-how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.ab-how div{border-top:2px solid var(--accent);padding-top:16px}
.ab-how span{font-size:13px;font-weight:600;color:var(--accent)}
.ab-how h3{font-size:20px;margin:6px 0}
.ab-how p{color:var(--muted)}
@media (max-width:900px){.ab-story,.ab-vals,.ab-how{grid-template-columns:1fr}}
/* ===== v15: focus mode for the planner ===== */
.pf-card-top{display:none}
body.pf-focus{overflow:hidden}
body.pf-focus .pf{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 40%,transparent);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);animation:pfFade .45s ease both}
body.pf-focus .pf > .wrap{width:100%;max-width:1140px;padding:0}
body.pf-focus .pf-card{height:min(880px,calc(100dvh - 28px));display:flex;flex-direction:column;padding:0;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.45);animation:pfPop .6s var(--spring) both}
body.pf-focus .pf-card-top{display:flex;justify-content:space-between;align-items:center;padding:16px 28px 0;gap:10px}
.pf-ct-brand{display:flex;align-items:center;gap:10px}
.pf-ct-brand b{font-size:15px;letter-spacing:-0.01em}
.pf-exit{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:7px 14px;font:inherit;font-size:13.5px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.pf-exit:hover{color:var(--ink);border-color:var(--ink)}
.pf-exit span{font-size:17px;line-height:1}
body.pf-focus .pf-dots{padding:0 28px;margin:16px 0 0}
body.pf-focus .pf-screen{flex:1;min-height:0;overflow-y:auto;padding:22px 28px 26px;overscroll-behavior:contain}
body.pf-focus .pf-nav{margin:0;padding:14px 28px;border-top:1px solid var(--line);background:var(--surface)}
body.pf-focus #pfBar{display:none!important}
.pf-navmid{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pf-navprice{display:none;align-items:baseline;gap:8px;font-size:13px}
body.pf-focus .pf-navprice:not(:empty){display:inline-flex}
.pf-np-pk{font-weight:600;color:var(--muted)}
.pf-navprice b{font-size:20px;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.pf-navprice small{color:var(--muted)}
.pf-navprice .pf-barlink{color:var(--accent);opacity:1}
body.pf-focus .pf-hint{font-size:12.5px}
@media (max-width:640px){body.pf-focus .pf{padding:0}body.pf-focus .pf-card{height:100dvh;border-radius:0}body.pf-focus .pf-screen,body.pf-focus .pf-nav{padding-left:18px;padding-right:18px}body.pf-focus .pf-card-top{padding:12px 18px 0}body.pf-focus .pf-dots{padding:0 18px}.pf-ct-brand b{display:none}}
/* ===== v15: look step ===== */
.pf-tune{margin-top:14px;border:1px solid var(--line);border-radius:18px;padding:14px}
.pf-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pf-slot{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:8px;display:grid;gap:4px;justify-items:start;cursor:pointer;color:var(--ink);font:inherit;text-align:left}
.pf-slot[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pf-slot i{width:100%;height:20px;border-radius:6px;border:1px solid rgba(0,0,0,.08)}
.pf-slot span{font-size:11.5px;color:var(--muted)}
.pf-slot input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:12.5px;font-weight:600;text-transform:uppercase;color:var(--ink);padding:0}
.pf-wheelrow{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-top:14px;align-items:start}
.pf-wheel{position:relative;width:170px;height:170px;touch-action:none}
.pf-wheel canvas{width:170px;height:170px;border-radius:50%;cursor:crosshair;display:block}
.pf-mark{position:absolute;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}
.pf-lbl{display:grid;gap:6px;font-size:12.5px;color:var(--muted);font-weight:500}
.pf-lbl input{width:100%;accent-color:var(--accent)}
.pf-read{margin-top:12px;display:grid;gap:6px}
.pf-rt{font-size:13px}
.pf-rr{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;align-items:center}
.pf-rr > span:first-child{color:var(--muted)}
.pf-rg{font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;font-size:11.5px}
.pf-rg.ok{background:color-mix(in srgb,#2B8A57 14%,var(--surface));color:#2B8A57}
.pf-rg.mid{background:#FFF2DC;color:#9A5B00}
.pf-rg.bad{background:#FDE8E7;color:#B42318}
.pf-fix{justify-self:start;border:0;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;margin-top:4px}
.pf-rok{font-size:12px;color:#2B8A57}
.pf-prev-btn{color:var(--pbt,#fff)!important}
@media (max-width:560px){.pf-wheelrow{grid-template-columns:1fr}.pf-wheel{margin:0 auto}.pf-slots{grid-template-columns:1fr 1fr}}
/* ===== v15: hosting cards ===== */
.pf-hosts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.pf-host4{position:relative;text-align:left;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:18px;padding:16px 14px 14px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .3s,transform .45s var(--spring)}
.pf-host4:hover{transform:translateY(-3px)}
.pf-host4.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--accent-soft)}
.pf-h4tag{align-self:flex-start;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--mist);color:var(--muted)}
.pf-host4 b{font-size:16px;letter-spacing:-0.02em}
.pf-h4p{font-size:26px;font-weight:650;letter-spacing:-0.04em;line-height:1}
.pf-h4p small{font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:4px}
.pf-host4 p{font-size:12.5px;color:var(--muted);line-height:1.4}
.pf-host4 ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px;flex:1;align-content:start}
.pf-host4 li{font-size:12.5px;line-height:1.35;padding-left:18px;position:relative}
.pf-host4 li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.pf-host4 em{font-style:normal;font-size:11.5px;color:var(--muted);background:var(--mist);border-radius:8px;padding:6px 8px}
.pf-h4sel{margin-top:6px;text-align:center;font-size:13px;font-weight:600;border-radius:999px;padding:7px;background:var(--mist)}
.pf-host4.on .pf-h4sel{background:var(--accent);color:var(--accent-ink)}
@media (max-width:980px){.pf-hosts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pf-hosts{grid-template-columns:1fr}}
/* ===== v15: confirm ===== */
.pf-cf-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:22px;align-items:start}
@media (max-width:900px){.pf-cf-grid{grid-template-columns:1fr}}
.pf-rcpt{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface)}
.pf-rc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 20px;background:linear-gradient(135deg,var(--tint-a,#EEF5E1),var(--surface));border-bottom:1px solid var(--line)}
.pf-rc-top > div{display:flex;align-items:center;gap:10px}
.pf-rc-top b{font-size:18px;letter-spacing:-0.02em}
.pf-rc-top > span{font-size:13px;color:var(--muted)}
.pf-pkgb{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.pf-pkgb.studio{background:#5B3FB0;color:#fff}
.pf-sec{padding:14px 20px 6px;border-bottom:1px solid var(--line)}
.pf-sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pf-sec-h span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-edit{border:0;background:var(--mist);color:var(--accent);border-radius:999px;padding:4px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.pf-edit:hover{background:var(--accent-soft)}
.pf-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:9px 0}
.pf-row + .pf-row{border-top:1px dashed var(--line)}
.pf-ri{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.pf-ri svg{width:17px;height:17px}
.pf-row b{font-size:15px;font-weight:600;display:block}
.pf-row small{font-size:12.5px;color:var(--muted);display:block;line-height:1.35}
.pf-rp{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-row.pk b{font-size:16px}
.pf-row.pk .pf-rp{font-size:17px}
.pf-inc-pill{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,#2B8A57 14%,var(--surface));color:#2B8A57}
.pf-empty{font-size:13.5px;color:var(--muted);padding:6px 0 10px}
.pf-tot{padding:14px 20px 18px;background:var(--mist);display:grid;gap:6px}
.pf-tot div{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.pf-tot .big{margin-top:6px;padding:14px 16px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:600;align-items:baseline}
.pf-tot .big span:last-child{font-size:28px;letter-spacing:-0.04em}
.pf-tot .dep{font-size:13px}
.pf-lookbox .pf-bigsw{display:flex;height:46px;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:10px}
.pf-lookbox .pf-bigsw i{flex:1}
.pf-lookbox p{font-size:14px}
.pf-hostline{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pf-hostline b{font-size:16px}
.pf-hostp{font-size:22px;font-weight:650;letter-spacing:-0.03em}
.pf-hostp small{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0}
.pf-side .pf-box{background:var(--surface)}

/* ===== v16: stats band ===== */
.st9-band{padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,56px)!important;border:0!important}
.st9-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st9{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--surface) 55%,color-mix(in srgb,var(--accent) 7%,var(--surface)));border:1px solid var(--line);border-radius:24px;padding:22px 22px 20px;transition:transform .7s var(--spring),border-color .4s}
.st9::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-60px;top:-60px;background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 30%,transparent),transparent 70%);transition:transform 1s var(--spring);opacity:.8}
.st9:hover{transform:translateY(-6px);box-shadow:0 34px 60px -40px rgba(0,0,0,.35);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.st9:hover::before{transform:scale(1.4)}
.st9 > *{position:relative}
.st9-top{display:flex;align-items:center;gap:10px}
.st9-ic{width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none;transition:transform .7s var(--spring)}
.st9:hover .st9-ic{transform:rotate(-10deg) scale(1.08)}
.st9-ic svg{width:19px;height:19px}
.st9-lbl{font-size:13px;font-weight:600;color:var(--muted)}
.st9-val{display:flex;align-items:baseline;gap:2px;margin:18px 0 10px;line-height:1}
.st9-val > span,.st9-val b{font-size:clamp(36px,3.8vw,50px);font-weight:650;letter-spacing:-0.05em;font-variant-numeric:tabular-nums}
.st9-val small{font-size:15px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0}
.st9-stars{color:#E8A317;letter-spacing:1px;font-size:14px}
.st9-bar{height:5px;border-radius:5px;background:var(--mist-2);overflow:hidden;margin-bottom:12px}
.st9-bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1.6s var(--spring) calc(var(--i)*.12s + .2s)}
.st9.in .st9-bar i{width:var(--w)}
.st9 p{font-size:13.5px;color:var(--muted)}
.st9-ph{position:absolute!important;right:16px;top:20px}
@media (max-width:980px){.st9-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.st9-grid{grid-template-columns:1fr}}
/* ===== v16: planner ===== */
.pf-helpnote{margin-top:14px;background:var(--accent-soft);border-radius:16px;padding:14px 16px;font-size:14.5px;animation:pfPop .5s var(--spring) both}
.pf-why{display:grid;gap:8px;margin-top:18px}
.pf-why div{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.pf-why span{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:12px;flex:none;margin-top:1px}
.pf-recs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.pf-rec{position:relative;border:1.5px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.pf-rec.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 30px 60px -40px rgba(0,0,0,.35);background:linear-gradient(170deg,var(--accent-soft),var(--surface) 60%)}
.pf-recbadge{position:absolute;top:-12px;left:20px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.pf-recp{font-size:36px;letter-spacing:-0.045em;line-height:1}
.pf-recp small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:4px}
.pf-rec ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px;flex:1}
.pf-rec li{font-size:14px;padding-left:20px;position:relative}
.pf-rec li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.pf-reclose{font-size:13px;color:var(--warn)}
.pf-recx{font-size:13px;color:var(--muted)}
@media (max-width:700px){.pf-recs{grid-template-columns:1fr}}
.pf-h4inc{background:var(--mist);border-radius:10px;padding:8px 10px}
.pf-h4inc-t{display:block;font-size:11.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.pf-host4 ul.dim{gap:3px}
.pf-host4 ul.dim li{font-size:11.5px;color:var(--muted)}
.pf-h4plus{font-size:11.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
/* standout price in the planner footer */
body.pf-focus .pf-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
body.pf-focus #pfBack{justify-self:start}
body.pf-focus #pfNext{justify-self:end;grid-column:3}
body.pf-focus .pf-navprice:not(:empty){display:inline-flex;align-items:center;gap:12px;background:var(--accent-soft);border:1.5px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:999px;padding:6px 8px 6px 8px}
.pf-np-pk{font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--accent);color:var(--accent-ink)!important}
.pf-np-pk.studio{background:#5B3FB0;color:#fff!important}
.pf-np-v{display:inline-flex;align-items:baseline;gap:6px}
.pf-navprice .pf-np-v b{font-size:30px;letter-spacing:-0.045em;line-height:1}
.pf-navprice .pf-np-v small{font-size:13px;font-weight:500}
.pf-navprice .pf-barlink{font-size:13px;font-weight:600;margin:0 6px 0 0}
.pf-navprice.bump .pf-np-v b{animation:pfBump .6s var(--spring)}
@keyframes pfBump{0%{transform:scale(1)}35%{transform:scale(1.14);color:var(--accent)}100%{transform:scale(1)}}
@media (max-width:640px){.pf-navprice .pf-np-v b{font-size:22px}.pf-np-pk{display:none}.pf-navprice .pf-barlink{display:none}}

/* ===== v17: planner shared with pricing ===== */
.pf-modal{z-index:400!important}
.pf-mdemo > .d-txt,.pf-mdemo > .d-dat{transform:translate(-50%,-50%) scale(.32)}
.pf-am-demo > .d-txt,.pf-am-demo > .d-dat{transform:translate(-50%,-50%) scale(.6)}
.calc-legacy{display:none!important}
.pf-pricing-sec{padding:0 0 70px}
#pfBar{display:none!important}
.pf-navprice:not(:empty){display:inline-flex!important;align-items:center;gap:12px;background:var(--accent-soft);border:1.5px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:999px;padding:6px 8px}
.pf-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
#pfBack{justify-self:start}#pfNext{justify-self:end;grid-column:3}
body.pf-inline #pf{padding:0}
body.pf-inline .pf-nav{position:sticky;bottom:0;background:var(--surface);z-index:5;margin:24px -40px -40px;padding:14px 40px;border-radius:0 0 30px 30px;box-shadow:0 -14px 30px -24px rgba(0,0,0,.25)}
@media (max-width:640px){body.pf-inline .pf-nav{margin:20px -20px -20px;padding:12px 20px}}
/* inclusions grid */
.pf-incgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-incgrid > div{display:flex;gap:10px;align-items:flex-start;background:var(--mist);border-radius:14px;padding:10px 12px}
.pf-incck{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,#2B8A57 16%,var(--surface));color:#2B8A57;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-top:1px}
.pf-incgrid b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.pf-incgrid small{display:block;font-size:12px;color:var(--muted)}
@media (max-width:820px){.pf-incgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pf-incgrid{grid-template-columns:1fr}}
/* motion previews */
.pf-mtools{display:flex;align-items:center;gap:16px}
.pf-prevtg{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);cursor:pointer}
.pf-prevtg input{accent-color:var(--accent);width:16px;height:16px}
.pf-mcat.has-prev{display:grid;grid-template-columns:118px 1fr;gap:4px 14px;align-items:start}
.pf-mcat.has-prev .pf-mdemo{grid-row:1/3}
.pf-mcat.has-prev .pf-mcat-h,.pf-mcat.has-prev .pf-mchips{grid-column:2}
.pf-mdemo,.pf-am-demo{position:relative;overflow:hidden;border-radius:12px;background:var(--dbg,#EEF2E4);isolation:isolate}
.pf-mdemo{width:118px;height:84px}
.pf-mdemo > *,.pf-am-demo > *{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.42);transform-origin:center}
.pf-am-demo > *{transform:translate(-50%,-50%) scale(.72)}
.pf-mdemo > .d-par,.pf-am-demo > .d-par{inset:0;left:0;top:0;transform:none;width:100%;height:100%}
.pf-mdemo > .d-trv,.pf-am-demo > .d-trv{width:430px;height:260px;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%) scale(.28)}
.pf-am-demo > .d-trv{transform:translate(-50%,-50%) scale(.5)}
.pf-mdemo > .d-sale{transform:translate(-50%,-50%) scale(.32)}
.pf-am-demo > .d-sale{transform:translate(-50%,-50%) scale(.56)}
@media (max-width:560px){.pf-mcat.has-prev{grid-template-columns:1fr}.pf-mcat.has-prev .pf-mdemo{grid-row:auto;width:100%}.pf-mcat.has-prev .pf-mcat-h,.pf-mcat.has-prev .pf-mchips{grid-column:1}}
.pf-modal-in.wide{width:min(1080px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;padding:24px}
.pf-am-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.pf-am-x{border:0;background:var(--mist);width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;color:var(--ink);flex:none}
.pf-am-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pf-am-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);transition:transform .5s var(--spring)}
.pf-am-card:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(0,0,0,.35)}
.pf-am-demo{height:150px;border-radius:0}
.pf-am-b{padding:12px 14px 14px}
.pf-am-t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pf-am-t b{font-size:15px}
.pf-am-b p{font-size:13px;color:var(--muted);margin:4px 0 8px}
.pf-am-n{font-size:12px;font-weight:600;color:var(--accent)}
/* ===== v17: hosting compare ===== */
.cmp9{margin-top:34px;border:1px solid var(--line);border-radius:26px;background:var(--surface);overflow:hidden;box-shadow:0 40px 80px -60px rgba(0,0,0,.3)}
.cmp9-scroll{overflow-x:auto}
.cmp9 table{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.cmp9 th:first-child{width:24%}
.cmp9 tfoot .btn{width:100%;white-space:nowrap}
.cmp9 th,.cmp9 td{padding:16px 18px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp9 thead th{vertical-align:bottom;background:var(--surface);padding-top:26px;position:relative}
.cmp9-corner span{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp9-corner small{font-size:12px;color:var(--muted);font-weight:400}
.cmp9-h em{position:absolute;top:8px;left:18px;font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.cmp9-h.top em{background:#5B3FB0;color:#fff}
.cmp9-tag{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:14px}
.cmp9-h b{display:block;font-size:17px;letter-spacing:-0.02em;margin-top:2px}
.cmp9-p{font-size:34px;font-weight:650;letter-spacing:-0.045em;line-height:1;margin-top:8px;color:var(--accent)}
.cmp9-p small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:4px}
.cmp9 tbody th{font-weight:600;font-size:14.5px;white-space:nowrap}
.cmp9-ri{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);margin-right:10px;vertical-align:middle}
.cmp9-ri svg{width:16px;height:16px}
.cmp9 tbody tr:nth-child(even) th,.cmp9 tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--mist) 55%,var(--surface))}
.cmp9 tbody tr{transition:background .2s}
.cmp9 tbody tr:hover th,.cmp9 tbody tr:hover td{background:var(--accent-soft)}
.cmp9 .pop{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.cmp9 thead .pop,.cmp9 thead .top{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface))}
.cmp9 tbody tr:nth-child(even) td.pop{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.cv{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;line-height:1.35}
.cv svg{width:16px;height:16px;flex:none;border-radius:50%;padding:2px}
.cv.yes svg{background:color-mix(in srgb,#2B8A57 16%,var(--surface));color:#2B8A57}
.cv.no{color:var(--muted)}
.cv.no svg{background:var(--mist-2);color:var(--muted)}
.cv.mid{color:#9A5B00}
.cv.mid::before{content:"";width:8px;height:8px;border-radius:50%;background:#F2A33A;flex:none}
.cv.txt{color:var(--muted)}
.cmp9 tfoot td,.cmp9 tfoot th{border-bottom:0;padding:16px 18px 20px}
/* ===== v17: industry covers ===== */
.ind{--ip:28px}
[data-page="home"] .ind{--ip:22px}
.ind.has-cover{padding-top:0!important}
.ind-cover{position:relative;margin:0 calc(var(--ip)*-1) 0;height:118px;overflow:hidden;border-radius:22px 22px 0 0}
.ind-cover svg,.ind-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--spring)}
.ind:hover .ind-cover svg,.ind:hover .ind-cover img{transform:scale(1.06)}
.ind-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.12))}
.ind.has-cover .app-ic{margin-top:-26px;position:relative;z-index:2;box-shadow:0 0 0 4px var(--surface),0 10px 22px -10px var(--c2)!important}
.ind.has-cover::before{display:none}

/* ===== v18 ===== */
#pfFormSlot .pf-next{display:none}
#pfFormSlot .form{box-shadow:none;border:0;padding:0;background:transparent}
.pf-ct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pf-ct-sum{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border-radius:999px;padding:6px 14px 6px 8px}
.pf-ct-sum b{font-size:22px;letter-spacing:-0.03em}
.pf-ct-sum small{color:var(--muted);font-size:12.5px}
.pf-sec-t{display:inline-flex!important;align-items:center;gap:8px}
.pf-sec-ic{width:22px;height:22px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:inline-grid;place-items:center;font-style:normal}
.pf-sec-ic svg{width:13px;height:13px}
/* how it works cards: 3 per screen */
.j-steps{gap:16px!important}
.j-step{grid-template-columns:1fr 1.25fr!important;gap:22px!important;padding:24px 26px!important;align-items:start}
.j-step h3{font-size:clamp(21px,2.1vw,26px)!important;margin-bottom:6px!important}
.j-step p{font-size:15px}
.j-cols{grid-template-columns:1fr 1fr!important;gap:10px!important}
.j-cols > div{border-radius:16px;padding:12px 14px}
.jc-do{background:color-mix(in srgb,#F2A33A 12%,var(--surface));border:1px solid color-mix(in srgb,#F2A33A 30%,var(--line))}
.jc-get{background:color-mix(in srgb,var(--accent) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.j-cols h4{display:flex;align-items:center;gap:8px;font-size:12.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px!important}
.jc-ic{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none}
.jc-do .jc-ic{background:#F2A33A;color:#fff}
.jc-get .jc-ic{background:var(--accent);color:var(--accent-ink)}
.jc-ic svg{width:14px;height:14px}
.j-cols ul{list-style:none;padding:0!important;gap:6px!important;font-size:14px!important;color:var(--ink)!important}
.j-cols li{position:relative;padding-left:20px;line-height:1.35}
.jc-do li::before{content:"→";position:absolute;left:0;color:#C77A14;font-weight:700}
.jc-get li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
@media (max-width:900px){.j-step{grid-template-columns:1fr!important}}
@media (max-width:560px){.j-cols{grid-template-columns:1fr!important}}
/* motion page: no side panel, 3 cards across, shorter */
#mp .mp-layout{grid-template-columns:1fr!important}
#mp .mp-rcpt{display:none!important}
#mp .mp-cat{grid-template-columns:220px 1fr!important;margin-bottom:22px!important}
#mp .mp-cat{transition:transform .6s var(--spring),border-color .3s}
#mp .mp-cat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -32px rgba(20,30,10,.35),0 10px 24px -18px rgba(20,30,10,.25);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
@media (prefers-reduced-motion: reduce){#mp .mp-cat:hover{transform:none}}
#mp .mp-cdemo{min-height:0!important}
#mp .mp-cbody{padding:20px 22px 22px}
#mp .mp-ctop{margin-bottom:12px}
#mp .mp-ctop h3{font-size:18px}
#mp .mp-ctop p{font-size:13.5px}
#mp .mp-chips{grid-template-columns:repeat(3,1fr)!important;gap:8px}
#mp .mp-chip{padding:11px 12px 11px 34px;border-radius:12px}
#mp .mp-chip::before{left:11px;top:13px;width:15px;height:15px}
#mp .mp-chip b{font-size:13.5px}
#mp .mp-chip span:not(.mp-pr):not(.mp-dots){font-size:12.5px}
#mp .mp-chip.incl{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--accent-soft)}
#mp .mp-chip.incl:not([aria-pressed="true"])::before{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
#mp .mp-chip .mp-dots{display:none}
#mp .mp-chip.mp-rec::after{display:none}
@media (max-width:1000px){#mp .mp-chips{grid-template-columns:1fr 1fr!important}}
@media (max-width:760px){#mp .mp-cat{grid-template-columns:1fr!important}#mp .mp-chips{grid-template-columns:1fr!important}}
.mp-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);z-index:60;display:flex;align-items:center;gap:16px;background:var(--ink);color:var(--bg);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 20px 40px -16px rgba(0,0,0,.45);transition:transform .6s var(--spring);font-size:14px;white-space:nowrap}
.mp-bar.on{transform:translate(-50%,0)}
.mp-bar b{font-size:18px}
/* industry photo carousel */
.ind-slide{opacity:0;transition:opacity .9s ease,transform 6s linear!important;transform:scale(1.04)}
.ind-slide.on{opacity:1;transform:scale(1.12)}
.ind-dots{position:absolute;right:10px;bottom:8px;display:flex;gap:4px;z-index:2}
.ind-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .3s,width .3s}
.ind-dots i.on{background:#fff;width:14px;border-radius:4px}
.ind-cover svg{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-2%,-1%)}}

/* ===== v23: sales motion showcase ===== */
.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1050px){.sm-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sm-grid{grid-template-columns:1fr}}
.sm-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--spring),border-color .3s}
.sm-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -32px rgba(20,30,10,.35);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.sm-stage{position:relative;height:250px;background:#EEF2E4;display:grid;place-items:center;overflow:hidden;color:#1E2510}
.sm-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.sm-t{display:flex;align-items:center;gap:10px}
.sm-n{font-size:12px;font-weight:700;color:var(--muted)}
.sm-t h3{font-size:18px;flex:1}
.sm-p{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.sm-p.inc{background:color-mix(in srgb,#2B8A57 14%,var(--surface));color:#2B8A57}
.sm-p.add{background:#FFF2DC;color:#9A5B00}
.sm-p.studio{background:#EEE9FB;color:#5B3FB0}
.sm-p.ref{background:var(--mist);color:var(--muted)}
.sm-body p{color:var(--muted);font-size:14.5px}
.sm-best{display:flex;gap:6px;flex-wrap:wrap}
.sm-best span{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--mist)}
.sm-addbtn{align-self:flex-start;margin-top:auto}
.sm-addbtn.on{background:var(--accent);color:var(--accent-ink)}
.sm-honest{margin-top:26px;font-size:14px;color:var(--muted);background:var(--mist);border-radius:14px;padding:12px 16px}
/* 1 sticky */
.sm-phone{width:150px;height:220px;border-radius:24px;border:6px solid #1E2510;background:#fff;position:relative;overflow:hidden}
.sm-feed{position:absolute;left:0;right:0;top:0;padding:10px;display:grid;gap:8px;animation:smScroll 6s ease-in-out infinite}
.sm-feed i{display:block;height:9px;border-radius:5px;background:#E3E8D8}.sm-feed i.h{height:46px;background:#D5DEC2}
@keyframes smScroll{0%,15%{transform:translateY(0)}55%,85%{transform:translateY(-110px)}100%{transform:translateY(0)}}
.sm-sticky{position:absolute;left:0;right:0;bottom:0;background:#46521F;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font-size:11px;transform:translateY(100%);animation:smBar 6s var(--spring) infinite}
.sm-sticky b{background:#C9F27C;color:#1E2510;border-radius:999px;padding:4px 9px;font-size:10.5px}
@keyframes smBar{0%,30%{transform:translateY(100%)}42%,88%{transform:none}100%{transform:translateY(100%)}}
/* 2 reviews */
.sm-rvstage{width:84%;height:80%;position:relative}
.sm-page{background:#fff;border-radius:14px;height:100%;padding:14px;display:grid;gap:8px;align-content:start}
.sm-page i{display:block;height:10px;border-radius:5px;background:#E3E8D8}.sm-page i.h{height:60px;background:#D5DEC2}
.sm-toast{position:absolute;left:12px;right:12px;bottom:12px;background:#1E2510;color:#F2F4EE;border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 30px -16px rgba(0,0,0,.5);transform:translateY(130%);opacity:0;transition:transform .7s var(--spring),opacity .4s}
.sm-toast.on{transform:none;opacity:1}
.sm-av{width:34px;height:34px;border-radius:50%;background:#C9F27C;color:#1E2510;display:grid;place-items:center;font-weight:700;flex:none}
.sm-stars{color:#F2C14E;font-size:11px;letter-spacing:1px}
.sm-toast p{font-size:12.5px;margin:2px 0}
.sm-toast small{font-size:10.5px;opacity:.7}
/* 3 countdown */
.sm-cd{width:86%;background:#1E2510;color:#fff;border-radius:18px;padding:18px;text-align:center;display:grid;gap:12px;justify-items:center}
.sm-cd-t{font-size:12.5px;opacity:.75}
.sm-cd-n{display:flex;gap:8px}
.sm-cd-n div{background:rgba(255,255,255,.08);border-radius:10px;padding:8px 6px;min-width:50px}
.sm-cd-n b{display:block;font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.sm-cd-n small{font-size:10px;opacity:.6}
.sm-cd-n b.tick{animation:smTick .4s ease}
@keyframes smTick{0%{transform:translateY(-6px);opacity:.3}100%{transform:none;opacity:1}}
.sm-cd-btn{background:#C9F27C;color:#1E2510;font-weight:700;font-size:12.5px;border-radius:999px;padding:7px 14px}
/* 4 voucher */
.sm-vch{display:grid;gap:14px;justify-items:center;perspective:700px}
.sm-vflip{width:200px;height:118px;position:relative;transform-style:preserve-3d;transition:transform .9s var(--bounce)}
.sm-vflip.flip{transform:rotateY(180deg)}
.sm-vfront,.sm-vback{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:grid;place-content:center;text-align:center;gap:4px;box-shadow:0 16px 30px -18px rgba(0,0,0,.5)}
.sm-vfront{background:linear-gradient(135deg,#B86675,#7E3A4A);color:#fff}
.sm-vfront b{font-size:18px}.sm-vfront span{font-size:12px;opacity:.8}
.sm-vback{background:linear-gradient(135deg,#F6E7DE,#E8C9BC);color:#3A2A2E;transform:rotateY(180deg)}
.sm-vback b{font-size:34px;letter-spacing:-0.03em}.sm-vback small,.sm-vback span{font-size:11.5px;opacity:.75}
.sm-vamts{display:flex;gap:6px}
.sm-vamts button{border:1.5px solid #CBD3B5;background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:#1E2510}
.sm-vamts button.on{background:#46521F;color:#fff;border-color:#46521F}
/* 5 quiz */
.sm-quiz{width:86%;background:#fff;border-radius:18px;padding:16px;box-shadow:0 16px 30px -24px rgba(0,0,0,.4)}
.sm-qbar{height:5px;border-radius:5px;background:#E3E8D8;overflow:hidden;margin-bottom:12px}
.sm-qbar i{display:block;height:100%;width:0;background:#46521F;transition:width .6s var(--spring)}
.sm-qbody{animation:smIn .5s var(--spring)}
@keyframes smIn{from{opacity:0;transform:translateX(14px)}}
.sm-qbody b{display:block;font-size:14.5px;margin-bottom:10px}
.sm-qopts{display:grid;gap:6px}
.sm-qopts button{text-align:left;border:1.5px solid #E3E8D8;background:#fff;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer;color:#1E2510;transition:border-color .2s,background .2s}
.sm-qopts button.on,.sm-qopts button:hover{border-color:#46521F;background:#EEF4E0}
.sm-qres{display:grid;gap:8px}
.sm-qres span{font-size:12px;color:#5C6B2A}
.sm-qres em{font-style:normal;align-self:start;background:#46521F;color:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;justify-self:start}
/* 6 cart */
.sm-shop{width:88%;height:82%;background:#fff;border-radius:16px;position:relative;overflow:hidden;padding:12px}
.sm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sm-cart{position:relative;font-size:18px}
.sm-cart i{position:absolute;right:-8px;top:-6px;min-width:16px;height:16px;border-radius:999px;background:#D6455D;color:#fff;font-size:10px;font-style:normal;display:grid;place-items:center;padding:0 4px}
.sm-cart i.bump{animation:smBump .5s var(--bounce)}
@keyframes smBump{50%{transform:scale(1.6)}}
.sm-prod{display:flex;gap:12px;align-items:center}
.sm-pimg{width:80px;height:90px;border-radius:12px;background:linear-gradient(150deg,#E9D8C8,#B0896A)}
.sm-prod b{display:block;font-size:14px}.sm-prod small{font-size:12px;color:#666}
.sm-prod button{display:block;margin-top:8px;border:0;background:#46521F;color:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.sm-fly{position:absolute;left:30px;top:70px;width:22px;height:24px;border-radius:6px;background:linear-gradient(150deg,#E9D8C8,#B0896A);opacity:0;pointer-events:none}
.sm-fly.go{animation:smFly .8s var(--spring) forwards}
@keyframes smFly{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.4)}}
.sm-drawer{position:absolute;top:0;right:0;bottom:0;width:62%;background:#F7F8F3;border-left:1px solid #E3E8D8;padding:12px;display:grid;align-content:start;gap:10px;transform:translateX(105%);transition:transform .6s var(--spring)}
.sm-drawer.on{transform:none}
.sm-drawer b{font-size:13px}
.sm-drawer div{display:flex;gap:8px;align-items:center;font-size:12px}
.sm-dimg{width:26px;height:30px;border-radius:6px;background:linear-gradient(150deg,#E9D8C8,#B0896A)}
.sm-dbtn{background:#46521F;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;text-align:center;font-weight:600}
/* 7 swap */
.sm-swap{width:150px;height:200px;border-radius:16px;position:relative;overflow:hidden;cursor:pointer;box-shadow:0 20px 34px -22px rgba(0,0,0,.45)}
.sm-swap i{position:absolute;inset:0;transition:opacity .7s var(--spring),transform 1s var(--spring)}
.sm-swap i.a{background:linear-gradient(160deg,#F3DCD3,#C98B7D)}
.sm-swap i.a::after{content:"";position:absolute;left:30%;top:22%;width:40%;height:60%;border-radius:40% 40% 10% 10%;background:#8E4E5C}
.sm-swap i.b{background:linear-gradient(160deg,#E9D8C8,#7A5A44);opacity:0;transform:scale(1.08)}
.sm-swap i.b::before{content:"";position:absolute;left:40%;top:6%;width:20%;height:16%;border-radius:50%;background:#D8B9A3}
.sm-swap i.b::after{content:"";position:absolute;left:22%;top:20%;width:56%;height:76%;border-radius:46% 46% 10% 10%;background:#8E4E5C}
.sm-swap.on i.b,.sm-swap:hover i.b{opacity:1;transform:none}
.sm-swap em{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:11px;font-weight:600;background:rgba(255,255,255,.9);border-radius:999px;padding:3px 9px;color:#333;z-index:2}
/* 8 shades */
.sm-shade{display:grid;justify-items:center;gap:12px}
.sm-shade #smLip{transition:fill .6s ease}
.sm-sw,.sm-trysw{display:flex;gap:8px}
.sm-sw button,.sm-trysw button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer;transition:transform .4s var(--bounce)}
.sm-sw button.on,.sm-trysw button.on{transform:scale(1.25);box-shadow:0 0 0 2px #1E2510}
.sm-shname{font-size:12.5px;font-weight:600}
/* 9 look */
.sm-look{position:absolute;inset:0;background:linear-gradient(160deg,#EFE4DA,#C9B2A0)}
.sm-look::before{content:"";position:absolute;left:36%;top:14%;width:28%;height:80%;border-radius:45% 45% 8% 8%;background:#7E5B4A}
.sm-look::after{content:"";position:absolute;left:42%;top:4%;width:16%;height:16%;border-radius:50%;background:#D8B9A3}
.sm-hs{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;border:0;cursor:pointer;z-index:2;animation:smPing 2s ease-out infinite}
.sm-hs::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#1E2510}
@keyframes smPing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.sm-tip{position:absolute;z-index:3;background:#fff;border-radius:12px;padding:8px 10px;font-size:12px;box-shadow:0 12px 24px -12px rgba(0,0,0,.4);opacity:0;transform:translateY(6px);transition:.4s var(--spring);pointer-events:none;white-space:nowrap;color:#222}
.sm-tip.on{opacity:1;transform:none}.sm-tip b{display:block}
.sm-tip span{display:inline-block;margin-top:4px;background:#46521F;color:#fff;border-radius:999px;padding:2px 8px;font-size:11px}
/* 10 spin */
.sm-spin{perspective:600px;width:100%;height:100%;display:grid;place-items:center;cursor:grab;touch-action:none;position:relative}
.sm-spin:active{cursor:grabbing}
.sm-box{width:90px;height:120px;position:relative;transform-style:preserve-3d;transition:transform .1s linear}
.sm-spin:hover .sm-box{scale:1.15}
.sm-box i{position:absolute;border-radius:10px}
.sm-box i:nth-child(1),.sm-box i:nth-child(2),.sm-box i:nth-child(3),.sm-box i:nth-child(4){width:90px;height:120px}
.sm-box i:nth-child(1){transform:translateZ(45px);background:linear-gradient(160deg,#5C6B2A,#2A3311)}
.sm-box i:nth-child(1)::after{content:"S9";position:absolute;inset:0;display:grid;place-items:center;color:#C9F27C;font-weight:800;font-size:26px}
.sm-box i:nth-child(2){transform:rotateY(90deg) translateZ(45px);background:#3E4A19}
.sm-box i:nth-child(3){transform:rotateY(180deg) translateZ(45px);background:#2A3311}
.sm-box i:nth-child(4){transform:rotateY(-90deg) translateZ(45px);background:#46521F}
.sm-box i:nth-child(5){width:90px;height:90px;transform:rotateX(90deg) translateZ(45px);background:#6E7D3A}
.sm-box i:nth-child(6){width:90px;height:90px;transform:rotateX(-90deg) translateZ(75px);background:#1E2510}
.sm-spin em{position:absolute;bottom:12px;font-style:normal;font-size:11.5px;font-weight:600;background:#fff;border-radius:999px;padding:4px 10px}
/* 11 insta */
.sm-ig{width:86%;background:#fff;border-radius:16px;padding:10px;box-shadow:0 16px 30px -24px rgba(0,0,0,.4)}
.sm-ig-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px}
.sm-ig-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(45deg,#F2A33A,#D6455D,#7B3FF2)}
.sm-ig-h small{margin-left:auto;color:#2E6BE6;font-weight:600}
.sm-ig-g{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sm-ig-g i{aspect-ratio:1;border-radius:6px;position:relative;overflow:hidden}
.sm-ig-g i.new{animation:smPop .7s var(--bounce)}
@keyframes smPop{from{transform:scale(.6);opacity:0}}
.sm-ig-g i b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;opacity:0;animation:smHeart 1s ease .3s}
@keyframes smHeart{40%{opacity:1;transform:scale(1.3)}100%{opacity:0}}
/* 12 try-on */
.sm-try{display:grid;justify-items:center;gap:10px}
.sm-cam{position:relative;width:140px;height:170px;border-radius:20px;background:#2A2F25;display:grid;place-items:center;overflow:hidden;border:4px solid #1E2510}
.sm-cam #smTryLip{transition:fill .5s,stroke .5s}
.sm-scan{position:absolute;left:8px;right:8px;height:2px;background:#C9F27C;box-shadow:0 0 10px #C9F27C;animation:smScan 2.4s ease-in-out infinite}
@keyframes smScan{0%,100%{top:14%}50%{top:84%}}
.sm-rec{position:absolute;top:8px;left:10px;font-size:9.5px;color:#FF6A5E;font-weight:700}

/* ===== v24 showcase demos ===== */
.sm-stage.dark{background:#141812;color:#F2F4EE}
.ms-nav{display:flex;gap:6px;overflow-x:auto;padding:4px 0 18px;margin-bottom:6px;scrollbar-width:none}
.ms-nav::-webkit-scrollbar{display:none}
.ms-nav a{flex:none;text-decoration:none;font-size:13.5px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:background .2s,color .2s}
.ms-nav a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ms-nav a:hover{color:var(--ink)}
.z-hint{position:absolute;bottom:14px;font-size:11.5px;color:#5C6B2A}
/* reveal */
.z-rv1{width:70%;display:grid;gap:10px}
.z-rv1 i,.z-rv1 b{display:block;border-radius:8px;animation:zRise 4s var(--spring) infinite}
.z-rv1 i{height:16px;background:#9AA77A}.z-rv1 i:first-child{height:28px;width:90%;background:#46521F}.z-rv1 i:nth-child(2){width:70%;animation-delay:.12s}.z-rv1 i:nth-child(3){width:55%;animation-delay:.24s}
.z-rv1 b{height:32px;width:36%;border-radius:999px;background:#C9F27C;animation-delay:.36s}
@keyframes zRise{0%,8%{opacity:0;transform:translateY(24px)}30%,82%{opacity:1;transform:none}100%{opacity:0}}
.z-blur{text-align:center;animation:zBlur 4s ease-in-out infinite}
.z-blur h4{font-size:24px;letter-spacing:-0.03em;margin:0}.z-blur p{font-size:13px;color:#5C6B2A;margin-top:6px}
@keyframes zBlur{0%,10%{filter:blur(10px);opacity:.2;transform:scale(1.05)}40%,85%{filter:none;opacity:1;transform:none}100%{filter:blur(10px);opacity:.2}}
.z-mask{display:grid;gap:2px;font-size:26px;letter-spacing:-0.03em}
.z-mask span{overflow:hidden;display:block}
.z-mask b{display:block;animation:zMask 4.4s var(--spring) infinite}
.z-mask span:nth-child(2) b{animation-delay:.12s}.z-mask span:nth-child(3) b{animation-delay:.24s}
.z-mask .ac{color:#5C6B2A}
@keyframes zMask{0%,6%{transform:translateY(110%)}30%,85%{transform:none}100%{transform:translateY(-110%)}}
.z-stg{display:grid;grid-template-columns:repeat(3,64px);gap:8px}
.z-stg i{height:58px;border-radius:12px;background:linear-gradient(150deg,#C9D6A8,#5C6B2A);animation:zPop 3.6s var(--d) var(--bounce) infinite}
@keyframes zPop{0%,5%{opacity:0;transform:scale(.6) translateY(10px)}25%,80%{opacity:1;transform:none}100%{opacity:0}}
.z-slide{position:relative;width:78%;height:76%;border-radius:14px;overflow:hidden}
.z-slide > div{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;font-size:14px}
.z-slide .a{background:#fff}
.z-slide .b{background:#1E2510;color:#C9F27C;transform:translateY(100%);animation:zOver 4s var(--spring) infinite;box-shadow:0 -20px 30px -20px rgba(0,0,0,.4)}
@keyframes zOver{0%,25%{transform:translateY(100%)}55%,85%{transform:none}100%{transform:translateY(100%)}}
.z-words{width:80%;font-size:19px;line-height:1.35;letter-spacing:-0.01em;font-weight:600}
.z-words span{opacity:.15;animation:zWord 5s var(--d) infinite}
@keyframes zWord{0%{opacity:.15}8%,70%{opacity:1;color:#1E2510}85%,100%{opacity:.15}}
/* micro */
.z-btn{position:relative;overflow:hidden;border:0;background:#46521F;color:#fff;font:inherit;font-weight:600;font-size:16px;padding:14px 28px;border-radius:999px;cursor:pointer;animation:zPress 3s var(--spring) infinite;transition:transform .2s}
.z-btn:active{transform:scale(.94)}
.z-btn .rp{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(0);animation:zRip .7s ease-out forwards;pointer-events:none}
@keyframes zRip{to{transform:translate(-50%,-50%) scale(22);opacity:0}}
@keyframes zPress{0%,30%,100%{transform:none}35%{transform:scale(.94)}45%{transform:scale(1.04)}}
.z-form{width:78%;display:grid;gap:6px;font-size:12.5px}
.z-in{position:relative;height:42px;border:2px solid #CBD3B5;border-radius:12px;background:#fff;display:flex;align-items:center;padding:0 12px;animation:zGlow 4.5s infinite;overflow:hidden}
.z-typed{white-space:nowrap;overflow:hidden;width:0;animation:zType 4.5s steps(26) infinite;font-size:13px}
@keyframes zType{0%,10%{width:0}55%,100%{width:100%}}
@keyframes zGlow{0%,8%{border-color:#CBD3B5;box-shadow:none}15%,60%{border-color:#46521F;box-shadow:0 0 0 4px rgba(70,82,31,.15)}70%,100%{border-color:#2B8A57;box-shadow:none}}
.z-ok{position:absolute;right:10px;width:22px;height:22px;border-radius:50%;background:#2B8A57;color:#fff;font-style:normal;display:grid;place-items:center;font-size:12px;opacity:0;animation:zOk 4.5s infinite}
@keyframes zOk{0%,65%{opacity:0;transform:scale(.4)}72%,95%{opacity:1;transform:none}100%{opacity:0}}
.z-send{justify-self:start;background:#46521F;color:#fff;border-radius:999px;padding:7px 14px;font-weight:600}
.z-succ{position:relative;display:grid;justify-items:center;gap:10px}
.z-succ b{font-size:15px;animation:zFadeIn 3.4s infinite}
.z-succ .c{stroke-dasharray:214;stroke-dashoffset:214;animation:zDraw 3.4s infinite}
.z-succ .t{stroke-dasharray:60;stroke-dashoffset:60;animation:zDraw2 3.4s infinite}
@keyframes zDraw{0%{stroke-dashoffset:214}30%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:214}}
@keyframes zDraw2{0%,25%{stroke-dashoffset:60}45%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}
@keyframes zFadeIn{0%,40%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
.z-succ i{position:absolute;left:50%;top:40px;width:8px;height:8px;border-radius:2px;background:var(--c);opacity:0;animation:zConf 3.4s infinite;transform:rotate(var(--a)) translateY(0)}
@keyframes zConf{0%,42%{opacity:0;transform:rotate(var(--a)) translateY(0)}50%{opacity:1}80%,100%{opacity:0;transform:rotate(var(--a)) translateY(-80px)}}
.z-mag{position:absolute;inset:0;display:grid;place-items:center}
.z-magbtn{background:#46521F;color:#fff;padding:14px 26px;border-radius:999px;font-weight:600;transition:transform .35s var(--spring);box-shadow:0 14px 26px -14px rgba(0,0,0,.5)}
.z-mag small,.z-cur small{position:absolute;bottom:14px;font-size:11.5px;color:#5C6B2A}
.z-hov{position:absolute;inset:0;display:grid;align-content:center;padding:0 34px;gap:4px}
.z-hov a{font-size:26px;font-weight:650;letter-spacing:-0.03em;color:#1E2510;cursor:pointer;border-bottom:1px solid #CBD3B5;padding:6px 0;transition:color .2s,padding .4s var(--spring)}
.z-hov a.on,.z-hov a:hover{color:#5C6B2A;padding-left:10px}
.z-hovimg{position:absolute;width:110px;height:80px;border-radius:12px;pointer-events:none;opacity:0;transform:scale(.8) rotate(-6deg);transition:opacity .3s,transform .4s var(--spring);box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
.z-hovimg.on{opacity:1;transform:none}
.z-cur{position:absolute;inset:0;display:grid;place-content:center;gap:14px;cursor:none}
.z-cur a{font-size:22px;font-weight:650;color:#F2F4EE}
.z-curdot{position:absolute;width:18px;height:18px;border-radius:50%;background:#C9F27C;pointer-events:none;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;mix-blend-mode:difference}
.z-curdot.big{width:56px;height:56px;background:#fff}
/* text */
.z-tw{font-size:22px;font-weight:600;letter-spacing:-0.02em;width:80%}
.z-tw b{color:#5C6B2A}
.z-caret{display:inline-block;width:3px;height:22px;background:#46521F;vertical-align:-3px;margin-left:2px;animation:zCaret .8s steps(1) infinite}
@keyframes zCaret{50%{opacity:0}}
.z-mq{width:100%;display:grid;gap:10px;transform:rotate(-4deg)}
.z-mq div{white-space:nowrap;overflow:hidden;background:#1E2510;color:#C9F27C;padding:8px 0;font-weight:700;font-size:16px}
.z-mq div.r{background:#C9F27C;color:#1E2510}
.z-mq span{display:inline-block;animation:zMq 10s linear infinite}
.z-mq .r span{animation-direction:reverse}
@keyframes zMq{to{transform:translateX(-100%)}}
.z-hl{width:80%;font-size:24px;font-weight:650;letter-spacing:-0.03em;line-height:1.25}
.z-hl mark{background:linear-gradient(transparent 55%,#C9F27C 55%) no-repeat;background-size:0% 100%;color:inherit;animation:zMark 3.6s var(--spring) infinite}
@keyframes zMark{0%,10%{background-size:0% 100%}45%,85%{background-size:100% 100%}100%{background-size:0% 100%}}
.z-split{font-size:30px;font-weight:700;letter-spacing:-0.04em;line-height:1.1;text-align:center}
.z-split span{display:inline-block;animation:zLetter 4s var(--d) var(--bounce) infinite}
.z-split .ac{color:#5C6B2A}
@keyframes zLetter{0%,4%{opacity:0;transform:translateY(60%) rotate(8deg)}20%,80%{opacity:1;transform:none}100%{opacity:0}}
.z-scr{text-align:center;display:grid;gap:6px}
.z-scr b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:32px;letter-spacing:.12em;color:#C9F27C}
.z-scr small{font-size:12px;opacity:.6;letter-spacing:.1em}
.z-vw{font-size:44px;letter-spacing:-0.03em}
.z-vw span{display:inline-block;animation:zWeight 2.4s var(--d) ease-in-out infinite alternate}
@keyframes zWeight{0%{font-weight:200;color:#9AA77A}100%{font-weight:900;color:#1E2510}}
/* data */
.z-cnt{display:flex;gap:22px;text-align:center}
.z-cnt b{display:block;font-size:34px;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.z-cnt small{font-size:12px;color:#5C6B2A}
.z-chart .bars rect{fill:#9AB55A;transform-origin:bottom;transform-box:fill-box;animation:zBar 4s var(--d) var(--spring) infinite}
.z-chart .bars rect:nth-child(5){fill:#46521F}
@keyframes zBar{0%,5%{transform:scaleY(0)}30%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.z-chart .ln{stroke-dasharray:240;stroke-dashoffset:240;animation:zLn 4s infinite}
@keyframes zLn{0%,25%{stroke-dashoffset:240}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:240}}
.z-rings{display:flex;gap:16px;text-align:center}
.z-rings div{position:relative;display:grid;justify-items:center}
.z-rings svg{transform:rotate(-90deg)}
.z-rings .p{stroke-dasharray:151;stroke-dashoffset:151;animation:zRing 4s var(--d) var(--spring) infinite}
@keyframes zRing{0%,8%{stroke-dashoffset:151}40%,85%{stroke-dashoffset:var(--v)}100%{stroke-dashoffset:151}}
.z-rings b{position:absolute;top:23px;font-size:13px}
.z-rings small{font-size:11.5px;color:#5C6B2A}
.z-calc{width:80%;background:#fff;border-radius:16px;padding:16px;display:grid;gap:10px;font-size:13px}
.z-calc label{display:flex;justify-content:space-between}
.z-calc input{width:100%;accent-color:#46521F}
.z-calcp{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #DDE3CF;padding-top:10px}
.z-calcp b{font-size:28px;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.z-tot{width:80%;background:#fff;border-radius:16px;padding:14px 16px;display:grid;gap:6px;font-size:13.5px}
.z-tot label{display:flex;align-items:center;gap:8px;cursor:pointer}
.z-tot label span{margin-left:auto;color:#5C6B2A}
.z-tot input{accent-color:#46521F;width:16px;height:16px}
.z-totv{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #DDE3CF;padding-top:8px;margin-top:2px}
.z-totv b{font-size:26px;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.z-ba{position:relative;width:86%;height:78%;border-radius:16px;overflow:hidden;--pos:50%}
.z-ba .l,.z-ba .r{position:absolute;inset:0}
.z-ba .l{background:linear-gradient(150deg,#9A9182,#4E493F)}
.z-ba .r{background:linear-gradient(150deg,#F3E6D3,#E8692C);clip-path:inset(0 0 0 var(--pos))}
.z-ba span{position:absolute;top:10px;font-size:11px;font-weight:700;background:rgba(0,0,0,.4);color:#fff;border-radius:999px;padding:3px 9px}
.z-ba .l span{left:10px}.z-ba .r span{right:10px}
.z-ba .ln{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.3)}
.z-ba .ln::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;color:#1E2510}
.z-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* parallax */
.z-hp{position:relative;width:86%;height:82%;border-radius:16px;overflow:hidden}
.z-hp .bg{position:absolute;inset:-30% 0;background:radial-gradient(circle at 70% 30%,#FFD8A8 0 14%,transparent 15%),linear-gradient(180deg,#9EC5D9 0 45%,#7C9455 45% 70%,#46521F 70%);animation:zHpBg 6s ease-in-out infinite}
.z-hp .fg{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(255,255,255,.92);border-radius:12px;padding:10px 12px;animation:zHpFg 6s ease-in-out infinite}
.z-hp .fg b{display:block;font-size:14px}.z-hp .fg small{font-size:11px;color:#5C6B2A}
@keyframes zHpBg{0%,100%{transform:translateY(0)}50%{transform:translateY(-12%)}}
@keyframes zHpFg{0%,100%{transform:translateY(0)}50%{transform:translateY(-60%)}}
.z-frame{width:70%;height:76%;border-radius:16px;overflow:hidden;border:6px solid #fff;box-shadow:0 20px 34px -22px rgba(0,0,0,.45)}
.z-frame .img{width:100%;height:150%;background:radial-gradient(circle at 30% 30%,#FFE2B0 0 10%,transparent 11%),linear-gradient(180deg,#C5DDE8 0 40%,#C9B6A0 40% 60%,#8FA45E 60% 80%,#46521F 80%);animation:zFrame 6s ease-in-out infinite alternate}
@keyframes zFrame{from{transform:translateY(0)}to{transform:translateY(-33%)}}
.z-float{position:relative;width:86%;height:86%}
.z-float i{position:absolute;border-radius:14px;box-shadow:0 18px 30px -18px rgba(0,0,0,.45)}
.z-float .a{left:4%;top:16%;width:34%;height:56%;background:linear-gradient(150deg,#E9D8C8,#B0896A);animation:zFl 6s ease-in-out infinite}
.z-float .b{left:38%;top:6%;width:28%;height:44%;background:linear-gradient(150deg,#C9D6A8,#5C6B2A);animation:zFl 4s ease-in-out infinite reverse}
.z-float .c{left:62%;top:34%;width:32%;height:52%;background:linear-gradient(150deg,#BFD8EE,#2E6BE6);animation:zFl 8s ease-in-out infinite}
@keyframes zFl{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.z-mp{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#FFE8C9,#FFF6E8)}
.z-mp small{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:11.5px;color:#fff;z-index:2}
.z-mp i{position:absolute;left:-10%;right:-10%;transition:transform .5s var(--spring)}
.z-mp .l1{top:16%;height:46px;left:58%;right:auto;width:46px;border-radius:50%;background:#FFB347}
.z-mp .l2{bottom:30%;height:70px;background:#C9B6A0;clip-path:polygon(0 100%,15% 30%,30% 70%,50% 10%,70% 60%,85% 25%,100% 100%)}
.z-mp .l3{bottom:0;height:80px;background:#46521F;clip-path:polygon(0 40%,25% 10%,50% 45%,75% 15%,100% 40%,100% 100%,0 100%)}
.z-tilt{position:absolute;inset:0;display:grid;place-items:center;perspective:700px}
.z-tilt .card{width:190px;padding:22px;border-radius:20px;background:linear-gradient(150deg,#46521F,#1E2510);color:#fff;display:grid;gap:4px;transition:transform .3s var(--spring);box-shadow:0 30px 40px -24px rgba(0,0,0,.5);animation:zTiltIdle 5s ease-in-out infinite}
.z-tilt .card b{font-size:15px}.z-tilt .card span{font-size:30px;font-weight:700;letter-spacing:-0.04em;color:#C9F27C}.z-tilt .card small{font-size:11px;opacity:.6}
.z-tilt.live .card{animation:none}
@keyframes zTiltIdle{0%,100%{transform:rotateX(8deg) rotateY(-12deg)}50%{transform:rotateX(-6deg) rotateY(12deg)}}
/* loading */
.z-pg{position:relative;width:80%;height:72%;background:#fff;border-radius:14px;padding:22px 16px 16px;display:grid;gap:8px;align-content:start;overflow:hidden}
.z-pg i{display:block;height:10px;border-radius:5px;background:#E3E8D8}.z-pg i.h{height:54px;background:#D5DEC2}
.z-pg .z-pbar{position:absolute;left:0;top:0;height:4px;border-radius:0;background:#46521F;width:0;animation:zPbar 3.2s var(--spring) infinite}
@keyframes zPbar{0%{width:0;opacity:1}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}
.z-sk{position:relative;width:80%;height:110px;background:#fff;border-radius:14px;padding:16px}
.z-sk .sk,.z-sk .real{position:absolute;inset:16px}
.z-sk .sk{display:grid;gap:8px;align-content:start;animation:zSkOut 4s infinite}
.z-sk .sk i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#E3E8D8 25%,#F4F7EC 50%,#E3E8D8 75%);background-size:200% 100%;animation:zShim 1.2s linear infinite}
.z-sk .sk i:first-child{height:20px;width:60%}
@keyframes zShim{to{background-position:-200% 0}}
.z-sk .real{opacity:0;animation:zSkIn 4s infinite}
.z-sk .real b{display:block;font-size:17px}.z-sk .real small{font-size:13px;color:#5C6B2A}
@keyframes zSkOut{0%,50%{opacity:1}60%,100%{opacity:0}}
@keyframes zSkIn{0%,55%{opacity:0;transform:translateY(6px)}65%,95%{opacity:1;transform:none}100%{opacity:0}}
.z-spin{position:relative;min-width:170px;height:50px;border:0;border-radius:999px;background:#46521F;color:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:min-width .4s var(--spring),background .3s}
.z-spin .sp{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;opacity:0;animation:zSp .8s linear infinite}
@keyframes zSp{to{transform:rotate(360deg)}}
.z-spin .ok{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;opacity:0}
.z-spin.busy{min-width:50px}.z-spin.busy .t{opacity:0}.z-spin.busy .sp{opacity:1}
.z-spin.done{background:#2B8A57}.z-spin.done .t{opacity:0}.z-spin.done .ok{opacity:1}
.z-intro{position:relative;width:80%;height:76%;border-radius:14px;overflow:hidden}
.z-intro .page{position:absolute;inset:0;background:#fff;padding:16px;display:grid;gap:8px;align-content:start}
.z-intro .page i{display:block;height:10px;border-radius:5px;background:#E3E8D8}.z-intro .page i.h{height:50px;background:#D5DEC2}
.z-intro .cur{position:absolute;inset:0;background:#1E2510;color:#C9F27C;display:grid;place-items:center;animation:zCur 4.4s var(--spring) infinite}
.z-intro .cur b{font-size:18px;animation:zCurT 4.4s infinite}
@keyframes zCur{0%,45%{transform:none}65%,92%{transform:translateY(-101%)}100%{transform:none}}
@keyframes zCurT{0%,5%{opacity:0;letter-spacing:.3em}25%,45%{opacity:1;letter-spacing:0}55%,100%{opacity:0}}
.z-logo{display:grid;justify-items:center;gap:18px}
.z-logo .tile{width:80px;height:80px;border-radius:24px;background:linear-gradient(145deg,#46521F,#1E2510);display:grid;place-items:center;font-weight:800;font-size:28px;color:#fff;box-shadow:inset 0 0 0 1px rgba(201,242,124,.3);animation:zLogo 2.4s var(--bounce) infinite}
.z-logo .tile b{color:#C9F27C}
@keyframes zLogo{0%{transform:scale(.6) rotate(-12deg);opacity:0}30%,80%{transform:none;opacity:1}100%{transform:scale(.9);opacity:0}}
.z-logo .bar{width:120px;height:4px;border-radius:4px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.z-logo .bar::after{content:"";position:absolute;inset:0;background:#C9F27C;transform-origin:left;animation:zLbar 2.4s ease-in-out infinite}
@keyframes zLbar{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
.z-wp{display:grid;grid-template-columns:repeat(3,60px);gap:6px}
.z-wp i{height:60px;border-radius:10px;animation:zWp 4s var(--d) infinite}
.z-wp i:nth-child(5){animation-name:zWpZoom}
@keyframes zWp{0%,4%{opacity:0;transform:scale(.7)}20%,60%{opacity:1;transform:none}75%,100%{opacity:0}}
@keyframes zWpZoom{0%,4%{opacity:0;transform:scale(.7)}20%,55%{opacity:1;transform:none}75%{opacity:1;transform:scale(3.4);z-index:2;border-radius:0}100%{opacity:0;transform:scale(3.4)}}
/* pages */
.z-pt{position:relative;width:78%;height:76%;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.z-pt > div:not(.cv){position:absolute;inset:0;padding:16px;display:grid;gap:8px;align-content:start}
.z-pt i{display:block;height:10px;border-radius:5px;background:#E3E8D8}.z-pt i.h{height:50px;background:#C9F27C}
.z-pt .p1{background:#fff}
.z-pt .p2{background:#1E2510}.z-pt .p2 i{background:#46521F}.z-pt .p2 i.h{background:#5C6B2A}
.z-pt.fade .p2{animation:zFadeP 4s ease-in-out infinite}
@keyframes zFadeP{0%,30%{opacity:0;transform:translateY(12px)}45%,80%{opacity:1;transform:none}95%,100%{opacity:0}}
.z-pt.curtain .p2{opacity:0;animation:zCurtP 4.4s steps(1) infinite}
@keyframes zCurtP{0%,49%{opacity:0}50%,100%{opacity:1}}
.z-pt .cv{position:absolute;inset:0;background:#C9F27C;display:grid;place-items:center;transform:translateY(101%);animation:zCv 4.4s var(--spring) infinite}
.z-pt .cv span{width:54px;height:54px;border-radius:16px;background:#1E2510;color:#fff;display:grid;place-items:center;font-weight:800}
.z-pt .cv b{color:#C9F27C}
@keyframes zCv{0%,25%{transform:translateY(101%)}40%,60%{transform:none}75%,100%{transform:translateY(-101%)}}
.z-pt.slide .p2{transform:translateX(101%);animation:zSlideP 4s var(--spring) infinite;box-shadow:-20px 0 30px -20px rgba(0,0,0,.4)}
@keyframes zSlideP{0%,30%{transform:translateX(101%)}50%,85%{transform:none}100%{transform:translateX(101%)}}
.z-se{position:relative;width:78%;height:76%;background:#fff;border-radius:14px;overflow:hidden}
.z-se .grid{position:absolute;inset:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.z-se .grid i{border-radius:10px;background:#E3E8D8}
.z-se .grid .hero{background:linear-gradient(150deg,#BFD8EE,#2E6BE6);animation:zSeHero 4.4s var(--spring) infinite;transform-origin:top right;z-index:2}
@keyframes zSeHero{0%,30%{transform:none;border-radius:10px}50%,85%{transform:translate(calc(-100% - 8px),0) scale(2.08,1.1);border-radius:6px}100%{transform:none}}
.z-se .detail{position:absolute;left:12px;right:12px;top:50%;display:grid;gap:8px;opacity:0;animation:zSeDet 4.4s infinite}
.z-se .detail b{display:block;height:14px;width:60%;border-radius:6px;background:#1E2510}.z-se .detail i{display:block;height:9px;border-radius:5px;background:#E3E8D8}.z-se .detail .img{display:none}
@keyframes zSeDet{0%,45%{opacity:0;transform:translateY(10px)}60%,85%{opacity:1;transform:none}100%{opacity:0}}
/* travel */
.z-draw path{stroke-dasharray:400;stroke-dashoffset:400;animation:zDrawP 4s ease-in-out infinite}
@keyframes zDrawP{0%,5%{stroke-dashoffset:400}60%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:400}}
.z-hs{width:100%;overflow:hidden}
.z-hs .trk{display:flex;gap:12px;padding-left:20px;animation:zHs 8s var(--spring) infinite alternate}
.z-hs i{flex:none;width:130px;height:150px;border-radius:16px;display:flex;align-items:flex-end;padding:12px;color:#fff}
.z-hs i:nth-child(n+4) b{color:#1E2510}
.z-hs b{font-size:13px}
@keyframes zHs{0%,10%{transform:translateX(0)}90%,100%{transform:translateX(-420px)}}
.z-trv{position:relative!important;inset:auto!important;width:430px;height:260px;transform:scale(.62);flex:none}
.z-pin{width:84%;height:80%;display:grid;place-items:center}
.z-pin .frame{position:relative;width:100%;height:100%;background:#fff;border-radius:16px;display:grid;place-items:center;overflow:hidden}
.z-pin .n{position:absolute;top:14px;left:16px;font-size:13px;font-weight:700;color:#5C6B2A;animation:zPinN 6s steps(1) infinite}
.z-pin .n::after{content:""}
@keyframes zPinN{0%{content:"01"}}
.z-pin .s{position:absolute;font-size:19px;letter-spacing:-0.02em;opacity:0;text-align:center;padding:0 16px}
.z-pin .s1{animation:zPinS 6s infinite}.z-pin .s2{animation:zPinS 6s 2s infinite}.z-pin .s3{animation:zPinS 6s 4s infinite}
@keyframes zPinS{0%{opacity:0;transform:translateY(16px)}8%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-16px)}}
.z-pin .pr{position:absolute;left:0;bottom:0;height:4px;background:#46521F;animation:zPinPr 6s linear infinite}
@keyframes zPinPr{from{width:0}to{width:100%}}
.z-tow{position:relative;width:100%;height:100%;perspective:500px;display:grid;place-items:center}
.z-tow i{position:absolute;width:80px;height:100px;border-radius:12px;opacity:0;animation:zTow 3.2s var(--d) var(--spring) infinite}
@keyframes zTow{0%{opacity:0;transform:translate3d(calc(var(--x)*.2),calc(var(--y)*.2),-500px)}20%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate3d(calc(var(--x)*3),calc(var(--y)*3),200px)}}
.z-orb{position:relative;width:220px;height:220px;display:grid;place-items:center}
.z-orb > b{width:54px;height:54px;border-radius:16px;background:#C9F27C;color:#1E2510;display:grid;place-items:center;font-weight:800}
.z-orb .ring{position:absolute;inset:0;animation:zOrb 12s linear infinite}
.z-orb .ring i{position:absolute;left:50%;top:50%;width:46px;height:58px;margin:-29px 0 0 -23px;border-radius:10px;transform:rotate(var(--a)) translateY(-88px) rotate(calc(var(--a)*-1))}
@keyframes zOrb{to{transform:rotate(360deg)}}
.z-sph{perspective:700px;width:100%;height:100%;display:grid;place-items:center}
.z-sph .ball{position:relative;width:1px;height:1px;transform-style:preserve-3d;animation:zSph 16s linear infinite}
.z-sph .ball i{position:absolute;width:44px;height:54px;margin:-27px 0 0 -22px;border-radius:8px;transform:rotateY(var(--ry)) rotateX(var(--rx)) translateZ(100px);backface-visibility:hidden}
@keyframes zSph{from{transform:rotateX(-12deg) rotateY(0)}to{transform:rotateX(-12deg) rotateY(360deg)}}
/* video */
.z-lot{display:flex;gap:22px}
.z-lot .bell{transform-origin:50% 10%;animation:zBell 2s ease-in-out infinite}
@keyframes zBell{0%,50%,100%{transform:none}10%{transform:rotate(18deg)}20%{transform:rotate(-14deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-6deg)}}
.z-lot .heart{animation:zBeat 1.2s ease-in-out infinite}
@keyframes zBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(.95)}45%{transform:scale(1.12)}}
.z-lot .chk path{stroke-dasharray:40;stroke-dashoffset:40;animation:zChk 2s ease infinite}
@keyframes zChk{0%,20%{stroke-dashoffset:40}50%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.z-trig{position:relative;width:84%;height:74%;border-radius:16px;overflow:hidden;background:#000}
.z-trig .vid{position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,#C9F27C55,transparent 40%),radial-gradient(circle at 70% 60%,#2E6BE655,transparent 45%),linear-gradient(135deg,#1E2510,#3A4A1E);background-size:200% 200%;opacity:.5;transition:opacity .5s}
.z-trig.on .vid{opacity:1;animation:zVid 4s linear infinite}
@keyframes zVid{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
.z-trig .play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:18px;cursor:pointer;transition:transform .4s var(--bounce),opacity .3s}
.z-trig.on .play{opacity:0;transform:scale(.6)}
.z-trig .bar{position:absolute;left:0;bottom:0;height:4px;background:#C9F27C;width:0}
.z-trig.on .bar{animation:zTrigBar 4s linear}
@keyframes zTrigBar{to{width:100%}}
.z-bgv{position:relative;width:88%;height:80%;border-radius:16px;overflow:hidden}
.z-bgv .vid{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 50%,#E8692C88,transparent 35%),radial-gradient(circle at 70% 40%,#F2A33A66,transparent 40%),linear-gradient(135deg,#2B211B,#5A3420);animation:zBgv 8s ease-in-out infinite alternate}
@keyframes zBgv{from{transform:scale(1) translate(0,0)}to{transform:scale(1.2) translate(-6%,4%)}}
.z-bgv .vid::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);animation:zGrain .3s steps(2) infinite}
@keyframes zGrain{50%{transform:translateY(1px)}}
.z-bgv .txt{position:absolute;left:18px;bottom:18px;color:#fff;display:grid;gap:10px}
.z-bgv .txt b{font-size:20px;line-height:1.1}
.z-bgv .txt span{justify-self:start;background:#E8692C;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}
.z-seq{display:grid;justify-items:center;gap:14px;perspective:500px}
.z-seq .obj{width:70px;height:90px;position:relative;transform-style:preserve-3d;animation:zSeq 3s steps(24) infinite}
.z-seq .obj i{position:absolute;inset:0;border-radius:10px;background:linear-gradient(150deg,#5C6B2A,#2A3311);border:1px solid rgba(201,242,124,.3)}
.z-seq .obj i:nth-child(1){transform:translateZ(35px)}.z-seq .obj i:nth-child(2){transform:rotateY(90deg) translateZ(35px);background:#3E4A19}.z-seq .obj i:nth-child(3){transform:rotateY(180deg) translateZ(35px)}.z-seq .obj i:nth-child(4){transform:rotateY(-90deg) translateZ(35px);background:#46521F}
@keyframes zSeq{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
.z-seq .scrub{width:160px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);position:relative}
.z-seq .scrub b{position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;background:#C9F27C;animation:zSeqK 3s steps(24) infinite}
@keyframes zSeqK{from{left:0}to{left:calc(100% - 14px)}}
.z-seq small{font-size:11px;opacity:.6}
.z-scrub{display:grid;justify-items:center;gap:14px;perspective:600px}
.z-scrub .obj{width:80px;height:80px;position:relative;transform-style:preserve-3d}
.z-scrub .obj i{position:absolute;inset:0;border-radius:12px;border:1px solid rgba(201,242,124,.35);background:linear-gradient(150deg,#5C6B2A,#2A3311)}
.z-scrub .obj i:nth-child(1){transform:translateZ(40px)}.z-scrub .obj i:nth-child(2){transform:rotateY(90deg) translateZ(40px)}.z-scrub .obj i:nth-child(3){transform:rotateY(180deg) translateZ(40px)}.z-scrub .obj i:nth-child(4){transform:rotateY(-90deg) translateZ(40px)}.z-scrub .obj i:nth-child(5){transform:rotateX(90deg) translateZ(40px);background:#C9F27C}.z-scrub .obj i:nth-child(6){transform:rotateX(-90deg) translateZ(40px)}
.z-scrub input{width:170px;accent-color:#C9F27C}
.z-scrub small{font-size:11px;opacity:.6}
.z-ai{position:relative;width:88%;height:80%;border-radius:16px;overflow:hidden}
.z-ai .s{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;opacity:0;animation:zAi 9s infinite}
.z-ai .s b{background:rgba(0,0,0,.45);color:#fff;font-size:12px;border-radius:999px;padding:4px 10px}
.z-ai .s1{background:linear-gradient(180deg,#FFD8A8,#E8A27A 55%,#5A3420);animation-delay:0s}
.z-ai .s2{background:linear-gradient(180deg,#9EC5D9,#7C9455 55%,#2A3311);animation-delay:3s}
.z-ai .s3{background:linear-gradient(180deg,#1E1B5C,#5B3FB0 55%,#E8692C);animation-delay:6s}
@keyframes zAi{0%{opacity:0;transform:scale(1.08)}6%,30%{opacity:1;transform:scale(1)}36%,100%{opacity:0;transform:scale(1)}}
/* 3d */
.z-dist{width:84%;height:78%}
.z-dist .img{width:100%;height:100%;border-radius:16px;background:radial-gradient(circle at 70% 30%,#FFD27A 0 12%,transparent 13%),linear-gradient(180deg,#9EC5D9 0 45%,#2E6BE6 45% 60%,#1E3A7A 60%);display:grid;place-items:end start;padding:12px;transition:filter .3s}
.z-dist:hover .img,.z-dist .img.on{filter:url(#zRipple)}
.z-dist b{background:rgba(255,255,255,.9);border-radius:999px;padding:4px 10px;font-size:12px}
.z-fl3{perspective:600px;display:grid;justify-items:center;gap:22px}
.z-fl3 .tile{width:100px;height:100px;border-radius:30px;background:linear-gradient(145deg,#5C6B2A,#1E2510);display:grid;place-items:center;font-weight:800;font-size:34px;color:#fff;box-shadow:inset 0 0 0 2px rgba(201,242,124,.3),0 0 40px rgba(201,242,124,.15);animation:zFl3 5s ease-in-out infinite;transform-style:preserve-3d}
.z-fl3 .tile b{color:#C9F27C}
@keyframes zFl3{0%,100%{transform:translateY(0) rotateY(-25deg) rotateX(10deg)}50%{transform:translateY(-16px) rotateY(25deg) rotateX(-6deg)}}
.z-fl3 .sh{width:80px;height:12px;border-radius:50%;background:rgba(201,242,124,.25);filter:blur(6px);animation:zFl3s 5s ease-in-out infinite}
@keyframes zFl3s{0%,100%{transform:scale(1)}50%{transform:scale(.7);opacity:.5}}
.z-part{width:100%;height:100%}
.z-pv{height:100%}
.z-h3{perspective:800px;width:100%;height:100%;display:grid;place-items:center}
.z-h3 .sc{position:relative;width:1px;height:1px;transform-style:preserve-3d;animation:zH3 14s linear infinite}
.z-h3 i{position:absolute;transform-style:preserve-3d}
.z-h3 .a{width:90px;height:90px;margin:-45px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E8FFB8,#9DCB3E 50%,#46521F);transform:translateZ(0)}
.z-h3 .b{width:50px;height:50px;margin:-25px;border-radius:12px;background:linear-gradient(150deg,#BFD8EE,#2E6BE6);transform:translate3d(90px,-40px,40px) rotate(20deg)}
.z-h3 .c{width:36px;height:36px;margin:-18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE2B0,#F2A33A);transform:translate3d(-90px,30px,-30px)}
.z-h3 .d{width:120px;height:120px;margin:-60px;border-radius:50%;border:2px solid rgba(201,242,124,.5);transform:rotateX(70deg)}
@keyframes zH3{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
@media (prefers-reduced-motion: reduce){[data-page^="m-"] *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ===== v25: premium motion pass ===== */
:root{--bounce:cubic-bezier(.34,1.56,.64,1)}
@media (max-width:760px){
  html .scrolly{height:auto!important}
  html .sticky{position:relative!important;height:auto!important;padding:34px 0 56px!important;align-items:flex-start}
  .progress-rail,.scroll-hint,.iso-steps{display:none!important}
  .hero-visual{margin-top:44px!important}
}
@media (prefers-reduced-motion: reduce){
  html .scrolly{height:auto!important}
  html .sticky{position:relative!important;height:auto!important;padding:70px 0 90px!important}
  .js .rv{opacity:1!important;transform:none!important}
}
/* pause anything that has scrolled off screen */
.anim-off,.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
/* cheaper progress fills: scale instead of width */
.race-track i{width:100%!important;transform:scaleX(0);transform-origin:left}
.go .race-track i.slow{transform:scaleX(1);transition:transform 3s linear .3s!important}
.go .race-track i.fast{transform:scaleX(1);transition:transform .45s var(--spring) .3s!important}
.st9-bar i{width:var(--w)!important;transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--spring) calc(var(--i)*.12s + .2s)!important}
.st9.in .st9-bar i{transform:scaleX(1)}
.progress-rail i{width:100%!important;transform:scaleX(0);transform-origin:left;transition:none!important}
.ik-prog i,.sm-qbar i{width:100%!important;transform:scaleX(var(--p,0));transform-origin:left;transition:transform .6s var(--spring)!important}
.st9-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}

/* ===== v26 hero ===== */
.hero-tab{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;padding:7px 14px 7px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(0,0,0,.25);margin-bottom:6px}
.hero-tab-ic{width:20px;height:20px;border-radius:7px;background:#C9F27C;display:grid;place-items:center}
.hero-tab-ic::after{content:"";width:7px;height:7px;border-radius:50%;background:#1A1F14}
.hero-chapter{font-size:clamp(17px,1.6vw,20px);font-weight:500;color:var(--muted);margin-top:6px;letter-spacing:-0.01em}
.hero-avail-low{margin-top:14px}

/* ===== v27: build calendar ===== */
button.avail,button.r-avail{font:inherit;cursor:pointer;border:1px solid var(--line);transition:transform .5s var(--spring),border-color .3s}
button.avail:hover,button.r-avail:hover{transform:translateY(-2px);border-color:var(--accent)}
.cal9-cta{font-weight:600;color:var(--accent);margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}
.cal9{position:fixed;inset:0;z-index:450;display:grid;place-items:center;padding:16px}
.cal9[hidden]{display:none}
.cal9-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 40%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:pfFade .35s ease both}
.cal9-box{position:relative;width:min(980px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:0 60px 120px -50px rgba(0,0,0,.45);animation:pfPop .55s var(--spring) both}
.cal9-head{display:flex;justify-content:space-between;gap:16px;padding:26px 28px 6px}
.cal9-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.cal9-kicker i{width:8px;height:8px;border-radius:50%;background:#2B8A57;box-shadow:0 0 0 0 rgba(43,138,87,.5);animation:cal9Pulse 2s infinite}
@keyframes cal9Pulse{to{box-shadow:0 0 0 10px rgba(43,138,87,0)}}
.cal9-head h2{font-size:clamp(26px,3vw,36px);letter-spacing:-0.035em;margin:8px 0 6px}
.cal9-head p{color:var(--muted);font-size:15px;max-width:560px}
.cal9-x{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--mist);font-size:22px;cursor:pointer;color:var(--ink)}
.cal9-body{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;padding:16px 28px 28px}
@media (max-width:820px){.cal9-body{grid-template-columns:1fr}}
.cal9-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cal9-nav{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:20px;cursor:pointer;color:var(--ink)}
.cal9-nav:disabled{opacity:.3;cursor:default}
.cal9-month{text-align:center}
.cal9-month b{display:block;font-size:18px;letter-spacing:-0.02em}
.cal9-month span{font-size:12.5px;color:var(--accent);font-weight:600}
.cal9-grid{display:grid;grid-template-columns:110px repeat(4,1fr);gap:6px}
.cal9-dh{font-size:12px;font-weight:600;color:var(--muted);text-align:center;padding:2px 0 4px}
.cal9-wk{display:flex;flex-direction:column;justify-content:center;gap:5px;font-size:12px;color:var(--muted);padding-right:4px}
.cal9-wk b{color:var(--ink);font-size:12.5px}
.cal9-meter{display:flex;gap:3px}
.cal9-meter i{flex:1;height:5px;border-radius:3px;background:var(--mist-2)}
.cal9-meter i.on{background:#2B8A57}
.cal9-d{position:relative;height:62px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:8px 10px;font:inherit;text-align:left;cursor:pointer;color:var(--ink);transition:transform .45s var(--spring),border-color .2s,background .2s}
.cal9-d b{font-size:17px;letter-spacing:-0.02em}
.cal9-d small{font-size:11px;font-weight:600}
.cal9-d.open small{color:#2B8A57}
.cal9-d.open:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--accent-soft)}
.cal9-d.booked,.cal9-d.past{cursor:not-allowed;background:var(--mist);border-color:transparent}
.cal9-d.booked b,.cal9-d.past b{color:var(--muted)}
.cal9-d.booked small,.cal9-d.past small{color:var(--muted)}
.cal9-d.booked::after{content:"";position:absolute;inset:0;border-radius:13px;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(0,0,0,.035) 7px 8px)}
.cal9-d.out{visibility:hidden}
.cal9-d.sel,.cal9-d.sel:hover{background:#C9F27C!important;border-color:#1E2510;transform:translateY(-3px);box-shadow:0 14px 24px -16px rgba(30,37,16,.5)}
.cal9-d.sel small{color:#1E2510}
.cal9-legend{display:flex;gap:16px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.cal9-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.cal9-legend .o{border:1.5px solid #2B8A57}.cal9-legend .b{background:var(--mist-2)}.cal9-legend .s{background:#C9F27C;border:1.5px solid #1E2510}
.cal9-side{background:var(--mist);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px;align-self:start}
.cal9-empty{display:grid;place-items:center;text-align:center;gap:10px;padding:20px 6px;color:var(--muted);font-size:14.5px}
.cal9-empty span{width:56px;height:56px;border-radius:18px;background:var(--surface);display:grid;place-items:center;font-size:24px}
.cal9-pick{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.cal9-date{font-size:28px;font-weight:650;letter-spacing:-0.035em;line-height:1.1}
.cal9-tl{display:grid;gap:10px;margin:4px 0}
.cal9-tl > div{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;font-size:14px}
.cal9-tl span{width:28px;height:28px;border-radius:9px;background:var(--surface);display:grid;place-items:center;font-size:14px}
.cal9-tl b{display:block;font-size:14px}.cal9-tl small{color:var(--muted);font-size:12.5px}
.cal9-side .btn{width:100%}
.cal9-note{font-size:12.5px;color:var(--muted)}
@media (max-width:560px){.cal9-grid{grid-template-columns:repeat(4,1fr)}.cal9-wk,.cal9-corner{display:none}.cal9-head,.cal9-body{padding-left:18px;padding-right:18px}}

/* ===== v28: start date step ===== */
.pf-sdwrap{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:18px;align-items:start;animation:pfPop .5s var(--spring) both}
.pf-sdside{background:var(--mist);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px}
.pf-cal .cal9-grid{grid-template-columns:104px repeat(4,1fr)}
@media (max-width:820px){.pf-sdwrap{grid-template-columns:1fr}}
@media (max-width:560px){.pf-cal .cal9-grid{grid-template-columns:repeat(4,1fr)}}

/* ===== round 1: new motion styles ===== */
/* floor plan to 3D home */
.q-fp{perspective:900px;width:100%;height:100%;display:grid;place-items:center}
.q-plane{position:relative;width:200px;height:140px;transform-style:preserve-3d;background:#fff;border-radius:6px;box-shadow:0 0 0 1px #CBD3B5;animation:qPlane 9s var(--spring) infinite}
.q-plane::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#E3E8D8 1px,transparent 1px),linear-gradient(90deg,#E3E8D8 1px,transparent 1px);background-size:20px 20px;border-radius:6px}
@keyframes qPlane{0%,12%{transform:rotateX(0) rotateZ(0)}30%,40%{transform:rotateX(58deg) rotateZ(-30deg)}75%{transform:rotateX(58deg) rotateZ(-210deg)}92%,100%{transform:rotateX(0) rotateZ(-360deg)}}
.q-w{position:absolute;height:0;transform-origin:0 0;transform:rotateZ(var(--r));transform-style:preserve-3d}
.q-w::before{content:"";position:absolute;left:0;right:0;top:-2px;height:4px;background:#1E2510;border-radius:2px}
.q-w i{position:absolute;left:0;top:0;width:100%;height:46px;background:linear-gradient(180deg,#F6F1E8,#DCCDB6);border:1px solid #C9B6A0;transform-origin:top;transform:rotateX(90deg) scaleY(0);animation:qWall 9s var(--d) var(--spring) infinite}
@keyframes qWall{0%,30%{transform:rotateX(90deg) scaleY(0)}44%,88%{transform:rotateX(90deg) scaleY(1)}96%,100%{transform:rotateX(90deg) scaleY(0)}}
.q-f{position:absolute;border-radius:4px;transform:translateZ(0) scale(0);animation:qFurn 9s var(--bounce) infinite}
.q-f.a{left:20px;top:84px;width:56px;height:26px;background:#5C6B2A}
.q-f.b{left:132px;top:22px;width:46px;height:40px;background:#BFD8EE}
.q-f.c{left:30px;top:24px;width:40px;height:40px;border-radius:50%;background:#E8C4AC}
.q-f.c{animation-delay:.1s}.q-f.b{animation-delay:.2s}
@keyframes qFurn{0%,46%{transform:translateZ(0) scale(0)}54%,88%{transform:translateZ(14px) scale(1)}96%,100%{transform:translateZ(0) scale(0)}}
.q-lab{position:absolute;font-style:normal;font-size:10px;font-weight:700;color:#5C6B2A;animation:qLab 9s infinite}
.q-lab.l1{left:30px;top:118px}.q-lab.l2{left:140px;top:68px}
@keyframes qLab{0%,26%{opacity:1}32%,100%{opacity:0}}
/* map fly-to */
.q-map{position:relative;width:88%;height:84%;border-radius:16px;overflow:hidden;perspective:700px;background:#BFD8EE}
.q-mapin{position:absolute;inset:0;transform-origin:62% 58%;animation:qFly 8s var(--spring) infinite}
@keyframes qFly{0%,12%{transform:scale(1)}50%,85%{transform:rotateX(38deg) scale(4.2)}100%{transform:scale(1)}}
.q-mapin i{position:absolute;display:block}
.q-mapin .sea{inset:0;background:#9EC5D9}
.q-mapin .land{left:0;top:0;width:72%;height:100%;background:#E7EBDA;clip-path:polygon(0 0,100% 0,88% 22%,94% 40%,84% 58%,90% 76%,78% 100%,0 100%)}
.q-mapin .rd{background:#fff;border-radius:2px}
.q-mapin .r1{left:8%;top:57%;width:70%;height:3px}.q-mapin .r2{left:60%;top:10%;width:3px;height:80%}.q-mapin .r3{left:30%;top:20%;width:3px;height:70%}
.q-mapin .blk{width:8%;height:7%;background:#CBD3B5;border-radius:2px}
.q-mapin .b1{left:52%;top:47%}.q-mapin .b2{left:64%;top:62%}.q-mapin .b3{left:52%;top:62%}.q-mapin .b4{left:64%;top:47%}
.q-pin{position:absolute;left:62%;top:58%;width:22px;height:22px;margin:-22px 0 0 -11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg) translateY(-30px);background:#D6455D;opacity:0;animation:qPin 8s var(--bounce) infinite}
.q-pin::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
@keyframes qPin{0%,46%{opacity:0;transform:rotate(-45deg) translate(-30px,-30px)}54%,85%{opacity:1;transform:rotate(-45deg)}95%,100%{opacity:0}}
.q-mcard{position:absolute;left:50%;bottom:12px;transform:translateX(-50%) translateY(20px);background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 12px 24px -12px rgba(0,0,0,.4);opacity:0;animation:qCard 8s var(--spring) infinite;white-space:nowrap}
.q-mcard b{display:block;font-size:13px}.q-mcard small{font-size:11px;color:#5C6B2A}
@keyframes qCard{0%,56%{opacity:0;transform:translateX(-50%) translateY(20px)}64%,85%{opacity:1;transform:translateX(-50%)}95%,100%{opacity:0}}
.q-mlbl{position:absolute;left:12px;top:10px;font-size:11px;font-weight:700;color:#1E3A7A;animation:qLab 8s infinite}
/* assemble */
.q-asm{position:relative;width:180px;height:160px}
.q-asm i{position:absolute;display:block;animation:qAsm 6s var(--spring) infinite}
.q-asm .p1{left:30px;top:70px;width:120px;height:80px;background:#E9DCCB;--fx:-220px;--fy:40px;--fr:-30deg}
.q-asm .p2{left:20px;top:20px;width:140px;height:56px;background:#7E5B4A;clip-path:polygon(50% 0,100% 100%,0 100%);--fx:0;--fy:-200px;--fr:20deg;animation-delay:.12s}
.q-asm .p3{left:76px;top:100px;width:28px;height:50px;background:#46521F;--fx:200px;--fy:80px;--fr:40deg;animation-delay:.24s}
.q-asm .p4{left:42px;top:86px;width:24px;height:20px;background:#BFD8EE;--fx:-200px;--fy:-90px;--fr:-60deg;animation-delay:.36s}
.q-asm .p5{left:114px;top:86px;width:24px;height:20px;background:#BFD8EE;--fx:220px;--fy:-60px;--fr:60deg;animation-delay:.48s}
.q-asm .p6{left:116px;top:26px;width:14px;height:30px;background:#5A4034;--fx:120px;--fy:-180px;--fr:30deg;animation-delay:.6s}
@keyframes qAsm{0%,6%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}28%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translate(calc(var(--fx)*-.4),calc(var(--fy)*-.4)) rotate(var(--fr))}}
/* exploded view */
.q-exp{perspective:900px;width:100%;height:100%;display:grid;place-items:center}
.q-stack{position:relative;width:110px;height:150px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg)}
.q-stack i{position:absolute;inset:0;border-radius:16px;transform:translateZ(calc(var(--z)*-3px));animation:qExp 6s var(--spring) infinite;transform-style:preserve-3d}
.q-stack i:nth-child(1){background:rgba(201,242,124,.35);border:1px solid #C9F27C}
.q-stack i:nth-child(2){background:#1E2B3A}
.q-stack i:nth-child(3){background:#46521F;inset:22px}
.q-stack i:nth-child(4){background:#2E6BE6;inset:14px;border-radius:10px}
.q-stack i:nth-child(5){background:#3A4130}
@keyframes qExp{0%,15%{transform:translateZ(calc(var(--z)*-3px))}40%,75%{transform:translateZ(calc(var(--z)*-36px + 70px))}95%,100%{transform:translateZ(calc(var(--z)*-3px))}}
.q-stack em{position:absolute;right:-92px;top:50%;font-style:normal;font-size:11px;font-weight:600;color:#F2F4EE;white-space:nowrap;transform:rotateZ(38deg) rotateX(-58deg);opacity:0;animation:qExpL 6s infinite}
.q-stack em::before{content:"";display:inline-block;width:26px;height:1px;background:#C9F27C;vertical-align:middle;margin-right:6px}
@keyframes qExpL{0%,38%{opacity:0}46%,72%{opacity:1}80%,100%{opacity:0}}
/* wireframe to solid */
.q-wf .wire path,.q-wf .wire rect{stroke-dasharray:600;stroke-dashoffset:600;animation:qWire 7s ease-in-out infinite}
@keyframes qWire{0%{stroke-dashoffset:600;opacity:1}35%,55%{stroke-dashoffset:0;opacity:1}75%,100%{stroke-dashoffset:0;opacity:0}}
.q-wf .solid{clip-path:inset(100% 0 0 0);animation:qSolid 7s var(--spring) infinite}
@keyframes qSolid{0%,40%{clip-path:inset(100% 0 0 0)}70%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}
/* split-screen sync */
.q-ss{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:88%;align-items:center}
.q-ss ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.q-ss li{font-size:14px;font-weight:600;padding:9px 12px;border-radius:12px;cursor:pointer;color:#7C8070;border:1.5px solid transparent;transition:color .3s,background .3s,border-color .3s}
.q-ss li.on{color:#1E2510;background:#fff;border-color:#46521F}
.q-ssview{perspective:600px;display:grid;place-items:center;height:150px}
.q-cube{position:relative;width:80px;height:80px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-30deg);transition:transform 1s var(--spring)}
.q-cube i{position:absolute;inset:0;border-radius:12px;border:1px solid rgba(0,0,0,.08);transition:background .6s}
.q-cube i:nth-child(1){transform:translateZ(40px);background:#C98B7D}.q-cube i:nth-child(2){transform:rotateY(90deg) translateZ(40px);background:#7A9AB0}.q-cube i:nth-child(3){transform:rotateY(180deg) translateZ(40px);background:#8FA45E}.q-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(40px);background:#E9DCCB}.q-cube i:nth-child(5){transform:rotateX(90deg) translateZ(40px);background:#F6F1E8}.q-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(40px);background:#CBD3B5}
.q-ss[data-on="1"] .q-cube{transform:rotateX(-20deg) rotateY(-120deg)}
.q-ss[data-on="2"] .q-cube{transform:rotateX(-20deg) rotateY(-210deg)}
/* light sweep */
.q-ls{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.q-bottle{position:relative;display:grid;justify-items:center}
.q-bottle .cap{width:34px;height:26px;border-radius:6px 6px 2px 2px;background:linear-gradient(90deg,#8C7A4A,#E8D5A0,#8C7A4A)}
.q-bottle .body{width:96px;height:118px;border-radius:18px;background:linear-gradient(160deg,rgba(255,236,190,.95),rgba(214,170,90,.9));display:grid;place-items:center;box-shadow:0 30px 40px -24px rgba(214,170,90,.6)}
.q-bottle b{font-family:Georgia,serif;font-size:16px;color:#5A4320;letter-spacing:.06em}
.q-beam{position:absolute;top:-20%;bottom:-20%;width:60px;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);mix-blend-mode:overlay;animation:qBeam 4s ease-in-out infinite}
@keyframes qBeam{0%,30%{left:-30%}75%,100%{left:120%}}
.q-lsh{position:absolute;bottom:14px;font-size:13px;letter-spacing:.08em;color:#E8D5A0;background:linear-gradient(90deg,#8C7A4A 0%,#fff 50%,#8C7A4A 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:qTxt 4s linear infinite}
@keyframes qTxt{from{background-position:100% 0}to{background-position:-100% 0}}
/* day to night */
.q-dn{position:relative;width:88%;height:84%;border-radius:16px;overflow:hidden}
.q-dn i{position:absolute;display:block}
.q-dn .sky{inset:0;background:linear-gradient(180deg,#8EC5E8 0%,#CDE6F2 18%,#FFB46B 36%,#E8692C 48%,#5B3FB0 66%,#141B3A 84%,#0B1028 100%);background-size:100% 600%;animation:qSky 12s linear infinite}
@keyframes qSky{0%,10%{background-position:0 0}40%{background-position:0 40%}70%,85%{background-position:0 100%}100%{background-position:0 0}}
.q-dn .sun{left:20%;top:18%;width:38px;height:38px;border-radius:50%;background:#FFE08A;box-shadow:0 0 30px #FFD27A;animation:qSun 12s ease-in-out infinite}
@keyframes qSun{0%,10%{transform:translate(0,0)}45%{transform:translate(110px,90px);background:#FF9A4D}55%,100%{transform:translate(150px,170px);opacity:0}}
.q-dn .moon{right:18%;top:14%;width:26px;height:26px;border-radius:50%;background:#F2F4EE;box-shadow:-6px 0 0 0 #D8DCCF inset;opacity:0;animation:qMoon 12s ease-in-out infinite}
@keyframes qMoon{0%,55%{opacity:0;transform:translateY(30px)}70%,88%{opacity:1;transform:none}100%{opacity:0}}
.q-dn .stars{inset:0 0 40% 0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 40%,#fff,transparent),radial-gradient(1px 1px at 40% 50%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent);opacity:0;animation:qMoon 12s infinite}
.q-dn .bld{position:absolute;left:12%;bottom:22%;width:56%;height:46%;background:#2B211B;border-radius:6px 6px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.q-dn .bld i{position:static;background:#4A3A30;border-radius:3px;animation:qWin 12s infinite}
.q-dn .bld i:nth-child(2n){animation-delay:.4s}.q-dn .bld i:nth-child(3n){animation-delay:.8s}
@keyframes qWin{0%,48%{background:#4A3A30;box-shadow:none}58%,90%{background:#FFD27A;box-shadow:0 0 10px #FFB347}100%{background:#4A3A30}}
.q-dn .lights{left:0;right:0;bottom:30%;height:2px;background:repeating-linear-gradient(90deg,transparent 0 10px,#FFE08A 10px 14px);opacity:.15;animation:qLights 12s infinite}
@keyframes qLights{0%,45%{opacity:.15;filter:none}58%,90%{opacity:1;filter:drop-shadow(0 0 4px #FFD27A)}100%{opacity:.15}}
.q-dn .ground{left:0;right:0;bottom:0;height:24%;background:#46521F;animation:qGround 12s infinite}
@keyframes qGround{0%,30%{background:#5C6B2A}70%,88%{background:#1A2210}100%{background:#5C6B2A}}
.q-dnclock{position:absolute;right:12px;bottom:10px;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.3);border-radius:999px;padding:3px 9px}
/* falling petals and weather */
.q-pt{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#FFF6EE,#F6E7DE)}
.q-pt .arch{position:absolute;left:50%;bottom:-10px;width:150px;height:170px;margin-left:-75px;border:10px solid #E8C4AC;border-bottom:0;border-radius:80px 80px 0 0}
.q-pt > i{position:absolute;left:var(--x);top:-20px;width:12px;height:9px;border-radius:12px 0 12px 0;background:#F2A0B4;transform:scale(var(--s));animation:qFall var(--t) var(--d) linear infinite}
@keyframes qFall{0%{transform:translate(0,0) rotate(0) scale(var(--s));opacity:0}10%{opacity:1}100%{transform:translate(40px,290px) rotate(540deg) scale(var(--s));opacity:.9}}
.q-pt[data-kind="snow"]{background:linear-gradient(180deg,#DCE9F4,#F4F8FB)}
.q-pt[data-kind="snow"] > i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 4px #9EC5D9}
.q-pt[data-kind="snow"] .arch{border-color:#C5D6E4}
.q-pt[data-kind="leaf"]{background:linear-gradient(180deg,#FFF3E4,#F6E2C8)}
.q-pt[data-kind="leaf"] > i{width:13px;height:9px;border-radius:0 12px 0 12px;background:#D88A3A}
.q-pt[data-kind="leaf"] > i:nth-child(2n){background:#A85C28}
.q-pt[data-kind="leaf"] .arch{border-color:#C9A27A}
.q-ptsw{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;background:rgba(255,255,255,.85);padding:4px;border-radius:999px;z-index:2}
.q-ptsw button{border:0;background:none;border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer;color:#5C6B2A}
.q-ptsw button.on{background:#46521F;color:#fff}
/* unboxing */
.q-ub{position:relative;width:180px;height:190px;perspective:700px}
.q-box{position:absolute;left:40px;bottom:10px;width:100px;height:70px;transform-style:preserve-3d}
.q-box .front{position:absolute;inset:0;background:linear-gradient(160deg,#C98B5A,#9A6334);border-radius:4px;z-index:2}
.q-box .front::after{content:"";position:absolute;left:44px;top:0;bottom:0;width:12px;background:#E8D5A0}
.q-box .lid{position:absolute;left:-6px;right:-6px;top:-14px;height:16px;background:#B07A48;border-radius:4px;transform-origin:0 100%;z-index:3;animation:qLid 6s var(--spring) infinite}
.q-box .lid::after{content:"";position:absolute;left:50px;top:0;bottom:0;width:12px;background:#E8D5A0}
@keyframes qLid{0%,12%{transform:none}32%,80%{transform:translate(-30px,-40px) rotate(-40deg);opacity:1}92%{opacity:0}100%{transform:none;opacity:1}}
.q-item{position:absolute;left:62px;bottom:20px;width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,#46521F,#1E2510);display:grid;place-items:center;color:#C9F27C;font-weight:800;font-size:18px;z-index:1;animation:qRise 6s var(--spring) infinite}
@keyframes qRise{0%,24%{transform:translateY(20px)}44%,80%{transform:translateY(-58px) rotateY(360deg)}100%{transform:translateY(20px)}}
.q-sp{position:absolute;left:90px;top:56px;width:6px;height:6px;border-radius:50%;background:#C9F27C;opacity:0;animation:qSpark 6s infinite}
@keyframes qSpark{0%,40%{opacity:0;transform:rotate(var(--a)) translateY(0)}46%{opacity:1}62%,100%{opacity:0;transform:rotate(var(--a)) translateY(-60px)}}

/* ===== round 2 motion styles ===== */
.w-tag{position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:700;background:rgba(255,255,255,.9);border-radius:999px;padding:3px 9px;color:#1E2510;z-index:3}
/* fly-through */
.w-fly{position:absolute;inset:0;perspective:260px;background:linear-gradient(180deg,#9EC5D9 0 46%,#E9DCCB 46%);overflow:hidden}
.w-fly .arch{position:absolute;left:50%;top:50%;width:140px;height:120px;margin:-90px 0 0 -70px;border:10px solid #5C6B2A;border-bottom:0;border-radius:70px 70px 0 0;opacity:0;animation:wFly 4s var(--d) linear infinite}
.w-fly .arch:nth-child(2n){border-color:#8FA45E}
@keyframes wFly{0%{transform:translateZ(-900px);opacity:0}15%{opacity:1}100%{transform:translateZ(240px);opacity:1}}
.w-fly .floor{position:absolute;left:50%;top:46%;width:40px;height:60%;margin-left:-20px;background:#C9B6A0;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
/* dolly zoom */
.w-dolly{position:absolute;inset:0;overflow:hidden}
.w-dolly .sc{position:absolute;inset:0;transform-origin:50% 66%;animation:wDolly 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wDolly{0%,12%{transform:scale(1)}60%,85%{transform:scale(3.4)}100%{transform:scale(1)}}
.w-dolly .sky{position:absolute;inset:0;background:linear-gradient(180deg,#FFD8A8,#FFF3E4)}
.w-dolly .hill{position:absolute;left:-10%;right:-10%;bottom:0;height:42%;background:#8FA45E;border-radius:50% 50% 0 0}
.w-dolly .house{position:absolute;left:50%;bottom:28%;width:80px;height:56px;margin-left:-40px;background:#F6F1E8}
.w-dolly .roof{position:absolute;left:-8px;right:-8px;top:-30px;height:32px;background:#7E5B4A;clip-path:polygon(50% 0,100% 100%,0 100%)}
.w-dolly .door{position:absolute;left:32px;bottom:0;width:16px;height:26px;background:#46521F;border-radius:3px 3px 0 0}
.w-dt{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:20px;letter-spacing:-0.02em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4);opacity:0;animation:wDt 6s infinite}
@keyframes wDt{0%,55%{opacity:0;transform:translateY(10px)}65%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
/* isometric diorama */
.w-iso{perspective:900px;width:100%;height:100%;display:grid;place-items:center}
.w-iso .base{position:relative;width:170px;height:170px;background:#CFE3B5;border-radius:12px;transform:rotateX(58deg) rotateZ(-45deg);transform-style:preserve-3d;box-shadow:0 30px 30px -20px rgba(0,0,0,.25)}
.w-iso .road{position:absolute;left:0;right:0;top:78px;height:16px;background:#8C8F86}
.w-iso .road.v{left:78px;right:auto;top:0;bottom:0;width:16px;height:auto}
.w-iso .bl{position:absolute;width:44px;height:44px;transform-style:preserve-3d}
.w-iso .bl::before,.w-iso .bl::after{content:"";position:absolute;inset:0}
.w-iso .bl::before{background:var(--c);transform:translateZ(var(--h))}
.w-iso .bl::after{background:var(--s);transform-origin:bottom;transform:rotateX(-90deg);height:var(--h);top:auto;bottom:0}
.w-iso .a{left:16px;top:16px;--c:#F6F1E8;--s:#DCCDB6;--h:40px}.w-iso .b{left:110px;top:16px;--c:#BFD8EE;--s:#8FB0CC;--h:60px}.w-iso .c{left:16px;top:110px;--c:#E8C4AC;--s:#C9A08A;--h:28px}.w-iso .d{left:110px;top:110px;--c:#C9D6A8;--s:#9AA77A;--h:34px}
.w-iso .car{position:absolute;top:81px;left:0;width:14px;height:10px;border-radius:3px;background:#D6455D;transform:translateZ(4px);animation:wCar 4s linear infinite}
.w-iso .car.c2{top:auto;left:81px;width:10px;height:14px;background:#2E6BE6;animation:wCar2 5s linear infinite}
@keyframes wCar{from{left:-14px}to{left:170px}}@keyframes wCar2{from{top:170px}to{top:-14px}}
.w-iso .ppl{position:absolute;left:70px;top:70px;width:5px;height:5px;border-radius:50%;background:#1E2510;transform:translateZ(3px);animation:wPpl 6s ease-in-out infinite alternate}
.w-iso .ppl.p2{left:96px;top:100px;animation-duration:5s}
@keyframes wPpl{to{transform:translate(20px,-30px) translateZ(3px)}}
/* section camera move */
.w-sec{position:absolute;inset:0;perspective:700px;display:grid;place-items:center}
.w-sec .stage3{transform-style:preserve-3d;animation:wCam 9s var(--spring) infinite}
@keyframes wCam{0%,26%{transform:rotateY(-25deg) rotateX(-15deg) translateX(-50px)}33%,59%{transform:rotateY(70deg) rotateX(-30deg) translateX(40px) scale(1.2)}66%,92%{transform:rotateY(190deg) rotateX(10deg) scale(.9)}100%{transform:rotateY(335deg) rotateX(-15deg) translateX(-50px)}}
.w-sec .obj{position:relative;width:70px;height:70px;transform-style:preserve-3d}
.w-sec .obj i{position:absolute;inset:0;border-radius:12px;border:1px solid rgba(201,242,124,.4)}
.w-sec .obj i:nth-child(1){transform:translateZ(35px);background:#46521F}.w-sec .obj i:nth-child(2){transform:rotateY(90deg) translateZ(35px);background:#5C6B2A}.w-sec .obj i:nth-child(3){transform:rotateY(180deg) translateZ(35px);background:#C9F27C}.w-sec .obj i:nth-child(4){transform:rotateY(-90deg) translateZ(35px);background:#2A3311}
.w-sec .cap{position:absolute;left:16px;bottom:16px}
.w-sec .cap b{position:absolute;bottom:0;white-space:nowrap;font-size:13px;color:#F2F4EE;opacity:0;animation:wCap 9s infinite}
.w-sec .cap .t2{animation-delay:3s}.w-sec .cap .t3{animation-delay:6s}
@keyframes wCap{0%{opacity:0;transform:translateY(8px)}5%,28%{opacity:1;transform:none}33%,100%{opacity:0}}
.w-sec .dots{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:grid;gap:6px}
.w-sec .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);animation:wDot 9s infinite}
.w-sec .dots i:nth-child(2){animation-delay:3s}.w-sec .dots i:nth-child(3){animation-delay:6s}
@keyframes wDot{0%,30%{background:#C9F27C}34%,100%{background:rgba(255,255,255,.3)}}
/* globe */
.w-globe{position:relative;width:200px;height:200px;display:grid;place-items:center}
.w-globe .ball{position:absolute;inset:20px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 35%,#2E6BE6,#0E2A5C 70%);box-shadow:0 0 40px rgba(46,107,230,.35)}
.w-globe .land{position:absolute;inset:0;width:200%;background-image:radial-gradient(ellipse 22px 14px at 20% 40%,#8FA45E 98%,transparent),radial-gradient(ellipse 14px 20px at 34% 62%,#8FA45E 98%,transparent),radial-gradient(ellipse 26px 12px at 60% 30%,#8FA45E 98%,transparent),radial-gradient(ellipse 16px 16px at 78% 66%,#8FA45E 98%,transparent);background-size:50% 100%;animation:wSpin 12s linear infinite}
@keyframes wSpin{to{transform:translateX(-50%)}}
.w-globe .shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 70% 75%,rgba(0,0,0,.35),transparent 60%)}
.w-globe svg{position:absolute;inset:0}
.w-globe .arc{fill:none;stroke:#C9F27C;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:90;animation:wArc 4s ease-in-out infinite}
.w-globe .a2{animation-delay:1s}
@keyframes wArc{0%,10%{stroke-dashoffset:90}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-90}}
.w-globe circle{fill:#fff}
.w-cities{position:absolute;bottom:-8px;font-size:11.5px;color:#C9F27C;font-weight:600}
/* morph */
.w-morph{width:110px;height:110px;display:grid;place-items:center;background:linear-gradient(145deg,#9DCB3E,#46521F);animation:wMorph 6s ease-in-out infinite}
.w-morph span{font-weight:800;font-size:30px;color:#fff;opacity:0;animation:wMorphT 6s infinite}
.w-morph b{color:#C9F27C}
@keyframes wMorph{0%,100%{border-radius:50%;transform:rotate(0)}25%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:rotate(90deg)}50%,80%{border-radius:28%;transform:rotate(180deg) scale(1.05)}}
@keyframes wMorphT{0%,50%{opacity:0;transform:rotate(-180deg) scale(.6)}60%,80%{opacity:1;transform:rotate(-180deg)}90%{opacity:0}}
.w-plogo{width:100%;height:100%}
/* liquid */
.w-liq{position:absolute;inset:0;overflow:hidden;background:#F6E7DE}
.w-liq .gel{position:absolute;inset:-20px;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#FFE3EC 0 8%,#F2A0B4 30%,#C2577A 70%);filter:url(#wGel);transition:background .3s}
.w-liq .ring{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:wRing 1.4s ease-out forwards;pointer-events:none}
@keyframes wRing{to{transform:scale(12);opacity:0}}
.w-liq small,.w-rip small,.w-trail small,.w-spot small,.w-magn small,.w-sc small{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11.5px;z-index:3;color:#fff;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.3)}
/* noise blob */
.w-blob i{display:block;width:150px;height:150px;border-radius:50%;background:conic-gradient(from 0deg,#C9F27C,#2E6BE6,#7B3FF2,#D6455D,#C9F27C);filter:url(#wNoise) blur(1px);animation:wBlob 10s linear infinite}
@keyframes wBlob{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* glass */
.w-glass{position:absolute;inset:0;overflow:hidden;background:#141812}
.w-glass > i{position:absolute;border-radius:50%;filter:blur(2px);animation:wGb 8s ease-in-out infinite alternate}
.w-glass .g1{width:120px;height:120px;left:12%;top:14%;background:#C9F27C}.w-glass .g2{width:100px;height:100px;right:14%;top:30%;background:#2E6BE6;animation-delay:-3s}.w-glass .g3{width:80px;height:80px;left:42%;bottom:6%;background:#D6455D;animation-delay:-5s}
@keyframes wGb{to{transform:translate(30px,-20px) scale(1.15)}}
.w-glass .pane{position:absolute;left:50%;top:50%;width:150px;height:96px;margin:-48px 0 0 -75px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);display:grid;place-content:center;text-align:center;color:#fff;animation:wPane 6s ease-in-out infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.w-glass .pane b{font-size:14px}.w-glass .pane span{font-size:26px;font-weight:700}
.w-glass .pane.p2{width:70px;height:70px;margin:-90px 0 0 30px;border-radius:50%;animation-duration:8s;animation-direction:reverse}
@keyframes wPane{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(6deg) translateY(-8px)}}
/* reflective floor */
.w-refl{position:absolute;inset:0;background:linear-gradient(180deg,#1A1F14 0 62%,#0B0E08 62%)}
.w-refl .items{position:absolute;left:0;right:0;top:30%;display:flex;justify-content:center;gap:22px;-webkit-box-reflect:below 2px linear-gradient(transparent 40%,rgba(0,0,0,.45))}
.w-refl .items i{display:block;border-radius:12px;animation:wBob 4s ease-in-out infinite}
.w-refl .a{width:46px;height:70px;background:linear-gradient(160deg,#E8D5A0,#8C7A4A)}.w-refl .b{width:56px;height:56px;margin-top:14px;border-radius:50%!important;background:linear-gradient(160deg,#C9F27C,#46521F);animation-delay:.6s!important}.w-refl .c{width:40px;height:80px;margin-top:-10px;background:linear-gradient(160deg,#BFD8EE,#2E6BE6);animation-delay:1.2s!important}
@keyframes wBob{50%{transform:translateY(-6px)}}
/* fast-motion */
.w-fast{position:relative;width:86%;height:80%;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:space-around}
.w-fast .clock{position:relative;width:90px;height:90px;border-radius:50%;border:5px solid #1E2510}
.w-fast .clock i{position:absolute;left:50%;bottom:50%;width:4px;margin-left:-2px;background:#1E2510;border-radius:2px;transform-origin:bottom}
.w-fast .hr{height:24px}.w-fast .mn{height:34px;background:#D6455D!important}
.w-fast .stk{display:flex;flex-direction:column-reverse;gap:4px}
.w-fast .stk i{width:70px;height:16px;border-radius:5px;background:#9AB55A;transform-origin:left}
.w-fast .badge{position:absolute;right:12px;top:12px;font-size:13px;font-weight:800;background:#1E2510;color:#C9F27C;border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
/* cursor trail */
.w-trail{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 120%,#2A1F3A,#100C18)}
.w-trail .sp{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle,#FFF6C9,#F2A33A 60%,transparent 70%);pointer-events:none;animation:wSp 1s ease-out forwards}
@keyframes wSp{to{transform:translateY(14px) scale(.2);opacity:0}}
/* spotlight */
.w-spot{position:absolute;inset:0;overflow:hidden;background:#0B0E08;cursor:none}
.w-spot .art{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:6px;background:radial-gradient(circle at 70% 30%,#E8692C,transparent 40%),linear-gradient(160deg,#5B3FB0,#1E1B5C);color:#fff;-webkit-mask:radial-gradient(circle 70px at var(--sx,50%) var(--sy,50%),#000 40%,transparent 100%);mask:radial-gradient(circle 70px at var(--sx,50%) var(--sy,50%),#000 40%,transparent 100%)}
.w-spot .art b{font-size:28px;letter-spacing:-0.03em}.w-spot .art span{font-size:13px;opacity:.85}
/* scroll-driven colour */
.w-sc{position:absolute;inset:0;overflow:hidden;--k:0;background:linear-gradient(180deg,hsl(calc(340 - var(--k)*120),70%,calc(88% - var(--k)*55%)),hsl(calc(20 + var(--k)*210),60%,calc(80% - var(--k)*55%)))}
.w-sc .inner{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.w-sc .inner::-webkit-scrollbar{display:none}
.w-sc b{display:grid;place-items:center;height:250px;font-size:26px;letter-spacing:-0.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
/* ambient dust */
.w-dust{position:absolute;inset:0;overflow:hidden;background:#141812}
.w-dust .beam{position:absolute;left:20%;top:-10%;width:45%;height:130%;background:linear-gradient(180deg,rgba(255,236,190,.28),rgba(255,236,190,0));transform:skewX(-14deg);filter:blur(8px)}
.w-dust b{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#FFF1C9;box-shadow:0 0 6px #FFE08A;opacity:.7;animation:wDust var(--t) var(--d) ease-in-out infinite alternate}
@keyframes wDust{0%{transform:translate(0,0);opacity:.2}50%{opacity:.9}100%{transform:translate(18px,-26px);opacity:.3}}
/* physics drop */
.w-drop{position:relative;width:160px;height:190px}
.w-drop .floor{position:absolute;left:-20px;right:-20px;bottom:0;height:4px;border-radius:2px;background:#CBD3B5}
.w-drop i:not(.floor){position:absolute;left:50%;border-radius:8px;animation:wDrop 5s infinite}
.w-drop .b1{bottom:4px;width:110px;height:34px;margin-left:-55px;background:#46521F;animation-delay:0s}
.w-drop .b2{bottom:38px;width:90px;height:30px;margin-left:-48px;background:#9AB55A;animation-delay:.35s}
.w-drop .b3{bottom:68px;width:70px;height:28px;margin-left:-32px;background:#E8C4AC;animation-delay:.7s}
.w-drop .b4{bottom:96px;width:46px;height:46px;margin-left:-23px;border-radius:50%!important;background:#F2A33A;animation-delay:1.05s}
@keyframes wDrop{0%{transform:translateY(-260px) rotate(-8deg);opacity:0;animation-timing-function:cubic-bezier(.5,0,1,.5)}12%{transform:translateY(0) rotate(0);opacity:1;animation-timing-function:cubic-bezier(0,.5,.5,1)}17%{transform:translateY(-22px) rotate(3deg);animation-timing-function:cubic-bezier(.5,0,1,.5)}22%{transform:translateY(0);animation-timing-function:cubic-bezier(0,.5,.5,1)}25%{transform:translateY(-6px)}28%,82%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
/* device morph */
.w-dev{display:grid;place-items:center;width:100%;height:100%}
.w-dev .frame{width:220px;height:140px;border:8px solid #1E2510;border-radius:10px;background:#fff;overflow:hidden;animation:wDev 7.5s var(--spring) infinite}
@keyframes wDev{0%,22%{width:220px;height:140px;border-radius:10px}33%,55%{width:140px;height:180px;border-radius:16px}66%,88%{width:84px;height:170px;border-radius:20px}100%{width:220px;height:140px;border-radius:10px}}
.w-dev .site{padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;animation:wDevG 7.5s steps(1) infinite}
.w-dev .site i{height:26px;border-radius:5px;background:#D5DEC2}
.w-dev .site .h{grid-column:1/-1;height:34px;background:#46521F}
@keyframes wDevG{0%,30%{grid-template-columns:repeat(3,1fr)}31%,62%{grid-template-columns:repeat(2,1fr)}63%,94%{grid-template-columns:1fr}95%,100%{grid-template-columns:repeat(3,1fr)}}
/* camera orbit */
.w-orbit{perspective:700px;width:100%;height:100%;display:grid;place-items:center}
.w-orbit .sc{position:relative;width:1px;height:1px;transform-style:preserve-3d;animation:wOrb 10s cubic-bezier(.25,.1,.25,1) infinite}
@keyframes wOrb{0%{transform:rotateX(-18deg) rotateY(0)}60%,90%{transform:rotateX(-18deg) rotateY(-405deg)}100%{transform:rotateX(-18deg) rotateY(-360deg)}}
.w-orbit .hs{position:absolute;transform-style:preserve-3d}
.w-orbit .hs i{position:absolute;background:#F6F1E8;border:1px solid #DCCDB6}
.w-orbit .f,.w-orbit .b{width:90px;height:60px;left:-45px;top:-30px}
.w-orbit .f{transform:translateZ(35px);background:linear-gradient(#F6F1E8 0 60%,#46521F 60% 100%) no-repeat;background-size:20px 30px;background-position:35px 30px;background-color:#F6F1E8}
.w-orbit .b{transform:rotateY(180deg) translateZ(35px)}
.w-orbit .l,.w-orbit .r{width:70px;height:60px;left:-35px;top:-30px}
.w-orbit .l{transform:rotateY(-90deg) translateZ(45px)}.w-orbit .r{transform:rotateY(90deg) translateZ(45px);background:#E9DCCB}
.w-orbit .rf1,.w-orbit .rf2{width:90px;height:50px;left:-45px;top:-55px;background:#7E5B4A!important;border:0!important}
.w-orbit .rf1{transform-origin:bottom;transform:translateZ(35px) rotateX(-50deg) translateY(4px)}
.w-orbit .rf2{transform-origin:bottom;transform:translateZ(-35px) rotateX(50deg) translateY(4px)}
.w-orbit .plinth{position:absolute;width:150px;height:150px;left:-75px;top:-75px;border-radius:50%;background:radial-gradient(circle,#CBD3B5,#9AA77A);transform:translateY(30px) rotateX(90deg)}
/* 3d hotspots */
.w-hot{position:absolute;inset:0;overflow:hidden;background:#F6F1E8}
.w-hot .room{position:absolute;inset:0;transition:transform 1s var(--spring);transform-origin:var(--ox,50%) var(--oy,50%)}
.w-hot.zoom .room{transform:scale(1.9)}
.w-hot .room::before{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:#E3D3BC}
.w-hot .sofa{position:absolute;left:18%;bottom:24%;width:46%;height:22%;border-radius:12px 12px 6px 6px;background:#5C6B2A}
.w-hot .lamp{position:absolute;right:16%;bottom:24%;width:6px;height:44%;background:#1E2510}
.w-hot .lamp::before{content:"";position:absolute;left:-16px;top:-16px;width:38px;height:22px;border-radius:20px 20px 4px 4px;background:#F2A33A}
.w-hot .rug{position:absolute;left:24%;bottom:8%;width:48%;height:10%;border-radius:50%;background:#C98B7D}
.w-hot .hs{position:absolute;width:18px;height:18px;border-radius:50%;border:0;background:#fff;cursor:pointer;animation:smPing 2s ease-out infinite}
.w-hot .hs::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#1E2510}
.w-hot .h1{left:38%;bottom:40%}.w-hot .h2{right:14%;bottom:66%}.w-hot .h3{left:46%;bottom:10%}
.w-hot .card{position:absolute;right:12px;top:12px;background:#fff;border-radius:12px;padding:8px 12px;font-size:12px;box-shadow:0 12px 24px -12px rgba(0,0,0,.4);opacity:0;transform:translateY(-8px);transition:.5s var(--spring);color:#222}
.w-hot.zoom .card{opacity:1;transform:none}
.w-hot .card b{display:block;font-size:13px}
/* kinetic 3D text */
.w-kin{display:flex;gap:4px;perspective:500px}
.w-kin span{display:inline-block;font-size:62px;font-weight:900;letter-spacing:-0.02em;color:#C9F27C;text-shadow:1px 1px 0 #9DCB3E,2px 2px 0 #7FA62E,3px 3px 0 #5C6B2A,4px 4px 0 #46521F,5px 5px 0 #2A3311,6px 6px 12px rgba(0,0,0,.35);animation:wKin 5s var(--d) infinite}
@keyframes wKin{0%{transform:translateY(-120px) rotateX(90deg);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}15%{transform:none;opacity:1}30%{transform:rotate(-3deg)}45%{transform:rotate(3deg)}60%,85%{transform:rotate(0)}100%{transform:translateY(40px);opacity:0}}
/* data sculpture */
.w-ds{perspective:900px;width:100%;height:100%;display:grid;place-items:center}
.w-ds .base{position:relative;width:170px;height:60px;transform:rotateX(60deg) rotateZ(-38deg);transform-style:preserve-3d;background:#E3E8D8;border-radius:8px}
.w-ds .bar{position:absolute;left:calc(14px + var(--x));top:18px;width:24px;height:24px;transform-style:preserve-3d}
.w-ds .bar i{position:absolute;display:block}
.w-ds .bar .t{inset:0;background:#C9F27C;transform:translateZ(var(--h));animation:wBarT 5s var(--d) var(--spring) infinite}
.w-ds .bar .f{left:0;right:0;bottom:0;height:var(--h);background:#46521F;transform-origin:bottom;transform:rotateX(-90deg) scaleY(0);top:auto;animation:wBarF 5s var(--d) var(--spring) infinite}
.w-ds .bar .s{top:0;bottom:0;right:0;width:var(--h);background:#5C6B2A;transform-origin:right;transform:rotateY(90deg) scaleX(0);left:auto;animation:wBarS 5s var(--d) var(--spring) infinite}
@keyframes wBarT{0%,5%{transform:translateZ(0)}35%,85%{transform:translateZ(var(--h))}100%{transform:translateZ(0)}}
@keyframes wBarF{0%,5%{transform:rotateX(-90deg) scaleY(0)}35%,85%{transform:rotateX(-90deg) scaleY(1)}100%{transform:rotateX(-90deg) scaleY(0)}}
@keyframes wBarS{0%,5%{transform:rotateY(90deg) scaleX(0)}35%,85%{transform:rotateY(90deg) scaleX(1)}100%{transform:rotateY(90deg) scaleX(0)}}
.w-ds .bar b{position:absolute;left:0;top:0;font-size:9px;font-weight:700;color:#1E2510;transform:translateZ(calc(var(--h) + 10px)) rotateZ(38deg) rotateX(-60deg);opacity:0;animation:qLab 5s var(--d) infinite reverse}
.w-ds2 .b{transform-box:fill-box;transform-origin:50% 100%;animation:wDs2 5s var(--d) var(--spring) infinite}
.w-ds2 text{font-size:10px;font-weight:700;fill:#1E2510}
@keyframes wDs2{0%,5%{transform:scaleY(0)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
/* tunnel */
.w-tun{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle,#1E1B5C,#0B0E08)}
.w-tun .r{position:absolute;width:30px;height:30px;border-radius:50%;border:3px solid #C9F27C;opacity:0;animation:wTun 4s var(--d) linear infinite}
.w-tun .r:nth-child(2n){border-color:#7B3FF2}.w-tun .r:nth-child(3n){border-color:#2E6BE6}
@keyframes wTun{0%{transform:scale(.2);opacity:0}15%{opacity:1}100%{transform:scale(14);opacity:0}}
/* pinned 3D */
.w-pin3{display:grid;grid-template-columns:1fr 1fr;width:88%;height:80%;gap:10px;align-items:center}
.w-pin3 .list{height:100%;overflow:hidden;position:relative;-webkit-mask:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.w-pin3 .list div{height:66px;display:flex;align-items:center;animation:wList 9s linear infinite}
.w-pin3 .list b{background:#fff;border-radius:12px;padding:10px 12px;font-size:13px;box-shadow:0 8px 16px -12px rgba(0,0,0,.3)}
@keyframes wList{0%,25%{transform:translateY(66px)}33%,58%{transform:translateY(0)}66%,91%{transform:translateY(-66px)}100%{transform:translateY(-132px)}}
.w-pin3 .obj{position:relative;width:110px;height:100px;justify-self:center}
.w-pin3 .obj i{position:absolute;transition:box-shadow .3s}
.w-pin3 .roof{left:0;right:0;top:0;height:36px;background:#7E5B4A;clip-path:polygon(50% 0,100% 100%,0 100%);animation:wGlowA 9s infinite}
.w-pin3 .wall{left:10px;right:30px;top:36px;bottom:0;background:#E9DCCB;animation:wGlowB 9s infinite}
.w-pin3 .gar{right:0;width:30px;top:56px;bottom:0;background:#BFD8EE;animation:wGlowC 9s infinite}
@keyframes wGlowA{0%,30%,100%{background:#C9F27C}34%,96%{background:#7E5B4A}}
@keyframes wGlowB{0%,30%,64%,100%{background:#E9DCCB}34%,60%{background:#C9F27C}}
@keyframes wGlowC{0%,63%,100%{background:#BFD8EE}67%,94%{background:#C9F27C}}
/* shutter */
.w-shut{position:absolute;inset:0;overflow:hidden;perspective:700px}
.w-shut .pg{position:absolute;inset:0;background:linear-gradient(160deg,#5A3420,#E8692C);display:grid;place-content:center;text-align:center;gap:10px;color:#fff}
.w-shut .pg b{font-size:24px}.w-shut .pg span{justify-self:center;background:#fff;color:#5A3420;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}
.w-shut .pn{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.w-shut .pn i{background:linear-gradient(90deg,#1E2510,#2A3311);border-right:1px solid rgba(201,242,124,.15);transform-origin:left;animation:wShut 5s var(--d) cubic-bezier(.65,0,.35,1) infinite}
@keyframes wShut{0%,15%{transform:rotateY(0)}45%,80%{transform:rotateY(-92deg)}95%,100%{transform:rotateY(0)}}
/* magnetic objects */
.w-magn{position:absolute;inset:0;overflow:hidden;background:#EEF2E4}
.w-magn i{position:absolute;display:block;transition:transform .5s var(--spring)}
.w-magn i:nth-child(1){left:18%;top:22%;width:46px;height:46px;border-radius:50%;background:#46521F}
.w-magn i:nth-child(2){left:60%;top:16%;width:34px;height:34px;border-radius:10px;background:#C9F27C}
.w-magn i:nth-child(3){left:40%;top:52%;width:56px;height:56px;border-radius:16px;background:#F2A33A}
.w-magn i:nth-child(4){left:74%;top:58%;width:30px;height:30px;border-radius:50%;background:#2E6BE6}
.w-magn i:nth-child(5){left:12%;top:66%;width:24px;height:24px;border-radius:6px;background:#D6455D}
.w-magn small{color:#5C6B2A!important;text-shadow:none!important}
/* ripple surface */
.w-rip{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 30% 20%,#7FD3D8,#1E8A9A 70%);cursor:pointer}
.w-rip .wave{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 6px rgba(255,255,255,.12);animation:wRing 1.8s ease-out forwards;pointer-events:none}
.w-rip .leaf{position:absolute;width:26px;height:16px;border-radius:0 16px 0 16px;background:#5C6B2A;animation:wLeaf 8s ease-in-out infinite alternate}
.w-rip .l1{left:20%;top:30%}.w-rip .l2{left:66%;top:60%;animation-delay:-3s;background:#8FA45E}
@keyframes wLeaf{to{transform:translate(30px,10px) rotate(40deg)}}
/* configurator */
.w-cfg{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;width:90%;align-items:center}
.w-cfg .v{height:170px;display:grid;place-items:center;perspective:500px}
.w-cfg .chair{position:relative;width:100px;height:120px;transform:rotateY(-25deg);transform-style:preserve-3d;animation:wChair 6s ease-in-out infinite alternate;--c:#5C6B2A}
@keyframes wChair{to{transform:rotateY(25deg)}}
.w-cfg .chair i{position:absolute;background:var(--c);transition:background .6s,filter .6s}
.w-cfg .seat{left:0;right:0;top:56px;height:22px;border-radius:10px}
.w-cfg .back{left:6px;right:6px;top:0;height:60px;border-radius:18px 18px 6px 6px;filter:brightness(1.08)}
.w-cfg .leg{top:78px;width:6px;height:40px;background:#2A2F25!important}.w-cfg .l1{left:12px}.w-cfg .l2{right:12px}
.w-cfg[data-m="velvet"] .chair i:not(.leg){background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 60%)}
.w-cfg .ui{display:grid;gap:10px;justify-items:start}
.w-cfg .sw{display:flex;gap:6px}
.w-cfg .sw button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer}
.w-cfg .sw button:nth-child(1){background:#5C6B2A}.w-cfg .sw button:nth-child(2){background:#B86675}.w-cfg .sw button:nth-child(3){background:#2E3A4F}
.w-cfg .sw button.on{box-shadow:0 0 0 2px #1E2510}
.w-cfg .mat{display:flex;gap:4px;background:#fff;padding:3px;border-radius:999px}
.w-cfg .mat button{border:0;background:none;border-radius:999px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
.w-cfg .mat button.on{background:#46521F;color:#fff}
.w-cfg .price{font-size:26px;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}

.sm-new{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:#1E2510;color:#C9F27C}

/* ===== Landing Page V1: QR-to-build hero ===== */
html .scrolly{height:auto!important}
html .sticky{position:relative!important;height:auto!important;min-height:calc(100vh - 70px);padding:40px 0 56px!important;display:flex;align-items:center}
.hero-visual,.scroll-hint,.progress-rail,.iso-steps{display:none!important}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;align-items:center}
.qh-stage{position:relative;height:min(620px,72vh);min-height:420px;--q-ink2:#4B5340;--q-line:#E6E9E0;--q-olive:#5B6B2B;--q-lime:#B9E86A}
.qh-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .9s ease}
.qh-stage canvas:active{cursor:grabbing}
.qh-stage.ready canvas{opacity:1}
.qh-poster{position:absolute;inset:0;display:grid;place-items:center;perspective:1100px;transition:opacity .7s ease}
.qh-stage.ready .qh-poster{opacity:0;pointer-events:none}
.qh-board{width:min(44%,270px);aspect-ratio:1;border-radius:6px;box-shadow:0 30px 60px -36px rgba(30,36,22,.4);transform:translateY(-7%);animation:qhFloat 6s ease-in-out infinite}
.qh-board svg{width:100%;height:100%;display:block}
.qh-shadow{position:absolute;bottom:24%;width:46%;height:22px;border-radius:50%;background:rgba(30,36,22,.18);filter:blur(14px)}
@keyframes qhFloat{0%,100%{transform:translateY(-7%)}50%{transform:translateY(calc(-7% - 6px))}}
.qh-stage.still .qh-board{animation:none}
.qh-prompt{position:absolute;left:4%;top:4%;max-width:min(360px,calc(100% - 120px));background:rgba(255,255,255,.92);border:1px solid var(--q-line);border-radius:16px;padding:12px 14px;box-shadow:0 18px 40px -22px rgba(30,36,22,.45);font-size:14px;color:var(--q-ink2);transition:opacity .5s,transform .5s;z-index:2}
.qh-prompt small{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--q-olive);margin-bottom:4px}
.qh-prompt small i{width:7px;height:7px;border-radius:50%;background:var(--q-lime);box-shadow:0 0 0 3px rgba(185,232,106,.35)}
.qh-prompt .caret{display:inline-block;width:2px;height:1em;background:var(--q-olive);vertical-align:-2px;margin-left:1px;animation:qhBlink 1s steps(1) infinite}
.qh-prompt.hide{opacity:0;transform:translateY(-6px)}
@keyframes qhBlink{50%{opacity:0}}
.qh-stages{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:6px;background:rgba(255,255,255,.9);border:1px solid var(--q-line);border-radius:999px;padding:5px;box-shadow:0 10px 30px -18px rgba(30,36,22,.4);white-space:nowrap;z-index:2}
.qh-stages button{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:#9AA190;padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.qh-stages button.on{background:var(--q-olive);color:#fff}
.qh-stages button.done{color:var(--q-olive)}
.qh-ctrl{position:absolute;right:2%;top:3%;display:flex;gap:6px;z-index:2}
.qh-ctrl button{width:40px;height:40px;border-radius:12px;border:1px solid var(--q-line);background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;color:var(--q-ink2)}
.qh-ctrl svg,.qh-tap svg,.qh-play svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qh-hint{position:absolute;right:3%;bottom:62px;font-size:12px;color:#9AA190;transition:opacity .4s;z-index:2}
.qh-hint.off{opacity:0}
.qh-tap,.qh-play{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--q-line);background:rgba(255,255,255,.94);box-shadow:0 10px 26px -18px rgba(30,36,22,.45);font:inherit;font-size:13px;font-weight:600;color:var(--q-olive);cursor:pointer;white-space:nowrap;z-index:2}
.qh-play{display:none}
.qh-play svg{fill:currentColor;stroke:none}
.qh-fallback{position:absolute;inset:0;display:none;place-items:center;text-align:center;color:#6E7566;font-size:14px;padding:24px}
.qh-stage.nogl .qh-fallback{display:grid}
/* until the 3D is running, only the poster and brief show */
.qh-stage:not(.ready) .qh-ctrl,.qh-stage:not(.ready) .qh-hint,.qh-stage:not(.ready) .qh-tap,.qh-stage:not(.ready) .qh-stages{opacity:0;pointer-events:none}
.qh-stage .qh-ctrl,.qh-stage .qh-hint,.qh-stage .qh-tap,.qh-stage .qh-stages{transition:opacity .6s ease}
.qh-stage.lite:not(.ready):not(.still) .qh-play{display:inline-flex}
.qh-stage.loading .qh-play{opacity:.6;pointer-events:none}
.qh-stage.still .qh-prompt .caret{animation:none}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr!important}.qh-stage{height:460px;min-height:0}html .sticky{min-height:0}}
@media (max-width:560px){button.hero-avail{font-size:13px;padding:8px 12px;gap:8px}button.hero-avail .availTxt,button.hero-avail .cal9-cta{white-space:nowrap}.qh-stage{height:400px}.qh-stages{left:0;right:0;transform:none;margin:0 auto;width:max-content;max-width:100%;overflow-x:auto}.qh-stages button{padding:8px 9px;font-size:12px}.qh-hint{display:none}.qh-tap{bottom:54px;font-size:12px;height:30px}}
/*EXTRA_CSS*/

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .scrolly{height:auto}
  .sticky{position:relative;height:auto;padding:70px 0 90px}
  .rv{opacity:1;transform:none;filter:none}
  .progress-rail,.scroll-hint{display:none}
  .line-mask > span{transform:none}
}

.ind-cover img.ind-slide{object-position:50% 12%;transform-origin:50% 20%}
.ind-cover:has(img.ind-slide) svg{visibility:hidden}
.ind-cover:has(img.ind-slide)::after{background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.18))}
@font-face{font-family:S9Sora;font-weight:800;src:url(../fonts/s9sora.woff2) format("woff2")}
@font-face{font-family:S9Mono;font-weight:700;src:url(../fonts/s9mono.woff2) format("woff2")}
/* ===== V11.1: nothing can stretch the page past the footer ===== */
main#main{overflow:clip}
body > footer{overflow:clip;position:relative}
/* ===== V15 ===== */
/* titles that slide in from both sides, items that glide in */
.slide-title{display:flex;flex-wrap:wrap;gap:0 .28em;overflow:hidden;padding-bottom:.06em}
.slide-title span{display:inline-block;transition:transform 1s var(--spring),opacity .9s ease}
.js .slide-title:not(.in) span:first-child{transform:translateX(-60px);opacity:0}
.js .slide-title:not(.in) span:last-child{transform:translateX(60px);opacity:0}
.from-l,.from-r,.from-b{transition:transform 1s var(--spring),opacity .9s ease}
.js .from-l:not(.in){transform:translateX(-70px);opacity:0}
.js .from-r:not(.in){transform:translateX(70px);opacity:0}
.js .from-b:not(.in){transform:translateY(50px);opacity:0}
@media (prefers-reduced-motion:reduce){.js .slide-title span,.js .from-l,.js .from-r,.js .from-b{transform:none!important;opacity:1!important}}
/* handover */
.ho-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.ho{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 22px;position:relative;overflow:hidden}
.ho::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--spring) .3s}
.ho.in::after{transform:scaleY(1)}
.ho:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.ho-ic{width:44px;height:44px;flex:none;border-radius:14px;background:var(--accent);color:#fff;display:grid;place-items:center}
.ho-ic svg{width:22px;height:22px}
.ho b{display:block;font-size:17px;letter-spacing:-0.01em}
.ho span:not(.ho-ic){display:block;color:var(--muted);font-size:14.5px;margin-top:2px}
.ho:nth-child(2){transition-delay:.08s}.ho:nth-child(3){transition-delay:.16s}.ho:nth-child(4){transition-delay:.24s}.ho:nth-child(5){transition-delay:.32s}.ho:nth-child(6){transition-delay:.4s}
/* after launch */
.al-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.al-card{border-radius:26px;padding:30px;background:linear-gradient(160deg,var(--accent-soft),var(--surface) 60%);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));display:flex;flex-direction:column;gap:14px}
.al-card:nth-child(2){background:linear-gradient(160deg,#F3EFE4,var(--surface) 60%);transition-delay:.12s}
.al-top{display:flex;align-items:center;gap:14px}
.al-top h3{font-size:22px;margin:0;letter-spacing:-0.02em}
.al-ic{width:50px;height:50px;border-radius:16px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 14px 26px -16px var(--accent)}
.al-ic svg{width:24px;height:24px}
.al-card p{color:var(--muted);margin:0}
.al-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.al-plans span{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;font-size:12.5px;color:var(--muted);text-align:center}
.al-plans b{display:block;font-size:20px;color:var(--ink);letter-spacing:-0.03em}
.al-plans .hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.al-link{font-weight:600;color:var(--accent);text-decoration:none;margin-top:auto}
.al-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.al-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.al-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.1L11.5 5.6' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* what we believe */
.bv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.bv{position:relative;overflow:hidden;border-radius:26px;padding:26px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;transition:transform .7s var(--spring),box-shadow .5s,opacity .9s,border-color .3s}
.bv::before{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(141,191,53,.28)),transparent 70%);transition:transform 1s var(--spring)}
.bv:hover{transform:translateY(-6px);box-shadow:0 34px 60px -40px rgba(30,36,22,.45);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.bv:hover::before{transform:scale(1.5)}
.bv1{background:linear-gradient(160deg,#2E3A12,#1E2510);color:#F3F7E8;border-color:transparent;--glow:rgba(201,242,124,.35)}
.bv1 p,.bv1 small,.bv1 .bv-n{color:rgba(243,247,232,.72)!important}
.bv1 .bv-ic{background:rgba(201,242,124,.16);color:#C9F27C}
.bv2{--glow:rgba(242,190,92,.35)}.bv3{--glow:rgba(91,180,163,.32)}.bv4{--glow:rgba(201,242,124,.4)}.bv5{--glow:rgba(194,87,122,.25)}.bv6{--glow:rgba(91,140,220,.28)}
.bv6{background:linear-gradient(160deg,#EEF5E1,var(--surface))}
.bv-top{display:flex;justify-content:space-between;align-items:center;position:relative}
.bv-ic{width:46px;height:46px;border-radius:15px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.bv-ic svg{width:22px;height:22px}
.bv-n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.1em}
.bv-stat{position:relative;margin-top:8px}
.bv-stat b{display:block;font-size:44px;line-height:1;letter-spacing:-0.05em;font-weight:600}
.bv-stat small{font-size:13px;color:var(--muted)}
.bv h3{font-size:20px;margin:6px 0 0;position:relative}
.bv p{color:var(--muted);font-size:15px;margin:0;position:relative}
.bv:nth-child(2){transition-delay:.08s}.bv:nth-child(3){transition-delay:.16s}.bv:nth-child(4){transition-delay:.06s}.bv:nth-child(5){transition-delay:.14s}.bv:nth-child(6){transition-delay:.22s}
@media (max-width:900px){.ho-grid,.al-grid{grid-template-columns:1fr}.bv-grid{grid-template-columns:1fr 1fr}.al-plans{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bv-grid{grid-template-columns:1fr}}
/* onboarding on How it works: read-only list */
.onb-static{cursor:default}
.onb-static i{background:var(--accent);border-color:var(--accent)!important;color:#fff;display:grid;place-items:center}
.onb-static i svg{width:12px;height:12px}
.onb-static i::after{display:none!important}
/* planner: brief step */
.pf-brief-h{display:flex;justify-content:space-between;align-items:center;gap:16px}
.pf-bring{position:relative;width:78px;height:78px;flex:none}
.pf-bring svg{width:78px;height:78px;transform:rotate(-90deg)}
.pf-bring circle{fill:none;stroke-width:7}
.pf-bring .bg{stroke:var(--mist,#EEF0E8)}
.pf-bring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s var(--spring)}
.pf-bring b{position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
.pf-brief{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.pf-bcard{border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--surface);display:grid;gap:10px;align-content:start}
.pf-bcard .n{font-size:12px;font-weight:700;color:var(--accent)}
.pf-bcard h3{font-size:16px;margin:0}
.pf-bf{display:grid;gap:4px;font-size:13px;font-weight:600}
.pf-bf textarea,.pf-bf input{font:inherit;font-weight:400;font-size:14px;border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:var(--bg,#fff);width:100%;resize:vertical}
.pf-bck{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.pf-bck input{width:18px;height:18px;accent-color:var(--accent)}
.pf-bnote{font-size:12.5px;color:var(--muted);margin:0}
@media (max-width:900px){.pf-brief{grid-template-columns:1fr}}
/* ===== V16 ===== */
.pf-xpress{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin:4px 0 16px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.pf-xpress .pf-xt{flex:1;display:flex;flex-direction:column;gap:2px}.pf-xpress small{color:var(--muted);font-size:13px}.pf-xpress em{font-style:normal;font-weight:600;font-size:13px;padding:4px 10px;border-radius:999px;background:var(--mist)}
.pf-xsw{width:38px;height:22px;border-radius:999px;background:var(--mist-2);position:relative;flex:none;transition:background .2s}.pf-xsw:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.pf-xpress.on{border-color:var(--accent);background:var(--mist)}.pf-xpress.on .pf-xsw{background:var(--accent)}.pf-xpress.on .pf-xsw:after{transform:translateX(16px)}
.pf-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:14px 0;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--mist)}
.pf-foot b{display:block;font-size:15px}.pf-foot span{color:var(--muted);font-size:13px}.pf-footo{display:flex;gap:8px;flex-wrap:wrap}
.pf-footb{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;cursor:pointer;color:var(--ink)}
.pf-footb[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* ===== V17 ===== */
#pfFormSlot .pf-next{display:none}
.pf-ctp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.pf-ctp-head > div:first-child{max-width:620px}
.pf-ctp-sw{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--mist);border:1px solid var(--line);margin-bottom:16px}
.pf-ctp-sw button{border:0;background:none;padding:8px 16px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.pf-ctp-sw button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(30,35,24,.12)}
.pf-ctp-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pf-ctp-sum b{font-size:22px;letter-spacing:-.02em}.pf-ctp-sum small{color:var(--muted)}
.pf-ctg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.pf-ctf{border:1px solid var(--line);border-radius:22px;padding:24px;background:var(--surface)}
.pf-cta-side{display:grid;gap:14px}
.pf-ctp-card{border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--mist)}
.pf-ctp-card h4{font-size:16px;margin:0 0 14px}.pf-ctp-note{color:var(--muted);font-size:13px;margin:-8px 0 12px}
.pf-ctp-soft{background:var(--surface);display:grid;gap:4px}.pf-ctp-soft span{color:var(--muted);font-size:14px}
.pf-tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pf-tl li{position:relative;padding:0 0 18px 30px;display:grid;gap:2px}
.pf-tl li:before{content:"";position:absolute;left:6px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);background:var(--surface)}
.pf-tl li:after{content:"";position:absolute;left:12px;top:22px;bottom:2px;width:2px;background:var(--line)}
.pf-tl li:last-child{padding-bottom:0}.pf-tl li:last-child:after{display:none}
.pf-tl li.now:before{background:var(--accent);box-shadow:0 0 0 4px var(--tint-b)}
.pf-tl span{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}.pf-tl b{font-size:15px}.pf-tl small{color:var(--muted);font-size:13px}
.pf-have{list-style:none;margin:0;padding:0;display:grid;gap:8px}.pf-have li{display:flex;align-items:center;gap:10px;font-size:14px}
.pf-ck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:12px;background:var(--surface)}
.pf-ck.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pf-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.pf-meta span{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.pf-agenda{margin:0;padding:0;list-style:none;counter-reset:ag;display:grid;gap:12px}
.pf-agenda li{counter-increment:ag;display:grid;gap:2px;padding-left:38px;position:relative}
.pf-agenda li:before{content:counter(ag);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:13px;font-weight:700}
.pf-agenda small{color:var(--muted);font-size:13px}
.pf-sent .pf-cta-side,.pf-sent .pf-ctp-head{display:none}.pf-sent .pf-ctg{grid-template-columns:1fr}.pf-sent .pf-ctf{border:0;padding:0;background:none}
#done .pf-ok,#done .pf-ok *{text-align:left}
#done.on{display:block}
.pf-ok{display:grid;gap:14px;text-align:left}
.pf-ok-cards .btn-quiet{background:var(--surface);border:1px solid var(--line)}
.pf-ok-tick{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;animation:pfPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pfPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.pf-ok h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.025em;line-height:1.1}.pf-ok-sub{color:var(--muted);font-size:16px;max-width:620px}
.pf-ok-warn{padding:12px 14px;border-radius:12px;background:var(--tint-b);font-size:14px}
.pf-ok-tl{list-style:none;margin:8px 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pf-ok-tl li{border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:4px;background:var(--surface);position:relative}
.pf-ok-tl li b{font-size:14.5px}.pf-ok-tl li span{color:var(--muted);font-size:12.5px}
.pf-ok-tl li.done{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.pf-ok-tl li.done span{color:inherit;opacity:.8}
.pf-ok-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-ok-cards > div{border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--mist);display:grid;gap:6px;align-content:start}
.pf-ok-cards span{color:var(--muted);font-size:14px}.pf-ok-cards .btn{justify-self:start;margin-top:6px}
.pf-cal-embed{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);height:680px}
.pf-cal-embed iframe{width:100%;height:100%;border:0;display:block}
.pf-ok-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pf-side2{gap:14px}
.pf-sc{border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--surface);box-shadow:0 1px 0 rgba(30,35,24,.03),0 10px 26px -18px rgba(30,35,24,.35);transition:transform .2s,box-shadow .2s}
.pf-sc:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(30,35,24,.03),0 16px 30px -18px rgba(30,35,24,.45)}
.pf-sc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pf-sc-h > span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:1}
.pf-sc-ic{width:32px;height:32px;border-radius:10px;background:var(--mist);color:var(--accent);display:grid;place-items:center;flex:none}
.pf-sc-ic svg{width:17px;height:17px}
.pf-sc-sw{display:flex;gap:6px;margin-bottom:10px}.pf-sc-sw i{flex:1;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pf-sc-sw.ph i{background:repeating-linear-gradient(135deg,var(--mist),var(--mist) 6px,var(--mist-2) 6px,var(--mist-2) 12px)}
.pf-sc-p{font-size:14px;color:var(--muted);line-height:1.5}.pf-sc-p b{color:var(--ink)}
.pf-sc-date{display:flex;gap:14px;align-items:center}
.pf-sc-date > div:last-child{display:grid;gap:2px}.pf-sc-date b{font-size:15.5px}.pf-sc-date span{color:var(--muted);font-size:13.5px}.pf-sc-date em{font-style:normal;font-size:12px;color:var(--accent-2)}
.pf-caltile{width:62px;flex:none;border-radius:14px;overflow:hidden;border:1px solid var(--line);text-align:center;display:grid;background:var(--surface)}
.pf-caltile small:first-child{background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 0}
.pf-caltile b{font-size:24px;line-height:1.2;padding-top:2px}.pf-caltile small:last-child{font-size:10.5px;color:var(--muted);padding-bottom:4px}
.pf-caltile.ph small:first-child{background:var(--mist-2)}.pf-caltile.ph b{color:var(--muted)}
.pf-sc-host{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pf-sc-host > div:first-child{display:grid;gap:3px}.pf-sc-host b{font-size:16px}.pf-sc-host span{color:var(--muted);font-size:13px;line-height:1.45}
.pf-sc-price{font-size:24px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;padding:6px 12px;border-radius:12px;background:var(--mist)}.pf-sc-price small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:3px}
.pf-sc-tip{background:var(--mist)}
.pf-sc-dark{background:linear-gradient(160deg,#2C3519,#1E2318);color:#F2F5EC;border-color:transparent}
.pf-sc-dark .pf-sc-h > span{color:rgba(242,245,236,.7)}.pf-sc-dark .pf-sc-ic{background:rgba(255,255,255,.1);color:#D4E39A}
.pf-sc-dark small{color:rgba(242,245,236,.6);font-size:12px}
.pf-mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pf-mini3 i{aspect-ratio:4/3;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:7px;display:grid;gap:4px;align-content:start}
.pf-mini3 b{display:block;height:24px;border-radius:5px;background:linear-gradient(135deg,#D4E39A,#7FD1A9);opacity:.85}
.pf-mini3 i:nth-child(2) b{background:linear-gradient(135deg,#F3DCD3,#C98B7D)}.pf-mini3 i:nth-child(3) b{background:linear-gradient(135deg,#BFD8EE,#6E8FD8)}
.pf-mini3 s{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.22);text-decoration:none}.pf-mini3 s:last-child{width:60%}
.pf-steps3{list-style:none;margin:0 0 10px;padding:0;counter-reset:st;display:grid;gap:10px}
.pf-steps3 li{counter-increment:st;position:relative;padding-left:36px;display:grid;gap:1px}
.pf-steps3 li:before{content:counter(st);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#D4E39A;color:#1E2318;font-size:12.5px;font-weight:700;display:grid;place-items:center}
.pf-steps3 b{font-size:14.5px}.pf-steps3 span{font-size:12.5px;color:rgba(242,245,236,.65)}
.pf-next2{display:grid;gap:8px}
.pf-next2 button{display:flex;gap:12px;align-items:center;text-align:left;width:100%;padding:13px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);transition:border-color .2s,background .2s}
.pf-next2 button > span{flex:1;display:grid;gap:2px}.pf-next2 b{font-size:14.5px}.pf-next2 small{color:var(--muted);font-size:12.5px;line-height:1.4}
.pf-n2-ic{width:36px;height:36px;border-radius:11px;background:var(--mist);color:var(--accent);display:grid;place-items:center;flex:none}.pf-n2-ic svg{width:18px;height:18px}
.pf-n2-r{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative}
.pf-next2 button[aria-pressed="true"]{border-color:var(--accent);background:var(--mist)}
.pf-next2 button[aria-pressed="true"] .pf-n2-ic{background:var(--accent);color:var(--accent-ink)}
.pf-next2 button[aria-pressed="true"] .pf-n2-r{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 4px var(--surface)}
@media (max-width:820px){ .pf-ctg{grid-template-columns:1fr} .pf-ok-tl{grid-template-columns:1fr 1fr} .pf-ok-cards{grid-template-columns:1fr} .pf-ctf{padding:18px} .pf-cal-embed{height:620px} }
/* ===== V11 ===== */
.tm9 .portrait img,.tm9 .mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.tm9 .mini{position:relative;overflow:hidden}
.tm9 .portrait .live{z-index:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* robot logo */
.s9r-logo{gap:0!important}
.s9r{--s:11px;--g:2px;position:relative;display:inline-flex;align-items:center;gap:9px;line-height:1}
.s9r-door{position:relative;display:block;line-height:0;flex:none}
.s9r-doorway{position:absolute;inset:4%;border-radius:24%;background:radial-gradient(circle at 50% 55%,#2c3a12 0,#0c1104 70%);box-shadow:inset 0 0 10px rgba(168,222,102,.35),inset 0 0 3px rgba(0,0,0,.9);overflow:hidden}
.s9r-doorway::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(200,255,140,.6),transparent 60%);opacity:var(--light,0)}
.s9r-tile{display:block;width:40px;height:40px;position:relative;z-index:1;transform-origin:0% 50%;backface-visibility:visible;filter:drop-shadow(0 4px 5px rgba(31,41,11,.28))}
.s9r-col{display:flex;flex-direction:column;gap:5px}
.s9r-word{font-family:S9Sora,'Unbounded',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.9px;line-height:.82;white-space:nowrap;color:transparent;background:linear-gradient(180deg,#4a5040 0%,#23271d 38%,#14170f 100%);-webkit-background-clip:text;background-clip:text;
  text-shadow:0 1px 0 #262a20,0 2px 0 #1a1d15,0 3px 2px rgba(0,0,0,.18)}
.s9r-word b{color:transparent;background:linear-gradient(180deg,#c6f08a 0%,#93cc46 45%,#6c9f2a 100%);-webkit-background-clip:text;background-clip:text;text-shadow:0 1px 0 #73a332,0 2px 0 #5a8224,0 3px 2px rgba(0,0,0,.15)}
.s9r-row{display:flex;align-items:center;gap:var(--g);perspective:400px;padding-left:1px}
.s9r-by{font-family:S9Mono,'JetBrains Mono',monospace;font-weight:700;font-size:10px;color:#8a8a87;margin-right:1px}
.s9r-cubes{display:flex;gap:var(--g);transform-style:preserve-3d;transform:rotateX(-22deg)}
.s9r .slot{position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d}
.s9r .cube{position:absolute;inset:0;transform-style:preserve-3d}
.s9r .face{position:absolute;inset:0;border-radius:calc(var(--s)*.24);backface-visibility:hidden;display:grid;place-items:center;overflow:hidden;background:linear-gradient(170deg,#5b6c2c,#25300e);box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(0,0,0,.35)}
.s9r .face.front{transform:translateZ(calc(var(--s)/2))}
.s9r .face.top{transform:rotateX(90deg) translateZ(calc(var(--s)/2));background:radial-gradient(120% 120% at 30% 20%,#a3ba57,#6b7e33 60%,#56662a)}
.s9r .face.right{transform:rotateY(90deg) translateZ(calc(var(--s)/2));background:linear-gradient(170deg,#3a4717,#161d06)}
.s9r .ltr{font-family:S9Mono,'JetBrains Mono',monospace;font-weight:700;font-size:calc(var(--s)*.74);line-height:1;color:#f8fdec;transform:translate(-.03em,-.05em);text-shadow:.04em .04em 0 #7d9140,.08em .08em 0 #2c3810}
.s9r .glint{position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%)}
.s9r-robot{position:absolute;left:0;top:0;width:40px;height:auto;z-index:6;pointer-events:none;visibility:hidden;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.s9r-robot .rb-body{animation:rbHover 2.6s ease-in-out infinite}
.s9r-robot .rb-flame{transform-origin:80px 160px;animation:rbFlame .12s steps(2) infinite alternate}
.s9r-robot .rb-flame.s{transform-origin:center;animation:rbFlame .09s steps(2) infinite alternate}
.s9r-robot .rb-scan{animation:rbScan 1.8s ease-in-out infinite}
.s9r-robot .rb-ant{animation:rbBlink 1.2s steps(1) infinite}
@keyframes rbHover{50%{transform:translateY(-2px)}}
@keyframes rbFlame{to{transform:scaleY(.82) scaleX(1.08);opacity:.85}}
@keyframes rbScan{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}
@keyframes rbBlink{50%{opacity:.35}}
.s9r-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7;overflow:visible}
.s9r-spark{position:absolute;width:2px;height:2px;margin:-1px;border-radius:50%;background:#f4ffd8;box-shadow:0 0 3px #c8ff7a,0 0 5px #8cc63f;pointer-events:none;z-index:8}
@media (max-width:560px){.s9r{--s:9px;gap:7px}.s9r-word{font-size:22px}.s9r-tile{width:33px;height:33px}.s9r-by{font-size:9px}.s9r-col{gap:4px}}
/* ===== V10 ===== */
/* industry cards: uniform bottom tabs */
.ind-acts{margin-top:auto!important;padding-top:20px!important;display:flex!important;flex-direction:column;align-items:center;gap:10px!important;width:100%}
.ind-acts .ind-main{width:100%;justify-content:center;gap:8px;height:46px;border-radius:14px;font-size:15px;box-shadow:0 10px 22px -14px color-mix(in srgb,var(--accent) 80%,transparent)}
.ind-acts .ind-main svg{transition:transform .3s var(--spring)}
.ind-acts .ind-main:hover svg{transform:translateX(3px)}
.ind-acts .ind-sub{display:inline-flex!important;align-items:center;gap:6px;font-size:13.5px!important;font-weight:500;color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;margin:0!important;padding:0!important}
.ind-acts .ind-sub svg{color:var(--muted)}
.ind-other .ind-acts .ind-sub{text-decoration:none;color:var(--muted)!important}
/* industry icons: white tile, olive glyph */
.ind .app-ic{background:#fff!important;box-shadow:0 0 0 4px var(--surface),0 10px 22px -12px rgba(30,36,22,.35),inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)!important}
.ind .app-ic svg{stroke:var(--accent)!important;filter:none!important}
.ind .app-ic::before,.ind .app-ic::after{display:none!important}
/* money: two bars that stay */
.m2 .m2-row + .m2-row{margin-top:30px;padding-top:28px;border-top:1px dashed var(--line)}
.m2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.m2-head b{display:block;font-size:20px;letter-spacing:-0.02em;margin-top:6px}
.m2-head span{font-size:14px;color:var(--muted)}
.m2-k{display:inline-block;font-size:11.5px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B7280!important;background:var(--mist);border-radius:999px;padding:3px 10px}
.m2-k.us{color:#fff!important;background:var(--accent)}
.m2-total{font-size:clamp(34px,4.2vw,52px);font-weight:600;letter-spacing:-0.05em;line-height:1;color:#8A919C;font-variant-numeric:tabular-nums}
.m2-total.us{color:var(--accent)}
.m2-bar{display:flex;height:64px;border-radius:16px;overflow:hidden;gap:3px;background:var(--mist)}
.m2seg{flex:0 0 var(--w);background:var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;min-width:0;transform:scaleY(.2);opacity:0;transform-origin:bottom;transition:transform .7s var(--spring),opacity .5s;transition-delay:calc(var(--i) * .45s)}
.m2seg em{font-style:normal;font-size:12px;font-weight:600;color:#2a2f37;white-space:nowrap;padding:0 6px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.m2seg small{font-size:11px;color:#4b5563;font-variant-numeric:tabular-nums}
.m2seg.keep em,.m2seg.keep small{color:#fff}
.go .m2seg{transform:none;opacity:1}
.m2-us .m2-bar{background:repeating-linear-gradient(135deg,var(--mist) 0 10px,color-mix(in srgb,var(--mist) 60%,var(--surface)) 10px 20px)}
.m2-fill{flex:0 0 0%;background:var(--accent);display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;transition:flex-basis 1.4s var(--spring);transition-delay:3.4s}
.m2-fill em{font-style:normal;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;padding:0 8px}
.go .m2-fill{flex-basis:23%}
.m2-gap{flex:1;display:flex;align-items:center;justify-content:center;font-size:13.5px;color:var(--muted);opacity:0;transition:opacity .8s;transition-delay:4.2s;text-align:center;padding:0 10px}
.m2-gap b{color:var(--accent);margin-left:4px}
.go .m2-gap{opacity:1}
.m2-us .m2-total{opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s var(--spring);transition-delay:3.6s}
.go .m2-us .m2-total{opacity:1;transform:none}
@media (max-width:700px){.m2seg em,.m2seg small,.m2-fill em{display:none}.m2-bar{height:40px}.m2-gap{font-size:12px}.go .m2-fill{flex-basis:18%}}
@media (prefers-reduced-motion:reduce){.m2seg,.m2-fill,.m2-gap,.m2-us .m2-total{transition:none!important}}
/* team: hanging cards (scoped) */
.tm9{--page:var(--bg,#fbfaf7);--ink2:#4a4741;--tmuted:#78736a;--hairline:rgba(40,32,22,.09);--live:#2B8A57;--card:#f2f0eb;--card-edge:rgba(40,32,22,.06);--rope:#9c978f;--metal-hi:#dcd9d3;--metal-lo:#b7b3ab;--card-w:290px;--radius:22px;
  --holo:radial-gradient(120% 70% at 0% 0%,#d6ead0 0%,transparent 55%),radial-gradient(90% 60% at 100% 12%,#f2e6c8 0%,transparent 60%),radial-gradient(110% 70% at 20% 100%,#e8efb8 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#d9e6dc 0%,transparent 62%),#f3f2ea;
  --iris:linear-gradient(112deg,transparent 6%,rgba(118,192,212,.44) 24%,rgba(222,214,120,.4) 40%,rgba(230,150,188,.44) 56%,rgba(156,146,222,.44) 72%,transparent 92%);
  --iris-foil:linear-gradient(112deg,transparent 14%,rgba(84,176,204,.62) 28%,rgba(206,204,92,.56) 40%,rgba(222,120,172,.6) 52%,rgba(130,118,214,.62) 64%,transparent 80%);
  --flip:760ms;--turn:cubic-bezier(.3,1,.25,.95);--depth:1000px;margin-top:44px}
.tm9 .line{margin-top:10px}
.tm9 .track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:28px;padding-bottom:32px}
.tm9 .rope{position:absolute;top:0;left:8%;width:84%;height:40px;overflow:visible;pointer-events:none}
.tm9 .rope path{fill:none;stroke:var(--rope);stroke-width:1.4;vector-effect:non-scaling-stroke}
.tm9 .hang{position:relative;display:flex;justify-content:center;padding-top:var(--pin)}
.tm9 .hang.is-active{z-index:3}
.tm9 .pin{position:absolute;z-index:2;left:50%;top:var(--pin);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1efea,var(--metal-lo));box-shadow:0 1px 2px rgba(40,32,22,.25)}
.tm9 .pendulum{position:relative;width:100%;max-width:var(--card-w);padding-top:var(--drop);transform-origin:50% 0;transform:rotate(var(--rest))}
.tm9 .string{position:absolute;z-index:1;left:50%;top:0;width:1px;height:var(--drop);margin-left:-.5px;background:var(--rope)}
.tm9 .card{--mx:50%;--my:50%;--glow:0;position:relative;perspective:var(--depth)}
.tm9 .clip{position:absolute;z-index:3;left:50%;top:-12px;width:26px;height:22px;margin-left:-13px;border-radius:7px 7px 4px 4px;background:linear-gradient(180deg,var(--metal-hi),var(--metal-lo));box-shadow:0 2px 3px rgba(40,32,22,.2),inset 0 1px 0 rgba(255,255,255,.7)}
.tm9 .clip::after{content:"";position:absolute;left:5px;right:5px;bottom:4px;height:1px;background:rgba(40,32,22,.18);box-shadow:0 1px 0 rgba(255,255,255,.5)}
.tm9 .clip::before{content:"";position:absolute;left:50%;top:5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--page);box-shadow:inset 0 1px 2px rgba(40,32,22,.35)}
.tm9 .tilt{position:relative;transform-style:preserve-3d;transform-origin:50% 0}
.tm9 .inner{position:relative;display:grid;transform-style:preserve-3d;transition:transform var(--flip) var(--turn)}
.tm9 .card.is-flipped .inner{transform:rotateY(180deg)}
.tm9 .face{position:relative;grid-area:1/1;display:flex;flex-direction:column;border-radius:var(--radius);padding:22px 18px 18px;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;box-shadow:0 0 0 1px var(--card-edge),0 28px 44px -28px rgba(60,44,28,.32),0 2px 6px -2px rgba(60,44,28,.08)}
.tm9 .front{background:var(--card)}
.tm9 .back{background:var(--holo);transform:rotateY(180deg)}
.tm9 .sheen{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(58% 42% at var(--mx) var(--my),rgba(255,253,248,.7),rgba(255,253,248,.14) 46%,transparent 74%),var(--iris);background-size:100% 100%,230% 230%;background-position:0 0,var(--mx) var(--my)}
.tm9 .front .sheen{opacity:calc(var(--glow) * .75);mix-blend-mode:soft-light}
.tm9 .back .sheen{opacity:var(--glow);mix-blend-mode:color-burn;background:radial-gradient(58% 42% at var(--mx) var(--my),rgba(255,253,248,.7),rgba(255,253,248,.14) 46%,transparent 74%),var(--iris-foil);background-size:100% 100%,260% 260%;background-position:0 0,var(--mx) var(--my)}
.tm9 .hit{position:absolute;z-index:4;top:calc(var(--pin) + var(--drop));bottom:0;left:0;right:0;width:min(100%,var(--card-w));margin:0 auto;padding:0;border:0;background:none;transform:rotate(var(--rest));transform-origin:50% calc(var(--drop) * -1);border-radius:var(--radius);cursor:pointer;-webkit-tap-highlight-color:transparent}
.tm9 .hit:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.tm9 .row{display:flex;justify-content:space-between;align-items:center}
.tm9 .tag,.tm9 .cta-label,.tm9 .label{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.tm9 .tag,.tm9 .num{color:var(--tmuted)}
.tm9 .num{font-size:10px;letter-spacing:.06em}
.tm9 .portrait{position:relative;margin-top:14px;aspect-ratio:10/9;border-radius:14px;overflow:hidden;display:grid;place-items:center;color:var(--accent)}
.tm9 .portrait svg{width:46%;height:46%;opacity:.75}
.tm9 .tm9-ini{font-size:72px;font-weight:600;letter-spacing:-0.04em;color:var(--accent);opacity:.85}
.tm9 .portrait .live{position:absolute;right:12px;bottom:12px;width:12px;height:12px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.tm9 .t1{background:linear-gradient(160deg,#e7efd8,#cfdcb4)}
.tm9 .t2{background:linear-gradient(160deg,#dfeae6,#c3d8cf)}
.tm9 .t3{background:linear-gradient(160deg,#f1e8cc,#e2d3a6)}
.tm9 .t4{background:linear-gradient(160deg,#e3e6dc,#cbd1c0)}
.tm9 .name{margin:18px 0 0;font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-0.025em}
.tm9 .role{margin:4px 0 22px;font-size:14px;color:var(--ink2)}
.tm9 .cta{margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center}
.tm9 .cta-label{color:var(--ink2);font-weight:500}
.tm9 .go{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
.tm9 .go svg,.tm9 .undo svg{width:12px;height:12px}
.tm9 .undo{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(40,32,22,.08);color:var(--ink2)}
.tm9 .id{display:flex;align-items:center;gap:10px;margin-top:14px}
.tm9 .mini{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.tm9 .mini svg{width:60%;height:60%}
.tm9 .mini b{font-size:15px}
.tm9 .id-name{font-size:16px;font-weight:600;letter-spacing:-0.02em;line-height:1.2}
.tm9 .id-role{font-size:11px;color:var(--ink2)}
.tm9 .where{margin-top:12px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2)}
.tm9 .where svg{width:10px;height:10px;color:var(--tmuted)}
.tm9 .bio{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink)}
.tm9 .label{margin-top:16px;padding-top:12px;border-top:1px solid var(--hairline);color:var(--tmuted)}
.tm9 .projects{list-style:none;margin:6px 0 0;padding:0}
.tm9 .projects li{padding:7px 0;border-bottom:1px solid var(--hairline);font-size:12.5px;color:var(--ink)}
.tm9 .connect{margin-top:auto;padding-top:14px}
.tm9 .connect .label{margin:0;padding:0;border:0}
.tm9 .mail{display:block;margin-top:4px;font-size:12px;color:var(--ink)}
.tm9-hint{text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.tm9 .hint-touch{display:none}
@media (hover:none){.tm9 .hint-fine{display:none}.tm9 .hint-touch{display:inline}}
@media (max-width:1180px){
  .tm9 .line{margin-left:-20px;margin-right:-20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .tm9 .line::-webkit-scrollbar{display:none}
  .tm9 .track{width:max-content;grid-template-columns:repeat(4,260px);gap:24px;padding:0 20px 40px}
  .tm9 .hang{scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){
  .tm9 .inner,.tm9 .card.is-flipped .inner{transform:none;transition:none}
  .tm9 .face{-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s linear}
  .tm9 .back{transform:none;opacity:0}
  .tm9 .card.is-flipped .back{opacity:1}
  .tm9 .card.is-flipped .front{opacity:0}
}
/* ===== V9 ===== */
.pf-host4[data-hpick="hands"]{border:2px solid var(--accent);box-shadow:0 26px 50px -30px color-mix(in srgb,var(--accent) 70%,transparent);transform:translateY(-6px);background:linear-gradient(180deg,var(--accent-soft),var(--surface) 38%)}
.pf-host4[data-hpick="hands"] .pf-h4tag{background:var(--accent);color:#fff}
.pf-pgopts .pf-opt.cur{border-color:var(--accent)}
.pf-pgopts .pf-opt[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent)}
.pf-pkpick{display:grid;gap:8px}
.pf-pkpick .pf-pkg{width:100%}
.pf-other{display:grid;gap:4px;text-align:left;font:inherit;color:var(--ink);background:transparent;border:1.5px dashed var(--line);border-radius:18px;padding:18px 20px;cursor:pointer;transition:border-color .3s}
.pf-other:hover{border-color:var(--accent)}
.pf-other b{font-size:16px}
.pf-other span{font-size:13.5px;color:var(--muted)}
.pf-other.on{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
#pfOther{width:100%;resize:vertical;min-height:110px;font:inherit;padding:12px}
.pf-freepay{margin-top:8px;font-size:14px;color:#1E6B43;background:color-mix(in srgb,#2B8A57 12%,var(--surface));border-radius:10px;padding:8px 12px}
.pf-howfree ol{margin:6px 0 6px 18px;padding:0;display:grid;gap:6px;font-size:14px;line-height:1.45}
.pf-howfree small{color:var(--muted);font-size:12.5px}
.freebar{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 28px;border-radius:24px;background:linear-gradient(120deg,var(--accent-soft),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.freebar h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-0.03em;margin:4px 0 6px}
.freebar p{color:var(--muted);max-width:560px;margin:0}
.freebar-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
/* dashboard modal: live view */
.dm9-box{width:min(1080px,100%)!important}
.dm9-grid{grid-template-columns:1.2fr .8fr!important}
.dm9-points{grid-column:1 / -1;grid-template-columns:repeat(4,1fr)}
.dm9-live{border:1px solid var(--line);border-radius:16px;background:#F7F8F4;padding:12px;display:grid;justify-items:center;gap:8px}
.dm9-live-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2B8A57;display:flex;align-items:center;gap:6px}
.dm9-live-k i{width:7px;height:7px;border-radius:50%;background:#2B8A57;animation:cal9Pulse 2s infinite}
.dm9-phone{width:190px;border-radius:26px;border:7px solid #15170F;background:#fff;overflow:hidden;position:relative}
.dm9-ph-nav{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-size:9px;font-weight:700}
.dm9-ph-nav i{width:14px;height:2px;background:#15170F;box-shadow:0 4px 0 #15170F}
.dm9-ph-img{height:96px;position:relative;background:linear-gradient(135deg,#C9C2B5,#8D8676)}
.dm9-ph-img::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#BFD8A0,#5E6B2F);opacity:0;animation:dm9LivePhoto 8s ease-in-out infinite}
.dm9-ph-h{position:relative;height:44px;margin:10px 10px 4px}
.dm9-ph-h span{position:absolute;inset:0;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-0.02em}
.dm9-ph-h .old{animation:dm9Old 8s ease-in-out infinite}
.dm9-ph-h .new{opacity:0;animation:dm9New 8s ease-in-out infinite}
.dm9-ph-b{margin:0 10px 12px;display:grid;gap:4px}
.dm9-ph-b i{height:5px;border-radius:3px;background:#E3E6DC}
.dm9-ph-b i:nth-child(2){width:70%}
.dm9-ph-btn{margin:0 10px 14px;display:inline-block;background:var(--accent);color:#fff;font-size:9px;font-weight:700;border-radius:999px;padding:5px 10px}
.dm9-upd{position:absolute;top:104px;right:8px;background:#2B8A57;color:#fff;font-size:9px;font-weight:700;border-radius:999px;padding:3px 8px;opacity:0;animation:dm9Upd 8s ease-in-out infinite}
@keyframes dm9Old{0%,60%{opacity:1}64%,100%{opacity:0}}
@keyframes dm9New{0%,60%{opacity:0;transform:translateY(4px)}64%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dm9LivePhoto{0%,60%{opacity:0}64%,96%{opacity:1}100%{opacity:0}}
@keyframes dm9Upd{0%,62%{opacity:0}66%,92%{opacity:1}100%{opacity:0}}
.dm9-type{animation-duration:8s!important}
.dm9-img::after{animation-duration:8s!important}
.dm9-pub.go::after{animation-duration:8s!important}
@media (max-width:860px){.dm9-grid{grid-template-columns:1fr!important}.dm9-points{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dm9-ph-h .old{opacity:0}.dm9-ph-h .new,.dm9-ph-img::after,.dm9-upd{opacity:1;animation:none}}
/* ===== V8 planner ===== */
/* Plan step: compact, fits one screen on desktop */
@media (min-width:0px){
  .pf-plan .pf-q{font-size:clamp(24px,2.6vw,32px)}
  .pf-plan .pf-sub{margin-top:4px;font-size:15px}
  .pf-plan .pf-h3{margin:16px 0 8px}
  .pf-plan .ik-paths{margin-top:0;gap:12px}
  .pf-plan .ik-path{flex-direction:row;align-items:center;gap:14px;padding:14px 18px;border-radius:18px}
  .pf-plan .ik-path::before{display:none}
  .pf-plan .ik-pic{width:42px;height:42px;border-radius:12px;flex:none}
  .pf-plan .ik-pic svg{width:22px;height:22px}
  .pf-plan .ik-path b{font-size:18px;margin:0;display:block}
  .pf-plan .ik-sub{font-size:13.5px;display:block}
  .pf-plan .ik-path{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px}
  .pf-plan .ik-pic{grid-row:1 / 3}
  .pf-plan .pf-field{margin-top:10px}
  .pf-plan .pf-start{gap:8px 10px}
  .pf-plan .pf-start-note{margin:0;font-size:13px}
  .pf-plan .pf-helpnote{margin-top:10px;padding:10px 14px;font-size:14px}
}
.pf-pkgs4{grid-template-columns:repeat(4,1fr)!important;gap:10px}
.pf-pkgs4 .pf-pkg{padding:16px;gap:4px;border-radius:18px}
.pf-pkgs4 .pf-pkg b{font-size:26px}
.pf-pkgs4 .pf-pkg-d{font-size:12.5px;line-height:1.4}
@media (max-width:980px){.pf-pkgs4{grid-template-columns:1fr 1fr!important}}
@media (max-width:520px){.pf-pkgs4{grid-template-columns:1fr!important}}
/* Goals step: what your package includes */
.pf-goalplan{margin:16px 0 4px;padding:14px 16px;border-radius:16px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);font-size:14px;color:var(--ink)}
.pf-goalplan > span{display:block;font-weight:600;margin-bottom:8px}
.pf-goalplan > div{display:flex;flex-wrap:wrap;gap:6px}
.pf-goalplan i{font-style:normal;font-size:13px;font-weight:600;background:var(--surface);border-radius:999px;padding:5px 11px;color:var(--accent)}
.pf-goalplan small{display:block;margin-top:8px;color:var(--muted);font-size:12.5px}
.pf-goalopts{margin-top:14px}
.pf-goalopts .pf-opt.inc::after{content:"Included";position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;color:#2B8A57;background:color-mix(in srgb,#2B8A57 12%,var(--surface));padding:2px 8px;border-radius:999px}
.pf-goalopts .pf-opt.stu::after{content:"Studio";position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;color:#6B46C1;background:#F0EAFB;padding:2px 8px;border-radius:999px}
.pf-goalopts .pf-opt{position:relative}
.pf-goalopts .pf-opt.inc,.pf-goalopts .pf-opt.stu{padding-right:84px}
.pf-goalopts .pf-opt.inc{border-color:color-mix(in srgb,#2B8A57 30%,var(--line))}
/* Features step: dashboard card */
.pf-incgrid .pf-dashcard{grid-column:1 / -1;display:flex;gap:14px;align-items:center;text-align:left;font:inherit;color:var(--ink);cursor:pointer;padding:16px 18px;border-radius:16px;border:1.5px solid var(--accent);background:linear-gradient(110deg,var(--accent-soft) 0%,var(--surface) 45%,var(--accent-soft) 90%);background-size:220% 100%;animation:pfDashShine 5s ease-in-out infinite;box-shadow:0 18px 40px -28px color-mix(in srgb,var(--accent) 80%,transparent);transition:transform .4s var(--spring)}
.pf-dashcard:hover{transform:translateY(-2px)}
.pf-dashcard b{font-size:16px!important}
.pf-dashcard small{font-size:13px!important}
.pf-dashcard em{display:inline-block;margin-top:4px;font-style:normal;font-size:13px;font-weight:700;color:var(--accent)}
.pf-dash-ic{width:46px;height:46px;flex:none;border-radius:14px;background:var(--accent);color:#fff;display:grid;place-items:center;animation:pfDashPulse 2.4s ease-in-out infinite}
.pf-dash-ic svg{width:24px;height:24px}
@keyframes pfDashShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@keyframes pfDashPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 9px transparent}}
/* Motion step explainer */
.pf-mexplain{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px}
.pf-mexplain > div{background:var(--mist);border-radius:14px;padding:10px 14px}
.pf-mexplain b{display:block;font-size:15px}
.pf-mexplain span{display:block;font-size:13px;color:var(--muted);line-height:1.4}
@media (max-width:760px){.pf-mexplain{grid-template-columns:1fr}}
/* Content step: free copywriting */
.pf-opt.free{border-color:#2B8A57}
.pf-opt.free .pf-tag{background:#2B8A57;color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;padding:4px 12px;animation:pfFree 2s ease-in-out infinite}
@keyframes pfFree{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* Domain note */
.pf-domnote{margin-top:16px;max-width:760px;background:var(--mist);border-radius:16px;padding:16px 18px;font-size:14.5px;line-height:1.55}
.pf-domnote p{margin:6px 0 8px;color:var(--ink)}
.pf-domnote small{color:var(--muted);font-size:13px}
/* Dashboard modal */
.dm9{position:fixed;inset:0;z-index:520;display:grid;place-items:center;padding:16px}
.dm9[hidden]{display:none}
.dm9-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--bg,#fff) 45%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dm9-box{position:relative;width:min(920px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:0 60px 120px -50px rgba(0,0,0,.45);padding:26px 28px;animation:pfPop .5s var(--spring) both}
.dm9-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:18px;color:var(--ink)}
.dm9 h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.03em;margin:0 0 6px;padding-right:44px}
.dm9 .lead{color:var(--muted);font-size:15px;margin:0 0 18px;max-width:640px}
.dm9-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
.dm9-app{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#F7F8F4;font-size:13px}
.dm9-top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.dm9-top b{font-size:13px}
.dm9-pub{background:var(--accent);color:#fff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:12px;position:relative}
.dm9-pub.go::after{content:"Live ✓";position:absolute;inset:0;border-radius:999px;background:#2B8A57;display:grid;place-items:center;animation:dm9Live 6s ease-in-out infinite}
@keyframes dm9Live{0%,62%{opacity:0}68%,92%{opacity:1}100%{opacity:0}}
.dm9-body{display:grid;grid-template-columns:120px 1fr;min-height:260px}
.dm9-side{background:#fff;border-right:1px solid var(--line);padding:12px 10px;display:grid;gap:4px;align-content:start}
.dm9-side span{padding:6px 8px;border-radius:8px;color:var(--muted)}
.dm9-side span.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.dm9-main{padding:14px;display:grid;gap:10px;align-content:start}
.dm9-field{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.dm9-field small{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.dm9-type{display:inline-block;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;border-right:2px solid var(--accent);max-width:0;animation:dm9Type 6s steps(26) infinite}
@keyframes dm9Type{0%,8%{max-width:0}40%,100%{max-width:26ch}}
.dm9-photo{display:flex;gap:10px;align-items:center}
.dm9-img{width:72px;height:52px;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(135deg,#C9C2B5,#8D8676)}
.dm9-img::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#BFD8A0,#5E6B2F);animation:dm9Swap 6s ease-in-out infinite}
@keyframes dm9Swap{0%,40%{opacity:0;transform:scale(1.15)}50%,100%{opacity:1;transform:none}}
.dm9-photo em{font-style:normal;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:4px 10px}
.dm9-points{display:grid;gap:10px}
.dm9-points div{display:flex;gap:10px;align-items:flex-start;background:var(--mist);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.45}
.dm9-points i{font-style:normal;width:24px;height:24px;flex:none;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.dm9-points b{display:block}
@media (max-width:760px){.dm9-grid{grid-template-columns:1fr}.dm9-body{grid-template-columns:1fr}.dm9-side{display:none}}
@media (prefers-reduced-motion:reduce){.dm9-type{max-width:none;animation:none;border:0}.dm9-img::after{animation:none;opacity:1}.pf-dashcard,.pf-dash-ic,.pf-opt.free .pf-tag{animation:none}}
/* V7 wizard start date */
.pf-optl{font-size:12px;font-weight:600;color:var(--muted);background:var(--mist,#F1F3EC);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:2px;letter-spacing:0}
.pf-start{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.pf-start .avail{font-size:14.5px;padding:10px 16px 10px 13px;cursor:pointer;font:inherit;font-size:14.5px;color:var(--ink)}
.pf-start .avail .cal9-cta{font-weight:600}
.pf-skip{font:inherit;font-size:14px;font-weight:600;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pf-skip:hover{color:var(--ink);border-color:var(--ink)}
.pf-skip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pf-start-note{flex-basis:100%;font-size:13.5px;color:var(--muted);margin:2px 0 0}
.pf-start-pick{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-size:14.5px;color:var(--ink)}
.pf-start-pick i{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px}
.pf-start-pick b{font-weight:600}
.pf-start-link{font:inherit;font-size:14px;font-weight:600;color:var(--accent);background:none;border:0;padding:6px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* V6 hero order */
#scrolly .hero-copy .hero-avail{margin-top:calc(20px + 1cm)!important;margin-bottom:0!important}
#scrolly .hero-copy .hero-from{margin-top:14px}
/* V5 */
.onb-skip{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px 10px 10px;border-radius:999px;background:var(--surface,#fff);border:1px solid var(--line);font-size:15px;color:var(--ink)}
.onb-skip span{width:22px;height:22px;flex:none;border-radius:50%;background:#5B6B2B;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;font-style:italic;font-family:Georgia,serif}
@media (max-width:560px){.onb-skip{border-radius:16px;align-items:flex-start;font-size:14px}}
/* V4 fixes */
.preview.phone{background:var(--pb);padding:0;height:min(640px,72vh);border-radius:40px;border:10px solid #0E0F0C;overflow-y:auto;scrollbar-width:none;box-shadow:0 40px 80px -36px rgba(0,0,0,.45)}
.preview.phone::-webkit-scrollbar{display:none}
.preview.phone::before{display:none}
.ind .app-ic,.ind-other .app-ic{--c1:#7E9040!important;--c2:#4E5C22!important}
/* ===== V2: video hero (replaces the 3D scene) ===== */
#scrolly .sticky{background:#EEF2E6;top:0!important}
#scrolly .orb{z-index:0;opacity:.45}
#scrolly .hero-grid{z-index:2;pointer-events:none}
#scrolly .hero-copy{pointer-events:auto}
.hv-stage{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hv-stage .hv-btn{pointer-events:auto}
.hv-video{position:absolute;top:52%;right:-11vw;width:min(150vh,82vw);height:auto;aspect-ratio:16/9;transform:translateY(-50%);object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 12%,#000 24%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 12%,#000 24%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-composite:intersect}
.hv-btn{position:absolute;right:28px;bottom:28px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;cursor:pointer;color:#4B5340;box-shadow:0 10px 26px -18px rgba(30,36,22,.45);z-index:2}
.hv-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hv-btn .i-play{display:none;fill:currentColor;stroke:none}
.hv-stage.paused .hv-btn .i-pause{display:none}
.hv-stage.paused .hv-btn .i-play{display:block}
.hv-btn:focus-visible{outline:2px solid #5B6B2B;outline-offset:2px}
@media (max-width:980px){
  html #scrolly .sticky{flex-direction:column;align-items:stretch;padding-top:0!important}
  .hv-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:clamp(260px,62vw,520px);flex:none}
  .hv-stage{inset:auto;pointer-events:auto}
  .hv-video{position:absolute;inset:0;top:0;right:auto;width:100%;height:100%;aspect-ratio:auto;transform:none;object-position:50% 60%;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);-webkit-mask-composite:source-over;
            mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-composite:add}
  .hv-btn{right:16px;bottom:22%;width:36px;height:36px}
}

/* ===== v18: lean industry cards ===== */
.ind.v18{cursor:pointer;gap:0}
.ind.v18 .app-ic,.ind.v18 .ind-tags{display:none!important}
.ind.v18 .ind-cover{height:150px;margin-bottom:20px}
.ind.v18 h3{font-size:18px;line-height:1.25;margin-bottom:6px}
.ind.v18 p{font-size:15px;line-height:1.45}
.ind.v18 .ind-acts{position:static!important;flex-direction:row!important;justify-content:space-between;align-items:center!important;padding-top:18px!important}
.ind.v18 .ind-link{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--accent)}
.ind.v18 .ind-link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.ind.v18 .ind-link svg{transition:transform .3s var(--spring)}
.ind.v18:hover .ind-link svg{transform:translateX(4px)}
.ind.v18 .ind-link:focus-visible{outline:none}
.ind.v18:has(.ind-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.ind.v18 .ind-acts{flex-wrap:nowrap!important;gap:12px!important}
.ind.v18 .ind-link,.ind.v18 .ind-more{white-space:nowrap}
.ind.v18 .ind-more{position:relative;z-index:4;font-size:13px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.ind.v18 .ind-more:hover{color:var(--ink)}
.ind-other.v18 .ind-link{color:var(--muted)}
.ind-other.v18:hover .ind-link{color:var(--accent)}
@media (max-width:560px){
  #indHome{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-22px;margin-right:-22px;padding:4px 22px 12px;scroll-padding-left:22px;scrollbar-width:none}
  #indHome::-webkit-scrollbar{display:none}
  #indHome .ind{flex:0 0 78%;scroll-snap-align:start}
}

/* ===== v19: hero price button + aligned secondary link ===== */
#heroActions{flex-direction:column;align-items:flex-start;gap:14px!important}
#heroActions .btn-ghost{padding-left:0!important;padding-right:0!important;height:auto;background:none!important;border:0!important}