/* Content & social — page-specific sections (kit styles in service-page.css). */

/* Hero: the title, then the phone with its feed; what is on screen to the left, the offer to the right. */
.sv-content .sv-hero{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(40px,6vw,110px);padding:150px var(--sv-pad) 90px}
.sv-content .sv-hero>.sv-kicker,.sv-content .sv-hero>h1{grid-column:1/-1}
.sv-content .sv-stage.sv-content-stage{grid-column:1/3;grid-row:3;display:grid;grid-template-columns:subgrid;align-items:start;width:auto;aspect-ratio:auto;overflow:visible;margin:64px 0 0}
.sv-content .sv-hero>.sv-hero-foot{grid-column:3;grid-row:3;align-self:start;max-width:360px;margin:180px 0 0;text-align:left}
.sv-content .sv-hero-foot p{margin:0 0 28px}
.sv-content .sv-hero-foot .sv-actions{justify-content:flex-start}

.sv-content-now{grid-column:1;justify-self:end;display:grid;justify-items:end;gap:10px;margin-top:116px;text-align:right;transition:opacity .26s var(--ease)}
.sv-content-now.is-swapping{opacity:0}
.sv-content-now-k{font:13px/1.3 var(--sans);color:var(--muted)}
.sv-content-now b{font:400 34px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.sv-content-now-f{font:15px/1.4 var(--display);color:#4a4a4a}
.sv-content-now .sv-link{margin-top:8px}

/* The phone */
.sv-content-phone{grid-column:2;position:relative;width:340px;height:704px;padding:10px;border-radius:56px;background:#0d0d0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 60px 90px -50px rgba(13,13,13,.6);isolation:isolate}
.sv-content-screen{position:relative;height:100%;border-radius:46px;overflow:hidden;background:#0d0d0d}
/* Status bar and island sit on the frame, so they stay put whether the feed moves or is scrolled. */
.sv-content-phone:before{content:"";position:absolute;z-index:2;top:10px;left:10px;right:10px;height:60px;border-radius:46px 46px 0 0;background:#0d0d0d;pointer-events:none}
.sv-content-phone:after{content:"";position:absolute;z-index:3;left:50%;top:23px;width:94px;height:27px;translate:-50% 0;border-radius:20px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sv-content-feed{position:relative;display:flex;flex-direction:column;gap:30px;padding-top:66px;transition:transform 1.15s cubic-bezier(.65,0,.35,1);will-change:transform}
.sv-content-post header{display:flex;align-items:center;gap:8px;padding:0 14px 11px;font:12px/1 var(--sans);color:#fff}
.sv-content-post header i{width:6px;height:6px;border-radius:50%;background:currentColor}
.sv-content-post header b{font-weight:400}
.sv-content-post header span{margin-left:auto;color:#8c8c8c}
.sv-content-post-media{position:relative;overflow:hidden;background:#1b1b1b}
.sv-content .sv-content-post-media>:is(img,video),.sv-content .sv-content-post-media>picture>img{display:block;width:100%;height:100%;object-fit:cover}
.sv-content-slides{display:flex;height:100%;transition:transform .8s var(--ease)}
.sv-content .sv-content-slides img{flex:0 0 100%;display:block;width:100%;height:100%;object-fit:cover}
.sv-content-dots{display:flex;justify-content:center;gap:5px;padding-top:11px}
.sv-content-dots i{width:5px;height:5px;border-radius:50%;background:#4d4d4d;transition:background .3s}
.sv-content-dots i.is-on{background:#fff}
/* Reduced motion: the feed stands still and scrolls by hand. */
.sv-content-phone.is-static .sv-content-screen{overflow-y:auto;scrollbar-width:none}
.sv-content-phone.is-static [data-feed-clone]{display:none}
.sv-content-phone.is-static .sv-content-feed{padding-bottom:24px}
.sv-content-phone.is-static .sv-content-slides{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sv-content-phone.is-static .sv-content-slides img{scroll-snap-align:start}

/* Always on: a rail of real formats, drifting */
.sv-content-stream{padding:30px 0 150px}
.sv-content-stream-head{text-align:center;padding:0 var(--sv-gutter);margin-bottom:72px}
.sv-content-stream-head h2{font-size:clamp(40px,4.6vw,70px);line-height:1;margin-top:20px}
.sv-content-rail{--h:400px;overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sv-content-rail.is-dragging{cursor:grabbing}
.sv-content-rail.is-dragging a{pointer-events:none}
.sv-content-track{display:flex;align-items:flex-start;gap:20px;width:max-content;will-change:transform}
.sv-content-tile{flex:none;display:block;color:inherit;-webkit-user-drag:none}
.sv-content-tile-media{display:block;height:var(--h);aspect-ratio:var(--r,1);border-radius:10px;overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent)}
.sv-content-tile-media :is(img,video){display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:scale 1.2s var(--ease)}
.sv-content-tile:hover .sv-content-tile-media :is(img,video){scale:1.04}
.sv-content-tile-media.is-trio{display:flex;gap:6px;aspect-ratio:auto;border-radius:0;background:none}
.sv-content-tile-media.is-trio video{width:auto;height:100%;aspect-ratio:9/16;border-radius:10px}
.sv-content-tile-cap{display:flex;align-items:center;gap:8px;margin-top:14px;font:14px/1 var(--sans);color:var(--sv-muted);white-space:nowrap}
.sv-content-tile-cap i{width:7px;height:7px;border-radius:50%;background:var(--sv-fg)}
.sv-content-tile-cap b{font-weight:400;color:var(--sv-fg);margin-right:2px}
.sv-content-rail.is-static{overflow-x:auto;overscroll-behavior-x:contain;touch-action:auto;cursor:auto;scrollbar-width:thin;padding-bottom:12px}
.sv-content-stream-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:0 var(--sv-pad);margin-top:60px}
.sv-content-stream-foot p{font:16px/1.6 var(--display);color:var(--sv-soft);max-width:470px}

/* MIGGY: one jar, nine angles, each as a static and a video */
.sv-content-angles{padding:60px var(--sv-pad) 120px}
.sv-content-angles-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;column-gap:20px}
.sv-content-angles-copy{grid-column:1/6;grid-row:1}
.sv-content-angles-copy h2{font-size:clamp(40px,4.6vw,70px);line-height:1;margin:18px 0 26px}
.sv-content-angles-copy>p{font:16px/1.6 var(--display);color:var(--sv-soft);max-width:430px}
.sv-content-controls{grid-column:1/6;grid-row:2;display:flex;flex-wrap:wrap;gap:8px;max-width:480px;margin-top:44px}
.sv-content-hook{grid-column:1/6;grid-row:3;max-width:480px;min-height:2.35em;margin-top:34px;font:400 clamp(26px,2.3vw,34px)/1.16 var(--serif);letter-spacing:-.02em}
.sv-content-angles-link{grid-column:1/6;grid-row:4;margin-top:30px}
.sv-content-pair{grid-column:7/13;grid-row:1/5}
.sv-content-pair-frames{display:grid}
.sv-content-pair-item{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sv-content-frame{aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent)}
.sv-content-frame :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
.sv-content-pair-cap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;font:13px/1.4 var(--sans);color:var(--sv-muted)}

/* Light act: start, questions, then a short and honest list of what will complete the page. */
.sv-content .sv-start{padding-bottom:30px}
.sv-content .sv-faq{padding-bottom:90px}
.sv-content .sv-content-needed{padding:0 var(--sv-pad) 110px}
.sv-content-needed>h2{font-size:clamp(24px,2vw,30px);line-height:1.1;margin-bottom:18px}
.sv-content-needed .sv-needed-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sv-content-needed .sv-needed-slot{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px;border:1px dashed color-mix(in srgb,currentColor 30%,transparent);border-radius:10px}
.sv-content-needed .sv-needed-frame{display:contents}
/* A small empty frame stands for the picture that is still missing. */
.sv-content-needed .sv-needed-frame:before{content:"";grid-column:1;grid-row:1/3;width:34px;aspect-ratio:4/5;border-radius:4px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,currentColor 9%,transparent) 5px 6px)}
.sv-content-needed .sv-needed-frame span{grid-column:2;grid-row:1;padding:0;text-align:left;font-size:11px;line-height:1.35;color:var(--sv-fg)}
.sv-content-needed .sv-needed-slot figcaption{grid-column:2;grid-row:2;margin-top:6px}

@media(max-width:1100px){
 .sv-content-needed .sv-needed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sv-content .sv-hero{column-gap:36px}
 .sv-content-phone{width:310px;height:642px}
 .sv-content-now b{font-size:28px}
 .sv-content-angles-copy,.sv-content-controls,.sv-content-hook,.sv-content-angles-link{grid-column:1/7}
 .sv-content-pair{grid-column:7/13;padding-left:12px}
 .sv-content-pair-item,.sv-content-pair-cap{gap:12px}
}
@media(max-width:760px){
 .sv-content .sv-hero{display:block;padding:118px var(--sv-gutter) 72px}
 .sv-content .sv-stage.sv-content-stage{display:flex;flex-direction:column-reverse;align-items:center;gap:20px;margin:36px auto 0}
 .sv-content-now{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;margin:0;text-align:center}
 .sv-content-now b{font-size:22px}
 .sv-content-now-k{display:none}
 .sv-content-now .sv-link{margin:0}
 .sv-content-phone{--pw:min(300px,80vw);width:var(--pw);height:calc(var(--pw)*2.07);border-radius:48px;padding:9px}
 .sv-content-screen{border-radius:40px}
 .sv-content-phone:before{top:9px;left:9px;right:9px;height:54px;border-radius:40px 40px 0 0}
 .sv-content-phone:after{top:20px;width:80px;height:24px}
 .sv-content-feed{padding-top:60px}
 .sv-content .sv-hero>.sv-hero-foot{max-width:none;margin:44px auto 0;text-align:center}
 .sv-content .sv-hero-foot p{margin:0 auto 26px}
 .sv-content .sv-hero-foot .sv-actions{justify-content:center}
 .sv-content-stream{padding:20px 0 110px}
 .sv-content-stream-head{margin-bottom:44px}
 .sv-content-stream-head h2{font-size:40px}
 .sv-content-rail{--h:300px}
 .sv-content-track{gap:14px}
 .sv-content-stream-foot{display:block;margin-top:40px}
 .sv-content-stream-foot div{margin-top:20px}
 .sv-content-angles{padding-bottom:110px}
 .sv-content-angles-grid{display:flex;flex-direction:column}
 .sv-content-angles-copy h2{font-size:40px}
 .sv-content-pair{order:2;margin-top:40px;padding-left:0}
 .sv-content-pair-item{gap:10px}
 .sv-content-pair-cap{gap:10px}
 .sv-content-controls{order:3;margin-top:36px}
 .sv-content-hook{order:4;font-size:26px;min-height:3.5em;margin-top:24px}
 .sv-content-angles-link{order:5;margin-top:8px}
 .sv-content .sv-start{padding-bottom:20px}
 .sv-content .sv-faq{padding-bottom:70px}
 .sv-content .sv-content-needed{padding:0 var(--sv-gutter) 100px}
 /* Phones: the list becomes one swipeable row, so it stays short. */
 .sv-content-needed .sv-needed-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--sv-gutter)*-1);padding:0 var(--sv-gutter);scroll-padding:0 var(--sv-gutter)}
 .sv-content-needed .sv-needed-slot{flex:0 0 78%;scroll-snap-align:start}
}