/* Home page. Shared tokens and components live in site.css; scroll scenes are driven by /assets/motion.mjs. */

/* ================= HERO ================= */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,5vw,64px) 0 clamp(36px,5vw,64px);min-height:min(calc(100svh - var(--hdr,72px)),940px);display:flex;flex-direction:column}
.dawn{position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  background:var(--brand-stripes) right top/88px 26px no-repeat,radial-gradient(80% 70% at 72% 94%,rgba(255,122,0,.25),rgba(11,31,68,0) 80%),#0B1F44}
.hero-grid>*{min-width:0}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;flex:1}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 6px;transition:border-color .25s,background .25s;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#e7e9f3;font-weight:600;font-size:.86rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
a.badge:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.badge b{background:#fff;color:#0B1F44;padding:4px 11px;border-radius:999px;font-size:.76rem;white-space:nowrap;flex:none}
.hero h1{font-size:clamp(2.4rem,4.3vw,4.6rem);font-weight:800;letter-spacing:-.025em;line-height:.95;margin:22px 0 24px;text-wrap:balance}
.hero h1 em .w>i{letter-spacing:-.01em}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .w>i{display:inline-block;font-style:normal;animation:hw .95s var(--ease) both;animation-delay:calc(var(--n)*55ms + 60ms)}
.hero h1 em{background:none;color:inherit;padding:0}
.hero h1 em .w{padding-right:.07em}
.hero h1 em .w>i{font-style:italic;color:#FFB066}
@keyframes hw{from{transform:translateY(112%) rotate(4deg)}}
.hero .lead{margin-bottom:30px;color:#c6cbd9;font-size:clamp(1.02rem,1.35vw,1.2rem);max-width:560px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-ctas .btn{padding:16px 28px;font-size:1.02rem}
.hero-ctas .btn:not(.primary){background:rgba(11,31,68,.55);border-color:rgba(255,255,255,.3);color:#fff}
.hero-ctas .btn:not(.primary)::before{background:#fff}
.hero-ctas .btn:not(.primary):hover{color:#0B1F44;border-color:#fff}
.risk-line{margin-top:20px;font-size:.92rem;font-weight:500;color:#d6f5e1;display:flex;gap:10px;align-items:flex-start;max-width:520px}
.risk-line svg{flex:none;margin-top:2px;color:#6ee7b7}
.fade-up{animation:fu .9s var(--ease) both;animation-delay:calc(var(--d,0)*1ms)}
@keyframes fu{from{opacity:0;transform:translateY(22px)}}

/* device cluster */
.collage-wrap{position:relative}
.collage{position:relative;width:100%;max-width:760px;margin-inline:auto;perspective:1500px;aspect-ratio:1.42}
@media (min-width:1081px){.collage{width:112%;max-width:min(820px,calc((100svh - 330px)*1.42))}}
.collage-note:empty{visibility:hidden}.collage-note{min-height:2.2em}
.collage::before{content:"";position:absolute;inset:18% -6% -4% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,176,107,.5),rgba(255,154,60,.25) 55%,transparent);filter:blur(40px);z-index:0}
.cg{position:relative;display:grid;grid-template-columns:1fr;gap:16px;width:88%;transform-style:preserve-3d;
  transform:rotateY(calc(-15deg + var(--px,0)*5deg)) rotateX(calc(7deg + var(--py,0)*-4deg)) rotateZ(1.5deg);transition:transform .5s var(--ease)}
.sc{position:relative;display:block;padding:0;border:0;background:#fff;border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 60px -10px rgba(0,0,0,.55);transition:transform .5s var(--ease),box-shadow .4s;animation:float 7s ease-in-out infinite alternate}
.sc:nth-child(2){animation-delay:-2.2s}.sc:nth-child(3){animation-delay:-4.1s}
@keyframes float{from{translate:0 -6px}to{translate:0 8px}}
.sc:hover,.sc:focus-visible{transform:translateZ(40px) scale(1.03);box-shadow:0 0 0 2px var(--accent-2),0 40px 70px -10px rgba(0,0,0,.6)}
.sc.big{grid-column:1/-1}
.sc .bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 10px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.sc .bar i{width:7px;height:7px;border-radius:50%;background:#8FA3B8}
.sc .bar u{flex:1;max-width:46%;height:10px;margin-inline:auto;border-radius:5px;background:#fff}
.sc:not(.big) .bar{height:16px;padding:0 8px;gap:4px}.sc:not(.big) .bar i{width:5px;height:5px}.sc:not(.big) .bar u{height:7px}
.sc img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.sc.phone{position:absolute;right:0;top:50%;width:24%;margin-top:-22%;border-radius:24px;border:6px solid #05060a;background:#05060a;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 40px 80px -10px rgba(0,0,0,.7);z-index:2;
  transform:translate3d(calc(var(--px,0)*-16px),calc(var(--py,0)*-10px),0) rotate(3deg);animation-delay:-1s}
.sc.phone:hover,.sc.phone:focus-visible{transform:translate3d(0,-8px,0) rotate(0) scale(1.04)}
.sc.phone img{aspect-ratio:520/1125;border-radius:17px}
.collage-note{position:relative;width:fit-content;margin:26px auto 0;text-align:center;font-size:.82rem;color:#e9ebf2;background:rgba(11,31,68,.72);border:1px solid rgba(255,255,255,.14);padding:6px 14px;border-radius:999px}

/* facts along the bottom of the hero */
.facts-band{position:relative;margin-top:clamp(28px,4vw,52px);background:rgba(11,31,68,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.14)}
.facts{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.facts>div{padding:22px 20px 26px 0}
.facts>div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.14)}
.facts b{display:block;font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.facts span{display:block;margin-top:8px;font-size:.86rem;color:#c2c7d6;max-width:210px}

/* ================= MARQUEE + INDUSTRIES ================= */
.mq{background:var(--ink);color:#fff;overflow:hidden;position:relative;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.1)}
.mq-track{display:flex;width:max-content;gap:0;animation:mq 48s linear infinite}
.mq:hover .mq-track,.mq.paused .mq-track{animation-play-state:paused}
.mq-track span{display:inline-flex;align-items:center;gap:.45em;padding-right:.45em;font-size:clamp(2rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.mq-track span:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:800;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.mq-track span::after{content:"✦";font-family:Montserrat,system-ui,sans-serif;font-style:normal;font-size:.42em;color:var(--sun);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-pause{position:absolute;right:12px;bottom:8px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(11,31,68,.7);color:#fff;cursor:pointer;display:grid;place-items:center}
.mq-pause:hover{background:#fff;color:#0B1F44}
/* prices at a glance, straight after the hero */
.glance{background:var(--bg);border-bottom:1px solid var(--line)}
.glance .container{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr)) auto;align-items:stretch;gap:0}
.glance-lbl{align-self:center;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-right:22px}
.glance-lbl small{display:block;margin-top:4px;font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.glance a.gp{display:grid;gap:2px;padding:16px 20px;border-left:1px solid var(--line);min-height:76px;align-content:center;transition:background .25s}
.glance a.gp:hover{background:var(--bg-soft)}
.glance a.gp b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.glance a.gp b small{font:500 .8rem/1 Montserrat,system-ui,sans-serif;color:var(--muted);letter-spacing:0}
.glance a.gp span{font-size:.86rem;color:var(--muted)}
.glance a.gp span i{font-style:normal;font-weight:700;color:var(--ink)}
.glance-all{align-self:center;margin-left:18px;white-space:nowrap}
@media (max-width:900px){.glance .container{grid-template-columns:1fr 1fr;width:100%}.glance-lbl{grid-column:1/-1;padding:14px 16px 4px}.glance a.gp{border-left:0;border-top:1px solid var(--line);padding:12px 16px;min-height:64px}.glance a.gp:nth-of-type(even){border-left:1px solid var(--line)}.glance-all{grid-column:1/-1;margin:0;padding:10px 16px 14px;border-top:1px solid var(--line);min-height:44px;display:flex;align-items:center}}
.cats{border-bottom:1px solid var(--line);background:var(--bg)}
.cats .container{display:flex;gap:10px;overflow-x:auto;padding:18px 0;scrollbar-width:thin}
.cats a{flex:none;display:flex;gap:9px;align-items:center;padding:10px 16px 10px 14px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:.9rem;transition:border-color .25s,color .25s,transform .35s var(--ease),background .25s;white-space:nowrap;background:#fff}
.cats a:hover{border-color:#0B1F44;transform:translateY(-3px)}
.cats .li{color:var(--accent-ink)}
.cats-lbl{flex:none;align-self:center;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}

/* ================= WORK ================= */
#work{overflow:clip}
.wall{margin:44px 0 clamp(40px,6vw,90px);perspective:1600px}
.wall-in{transform:rotateX(22deg) rotateZ(-5deg);transform-origin:50% 0;display:grid;gap:18px}
.wall-row{display:flex;gap:18px;width:max-content;will-change:transform}
.wall-row:nth-child(1){transform:translateX(calc(-4% - var(--wp,0)*16%))}
.wall-row:nth-child(2){transform:translateX(calc(-22% + var(--wp,0)*16%))}
.wc{flex:none;width:clamp(230px,27vw,400px);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(11,31,68,.08),0 26px 50px -18px rgba(11,31,68,.35);cursor:pointer;transition:transform .5s var(--ease),box-shadow .4s}
.wc:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 0 0 2px var(--accent),0 34px 60px -18px rgba(11,31,68,.45)}
.wc .bar{display:flex;align-items:center;gap:5px;height:20px;padding:0 10px;background:var(--bg-soft)}
.wc .bar i{width:6px;height:6px;border-radius:50%;background:#8FA3B8}
.wc img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.wc b{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:.78rem;font-weight:650;border-top:1px solid var(--line)}
.wc b small{font-weight:500;color:var(--muted)}
.wall-tag{position:fixed;left:0;top:0;z-index:70;pointer-events:none;background:#0B1F44;color:#fff;font-size:.8rem;font-weight:700;padding:8px 14px;border-radius:999px;opacity:0;scale:.6;transition:opacity .25s,scale .35s var(--ease);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.wall-tag.on{opacity:1;scale:1}
.chooser{display:grid;grid-template-columns:320px 1fr;gap:24px;margin-top:40px;align-items:start}
.chooser>*{min-width:0}
.side{display:grid;gap:12px}
.tlist{display:grid;gap:8px;max-height:560px;overflow:auto;padding:4px;margin:-4px}
.topt{text-align:left;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:8px;cursor:pointer;display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;transition:border-color .25s,box-shadow .25s,transform .35s var(--ease)}
.topt:hover{border-color:#b9b6ad;transform:translateX(4px)}
.topt[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,0,.14)}
.topt img{width:88px;height:55px;border-radius:9px;object-fit:cover;object-position:top;border:1px solid var(--line)}
.topt b{display:flex;gap:6px;align-items:center;font-size:.9rem;line-height:1.3}
.topt b .li{color:var(--accent-ink)}
.topt small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.custom-card{border:1.5px dashed #bdb9af;border-radius:16px;padding:14px 16px;background:var(--bg-soft)}
.custom-card b{display:flex;gap:8px;align-items:center;margin-bottom:2px}.custom-card b .li{color:var(--accent-ink)}
.custom-card p{font-size:.86rem;color:var(--muted);margin-bottom:6px}
.custom-card .link{display:inline-flex;align-items:center;min-height:44px}
.viewer{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.v-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%}
.dots i:nth-child(1){background:#ff6058}.dots i:nth-child(2){background:#ffbd2e}.dots i:nth-child(3){background:#28c940}
.url{flex:1;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device{display:flex;background:var(--bg-soft);border-radius:999px;padding:3px}
.device button{border:0;background:none;padding:6px 14px;border-radius:999px;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--muted);transition:background .25s,color .25s}
.device button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.stage{position:relative;height:540px;background:var(--bg-soft);overflow:hidden;display:flex;justify-content:center}
.stage .fallback{position:absolute;inset:0;background-size:cover;background-position:top center}
.stage.mobile .fallback{display:none}
.m-shot{display:none}
.frame-wrap{position:relative;height:100%}
.frame-key{position:absolute;left:12px;top:12px;z-index:4;padding:10px 16px;border-radius:999px;border:0;background:#0B1F44;color:#fff;font-weight:600;cursor:pointer;opacity:0;pointer-events:none}
.frame-key:focus-visible{opacity:1;pointer-events:auto}
.frame-wrap iframe{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:0 0}
.stage.mobile .frame-wrap{margin-top:18px;height:calc(100% - 36px);border-radius:24px;overflow:hidden;box-shadow:0 0 0 8px #111,0 20px 40px rgba(0,0,0,.3)}
.v-info{display:grid;grid-template-columns:1fr auto;gap:20px;padding:22px 24px;align-items:center}
.v-info h3{font-size:1.25rem;letter-spacing:-.02em}
.v-info p{color:var(--muted);font-size:.93rem;margin:4px 0 10px}
.feats{display:flex;flex-wrap:wrap;gap:6px}
.feats span{font-size:.78rem;background:var(--bg-soft);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.v-actions{display:flex;flex-direction:column;gap:8px}
.made-for{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;list-style:none;counter-reset:mf}
.made-for li{counter-increment:mf;border-top:2px solid #0B1F44;padding-top:16px}
.made-for li::before{content:"0" counter(mf);display:block;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1;color:var(--accent-ink);margin-bottom:10px;font-weight:800}
.made-for b{display:block;font-family:var(--display);font-size:1.25rem;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px}
.made-for p{font-size:.95rem;color:var(--muted)}

/* ================= EXPLODED VIEW ================= */
.xv{position:relative;height:340vh;overflow-x:clip}
.xv-pin{position:sticky;top:var(--hdr,72px);height:calc(100svh - var(--hdr,72px));overflow:hidden;display:flex;align-items:center}
.xv-glow{position:absolute;z-index:-1;width:70vmax;height:70vmax;right:-14vmax;top:50%;translate:0 -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,0,.4),rgba(59,91,154,.16) 55%,transparent);filter:blur(30px);opacity:calc(.35 + var(--spread,0)*.65)}
.xv-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(20px,4vw,60px);align-items:center}
.xv-copy .h2,.bs-copy .h2{font-size:clamp(1.9rem,3.5vw,3.1rem);margin-bottom:10px}
.xv-copy .lead{font-size:1rem;margin-bottom:18px}
@media (max-height:860px) and (min-width:1081px){.xv-copy .lead,.bs-copy .lead{display:none}.xv-copy .h2,.bs-copy .h2{margin-bottom:16px}}
.xv-list{list-style:none;display:grid;gap:2px;counter-reset:xv}
.xv-list li{counter-increment:xv;display:grid;grid-template-columns:44px 1fr;column-gap:6px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1)}
.xv-list li b{color:#c3c8d6;transition:color .3s}
.xv-list li.on b{color:#fff}
.xv-list li::before{content:attr(data-n);font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--accent-2);padding-top:5px}
.xv-list b{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.xv-list p{grid-column:2;color:var(--on-dark-2);font-size:.92rem;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease),margin .5s var(--ease)}
.xv-list p>span{overflow:hidden}
.xv-list li.on p{grid-template-rows:1fr;margin-top:4px}
.xv-list li.on b::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent-2),transparent)}
.xv-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:18px;overflow:hidden}
.xv-bar i{display:block;height:100%;background:var(--dawn);transform-origin:left;transform:scaleX(var(--p,0))}
.xv-cta{margin-top:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.xv-cta .link{display:inline-flex;align-items:center;min-height:44px}
.xv-stage{position:relative;height:min(74vh,820px);display:grid;place-items:center;perspective:2200px;perspective-origin:50% 40%}
.xv-device{position:relative;width:32.5em;height:20.6em;font-size:min(clamp(9px,1.18vw,22px),2.05vh);transform-style:preserve-3d;
  --gap:calc(var(--spread,0)*4.6em);
  transform:translateY(calc(var(--tilt,0)*2em)) scale(calc(1.12 - var(--spread,0)*.3)) rotateX(calc(var(--tilt,0)*57deg)) rotateZ(calc(var(--tilt,0)*-34deg))}
.xl{position:absolute;inset:0;border-radius:1em;overflow:hidden;background:#fff;color:#0B1F44;transform:translateZ(calc(var(--z)*var(--gap)));
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 1.6em 3em -1em rgba(0,0,0,.55);transition:opacity .5s,filter .5s,translate .7s var(--ease);backface-visibility:hidden}
.xv.focus .xl{opacity:.5}
.xv.focus .xl:not(.on)>svg{opacity:0}
.xl.drawn>svg{transition:opacity .45s}
/* each plate keeps its own colour when it is not the one being shown */
.xl.drawn:nth-child(7){background:#f4f1ea}.xl.drawn:nth-child(6){background:var(--accent)}.xl.drawn:nth-child(5){background:#7ee0bd}.xl.drawn:nth-child(4){background:var(--accent)}.xl.drawn:nth-child(3){background:#1a1f2e}.xl.drawn:nth-child(2){background:var(--violet)}.xl.drawn:nth-child(1){background:var(--coral)}
/* the layer being talked about lifts clear of the stack */
.xv.focus .xl.on{opacity:1;filter:none;translate:7% 5% calc((3 - var(--z))*var(--gap) + 4.4em);box-shadow:0 0 0 2px var(--accent-2),0 3em 5em -1em rgba(0,0,0,.7)}
.xv.focus .xl.below{opacity:.62}
.xl.drawn{background:#0B1F44}
.xl.drawn>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.xl-tag{position:absolute;left:.8em;bottom:.7em;z-index:3;display:inline-flex;align-items:center;gap:.5em;padding:.34em .9em .34em .4em;border-radius:99em;background:#0B1F44;color:#fff;font-size:1.3em;font-weight:700;letter-spacing:-.01em;opacity:var(--spread,0);box-shadow:0 .4em 1.2em rgba(0,0,0,.35)}
.xl-tag i{font-style:normal;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--dawn-deep);color:#0B1F44;font-size:.8em}
/* 1 design */
.xl-design .bar{display:flex;align-items:center;gap:.4em;height:1.5em;padding:0 .8em;background:var(--bg-soft)}
.xl-design .bar i{width:.5em;height:.5em;border-radius:50%;background:#8FA3B8}
.xl-design .bar u{flex:1;max-width:44%;height:.75em;margin-inline:auto;border-radius:99em;background:#fff}
.xl-design img{width:100%;height:calc(100% - 1.5em);object-fit:cover;object-position:top}
/* 2 words & photos */
.xl-content{padding:1.6em 1.8em;display:grid;grid-template-columns:1.15fr .85fr;gap:1.4em;background:#fffdf8}
.xl-content h4{font-size:1.75em;line-height:1.02;letter-spacing:-.04em;font-weight:800}
.xl-content h4 em{font-family:var(--serif);font-weight:800;color:var(--accent-ink);font-style:italic}
.xl-content .ln{height:.55em;border-radius:99em;background:var(--line);margin-top:.7em}
.xl-content .ln:nth-of-type(2){width:86%}.xl-content .ln:nth-of-type(3){width:64%}
.xl-content .q{margin-top:1.3em;padding:.8em 1em;border-radius:.8em;background:var(--accent-soft);font-size:.82em;font-weight:600;color:#0B1F44}
.xl-content .ph{display:grid;grid-template-columns:1fr 1fr;gap:.6em;align-content:start}
.xl-content .ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.7em}
.xl-content .ph img:first-child{grid-column:1/-1;aspect-ratio:16/9}
/* 3 google */
.xl-seo{padding:1.4em 1.8em;background:#fff}
.xl-seo .sb{display:flex;align-items:center;gap:.7em;border:1.5px solid var(--line);border-radius:99em;padding:.55em 1.1em;font-size:.95em;color:#333;box-shadow:0 .3em 1em rgba(0,0,0,.06)}
.xl-seo .sb svg{color:var(--accent-ink);flex:none}
.xl-seo .res{margin-top:1.1em;display:grid;grid-template-columns:1fr 8.4em;gap:1.2em}
.xl-seo small{display:block;font-size:.72em;color:var(--muted)}
.xl-seo .res b{display:block;color:#1a3fd0;font-size:1.18em;letter-spacing:-.02em;margin:.15em 0 .25em}
.xl-seo .stars{color:#e8940c;font-size:.86em;font-weight:700;letter-spacing:.06em}
.xl-seo .stars span{color:var(--muted);font-weight:500;letter-spacing:0;margin-left:.4em}
.xl-seo .chips{display:flex;gap:.5em;margin-top:.8em;flex-wrap:wrap}
.xl-seo .chips span{font-size:.7em;font-weight:650;border:1px solid var(--line);border-radius:99em;padding:.3em .8em}
.xl-seo .map{border-radius:.9em;background:
  linear-gradient(90deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(0deg,transparent 58%,#fff 58% 66%,transparent 66%),linear-gradient(35deg,transparent 30%,#fff 30% 36%,transparent 36%),#dfe9d8;position:relative;min-height:7.4em}
.xl-seo .map::after{content:"";position:absolute;left:50%;top:44%;width:1.5em;height:1.5em;margin:-1.4em 0 0 -.75em;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--coral);box-shadow:0 0 0 .3em rgba(255,154,60,.25)}
/* 4 speed */
.xl-speed{padding:1.5em 1.8em;display:grid;grid-template-columns:9em 1fr;gap:1.8em;align-items:center;background:var(--bg-soft)}
.xl-speed .ring{position:relative;width:9em;height:9em;border-radius:50%;background:conic-gradient(#12b76a calc(var(--spread,0)*100%),var(--line) 0);display:grid;place-items:center}
.xl-speed .ring::before{content:"";position:absolute;inset:.85em;border-radius:50%;background:var(--bg-soft)}
.xl-speed .ring b{position:relative;font-size:3em;font-weight:800;letter-spacing:-.05em;color:#0e7a48}
.xl-speed h4{font-size:1.2em;letter-spacing:-.02em;margin-bottom:.7em}
.xl-speed .row{display:grid;grid-template-columns:6.5em 1fr;gap:.8em;align-items:center;font-size:.78em;font-weight:600;margin-top:.55em}
.xl-speed .row u{height:.65em;border-radius:99em;background:var(--line);overflow:hidden;display:block}
.xl-speed .row u::after{content:"";display:block;height:100%;width:var(--w);border-radius:inherit;background:#12b76a}
/* 5 code */
.xl-code{background:#11141d;color:#c9d1e6;padding:1.3em 1.6em;font:500 .86em/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.xl-code .t{color:var(--accent-2)}.xl-code .a{color:#FFB066}.xl-code .s{color:#6ee7b7}.xl-code .c{color:#6b7389}
/* 6 hosting */
.xl-host{background:#0f1a3d;color:#fff;padding:1.5em 1.8em;display:grid;grid-template-columns:1fr 10em;gap:1.2em;align-items:center}
.xl-host h4{font-size:1.25em;letter-spacing:-.02em;margin-bottom:.8em}
.xl-host li{list-style:none;display:flex;gap:.6em;align-items:center;font-size:.84em;font-weight:600;margin-top:.5em;color:var(--line)}
.xl-host li::before{content:"✓";display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#6ee7b7;color:#063;font-size:.8em;font-weight:800}
.xl-host svg{width:10em;height:10em}
/* 7 care */
.xl-care{background:linear-gradient(120deg,#ffe9c2,#ffd0c4);padding:1.5em 1.8em;display:grid;grid-template-columns:1fr auto;gap:1em;align-items:center}
.xl-care h4{font-size:1.25em;letter-spacing:-.02em;margin-bottom:.3em}
.xl-care p{font-size:.84em;color:#5a3a1c;font-weight:500;max-width:17em}
.xl-care .plans{display:grid;gap:.5em}
.xl-care .plans span{display:flex;justify-content:space-between;gap:1.6em;background:#fff;border-radius:.8em;padding:.5em .9em;font-size:.82em;font-weight:700;box-shadow:0 .3em .8em rgba(120,60,0,.12)}
.xv-hint{position:absolute;left:50%;bottom:16px;translate:-50% 0;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);display:flex;gap:10px;align-items:center;opacity:calc(1 - var(--p,0)*14);pointer-events:none}
.xv-hint::after{content:"";width:1px;height:26px;background:linear-gradient(#fff,transparent);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* still version: no script, or reduced motion */
.xv.still{height:auto}
.xv.still .xv-pin{position:static;height:auto;padding:clamp(72px,9vw,128px) 0;overflow:visible}
.xv.still{--tilt:1;--spread:1}
.xv.still .xv-list li{opacity:1}.xv.still .xv-list p{grid-template-rows:1fr;margin-top:4px}
.xv.still .xv-hint,.xv.still .xv-bar{display:none}

/* ================= PROMISES / INCLUDED ================= */
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:0 36px;margin-top:64px;counter-reset:inc}
.incl>div{counter-increment:inc;border-top:2px solid #0B1F44;padding-top:16px}
.incl>div::before{content:"0" counter(inc);display:block;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1;color:var(--accent-ink);margin-bottom:10px;font-weight:800}
.incl h3{font-size:1.25rem;margin-bottom:6px;letter-spacing:-.02em;line-height:1.15}
.incl p{color:var(--muted);font-size:.95rem}
.promise .num{position:absolute;right:18px;top:12px;font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:1;color:var(--line);font-weight:800}
/* promises with a drawing on top */
#promiseGrid{grid-template-columns:repeat(4,1fr)}
.promise.drawn{padding:0 0 24px;border-radius:24px}
.promise.drawn::before{display:none}
.promise.drawn .p-art{margin:10px 10px 18px;border-radius:16px;overflow:hidden}
.promise.drawn .p-art svg{display:block;width:100%;height:auto;transition:transform .8s var(--ease)}
.promise.drawn:hover .p-art svg{transform:scale(1.04)}
.promise.drawn .num{position:static;display:block;padding:0 22px;font-size:1.5rem;color:var(--accent-ink);margin-bottom:2px}
.promise.drawn h3{padding:0 22px;font-size:1.15rem}
.promise.drawn p{padding:0 22px;font-size:.92rem}
@media (max-width:1080px){#promiseGrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){#promiseGrid{grid-template-columns:1fr;gap:16px}.promise.drawn{padding:0 0 22px}}

/* before / after */
.ba-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.ba{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:16/10;background:#fff;--pos:38%;touch-action:pan-y;user-select:none}
.ba img,.ba svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;inset:0;pointer-events:none;transform:translateX(var(--pos))}
.ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(11,31,68,.25)}
.ba-line::after{content:"‹ ›";position:absolute;top:50%;left:0;translate:-50% -50%;width:46px;height:46px;border-radius:50%;background:#0B1F44;color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:.1em;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;min-height:0;padding:0;border:0}
.ba input:focus-visible~.ba-line::after{outline:3px solid var(--accent);outline-offset:3px}
.ba-lbl{position:absolute;top:14px;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.ba-lbl.l{left:14px;background:#fff;color:#0B1F44}.ba-lbl.r{right:14px;background:#0B1F44;color:#fff}
.ba-note{font-size:.8rem;color:var(--muted);margin-top:12px}
.ba-copy ul{list-style:none;display:grid;gap:12px;margin-top:22px}
.ba-copy li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:.98rem}
.ba-copy li::before{content:"✓";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-weight:800;font-size:.8rem}

/* ================= BUILD SCENE (how it works) ================= */
.bs{position:relative;height:340vh;background:var(--bg-soft)}
.bs-pin{position:sticky;top:var(--hdr,72px);height:calc(100svh - var(--hdr,72px));overflow:hidden;display:flex;align-items:center}
.bs-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(20px,4vw,60px);align-items:center}
.bs-copy .lead{font-size:1rem;margin-bottom:20px}
.bs-steps{list-style:none;display:grid;gap:0}
.bs-step{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.bs-step h3{color:#3a4050;transition:color .3s}
.bs-step.on h3{color:var(--ink)}
.bs-step .n{width:34px;height:34px;border-radius:50%;border:1.5px solid #bdb9af;display:grid;place-items:center;font-weight:800;font-size:.9rem;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.bs-step h3{font-size:1.04rem;letter-spacing:-.02em;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.bs-step .t{font-size:.84rem;font-weight:700;color:var(--accent-ink);letter-spacing:0}
.bs-step.money .t{color:#116932}
.bs-step p{color:var(--muted);font-size:.92rem;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease),margin .5s var(--ease)}
.bs-step p>span{overflow:hidden}
.bs-step.on .n{background:#0B1F44;border-color:#0B1F44;color:#fff;transform:scale(1.1)}
.bs-step.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.bs-step.on p{grid-template-rows:1fr;margin-top:4px}
.bs-stage{position:relative;height:min(70vh,600px);display:grid;place-items:center}
.bw{position:relative;width:100%;max-width:640px;aspect-ratio:16/11;border-radius:18px;background:#fff;box-shadow:var(--shadow),0 0 0 1px rgba(11,31,68,.08);overflow:hidden;font-size:clamp(9px,1.05vw,14px)}
.bw-bar{display:flex;align-items:center;gap:.5em;height:2.6em;padding:0 1em;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.bw-bar>i{width:.72em;height:.72em;border-radius:50%;background:#8FA3B8}
.bw-url{flex:1;max-width:60%;margin-inline:auto;height:1.6em;border-radius:99em;background:#fff;display:flex;align-items:center;justify-content:center;gap:.5em;font-size:.82em;font-weight:600;color:#8a8f9a;transition:color .5s}
.bw-url svg{width:1em;height:1em;color:#12b76a;opacity:0;transition:opacity .5s}
.bw-live{font-size:.74em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.25em .8em;border-radius:99em;background:#0b6b3f;color:#fff;opacity:0;transform:scale(.6);transition:.5s var(--ease)}
.bw-body{position:absolute;inset:2.6em 0 0;overflow:hidden;background:#f6f4ee}
/* the page being built: wireframe first, then the real design wipes in */
.pg{position:absolute;inset:0 0 auto;transition:transform 1.4s var(--ease-io)}
.pg-hero{position:relative;aspect-ratio:640/352;background:#fff;overflow:hidden}
.pg-hero svg{display:block;width:100%;height:100%}
.pg-hero .wf{position:absolute;inset:0;padding:8% 6%;display:grid;align-content:center;gap:.9em;opacity:0;transition:opacity .6s}
.wf i{display:block;height:1.5em;border-radius:.4em;background:#d2cec4}
.wf i:nth-child(1){width:52%;height:2.2em}.wf i:nth-child(2){width:40%}.wf i:nth-child(3){width:20%;height:2em;border-radius:99em;background:#bdb9af}
.pg-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease-io)}
.pg-sec{padding:1.6em 2em;display:grid;gap:1em;opacity:0;transform:translateY(2em);transition:opacity .7s,transform .9s var(--ease)}
.pg-sec h5{font-size:1.25em;letter-spacing:-.03em;color:#0B1F44}
.pg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.pg-cards>div{background:#fff;border-radius:.9em;padding:1em;border:1px solid var(--line);display:grid;gap:.5em}
.pg-cards b{font-size:.9em}.pg-cards u{display:block;height:.5em;border-radius:99em;background:var(--line)}.pg-cards u+u{width:70%}
.pg-cards .ic{width:2.2em;height:2.2em;border-radius:.6em;background:var(--accent)}
.pg-cards>div:nth-child(2) .ic{background:var(--accent)}.pg-cards>div:nth-child(3) .ic{background:var(--coral)}
.pg-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em}
.pg-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.7em}
/* overlays for each step */
.ov{position:absolute;z-index:3;opacity:0;pointer-events:none;transition:opacity .5s,transform .8s var(--ease)}
.ov-order{left:50%;top:50%;width:62%;translate:-50% -50%;transform:translateY(2em) scale(.92);background:#fff;border-radius:1.2em;padding:1.5em 1.7em;box-shadow:0 2em 4em -1em rgba(11,31,68,.35),0 0 0 1px rgba(11,31,68,.06)}
.ov-order small{font-size:.74em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.ov-order b{display:block;font-size:1.5em;letter-spacing:-.03em;margin:.2em 0 .7em}
.ov-order .r{display:flex;justify-content:space-between;font-size:.9em;padding:.5em 0;border-top:1px solid var(--line)}
.ov-order .r:last-child b{display:inline;font-size:1.25em;margin:0;color:#15803d}
.ov-call{right:5%;top:10%;width:52%;transform:translateX(2em);background:#0B1F44;color:#fff;border-radius:1.2em;padding:1.2em 1.4em;box-shadow:0 2em 4em -1em rgba(11,31,68,.5)}
.ov-call .who{display:flex;align-items:center;gap:.8em;font-weight:700}
.ov-call .who i{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:#12b76a;animation:ring 1.4s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(18,183,106,.6)}60%{box-shadow:0 0 0 .8em rgba(18,183,106,0)}}
.ov-call p{font-size:.86em;color:#c2c7d6;margin:.8em 0 .5em}
.ov-call .dep{height:.6em;border-radius:99em;background:#2a3042;overflow:hidden}
.ov-call .dep i{display:block;height:100%;width:50%;background:var(--dawn);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .4s}
.ov-call .dep+small{display:flex;justify-content:space-between;font-size:.74em;color:#c2c7d6;margin-top:.5em}
.ov-brief{left:5%;right:5%;bottom:7%;display:flex;flex-wrap:wrap;gap:.7em;justify-content:center}
.ov-brief span{display:inline-flex;align-items:center;gap:.5em;background:#fff;border-radius:99em;padding:.55em 1em;font-size:.86em;font-weight:700;box-shadow:0 .8em 2em -.6em rgba(11,31,68,.35),0 0 0 1px rgba(11,31,68,.06);transform:translateY(3em) rotate(var(--r,0deg));opacity:0;transition:transform .8s var(--ease),opacity .5s;transition-delay:calc(var(--k)*80ms)}
.ov-brief .sw{display:flex}.ov-brief .sw i{width:1.2em;height:1.2em;border-radius:50%;border:2px solid #fff;margin-left:-.35em}.ov-brief .sw i:first-child{margin:0}
.ov-prev{left:4%;top:8%;display:flex;gap:.6em;align-items:center;background:#fff;border-radius:99em;padding:.5em 1em;font-size:.82em;font-weight:700;box-shadow:0 .8em 2em -.6em rgba(11,31,68,.4);transform:translateY(-1.5em)}
.ov-prev i{width:.7em;height:.7em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .3em rgba(255,122,0,.2)}
.ov-enq{right:4%;bottom:8%;width:48%;background:#fff;border-radius:1.1em;padding:1em 1.2em;box-shadow:0 2em 4em -1em rgba(11,31,68,.4),0 0 0 1px rgba(11,31,68,.06);transform:translateY(2.5em)}
.ov-enq small{display:block;font-size:.72em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#15803d}
.ov-enq b{font-size:1em}
.ov-enq p{font-size:.82em;color:var(--muted)}
.confetti{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-6%;width:.7em;height:1.1em;border-radius:.15em;opacity:0}
.s6 .confetti i{animation:conf 2.4s cubic-bezier(.2,.6,.4,1) both;animation-delay:calc(var(--k)*70ms)}
@keyframes conf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(46em) rotate(var(--rot))}}
/* which step shows what (ge = reached, s = current) */
.s1 .ov-order{opacity:1;transform:none}
.s2 .ov-call{opacity:1;transform:none}.s2 .ov-call .dep i{transform:none}
.s3 .ov-brief span{opacity:1;transform:rotate(var(--r,0deg))}
.s3 .ov-brief{opacity:1}
.s4 .ov-prev{opacity:1;transform:none}
.ge5 .pg-sec{opacity:1;transform:none}.ge5 .pg-sec+.pg-sec{transition-delay:.25s}
.s5 .pg{transform:translateY(-34%)}
.ge6 .bw-url{color:#0B1F44}.ge6 .bw-url svg{opacity:1}.ge6 .bw-live{opacity:1;transform:none}
.s6 .ov-enq{opacity:1;transform:none;transition-delay:.5s}
.bs.still{height:auto}
.bs.still .bs-pin{position:static;height:auto;padding:clamp(72px,9vw,128px) 0;overflow:visible}
.bs.still .bs-step{opacity:1}.bs.still .bs-step p{grid-template-rows:1fr;margin-top:4px}

/* ================= PRICING ================= */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px;align-items:stretch}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:28px 26px 26px;display:flex;flex-direction:column;position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.plan:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.plan.pop{border-color:#0B1F44;background:#0B1F44;color:var(--on-dark);box-shadow:var(--shadow);--muted:var(--on-dark-2);--line:rgba(255,255,255,.14)}
.plan.pop .pages,.plan.pop .step>b{color:#aab6ff}
.plan.pop .step{background:rgba(255,255,255,.07)}
.plan.pop .step li::before{color:#aab6ff}
.plan.pop .pay,.plan.pop li::before{color:#6ee7b7}
.plan.pop .best{color:#d9dce6}
.plan .tag{position:absolute;top:-13px;left:26px;background:var(--dawn-deep);color:#0B1F44;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan h3{font-size:1.2rem}
.plan .pages{font-size:.82rem;font-weight:700;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.08em}
.plan .sub{color:var(--muted);font-size:.88rem;min-height:46px}
.plan .amt{font-family:var(--display);font-size:3.3rem;font-weight:800;letter-spacing:-.04em;margin:10px 0 2px;line-height:1}
.plan .amt small{font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan .time{font-size:.84rem;color:var(--muted);margin:6px 0 2px}
.plan .pay{font-size:.84rem;color:var(--ok);font-weight:600;margin-bottom:14px}
.plan ul{list-style:none;display:grid;gap:9px;font-size:.92rem;margin-bottom:22px}
.plan li{display:flex;gap:8px}
.plan li::before{content:"✓";color:var(--ok);font-weight:800}
.plan .btn{margin-top:auto}
.plan .fold{margin-top:14px;border-top:1px solid var(--line)}
.plan .fold>summary{display:flex}
.plan .fold ul{margin:6px 0 12px}
.plan .fold-note{font-size:.84rem;color:var(--muted);margin:0 0 10px;line-height:1.45}
.plan .step ul.has li::before{content:"✓";color:var(--ok)}
.plan.pop .step ul.has li::before{color:#6ee7b7}
.plan.pop .btn.primary::before{background:#fff}.plan.pop .btn.primary:hover{color:#0B1F44;border-color:#fff}
.plan .best{font-size:.86rem;color:#2b313d;margin:0 0 14px;line-height:1.45;min-height:3.7em}
.plan .step{background:var(--accent-soft);border-radius:16px;padding:14px 14px 12px;margin:0 0 16px;flex:1}
.plan .step>b{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);margin-bottom:8px}
.plan .step ul{margin:0;gap:7px;font-size:.88rem;font-weight:600}
.plan .step li::before{content:"+";color:var(--accent-ink)}

.fold>summary{display:none;list-style:none;cursor:pointer;font-weight:600;font-size:.9rem;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;min-height:44px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--accent-ink);transition:transform .25s}
.plan.pop .fold>summary::after{color:#aab6ff}
.fold[open]>summary::after{transform:rotate(45deg)}
.cmp-wrap{margin:26px auto 0;max-width:1000px;border:1.5px solid var(--line);border-radius:22px;background:#fff;overflow:hidden}
.cmp-wrap>summary{cursor:pointer;font-weight:700;padding:16px 22px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px}
.cmp-wrap>summary::-webkit-details-marker{display:none}
.cmp-wrap>summary::after{content:"+";font-size:1.4rem;font-weight:500;color:var(--accent-ink);line-height:1}
.cmp-wrap[open]>summary::after{content:"–"}
.cmp-wrap>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:20px}
.cmp-intro{padding:0 22px 14px;color:var(--muted);font-size:.92rem;max-width:720px}
.cmp-scroll{overflow-x:auto;border-top:1px solid var(--line)}
.cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.cmp th,.cmp td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.cmp thead th{font-size:.95rem;padding-top:16px}
.cmp thead small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.cmp tbody th{text-align:left;font-weight:600;position:sticky;left:0;background:#fff;min-width:170px;max-width:230px}
.cmp tbody tr{transition:background .2s}.cmp tbody tr:hover>*{background:var(--bg)}.cmp tbody tr:hover>.rec{background:#dfe4ff}
.cmp .rec{background:var(--accent-soft)}
.cmp .yes{color:var(--ok);font-weight:800}.cmp .no{color:#8a8f9a}
.cmp tfoot td{border-bottom:0;padding:14px 8px}
.cmp .btn.sm{padding:8px 14px;font-size:.86rem;min-height:44px}
.price-notes{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;color:var(--muted);font-size:.88rem}
.price-notes span::before{content:"• ";color:var(--accent-ink)}
.pick{border:1.5px dashed #bdb9af;background:var(--bg);border-radius:var(--radius-lg);padding:30px 32px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 36px;align-items:center}
.pick h3{font-size:1.4rem;margin-bottom:4px}
.pick-intro{color:var(--muted);font-size:.93rem;margin-bottom:18px}
.pick fieldset{border:0;min-width:0}
.pick fieldset+fieldset{margin-top:18px}
.pick legend{font-weight:600;font-size:.94rem;margin-bottom:10px;padding:0}
.pick .chip{position:relative}
.pick .chip span{padding:8px 13px;font-size:.88rem;min-height:44px;transition:transform .3s var(--ease),border-color .2s,background .2s}
.pick .chip:hover span{transform:translateY(-2px);border-color:#0B1F44}
.pick .chip .li{color:var(--accent-ink)}
.pick .chip input:checked+span{background:#0B1F44;border-color:#0B1F44;color:#fff}
.pick .chip input:checked+span .li{color:#fff}
.pick .chip input:checked+span::before{content:none}
.pick-out{background:#0B1F44;color:var(--on-dark);border-radius:22px;padding:26px;min-height:170px;display:grid;align-content:center;gap:10px;position:relative;overflow:hidden;isolation:isolate}
.pick-out::before{content:"";position:absolute;z-index:-1;inset:auto -20% -70% 20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,0,.7),rgba(255,154,60,.25) 60%,transparent);filter:blur(24px);transition:transform 1s var(--ease)}
.pick-out.has::before{transform:translate(-20%,-30%) scale(1.3)}
.pick-out .wait{color:var(--on-dark-2);font-size:.93rem}
.pick-out b.fit{font-size:1.25rem;line-height:1.25;letter-spacing:-.02em;animation:fu .6s var(--ease) both}
.pick-out p{color:#c6cbd9;font-size:.9rem}
.pick-out .btn{justify-self:start;margin-top:4px}
.pick-out .btn.primary::before{background:#fff}.pick-out .btn.primary:hover{color:#0B1F44;border-color:#fff}
.plan.fit{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,0,.2),var(--shadow)}
.plan .fit-tag{display:none}
.plan.fit .fit-tag{display:block;position:absolute;top:-13px;right:20px;background:var(--accent);color:#0B1F44;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}

/* care */
.care{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(26px,4vw,52px);position:relative;overflow:hidden;isolation:isolate}
.care::before{content:"";position:absolute;z-index:-1;width:60%;aspect-ratio:1;right:-18%;top:-50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,0,.55),rgba(59,91,154,.2) 60%,transparent);filter:blur(20px)}
.care-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:20px 40px;margin-bottom:28px}
.care-head p{margin-top:14px}
.care-art svg{display:block;width:100%;height:auto}
@media (max-width:900px){.care-head{grid-template-columns:1fr}.care-art{order:-1;margin:-6px -6px 0}}
.care-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:22px;padding-top:22px;border-top:1px solid #2c3346}
.care-next p{color:#d3d8e4;font-weight:600}
.care h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-top:10px;letter-spacing:-.04em}
.care-head p{color:var(--on-dark-2);max-width:460px}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cp{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px;position:relative;transition:transform .5s var(--ease),background .3s,border-color .3s}
.cp:hover{transform:translateY(-6px);background:rgba(255,255,255,.08)}
.cp.pop{border-color:var(--accent-2)}
.cp .tag{position:absolute;top:-12px;left:22px;background:var(--accent-2);color:#0B1F44;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.cp h3{font-size:1.05rem}
.cp-sub{color:var(--on-dark-2);font-size:.86rem;margin-bottom:10px}
.cp .amt{font-size:2.2rem;font-weight:800;margin:6px 0 2px;letter-spacing:-.04em}
.cp .amt small{font-size:.85rem;color:var(--on-dark-2);font-weight:500;letter-spacing:0}
.cp ul{list-style:none;display:grid;gap:7px;font-size:.88rem;color:#d3d8e4}
.cp li::before{content:"✓ ";color:#6ee7b7;font-weight:800}
.cp .fold>summary::after{color:#aab6ff}
.cp li.no{color:#a9b0c2}.cp li.no::before{content:"– ";color:#a9b0c2}
.small-print{color:#a9b0c2;font-size:.84rem;margin-top:20px}

/* about */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.about>*{min-width:0}
.about-side{display:grid;min-width:0}
.about-art svg{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.about-side .about-card{margin:-56px 22px 0;position:relative}
@media (max-width:640px){.about-side .about-card{margin:-28px 10px 0}}
.about-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;display:grid;gap:14px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.about-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--dawn-deep)}
.about-card .who{display:flex;gap:16px;align-items:center}
.about-card .who img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.about-card .facts2{display:grid;gap:0}
.about-card .facts2>div{display:flex;gap:10px;font-size:.94rem;padding:11px 0;border-top:1px solid var(--line)}
.about-card .facts2 b{min-width:104px;flex:none}
.about ul.ticks{list-style:none;display:grid;gap:10px;margin-top:18px}
.about ul.ticks li{display:flex;gap:10px}
.about ul.ticks li::before{content:"✓";color:var(--ok);font-weight:800}

/* faq */
.faq{max-width:860px;margin:46px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:650;font-size:1.1rem;letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .2s;padding:20px 0;min-height:56px}
.faq details p{padding-bottom:20px}
.faq-more{text-align:center;margin-top:26px}
.faq summary:hover{color:var(--accent-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1;color:var(--accent-ink);transition:transform .4s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{color:var(--muted);margin-top:-6px;max-width:720px}
.faq details[open] p{animation:fu .5s var(--ease) both}

/* contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.contact>*{min-width:0}
.c-card{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:36px;position:relative;overflow:hidden;isolation:isolate}
.c-card::before{content:"";position:absolute;z-index:-1;inset:auto -30% -45% -10%;aspect-ratio:1.6;border-radius:50%;background:radial-gradient(closest-side,var(--accent),var(--coral) 30%,var(--violet) 58%,var(--accent) 74%,transparent);filter:blur(40px);opacity:.75}
.c-card h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.045em}
.c-card p{color:#d6d9e3;margin:10px 0 24px}
.c-card .btn{width:100%;margin-bottom:10px;border-color:transparent;color:var(--ink)}
.c-card .btn:hover{color:#fff}
.c-card .btn.ghost{background:rgba(11,31,68,.35);border-color:rgba(255,255,255,.5);color:#fff}
.c-card .btn.ghost:hover{color:#0B1F44}
.cb{margin-top:14px;padding-top:20px;border-top:1px solid rgba(255,255,255,.28);display:grid;gap:12px}
.cb h3{font-size:1.1rem}
.cb .cb-sub{margin:-8px 0 0;font-size:.9rem}
.cb .field{align-content:start}
.cb .field>label{font-size:.88rem}
.cb .cb-note{margin:0;font-size:.82rem}
.cb .cb-note a{text-decoration:underline;text-underline-offset:3px}
.cb .opt{color:rgba(255,255,255,.85)}
.cb input{border-color:transparent;color:#0B1F44}
.cb input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.cb .field.bad input{border-color:#ffb4b4;box-shadow:0 0 0 3px rgba(255,180,180,.45)}
.cb .ferr{color:#fff;font-weight:600}
.cb .field.bad .ferr::before{content:"⚠ "}
.c-card .cb .btn{margin:0}
.cb-done{margin-top:14px;padding:18px 20px;border-radius:14px;background:rgba(11,31,68,.5);border:1px solid rgba(255,255,255,.35)}
.c-card .cb-done p{margin:4px 0 0}
#tsCb:empty,#cbMsg:empty,#tsEnq:empty,#enqMsg:empty{display:none}
.c-card ul{list-style:none;margin-top:18px;display:grid;gap:6px;font-size:.92rem;color:var(--on-dark)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow)}
.form-card h3{font-size:1.4rem;margin-bottom:4px}
.form-card>p{color:var(--muted);font-size:.93rem;margin-bottom:20px}
.form-card form{display:grid;gap:16px}
.sent{text-align:center;padding:30px 10px}
.sent .tick{width:72px;height:72px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin:0 auto 14px;font-size:2rem;animation:pop .6s var(--ease) both}
@keyframes pop{from{transform:scale(0)}}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .hero-grid,.chooser,.contact,.about,.ba-wrap{grid-template-columns:1fr}
  .hero{min-height:0}
  .collage{max-width:540px}
  .side{display:contents}.tlist{order:1}.viewer{order:2}.custom-card{order:3}
  .tlist{display:flex;gap:10px;overflow-x:auto;max-height:none;scroll-snap-type:x proximity;padding:4px 4px 10px;scrollbar-width:thin}
  .topt{flex:none;width:168px;grid-template-columns:1fr;gap:8px;align-content:start;scroll-snap-align:start}
  .topt:hover{transform:none}
  .topt img{width:100%;height:auto;aspect-ratio:16/10}
  .price-grid,.incl{grid-template-columns:1fr 1fr}
  .incl{gap:28px 36px}
  .made-for{grid-template-columns:1fr;gap:22px}
  .care-grid{grid-template-columns:1fr 1fr}
  .pick{grid-template-columns:1fr}
  /* scenes: picture on top, the current step underneath */
  .xv-grid,.bs-grid{grid-template-columns:1fr;gap:10px;align-content:center}
  .xv-pin,.bs-pin{align-items:stretch}
  .xv-grid,.bs-grid{height:100%;grid-template-rows:auto minmax(0,auto) auto;align-content:center}
  .xv-stage{height:min(54vh,96vw);overflow:clip;margin-block:6px}
  .xv-device{font-size:min(clamp(5.6px,2.05vw,13px),1vh);translate:0 9%}
  .xv-copy,.bs-copy{display:contents}
  .xv-head,.bs-head{grid-row:1;padding-top:18px}
  .xv-head .lead,.bs-head .lead{display:none}
  .xv-head .h2,.bs-head .h2{font-size:clamp(1.6rem,5.6vw,2.4rem);margin:8px 0 0}
  .xv-stage,.bs-stage{grid-row:2;height:auto;min-height:0}

  .xv-foot,.bs-foot{grid-row:3;padding-bottom:18px;min-height:150px}
  .xv-list li,.bs-step{display:none;border-top:0;padding:0}
  .xv-list li.on,.bs-step.on{display:grid}
  .xv-cta{display:none}
  .bw{width:min(100%,560px);font-size:clamp(7px,2.1vw,12px)}
  .xv.still .xv-grid,.bs.still .bs-grid{height:auto;grid-template-rows:none}
  .xv.still .xv-list li,.bs.still .bs-step{display:grid;padding:9px 0;border-top:1px solid var(--line)}
  .xv.still .xv-stage{height:62vw;margin:20px 0}
  .bs.still .bs-stage{height:auto;margin:20px 0}.bs.still .bw{height:auto;width:100%}
}
@media (max-width:640px){
  .hero{padding-top:22px}
  .hero h1{margin:16px 0 18px}
  .hero .lead{margin-bottom:22px}
  .hero-ctas .btn{flex:1 1 100%}
  .hero-grid{gap:36px}
  .facts{grid-template-columns:1fr 1fr}
  .facts>div{padding:16px 12px 18px 0}
  .facts>div+div{padding-left:14px}
  .facts>div:nth-child(3){border-left:0;padding-left:0}
  .facts>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .sc{border-radius:9px}.sc .bar{height:16px}.sc .bar i{width:5px;height:5px}.sc .bar u{height:7px}
  .sc.phone{border-width:4px;border-radius:16px}.sc.phone img{border-radius:12px}
  .cg{gap:10px}
  .mq{padding:14px 0 18px}
  .wall{margin-top:28px}.wall-in{gap:12px}.wall-row{gap:12px}
  .chooser{margin-top:28px;gap:16px}
  .price-grid,.care-grid,.incl,.made-for{grid-template-columns:1fr}
  .price-grid{margin-top:28px;gap:12px}
  .incl{margin-top:36px;gap:22px}
  .price-grid{gap:22px}.plan .time{min-height:0}
  .plan:hover,.cp:hover{transform:none}
  .price-notes{justify-content:flex-start;gap:4px 18px;font-size:.84rem}
  .made-for{margin-top:28px}
  .wc b small{display:none}.wc b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .pick{padding:22px 18px}.pick-out{padding:20px;min-height:0}.pick-out .btn{justify-self:stretch}
  .care-next .btn{flex:1 1 100%}
  .stage{height:400px;align-items:flex-start}
  .stage .fallback,.frame-wrap,.device{display:none}
  .m-shot{display:block;width:216px;margin-top:22px;border:6px solid #14171f;border-bottom:0;border-radius:26px 26px 0 0;overflow:hidden;background:#14171f;box-shadow:0 20px 44px rgba(0,0,0,.28)}
  .m-shot img{width:100%;height:auto;aspect-ratio:520/1125;border-radius:20px 20px 0 0}
  .v-bar{justify-content:flex-start}
  .v-info{grid-template-columns:1fr;padding:18px}
  .url{display:block;max-width:none}
  .plan{padding:24px 20px}.plan .sub{min-height:0}
  .plan .pay{margin-bottom:6px}
  .cfold>summary{display:flex;border-top:1px solid var(--line)}
  .cp .fold>summary{border-color:#2c3346}
  .fold[open]>summary{margin-bottom:6px}
  .plan ul{margin-bottom:10px}
  .cp{padding:18px 20px 8px}.cp .amt{margin:2px 0 8px;font-size:1.7rem}.cp ul{padding-bottom:12px}
  .care-head{margin-bottom:22px}.care-grid{gap:14px}
  .small-print{font-size:.8rem}
  .faq{margin-top:28px}.faq summary{font-size:1rem}
  .c-card,.form-card,.about-card{padding:26px 20px}
  .about{gap:28px}.contact{gap:20px}
  .xv{height:270vh}
  .xv-foot{padding-bottom:88px;min-height:176px}
  .xv-head .h2{font-size:clamp(1.45rem,5.4vw,2.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .mq-track span[aria-hidden]{display:none}.mq-pause{display:none}
}

/* Short laptop screens (about 650–760px tall): the hero and the pinned scenes tighten up so nothing is cut off */
@media (max-height:760px) and (min-width:1081px){
  .hero{padding-top:18px}
  .hero h1{font-size:clamp(2.4rem,7.4vh,4.2rem);margin:14px 0 16px}
  .hero .lead{margin-bottom:18px;font-size:1rem}
  .hero-ctas .btn{padding:13px 24px}
  .risk-line{margin-top:12px}
  .collage{max-width:560px;width:100%}
  .facts-band{margin-top:18px}.facts>div{padding:14px 20px 16px 0}.facts b{font-size:1.7rem}
  .xv-copy .h2,.bs-copy .h2{font-size:clamp(1.6rem,4.6vh,2.3rem);margin:6px 0 10px}
  .xv-list li{padding:5px 0}.xv-list b{font-size:.98rem}.xv-list p{font-size:.86rem}
  .xv-bar{margin-top:10px}.xv-cta{margin-top:12px}.xv-cta .btn{padding:10px 20px}
  .bs-step{padding:6px 0}.bs-step .n{width:30px;height:30px}.bs-step h3{font-size:.98rem}.bs-step p{font-size:.86rem}
  .xv-stage,.bs-stage{height:min(78vh,560px)}
  .xv-hint{display:none}
}
#choose .why{background:var(--bg)}

/* "why we cost less": a drawing on the left, four short reasons on the right */
#choose .why{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:8px 40px;align-items:center}
#choose .why-art{grid-row:1/4;border-radius:20px;overflow:hidden}
#choose .why-art svg{display:block;width:100%;height:auto}
#choose .why-grid{grid-template-columns:1fr 1fr;gap:18px 30px}
#choose .why-grid .tile{display:none}
#choose .why-grid>div{display:block;border-top:2px solid #0B1F44;padding-top:12px}
#choose .why-grid h4{font-family:var(--display);font-size:1.12rem}
#choose .why .honest{margin-top:8px}
@media (max-width:900px){#choose .why{grid-template-columns:1fr}#choose .why-art{grid-row:auto;max-width:340px}#choose .why-grid{grid-template-columns:1fr}}
/* tablets and phones: the exploded stack gets a band of its own, tall enough for the lifted layer */
@media (max-width:1080px){.xv:not(.still) .xv-grid{align-content:start;padding-top:8px}.xv:not(.still) .xv-stage{height:min(44vh,96vw);min-height:min(44vh,96vw)}.xv:not(.still) .xv-foot{height:calc(11.5rem + 88px);min-height:0;overflow:hidden}.xv:not(.still) .xv-list p{transition:none}}
@media (max-width:1080px) and (min-width:641px){.xv:not(.still) .xv-foot{height:9rem;padding-bottom:0}.xv:not(.still) .xv-stage{height:min(54vh,90vw);min-height:min(54vh,90vw)}}
@media (max-width:640px){.made-for,.incl{display:none}}

/* Phones: promises, packages and care plans sit side by side and swipe, instead of stacking four screens deep */
.swipe-hint{display:none}
@media (max-width:640px){
  #promiseGrid,.price-grid,.care-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:22px -16px 0;padding:16px 16px 14px;scrollbar-width:none;overscroll-behavior-x:contain}
  #promiseGrid::-webkit-scrollbar,.price-grid::-webkit-scrollbar,.care-grid::-webkit-scrollbar{display:none}
  #promiseGrid>*,.price-grid>*,.care-grid>*{flex:none;width:84%;scroll-snap-align:center}
  .care-grid{margin-inline:-18px;padding-inline:18px}
  .swipe-hint{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.88rem;font-weight:600;color:var(--muted)}
  .care .swipe-hint{color:#c6cbd9}
  .swipe-hint::after{content:"→";animation:nudge 1.6s ease-in-out 5}
  .cp .cfold>summary{display:none}
  #choose .why-art{display:none}
}
@keyframes nudge{50%{transform:translateX(6px)}}

/* very narrow phones: the headline steps down so nothing touches the edge */
@media (max-width:350px){.hero h1{font-size:2.15rem}.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* App imagery uses its native ratio: no cropping, logos or badge artwork. */
.app-icon{width:48px;height:48px;border-radius:22%;flex:none}
.app-identity{display:flex;align-items:center;gap:12px;min-width:0}
.app-identity>div{min-width:0;overflow-wrap:anywhere}
.app-category{font-size:.8rem;color:var(--muted);margin-top:4px}
.app-phone{display:block;background:var(--ink);padding:5px;border:1px solid #343947;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);width:100%;max-width:210px}
.app-phone img{width:100%;height:auto;aspect-ratio:600/1300;border-radius:16px}
.app-store{display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;gap:6px}
.apps-actions{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:22px}
.apps-actions .link{display:inline-flex;align-items:center;min-height:44px}
.apps-actions .btn{white-space:normal;text-align:center}
.apps-note{color:var(--muted);font-size:.86rem;margin-top:16px}

.apps-side{background:var(--bg);padding-block:56px;border-top:1px solid var(--line)}
.apps-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.apps-copy .h2{font-size:clamp(1.9rem,3vw,2.65rem)}
.apps-copy>p:not(.apps-note){color:var(--muted);max-width:540px}
.apps-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-height:440px}
.app-mini{background:var(--bg-soft);border:1px solid var(--line);border-radius:24px;padding:18px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.app-mini h3{font-size:1.12rem}
.app-tagline{font-size:.86rem;color:var(--muted);margin:14px 0;flex:1}
.app-mini .app-phone{max-width:108px;align-self:center;margin-bottom:10px;border-radius:18px}
.app-mini .app-phone img{border-radius:12px}
@media(max-width:900px){.apps-layout{grid-template-columns:1fr}.apps-cards{min-height:420px}}
@media(max-width:540px){.apps-cards{grid-template-columns:1fr}.app-mini{padding:20px}.app-mini .app-phone{max-width:120px}.apps-layout{gap:24px}}

@media(max-width:400px){.hero h1{font-size:2.25rem;letter-spacing:-.035em}.hero-ctas .btn{padding-inline:20px;font-size:.95rem}}

.mq,.facts-band,.care,.c-card,.pick-out,.plan.pop{background-image:var(--brand-stripes);background-position:right top;background-size:88px 26px;background-repeat:no-repeat}