/* ---------------------------------------------------------------------------
   Homepage refresh: everything below the hero adopts the quiet editorial system
   from the Mist and feature pages — centered intros, sentence-case eyebrows,
   light display headlines, warm grey surfaces, soft radii, and small pills.
   Scoped by section id, so the hero and the capability strip keep their styles.
   The product illustrations inside cards keep their own type on purpose.
--------------------------------------------------------------------------- */
:is(#section-3,#whatever-you-sell,#wherever-you-sell,#people-in-motion,#section-9,#home-teardowns,#section-13,#section-11){--mist-ink:#0a0a0a;--mist-muted:#6f6f6f;--mist-faint:#8a8a8a;--mist-line:#e8e6e3;--mist-surface:#f6f5f4;--mist-blue:#007aff;--home-font:"Mist Neue",Neue,Helvetica,Arial,sans-serif}
:is(#section-3 .section-heading,#section-3 .fs-card-caption,#section-3 .carousel-controls,#whatever-you-sell,#wherever-you-sell .selling-heading,#wherever-you-sell .selling-channel-copy,#people-in-motion,#section-9 .vs-section-heading,#section-9 .vs-value-card>h3,#section-9 .vs-value-card>p,#section-9 .vs-unifier,#home-teardowns,#section-13,#section-11){--font-headline:var(--home-font);--font-body:var(--home-font);font-family:var(--home-font)}

/* Chapter intros: an optional eyebrow, a light two-tone headline (the setup in grey, the payoff in black), one short line. */
:is(#section-3,#section-9,#people-in-motion,#home-teardowns,#section-13,#section-11) .fc-home-eyebrow{max-width:none;margin:0 0 16px;color:var(--mist-ink);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.005em}
:is(#section-3 .section-heading,#whatever-you-sell .selling-heading,#wherever-you-sell .selling-heading,#section-9 .vs-section-heading){display:block;max-width:880px;margin:0 auto clamp(40px,4vw,60px);padding:0;text-align:center}
:is(#section-3 .section-heading,#whatever-you-sell .selling-heading,#wherever-you-sell .selling-heading,#section-9 .vs-section-heading) h2{max-width:none;margin:0;color:var(--mist-ink);font-size:clamp(40px,4.6vw,66px);font-weight:400;line-height:1;letter-spacing:-.01em;text-wrap:balance}
:is(#section-3 .section-heading,#whatever-you-sell .selling-heading,#wherever-you-sell .selling-heading) h2>span{display:block;color:var(--mist-faint)}
:is(#section-3 .section-heading>p:last-child:not(.fc-home-eyebrow),#whatever-you-sell .selling-heading>p:last-child,#wherever-you-sell .selling-heading>p:last-child,#section-9 .vs-section-heading>p){max-width:600px;margin:20px auto 0;padding:0;color:var(--mist-ink);font-size:18px;line-height:1.45;letter-spacing:-.005em;text-wrap:balance}

/* Applications: the rail stays, with calmer captions and warm controls. */
#section-3{padding-top:clamp(88px,8vw,128px)}
#section-3 .section-heading{padding-inline:var(--page-margin-total)}
#section-3 .section-heading>p:last-child:not(.fc-home-eyebrow){max-width:640px}
#section-3 .fs-card-caption{color:var(--mist-muted);font-size:16px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}
#section-3 .fs-card-caption>strong{display:block;margin-bottom:6px;color:var(--mist-ink);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.01em;font-variation-settings:normal}
#section-3 .carousel-controls{margin-top:24px}
#section-3 .circle-button{width:44px;height:44px;border:0;background:var(--mist-surface);color:var(--mist-ink);font-size:20px}
#section-3 .circle-button:hover{background:#ecebe9}
#section-3 .story-progress{background:var(--mist-line)}
#section-3 .story-progress>span{background:var(--mist-ink)}
#section-3 .story-count{color:var(--mist-muted);font-size:14px;font-weight:500;letter-spacing:0}

/* Every product: the photograph stands on its own, and the four benefits read as a hairline row beneath it. */
#whatever-you-sell,#wherever-you-sell{padding-top:clamp(96px,9vw,144px)}
#whatever-you-sell .selling-editorial{aspect-ratio:auto;overflow:visible;border-radius:0;background:none}
#whatever-you-sell .selling-editorial>img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;border-radius:24px;background:#f5f2e8}
#whatever-you-sell .selling-benefits{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin:clamp(32px,3.5vw,48px) 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none}
#whatever-you-sell .selling-benefits article{padding:24px 0 0;border:0;border-top:1px solid var(--mist-line)}
#whatever-you-sell .selling-benefit-icon{width:24px;height:24px;margin-bottom:20px;color:var(--mist-ink)}
#whatever-you-sell .selling-benefits h3{margin:0 0 8px;color:var(--mist-ink);font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
#whatever-you-sell .selling-benefits p{max-width:320px;color:var(--mist-muted);font-size:16px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}

/* Every channel: the four scenes stay; the words under them match the rest of the page. */
#wherever-you-sell .selling-channel-art{border-radius:20px}
#wherever-you-sell .selling-channel-copy{padding-top:20px}
#wherever-you-sell .selling-channel-copy h3{min-height:2.4em;margin:0 0 12px;color:var(--mist-ink);font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
#wherever-you-sell .selling-channel-brands{margin:0 0 12px}
#wherever-you-sell .selling-channel-copy p{max-width:none;color:var(--mist-muted);font-size:16px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}

/* Mist: a warm panel with a blue chapter tag, and the rep's question answered over the photograph. */
#people-in-motion{--people-surface:var(--mist-surface);--home-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff' transform='rotate(-8 12 12)'%3E%3Cpath d='M11 11H6A5 5 0 0 1 1 6A5 5 0 0 1 6 1A5 5 0 0 1 11 6ZM13 11H18A5 5 0 0 0 23 6A5 5 0 0 0 18 1A5 5 0 0 0 13 6ZM11 13H6A5 5 0 0 0 1 18A5 5 0 0 0 6 23A5 5 0 0 0 11 18ZM13 13H18A5 5 0 0 1 23 18A5 5 0 0 1 18 23A5 5 0 0 1 13 18Z'/%3E%3C/g%3E%3C/svg%3E");min-height:0;margin-top:clamp(96px,9vw,144px);border-radius:24px;background:var(--mist-surface);color:var(--mist-ink)}
#people-in-motion .people-in-motion-image{min-height:clamp(600px,50vw,760px)}
#people-in-motion .people-in-motion-image img{position:absolute;inset:0}
#people-in-motion .people-in-motion-copy{padding:clamp(48px,5vw,88px) clamp(32px,5vw,96px) clamp(48px,5vw,88px) clamp(24px,4vw,72px)}
#people-in-motion .fc-home-eyebrow-mist{display:inline-flex;align-items:center;min-height:30px;margin-bottom:22px;padding:6px 13px 5px;border-radius:999px;background:#0070e8;color:#fff;font-size:14px}
#people-in-motion h2{max-width:560px;margin:0 0 24px;color:var(--mist-ink);font-size:clamp(38px,4vw,58px);font-weight:400;line-height:1;letter-spacing:-.01em}
#people-in-motion h2 span{color:var(--mist-faint)}
#people-in-motion .people-in-motion-copy p:not(.fc-home-eyebrow){max-width:480px;color:var(--mist-ink);font-size:18px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}
#people-in-motion .people-in-motion-copy p:not(.fc-home-eyebrow)+p{margin-top:16px;color:var(--mist-muted)}
#people-in-motion .fc-home-actions{margin-top:32px}
/* The conversation sits over her sleeve, clear of her face and the phone; below 1101px there is no room for it. */
#people-in-motion .fc-home-mist-chat{position:absolute;z-index:2;left:clamp(20px,3.4%,32px);bottom:clamp(20px,3.4%,32px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:256px;animation:fc-mist-bubble-float 7s ease-in-out infinite}
#people-in-motion .fc-home-mist-ask{position:relative;max-width:100%;margin:0;padding:10px 14px;border-radius:18px 18px 5px 18px;background:#0070e8;color:#fff;font-size:15px;line-height:1.3;letter-spacing:-.005em;box-shadow:0 14px 30px -12px rgba(0,122,255,.6)}
#people-in-motion .fc-home-mist-ask::after{content:"";position:absolute;right:-5px;bottom:0;width:9px;height:12px;background:#0070e8;clip-path:polygon(0 0,0 100%,100% 100%)}
#people-in-motion .fc-home-mist-reply{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;padding:10px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.72);box-shadow:0 22px 44px -18px rgba(16,24,40,.35),0 4px 12px -2px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.95);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7)}
#people-in-motion .fc-home-mist-reply::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg,rgba(0,122,255,.55),rgba(106,92,255,.3) 35%,rgba(255,255,255,0) 60%,rgba(255,255,255,.9));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
#people-in-motion .fc-home-mist-by{display:flex;align-items:center;gap:8px;margin:0;padding:2px 2px 0;color:var(--mist-ink);font-size:13px;font-weight:500;line-height:1}
#people-in-motion .fc-home-mist-avatar{flex:none;width:22px;height:22px;border-radius:50%;background:var(--home-mark) center/12px no-repeat,linear-gradient(140deg,#62bcff 0%,#007aff 50%,#6a5cff 100%);box-shadow:0 3px 8px -1px rgba(0,122,255,.45),inset 0 1px 0 rgba(255,255,255,.4)}
#people-in-motion .fc-home-mist-reply ul{display:grid;gap:6px;min-width:0;margin:0;padding:0;list-style:none}
#people-in-motion .fc-home-mist-reply li{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:#fff;color:var(--mist-ink);font-size:14px;font-weight:500;line-height:1.25;letter-spacing:-.005em}
#people-in-motion .fc-home-mist-reply li::after{content:"›";color:var(--mist-faint);font-size:18px;font-weight:400;line-height:1}

/* Why Fluid: a centered intro over the three costs; the answer keeps its green. */
#section-9{margin-top:0;padding-top:clamp(96px,9vw,144px)}
#section-9 .vs-art{border-radius:20px}
#section-9 .vs-value-card>h3{margin-top:20px;color:var(--mist-ink);font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
#section-9 .vs-value-card>p{max-width:360px;margin:6px auto 0;color:var(--mist-muted);font-size:16px;line-height:1.45;letter-spacing:-.005em;text-wrap:balance}
#section-9 .vs-unifier{margin-top:56px;border-radius:24px;background:var(--mist-surface)}
#section-9 .vs-resolution{border-radius:20px;box-shadow:none}
#section-9 .vs-resolution h3{font-size:clamp(36px,4.2vw,60px);font-weight:400;line-height:1;letter-spacing:-.01em}
#section-9 .vs-resolution-top p{color:#dfeadb;font-size:18px;line-height:1.45;letter-spacing:-.005em}
#section-9 .vs-resolution-points li{font-size:15px}
#section-9 .vs-resolution-link{gap:10px;min-height:44px;padding:12px 20px;font-size:16px;font-weight:500;line-height:1}
#section-9 .vs-resolution-link span{font-size:17px}

/* Teardowns: four brand teardowns as image cards, leading into the full library. */
#home-teardowns{padding-top:clamp(96px,9vw,144px);color:var(--mist-ink)}
#home-teardowns .fc-home-teardowns-intro{max-width:880px;margin:0 auto clamp(40px,4vw,60px);text-align:center}
#home-teardowns h2{margin:0;color:var(--mist-ink);font-size:clamp(40px,4.6vw,66px);font-weight:400;line-height:1;letter-spacing:-.01em;text-wrap:balance}
#home-teardowns h2>span{display:block;color:var(--mist-faint)}
#home-teardowns .fc-home-teardowns-intro>p:not(.fc-home-eyebrow){max-width:600px;margin:20px auto 0;color:var(--mist-ink);font-size:18px;line-height:1.45;letter-spacing:-.005em;text-wrap:balance}
#home-teardowns .fc-home-teardowns-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
#home-teardowns .fc-home-teardowns-grid li{min-width:0;margin:0}
#home-teardowns .fc-home-teardowns-grid a{display:flex;flex-direction:column;height:100%;color:var(--mist-ink);text-decoration:none}
#home-teardowns .fc-home-teardown-media{display:block;aspect-ratio:4/5;margin-bottom:20px;overflow:hidden;border-radius:20px;background:var(--mist-surface)}
#home-teardowns .fc-home-teardown-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#home-teardowns .fc-home-teardowns-grid a:hover .fc-home-teardown-media img{transform:scale(1.03)}
#home-teardowns .fc-home-teardown-media img{mix-blend-mode:multiply}
#home-teardowns .fc-home-teardowns-grid small{color:var(--mist-muted);font-size:14px;font-weight:500;line-height:1.3}
#home-teardowns .fc-home-teardowns-grid strong{margin-top:6px;font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
#home-teardowns .fc-home-teardown-summary{margin-top:6px;color:var(--mist-muted);font-size:16px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}
#home-teardowns .fc-home-teardowns-grid em{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-size:15px;font-style:normal;font-weight:500}
#home-teardowns .fc-home-teardowns-grid a:focus-visible{outline:2px solid var(--mist-blue);outline-offset:4px;border-radius:20px}
#home-teardowns .fc-home-teardowns-all{margin:40px 0 0;text-align:center}
@media(max-width:1000px){#home-teardowns .fc-home-teardowns-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}}
@media(max-width:560px){
  #home-teardowns .fc-home-teardowns-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none}
  #home-teardowns .fc-home-teardowns-grid::-webkit-scrollbar{display:none}
  #home-teardowns .fc-home-teardowns-grid li{scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){#home-teardowns .fc-home-teardown-media img{transition:none}}

/* Questions: a centered heading over a hairline list, with the conversation offered underneath. */
#section-13{display:block;max-width:960px;padding-top:0;padding-bottom:clamp(96px,9vw,144px)}
#section-13 .fc-home-intro{margin-bottom:clamp(36px,4vw,56px);text-align:center}
#section-13 h2{margin:0;color:var(--mist-ink);font-size:clamp(34px,3.4vw,48px);font-weight:500;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
#section-13 .fc-home-intro>p:not(.fc-home-eyebrow){max-width:520px;margin:16px auto 0;color:var(--mist-ink);font-size:18px;line-height:1.45;letter-spacing:-.005em;text-wrap:balance}
#section-13 .faq-list{border-top:1px solid var(--mist-line)}
#section-13 .faq-list details{border-top:0;border-bottom:1px solid var(--mist-line)}
#section-13 .faq-list summary{padding:22px 0;color:var(--mist-ink);font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.01em}
/* The +/× icon is drawn with two bars in a fixed box, so open and closed share one center and size. */
#section-13 .faq-list summary>span{position:relative;flex:none;width:16px;height:16px;margin-top:4px;color:var(--mist-muted);font-size:0;line-height:0}
#section-13 .faq-list summary>span::before,#section-13 .faq-list summary>span::after{content:"";position:absolute;left:0;top:7.25px;width:16px;height:1.5px;border-radius:1px;background:currentColor}
#section-13 .faq-list summary>span::after{transform:rotate(90deg)}
#section-13 .faq-list details>p{max-width:720px;padding:0 48px 24px 0;color:#2b2b2b;font-size:16px;line-height:1.5;letter-spacing:-.005em}
#section-13 .fc-home-faq-foot{margin:32px 0 0;text-align:center}

/* The close is the same calm panel as the other pages. */
#section-11 .closing-scene{padding:clamp(64px,8vw,120px) clamp(24px,5vw,80px);border-radius:32px;background:var(--mist-surface);color:var(--mist-ink)}
#section-11 .closing-background,#section-11 .closing-scene::after{display:none}
#section-11 .closing-copy h2{max-width:820px;margin:0 auto;color:var(--mist-ink);font-size:clamp(38px,4.6vw,66px);font-weight:400;line-height:1;letter-spacing:-.01em;text-wrap:balance}
#section-11 .closing-copy>p:not(.fc-home-eyebrow){max-width:540px;margin:20px auto 0;color:var(--mist-ink);font-size:18px;line-height:1.45;letter-spacing:-.005em;text-wrap:balance}
#section-11 .closing-copy>p br{display:none}
#section-11 .closing-copy>.button{margin-top:32px;gap:10px;min-height:44px;padding:12px 20px;border-radius:999px;background:var(--mist-ink);color:#fff;font-size:16px;font-weight:500;line-height:1;transform:none}
#section-11 .closing-copy>.button:hover{background:#2e2e2e;transform:none}
#section-11 .closing-copy>.button>span{font-size:17px;line-height:1}

/* The older sheets reach these images with relative URLs, which 404 on the storefront, so the cards lost their
   photo and portraits. Point the same rules at the CDN copies; size and position still come from the original rules. */
/* (2026-10: fc-value-stories.css and the other sheets now point at the CDN copies directly; the portraits keep this one.) */
#section-3 .fs-portrait{background-image:url("https://ik.imagekit.io/fluid/980191006/fc-assets--fluid-stories--people_XAEs7JXWX.webp")}

/* Small pills: black for the main action, warm grey (white on a warm panel) for the rest. */
.fc-home-actions{display:flex;flex-wrap:wrap;gap:10px}
.fc-home-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 20px;border:0;border-radius:999px;background:#0a0a0a;color:#fff;font-family:"Mist Neue",Neue,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.fc-home-pill:hover{background:#2e2e2e}
.fc-home-pill span{font-size:17px;line-height:1}
.fc-home-pill-quiet{background:#f6f5f4;color:#0a0a0a}
.fc-home-pill-quiet:hover{background:#ecebe9}
#people-in-motion .fc-home-pill-quiet{background:#fff}
#people-in-motion .fc-home-pill-quiet:hover{background:#ecebe9}
.fc-home-pill:focus-visible,#section-11 .closing-copy>.button:focus-visible{outline:2px solid #007aff;outline-offset:3px}

@media(max-width:1100px){
  #whatever-you-sell .selling-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  #people-in-motion .fc-home-mist-chat{display:none}
}
@media(max-width:1000px){
  #people-in-motion .people-in-motion-copy{padding:48px 36px 48px 28px}
}
@media(max-width:800px){
  #whatever-you-sell .selling-editorial>img{aspect-ratio:1.42;object-position:38% center}
}
@media(max-width:700px){
  #people-in-motion{border-radius:20px}
  #people-in-motion .people-in-motion-image{min-height:0;aspect-ratio:1.05}
  #people-in-motion .people-in-motion-copy{padding:36px 24px 40px}
  #people-in-motion h2{font-size:40px}
}
@media(max-width:520px){
  #whatever-you-sell .selling-editorial>img{aspect-ratio:.82;object-position:29% center;border-radius:20px}
  #whatever-you-sell .selling-benefits{grid-template-columns:1fr;gap:0;scroll-snap-type:none}
  #whatever-you-sell .selling-benefits article{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;padding:20px 0;border:0!important;border-top:1px solid var(--mist-line)!important;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  #whatever-you-sell .selling-benefit-icon{grid-row:span 2;margin:0}
  #whatever-you-sell .selling-benefits article:last-child{padding-bottom:0}
  #wherever-you-sell .selling-channel-copy h3{min-height:0}
  #section-11 .closing-scene{border-radius:20px}
}
@media(max-width:500px){
  :is(#section-3 .section-heading>p:last-child:not(.fc-home-eyebrow),#whatever-you-sell .selling-heading>p:last-child,#wherever-you-sell .selling-heading>p:last-child,#section-9 .vs-section-heading>p,#people-in-motion .people-in-motion-copy p:not(.fc-home-eyebrow),#section-13 .fc-home-intro>p:not(.fc-home-eyebrow),#section-11 .closing-copy>p:not(.fc-home-eyebrow),#home-teardowns .fc-home-teardowns-intro>p:not(.fc-home-eyebrow)){font-size:17px}
  #section-13 .faq-list summary{font-size:17px}
  #section-13 .faq-list details>p{padding-right:16px}
}
@media(prefers-reduced-motion:reduce){#people-in-motion .fc-home-mist-chat{animation:none}.fc-home-pill{transition:none}}

/* Hero video: fills the slot the platform demo used to hold under the hero buttons. The demo now sits above "Whatever you sell". */
.showcase-shell.hero-video{position:relative;height:auto;aspect-ratio:16/9;background:#0b0c0b;isolation:isolate}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover;background:#0b0c0b;cursor:pointer}
.hero-video video:focus-visible{outline:none}
/* Preview state: the muted loop is a placeholder. A soft vignette lifts the big play button off any frame. */
.hero-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,10,.34) 0,rgba(10,10,10,0) 22%),radial-gradient(circle at 50% 50%,rgba(10,10,10,.18) 0,rgba(10,10,10,0) 40%);transition:opacity .25s}
/* Big play: one flat white disc, no halo. The triangle is drawn with its centroid on the icon's center line, which is what reads as centered. */
.hero-video-play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:clamp(64px,6vw,88px);height:clamp(64px,6vw,88px);margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:#0a0a0a;box-shadow:0 12px 32px -14px rgba(10,10,10,.5);transform:translate(-50%,-50%);cursor:pointer;transition:transform .2s}
.hero-video-play:hover{transform:translate(-50%,-50%) scale(1.05)}
.hero-video-play svg{width:42%;height:42%;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
/* "Pause preview": a quiet text link with a pause glyph, bottom left. */
.hero-video-toggle{position:absolute;z-index:2;left:clamp(10px,1.4vw,18px);bottom:clamp(2px,.6vw,10px);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border:0;background:none;color:#fff;font:inherit;font-size:14px;line-height:1;letter-spacing:-.005em;text-shadow:0 1px 10px rgba(10,10,10,.55);cursor:pointer}
.hero-video-toggle .label{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.55);transition:border-color .15s}
.hero-video-toggle:hover .label{border-bottom-color:#fff}
.hero-video-toggle svg{width:12px;height:12px;flex:none;fill:currentColor;filter:drop-shadow(0 1px 6px rgba(10,10,10,.55))}
.hero-video-toggle .i-play{display:none}
.hero-video-toggle .i-play polygon{stroke:currentColor;stroke-width:2;stroke-linejoin:round}
/* Two-tone ring so focus reads on both light and dark video frames. */
.hero-video-play:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px #0a0a0a}
.hero-video-toggle:focus-visible{outline:2px solid #fff;outline-offset:0;border-radius:6px;box-shadow:0 0 0 4px #0a0a0a}
.hero-video.is-paused .hero-video-toggle .i-play{display:block}
.hero-video.is-paused .hero-video-toggle .i-pause{display:none}
/* Watch state: sound on, native controls, full frame visible; the preview affordances step aside. */
.hero-video.is-watching video{object-fit:contain;cursor:auto}
.hero-video.is-watching::after{opacity:0}
.hero-video.is-watching :is(.hero-video-play,.hero-video-toggle){display:none}
.hero-video.is-broken :is(.hero-video-play,.hero-video-toggle){display:none}
@media(max-width:700px){.hero-video-toggle{font-size:13px;left:6px;bottom:0}.hero-video-play{width:64px;height:64px}}
@media(prefers-reduced-motion:reduce){.hero-video::after,.hero-video-play{transition:none}.hero-video-play:hover{transform:translate(-50%,-50%)}}
.home-demo{padding:0 0 clamp(24px,3vw,48px)}

/* The interactive demo now sits under the "Whatever you sell" heading, where the photo used to be. */
#whatever-you-sell .selling-editorial>.showcase-shell{width:100%;max-width:none;margin:0}

/* The close: the editorial photo becomes the panel. Wide screens put the copy in the quiet top-right of the photo; smaller ones put it above the photo. */
#section-11 .closing-scene{container-type:inline-size;display:flex;flex-direction:column;padding:0}
#section-11 .closing-copy{order:1;padding:clamp(56px,9vw,88px) clamp(20px,5vw,56px) clamp(36px,6vw,56px)}
#section-11 .closing-background{display:block;position:relative;inset:auto;z-index:auto;order:2;aspect-ratio:1672/941;overflow:hidden;background:none}
#section-11 .closing-background img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% center}
@media(max-width:520px){#section-11 .closing-background{aspect-ratio:1.15}}
@media(min-width:1180px){
  #section-11 .closing-scene{display:block;position:relative;aspect-ratio:1.5;text-align:left}
  #section-11 .closing-background{position:absolute;inset:0;aspect-ratio:auto}
  #section-11 .closing-background img{object-position:right bottom}
  #section-11 .closing-copy{position:absolute;z-index:1;top:5.2cqw;left:46cqw;right:5cqw;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2.4cqw;row-gap:1.3cqw;align-items:end}
  #section-11 .closing-copy>.fc-home-eyebrow,#section-11 .closing-copy>h2{grid-column:1/-1}
  #section-11 .closing-copy>.fc-home-eyebrow{margin:0}
  #section-11 .closing-copy h2{margin:0;max-width:none;font-size:clamp(34px,3.4cqw,50px)}
  #section-11 .closing-copy>p:not(.fc-home-eyebrow){margin:0;max-width:34cqw;font-size:clamp(14px,1.15cqw,17px)}
  #section-11 .closing-copy>.button{margin:0}
}

/* Application cards: room above the carousel for the hover lift, and the lift itself.
   The stories each card plays live in fc-story-motion.js. */
#section-3 .stories-track{padding-top:16px;margin-top:-16px}
#section-3 .story-link .fs-art{transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){
  #section-3 .fluid-story-card:hover .fs-art,
  #section-3 .fluid-story-card:has(.story-link:focus-visible) .fs-art{transform:translateY(-6px);box-shadow:0 30px 54px -30px rgba(16,24,40,.42)}
}
@media (prefers-reduced-motion:reduce){
  #section-3 .story-link .fs-art{transition:none}
  #section-3 .fluid-story-card:hover .fs-art,#section-3 .fluid-story-card:has(.story-link:focus-visible) .fs-art{transform:none;box-shadow:none}
}