/* The film: the short pass at the top of /demo, on the conference pages and on the full site.
   Split out of demo.css so the conference page can load it without the long version's styles
   or the site's own stylesheet. It needs the tokens (--text, --flare, --rule …) from whichever
   of styles.css or summit.css the page loads. */
/* ═══════════════════════════════════════════════════════════════════════════
   THE PASS — about fifteen seconds of it
   Somebody scanned a code and is standing up in a loud room. Three asks, each answered by the thing
   assembling, then a question of their own. Very little text, because there is no time to read: the
   figures count up, the drawing draws, and the map paints.
   ═══════════════════════════════════════════════════════════════════════════ */
.film{margin:0 0 clamp(1.5rem,5vw,2.5rem)}
.film[hidden]{display:none!important}

/* The ask, typed. Mono, because it is a thing said to a machine. */
.film-ask{margin:0 0 .9rem;font-family:var(--mono);font-size:clamp(.95rem,4.2vw,1.35rem);
  line-height:1.4;color:var(--text);min-height:2.6em;display:flex;gap:.5rem;align-items:baseline}
.film-prompt{color:var(--flare);flex:none}
/* one line, sized to fit (demo-film.js); if it truly cannot, it wraps rather than being cut off */
.film-ask-text{min-width:0;overflow-wrap:anywhere}
.film-ask{max-width:100%}
.film-caret{display:inline-block;width:.55em;height:1.05em;background:var(--flare);flex:none;
  transform:translateY(.12em)}
@media (prefers-reduced-motion:no-preference){
  .film-caret{animation:film-blink 1s steps(2,start) infinite}
  .film-caret-done{animation-duration:2.2s}
}
@keyframes film-blink{50%{opacity:0}}
html[data-motion="reduce"] .film-caret{animation:none}

/* The stage. One shape whatever is in it, so the page does not jump between acts. */
.film-scene{position:relative;background:#0B0C10;border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;min-height:clamp(13rem,46vw,20rem);display:flex;align-items:center;
  justify-content:center;padding:clamp(.6rem,2vw,1rem)}
@media (min-width:52rem){.film-scene{min-height:23rem}}

.film-plan{display:block;width:100%;height:auto;max-height:clamp(14rem,50vw,21rem)}
.film-elev{max-height:clamp(13rem,58vw,22rem)}

/* The field map: a canvas, because 1681 cells is a raster, not a thousand rectangles. */
.film-map{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}
.film-canvas{display:block;width:min(100%,clamp(12rem,44vw,19rem));height:auto;aspect-ratio:1;
  border-radius:10px;image-rendering:pixelated;box-shadow:0 0 0 1px var(--rule),
  0 0 44px rgba(255,122,26,.22)}
.film-map-cap{margin:0;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
  color:var(--muted);text-align:center}
.film-map-cap strong{color:var(--glow);font-weight:600}
.film-cap-sm{font-size:.66rem;letter-spacing:.03em}
.film-key{display:flex;gap:.8rem;margin:0;padding:0;list-style:none;font-size:.7rem;color:var(--muted)}
.film-key li{display:flex;align-items:center;gap:.3rem}
.film-key i{width:12px;height:12px;border-radius:3px;display:block}
.film-key-lo{background:#0B0C10;box-shadow:inset 0 0 0 1px var(--rule)}
.film-key-hi{background:#FFC882}

/* The website, drawn by the real renderer (with the real site stylesheet, assets/site.css), in a
   browser window so it reads as a website at a glance, and dropped in a section at a time. */
.film-browser{width:100%;border-radius:12px;overflow:hidden;background:#FFFCF8;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 60px rgba(0,0,0,.55),0 0 90px rgba(255,122,26,.25)}
.film-chrome{display:flex;align-items:center;gap:.3rem;padding:.42rem .55rem;background:#1A1C22;
  border-bottom:1px solid #2A2E38}
.film-light{display:block;width:.45rem;height:.45rem;border-radius:50%;background:#3A3F4B;flex:none}
.film-url{flex:1 1 auto;min-width:0;margin-left:.35rem;font:500 .66rem/1.2 var(--mono);
  letter-spacing:.02em;color:#A7ADB8;background:#0F1115;border-radius:999px;padding:.28rem .7rem;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.film-site{width:100%;height:clamp(12.5rem,46vw,19rem);overflow:hidden;background:#FFFCF8}
.film-site-in{transform:scale(.62);transform-origin:top left;width:161.3%}
.film-in{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:no-preference){
  .film-in{transition:opacity 300ms ease,transform 300ms cubic-bezier(.22,1,.36,1)}
}
.film-in-on{opacity:1;transform:none}
html[data-motion="reduce"] .film-in{opacity:1;transform:none;transition:none}

/* The figures. These are the point: big, counted up, and never more than four. */
.film-facts{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.film-fact{display:flex;flex-direction:column;min-width:4rem}
.film-fact .n{font-family:var(--mono);font-size:clamp(1.4rem,6vw,2rem);line-height:1;
  color:var(--glow);font-variant-numeric:tabular-nums}
.film-fact .l{font-size:.72rem;line-height:1.35;color:var(--muted);margin-top:.25rem;max-width:11rem}
.film-fact-ok .n{color:#5FD39A}
.film-note{flex:1 1 100%;margin:.4rem 0 0;font-size:.82rem;line-height:1.5;color:var(--muted);
  border-left:2px solid var(--rule-lit);padding-left:.6rem}
.film-note-ok{border-left-color:#5FD39A}
.film-note-warn{border-left-color:var(--glow);color:var(--text)}

/* Their turn. */
.film-your-turn{width:100%;display:grid;gap:.75rem;padding:clamp(.5rem,2vw,1rem)}
.film-q{margin:0;font-size:clamp(1.2rem,5vw,1.7rem);line-height:1.2;font-weight:650;color:var(--text)}
.film-form{display:grid;gap:.6rem}
.film-form textarea{width:100%;background:#0B0C10;color:var(--text);border:1px solid var(--rule);
  border-radius:10px;padding:.7rem .8rem;font:inherit;font-size:16px;resize:vertical;line-height:1.5}
.film-form textarea:focus{outline:2px solid var(--flare);outline-offset:1px;border-color:var(--flare)}
.film-form .btn{min-height:var(--target-comfort,3rem);justify-self:start}
.film-q-note{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted)}
/* What Tesryn takes from their words (demo-film.js readingPanel): Tesryn Signal's parts rail. signal-fx.js runs
   current down any .concept-parts, 7px in from its left, and arcs into each part 21px from its top, so the rail and
   each part's terminal keep Signal's own measurements. */
.film-read{display:grid;gap:.55rem;margin:.35rem 0 0;padding:.9rem 1rem 1rem;border:1px solid var(--rule);
  border-radius:14px;background:rgba(255,122,26,.03);min-width:0}
.film-read[hidden],.film-parts[hidden]{display:none!important}
.film-read-k{margin:0;font:600 .72rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--flare)}
.film-read-lede{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted)}
.film-read-fine{margin:0;font-size:.74rem;line-height:1.45;color:var(--muted)}
.film-read-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.film-read .concept-parts{position:relative;list-style:none;margin:0;padding:0 0 0 1.5rem;display:flex;
  flex-direction:column;gap:.6rem}
.film-read .concept-parts::before{content:"";position:absolute;left:.4rem;top:.9rem;bottom:.9rem;width:2px;
  background:linear-gradient(180deg,var(--deep),var(--flare) 50%,var(--deep));box-shadow:0 0 10px rgba(255,122,26,.55)}
.film-read .concept-part{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:.7rem .85rem;
  border:1px solid var(--rule-lit);border-radius:12px;background:var(--panel);min-width:0}
.film-read .concept-part::before{content:"";position:absolute;left:calc(-1.1rem - 5px);top:1.05rem;width:10px;
  height:10px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px rgba(255,180,84,.9)}
.film-part-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.film-read .concept-part-name{font-weight:650;font-size:1rem;line-height:1.35;color:var(--text)}
.film-part-why{font-size:.85rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.film-part-yours .film-part-why{color:var(--glow)}
.film-part-hit{font-weight:600;color:var(--glow)}
.film-part-off{flex:none;min-width:2.5rem;min-height:2.5rem;margin:-.6rem -.6rem -.4rem 0;border:0;border-radius:8px;
  background:none;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.film-part-off:hover{color:var(--text);background:rgba(255,255,255,.06)}
.film-part-off:focus-visible{outline:2px solid var(--glow);outline-offset:1px}
.film-part-new{animation:film-part-land .45s ease-out both}
@keyframes film-part-land{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.film-read-add summary{cursor:pointer;font-size:.85rem;color:var(--muted);min-height:2.5rem;display:flex;
  align-items:center;width:max-content;max-width:100%}
.film-read-add summary:hover{color:var(--text)}
.film-read-add summary:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.film-read-add-list{list-style:none;margin:.2rem 0 .1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
/* With the living layer on the current is drawn, so the round stand-ins go, as in Signal. */
body.fx-on .film-read .concept-parts::before{opacity:.35;box-shadow:none}
body.fx-on .film-read .concept-part::before{width:7px;height:7px;left:calc(-1.1rem - 3.5px);top:calc(1.05rem + 2px);
  border-radius:1px;transform:rotate(45deg);background:var(--flare);box-shadow:0 0 6px rgba(255,122,26,.8)}
@media (prefers-reduced-motion:reduce){.film-part-new{animation:none}}
html[data-motion="reduce"] .film-part-new{animation:none}
.film-ways{display:grid;gap:.5rem;margin:.3rem 0 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.film-ways > .film-way-demo:last-child:nth-child(odd){grid-column:1 / -1}
/* Say it live goes first and full width (it is the one that answers back); the rows under it pair up as before. */
.film-ways > .film-way-live{grid-column:1 / -1;border-color:var(--flare)}
.film-ways:has(> .film-way-live) > .film-way-demo:last-child:nth-child(odd){grid-column:auto}
.film-ways:has(> .film-way-live) > .film-way-demo:last-child:nth-child(even){grid-column:1 / -1}
.film-way{display:grid;gap:.1rem;text-decoration:none;background:var(--panel);
  border:1px solid var(--rule);border-radius:11px;padding:.65rem .8rem;
  min-height:var(--target-comfort,3rem);align-content:center}
.film-way:hover{border-color:var(--flare)}
.film-way-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.film-way-v{font-size:.95rem;font-weight:600;color:var(--text);overflow-wrap:break-word}
.film-way-s{font-size:.75rem;line-height:1.4;color:var(--muted)}

/* Where you are, and how to get out of it. */
.film-bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.9rem 0 0}
/* The dots give way before the page does: at 320 px with the text doubled, four fixed 2.75rem
   targets were wider than the screen. They shrink to share the row, never below 1.5rem. */
.film-dots{display:flex;gap:.4rem;margin:0;padding:0;flex:1 1 auto;min-width:0}
.film-dot{flex:1 1 0;max-width:var(--target-min,2.75rem);min-width:1.5rem;height:1.6rem;padding:0;
  border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.film-dot::before{content:"";width:min(1.6rem,100%);height:3px;border-radius:2px;background:var(--rule)}
.film-dot-on::before{background:var(--flare)}
.film-controls{display:flex;gap:.9rem;flex-wrap:wrap;margin-left:auto}
.film-ctrl{background:none;border:0;padding:.4rem 0;cursor:pointer;font:600 .82rem/1.3 var(--sans);
  color:var(--flare);text-decoration:none;min-height:var(--target-min,2.75rem);
  display:inline-flex;align-items:center}
.film-ctrl-quiet{color:var(--muted)}
.film-ctrl:hover{color:var(--glow)}

/* The long version, for whoever wants it, behind one line. */
.everything{margin:clamp(1.5rem,5vw,2.5rem) 0 0;border-top:1px solid var(--rule);padding-top:1.2rem}
.everything>summary{cursor:pointer;color:var(--flare);font-weight:600;font-size:.94rem;
  min-height:var(--target-min,2.75rem);display:flex;align-items:center;gap:.5rem}
.everything>summary::marker{color:var(--muted)}
.everything-note{margin:.3rem 0 1rem;font-size:.82rem;line-height:1.55;color:var(--muted)}

/* ── the current, behind the stage ──────────────────────────────────────────
   assets/signal-fx.js draws Signal's field lines and lightning on two fixed canvases and finds its
   anchors by rect: .present-plate is the source of the field, .fx-mark is a box the T is drawn in.
   The stage carries the first, so the current comes out of whatever is being built. The plate's own
   look (white paper, breathing glow) lives in onboard-screen.css and is deliberately NOT loaded
   here: this page wants the electricity, not the card. */
.fx-layer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
body.fx-on .demo-page-content,body.fx-on main{position:relative;z-index:1}
/* Decoration never sits under type (CLAUDE.md): the current streams out of the stage in every direction, the ask
   just above it included. The ask stands on the page's own ground, faded at the edges, so the lines part round it. */
/* The ground is a layer the element's own size, behind it, with a soft shadow in the page's colour: a shadow never
   widens the page, so nothing scrolls sideways (a wider layer did, by 19 px, 2026-09-26), and the element keeps its
   own look. The title is ground by its wrapper (.summit-head): its lettering is a gradient clipped to the text, and a
   layer inside it would cover that. */
body.fx-on :is(.film-ask,.film-controls,.summit-head,.everything>summary){position:relative;isolation:isolate}
body.fx-on :is(.film-ask,.film-controls,.summit-head,.everything>summary)::before{content:"";position:absolute;
  inset:0;z-index:-1;pointer-events:none;background:var(--void);box-shadow:0 0 1.4rem .9rem var(--void)}
.film-scene{z-index:1}

/* What the effects layer adds when something lands. */
/* The flash, on a halo behind the stage (demo-film.js puts it there): only its opacity moves, which
   a phone composites without repainting the stage or anything in it. */
.film-stage{position:relative}
.film-halo{position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:0;will-change:opacity;
  box-shadow:0 0 0 3px rgba(255,240,220,.85),0 0 110px 36px rgba(255,150,60,.6)}
.film-stage:has(.plate-boom) .film-halo{animation:film-halo-boom 1.5s cubic-bezier(.16,.9,.25,1)}
.film-stage:has(.plate-pulse) .film-halo{animation:film-halo-pulse 1.1s ease-in-out}
@keyframes film-halo-boom{0%{opacity:1}35%{opacity:.5}100%{opacity:0}}
@keyframes film-halo-pulse{45%{opacity:.42}100%{opacity:0}}
html[data-motion="reduce"] .film-halo{animation:none!important}
@media (prefers-reduced-motion:reduce){.film-halo{animation:none!important}}
/* Where there is no halo (a page older than it), the stage's own flash, as before. */
.film-scene.plate-boom{animation:film-boom 1.5s cubic-bezier(.16,.9,.25,1)}
.film-scene.plate-pulse{animation:film-pulse 1.1s ease-in-out}
.film-stage .film-scene.plate-boom,.film-stage .film-scene.plate-pulse{animation:none}
@keyframes film-boom{
  0%{box-shadow:0 0 0 3px rgba(255,240,220,.9),0 0 120px 40px rgba(255,150,60,.75);transform:scale(1.012)}
  35%{box-shadow:0 0 0 10px rgba(255,170,80,.22),0 0 80px 20px rgba(255,122,26,.5);transform:none}
  100%{box-shadow:none;transform:none}
}
@keyframes film-pulse{45%{box-shadow:0 0 0 6px rgba(255,150,60,.16),0 0 60px 14px rgba(255,122,26,.4)}}
html[data-motion="reduce"] .film-scene.plate-boom,
html[data-motion="reduce"] .film-scene.plate-pulse{animation:none}
@media (prefers-reduced-motion:reduce){
  .film-scene.plate-boom,.film-scene.plate-pulse{animation:none}
}

/* ── louder ─────────────────────────────────────────────────────────────────
   It is an advertisement: the figures are the headline, the field glows, and a number that has just
   landed says so. None of this touches what the numbers are or the scale they are drawn on. */
.film-fact .n{font-size:clamp(1.9rem,8.5vw,3rem);letter-spacing:-.02em;
  text-shadow:0 0 26px rgba(255,180,84,.45)}
.film-fact-ok .n{text-shadow:0 0 26px rgba(95,211,154,.4)}
@media (prefers-reduced-motion:no-preference){
  .film-fact{animation:film-land 520ms cubic-bezier(.22,1,.36,1) both}
}
@keyframes film-land{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html[data-motion="reduce"] .film-fact{animation:none}

.film-canvas{width:min(100%,clamp(13rem,50vw,21rem));
  box-shadow:0 0 0 1px var(--rule-lit),0 0 70px rgba(255,122,26,.42),0 0 160px rgba(255,122,26,.18)}
.film-scene{background:radial-gradient(120% 120% at 50% 0%,#12141A 0%,#0B0C10 62%)}
.film-plan{filter:drop-shadow(0 0 14px rgba(255,122,26,.45))}
.film-ask{text-shadow:0 0 24px rgba(255,122,26,.2)}

/* The magnetics act: the head drawn from its CAD parameters, and the field inside its gap on two
   canvases over exactly the square the drawing zooms into. */
.film-mag{position:relative;width:min(100%,19rem);aspect-ratio:1;margin:0 auto}
.film-mag-cad{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
  filter:drop-shadow(0 0 10px rgba(255,122,26,.35))}
.film-field{position:absolute;inset:0;opacity:0;border-radius:10px;overflow:hidden;will-change:opacity;
  box-shadow:0 0 0 1px var(--rule-lit),0 0 70px rgba(255,122,26,.42),0 0 160px rgba(255,122,26,.18)}
.film-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Two designs, side by side, on one scale. */
.film-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,2.5vw,1.1rem);width:100%;
  align-items:end}
.film-pane{margin:0;display:grid;gap:.45rem;justify-items:center;min-width:0}
.film-canvas-sm{width:100%;max-width:13rem}
.film-pane-cap{display:grid;gap:.1rem;justify-items:center;text-align:center}
.film-pane-name{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--glow)}
.film-pane-num{font-family:var(--mono);font-size:.72rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.film-scene:has(.film-pair){flex-direction:column;gap:.5rem}

/* ── the end card ───────────────────────────────────────────────────────────
   The question is the headline; the examples are a thumb's worth of start; the ways on are two
   cards and a line. .demo-page section h2/p would otherwise repaint these, so they are stated. */
.demo-page .film-q{margin:0;font-size:clamp(1.35rem,6vw,2rem);line-height:1.15;font-weight:700;
  color:var(--text);letter-spacing:-.01em}
.film-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.film-chip{font:600 .8rem/1.2 var(--sans);color:var(--text);background:rgba(255,255,255,.04);
  border:1px solid var(--rule-lit);border-radius:999px;padding:.5rem .8rem;cursor:pointer;
  min-height:2.5rem}
.film-chip:hover{border-color:var(--flare)}
.film-chip[aria-pressed="true"]{background:var(--flare);border-color:var(--flare);color:#0A0B0D}
.film-chip:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.film-go{justify-self:stretch;width:100%}
@media (min-width:36rem){.film-go{justify-self:start;width:auto}}
.demo-page .film-q-note{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted)}
.film-way-v{font-size:.92rem}
.film-way-s{overflow-wrap:anywhere}
.demo-page .film-links{margin:.2rem 0 0;display:flex;flex-wrap:wrap;gap:0 1.4rem;align-items:center;
  font-size:.85rem;color:var(--muted)}
.film-links a{color:var(--flare);font-weight:600;text-decoration:none;min-height:2.75rem;
  display:inline-flex;align-items:center}
.film-links a:hover{color:var(--glow);text-decoration:underline}
/* styles.css gives a form a top margin for the long pages; here the question sits right on it. */
.film-form{margin:0}

/* Act 3, abstract like the other two: one canvas over the whole stage. */
.film-web{position:absolute;inset:0}
.film-web-cv{display:block;width:100%;height:100%}

/* Replay: on the drawing, once it has played. */
.film-replay{position:absolute;top:.6rem;right:.6rem;z-index:5;display:inline-flex;align-items:center;gap:.4rem;
  min-height:2.6rem;padding:.45rem .95rem;border-radius:999px;background:rgba(18,21,28,.9);
  border:1px solid rgba(255,138,51,.75);box-shadow:0 0 18px rgba(255,122,26,.35);color:#FFD2A6;
  font:650 .8rem/1 var(--sans);cursor:pointer;opacity:0;transform:translateY(-4px)}
.film-replay-i{font-size:1.05rem;line-height:1}
.film-replay.film-replay-on{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){.film-replay{transition:opacity .3s ease,transform .3s ease}}
html[data-motion="reduce"] .film-replay{transition:none}
.film-replay:hover{border-color:#FF8A33;color:#FFF}
.film-replay:focus-visible{outline:2px solid var(--flare);outline-offset:2px}

/* The last drawing waits: a pill at its foot to move on, and the drawing itself takes the tap. */
.film-continue{display:inline-flex;align-items:center;gap:.45rem;
  min-height:2.75rem;padding:.5rem 1.1rem;border-radius:999px;background:#FF7A1A;border:0;color:#140B04;
  font:700 .88rem/1 var(--sans);cursor:pointer;box-shadow:0 0 0 1px rgba(255,170,90,.6),0 0 26px rgba(255,122,26,.55);
  opacity:0;transform:translateY(6px)}
.film-continue-i{font-size:1.05rem;line-height:1}
.film-continue.film-continue-on{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .film-continue{transition:opacity .35s ease,transform .35s ease}
  .film-continue.film-continue-on{animation:film-nudge 1.8s ease-in-out .6s infinite}
}
@keyframes film-nudge{0%,100%{box-shadow:0 0 0 1px rgba(255,170,90,.6),0 0 26px rgba(255,122,26,.55)}
  50%{box-shadow:0 0 0 1px rgba(255,190,120,.9),0 0 40px rgba(255,122,26,.85)}}
html[data-motion="reduce"] .film-continue{transition:none;animation:none}
.film-continue:focus-visible{outline:2px solid #FFF;outline-offset:3px}
.film-scene:has(.film-continue){cursor:pointer}

.film-facts:empty{display:none}
/* five parts now: the dots share the row and shrink before the row can push the page sideways */
.film-dots .film-dot{flex:0 1 3rem;min-width:.9rem}

/* The last card on a laptop or a desk, on the conference page and the full site alike: the question
   and the examples across the top, one row; what to build on the left; on the right the ways to keep
   in touch, one above the other. Its type grows with the screen. */
@media (min-width:62rem){
  .demo-page .film-your-turn{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    grid-template-areas:"q q" "chips chips" "form ways";column-gap:clamp(1.5rem,3vw,2.75rem);
    row-gap:1.1rem;align-items:start;padding:clamp(1rem,2.4vw,2.25rem)}
  .demo-page .film-q{grid-area:q;font-size:clamp(1.8rem,2.5vw,3rem)}
  .demo-page .film-chips{grid-area:chips;gap:.5rem}
  .demo-page .film-chip{font-size:clamp(.82rem,.95vw,1.1rem);padding:.6em clamp(.7rem,1vw,1.2rem);min-height:clamp(2.5rem,3.2vw,3.2rem)}
  .demo-page .film-form{grid-area:form;gap:.8rem}
  .demo-page .film-form textarea{min-height:clamp(8rem,17vh,12rem);font-size:clamp(1rem,1.05vw,1.25rem)}
  .demo-page .film-go{font-size:clamp(1rem,1.05vw,1.2rem);padding:.85em 1.5em}
  .demo-page .film-ways{grid-area:ways;grid-template-columns:minmax(0,1fr);margin:0;gap:.8rem}
  .demo-page .film-way{padding:clamp(1rem,1.3vw,1.5rem) clamp(1.1rem,1.4vw,1.6rem)}
  .demo-page .film-way-v{font-size:clamp(1.05rem,1.2vw,1.4rem)}
  .demo-page .film-way-s{font-size:clamp(.8rem,.85vw,1rem)}
  .demo-page .film-q-note{font-size:clamp(.82rem,.85vw,1rem)}
  .demo-page .film-links{grid-column:1/-1}
}
/* a card's small line breaks evenly, never leaving one word alone under it */
.demo-page .film-way-s{text-wrap:balance}