/* Google Sans — self-hosted (OFL-1.1), Hebrew + Latin, 400/500/600/700 */
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/google-sans-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/google-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/google-sans-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/google-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/google-sans-hebrew-600-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/google-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/google-sans-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/google-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --glass:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.48));
  --glass-strong:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(42,21,17,.04);
  --glass-blur:blur(22px) saturate(1.8);
  color-scheme: light;
  /* surfaces */
  --bg:#FAF7F4;          /* warm off-white, never pure white */
  --bg-2:#F3EEEA;
  --card:#FFFFFF;
  /* ink */
  --ink:#080808;
  --ink-2:#2B2522;
  --mute:#716862;
  --hair:#ECE5E0;
  /* coral scale — one hue, many tones */
  --c-50:#FFF5F1;
  --c-100:#FFE7DF;
  --c-200:#FFCDBD;
  --c-300:#FFA68E;
  --c-500:#FD6145;
  --c-text:#EA4E32; /* coral for text on light grounds: 3.5:1, passes large-text AA */
  --c-700:#C9412A;
  --c-900:#2A1511;       /* warm near-black for the one dark moment */
  /* used by the phone screens */
  --paper:#F5F5F5; --coral:#FD6145; --peach:#FFC7B5; --line:#2A2725; --dur:8s;
  --wa-bg:#0B141A; --pl-bg:#121212; --pl-green:#1ED760;
  --r-xl:36px; --r-lg:28px; --r-md:20px;
  --shadow-soft:0 1px 2px rgba(42,21,17,.04),0 12px 32px -12px rgba(42,21,17,.10);
  --shadow-lift:0 1px 2px rgba(42,21,17,.05),0 24px 48px -20px rgba(42,21,17,.18);
  --glow:0 10px 28px -8px rgba(253,97,69,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.site{padding-inline:16px;overflow-x:clip}
.container{max-width:1160px;margin-inline:auto}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:400;color:var(--c-700);letter-spacing:.02em}
.eyebrow::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url(../img/pepper-mark.png) center/contain no-repeat;mask:url(../img/pepper-mark.png) center/contain no-repeat}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--mute);max-width:52ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding-inline:30px;border-radius:999px;font:inherit;font-size:17px;font-weight:700;cursor:pointer;border:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background-color .25s}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--c-200);outline-offset:3px}
.btn-primary{background:var(--c-500);color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(253,97,69,.6)}
.btn-ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair),var(--shadow-soft)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--c-200),var(--shadow-lift)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(-4px)}

/* nav */
.links{display:flex;gap:28px;font-size:16px}
.links a{color:var(--ink-2);position:relative}
.links a::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:2px;border-radius:2px;background:var(--c-500);transform:scaleX(0);transition:transform .3s}
.links a:hover::after{transform:scaleX(1)}
.logo{font-size:30px;font-weight:700;letter-spacing:-.03em;direction:ltr;display:flex;align-items:baseline}
.logo i{width:.24em;height:.24em;background:var(--c-500);border-radius:2px;margin-left:.06em;display:inline-block}

/* hero */
.hero{position:relative;padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,96px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;top:-10%;left:50%;translate:-50% 0;width:min(900px,120%);aspect-ratio:1.6;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,205,189,.85),rgba(255,231,223,.5) 45%,transparent 75%);filter:blur(10px);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06);opacity:.85}}
.hero h1{font-size:clamp(44px,7.4vw,96px);line-height:1.02;letter-spacing:-.035em;max-width:22ch}
.hero h1 span{display:block;color:var(--c-text)}
.hero .lead{text-align:center}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pepper{width:clamp(72px,8vw,104px);height:auto;filter:drop-shadow(0 18px 24px rgba(201,65,42,.22));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-3deg)}}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{top:12px}

/* section shell */
.section{padding-block:clamp(36px,4.5vw,64px)}
.head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.head h2{font-size:clamp(34px,4.6vw,60px);line-height:1.08;max-width:18ch}

/* phones */
.phones-card{border-radius:var(--r-xl);background:linear-gradient(180deg,var(--c-50),var(--bg-2));box-shadow:inset 0 0 0 1px var(--hair);padding:clamp(28px,5vw,64px) clamp(16px,4vw,56px);overflow:hidden;position:relative}
.phones-card::after{content:"";position:absolute;bottom:-30%;left:50%;translate:-50% 0;width:70%;aspect-ratio:2;border-radius:50%;background:radial-gradient(closest-side,rgba(253,97,69,.18),transparent);pointer-events:none}
.phones-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);align-items:start;max-width:900px;margin-inline:auto}
.phones-row figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.phones-row figure:nth-child(2){margin-top:48px}
.phones-row figcaption{display:flex;flex-direction:column;gap:2px;text-align:center}
.phones-row figcaption b{font-size:16px}
.phones-row figcaption span{font-size:14px;color:var(--mute)}
.phones-row .device{max-width:250px;background:linear-gradient(160deg,#FFFFFF,#E9E4E0);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -28px rgba(42,21,17,.35)}
@media (max-width:760px){
  .phones-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .phones-row figure{flex:0 0 70%;scroll-snap-align:center}
  .phones-row figure:nth-child(2){margin-top:0}
}

/* tabs */
.seg{display:inline-flex;padding:6px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair),var(--shadow-soft);gap:4px}
.seg button{font:inherit;font-size:16px;font-weight:700;height:48px;padding-inline:26px;border-radius:999px;border:0;background:transparent;color:var(--mute);cursor:pointer;transition:background-color .3s,color .3s,box-shadow .3s}
.seg button[aria-selected="true"]{background:var(--c-500);color:#fff;box-shadow:var(--glow)}
.seg button:focus-visible{outline:3px solid var(--c-200);outline-offset:2px}
.grid-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:12px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card h3{font-size:clamp(22px,2vw,26px);line-height:1.25}
.card p{color:var(--mute);font-size:17px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.chip{font-size:13px;font-weight:700;color:var(--c-700);background:var(--c-50);border-radius:999px;padding:4px 12px}
.icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,var(--c-100),var(--c-50));display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(253,97,69,.12)}
.icon svg{width:24px;height:24px;fill:none;stroke:var(--c-500);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.panel[hidden]{display:none!important}
/* tab panels are animated in JS only; a CSS animation here replayed on show and made the cards flicker */
@keyframes fadeUp{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}

/* statement — the one dark moment */
.statement{border-radius:var(--r-xl);background:var(--c-900);color:#fff;padding:clamp(48px,8vw,104px) clamp(24px,6vw,88px);position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.statement::before{content:"";position:absolute;z-index:-1;top:-40%;left:-15%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(253,97,69,.55),rgba(253,97,69,.12) 55%,transparent);filter:blur(20px)}
.statement::after{content:"";position:absolute;z-index:-1;bottom:-50%;right:-10%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,199,181,.22),transparent)}
.statement h2{font-size:clamp(34px,5vw,64px);line-height:1.08;max-width:16ch}
.statement h2 span{color:var(--c-300)}
.statement p{color:rgba(255,255,255,.72);font-size:clamp(18px,1.6vw,21px);max-width:44ch}

/* faq */
.faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:960px){.faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.faq{grid-template-columns:1fr}}
.faq .card h3{font-size:21px}

/* closing CTA */
.closing{border-radius:var(--r-xl);padding:clamp(40px,7vw,88px) clamp(20px,5vw,64px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;
  background:radial-gradient(120% 90% at 50% 0%,var(--c-100),var(--c-50) 55%,var(--bg) 100%);box-shadow:inset 0 0 0 1px var(--c-100)}
.closing h2{font-size:clamp(36px,5vw,64px);line-height:1.05}
.contact-meta{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:15px;color:var(--mute)}
.contact-meta b{color:var(--ink-2);direction:ltr;unicode-bidi:isolate;user-select:all}

/* footer */
footer{padding-block:40px 120px;border-top:1px solid var(--hair);margin-top:clamp(48px,6vw,88px)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:15px;color:var(--mute)}
.foot .logo{font-size:24px;color:var(--ink)}

/* floating bar */
.float{position:fixed;z-index:60;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;display:flex;align-items:center;gap:18px;padding:8px 8px 8px 8px;padding-inline-start:26px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 20px 40px -16px rgba(8,8,8,.45);font-size:16px;white-space:nowrap;max-width:calc(100% - 32px)}
.float .btn{height:46px;padding-inline:22px;font-size:15px}



@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.device{width:100%;max-width:300px;padding:10px;border-radius:46px;background:linear-gradient(160deg,#EDEDED,#CFCFCF);box-shadow:0 30px 60px -30px rgba(253,97,69,.25)}
.screen{position:relative;width:100%;aspect-ratio:9/19.5;max-width:100%;border-radius:37px;overflow:hidden;background:var(--ink);container-type:inline-size;isolation:isolate}

.status{position:absolute;inset-inline:0;top:0;height:11cqw;display:flex;align-items:center;justify-content:space-between;padding-inline:8cqw;font-size:3.6cqw;font-weight:700;z-index:5;direction:ltr;color:var(--paper)}
.status i{display:inline-block;width:6cqw;height:2.6cqw;border:.4cqw solid currentColor;border-radius:.8cqw;position:relative}
.status i::after{content:"";position:absolute;top:.4cqw;bottom:.4cqw;left:.4cqw;right:1.4cqw;background:currentColor;border-radius:.3cqw}
.island{position:absolute;top:2.6cqw;left:50%;translate:-50% 0;width:30cqw;height:8cqw;border-radius:5cqw;background:#000;z-index:6}
svg{display:block}

/* ============ 1 · FEED ============ */
.feed{background:#1a1110}
.feed .footage{position:absolute;inset:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(10cqw)}
.b1{width:90cqw;height:90cqw;background:#FD6145;top:18%;right:-30cqw;opacity:.9;animation:drift1 var(--dur) ease-in-out infinite}
.b2{width:80cqw;height:80cqw;background:#7A3BFF;bottom:8%;left:-35cqw;opacity:.55;animation:drift2 var(--dur) ease-in-out infinite}
.b3{width:60cqw;height:60cqw;background:#FFC7B5;top:40%;left:15cqw;opacity:.45;animation:drift1 var(--dur) ease-in-out infinite reverse}
@keyframes drift1{50%{transform:translate(-12cqw,10cqw) scale(1.12)}}
@keyframes drift2{50%{transform:translate(14cqw,-8cqw) scale(.9)}}
.grain{position:absolute;inset:0;opacity:.12;background-image:radial-gradient(rgba(255,255,255,.7) .25cqw,transparent .3cqw);background-size:2.2cqw 2.2cqw;mix-blend-mode:overlay}
.placeholder{position:absolute;top:22cqw;left:50%;translate:-50% 0;border:.4cqw dashed rgba(245,245,245,.6);border-radius:10cqw;padding:1.6cqw 4cqw;font-size:3.4cqw;white-space:nowrap;color:rgba(245,245,245,.85);background:rgba(8,8,8,.25);z-index:4}
.feed .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.85) 0%,rgba(8,8,8,0) 45%)}
.rail{position:absolute;left:4cqw;bottom:34cqw;display:flex;flex-direction:column;gap:6cqw;align-items:center;z-index:3}
.rail svg{width:9cqw;height:9cqw;fill:var(--paper);filter:drop-shadow(0 .5cqw 1cqw rgba(0,0,0,.4))}
.rail .like{animation:like var(--dur) infinite}
@keyframes like{0%,40%{fill:var(--paper);transform:scale(1)}44%{fill:var(--coral);transform:scale(1.35)}48%,100%{fill:var(--coral);transform:scale(1)}}
.disc{width:10cqw;height:10cqw;border-radius:50%;background:conic-gradient(from 0deg,#FD6145,#FFC7B5,#7A3BFF,#FD6145);border:2cqw solid #111;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.meta{position:absolute;right:5cqw;left:18cqw;bottom:12cqw;display:flex;flex-direction:column;gap:2.4cqw;z-index:3}
.handle{font-weight:700;font-size:4.4cqw}
.caption{font-size:3.8cqw;line-height:1.35;opacity:.92}
.sound{display:flex;align-items:center;gap:2cqw;font-size:3.6cqw;overflow:hidden;white-space:nowrap}
.sound svg{width:4cqw;height:4cqw;fill:var(--paper);flex:none}
.ticker{overflow:hidden;flex:1;mask-image:linear-gradient(to left,transparent,#000 10%,#000 90%,transparent)}
.ticker span{display:inline-block;padding-inline-start:100%;animation:tick var(--dur) linear infinite}
@keyframes tick{to{transform:translateX(100%)}}
.progress{position:absolute;inset-inline:0;bottom:6cqw;height:.6cqw;background:rgba(245,245,245,.2);z-index:3}
.progress::after{content:"";position:absolute;inset-block:0;right:0;width:100%;background:var(--paper);transform-origin:right;animation:prog var(--dur) linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============ 2 · CHAT (iOS dark) ============ */
.chat{background:#0B0B0B;color:#F2F2F2;--bar:#161616;--in:#262628;--out:#005C4B;--sub:#8E8E93;--tick:#53BDEB;--ios-accent:#F2F2F2}
.chat .status{background:var(--bar)}
.wall{position:absolute;inset:0;opacity:.05;
  background-image:
    radial-gradient(circle at 20% 30%,transparent 1.4cqw,#fff 1.5cqw,#fff 1.8cqw,transparent 1.9cqw),
    radial-gradient(circle at 70% 70%,#fff .7cqw,transparent .8cqw),
    radial-gradient(circle at 45% 80%,transparent .9cqw,#fff 1cqw,#fff 1.2cqw,transparent 1.3cqw);
  background-size:18cqw 18cqw,14cqw 14cqw,23cqw 23cqw}
.wa-top{position:absolute;top:11cqw;inset-inline:0;height:14cqw;display:flex;align-items:center;gap:2.4cqw;padding-inline:2cqw 4.5cqw;background:var(--bar);border-bottom:.25cqw solid #2C2C2E;z-index:4}
.wa-top .back{width:6.4cqw;height:6.4cqw;fill:none;stroke:var(--ios-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.avatar{width:9cqw;height:9cqw;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:4cqw;background:linear-gradient(180deg,#A8A8AD,#6E6E73);color:#fff;flex:none}
.who{display:flex;flex-direction:column;gap:.2cqw;flex:1;min-width:0}
.who b{font-size:4.2cqw;font-weight:700}
.who .st{position:relative;height:3.6cqw;font-size:3cqw;color:var(--sub)}
.who .st span{position:absolute;inset-inline-start:0;top:0;white-space:nowrap}
.st .online{animation:stOnline var(--dur) infinite}
.st .typ{opacity:0;animation:stTyping var(--dur) infinite}
@keyframes stOnline{0%,46%{opacity:1}48%,60%{opacity:0}62%,100%{opacity:1}}
@keyframes stTyping{0%,46%{opacity:0}48%,60%{opacity:1}62%,100%{opacity:0}}
.wa-icons{display:flex;gap:6cqw}
.wa-icons svg{width:6cqw;height:6cqw;fill:none;stroke:var(--ios-accent);stroke-width:1.7;stroke-linejoin:round}
.thread{position:absolute;top:27cqw;bottom:20cqw;inset-inline:0;padding-inline:4cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:1.4cqw;z-index:2}
.day{align-self:center;background:rgba(40,40,42,.9);color:#D1D1D6;font-size:3cqw;font-weight:700;padding:1cqw 3.2cqw;border-radius:4cqw;margin-bottom:2cqw}
.b{position:relative;max-width:76%;padding:1.8cqw 3cqw 1.3cqw;border-radius:4.2cqw;font-size:4cqw;line-height:1.35}
.b .t{display:flex;justify-content:flex-end;align-items:center;gap:.8cqw;font-size:2.7cqw;color:var(--sub);margin-top:.3cqw;direction:ltr}
.in{align-self:flex-start;background:var(--in)}
.out{align-self:flex-end;background:var(--out)}
.out .t{color:#9FD3C6}
/* iOS: tail sits at the bottom corner */
.in.tail{border-end-start-radius:1cqw}
.out.tail{border-end-end-radius:1cqw}
.in.tail::after,.out.tail::after{content:"";position:absolute;bottom:0;width:3cqw;height:3.4cqw}
.in.tail::after{inset-inline-start:-1.6cqw;background:var(--in);clip-path:path('M 12 0 C 12 8 8 12 0 13 L 12 13 Z')}
.out.tail::after{inset-inline-end:-1.6cqw;background:var(--out);clip-path:path('M 0 0 C 0 8 4 12 12 13 L 0 13 Z')}
.ticks{width:4.2cqw;height:2.6cqw;fill:none;stroke-width:2;stroke:#9FD3C6;animation:read var(--dur) infinite}
@keyframes read{0%,42%{stroke:#9FD3C6}44%,100%{stroke:var(--tick)}}
.m1{animation:pop1 var(--dur) infinite}
.m2{animation:pop2 var(--dur) infinite}
.m3{animation:pop3 var(--dur) infinite}
@keyframes pop1{0%,14%{opacity:0;transform:translateY(3cqw)}18%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes pop2{0%,26%{opacity:0;transform:translateY(3cqw)}30%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes pop3{0%,60%{opacity:0;transform:translateY(3cqw)}64%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.song{width:66cqw;padding:1.2cqw}
.song .prev{display:flex;gap:2.4cqw;background:rgba(0,0,0,.22);border-radius:3cqw;overflow:hidden}
.song .th{width:17cqw;aspect-ratio:1;flex:none;background:
  radial-gradient(60% 70% at 70% 30%,#FFC7B5 0%,transparent 65%),
  radial-gradient(70% 80% at 25% 80%,#7A3BFF 0%,transparent 65%),
  linear-gradient(135deg,#FD6145,#8E231C)}
.song .tx{display:flex;flex-direction:column;justify-content:center;gap:.6cqw;padding-inline-end:2cqw;min-width:0}
.song .tx b{font-size:3.7cqw}
.song .tx span{font-size:3cqw;color:#A9CFC5}
.song .lnk{font-size:3.4cqw;color:var(--tick);padding:1.4cqw 1.8cqw 0;direction:ltr;text-align:right}
.song .t{padding-inline:1.8cqw}
/* iOS composer: + · field(sticker) · camera · mic — no green FAB */
.composer{position:absolute;bottom:0;inset-inline:0;height:20cqw;padding:2.4cqw 3.4cqw 7cqw;background:var(--bar);border-top:.25cqw solid #2C2C2E;display:flex;align-items:center;gap:3.4cqw;z-index:3}
.composer svg{width:6.4cqw;height:6.4cqw;fill:none;stroke:var(--ios-accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.field{flex:1;height:9cqw;border-radius:5cqw;background:#262628;border:.25cqw solid #3A3A3C;display:flex;align-items:center;padding-inline:3cqw}
.field span{flex:1}
.field svg{width:5cqw;height:5cqw;stroke:var(--sub)}
.chat .home{position:absolute;bottom:2cqw;left:50%;translate:-50% 0;width:36cqw;height:1.3cqw;border-radius:1cqw;background:#F2F2F2;z-index:4}
/* ============ 3 · PLAYER ============ */
.player{background:linear-gradient(180deg,#8A3326 0%,#4A1D17 38%,var(--pl-bg) 72%)}
.pl-head{position:absolute;top:13cqw;inset-inline:5cqw;display:flex;justify-content:space-between;align-items:center;direction:ltr}
.pl-head svg{width:6cqw;height:6cqw;fill:none;stroke:#fff;stroke-width:2.2}
.pl-head .dots{fill:#fff;stroke:none}
.pl-head div{display:flex;flex-direction:column;align-items:center;gap:.4cqw;text-align:center}
.pl-head small{font-size:2.8cqw;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.pl-head b{font-size:3.6cqw}
.cover{position:absolute;top:28cqw;inset-inline:7cqw;aspect-ratio:1;border-radius:1.6cqw;overflow:hidden;box-shadow:0 5cqw 12cqw -3cqw rgba(0,0,0,.6);
  background:
   radial-gradient(55% 55% at 70% 35%,#FFC7B5 0%,transparent 70%),
   radial-gradient(60% 60% at 25% 75%,#7A3BFF 0%,transparent 70%),
   linear-gradient(135deg,#FD6145,#8E231C);animation:coverShift var(--dur) ease-in-out infinite}
.cover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(8,8,8,.06) 0 .6cqw,transparent .6cqw 1.8cqw)}
.cover em{position:absolute;bottom:4cqw;right:5cqw;font-style:normal;font-weight:700;font-size:6cqw;color:var(--ink);z-index:2}
@keyframes coverShift{50%{filter:saturate(1.15) brightness(1.05)}}
.pl-title{position:absolute;top:122cqw;inset-inline:7cqw;display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.pl-title div{display:flex;flex-direction:column;gap:.8cqw;min-width:0}
.pl-title b{font-size:5.8cqw}
.pl-title span{font-size:4cqw;color:rgba(255,255,255,.7)}
.add{position:relative;width:7cqw;height:7cqw;flex:none}
.add svg{position:absolute;inset:0;width:100%;height:100%}
.add .plus{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.6;animation:addOff var(--dur) infinite}
.add .done{opacity:0;animation:addOn var(--dur) infinite}
@keyframes addOff{0%,56%{opacity:1}58%,100%{opacity:0}}
@keyframes addOn{0%,56%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.15)}63%,100%{opacity:1;transform:scale(1)}}
.seek{position:absolute;top:137cqw;inset-inline:7cqw;display:flex;flex-direction:column;gap:1.8cqw;direction:ltr}
.seek .rail2{position:relative;height:1cqw;border-radius:1cqw;background:rgba(255,255,255,.3)}
.seek .fill{position:absolute;inset-block:0;left:0;width:100%;border-radius:1cqw;background:#fff;transform-origin:left;animation:prog2 var(--dur) linear infinite}
.seek .knob{position:absolute;top:50%;width:3cqw;height:3cqw;margin:-1.5cqw 0 0 -1.5cqw;border-radius:50%;background:#fff;animation:knob var(--dur) linear infinite}
@keyframes prog2{from{transform:scaleX(.18)}to{transform:scaleX(.36)}}
@keyframes knob{from{left:18%}to{left:36%}}
.seek .times{display:flex;justify-content:space-between;font-size:2.9cqw;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.ctl{position:absolute;top:149cqw;inset-inline:6cqw;display:flex;justify-content:space-between;align-items:center;direction:ltr}
.ctl svg{width:7cqw;height:7cqw;fill:#fff}
.ctl .sm{width:5.6cqw;height:5.6cqw;fill:none;stroke:#fff;stroke-width:2}
.ctl .sm.on{stroke:var(--pl-green)}
.ctl .shuf{display:flex;flex-direction:column;align-items:center;gap:.6cqw}
.ctl .shuf i{width:1cqw;height:1cqw;border-radius:50%;background:var(--pl-green)}
.ctl .play{width:17cqw;height:17cqw;border-radius:50%;background:#fff;display:grid;place-items:center}
.ctl .play svg{fill:#000;width:7cqw;height:7cqw}
.pl-foot{position:absolute;top:172cqw;inset-inline:7cqw;display:flex;justify-content:space-between;direction:ltr}
.pl-foot svg{width:5cqw;height:5cqw;fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.8}
.lyrics{position:absolute;top:182cqw;inset-inline:5cqw;height:60cqw;border-radius:3cqw;background:#A8402E;padding:4cqw;display:flex;flex-direction:column;gap:2cqw}
.lyrics small{font-size:3.4cqw;font-weight:700}
.lyrics p{margin:0;font-size:5cqw;font-weight:700;line-height:1.3;color:rgba(0,0,0,.55)}
.lyrics p.now{color:#fff}
.toast{position:absolute;bottom:34cqw;inset-inline:4cqw;display:flex;align-items:center;gap:2.6cqw;padding:3cqw 3.6cqw;border-radius:1.8cqw;background:#fff;color:#000;font-weight:700;font-size:3.7cqw;box-shadow:0 3cqw 8cqw rgba(0,0,0,.45);opacity:0;animation:toast var(--dur) infinite;z-index:6}
.toast svg{width:5cqw;height:5cqw;flex:none}
.toast span{flex:1}
.toast u{text-decoration:none;font-size:3.3cqw;color:#000;opacity:.7}
@keyframes toast{0%,60%{opacity:0;transform:translateY(4cqw)}64%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(2cqw)}}

/* home hero — split layout with the live brand form */
.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;text-align:start;padding-block:clamp(24px,4vw,56px) clamp(0px,1vw,12px)}
.hero-split::before{left:28%;top:0;width:min(760px,90%)}
.hero-copy{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.hero-split h1{font-size:clamp(42px,5.2vw,76px);max-width:none}
.hero-split .lead{text-align:start}
.blob-wrap{position:relative;width:118%;aspect-ratio:1;margin-inline-end:-18%;max-width:none}
.blob-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.blob-wrap .fallback{display:none}
.blob-wrap.no-gl canvas{display:none}
.blob-wrap.no-gl .fallback{display:grid;place-items:center;position:absolute;inset:0}
.blob-wrap.no-gl .pepper{width:40%}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;text-align:center}
  .hero-copy{align-items:center}
  .hero-split .lead{text-align:center}
  .blob-wrap{width:min(420px,100%);margin-inline:auto;margin-top:-8px}
}

/* warm wash behind the headline side, bleeding to the viewport edge and under the header */
.hero-split::after{content:"";position:absolute;z-index:-2;pointer-events:none;top:-140px;bottom:-60px;right:calc(50% - 50vw);width:min(62vw,1100px);
  background:
    radial-gradient(55% 60% at 78% 32%,rgba(255,205,189,.85),rgba(255,231,223,.35) 55%,transparent 75%),
    radial-gradient(45% 45% at 96% 88%,rgba(255,166,142,.40),transparent 70%),
    radial-gradient(40% 35% at 40% 8%,rgba(255,231,223,.9),transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent);
  animation:wash 14s ease-in-out infinite alternate}
@keyframes wash{to{transform:translate3d(-2%,2%,0) scale(1.04)}}
@media (max-width:900px){.hero-split::after{width:100vw;right:calc(50% - 50vw);top:-100px}}
@media (prefers-reduced-motion:reduce){.hero-split::after{animation:none}}

/* header — frosted, milky glass capsule */
.nav{position:sticky;top:calc(22px + env(safe-area-inset-top,0px));z-index:50;margin-top:24px}
@media (max-width:760px){.nav{top:calc(14px + env(safe-area-inset-top,0px));margin-top:14px}}
.nav-in{height:78px;display:flex;justify-content:space-between;align-items:center;padding-inline:16px;border-radius:999px;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 1px 2px rgba(42,21,17,.05),0 12px 32px -16px rgba(42,21,17,.22);
  transition:background .35s,box-shadow .35s}
.nav.is-scrolled .nav-in{background:var(--glass-strong);box-shadow:var(--glass-edge),0 1px 2px rgba(42,21,17,.06),0 18px 40px -18px rgba(42,21,17,.3)}
.nav-start{display:flex;align-items:center;gap:18px}
.nav-mark{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.nav-mark img{width:32px;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(201,65,42,.25))}
.nav-mark:hover{transform:rotate(-14deg) scale(1.22)}
.nav-mark:active{transform:rotate(-14deg) scale(1.1)}
.nav-mark:focus-visible{outline:3px solid var(--c-200);outline-offset:2px}
.nav .links{gap:4px;font-size:16.5px;font-weight:600}
.nav .links a{padding:8px 14px;border-radius:999px;transition:background-color .25s,color .25s}
.nav .links a::after{display:none}
.nav .links a:hover{background:rgba(255,255,255,.75)}
.nav .links a[aria-current="page"]{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(42,21,17,.06),0 4px 12px -6px rgba(42,21,17,.18)}
/* sliding pill: follows the pointer, slides to the chosen page before the curtain */
.nav .links{position:relative}
.nav .links a{position:relative;z-index:1}
.nav .links a:focus:not(:focus-visible){outline:none}
.nav .links a:focus-visible{outline:3px solid var(--c-200);outline-offset:2px}
.has-pill .links a:hover,.has-pill .links a[aria-current="page"]{background:transparent;box-shadow:none}
.nav-pill{position:absolute;top:0;left:0;height:100%;width:0;z-index:0;pointer-events:none;border-radius:999px;background:#fff;opacity:0;
  box-shadow:0 1px 2px rgba(42,21,17,.06),0 4px 12px -6px rgba(42,21,17,.18);
  transition:transform .5s cubic-bezier(.3,1.25,.4,1),width .5s cubic-bezier(.3,1.25,.4,1),opacity .25s}
.nav-pill.no-anim{transition:none}
@media (prefers-reduced-motion:reduce){.nav-pill{transition:opacity .2s}}
.nav-pill.go{box-shadow:0 1px 2px rgba(42,21,17,.06),0 8px 20px -8px rgba(253,97,69,.45)}
.nav .logo{font-size:26px}
.nav .btn{height:48px;padding-inline:24px;font-size:15px;justify-self:end}
@media (max-width:760px){
  .nav .links{display:none}
  .nav-in{height:66px;padding-inline:11px}
  .nav-mark{width:42px;height:42px}
  .nav .logo{font-size:23px}
  .nav .btn{height:42px;padding-inline:16px;font-size:14px}
}
/* floating contact bar — same glass family */
.float{background:var(--glass-strong);color:var(--ink);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 1px 2px rgba(42,21,17,.06),0 20px 44px -18px rgba(42,21,17,.35)}

/* ---------- motion system ---------- */
/* page curtain: covers on load, lifts away; slides up from below when leaving */
.pt{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%,#FF7A5F,var(--c-500) 60%,#F2543A);
  animation:ptOut .8s cubic-bezier(.76,0,.24,1) .2s both}
.pt img{width:76px;height:auto;filter:brightness(0) invert(1);animation:ptMark .8s cubic-bezier(.2,.8,.2,1) both}
.pt.is-leaving{animation:ptIn .6s cubic-bezier(.76,0,.24,1) both;pointer-events:all}
.pt.is-leaving img{animation:ptMarkIn .6s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes ptOut{from{transform:none;visibility:visible}to{transform:translateY(-101%);visibility:hidden}}
@keyframes ptIn{from{transform:translateY(101%)}to{transform:none}}
@keyframes ptMark{from{transform:scale(1) rotate(0)}to{transform:scale(.85) translateY(-30px) rotate(-12deg);opacity:0}}
@keyframes ptMarkIn{from{transform:scale(.7) rotate(12deg);opacity:0}to{transform:none;opacity:1}}

/* reveal */
.motion .rv{opacity:0;transform:translate3d(0,18px,0);filter:blur(10px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform,filter}
.motion .rv.is-in{opacity:1;transform:none;filter:blur(0)}

/* segmented control with a sliding pill */
.seg{position:relative}
.seg .seg-ind{position:absolute;top:6px;bottom:6px;right:auto;left:6px;border-radius:999px;background:var(--c-500);box-shadow:var(--glow);z-index:0;transition:none}
.seg.ready .seg-ind{transition:transform .55s cubic-bezier(.65,0,.35,1),width .55s cubic-bezier(.65,0,.35,1)}
.seg button{position:relative;z-index:1;transition:color .35s}
.seg:has(.seg-ind) button[aria-selected="true"]{background:transparent;box-shadow:none;color:#fff}

/* accordion collapse */
.acc .acc-body{overflow:hidden}
.acc details.is-open summary::after{transform:rotate(45deg);background-color:var(--c-100)}
.acc details[open]:not(.is-open) summary::after{transform:none;background-color:var(--c-50)}

/* buttons: a soft sheen on hover */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.btn-primary:hover::after{transform:translateX(120%)}

@media (prefers-reduced-motion:reduce){.pt{display:none}.motion .rv{opacity:1;transform:none}}

/* floating CTA: longer line, still one row */
.float{max-width:min(720px,calc(100% - 32px));font-weight:700;font-size:16px}
.float span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-sm{display:none}
@media (max-width:720px){.fl-lg{display:none}.fl-sm{display:inline}.float{font-size:15px}}
@media (max-width:420px){.float{padding-inline-start:18px}}

/* floating CTA hides over the hero */
.float{transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1)}
.float.is-hidden{opacity:0;transform:translateY(28px);pointer-events:none}

/* burger + mobile menu (glass sheet under the capsule) */
.burger{display:none;justify-self:end;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;position:relative;
  background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(236,229,224,.8)}
.burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform .45s cubic-bezier(.65,0,.35,1),top .45s cubic-bezier(.65,0,.35,1)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
.burger:focus-visible{outline:3px solid var(--c-200);outline-offset:2px}
.menu{position:absolute;top:calc(100% + 10px);inset-inline:0;border-radius:28px;padding:14px;display:flex;flex-direction:column;gap:6px;
  background:var(--glass-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 24px 48px -20px rgba(42,21,17,.35);
  opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top center;pointer-events:none;visibility:hidden;
  transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.menu-open .menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.menu-links{display:flex;flex-direction:column;gap:4px}
.menu-links a,.menu .menu-cta{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1),background-color .25s}
.menu-open .menu-links a,.menu-open .menu .menu-cta{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0) * 50ms)}
.menu-links a{display:block;padding:14px 16px;border-radius:18px;font-size:20px;font-weight:700;color:var(--ink)}
.menu-links a:hover,.menu-links a[aria-current="page"]{background:#fff}
.menu .menu-cta{margin-top:6px;width:100%}
.menu-open .float{opacity:0;pointer-events:none}
@media (max-width:760px){
  .nav .nav-in>.btn{display:none}
  .burger{display:block}
}
@media (min-width:761px){.menu{display:none}}

/* three pillars under the phones */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,48px);padding-inline:clamp(4px,2vw,24px)}
.pillars article{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--hair)}
.pillars .kicker{font-size:14px;font-weight:700;color:var(--c-700)}
.pillars h3{font-size:clamp(21px,1.8vw,24px);line-height:1.25}
.pillars p{color:var(--mute);font-size:17px}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}


#flow-h span{display:block;color:var(--c-text)}
#flow-h{max-width:none}

/* statement: photographic background at native quality — no overlay on the image itself */
.statement{background:#050303 url(../img/statement-bg.jpg) left center/cover no-repeat}
.statement::before,.statement::after{display:none}
@media (max-width:760px){
  .statement{background-size:auto 150%;background-position:8% 100%}
  /* soft dark gradient only behind the text block at the top */
  .statement::after{display:block;content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:auto;width:auto;height:62%;aspect-ratio:auto;border-radius:0;filter:none;
    background:linear-gradient(to bottom,rgba(5,3,3,.6) 0%,rgba(5,3,3,.35) 60%,rgba(5,3,3,0) 100%)}
}

/* floating CTA — dark capsule, light text, coral button */
.float{background:rgba(20,14,12,.88);color:#fff;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 20px 44px -18px rgba(8,8,8,.55)}
.float span{color:#fff}

/* ---------- scroll story: three phones, one message per step ---------- */
.story{position:relative;height:400vh;margin-top:clamp(-8px,-1vw,0px)}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;padding-block:calc(118px + env(safe-area-inset-top,0px)) 36px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(16px,4vw,64px)}
.story-copy{display:flex;flex-direction:column;gap:28px;align-self:center}
.story-steps{display:grid}
.story-step{grid-area:1/1;display:flex;flex-direction:column;gap:14px;align-items:flex-start;opacity:0;transform:translateY(22px);filter:blur(10px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.story-step.is-active{opacity:1;transform:none;filter:blur(0);pointer-events:auto}
.story-step.is-past{transform:translateY(-22px)}
.story-step h3{font-size:clamp(34px,4.2vw,58px);line-height:1.06;letter-spacing:-.03em;max-width:12ch}
.story-step p{font-size:clamp(17px,1.5vw,20px);color:var(--mute);max-width:36ch}
.story-dots{display:flex;gap:8px}
.story-dots i{width:8px;height:8px;border-radius:999px;background:var(--c-200);transition:width .45s cubic-bezier(.65,0,.35,1),background-color .3s}
.story-dots i.on{width:28px;background:var(--c-500)}
.story-stage{position:relative;height:100%;min-height:0}
.story-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-fallback{display:none}
.story.no-gl .story-stage canvas{display:none}
.story.no-gl .story-fallback{display:grid;place-items:center;position:absolute;inset:0}
.story.no-gl .story-fallback video{grid-area:1/1;height:min(70vh,640px);aspect-ratio:9/19.5;border-radius:44px;border:10px solid #E4572E;box-shadow:0 40px 80px -30px rgba(42,21,17,.45);object-fit:cover;opacity:0;transition:opacity .5s}
.story.no-gl .story-fallback video.on{opacity:1}
@media (max-width:860px){
  .story{height:380vh}
  .story-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:stretch;padding-top:calc(96px + env(safe-area-inset-top,0px));padding-bottom:84px;gap:4px}
  .story-copy{align-items:center;text-align:center;gap:14px}
  .story-step{align-items:center}
  .story-step h3{font-size:clamp(28px,8vw,38px);max-width:none}
  .story-step p{font-size:16px;max-width:34ch}
}
.foot .credit{color:inherit;opacity:.7;font-size:13px}
.foot .credit:hover{opacity:1;text-decoration:underline}

/* icons inside buttons */
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.btn svg[fill="none"]{fill:none}

/* ---------- site footer ---------- */
footer.site-foot{margin-top:clamp(56px,7vw,96px);margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);padding-block:clamp(48px,6vw,80px) 0;border-top:0;
  background:var(--c-900);color:rgba(255,255,255,.72);position:relative;overflow:hidden;isolation:isolate}
footer.site-foot::before{content:"";position:absolute;z-index:-1;top:-60%;right:-10%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(253,97,69,.22),transparent)}
.sf-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,64px)}
.sf-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sf-brand .logo{font-size:30px;color:#fff}
.sf-brand p{font-size:16px;line-height:1.6;max-width:32ch;color:rgba(255,255,255,.6)}
.sf-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sf-col h2{font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--c-300);margin-bottom:6px}
.sf-col a{color:#fff;font-size:16px;opacity:.86;transition:opacity .25s,color .25s}
.sf-col a:hover{opacity:1;color:var(--c-300)}
.sf-contact{display:inline-flex;align-items:center;gap:10px}
.sf-contact svg{width:18px;height:18px;flex:none;fill:var(--c-300)}
.sf-contact svg[fill="none"]{fill:none;stroke:var(--c-300)}
.sf-note{font-size:14px;color:rgba(255,255,255,.45)}
.sf-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding-block:22px calc(96px + env(safe-area-inset-bottom,0px));font-size:14px;color:rgba(255,255,255,.5)}
.sf-bottom .credit{color:inherit}
.sf-bottom .credit:hover{color:#fff}
@media (max-width:860px){.sf-in{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-brand{grid-column:1/-1}}
@media (max-width:480px){.sf-in{grid-template-columns:1fr 1fr;gap:32px 20px}}

/* legal pages */
.legal{max-width:760px;margin-inline:auto;padding-block:clamp(48px,7vw,96px) 0;display:flex;flex-direction:column;gap:16px}
.legal h1{font-size:clamp(36px,5vw,60px);line-height:1.05;letter-spacing:-.03em}
.legal-date{color:var(--mute);font-size:15px;margin-bottom:12px}
.legal h2{font-size:clamp(21px,2vw,24px);margin-top:20px}
.legal p,.legal li{font-size:17px;line-height:1.75;color:var(--ink-2)}
.legal ul{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px}
.legal a{color:var(--c-700);text-decoration:underline;text-underline-offset:3px}

/* the intro hands straight over to the pinned story */
.flow-intro{padding-bottom:0}
.flow-intro .head{margin-bottom:0}
.story{margin-top:calc(-1 * clamp(40px,8vh,96px))}

/* desktop: story text starts right under the intro, the phone column fills the height */
@media (min-width:861px){.story-pin{align-items:stretch}.story-copy{align-self:start;margin-top:clamp(24px,7vh,80px)}}

/* footer: flat near-black, crisp contrast; only the column titles stay coral */
footer.site-foot{background:#0E0C0B;color:rgba(255,255,255,.78)}
footer.site-foot::before{display:none}
.sf-brand p{color:rgba(255,255,255,.62)}
.sf-col a{color:#F5F5F5;opacity:1}
.sf-col a:hover{color:var(--c-500);text-decoration:none}
.sf-contact svg{fill:#F5F5F5}
.sf-contact svg[fill="none"]{fill:none;stroke:#F5F5F5}
.sf-note{color:rgba(255,255,255,.5)}
.sf-bottom{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.55)}
.sf-col h2{color:var(--c-500);font-weight:700;letter-spacing:.02em}

/* two-line hero buttons: audience on top, action below */
.btn-2l{height:auto;min-height:64px;padding-block:10px;padding-inline:28px 24px;gap:14px}
.btn-2l .btn-lines{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:start}
.btn-2l small{font-size:13px;font-weight:400;opacity:.8}
.btn-2l b{font-size:17px;font-weight:700}
.btn-ghost.btn-2l small{color:var(--mute);opacity:1}
@media (max-width:520px){.hero-split .cta-row{flex-direction:column;align-items:stretch;width:100%}.btn-2l{justify-content:space-between}}

/* hero buttons: one line, regular text */
.btn-1l{gap:12px}

/* hero buttons side by side, aligned with the headline */
@media (min-width:901px){.hero-split{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}}
.hero-split .cta-row{flex-wrap:nowrap;justify-content:flex-start;gap:12px}
.btn-1l{white-space:nowrap;padding-inline:24px;font-size:16px;height:54px}
@media (max-width:1180px){.btn-1l{padding-inline:18px;font-size:15px}}
@media (max-width:900px){.hero-split .cta-row{justify-content:center}}
@media (max-width:680px){.hero-split .cta-row{flex-direction:column;align-items:stretch;width:100%}.btn-1l{white-space:normal;justify-content:center}}

/* ---------- mobile polish ---------- */
@media (max-width:900px){
  .hero-split{gap:0;padding-top:clamp(20px,5vw,40px)}
  .hero-split .hero-copy{gap:20px}
  .blob-wrap{width:min(340px,86vw);margin-top:-48px;margin-bottom:-56px}
}
@media (max-width:760px){
  /* statement: dark, clean area behind the text, rings visible underneath */
  .statement{background-color:#050303;background-size:230% auto;background-position:14% calc(100% + 150px);padding-bottom:clamp(200px,56vw,260px)}
  .statement::after{height:100%;background:linear-gradient(to bottom,#050303 0%,#050303 46%,rgba(5,3,3,.6) 62%,rgba(5,3,3,0) 76%)}
  .statement p{color:rgba(255,255,255,.86)}
}

/* ---------- article covers (brand placeholders until real images land) ---------- */
.a-cover{position:relative;display:block;overflow:hidden;background:var(--c-100);isolation:isolate}
.a-cover::before{content:"";position:absolute;inset:-20%;background:var(--g);filter:blur(28px);z-index:-1}
.a-cover::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.a-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.a-cover.has-img::after{display:none}
.mag-card .a-cover img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.mag-card:hover .a-cover img{transform:scale(1.05)}
.cv-1{--g:radial-gradient(40% 55% at 22% 30%,#FFA68E 0,transparent 70%),radial-gradient(45% 60% at 78% 72%,#FD6145 0,transparent 70%),radial-gradient(35% 40% at 60% 18%,#FFE7DF 0,transparent 70%),#FFCDBD}
.cv-2{--g:radial-gradient(50% 60% at 80% 25%,#C9412A 0,transparent 70%),radial-gradient(45% 55% at 25% 75%,#FFA68E 0,transparent 70%),radial-gradient(30% 35% at 50% 50%,#FFF5F1 0,transparent 70%),#FD6145}
.cv-3{--g:radial-gradient(55% 60% at 50% 110%,#FD6145 0,transparent 70%),radial-gradient(40% 45% at 15% 20%,#FFCDBD 0,transparent 70%),radial-gradient(35% 40% at 85% 30%,#FFA68E 0,transparent 70%),#FFE7DF}
.cv-4{--g:radial-gradient(45% 55% at 30% 35%,#2A1511 0,transparent 72%),radial-gradient(50% 60% at 75% 70%,#C9412A 0,transparent 70%),radial-gradient(30% 35% at 85% 20%,#FFA68E 0,transparent 70%),#7A2418}
.cv-5{--g:radial-gradient(45% 50% at 70% 35%,#FFFFFF 0,transparent 70%),radial-gradient(50% 55% at 20% 70%,#FFA68E 0,transparent 70%),radial-gradient(35% 40% at 85% 85%,#FD6145 0,transparent 70%),#FFE7DF}
.cv-6{--g:radial-gradient(45% 55% at 50% 45%,#FFA68E 0,transparent 68%),radial-gradient(60% 70% at 10% 90%,#C9412A 0,transparent 70%),radial-gradient(40% 45% at 90% 10%,#FFCDBD 0,transparent 70%),#FD6145}

/* ---------- home: magazine slider ---------- */
.mag-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,36px)}
.mag-head>div:first-child{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mag-head h2{font-size:clamp(32px,4.2vw,54px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.mag-head h2 span{color:var(--c-text)}
.mag-nav{display:flex;gap:10px;flex:none}
.mag-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font:inherit;font-size:20px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair),var(--shadow-soft);display:grid;place-items:center;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s,color .25s,opacity .25s}
.mag-btn:hover{background:var(--c-500);color:#fff}
.mag-btn:active{transform:scale(.94)}
.mag-btn:disabled{opacity:.35;pointer-events:none}
.mag-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 22px) / 3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 28px;margin:-6px -4px -28px;overscroll-behavior-x:contain;outline:none}
.mag-track::-webkit-scrollbar{display:none}
.mag-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);overflow:hidden;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mag-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.mag-card .a-cover{aspect-ratio:16/10;margin:10px 10px 0;border-radius:calc(var(--r-lg) - 8px)}
.mag-card .a-cover::before{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.mag-card:hover .a-cover::before{transform:scale(1.08)}
.mag-txt{display:flex;flex-direction:column;gap:10px;padding:18px 22px 22px;flex:1}
.mag-txt small{font-size:13.5px;color:var(--mute)}
.mag-txt b{font-size:21px;line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
.mag-dek{font-size:15.5px;line-height:1.6;color:var(--mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mag-go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--c-700)}
.mag-go span{transition:transform .25s}
.mag-card:hover .mag-go span{transform:translateX(-4px)}
.mag-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.mag-dots i{width:7px;height:7px;border-radius:999px;background:var(--c-200);transition:width .3s,background-color .3s}
.mag-dots i.on{width:22px;background:var(--c-500)}
@media (max-width:900px){.mag-track{grid-auto-columns:calc((100% - 22px) / 2)}}
@media (max-width:640px){
  .mag-nav{display:none}
  .mag-track{grid-auto-columns:84%;gap:14px}
  .mag-txt{padding:16px 18px 20px}
  .mag-txt b{font-size:19px}
}

/* drawn separator: the font's en dash is hairline next to bold Hebrew */
.dash{display:inline-block;width:.6em;height:.12em;min-height:2px;border-radius:2px;background:currentColor;vertical-align:middle;margin-inline:.4em;transform:translateY(-.02em)}
.arrow svg{display:block}

/* story steps: lead + a short list of what actually happens */
.story-step .step-list{list-style:none;margin:4px 0 0;padding:0;width:100%;max-width:44ch;display:flex;flex-direction:column}
.story-step .step-list li{padding:11px 0;border-top:1px solid var(--hair);font-size:clamp(15.5px,1.2vw,17px);line-height:1.5;color:var(--ink-2);opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.story-step .step-list li:last-child{border-bottom:1px solid var(--hair)}
.story-step.is-active .step-list li{opacity:1;transform:none;transition-delay:calc(.12s + var(--i) * .07s)}
@media (max-width:860px){
  .story-step .step-list{max-width:36ch;text-align:center}
  .story-step .step-list li{padding:8px 0;font-size:14.5px}
  .story-step .step-list li:nth-child(3){display:none}
  .story-step .step-list li:nth-child(2){border-bottom:1px solid var(--hair)}
}

/* =========================================================
   Mobile system (phones, <=640px)
   Based on: 16px body minimum, headline ~2x body (M3 headline 28-32),
   display ~36px max on small screens, 48px+ touch targets,
   20px side margins, 30-40 characters per line for leads.
   ========================================================= */
@media (max-width:640px){
  .site{padding-inline:20px}
  /* type scale: display 34 / section 28 / sub 24 / card 19 / lead 17 / body 16 */
  .hero-split h1{font-size:clamp(30px,8.6vw,36px);line-height:1.12;letter-spacing:-.025em}
  .lead{font-size:17px;line-height:1.6}
  .hero .lead{max-width:32ch;margin-inline:auto}
  .head h2,.mag-head h2,.statement h2{font-size:clamp(25px,7.2vw,29px);line-height:1.18;letter-spacing:-.02em}
  .closing h2{font-size:clamp(27px,7.6vw,31px);line-height:1.15}
  .head p,.head .lead{font-size:16.5px;max-width:34ch;margin-inline:auto}
  .head{gap:12px}
  .story-step h3{font-size:clamp(23px,6.6vw,27px);line-height:1.15}
  .story-step p{font-size:15.5px;line-height:1.55}
  .card{padding:22px;border-radius:22px;gap:8px}
  .card h3{font-size:19px;line-height:1.3}
  .card p{font-size:16px;line-height:1.6}
  .statement p{font-size:16.5px}
  .mag-txt b{font-size:18px}
  /* hero actions: two compact pills side by side, short labels */
  .hero .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .hero .cta-row .btn{width:100%;height:52px;padding-inline:14px;font-size:15.5px}
  .btn-more{display:none}
  /* every tappable button is at least 48px tall */
  .closing .btn{height:52px;font-size:16px}
}
@media (max-width:360px){
  .site{padding-inline:16px}
  .hero .cta-row{grid-template-columns:1fr}
}

/* ---------- sides: cards with a live, wordless work fragment ---------- */
.gcard{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-soft);padding:8px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.gv-vis{height:190px;border-radius:calc(var(--r-xl) - 8px);position:relative;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(70% 90% at 85% 10%,#FFE7DF,transparent 70%),radial-gradient(60% 80% at 10% 100%,#FFCDBD,transparent 70%),#FFF5F1}
.gv-tx{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px}
.gv-tx h3{font-size:clamp(22px,2vw,26px);line-height:1.2}
.gv-tx p{color:var(--mute);font-size:16.5px;line-height:1.65;margin:0;max-width:46ch}
.fr{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(42,21,17,.06),0 14px 30px -14px rgba(42,21,17,.25);padding:16px 18px}
.fr svg{display:block}
.fr em svg,.fr .heart svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes grow{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes pop{0%,15%{transform:scale(0);opacity:0}25%,85%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes draw{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fadeUp{0%,20%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}
@keyframes typeIn{0%,10%{width:0}55%,85%{width:62%}100%{width:62%;opacity:0}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(253,97,69,.35)}50%{box-shadow:0 0 0 8px rgba(253,97,69,0)}}
/* research: interest pills light up, bars breathe */
.fr-research{width:250px}
.fr-research .pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fr-research .pills i{height:22px;width:var(--w);border-radius:999px;background:var(--c-50);transition:background-color .6s}
.fr-research .pills i.on{background:var(--c-500);animation:fadeUp 5s ease-in-out infinite}
.fr-research .pills i.on:nth-child(3){animation-delay:.5s}.fr-research .pills i.on:nth-child(6){animation-delay:1s}
.fr-research .bars{display:flex;align-items:flex-end;justify-content:center;gap:7px;height:48px;margin-top:14px}
.fr-research .bars i{width:14px;height:100%;border-radius:4px;background:var(--c-200);transform-origin:bottom;animation:grow 2.6s ease-in-out infinite}
.fr-research .bars i.on{background:var(--c-500)}
.fr-research .bars i:nth-child(2){animation-delay:-.4s}.fr-research .bars i:nth-child(3){animation-delay:-.9s}.fr-research .bars i:nth-child(4){animation-delay:-1.3s}.fr-research .bars i:nth-child(5){animation-delay:-1.8s}.fr-research .bars i:nth-child(6){animation-delay:-.2s}.fr-research .bars i:nth-child(7){animation-delay:-1.1s}
/* match: rows get their verdict one after another */
.fr-match{width:240px;display:flex;flex-direction:column;gap:10px}
.fr-match .row{display:flex;align-items:center;gap:10px}
.fr-match b{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,#FFA68E,#FD6145)}
.fr-match .row:nth-child(2) b{background:linear-gradient(135deg,#FFCDBD,#C9412A)}
.fr-match .row.no b{background:#E5DDD8}
.fr-match span{flex:1;height:8px;border-radius:4px;background:var(--hair)}
.fr-match em{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#2F9E62;animation:pop 4.5s cubic-bezier(.34,1.56,.64,1) infinite}
.fr-match .row:nth-child(2) em{animation-delay:.45s}
.fr-match .row.no em{background:#CFC6C1;animation-delay:.9s}
/* brief: a line writes itself, cursor blinks */
.fr-brief{width:230px;display:flex;flex-direction:column;gap:9px}
.fr-brief i{display:block;height:8px;border-radius:4px;background:var(--hair)}
.fr-brief i.t{width:40%;height:10px;background:var(--ink-2);opacity:.85;margin-bottom:4px}
.fr-brief i:nth-child(3){width:86%}
.fr-brief i.type{background:var(--c-300);width:62%;position:relative;animation:typeIn 4.2s ease-in-out infinite}
.fr-brief i.type::after{content:"";position:absolute;inset-inline-end:-6px;top:-4px;width:2px;height:16px;background:var(--c-500);animation:blink .8s steps(1) infinite}
.fr-brief i.short{width:48%}
/* trend: the line draws in, the last point pulses */
.fr-trend svg{width:250px;height:90px;overflow:visible}
.fr-trend .line{fill:none;stroke:#FD6145;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;animation:draw 5s ease-in-out infinite}
.fr-trend .area{animation:fadeUp 5s ease-in-out infinite}
.fr-trend .dot{fill:#FD6145;animation:fadeUp 5s ease-in-out infinite;transform-origin:245px 12px}
/* creators: connect — music meets creator */
.fr-connect{display:flex;align-items:center;gap:10px;position:relative;padding:22px 26px}
.fr-connect .rec{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#fff 0 16%,#FD6145 18% 34%,#E8573A 36% 52%,#FD6145 54% 100%);animation:spin 6s linear infinite}
.fr-connect .face{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#FFA68E,#C9412A)}
.fr-connect .link{width:100px;height:20px;overflow:visible}
.fr-connect .link path{fill:none;stroke:var(--c-300);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;animation:draw 4s ease-in-out infinite}
.fr-connect em{position:absolute;inset-inline-start:50%;top:6px;transform-origin:center;width:24px;height:24px;margin-inline-start:-12px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#2F9E62;animation:pop 4s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:1.1s}
@keyframes spin{to{transform:rotate(360deg)}}
/* creators: video — a vertical clip plays */
.fr-video{padding:10px}
.fr-video .screen{width:92px;height:150px;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(160deg,#FFA68E,#C9412A 70%,#2A1511)}
.fr-video .wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px}
.fr-video .wave i{width:5px;height:34px;border-radius:3px;background:rgba(255,255,255,.85);transform-origin:center;animation:grow 1.4s ease-in-out infinite}
.fr-video .wave i:nth-child(2){animation-delay:-.3s}.fr-video .wave i:nth-child(3){animation-delay:-.6s}.fr-video .wave i:nth-child(4){animation-delay:-.9s}.fr-video .wave i:nth-child(5){animation-delay:-1.2s}
.fr-video .heart{position:absolute;inset-inline-end:8px;bottom:22px;color:#fff;animation:pop 3s cubic-bezier(.34,1.56,.64,1) infinite}
.fr-video .heart svg{fill:#fff;stroke:none;width:18px;height:18px}
.fr-video .prog{position:absolute;inset-inline:8px;bottom:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.fr-video .prog i{display:block;height:100%;background:#fff;animation:typeIn 6s linear infinite;width:0}
/* creators: checklist — terms settle one by one */
.fr-check{width:220px;display:flex;flex-direction:column;gap:12px}
.fr-check .row{display:flex;align-items:center;gap:10px}
.fr-check span{flex:1;height:8px;border-radius:4px;background:var(--hair)}
.fr-check .row:nth-child(2) span{flex:.8}.fr-check .row:nth-child(3) span{flex:.6}
.fr-check em{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:var(--c-500);animation:pop 4.5s cubic-bezier(.34,1.56,.64,1) infinite}
.fr-check .row:nth-child(2) em{animation-delay:.5s}.fr-check .row:nth-child(3) em{animation-delay:1s}
/* creators: path — one collaboration leads to the next */
.fr-path svg{width:250px;height:80px;overflow:visible}
.fr-path .rail{fill:none;stroke:var(--hair);stroke-width:3;stroke-dasharray:.02 .03}
.fr-path .run{fill:none;stroke:#FD6145;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;animation:draw 5s ease-in-out infinite}
.fr-path circle{fill:#fff;stroke:#FD6145;stroke-width:3}
.fr-path circle:nth-of-type(1){fill:#FD6145}
.fr-path circle:nth-of-type(3){animation:fadeUp 5s ease-in-out infinite;fill:#FD6145}
@media (max-width:640px){
  .gv-vis{height:170px}
  .gv-tx{padding:18px 18px 20px}
  .gv-tx h3{font-size:19px}
  .gv-tx p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.fr *,.fr *::after{animation:none!important}.fr-trend .line,.fr-path .run,.fr-connect .link path{stroke-dashoffset:0}.fr-brief i.type{width:62%}}

/* ---------- home closing: one dark moment, for both sides ---------- */
.cta-dark{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:#0B0908 url(../img/cta-bg.jpg) center top/cover no-repeat;color:#fff;text-align:center;
  padding:clamp(56px,8vw,104px) clamp(22px,5vw,64px);display:flex;flex-direction:column;align-items:center;gap:18px;box-shadow:0 40px 80px -40px rgba(42,21,17,.55)}
.cta-dark h2{font-size:clamp(34px,4.6vw,58px);line-height:1.08;letter-spacing:-.03em;max-width:22ch;color:#fff}
.cta-dark p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.72);max-width:46ch}
.cta-dark .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.cta-dark .btn svg{width:20px;height:20px;fill:currentColor}

.btn-outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-outline-light:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.cta-dark small{font-size:14px;color:rgba(255,255,255,.5);margin-top:4px}
@media (max-width:640px){
  .cta-dark{padding:48px 22px 40px;gap:14px}
  .cta-dark h2{font-size:clamp(27px,7.6vw,31px);line-height:1.15}
  .cta-dark p{font-size:16.5px}
  .cta-dark .cta-row{flex-direction:column;width:100%}
  .cta-dark .btn{width:100%;height:52px;font-size:16px}
}

/* ---------- home FAQ: title aside, real accordion ---------- */
.faq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"side acc" "ask acc";grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,96px);row-gap:22px;align-items:start}
.faq-side{grid-area:side}.faq-split .acc{grid-area:acc}.faq-split .faq-ask{grid-area:ask;margin-top:0}
.faq-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.faq-side h2{font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.03em}
.faq-side p{margin:0;color:var(--mute);font-size:clamp(17px,1.4vw,19px);line-height:1.6;max-width:30ch}
.faq-ask{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;max-width:340px;padding:16px 18px 16px 16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-soft);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.faq-ask:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.faq-ask span{display:flex;flex-direction:column;gap:2px}
.faq-ask b{font-size:16.5px}
.faq-ask small{font-size:14.5px;color:var(--mute)}
.faq-ask i{font-style:normal;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--c-500);color:#fff;font-weight:700;box-shadow:var(--glow);transition:transform .3s}
.faq-ask:hover i{transform:translateX(-4px)}
.faq-split .acc{display:flex;flex-direction:column;gap:10px}
.faq-split .acc details{background:var(--card);border-radius:22px;box-shadow:var(--shadow-soft);transition:box-shadow .3s}
.faq-split .acc details:hover{box-shadow:var(--shadow-lift)}
.faq-split .acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font-weight:700;font-size:clamp(17px,1.4vw,19px)}
.faq-split .acc summary::-webkit-details-marker{display:none}
.faq-split .acc summary:focus-visible{outline:3px solid var(--c-300);outline-offset:2px;border-radius:22px}
.faq-split .acc summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--c-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23FD6145' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s}
.faq-split .acc details p{padding:0 26px 24px;color:var(--mute);font-size:17px;line-height:1.65;margin:0}
@media (max-width:900px){
  .faq-split{grid-template-columns:1fr;grid-template-areas:"side" "acc" "ask";grid-template-rows:auto;gap:24px}
  .faq-side{position:static;align-items:center;text-align:center}
  .faq-side p{max-width:32ch}
  .faq-split .faq-ask{justify-self:center;width:100%;max-width:420px}
}
@media (max-width:640px){
  .faq-side h2{font-size:clamp(25px,7.2vw,29px);line-height:1.18}
  .faq-side p{font-size:16.5px}
  .faq-split .acc summary{padding:18px 20px;font-size:16.5px}
  .faq-split .acc details p{padding:0 20px 20px;font-size:16px}
  .faq-ask{max-width:none}
}
/* story on phones: title + two concrete points, the lead line steps aside so the phones keep their size */
@media (max-width:860px){
  .story-step p{display:none}
  .story-step .step-list{margin-top:2px}
  .story-pin{gap:0}
}

/* footer logo: the owner-supplied file, never retyped */
.logo-img{display:block;line-height:0}
.logo-img img{height:42px;width:auto;display:block}
@media (max-width:640px){.logo-img img{height:36px}}

/* no single-word last lines: centred leads balance, body copy avoids orphans */
p,li,.lead,summary,small{text-wrap:pretty}
.head .lead,.head p,.ah .lead,.hero .lead,.cta-dark p,.faq-side p,.closing p,.statement p{text-wrap:balance}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;inset-inline-start:0;top:0}

/* ================= accessibility menu (assets/js/a11y.js) ================= */
.a11y{position:fixed;z-index:70;left:calc(20px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));direction:rtl}
.a11y-btn{width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:#16100E;color:#fff;
  box-shadow:0 14px 28px -12px rgba(8,8,8,.5),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s}
.a11y-btn svg{width:26px;height:26px;fill:currentColor}
.a11y-btn:hover{transform:translateY(-2px);background:#2A1511}
.a11y-btn:active{transform:scale(.95)}
.a11y-btn:focus-visible,.a11y-panel :focus-visible{outline:3px solid var(--c-500);outline-offset:3px}
.a11y.is-open .a11y-btn{background:var(--c-900)}
.a11y-panel{position:absolute;left:0;bottom:64px;width:min(320px,calc(100vw - 40px));padding:18px;border-radius:26px;background:#fff;color:#080808;
  box-shadow:0 1px 2px rgba(42,21,17,.06),0 30px 60px -20px rgba(42,21,17,.35);transform-origin:left bottom;animation:a11yIn .28s cubic-bezier(.2,.8,.2,1)}
.a11y-panel[hidden]{display:none}
@keyframes a11yIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.a11y-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.a11y-top h2{font-size:20px;letter-spacing:-.01em;margin:0}
.a11y-x{width:36px;height:36px;border-radius:50%;border:0;background:#F3EEEA;color:#080808;cursor:pointer;display:grid;place-items:center}
.a11y-x svg{width:18px;height:18px;fill:currentColor}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:92px;padding:14px;border-radius:18px;border:0;cursor:pointer;
  background:#F7F3F0;color:#080808;font:inherit;font-size:15px;font-weight:700;text-align:right;line-height:1.25;transition:background-color .2s,box-shadow .2s}
.a11y-opt:hover{background:#F1EAE5}
.a11y-opt .a11y-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff;box-shadow:0 1px 2px rgba(42,21,17,.08)}
.a11y-opt svg{width:20px;height:20px;fill:#2A1511}
.a11y-opt[aria-pressed="true"]{background:#FFF1EC;box-shadow:inset 0 0 0 2px #C9412A}
.a11y-opt[aria-pressed="true"] .a11y-ic{background:#C9412A}
.a11y-opt[aria-pressed="true"] svg{fill:#fff}
.a11y-opt:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;align-items:center;min-height:0}
.a11y-lv{position:absolute;top:18px;left:14px;display:flex;gap:4px}
.a11y-lv i{width:7px;height:7px;border-radius:50%;background:#DDD3CD}
.a11y-lv i.on{background:#C9412A}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #ECE5E0;font-size:15px}
.a11y-reset{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 0;font:inherit;font-weight:700;color:#080808;cursor:pointer}
.a11y-reset svg{width:18px;height:18px;fill:currentColor}
.a11y-foot a{color:#9F3320;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.menu-open .a11y{opacity:0;pointer-events:none}
@media (max-width:720px){
  .a11y{left:16px;bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .a11y-btn{width:46px;height:46px}.a11y-btn svg{width:23px;height:23px}
  .a11y-panel{bottom:56px}
}
@media (max-width:520px){.a11y{bottom:calc(20px + 62px + 12px + env(safe-area-inset-bottom,0px))}}
@media print{.a11y{display:none}}

/* --- the settings themselves --- */
html.a11y-fs-1 :is(p,li,h1,h2,h3,h4,summary,small,figcaption,blockquote,dd,dt,label,.lead,.btn):not(.a11y *):not([aria-hidden="true"] *){zoom:1.15}
html.a11y-fs-2 :is(p,li,h1,h2,h3,h4,summary,small,figcaption,blockquote,dd,dt,label,.lead,.btn):not(.a11y *):not([aria-hidden="true"] *){zoom:1.3}
html.a11y-fs-1 :is(li,summary,blockquote) :is(p,small),html.a11y-fs-2 :is(li,summary,blockquote) :is(p,small){zoom:1}
html.a11y-contrast{--mute:#3B3431;--ink-2:#1A1412;--c-500:#A8311A;--c-text:#A8311A;--hair:#8C827D}
html.a11y-contrast .btn-primary{background:#A8311A!important}
html.a11y-contrast body.page-dark{--mute:#EDE8E4;--ink-2:#FFFFFF;--c-text:#FF8A73;--hair:rgba(255,255,255,.45)}
html.a11y-contrast :is(p,li,small,.lead){color:inherit}
html.a11y-links a:not(.btn):not(.a11y *){text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:4px!important}
html.a11y-links a.btn,html.a11y-links .nav .links a{outline:2px dashed currentColor;outline-offset:3px}
html.a11y-spacing :is(p,li,dd,summary,blockquote,.lead):not(.a11y *){line-height:1.9!important;letter-spacing:.05em!important;word-spacing:.16em!important}
html.a11y-spacing p:not(.a11y *){margin-bottom:1.2em}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important;scroll-behavior:auto!important}
html.a11y-still .pt{display:none}

/* keyboard focus is always visible */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--c-500);outline-offset:3px}
main:focus{outline:none}



/* ================= legal pages ================= */
.legal{max-width:1120px;margin-inline:auto;padding-block:clamp(40px,6vw,88px) 0;display:block}
.lg-head{max-width:760px;display:flex;flex-direction:column;gap:12px}
.lg-head h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.035em}
.lg-date{margin:0;color:var(--mute);font-size:15px}
.lg-intro{margin:6px 0 0;font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:var(--ink-2);max-width:62ch}
.lg-sum{margin-top:clamp(28px,3.5vw,44px);padding:clamp(22px,3vw,34px);border-radius:var(--r-xl);
  background:radial-gradient(60% 120% at 100% 0%,rgba(255,205,189,.55),transparent 60%),var(--card);box-shadow:var(--shadow-soft)}
.lg-sum h2{font-size:20px;margin:0 0 14px}
.lg-sum ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.lg-sum li{position:relative;padding-inline-start:22px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.lg-sum li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:9px;height:9px;border-radius:3px;background:var(--c-500)}
.lg-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(36px,4.5vw,64px);align-items:start}
.lg-toc{position:sticky;top:120px}
.lg-toc-box summary{list-style:none;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;color:var(--mute);cursor:pointer;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.lg-toc-box summary::-webkit-details-marker{display:none}
.lg-toc-box summary svg{width:18px;height:18px;transition:transform .3s}
.lg-toc-box:not([open]) summary svg{transform:rotate(90deg)}
.lg-toc ol{list-style:none;margin:10px 0 0;padding:0;counter-reset:t;display:flex;flex-direction:column}
.lg-toc li{counter-increment:t}
.lg-toc a{display:flex;gap:10px;padding:7px 10px;border-radius:12px;font-size:15.5px;line-height:1.35;color:var(--ink-2);text-decoration:none;transition:background-color .2s,color .2s}
.lg-toc a::before{content:counter(t);min-width:1.4em;color:var(--mute);font-variant-numeric:tabular-nums}
.lg-toc a:hover{background:var(--card);color:var(--ink)}
.lg-toc a.is-on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--shadow-soft)}
.lg-toc a.is-on::before{color:var(--c-700)}
.lg-body{min-width:0;max-width:760px}
.lg-sec{scroll-margin-top:120px;padding-block:6px 30px}
.lg-sec + .lg-sec{border-top:1px solid var(--hair);padding-top:30px}
.lg-sec h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(22px,2.2vw,27px);line-height:1.25;letter-spacing:-.02em;margin:0 0 14px}
.lg-n{flex:none;display:inline-grid;place-items:center;min-width:34px;height:34px;padding-inline:6px;border-radius:11px;font-size:15px;letter-spacing:0;
  background:linear-gradient(180deg,var(--c-100),var(--c-50));color:var(--c-700);transform:translateY(-3px)}
.lg-sec h3{font-size:18.5px;margin:22px 0 8px;letter-spacing:-.01em}
.lg-sec p,.lg-sec li{font-size:17px;line-height:1.75;color:var(--ink-2)}
.lg-sec p{margin:0 0 12px}
.lg-sec ul{margin:0 0 12px;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px}
.lg-sec li::marker{color:var(--c-500)}
.legal a{color:var(--c-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal a:hover{color:var(--ink)}
.lg-toc a{text-decoration:none}
.lg-table{margin:8px 0 16px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-soft);overflow-x:auto}
.lg-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.6}
.lg-table th,.lg-table td{padding:14px 18px;text-align:right;vertical-align:top;border-bottom:1px solid var(--hair)}
.lg-table tr:last-child > *{border-bottom:0}
.lg-table thead th{font-size:14px;color:var(--mute);font-weight:700;background:var(--bg-2)}
.lg-table tbody th{font-weight:700;color:var(--ink);width:32%}
.lg-table td{color:var(--ink-2)}
.lg-contact{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}
.lg-contact div{display:flex;flex-direction:column;gap:2px;padding:14px 20px;border-radius:20px;background:var(--card);box-shadow:var(--shadow-soft);min-width:220px}
.lg-contact span{font-size:13.5px;color:var(--mute);font-weight:700}
.lg-contact a{font-size:18px;font-weight:700;color:var(--ink);text-decoration:none}
.lg-contact a:hover{color:var(--c-700)}
.lg-more{margin-top:18px;padding-top:22px;border-top:1px solid var(--hair);font-size:16px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 16px}
.sf-col a[aria-current="page"]{color:#fff;font-weight:700}
@media (max-width:900px){
  .lg-grid{grid-template-columns:1fr;gap:26px}
  .lg-toc{position:static;padding:16px 18px;border-radius:22px;background:var(--card);box-shadow:var(--shadow-soft)}
  .lg-toc-box summary{padding-bottom:0;border-bottom:0;color:var(--ink);font-size:16.5px}
  .lg-toc-box[open] summary{padding-bottom:10px;border-bottom:1px solid var(--hair)}
  .lg-sum ul{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lg-sec p,.lg-sec li{font-size:16.5px}
  .lg-table{border-radius:20px}
  .lg-table th,.lg-table td{padding:12px 14px;font-size:15px}
  .lg-table tbody th{width:38%}
  .lg-contact div{flex:1 1 100%}
}
.legal .lg-toc a{color:var(--ink-2);text-decoration:none}.legal .lg-toc a.is-on,.legal .lg-toc a:hover{color:var(--ink)}
@media (max-width:640px){
  .lg-table{overflow:visible}
  .lg-table table,.lg-table tbody,.lg-table tr,.lg-table th,.lg-table td{display:block;width:auto}
  .lg-table thead{display:none}
  .lg-table tr{padding:14px 16px;border-bottom:1px solid var(--hair)}
  .lg-table tr:last-child{border-bottom:0}
  .lg-table th,.lg-table td{padding:0;border:0}
  .lg-table tbody th{width:auto;font-size:16px;margin-bottom:4px}
  .lg-table td{font-size:15.5px}
  .lg-wide td{margin-top:6px}
  .lg-wide td::before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--mute)}
}

/* Google Sans is wider than Assistant: keep every display line on one line */
.hero-split h1{font-size:clamp(40px,4.6vw,60px)}
.statement h2{max-width:none}.statement h2 span{display:block}
.ab-strip h2 span{display:block}
@media (max-width:640px){.hero-split h1{font-size:clamp(28px,8vw,34px)}}
.btn{white-space:nowrap}
@media (max-width:480px){.cta-row{flex-wrap:wrap}.cta-row .btn{flex:1 1 auto}}
@media (max-width:640px){.cr-hero .cta-row{grid-template-columns:1fr}}

/* Google Sans needs air: no negative tracking on display type, and more leading */
h1,h2,.ab-title,.lg-head h1{letter-spacing:0!important;line-height:1.14!important}
h3{letter-spacing:0!important}
.hero-split h1,.ah h1,.cr-hero h1{line-height:1.12!important}
.hero-split h1{font-size:clamp(38px,4.3vw,56px)}
@media (max-width:640px){.hero-split h1{font-size:clamp(27px,7.6vw,32px)}}
.ab-strip h2{font-size:clamp(24px,2.5vw,34px)}
/* more menu settings */
html.a11y-gray{filter:grayscale(1)}
html.a11y-font body,html.a11y-font button,html.a11y-font input{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important}
html.a11y-heads :is(h1,h2,h3):not(.a11y *):not(.sr-only){outline:2px dashed var(--c-700);outline-offset:6px;border-radius:4px}
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l13.5 12.2-6.1.5 3.6 6.6-2.4 1.2-3.5-6.7L5.5 21z' fill='%23080808' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 6 3,auto!important}
.a11y-panel{max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
.a11y-btn{box-shadow:0 14px 28px -12px rgba(8,8,8,.5),0 0 0 2px rgba(255,255,255,.85)}
.hero-split{position:relative;isolation:isolate}.hero-split .hero-copy{position:relative;z-index:2}.hero-split .blob-wrap{position:relative;z-index:1}
.rt{display:inline-flex;align-items:center;gap:6px}
.rt-ico{width:16px;height:16px;flex:none;opacity:.85}
body.page-dark .nav-pill{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* dark contact strip (about + home) */
.ab-strip{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,3.4vw,44px) clamp(26px,3.6vw,48px);border-radius:var(--r-xl);
  background:radial-gradient(60% 140% at 100% 0%,rgba(253,97,69,.28),transparent 60%),#16100E;color:#fff;box-shadow:0 30px 60px -32px rgba(42,21,17,.55)}
.ab-strip-tx{display:flex;flex-direction:column;gap:8px}
.ab-strip h2{font-size:clamp(26px,2.8vw,38px);line-height:1.15;letter-spacing:-.025em;color:#fff;margin:0}
.ab-strip h2 span{color:var(--c-500)}
.ab-strip p{margin:0;color:rgba(255,255,255,.66);font-size:17px}
.ab-strip .cta-row{display:flex;gap:12px;flex:none}
.ab-strip .btn svg{width:20px;height:20px;fill:currentColor}
.ab-strip .btn-outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.ab-strip .btn-outline-light:hover{background:rgba(255,255,255,.08)}
@media (max-width:980px){.ab-strip{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){
  .ab-strip{flex-direction:column;align-items:stretch;text-align:center;gap:22px;padding:30px 20px;border-radius:28px}
  .ab-strip h2{font-size:clamp(24px,7vw,28px)}.ab-strip h2 span{display:block}
  .ab-strip p{font-size:16px}
  .ab-strip .cta-row{flex-direction:column}
  .ab-strip .btn{width:100%;height:52px}
}
.ab-strip h2{font-size:clamp(24px,2.5vw,34px)}.ab-strip h2 span{display:block}.home-strip{padding-block:clamp(24px,4vw,56px)}
.cta-dark{padding:clamp(52px,6vw,84px) clamp(24px,5vw,72px)!important;gap:14px}@media (max-width:640px){.cta-dark{padding:40px 22px 34px!important}}

/* floating bar: a tiny record keeps spinning next to the invitation */

.fl-disc{position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#2a1d19 0 1.2px,#1a1311 1.2px 2.6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 14px -6px rgba(0,0,0,.6);animation:flSpin 3.2s linear infinite}
.fl-disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 12%,rgba(255,255,255,.14) 16%,transparent 22% 62%,rgba(255,255,255,.08) 66%,transparent 72%)}
.fl-disc i{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,#2a1d19 0 2px,#FD6145 2.5px);box-shadow:0 0 0 2px rgba(253,97,69,.25)}
.float:hover .fl-disc{animation-duration:1.4s}
@keyframes flSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fl-disc{animation:none}}
@media (max-width:420px){.fl-disc{width:36px;height:36px}.fl-disc i{inset:11px}}
.nav .links{font-weight:500}.nav .links a[aria-current="page"]{font-weight:600}
.statement h2{font-size:clamp(30px,3.4vw,48px)!important;max-width:min(620px,56%)!important}.statement h2 span{display:block}@media (max-width:900px){.statement h2{max-width:none!important}}
/* a11y menu on phones: a bottom sheet that always fits the screen */
@media (max-width:720px){
  .a11y-panel{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100svh - 24px);padding:16px;border-radius:24px;z-index:90}
  .a11y-grid{gap:6px}
  .a11y-opt{min-height:0;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;font-size:14.5px}
  .a11y-opt .a11y-ic{width:30px;height:30px;flex:none}
  .a11y-lv{position:static;margin-inline-start:auto}
  .a11y-top{margin-bottom:10px}
  .a11y.is-open::before{content:"";position:fixed;inset:0;background:rgba(8,8,8,.35);z-index:89}
}

/* ================= home · mobile composition pass ================= */
.br-m{display:none}
@media (max-width:640px){
  .br-m{display:inline}
  /* hero: air above the title, one idea per line, calm spacing down to the record */
  .hero-split{padding-top:48px!important;padding-bottom:8px}
  .hero-split .hero-copy{gap:0!important}
  .hero-split h1{font-size:clamp(34px,9.6vw,40px)!important;line-height:1.14!important;margin:0}
  .hero-split .lead{margin:20px auto 0;font-size:17px;line-height:1.65;max-width:30ch}
  .hero-split .cta-row{margin-top:32px;display:grid!important;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .hero-split .cta-row .btn{height:54px;padding-inline:12px;font-size:16px}
  .hero-split .blob-wrap{margin-top:40px;width:86%;margin-inline:auto}
  /* rhythm between sections */
  .section{padding-block:72px}
  .flow-intro{padding-top:56px}
  .head{gap:14px;margin-bottom:8px}
  .head h2,.mag-head h2{font-size:clamp(27px,7.6vw,31px);line-height:1.2}
  .head .lead,.head p{font-size:16.5px;line-height:1.65;max-width:32ch}
  /* story: text breathes above the phones */
  .story-step h3{margin-bottom:6px}
  .step-list{margin-top:14px}
  .step-list li{padding-block:12px;font-size:15.5px;line-height:1.5}
  /* cards and strips */
  .home-strip{padding-block:32px}
  .statement{margin-block:8px}
  .faq-split{gap:28px}
}
@media (max-width:640px){.hero-split .blob-wrap{margin-top:-8px!important;margin-bottom:-24px}}

/* keep hidden labels inside their card (fixes white screen at the articles carousel) */
.mag-card,.rt{position:relative}
/* same grid + glow background as the home closing card, on every closing block */
.ab-strip,.page-dark .closing{background:#0B0908 url(../img/cta-bg.jpg) center top/cover no-repeat!important}
.page-dark .closing{box-shadow:0 30px 60px -32px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.page-dark .closing .lead{color:rgba(255,255,255,.72)}

/* browser bars (iOS Safari tints from the page): always the page colour, never the curtain */
html{background:var(--bg)}
html:has(body.page-dark){background:#121110}
/* touch devices: no curtain on arrival (Safari would paint its bars coral); it still slides in when leaving */
@media (hover:none){.pt:not(.is-leaving){animation:none;visibility:hidden;transform:translateY(-101%)}}
/* no grey iOS tap square anywhere; the logo gets a soft round press instead */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
.nav-mark{position:relative}
.nav-mark::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(253,97,69,.12);transform:scale(.6);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.nav-mark:hover::before,.nav-mark:active::before{transform:scale(1);opacity:1}
body.page-dark .nav-mark::before{background:rgba(255,255,255,.1)}
.sf-contact{position:relative}