/*
  Awakened Media landing page styles, system v2 (from details/variant-3b.html + SYSTEM.md).
  Quiet and squared: no acid fills, no marker swipe, no shadows except the sticky bar,
  8px radii throughout, boxed 50px inputs with 52px ink buttons.
  The first screen is the hero plus the press strip: the hero sizes to its
  content rather than to the viewport, so both fit without scrolling.
  Order: tokens, base, controls, header, hero, story block, beat visuals,
  FAQ, closing, footer, sticky bar, desktop, motion.
  Class selectors only, flat specificity.
*/

/* ---- tokens ---- */
:root{
  --paper:#faf6ee; --card:#fff; --sunken:#f1ece1;
  --line:#cfc6b5; --line-hover:#b8ae9b; --rule:#e2dbcd;
  --ink:#1b1a17; --ink-hover:#000; --ink-soft:#5f5a50; --ink-faint:#9b948a;
  --acid-ink:#a8c700; --error:#a4301c; --ok:#1f8a4c;
  /* band theme: the two full-bleed colour sections (the pitch and the closing).
     Change these five to retheme both. Plum is the complement of the acid accent. */
  --band:#4a3b74; --band-ink:#faf6ee; --band-soft:rgba(250,246,238,.74);
  --band-rule:rgba(250,246,238,.2); --band-accent:var(--acid-ink);
  /* illustration palette: flat fills for the story-beat drawings and the pitch
     boxes, never on a control. Used to live in demo.css, which the hero video
     replaced on 20/09. */
  --terracotta:#d8694a; --sage:#8fae8b; --sky:#9cc4e4; --mustard:#e3b23c; --plum:#7b5ea7;
  --sans:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gutter:20px;
  --rhythm:64px;
  --wrap:1120px;
  /* header: 18px padding x2 + 21px mark line + 1px rule */
  --head-h:58px;
}

/* ---- base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
body{overflow-x:hidden;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- controls ---- */
.mark{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.mark-dot{color:var(--acid-ink)}

.input{width:100%;height:50px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:8px;display:block}
.input::placeholder{color:var(--ink-faint)}
.input:hover{border-color:var(--line-hover)}
.input:focus{outline:2px solid var(--ink);outline-offset:2px}

.btn{display:block;width:100%;height:52px;padding:0 24px;font:inherit;font-size:16px;
  font-weight:600;letter-spacing:-.01em;color:var(--paper);background:var(--ink);
  border:0;border-radius:8px;cursor:pointer;transition:background .16s ease}
.btn:hover{background:var(--ink-hover)}
/* on the ink band the button inverts so it still reads as primary */
.btn-on-ink{background:var(--paper);color:var(--ink)}
.btn-on-ink:hover{background:var(--card)}

/* one form shape, three placements. Side by side from 600px. */
.url-form{margin:0;max-width:560px;display:grid;gap:10px}
.url-field{display:block;min-width:0}
.trust{margin:16px 0 0;font-size:13px;color:var(--ink-soft)}

.section-title{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0}

/* ad tiles: straight, 8px, hairline border, no shadow */
.ad{background:var(--card);border:1px solid var(--rule);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;margin:0}
/* A tile is the artwork and nothing else: the square media is the whole card,
   so every tile is the same height without a caption row to equalise. The
   words live on the preview button, for the lightbox and for screen readers. */
.ad-media{background:var(--sunken);flex:1;display:flex}
.ad-media img{display:block;width:100%;aspect-ratio:1;object-fit:cover}

.photo{aspect-ratio:3/2;border:1px solid var(--rule);border-radius:8px;overflow:hidden;
  background:var(--sunken);position:relative}
.photo img{display:block;width:100%;height:100%;object-fit:cover}

.phone{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
/* the site capture is a tall full-page shot: fit its width, clip the bottom */
.phone-site img{height:auto;object-fit:fill}

/* ---- header ---- */
.head{padding:18px var(--gutter);border-bottom:1px solid var(--rule)}
.head-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.head-nav{display:none;gap:24px}
.head-link{font-size:14px;color:var(--ink-soft);text-decoration:none}
.head-link:hover{color:var(--ink)}

/* ---- fold: hero plus press strip, one composed first screen ----
   On phones this is a plain wrapper so the stack keeps its content height.
   The desktop breakpoint turns it into a full-screen flex column. */
.fold{display:block}

/* ---- hero ---- */
/* the hero sizes to its content so the press strip stays in the first screen */
.hero{padding:14px var(--gutter) 12px}
.hero-inner{max-width:var(--wrap);margin:0 auto}
.hero-title{font-size:clamp(28px,5.2vw,50px);font-weight:700;line-height:1.1;
  letter-spacing:-.025em;margin:0;max-width:24ch}
.hero-lead{font-size:16px;line-height:1.45;color:var(--ink-soft);margin:10px 0 0;max-width:52ch}
.url-form-hero{margin-top:16px}
.url-form-hero+.trust{margin-top:10px}
/* the demo leads on mobile, above the headline, full width of the text column
   so it reads as the hero rather than a card floating inside the gutter. */
.hero-inner{display:grid;gap:14px}
.hero-demo{order:-1;width:100%;margin:0}
.hero-video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#1b1a17;border:1px solid var(--rule);border-radius:8px}
.hero-copy{min-width:0}

/* ---- marker highlight, hero headline only ---- */
.hl{position:relative;display:inline-block;z-index:0;padding:0 .06em}
.hl::before{content:"";position:absolute;z-index:-1;left:-.08em;right:-.1em;top:.18em;bottom:.08em;
  background:#d9ff3d;transform:skewX(-4deg) rotate(-1.1deg);
  border-radius:60% 40% 55% 45%/50% 60% 40% 50%;opacity:.92;
  clip-path:polygon(0 6%,100% 0,100% 92%,1% 100%)}
.hl-2::before{transform:skewX(-3deg) rotate(.9deg);clip-path:polygon(0 0,100% 7%,99% 100%,0 90%)}

/* ---- story intro, centred as a block above the first beat ---- */
.stories-intro{padding:64px var(--gutter) 40px}
.stories-intro-inner{max-width:560px;margin:0 auto;text-align:center}
.stories-lead{font-size:17px;line-height:1.5;color:var(--ink-soft);margin:12px 0 0}

/* ---- scroll cue: closes the first screen, under the press strip ---- */
.cue{display:grid;justify-items:center;gap:2px;margin:10px auto 0;
  text-decoration:none;color:var(--ink-soft)}
.cue:hover{color:var(--ink)}
.cue-word{font-size:13px}
.cue-chev{display:block;animation:cue-bob 1.4s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---- story block, a flip and a band modifier ----
   The section is full bleed so a band reaches the viewport edge;
   .story-inner holds the content to the page width. */
.story{padding:var(--rhythm) var(--gutter);border-top:1px solid var(--rule)}
.story-sunken{background:var(--sunken)}
.story-inner{max-width:var(--wrap);margin:0 auto;display:grid;gap:28px}
.story-text{min-width:0}
.story-visual{min-width:0}
.eyebrow{font-size:13px;font-weight:500;color:var(--ink-soft);margin:0 0 8px}
.story-title{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em;
  margin:0;max-width:20ch}

/* three supporting points under each beat */
.points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;max-width:52ch}
.point{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.point-mark{flex:0 0 auto;color:var(--acid-ink);margin-top:3px}

/* beat 2, the paste visual */
.paste{display:grid;gap:22px;justify-items:start}
.paste-form{width:100%;max-width:420px;display:grid;gap:10px}
.paste-input{display:flex;align-items:center;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.paste-btn{cursor:default;text-align:center;line-height:52px;padding:0 24px}
.paste-btn:hover{background:var(--ink)}
.phone-site{width:212px;aspect-ratio:9/16}

/* beat 3, the product grid */
.grid-status{font-size:13px;color:var(--ink-soft);margin:0 0 12px;font-variant-numeric:tabular-nums}
.ad-grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.ad-grid .ad:nth-child(n+7){display:none}
.ad-grid-filling .ad{opacity:0;transform:translateY(10px)}
.ad-grid-filling .ad-in{opacity:1;transform:none;transition:opacity .38s ease,transform .38s ease}

/* beat 4, the feed post */
.feed{display:flex;justify-content:flex-start}
.phone-feed{width:268px;padding:12px 10px}
.post{background:var(--card)}
.post-head{display:flex;align-items:center;gap:10px;padding:0 2px 10px}
.post-avatar{flex:0 0 auto;width:32px;height:32px;border-radius:999px;background:var(--sunken);
  border:1px solid var(--line);display:grid;place-items:center;font-weight:600;font-size:15px;line-height:1}
.post-names{display:grid;gap:1px;min-width:0}
.post-name{font-size:14px;font-weight:600;line-height:1.2}
.post-tag{font-size:12px;color:var(--ink-soft);line-height:1.2}
.post-media{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.post-foot{padding:10px 2px 0}
.post-cta{display:block;text-align:center;font-size:14px;font-weight:500;color:var(--ink);
  background:var(--sunken);border:1px solid var(--line);border-radius:8px;padding:9px 14px}

/* honest labelling on the made-up business used in the mock-ups */
.example-note{font-size:12px;line-height:1.4;color:var(--ink-faint);margin:6px 0 0;text-align:center}
.example-note-feed{margin:0 0 8px}
.notify-example{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:6px 0 0}

/* beat 5, the notification */
.notify{position:absolute;left:12px;bottom:12px;max-width:min(240px,72%);
  background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:10px 13px}
.notify-title{font-size:13px;font-weight:500;margin:0;line-height:1.3}
.notify-meta{font-size:13px;color:var(--ink-soft);margin:2px 0 0;line-height:1.3}

/* ---- FAQ ---- */
.faqs{padding:var(--rhythm) var(--gutter);border-top:1px solid var(--rule)}
.faqs-inner{max-width:var(--wrap);margin:0 auto}
.faq-item{border-top:1px solid var(--rule);max-width:760px}
.faq-item:first-of-type{margin-top:22px}
.faq-item:last-of-type{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;display:flex;gap:16px;align-items:center;justify-content:space-between;
  font:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  background:transparent;border:0;padding:18px 0;min-height:56px;cursor:pointer;text-align:left}
.faq-chev{flex:0 0 auto;color:var(--ink-soft);transition:transform .16s ease}
.faq-q[aria-expanded="true"] .faq-chev{transform:rotate(180deg)}
.faq-a{font-size:16px;color:var(--ink-soft);margin:0;padding:0 0 18px;max-width:64ch}
.faq-a[hidden]{display:none}
.faq-more{font-size:15px;color:var(--ink-soft);margin:22px 0 0;max-width:64ch}
.faq-more a{color:var(--ink-soft);text-decoration:underline}

/* ---- closing, full-bleed band (see --band tokens) ---- */
.closing{padding:var(--rhythm) var(--gutter);background:var(--band);color:var(--band-ink)}
.closing-inner{max-width:var(--wrap);margin:0 auto}
.closing-mark{display:block;color:var(--band-ink);margin-bottom:18px}
.url-form-closing{margin-top:24px}
.closing .trust{color:var(--band-soft)}
.closing :focus-visible{outline-color:var(--band-ink)}

/* ---- footer ---- */
.foot{padding:26px var(--gutter);border-top:1px solid var(--rule)}
.foot-inner{max-width:var(--wrap);margin:0 auto}
.foot-line{font-size:13px;color:var(--ink-soft);margin:10px 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-soft);margin:10px 0 0}
.foot-link{color:var(--ink-soft);text-decoration:none}
.foot-link:hover{color:var(--ink)}

/* ---- sticky bar ---- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);
  border-top:1px solid var(--rule);box-shadow:0 -6px 16px rgba(27,26,23,.08);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);transition:transform .2s ease}
.bar[hidden]{display:none}
.bar-shown{transform:none}
.bar-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:16px}
.bar-mark{display:none}
.url-form-bar{flex:1 1 auto;max-width:none;grid-template-columns:1fr auto;gap:10px}
.url-form-bar .url-btn{width:auto;min-width:0;padding:0 18px}
.btn-long{display:none}
.btn-short{display:inline}

/* ---- form goes side by side from 600px ---- */
@media (min-width:600px){
  .url-form{grid-template-columns:1fr auto}
  .url-btn{width:auto;min-width:180px}
  .paste-form{grid-template-columns:1fr auto}
  .paste-btn{width:auto;min-width:0}
  .btn-long{display:inline}
  .btn-short{display:none}
}

/* ---- desktop ---- */
@media (min-width:900px){
  :root{--gutter:48px;--rhythm:88px}
  body{padding-bottom:88px}

  .head-nav{display:flex}

  /* the fold fills the screen under the header: hero grows and centres,
     press sits at the foot with the cue as the last thing in view */
  .fold{min-height:calc(100svh - var(--head-h));display:flex;flex-direction:column}
  .fold .hero{flex:1 1 auto;display:flex;align-items:center}
  .fold .press{flex:0 0 auto}

  .hero{padding:44px var(--gutter) 40px}
  .hero-inner{grid-template-columns:1.1fr .9fr;gap:0 56px;align-items:center;width:100%}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-demo{order:0;grid-column:2;grid-row:1;max-width:560px;justify-self:end;width:100%;margin:0}
  .stories-intro{padding:72px var(--gutter) 48px}
  .hero-title{font-size:clamp(34px,4.1vw,50px)}
  .hero-lead{font-size:17px;margin-top:16px}

  /* the beat visual is the only thing in a second column, top-aligned with the text */
  .story-inner{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .story-flip .story-text{order:2}
  .story-flip .story-visual{order:1}
  .story-wide .story-inner{grid-template-columns:1fr;gap:28px}
  .story-wide .story-title{max-width:24ch}

  .ad-grid{grid-template-columns:repeat(5,1fr);gap:12px}
  .ad-grid .ad:nth-child(n+7){display:flex}
  .phone-site{width:240px}
  .phone-feed{width:292px}

  .bar-mark{display:block}
  .url-form-bar{max-width:640px;margin:0 auto}
  .bar-inner{justify-content:space-between}

  /* "Awakened Media." is twice the width of the old wordmark, so between 900px
     and 1040px it sits flush against the 640px form. Step it down until the
     row has room for both at full size. */
  .bar-mark{font-size:17px;letter-spacing:-.03em}
}

@media (min-width:1040px){
  .bar-mark{font-size:19px;letter-spacing:-.02em}
}

/* ---- motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .ad-grid-filling .ad{opacity:1;transform:none}
}

/* ================================================================
   Story beat animations. Every beat is a .beat that gains .in when
   it scrolls into view once (landing.js, threshold 0.4). Nothing
   animates before that. Reduced motion shows the finished state.
   ================================================================ */

/* one shared stage, matching the demo's visual language */
.stage{position:relative;background:var(--sunken);border:1px solid var(--rule);
  border-radius:8px;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;padding:20px;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.stage>*{min-height:0;min-width:0;max-height:100%}
.stage-flat{aspect-ratio:auto;display:block}
.fill-terracotta{background:var(--terracotta)}
.fill-sage{background:var(--sage)}
.fill-sky{background:var(--sky)}
.fill-mustard{background:var(--mustard)}
.fill-plum{background:var(--plum)}

/* shared chip */
.chips{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:center}
.chip{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:9px 12px;
  opacity:0;transform:translateY(6px)}
.chip-tick{flex:0 0 auto;color:var(--acid-ink)}
.beat.in .chip{animation:beat-rise .34s ease both}
.beat.in .chip:nth-child(2){animation-delay:.34s}
.beat.in .chip:nth-child(3){animation-delay:.68s}
@keyframes beat-rise{to{opacity:1;transform:none}}

/* ---- beat 1: stat card and drifting people ---- */
.stat{position:absolute;left:16px;bottom:16px;background:var(--card);border:1px solid var(--rule);
  border-radius:8px;padding:12px 16px;display:grid;opacity:0;transform:translateY(12px)}
.stat-num{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat-label{font-size:13px;color:var(--ink-soft)}
.beat.in .stat{animation:beat-rise .5s ease .2s both}
.walker{position:absolute;bottom:14%;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--ink);display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--ink);opacity:0;left:-10%}
.beat.in .walker{animation:walk 9s linear infinite}
.beat.in .walker-2{animation-delay:3s}
.beat.in .walker-3{animation-delay:6s}
@keyframes walk{
  0%{left:-10%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:104%;opacity:0}}

/* ---- beat 2: typing, pressing, scrolling site, chips ---- */
.paste{display:grid;gap:18px;width:100%}
.paste-row{display:flex;gap:18px;align-items:stretch;justify-content:center;min-height:0;flex:1}
.paste{min-height:0;height:100%;grid-template-rows:auto 1fr}
.paste-typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  width:100%;border-right:2px solid transparent}
.beat.in .paste-typed{animation:type 1.1s steps(18) .2s both,caret .5s step-end 4}
@keyframes type{from{width:0}to{width:100%}}
@keyframes caret{0%,100%{border-right-color:var(--ink)}50%{border-right-color:transparent}}
.beat.in .paste-btn{animation:press .14s ease 1.4s 2 alternate}
@keyframes press{to{transform:scale(.97)}}
.phone-site{flex:0 1 auto;overflow:hidden;max-height:100%;width:auto;aspect-ratio:9/16}
/* the capture is a tall full-page shot: fit the frame width, let it scroll vertically */
.phone-site .site-scroll{display:block;width:100%;height:auto;max-width:100%;object-fit:fill}
.site-scroll{will-change:transform}
.beat.in .site-scroll{animation:site 10s ease-in-out 1.6s infinite}
@keyframes site{0%,8%{transform:translateY(0)}55%,65%{transform:translateY(-38%)}100%{transform:translateY(0)}}

/* ---- beat 3: five tiles get picked after the fill ---- */
.ad{position:relative}
.pick-tick{position:absolute;right:8px;top:8px;color:var(--acid-ink);opacity:0;
  background:var(--card);border-radius:50%;padding:2px}
.ad-picked{border-color:var(--ink)}
.ad-picked .pick-tick{opacity:1;transition:opacity .2s ease}

/* ---- beat 4: the feed reel scrolls, the map sits behind ---- */
.beat-map{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85}
.chip-float{position:absolute;right:16px;top:16px;z-index:2;margin:0;opacity:0;transform:translateY(6px)}
.beat.in .chip-float{animation:beat-rise .4s ease .3s both}
.feed{position:relative;z-index:1;display:flex;justify-content:center;
  height:100%;max-height:100%;min-height:0}
.phone-feed{overflow:hidden;height:100%;max-height:100%;aspect-ratio:9/16;width:auto;
  flex:0 1 auto;padding:10px}
.feed-reel{display:grid;gap:10px;grid-auto-rows:100%;height:100%}
.feed-reel>*{min-height:0;overflow:hidden}
.beat.in .feed-reel{animation:reel 26s cubic-bezier(.4,0,.2,1) infinite}
@keyframes reel{
  0%,8%{transform:translateY(calc(-0% - 0px))}
  10%,18%{transform:translateY(calc(-100% - 10px))}
  20%,28%{transform:translateY(calc(-200% - 20px))}
  30%,38%{transform:translateY(calc(-300% - 30px))}
  40%,48%{transform:translateY(calc(-400% - 40px))}
  50%,58%{transform:translateY(calc(-500% - 50px))}
  60%,68%{transform:translateY(calc(-600% - 60px))}
  70%,78%{transform:translateY(calc(-700% - 70px))}
  80%,88%{transform:translateY(calc(-800% - 80px))}
  90%,98%{transform:translateY(calc(-900% - 90px))}
  100%{transform:translateY(calc(-900% - 90px))}}
.feed-reel .post{display:grid;grid-template-rows:auto 1fr auto;align-content:start}
.feed-reel .post-media{min-height:0;height:100%;width:100%;object-fit:contain;
  background:var(--sunken)}

/* ---- beat 5: the notification drops in ---- */
.notify{opacity:0}
.beat.in .notify{animation:drop .6s cubic-bezier(.34,1.3,.64,1) .3s both}
@keyframes drop{from{opacity:0;transform:translateY(-140%)}to{opacity:1;transform:none}}

/* ---- reduced motion: show the finished state, move nothing ---- */
@media (prefers-reduced-motion:reduce){
  .cue-chev{animation:none}
  .beat .chip,.beat .stat,.beat .notify,.beat .chip-float{opacity:1;transform:none}
  .beat .walker{opacity:0}
  .beat .paste-typed{width:100%}
  .beat.in .site-scroll,.beat.in .feed-reel{animation:none}
}

/* the map's own pulsing dots inside beat 4 */
.map-ring{opacity:.28;transform-origin:center}
.beat.in .map-ring{animation:map-pulse 1.6s ease-in-out infinite}
.map-near g:nth-child(2) .map-ring{animation-delay:.4s}
.map-near g:nth-child(3) .map-ring{animation-delay:.8s}
.map-near g:nth-child(4) .map-ring{animation-delay:1.2s}
@keyframes map-pulse{0%,100%{opacity:.1}50%{opacity:.42}}

/* beat 2 stacks on narrow screens so the phone and chips never overflow */
@media (max-width:620px){
  .paste-row{flex-direction:column;align-items:center;gap:14px}
  .paste-row .chips{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .beat.in .map-ring{animation:none}
}

/* ================================================================
   Press strip. Eight wordmarks, monochrome ink, no links, no hover.
   Each outlet gets its own height because the artwork includes
   different amounts of padding, so a single height reads uneven.
   ================================================================ */
.press{padding:16px var(--gutter) 10px;border-top:1px solid var(--rule)}
.press-inner{max-width:var(--wrap);margin:0 auto;text-align:center}
.press-caption{font-size:13px;color:var(--ink-soft);margin:0}
.press-row{list-style:none;margin:12px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:14px;align-items:center;justify-items:center}

/* Phones: one row that scrolls sideways rather than a grid. Eight mastheads
   stacked two-up cost half the fold and shrank every mark; in a single strip
   they stay large enough to recognise and the row itself says there are more.
   Full-bleed past the gutter so the strip reads as continuing off-screen. */
@media (max-width:759px){
  .press-row{display:flex;flex-wrap:nowrap;justify-content:flex-start;
    gap:26px;margin:12px 0 0;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .press-row::-webkit-scrollbar{display:none}
  .press-item{flex:0 0 auto}
}
.press-item{display:flex;align-items:center;justify-content:center;min-width:0;
  color:var(--ink);opacity:.55}
.press-mark{display:block;line-height:0}
/* the New York script is hairline, so the shared fade washes it out */
.press-new-york-mag{opacity:.78}
.press-logo{display:block;width:auto;max-width:100%;height:18px}

/* optical sizing: cap height, not box height. Phones run about 80% of desktop. */
.press-bbc .press-logo{height:15px}
.press-guardian .press-logo{height:21px}
.press-the-times .press-logo{height:14px}
.press-ft .press-logo{height:19px}
.press-sky-news .press-logo{height:17px}
.press-business-insider .press-logo{height:12px}
.press-la-times .press-logo{height:15px}
.press-new-york-mag .press-logo{height:22px}

/* phones: the single strip has room, so the marks run larger than desktop
   rather than smaller. Same optical ladder, scaled up about 15%. */
@media (max-width:759px){
  .press-logo{height:21px}
  .press-bbc .press-logo{height:17px}
  .press-guardian .press-logo{height:24px}
  .press-the-times .press-logo{height:16px}
  .press-ft .press-logo{height:22px}
  .press-sky-news .press-logo{height:20px}
  .press-business-insider .press-logo{height:14px}
  .press-la-times .press-logo{height:17px}
  .press-new-york-mag .press-logo{height:25px}
}

.beat.press{opacity:0;transform:translateY(8px)}
.beat.press.in{animation:beat-rise .45s ease both}
/* On phones the strip is inside the first screen, so it must not depend on a
   scroll to appear: it is simply visible. */
@media (max-width:759px){
  .beat.press{opacity:1;transform:none}
}

/* ================================================================
   Owner notes. One line between beats, full width of the story
   column. Quiet paper card, thin ink border, no photos, no stars.
   Written in our own voice, not as customer testimonials.
   ================================================================ */
.owner-quote{max-width:var(--wrap);margin:0 auto;padding:36px var(--gutter);display:flex}
/* the offset shadow lives outside the card, so the row leaves room for it */
.quote-card{position:relative;width:100%;background:var(--paper);
  border:1.5px solid var(--ink);border-radius:8px;padding:22px 22px 26px;
  box-shadow:6px 6px 0 var(--ink)}
.owner-quote .quote-line{margin:0;padding:0;font-family:var(--sans);
  font-size:21px;line-height:1.26;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);text-wrap:pretty}

/* quieter sibling of the hero marker. The phrase can wrap, so the swipe is a
   background painted per line box. An inline-block would stretch to the whole
   line and overshoot; clip-path would cut the text itself. */
.qhl{position:relative;z-index:0;padding:.02em .1em;
  background-image:linear-gradient(101deg,rgba(217,255,61,0) .5%,#d9ff3d 2.2%,#d9ff3d 97.6%,rgba(217,255,61,0) 99.5%);
  background-repeat:no-repeat;background-position:0 .16em;background-size:100% .82em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;opacity:.86}
.qhl-2{background-position:0 .18em;background-size:100% .8em}

.beat.owner-quote{opacity:0;transform:translateY(8px)}
.beat.owner-quote.in{animation:beat-rise .45s ease both}

@media (min-width:700px){
  .press-row{grid-template-columns:repeat(8,1fr);gap:26px 20px}
  .press-logo{height:24px}
  .press-bbc .press-logo{height:18px}
  .press-guardian .press-logo{height:26px}
  .press-the-times .press-logo{height:17px}
  .press-ft .press-logo{height:24px}
  .press-sky-news .press-logo{height:21px}
  .press-business-insider .press-logo{height:15px}
  .press-la-times .press-logo{height:19px}
  .press-new-york-mag .press-logo{height:28px}
}

@media (min-width:900px){
  .owner-quote{padding:48px var(--gutter)}
  .owner-quote-left{justify-content:flex-start}
  .owner-quote-right{justify-content:flex-end}
  .owner-quote-left .quote-card,.owner-quote-right .quote-card{width:70%;max-width:70%}
  .quote-card{padding:34px 38px 38px}
  .owner-quote .quote-line{font-size:28px;line-height:1.22;max-width:22ch}
  .press{padding:32px var(--gutter) 24px}
  .press-row{margin-top:22px;gap:30px}
  .cue{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  .beat.press,.beat.owner-quote{opacity:1;transform:none}
}

/* ================================================================
   The pitch. A colour band (--band) under the press strip: one headline, three
   numbered answers (who does the work, what it costs, how long it
   takes), then the example as one contained card. Items rise in
   sequence when the band scrolls into view (.beat/.in, landing.js).
   ================================================================ */
.pitch{background:var(--band);color:var(--band-ink);padding:56px var(--gutter) 64px}
.pitch-inner{max-width:var(--wrap);margin:0 auto}
.pitch-title{font-size:clamp(30px,7.4vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.03em;margin:0 0 36px;max-width:16ch}
.pitch-dot{color:var(--band-accent)}
.pitch-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--band-rule)}
.pitch-item{padding:24px 0 26px;border-bottom:1px solid var(--band-rule);opacity:0;transform:translateY(14px);display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 16px;align-items:start}
.pitch-copy{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:baseline}
.pitch-num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--band-accent);margin:0;grid-column:1;line-height:1.1}
.pitch-head{font-size:clamp(24px,5.6vw,27px);line-height:1.1;font-weight:800;letter-spacing:-.025em;margin:0 0 10px;color:var(--band-ink);grid-column:2}
.pitch-body{grid-column:2;font-size:16px;line-height:1.5;color:var(--band-soft);margin:0;max-width:34ch}
.pitch-example{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0;margin:36px 0 0;background:var(--paper);color:var(--ink);
  border-radius:12px;overflow:hidden;text-decoration:none;opacity:0;transform:translateY(14px);
  transition:transform .18s ease,box-shadow .18s ease}
.pitch-example:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.28)}
.pitch-example-img{display:block;width:100%;height:100%;min-height:120px;object-fit:cover}
.pitch-example-text{display:grid;gap:6px;align-content:center;padding:16px 18px;min-width:0}
.pitch-example-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pitch-example-title{font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.pitch-example-cta{font-size:14px;font-weight:600;color:var(--ink);margin-top:2px}
.pitch-example-arrow{display:inline-block;margin-left:.35em;color:var(--acid-ink);transition:transform .18s ease}
.pitch-example:hover .pitch-example-arrow{transform:translateX(4px)}
.beat.in .pitch-item{animation:beat-rise .5s ease both}
.beat.in .pitch-item:nth-child(2){animation-delay:.14s}
.beat.in .pitch-item:nth-child(3){animation-delay:.28s}
.beat.in .pitch-example{animation:beat-rise .5s ease .42s both}
@media (min-width:600px){
  .pitch{padding:72px var(--gutter) 80px}
  .pitch-example{grid-template-columns:200px minmax(0,1fr);margin-top:44px}
  .pitch-example-text{padding:22px 26px}
  .pitch-example-title{font-size:20px}
}
@media (min-width:900px){
  .pitch{padding:96px var(--gutter) 104px}
  .pitch-title{margin-bottom:56px}
  .pitch-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--band-rule)}
  .pitch-item{padding:32px 0 0;border-bottom:0}
  .pitch-copy{gap:0 8px}
  .pitch-num{margin-left:-6px}
  .pitch-body{font-size:17px}
  .pitch-example{grid-template-columns:240px minmax(0,1fr);margin-top:72px;max-width:760px}
  .pitch-example-text{padding:26px 32px}
  .pitch-example-title{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .pitch-item,.pitch-example{opacity:1;transform:none}
}

/* ---- pitch boxes: a small square to the left of each point with a tiny
   loop inside, in the story beats' flat language. Static until the band
   scrolls in (.beat.in), then a 5 s loop. Reduced motion: finished state. ---- */
.pbox{position:relative;width:56px;height:56px;border-radius:12px;background:var(--band-ink);overflow:hidden;display:grid;place-items:center}
.pbox>*{grid-area:1/1}
/* 1. a web address bar with a caret becomes four ad tiles */
.pb-bar{width:34px;height:10px;border-radius:5px;background:var(--sunken);border:1px solid var(--line);position:relative}
.pb-caret{position:absolute;left:5px;top:2px;width:1.5px;height:4px;background:var(--ink)}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:30px;height:30px}
.pb-grid i{display:block;border-radius:3px;opacity:0;transform:scale(.6)}
.pb-grid i:nth-child(1){background:var(--terracotta)}.pb-grid i:nth-child(2){background:var(--sage)}
.pb-grid i:nth-child(3){background:var(--mustard)}.pb-grid i:nth-child(4){background:var(--sky)}
.beat.in .pb-bar{animation:pb-bar 5s ease infinite}
.beat.in .pb-caret{animation:pb-caret 5s steps(12) infinite}
.beat.in .pb-grid i{animation:pb-tile 5s ease infinite}
.beat.in .pb-grid i:nth-child(2){animation-delay:.1s}
.beat.in .pb-grid i:nth-child(3){animation-delay:.2s}
.beat.in .pb-grid i:nth-child(4){animation-delay:.3s}
@keyframes pb-bar{0%,38%{opacity:1;transform:none}46%{opacity:0;transform:scale(.8)}90%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}
@keyframes pb-caret{0%{left:5px}34%{left:26px}100%{left:26px}}
@keyframes pb-tile{0%,44%{opacity:0;transform:scale(.6)}52%{opacity:1;transform:none}86%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(.6)}}
/* 2. a sign-in panel fades out: there is nothing for the owner to log into */
.pb-panel{display:grid;gap:4px;width:30px}
.pb-panel i{display:block;height:6px;border-radius:3px;background:var(--sunken);border:1px solid var(--line)}
.pb-panel i:nth-child(3){width:16px;background:var(--line);border-color:var(--line)}
.pb-cross{width:26px;height:26px;border-radius:50%;background:var(--band-accent);opacity:0;transform:scale(1.4);position:relative}
.pb-cross::before,.pb-cross::after{content:"";position:absolute;left:7px;top:12px;width:12px;height:2px;border-radius:1px;background:var(--ink)}
.pb-cross::before{transform:rotate(45deg)}
.pb-cross::after{transform:rotate(-45deg)}
.beat.in .pb-panel{animation:pb-panel 5s ease infinite}
.beat.in .pb-cross{animation:pb-cross 5s cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes pb-panel{0%,30%{opacity:1;transform:none}40%{opacity:0;transform:scale(.8)}92%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}
@keyframes pb-cross{0%,38%{opacity:0;transform:scale(1.4)}46%{opacity:1;transform:scale(1)}88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1.4)}}
/* 3. a stopwatch ring sweeps once, the centre goes live */
.pb-ring{width:36px;height:36px;transform:rotate(-90deg)}
.pb-track{fill:none;stroke:var(--rule);stroke-width:3}
.pb-sweep{fill:none;stroke:var(--band-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:87.96;stroke-dashoffset:87.96}
.pb-dot{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.beat.in .pb-sweep{animation:pb-sweep 5s ease-in-out infinite}
.beat.in .pb-dot{animation:pb-dot 5s ease infinite}
@keyframes pb-sweep{0%,8%{stroke-dashoffset:87.96}44%{stroke-dashoffset:0}88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:87.96}}
@keyframes pb-dot{0%,44%{background:var(--line);transform:scale(1)}50%{background:var(--band-accent);transform:scale(1.5)}56%{transform:scale(1.15)}88%{background:var(--band-accent);transform:scale(1.15)}96%,100%{background:var(--line);transform:scale(1)}}
@media (min-width:900px){
  .pitch-item{grid-template-columns:64px minmax(0,1fr);gap:0 14px}
  .pbox{width:64px;height:64px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .pb-bar{opacity:0}.pb-grid i{opacity:1;transform:none}
  .pb-panel{opacity:0}.pb-cross{opacity:1;transform:none}
  .pb-sweep{stroke-dashoffset:0}.pb-dot{background:var(--band-accent);transform:scale(1.15)}
}

/* ---- preview lightbox ---- */
/* The same preview the prospect page gives an owner: the ad sitting inside a
   Facebook and an Instagram feed, and a story. Markup and phone chrome are
   generated from src/ui/platforms.ts and behaviour comes from /app.js, so the
   two pages stay one thing. Only the overlay is styled here, lifted from
   public/styles.css; --r and --font are scoped to .lb rather than :root so
   nothing else on this page moves. */
.lb{--r:8px;--font:var(--sans);position:fixed;inset:0;z-index:200;background:rgba(27,26,23,.95);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:68px 16px 28px;animation:lb-in .15s ease-out}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb[hidden]{display:none}
.lb-figure{display:none}
.lb-close,.lb-nav{position:absolute;background:rgba(250,246,238,.14);color:var(--paper);border:0;border-radius:50%;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
  transition:background .16s ease}
.lb-close:hover,.lb-nav:hover{background:rgba(250,246,238,.26)}
.lb-close{top:16px;right:16px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}
.lb.is-single .lb-nav{display:none}
.lb-phones{--pf-scale:.6;position:relative;display:flex;align-items:center;gap:24px;max-width:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 0}
.lb-phones::-webkit-scrollbar{display:none}
.lb-pane{flex:none;scroll-snap-align:center;
  width:calc(390px * var(--pf-scale) + 12px);height:calc(844px * var(--pf-scale) + 12px);
  overflow:hidden;border:6px solid #1c1c1e;border-radius:calc(44px * var(--pf-scale) + 6px);
  background:#fff;position:relative}
.lb-pane .pf-phone{width:390px;height:844px;transform:scale(var(--pf-scale));transform-origin:0 0}
/* The close button owns the top right, so the tabs stop short of it and
   scroll rather than slide under it on a narrow screen. */
.lb-tabs{position:absolute;top:16px;left:16px;right:72px;display:flex;justify-content:safe center;gap:6px;
  overflow-x:auto;scrollbar-width:none}
.lb-tabs::-webkit-scrollbar{display:none}
.lb-tab{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;
  border-radius:var(--r);background:rgba(250,246,238,.14);color:var(--paper);font:500 14px/1 var(--font);
  cursor:pointer;transition:background .16s ease}
.lb-tab:hover{background:rgba(250,246,238,.24)}
.lb-tab.is-on{background:var(--paper);color:var(--ink)}
@media (min-width:900px){.lb-tabs{display:none}}
@media (max-width:899px){
  .lb-phones{width:100%;gap:16px;padding-inline:calc((100% - 390px * var(--pf-scale) - 12px) / 2)}
}
@media (max-width:480px){.lb-prev{left:6px}.lb-next{right:6px}}
@media (prefers-reduced-motion:reduce){.lb{animation:none}}
/* Scrolling behind the overlay would move the page under the reader's finger. */
body.lb-open{overflow:hidden}

/* Each tile is a button now, so it has to look exactly as the figure did.
   The eye pill appears on hover and on keyboard focus, never on touch idle. */
.ad-shot{display:block;width:100%;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;
  cursor:pointer;position:relative;line-height:0;flex:1}
.ad-shot img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
/* Always on, never only on hover: a phone has no hover, and the affordance is
   the one hint that a tile does anything. Bottom right is the one corner the
   artwork leaves free: the logo sits top left, the pick tick top right and
   the ad's own button bottom left. */
.ad-peek{position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;
  border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;font-weight:600;
  line-height:1;pointer-events:none;transition:background .16s ease}
.ad-shot:hover .ad-peek{background:#fff}
.ad-shot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ad-peek{transition:none}}
/* A phone tile is about a third of the row, so the pill shrinks to a size
   that reads as a hint rather than a banner across the artwork. */
@media (max-width:899px){
  .ad-peek{bottom:5px;right:5px;gap:3px;padding:3px 6px;font-size:10px}
  .ad-peek b{font-weight:600}
}
@media (max-width:420px){
  .ad-peek b{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .ad-peek{padding:4px;gap:0}
}

/* The example ads carry the same watermark as a real owner's, so nobody can
   lift one off the homepage as finished artwork. /app.js blocks drag and the
   context menu on anything inside a .wm. The tile matches public/styles.css. */
:root{
  --wm-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg font-family='Helvetica,Arial,sans-serif' font-size='13' font-weight='700' text-anchor='middle'%3E%3Ctext x='110' y='62' transform='rotate(-30 110 62)' fill='%23000' fill-opacity='.1' dx='1' dy='1'%3EAwakened Media%3C/text%3E%3Ctext x='110' y='62' transform='rotate(-30 110 62)' fill='%23fff' fill-opacity='.24'%3EAwakened Media%3C/text%3E%3Ctext x='0' y='172' transform='rotate(-30 0 172)' fill='%23000' fill-opacity='.1' dx='1' dy='1'%3EAwakened Media%3C/text%3E%3Ctext x='0' y='172' transform='rotate(-30 0 172)' fill='%23fff' fill-opacity='.24'%3EAwakened Media%3C/text%3E%3Ctext x='220' y='172' transform='rotate(-30 220 172)' fill='%23000' fill-opacity='.1' dx='1' dy='1'%3EAwakened Media%3C/text%3E%3Ctext x='220' y='172' transform='rotate(-30 220 172)' fill='%23fff' fill-opacity='.24'%3EAwakened Media%3C/text%3E%3C/g%3E%3C/svg%3E");
}
.wm{position:relative}
.wm::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:var(--wm-tile) center / 220px 220px repeat}
.wm img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pf-pic{display:block}

/* ---- phone chrome ----
   Copied verbatim from platformCss() in src/ui/platforms.ts, which is the one
   place a placement is described. Regenerate this block from there rather
   than editing it here. */
.pf-phone { position: relative; width: 390px; background: #fff; overflow: hidden; font-family: Helvetica, Arial, sans-serif }
.pf-app { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #fff; border-bottom: 1px solid #efefef; font-weight: 700; font-size: 20px }
.pf-app span { display: flex; gap: 18px; font-size: 21px; font-weight: 400 }
.pf-scroll { position: absolute; inset: 0; padding-top: 48px; overflow: hidden }
.pf-scroll > * { flex: none }
.pf-ph { background: #fff; pointer-events: none; user-select: none }
.pf-ph-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px }
.pf-ph-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #cfd3d8, #9aa3ad) }
.pf-ph-av.b { background: linear-gradient(135deg, #e3d6c8, #b39b84) }
.pf-ph-who { flex: 1 }
.pf-ph-line { height: 9px; border-radius: 5px; background: #dcdcdc }
.pf-ph-line + .pf-ph-line { margin-top: 6px }
.pf-ph-who .pf-ph-line:first-child { width: 38%; background: #c9c9c9 }
.pf-ph-who .pf-ph-line:last-child { width: 22%; height: 7px }
.pf-ph-dots { color: #8e8e8e; font-size: 16px }
.pf-ph-text { padding: 0 12px 10px }
.pf-ph-text .pf-ph-line:first-child { width: 88% }
.pf-ph-text .pf-ph-line:last-child { width: 55% }
.pf-ph-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #d9d9d9 }
.pf-ph-img::before { content: ''; position: absolute; inset: -12%; filter: blur(14px); background:
  radial-gradient(circle at 30% 35%, rgba(255,255,255,.55), transparent 32%),
  radial-gradient(circle at 72% 68%, rgba(255,255,255,.35), transparent 28%),
  linear-gradient(135deg, #b8c1ca 0%, #7f8a95 40%, #d5cec3 70%, #9aa4ad 100%) }
.pf-ph-img.b::before { background:
  radial-gradient(circle at 65% 30%, rgba(255,255,255,.5), transparent 30%),
  radial-gradient(circle at 25% 75%, rgba(255,255,255,.3), transparent 26%),
  linear-gradient(200deg, #d9c9b4 0%, #a08a72 45%, #6f7c86 100%) }
.pf-ph-acts { display: flex; align-items: center; gap: 16px; padding: 10px 12px 6px; font-size: 21px; color: #262626 }
.pf-ph-acts .r { margin-left: auto }
.pf-ph-cap { padding: 0 12px 14px }
.pf-ph-cap .pf-ph-line:first-child { width: 30%; background: #c9c9c9 }
.pf-ph-cap .pf-ph-line:nth-child(2) { width: 92% }
.pf-ph-cap .pf-ph-line:last-child { width: 48% }


.pf-fb-phone { background: #c9ccd1; color: #050505; font-size: 15px; line-height: 1.33 }
.pf-fb-phone .pf-app { color: #0866ff; letter-spacing: -.02em; font-size: 24px }
.pf-fb-phone .pf-app span { color: #050505 }
.pf-fb-phone .pf-scroll { display: flex; flex-direction: column; gap: 8px }
.pf-fb-phone .pf-ph-acts { justify-content: space-around; gap: 0; border-top: 1px solid #e4e6eb; padding: 8px 4px; color: #65676b; font-size: 14px; font-weight: 600 }
.pf-fb-phone .pf-ph-acts span { display: flex; align-items: center; gap: 6px }
.pf-fb { background: #fff }
.pf-fb-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px }
.pf-fb-av { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex: none }
.pf-fb-who { flex: 1; min-width: 0 }
.pf-fb-name { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pf-fb-sub { font-size: 13px; color: #65676b; display: flex; align-items: center; gap: 4px }
.pf-fb-more { color: #65676b; font-size: 18px; padding: 0 4px }
.pf-fb-text { padding: 0 12px 10px; white-space: pre-wrap; overflow-wrap: anywhere }
.pf-fb-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e4e6eb }
.pf-fb-link { display: flex; align-items: center; gap: 10px; background: #f0f2f5; padding: 10px 12px }
.pf-fb-link > div { flex: 1; min-width: 0 }
.pf-fb-src { font-size: 12px; color: #65676b; text-transform: uppercase; letter-spacing: .02em }
.pf-fb-h { font-weight: 600; font-size: 16px; overflow-wrap: anywhere }
.pf-fb-d { font-size: 14px; color: #65676b; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.pf-fb-cta { flex: none; background: #e4e6eb; border-radius: 6px; padding: 8px 12px; font-weight: 600; font-size: 14px; white-space: nowrap }
.pf-fb-acts { display: flex; justify-content: space-around; border-top: 1px solid #e4e6eb; padding: 8px 4px; color: #65676b; font-size: 14px; font-weight: 600 }
.pf-fb-acts span { display: flex; align-items: center; gap: 6px }


.pf-ig-phone { color: #000; font-size: 14px; line-height: 1.35 }
.pf-ig-phone .pf-app { font-family: 'Brush Script MT', 'Snell Roundhand', cursive; font-size: 27px; font-weight: 400 }
.pf-ig-phone .pf-app span { font-family: Helvetica, Arial, sans-serif }
.pf-ig-phone .pf-ph-img { aspect-ratio: 1 / 1 }
.pf-ig { background: #fff }
.pf-ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px }
.pf-ig-ring { padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); flex: none }
.pf-ig-av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px }
.pf-ig-who { flex: 1; min-width: 0 }
.pf-ig-name { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pf-ig-sub { font-size: 12px; color: #737373 }
.pf-ig-more { font-size: 18px; padding: 0 4px }
.pf-ig-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #efefef }
.pf-ig-cta { display: flex; justify-content: space-between; align-items: center; background: #0095f6; color: #fff; font-weight: 600; padding: 10px 12px }
.pf-ig-acts { display: flex; gap: 16px; padding: 10px 12px 6px; font-size: 22px }
.pf-ig-acts .pf-ig-save { margin-left: auto }
.pf-ig-cap { padding: 0 12px 12px; overflow-wrap: anywhere }
.pf-ig-cap b { font-weight: 600; margin-right: 4px }


.pf-st { position: absolute; inset: 0; background: #111; color: #fff; font: 14px/1.35 Helvetica, Arial, sans-serif; display: flex; flex-direction: column; justify-content: center }
.pf-st-phone { background: #111 }
.pf-st-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(28px) brightness(.55); }
.pf-st-bar, .pf-st-head, .pf-st-foot { z-index: 1 }
.pf-st .pf-pic { z-index: 1 }
.pf-st-bar { position: absolute; top: 10px; left: 10px; right: 10px; height: 2px; background: rgba(255,255,255,.35); border-radius: 2px }
.pf-st-bar::after { content: ''; display: block; width: 45%; height: 100%; background: #fff; border-radius: 2px }
.pf-st-head { position: absolute; top: 20px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.5) }
.pf-st-av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none }
.pf-st-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px }
.pf-st-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pf-st-sub { font-size: 12px; opacity: .8 }
.pf-st-x { font-size: 20px }
.pf-st-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #222 }
.pf-st-foot { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600 }
.pf-st-foot i { font-size: 12px; opacity: .9 }
.pf-st-cta { background: #fff; color: #000; border-radius: 999px; padding: 9px 18px; font-size: 14px }