/* CliniDesign, practice site. Light Burano palette: dark ink #1b2a4e for text, accents in teal, sky, coral, lilac and sun,
   paper #fbf7ef; Fraunces + Geist. Round 2 (2026-10-22): navy and gold accents moved to Burano tones. See practice-templates/_work/marketing-site-2026-10-19/DECISIONS.md. */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-italic-var-latin.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#fffdf8;--cream:#fbf7ef;--white:#fff;--line:#e7dfd0;
  --navy:#1b2a4e;--navy-2:#2a3d6b;--muted:#4a5468;
  --gold:#c9a227;--gold-ink:#7a5c00;--gold-bg:#fff4d6;
  --cta:#c2412b;--cta-hover:#a33522;--deep:#0b5f50;
  /* coral-line: rules and underlines, 3.5:1 on paper and white, 3.1:1 on teal-bg. bezel: phone frame (graphite, not navy) */
  --coral-line:#e0593a;--bezel:#272b33;--bezel-2:#3a3f49;
  /* specialty colors: tint background, text-safe ink, mid accent */
  --teal-bg:#d5f1e7;--teal:#0b6e5a;--teal-mid:#2bb39a;
  --sky-bg:#dce9fd;--sky:#1d58b5;--sky-mid:#5b9bf0;
  --coral-bg:#fde1d4;--coral:#a93d25;--coral-mid:#f07a55;
  --lilac-bg:#e8defa;--lilac:#5f37a8;--lilac-mid:#a585e6;
  --sun-bg:#ffefc4;--sun:#6e5300;--sun-mid:#f2c14e;
  --rose-bg:#fbdde8;--rose:#9a2c56;--rose-mid:#ec7fa6;
  --sage-bg:#dff0d5;--sage:#36612a;--sage-mid:#8cc06e;
  --indigo-bg:#dfe4fa;--indigo:#3a45a8;--indigo-mid:#8592ec;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --spring:cubic-bezier(0.34,1.56,0.64,1);--ease:cubic-bezier(0.16,1,0.3,1);
  --r:18px;--r-sm:12px;--wrap:1180px;--seam:160px;
  --shadow:0 1px 2px rgb(27 42 78 / .06),0 12px 32px -12px rgb(27 42 78 / .22);
  --shadow-lg:0 2px 4px rgb(27 42 78 / .06),0 30px 60px -24px rgb(27 42 78 / .35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--navy);font:400 1.0625rem/1.65 var(--f-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 6px #fff}
.cta-sec :focus-visible,.bg-deep :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--deep)}
.hero__copy,.stack,.split>*,.hero__grid>*{min-width:0}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.12;letter-spacing:-.012em;margin:0 0 .6em;text-wrap:balance;font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.3rem,4.6vw + .6rem,4.4rem);max-width:15ch}
h2{font-size:clamp(1.75rem,2.4vw + .8rem,2.75rem);max-width:22ch}
h3{font-size:clamp(1.15rem,.6vw + 1rem,1.4rem);font-variation-settings:"opsz" 36}
p{margin:0 0 1em;text-wrap:pretty}
.lede{font-size:clamp(1.08rem,.5vw + 1rem,1.28rem);color:var(--muted);max-width:56ch}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.center{text-align:center}.center h2,.center .lede{margin-inline:auto}
.eyebrow{display:inline-block;font:600 .78rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-bottom:.9rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:.6rem 1rem;border-radius:6px}  /* square corners: the whole box, corners too, sits over the header (referee MKT-1) */
.skip:focus{top:.75rem;color:#fff}

/* buttons: pills only */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.45rem;border-radius:999px;font:600 1rem/1.1 var(--f-body);text-decoration:none;text-align:center;border:2px solid transparent;cursor:pointer;transition:transform .35s var(--spring),box-shadow .3s ease,background-color .2s ease,color .2s ease}
.btn--cta{background:var(--cta);color:#fff;box-shadow:0 10px 24px -10px rgb(194 65 43 / .7)}
.btn--cta:hover{background:var(--cta);color:#fff;transform:translateY(-2px)}
/* teal button (round 2, was navy): white on #0b6e5a is 6.2:1 */
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:var(--white);color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.center .btn-row{justify-content:center}
.textlink{font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--coral-line);text-decoration-thickness:2px}
.textlink:hover{color:var(--cta)}
/* r3 fix 2026-10-23: copy only the attribute, never rely on [hidden] losing to a display rule */
[hidden]{display:none!important}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgb(255 253 248 / .86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgb(27 42 78 / .5)}
.nav{display:flex;align-items:center;gap:1.25rem;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy);margin-right:auto}
/* CliniDesign logo r5-2, traced SVG (owner pick 2026-10-22) (alt text names the link). Browser tab icon stays the interim CD square (owner 2026-10-22) */
.brand img{display:block;height:56px;width:auto}
/* idea 5 (r3 2026-10-23): on the first visit of a tab session the four tiles of the logo plus slide in from their own sides.
   The head script adds .plus-in only when motion is allowed. An overlay of the four tiles (same viewBox as the logo) moves;
   the logo image hides its own plus under a mask, so the mark is never doubled. */
.brand{position:relative}
.brand__plus{display:none}
.plus-in .site-header .brand__plus{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.plus-in .site-header .brand img{-webkit-mask-image:linear-gradient(90deg,transparent 28.32%,#000 28.32%);mask-image:linear-gradient(90deg,transparent 28.32%,#000 28.32%)}
.plus-in .brand__plus path{animation:plusIn .62s var(--spring) both}
.plus-in .brand__plus path:nth-child(1){--px:0;--py:-70px}
.plus-in .brand__plus path:nth-child(2){--px:70px;--py:0;animation-delay:.07s}
.plus-in .brand__plus path:nth-child(3){--px:0;--py:70px;animation-delay:.14s}
.plus-in .brand__plus path:nth-child(4){--px:-70px;--py:0;animation-delay:.21s}
@keyframes plusIn{from{transform:translate(var(--px),var(--py));opacity:0}}
.foot .brand img{height:60px}
@media (max-width:520px){.brand img{height:48px}}
.nav-links{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0}
.nav-links a{font:500 .9rem/1 var(--f-body);color:var(--navy);text-decoration:none;padding:.5rem 0;background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{background-size:100% 2px}
.nav .btn{min-height:42px;padding:.55rem 1.1rem;font-size:.9375rem}  /* 15 px (seo-a11y 2026-10-23, designer audit4 item 9) */
.menu-toggle{display:none;min-height:44px;min-width:44px;border:2px solid var(--navy);background:var(--white);color:var(--navy);border-radius:999px;padding:.4rem .95rem;font:600 .9rem/1 var(--f-body);cursor:pointer}
@media (max-width:980px){
  .menu-toggle{display:inline-flex;align-items:center}
  .nav-links{position:absolute;left:0;right:0;top:72px;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.25rem;box-shadow:0 20px 30px -20px rgb(27 42 78 / .4)}
  .nav-links a{display:block;padding:.85rem 0;font-size:1rem;border-bottom:1px solid var(--line);background:none}
  .js .nav-links{display:none}
  .js .nav-links.is-open{display:flex}
  .nav .btn--cta{display:none}
}

/* sections and seams */
.sec{position:relative;padding:clamp(3rem,5.5vw,5rem) 0;isolation:isolate}
.sec.seam{padding-top:calc(var(--seam) * .62)}
.sec,.hero,.phero,.site-footer{overflow-x:clip}
.bg-paper{background:var(--paper)}.bg-cream{background:var(--cream)}.bg-white{background:var(--white)}
.bg-teal{background:var(--teal-bg)}.bg-sky{background:var(--sky-bg)}.bg-coral{background:var(--coral-bg)}
.bg-lilac{background:var(--lilac-bg)}.bg-sun{background:var(--sun-bg)}.bg-rose{background:var(--rose-bg)}
.bg-sage{background:var(--sage-bg)}.bg-indigo{background:var(--indigo-bg)}.bg-navy{background:var(--navy);color:#fff}.bg-deep{background:var(--deep);color:#fff}
.aur-flip>.aur{transform:scaleX(-1)}
@media (max-width:760px){:root{--seam:120px}}

/* hero */
.hero{position:relative;isolation:isolate;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2rem,4vw,3rem);overflow:hidden;--aur-top:var(--paper);--aur-bot:var(--paper);--aur-k:1}
.hero>.aur,.phero>.aur{height:100%;top:0;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero h1{margin-bottom:.45em}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .lede{margin-bottom:1.6rem}
.hero__facts{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.6rem 0 0;padding:0;list-style:none}
.hero__facts li{font:500 .85rem/1 var(--f-body);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.55rem .8rem}
.hero__facts li b{color:var(--teal)}
.hero__facts li:has(a){padding:0}.hero__facts a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;color:var(--navy);font-weight:600;text-decoration:none;border-radius:999px}.hero__facts a:hover{color:var(--cta)}
.hero__check{margin:.6rem 0 0}
.hero__facts a:focus-visible{border-radius:999px}
/* free check (r3 2026-10-23, designer M3; owner rejects stripes, tabs and icons): the one-page letter the practice receives.
   A cream sheet tilted one degree on a second sheet, a small-caps letterhead over a hairline, a coral hand-drawn underline under
   "one page" that draws when the letter scrolls in (site.js adds .in; drawn at once without JS or with reduced motion), and four
   hanging italic numerals on ruled rows. */
.letter-wrap{position:relative;isolation:isolate;max-width:500px;margin-inline:auto;padding:12px 10px 18px}
.letter-wrap::before{content:"";position:absolute;inset:20px 2px 6px 16px;z-index:-1;background:var(--paper);border:1px solid rgb(27 42 78 / .1);border-radius:4px;transform:rotate(2.2deg);box-shadow:0 18px 40px -26px rgb(27 42 78 / .45)}
.letter{position:relative;background:#fffcf3;border:1px solid rgb(27 42 78 / .12);border-radius:4px;padding:1.35rem 1.5rem 1.1rem 3.6rem;transform:rotate(-1deg);box-shadow:0 2px 4px rgb(27 42 78 / .06),0 34px 60px -28px rgb(27 42 78 / .45)}
.letter__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;margin:0 0 1rem -2.1rem;padding-bottom:.55rem;border-bottom:1px solid rgb(27 42 78 / .22);font:600 .8rem/1.25 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--navy)}
.letter__title{margin:0 0 .5rem -2.1rem;font:600 1.35rem/1.3 var(--f-display);color:var(--navy);text-wrap:balance}
.hand{position:relative;white-space:nowrap}
.hand svg{position:absolute;left:-3%;bottom:-.22em;width:106%;height:.34em;overflow:visible;fill:none;stroke:var(--coral-line);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1) .25s}
.js .letter:not(.in) .hand svg{stroke-dashoffset:1}
.letter__rows{list-style:none;margin:0;padding:0;font-size:1rem;line-height:1.45}
.letter__rows li{position:relative;padding:.72rem 0;border-bottom:1px solid rgb(29 88 181 / .18);color:var(--navy)}
.letter__n{position:absolute;left:-2.2rem;top:.5rem;font:italic 500 1.55rem/1 var(--f-display);font-variant-numeric:oldstyle-nums;color:var(--coral)}
@media (max-width:520px){.letter{padding:1.15rem 1.1rem 1rem 3rem}.letter__head,.letter__title{margin-left:-1.8rem}.letter__n{left:-1.9rem}}
.phero__aside .letter-wrap{width:100%}
.form-aside__letter{margin-bottom:2.5rem}
/* any design for any practice (owner 2026-10-22) */
.anyfit{max-width:40rem;margin:2rem auto 0;text-align:center;font-size:1.08rem;line-height:1.55;color:var(--navy);text-wrap:pretty}  /* plain text, no callout box (owner 2026-10-22: the card read as AI template) */
.wrap[class*="c-"] .anyfit{margin:0 0 1.5rem;text-align:left}
@media (max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr)}.hero h1{max-width:18ch}}

/* hero stack (layered-scroll-parallax-depth) */
.stack{position:relative;aspect-ratio:1.18/1;min-height:300px}
.stack .frame{position:absolute;border-radius:14px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-lg);border:1px solid rgb(27 42 78 / .1)}
.frame__bar{display:flex;align-items:center;height:28px;padding:0 12px;background:#f3efe6;border-bottom:1px solid var(--line)}
/* r3 W5: the bar names the sample in small caps (no colored dots) */
@media (max-width:600px){.frame__tail{display:none}}
.frame__bar>span{font:600 .8rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame img{width:100%;height:auto}
.stack .f-back{width:62%;left:0;top:2%;rotate:-4deg}
.stack .f-mid{width:62%;right:0;top:0;rotate:3deg}
.stack .f-front{width:80%;left:9%;top:18%;z-index:2}
.stack .f-phone{width:24%;right:1%;bottom:-2%;z-index:3;border-radius:22px;border:5px solid var(--bezel)}
.stack .f-phone img{border-radius:16px}
.pal{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;position:relative;z-index:4}
.pal__label{flex-basis:100%;font:600 .85rem/1 var(--f-body);margin-bottom:.2rem}
.pal button{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.3rem .7rem .3rem .35rem;border-radius:999px;border:1px solid var(--line);background:var(--white);font:500 .82rem/1 var(--f-body);color:var(--navy);cursor:pointer;transition:transform .3s var(--spring),border-color .2s}
.pal button:hover{transform:translateY(-2px)}
.pal button[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.pal button span{width:20px;height:20px;border-radius:50%;background:var(--sw,#ccc);box-shadow:inset 0 0 0 2px rgb(255 255 255 / .7)}
.pal__note{flex-basis:100%;font-size:.85rem;color:var(--muted);margin:.2rem 0 0}
.js .f-front img{transition:opacity .35s ease}
.js .f-front.is-swapping img{opacity:.15}
.parallax-scene{position:relative}
.parallax-layer{will-change:transform}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .parallax-layer{animation:parallaxRise linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes parallaxRise{from{transform:translateY(calc(var(--depth,.2) * 18vh))}to{transform:translateY(calc(var(--depth,.2) * -18vh))}}
  }
}
@media (prefers-reduced-motion:reduce){.parallax-layer{animation:none!important;transform:none!important}}

/* specialty grid (r3 2026-10-23, designer M2: no box, no colored bar). It rhymes with the hero index: the screenshot on the paper,
   a hairline, the name in the display face, the line in ink, the count as an italic oldstyle numeral in the specialty ink. Hover or
   focus lifts the screenshot 4 px and draws a line under the name in the specialty's mid color. */
.spec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem 1.6rem;margin-top:2.25rem}
.spec{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--navy)}
.spec:hover{color:var(--navy)}
.spec__img{aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:var(--c-bg);box-shadow:var(--shadow);transition:transform .45s var(--spring),box-shadow .3s ease}
.spec__img picture{display:contents}
.spec__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.spec:hover .spec__img,.spec:focus-visible .spec__img{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.spec__body{margin-top:1rem;padding-top:.85rem;border-top:1px solid rgb(27 42 78 / .2)}
.spec__body h3{margin:0 0 .35rem;font-size:1.5rem;line-height:1.15}
.spec__body h3 span{padding-bottom:.08em;background:linear-gradient(var(--c-mid),var(--c-mid)) 0 100%/0 2px no-repeat;transition:background-size .45s cubic-bezier(.16,1,.3,1)}
.spec:hover h3 span,.spec:focus-visible h3 span{background-size:100% 2px}
.spec__body p{margin:0;font-size:1rem;color:var(--navy)}
.spec__go{display:block;margin-top:.55rem;font:italic 500 1.08rem/1.2 var(--f-display);color:var(--c-ink)}
.spec__go i{font-variant-numeric:oldstyle-nums}
.c-teal{--c-bg:var(--teal-bg);--c-mid:var(--teal-mid);--c-ink:var(--teal)}
.c-sky{--c-bg:var(--sky-bg);--c-mid:var(--sky-mid);--c-ink:var(--sky)}
.c-coral{--c-bg:var(--coral-bg);--c-mid:var(--coral-mid);--c-ink:var(--coral)}
.c-lilac{--c-bg:var(--lilac-bg);--c-mid:var(--lilac-mid);--c-ink:var(--lilac)}
.c-sun{--c-bg:var(--sun-bg);--c-mid:var(--sun-mid);--c-ink:var(--sun)}
.c-rose{--c-bg:var(--rose-bg);--c-mid:var(--rose-mid);--c-ink:var(--rose)}
.c-sage{--c-bg:var(--sage-bg);--c-mid:var(--sage-mid);--c-ink:var(--sage)}
.c-indigo{--c-bg:var(--indigo-bg);--c-mid:var(--indigo-mid);--c-ink:var(--indigo)}
@media (max-width:1020px){.spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones (r3 P5): the phone screenshot of each look beside the words, cropped at the top, so no headline is cut mid word */
@media (max-width:520px){.spec-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem}.spec{flex-direction:row;align-items:flex-start;gap:1rem}.spec__img{flex:0 0 31%;aspect-ratio:430/620;border-radius:10px}.spec__body{flex:1;margin-top:0;padding-top:.55rem}.spec__body h3{font-size:1.3rem}.spec__body p{font-size:.95rem;line-height:1.45}.spec__go{font-size:1rem}}

/* sticky feature switcher (scroll-driven-sticky-feature-image-switcher) */
.features-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0 4rem;align-items:start;margin-top:1rem}
.features-sticky{position:sticky;top:12vh;height:72vh;max-height:620px;display:flex;align-items:center;justify-content:center}
.features-sticky .feature-img{position:absolute;inset:0;margin:auto;height:max-content;max-height:100%}
.feature-img{opacity:1}
/* round 3: the panel text is never faded (axe measured a half-faded panel mid-swap). A panel that leaves is hidden at once; the one
   that arrives slides up while a veil in the band's own tint fades off it, which reads like the old crossfade. */
.js .features-sticky .feature-img{visibility:hidden;transform:translateY(14px) scale(.98);transition:transform .6s var(--ease)}
.js .features-sticky .feature-img.active{visibility:visible;transform:none}
.js .features-sticky .feature-img::after{content:"";position:absolute;inset:-2px;border-radius:var(--r);background:var(--sky-bg);opacity:1;pointer-events:none;transition:opacity .45s var(--ease)}
.js .features-sticky .feature-img.active::after{opacity:0}
.features-text{padding:0 0 4vh}
.feature-row{min-height:36vh;display:flex;flex-direction:column;justify-content:center;padding:1.5rem 0}
.feature-row:first-child{justify-content:flex-start;padding-top:2.5rem}
.feature-row h3{font-size:clamp(1.35rem,1.6vw + .8rem,1.9rem);margin-bottom:.6rem}
.feature-row p{color:var(--muted);max-width:46ch}
.feature-row .num{font:600 .8rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink,var(--teal));margin-bottom:.8rem}
.feature-img-inline{display:none}
@media (max-width:860px){
  .features-section{grid-template-columns:minmax(0,1fr)}
  .features-sticky{display:none}
  .feature-row{min-height:0;padding:1.5rem 0}
  .feature-row .feature-img-inline{display:block;margin:0 0 1.25rem}
}
@media (prefers-reduced-motion:reduce){.js .features-sticky .feature-img{transition:none}}

/* panels used as feature images */
.panel{width:100%;border-radius:var(--r);background:rgb(255 255 255 / .74);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border:1px solid rgb(255 255 255 / .9);box-shadow:var(--shadow-lg);overflow:hidden}
/* r3 W6: small caps on the panel itself over a hairline, no tinted band */
.panel__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 1.2rem;padding:.85rem 0 .6rem;border-bottom:1px solid rgb(27 42 78 / .18);font:600 .8rem/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.panel__head span:last-child{white-space:nowrap;color:var(--muted)}
@media (max-width:760px){.panel__head{font-size:.875rem}}
.panel__body{padding:1.1rem 1.2rem 1.25rem}
.code{margin:0;font:500 .8rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--navy);white-space:pre-wrap;word-break:break-word}
.code .k{color:var(--lilac)}.code .s{color:var(--teal)}.code .c{color:#5d6576}
.bars{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.bars li{display:grid;grid-template-columns:8.5rem 1fr 4.5rem;gap:.7rem;align-items:center;font-size:.88rem}
.bars .bar{height:14px;border-radius:999px;background:var(--cream);overflow:hidden}
.bars .bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c-mid,var(--teal-mid))}
.bars b{text-align:right;font-weight:600}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.swatches figure{margin:0}
.swatches img{border-radius:10px;border:1px solid var(--line)}
.swatches figcaption{font-size:.8rem;color:var(--muted);margin-top:.25rem;text-align:center}
/* r3 W6: plain rows on hairlines, no check discs. In the weight panel the absent things are crossed out by a coral line that
   draws across each word when the panel scrolls in (site.js adds .in); the spoken text says "No page builder". */
.deed{display:grid;gap:0;margin:0;padding:0;list-style:none}
.deed li{padding:.65rem 0;border-top:1px solid rgb(27 42 78 / .14);font-size:1rem}
.deed li:first-child{border-top:0;padding-top:.2rem}
.strike{position:relative;display:inline-block;font:500 1.2rem/1.2 var(--f-display);color:var(--navy)}
.strike::after{content:"";position:absolute;left:-3%;right:-3%;top:56%;height:2px;border-radius:2px;background:var(--coral-line);transform-origin:left center;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.deed--x li:nth-child(2) .strike::after{transition-delay:.12s}
.deed--x li{font:500 1.2rem/1.2 var(--f-display);color:var(--navy)}  /* seo-a11y 2026-10-23 (designer audit4 item 6) */
.js .deed--x:not(.in) .strike::after{transform:scaleX(0)}

/* steps, vertical timeline (round 2, designer M2): one line runs down through four large numerals and draws with scroll.
   site.js sets --s (0 to 1) on each step for the segment to the next numeral, adds .is-lit as the line reaches a numeral, and adds
   .scrub-on to the wrapper; without that class (no JS, reduced motion) the line is drawn and every numeral is lit. */
.steps-wrap{position:relative;margin-top:2.5rem;--nw:5.25rem;--gap:2.6rem}
.steps-wrap--head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:2rem clamp(2rem,6vw,6rem);align-items:start;margin-top:0}
.steps-head{position:sticky;top:clamp(6rem,20vh,11rem)}
.steps-head h2{font-size:clamp(2rem,2.6vw + 1rem,3.15rem);max-width:14ch}
.steps-head .lede{margin-bottom:1rem}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);max-width:40rem}
.steps-wrap:not(.steps-wrap--head) .tl{margin-inline:auto}
.tl__step{position:relative;display:grid;grid-template-columns:var(--nw) minmax(0,1fr);gap:1.5rem}
.tl__step:not(:last-child)::before,.tl__step:not(:last-child)::after{content:"";position:absolute;z-index:0;left:calc(var(--nw) / 2 - 1.5px);top:calc(var(--nw) / 2);width:3px;height:calc(100% + var(--gap));border-radius:3px;pointer-events:none}
.tl__step::before{background:rgb(27 42 78 / .13)}
.tl__step::after{background:linear-gradient(var(--c-mid),var(--nx,var(--c-mid)));transform-origin:top center}
.tl__n{position:relative;z-index:1;display:grid;place-items:center;width:var(--nw);height:var(--nw);border-radius:50%;background:var(--white);border:3px solid var(--c-mid);
  font:500 calc(var(--nw) * .54)/1 var(--f-display);font-variation-settings:"opsz" 144;letter-spacing:-.04em;color:var(--c-ink);padding-right:.06em;
  box-shadow:0 0 0 6px var(--c-bg),0 14px 28px -16px rgb(27 42 78 / .45)}
.tl__body{padding-top:calc(var(--nw) / 2 - 1rem)}
.tl__body h3{font-size:clamp(1.3rem,.9vw + 1rem,1.65rem);margin-bottom:.35rem}
.tl__body p{color:var(--muted);margin:0;max-width:44ch}
.scrub-on .tl__step::after{transform:scaleY(var(--s,0))}
.scrub-on .tl__n{transition:border-color .45s ease,color .45s ease,box-shadow .45s ease,transform .5s var(--spring)}
.scrub-on .tl__step:not(.is-lit) .tl__n{border-color:rgb(27 42 78 / .16);color:rgb(27 42 78 / .32);box-shadow:0 0 0 6px transparent;transform:scale(.9)}
@media (max-width:900px){.steps-wrap--head{grid-template-columns:minmax(0,1fr)}.steps-head{position:static}}
@media (max-width:520px){.steps-wrap{--nw:3.9rem;--gap:2rem}.tl__step{gap:1.1rem}.tl__body{padding-top:calc(var(--nw) / 2 - .85rem)}}

/* AI SEO block */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.method{font:italic 500 clamp(1.2rem,.8vw + 1rem,1.5rem)/1.35 var(--f-display);color:var(--navy);margin:2rem 0 1.25rem;max-width:30ch}  /* r3 W7: a method line, not a self-quote */
.method::before{content:"";display:block;width:32px;height:2px;margin-bottom:.85rem;border-radius:2px;background:var(--coral-line)}  /* seo-a11y 2026-10-23 (designer audit4 item 7): reads as a note, not a second heading */
.terms{display:grid;gap:.8rem;margin:1.25rem 0 0;padding:0;list-style:none}
.terms{gap:0}.terms li{padding:.85rem 0;border-top:1px solid rgb(27 42 78 / .14)}.terms li:first-child{border-top:0}  /* plain ruled list (owner 2026-10-22: side-bar cards read as AI template) */
.terms b{font-family:var(--f-display);font-size:1.1rem;margin-right:.35rem}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;margin:1.5rem 0 0;padding:0;list-style:none}
.checklist li{display:flex;gap:.65rem;align-items:flex-start}
.checklist li::before{content:"";flex:0 0 22px;height:22px;margin-top:.15rem;border-radius:50%;background:var(--c-mid,var(--teal-mid)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:640px){.checklist{grid-template-columns:minmax(0,1fr)}}

/* questions-to-ask table */
.ask{width:100%;border-collapse:separate;border-spacing:0;margin-top:2rem;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);font-size:.98rem}
.ask th,.ask td{padding:1rem 1.15rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ask thead th{background:var(--navy);color:#fff;font-weight:600}
.ask tbody tr:last-child td,.ask tbody tr:last-child th{border-bottom:0}
.ask tbody th{font-weight:600;width:42%}
.ask td{color:var(--muted)}
@media (max-width:700px){.ask thead{display:none}.ask tr{display:block;border-bottom:1px solid var(--line)}.ask th,.ask td{display:block;border:0;width:auto!important}.ask tbody th{padding-bottom:.2rem}.ask td{padding-top:0}}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2rem}
.price{position:relative;background:var(--white);border-radius:var(--r);padding:1.6rem 1.4rem 1.5rem;border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:0 1px 0 rgb(27 42 78 / .05)}
.price--feature{border:2px solid var(--c-mid);box-shadow:var(--shadow)}
.price h3{margin-bottom:.15rem}
.price__amt{font:650 clamp(2rem,2vw + 1rem,2.6rem)/1 var(--f-display);margin:.6rem 0 .2rem;color:var(--navy)}
.price__amt small{font:500 1rem/1 var(--f-body);color:var(--muted)}
.price__sub{font-size:.92rem;color:var(--muted);margin-bottom:1rem}
.price ul{margin:0 0 1.25rem;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.95rem}
.price li{padding-left:1.4rem;position:relative}
.price li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--c-mid,var(--teal-mid))}
.price .btn{margin-top:auto}
.tag{position:absolute;top:-12px;left:1.2rem;background:var(--c-ink,var(--teal));color:#fff;border-radius:999px;font:600 .75rem/1 var(--f-body);padding:.45rem .7rem}
.build-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem 3rem;background:var(--white);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow);border:1px solid var(--line);margin-top:2rem;align-items:center}
@media (max-width:900px){.price-grid,.build-card{grid-template-columns:minmax(0,1fr)}}
.fine{font-size:1rem;color:var(--navy)}  /* r3 W8: no small gray footnotes */

/* FAQ */
/* FAQ (owner 2026-10-22: solid white on mint was too much contrast): frosted cards over a soft aurora that sits behind the list only,
   so the section seams stay the flat wash the seam gate needs. Flat frosted fill on the cards: a gradient fill made the
   overlay gate sample the hidden answers of closed items (false fail, 2026-10-22) */
.faq-list{max-width:820px;margin:2rem auto 0;display:grid;gap:.7rem;position:relative;isolation:isolate}
.faq-list::before{content:"";position:absolute;inset:0 -6% -14%;  /* r3 engineer 12: no overhang onto the heading */
  z-index:-1;pointer-events:none;filter:blur(36px);
  background:radial-gradient(38% 60% at 14% 28%,rgb(91 155 240 / .3),transparent 70%),radial-gradient(34% 58% at 84% 18%,rgb(165 133 230 / .3),transparent 70%),radial-gradient(46% 62% at 58% 92%,rgb(43 179 154 / .34),transparent 72%)}
.faq-list details{background:rgb(255 255 255 / .7);border:1px solid rgb(255 255 255 / .8);border-radius:var(--r-sm);padding:0 1.15rem;-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);box-shadow:0 12px 30px -24px rgb(11 95 80 / .55)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.05rem 0;font:600 1.08rem/1.35 var(--f-body);color:var(--navy);min-height:48px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:0 0 26px;height:26px;border-radius:50%;background:var(--teal-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%230b6e5a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .35s var(--spring)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details>div{padding:0 0 1.1rem;color:var(--navy)}
.faq-list details>div p:last-child{margin:0}

/* final CTA band */
.cta-sec{color:#fff}.cta-sec h2{color:#fff}.cta-sec .lede{color:#e3f3ee}
.cta-band{padding:clamp(.5rem,2vw,1.5rem) 0 0;display:grid;grid-template-columns:120px minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:center}
.cta-band__phone{width:120px;border-radius:18px;border:4px solid #fff;box-shadow:0 20px 40px -16px rgb(0 0 0 / .5);rotate:-4deg}
.btn--light{background:transparent;color:#fff;border-color:#fff}
.btn--light:hover{background:#fff;color:var(--deep);transform:translateY(-2px)}
.cta-sec .btn--cta{box-shadow:0 10px 24px -10px rgb(0 0 0 / .45)}
.cta-band h2{margin-bottom:.4rem}
.cta-band .btn-row{justify-content:flex-end}
@media (max-width:860px){.cta-band{grid-template-columns:minmax(0,1fr)}.cta-band .btn-row{justify-content:flex-start}.cta-band__phone{display:none}}

/* page hero (inner pages) */
.phero{position:relative;isolation:isolate;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2.5rem,4vw,3.5rem);overflow:hidden;--aur-top:var(--paper);--aur-bot:var(--paper);--aur-k:.8}
.phero .lede{margin-bottom:1.4rem}
.crumbs{font-size:.95rem;margin-bottom:1.1rem;color:var(--navy)}
.crumbs a{color:var(--navy)}
/* MKT-22: the breadcrumb is a nav list; the slash is drawn by CSS and has no spoken text */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .45rem;list-style:none;margin:0;padding:0}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";content:"/" / "";margin-right:.45rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--c-bg,var(--teal-bg));color:var(--c-ink,var(--teal));border-radius:999px;font:600 .82rem/1 var(--f-body);padding:.5rem .8rem;margin-bottom:1rem}

/* looks grid on specialty pages */
.plan{margin-top:2.75rem}
.plan__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.75rem 2rem;margin-bottom:1.1rem}
.plan__head h3{font-size:clamp(1.35rem,1vw + 1rem,1.75rem);margin:0}
.plan__pages{font-size:1rem;color:var(--navy);margin:.35rem 0 0;max-width:70ch}
.looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
/* seo-a11y 2026-10-23 (designer audit4 item 2, owner: no white cards on a colored band): no fill and no box. The shot carries the
   radius and shadow, a hairline runs under it, and the name and links sit on the band, as in the home spec grid. */
.look{display:flex;flex-direction:column}
.look__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--c-bg,var(--cream));border-radius:12px;box-shadow:var(--shadow);transition:transform .45s var(--spring),box-shadow .3s ease}
.look:hover .look__img{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.look__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.look:hover .look__img img{transform:scale(1.03)}
.look__body{margin-top:1rem;padding-top:.85rem;border-top:1px solid rgb(27 42 78 / .2);display:flex;flex-direction:column;gap:.45rem}
.look__body h4{margin:0;font:600 1.4rem/1.15 var(--f-display);color:var(--navy)}
.look__pal{margin:0;font-size:1rem;line-height:1.5;color:var(--navy)}  /* each palette name in its accent, darkened in build.mjs to 5:1 on the band tint (seo-a11y 2026-10-23, item 5) */
.look__links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:1rem;font-weight:600}
/* r3 P8, idea 2: on phones each plan's looks sit in a swipe rail, one card and a bit of the next, with an italic counter */
.rail__count{display:none}
@media (max-width:700px){
  .rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82vw,24rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:.85rem;margin-inline:-1.25rem;padding:.25rem 1.25rem .75rem;scroll-padding-inline:1.25rem;scrollbar-width:thin}
  .rail>.look{scroll-snap-align:start;animation:none}
  .rail__count:not([hidden]){display:block;margin:.4rem 0 0;text-align:center;font:italic 500 1.08rem/1 var(--f-display);font-variant-numeric:oldstyle-nums;color:var(--navy)}
}

/* prose pages */
.prose{max-width:760px}
.prose h2{margin-top:2.2rem;font-size:clamp(1.45rem,1.4vw + .9rem,2rem)}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
/* feature grid as an editorial list (owner 2026-10-22: boxed cards with colored top bars read as AI template): a hairline over each item, no box */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 2.6rem;margin-top:2.2rem}
.card{border-top:1px solid rgb(27 42 78 / .22);padding:1.1rem 0 0}
.card h3{margin-bottom:.45rem}
.card p{color:var(--ink);font-size:1rem;margin:0}
@media (max-width:900px){.cards{grid-template-columns:minmax(0,1fr)}}
.photo-founder{border-radius:var(--r);box-shadow:var(--shadow-lg)}

/* form */
.form-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.form-wrap{grid-template-columns:minmax(0,1fr)}}
/* seo-a11y 2026-10-23 (designer audit4 item 2): frosted glass over a soft aurora behind the form (as the FAQ list), inputs on white */
.form{position:relative;background:rgb(255 255 255 / .72);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-radius:var(--r);padding:clamp(1.25rem,3vw,2rem);box-shadow:0 24px 50px -30px rgb(169 61 37 / .55);border:1px solid rgb(255 255 255 / .9)}
.form-wrap{position:relative;isolation:isolate}
.form-wrap::before{content:"";position:absolute;inset:-2% 30% 10% -4%;z-index:-1;pointer-events:none;filter:blur(40px);
  background:radial-gradient(40% 46% at 18% 20%,rgb(240 122 85 / .38),transparent 70%),radial-gradient(38% 44% at 86% 40%,rgb(165 133 230 / .34),transparent 70%),radial-gradient(46% 50% at 40% 88%,rgb(242 193 78 / .36),transparent 72%)}
@media (max-width:900px){.form-wrap::before{inset:-1% -4% 40% -4%}}
.form fieldset{border:0;margin:0 0 1.2rem;padding:0}
.form legend{font:650 1.15rem/1.3 var(--f-display);margin-bottom:.7rem}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem 1rem}
.fgrid .full{grid-column:1/-1}
@media (max-width:600px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.field label{display:block;font:600 .9rem/1.3 var(--f-body);margin-bottom:.35rem}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.7rem .85rem;border:1.5px solid #7c7565;border-radius:12px;background:var(--white);font:400 1rem/1.4 var(--f-body);color:var(--navy)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:600px){.choice{grid-template-columns:minmax(0,1fr)}}
.choice label{display:flex;gap:.6rem;align-items:flex-start;border:1.5px solid #7c7565;border-radius:14px;padding:.8rem .85rem;cursor:pointer;background:var(--white);font-size:.95rem;line-height:1.35}
.choice input{margin-top:.2rem;accent-color:var(--teal);width:18px;height:18px;flex:0 0 18px}
.choice label:has(input:checked){border-color:var(--teal);background:var(--teal-bg)}
.choice b{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.privacy-note{font-size:.95rem;color:var(--muted);margin:1rem 0}
.field__hint{margin:.35rem 0 0;font-size:.95rem;color:var(--muted)}
/* r3 P3, idea 4: the form comes first; beside it, the phone that shows the typed practice name, or the letter on /check/ */
.form-aside{align-self:stretch}
.try{position:sticky;top:6.5rem;margin-top:2.5rem;display:flex;flex-direction:column;align-items:center}
.try .phone-solo{width:min(220px,58vw);container-type:inline-size}
.try__name{position:absolute;left:3.6%;top:6.4%;width:63%;height:7.3%;display:flex;align-items:center;background:#fff;color:#173a5b;font:700 4.3cqw/1.1 var(--f-body);letter-spacing:-.01em;overflow:hidden}
.try__label{display:none;margin:1.1rem 0 0;max-width:16rem;text-align:center}
.js .try__label{display:block}
.try__k{display:block;font:600 .8rem/1.2 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--coral)}
.try__hint{display:block;margin-top:.25rem;font-size:.95rem;color:var(--navy)}
.try.has-name .try__hint{display:none}
@media (max-width:900px){.try{position:static}}
.form-msg{border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem;font-weight:500}
.form-msg--err{background:var(--coral-bg);color:var(--coral)}
.aside-list{display:grid;margin:0;padding:0;list-style:none}
.aside-list li{padding:.95rem 0;border-top:1px solid rgb(27 42 78 / .14)}.aside-list li:first-child{border-top:0;padding-top:.3rem}  /* plain ruled list (owner 2026-10-22: side-bar cards read as AI template) */

/* footer */
.site-footer{position:relative;isolation:isolate;padding:calc(var(--seam) * .7) 0 2rem;background:var(--cream);--aur-top:var(--paper);--aur-bot:var(--cream);--aur-k:.55;font-size:.95rem}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.foot h2{font:600 .875rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0 0 .9rem}
.foot>div:nth-child(3) h2{color:var(--coral)}.foot>div:nth-child(4) h2{color:var(--lilac)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.foot a{color:var(--navy);text-decoration:none;display:inline-block;padding:.35rem 0}
.foot a:hover{text-decoration:underline}
.foot p{color:var(--muted);max-width:40ch}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.foot__base a{color:var(--muted)}
@media (max-width:900px){.foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 1rem}.foot>div:first-child{grid-column:1/-1}}

/* reveal (CSS scroll-driven, no JS) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes rv{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
  .hero__copy>*{animation:rise .9s var(--ease) both}
  .hero__copy>*:nth-child(2){animation-delay:.08s}.hero__copy>*:nth-child(3){animation-delay:.16s}.hero__copy>*:nth-child(4){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* plan page list toggle marker */
.pagelist summary{list-style:none;gap:.6rem}
.pagelist summary::-webkit-details-marker{display:none}
.pagelist summary::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%231b2a4e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid var(--line);transition:transform .3s var(--spring)}
.pagelist[open] summary::before{transform:rotate(45deg)}
/* FAQ in two columns on wide screens */
@media (min-width:1000px){.faq-list{max-width:none;grid-template-columns:1fr 1fr;align-items:start}}
/* inner hero aside */
.phero__split{align-items:center}
.phero__aside{display:flex;flex-direction:column;align-items:center}
.phone-solo{width:min(240px,60vw);border-radius:28px;border:6px solid var(--bezel);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--white)}
.founder{margin:0;text-align:center}
.founder img{width:min(320px,70vw);border-radius:50%;border:6px solid var(--white);box-shadow:var(--shadow-lg)}
.founder figcaption{margin-top:.75rem;font-weight:600}
.sum{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sum li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line);padding-bottom:.5rem}
.sum li:last-child{border:0;padding:0}
.sum b{font-family:var(--f-display);font-size:1.15rem}
.phero__aside .panel{max-width:460px}
@media (max-width:900px){.phero__aside{margin-top:1.5rem}}
/* full-bleed marquee of every look */
.mq .lede{margin-bottom:2rem}
.mq__wall{display:grid;gap:14px;overflow:hidden;padding:6px 0}
.mq__track{display:flex;gap:14px;width:max-content}
.mq__track img{width:300px;height:188px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line);box-shadow:0 8px 20px -14px rgb(27 42 78 / .45);background:var(--cream)}
@media (prefers-reduced-motion:no-preference){
  .mq--l .mq__track{animation:mqL 90s linear infinite}
  .mq--r .mq__track{animation:mqR 90s linear infinite}
  .mq__wall:hover .mq__track,.mq__wall:focus-within .mq__track,.mq__wall.mq--paused .mq__track{animation-play-state:paused}  /* MKT-13: hover, keyboard focus or the pause button */
  @keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
}
@media (prefers-reduced-motion:reduce){.mq__wall{overflow-x:auto}.mq__track img[aria-hidden="true"]{display:none}}
@media (max-width:760px){.mq__track img{width:200px;height:125px}}
/* mobile quick-action bar */
.mbar{display:none}
@media (max-width:760px){
  /* r3 M1: one cream glass strip (the header's own backdrop); "Live samples" is navy text with the logo plus, the only saturated
     color is the coral pill. site.js hides it over the hero, the closing band, the footer and the form. */
  html{scroll-padding-bottom:88px}  /* MKT-1: a focused element is scrolled clear of the phone bar */
  .mbar{display:flex;align-items:center;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));background:rgb(255 253 248 / .86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-top:1px solid var(--line)}
  .mbar__samples{flex:1;display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:0 .35rem;font:600 1rem/1 var(--f-body);color:var(--navy);text-decoration:none}
  .mbar__plus{flex:none}
  .mbar .btn{flex:0 0 auto;min-width:46%;min-height:46px;padding:.6rem .9rem;font-size:.95rem}
  body{padding-bottom:72px}
  .btn-row .btn{flex:1 1 100%}
}

/* tap targets at least 44px on links in running text blocks (a11y audit) */
.foot a{padding:.6rem 0;min-height:44px}
.textlink{display:inline-flex;align-items:center;min-height:44px}
.look__links a,.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.brand{min-height:44px}
/* reduced motion: stop every transition and animation (a11y audit) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

.cta-sec{padding-bottom:clamp(2rem,4vw,3rem)}

/* CTA seam: plain linear wash into the deep band (eased aurora base read as a grey trough to the seam gate) */
.cta-sec>.aur,.seam-plain>.aur{background:linear-gradient(180deg,var(--aur-top),var(--aur-bot))!important}

.price .price__go{margin-top:auto;align-self:flex-start}
.tilt-card{transform-style:preserve-3d;will-change:transform}

/* council re-verify polish */
.feature-row:last-child{min-height:0;padding-bottom:0}
.foot--deep{padding-top:calc(var(--seam) * .7 + 2rem)}
@media (max-width:760px){
  .hide-sm{display:none!important}
  .build-card ul{display:none}
  .price{padding:1.2rem 1.1rem}
  .price__sub{display:none}
  .price ul{margin-bottom:.6rem}
  .mbar{transform:translateY(110%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s}
  .mbar.is-on{transform:none;visibility:visible;transition:transform .35s var(--ease)}
  .mbar.is-on.is-away{transform:translateY(110%);visibility:hidden;transition:transform .2s var(--ease),visibility 0s linear .2s}  /* MKT-1: a focused element taller than the free space */
}
@media (max-width:760px){
  .foot__specs{display:none}
  .price-grid--short .price ul{display:none}
  .price-grid--short{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .price-grid--short .price{padding:1rem .7rem;text-align:center}
  .price-grid--short .price h3{font-size:1rem}
  .price-grid--short .price__amt{font-size:1.45rem}
  .price-grid--short .price__amt small{display:block;font-size:.8rem}
  .price-grid--short .price .btn{display:none}
  .price-grid--short .tag{font-size:.65rem;left:.4rem;right:.4rem;text-align:center}
}
@media (max-width:760px){.price-grid--short .tag{display:none}}

/* hero--film (2026-10-22): office photo, centered copy, phone band. Effects: layered-ken-burns-zoom-load-hero,
   hero-text-line-mask-slide-up-entrance-overflow-hidden, hand-drawn underline (svg line draw), phone settle. */
.hero--film{--hero-h:clamp(520px,70svh,680px);padding:0;overflow:hidden;background:var(--paper)}
.hero__media{position:absolute;inset:0 0 auto 0;height:var(--hero-h);overflow:hidden;z-index:-1;--fade:linear-gradient(#000 50%,rgb(0 0 0 / .8) 64%,rgb(0 0 0 / .5) 76%,rgb(0 0 0 / .24) 86%,rgb(0 0 0 / .07) 94%,transparent);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform-origin:50% 60%}
.hero__media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 50% 46%,rgb(253 251 246 / .88),rgb(253 251 246 / .66) 45%,rgb(253 251 246 / .1) 78%,transparent 92%)}
.hero__center{min-height:var(--hero-h);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(8rem,13vw,10rem)}
.hero--film h1{max-width:none;margin-inline:auto;margin-bottom:.4em}
.hero--film .ln{display:block;padding-bottom:.28em;margin-bottom:-.2em}
.hero--film .ln>span{display:inline-block}
.hero--film em.ul{position:relative;font-style:italic;color:var(--teal);white-space:nowrap;margin-right:.1em}
.hero--film em.ul svg{position:absolute;left:-3%;bottom:-.16em;width:106%;height:.3em;overflow:visible;fill:none;stroke:var(--coral-line);stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hero__center .lede{max-width:40rem;margin-inline:auto;color:var(--ink);text-wrap:balance}
.hero__center .btn-row{justify-content:center}
.hero__band{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:center;margin-top:calc(-1 * clamp(7rem,12vw,9rem));padding-bottom:clamp(2.5rem,5vw,4rem);position:relative}
.hero__phone{width:clamp(210px,18vw,250px);margin:0;border-radius:34px;border:8px solid var(--bezel);background:var(--bezel);box-shadow:0 34px 70px -24px rgb(20 24 32 / .45);overflow:hidden}
.hero__phone-link{display:block;border-radius:26px}
.hero__phone-link:focus-visible{outline:3px solid #fff;outline-offset:-4px;box-shadow:inset 0 0 0 7px var(--teal)}
.hero__phone img{display:block;width:100%;height:auto;border-radius:26px;transition:opacity .18s}
.hero__phone.is-swapping img{opacity:.35}
.hero__side{padding-top:.75rem;align-self:start}
/* specialty list (owner 2026-10-22 night, second pass: the pills read as AI template chips): an editorial index. Display-face
   names, a hairline rule under each row, the live-sample count in small italic in the specialty's ink (the only color). */
.hero__side--l{justify-self:end;min-width:15rem}
.hero__k{font:600 .8rem/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin:0 0 .35rem}
/* r3 M6: a label row over the index, "Built for" left and "live samples" right (one per column at 1200 px and up) */
.hero__khead{display:grid;column-gap:2rem}
.hero__khead .hero__k{display:flex;justify-content:space-between;gap:1rem;white-space:nowrap}
.hero__khead .hero__k--2{display:none}
@media (min-width:1200px){.hero__khead{grid-template-columns:repeat(2,minmax(11.5rem,1fr))}.hero__khead .hero__k--2{display:flex}.hero__khead .hero__k{letter-spacing:.045em;gap:.5rem}}  /* two columns, each with "Built for" left and "live samples" right (seo-a11y 2026-10-23, item 8) */
.hero__specs{list-style:none;margin:0;padding:0;display:grid;column-gap:2rem}
@media (min-width:1200px){.hero__specs{grid-template-columns:repeat(2,minmax(11.5rem,1fr))}}  /* all 8 above the fold, level with the right column */
.hero__specs a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;min-height:44px;padding:.5rem 0 .3rem;border-bottom:1px solid rgb(27 42 78 / .16);font:500 1.28rem/1.15 var(--f-display);font-variation-settings:"opsz" 144;letter-spacing:-.01em;color:var(--navy);text-decoration:none}
.hero__specs a>span{background:linear-gradient(var(--coral-line),var(--coral-line)) 0 100%/0 2px no-repeat;transition:background-size .35s cubic-bezier(.16,1,.3,1)}
.hero__specs small{font:italic 500 1rem/1 var(--f-display);color:color-mix(in srgb,var(--c-ink) 78%,#000);font-variant-numeric:oldstyle-nums}  /* MKT-15: 5.4:1 or more over the photo */
.hero__specs a:hover>span,.hero__specs a:focus-visible>span{background-size:100% 2px}
.hero__specs a:hover{border-bottom-color:var(--c-mid)}
/* AI SEO "shift" (owner 2026-10-22: no heading, no attribution, the hlwebsite effect): four lines in the display face. Desktop with
   motion: the section pins and the lines replace one another with scroll (site.js adds .shift-on). Otherwise they stack. */
.shift__lines{display:grid;gap:.15em;padding-block:clamp(1rem,3vw,2rem);font:500 clamp(2rem,4.4vw,3.8rem)/1.1 var(--f-display);font-variation-settings:"opsz" 144;letter-spacing:-.02em;color:var(--navy)}
.shift__line{margin:0;text-wrap:balance}
.shift__line--last{font-style:italic;color:var(--lilac)}
.shift__terms{margin-top:clamp(1.5rem,4vw,3rem)}
.terms--row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem}
.terms--row li,.terms--row li:first-child{border-top:1px solid rgb(27 42 78 / .14)}
.terms--row b{display:block;margin-bottom:.2rem}
@media (max-width:760px){.terms--row{grid-template-columns:minmax(0,1fr)}}
/* r3 M5: the stage sticks at the middle of the screen at its own height (site.js sets --st-top), so no blank screen is left after
   the last line; the diagram appears under "Be the source." inside the stage and its arrows draw. */
.shift-on .shift__pin{height:260vh}
.shift-on .shift__stage{position:sticky;top:var(--st-top,18vh);display:grid;align-content:center;gap:clamp(.5rem,2vw,1.5rem)}
.shift__flow{margin-top:clamp(1rem,3vw,2rem)}
.shift-on .shift__flow{margin-top:0}
.shift-on .flow{margin-inline:auto;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.shift-on .flow.in{opacity:1;transform:none}
/* the diagram (r3 M5, P4): three nodes joined by arrows; a column with down arrows on phones; arrows draw when it is in view */
.flow{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.4rem;max-width:46rem}
/* seo-a11y 2026-10-23 (designer audit4 item 10): no pills. Each node is a display-face line on a hairline, its quote under it in
   the specialty ink, like the ruled terms list below; the drawn arrows join the lines. */
.flow__node{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.3rem;padding:.75rem .25rem 0;border-top:1px solid rgb(27 42 78 / .28);text-align:center}
.flow__node b{font:600 1.35rem/1.15 var(--f-display);font-variation-settings:"opsz" 72;color:var(--navy)}
.flow__node span{font:italic 500 1.08rem/1.3 var(--f-display);color:var(--c-ink)}
.flow__arrow{flex:0 0 56px;display:flex;align-items:center;justify-content:center}
.flow__arrow svg{width:56px;height:16px;overflow:visible;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow__arrow path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1) .3s}
.flow__arrow:nth-child(4) path{transition-delay:.75s}
.js .flow:not(.in) .flow__arrow path{stroke-dashoffset:1}
.flow__arrow{align-self:flex-start;margin-top:1.15rem}
@media (max-width:600px){.shift .flow{max-width:17rem;margin-inline:auto}.shift__terms{margin-top:3rem}}  /* phones: the diagram is a narrow centered column, apart from the full-width terms list */
@media (max-width:600px){.flow{flex-direction:column;align-items:stretch;max-width:22rem;gap:0}.flow__node{flex:none}.flow__arrow{flex:none;height:44px;align-self:center;margin-top:.5rem}.flow__arrow svg{transform:rotate(90deg);width:40px}}
.shift-on .shift__lines{grid-template-areas:"l";text-align:center;font-size:clamp(2.6rem,5.6vw,5rem)}
.shift-on .shift__line{grid-area:l;opacity:0;transform:translateY(.35em);filter:blur(8px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),filter .6s ease}
.shift-on .shift__line.is-on{opacity:1;transform:none;filter:none}
/* scroll waits for the hero sequence to reach the phone band (owner 2026-10-22 night); site.js sets and clears it */
/* the template line name (owner 2026-10-22 night): italic display face in lilac, near the logo's C and D */
.cdn{font:italic 600 1.08em/1 var(--f-display);color:var(--lilac);letter-spacing:-.01em}
.btn .cdn{color:inherit}
html.seq-lock{overflow:hidden;scrollbar-gutter:stable}
.hero--film .pal{margin:0;gap:.35rem}
.hero--film .pal__label{font:600 .95rem/1.2 var(--f-body);color:var(--muted);margin-bottom:.35rem}
.hero--film .pal button{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:0}
.hero--film .pal button span{width:26px;height:26px}
.hero__side--r .fine{margin-top:.5rem;max-width:20rem}
.hero__open{margin:.6rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
.hero__side--r .hero__open{justify-content:flex-start}
.hero__look{margin:0 0 .7rem;line-height:1.25}
.hero__look b{display:block;font:600 1.45rem/1.15 var(--f-display);color:var(--navy)}
.hero__look span{display:block;font-size:.95rem;color:var(--navy)}  /* MKT-15 */
/* r3 M4: "Show another design" is a text button like .textlink; the logo plus is its icon and turns a quarter on each press */
.pick{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0;border:0;background:none;color:var(--navy);font:600 1rem/1.1 var(--f-body);cursor:pointer}
.pick span{text-decoration:underline;text-decoration-color:var(--coral-line);text-decoration-thickness:2px;text-underline-offset:.18em}
.pick:hover{color:var(--cta)}
.pick__plus{flex:none;transform:rotate(var(--rot,0deg));transition:transform .4s var(--spring)}
.hero__phone-link{aspect-ratio:430/932}
.hero__phone-link img{width:100%;height:100%;object-fit:cover}
/* Hero sequence (owner 2026-10-22 batch, paced like sscks-site and Envive): H1 per character with a blur-to-sharp settle,
   the coral underline once "care" is in, then the lede, the buttons, the check link and last the phone band.
   site.js adds .seq-on to the hero and .in to each [data-seq] block in turn; a mouse click, a tap on a link or button, a scroll or focus in the hero
   finishes it at once (scroll is locked on desktop until the phone band is in; see site.js). If site.js never runs, the .js fallback below shows everything after 1.6 s. Reduced motion: no hiding. */
@media (prefers-reduced-motion:no-preference){
  .hero__media img{animation:kbZoom 18s cubic-bezier(.16,1,.3,1) both}
  @keyframes kbZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
  .js .hero--film:not(.seq-on) h1,.js .hero--film:not(.seq-on) [data-seq]{opacity:0;animation:seqShow .6s 1.6s forwards}
  .js .hero--film:not(.seq-on) em.ul svg{stroke-dashoffset:1;animation:ulDraw .7s 1.9s cubic-bezier(.16,1,.3,1) forwards}
  @keyframes seqShow{to{opacity:1}}
  @keyframes ulDraw{to{stroke-dashoffset:0}}
  .hero--film.seq-on .dc{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(.14em) scaleY(1.16);will-change:opacity,filter,transform}
  .hero--film.seq-on .dc.in{opacity:1;filter:none;transform:none;transition:opacity .32s steps(3,end),filter .48s ease,transform .48s cubic-bezier(.2,.85,.25,1)}
  .hero--film.seq-on em.ul svg{stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1)}
  .hero--film.seq-on em.ul.in svg{stroke-dashoffset:0}
  .hero--film.seq-on [data-seq]{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
  .hero--film.seq-on .hero__phone-wrap[data-seq]{transform:translateY(80px);transition-duration:1.1s}
  .hero--film.seq-on [data-seq].in{opacity:1;transform:none}
  .hero--film.seq-on.seq-done .dc,.hero--film.seq-on.seq-done [data-seq],.hero--film.seq-on.seq-done em.ul svg{transition:none}
}
@media (max-width:900px){
  .hero__band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;margin-top:calc(-1 * clamp(5rem,16vw,7rem))}
  .hero__phone{order:1;width:min(220px,58vw)}
  .hero__side{padding-top:0}
  .hero__side--r{order:0}.hero__side--l{order:3;text-align:center;justify-self:center}
  .hero--film .pal{justify-content:center}
  .hero__side--r .fine{margin-inline:auto}
  .hero__specs,.hero__khead{width:min(22rem,100%);margin-inline:auto;text-align:left}
  .hero__side--l{min-width:0;width:100%}
}

@media (max-width:1000px){
  .hero__media{height:clamp(220px,58vw,420px)}
  .hero__media img{object-position:50% 12%}
  .hero__media{--fade:linear-gradient(#000 62%,rgb(0 0 0 / .7) 76%,rgb(0 0 0 / .32) 88%,rgb(0 0 0 / .08) 96%,transparent)}
  .hero__media::after{background:none}
  .hero__center{min-height:0;padding-top:calc(clamp(220px,58vw,420px) + 1.25rem);padding-bottom:clamp(6rem,24vw,8rem)}
}

/* 3D phone (owner 2026-10-22 batch): a resting 3D pose with an edge, a moving glare, and a soft glow made from a blurred copy
   of the screen. site.js tilts it toward the pointer (desktop fine pointer only, off for reduced motion) via --rx and --ry. */
.phone3d{position:relative;isolation:isolate;perspective:1100px;--rx:5deg;--ry:-13deg;--gx:30%}
.phone3d::before{content:"";position:absolute;inset:4% -18% -2%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 26% 28%,rgb(240 122 85 / .75),transparent 48%),radial-gradient(circle at 78% 64%,rgb(91 155 240 / .7),transparent 50%),radial-gradient(circle at 40% 86%,rgb(43 179 154 / .6),transparent 46%),radial-gradient(circle at 72% 14%,rgb(242 193 78 / .7),transparent 42%),var(--glow) center 30%/72% auto no-repeat;
  filter:blur(40px) saturate(1.4);opacity:.9}
.phone3d::after{content:"";position:absolute;left:12%;right:12%;bottom:-5%;height:7%;z-index:-1;border-radius:50%;background:rgb(20 24 32 / .3);filter:blur(14px);pointer-events:none}
.phone3d>.phone-solo,.phone3d .hero__phone{position:relative;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .7s cubic-bezier(.16,1,.3,1);
  box-shadow:1px 1px 0 #3a3f49,2px 2px 0 #353a43,3px 3px 0 #30343d,4px 3px 0 #2b2f37,5px 4px 0 #272b33,0 40px 70px -26px rgb(20 24 32 / .5)}
.phone3d.is-tilting>.phone-solo,.phone3d.is-tilting .hero__phone{transition:transform .12s linear}
.phone3d>.phone-solo::after,.phone3d .hero__phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent calc(var(--gx) - 22%),rgb(255 255 255 / .22) var(--gx),transparent calc(var(--gx) + 22%))}
.phone3d .hero__phone{rotate:none}
@media (prefers-reduced-motion:reduce){.phone3d>.phone-solo,.phone3d .hero__phone{transition:none}}
@media (max-width:900px){.phone3d{--rx:3deg;--ry:-8deg}}

/* Glassy bubble buttons (owner 2026-10-22: "cta buttons are bland, try glassy/bubbly lens, shimmer upon hover").
   effects-library: bubbbly-liquid-glass-lens-over-photos (specular top highlight, bright rim, inner shade) on solid fills,
   glass-shine-sweep-on-hover (one diagonal sweep per hover). Text sits above both layers.
   Round 2 (engineer audit): the highlight and the sweep stay out of the label band (rows 30 to 80 percent), so white text keeps
   4.5:1 or more on coral and teal at rest and through the whole sweep. The sweep shows full strength on the top and bottom rims
   and at .1 of that across the label. */
.btn--cta,.btn--teal{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgb(255 255 255 / .38);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -10px 16px -8px rgb(0 0 0 / .22),0 12px 26px -12px var(--btn-glow,rgb(194 65 43 / .75))}
.btn--teal{--btn-glow:rgb(11 110 90 / .7)}
.btn--cta::before,.btn--teal::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 85% 62% at 50% -18%,rgb(255 255 255 / .34),rgb(255 255 255 / .08) 45%,transparent 62%),
             radial-gradient(ellipse 50% 40% at 50% 118%,rgb(255 255 255 / .16),transparent 70%)}
.btn--cta::after,.btn--teal::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgb(255 255 255 / .5) 50%,transparent);transform:skewX(-20deg);opacity:0;
  -webkit-mask-image:linear-gradient(#000 0,#000 12%,rgb(0 0 0 / .1) 28%,rgb(0 0 0 / .1) 82%,#000 100%);mask-image:linear-gradient(#000 0,#000 12%,rgb(0 0 0 / .1) 28%,rgb(0 0 0 / .1) 82%,#000 100%)}
.btn--cta:hover,.btn--teal:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),inset 0 -10px 16px -8px rgb(0 0 0 / .2),0 16px 32px -12px var(--btn-glow,rgb(194 65 43 / .85))}
@media (prefers-reduced-motion:no-preference){
  .btn--cta:hover::after,.btn--teal:hover::after,.btn--cta:focus-visible::after,.btn--teal:focus-visible::after{opacity:1;animation:btnShine 1.1s cubic-bezier(.4,0,.2,1) both}
  @keyframes btnShine{from{left:-70%}to{left:130%}}
}
.cta-sec .btn--cta{--btn-glow:rgb(0 0 0 / .45)}

/* Envive-style reveal (owner 2026-10-22): site.js sets --wash from 1 down to .35 over the first 60% of the hero height, desktop only.
   Round 2 (designer B1): only the center wash (::after) reads --wash. The fade to paper at the bottom is a mask on .hero__media
   (set above), so it stays at full strength and the photo never ends in a hard line. */
.hero--film .hero__media::after{opacity:var(--wash,1)}

/* Section heads (round 2, designer M3): a short Burano rule over a left-aligned head, in three shapes so the page does not read
   as one template: plain (left), split (heading left, lede right) and act (heading left, action right). The hero stays centered. */
.shead{position:relative}
/* r3 2026-10-23 (designer W4): the short colored rule over each head is gone. Home page heads carry a chapter numeral in italic
   Fraunces: hanging in the left margin where the margin is wide enough, inline before the words otherwise. */
/* seo-a11y 2026-10-23 (designer audit4 item 1, MKT-10): the numeral is a sibling of the H2 inside .chap-h, so the heading text starts
   with its first word. Below 1340 px it is its own line over the heading, 1.5rem italic Fraunces in navy with a 32 px hairline after
   it (a CSS line, no dash character). At 1340 px and up it hangs in the margin at 1.6rem on the heading's first baseline, no hairline. */
.chap{display:flex;align-items:center;gap:.7rem;width:max-content;margin:0 0 .55rem;font:italic 500 1.5rem/1 var(--f-display);font-variation-settings:"opsz" 24;letter-spacing:0;color:var(--navy)}
.chap::after{content:"";width:32px;height:1px;background:rgb(27 42 78 / .55)}
@media (min-width:1340px){.chap-h{display:grid;grid-template-columns:4.5rem minmax(0,1fr);align-items:baseline;margin-left:-4.5rem}.chap{display:block;width:auto;margin:0;font-size:1.6rem}.chap::after{content:none}}
.shead h2{max-width:22ch}
.shead--split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.75rem clamp(2rem,5vw,4.5rem);align-items:end;margin-bottom:.5rem}
.shead--split h2{margin:0;font-size:clamp(2rem,2.6vw + 1rem,3.15rem);max-width:17ch}
.shead--split .lede{margin:0;padding-bottom:.35rem}
.shead--act{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem 3rem;margin-bottom:2rem}
.shead--act>div{max-width:44rem}
.mq .shead--act .lede{margin-bottom:0}
.shead--faq h2{margin-bottom:0}
@media (max-width:860px){.shead--split{grid-template-columns:minmax(0,1fr)}.shead--split h2{max-width:20ch}}

/* coral label stays at 4.5:1 or better through the shine (engineer audit2, 2026-10-22) */
.btn--cta::after{background:linear-gradient(100deg,transparent,rgb(255 255 255 / .3) 50%,transparent)}

/* r3 P6: the specialty mockup stack keeps its phone on screen at 390 and 360 (min-height made the stack wider than the column) */
@media (max-width:600px){.stack{min-height:0}.stack .f-phone{right:4%}}
/* r3 P9: at 360 the photo is shorter so the top of the phone shows above the fold */
@media (max-width:400px){.hero__media{height:160px}.hero__center{padding-top:calc(160px + 1.25rem)}}

/* ---------- seo-a11y 2026-10-23, marketing round 1 (designer audit4 items 3 and 4) ---------- */
/* item 3: /check/ shows the letter in the hero aside at 901 px and up, and after the form below that (one copy per width) */
.phero__letter{width:100%;max-width:500px}
@media (max-width:900px){.phero__letter{display:none}}
@media (min-width:901px){.form-aside__letter{display:none}}
/* item 3: /preview/ at 901 px and up: less space under the hero, so the form card starts near 520 px at 1440x900 */
@media (min-width:901px){.phero--form{padding-top:2.75rem;padding-bottom:1.25rem}.sec--form.seam{padding-top:2.75rem}}
/* item 4: the typed-name strip under the Practice name field (phones and tablets, with JavaScript). The view shows the Meadow
   screenshot's header row (image rows 80 to 180 of 1298, columns 0 to 500 of 600) at about twice the phone's scale; the typed name
   covers the sample's own name, as on the phone (.try__name), at the same place and the same relative size. */
.tstrip{display:none}
@media (max-width:900px){.js .tstrip{display:block;margin-top:.6rem}}
.tstrip__k{display:block;margin-bottom:.35rem;font:600 .8rem/1.2 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--coral)}
.tstrip__view{position:relative;display:block;aspect-ratio:5/1;overflow:hidden;border-radius:10px;border:1px solid rgb(27 42 78 / .16);background:#fff;container-type:inline-size;box-shadow:0 10px 24px -18px rgb(27 42 78 / .5)}
.tstrip__view img{display:block;width:120%;max-width:none;height:auto;margin-top:-16%}
.tstrip__name{position:absolute;left:4.3%;top:3%;width:75.6%;height:94%;display:flex;align-items:center;background:#fff;color:#173a5b;font:700 5.2cqw/1.1 var(--f-body);letter-spacing:-.01em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* item 4: at desktop widths the typed name is also set under the phone as a caption, "Seabreeze Family Dental, on Meadow" */
.try__cap{display:block;margin-top:.35rem;font:600 1.25rem/1.25 var(--f-display);color:var(--navy);text-wrap:balance}

/* ---------- seo-a11y 2026-10-23, marketing round 2 ---------- */
/* MKT-2: on short screens (200 and 400 percent zoom) the header scrolls away, so the phone bar is the only fixed strip */
@media (max-height:500px){.site-header{position:relative}html{scroll-padding-top:0}}
/* MKT-13: the pause control for the moving wall, a text button like "Show another design" (no pill, no dot) */
.mq__ctl{display:flex;justify-content:flex-end;margin-bottom:.4rem}
.mq__pause{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .1rem;border:0;background:none;color:var(--navy);font:600 1rem/1.1 var(--f-body);cursor:pointer}
.mq__pause span{text-decoration:underline;text-decoration-color:var(--coral-line);text-decoration-thickness:2px;text-underline-offset:.18em}
.mq__pause:hover{color:var(--cta)}
.mq__ico{flex:none;fill:currentColor;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mq__ico--pause{fill:none}
.mq__ico--play,.mq__pause.is-paused .mq__ico--pause{display:none}
.mq__pause.is-paused .mq__ico--play{display:block}
.mq__wall:focus-visible{outline-offset:-3px}
/* MKT-28: the short help form on /privacy/ and /accessibility/; the thank-you line shows when the Worker sends the visitor to #sent */
.form--help{max-width:40rem;margin:1.25rem 0 1.5rem}
.form--help .field+.field{margin-top:.9rem}
.form--help .btn{margin-top:.25rem}
.form-msg--ok{display:none;background:var(--teal-bg);color:var(--teal)}
.form-msg--ok:target,.form-msg--ok.is-on{display:block}
/* ---------- seo-a11y 2026-10-23, marketing round 3 ---------- */
/* AOA-3: a visible message under each bad field and a marked border; the summary lists each bad field as a link */
.field__err{margin:.35rem 0 0;font-size:.95rem;font-weight:600;color:var(--coral)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.form-msg--err p{margin:0 0 .35rem}.form-msg--err p:last-child{margin:0}
.form-msg--err ul{margin:.25rem 0 0;padding-left:1.2rem}
.form-msg--err li{margin:.2rem 0;line-height:1.55}
.form-msg--err a{color:var(--coral);font-weight:600;text-decoration:underline;text-underline-offset:.18em}
/* AOA-11: at 400 px and below the sample name in the mock browser bar wraps instead of being cut */
@media (max-width:400px){.frame__bar{height:auto;min-height:28px;padding:.3rem 12px}.frame__bar>span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}}
/* ---------- seo-a11y 2026-10-23, marketing round 4 (deploy-round designer audit) ---------- */
/* D-1: the llms.txt panel reads as a file excerpt; on phones the head stacks instead of squeezing the left label */
.panel--file .panel__body{font:400 .9rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--navy)}
.panel--file .panel__body b{font-weight:700}
@media (max-width:600px){.panel__head{flex-direction:column;align-items:flex-start;gap:.25rem}}
/* D-2: specialty questions in one column; the page list as hairline rows */
@media (min-width:1000px){.sec .faq-list--spec{grid-template-columns:minmax(0,1fr);max-width:820px}}
.faq-plans{list-style:none;margin:.6rem 0 0;padding:0}
.faq-plans li{padding:.55rem 0;border-top:1px solid rgb(27 42 78 / .14)}
.faq-plans b{font:600 1.05rem/1.3 var(--f-display)}
/* D-3: the typed-name strip reads as a piece of the phone, not as a second field */
.tstrip{margin-left:12px}
.tstrip__view{border:0;border-top:6px solid var(--bezel);box-shadow:0 14px 28px -18px rgb(27 42 78 / .6)}
/* D-4: a lighter summary box (coral text on near white), no coral fill beside the mint choice card */
.form-msg--err{background:rgb(255 255 255 / .85);border:1.5px solid var(--coral);color:var(--coral)}
/* N-1: the numeral's line runs as a chapter rule, not a dash; the hanging numeral is larger */
.chap{width:auto;max-width:20rem}
.chap::after{flex:1;width:auto;background:rgb(27 42 78 / .25)}
@media (min-width:1340px){.chap{font-size:2rem}}
/* N-2: on prose pages the help form sits in the text column under a hairline, with no card */
.form--help{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;border-top:1px solid rgb(27 42 78 / .2);border-radius:0;padding:1.25rem 0 0}
/* N-3: no small gray text in the help forms */
.form--help .privacy-note,.form--help .opt{font-size:1rem;color:var(--navy)}
/* N-4: card links line up across a row when a palette list wraps */
.look{height:100%}.look__body{flex:1}.look__links{margin-top:auto}
/* perf IMG-14 (round 4): the CTA phone sits in a picture whose phone-width source is an inline 1x1 image, so it never downloads where it is hidden */
.cta-band__pic{display:block;width:120px}
@media (max-width:860px){.cta-band__pic{display:none}}
.tstrip__view picture{display:contents}
/* perf IMG-15 (round 4): one of the two hero frame pictures shows per width (see build.mjs FRONT_PICS) */
.frame .fr-m{display:none}
@media (max-width:599px){.frame .fr-d{display:none}.frame .fr-m{display:block}}
.frame picture{display:block}
/* ---------- seo-a11y 2026-10-23, marketing round 5 (owner feedback) ---------- */
/* OWNER-1: the hero index names only, heavier (Fraunces 650, opsz 144), one "Built for" label */
.hero__specs a{font-weight:650;font-variation-settings:"opsz" 144;justify-content:flex-start}
.hero__khead .hero__k{justify-content:flex-start}
@media (min-width:1200px){.hero__khead{grid-template-columns:minmax(0,1fr)}}
/* OWNER-3: no chapter numerals (the markup is gone; these rules stay inert) */
.chap,.chap-h .chap{display:none}
/* OWNER-5: the SEO / AEO / GEO row is centered */
.terms--row li{text-align:center}
/* round 5 (designer): panel text inside a feature row is navy at full width */
.feature-row .panel--file .panel__body p,.feature-row .panel .panel__body p{color:var(--navy);max-width:none}
/* OWNER-4: two phones open the same moment (illustration). With motion the CliniDesign screen appears at once and the heavy page
   crawls; without JS or with reduced motion both show their end state. */
.speed{display:grid;grid-template-columns:repeat(2,minmax(0,150px));justify-content:center;gap:1.5rem 2.5rem;padding:1.5rem 1rem 1rem}
.speed__ph{display:flex;flex-direction:column;align-items:center}
.speed__screen{position:relative;width:100%;aspect-ratio:300/650;overflow:hidden;border-radius:22px;border:6px solid var(--bezel);background:#fff;box-shadow:0 26px 50px -28px rgb(20 24 32 / .55)}
.speed__screen img{width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .5s ease .45s}
.speed__bar{position:absolute;left:0;right:0;top:0;height:5px;background:rgb(27 42 78 / .08)}
.speed__bar i{display:block;height:100%;width:62%;background:var(--sky-mid);transition:width 3.4s cubic-bezier(.2,.7,.3,1)}
.speed__sk{display:block;height:10px;margin:22px 14px 0;border-radius:5px;background:rgb(27 42 78 / .09)}
.speed__sk:first-of-type{margin-top:34px;height:46px}
.speed__sk--s{width:55%}
.speed__cap{margin:.7rem 0 0;font:600 1.05rem/1.25 var(--f-display);color:var(--navy);text-align:center}
.speed__note{grid-column:1/-1;margin:.25rem 0 0;text-align:center;font:italic 500 .95rem/1.3 var(--f-display);color:var(--navy)}
.js .speed:not(.in) .speed__screen img{opacity:0}
.js .speed:not(.in) .speed__bar i{width:4%}
@media (prefers-reduced-motion:no-preference){.js .speed.in .speed__sk{animation:skPulse 1.4s ease-in-out infinite}@keyframes skPulse{50%{opacity:.45}}}
.features-sticky .feature-img.c-sky{max-width:420px}
/* OWNER-6: old way and new way. Each row: a label, two small pictures with one line each, Google's words under them. */
.ow{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:0}
.ow__row{display:grid;grid-template-columns:9rem minmax(0,1fr) minmax(0,1fr);gap:.75rem 2.5rem;align-items:center;padding:1.8rem 0;border-top:1px solid rgb(27 42 78 / .18)}
.ow__k{margin:0;font:600 1.6rem/1.1 var(--f-display);color:var(--navy)}
.ow__side{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:center}
.ow__side figcaption{font-size:1.05rem;line-height:1.4;color:var(--navy)}
.ow__tag{display:block;margin-bottom:.2rem;font:600 .85rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
.ow__side--old .ow__tag{color:var(--navy)}.ow__side--new .ow__tag{color:var(--teal)}
.ow__pic{display:flex;align-items:center;gap:6px;min-width:9.5rem}
.ow__page{display:block;width:44px;height:58px;padding:7px 6px;border:1.5px solid rgb(27 42 78 / .3);border-radius:5px;background:#fff}
.ow__page i{display:block;height:4px;margin-bottom:5px;border-radius:2px;background:rgb(27 42 78 / .22)}
.ow__side--new .ow__page{border-color:var(--teal-mid)}.ow__side--new .ow__page i{background:var(--teal-mid)}
.ow__side--old .ow__pic{filter:grayscale(1);opacity:.75}
.ow__facts{display:grid;gap:0;padding:2px 10px;border-left:2px solid var(--teal-mid)}
.ow__facts b{font:600 .95rem/1.5 var(--f-display);color:var(--navy);border-bottom:1px solid rgb(27 42 78 / .12)}
.ow__facts b:last-child{border-bottom:0}
.ow__to{position:relative;padding-left:26px;font:italic 600 .95rem/1.2 var(--f-display);color:var(--teal);white-space:nowrap}
.ow__to::before{content:"";position:absolute;left:2px;top:50%;width:18px;height:2px;background:var(--teal)}
.ow__to::after{content:"";position:absolute;left:14px;top:calc(50% - 4px);border:5px solid transparent;border-left:7px solid var(--teal);border-right:0}
.ow__load{display:block;width:9rem;height:10px;border-radius:999px;background:rgb(27 42 78 / .1);overflow:hidden}
.ow__load i{display:block;height:100%;border-radius:inherit;transition:width 2.6s cubic-bezier(.2,.7,.3,1)}
.ow__load--slow i{width:30%;background:rgb(27 42 78 / .45)}.ow__load--fast i{width:100%;background:var(--teal-mid);transition-duration:.6s}
.js .ow__row:not(.in) .ow__load i{width:3%}
.ow__src{grid-column:2/-1;margin:0;font-size:1rem;color:var(--navy)}
.ow__src a{color:var(--navy);font-weight:600}
@media (prefers-reduced-motion:no-preference){.js .ow__row .ow__side--new{transition:opacity .6s ease .15s,transform .7s cubic-bezier(.16,1,.3,1) .15s}.js .ow__row:not(.in) .ow__side--new{opacity:0;transform:translateX(14px)}}
@media (max-width:860px){.ow__row{grid-template-columns:minmax(0,1fr);gap:1rem}.ow__src{grid-column:1}}
/* OWNER-6: the early-mover argument as a drawn illustration */
.em{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,4rem);align-items:center;margin-top:3rem;padding-top:2.2rem;border-top:1px solid rgb(27 42 78 / .18)}
.em__chart{width:100%;height:auto;overflow:visible}
.em__axis{fill:none;stroke:rgb(27 42 78 / .35);stroke-width:1.5}
.em__line{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)}
.em__line--early{stroke:var(--teal-mid)}.em__line--late{stroke:rgb(27 42 78 / .45);transition-delay:.5s}
.js .em:not(.in) .em__line{stroke-dashoffset:1}
.em__lbl{font:600 18px var(--f-display)}.em__lbl--early{fill:var(--teal)}.em__lbl--late{fill:var(--navy)}
.em__ax{font:italic 500 15px var(--f-display);fill:var(--navy)}
.em__text h3{font-size:clamp(1.5rem,1.4vw + 1rem,2rem)}
.em__note{font:italic 500 1rem/1.4 var(--f-display);color:var(--navy)}
@media (max-width:860px){.em{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.ow__side{grid-template-columns:minmax(0,1fr);gap:.6rem}.ow__pic{min-width:0}}
.speed__screen picture{display:contents}
/* round 5b (OWNER-6 follow-up): the compact old-way / new-way story (home feature row, specialty pages): label over the two sides */
.ow--compact{margin-top:1.2rem}
.ow--compact .ow__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem 1.5rem;padding:1.1rem 0}
.ow--compact .ow__k{grid-column:1/-1;font-size:1.3rem}
.ow--compact .ow__side{grid-template-columns:minmax(0,1fr);gap:.55rem;align-content:start}
.ow--compact .ow__pic{min-width:0}
.ow--compact .ow__side figcaption{font-size:1rem}
.owc__more{margin:.6rem 0 0}
.features-sticky .feature-img.c-teal{max-width:560px}
.features-sticky .owc{padding:.5rem 1rem}
@media (max-width:420px){.ow--compact .ow__row{grid-template-columns:minmax(0,1fr)}}
/* round 5b: tighter compact rows (the sticky panel must fit a 720 px tall screen); navy text inside a feature row */
.feature-row .owc p,.owc p{color:var(--navy);max-width:none}
.ow--compact .ow__row{padding:.8rem 0;gap:.45rem 1.25rem}
.ow--compact .ow__k{font-size:1.15rem;margin:0}
.ow--compact .ow__tag{display:inline;margin:0 .35rem 0 0;font-size:.8rem}
.ow--compact .ow__side figcaption{font-size:.95rem;line-height:1.35}
.ow--compact .ow__page{width:36px;height:46px;padding:6px 5px}
.ow--compact .ow__page i{height:3px;margin-bottom:4px}
.ow--compact .ow__facts b{font-size:.85rem;line-height:1.4}
.ow--compact .ow__to{display:none}
.ow--compact .ow__load{width:100%;max-width:8rem}
@media (max-width:420px){.ow--compact .ow__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* ---------- seo-a11y 2026-10-23, marketing round 6 (final-round designer F-1 to F-3, nits) ---------- */
/* F-1: bigger phones on desktop; the source link is small and plain */
@media (min-width:901px){.speed{grid-template-columns:repeat(2,minmax(0,200px))}.features-sticky .feature-img.c-sky{max-width:500px}}
a.src{font-size:.95rem;font-weight:600;color:var(--navy);white-space:nowrap}
/* F-2: /ai-seo/ old and new side by side at every width, pictures twice the size, picture above its one-line caption */
.ow:not(.ow--compact) .ow__side{grid-template-columns:minmax(0,1fr);gap:.8rem;align-content:start}
.ow:not(.ow--compact) .ow__pic{min-width:0;gap:10px;flex-wrap:wrap}
.ow:not(.ow--compact) .ow__page{width:84px;height:110px;padding:12px 10px;border-radius:8px}
.ow:not(.ow--compact) .ow__page i{height:6px;margin-bottom:9px;border-radius:3px}
.ow:not(.ow--compact) .ow__facts b{font-size:1.15rem;line-height:1.6}
.ow:not(.ow--compact) .ow__to{font-size:1.1rem}
.ow:not(.ow--compact) .ow__load{width:12rem;max-width:100%;height:14px}
.ow:not(.ow--compact) .ow__side figcaption{font-size:1.05rem}
/* the with-us pages differ: a heading weight (a, c) or a picture block (b) */
.ow__page--a i:first-child,.ow__page--c i:nth-child(3){height:9px;background:var(--teal)}
.ow__page--b b{display:block;height:34%;margin-bottom:8px;border-radius:4px;background:var(--teal-bg);border:1px solid var(--teal-mid)}
.ow--compact .ow__page--b b{height:30%;margin-bottom:4px}
/* F-2: no colored side rule on the facts list (owner list); the hairlines make the list */
.ow__facts{border-left:0;padding:2px 0}
@media (max-width:860px){.ow:not(.ow--compact) .ow__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem 1.25rem}.ow:not(.ow--compact) .ow__k,.ow:not(.ow--compact) .ow__src{grid-column:1/-1}}
@media (max-width:600px){.ow:not(.ow--compact) .ow__page{width:46px;height:62px;padding:7px 6px}.ow:not(.ow--compact) .ow__page i{height:4px;margin-bottom:5px}.ow:not(.ow--compact) .ow__pic{gap:6px}.ow:not(.ow--compact) .ow__facts b{font-size:.95rem}.ow:not(.ow--compact) .ow__side figcaption{font-size:.95rem}}
/* F-3: on the specialty pages the compact story holds the text column */
@media (min-width:1000px){.owc--spec{max-width:760px}}
/* N-a: the specialty questions start under their heading */
@media (min-width:1000px){.sec .faq-list--spec{margin-inline:0}}
/* N-b: search phrases in italic specialty ink; [town] lighter */
.qph{font:italic 500 1.05em/1.3 var(--f-display);color:var(--c-ink,var(--teal))}
.qph__t{font-weight:300}
.ow__page{overflow:hidden}