/* Kotari landing pages. Shared by index.html and higher-ed.html — one
   palette, one type system, one set of demo-console styles, so a second
   page for a second audience cannot drift away from the first. */
:root{
  --ink:#1a2024; --ink-soft:#3d474e; --paper:#f4f1ea; --paper-2:#ece7db;
  --line:#cfc7b5; --accent:#1f5c4d; --accent-2:#c2602f; --gold:#9a7b2e;
  --shadow:0 1px 0 rgba(26,32,36,.04),0 12px 32px -16px rgba(26,32,36,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#f4f1ea}
body{font-family:"Newsreader",Georgia,serif;color:var(--ink);background:#f4f1ea;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
header,section,nav,footer,.demo,.strip{background-color:var(--paper)}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
h1,h2,h3,.display{font-family:"Fraunces",serif;font-weight:500;line-height:1.08;letter-spacing:-.01em}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

nav{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;font-family:"Fraunces";font-size:1.32rem;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.brand small{display:block;font-family:"IBM Plex Mono";font-size:.5rem;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;font-weight:400}
.mark{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;position:relative;flex:none}
.mark::before{content:"";position:absolute;inset:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.nav-links a:hover{color:var(--accent)}
.nav-links .demo-link{color:var(--accent);font-weight:500}
.btn{display:inline-block;background:var(--accent);color:var(--paper);text-decoration:none;padding:11px 22px;border-radius:2px;font-family:"IBM Plex Mono";font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;transition:.2s;border:none;cursor:pointer}
.btn:hover{background:#17463a;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
@media(max-width:680px){.nav-links a:not(.btn){display:none}}

header{padding:84px 0 60px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.eyebrow{color:var(--accent-2);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent-2)}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem);max-width:16ch;margin-bottom:24px}
h1 em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(1.1rem,2vw,1.35rem);max-width:48ch;color:var(--ink-soft);margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.reveal{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;animation:none}}
.no-js .reveal{opacity:1;transform:none;animation:none}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}

.demo{background:var(--paper-2);color:var(--ink);padding:70px 0;border-bottom:1px solid var(--line)}
.demo .wrap{max-width:920px}
.demo-head{text-align:center;margin-bottom:14px}
.demo-head .mono{color:var(--accent-2);display:block;margin-bottom:14px}
.demo-head h2{color:var(--ink);font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:10px}
.demo-head p{color:var(--ink-soft);max-width:54ch;margin:0 auto;font-size:1.05rem}
.console{background:#fff;border:1px solid var(--line);border-radius:8px;margin-top:34px;overflow:hidden;box-shadow:var(--shadow)}
.console-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#e0604a}.dot.y{background:#e0b24a}.dot.g{background:#4aa06a}
.console-bar .who{margin-left:12px;font-family:"IBM Plex Mono";font-size:.66rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.console-body{padding:26px 26px 30px}
.demo-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.demo-tab{font-family:"IBM Plex Mono";font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:8px 15px;cursor:pointer;transition:.15s}
.demo-tab:hover{border-color:var(--accent);color:var(--accent)}
.demo-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ask-label{font-family:"IBM Plex Mono";font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.chip{background:var(--paper);border:1px solid var(--line);color:var(--ink);font-family:"Newsreader";font-size:.92rem;padding:9px 13px;border-radius:20px;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--accent);background:#fff}
.ask-row{display:flex;gap:10px}
.ask-row input{flex:1;background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:13px 15px;font-family:"Newsreader";font-size:1.02rem}
.ask-row input:focus{outline:none;border-color:var(--accent);background:#fff}
.ask-row button{background:var(--accent);color:#fff;border:none;border-radius:4px;padding:0 22px;font-family:"IBM Plex Mono";font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s}
.ask-row button:hover{background:#17463a}
.answer{margin-top:24px;min-height:20px}
.thinking{font-family:"IBM Plex Mono";font-size:.78rem;color:var(--ink-soft);letter-spacing:.05em}
.thinking span{animation:blink 1.2s infinite}
.thinking span:nth-child(2){animation-delay:.2s}.thinking span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ans-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:20px 22px;animation:rise .5s ease forwards;box-shadow:var(--shadow)}
.ans-card .a-text{color:var(--ink);font-size:1.05rem;line-height:1.65;margin-bottom:16px}
.ans-card .a-text b{color:var(--ink);font-weight:600}
.src{display:block;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:11px 14px;margin-top:8px;text-decoration:none;transition:.15s;cursor:pointer}
.src:hover{border-color:var(--gold);background:#fff}
.src .sl{font-family:"IBM Plex Mono";font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:3px}
.src .sf{color:var(--ink-soft);font-size:.92rem}
.compare{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.compare div{flex:1;min-width:170px;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:14px 16px}
.compare .lbl{font-family:"IBM Plex Mono";font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.compare .big{font-family:"Fraunces";font-size:1.5rem}
.compare .was .big{color:var(--accent-2)}
.compare .now .big{color:var(--accent)}
.demo-foot{text-align:center;margin-top:22px;font-family:"IBM Plex Mono";font-size:.64rem;letter-spacing:.06em;color:var(--ink-soft)}
/* ---- rich answer: grounded badge, data viz, documents, governance ---- */
.ans-head{margin-bottom:10px}
.grounded{font-family:"IBM Plex Mono";font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:#eaf3ef;border:1px solid var(--accent);border-radius:20px;padding:4px 11px}
.viz{margin:16px 0 4px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.viz-t{font-family:"IBM Plex Mono";font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.viz-cap{font-size:.78rem;color:#7c8288;margin-top:11px;line-height:1.45}
.t-accent,.t-now,.t-good{background:var(--accent)}.t-before{background:var(--accent-2)}.t-warn{background:var(--gold)}.t-neutral{background:#9aa1a6}
.bar{display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:10px;margin:7px 0}
.bar-l{font-size:.8rem;color:var(--ink-soft);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-tk{height:14px;background:var(--paper-2);border-radius:3px;overflow:hidden}
.bar-fl{height:100%;border-radius:3px 4px 4px 3px}
.bar-v{font-family:"IBM Plex Mono";font-size:.72rem;color:var(--ink);min-width:46px;text-align:right}
.tl{position:relative;height:60px;margin:18px 8px 6px}
.tl-line{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.tl-ev{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:100px}
.tl-dot{width:11px;height:11px;border-radius:50%;background:#9aa1a6;border:2px solid #fff;margin:3px auto 0;box-shadow:0 0 0 1px var(--line)}
.tl-ev.now .tl-dot{background:var(--accent)}.tl-ev.warn .tl-dot{background:var(--gold)}.tl-ev.before .tl-dot{background:var(--accent-2)}
.tl-l{font-family:"IBM Plex Mono";font-size:.62rem;color:var(--ink);margin-top:6px}
.tl-s{font-size:.66rem;color:#7c8288;line-height:1.25;margin-top:2px}
.meter-tk{position:relative;height:26px;background:var(--paper-2);border-radius:5px;overflow:hidden}
.meter-fl{height:100%;background:var(--accent);border-radius:5px}
.meter-lab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono";font-size:.74rem;color:#fff;letter-spacing:.04em}
.statrow{display:flex;gap:10px;flex-wrap:wrap}
.stat{flex:1;min-width:92px;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:11px 13px}
.stat-b{font-family:"Fraunces";font-size:1.35rem;color:var(--ink);line-height:1.05}
.stat.warn .stat-b{color:var(--accent-2)}.stat.good .stat-b{color:var(--accent)}
.stat-s{font-size:.7rem;color:#7c8288;margin-top:4px}
.flow2{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.fl-node{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:8px 12px}
.fn-l{font-family:"Newsreader";font-size:.86rem;color:var(--ink);font-weight:500}
.fn-s{font-size:.66rem;color:#7c8288}
.fl-ar{color:var(--accent-2);font-family:"IBM Plex Mono"}
.docs{margin-top:14px;display:grid;gap:8px}
.doc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:10px 13px;cursor:pointer;transition:.15s;text-decoration:none}
.doc:hover{border-color:var(--gold);background:#fff}
.doc-th{width:29px;height:37px;border:1px solid var(--line);border-radius:2px;background:#fff;position:relative}
.doc-th::before{content:"";position:absolute;left:5px;right:5px;top:8px;height:1px;background:var(--line);box-shadow:0 4px 0 var(--line),0 8px 0 var(--line),0 12px 0 var(--line),0 16px 0 var(--line)}
.doc-ti{display:block;font-family:"IBM Plex Mono";font-size:.73rem;color:var(--ink);word-break:break-word}
.doc-m{display:block;font-size:.75rem;color:#7c8288;margin-top:3px}
.doc-r{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.doc-g{font-family:"IBM Plex Mono";font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:3px 9px;white-space:nowrap}
.doc-open{font-family:"IBM Plex Mono";font-size:.58rem;color:var(--accent);white-space:nowrap}
.gov{margin-top:14px;background:#eef4f1;border:1px solid var(--accent);border-left:3px solid var(--accent);border-radius:6px;padding:12px 15px}
.gov-h{font-family:"IBM Plex Mono";font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.gov-c{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.gov-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-size:.73rem;color:var(--ink-soft)}
.gov-chip .gi{color:var(--accent);font-size:.8rem}
.gov-n{font-size:.77rem;color:var(--ink-soft);line-height:1.5}
@media(max-width:680px){.bar{grid-template-columns:84px 1fr auto}.tl-ev{width:76px}}

.strip{background:var(--paper-2);padding:18px 0;border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;align-items:center}
.strip span{font-family:"IBM Plex Mono";font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.strip b{color:var(--accent-2);font-weight:500}

section{padding:74px 0;border-bottom:1px solid var(--line)}
.sec-head{max-width:60ch;margin-bottom:46px}
.sec-head .mono{color:var(--accent-2);margin-bottom:16px;display:block}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:18px}
.sec-head p{color:var(--ink-soft);font-size:1.12rem}

.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.flow .cell{background:var(--paper);padding:26px 22px}
.flow .cell.lit{background:var(--paper-2)}
.flow .num{font-family:"IBM Plex Mono";font-size:.7rem;color:var(--accent-2);letter-spacing:.1em}
.flow h3{font-size:1.18rem;margin:10px 0 8px}
.flow p{font-size:.96rem;color:var(--ink-soft)}
.flow .who{margin-top:12px;font-family:"IBM Plex Mono";font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@media(max-width:760px){.flow{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:30px 26px;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.card .ic{width:38px;height:38px;border:1.5px solid var(--accent);border-radius:50%;display:grid;place-items:center;margin-bottom:18px;color:var(--accent);font-family:"Fraunces";font-size:1.1rem}
.card h3{font-size:1.22rem;margin-bottom:10px}
.card p{font-size:.98rem;color:var(--ink-soft)}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.uc{background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:26px 24px;display:flex;flex-direction:column;transition:.25s}
.uc:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.uc .ic{width:38px;height:38px;border:1.5px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);margin-bottom:16px}
.uc-k{color:var(--accent-2);font-size:.6rem;letter-spacing:.12em;margin-bottom:7px}
.uc h3{font-size:1.18rem;margin-bottom:10px}
.uc-driver{font-size:.94rem;color:var(--ink-soft);margin-bottom:16px}
.uc-q{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--line)}
.uc-q li{font-family:"Newsreader";font-style:italic;font-size:.9rem;color:var(--ink);padding:9px 0 9px 17px;position:relative;border-bottom:1px solid var(--line)}
.uc-q li::before{content:"›";position:absolute;left:0;color:var(--accent-2);font-style:normal;font-weight:600}
.uc-gov{margin-top:auto;font-family:"IBM Plex Mono";font-size:.6rem;letter-spacing:.03em;line-height:1.5;color:var(--accent);background:#eef4f1;border:1px solid var(--accent);border-radius:5px;padding:9px 11px}
.uc-cta{text-align:center;margin-top:34px}
@media(max-width:760px){.uc-grid{grid-template-columns:1fr}}

.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;padding-top:14px}
.step::before{counter-increment:s;content:counter(s);font-family:"Fraunces";font-size:2.4rem;color:var(--accent-2);opacity:.5;line-height:1}
.step h4{font-family:"Fraunces";font-size:1.1rem;margin:6px 0 6px;font-weight:500}
.step p{font-size:.92rem;color:var(--ink-soft)}
.step .t{font-family:"IBM Plex Mono";font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:8px}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:32px}}
ul.ticks{list-style:none}
ul.ticks li{padding:13px 0 13px 30px;position:relative;border-bottom:1px solid var(--line);color:var(--ink-soft)}
ul.ticks li::before{content:"→";position:absolute;left:0;color:var(--accent-2);font-family:"IBM Plex Mono"}
ul.ticks li b{color:var(--ink);font-family:"Newsreader";font-weight:500}
.aside{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;padding:34px 30px}
.aside .mono{color:var(--accent-2);margin-bottom:18px;display:block}
.aside h3{font-size:1.5rem;color:var(--ink);margin-bottom:14px}
.aside p{font-size:1rem;color:var(--ink-soft);margin-bottom:20px}
.aside .partner{border-top:1px solid var(--line);padding-top:18px;font-size:.9rem;color:var(--ink-soft)}
.aside .partner b{color:var(--ink)}

.final{text-align:center;background:var(--paper-2)}
.final h2{max-width:20ch;margin:0 auto 18px}
.final p{max-width:48ch;margin:0 auto 32px;color:var(--ink-soft);font-size:1.12rem}

footer{padding:48px 0;font-size:.86rem;color:var(--ink-soft)}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center}
.disc{max-width:64ch;font-size:.74rem;opacity:.7;margin-top:20px;font-family:"IBM Plex Mono";line-height:1.7}

.modal-bg{position:fixed;inset:0;background:rgba(26,32,36,.55);backdrop-filter:blur(3px);display:none;place-items:center;z-index:100;padding:20px}
.modal-bg.on{display:grid}
.modal{background:var(--paper);border-radius:5px;max-width:440px;width:100%;padding:38px 34px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);position:relative}
.modal h3{font-size:1.6rem;margin-bottom:8px}
.modal p{font-size:.98rem;color:var(--ink-soft);margin-bottom:22px}
.modal label{display:block;font-family:"IBM Plex Mono";font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 6px}
.modal input,.modal textarea{width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--paper-2);border-radius:2px;font-family:"Newsreader";font-size:1rem;color:var(--ink)}
.modal textarea{resize:vertical;min-height:70px}
.close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink-soft)}
.note{font-size:.74rem;color:var(--ink-soft);margin-top:16px;text-align:center}

/* ===== Mobile ===== */
@media (max-width:680px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .nav-in{padding:12px 18px}
  .brand{font-size:1.15rem}
  header{padding:48px 0 40px}
  h1{font-size:2rem;max-width:100%}
  .lede{font-size:1.05rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center}
  .demo{padding:44px 0}
  .demo-head h2,h2{font-size:1.6rem}
  .console-body{padding:18px 16px 22px}
  .ask-row{flex-direction:column}
  .ask-row button{padding:13px 0}
  .chip{font-size:.88rem;padding:8px 12px}
  section{padding:46px 0}
  .sec-head{margin-bottom:30px}
  .compare div{min-width:100%}
  .steps{grid-template-columns:1fr}
  .split{gap:26px}
  .aside{padding:26px 22px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:10px}
  .strip .wrap{gap:14px 24px}
}
@media (max-width:680px){ .nav-links{gap:0} }

/* Thirty-second film, between the promise and the interactive demo.
   It autoplays muted because no browser will do otherwise, which is also
   why the captions are burned into the picture rather than left to the
   track element. */
.film{background:var(--paper-2);border-bottom:1px solid var(--line);padding:56px 0}
.film-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.film-head h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:0}
.film-head .mono{color:var(--ink-faint)}
.film-frame{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);background:#1a2024;aspect-ratio:16/9}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover}
.film-note{margin-top:12px;color:var(--ink-faint);font-size:.9rem}
.film-sound{position:absolute;right:12px;bottom:12px;z-index:3;border:1px solid rgba(244,241,234,.35);background:rgba(26,32,36,.72);color:#f4f1ea;border-radius:999px;padding:7px 14px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.film-sound:hover{border-color:#7fbfa9;color:#7fbfa9}
@media (max-width:680px){
  .film{padding:40px 0}
  /* The burned-in caption band scales down with the video; keep the
     button off it rather than over the words. */
  .film-sound{bottom:auto;top:10px;right:10px;padding:6px 11px;font-size:.62rem}
}

/* Existing customers arrive here too, and the page had no door for them:
   every nav link pointed at an anchor on this same page. */
.nav-links .sign-in{color:var(--accent);font-weight:500;white-space:nowrap}
.nav-links .sign-in:hover{text-decoration:underline}
.foot-in .foot-sign-in{color:var(--accent);text-decoration:none}
.foot-in .foot-sign-in:hover{text-decoration:underline}
/* The page hides every non-button nav link under 680px. Sign in is the
   exception: a customer on a phone still needs the door, and it is two
   words wide. */
@media (max-width:680px){
  .nav-links a.sign-in{display:inline-block;margin-right:12px;font-size:.88rem;white-space:nowrap}
}