:root{
--bg:#050505;--surface:#0a0a0a;--elev1:#161616;--elev2:#1b1b1b;
--line:#2a2a2a;--line-soft:#1a1c1d;
--ink:#fff;--ink2:#c2c2c2;--muted:#b3b3b3;--dim:#7a7a80;
--serif:"PP Editorial Old Variable Regular",Georgia,serif;
--sans:"PP Neue Montreal",sans-serif;
--ease:cubic-bezier(0.23,1,0.32,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;transition:color 120ms ease}
a:hover{color:var(--muted)}
img{max-width:100%}
.shell{width:min(100%,1120px);margin:0 auto;padding:0 40px}
/* ---------- reveal ---------- */
@keyframes rvIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rv{opacity:1;transform:none}@media (min-width:810px){.rv{animation:rvIn .9s var(--ease) var(--d,0s) both}}
.rule{height:1px;background:var(--line);transform-origin:left center;animation:ruleIn 1.1s var(--ease) var(--d,0s) both}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.rv,.rule{animation:none}}
/* ---------- hero ---------- */
.hero{padding:80px 0}
.eyebrow{margin:0 0 22px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.7vw,96px);line-height:1.2;letter-spacing:-.031em;max-width:14ch;text-wrap:pretty}
.hero-support{margin:26px 0 0;max-width:560px;color:var(--ink2);font-size:18px;line-height:1.55}
.hero-compact h1{font-size:clamp(38px,4.9vw,70px);max-width:20ch}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:36px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;background:#fff;color:#000;font-family:var(--sans);font-size:14px;font-weight:500;border:0;cursor:pointer;transition:background 120ms ease}
.tlink{font-size:14px;color:var(--ink)}
.tlink span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--dim)}
.tlink:hover span{text-decoration-color:var(--ink)}
.btn:hover{background:var(--ink2);color:#000}
.btn:focus-visible,.tlink:focus-visible,.faq-q:focus-visible{outline:1.5px solid var(--ink2);outline-offset:2px}
/* ---------- proof strip ---------- */
/* ---------- sections ---------- */
.sec{padding:80px 0 0}
.sec-head{margin:0 0 40px;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.4;letter-spacing:-.028em}
/* outcomes: the research-backed reason to care, deliberately larger and lighter
   than the product-mechanics sections that follow it. */
.outcomes{padding:80px 0 0}
.outcomes a{color:inherit}
/* The intro uses the body row's grid below it, so the lead shares the comment
   sheet's left edge and width and the two rows read as one column structure. */
.outcomes-intro{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:72px;align-items:start}
.outcomes h2{max-width:12ch;margin:0;font-family:var(--serif);font-size:clamp(46px,4.4vw,60px);font-weight:400;line-height:1;letter-spacing:-.045em;text-wrap:balance}
.outcomes-lead{max-width:460px;margin:6px 0 0;font-size:21px;line-height:1.45;letter-spacing:-.014em;color:var(--ink2);text-wrap:pretty}
.outcomes-body{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:72px;align-items:start;margin-top:64px}
.outcomes-list{border-bottom:1px solid var(--line)}
.outcome-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:28px;align-items:start;padding:26px 0 28px;border-top:1px solid var(--line)}
.outcome-row p,.outcome-row h3{margin:0}
.outcome-stat,.outcome-row h3{color:var(--ink2);transition:color 120ms ease}
.outcome-row:hover .outcome-stat,.outcome-row:hover h3,.outcome-row.is-current .outcome-stat,.outcome-row.is-current h3{color:var(--ink)}
.outcome-stat{font-family:var(--serif);font-weight:400;font-variant-numeric:tabular-nums}
.outcome-stat>span{display:block;font-size:52px;line-height:.82;letter-spacing:-.05em}
.outcome-stat small{display:block;margin-top:12px;font-family:var(--sans);font-size:11px;font-weight:400;line-height:1.3;letter-spacing:0;color:var(--dim)}
.outcome-row-primary{padding-top:32px;padding-bottom:34px}
.outcome-row-primary .outcome-stat>span{font-size:64px}
.outcome-copy{display:flex;flex-direction:column;gap:8px}
.outcome-row h3{max-width:16ch;font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.outcome-copy p{max-width:44ch;font-size:15px;line-height:1.55;color:var(--muted)}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.pillar{background:var(--surface);padding:24px 20px 28px;display:flex;flex-direction:column;gap:10px;transition:background 160ms ease}
.pillar:hover{background:var(--elev1)}
.pillar h3{margin:0;font-size:15px;font-weight:500;line-height:1.3}
.pillar p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.pillar p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pillar p a:hover{color:var(--muted)}
/* why */
.why-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(280px,1fr);column-gap:56px;row-gap:0;align-items:start}
.why-grid .sec-head{grid-column:1;grid-row:1}
.why{grid-column:1;grid-row:2;max-width:640px}
/* The visual starts level with the heading and runs alongside the copy. */
.why-visual{grid-column:2;grid-row:1/span 2;justify-self:end;width:100%;max-width:440px}
/* Device-native vs API comparison (why-visual.js). Laid out at 1080px and scaled to the
   column with --dn-s so the type stays proportional; it has no box of its own. */
.dn{position:relative;width:100%;aspect-ratio:1/1;overflow:visible}
.dn-stage{position:absolute;left:0;top:0;width:1080px;height:1080px;padding:0 24px;transform-origin:0 0;transform:scale(var(--dn-s,.4));color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.dn-cols{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100%}
.dn-divider{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform-origin:top;transform:scaleY(0)}
.dn-col{position:relative;padding:0 40px;display:flex;flex-direction:column;align-items:center}
.dn-left{padding-left:0}.dn-right{padding-right:0}
.dn-lbl{align-self:flex-start;font-size:28px;font-weight:500;color:var(--muted);height:34px;opacity:0}
.dn-left .dn-lbl{color:var(--dim)}
.dn-phone{position:relative;width:240px;height:460px;margin-top:32px}
.dn-phone>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dn-frame{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:1400;stroke-dashoffset:1400}
.dn-left .dn-frame{stroke:var(--dim);stroke-dasharray:10 10;stroke-dashoffset:0;opacity:0}
.dn-screen{position:absolute;left:14px;top:14px;right:14px;bottom:14px;overflow:hidden}
.dn-app{position:absolute;left:50%;top:24px;width:40px;height:40px;transform:translateX(-50%);color:var(--ink);opacity:0}
.dn-left .dn-app{color:var(--dim)}
.dn-app svg{width:100%;height:100%;display:block;fill:currentColor}
.dn-app .dn-cloud{fill:none;stroke:currentColor;stroke-width:2}
.dn-feed{position:absolute;left:18px;right:18px;top:88px;bottom:18px}
.dn-post{position:absolute;left:0;right:0;height:96px;border:1px solid var(--line);background:var(--elev1);opacity:0;transform:translateY(-140px)}
.dn-post i{position:absolute;left:12px;top:14px;width:36px;height:1px;background:var(--dim)}
.dn-post b{position:absolute;left:12px;bottom:10px;font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.dn-left .dn-post{border-style:dashed;background:transparent}
.dn-left .dn-post b{color:var(--dim)}
.dn-dot{position:absolute;right:12px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.dn-metric{width:100%;margin-top:36px}
.dn-k{font-size:26px;color:var(--dim)}
.dn-v{font-family:var(--serif);font-weight:400;font-size:120px;line-height:1;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.dn-left .dn-v{color:var(--muted)}
.dn-bar{position:relative;height:2px;background:var(--line);margin-top:22px;overflow:hidden}
.dn-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.dn-left .dn-bar i{background:var(--dim)}
.dn-rows{width:100%;margin-top:26px;display:flex;flex-direction:column;gap:12px}
.dn-row{display:flex;align-items:center;gap:14px;font-size:28px;white-space:nowrap;line-height:1.3;color:var(--ink2);opacity:0;transform:translateY(8px)}
.dn-left .dn-row{color:var(--dim)}
.dn-row .m{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.dn-row .m svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dn-right .dn-row .m{color:var(--ink)}
/* Same two columns as .dn-cols so each caption sits under its own column's content. */
.dn-foot{position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);font-size:24px;color:var(--dim);opacity:0}
.dn-foot span:last-child{padding-left:40px}
.why p{margin:0 0 22px;font-size:18px;line-height:1.6;color:var(--ink2)}
.why p:last-child{margin-bottom:0}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.step{border-top:1px solid var(--line);padding-top:18px}
.step-num{font-family:var(--serif);font-size:15px;color:var(--ink);display:block;margin-bottom:14px}
.step h3{margin:0 0 8px;font-size:15px;font-weight:500}
.step p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
/* comparison */
.compare{border:1px solid var(--line-soft)}
.compare-row{display:grid;grid-template-columns:minmax(140px,.9fr) repeat(3,minmax(0,1fr))}
.compare-row + .compare-row{border-top:1px solid var(--line-soft)}
.compare-cell{padding:16px 18px;font-size:13px;line-height:1.45;color:var(--muted)}
.compare-cell + .compare-cell{border-left:1px solid var(--line-soft)}
.compare-head .compare-cell{font-size:13px;font-weight:500;color:var(--ink2);background:var(--surface)}
.compare-cell.us{color:var(--ink);background:var(--elev1)}
.compare-head .compare-cell.us{color:#000;background:#fff}
.compare-label{color:var(--dim)}
/* pricing teaser */
.teaser{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-top:1px solid var(--line-soft);padding-top:22px;flex-wrap:wrap}
.teaser p{margin:0;font-size:14px;color:var(--muted);max-width:560px}
/* faq */
.faq{max-width:760px}
.faq-item{border-top:1px solid var(--line-soft)}
.faq-item:last-child{border-bottom:1px solid var(--line-soft)}
.faq-q{display:flex;align-items:baseline;justify-content:space-between;gap:24px;width:100%;padding:20px 0;background:none;border:0;color:var(--ink);font-family:var(--sans);font-size:16px;text-align:left;cursor:pointer}
.faq-q .faq-x{flex:none;font-family:var(--serif);font-size:18px;color:var(--dim);transition:transform .3s var(--ease)}
.faq-item.open .faq-x{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
/* Fits the tallest answer on any lander: measured 291px for the commenting
   page's API answer at a 320px viewport, against 179px for the posting
   landers. .faq-a clips with overflow:hidden, so a cap below the real
   content height silently cuts the end of an answer. */
.faq-item.open .faq-a{max-height:380px}
.faq-a p{margin:0;padding:0 40px 22px 0;font-size:14px;line-height:1.6;color:var(--muted)}
/* cross links */
.cross{padding:60px 0 0;font-size:14px;color:var(--muted)}
.cross a{color:var(--ink)}.cross a:hover{color:var(--muted)}
/* cta */
.cta{margin-top:80px;border-top:1px solid var(--line-soft);background:var(--surface)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:80px;flex-wrap:wrap}
.cta h2{margin:0;font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.2;letter-spacing:-.042em;max-width:15ch}
.cta p{margin:16px 0 0;font-size:14px;color:var(--muted);max-width:420px}
/* ---------- responsive ---------- */
/* The outcomes body keeps two columns only while the shell is at its full 1120px; below
   that the rows would sit under 510px beside the 460px composition, so the composition
   moves above the rows in one column. */
@media (max-width:1119px){
.outcomes-intro{grid-template-columns:1fr;gap:24px}
.outcomes-lead{margin:0}
.outcomes-body{grid-template-columns:1fr;gap:44px;margin-top:56px}
}
@media (max-width:1023px){
.outcome-row{grid-template-columns:100px minmax(0,1fr);gap:22px}
.why-grid{gap:40px}
.why-visual{max-width:360px}
.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillars .pillar:nth-child(4){grid-column:1/3}
.pillars .pillar:nth-child(5){grid-column:3/-1}
.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
@media (max-width:809px){
.shell{padding:0 20px}
.hero-support,.why p{font-size:16px}
.cta h2{font-size:42px}
.why-grid{grid-template-columns:1fr;row-gap:32px}
.why-grid .sec-head{grid-row:auto;margin-bottom:0}
.why{grid-row:auto}
.why-visual{grid-column:auto;grid-row:auto;justify-self:start;max-width:420px}
.pillars .pillar:nth-child(4),.pillars .pillar:nth-child(5){grid-column:auto}
.hero{padding:40px 0}
.hero-actions{flex-direction:column;align-items:stretch}
.hero-actions .btn{width:100%}
.sec{padding:40px 0 0}
.outcomes{padding:40px 0 0}
.outcomes h2{max-width:11ch;font-size:clamp(46px,13vw,62px);line-height:.98}
.outcomes-lead{max-width:34rem;margin:0;font-size:17px;line-height:1.5}
.outcomes-list{margin-top:56px}
.outcome-row{grid-template-columns:1fr;gap:9px;padding:24px 0 26px}
.outcome-stat{margin-bottom:7px!important}
.outcome-stat>span{font-size:52px;line-height:.9}
.outcome-row-primary .outcome-stat>span{font-size:66px}
.outcome-stat small{margin-top:9px}
.outcome-row h3{max-width:none;font-size:18px}
.outcome-copy p{max-width:34rem;font-size:15px}
.outcomes-body{gap:36px;margin-top:48px}
.pillars{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.compare-row{grid-template-columns:1fr}
.compare-cell + .compare-cell{border-left:0;border-top:1px solid var(--line-soft)}
.compare-head{display:none}
.compare-cell[data-col]::before{content:attr(data-col);display:block;margin-bottom:4px;font-size:11px;color:var(--dim)}
.compare-cell.us[data-col]::before{color:var(--ink2)}
.cta-inner{padding-block:40px;flex-direction:column;align-items:flex-start}
.cta .btn{width:100%}
}

/* ---------- hero visual: the network wall ---------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:72px;align-items:center}
.hero-visual{position:relative;height:540px;overflow:hidden}
.hero-visual{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent)}
.hero-visual.horiz{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.wall{display:grid;gap:14px;height:100%;grid-auto-flow:column}
.wall-col{--wall-gap:14px;display:flex;flex-direction:column;gap:var(--wall-gap);height:max-content;min-height:0;animation:wallUp var(--spd,30s) linear infinite;animation-play-state:paused}
.wall-col.lane-ready{animation-play-state:running}
.wall-col.rev{animation-direction:reverse}
.hero-visual.horiz .wall{grid-auto-flow:row;grid-auto-rows:1fr}
.hero-visual.horiz .wall-col{flex-direction:row;width:max-content;height:100%;animation-name:wallLeft;min-width:0}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--wall-gap) / 2))}}
@keyframes wallLeft{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--wall-gap) / 2))}}
.tile{flex:none;position:relative;border:1px solid #222;background:#111;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.045) 50%,transparent 62%);background-size:240% 100%;animation:tileSheen 7s ease-in-out infinite;animation-delay:var(--sd,0s);animation-play-state:paused}.wall-col.lane-ready .tile::after{animation-play-state:running}
@keyframes tileSheen{0%{background-position:200% 0}55%,100%{background-position:-140% 0}}
.tile i{position:absolute;left:12px;top:12px;width:22px;height:1px;background:#2e2e2e}
.tile b{position:absolute;left:12px;bottom:10px;font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.tile s{position:absolute;left:12px;bottom:34px;font-size:9px;letter-spacing:.06em;color:var(--dim);text-decoration:none}
.tile.live::before{content:"";position:absolute;right:12px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--ink);animation:livePulse 2.4s ease-in-out infinite;animation-delay:var(--sd,0s);animation-play-state:paused}.wall-col.lane-ready .tile.live::before{animation-play-state:running}
@keyframes livePulse{0%,100%{opacity:.25}50%{opacity:1}}
/* The clip box is padded past the glyph box so the serif's ascenders, descenders, and side overhangs are never cut; negative margins keep the layout unchanged. */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding:.2em .1em .3em;margin:-.2em -.1em -.3em}
@keyframes hwIn{from{transform:translateY(112%)}to{transform:translateY(0)}}
.hw>span{display:inline-block}@media (min-width:810px){.hw>span{animation:hwIn 1.05s var(--ease) var(--d,0s) both}}
@media (max-width:1023px){.hero-grid{gap:44px}.hero-visual{height:440px}}
@media (max-width:809px){
.hero-grid{grid-template-columns:1fr;gap:28px}
.hero-grid>.hero-visual{order:-1}
.hero-visual{height:420px}
/* Hidden desktop lanes do not request their contact sheets on mobile. */
.hero-visual:not(.horiz) .wall{grid-template-columns:1fr;gap:10px}
.hero-visual:not(.horiz) .wall-col:nth-child(n+2){display:none}
.hero-visual.horiz .wall-col:nth-child(n+2){display:none}
.hero-visual.horiz .tile{width:min(calc(100vw - 40px),280px)!important}
.hero h1{font-size:clamp(36px,9vw,48px)}
.hero-support{margin-top:18px;font-size:16px;line-height:1.45}
.tile b{font-size:17px}
.tile s{bottom:28px}
}
@media (prefers-reduced-motion: reduce){.wall-col,.tile::after,.tile.live::before,.hw>span{animation:none}}
@media (scripting: none){
.wall-col .tile-art{background-image:var(--lane-image)}
.tile-lcp .tile-art{display:block}
.tile-lcp img{display:none}
}

/* The commenting lander's hero, driven by comment-sheet.js. The comments stay
   borderless and use spacing, type scale and motion to form one composition. */
.hero-compact .hero-grid{align-items:stretch}
.comment-cascade{position:relative;width:100%;max-width:460px;min-width:0;margin-left:auto;overflow:hidden;font-family:var(--sans)}
.comment-cascade-stack{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.comment-cascade-row{display:flex;width:100%;align-items:flex-start;gap:10px;color:var(--ink);transform-origin:0 70%}
.comment-cascade-avatar{flex:0 0 29px;width:29px;height:29px;margin-top:1px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:50%;background-color:#222;background-image:url("/site/platform/comment-profile-sprite.jpg");background-repeat:no-repeat;background-size:200% 200%;transform-origin:50% 50%}
.comment-cascade-avatar-one{background-position:0 0}
.comment-cascade-avatar-two{background-position:100% 0}
.comment-cascade-avatar-three{background-position:0 100%}
.comment-cascade-avatar-four{background-position:100% 100%}
.comment-cascade-body{display:flex;min-width:0;flex-direction:column;align-items:flex-start;transform-origin:0 60%}
.comment-cascade-text{font-weight:500;letter-spacing:-.038em}
.comment-cascade-text>span{display:block;white-space:nowrap}
.comment-cascade-like{display:flex;height:17px;margin-top:6px;align-items:center;gap:5px;color:currentColor;font-size:13px;font-variant-numeric:tabular-nums;line-height:1;transform-origin:0 60%}
.comment-cascade-like svg{flex:none;color:#fe2c55;transform-origin:50% 60%}
.comment-cascade-like span{display:inline-block;width:3ch}
.comment-cascade-row-primary{font-size:clamp(23px,2.75vw,29px)}
.comment-cascade-row-primary .comment-cascade-text{line-height:1.04}
.comment-cascade-row-primary .comment-cascade-like{margin-top:7px;font-size:14px}
.comment-cascade-row-secondary{padding-left:28px;color:#dedede;font-size:clamp(18px,2.1vw,22px)}
.comment-cascade-row-secondary .comment-cascade-text{line-height:1.12}
.comment-cascade-row-tertiary{padding-left:8px;color:#bcbcbc;font-size:clamp(16px,1.82vw,19px)}
.comment-cascade-row-tertiary .comment-cascade-text{line-height:1.14}
.comment-cascade-row-quaternary{padding-left:48px;color:#999;font-size:clamp(14px,1.55vw,16px)}
.comment-cascade-row-quaternary .comment-cascade-text{line-height:1.16}
/* Pinned comment: the outcomes composition, one phone showing a creator's video with
   the app's rail and the brand's comment pinned over it. The phone is a real surface
   in the app, which is why it carries a fill and a radius on a page that otherwise
   frames nothing; the bubble is the app's comment sticker, dark and blurred over the
   video, the one blurred surface on the page. The markup is the finished phone; the
   runner brings the chrome, the bubble and the thread in, drifts the video and plays
   the clip while the phone is in view. The clip is taller than the phone and top
   aligned so the face sits above the bubble; its poster is the clip's first frame and
   shares the crop, so a refused autoplay and a reduced-motion visit show the same
   frame. The scrim is its own element because a video takes no pseudo-elements. */
.pinned-comment{position:sticky;top:24px;align-self:start;width:100%;max-width:460px;margin-left:auto;font-family:var(--sans);color:var(--ink)}
.pinned-phone{position:relative;width:300px;max-width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:24px;background:#000}
.pinned-video{position:absolute;top:0;left:0;display:block;width:100%;height:112%;object-fit:cover;object-position:50% 0;background:#111;transform:scale(1.06);transform-origin:50% 36%}
.pinned-scrim{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));pointer-events:none}
.pinned-rail{position:absolute;right:12px;bottom:92px;display:flex;flex-direction:column;align-items:center;gap:16px}
.pinned-rail-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:500;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pinned-rail-item svg{display:block;width:28px;height:28px;color:var(--ink);transform-origin:50% 50%}
.pinned-heart{position:absolute;left:5px;top:5px;width:18px;height:18px;color:#fe2c55;opacity:0;pointer-events:none}
.pinned-heart svg{display:block;width:100%;height:100%}
.pinned-caption{position:absolute;left:16px;right:64px;bottom:20px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.3;color:var(--ink)}
.pinned-caption strong{font-weight:500}
.pinned-caption span{opacity:.9}
.pinned-bubble{position:absolute;left:14px;right:56px;bottom:70px;padding:12px;border-radius:14px;background:rgba(18,18,18,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pinned-row{display:flex;align-items:center;gap:8px}
.pinned-avatar{flex:0 0 26px;width:26px;height:26px;margin-top:0;border:0}
.pinned-avatar-initial{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#2c2c2c;font-size:11px;font-weight:500;color:var(--ink)}
.pinned-avatar-creator{border-radius:50%;background:#222 url("/site/platform/posts/post-03.jpg") 50% 25%/200% no-repeat}
.pinned-name{display:flex;flex:1;min-width:0;align-items:center;gap:5px;font-size:13px;font-weight:500;line-height:1.2;color:var(--ink2)}
.pinned-badge{display:inline-flex;flex:none;width:13px;height:13px;color:var(--ink);transform-origin:50% 50%}
.pinned-badge svg{display:block;width:100%;height:100%}
.pinned-tag{font-style:normal;font-weight:400;color:var(--dim)}
.pinned-tag::before{content:"\00b7";margin-right:5px}
.pinned-likes{display:flex;flex:none;align-items:center;gap:4px;font-size:12px;line-height:1;color:var(--ink2);font-variant-numeric:tabular-nums}
.pinned-likes svg{display:block;width:13px;height:13px}
.pinned-text{margin:8px 0 0;font-size:14px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.pinned-thread{overflow:hidden}
.pinned-reply{align-items:flex-start;margin-top:10px;padding-left:4px}
.pinned-reply .pinned-avatar{flex-basis:22px;width:22px;height:22px}
.pinned-reply-body{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.pinned-reply .pinned-name{font-size:12px}
.pinned-reply-text{font-size:13px;line-height:1.3;color:var(--ink)}
.pinned-more{display:block;margin-top:10px;padding-left:34px;font-size:12px;font-weight:500;line-height:1.3;color:var(--dim)}
/* In one column (the .outcomes-body collapse) the composition sits above the rows; the
   sticky offset only serves the two-column layout. */
@media (max-width:1119px){
.pinned-comment{position:relative;top:auto;order:-1;margin:0}
}
@media (max-width:809px){
.hero-compact .hero-grid{align-items:start}
.comment-cascade{max-width:none;height:390px;margin:0}
.comment-cascade-stack{top:28px;right:22px;bottom:52px;left:0}
.pinned-comment{max-width:none}
}
@media (max-width:380px){.comment-cascade-stack{right:0}}
@media (prefers-reduced-motion:reduce){
.comment-cascade-row,.comment-cascade-avatar,.comment-cascade-body,.comment-cascade-like{opacity:1!important;transform:none!important}
}

/* ---------- platform icons ---------- */
.picon{display:inline-flex;flex:none;color:inherit}
.picon svg{display:block}
.hero-eyerow{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.hero-eyerow .eyebrow{margin:0}
.hero-chip{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.cross a{display:inline;white-space:nowrap}
.cross a .picon{display:inline-block;vertical-align:-2px;margin-right:6px}
.cross a .picon{color:var(--muted);transition:color 120ms ease}
.cross a:hover .picon{color:var(--ink)}
.tile .pmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#1f1f1f}

/* ---------- feature icons ---------- */
.fico{display:inline-flex;flex:none}
.fico svg{display:block}
.pillar .fico{color:var(--dim);margin-bottom:8px;transition:color 160ms ease}
.pillar:hover .fico{color:var(--ink)}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.step-top .step-num{margin-bottom:0}
.step-top .fico{color:var(--dim)}
.compare-cell[data-col]{display:flex;align-items:flex-start;gap:9px}
.compare-cell .cico{display:inline-flex;flex:none;margin-top:2px}
.compare-cell.us .cico{color:var(--ink)}
.compare-cell:not(.us) .cico{color:var(--dim)}
@media (max-width:809px){
.compare-cell[data-col]{flex-wrap:wrap}
.compare-cell[data-col]::before{width:100%}
}
/* Fill the tile with one contact-sheet cell. Percentages (not cqw/cqh) keep Safari 16/17 working.
   Sheets stay off until .sheet-ready so the small LCP <img> can paint first. */
.tile-art{position:absolute;inset:0;background-size:100% var(--sheet-height);background-position:center var(--tile-y);background-repeat:no-repeat}
.wall-col.sheet-ready .tile-art{background-image:var(--lane-image)}
.tile-lcp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile-lcp .tile-art{display:none}
.tile.has-post .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 62%)}
.tile.has-post i{display:none}
.tile.has-post .pmark{left:auto;top:auto;right:10px;bottom:10px;transform:none;color:rgba(255,255,255,.85)}
.tile.has-post .pmark svg{width:16px;height:16px;display:block}
.tile.has-post s{color:rgba(255,255,255,.7)}
.tile.has-post b{color:#fff}