/* ============================================================
   LOCAL TERRITORY · redesign, the six service pages (17 Oct 2026)
   build.py service_page() and v2_services_*. Loads after v2.css, so it only
   adds what the canvas's Service board needed beyond the shared rules.
   ============================================================ */

/* no word left alone on a heading's last line (Theo: nothing stranded) */
main:has(.svhero) :is(.h1,.h2,.h3){text-wrap:balance}

/* hero: the canvas's service hero sits a little tighter than home's */
.svhero{padding-bottom:110px}
.svhero .chip{margin-bottom:28px}
.svhero .h1{max-width:1060px;margin:0 auto}
.svhero .sub{max-width:900px}
.svhero>.wrap{z-index:2}

/* the hero film with its label and transcript */
.svfilm{min-width:0}
.svfilm .filmbar{pointer-events:none;z-index:2}
.svtx{margin-top:14px;text-align:left;background:#fff;border-radius:16px;border:1px solid var(--rule);padding:0 20px}
.svtx summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.svtx summary::-webkit-details-marker{display:none}
.svtx summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg);transition:transform .2s}
.svtx[open] summary::before{transform:rotate(45deg)}
.svtx p{padding:0 0 18px;font-size:15px;line-height:1.6;color:var(--muted)}

/* panel buttons stay centred under the factor cards */
.svpack .center .ctas{margin-top:44px}

/* the two-minute profile check: real tick boxes */
[data-sleep] .checks li{display:block;min-height:0}
[data-sleep] .checks label{display:flex;align-items:center;gap:14px;min-height:54px;padding:6px 0;cursor:pointer;position:relative}
[data-sleep] .checks input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
[data-sleep] .checks .box{display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
[data-sleep] .checks input:checked+.box{background:var(--pink);border-color:var(--pink)}
[data-sleep] .checks input:checked+.box::after{content:"";width:6px;height:11px;margin-top:-3px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg)}
[data-sleep] .checks input:focus-visible+.box{outline:3px solid var(--pink);outline-offset:3px}
[data-sleep] .checks label:hover .box{border-color:var(--ink)}
[data-sleep] .score .meter i{left:calc(var(--p,0) * (100% - 18px));transition:left .3s cubic-bezier(.2,.7,.2,1)}
[data-sleep] .score p{min-height:4.5em}
@media (prefers-reduced-motion:reduce){[data-sleep] .score .meter i{transition:none}}

/* what we do: the paragraphs above the drawn examples */
.svwhat{margin:0 auto 80px}
.av.svblue{background:#1a73e8}

/* price: the paragraphs under the ladder */
.svcost{margin-top:56px}
.svladnote a{color:var(--ink);font-weight:700}
/* the second column starts level with the first */
.svcols p+p{margin-top:0}

@media (max-width:760px){
  .svhero{padding-bottom:70px}
  .svhero .chip{margin-bottom:20px;font-size:13px}
  .svtx{padding:0 16px}
  .svwhat{margin-bottom:50px}
  .svcost{margin-top:36px}
  .svcols p+p{margin-top:16px}
  .svcols>div+div{margin-top:16px}
  .svhero .chip{border-radius:18px;max-width:100%}
  .svpack .center .ctas{margin-top:30px}
  [data-sleep] .score p{min-height:0}
}

/* ---------- shared pieces for the other five pages ---------- */
/* words beside a drawing: v2.css styles every .txt p muted, keep the eyebrow pink */
.svrow .txt .eyebrow{color:var(--pink-deep);margin-top:0}
.svrow .txt .h2{margin-bottom:6px}
.svrow .txt .ctas{margin-top:28px}
.svrow{align-items:center}
.svrow>.art{min-width:0;width:100%}
.svcols>div p+p{margin-top:16px}
.svcols+.center .ctas,.svcols~.center .ctas{margin-top:36px}
/* steps on an ink panel beside a drawing */
.svsteps{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:70px;align-items:center}
.svsteps .steps{margin-top:0}
.svsteps .art{min-width:0;display:flex;justify-content:center}
.svlaptop{width:100%;height:auto}
/* a white numbered checklist */
.svlist{padding:30px 30px 26px;width:100%;max-width:520px}
.svlist .h3{margin-bottom:16px}
.svlist ol{display:grid;gap:0}
.svlist li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--rule);font-weight:600;font-size:16px;line-height:1.4}
.svlist li:first-child{border-top:0}
.svlist .num{width:30px;height:30px;font-size:14px}
.svnote{font-size:13px;line-height:1.5;color:var(--muted);margin-top:14px}
/* the price card beside the cost copy */
.cost .txt .eyebrow{margin-bottom:16px}
.cost .txt .h2{margin-bottom:4px}
.pcard .pillk{margin-bottom:6px}

/* AI SEO: the drawn answer, the schema card, where an answer comes from */
.svchat{width:100%;max-width:470px;padding-top:30px}
.svcode{width:100%;max-width:470px;padding:30px 26px 24px;background:#fff;color:var(--ink)}
.svcode pre{margin:0;font:500 14px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;color:var(--muted)}
.svcode pre b{font-weight:600;color:var(--pink-deep)}
.svcode pre s{text-decoration:none;color:var(--ink)}
.svcode pre i{font-style:normal;color:var(--muted)}
.svcode pre u{text-decoration:none;color:#188038;font-weight:700}
.svflow{display:grid;grid-template-columns:minmax(0,1.35fr) 64px minmax(0,1fr);align-items:center;max-width:1160px;margin:0 auto}
.svsrc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.svsrc .card{padding:20px 22px}
.svsrc b{display:block;font-size:17px;margin-bottom:4px}
.svsrc span{font-size:15px;line-height:1.5;color:var(--muted)}
.svarrow{display:flex;justify-content:center}
.svarrow svg{width:44px;height:44px;padding:12px;border-radius:50%;background:var(--pink);color:#fff;box-sizing:border-box}
.svans{background:var(--ink);color:var(--paper);border:0;padding:30px 30px 32px}
.svans .q{display:block;width:max-content;max-width:100%;margin:0 0 20px auto;padding:11px 15px;border-radius:18px 18px 4px 18px;background:rgba(247,244,238,.12);font-weight:600;font-size:15px}
.svans b{display:block;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.svans p{font-size:18px;line-height:1.5}
.svflow+.svlist{margin:44px auto 0;max-width:760px}
.svflow+.svlist ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.svflow+.svlist li:nth-child(2){border-top:0}

/* Google Ads: the results page with a Maps ad over it, match types, the auction */
.svserp{position:relative;padding:0 70px 70px 0;text-align:left}
.svserp .serp{min-height:420px}
.svmapad{position:absolute;right:0;bottom:0;width:290px;padding:16px 16px 14px;font-family:Roboto,Arial,sans-serif;color:#1f1f1f}
.svmapad .example{left:16px}
.svmapad-map{position:relative;height:110px;border-radius:10px;overflow:hidden;margin-bottom:10px}
.svmapad-map img{width:100%;height:100%;object-fit:cover}
.svmapad>b{display:block;font-size:16px;font-weight:500}
.svmapad em{font-style:normal;font-weight:700;color:#1f1f1f}
.svmatch{width:100%;max-width:520px;padding:30px 24px 22px}
.svmatch ul{display:grid;gap:10px}
.svmatch li{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:14px;align-items:center}
.svmatch .sbar{min-height:52px;font-size:18px;padding:0 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;letter-spacing:0}
.svmatch .sbar svg{width:18px;height:18px}
.svmatch li.neg .sbar{background:var(--ink);color:#fff}
.svmatch li.neg .sbar svg{color:var(--pink)}
.svmt b{display:block;font-size:15px}
.svmt small{display:block;font-size:13px;line-height:1.35;color:var(--muted)}
.svrank{max-width:1240px;margin:0 auto}
.svrank-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.svrank-in .card{padding:22px 20px 24px}
.svrank-in .card.hot{background:var(--ink);color:var(--paper);border:0;transform:translateY(-12px)}
.svrank-in .num{width:32px;height:32px;font-size:14px;margin-bottom:16px}
.svrank-in b{display:block;font-size:19px;margin-bottom:6px}
.svrank-in p{font-size:15px;line-height:1.5;color:var(--muted)}
.svrank-in .hot p{color:rgba(247,244,238,.78)}
.svrank-out{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin:44px auto 0;max-width:720px;padding:22px 30px;border-radius:999px;background:var(--pink);color:#fff}
.svrank-out::before{content:"";position:absolute;left:50%;top:-44px;width:2px;height:44px;margin-left:-1px;background:var(--ink)}
.svrank-out b{font-weight:900;font-size:28px;letter-spacing:-.02em;white-space:nowrap}
.svrank-out span{font-weight:600;font-size:16px;line-height:1.35}
.svrank-note{max-width:44em;margin:26px auto 0;text-align:center;color:var(--muted);font-size:16px}

/* paid social: the post and its audience, the radius, the stages */
.svsocial{position:relative;padding:0 0 60px 0;max-width:560px;margin:0 auto;width:100%}
.svsocial .social{max-width:450px;margin:0 auto 0 0;text-align:left}
.svaudtag{position:absolute;right:0;bottom:0;width:270px;padding:24px 20px 18px;text-align:left}
.svaudtag b{display:block;font-size:17px;line-height:1.3}
.svaudtag small{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.svaud{width:100%;max-width:480px;padding:26px 22px 14px}
.svaud-map{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#ecebe4}
.svaud-map>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svaud-map .radar{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1/1;translate:-50% -50%}
.svaud ul{margin-top:12px}
.svaud li{display:flex;justify-content:space-between;gap:14px;padding:11px 2px;border-top:1px solid var(--rule);font-size:15px}
.svaud li:first-child{border-top:0}
.svaud li span{color:var(--muted)}
.svaud li b{text-align:right}
.svstages{width:100%;max-width:520px}
.svstages-k{display:flex;justify-content:space-between;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.6);margin-bottom:10px}
.svstages ol{display:grid;gap:8px}
.svstages li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;
  margin-left:calc(var(--s) * 7%);background:rgba(247,244,238,.06);border:1px solid var(--rule-inv)}
.svstages li:last-child{background:var(--pink);border-color:var(--pink)}
.svstages b{font-size:16px}
.svstages span{flex:none;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.svstages li:last-child span{color:#fff}
.svstages .svnote{color:rgba(247,244,238,.6)}

/* web design: the client's site in the hero, the wireframe, the proof, the two ways in, the process */
.svbw{min-width:0}
.svbw .bw{position:relative;left:auto;top:auto;width:100%;margin:0;text-align:left}
.svbw .site{height:auto;min-height:440px;padding-bottom:30px}
.svbw .msite{text-align:left}
.svwire{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:70px;align-items:center}
.svwire-page{background:#fff;border-radius:var(--r);padding:22px;display:grid;gap:10px;box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.svwb{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border-radius:12px;border:1.5px solid var(--rule);color:var(--ink);text-align:left}
.svwb b{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.svwb i{flex:1;height:6px;border-radius:3px;background:var(--paper-2);margin-left:6px}
.svwb.hot{border-color:var(--pink);background:#fff;box-shadow:inset 3px 0 0 var(--pink)}
.svwb .num{width:26px;height:26px;font-size:12px;flex:none}
.svwb:not(.hot) .num{background:var(--ink)}
.svwb1{min-height:64px}.svwb4{min-height:78px}.svwb5{min-height:62px}
.svwire .notes li{align-items:start}
.svwire .notes li:not(.on) .num{background:rgba(247,244,238,.16)}
.svshot{width:100%;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid rgba(20,22,31,.06)}
.svshot img{width:100%;height:auto}
.svfork{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;max-width:1100px;margin:0 auto;align-items:stretch}
.svfork .card{padding:34px 34px 30px;display:flex;flex-direction:column}
.svfork .h3{font-size:30px;margin:10px 0 12px}
.svfork p{font-size:16.5px;color:var(--muted)}
.svfork .oprice{margin-top:auto;padding-top:22px}
.svfork .btn{margin-top:20px;width:100%}
.svfork-b{background:var(--ink);color:var(--paper);border:0;transform:translateY(-14px)}
.svfork-b p{color:rgba(247,244,238,.78)}
.svfork-b .oprice{border-color:var(--rule-inv)}
.svfork-b .oprice span{color:rgba(247,244,238,.7)}
.svfork-b .btn{background:#fff;color:var(--ink)}
.svroute{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;counter-reset:r}
.svroute li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--rule);box-shadow:0 8px 20px -16px rgba(20,22,31,.3)}
.svroute li:last-child{grid-column:1/-1;background:var(--ink);color:var(--paper);border:0}
.svroute li:last-child p{color:rgba(247,244,238,.78)}
.svroute h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.svroute p{font-size:16px;line-height:1.5;color:var(--muted)}

@media (max-width:760px){
  .svsteps,.svwire{display:block}
  .svsteps .art{margin-bottom:34px}
  .svwire-page{margin-bottom:34px;padding:14px}
  .svlist{padding:22px 18px 18px}
  .svflow{display:block}
  .svsrc{grid-template-columns:minmax(0,1fr);gap:10px}
  .svarrow{margin:14px 0;transform:rotate(90deg)}
  .svans{padding:24px 20px}
  .svflow+.svlist ol{grid-template-columns:minmax(0,1fr)}
  .svflow+.svlist li:nth-child(2){border-top:1px solid var(--rule)}
  .svserp{padding:0}
  .svserp .serp{min-height:0}
  .svmapad{position:relative;width:auto;margin:-10px 14px 0;z-index:2}
  .svmatch{padding:26px 16px 18px}
  .svmatch li{grid-template-columns:minmax(0,1fr);gap:6px}
  .svmatch .sbar{font-size:16px}
  .svrank-in{grid-template-columns:minmax(0,1fr);gap:10px}
  .svrank-in .card.hot{transform:none}
  .svrank-out{flex-direction:column;gap:4px;border-radius:24px;text-align:center;margin-top:34px}
  .svrank-out::before{top:-34px;height:34px}
  .svsocial{padding:0}
  .svaudtag{position:relative;width:auto;margin:-12px 14px 0}
  .svstages li{margin-left:calc(var(--s) * 4%)}
  .svbw .site{min-height:0}
  .svfork{grid-template-columns:minmax(0,1fr);gap:16px}
  .svfork-b{transform:none}
  .svfork .card{padding:26px 22px}
  .svroute{grid-template-columns:minmax(0,1fr);gap:10px}
  .svroute li{padding:18px;grid-template-columns:36px minmax(0,1fr);gap:12px}
}

/* pay-monthly websites: the deal, the before and after, the steps, the menu, the ledger */
.svdeal-rows{margin-top:6px}
.svdeal-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--rule);font-weight:600;font-size:16px}
.svdeal-rows li:first-child{border-top:0}
.svdeal-rows b{font-weight:800;font-size:20px}
.svdeal-rows b.free{color:var(--pink)}
.svdeal .ofine a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.svba{max-width:1160px;margin:0 auto}
.svba .ba-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.svba .ba-cap .t{font-weight:800;font-size:18px}
.svba .ba-cap .h{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-deep)}
.svba .ba-frame{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid rgba(20,22,31,.06)}
.svba .ba{position:relative;width:100%;aspect-ratio:16/9.6;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:none}
.svba .ba .layer{position:absolute;inset:0;overflow:hidden}
.svba .ba .before{z-index:2}
.svba .ba .shot-img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
/* the screenshots must not start a native image drag, or the slider stops after one step */
.svba .ba img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.svba .ba.anim .before{transition:clip-path .7s cubic-bezier(.4,0,.2,1)}
.svba .ba.anim .ba-handle{transition:left .7s cubic-bezier(.4,0,.2,1)}
.svba .ba-tag{position:absolute;top:14px;z-index:5;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:#fff}
.svba .ba-tag.b{left:14px;background:var(--ink)}
.svba .ba-tag.a{right:14px;background:var(--pink)}
.svba .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:6;transform:translateX(-1.5px);box-shadow:0 0 0 1px rgba(20,22,31,.25)}
.svba .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px #fff,0 8px 20px rgba(20,22,31,.35)}
.svmis{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:80px;align-items:start}
.svmis .txt p{color:rgba(247,244,238,.78)}
.svmis .txt p+p{margin-top:16px}
.svhow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:18px;align-items:stretch}
.svhow li{padding:28px 26px}
.svhow .h3{margin:10px 0 8px}
.svhow p{font-size:16px;line-height:1.5;color:var(--muted)}
.svhow li.live{background:var(--ink);color:var(--paper);border:0}
.svhow li.live p{color:rgba(247,244,238,.78)}
.svlive{display:inline-block;width:8px;height:8px;margin-left:4px;border-radius:50%;background:#2fd27a;box-shadow:0 0 0 4px rgba(47,210,122,.2);vertical-align:1px}
.svpull{margin-top:30px;padding:24px 26px;border-radius:18px;background:var(--ink);color:var(--paper)}
.svpull p{font-weight:800;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:var(--paper)!important;margin:0!important}
.svpull>span{display:block;margin-top:8px;font-size:15px;color:rgba(247,244,238,.7)}
.svaddons{max-width:960px;margin:0 auto;padding:8px 34px}
.svaddons li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:start;padding:22px 0;border-top:1px solid var(--rule)}
.svaddons li:first-child{border-top:0}
.svaddon-tag{display:block;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:2px}
.svaddon-t b{display:block;font-size:18px;line-height:1.3}
.svaddon-t p{font-size:15px;line-height:1.5;color:var(--muted);margin-top:4px}
.svaddon-p{text-align:right;min-width:150px}
.svaddon-p b{display:block;font-weight:800;font-size:16px;line-height:1.3}
.svaddon-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap}
.svaddon-link svg{width:14px;height:14px;color:var(--pink)}
.svfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.svfacts div{padding:18px;border-radius:16px;background:#fff;border:1px solid var(--rule)}
.svfacts b{display:block;font-weight:900;font-size:34px;line-height:1;letter-spacing:-.03em}
.svfacts span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--muted)}
.cost .svfacts span,.cost .txt .svfacts span{margin-top:6px}
.svledger{padding:30px 30px 24px}
.svledger .h3{font-size:22px;margin-bottom:6px}
.svledger ul{margin:18px 0 6px;display:grid;gap:14px}
.svledger li div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.svledger li span{font-weight:800}
.svledger li i{display:block;height:12px;margin-top:6px;border-radius:6px;background:var(--ink);width:calc(var(--w) * 100%)}
.svledger li.base i{background:var(--pink)}

@media (max-width:760px){
  .svmis{display:block}
  .svmis .txt{margin-top:22px}
  .svhow{grid-template-columns:minmax(0,1fr);gap:12px}
  .svhow li{padding:22px 20px}
  .svpull p{font-size:22px}
  .svaddons{padding:4px 18px}
  .svaddons li{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .svaddon-p{grid-column:2;text-align:left;min-width:0}
  .svfacts{grid-template-columns:minmax(0,1fr)}
  .svledger{margin-top:34px;padding:24px 18px 18px}
  .svba .ba{aspect-ratio:16/13.5}
}