/* Miracue design system v2 (TEST, 28 Sept 2026): the site pages that are not tools.
   STAGING ONLY (see v2-fonts.css). Loaded after miracue.css (and notes.css, pressed.css,
   voice-demo.css or a page's own styles) together with v2-tool.css, which carries the
   shared chrome: nav, Free tools row, buttons, questions, footer. This file is the rest
   of the site. Luke, 28 Sept: "there are still pages having the old design... makes sure
   this is all changed clearly." Colours come from css/v2-tokens.css only. */

/* ---------- type: medium weight, normal tracking, never tight ---------- */
h1,h2,h3,.hero h1,.section-head h2,section h2,.note-head h1,.idx-head h1,.page-head h1{letter-spacing:0 !important;font-weight:500}
.hero h1{font-size:clamp(40px,5.6vw,64px) !important;line-height:1.1 !important;font-weight:500}
.section-head h2,section h2{line-height:1.15 !important}
h3{font-weight:600}
.lede,.standfirst,.sec-copy p,.card p,.step p,.callout p{font-weight:400}
.eyebrow,.kicker,.note-card .kicker,.sheet .eyebrow{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
.text-link{color:var(--ink);font-weight:600;text-underline-offset:4px}

/* ---------- surfaces: white cards with a line, radius 16, flat ---------- */
.card,.step,.callout,.prompt-card,.idx-item,.proof-grid figure img,.help-toc a{box-shadow:none}
.card,.step,.callout,.prompt-card,.idx-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.callout{background:var(--calm-1);border-color:transparent}
.help-toc a{background:var(--white);border:1px solid var(--line);border-radius:var(--pill)}
/* note cards: no side bar, no paper, no shadow */
.sheet,.note-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.sheet::before,.note-card::before{display:none}
a.note-card:hover,a.sheet:hover{transform:translateY(-3px);box-shadow:none;border-color:var(--field-edge)}
.note-card .read{font-family:var(--sans);letter-spacing:.04em;font-weight:700}
.prompt-bar{background:var(--calm-2);border-color:var(--line);font-family:var(--sans);letter-spacing:.04em}

/* ---------- captions: small sentence case, not spaced capitals ---------- */
figcaption,.fig figcaption,.album figcaption,.photo figcaption,.vid-meta,.vid-meta span,.stamp{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink-2)}
.album img,.photo img,.proof-grid img{border-radius:var(--r);box-shadow:none}
.vid-frame,.vid{border-radius:var(--r);overflow:hidden}

/* ---------- dark sections are ink, not paper-black ---------- */
.closing{background:var(--ink);color:var(--on-ink);border-radius:var(--r);margin:0 var(--gut,16px) 24px}
.closing h2{color:var(--on-ink)}
.closing p{color:rgba(255,255,255,.78)}
.closing .btn-light{background:var(--accent);color:var(--ink)}

/* ================= the homepage ================= */
/* The offer strip: ink with white type, the one phrase that sells in accent. */
.offer-strip{background:var(--ink) !important;color:var(--on-ink) !important}
.offer-strip b,.offer-strip strong{color:var(--accent)}
.proof-row svg{stroke:var(--ink)}
/* the product on a calm stage, as the v2 site shows it: no dark band, no gradient */
.hero-stage{background:var(--calm-2) !important;background-image:none !important;border-radius:var(--r);margin:0 var(--gut,16px) 20px !important;padding:32px 0 36px !important}
.hero-stage + *{background-image:none}
.demo-frame{box-shadow:none;border-radius:var(--r)}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .hero-stage,.closing{margin-left:0;margin-right:0;border-radius:0}
}

/* the demo sits flat on its stage */
.hero-stage .demo,.hero-stage .mqd,.hero-stage .demo-frame,.mqd{box-shadow:none !important}

/* ================= the app illustrations (how it works, pricing, help) =================
   Hand-built pictures of the app, drawn in the app's old paper tokens. They follow the
   v2 app: white cards on the tint canvas, flat, the folder tab gone, the tabs a pill
   track, the chosen take ink with a accent number, ticks ink with a accent check. */
.ui,.ui-ed,.ui-share,.ui-wb{--stock:var(--white);--folder:var(--calm-2);--folder-tab:var(--calm-2);--l-bg:var(--tint);--l-hair:var(--line);
  --l-fg:var(--ink);--l-fg-2:var(--ink-2);--l-muted:var(--ink-3)}
.ui,.ui-ed,.ui-share,.ui-wb{border:1px solid var(--line);border-radius:var(--r)}
.shot,.mockfig .shot{box-shadow:none;border-radius:var(--r)}
.ui-find,.ui-toggle,.ui-card,.ui-tile,.ui-rows,.ui-sheet{box-shadow:none !important}
.ui-find,.ui-card,.ui-rows,.ui-sheet{border:1px solid var(--line)}
.ui-card{border-radius:var(--r-m)}
.ui-card .face{-webkit-mask-image:none;mask-image:none}
.ui-card.sel{box-shadow:0 0 0 2px var(--ink) !important}
.ui-tile{border-radius:var(--r-m);background:var(--calm-2)}
.ui-tile::before{display:none}
.ui-tile[data-colour]{background:color-mix(in srgb,var(--tint) 18%,var(--white))}
.ui-tile.over{background:var(--ink)}
.ui-toggle{background:var(--calm-2)}
.ui-toggle i.on{background:var(--white);color:var(--ink)}
.ui-head .ttl{font-weight:500;letter-spacing:0}
.ui-row.next .ac i.play,.ui-new{background:var(--ink);color:var(--accent)}
.ui-new b{color:var(--accent)}
.ui-row .dt,.ui-shot .tk{border-radius:5px;border-color:var(--ink)}
.ui-row.done .dt,.ui-shot.on .tk{background:var(--ink);border-color:var(--ink);color:var(--accent)}
.ui-tabs,.ui-rail .ui-tabs{background:var(--calm-2);border:0;border-radius:var(--pill);padding:3px;gap:2px;margin:10px 12px 6px;width:max-content}
.ui-tab{padding:5px 10px;border-radius:var(--pill);box-shadow:none !important}
.ui-tab.on{background:var(--white);color:var(--ink);font-weight:700}
.ui-rail{background:var(--tint)}
.ui-take.sel,.ui-take.on{background:var(--ink);border-color:var(--ink);color:var(--accent)}
.ui-take.star{background:var(--white);border:1.5px solid var(--ink);color:var(--ink)}
.ui-player .pb{background:var(--accent);color:var(--ink)}
.ui-player .pb svg{fill:var(--ink)}
.ui-bar{background:var(--ink);border-radius:var(--r-m)}
.ui-binrow{border-color:var(--field-edge);border-radius:var(--r-m)}
.ui-rfoot b,.ui-edbar .bk,.ui-mfoot .lk{text-decoration-color:var(--field-edge)}
.ui-edbar .go{background:var(--ink);color:var(--accent);border-radius:8px}
.ui-prsheet{background:var(--ink);border:0;color:var(--on-ink)}
.ui-prsheet h5,.ui-prsheet .sl b{color:var(--on-ink)}
.ui-prsheet .sl,.ui-prsheet .pal span{color:rgba(255,255,255,.7)}
.ui-prsheet .pal.on b{outline-color:var(--accent)}

/* the free teleprompter's script box (/teleprompter/) */
.tool-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.tool-label{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.tool-label button{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-2)}
.tool textarea{background:var(--white);border:1px solid var(--field-edge);border-radius:var(--r-m);font-family:var(--sans);font-weight:400;color:var(--ink)}
.tool textarea:hover{border-color:var(--ink-3)}
.tool-label span,.tool-label > *{font-family:var(--sans) !important;letter-spacing:0 !important;text-transform:none !important}
.tool button,.tool .btn,.tool-card button{font-family:var(--sans)}

/* ================= pricing ================= */
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.plan.feature{border:2px solid var(--ink)}
.plan-price,.plan-soon{font-weight:500;letter-spacing:0}
.plan li::before{border-color:var(--ink)}
.rec{font-family:var(--sans);font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
.bill-switch{background:var(--calm-2);border:0;padding:4px}
.bill-switch button{border-radius:var(--pill);color:var(--ink)}
.bill-switch button.on{background:var(--white);color:var(--ink);font-weight:700}
.plan-quiet{color:var(--ink-2);text-decoration-color:var(--field-edge)}
.cmp-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.cmp td{border-top-color:var(--line)}
.closing .btn-out{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:var(--on-ink)}

/* palette C on the rest of the drawn app (29 Sept 2026): the settings sheet's rules,
   toggles and note, and the video call, whose tiles were v1's muted browns */
.ui-prsheet .tg{border-top-color:rgba(255,255,255,.12)}
.ui-prsheet .tg i{border-color:rgba(255,255,255,.4)}
.ui-prsheet .tg i.on,.ui-prsheet .tr::before,.ui-prsheet .tr::after{background:var(--on-ink);border-color:var(--on-ink)}
.ui-prsheet .sc i svg{stroke:var(--on-ink)}
.ui-prsheet .nt{color:rgba(255,255,255,.55)}
.callmock .call-tile{background:color-mix(in srgb, var(--ink) 90%, var(--white))!important}
.callmock .call-tile:nth-child(even){background:color-mix(in srgb, var(--ink) 84%, var(--white))!important}
.callmock .call-av{color:var(--ink)}
.callmock .t1 .call-av,.callmock .t4 .call-av{background:var(--calm-1)}
.callmock .t2 .call-av,.callmock .t5 .call-av{background:var(--calm-3)}
.callmock .t3 .call-av,.callmock .t6 .call-av{background:var(--calm-2)}
.callmock .call-name{color:var(--on-ink)}
.callmock .call-dock i{background:rgba(255,255,255,.14)}
.callmock .call-dock i.end{background:var(--danger)}
.callmock .pinned{background:var(--reading-black);border-color:rgba(255,255,255,.12)}
/* the demo caption sat in v1's cream on v2's light hero: barely legible */
.demo-cap{color:var(--ink-2)!important}
.vid-play,.vid-frame:hover .vid-play{background:var(--white)}
/* help's drawn prompter: the reading surface is black, as in the app; the zone is white */
.panel{background:var(--reading-black)}
.zone-demo{border-top-color:rgba(255,255,255,.42);border-bottom-color:rgba(255,255,255,.42)}