/* Share-your-story page (/share-your-story/, 21–22 Oct 2026). Built on dd.css: same blues, Space Grotesk/Inter, green pill buttons, rounded cards.
   The invitation and the form come first (two columns from 1024px, stacked on phones with nothing in between); the explainer, the
   de-emphasized concept stills and the shared FAQ follow. Light and pale-blue (#E8F4FD, the homepage examples surface) sections alternate. */
.sv .svpale{background:#E8F4FD}

/* hero: invitation + compact choice card (two columns from 960px) */
.sshero{--sp:28px}
@media(min-width:720px){.sshero{--sp:48px}}
.ssgrid{display:grid;gap:24px;align-items:center}
.sscopy .k{line-height:1.4;max-width:100%;margin-bottom:16px}
.sshero h1{font-size:clamp(34px,7vw,56px);line-height:1.02;text-wrap:balance;max-width:15ch}
.sshero h1 .l{display:block}
@media(min-width:960px){.sshero h1{max-width:none;font-size:clamp(38px,3.2vw,48px)}}
.sshero h1 .l{text-wrap:balance} /* each phrase starts its own line; the longer second phrase wraps evenly where the column needs it */
.svlede{font:500 clamp(17px,1.9vw,19px)/1.5 var(--body);max-width:46ch;margin-top:16px;color:var(--ink)}
.svreassure{margin-top:10px;font:600 14.5px/1.45 var(--body);color:var(--navy);max-width:46ch}
.svbtn2{min-height:56px;background:var(--white);color:var(--navy);border:2px solid var(--navy);box-shadow:0 6px 0 rgba(5,49,122,.3)}
.svbtn2:hover{background:#F1F8FE}
.sscard{background:#E8F4FD;border-radius:var(--r2);padding:22px 20px 24px}
.sscard h2{font-size:clamp(26px,3vw,32px);letter-spacing:-.03em;line-height:1.05}
.sscard h2 .l{display:block;color:inherit} /* one same-scale statement in the heading's dark colour (overrides the shared .light h2 span accent) */
.sscard .sswho{margin-top:6px;font:500 15px/1.45 var(--body);color:var(--navy)}
.sscard-actions{display:grid;gap:14px;margin-top:16px}
.sscard-actions .btn{width:100%;white-space:normal;text-align:center}
@media(min-width:720px){.sscard{padding:28px 28px 30px}}
@media(min-width:960px){.ssgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px}}

/* section 3: the plan, then the one submission experience */
.svnarrow{max-width:784px}
.ssflow:focus{outline:0}
.ssplan2{margin-top:10px;font:500 16px/1.5 var(--body);color:var(--navy);max-width:60ch}
.ssflow .svintro{margin-top:14px;font:700 clamp(18px,2.2vw,21px)/1.35 var(--head);letter-spacing:-.01em}
.svpromptlabel{margin-top:16px}
/* concept gallery: deep navy band, large 16:9 stills first (2×2 from 720px, one column on phones), then the heading */
.ssnight{background:#031024;color:var(--white);border-top:1px solid #0b2347;border-bottom:1px solid #0b2347}
.ssnight h2{color:var(--white);font-size:clamp(30px,4.6vw,52px);margin-top:40px}
.svgallery h2 .l{display:block;color:inherit} /* one heading, two same-scale lines; inherit overrides the shared .light/.dark h2 span accent */
.ssnight .svintro{color:#C7E8FD;font:500 clamp(17px,2vw,19px)/1.5 var(--body);margin-top:12px;max-width:52ch}
.svgrid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:8px}
.svshot{margin:0}
.svframe{overflow:hidden;border-radius:18px;background:#0b1a33;aspect-ratio:16/9}
.svshot img,.svshot .svpend{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover} /* height:100%: the img height attribute must not override the frame */
.svframe{position:relative}
.svshot video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;background:#0b1a33}
/* big play button over the poster until the first play (shown only once story.js wires it; native controls do the rest) */
.svplay{display:none;position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(252,253,254,.92);box-shadow:0 6px 24px rgba(0,0,0,.35);cursor:pointer}
.svplay span:first-child{display:block;width:0;height:0;margin-left:31px;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent var(--navy)}
.svplay:hover{background:var(--white)}
.svplay:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.js-videos .svshot:not(.is-started) .svplay{display:block}
@media(max-width:719px){.svplay{width:64px;height:64px}.svplay span:first-child{margin-left:26px;border-width:13px 0 13px 20px}}
.svshot figcaption{margin-top:12px;font:600 16px/1.35 var(--body);color:#C7E8FD}
@media(min-width:720px){.svgrid{grid-template-columns:1fr 1fr;gap:32px}}

/* honest pending frame while an approved AI still is missing (never a finished look) */
.svpend{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#0B1A33 0 14px,#0E2140 14px 28px);color:#C7E8FD;border-radius:inherit}
.svpend span{font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;border:1px dashed rgba(199,232,253,.5);border-radius:999px}

/* form */
.svprivacy{margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--white);border:2px solid rgba(5,49,122,.14);font:500 15px/1.5 var(--body);color:var(--navy)}
.svpaths{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
.svpath{min-height:56px;padding:12px 18px;border-radius:16px;border:2px solid var(--navy);background:var(--white);color:var(--navy);font:700 16px/1.25 var(--head);letter-spacing:.01em;text-align:center;box-shadow:0 4px 0 rgba(5,49,122,.25);cursor:pointer}
.svpath:hover{background:#E1F0FE}
.svpath:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(5,49,122,.25)}
.svpath[aria-expanded="true"]{background:var(--navy);color:var(--white);box-shadow:0 4px 0 var(--electric)}
@media(min-width:560px){.svpaths{grid-template-columns:1fr 1fr}}
.svpanel{margin-top:18px}
.svpanel:focus{outline:0}
.svform{max-width:none;margin-top:0;padding:24px 22px 26px;box-shadow:8px 8px 0 var(--electric)}
.svfield{margin-top:20px}.svfield:first-child{margin-top:0}
.svform textarea#svStory{min-height:180px;line-height:1.5}
.ferr{min-height:0;font:600 14px/1.35 var(--body);color:#9E2331;margin-top:6px}
.ferr:empty{display:none}
fieldset.svcredit{border:0;padding:0;min-width:0}
fieldset.svcredit legend{font:600 14px/1 var(--body);color:var(--navy);margin-bottom:6px;padding:0}
.svopt{display:flex;align-items:center;gap:12px;min-height:44px;margin:0;font:500 16px/1.3 var(--body);color:var(--ink);cursor:pointer}
.svopt input,.svchk input{width:22px;height:22px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--electric);-webkit-appearance:auto;appearance:auto;border:0}
.svcreditname{margin:6px 0 0 34px}
.svchecks{display:grid;gap:4px}
.svchk{display:flex;align-items:flex-start;gap:12px;margin:0;padding:10px 0;font:500 15px/1.5 var(--body);color:var(--ink);cursor:pointer}
.svchk input{margin-top:2px}
.svhp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.svform .err{margin-top:12px}
.svform .err:empty{min-height:0}
.svform .btn-lg{margin-top:14px}
.svform .help a{display:inline-flex;align-items:center;min-height:44px}
.svform .svwho a{display:inline;min-height:0} /* inline link inside the sentence: keeps the line spacing even */
.svform .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.svform .btn[aria-busy="true"]{opacity:.8;cursor:progress}
@media(max-width:719px){.svform{padding:22px 16px 24px}.svcreditname{margin-left:0}}

/* interview path */
.svinterview{background:var(--white);border-radius:var(--r);padding:22px 20px;box-shadow:8px 8px 0 var(--electric)}
.svinterview h3{font-size:clamp(22px,2.6vw,28px)}
.svinterview>p{font:500 15px/1.55 var(--body);margin-top:10px;max-width:60ch}
.svprompt{margin-top:0;min-height:300px;max-height:60vh;overflow:auto;font:500 15px/1.55 var(--body);background:#F4F9FE;border-color:rgba(5,49,122,.14);resize:vertical}
.svcopyrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:14px}
.svtoform{color:var(--navy)}
.svcopymsg{min-height:20px;margin-top:8px;font:600 14px/1.4 var(--body);color:var(--green-deep)}
@media(min-width:720px){.svinterview{padding:28px 30px}}
@media(max-width:719px){.svcopyrow .btn{width:100%}}
.sv .thanks h2:focus{outline:0}

/* compressed form helpers (22 Oct revision) */
.svhelp{margin-top:8px;font:600 15px/1.45 var(--body);color:var(--navy)}
.svmore{margin-top:6px}
.svmore>summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font:600 14px/1.3 var(--body);color:var(--electric);text-decoration:underline;text-underline-offset:3px}
.svmore>p{margin:4px 0 6px;padding:12px 14px;border-radius:14px;background:var(--white);border:2px solid rgba(5,49,122,.14);font:500 14.5px/1.5 var(--body);color:var(--navy)}
.svsteps2{margin:12px 0 0 22px;display:grid;gap:6px;font:600 16px/1.4 var(--body);color:var(--ink)}
.svstoryhelp{margin:-2px 0 8px}
.svreveal{margin-top:20px}
.svcopyrow .svbtn2{min-height:56px}

.ssnotes{margin-top:14px}
.ssnotes .svhelp{margin-top:0}
.ssplan2{margin-top:6px;font:500 15px/1.5 var(--body);color:var(--navy);max-width:60ch}
.xmark{white-space:nowrap} /* keeps the mark and the full stop together; the heading's aria-label carries the exact name "…on X." */
.xmark img{display:inline-block;height:.78em;width:auto;vertical-align:-.04em;margin-left:.04em} /* local X mark at cap height, decorative (aria-hidden) */
.svplay-t:empty{display:none}
.js-videos .svshot.needs-retry .svplay{display:flex;align-items:center;gap:10px;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:auto;height:auto;min-height:56px;padding:0 22px 0 18px;border-radius:999px}
.js-videos .svshot.needs-retry .svplay span:first-child{margin-left:0;border-width:10px 0 10px 16px}
.svplay-t{font:700 15px/1 var(--head);color:var(--navy);white-space:nowrap}

/* section 3: two columns from 960px (copy, choices, notes and the form on the left; the illustrative X post on the right); stacked on phones,
   text and buttons first, the post last */
.sstell{display:grid;gap:32px;align-items:start}
.sstell-main{min-width:0;max-width:760px}
@media(min-width:960px){.sstell{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px}.xmock{position:sticky;top:96px}}
.ssflow h2#h-tell{font-size:clamp(30px,3.1vw,44px);line-height:1.06;text-wrap:balance}
.ssflow h2#h-tell .nw{white-space:nowrap} /* "real-life" never splits at its hyphen */
.svpath-primary{background:var(--green);border-color:var(--green-deep);box-shadow:0 4px 0 var(--green-deep)}
.svpath-primary:hover{background:#4EE0A4}
.svpath.svpath-primary[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:0 4px 0 var(--electric)} /* selected = the same navy state as the other choice */
/* the illustrative X post: a light card, not a device frame; decorative inside, described once on the figure */
.xmock{margin:0;max-width:400px;justify-self:center;width:100%}
.xmock-card{background:#fff;border:1px solid #CFD9DE;border-radius:18px;box-shadow:0 10px 30px rgba(5,49,122,.12);padding:14px 16px 6px;color:#0F1419;font:400 15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,var(--body)}
.xmock svg{width:18px;height:18px;fill:none;stroke:#536471;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xmock-repost{display:flex;align-items:center;gap:8px;margin:0 0 6px 30px;font-size:13px;font-weight:700;color:#536471}
.xmock-repost svg{width:15px;height:15px}
.xmock-post{display:grid;grid-template-columns:40px 1fr;gap:10px;padding-bottom:10px;border-bottom:1px solid #EFF3F4}
.xmock-av{width:40px;height:40px;border-radius:50%;object-fit:cover}
.xmock-body{min-width:0}
.xmock-who{display:flex;align-items:center;gap:5px;margin:0;font-size:15px;white-space:nowrap;overflow:hidden}
.xmock-who b{font-weight:700}
.xmock-who span{color:#536471;overflow:hidden;text-overflow:ellipsis}
.xmock-x{width:16px;height:16px;margin-left:auto;flex:none}
.xmock-text{margin:2px 0 0}
.xmock-media{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid #CFD9DE;margin-top:10px}
.xmock-actions{display:flex;justify-content:space-between;max-width:320px;margin:10px 0 0}
.xmock-actions span{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#536471}
.xmock-reply{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #EFF3F4}
.xmock-reply:last-child{border-bottom:0}
.xmock-ini{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:700 14px/1 var(--body);color:#fff}
.xmock-ini.a{background:#7856FF}.xmock-ini.b{background:#00A67E}

/* tighter section rhythm on this page only (was 120 px desktop / 64 px phones per edge): gallery, submission and FAQ */
.sv #scenes,.sv #tell,.sv #faq{--sp:36px}
@media(min-width:720px){.sv #scenes,.sv #tell,.sv #faq{--sp:56px}}
.sv .ssnight h2{margin-top:32px}