/* September 2026 direction: cinematic product chapters, neutral surfaces, real client color. */
:root {
  --paper:#fff; --ink:#171717; --forest:#171717; --deep:#303030;
  --mint:#e8e8e8; --muted:#636363; --line:#dedede;
  --display:"DM Sans",sans-serif; --tomato:#777;
}
h2 { font-weight:500; line-height:1.08; letter-spacing:-.045em; }
.button { border-radius:3px; min-width:175px; justify-content:center; font-weight:500; }
.button:hover { transform:none; }
.button > span { margin-left:auto; }
.text-link { font-weight:500; }
.brand-period { color:inherit; }
.eyebrow { font-weight:500; letter-spacing:.15em; }
.site-header { background:#090909; color:#fff; border-bottom:1px solid #ffffff20; }
.nav-inner { height:76px; width:calc(100% - 80px); max-width:1600px; }
.desktop-nav { gap:28px; }
.desktop-nav a:hover, .login:hover { color:#fff; }
.nav-actions .button { border:1px solid #ffffff60; background:transparent; min-width:145px; }
.nav-actions .button:hover { background:#fff; color:#171717; }
.menu-toggle span { background:#fff; }
.mobile-nav { border-color:#333; background:#090909; }
.mobile-nav .button { background:#fff; color:#171717; }
.hero-cinematic { position:relative; isolation:isolate; overflow:hidden; min-height:700px; height:calc(100svh - 76px); max-height:1050px; background:#111; color:white; padding:0; }
.hero-media { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-slides { position:absolute; right:0; top:0; width:58%; height:100%; transform:scale(1.04); }
.hero-slides img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; opacity:0; transition:opacity 1.1s ease; }
.hero-slides img.is-on { opacity:1; }
.hero-live .hero-slides img.is-on { animation:hero-drift 6s ease-out forwards; }
@keyframes hero-drift { from { transform:scale(1); } to { transform:scale(1.07); } }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#080808 5%,#080808 39%,#080808b0 55%,#08080820 80%),linear-gradient(0deg,#080808b8,transparent 45%); }
.hero-content { height:100%; display:flex; flex-direction:column; padding-top:clamp(48px,8.5vh,120px); padding-bottom:28px; }
.hero-top { margin-bottom:32px; }
.hero-top .eyebrow { color:#d0d0d0; }
.hero-index { color:#c7c7c7; }
.hero-cinematic h1 { font:500 clamp(52px,5.7vw,86px)/1.07 var(--display); letter-spacing:-.055em; max-width:970px; }
.hero-cinematic .hero-line { display:block; }
.hero-can { margin-top:26px; font-size:clamp(23px,2.5vw,36px); font-weight:400; line-height:1.22; letter-spacing:-.035em; color:#bdbdbd; }
.hero-can-lead { display:block; }
.hero-rotor { display:grid; color:#fff; }
.hero-rotor span { grid-area:1 / 1; opacity:0; transform:translateY(.4em); transition:opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.hero-rotor span.is-on { opacity:1; transform:none; transition-delay:.25s; }
.hero-bottom { display:block; margin-top:24px; }
.hero-description { max-width:490px; color:#d3d3d3; font-size:15px; line-height:1.8; }
.hero-actions { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:28px; margin-top:34px; }
.hero-actions .button { min-width:190px; background:#fff; color:#171717; }
.hero-actions .text-link { color:#fff; font-size:12px; }
.hero-caption { margin-top:auto; padding-top:45px; display:flex; justify-content:space-between; align-items:center; gap:25px; color:#d3d3d3; font-size:10px; letter-spacing:.025em; }
.hero-caption a { min-height:44px; display:flex; gap:25px; align-items:center; }
.client-section { padding:90px 0 65px; }
.client-heading h2 { font-size:clamp(36px,4vw,58px); font-weight:500; }
.gallery-intro { margin-bottom:38px; font-size:14px; }
.gallery-controls button { border-radius:3px; }
.client-card { border-radius:4px; }
.client-caption h3 { font-size:26px; line-height:1.15; letter-spacing:-.035em; font-weight:500; }
.client-caption { background:linear-gradient(0deg,#080808ed,transparent 65%); }
.client-index { border-radius:2px; background:#0006; }
.client-card > img { transition:transform .7s cubic-bezier(.16,1,.3,1); }
.client-card:hover > img { transform:scale(1.035); }
.owner-stories { padding-block:65px 100px; }
.owner-stories h2 { font-size:clamp(36px,3.9vw,56px); font-weight:500; }
.story-switcher { background:transparent; border-bottom:1px solid var(--line); border-radius:0; padding:0; gap:12px; }
.story-switcher button { border-radius:0; border-bottom:2px solid transparent; }
.story-switcher button[aria-pressed=true] { box-shadow:none; border-color:var(--ink); }
.story-interview { border-radius:4px; background:#f4f4f4; }
.interview-photo { background:#151515; }
.interview-copy h3 { font-weight:500; font-size:clamp(30px,3vw,44px); line-height:1.15; }
.interview-play { border-radius:3px; }
.product-showcase { background:#0b0b0b; color:#fff; padding-block:100px 65px; }
.showcase-heading h2 { font-size:clamp(40px,4.5vw,66px); font-weight:500; }
.showcase-heading .section-lead { color:#b4b4b4; }
.showcase-canvas { background:#171717; color:#fff; border:1px solid #303030; border-radius:4px; }
.showcase-word { color:#252525; font-weight:500; font-size:clamp(80px,16vw,230px); letter-spacing:-.07em; }
.product-desktop { border-color:#444; box-shadow:0 25px 70px #0005; }
.product-mobile, .mobile-speaker { background:#111; border-color:#111; }
.showcase-bottom ul { color:#ccc; }
.showcase-progress { background:#444; }
.showcase-progress > span { background:#eee; }
.showcase-footer > p { color:#aaa; }
.showcase-controls button { color:#ddd; border-color:#555; border-radius:3px; }
.showcase-controls button[aria-pressed=true] { background:#eee; color:#111; border-color:#eee; }
.system { padding-block:100px 70px; }
.section-intro h2 { font-size:clamp(38px,4vw,60px); font-weight:500; }
.chapter, .motion-desktop .chapter, .motion-desktop .chapter-1, .motion-desktop .chapter-2 { background:#f5f5f5; border-color:#ddd; border-radius:4px; box-shadow:none; }
.chapter { padding:35px; gap:6%; margin-bottom:28px; }
.chapter h3, .motion-desktop .chapter h3 { font-size:clamp(32px,3.3vw,48px); font-weight:500; line-height:1.12; }
.role-status { border-radius:2px; border-color:#ccc; }
.role-visual, .chapter-1 .role-visual, .chapter-2 .role-visual { background:#171717; border-radius:3px; justify-content:center; }
.motion-desktop .role-visual { border-radius:3px; }
.role-orbit { display:none; }
.role-task { border:0; background:none; padding:24px; color:#fff; }
.role-task h4 { font-size:32px; line-height:1.2; font-weight:500; }
.role-task > p { color:#ccc; }
.role-task-note { opacity:1; color:#aaa; }
.role-flow li { padding-block:18px; border-color:#414141; }
.role-flow li::before { color:#aaa; }
.platform-section { padding-bottom:100px; }
.platform-loop h3 { font-size:28px; font-weight:500; }
.marketing-results { background:#f4f4f4; border-radius:4px; }
.marketing-results h3 { font-size:clamp(36px,4vw,56px); font-weight:500; line-height:1.1; }
.marketing-results dl > div { border-color:#d3d3d3; }
.how-section { background:#f4f4f4; }
.how-heading h2 { font-size:clamp(36px,4vw,56px); }
.how-steps li { border-color:#ccc; }
.pricing-section { background:#f4f4f4; }
.plan { border-radius:4px; border-color:#d5d5d5; }
.plan-price > span { letter-spacing:0; font-size:11px; margin-left:12px; }
.plan-features, .plan-featured .plan-features { border-color:#888; }
.plan-heading h3 { font-size:36px; font-weight:500; }
.plan-heading > span { display:none; }
.plan-featured { background:#171717; }
.plan-featured .plan-description { color:#ddd; }
.plan-featured .plan-terms, .plan-featured .plan-details { color:#ddd; }
.plan-price { font-size:clamp(42px,4.5vw,64px); letter-spacing:-.05em; }
.roi-card { background:#f4f4f4; border-radius:4px; }
.roi-flower { display:none; }
.roi-total { font-size:clamp(42px,5.5vw,76px); letter-spacing:-.06em; }
.roi-card > .eyebrow { margin-bottom:32px; }
.roi-copy h2, .faq-section h2 { font-size:clamp(36px,4vw,56px); }
.customer-voice > img { border-radius:4px; }
.customer-voice blockquote { font-weight:400; font-size:clamp(25px,2.8vw,40px); line-height:1.3; }
.end-section { background:#090909; padding:100px 0; }
.end-grid { grid-template-columns:1.6fr 1fr; }
.end-grid h2 { font-size:clamp(45px,5.5vw,80px); line-height:1.08; font-weight:500; letter-spacing:-.05em; }
.end-right > span { display:none; }
.end-right > p { color:#ccc; }
.site-footer { background:#090909; color:#eee; border-top:1px solid #333; }
.footer-main > div > p, .footer-col a, .footer-bottom { color:#aaa; }
.footer-bottom { border-color:#333; }
.footer-col a:hover { color:white; }
@media (max-width:1100px) {
  .nav-inner { width:calc(100% - 48px); gap:20px; }
  .desktop-nav { gap:16px; }
  .hero-cinematic { min-height:660px; }
  .hero-content { padding-top:85px; }
  .hero-slides { width:68%; }
  .chapter, .motion-desktop .chapter { padding:26px; }
  .role-task { padding:10px; }
}
@media (max-width:760px) {
  .nav-inner { height:66px; width:calc(100% - 40px); }
  .hero-cinematic { height:calc(100svh - 66px); min-height:720px; max-height:900px; }
  .hero-content { padding-top:40px; padding-bottom:14px; }
  .hero-slides { width:100%; }
  .hero-slides img { object-position:center 30%; }
  .hero-can { margin-top:18px; font-size:22px; }
  .hero-media::after { background:linear-gradient(180deg,#080808f0 0%,#080808d9 32%,#08080880 58%,#080808c9 100%); }
  .hero-index { display:none; }
  .hero-top { margin-bottom:25px; }
  .hero-top .eyebrow { font-size:9px; }
  .hero-cinematic h1 { font-size:clamp(38px,10vw,68px); line-height:1.12; letter-spacing:-.045em; }
  .hero-bottom { margin-top:22px; }
  .hero-description { font-size:14px; max-width:400px; color:#e0e0e0; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:12px; margin-top:28px; }
  .hero-actions .button { min-height:50px; }
  .hero-actions .text-link { justify-content:center; }
  .hero-caption { padding-top:35px; font-size:9px; gap:12px; }
  .hero-caption a { max-width:135px; gap:10px; text-align:right; }
  .client-section { padding:60px 0 25px; }
  .client-heading { display:block; position:relative; padding-bottom:62px; }
  .client-heading h2 { font-size:36px; }
  .gallery-controls { position:absolute; bottom:0; right:0; }
  .gallery-intro { margin-top:20px; margin-bottom:24px; font-size:13px; }
  .client-caption h3 { font-size:26px; }
  .owner-stories { padding-block:45px 65px; }
  .owner-stories h2 { font-size:34px; }
  .interview-copy { padding:24px; }
  .interview-copy h3 { font-size:30px; }
  .product-showcase { padding-block:65px 40px; }
  .showcase-heading h2 { font-size:36px; }
  .showcase-word { font-size:23vw; top:65px; }
  .system { padding-block:65px 35px; }
  .section-intro h2 { font-size:36px; }
  .chapter { padding:22px; gap:28px; border:1px solid #ddd; }
  .chapter h3 { font-size:32px; }
  .chapter-visual { min-height:0; }
  .role-visual { padding:20px; }
  .role-task { padding:0; }
  .role-task h4 { font-size:27px; }
  .role-flow li { font-size:11px; padding-block:14px; }
  .platform-section { padding-bottom:65px; }
  .platform-loop h3 { font-size:26px; }
  .marketing-results h3, .how-heading h2, .roi-copy h2, .faq-section h2 { font-size:34px; }
  .plan-price { font-size:44px; }
  .roi-total { font-size:52px; }
  .end-section { padding-block:65px; }
  .end-grid { display:block; }
  .end-grid h2 { font-size:43px; }
  .end-right { display:block; margin:30px 0 0; max-width:360px; }
  .end-right > p { max-width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-slides { transform:none; }
  .hero-slides img, .hero-rotor span { transition:none; }
  .client-card > img { transition:none; }
  .client-card:hover > img { transform:none; }
}

/* November 2026: the platform film sits directly under the hero, on the same dark stage. */
.film-section { background:#080808; color:#fff; padding:95px 0 85px; border-top:1px solid #ffffff14; }
.film-heading { display:grid; grid-template-columns:1.25fr 1fr; gap:6%; align-items:end; margin-bottom:44px; }
.film-heading .eyebrow { color:#bdbdbd; }
.film-heading h2 { font-size:clamp(40px,4.5vw,66px); margin-top:18px; }
.film-heading .section-lead { color:#b4b4b4; max-width:470px; }
.film-frame { border:1px solid #303030; border-radius:4px; overflow:hidden; background:#000; }
.film-video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.film-foot { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; margin-top:22px; }
.film-chapters { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.film-chapters button { min-height:44px; display:inline-flex; align-items:center; gap:10px; padding:0 14px; border:1px solid #444; border-radius:3px; background:transparent; color:#ddd; font:500 12px/1 var(--display); cursor:pointer; }
.film-chapters button:hover, .film-chapters button:focus-visible { background:#fff; color:#111; border-color:#fff; }
.film-chapters button span { color:#8f8f8f; font-variant-numeric:tabular-nums; }
.film-chapters button:hover span, .film-chapters button:focus-visible span { color:#555; }
.film-note { flex:none; margin:0; padding-top:14px; color:#8f8f8f; font-size:11px; }
@media (max-width:760px) {
  .film-section { padding:60px 0 55px; }
  .film-heading { display:block; margin-bottom:28px; }
  .film-heading h2 { font-size:36px; }
  .film-heading .section-lead { margin-top:18px; }
  .film-foot { display:block; }
  .film-chapters { gap:8px; }
  .film-note { padding-top:16px; }
}

/* November 2026: how FluxSales works, as a three-step cascade. Step 1 carries the
   platform marks (pattern reference: sprites.ai — brand marks on white tiles). */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.logo-tile { flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:#fff; border:1px solid #e4e4e4; box-shadow:0 8px 18px #0000000f; }
.logo-tile svg { width:54%; height:54%; display:block; }
.logo-tile-flux { background:#111; color:#fff; border:1px solid #ffffff55; width:60px; height:60px; border-radius:16px; }
.logo-tile-flux svg { width:62%; height:62%; }
.hero-sources { display:inline-flex; flex-direction:column; gap:14px; margin-top:38px; color:#d3d3d3; }
.hero-sources-row { display:flex; align-items:center; gap:12px; }
.hero-sources .logo-tile { width:44px; height:44px; border-radius:12px; border-color:transparent; box-shadow:0 10px 24px #0000004d; }
.hero-sources .logo-tile-flux { width:52px; height:52px; border-radius:14px; border-color:#ffffff55; }
.hero-sources-label { font-size:11px; letter-spacing:.03em; }
.hero-sources:hover .hero-sources-label { color:#fff; }
.cascade-section { background:#f4f4f4; padding:105px 0 90px; }
.cascade-heading { display:grid; grid-template-columns:1.25fr 1fr; gap:6%; align-items:end; margin-bottom:60px; }
.cascade-heading h2 { font-size:clamp(40px,4.6vw,68px); margin-top:18px; }
.cascade-heading .section-lead { max-width:470px; }
.cascade { list-style:none; margin:0; padding:0; }
.cascade-step { width:80%; }
.cascade-step-1 { margin-left:10%; }
.cascade-step-2 { margin-left:20%; }
.cascade-card { display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center; padding:42px; background:#fff; border:1px solid #dcdcdc; border-radius:8px; box-shadow:0 24px 60px #0000000d; }
.cascade-step-1 .cascade-card { background:#111; border-color:#111; color:#fff; }
.cascade-number { display:block; font:500 13px/1 var(--display); letter-spacing:.12em; color:#8a8a8a; font-variant-numeric:tabular-nums; }
.cascade-text h3 { margin-top:20px; font-size:clamp(34px,3.5vw,52px); font-weight:500; line-height:1.06; letter-spacing:-.05em; }
.cascade-text > p { margin-top:20px; color:var(--muted); font-size:15.5px; line-height:1.7; max-width:440px; }
.cascade-step-1 .cascade-text > p { color:#c4c4c4; }
.cascade-points { list-style:none; margin:26px 0 0; padding:0; border-top:1px solid #dedede; }
.cascade-step-1 .cascade-points { border-color:#333; }
.cascade-points li { padding:13px 0 13px 26px; border-bottom:1px solid #dedede; font-size:14px; position:relative; }
.cascade-step-1 .cascade-points li { border-color:#333; }
.cascade-points li::before { content:"→"; position:absolute; left:0; color:#8a8a8a; }
.cascade-text .text-link { margin-top:24px; color:inherit; }
.cascade-visual { min-width:0; }
.cascade-next { display:flex; align-items:center; gap:12px; min-height:88px; margin:0 0 0 12.5%; padding:0 0 0 22px; border-left:1px solid #b9b9b9; color:#444; font-size:13px; font-weight:500; }
.cascade-next span { font-size:17px; }
.cascade-step-2 .cascade-next { margin-left:0; border:0; padding-left:0; min-height:0; margin-top:26px; }
.source-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.source-group { background:#f4f4f4; border-radius:6px; padding:16px 12px 10px; }
.source-group:first-child, .source-group:last-child { grid-column:1 / -1; }
.source-group h4 { padding-left:6px; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#6a6a6a; }
.source-group ul { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; }
.source-group li { width:14.28%; min-width:56px; }
.source-group:not(:first-child):not(:last-child) li { width:33.33%; }
.source-group:last-child li { width:14.28%; }
.source-tile { width:100%; padding:10px 2px 8px; display:flex; flex-direction:column; align-items:center; gap:8px; background:transparent; border:1px solid transparent; border-radius:10px; color:inherit; font:inherit; cursor:pointer; transition:background .25s, border-color .25s; }
.source-tile .logo-tile { width:46px; height:46px; border-radius:12px; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.source-tile:hover .logo-tile, .source-tile[aria-pressed=true] .logo-tile { transform:translateY(-4px) scale(1.06); box-shadow:0 14px 26px #0000001f; }
.source-tile[aria-pressed=true] { background:#fff; border-color:#cfcfcf; }
.source-name { font-size:10.5px; font-weight:500; line-height:1.2; text-align:center; }
.source-detail { display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px; align-items:baseline; margin-top:12px; padding:16px 18px; min-height:92px; background:#111; color:#fff; border-radius:6px; }
.source-detail > span:first-child { grid-row:1 / span 2; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#9a9a9a; }
.source-detail strong { font-size:17px; font-weight:500; letter-spacing:-.02em; }
.source-detail [data-source-detail] { color:#cfcfcf; font-size:13px; line-height:1.55; }
.visual-note { margin:0; color:#7a7a7a; font-size:10.5px; text-align:center; }
.cascade-step-1 .visual-note { color:#9a9a9a; }
.demo-steps { list-style:none; margin:28px 0 0; padding:0; border-top:1px solid #dedede; }
.cascade-step-1 .demo-steps { border-color:#333; }
.demo-steps button { position:relative; width:100%; display:grid; grid-template-columns:34px 1fr; align-items:start; padding:17px 0 18px; text-align:left; background:none; border:0; border-bottom:1px solid #dedede; color:inherit; font:inherit; cursor:pointer; opacity:.5; transition:opacity .3s; }
.cascade-step-1 .demo-steps button { border-color:#333; }
.demo-steps button:hover, .demo-steps button:focus-visible, .demo-steps button[aria-pressed=true] { opacity:1; }
.demo-step-n { padding-top:5px; font-size:12px; color:#8a8a8a; font-variant-numeric:tabular-nums; }
.demo-step-text strong { display:block; font-size:19px; font-weight:500; letter-spacing:-.025em; line-height:1.25; }
.demo-step-text small { display:block; margin-top:5px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.cascade-step-1 .demo-step-text small { color:#b9b9b9; }
.demo-progress { position:absolute; left:0; bottom:-1px; height:2px; width:0; background:currentColor; }
.demo-steps button[aria-pressed=true] .demo-progress { width:100%; }
.cascade-tags { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cascade-tags li { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 13px; border:1px solid #d5d5d5; border-radius:999px; font-size:12px; font-weight:500; }
.cascade-step-1 .cascade-tags li { border-color:#3d3d3d; }
.cascade-tags .logo-tile { width:18px; height:18px; border:0; box-shadow:none; border-radius:0; background:transparent; }
.cascade-tags .logo-tile svg { width:100%; height:100%; }
.demo { margin:0; display:flex; flex-direction:column; align-items:center; gap:18px; }
.demo-source { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.demo-source strong { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.demo-source span { padding:6px 13px; border-radius:999px; background:#efefef; color:#444; font-size:12px; }
.cascade-step-1 .demo-source span { background:#ffffff17; color:#d9d9d9; }
.demo-phone { width:min(100%,272px); aspect-ratio:390 / 844; padding:8px; border-radius:40px; background:#050505; border:1px solid #3d3d3d; box-shadow:0 34px 70px #00000052; }
.cascade-step-2 .demo-phone { box-shadow:0 34px 70px #00000030; }
.demo-screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:32px; background:#fff; }
.demo-screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.025); transition:opacity .55s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.demo-screen img.is-active { opacity:1; transform:none; }
/* Clients: two pinned panels and a scrolling list of brands (pattern reference: ycombinator.com). */
.clients-scroll { padding:95px 0 70px; }
.clients-scroll .client-heading { align-items:flex-end; }
.clients-scroll .section-lead { max-width:430px; }
.cs-grid { --cs-panel:548px; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.95fr) minmax(0,1fr); gap:28px; align-items:start; margin-top:30px; }
.cs-panel { position:sticky; top:calc(50svh - var(--cs-panel) / 2 + 38px); height:var(--cs-panel); display:flex; flex-direction:column; align-items:center; }
.cs-label { font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#666; margin-bottom:14px; }
.cs-frame { position:relative; flex:1; min-height:0; width:100%; max-width:392px; border-radius:6px; overflow:hidden; background:#111; }
.cs-frame-phone { display:grid; place-items:center; overflow:visible; background:none; }
.cs-frame-phone .demo-phone { height:100%; width:auto; padding:7px; border-radius:36px; box-shadow:0 30px 60px #00000030; }
.cs-frame-phone .demo-screen { border-radius:29px; }
.cs-slide { position:absolute; inset:0; opacity:0; transform:scale(1.03); transition:opacity .5s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.cs-slide.is-active { opacity:1; transform:none; }
.cs-slide img, .cs-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cs-logo { display:grid; place-items:center; background:#161616; }
.cs-logo img { width:70%; height:auto; max-height:46%; object-fit:contain; }
.cs-tone-deprizza { background:#e9c54b; }
.cs-tone-open { background:#e8ddd1; }
.cs-tone-pizzayork { background:#f1ece4; }
.cs-caption { margin-top:14px; min-height:20px; font-size:13px; color:#555; text-align:center; }
.cs-list { list-style:none; margin:0; padding:calc(var(--cs-panel) / 2 - 40px) 0 calc(var(--cs-panel) / 2 - 90px); text-align:center; }
.cs-item { padding:0 0 26px; }
.cs-item h3 { font-size:clamp(34px,3.6vw,54px); font-weight:500; line-height:1.08; letter-spacing:-.05em; }
.cs-item h3 button { font:inherit; letter-spacing:inherit; color:#bdbdbd; background:none; border:0; padding:6px 0; cursor:pointer; transition:color .35s; }
.cs-item h3 button:hover { color:#777; }
.cs-item.is-active h3 button { color:#111; }
.cs-place, .cs-use { max-width:330px; margin-inline:auto; opacity:0; transition:opacity .35s; }
.cs-place { margin-top:8px; font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:#666; }
.cs-use { margin-top:10px; min-height:4.8em; font-size:14.5px; line-height:1.6; color:#444; }
.cs-item.is-active .cs-place, .cs-item.is-active .cs-use { opacity:1; }
.cs-url, .cs-story, .cs-bars { display:none; }
.clients-scroll .gallery-foot { margin-top:26px; }
@media (max-height:780px) and (min-width:1001px) { .cs-grid { --cs-panel:470px; } }
@media (max-width:1000px) {
  /* No pinning on small screens: story cards, swiped sideways (pattern reference:
     ycombinator.com mobile). Without JavaScript each card rests on its channel. */
  .cs-grid { display:block; margin-top:22px; padding:0; max-width:none; width:100%; }
  .cs-panel { display:none; }
  .cs-list { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:4px 24px 18px; text-align:left; scrollbar-width:none; }
  .cs-list::-webkit-scrollbar { display:none; }
  .cs-item { position:relative; flex:0 0 min(84vw,380px); aspect-ratio:4 / 5.1; scroll-snap-align:center; padding:0; overflow:hidden; border-radius:10px; background:#111; color:#fff; cursor:pointer; }
  .cs-story { display:block; position:absolute; inset:0; }
  .cs-seg { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
  .cs-seg img { width:100%; height:100%; object-fit:cover; display:block; }
  .cs-seg-1 img { object-position:top; }
  .cs-seg.cs-logo { display:grid; place-items:center; padding-bottom:62%; }
  .cs-seg.cs-logo img { width:58%; height:auto; max-height:70%; object-fit:contain; }
  .cs-seg.cs-photo img { height:56%; }
  .cs-item:not(.seg-0) .cs-seg-1, .cs-item.seg-0 .cs-seg-0 { opacity:1; }
  /* The channel screenshot has its own text, so the caption sits on a solid base that fades in over 48px. */
  .cs-meta { position:absolute; left:0; right:0; bottom:0; padding:56px 18px 16px; background:linear-gradient(0deg,#0b0b0b 0%,#0b0b0b calc(100% - 48px),#0b0b0b00 100%); }
  .cs-item h3 { font-size:27px; letter-spacing:-.04em; }
  .cs-item h3 button, .cs-item.is-active h3 button, .cs-item h3 button:hover { color:#fff; cursor:inherit; padding:0; text-align:left; }
  .cs-place { opacity:1; max-width:none; margin:7px 0 0; color:#d0d0d0; font-size:10.5px; }
  .cs-use { max-width:none; margin:8px 0 0; min-height:4.5em; color:#f1f1f1; font-size:14px; line-height:1.5; opacity:1; }
  .cs-bars { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:10.5px; font-weight:500; letter-spacing:.03em; color:#fff; }
  .cs-bars i { flex:1; height:2px; border-radius:2px; background:#ffffff4d; overflow:hidden; }
  .cs-bars b { display:block; width:100%; height:100%; background:#fff; transform-origin:left; }
  .cs-item.seg-0 .cs-bars b, .cs-item.seg-1 .cs-bars i:nth-of-type(2) b { transform:scaleX(0); }
  .cs-item.seg-0.is-playing .cs-bars i:nth-of-type(1) b, .cs-item.seg-1.is-playing .cs-bars i:nth-of-type(2) b { animation:cs-fill 3.4s linear forwards; }
  @keyframes cs-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
@media (max-width:360px) {
  .cs-item { aspect-ratio:4 / 5.9; }
  .cs-item h3 { font-size:23px; }
  .cs-use { font-size:13px; min-height:5.9em; }
}
@media (prefers-reduced-motion:reduce) { .cs-slide, .cs-item h3 button, .cs-place, .cs-use, .cs-seg { transition:none; } .cs-slide { transform:none; } }
/* Role cards: each panel shows the work. */
.role-scene { gap:18px; justify-content:center; padding:30px; overflow:hidden; }
.scene-head .eyebrow { color:#bdbdbd; }
.scene-head h4 { margin-top:12px; font-size:clamp(24px,2.3vw,32px); font-weight:500; line-height:1.15; letter-spacing:-.035em; color:#fff; }
.role-scene .role-task-note { margin:0; font-size:10.5px; color:#8f8f8f; opacity:1; }
.board { list-style:none; margin:0; padding:0; color:#fff; }
.board > li { display:grid; grid-template-columns:34px 1fr; padding:15px 0 16px; border-top:1px solid #333; }
.board > li:last-child { border-bottom:1px solid #333; }
.board > li > span { padding-top:3px; font-size:11px; color:#8f8f8f; font-variant-numeric:tabular-nums; }
.board strong { display:block; font-size:15px; font-weight:500; }
.board-chip { display:inline-flex; align-items:center; gap:8px; margin-top:11px; padding:7px 13px 7px 8px; border-radius:999px; background:#fff; color:#111; font-size:12px; font-weight:500; }
.board-chip i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#111; color:#fff; font-style:normal; font-size:10px; }
.board-logos, .board-orders { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.board-logos .logo-tile { width:40px; height:40px; border-radius:11px; border-color:transparent; }
.board-order { display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 4px; border:1px solid #3d3d3d; border-radius:999px; font-size:12px; color:#e6e6e6; }
.board-order .logo-tile { width:24px; height:24px; border-radius:50%; border:0; box-shadow:none; }
.channel { display:flex; align-items:center; justify-content:center; gap:28px; min-height:0; }
.channel .demo-phone { flex:none; width:clamp(150px,36%,196px); padding:6px; border-radius:30px; }
.channel .demo-screen { border-radius:24px; }
.channel-side { min-width:0; color:#fff; }
.channel-client strong { display:block; font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; }
.channel-client span { display:inline-block; margin-top:9px; padding:5px 11px; border-radius:999px; background:#ffffff17; color:#d9d9d9; font-size:11.5px; }
.channel-flow { list-style:none; margin:20px 0 0; padding:0; }
.channel-flow li { display:flex; gap:12px; padding:12px 0; border-top:1px solid #333; font-size:14px; font-weight:500; }
.channel-flow li:last-child { border-bottom:1px solid #333; }
.channel-flow span { font-size:11px; color:#8f8f8f; padding-top:2px; font-variant-numeric:tabular-nums; }
.chat { width:100%; max-width:430px; margin:0 auto; background:#0e0e0e; border:1px solid #303030; border-radius:16px; overflow:hidden; color:#fff; }
.chat-head { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#1b1b1b; border-bottom:1px solid #2c2c2c; }
.chat-head .logo-tile { width:38px; height:38px; border-radius:50%; border:0; }
.chat-head strong { display:block; font-size:14px; font-weight:500; }
.chat-head span span, .chat-head div span { font-size:11px; color:#9a9a9a; }
.chat-log { list-style:none; margin:0; padding:14px; display:flex; flex-direction:column; gap:7px; }
.chat-log > li { max-width:84%; padding:8px 12px; border-radius:14px; font-size:13px; line-height:1.4; }
.chat-guest { align-self:flex-end; background:#fff; color:#111; border-bottom-right-radius:4px; }
.chat-agent { align-self:flex-start; background:#262626; color:#eee; border-bottom-left-radius:4px; }
.chat-log > .chat-card { align-self:flex-start; max-width:90%; padding:12px 14px; background:#fff; color:#111; border-radius:12px; border-bottom-left-radius:4px; }
.chat-card strong { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.chat-card strong i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#25d366; color:#fff; font-style:normal; font-size:10px; }
.chat-card ul { list-style:none; margin:8px 0 0; padding:0; font-size:12px; color:#444; }
.chat-card ul li { padding:3px 0 3px 16px; position:relative; }
.chat-card ul li::before { content:"→"; position:absolute; left:0; color:#8a8a8a; }
.chat-live .chat-log > li { opacity:0; transform:translateY(10px) scale(.98); transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.chat-live .chat-log > li.is-in { opacity:1; transform:none; }
/* Sticky desktop cards have a fixed height: the phone takes what is left under the heading. */
.motion-desktop .role-scene-1 .channel { flex:1; min-height:0; }
.motion-desktop .channel .demo-phone { height:100%; max-height:430px; width:auto; }
@media (max-height:820px) and (min-width:1000px) {
  .role-scene { padding:22px 26px; gap:12px; }
  .board-order { padding:3px 10px 3px 3px; font-size:11.5px; }
  .board-orders { gap:6px; }
  .scene-head h4 { margin-top:8px; font-size:23px; }
  .board > li { padding:10px 0 11px; }
  .board-chip, .board-logos, .board-orders { margin-top:8px; }
  .board-logos .logo-tile { width:34px; height:34px; border-radius:9px; }
  .channel-flow { margin-top:12px; }
  .channel-flow li { padding:9px 0; }
  .chat-log { padding:10px 12px; gap:5px; }
  .chat-log > li { padding:6px 11px; font-size:12.5px; }
  .chat-head { padding:9px 12px; }
}
@media (max-width:999px) {
  /* Narrow panels: the phone on top, the client and steps under it. */
  .channel { flex-direction:column; gap:20px; }
  .channel .demo-phone { width:178px; }
  .channel-side { width:100%; }
  .channel-client { text-align:center; }
  .channel-flow { margin-top:16px; }
}
@media (max-width:760px) {
  .role-scene { padding:20px 16px; gap:16px; }
  .channel { gap:18px; }
  .channel-flow li { font-size:13px; padding:10px 0; }
}
@media (prefers-reduced-motion:no-preference) {
  /* The campaign runs across platforms in turn; the phone alternates landing and menu. */
  .board-logos .logo-tile { animation:board-run 6s ease-in-out infinite; }
  .board-logos .logo-tile:nth-child(2) { animation-delay:1.5s; }
  .board-logos .logo-tile:nth-child(3) { animation-delay:3s; }
  .board-logos .logo-tile:nth-child(4) { animation-delay:4.5s; }
  @keyframes board-run { 0%,22% { transform:translateY(-5px) scale(1.08); box-shadow:0 0 0 3px #ffffff40, 0 12px 24px #0006; } 30%,100% { transform:none; box-shadow:0 8px 18px #0000000f; } }
  .channel .channel-alt { animation:channel-swap 9s ease-in-out infinite; }
  @keyframes channel-swap { 0%,44% { opacity:0; transform:scale(1.025); } 50%,94% { opacity:1; transform:none; } 100% { opacity:0; transform:scale(1.025); } }
  .demo-auto .demo-steps button[aria-pressed=true] .demo-progress { animation:demo-progress 3.6s linear both; }
  @keyframes demo-progress { from { width:0; } to { width:100%; } }
  .hero-sources .logo-tile { animation:sources-bob 5.5s ease-in-out infinite; }
  .hero-sources .logo-tile:nth-child(2n) { animation-delay:-1.8s; }
  .hero-sources .logo-tile:nth-child(3n) { animation-delay:-3.4s; }
  @keyframes sources-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
}
@media (prefers-reduced-motion:reduce) {
  .source-tile, .source-tile .logo-tile, .demo-screen img, .demo-steps button { transition:none; }
  .demo-screen img { transform:none; }
  .source-tile:hover .logo-tile, .source-tile[aria-pressed=true] .logo-tile { transform:none; }
}
/* Laptop heights: the changing line carries the message; the paragraph steps aside. */
@media (max-height:940px) and (min-width:761px) { .hero-description { display:none; } }
@media (max-height:820px) and (min-width:761px) {
  .hero-cinematic .hero-content { padding-top:52px; }
  .hero-sources { margin-top:24px; }
  .hero-sources-label { display:none; }
  .hero-caption { padding-top:18px; }
}
@media (max-width:760px) and (max-height:800px) {
  .hero-description { display:none; }
  .hero-actions { margin-top:22px; }
}
@media (max-width:1100px) {
  .cascade-step { width:88%; }
  .cascade-step-1 { margin-left:6%; }
  .cascade-step-2 { margin-left:12%; }
  .cascade-next { margin-left:6.82%; }
  .cascade-card { grid-template-columns:1fr; gap:30px; padding:32px; }
  /* One column: the phone sits right above its steps, so a tap shows its screen in view. */
  .has-demo { gap:0; }
  .has-demo .cascade-text { display:contents; }
  .has-demo .cascade-number { order:1; }
  .has-demo h3 { order:2; }
  .has-demo .cascade-text > p { order:3; }
  .has-demo .cascade-visual { order:4; margin-top:30px; }
  .has-demo .demo-steps { order:5; }
  .has-demo .cascade-tags { order:6; }
  .has-demo .text-link { order:7; justify-self:start; }
  /* The description follows the visitor while they browse the groups. */
  .source-detail { position:sticky; bottom:12px; z-index:2; box-shadow:0 14px 34px #00000040; }
}
@media (max-width:760px) {
  .hero-sources { margin-top:26px; gap:10px; }
  .hero-sources-row { gap:8px; }
  .hero-sources .logo-tile { width:36px; height:36px; border-radius:10px; }
  .hero-sources .logo-tile-flux { width:42px; height:42px; border-radius:12px; }
  .hero-sources-label { font-size:10px; }
  .cascade-section { padding:65px 0 55px; }
  .cascade-heading { display:block; margin-bottom:34px; }
  .cascade-heading h2 { font-size:38px; }
  .cascade-heading .section-lead { margin-top:18px; }
  .cascade-step, .cascade-step-1, .cascade-step-2 { width:100%; margin-left:0; }
  .cascade-card { padding:24px 18px; gap:26px; }
  .has-demo { gap:0; }
  .demo-phone { width:214px; padding:7px; border-radius:34px; }
  .demo-screen { border-radius:27px; }
  .demo { gap:14px; }
  .cascade-text h3 { font-size:34px; }
  .cascade-next { margin-left:24px; min-height:70px; }
  .source-groups { grid-template-columns:1fr; }
  .source-group li, .source-group:not(:first-child):not(:last-child) li, .source-group:last-child li { width:25%; min-width:0; }
  .source-detail { grid-template-columns:1fr; min-height:128px; }
  .source-detail > span:first-child { grid-row:auto; }
}

/* ---- Top menu with panels (Nov 11; reference: sprites.ai) ------------------------------ */
.desktop-nav { gap:2px; align-items:center; font-size:14px; }
.nav-item { position:static; }
.nav-trigger, .desktop-nav > .nav-link { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border:0; border-radius:999px; background:none; color:#fff; font:inherit; font-weight:500; cursor:pointer; text-decoration:none; }
.nav-trigger:hover, .nav-item:hover > .nav-trigger, .nav-trigger[aria-expanded="true"], .desktop-nav > .nav-link:hover { background:#ffffff16; color:#fff; text-decoration:none; }
.nav-caret { width:7px; height:7px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
.nav-item:hover .nav-caret, .nav-item.is-open .nav-caret { transform:rotate(-135deg); margin-top:3px; }
.mega { position:absolute; left:0; right:0; top:100%; z-index:30; padding:8px 40px 0; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; pointer-events:none; }
.nav-item:hover > .mega, .nav-item:has(.mega a:focus-visible) > .mega, .nav-item.is-open > .mega { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.mega-inner { display:grid; grid-template-columns:1fr 330px; gap:28px; max-width:1240px; margin:0 auto; padding:26px; border-radius:18px; background:#fff; color:#171717; box-shadow:0 40px 90px #00000045; }
.mega-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-content:start; }
.mega-col h3 { margin:8px 10px 10px; font:500 11px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#767676; }
.mega-col ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.mega-col a { display:block; min-height:0; padding:9px 10px; border-radius:10px; color:#171717; text-decoration:none; }
.mega-col a:hover { background:#f2f2f2; color:#171717; text-decoration:none; }
.mega-col strong { display:block; font-size:15px; font-weight:500; letter-spacing:-.01em; }
.mega-col span { display:block; margin-top:2px; font-size:13px; font-weight:400; color:#666; }
.mega-feature { display:flex; flex-direction:column; padding:24px; border-radius:14px; color:#fff; background:radial-gradient(120% 90% at 90% 0%, #86e0b4 0%, #86e0b400 60%), linear-gradient(158deg, #1f5142 0%, #2d8659 55%, #57b990 100%); }
.mega-kicker { margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#d5ebe0; }
.mega-feature h3 { margin:12px 0 10px; font:500 24px/1.12 var(--body); letter-spacing:-.03em; white-space:pre-line; }
.mega-feature p:not(.mega-kicker) { margin:0; font-size:14px; line-height:1.5; font-weight:400; color:#eaf7f0; }
.mega-feature-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:auto; padding-top:20px; }
.mega-feature-links a { min-height:0; color:#fff; font-size:14px; font-weight:500; text-decoration:none; }
.mega-feature-links a:hover { color:#fff; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:1100px) { .mega { padding:8px 24px 0; } .mega-inner { grid-template-columns:1fr 280px; gap:20px; padding:20px; } .nav-trigger, .desktop-nav > .nav-link { padding:0 10px; } }
@media (prefers-reduced-motion:reduce) { .mega, .nav-caret { transition:none; } }
/* Phone menu: the same groups as fold-out lists */
.mobile-nav { max-height:calc(100svh - 66px); overflow-y:auto; }
.m-group { border-bottom:1px solid #2a2a2a; }
.m-group summary { display:flex; justify-content:space-between; align-items:center; padding:14px 0; cursor:pointer; list-style:none; font-weight:500; }
.m-group summary::-webkit-details-marker { display:none; }
.m-group summary::after { content:"+"; font-size:20px; font-weight:400; color:#aaa; }
.m-group[open] summary::after { content:"−"; }
.m-group h3 { margin:14px 0 4px; font:500 11px/1.4 var(--body); letter-spacing:.14em; text-transform:uppercase; color:#8a8a8a; }
.m-group a { display:block; padding:9px 0; color:#dedede; }
.m-group > a:last-child { padding-bottom:18px; }
.mobile-nav > a:not(.button) { border-bottom:1px solid #2a2a2a; padding:14px 0; font-weight:500; }

/* ---- Footer with six columns of links to every section of the site -------------------- */
.footer-main { grid-template-columns:repeat(6,1fr); gap:36px 28px; }
.footer-main > div:first-child { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:28px; border-bottom:1px solid #2a2a2a; }
.footer-main > div:first-child > p { margin-top:0; text-align:right; }
.footer-col h2 { color:#fff; }
.footer-col a { font-size:13px; min-height:32px; line-height:1.35; }
@media (max-width:1100px) { .footer-main { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .footer-main { grid-template-columns:1fr 1fr; } .footer-main > div:first-child { align-items:flex-start; } }

/* ---- Menu, second pass (Nov 11; reference: owner.com). One product panel with four
   outcome groups, an icon per product, and two customer stories as photo cards. ---------- */
.mega-col a { display:flex; align-items:flex-start; gap:12px; }
.mega-text { display:block; }
.mega-col .mega-text > span { display:block; margin-top:2px; font-size:13px; font-weight:400; color:#666; }
.mega-col span.mega-ic { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; margin:0; border-radius:9px; background:#ecf6f0; color:#1f5142; }
.mega-ic svg { width:19px; height:19px; display:block; }
.mega-inner.has-cases { grid-template-columns:1fr 300px; }
.mega-inner.has-cases .mega-cols { grid-template-columns:repeat(2,1fr); gap:6px 28px; }
.mega-inner.has-cases .mega-col:nth-child(n+3) h3 { margin-top:18px; }
.mega-cols[data-groups="4"] { grid-template-columns:repeat(4,1fr); gap:16px; }
.mega-inner.has-cases .mega-cols[data-groups="4"] { grid-template-columns:repeat(2,1fr); }
.mega-cases { display:grid; gap:12px; align-content:stretch; padding-left:26px; border-left:1px solid #e6e6e6; }
.mega-case { position:relative; display:block; min-height:0; overflow:hidden; border-radius:14px; background:#111; color:#fff; text-decoration:none; }
.mega-case img { width:100%; height:100%; min-height:176px; object-fit:cover; object-position:center 24%; display:block; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.mega-case:hover img { transform:scale(1.04); }
.mega-case span { position:absolute; left:0; right:0; bottom:0; padding:48px 16px 14px; background:linear-gradient(#0000,#000000d6); font-size:15px; font-weight:500; line-height:1.25; letter-spacing:-.01em; }
@media (max-width:1100px) { .mega-inner.has-cases { grid-template-columns:1fr 240px; } .mega-cols[data-groups="4"] { grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion:reduce) { .mega-case img { transition:none; } .mega-case:hover img { transform:none; } }
/* Case cards keep a fixed height so the panel never grows taller than the screen, and the
   frame is cropped to the face (the video frames carry a caption lower down). */
.mega-cases { align-content:start; }
.mega-case img { height:186px; min-height:0; object-position:center 42%; }
/* Drawn arrows (render.js): the site fonts have no arrow glyphs, and iPhones draw a typed
   arrow as an emoji tile. */
.arrow { display:inline-grid; place-items:center; vertical-align:-.14em; }
.arrow svg { display:block; width:1em; height:1em; }
.button > .arrow { height:1.4em; }
.button > .arrow svg { width:1.25em; height:1.25em; stroke-width:.75; }
/* Phones: buttons are pills with the arrow in its own circle, nested inside the pill's
   radius. The second action in the opening is a glass pill of the same family. */
@media (max-width:760px) {
  .button { min-width:0; min-height:56px; padding:6px 6px 6px 24px; border-radius:999px; gap:16px; justify-content:space-between; font-size:15px; font-weight:500; letter-spacing:-.01em; }
  .button > .arrow { flex:none; width:44px; height:44px; margin-left:auto; border-radius:50%; background:#fff; color:#171717; font-size:20px; }
  .button > .arrow svg { width:16px; height:16px; stroke-width:1.4; }
  .button-light > .arrow, .hero-actions .button > .arrow, .mobile-nav .button > .arrow { background:#171717; color:#fff; }
  .button-outline > .arrow { background:#171717; color:#fff; }
  .hero-actions { gap:10px; }
  .hero-actions .button { min-height:56px; padding:6px 6px 6px 24px; gap:16px; font-size:15px; }
  .hero-actions .text-link { min-height:56px; padding:6px 6px 6px 24px; gap:16px; justify-content:space-between; border:1px solid #ffffff38; border-radius:999px; background:#ffffff14; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:15px; letter-spacing:-.01em; }
  .hero-actions .text-link > .arrow { flex:none; width:44px; height:44px; border:1px solid #ffffff38; border-radius:50%; font-size:16px; }
  .hero-actions .text-link:hover > span:last-child { transform:none; }
}
@media (max-width:760px) { .end-right > .button { font-size:15px; } }
/* The menu stays open while the pointer travels from its button to the panel. The panel opens
   on hover, and the strip of header between the button and the panel belonged to neither, so
   a hand moving down at normal speed closed the menu before reaching an item. */
.mega::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:20px; }