/* ==========================================================================
   wovue.ai: content concierge for local shops

   The page argues one thing in order: why you need us, what we do, what you
   get, who we are, what it costs, then the booking calendar. Each section is
   one idea with as little around it as possible.

   Type. Headlines are Newsreader at weight 500, with at most one italic
   phrase. Interface (wordmark, buttons, labels, product mock-ups) is Inter,
   which matches the grotesque wordmark in the official logo. To go back to an
   all-sans page, point --display at var(--ui).

   Colour. Cream and paper carry the page, ink and navy carry the text, indigo
   is kept for actions. Pastel tints appear only as panels behind
   illustrations, one tint per card, set inline as --tint.

   Illustration. Flat, filled, faceless people, no outlines. They live in the
   sprite in index.html as fig-* symbols. The line glyphs and the sample
   drawings are pen-drawn instead (see "Pen draw-on").

   CJK post content uses the system CJK stack, so a phone downloads no extra
   megabytes for three lines of Chinese.
   ========================================================================== */

/* -- Tokens -------------------------------------------------------------- */
:root{
  --cream:#F5F3EE;
  --cream-2:#EFECE4;
  --paper:#FDFCF9;
  --ink:#15171C;
  --indigo:#4B3B8F;
  --indigo-deep:#3F3178;
  --indigo-soft:#EDE9F7;
  --grey:#5B606B;
  --navy:#1E2238;
  /* Back strands of the woven mark. Custom properties inherit into a <use>
     shadow tree, so the symbol reads this. Lifted on dark surfaces. */
  --mark-back:#4B3B8F;

  --rule:rgba(21,23,28,.12);
  --rule-strong:rgba(21,23,28,.22);
  --rule-light:rgba(245,243,238,.18);

  --shadow-sm:0 1px 0 rgba(21,23,28,.03), 0 2px 6px -1px rgba(21,23,28,.06);
  --shadow-md:0 1px 2px rgba(21,23,28,.05), 0 14px 32px -12px rgba(21,23,28,.16);
  --shadow-lg:0 2px 4px rgba(21,23,28,.06), 0 30px 64px -20px rgba(21,23,28,.26);

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ui:var(--sans);
  --display:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --cjk:"PingFang SC","Noto Sans SC","Hiragino Sans","Hiragino Sans GB","Yu Gothic","Microsoft YaHei",var(--sans);

  --gutter:16px;
  --maxw:1120px;
  --radius:14px;
  --radius-lg:22px;
  --header-h:54px;
  --sheet:26px;
}

/* -- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 28px)}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--indigo);outline-offset:3px;border-radius:4px}
/* Indigo on navy is 1.73:1, under WCAG 1.4.11's 3:1, so the footer gets a
   cream ring instead. */
.foot :focus-visible,.result :focus-visible{outline-color:var(--cream)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* -- Layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:72px;position:relative}
/* Sections are sheets laid one over the next: each rounds off its top corners and
   slides up over the bottom of the one before, so the break between them is a
   shape, not a line. The overlap is smaller than every section's bottom padding,
   so no content is covered. */
.sec + .sec,.legal + .sec,main + .foot{
  margin-top:calc(-1 * var(--sheet));border-radius:var(--sheet) var(--sheet) 0 0;
  border-top:1px solid var(--rule);box-shadow:0 -14px 26px -22px rgba(21,23,28,.22);
}
/* Only a sheet that overlaps the one above needs to be opaque. The first section on
   a page stays clear so the weave behind its heading shows through. */
.sec + .sec,.legal + .sec{background:var(--cream)}
.sec.sec--paper{background:var(--paper)}

/* -- Type ---------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.018em;line-height:1.08;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(39px,9.2vw,68px);letter-spacing:-.028em;line-height:1.03}
h2{font-size:clamp(31px,6.4vw,50px);letter-spacing:-.022em;max-width:17em}
h3{font-size:clamp(20px,2.5vw,24px);letter-spacing:-.008em;line-height:1.22}
h4{font-family:var(--ui);font-weight:600;font-size:16px;letter-spacing:-.006em;line-height:1.3}
/* The one italic phrase a headline is allowed. */
h1 em,h2 em,h3 em{font-style:italic;font-weight:400}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--grey);line-height:1.55;max-width:34em;text-wrap:pretty}
h1+.lede{margin-top:20px}
.lede + .lede{margin-top:12px}
.muted{color:var(--grey)}
.small{font-size:14px}
.cjk{font-family:var(--cjk)}
strong,b{font-weight:600}

/* -- Buttons -------------------------------------------------------------
   Tactile: a lit top edge, a shaded bottom edge, and a shadow that
   compresses when pressed. --tx and --ty are set by site.js on buttons
   marked data-magnetic and are zero everywhere else. The pull uses the
   translate property and the press uses transform, so they compose. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:999px;
  font-family:var(--ui);font-size:16px;font-weight:600;letter-spacing:-.006em;text-decoration:none;
  white-space:nowrap;cursor:pointer;
  translate:var(--tx,0px) var(--ty,0px);
  transition:translate .3s cubic-bezier(.2,.8,.2,1), transform .16s ease, background-color .18s ease, box-shadow .2s ease, border-color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:var(--indigo);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.2),
             0 1px 2px rgba(41,30,92,.38), 0 10px 22px -8px rgba(75,59,143,.55);
}
.btn--primary:hover{
  background:var(--indigo-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.2),
             0 2px 4px rgba(41,30,92,.4), 0 16px 30px -10px rgba(75,59,143,.6);
}
.btn--primary:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.3), 0 1px 1px rgba(41,30,92,.3)}
/* A calendar before the label on full-size booking buttons, like the play icon on the film button. */
.btn--primary:not(.btn--sm)::before{
  content:"";width:18px;height:18px;flex:none;margin-left:-4px;background-color:currentColor;
  -webkit-mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
/* Arrow on full-size primary actions. Masked, so it takes the label colour. */
.btn--primary:not(.btn--sm)::after{
  content:"";width:17px;height:17px;flex:none;margin-right:-5px;background-color:currentColor;
  -webkit-mask:no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask:no-repeat center/17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:translate .22s cubic-bezier(.2,.8,.2,1);
}
.btn--primary:not(.btn--sm):hover::after{translate:3px 0}
.btn--ghost{background:rgba(253,252,249,.55);color:var(--ink);border:1.5px solid var(--rule-strong)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper)}
.btn--sm{min-height:44px;padding:0 17px;font-size:14.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}

/* -- Header: floating pill ----------------------------------------------
   Sits clear of the edges instead of welded to the top, and deepens its
   shadow once the page has scrolled. .topbar__in is the pill. It also
   carries .wrap, whose max-width and padding the rule below replaces. */
.topbar{position:sticky;top:10px;z-index:60;margin-top:10px;padding-inline:var(--gutter);pointer-events:none}
.topbar__in{
  pointer-events:auto;display:flex;align-items:center;gap:20px;
  height:var(--header-h);max-width:calc(var(--maxw) - 2 * var(--gutter));padding:0 6px 0 16px;
  border-radius:999px;border:1px solid var(--rule);
  background:rgba(253,252,249,.78);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:var(--shadow-sm);transition:box-shadow .25s ease, background-color .25s ease;
}
.topbar.is-stuck .topbar__in{background:rgba(253,252,249,.92);box-shadow:var(--shadow-md)}
/* The wordmark follows the official logo: a heavy grotesque, set tight. */
.brand{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;font-size:20px;letter-spacing:-.045em;text-decoration:none}
.brand svg,.brand img{width:30px;height:30px;flex:none}
.navlinks{display:none;gap:24px;font-size:14.5px;font-weight:500;color:var(--grey);margin-left:auto}
.navlinks a{text-decoration:none;padding:8px 2px;transition:color .18s ease}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--ink)}
.topbar .btn{margin-left:auto}

/* Sticky mobile consult bar */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,243,238,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--rule);
  transform:translateY(110%);transition:transform .28s ease;
}
.mobar.is-on{transform:translateY(0)}
.mobar .btn{width:100%}

/* -- Pen draw-on ---------------------------------------------------------
   For the line glyphs and the sample drawings only (the figures are flat
   fills now). Only figures inside a .draw container are pen-drawn, and only
   while JS is running to reveal them (site.js puts .js on <html>). No JS, no
   hiding.

   The dash properties sit on the <svg> host, not on the shapes. A CSS
   selector cannot reach inside a <use> shadow tree, but stroke-dasharray and
   stroke-dashoffset are inherited SVG properties, so they cascade into the
   cloned symbol. Every drawable shape carries pathLength="100", which
   normalises its length so a single dash value fits all of them. */
.ink{overflow:visible}
.ink [stroke]{stroke-linecap:round;stroke-linejoin:round}
.flat{width:100%;height:auto;overflow:visible}

.js .draw .ink{
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .85s cubic-bezier(.33,0,.2,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.js .in-view .draw .ink,
.js .draw.in-view .ink{stroke-dashoffset:0}

/* Reveal for blocks that are not drawn */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s cubic-bezier(.33,0,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .in-view.rise,.js .in-view .rise{opacity:1;transform:none}

/* -- The weave (canvas) ---------------------------------------------------
   site.js draws slack ink threads here: the mark's own strands, loose in the
   hero and pulled taut into the mark in "How it works". Decorative only. Each
   canvas is aria-hidden, takes no pointer events, and stays empty with JS
   off, which leaves the page exactly as it reads without it. */
.weave{display:block;pointer-events:none}
.weave--sec{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.sec>.wrap{position:relative;z-index:1}
/* The top of an inner page: the weave runs behind the heading, fading out below it. */
main{position:relative}
.weave--top{position:absolute;left:0;right:0;top:0;width:100%;height:440px;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
main>.legal{position:relative;z-index:1}
.weave--field{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  /* Kept out from under the copy: on a phone the copy is on top. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 50%,#000 82%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 50%,#000 82%);
}

/* -- Hero ---------------------------------------------------------------- */
.hero{padding-block:40px 64px;overflow:hidden}
.hero__grid{display:grid;gap:40px;position:relative;z-index:1}
.hero__grid>*{min-width:0}
/* Scene and phone share the column, bottom-aligned. Both are sized in
   percentages so the pair can never exceed the column width. */
.hero__art{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:10px}
.hero__scene{width:48%;max-width:200px;flex:none}
.hero__phone{width:50%;max-width:215px;flex:none}

/* -- Phone mock ---------------------------------------------------------- */
.phone{border-radius:28px;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-lg);padding:9px}
.phone__bar{display:flex;align-items:center;justify-content:center;height:14px;margin-bottom:5px}
.phone__bar i{display:block;width:46px;height:4px;border-radius:999px;background:var(--rule)}
.phone__screen{border-radius:20px;background:var(--cream);padding:11px;overflow:hidden}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:13px;box-shadow:var(--shadow-sm)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:11px}
.card__title{font-family:var(--ui);font-weight:600;font-size:14px;letter-spacing:-.01em}
.pill{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;background:var(--indigo-soft);color:var(--indigo);
}
.pill--quiet{background:var(--cream-2);color:var(--grey)}
.pill--sample{background:rgba(21,23,28,.06);color:var(--ink)}
.shotlist{list-style:none;display:grid;gap:8px}
.shotlist li{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.35}
.shotlist .box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--rule-strong);flex:none;position:relative}
.shotlist .box--on{background:var(--indigo);border-color:var(--indigo)}
.shotlist .box--on::after{content:"";position:absolute;inset:0;background:no-repeat center/10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2'/%3E%3C/svg%3E")}
.shotlist li.done{color:var(--grey)}
.shotlist li.done span{text-decoration:line-through;text-decoration-color:var(--rule-strong)}
.phone__foot{margin-top:11px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--grey)}
.phone__btn{flex:1;background:var(--indigo);color:#fff;border-radius:9px;text-align:center;padding:8px 0;font-size:12px;font-weight:600}

/* -- Why you need us: one figure per kind of shop ------------------------- */
.owners{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:44px}
.owner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:12px 12px 18px;box-shadow:var(--shadow-sm);
}
.owner__bubble{
  position:relative;width:100%;min-height:58px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);border:1px solid var(--rule);border-radius:var(--radius);
  padding:9px 11px;font-size:14px;line-height:1.3;font-weight:500;
}
.owner__bubble::after{
  content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;
  width:11px;height:11px;background:var(--cream);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);rotate:45deg;
}
.owner__fig{width:100%;border-radius:var(--radius);background:var(--tint,var(--indigo-soft));padding:14px 6px 0;overflow:hidden}
.owner__fig .flat{max-width:150px;margin-inline:auto}
.owner__role{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-top:2px}
.owner__fix{font-size:14.5px;line-height:1.4;padding-inline:4px}

/* -- What we do: lockup, steps, result ------------------------------------ */
.lockup{text-align:center;position:relative}
.lockup h2{margin-inline:auto}
.lockup .lede{margin:18px auto 0}
/* The mark and the canvas that weaves it. The SVG is the real mark and is
   what shows with JS off or reduced motion. site.js adds .is-weaving while
   the threads are slack, then .is-woven to hand over to the SVG. */
.lockup__mark{position:relative;width:104px;height:104px;margin:0 auto 22px}
.lockup__mark .ink{width:100%;height:100%;transition:opacity .7s ease;color:var(--ink)}
.weave--mark{position:absolute;left:50%;top:50%;width:280px;height:280px;translate:-50% -50%;transition:opacity .9s ease}
.lockup__mark.is-weaving .ink{opacity:0}
.lockup__mark.is-woven .weave--mark{opacity:0}
/* A printout taken before the visitor scrolls here still gets the mark. */
@media print{.lockup__mark.is-weaving .ink{opacity:1}.weave{display:none}}

.steps{display:grid;gap:14px;margin-top:48px}
.step{
  background:var(--cream);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.step__top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.chip-ic{width:34px;height:34px;border-radius:50%;background:var(--tint,var(--indigo-soft));display:grid;place-items:center;flex:none;color:var(--indigo)}
.chip-ic .ink{width:18px;height:18px}
.step__who{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;margin-left:auto;flex:none;
}
.step__who--you{background:var(--cream-2);color:var(--grey)}
.step__who--us{background:var(--indigo-soft);color:var(--indigo)}
.step p{font-size:15.5px;color:var(--grey);line-height:1.5}
.step__art{margin-top:auto;padding:14px 10px 6px;border-radius:var(--radius);background:var(--tint,var(--indigo-soft))}
.step__art .flat{max-width:290px;margin-inline:auto}

.result{
  margin-top:14px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--navy);color:var(--cream);display:grid;
}
.result__txt{padding:30px 24px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.result h3{font-size:clamp(28px,4.4vw,40px);line-height:1.08;letter-spacing:-.02em}
.result p{font-size:16.5px;color:rgba(245,243,238,.72);line-height:1.5;max-width:26em}
.result .btn{margin-top:10px}
.result__art{background:#252A4A;padding:18px 18px 0;align-self:stretch;display:flex;align-items:flex-end}
.result__art .flat{max-width:420px;margin-inline:auto}

/* -- What you get: sample posts and the weekly recap ---------------------- */
.samples{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:40px}
.sample{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
/* Which platform a post is for: its own mark, in its own colour, above the caption. */
.sample__row{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;font-size:12px;color:var(--grey);line-height:1.2}
.sample__row b{font-weight:600;color:var(--ink)}
.sample__row>span{flex:1 1 0;min-width:0}
.sample__foot{padding:11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.sample__cap{font-size:13px;line-height:1.4}
.sample__tags{font-size:12px;line-height:1.35;color:var(--indigo)}
.sample .pill--sample{z-index:2;position:absolute;top:9px;right:9px;font-size:9.5px;padding:3px 8px;background:rgba(21,23,28,.76);color:#fff}


/* -- Sample posts: thumbnails framed the way each platform shows a post ------ */
.sample__shot{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--cream-2)}
.sample__shot .flat{position:absolute;inset:0;width:100%;height:100%}
.sample__ui{position:absolute;inset:0;color:#fff;pointer-events:none;font-size:11px;font-weight:600}
.sample__ui .ink{width:19px;height:19px;filter:drop-shadow(0 1px 2px rgba(21,23,28,.4))}
.sample__ui b{font-weight:600;text-shadow:0 1px 2px rgba(21,23,28,.45)}
.ui-av{display:block;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#F2B94B,#E8735A 55%,#4B3B8F);box-shadow:0 0 0 1.5px #fff;flex:none}
.ui-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:7px;padding:9px 10px 22px;background:linear-gradient(rgba(21,23,28,.38),transparent)}
.sample__shot--ig .ui-top,.sample__shot--nd .ui-top,.sample__shot--li .ui-top{padding-right:72px}
.sample__shot--tt .sample__ui,.sample__shot--yt .sample__ui{background:linear-gradient(270deg,rgba(21,23,28,.24),transparent 30%)}
.ui-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:22px 10px 9px;background:linear-gradient(transparent,rgba(21,23,28,.5))}
.ui-bar .end{margin-left:auto}
.ui-i{display:inline-flex;align-items:center;gap:4px}
.ui-i em{font-style:normal;font-weight:600;font-size:11px;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(21,23,28,.5)}
.ui-bar--rn .ui-i{margin-left:auto}
.ui-bar--rn{gap:7px}
.ui-bar--rn .end{margin-left:auto}
.ui-rail{position:absolute;right:6px;bottom:24px;display:grid;justify-items:center;gap:11px}
.ui-rail .ui-i{flex-direction:column;gap:2px}
.ui-rail .ui-i em{font-size:10px}
.ui-prog{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.ui-prog i{display:block;width:38%;height:100%;border-radius:2px;background:#fff}
.sample__shot--yt .ui-prog i{background:#FF0000}

/* -- The weekly recap: a sample shop's week, with the bars growing in ---------
   Everything here is labelled sample data. The bars and meters grow once, when
   the card scrolls into view, and sit at full size without JS or with reduced
   motion. */
.recap{
  margin:28px 0 0;overflow:hidden;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.recap__shop{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  background:var(--indigo);color:#fff;padding:12px 22px;font-size:14.5px;font-weight:600;letter-spacing:-.005em;
}
.recap__shop span{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.18);padding:3px 9px;border-radius:999px;
}
.recap__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:20px 22px 0}
.recap__body{display:grid;gap:22px;padding:18px 22px 6px}
.chart__title{font-size:14px;color:var(--grey)}
.chart__title strong{font-family:var(--display);font-weight:500;font-size:40px;letter-spacing:-.02em;color:var(--ink);margin-right:4px;font-variant-numeric:lining-nums}
.bars{list-style:none;display:flex;gap:10px;margin-top:14px;padding-top:22px;border-bottom:1px solid var(--rule)}
.bars li{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.bar__wrap{display:flex;align-items:flex-end;width:100%;height:150px}
.bar{
  position:relative;display:block;width:100%;height:var(--h);
  border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,#8E7BD6,var(--indigo));
}
.bars li.is-peak .bar{background:linear-gradient(180deg,#F2B94B,#E8735A)}
.bar b{
  position:absolute;left:50%;bottom:calc(100% + 5px);translate:-50% 0;
  font-size:11.5px;font-weight:600;color:var(--grey);font-variant-numeric:tabular-nums;
}
.bars li.is-peak .bar b{color:#B04A33}
.bar__d{font-size:11.5px;color:var(--grey);font-weight:500;padding-bottom:8px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{position:relative;border-radius:var(--radius);padding:14px;background:var(--soft)}
.tile dt{min-height:2.6em;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--grey)}
.tile dd{font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-top:4px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.tile--coral{--soft:#FBE6DF;--fill:#E8735A}
.tile--gold{--soft:#FBF1D2;--fill:#E0A438}
.tile--green{--soft:#E1EFE6;--fill:#4E8B6A}
.tile--indigo{--soft:#EDE9F7;--fill:var(--indigo)}
.recap__src{padding:14px 22px 20px;font-size:12.5px;color:var(--grey);line-height:1.5}

/* Grow in */
.js .recap .bar{height:0;transition:height .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms + 250ms)}
.js .recap .bar b{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i,0) * 90ms + 800ms)}
.js .recap.in-view .bar{height:var(--h)}
.js .recap.in-view .bar b{opacity:1}

/* -- Same shop, different communities: three posts, three audiences ------------- */
.tailor-head h2{max-width:20em}
.tailor-head .lede{margin-top:16px}
.tailor{display:grid;gap:14px;margin-top:32px}
.tailor .sample{border-radius:var(--radius-lg)}
.tailor .sample__cap{font-size:14.5px}
.diff{margin-top:6px;padding-top:12px;border-top:1px solid var(--rule);display:grid;gap:9px}
.diff div{display:grid;grid-template-columns:62px 1fr;gap:10px}
.diff dt{padding-top:2px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.diff dd{font-size:13.5px;line-height:1.4}
.tailor__note{margin-top:20px;max-width:46em;font-size:14.5px;line-height:1.5;color:var(--grey)}
.h2--second{margin-top:72px}
/* What each platform's version actually looks like: a title and a swipe hint on the note, text on screen on the video. */
.ui-title{position:absolute;left:10px;right:10px;top:12px;padding-right:62px;font-size:15px;font-weight:600;line-height:1.25;text-shadow:0 1px 3px rgba(21,23,28,.55)}
.ui-dots{position:absolute;left:0;right:0;bottom:34px;display:flex;justify-content:center;gap:4px}
.ui-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}
.ui-dots i.on{background:#fff}
.ui-say{position:absolute;left:50%;top:44%;translate:-50% 0;max-width:80%;padding:6px 11px;border-radius:8px;background:rgba(21,23,28,.62);font-size:12px;font-weight:600;text-align:center;white-space:nowrap}

/* -- Who we are ---------------------------------------------------------- */
.team{margin-top:36px;display:grid;gap:16px}
.person{
  display:grid;gap:18px;align-items:start;
  background:var(--cream);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:22px;
}
.person__role{margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo)}
.portrait{
  width:96px;height:96px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--indigo-soft);position:relative;
  /* Hairline edge so a headshot cut out on white still reads as a circle
     next to one shot on a dark background. */
  box-shadow:inset 0 0 0 1px rgba(21,23,28,.12);
}
.portrait img{width:100%;height:100%;object-fit:cover}
.founder__name{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:-.01em;line-height:1.15}

/* -- Plans --------------------------------------------------------------- */
.plans{display:grid;gap:16px;margin-top:40px}
.plan{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.plan--lead{border-color:var(--indigo);box-shadow:0 2px 6px rgba(75,59,143,.14), 0 18px 44px rgba(75,59,143,.14)}
.plan__head h2,.plan__head h3{font-size:28px;font-weight:500;letter-spacing:-.014em;line-height:1.1}
.plan__head p{margin-top:6px;font-size:14.5px;color:var(--grey);line-height:1.45}
.plan ul{list-style:none;display:grid;gap:9px}
.plan .tick{margin-top:22px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.plan li .ink{width:17px;height:17px;flex:none;margin-top:2.5px}
.plan .tick .ink{color:var(--indigo)}
.plan__sub{margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.plan .opt li{color:var(--grey)}
.plan .opt .ink{color:var(--rule-strong);color:#9A9FAB}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan .tick{margin-bottom:26px}
/* Add-ons and terms that hold for both plans sit under both, at the same width. */
.addons{margin-top:16px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:22px 24px}
.addons .opt{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px}
.addons .opt li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.4;color:var(--grey)}
.addons .opt .ink{width:17px;height:17px;flex:none;margin-top:2.5px;color:#9A9FAB}
.notes{
  list-style:none;margin-top:16px;display:grid;gap:10px;
  background:var(--cream);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:22px 24px;
}
.notes li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--grey)}
.notes li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--indigo)}

/* -- FAQ ----------------------------------------------------------------- */
.faq{margin-top:36px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-size:20.5px;font-weight:500;letter-spacing:-.008em;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:26px;width:13px;height:13px;
  background:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%235B606B' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 1v12M1 7h12'/%3E%3C/svg%3E");
  transition:rotate .22s ease;
}
.faq details[open] summary::after{rotate:135deg}
.faq p{padding:0 40px 22px 0;font-size:16px;color:var(--grey);line-height:1.55;max-width:60em}

/* -- Book: the heading and the whole calendar, one screen ------------------ */
.sec--book{padding-block:36px 44px}
.book__grid{display:grid;gap:18px;align-items:start}
.book__side h1{font-size:clamp(32px,5vw,46px)}
.book__fallback{margin-top:14px;font-size:14.5px;color:var(--grey);line-height:1.5}
.book__fallback a{color:var(--indigo)}
.sched{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
}
/* Sized to the screen so the calendar and its time slots fit without a page
   scroll. Two classes, because Calendly's widget.css sets a fixed height on
   .calendly-inline-widget and loads after this file. The iframe is sized here
   too: when their stylesheet does not do it the browser default is 150px and
   the visitor sees only a spinner. */
.sched .sched__embed{height:clamp(600px,calc(100svh - 150px),720px);min-width:280px}
.sched__embed iframe{display:block;width:100%;height:100%;border:0}
.sched__placeholder{padding:28px 22px;text-align:center;display:grid;place-items:center;gap:12px;min-height:360px;align-content:center}
.sched__placeholder a{color:var(--indigo)}
.sched__placeholder h2{font-size:26px}
.book__lang{margin-top:12px;font-size:14.5px;color:var(--grey);line-height:1.5;max-width:30em}
.book__meta{margin-top:12px;font-size:16px;color:var(--grey);line-height:1.5}
.prices{margin-top:14px;font-size:16px;color:var(--grey);max-width:34em}


/* -- Hero reassurance row: three things a hesitant owner wants to know, right
   under the button. -- */
.assure{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.assure li{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;border-radius:999px;
  background:rgba(253,252,249,.7);border:1px solid var(--rule);font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.2;
}
.assure .ink{width:18px;height:18px;flex:none;color:var(--indigo)}


/* -- Hero: the platforms, official logos aligned on height -- */
.onplat{margin-top:20px}
.onplat__label{margin-bottom:10px;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.onplat ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.onplat img{display:block;height:22px;width:auto}
/* Icon-only official marks beside each sample post's platform name. */
.mk{display:block;height:26px;width:auto;flex:none}
/* The film button is a placeholder until a film URL is set. */
.soon{margin-left:4px;padding:3px 8px;border-radius:999px;background:var(--indigo-soft);color:var(--indigo);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.btn .ink{width:16px;height:16px;flex:none}
.btn[aria-disabled="true"]{cursor:default}
.btn--ghost[aria-disabled="true"]:hover{border-color:var(--rule-strong);background:rgba(253,252,249,.55)}
.btn[aria-disabled="true"]:active{transform:none}

/* -- Inner pages (Plans, Team, About, legal) and the home page's short versions -- */
.page{padding-block:48px 72px}
.page-h{font-size:clamp(36px,7vw,60px);max-width:14em}
.page .plans,.page .team{margin-top:36px}
.teasers{display:grid;gap:14px;margin-top:36px}
.teaser{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:var(--cream);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:24px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.teaser:hover{border-color:var(--indigo);box-shadow:var(--shadow-md)}
.teaser h3{font-size:28px;line-height:1.1}
.teaser p{font-size:15.5px;color:var(--grey);line-height:1.5;max-width:32em}
.more{margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:600;color:var(--indigo)}
.more::after{content:" →";content:" →" / ""}
.person__bio{margin-top:12px;font-size:16.5px;color:var(--grey);line-height:1.6}
.person__line{margin-top:10px;font-size:15.5px;color:var(--grey);line-height:1.5}
.person--full{padding:28px 24px}
.portrait--lg{width:128px;height:128px}
.person--full .founder__name{font-size:30px}
.cta{text-align:center;padding-block:80px}
.cta h2{margin-inline:auto;margin-bottom:28px;max-width:none}

/* -- Footer -------------------------------------------------------------- */
.foot{background:var(--navy);color:var(--cream);padding-block:56px 32px;--mark-back:#A79DE0;position:relative;overflow:hidden}
.weave--foot{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.foot .wrap{position:relative;z-index:1}
.foot a{color:rgba(245,243,238,.78);text-decoration:none}
.foot a:hover{color:var(--cream);text-decoration:underline}
.foot .brand{color:var(--cream)}
.foot__top{display:grid;gap:36px}
.foot__mail{margin-top:14px;font-size:15px}
/* The address underlined so it reads as something to click. */
.foot .foot__mail a{color:var(--cream);text-decoration:underline;text-decoration-color:rgba(245,243,238,.45);text-underline-offset:4px;text-decoration-thickness:1px}
.foot .foot__mail a:hover{text-decoration-color:var(--cream)}
.foot__tagline{margin-top:14px;font-family:var(--display);font-style:italic;font-weight:400;font-size:24px;letter-spacing:-.01em;color:rgba(245,243,238,.88);max-width:14em;line-height:1.2}
.foot__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 32px}
.foot__h{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,238,.5);margin-bottom:13px}
.foot ul{list-style:none;display:grid;gap:2px;font-size:15px}
/* Tap targets: bare footer links sit well under the 24px WCAG 2.5.8 floor. */
.foot ul a{display:inline-block;padding:5px 0}
.foot__bot{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--rule-light);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(245,243,238,.6);
}
.foot .socials{display:flex;gap:4px;margin-right:-8px}
.socials li{display:block}
.soc{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:rgba(245,243,238,.5)}
.soc .ink{width:22px;height:22px}
.foot .socials a.soc{display:grid;place-items:center;width:40px;height:40px;padding:0;color:rgba(245,243,238,.85);text-decoration:none;transition:background-color .18s ease}
.foot .socials a.soc:hover{background:rgba(245,243,238,.1);color:#fff;text-decoration:none}
/* Under 860px the footer is one centred column: brand, links, then the small print. */
@media (max-width:859px){
  .foot__top{justify-items:center;text-align:center}
  .foot .brand{justify-content:center}
  .foot__tagline{margin-inline:auto}
  .foot__cols{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 56px}
  .foot__bot{flex-direction:column;justify-content:center;text-align:center;gap:10px}
  .foot .socials{margin-right:0;justify-content:center}
}

/* -- Legal pages --------------------------------------------------------- */
.legal{max-width:680px;margin-inline:auto;padding-block:56px 80px}
.legal h1{font-size:clamp(32px,7vw,46px)}
.legal .meta{margin-top:12px;padding-bottom:26px;border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--grey)}
.legal h2{font-size:19px;margin-top:38px;margin-bottom:10px}
.legal p,.legal li{font-size:16.5px;color:var(--grey);line-height:1.6}
.legal p{margin-bottom:13px}
.legal ul{padding-left:20px;margin-bottom:14px;display:grid;gap:6px}
.legal a{color:var(--indigo)}
.legal strong{color:var(--ink)}
.legal .lede{font-size:clamp(17px,2.2vw,20px);line-height:1.55;margin-top:18px;margin-bottom:8px}
.legal.about{max-width:780px}
.legal .meta a,.legal p a{color:var(--indigo)}
.principles{display:grid;gap:14px;margin-top:28px}
.principle{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:22px}
.principle h3{font-size:22px}
.principle p{margin-top:8px;margin-bottom:0;font-size:15.5px}

/* -- Breakpoints --------------------------------------------------------- */
@media (max-width:600px){
  /* On a phone the row swaps to the icon-only marks, so all six sit on one line with the note. */
  .onplat,.onplat ul{gap:8px}
  .onplat img{height:24px}
  }
@media (min-width:601px){
  /* Above phone width the note always sits on its own line under the logos. */
    /* Its wordmark is much wider than the others, so it is set a little smaller to sit level with YouTube's. */
  .onplat img[alt="Nextdoor"]{height:17px}
}
@media (min-width:720px){
  .tailor{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (min-width:600px){
  :root{--gutter:24px}
  .recap__body{grid-template-columns:1.25fr 1fr;align-items:end;gap:26px}
  .samples{grid-template-columns:repeat(3,1fr)}
  .owners{grid-template-columns:repeat(3,1fr);gap:14px}
        .person{grid-template-columns:auto 1fr;gap:20px}
  .hero__art{gap:18px}
  .hero__scene{max-width:250px}
  .hero__phone{max-width:250px}
}
@media (min-width:860px){
  :root{--header-h:58px;--gutter:32px;--sheet:40px}
  .topbar{top:14px;margin-top:14px}
  .topbar__in{padding:0 7px 0 20px}
  .navlinks{display:flex}
  .navlinks+.btn{margin-left:20px}
  .sec{padding-block:112px}
  .hero{padding-block:60px 104px}
  .hero__grid{grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
  .hero__art{gap:0}
  .hero__scene{width:56%;max-width:300px}
  .hero__phone{width:196px;max-width:none;margin-left:-6px;margin-bottom:8px}
  /* Copy is on the left here, so the threads fade out sideways instead. */
  .weave--field{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 45%,#000 76%);
    mask-image:linear-gradient(90deg,transparent 0,transparent 45%,#000 76%);
  }
  .mobar{display:none}
  .owners{grid-template-columns:repeat(6,1fr);gap:12px}
  .owner{padding:10px 10px 18px}
  .owner__bubble{font-size:13.5px;min-height:70px}
  .owner__fix{font-size:14px}
  .lockup__mark{width:120px;height:120px}
  .weave--mark{width:330px;height:330px}
  .steps{grid-template-columns:repeat(2,1fr);gap:16px}
  .step{padding:24px}
  .result{grid-template-columns:1fr 1.15fr;align-items:center;margin-top:16px}
  .result__txt{padding:44px 40px}
  .result__art{padding:26px 26px 0}
  .plans{grid-template-columns:1fr 1fr;gap:20px}
  .teasers{grid-template-columns:1fr 1fr;gap:20px}
  .page{padding-block:72px 96px}
  .person{padding:26px}
  .person--full{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:32px}
  .principles{grid-template-columns:repeat(3,1fr)}
  .team.team--full{grid-template-columns:1fr;max-width:820px}
  .cta{padding-block:112px}
  .plan{padding:30px 28px}
  .team{grid-template-columns:1fr 1fr;gap:20px}
  .sec--book{padding-block:40px 48px}
  .book__grid{grid-template-columns:.55fr 1.45fr;gap:44px}
  .book__side{padding-top:28px}
  .foot__top{grid-template-columns:1.1fr 1.9fr;gap:48px}
  .foot__cols{display:grid;grid-template-columns:repeat(3,auto);gap:28px 64px;justify-content:end;text-align:left}
}
@media (min-width:1024px){
  .samples{gap:16px}
  .hero__scene{width:58%;max-width:330px}
  .hero__phone{width:216px;margin-left:-6px}
}
@media (max-width:359px){
  /* A 138px card has no room for the handle beside the Sample pill. */
  .sample__shot--ig .ui-top b,.sample__shot--nd .ui-top b,.sample__shot--li .ui-top b{display:none}
  .ui-bar .ui-c em{display:none}
  .ui-bar--rn b{display:none}
  .ui-rail{gap:8px;bottom:20px}
  .ui-rail > svg{display:none}
  .ui-rail .ui-i:nth-child(3){display:none}
  .ui-bar{gap:7px}
  /* The long hero label wraps rather than pushing the column wider than the screen. */
  .hero .btn{white-space:normal;text-align:center;padding-block:12px;line-height:1.25}
  .hero__art{gap:6px}
  .hero__scene{width:44%}
}
@media (max-width:420px){
  .topbar__in{gap:10px}
  .topbar .btn--sm{padding:0 13px;font-size:13.5px}
}
@media (max-width:359px){
  /* The mark alone: the wordmark gives way to the consultation button. */
  .topbar .brand{font-size:0;gap:0}
  .topbar__in{padding:0 5px 0 12px}
}

/* ==========================================================================
   Motion layer
   One motion idea per place, so the page does not animate uniformly. Every
   rule is scoped to .js, so with JS off nothing here hides or moves. The
   reduced-motion block at the end switches all of it off, and only wins
   because it comes last, so keep it last.
   ========================================================================== */

/* -- Hero: the two finished items tick themselves --------------------------
   Two of the four are done and the card asks for the other two, so only those
   two tick. The box stays filled throughout and only the check glyph
   arrives, so there is no frame where the card looks half-rendered. The card
   rises on --i:3, landing at 210ms + 500ms, and the ticks wait for that. The
   delay is a default rather than a per-item rule, so a reordered list still
   ticks late instead of firing at once. */
.js .shotlist .box--on::after{
  opacity:0;scale:.3;
  transition:opacity .26s ease, scale .32s cubic-bezier(.2,.9,.3,1.5);
  transition-delay:.78s;
}
.js .in-view .shotlist .box--on::after{opacity:1;scale:1}
.js .shotlist li:nth-child(2) .box--on::after{transition-delay:.92s}

/* -- Owners: each one speaks in turn --------------------------------------- */
.js .owners .owner__bubble{
  opacity:0;translate:0 7px;
  transition:opacity .45s ease, translate .45s cubic-bezier(.33,0,.2,1);
  transition-delay:calc(var(--i,0) * 90ms + 200ms);
}
.js .owners.in-view .owner__bubble,.js .in-view .owners .owner__bubble{opacity:1;translate:0 0}

/* -- Availability-free: nothing pulses. Pointer-only refinements ------------
   Nothing in this block exists on a touch screen, where hover is not a real
   state. Each is written as component, trigger, behaviour, fallback.

   Spotlight card. Trigger: pointer over a card. Behaviour: a soft indigo wash
   under the content follows the pointer (site.js writes --mx, --my).
   Fallback: the plain card.

   Lifted tile. Trigger: pointer over a sample. Behaviour: rises 3px on the
   translate property, so it never disturbs the layout around it.

   The magnetic pull on the main buttons lives with .btn, above. */
@media (hover:hover) and (pointer:fine){
  .step,.plan,.person,.recap,.owner{position:relative;isolation:isolate}
  .step::after,.plan::after,.person::after,.recap::after,.owner::after{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(75,59,143,.09),transparent 68%);
    opacity:0;transition:opacity .35s ease;
  }
  .step:hover::after,.plan:hover::after,.person:hover::after,.recap:hover::after,.owner:hover::after{opacity:1}
  .sample{transition:translate .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease}
  .sample:hover{translate:0 -3px;box-shadow:var(--shadow-md)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .draw .ink{stroke-dashoffset:0;transition:none}
  .js .rise{opacity:1;transform:none;transition:none}
  .mobar{transition:none}
  .js .shotlist .box--on::after{opacity:1;scale:1;transition:none}
  .js .recap .bar{height:var(--h);transition:none}
  .js .recap .bar b{opacity:1;transition:none}
  .js .owners .owner__bubble{opacity:1;translate:0 0;transition:none}
  .btn,.btn::after,.sample{transition:none}
  .sample:hover{translate:none}
  .lockup__mark .ink,.weave--mark{transition:none}
}