/* sub10.css: shared template for the v10 product subpages (the white ClickUp-style home, personalised per page).
   Loaded AFTER the home stack (v6 ... claude-fixes), so tokens, .btn, .wrap, .faq/.qa, .closing, .foot, .call8, .cg and the roi/plans
   blocks come from the home. Everything new is prefixed s10-. Rendered by assets/js/sub10.js from sub10-data/<slug>.json.
   Rules: purple #8982FF -> #3A2EBE only, no yellow, no thin divider lines (depth comes from shadow + tint), icons/text on purple = white,
   dark sections are pure #000, no decorative dots. Redesign 2026-10-22: split hero with the whole live app in the fold, phone camera
   (zoomed app window, never a thumbnail), caption bar under the screen, compact proof chips, dark steps chapter, tighter phone type. */

:root{--s10-shadow:0 1px 2px rgba(22,19,61,.05),0 24px 56px -26px rgba(37,31,149,.30);--s10-shadow-s:0 1px 2px rgba(22,19,61,.04),0 14px 34px -16px rgba(37,31,149,.26);--s10-grad:linear-gradient(135deg,#8982ff,#3a2ebe)}
.s10-i{width:20px;height:20px;flex:none}
main#main{display:block}

/* ───────── shared section parts ───────── */
.s10-sec{padding:104px 0}
.s10-sec--tint{background:var(--lav2)}
.s10-head{max-width:760px;margin:0 0 48px}
.s10-head--c{margin-left:auto;margin-right:auto;text-align:center}
.s10-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ind)}
.s10-kicker .s10-i{width:16px;height:16px}
.s10-h2{font-family:var(--font-display);font-weight:600;font-size:46px;line-height:1.05;letter-spacing:-.008em;color:var(--ink);max-width:15em}
.s10-head--c .s10-h2{margin-left:auto;margin-right:auto}
.s10-lead{margin-top:18px;font-size:18px;line-height:1.6;color:var(--body);max-width:36em}
.s10-head--c .s10-lead{margin-left:auto;margin-right:auto}
.s10-h3{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1.1;color:var(--ink)}
.s10-note{margin-top:22px;font-size:13.5px;line-height:1.55;color:var(--body);max-width:44em}
.s10-head--c .s10-note{margin-left:auto;margin-right:auto}

/* ───────── hero: split, the WHOLE live app in the fold (ClickUp feature-page layout) ───────── */
.s10-hero{position:relative;padding:48px 0 72px;overflow-x:clip;background:radial-gradient(900px 520px at 78% 10%,#edebff 0,rgba(255,255,255,0) 68%),#fff}
.s10-hero__g{display:grid;grid-template-columns:minmax(360px,430px) minmax(0,1fr);gap:44px;align-items:center}
.s10-hero__t{position:relative;z-index:2;text-align:left}
.s10-hero__k{margin:0 0 18px;animation:s10-up .7s var(--ease) both}
.s10-hero h1{margin:0;font-size:52px;line-height:1.02;letter-spacing:-.016em;color:var(--ink);animation:s10-up .8s .06s var(--ease) both}
.s10-hero__sub{margin:20px 0 0;max-width:30em;font-size:18px;line-height:1.55;color:var(--body);animation:s10-up .8s .12s var(--ease) both}
.s10-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;animation:s10-up .8s .18s var(--ease) both}
.s10-cta .btn{margin:0}
.s10-cta .btn.lg{height:52px;padding:0 24px;font-size:16px;border-radius:14px}
.s10-btn-ghost{background:var(--lav);border-color:transparent;color:var(--ind)}
.s10-btn-ghost:hover{background:#e6e3ff}
.s10-fine{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--body);animation:s10-up .8s .22s var(--ease) both}
/* entrance = motion only (no opacity): if a frame stalls the text is still there */
@keyframes s10-up{from{transform:translateY(12px)}to{transform:none}}

/* the visual column bleeds to the right edge so the app is as large as the fold allows; the frame is never cut */
.s10-hero__v{position:relative;min-width:0;margin-right:calc(-1 * max(0px,(100vw - 1200px)/2 - 28px));animation:s10-stage 1s .2s var(--ease) both;scroll-margin-top:92px}
@keyframes s10-stage{from{transform:translateY(24px) scale(.99)}to{transform:none}}
.s10-stage{position:relative}
.s10-frame{position:relative;overflow:hidden;background:#fff;border-radius:18px;box-shadow:var(--s10-shadow)}
.s10-stage .s10-frame::after,.s10-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(22,19,61,.06);pointer-events:none;z-index:5}
.s10-ax{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden;background:#fff}
/* app-shell skeleton while the screen loads: the frame is never a blank white box */
.s10-ax::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f3f2fb 0 15.5%,transparent 15.5%),linear-gradient(180deg,#fff 0 7%,transparent 7%),repeating-linear-gradient(180deg,transparent 0 54px,#f1f0f8 54px 55px);background-position:0 0,0 0,0 110px}
.s10-ax.is-cam::before{background:linear-gradient(180deg,#fff 0 48px,transparent 48px),repeating-linear-gradient(180deg,transparent 0 46px,#f1f0f8 46px 47px);background-position:0 0,0 70px}
/* camera frames: portrait window on phones, 4:3 window on desktop rows (the screens agent turns the camera on for any frame under 0.72 of the app) */
.s10-ax.is-cam{aspect-ratio:4/3}
@media (max-width:760px){.s10-ax.is-cam{aspect-ratio:5/6}}
.s10-live{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;pointer-events:none}

/* stacked variant (tablet, short laptops, or "layout":"stack"): text on top, full-width app under it */
.s10-hero--stack .s10-hero__g{grid-template-columns:1fr;gap:44px}
.s10-hero--stack .s10-hero__t{max-width:760px}
.s10-hero--stack .s10-hero__v{margin-right:0}

/* ───────── proof chips on the screens (real facts only): compact, glassy, no drama ───────── */
.s10-float{position:absolute;z-index:6;display:flex;align-items:center;gap:10px;max-width:260px;padding:9px 14px 9px 9px;border-radius:14px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;box-shadow:0 16px 36px -14px rgba(37,31,149,.35),0 0 0 1px rgba(22,19,61,.06);animation:s10-bob 8s ease-in-out infinite}
.s10-float b{display:block;font-size:13.5px;line-height:1.25;color:var(--ink)}
.s10-float small{display:block;margin-top:1px;font-size:12px;line-height:1.3;color:var(--body)}
.s10-float__i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--s10-grad);color:#fff}
.s10-float__i .s10-i{width:18px;height:18px}
.s10-float__i img{width:20px;height:20px}
.s10-float__i--w{background:#fff;box-shadow:0 0 0 1px var(--line)}
.s10-float--a{left:-14px;bottom:16%}
.s10-float--b{right:-10px;top:18%;animation-delay:-3.2s}
.s10-float--c{right:6%;bottom:8%;animation-delay:-1.6s}
.s10-float--d{left:-14px;top:22%;animation-delay:-4.4s}
@keyframes s10-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ───────── trust strip ───────── */
.s10-strip{padding:40px 0 44px;background:#fff}
.s10-strip__in{display:flex;align-items:center;justify-content:center;gap:18px 40px;flex-wrap:wrap}
.s10-strip__k{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.s10-strip__l{display:flex;align-items:center;justify-content:center;gap:12px 34px;flex-wrap:wrap}
.s10-strip__l li{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;color:var(--ink)}
.s10-strip__l img{width:26px;height:26px;object-fit:contain}
.s10-strip__l .s10-i{color:var(--ind);width:24px;height:24px}

/* ───────── all-in-one bundle ───────── */
.s10-bundle{display:grid;grid-template-columns:minmax(0,5fr) auto minmax(0,6fr);gap:28px;align-items:stretch}
.s10-tools{display:grid;gap:14px;align-content:center}
.s10-tool{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;background:#fff;box-shadow:var(--s10-shadow-s)}
.s10-tool__i{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px;background:var(--lav);color:var(--ind)}
.s10-tool b{display:block;font-size:17px;line-height:1.25;color:var(--ink);text-decoration:line-through;text-decoration-color:rgba(180,35,35,.55);text-decoration-thickness:2px}
.s10-tool small{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--body)}
.s10-tool__x{margin-left:auto;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#fdecec;color:var(--bad)}
.s10-tool__x .s10-i{width:14px;height:14px;stroke-width:2.6}
.s10-arrow{align-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ind);box-shadow:var(--s10-shadow-s)}
.s10-all{position:relative;overflow:hidden;padding:36px 36px 34px;border-radius:28px;color:#fff;background:linear-gradient(145deg,#8982ff 0,#5a4fe0 46%,#3a2ebe 100%);box-shadow:0 34px 70px -30px rgba(58,46,190,.7)}
.s10-all::before{content:"";position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 66%)}
.s10-all__k{position:relative;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.s10-all__k img{width:24px;height:24px}
.s10-price{position:relative;display:flex;align-items:baseline;gap:10px;margin-top:14px;color:#fff}
.s10-price b{font-family:var(--font-display);font-weight:600;font-size:64px;line-height:1;letter-spacing:-.02em}
.s10-price span{font-size:16px;font-weight:500;color:#fff}
.s10-all__p{position:relative;margin-top:12px;max-width:30em;font-size:16px;line-height:1.55;color:#fff}
.s10-chips{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.s10-chips li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.16);font-size:14.5px;font-weight:600;line-height:1.25;color:#fff}
.s10-chips .s10-i{width:18px;height:18px;color:#fff}
.s10-all .btn{position:relative;margin-top:26px}

/* ───────── feature grid ───────── */
.s10-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.s10-card{position:relative;padding:30px 30px 32px;border-radius:22px;background:#fff;box-shadow:var(--s10-shadow-s);transition:transform .3s var(--ease),box-shadow .3s}
.s10-sec:not(.s10-sec--tint) .s10-card{background:var(--lav2);box-shadow:none}
.s10-card:hover{transform:translateY(-4px);box-shadow:var(--s10-shadow)}
.s10-card__i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--s10-grad);color:#fff;box-shadow:0 10px 22px -10px rgba(58,46,190,.7)}
.s10-card__i .s10-i{width:23px;height:23px}
.s10-card h3{margin-top:22px;font-size:21px;line-height:1.2;color:var(--ink)}
.s10-card p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--body)}
.s10-tag{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:99px;background:var(--lav);font:600 11.5px/1.2 var(--font-body);letter-spacing:.02em;color:var(--ind);vertical-align:middle}

/* ───────── alternating rows with live app screens ───────── */
.s10-rows{display:grid;gap:28px}
.s10-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:44px;align-items:center;padding:44px;border-radius:32px;background:var(--lav2)}
.s10-row:nth-child(even){grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.s10-row:nth-child(even) .s10-row__t{order:2}
.s10-row__t .s10-h3{max-width:12em}
.s10-row__t p.s10-p{margin-top:18px;font-size:17px;line-height:1.65;color:var(--body)}
.s10-checks{display:grid;gap:12px;margin-top:24px}
.s10-checks li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.s10-checks i{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--s10-grad);color:#fff}
.s10-checks i .s10-i{width:12px;height:12px;stroke-width:3}
.s10-row__t .tlink{margin-top:26px}
.s10-shot{position:relative;overflow:hidden;border-radius:16px;background:#fff;box-shadow:var(--s10-shadow)}
.s10-shot .s10-float{animation-duration:8s}
.s10-shot-w{position:relative;min-width:0}
.s10-shot-w .s10-float{z-index:6}
.s10-shot-w .s10-float--a{left:-18px;bottom:12%}
.s10-shot-w .s10-float--b{right:-14px;top:10%}

/* ───────── steps: the dark chapter (pure black, like the home's AJAW AI band) ───────── */
.s10-sec--dark{background:#000;color:#fff}
.s10-sec--dark .s10-h2,.s10-sec--dark .s10-h3,.s10-sec--dark h3{color:#fff}
.s10-sec--dark .s10-kicker{color:#b9b4ff}
.s10-sec--dark .s10-lead,.s10-sec--dark .s10-note,.s10-sec--dark p{color:rgba(255,255,255,.72)}
.s10-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s10}
.s10-step{position:relative;padding:32px 30px 34px;border-radius:22px;background:#fff;box-shadow:var(--s10-shadow-s)}
.s10-sec--dark .s10-step{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -40px rgba(137,130,255,.5);transition:background .3s,transform .3s var(--ease)}
.s10-sec--dark .s10-step:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)}
.s10-step__n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--s10-grad);font-family:var(--font-display);font-weight:600;font-size:21px;color:#fff;box-shadow:0 12px 26px -10px rgba(137,130,255,.9)}
.s10-step h3{margin-top:22px;font-size:22px;line-height:1.2;color:var(--ink)}
.s10-step p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--body)}
.s10-steps__cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}
.s10-steps__cta small{font-size:13.5px;color:var(--body)}
.s10-sec--dark .s10-steps__cta small{color:rgba(255,255,255,.7)}
.s10-sec--dark .btn.p{box-shadow:0 14px 34px -12px rgba(137,130,255,.9)}
.s10-sec--dark .s10-step h3{color:#fff}
.s10-sec--dark .s10-step p{color:rgba(255,255,255,.74)}

/* ───────── split: headline left, stacked cards right (rules / compliance) ───────── */
.s10-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.s10-split .s10-head{margin:0}
.s10-stack{display:grid;gap:16px}
.s10-li{display:flex;gap:20px;padding:26px 28px;border-radius:20px;background:#fff;box-shadow:var(--s10-shadow-s)}
.s10-li__i{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--s10-grad);color:#fff}
.s10-li h3{font-size:19px;line-height:1.25;color:var(--ink)}
.s10-li p{margin-top:7px;font-size:15.5px;line-height:1.6;color:var(--body)}

/* ───────── savings calculator (the visitor's own numbers) ───────── */
.s10-calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:stretch}
.s10-calc__in{display:grid;gap:8px;padding:18px 20px;border-radius:26px;background:var(--lav2)}
.s10-calc__r{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 84px;gap:18px;align-items:center;padding:18px 14px}
.s10-calc__r label{display:flex;align-items:center;gap:14px;cursor:pointer}
.s10-calc__i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:#fff;color:var(--ind);box-shadow:var(--s10-shadow-s)}
.s10-calc__r b{display:block;font-size:16.5px;line-height:1.25;color:var(--ink)}
.s10-calc__r small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--body)}
.s10-calc__r output{text-align:right;font:600 22px/1 var(--font-display);color:var(--ink)}
.s10-calc input[type=range]{--p:30%;-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;outline-offset:6px;background:linear-gradient(90deg,#5a4fe0 var(--p),#dcd9f7 var(--p));cursor:pointer}
.s10-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(90,79,224,.22),0 3px 8px rgba(22,19,61,.3)}
.s10-calc input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(90,79,224,.22),0 3px 8px rgba(22,19,61,.3)}
.s10-calc__out{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:34px 34px 32px;border-radius:26px;color:#fff;background:linear-gradient(145deg,#8982ff 0,#5a4fe0 46%,#3a2ebe 100%);box-shadow:0 34px 70px -30px rgba(58,46,190,.7)}
.s10-calc__out::before{content:"";position:absolute;right:-80px;top:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 66%)}
.s10-calc__out>*{position:relative}
.s10-calc__k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.s10-calc__now{margin:6px 0 20px;font:600 34px/1.05 var(--font-display);color:#fff;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(255,255,255,.7)}
.s10-calc__aj{display:flex;align-items:baseline;gap:10px;margin:6px 0 22px;color:#fff}
.s10-calc__aj b{font:600 56px/1 var(--font-display);letter-spacing:-.02em}
.s10-calc__aj span{font-size:15px;color:#fff}
.s10-calc__save{width:100%;margin-bottom:26px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.17);color:#fff}
.s10-calc__save span{display:block;font-size:13.5px;font-weight:600;color:#fff}
.s10-calc__save b{display:block;margin-top:4px;font:600 34px/1.1 var(--font-display);color:#fff}
.s10-calc__save small{display:block;margin-top:4px;font-size:14px;color:#fff}
.s10-calc__out .btn.p{background:#fff;color:var(--ind);box-shadow:0 10px 24px -10px rgba(22,19,61,.5);margin-top:auto}

/* ───────── related pages ───────── */
.s10-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.s10-rel a{display:flex;flex-direction:column;gap:6px;padding:24px 24px 22px;border-radius:20px;background:var(--lav2);transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.s10-rel a:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--s10-shadow-s)}
.s10-rel .s10-card__i{width:42px;height:42px;border-radius:12px;margin-bottom:12px}
.s10-rel b{font-size:17px;color:var(--ink)}
.s10-rel small{font-size:14px;line-height:1.5;color:var(--body)}
.s10-rel em{margin-top:8px;font-style:normal;font-size:14px;font-weight:600;color:var(--ind)}

/* ───────── reused home blocks: only spacing glue + no-audio call player ───────── */
.call8.s10-call{padding-top:96px}
.s10-call .c8p,.s10-call .c8cut{display:none!important}
.s10-call .c8__note{margin-top:14px}
.s10-sec--tight{padding-top:0}
.s10-closing-wrap .closing{padding-top:24px}
.cg-sec .sec__c h2{max-width:none}

/* ───────── responsive ───────── */
@media (max-width:1300px){.s10-float--a,.s10-float--d{left:6px}.s10-float--b{right:6px}.s10-shot-w .s10-float--a{left:-10px}.s10-shot-w .s10-float--b{right:-8px}}
@media (max-width:1180px){
  /* short / narrow windows (the owner's 1000x640 laptop): stacked hero, full-width app */
  .s10-hero{padding:40px 0 56px}
  .s10-hero__g{grid-template-columns:1fr;gap:40px}
  .s10-hero__t{max-width:720px}
  .s10-hero__v{margin-right:0}
  .s10-hero h1{font-size:48px}
}
@media (max-width:1100px){
  .s10-grid,.s10-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s10-row,.s10-row:nth-child(even){grid-template-columns:1fr;gap:32px;padding:36px}
  .s10-row:nth-child(even) .s10-row__t{order:0}
  .s10-split{grid-template-columns:1fr;gap:36px}
  .s10-bundle{grid-template-columns:1fr;gap:18px}
  .s10-arrow{justify-self:center;transform:rotate(90deg)}
  .s10-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s10-h2{font-size:38px}
  .s10-calc{grid-template-columns:1fr}
}
@media (max-width:760px){
  .s10-sec{padding:64px 0}
  .s10-hero{padding:28px 0 48px}
  .s10-hero__g{gap:28px}
  .s10-hero__k{margin-bottom:14px;font-size:12px}
  .s10-hero h1{font-size:40px;line-height:1.04;letter-spacing:-.02em}
  .s10-hero__sub{margin-top:14px;font-size:16.5px;line-height:1.5}
  .s10-cta{margin-top:22px;gap:10px}
  .s10-cta .btn.lg{width:100%;height:52px;font-size:16px}
  .s10-fine{margin-top:12px;font-size:13px}
  .s10-frame{border-radius:14px}
  /* proof chips: a tidy row under the caption, never stacked cards */
  .s10-stage,.s10-shot-w{display:flex;flex-direction:column}
  .s10-float{position:relative;left:auto;right:auto;top:auto;bottom:auto;max-width:none;margin:0;animation:none;background:var(--lav2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:10px 12px 10px 10px}
  .s10-float[data-n="2"]{display:none}
  .s10-stage .s10-float,.s10-shot-w .s10-float{margin-top:8px}
  .s10-stage .s10d-cap+.s10-float,.s10-shot-w .s10d-cap+.s10-float{margin-top:14px}
  .s10-float b{font-size:13px}.s10-float small{font-size:12px}
  .s10-h2{font-size:32px;line-height:1.08}
  .s10-h3{font-size:26px}
  .s10-lead{font-size:16.5px}
  .s10-head{margin-bottom:32px}
  .s10-grid,.s10-steps,.s10-rel{grid-template-columns:1fr}
  .s10-card,.s10-step{padding:24px 22px 26px}
  .s10-row,.s10-row:nth-child(even){padding:22px 16px;border-radius:22px;gap:22px}
  .s10-all{padding:28px 22px}
  .s10-chips{grid-template-columns:1fr}
  .s10-price b{font-size:52px}
  .s10-tool{padding:16px}
  .s10-calc__r{grid-template-columns:1fr auto;gap:12px 10px;padding:14px 8px}
  .s10-calc__r input{grid-column:1/-1;grid-row:2}
  .s10-calc__out{padding:26px 22px}
  .s10-calc__aj b{font-size:46px}
  .s10-li{padding:20px;gap:14px}
  .s10-strip{padding:26px 0 22px}
  .s10-strip+.s10-sec{padding-top:44px}
  .s10-strip__l{gap:10px 18px}
  .s10-strip__l li{font-size:14.5px}
  .s10-strip__l img{width:22px;height:22px}
}
@media (max-width:370px){
  .s10-hero h1{font-size:36px}
  .s10-h2{font-size:30px}
  .s10-h3{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .s10-hero__k,.s10-hero h1,.s10-hero__sub,.s10-cta,.s10-fine,.s10-hero__v,.s10-float{animation:none}
  .s10-card,.s10-rel a,.s10-step{transition:none}
}

/* ───────── no hairlines: FAQ rows and plan tables become soft cards ───────── */
#faq .qa,#faq .qa:first-child{border:0;background:var(--lav2);border-radius:18px;padding:0 26px;margin-bottom:10px}
#faq .qa summary{padding:21px 0}
#faq .qa p{padding:0 0 24px}
#precios .plc .mt{border-top:0;margin-top:16px;padding:4px 16px;border-radius:14px;background:var(--lav2)}
#precios .plc .mt div{border-bottom:0}
.foot__bot{border-top:0}

/* ───────── framing 2026-10-23 (owner: "on the subpages they move very weirdly, too zoomed in; on the home they look a lot nicer")
   Desktop (>= 1000px): no camera. Every app screen is the WHOLE 1440x900 app, scaled to fit, inside the home's Safari window
   (traffic lights, URL pill, soft shadow, 12px radius). Frames are sized so app text reads: hero >= 0.55x, rows >= 0.5x. ───────── */
.s10-frame,.s10-shot{border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(22,19,61,.09),0 2px 4px rgba(22,19,61,.04),0 34px 70px -30px rgba(37,31,149,.38)}
.s10-stage .s10-frame::after,.s10-shot::after{box-shadow:none}
.s10-bar{position:relative;height:34px;font-size:9.4px;display:flex;align-items:center;gap:1.2em;padding:0 1.25em;background:linear-gradient(#f7f6fa,#ecebf2);border-bottom:1px solid #d9d7e4;color:#5f5c78;z-index:2}
.s10-bar .sf__l{display:flex;gap:.65em;flex:none}
.s10-bar .sf__l i{display:block;width:1.2em;height:1.2em;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.s10-bar .sf__l i:nth-child(1){background:#ff5f57}.s10-bar .sf__l i:nth-child(2){background:#febc2e}.s10-bar .sf__l i:nth-child(3){background:#28c840}
.s10-bar .sf__n,.s10-bar .sf__r{display:flex;align-items:center;gap:1em;flex:none}
.s10-bar .sf__r{margin-left:auto;gap:1.3em}
.s10-bar .sf__n svg,.s10-bar .sf__r svg{width:1.7em;height:1.7em;display:block}
.s10-bar .sf__f{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40%;height:2.35em;border-radius:.65em;background:#e2e1ea;display:flex;align-items:center;justify-content:center;gap:.55em;color:#34324d;overflow:hidden}
.s10-bar .sf__f svg{width:1em;height:1em;flex:none;opacity:.65}
.s10-url{font:500 11.5px/1 Inter,sans-serif;color:#34324d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s10-bar~.s10-ax{border-radius:0 0 12px 12px}

/* hero: text column narrows (400 -> 330px) before the app does; split only while the app keeps >= 0.55x, stacked below 1240px */
.s10-hero__g{grid-template-columns:clamp(330px,calc(100vw - 1040px),400px) minmax(0,1fr);gap:40px}
@media (max-width:1359px){.s10-hero h1{font-size:46px}.s10-hero__sub{font-size:17px}}

/* feature rows: a narrow text column and a wide frame (~770-870px at 1440 = 0.53-0.6x); rows reach a little past the wrap on wide screens */
.s10-rows{margin-left:calc(-1 * clamp(0px,(100vw - 1240px) / 2,48px));margin-right:calc(-1 * clamp(0px,(100vw - 1240px) / 2,48px))}
.s10-row{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px;padding:36px}
.s10-row:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,320px)}
.s10-row__t .s10-h3{font-size:30px;max-width:none}
.s10-row__t p.s10-p{font-size:16.5px;margin-top:14px}
.s10-row__t .s10-checks{margin-top:18px;gap:10px}
.s10-row__t .s10-checks li{font-size:15px}
.s10-row .s10d-cap{margin-top:12px}

@media (max-width:1239px){
  .s10-hero{padding:40px 0 56px}
  .s10-hero__g{grid-template-columns:1fr;gap:40px}
  .s10-hero__t{max-width:720px}
  .s10-hero__v{margin-right:0}
  /* rows stack: text on top, the whole app full width under it */
  .s10-rows{margin-left:0;margin-right:0}
  .s10-row,.s10-row:nth-child(even){grid-template-columns:1fr;gap:28px;padding:36px}
  .s10-row:nth-child(even) .s10-row__t{order:0}
  .s10-row__t{max-width:720px}
}
@media (max-width:760px){
  .s10-bar{height:26px;font-size:7.6px;padding:0 1em}
  .s10-bar .sf__n,.s10-bar .sf__r{display:none}
  .s10-bar .sf__f{width:56%}
  .s10-url{font-size:10px}
  .s10-frame,.s10-shot{border-radius:12px}
  .s10-row,.s10-row:nth-child(even){padding:22px 16px;gap:22px}
  .s10-row__t .s10-h3{font-size:26px}
}
/* tablets (761-999px): the stacked row frame takes the full card width so the whole app stays >= ~0.5x */
@media (max-width:999px) and (min-width:761px){.s10-row,.s10-row:nth-child(even){padding:28px 14px 20px}.s10-row__t{padding:0 14px}}
/* phones: every screen becomes a 5:6 camera window when it boots; reserve that box from the first paint so nothing below jumps (was a ~200px shift) */
@media (max-width:760px){
  .s10-ax{aspect-ratio:5/6}
  .s10-ax::before{background:linear-gradient(180deg,#fff 0 48px,transparent 48px),repeating-linear-gradient(180deg,transparent 0 46px,#f1f0f8 46px 47px);background-position:0 0,0 70px}
}

/* owner 10-26: phones show the WHOLE app screen like the home page (camera off), so the frame keeps the app shape */
@media (max-width:999px){.s10-ax,.s10-ax.is-cam{aspect-ratio:1440/900!important}}