/* The social and AI landing pages in the homepage's system (ask-v1, 28 September 2026):
   /creators, /instagram, /ai and /ja/x. They load home-ask.css for the hero, the
   one call to action, the three payoffs, the closing badge and the sticky phone
   bar, and add only what is theirs here:
   - .sa-outs  finished outputs, as the person would post them (creators, x)
   - .sa-night a night becoming the 9:16 picture and the carousel caption (instagram)
   - .sa-chat  the Ask box as a Claude chat, the photo only after approval (ai)
   - .sa-more  the band that opens the specifics on /connector. */

/* ---------- a wide hero: the words on top, the outputs across ---------- */
.sa-wide .ha-hero-grid { grid-template-columns: minmax(0, 1fr); }
.sa-wide .ha-hero h1, .sa-wide h1 { font-size: clamp(40px, 5.8vw, 78px); }
.sa-wide h1 > span { display: block; }
@media (min-width: 900px) {
  .sa-wide .ha-hero-grid { min-height: 0; gap: 34px; }
  /* The badge sits under the line it answers, with the price and the trust
     line beside it — not alone in a column of its own (polish round 2). */
  .sa-wide .ha-copy { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sa-wide .ha-copy .ha-sub { max-width: 36em; }
  .sa-wide .ha-copy .ha-cta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; row-gap: 4px; align-items: center; justify-content: start; }
  .sa-wide .ha-copy .ha-cta .store-badge { grid-row: 1 / span 2; }
  .sa-wide .ha-copy .ha-cta > p { grid-column: 2; margin: 0; }
}

/* ---------- finished outputs ---------- */
.sa-outs {
  display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none;
  list-style: none;
}
.sa-outs::-webkit-scrollbar { display: none; }
.sa-proof { min-width: 0; display: grid; gap: 10px; }
/* Phones: the badge in the first screen (visual QA, 29 September 2026). A
   tall demo (the Claude chat on /ai, the night on /instagram) comes after the
   one call to action; the outputs on /creators and /ja/x stay first, with
   their small print (whose photos, the mark) after the badge. */
@media (max-width: 899px) {
  .sa-proof { display: contents; }
  .sa-outs { order: 3; }
  .sa-proof > .sa-src, .sa-proof > .sa-mark { order: 5; margin-top: -10px; }
  .sa-chat, .sa-night { order: 5; }
  .sa-outs { padding-bottom: 8px; }
}
/* Phones (polish round 2): narrower frames, so the badge after them ends
   above the 700 px iOS Safari shows of a 390 x 844 screen. */
@media (max-width: 430px) {
  .sa-outs.is-four .sa-out { width: min(46vw, 184px); }
  .sa-outs.is-four .sa-x p { font-size: 13px; }
  .sa-outs.is-four .sa-link h3 { font-size: 17px; }
  .sa-outs.is-four .sa-ig .sa-t b { font-size: 20px; }
  .sa-outs.is-four .sa-article h3 { font-size: 15px; }
}
.sa-out { flex: none; width: min(58vw, 236px); scroll-snap-align: start; display: grid; gap: 9px; margin: 0; }
.sa-kind { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font: 600 10.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--balise-muted); white-space: nowrap; }
.sa-kind b { color: var(--balise-clay); font-weight: 600; }
.sa-kind a { color: var(--balise-evergreen); text-decoration: underline 2px var(--balise-gold); text-underline-offset: 3px; white-space: nowrap; letter-spacing: 0.04em; }
/* Phones: each label stays with its own frame ("X POST · 4 PHOTOS"), on one
   baseline, instead of meeting the next frame's label across the gap. */
@media (max-width: 899px) {
  .sa-outs { gap: 18px; }
  .sa-kind { justify-content: flex-start; }
  .sa-kind > :last-child:not(:first-child)::before { content: "\00b7"; display: inline-block; margin-right: 8px; color: var(--balise-muted); }
}
.sa-frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--balise-white);
  box-shadow: 0 24px 50px -24px rgba(16, 49, 43, 0.45), 0 0 0 1px rgba(16, 49, 43, 0.08);
  display: flex; flex-direction: column; color: #0f1419;
}
.sa-frame img { display: block; }
.sa-src, .sa-mark { margin: 0; font: 12.5px/1.35 var(--sans); color: var(--balise-muted); }

/* One link: a published Story page. */
.sa-link .sa-url { font: 500 11px/1 var(--sans); color: var(--balise-muted); background: var(--balise-paper-raised); margin: 10px 10px 0; padding: 7px 10px; border-radius: 99px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-link .sa-cover { margin: 10px 10px 0; border-radius: 12px; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.sa-link .sa-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.sa-link .sa-txt { padding: 11px 13px 14px; }
.sa-by { display: block; font: 500 10px/1.25 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--balise-muted); }
.sa-link h3 { margin: 6px 0 5px; font: 700 19px/1.1 var(--serif); letter-spacing: -0.01em; color: var(--balise-ink); }
.sa-link p { margin: 0; font: 13px/1.38 var(--serif); color: var(--balise-ink); }

/* An Instagram Story: one tall picture of the night. */
.sa-ig { background: #111; color: #fff; }
.sa-ig .sa-bars { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; gap: 4px; }
.sa-ig .sa-bars i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
.sa-ig .sa-bars i:first-child { background: #fff; }
.sa-ig .sa-pic { position: absolute; inset: 0; }
.sa-ig .sa-pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.sa-ig .sa-pic::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.74)); }
.sa-ig .sa-t { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 1; }
.sa-ig .sa-t b { display: block; font: 700 23px/1.04 var(--serif); letter-spacing: -0.015em; }
.sa-ig .sa-t span { display: block; margin-top: 6px; font: 500 10px/1.25 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.88; }
.sa-strip { display: flex; gap: 4px; margin-top: 9px; }
.sa-strip img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; border: 1.5px solid rgba(255, 255, 255, 0.85); }

/* An X post: up to four photos under a caption Balise drafts. */
.sa-x { padding: 13px 11px 12px; gap: 9px; }
.sa-who { display: flex; align-items: center; gap: 8px; font: 600 13px/1.15 var(--sans); color: #0f1419; }
.sa-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--balise-evergreen); color: var(--balise-gold); display: grid; place-items: center; font: 700 13px/1 var(--serif); }
.sa-who small { display: block; font-weight: 500; font-size: 11.5px; color: #536471; }
.sa-who small.sa-draft { margin-top: 2px; color: #8a4f12; font-weight: 600; line-height: 1.3; }
/* The draft label wraps inside a phone-width frame (/ja/x at 375 px cut
   「直すのも、一から書くのも自由」 at the edge, 28 September 2026). */
.sa-who > span:last-child { min-width: 0; flex: 1; }
.sa-who small { overflow-wrap: anywhere; }
.sa-who small:lang(ja) { word-break: keep-all; line-break: strict; }
.sa-frame p, .sa-art-body h3, .sa-t b { overflow-wrap: anywhere; }
.sa-x p { margin: 0; font: 14px/1.38 var(--sans); color: #0f1419; }
.sa-grid4 { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; border-radius: 14px; overflow: hidden; }
.sa-grid4 img { width: 100%; height: 100%; object-fit: cover; }

/* An X Article: the Story's title, its words, its photos. */
.sa-article { padding: 0 0 12px; }
.sa-article .sa-art-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px; font: 700 12px/1 var(--sans); color: #0f1419; }
.sa-article .sa-art-bar span { font-weight: 500; color: #536471; }
.sa-article .sa-art-cover { height: 34%; flex: none; overflow: hidden; }
.sa-article .sa-art-cover img { width: 100%; height: 100%; object-fit: cover; }
.sa-article .sa-art-body { padding: 10px 12px 0; display: grid; gap: 7px; min-height: 0; overflow: hidden; }
.sa-article h3 { margin: 0; font: 800 17px/1.15 var(--sans); letter-spacing: -0.01em; color: #0f1419; }
.sa-article p { margin: 0; font: 12.5px/1.42 var(--sans); color: #0f1419; }
.sa-article p:lang(ja) { font-size: 12px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.sa-article .sa-art-pic { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; }
.sa-article .sa-art-pic img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  /* The fan spans the content width, edge to edge with the headline. */
  .sa-outs { overflow: visible; margin: 0; padding: 0 0 10px; justify-content: space-between; gap: 22px; }
  .sa-out { width: 232px; }
  .sa-outs.is-four .sa-out { width: min(256px, calc((100% - 3 * 22px) / 4)); }
  .sa-outs.is-four .sa-out:nth-child(1) { transform: translateY(14px) rotate(-1.6deg); }
  .sa-outs.is-four .sa-out:nth-child(4) { transform: translateY(14px) rotate(1.6deg); }
  .sa-outs.is-two { gap: 36px; }
  .sa-outs.is-two .sa-out { width: 270px; }
}

/* ---------- Instagram: the night becomes the picture and the caption ---------- */
.sa-night {
  width: 100%; max-width: 540px; justify-self: center; margin-inline: 0; background: var(--balise-white); border: 1px solid var(--balise-line);
  border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(16, 49, 43, 0.35); padding: 14px; display: grid; gap: 12px;
}
.sa-roll { display: flex; align-items: center; gap: 6px; margin: 0; }
.sa-roll-label { margin-right: 4px; font: 600 10.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--balise-clay); white-space: nowrap; }
.sa-roll img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.sa-roll-arrow { margin-left: auto; font: 600 18px/1 var(--sans); color: var(--balise-gold); }
.sa-made-pair { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; align-items: stretch; }
.sa-made-pair .sa-frame { border-radius: 16px; align-self: start; width: 100%; min-width: 0; } /* stretched to the caption's height, the 9:16 frame grew wider than its column and covered the caption */
.sa-caption {
  display: grid; align-content: start; gap: 8px; margin: 0; padding: 12px 13px; border-radius: 16px;
  background: var(--balise-paper-raised); border: 1px solid var(--balise-line); min-width: 0;
}
.sa-cap-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; min-width: 0; margin: 0; font: 600 11px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--balise-muted); }
.sa-cap-head em { font-style: normal; color: var(--balise-clay); }
.sa-caption blockquote { margin: 0; font: 14px/1.45 var(--sans); color: var(--balise-ink); white-space: pre-line; }
.sa-caption blockquote:lang(ja) { word-break: keep-all; overflow-wrap: anywhere; }
.sa-caption .sa-mini { display: flex; gap: 3px; flex-wrap: wrap; }
.sa-caption .sa-mini img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.sa-made-pair .sa-t { bottom: 16px; }
.sa-made-pair .sa-t b { font-size: clamp(17px, 4.6vw, 23px); }
#ig-title, #x-title { font-size: clamp(40px, 5.4vw, 74px); }
#ig-title:lang(ja), #x-title:lang(ja) { font-size: clamp(30px, 3.6vw, 52px); }
.sa-you { justify-self: start; margin: 2px 0 0; padding: 7px 12px; border-radius: 99px; background: var(--balise-evergreen); color: var(--balise-white); font: 600 13px/1 var(--sans); }
.sa-note { margin: 0; font: 14px/1.45 var(--sans); color: var(--balise-muted); max-width: 34em; }
.sa-note a { color: var(--balise-evergreen); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sa-note a:hover { text-decoration: underline; }
@media (max-width: 420px) {
  .sa-roll img:nth-of-type(n + 5) { display: none; }
  .sa-caption blockquote { font-size: 13px; }
}

/* ---------- /ai: the Ask box as a Claude chat ---------- */
.sa-chat {
  position: relative; width: 100%; max-width: 540px; justify-self: center; margin: 0;
  background: #f4f1ea; color: #2b2b2b; border: 1px solid #e3ddd0; border-radius: 26px;
  box-shadow: 0 30px 60px -30px rgba(16, 49, 43, 0.35); padding: 16px 16px 18px; display: grid; gap: 10px;
}
.sa-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 2px; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--balise-muted); }
.sa-chat-head span { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 12px; }
.sa-msg { margin: 0; font: 15px/1.4 var(--sans); padding: 10px 13px; border-radius: 16px; max-width: 90%; }
.sa-msg:lang(ja) { line-break: strict; overflow-wrap: anywhere; }
.sa-me { justify-self: end; background: #e6e0d3; }
.sa-ai { background: #fff; border: 1px solid #e3ddd0; }
.sa-ai small { display: block; margin-top: 4px; color: #6b6b6b; font-size: 12.5px; }
.sa-tool { display: flex; align-items: center; gap: 7px; margin: 0; font: 500 12px/1.3 var(--mono); color: var(--balise-muted); }
.sa-tool i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--balise-gold); }
.sa-approve {
  justify-self: start; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border-radius: 14px;
  background: var(--balise-evergreen); color: var(--balise-white); font: 600 13px/1.3 var(--sans);
}
.sa-approve img { width: 22px; height: 22px; border-radius: 6px; background: var(--balise-white); padding: 2px; }
.sa-approve small { display: block; font-weight: 400; opacity: 0.8; font-size: 11.5px; }
.sa-shot { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--balise-stage); }
.sa-shot img { object-position: 50% 45%; }
.sa-shot img { width: 100%; height: 100%; object-fit: cover; }
.sa-shot figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; color: #fff; font: 600 13px/1.3 var(--sans); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.sa-shot figcaption small { display: block; font: 500 11.5px/1.3 var(--mono); opacity: 0.9; }
@media (min-width: 900px) {
  .sa-msg { font-size: 16px; }
}
/* The whole exchange is there on first paint — question, approval, answer and
   photo — so the chat never reads as empty or broken. With motion allowed, the
   approval pulses once to draw the eye; reduced motion keeps it still. */
@media (prefers-reduced-motion: no-preference) {
  .sa-chat .sa-approve { animation: sa-ok 1.4s ease-out 0.8s 1; }
}
@keyframes sa-ok { from { box-shadow: 0 0 0 0 rgba(238, 162, 63, 0.75); } to { box-shadow: 0 0 0 10px rgba(238, 162, 63, 0); } }

/* /ai: laptop visitors get the QR code beside the hero badge (wide screens only;
   .ha-qr is hidden below 1024 px in home-ask.css). */
.sa-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sa-badge-row .ha-qr { color: var(--balise-muted); max-width: 16em; }
.sa-badge-row .ha-qr span { flex: 1; min-width: 8em; }
.sa-badge-row .ha-qr img { width: 64px; height: 64px; box-shadow: 0 0 0 1px var(--balise-line); }

/* ---------- payoff visuals (inside .ha-card .ha-vis) ---------- */
.sa-vis-pad { padding: 16px; height: 100%; display: grid; align-content: center; gap: 10px; background: #f4f1ea; color: #2b2b2b; }
.sa-vis-pad .sa-msg { font-size: 14px; }
.sa-sheet { background: #fff; border-radius: 16px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.35); }
.sa-sheet p { margin: 0; font: 14px/1.35 var(--sans); }
.sa-sheet b { font-weight: 700; }
.sa-sheet .sa-sheet-row { display: flex; gap: 4px; }
.sa-sheet .sa-sheet-row img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.sa-btns { display: flex; gap: 8px; }
.sa-btns span { flex: 1; text-align: center; padding: 8px; border-radius: 10px; font: 600 13px/1 var(--sans); background: #eee9de; }
.sa-btns span.is-yes { background: var(--balise-evergreen); color: var(--balise-white); }
.sa-with-pic { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.sa-with-pic img { width: 44px; height: 56px; border-radius: 6px; object-fit: cover; }
.sa-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sa-list li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 6px 8px; font: 13.5px/1.25 var(--sans); }
.sa-list li img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; }
.sa-list li small { display: block; color: #6b6b6b; font-size: 11.5px; }

/* ---------- the specifics, below the fold ---------- */
.sa-more { padding: 56px 0 8px; }
.sa-more-head { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sa-more-head h2 { margin: 6px 0 0; font: 700 clamp(26px, 3.4vw, 40px)/1.06 var(--serif); letter-spacing: -0.02em; color: var(--balise-evergreen); }
.sa-more-head .kicker { margin: 0; }

/* ---------- a campaign page's own bar and foot (/instagram, /ja/x) ---------- */
.sa-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter) 4px; }
.sa-bar .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--balise-evergreen); font: 700 18px/1 var(--serif); }
.sa-bar small { font: 12px/1.3 var(--sans); color: var(--balise-muted); }
/* The same App Store button as every other page's top bar; on a phone it
   takes the place of the iPhone line, which the close repeats. */
.sa-bar .btn-nav { margin-left: auto; }
@media (max-width: 599px) { .sa-bar small { display: none; } }
/* The campaign foot is the page's only language switch: 14 px, every link 44 px
   tall (review of 30 September 2026); the padding gives back what the taller
   links take. */
.sa-foot { display: flex; flex-wrap: wrap; gap: 0 18px; max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter) 18px; font: 14px/1.4 var(--sans); color: var(--balise-muted); }
.sa-foot a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.sa-foot a:hover { text-decoration: underline; }
.sa-voice { margin: 8px 0 0; font: 14px/1.45 var(--sans); color: var(--balise-ink); max-width: 34em; }
.sa-voice b { font-weight: 650; color: var(--balise-evergreen); }
.sa-note:lang(ja), .sa-src:lang(ja), .sa-mark:lang(ja), .sa-voice:lang(ja) { word-break: keep-all; overflow-wrap: anywhere; }
.sa-foot-note { margin: 14px 0 0; font: 13px/1.45 var(--sans); color: var(--balise-muted); }
.ha-then .sa-premium { margin-top: 18px; color: rgba(255, 252, 245, 0.6); }
.ha-sub b { font-weight: 600; color: var(--balise-evergreen); }
/* The Article reads top to bottom: fixed words, the photo takes what is left.
   When a phone leaves too little, the cover and the inline photo give way
   before the words do — the title and both paragraphs always show. */
.sa-article .sa-art-cover { flex: 0 1 34%; height: auto; min-height: 56px; }
.sa-article .sa-art-body { display: flex; flex-direction: column; flex: 1 0 auto; }
.sa-article .sa-art-pic { flex: 1 1 0; min-height: 32px; aspect-ratio: auto; }
@media (max-width: 359px) { .sa-article .sa-art-pic { min-height: 0; } }
.sa-article .sa-art-body > p, .sa-article .sa-art-body > h3, .sa-article .sa-art-body > .sa-by { flex: none; }
/* Two outputs side by side (/ja/x): wider frames on a phone, as on a desktop. */
@media (max-width: 899px) { .sa-outs.is-two .sa-out { width: min(74vw, 270px); } }

/* /ai sits in the older .shell (a centred column with its own gutter); its
   hero and bands are the homepage's, so the shell steps aside and the page
   lines up with the top bar like /creators and /instagram (visual QA,
   29 September 2026). */
.shell:has(> .pg-ai) { max-width: none; padding: 0; }
.shell > .pg-ai { padding: 0; }
.pg-ai .ha-hero h1 { margin: 4px 0 0; font-weight: 700; font-size: clamp(40px, 5.4vw, 74px); line-height: 0.98; }
.pg-ai .ha-hero h1:lang(ja) { font-size: clamp(36px, 4vw, 58px); line-height: 1.12; }

/* Payoff cards on /creators (polish round 2): the draft fills its panel — the
   words, then the night's photos in a row — and each card is as tall as what
   it holds, so no card carries an empty band. */
.ha-vis:has(> .sa-vis-pad > .sa-caption) .sa-vis-pad { align-content: stretch; }
.sa-vis-pad > .sa-caption { align-content: space-between; gap: 12px; padding: 14px 15px; }
.sa-vis-pad > .sa-caption blockquote { font: 400 16px/1.5 var(--serif); }
.sa-vis-pad > .sa-caption .sa-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.sa-vis-pad > .sa-caption .sa-mini img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.sa-wide ~ .ha-then .ha-cards { align-items: start; }

/* /instagram, Found (polish round 2): the answer is the photo itself, with
   its place on it, like every other answer card — not a word in a white box. */
.sa-vis-pad:has(> .sa-answer) { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.sa-vis-pad > .sa-answer { position: relative; display: block; width: 100%; max-width: none; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: var(--balise-stage); }
.sa-vis-pad > .sa-answer img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: 50% 35%; }
.sa-vis-pad > .sa-answer::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(8, 28, 23, 0.8)); }
.sa-vis-pad > .sa-answer span { position: absolute; left: 14px; right: 14px; bottom: 11px; z-index: 1; color: var(--balise-white); font: 700 22px/1.1 var(--serif); }
/* The draft beside the 9:16 picture is as tall as its words, and its label
   keeps to two lines on a phone. */
.sa-made-pair .sa-caption { align-self: start; }
@media (max-width: 480px) {
  .sa-made-pair { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
  .sa-cap-head { letter-spacing: 0.05em; }
  .sa-cap-head > * { white-space: nowrap; }
  .sa-cap-head:lang(ja) > * { white-space: normal; }
}
/* The campaign foot: the operator line on its own row, the languages together. */
.sa-foot > span { flex-basis: 100%; order: 1; }