/* RateAnchor film pages: /go/<lead> (a carrier's own page) and /films/my-number/ (the public page the Share button sends). Nov 13, 2026.
   Design approved by the founder on the canvas "RateAnchor lead page and email options" (Nov 13, 11:36 + 12:00). Generated with gen_pages.py. */
:root{--above:150px;--deep:#070c16;--night:#0b1322;--cab:#13203a;--line:#24365a;--line2:#1a2944;--ink:#eef2f7;--muted:#8b97a8;--soft:#b9c2cf;--gold:#f3b13f;--goldink:#1a1405;--green:#2fd08a;
  --sg:"Space Grotesk",Arial,sans-serif;--body:"Instrument Sans",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--bar:0px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;overflow-x:hidden}
a{color:var(--gold)}a:hover{color:#ffd27a}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:12px;top:12px;z-index:50;background:var(--gold);color:var(--goldink);padding:8px 12px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2{font-family:var(--sg);font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:0}
h1{font-size:clamp(23px,6.4vw,30px)}h2{font-size:clamp(23px,6.6vw,28px)}
p{margin:0}
.mono{font-family:var(--mono);font-weight:700}

/* layout: one column on phones and tablets, film beside the story on wide screens */
.wrap{max-width:560px;margin:0 auto;padding:0 16px calc(var(--bar) + 24px)}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 10px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand .ra-mark{width:30px;height:30px;flex:none;filter:drop-shadow(0 0 5px rgba(243,177,63,.35))}.brand sup{font-size:9px;color:var(--muted);margin-left:1px}
.brand b{font-family:var(--sg);font-weight:700;font-size:19px}.brand b span{color:var(--gold)}
.for{font-size:13px;color:var(--muted);text-align:right;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.lede{margin:2px 0 12px}
section.s{padding:30px 0 6px;display:flex;flex-direction:column;gap:16px}
.note{font-size:13px;color:var(--muted)}

/* the film */
.player{position:relative;margin:0 auto;aspect-ratio:9/16;height:max(180px,min(calc(100svh - var(--bar) - var(--above) - 12px),calc((100vw - 32px)*16/9)));max-width:100%;border-radius:16px;overflow:hidden;background:#000;
  container-type:inline-size;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@supports not (height:1svh){.player{height:max(180px,min(calc(100vh - var(--bar) - var(--above) - 12px),calc((100vw - 32px)*16/9)))}}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player video::-webkit-media-controls{display:none!important}
.cap{position:absolute;left:4%;right:4%;bottom:21.5%;display:flex;justify-content:center;pointer-events:none;text-align:center}
.cap span{display:inline-block;background:rgba(22,26,34,.74);color:#fff;font-family:var(--body);font-weight:600;font-size:4.5cqw;line-height:1.3;padding:.32em .62em;border-radius:.5em;white-space:pre-line;max-width:100%}
.cap span:empty{display:none}
.cap .lab{color:#c4cbd6;font-weight:500}
.chip{position:absolute;left:10px;bottom:56px;display:flex;align-items:center;gap:6px;background:rgba(7,12,22,.84);border:0;border-radius:18px;padding:8px 12px;font-size:14px;font-weight:600;cursor:pointer;min-height:36px}
.chip[hidden]{display:none}
.bigplay{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;background:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.bigplay[hidden]{display:none}
.ctl{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;display:flex;align-items:center;gap:4px;background:linear-gradient(transparent,rgba(0,0,0,.72));transition:opacity .2s}
.player.idle .ctl{opacity:0}.player.idle .ctl:focus-within{opacity:1}
.ctl button{width:40px;height:40px;flex:none;border:0;border-radius:10px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ctl button[aria-pressed="true"]{background:rgba(243,177,63,.22)}
.ctl .cc{font-family:var(--mono);font-weight:800;font-size:13px;color:#fff;letter-spacing:.02em}
.ctl .cc[aria-pressed="true"]{color:var(--gold)}
.bar{flex:1;min-width:0;height:40px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.bar i{display:block;width:100%;height:4px;border-radius:2px;background:rgba(238,242,247,.3);position:relative;overflow:hidden}
.bar i b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
.endcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:rgba(7,12,22,.82);text-align:center}
.endcard[hidden]{display:none}
.endcard .t{font-family:var(--sg);font-weight:700;font-size:21px;line-height:1.15}
.player:fullscreen{width:100%;height:100%;max-width:none;border-radius:0;aspect-ratio:auto}
.player:-webkit-full-screen{width:100%;height:100%;max-width:none;border-radius:0}
.under{display:flex;justify-content:center;gap:16px;margin:10px 0 0;font-size:14px}
.linkbtn{background:none;border:0;color:var(--gold);text-decoration:underline;cursor:pointer;padding:8px 2px;min-height:40px}

/* pictures of the app */
.shot{position:relative;width:100%;border-radius:12px;overflow:hidden;background:var(--night)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot.tmap{aspect-ratio:780/590}.shot.tmap img{object-position:50% 42.8%}
.shot.qv{aspect-ratio:780/580}.shot.qv img{object-position:50% 84.5%}
.shot.call{aspect-ratio:780/700}.shot.call img{object-position:50% 12%}
.shot.disp{aspect-ratio:780/740}.shot.disp img{object-position:50% 50.6%}
.quote{background:var(--cab);border-left:3px solid var(--gold);border-radius:4px 12px 12px 4px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px}
.quote .who{font-size:14px;color:var(--soft)}
.checks{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.checks svg{flex:none;margin-top:2px}
.post{background:var(--ink);color:#0b1322;border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.post .k{font-size:11px;color:#5b6676}.post .l{font-weight:700;font-size:15px}.post .d{font-size:13px;line-height:1.3}
.post .m{font-family:var(--mono);font-weight:700;font-size:20px;flex:none}
.down{display:flex;justify-content:center;margin:-6px 0}
.items{display:flex;flex-direction:column;gap:10px}
.items div{border-top:1px solid var(--line2);padding-top:10px}
.items b{display:block;font-family:var(--sg);font-weight:600;font-size:17px}
.items span{font-size:15px;color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.chips span{background:var(--cab);border-radius:14px;padding:6px 10px}

/* the offer */
.code{background:var(--cab);border:1px dashed var(--gold);border-radius:14px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.code .c{font-size:14px;color:var(--soft);line-height:1.35}.code .c .mono{display:block;font-size:24px;color:var(--gold);overflow-wrap:anywhere}
.code .r{font-size:15px;font-weight:600;text-align:right}.code .r small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:8px 16px;border-radius:12px;text-decoration:none;font-weight:700;font-size:17px;text-align:center;cursor:pointer;border:0}
.btn.gold{background:var(--gold);color:var(--goldink)}.btn.gold:hover{background:#ffc35a;color:var(--goldink)}
.btn.dark{background:var(--cab);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:16px;min-height:48px}
.film-row{display:flex;gap:12px;align-items:center;background:var(--night);border:1px solid var(--line2);border-radius:12px;padding:8px;width:100%;text-align:left;cursor:pointer}
.film-row img{width:54px;height:72px;object-fit:cover;border-radius:8px;flex:none}
.film-row b{display:block;font-size:16px}.film-row small{font-size:13px;color:var(--muted)}
.foot{border-top:1px solid var(--line2);padding-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.foot button{background:none;border:0;padding:8px 0;min-height:40px;cursor:pointer;text-decoration:underline;color:var(--gold);font-size:14px}
.foot button.quiet{color:var(--muted)}
.legal{font-size:12px;color:var(--muted)}.legal a{color:var(--muted)}

/* the bar that stays on screen (phones and tablets) */
.dl{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--night);border-top:1px solid var(--line);padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
.dl .in{max-width:528px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.dl .btn{min-height:52px}
.dl .sub{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--soft);flex-wrap:wrap}
.dl[hidden]{display:none}
.side{display:none}

/* the confirmation sheet and the done screens */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet .box{background:var(--night);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}
.done{padding:40px 0;display:flex;flex-direction:column;gap:18px}
.done[hidden]{display:none}
.tick{width:56px;height:56px;border-radius:50%;background:var(--cab);border:1px solid var(--green);display:flex;align-items:center;justify-content:center}
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 20px);transform:translateX(-50%);z-index:45;background:var(--ink);color:var(--deep);padding:10px 16px;border-radius:10px;font-weight:600;font-size:15px}
.toast[hidden]{display:none}

/* wide screens: the film stays beside the story, and the download card replaces the bar */
@media (min-width:960px){
  .wrap{max-width:1040px;display:grid;grid-template-columns:minmax(300px,400px) minmax(0,560px);column-gap:56px;justify-content:center;padding-bottom:48px}
  header.top{grid-column:1/-1}
  .filmcol{grid-column:1;grid-row:2/span 20;align-self:start;position:sticky;top:16px}
  .story{grid-column:2}
  .player{height:min(78vh,700px);width:auto}
  .dl{display:none}
  .side{display:flex;flex-direction:column;gap:10px;background:var(--night);border:1px solid var(--line);border-radius:16px;padding:16px;margin:58px 0 6px}
  .side .btns{display:flex;gap:10px}.side .btns .btn{flex:1}
  .side .row{display:flex;gap:14px;align-items:center}
  .side canvas,.side .qr{width:112px;height:112px;flex:none;background:#fff;border-radius:8px;padding:6px}
  .side .qr svg{display:block;width:100%;height:100%}
  .toast{bottom:24px}
}
@media (orientation:landscape) and (max-height:500px){h1{font-size:20px}.lede{margin:0 0 8px}header.top{padding:8px 0 6px}.dl .sub{display:none}.dl{padding-top:8px}.dl .btn{min-height:46px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}