/* ==========================================================================
   THE OWNER SHAPE                                              kit/owner.css
   A white page, color arriving in big rounded blocks, very large type, photos
   and drawn graphics instead of sentences, and motion that shows something
   true. Law and reasons: ../WEBSITE-SYSTEM.md.

   Seeded from firstpulse.ai/go (GFC/firstpulse-site/go.template.html, v7) and
   thedohenyco.com (Doheny/handoff/src/app/(doheny)/doheny.css), both built to
   copy owner.com. Every value FirstPulse hard-coded as a hex is a slot here, so
   a brand changes the slots in kit/brands/<brand>.css and every gradient,
   shadow and overlay follows.

   Scoped under .owner so it can sit inside an app without leaking.
   Put class="owner" on <body>, or on the page wrapper.
   Motion lives in kit/motion.js (static pages) or kit/react/house-motion.tsx.
   ========================================================================== */

.owner{
  /* ---- brand slots: a brand file overrides these and nothing else ---- */
  --ink:#0D1B17;            /* headlines and body text */
  --ink-2:#4B5A55;          /* secondary text, captions */
  --muted:#5F6D68;          /* fine print; 5.4:1 on paper, check yours */
  --paper:#FFFFFF;          /* the page */
  --soft:#F3F6F5;           /* neutral rows, chips, quiet buttons */
  --tint:#EAF7F2;           /* brand-tinted blocks: trust pill, offer card */
  --brand:#0F9A84;          /* big accent numbers, checks, dots, strokes. As text only at 24px and up:
                               FirstPulse's teal is 3.5:1 on white, so small text uses --brand-deep */
  --brand-deep:#07594C;     /* buttons, big prices, dark bands, the focus ring. 3:1 or better against --paper */
  --brand-glow:#43E3B6;     /* light inside gradients, labels on dark photos. Never the focus ring: under 3:1 on a light page */
  --signal:#E2552B;         /* the strike through a number, and errors. Nothing else. */
  --on-deep:#FFFFFF;        /* text on brand-deep, on panels and on photos */
  --font-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-body:"Chivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display-weight:800;
  --display-tracking:-.045em;

  /* ---- shape and space: the same on every owner-shape site ---- */
  --r-panel:34px; --r-card:26px; --r-row:20px; --r-pill:999px;
  --maxw:1160px; --narrow:780px;
  --gutter:clamp(18px,3.5vw,48px);
  --section:clamp(44px,6.4vw,92px);
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- composed surfaces: built from the slots, never picked by hand.
     A browser without color-mix drops these; every rule that uses one sets a
     solid background-color first, so the block stays a block. ---- */
  --panel-fill:radial-gradient(110% 80% at 88% 0%,color-mix(in srgb,var(--brand-glow) 55%,transparent) 0%,transparent 58%),linear-gradient(165deg,color-mix(in srgb,var(--brand) 88%,var(--brand-glow)) 0%,var(--brand-deep) 78%);
  --band-fill:radial-gradient(80% 140% at 0% 0%,color-mix(in srgb,var(--brand-glow) 38%,transparent) 0%,transparent 60%),linear-gradient(135deg,var(--brand-deep) 0%,color-mix(in srgb,var(--brand-deep) 45%,var(--brand)) 100%);
  --rings:repeating-radial-gradient(circle at 50% 100%,rgb(255 255 255/.075) 0 1.5px,transparent 1.5px 34px);
  --photo-scrim:linear-gradient(180deg,color-mix(in srgb,var(--ink) 8%,transparent) 0%,transparent 32%,color-mix(in srgb,var(--ink) 62%,transparent) 64%,color-mix(in srgb,var(--ink) 93%,transparent) 100%);
  --lift:0 30px 70px color-mix(in srgb,var(--ink) 34%,transparent);
  --float:0 12px 34px color-mix(in srgb,var(--ink) 14%,transparent);
}

/* ---------------------------------------------------------------- base -- */
.owner{background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.owner *,.owner *::before,.owner *::after{box-sizing:border-box}
.owner :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0}
.owner :where(ul,ol){padding:0;list-style:none}
.owner :where(img,video,svg){display:block;max-width:100%}
.owner :where(img,video){height:auto}
.owner :where(a){color:inherit;text-decoration:none}
.owner :where(button,input,select,textarea){font:inherit;color:inherit}
.owner :where(h1,h2,h3){font-family:var(--font-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);line-height:1;text-wrap:balance;color:inherit}
/* Focus (WCAG 1.4.11: 3:1 against the colors on both sides of the ring). A brand-deep line with its gap painted paper and a
   2px paper edge outside it, so the line has paper on both sides on any surface: the page, tints, panels, bands, photos.
   A glow ring cannot do this: a light color is under 3:1 on a light page (FirstPulse's glow measured 1.6:1). Inline links
   take a line in their own text color and no paper bands, which would paint over the words beside them. z-index lifts a
   focused flex or grid item over its neighbors, or a button 4px away paints over the ring. */
.owner :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;box-shadow:0 0 0 8px var(--paper);z-index:1}
.owner :where(p,li,address,small,dd,figcaption,blockquote) a:not(.btn):focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:none}
/* a swipe row with nothing focusable inside takes keyboard focus itself: its ring is drawn inside the row (see marquee) */
.owner .wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.owner .wrap.narrow{max-width:calc(var(--narrow) + 2 * var(--gutter))}
.owner .section{padding-block:var(--section)}
.owner .section.tight{padding-block:calc(var(--section) * .45) var(--section)}
.owner .h2{font-size:clamp(34px,4.8vw,58px);max-width:17ch}
.owner .h3{font-size:clamp(23px,2.5vw,31px);letter-spacing:-.03em;line-height:1.06}
/* the one short line allowed under an H2 (copy law: under 25 words) */
.owner .line{font:500 clamp(17px,1.6vw,19px)/1.45 var(--font-body);color:var(--ink-2);max-width:44ch;margin-top:14px}
.owner .note{font:500 13px/1.5 var(--font-body);color:var(--muted);max-width:72ch;margin-top:14px}
/* tabular figures only where numbers line up in a column. On display-size numbers many faces
   set the comma and colon as wide as a digit ("$2 , 180"), so big numbers keep proportional figures. */
.owner .num{font-variant-numeric:tabular-nums}
.owner .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------- buttons -- */
.owner .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  padding:14px 26px;border:0;border-radius:var(--r-pill);background:var(--brand-deep);color:var(--on-deep);
  font:700 16px/1 var(--font-body);white-space:nowrap;cursor:pointer;transition:background-color .18s ease}
.owner .btn:hover{background:color-mix(in srgb,var(--brand-deep) 82%,#000)}
.owner .btn.light{background:var(--paper);color:var(--brand-deep)}
.owner .btn.light:hover{background:var(--tint)}
.owner .btn.soft{background:var(--soft);color:var(--ink)}
.owner .btn.soft:hover{background:var(--tint)}
.owner .btn.big{display:flex;width:100%;min-height:58px;font-size:18px}
.owner .btn svg{width:18px;height:18px;flex:none}

/* ----------------------------------------------------------------- nav --
   Mark left, three to five business-noun links, one filled action right.
   Solid paper, never a blur (backdrop-blur is a P0 tell). */
.owner .nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 96%,transparent)}
.owner .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px}
.owner .mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:21px;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.owner .mark svg{flex:none}
.owner .nav-links{display:none;gap:28px;font:500 15px/1 var(--font-body);color:var(--ink-2)}
.owner .nav-links a:hover{color:var(--ink)}
.owner .nav-actions{display:flex;align-items:center;gap:8px}
.owner .nav-actions .btn{min-height:44px;padding:12px 18px;font-size:14.5px}
@media(min-width:960px){.owner .nav-links{display:flex}}
@media(max-width:420px){.owner .nav-actions .btn.soft{display:none}}

/* ---------------------------------------------------------- trust line --
   One proof fact above the H1, never a slogan: "4.9 from 1,214 reviews",
   "$83M in direct mail since 2020". A pill with nothing true in it is the
   badge-above-the-H1 tell (references/ai-tells.md, P1). */
.owner .trust{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 6px;border-radius:var(--r-pill);
  background:var(--tint);color:var(--brand-deep);font:700 13.5px/1.2 var(--font-body)}
.owner .trust i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper);
  display:inline-grid;place-items:center;font-style:normal}
.owner .trust.plain{padding:0;background:none;color:var(--ink-2);font-weight:600}
.owner .stars{color:var(--brand);letter-spacing:1px}

/* ---------------------------------------------------------------- hero --
   Order: trust line, H1 (with a rotating tail when the category needs the
   words), one input or one button, then the product in a color panel.
   Nothing under the input. The H1 and the input never wait on motion. */
.owner .hero{padding-block:clamp(20px,4.4vw,58px) clamp(26px,4vw,48px);text-align:center}
.owner .hero h1{font-size:clamp(40px,7.4vw,84px);line-height:.98;letter-spacing:-.05em;max-width:14ch;margin:16px auto 0}
.owner .hero h1.wide{max-width:21ch;font-size:clamp(36px,6.2vw,80px)}
.owner .hero .accent-line{font:700 clamp(19px,2.3vw,25px)/1.3 var(--font-display);letter-spacing:-.02em;
  color:var(--brand);max-width:31ch;margin:16px auto 0}

/* The rotating tail. It sits on its own line so a swap reads as deliberate.
   Only the first tail is in the HTML (a crawler reads one real sentence); the
   motion code stacks the others in the same grid cell once it runs, so the
   cell is always as tall as the tallest tail and the H1 never jumps. */
.owner .rot{display:grid;justify-items:center}
.owner .rot.left{justify-items:start}
.owner .rot>span{grid-area:1/1;transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s}
.owner .rot>span[aria-hidden="true"]{opacity:0;transform:translateY(.34em);visibility:hidden;
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s .42s}
.owner .rot>span.out{opacity:0;transform:translateY(-.34em)}

.owner .lookup{position:relative;z-index:5;display:flex;align-items:center;gap:8px;width:100%;max-width:600px;
  margin:clamp(22px,3vw,32px) auto 0;padding:7px 7px 7px 24px;border-radius:var(--r-pill);background:var(--paper);
  box-shadow:var(--float),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
/* the pill takes the ring while its input has focus; while the button inside has keyboard focus, only the button shows one */
.owner .lookup:focus-within{outline:3px solid var(--brand-deep);outline-offset:3px;box-shadow:0 0 0 8px var(--paper),var(--float)}
.owner .lookup:has(.btn:focus-visible){outline:0;box-shadow:var(--float),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.owner .lookup input{flex:1;min-width:0;border:0;background:transparent;padding:12px 0;font:500 17px/1.2 var(--font-body);color:var(--ink);outline:0}
.owner .lookup input:focus-visible{outline:0;box-shadow:none}
.owner .lookup input::placeholder{color:var(--muted)}
.owner .lookup .btn{flex:none}
@media(max-width:560px){.owner .lookup{padding-left:18px}.owner .lookup .btn{width:50px;min-height:50px;padding:0}.owner .lookup .btn .bt{display:none}}

/* The stage: desktop puts the input above the panel; phones put the panel
   first and float the input over its bottom edge (owner.com's phone layout). */
.owner .stage{display:flex;flex-direction:column;margin-top:clamp(22px,3.4vw,36px)}
.owner .stage .lookup{order:1;margin:0 auto 24px}
.owner .stage .panel{order:2}
@media(max-width:760px){.owner .stage .panel{order:1;border-radius:28px}.owner .stage .lookup{order:2;margin:-30px 10px 0;width:auto}}

/* ------------------------------------------------------ the color panel --
   The brand gradient with pulse rings. It carries the product: a phone card,
   a screenshot, a live demo. Never a paragraph. */
.owner .panel{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-panel);
  padding:clamp(28px,4vw,48px) clamp(14px,3vw,40px) clamp(40px,4.4vw,52px);
  background-color:var(--brand-deep);background-image:var(--panel-fill);color:var(--on-deep)}
.owner .panel::before{content:"";position:absolute;inset:-40%;z-index:-1;background:var(--rings);pointer-events:none}

/* The phone card: a white card, one big thing per beat. Lighter to build and
   to load than a drawn device frame (thedohenyco.com draws the full iPhone;
   use that only when the device itself is the point). */
.owner .phone{position:relative;max-width:430px;margin:0 auto;border-radius:30px;background:var(--paper);color:var(--ink);
  box-shadow:var(--lift);overflow:hidden;text-align:left}
@media(min-width:900px){.owner .phone{max-width:580px}}
.owner .demo-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 4px;font:700 14.5px/1.2 var(--font-body)}
.owner .live{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--font-body);color:var(--brand-deep);white-space:nowrap}
.owner .live i{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:o-pulse 1.4s ease-in-out infinite}
.owner .demo-stage{position:relative;height:236px;overflow:hidden;cursor:pointer}
@media(min-width:640px){.owner .demo-stage{height:256px}}
@media(min-width:900px){.owner .demo-stage{height:300px}.owner .demo-top{padding:20px 30px 6px;font-size:16px}}
.owner .scene{position:absolute;inset:0;display:grid;align-content:center;gap:10px;padding:8px 20px 10px;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.owner .scene.on{opacity:1;transform:none}
.owner .scene.off{opacity:0;transform:translateY(-8px)}
@media(min-width:900px){.owner .scene{padding:10px 30px 12px}}
.owner .scene .big{font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(30px,7.6vw,52px);
  line-height:1.04;letter-spacing:-.04em}
.owner .scene .big b{color:var(--brand)}
.owner .scene small{display:block;font:500 14.5px/1.35 var(--font-body);color:var(--ink-2)}
.owner .scene.split{grid-template-columns:118px 1fr;align-items:center;gap:14px}
@media(min-width:900px){.owner .scene.split{grid-template-columns:170px 1fr;gap:24px}}
.owner .demo-rail{display:flex;gap:6px;padding:0 20px 18px}
@media(min-width:900px){.owner .demo-rail{padding:0 30px 24px}}
.owner .demo-rail i{position:relative;flex:1;height:4px;border-radius:4px;background:var(--soft);overflow:hidden}
.owner .demo-rail i::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left}
.owner .demo-rail i.done::after{transform:scaleX(1)}
.owner .demo-rail i.now::after{transform:scaleX(1);animation:o-rail var(--hold,4s) linear}

/* ------------------------------------------- the strike and the circle --
   The signature pair: the number everyone else uses, struck in signal; the
   number that matters, circled in brand. Both draw when they come into view. */
.owner .strike{position:relative;color:color-mix(in srgb,var(--ink) 45%,var(--paper));white-space:nowrap;text-decoration:none}
.owner .strike::after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:.1em;min-height:4px;border-radius:3px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .25s}
.owner .strike.on::after,.owner .on .strike::after{transform:scaleX(1)}
.owner .circle{position:relative;display:inline-block;padding:0 .12em;color:var(--brand-deep);white-space:nowrap}
.owner .circle svg{position:absolute;inset:-.22em -.28em;width:calc(100% + .56em);height:calc(100% + .44em);overflow:visible;pointer-events:none}
/* the path carries pathLength="100", so the draw works at any size */
.owner .circle path{fill:none;stroke:var(--brand);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:101;stroke-dashoffset:101;
  transition:stroke-dashoffset .9s ease .2s}
.owner .circle.on path,.owner .on .circle path{stroke-dashoffset:0}

/* ------------------------------------------------------- the big word --
   One sentence the page is built on, set enormous: a kicker with a strike,
   a giant word, one short line, a row of icons where only a few light up. */
.owner .bigword{text-align:center}
.owner .bigword .kick{font:700 clamp(22px,3vw,34px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink-2)}
.owner .bigword .word{font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(46px,12.4vw,160px);
  line-height:.88;letter-spacing:-.065em;color:var(--brand-deep);margin-top:.08em;text-wrap:balance}
.owner .bigword .line{margin:clamp(14px,2vw,22px) auto 0;max-width:34ch}
.owner .dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:620px;margin:clamp(20px,3vw,32px) auto 0}
.owner .dots i{width:26px;height:25px;background:var(--soft);clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%);
  transition:opacity .5s ease calc(var(--k,0) * 45ms),background-color .5s ease calc(var(--k,0) * 45ms)}
.owner .on .dots i:not(.keep){opacity:.3}
.owner .on .dots i.keep{background:var(--brand)}

/* ------------------------------------------------------------ row head -- */
.owner .rowhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.owner .rowhead .h2{max-width:18ch}
.owner .rownav{display:none;gap:10px}
.owner .rownav button{width:48px;height:48px;border:0;border-radius:50%;background:var(--soft);display:inline-grid;place-items:center;cursor:pointer}
.owner .rownav button:hover{background:var(--tint)}
@media(min-width:900px){.owner .rownav{display:flex}}

/* ---------------------------------------------------- photo result card --
   4:5, a white place chip top left, one giant white number bottom left, a
   glow label, one line of facts. Real numbers only, defined on the page.
   On owner.com the card also names the owner; only do that with the real
   person's written OK, and never put a name on a generated face. */
.owner .rcard{position:relative;display:block;flex:0 0 clamp(248px,72vw,300px);aspect-ratio:4/5;border-radius:var(--r-card);
  overflow:hidden;isolation:isolate;background-color:var(--ink);color:var(--on-deep);text-align:left;scroll-snap-align:start}
.owner .rcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s ease}
.owner .rcard::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--photo-scrim)}
.owner a.rcard:hover>img,.owner button.rcard:hover>img{transform:scale(1.045)}
.owner button.rcard{border:0;padding:0;font:inherit;cursor:pointer}
.owner .rcard .place{position:absolute;top:14px;left:14px;padding:8px 12px;border-radius:var(--r-pill);
  background:rgb(255 255 255/.95);color:var(--ink);font:700 12.5px/1 var(--font-body)}
.owner .rcard .res{position:absolute;left:18px;right:16px;bottom:17px}
.owner .rcard .res b{display:block;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(40px,11vw,52px);
  line-height:.95;letter-spacing:-.05em}
.owner .rcard .res .lbl{display:block;margin-top:7px;font:700 15.5px/1.2 var(--font-body);color:var(--brand-glow)}
.owner .rcard .res small{display:block;margin-top:5px;font:500 13px/1.35 var(--font-body);color:rgb(255 255 255/.9)}
/* the record card: the same card with no photo, drawn in brand color. Use it
   when there is no real photo, instead of reaching for a fake one. */
.owner .rcard.record{background-color:var(--brand-deep);background-image:var(--panel-fill)}
.owner .rcard.record::after{background:var(--rings);opacity:.9}
.owner .rcard.record.dark{background-image:var(--band-fill)}
.owner .rcard.record .art{position:absolute;top:56px;right:18px;width:46%;opacity:.9;color:var(--brand-glow)}

/* -------------------------------------------------------------- marquee --
   A row that drifts on its own. Desktop: a continuous loop that pauses on
   hover and off screen. Touch screens: a swipe row a thumb can move, which
   steps one card along every few seconds when nobody is touching it (Josh's
   2026-09-05 finding on thedohenyco.com: a phone visitor could not move the
   old loop and saw two of twelve cards). Motion off: a still swipe row. */
/* Without the motion code (or before it runs) the row is a plain swipe row,
   so nothing is ever stranded off screen. */
/* 10px of room above and below, taken back from the margins, so a focus ring on a card is never cut off by the row */
.owner .marquee{position:relative;margin-top:calc(clamp(22px,3vw,32px) - 10px);margin-bottom:-10px;margin-inline:calc(-1 * var(--gutter));
  padding-block:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;overscroll-behavior-x:contain}
.owner .marquee::-webkit-scrollbar{display:none}
.owner .track{display:flex;gap:14px;width:max-content;padding-inline:var(--gutter)}
.owner .marquee:not([data-mode="loop"]) .track>[data-clone]{display:none}
/* Loop mode: the items are doubled and the track slides exactly half its
   width. Spacing is a margin, not a gap: with gap the half-width lands half a
   gap off and the loop jumps once a cycle. */
.owner .marquee[data-mode="loop"]{overflow:hidden;scroll-snap-type:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.owner .marquee[data-mode="loop"] .track{gap:0;padding-inline:0;animation:o-marquee var(--mq,60s) linear infinite}
.owner .marquee[data-mode="loop"] .track>*{margin-right:14px}
.owner .marquee[data-reverse] .track{animation-direction:reverse}
.owner .marquee.paused .track,.owner .marquee.idle .track{animation-play-state:paused}
@media(hover:hover){.owner .marquee[data-mode="loop"]:hover .track{animation-play-state:paused}}
@media(min-width:1000px){.owner .marquee{margin-inline:0}
  .owner .marquee:not([data-mode="loop"]){margin-inline:-10px;scroll-padding-inline:10px}.owner .marquee:not([data-mode="loop"]) .track{padding-inline:10px}}
/* Keyboard focus inside a loop: the row goes back to its start and stands still, with room at both ends, and motion.js
   scrolls the focused card into view. Mouse and touch leave the loop running. */
.owner .marquee[data-mode="loop"]:has(:focus-visible){-webkit-mask-image:none;mask-image:none}
.owner .marquee[data-mode="loop"]:has(:focus-visible) .track{animation:none;padding-inline:12px}
.owner .track>*{scroll-margin-inline:12px}
/* A swipe row with nothing focusable inside (reviews, chips) takes keyboard focus itself. A ring outside it would run off the
   page, and an inside one alone is covered by the cards scrolling under it. So: the top and bottom of the ring are the
   outline, over the row's 10px padding; the two sides are drawn by a frame that sticks to the visible edges of the row, above
   the cards. Each side is a deep line between paper bands, like every other ring. */
.owner .marquee:not([data-mode="loop"]){display:grid;container-type:inline-size}
.owner .marquee:not([data-mode="loop"])>.track{grid-area:1/1}
.owner .marquee:not([data-mode="loop"])::after{content:"";grid-area:1/1;position:sticky;left:0;z-index:1;width:100cqw;pointer-events:none}
.owner .marquee:focus-visible{outline:3px solid var(--brand-deep);outline-offset:-8px;box-shadow:inset 0 0 0 11px var(--paper)}
.owner .marquee:focus-visible::after{box-shadow:inset 5px 0 0 var(--paper),inset 8px 0 0 var(--brand-deep),inset 11px 0 0 var(--paper),
  inset -5px 0 0 var(--paper),inset -8px 0 0 var(--brand-deep),inset -11px 0 0 var(--paper)}

/* ------------------------------------------------------ review marquee --
   Two rows drifting in opposite directions (owner.com runs each at ~166s).
   First name and last initial, the stars they gave, their words, trimmed
   only with an ellipsis. Real reviews only. */
.owner .reviews{margin-top:clamp(22px,3vw,34px);display:grid;gap:12px}
.owner .reviews .marquee{margin-top:-10px}
.owner .review{flex:0 0 clamp(250px,70vw,300px);display:grid;align-content:space-between;gap:16px;min-height:170px;padding:16px 18px;
  border-radius:var(--r-row);background:var(--tint);color:var(--ink)}
.owner .review q{quotes:none;font:600 15px/1.4 var(--font-body)}
.owner .review .who{display:flex;align-items:center;gap:10px;font:600 13.5px/1.2 var(--font-body);color:var(--ink-2)}
.owner .mono{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-deep);color:var(--on-deep);
  display:inline-grid;place-items:center;font:700 11px/1 var(--font-body)}

/* -------------------------------------------------------- outcome tabs --
   Three or four outcomes as pill tabs. They advance on their own while in
   view (a glow bar fills under the active tab), a tap holds the choice. Each
   pane is one short H3, one line, and a drawn visual. */
.owner .tabbar{display:flex;gap:8px;margin:calc(clamp(20px,3vw,28px) - 8px) -10px -4px;overflow-x:auto;scrollbar-width:none;padding:10px}
.owner .tabbar::-webkit-scrollbar{display:none}
.owner .tab{position:relative;flex:0 0 auto;overflow:hidden;border:0;border-radius:var(--r-pill);background:var(--soft);color:var(--ink-2);
  padding:14px 18px;font:700 15px/1 var(--font-body);cursor:pointer;scroll-margin-inline:10px}
.owner .tab[aria-selected="true"]{background:var(--brand-deep);color:var(--on-deep)}
.owner .tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--brand-glow)}
.owner .tab[aria-selected="true"] i{animation:o-fill var(--tab-hold,6s) linear forwards}
.owner [data-tabs].hold .tab i,.owner [data-tabs].idle .tab i{animation:none;width:0}
.owner .tpanel{display:grid;margin-top:14px;border-radius:var(--r-panel);background:var(--tint);overflow:hidden}
.owner .tp{grid-area:1/1;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:clamp(18px,4vw,48px);
  padding:clamp(22px,4.4vw,52px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.owner .tp.on{opacity:1;visibility:visible}
@media(max-width:760px){.owner .tp{grid-template-columns:1fr}}
.owner .tp .h3{max-width:17ch}
.owner .tp p{margin-top:12px;font:500 clamp(16px,1.5vw,18px)/1.5 var(--font-body);color:var(--ink-2);max-width:40ch}
.owner .tvis{position:relative;min-height:260px;padding:20px;border-radius:24px;background:var(--paper);overflow:hidden;
  box-shadow:0 20px 50px color-mix(in srgb,var(--brand-deep) 12%,transparent)}
.owner .vhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font:700 13.5px/1 var(--font-body)}
.owner .vhead b{padding:6px 9px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink-2);font:700 11px/1 var(--font-body)}
/* visual: a ranked list where the right rows light up in turn */
.owner .v-rank ul{display:grid;gap:8px}
.owner .v-rank li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;
  background:var(--soft);font:600 14px/1.2 var(--font-body);transition:opacity .5s ease,background-color .5s ease}
.owner .v-rank li em{padding:6px 9px;border-radius:var(--r-pill);background:var(--brand-deep);color:var(--on-deep);font:700 11.5px/1 var(--font-body);
  font-style:normal;white-space:nowrap;opacity:0;transform:scale(.8);transition:opacity .4s ease,transform .4s ease}
.owner .tp.on .v-rank li:not(.hot){opacity:.32}
.owner .tp.on .v-rank li.hot{background:var(--tint)}
.owner .tp.on .v-rank li.hot em{opacity:1;transform:none}
.owner .tp.on .v-rank li:nth-child(2),.owner .tp.on .v-rank li:nth-child(2) em{transition-delay:.2s}
.owner .tp.on .v-rank li:nth-child(3),.owner .tp.on .v-rank li:nth-child(3) em{transition-delay:.4s}
.owner .tp.on .v-rank li:nth-child(4),.owner .tp.on .v-rank li:nth-child(4) em{transition-delay:.6s}
.owner .tp.on .v-rank li:nth-child(5),.owner .tp.on .v-rank li:nth-child(5) em{transition-delay:.8s}
/* visual: a timeline whose line fills to the step that matters */
.owner .v-time{padding:22px 22px 18px}
.owner .v-time .tl{position:absolute;left:38px;top:44px;bottom:52px;width:3px;border-radius:3px;background:var(--soft);overflow:hidden}
.owner .v-time .tl i{position:absolute;inset:0 0 auto;height:0;background:var(--brand);transition:height 1.6s ease .2s}
.owner .tp.on .v-time .tl i{height:100%}
.owner .tstep{position:relative;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;padding:13px 0}
.owner .tstep::before{content:"";width:13px;height:13px;margin-left:8px;border-radius:50%;background:var(--paper);border:3px solid color-mix(in srgb,var(--ink) 20%,var(--paper));position:relative;z-index:1}
.owner .tstep b{display:block;font-family:var(--font-display);font-weight:var(--display-weight);font-size:19px;letter-spacing:-.02em;line-height:1.1}
.owner .tstep span{display:block;margin-top:3px;font:500 14px/1.3 var(--font-body);color:var(--ink-2)}
.owner .tstep.hot::before{border-color:var(--brand);background:var(--brand-glow)}
.owner .tstep.hot b{color:var(--brand-deep)}
.owner .tstep.late{opacity:.5}
/* visual: a notification lands, then a box ticks */
.owner .v-note{display:grid;gap:12px;align-content:center}
.owner .v-note .n1{padding:17px 18px;border-radius:18px;background:var(--brand-deep);color:var(--on-deep);opacity:0;transform:translateY(12px);transition:opacity .5s ease .2s,transform .5s ease .2s}
.owner .v-note .n1 b{display:block;font-family:var(--font-display);font-weight:var(--display-weight);font-size:21px;letter-spacing:-.02em;line-height:1.1}
.owner .v-note .n1 span{display:block;margin-top:4px;font:500 14px/1.3 var(--font-body);opacity:.86}
.owner .v-note .n2{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;background:var(--soft);font:700 15.5px/1 var(--font-body);opacity:0;transition:opacity .5s ease .8s}
.owner .tick{flex:none;position:relative;width:26px;height:26px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 25%,var(--paper));transition:background-color .3s ease,border-color .3s ease}
.owner .tick::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--on-deep);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0;transition:opacity .2s ease}
.owner .tp.on .v-note .n1{opacity:1;transform:none}
.owner .tp.on .v-note .n2{opacity:1}
.owner .tp.on .v-note .tick{background:var(--brand);border-color:var(--brand);transition-delay:1.4s}
.owner .tp.on .v-note .tick::after{opacity:1;transition-delay:1.5s}

/* -------------------------------------------------------------- the band --
   The proof band: brand-deep gradient, three or four giant white numbers that
   count up, two-to-four word labels, and an optional chip row drifting under
   them. Counts a visitor can picture, never a rate (MARKETING-BRAIN §6.4). */
.owner .band{border-radius:var(--r-panel);padding:clamp(28px,5vw,60px);background-color:var(--brand-deep);background-image:var(--band-fill);color:var(--on-deep);overflow:hidden}
.owner .band .h2{color:var(--on-deep);max-width:16ch}
.owner .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,32px);margin-top:clamp(22px,3vw,36px)}
.owner .stats.three{grid-template-columns:repeat(3,1fr)}
.owner .stats b{display:block;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(38px,5.4vw,72px);
  line-height:.95;letter-spacing:-.05em;white-space:nowrap}
.owner .stats span{display:block;margin-top:8px;max-width:16ch;font:600 clamp(14px,1.3vw,16px)/1.35 var(--font-body);opacity:.88}
@media(max-width:760px){.owner .stats,.owner .stats.three{grid-template-columns:1fr 1fr;row-gap:22px}}
.owner .band .marquee{margin-inline:calc(-1 * clamp(28px,5vw,60px))}
.owner .chiprow{display:flex;gap:10px;width:max-content}
.owner .chiprow span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-pill);white-space:nowrap;
  background:rgb(255 255 255/.12);border:1px solid rgb(255 255 255/.2);font:600 14px/1 var(--font-body)}
.owner .chiprow span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-glow)}
.owner .band .note{color:inherit;opacity:.76}

/* -------------------------------------------------------------- bento --
   One tall photo with a caption, one brand tile with a live feed, one tint
   tile with bars that grow. Each tile: one bold line, one short line. */
.owner .bento{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:clamp(22px,3vw,32px)}
.owner .bento>*{position:relative;overflow:hidden;border-radius:28px}
.owner .b-photo{grid-row:1/3;min-height:440px;background-color:var(--ink);color:var(--on-deep)}
.owner .b-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s ease}
.owner .bento.on .b-photo img{transform:none}
.owner .b-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,color-mix(in srgb,var(--ink) 88%,transparent) 100%)}
.owner .b-photo figcaption{position:absolute;left:22px;right:22px;bottom:22px;z-index:1;max-width:34ch;font:500 16px/1.45 var(--font-body)}
.owner .bento b.t{display:block;margin-bottom:5px;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(23px,2.6vw,32px);letter-spacing:-.03em;line-height:1.05}
.owner .b-brand{padding:20px 22px 22px;background-color:var(--brand-deep);background-image:var(--panel-fill);color:var(--on-deep)}
.owner .b-tint{padding:20px 22px 22px;background:var(--tint)}
.owner .bento p{margin-top:14px;font:500 15.5px/1.45 var(--font-body)}
.owner .b-tint p{color:var(--ink-2)}
.owner .bento p b{display:block;margin-bottom:4px;font-family:var(--font-display);font-weight:var(--display-weight);font-size:21px;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.owner .b-brand p b{color:var(--on-deep)}
.owner .feedwin{height:156px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.owner .feed{animation:o-feed var(--feed,20s) linear infinite}
.owner .feed li{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:10px 12px;border-radius:12px;background:rgb(255 255 255/.14);font:600 14px/1.2 var(--font-body)}
.owner .feed li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand-glow)}
.owner .feed li em{margin-left:auto;font-style:normal;font-weight:500;font-size:12px;opacity:.8}
.owner .feedwin.idle .feed{animation-play-state:paused}
.owner .bars{display:flex;align-items:flex-end;gap:10px;height:156px}
.owner .bars i{flex:1;height:var(--h);border-radius:10px 10px 4px 4px;background:color-mix(in srgb,var(--brand) 22%,var(--paper));
  transform:scaleY(.06);transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--k,0) * 80ms)}
.owner .bars i.top{background:var(--brand)}
.owner .on .bars i{transform:none}
@media(max-width:760px){.owner .bento{grid-template-columns:1fr}.owner .b-photo{grid-row:auto;min-height:380px}}

/* ---------------------------------------------------------- price list --
   The dense moment (MARKETING-BRAIN §3.4 #3). Real prices, right-aligned,
   tabular. A page with a real price list reads as a real business. */
.owner .prices{display:grid;gap:8px;margin-top:clamp(20px,3vw,28px)}
.owner .prices li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:var(--r-row);background:var(--soft)}
.owner .prices li span{font:600 16.5px/1.3 var(--font-body)}
.owner .prices li small{display:block;margin-top:3px;font:500 13.5px/1.35 var(--font-body);color:var(--ink-2)}
.owner .prices li b{flex:none;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;color:var(--brand-deep);white-space:nowrap}

/* --------------------------------------------------------- offer card -- */
.owner .offer{margin-top:clamp(28px,4vw,48px);padding:clamp(22px,4vw,44px);border-radius:var(--r-panel);background:var(--tint)}
.owner .offer .price{font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(46px,7vw,78px);line-height:1;letter-spacing:-.05em;color:var(--brand-deep)}
.owner .offer .price small{font-size:.32em;letter-spacing:-.01em;color:var(--ink-2)}
.owner .checks{display:grid;gap:10px;margin-top:22px}
.owner .checks li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-row);background:var(--paper);font:700 16.5px/1.3 var(--font-body)}
.owner .checks li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.5l3.4 3.3L18.5 9.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.owner .checks li small{display:block;margin-top:3px;font:500 14px/1.4 var(--font-body);color:var(--ink-2)}
.owner .offer .btn.big{margin-top:16px}
.owner .offer .micro{margin-top:10px;text-align:center;font:500 13.5px/1.4 var(--font-body);color:var(--ink-2)}

/* ----------------------------------------------------------- name chips -- */
.owner .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.owner .chips li{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 6px;border-radius:var(--r-pill);background:var(--soft);font:600 14px/1.2 var(--font-body)}
.owner .chips li b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:15px;color:var(--brand-deep)}
.owner .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);background:var(--tint);color:var(--brand-deep);font:700 14px/1 var(--font-body)}
.owner .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* ----------------------------------------------------------- next steps --
   Numbered rows for a real sequence only (what happens after you book). A
   1-2-3 row describing nothing in order is a P1 tell. */
.owner .steps{display:grid;gap:10px;margin-top:clamp(20px,3vw,28px);counter-reset:o-step}
.owner .steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:14px 18px 14px 14px;border-radius:var(--r-row);background:var(--soft);counter-increment:o-step}
.owner .steps li::before{content:counter(o-step);width:44px;height:44px;border-radius:50%;background:var(--brand-deep);color:var(--on-deep);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--display-weight);font-size:19px}
.owner .steps li b{display:block;font:700 16.5px/1.3 var(--font-body)}
.owner .steps li small{display:block;margin-top:2px;font:500 14px/1.4 var(--font-body);color:var(--ink-2)}

/* ------------------------------------------------------------ questions --
   The objections, in the order a customer raises them. Answers are one or two
   sentences. This is where the words went. */
.owner .qa{display:grid;gap:10px;margin-top:22px}
.owner .qa details{padding:0 20px;border-radius:var(--r-row);background:var(--soft)}
.owner .qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;list-style:none;cursor:pointer;font:700 17px/1.3 var(--font-body)}
.owner .qa summary::-webkit-details-marker{display:none}
/* a question rings its whole rounded row, not the square summary inside it */
@supports selector(:has(*)){.owner .qa summary:focus-visible{outline:0;box-shadow:none}
  .owner .qa details:has(>summary:focus-visible){outline:3px solid var(--brand-deep);outline-offset:3px;box-shadow:0 0 0 8px var(--paper)}}
.owner .qa summary::after{content:"+";flex:0 0 30px;height:30px;border-radius:50%;background:var(--paper);color:var(--brand-deep);display:grid;place-items:center;font:600 20px/1 var(--font-body)}
.owner .qa details[open] summary::after{content:"\2212"}
.owner .qa details p{margin:0 0 18px;max-width:62ch;font:400 16px/1.55 var(--font-body);color:var(--ink-2)}

/* ------------------------------------------------------ founder / beliefs --
   owner.com's "3 beliefs" block: a heading and a real face on the left, short
   rows on the right. Each row: a bold line, then no more than 25 words. */
.owner .beliefs{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,56px)}
.owner .beliefs .face{width:clamp(160px,15vw,210px);margin-top:clamp(24px,3vw,40px)}
.owner .beliefs .face img{aspect-ratio:1;object-fit:cover;border-radius:20px}
.owner .beliefs .face figcaption{margin-top:10px;font:500 14px/1.4 var(--font-body);color:var(--ink-2)}
.owner .beliefs .face figcaption b{display:block;color:var(--ink);font-weight:700}
.owner .belief{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(14px,2.2vw,32px);padding:clamp(18px,2vw,26px) 0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.owner .belief h3{font:700 clamp(17px,1.4vw,19px)/1.3 var(--font-body);letter-spacing:-.01em}
.owner .belief p{font:500 15.5px/1.5 var(--font-body);color:var(--ink-2)}
@media(max-width:860px){.owner .beliefs,.owner .belief{grid-template-columns:1fr}}

/* -------------------------------------------------------- closing band -- */
.owner .finale{display:grid;grid-template-columns:1.1fr .9fr;border-radius:var(--r-panel);overflow:hidden;background-color:var(--brand-deep);background-image:var(--panel-fill);color:var(--on-deep)}
.owner .finale .ftext{align-self:center;padding:clamp(28px,5vw,64px)}
.owner .finale .h2{color:var(--on-deep);max-width:14ch}
.owner .finale .btn{margin-top:24px}
.owner .finale .fimg{position:relative;min-height:380px}
.owner .finale .fimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.owner .finale.noimg{grid-template-columns:1fr;text-align:center}
.owner .finale.noimg .h2{margin-inline:auto}
@media(max-width:760px){.owner .finale{grid-template-columns:1fr}.owner .finale .fimg{min-height:300px}}

/* -------------------------------------------------------- bottom sheet --
   A small case study over the page (a job, a deal, a listing), a bottom
   sheet on phones. Never a new page for one card's detail. */
.owner .sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
.owner .sheet[hidden]{display:none}
.owner .sheet .back{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 56%,transparent);animation:o-fade .25s ease}
.owner .sheet .card{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 36px);overflow:auto;padding:22px 20px 20px;border-radius:28px;background:var(--paper);box-shadow:var(--lift);animation:o-up .3s var(--ease)}
.owner .sheet .x{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:var(--soft);font:500 24px/1 var(--font-body);cursor:pointer}
@media(max-width:560px){.owner .sheet{align-items:flex-end;padding:0}.owner .sheet .card{max-width:none;max-height:88vh;border-radius:26px 26px 0 0}}
/* inside a sheet: one giant figure on the brand gradient, then a facts grid, then one source line */
.owner .figure{margin-top:16px;padding:16px 18px;border-radius:var(--r-row);background-color:var(--brand-deep);background-image:var(--panel-fill);color:var(--on-deep)}
.owner .figure b{display:block;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(40px,9vw,54px);line-height:.95;letter-spacing:-.05em}
.owner .figure span{display:block;margin-top:7px;font:700 15px/1.25 var(--font-body);color:var(--brand-glow)}
.owner .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.owner .facts>div{padding:11px 13px;border-radius:14px;background:var(--soft)}
.owner .facts>div.wide{grid-column:1/-1}
.owner .facts dt{font:600 12px/1.2 var(--font-body);color:var(--muted)}
.owner .facts dd{margin:4px 0 0;font:700 15px/1.3 var(--font-body)}

/* ------------------------------------------------------ sticky call bar --
   Phones only, for a local business: the call and the one action, always in
   reach (MARKETING-BRAIN §4.2). Nothing important may sit under it. */
.owner .callbar{display:none}
@media(max-width:760px){
  .owner .callbar{position:fixed;inset:auto 0 0 0;z-index:70;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 96%,transparent);box-shadow:0 -8px 24px color-mix(in srgb,var(--ink) 10%,transparent)}
  .owner .callbar .btn{flex:1;min-height:50px}
  .owner.has-callbar{padding-bottom:80px}
}

/* ------------------------------------------------------------- footer --
   The lockup, the real name, address and phone, the licence if the trade has
   one. Not four columns of links nobody asked for. */
.owner .foot{margin-top:clamp(40px,6vw,80px);padding-block:clamp(28px,4vw,48px);border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.owner .foot .wrap{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px}
.owner .foot .lock{font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(20px,2vw,26px);letter-spacing:-.03em}
.owner .foot address{margin-top:10px;font:500 14px/1.6 var(--font-body);font-style:normal;color:var(--ink-2)}
.owner .foot address a{text-decoration:underline;text-underline-offset:3px}
.owner .foot small{display:block;width:100%;font:500 12.5px/1.5 var(--font-body);color:var(--muted)}

/* ------------------------------------------------------------- reveals --
   A section fades up as it enters. Hidden ONLY after the motion code has run
   (html.motion-ready), so a page whose script fails still shows everything.
   Never on anything in the first screen: the H1, the input, the button and
   the price never wait on an animation. */
html.motion-ready .owner [data-reveal]:not(.on){opacity:0;transform:translateY(16px)}
.owner [data-reveal]{transition:opacity .7s ease,transform .7s var(--ease)}

/* Pause motion (WCAG 2.2.2): one button stops every loop on the page and remembers it. Loops hold where they are, the
   demo rail included (an animation, not a transition, so it can hold). A one-time entrance finishes at once instead:
   held on its first frame, a sheet would open at opacity 0. */
html.motion-paused .owner *,html.motion-paused .owner *::before,html.motion-paused .owner *::after{animation-play-state:paused!important}
html.motion-paused .owner .sheet .back,html.motion-paused .owner .sheet .card{animation:none}
.owner .motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-pill);
  background:var(--soft);color:var(--ink-2);font:600 13px/1 var(--font-body);cursor:pointer}
.owner .motion-toggle:hover{background:var(--tint);color:var(--ink)}
.owner .motion-toggle::before{content:"";width:10px;height:10px;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
html.motion-paused .owner .motion-toggle::before{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

@keyframes o-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes o-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes o-fill{to{width:100%}}
@keyframes o-rail{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes o-feed{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes o-fade{from{opacity:0}to{opacity:1}}
@keyframes o-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ------------------------------------------------ motion switched off --
   The same page and the same reading time, just still. Rows become swipe
   rows, tabs stop advancing, numbers show their final value. */
@media(prefers-reduced-motion:reduce){
  .owner *,.owner *::before,.owner *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.motion-ready .owner [data-reveal]:not(.on){opacity:1;transform:none}
  .owner .marquee .track,.owner .feed{animation:none!important}
  .owner .rcard>img,.owner .b-photo img{transform:none!important}
}