/* Miracue design system v2: the public site pages (29 Sept 2026, switched over from the
   design test on Luke's approval). Colours come from css/v2-tokens.css, the ONE token file
   shared with the app (palette C, Plum and Citrus). Never define a colour here; change the
   palette there.
   Rules: one typeface (no serif, no mono); headlines 400-500; radius 16; flat, no glow; motion 0.6s ease-in-out,
   nothing on scroll; the accent once per screen; the prompter reading line is never the accent. */
@import url('v2-tokens.css?v=0.39.297');
@import url('site-header.css?v=0.39.297');
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/plus-jakarta-sans-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/plus-jakarta-sans-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --r:16px;--r-s:10px;--pill:99px;--float:0 8px 48px rgba(0,0,0,.15);--ease:.6s ease-in-out;
  --wrap:1220px;--gut:clamp(20px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 16px}
b,strong{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--accent);padding:10px 14px;border-radius:var(--r-s);z-index:99}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.on-ink :focus-visible{outline-color:var(--accent)}

/* type */
.t-display{font-size:clamp(34px,4.6vw,56px);font-weight:500;line-height:1.2;letter-spacing:0;margin:0 0 18px;text-wrap:balance}
.t-h2{font-size:clamp(30px,4.2vw,56px);font-weight:500;line-height:1.2;margin:0 0 16px;text-wrap:balance}
.t-h3{font-size:clamp(26px,3.2vw,44px);font-weight:400;line-height:1.2;margin:0 0 14px;text-wrap:balance}
.t-title{font-size:clamp(24px,2.4vw,33px);font-weight:500;line-height:1.2;margin:0 0 10px}
.t-lead{font-size:clamp(18px,1.8vw,22.7px);line-height:1.35;margin:0 0 28px}
.t-small{font-size:14px;line-height:1.45}
.t-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--ink-2)}
mark{background:var(--accent);color:var(--ink);padding:0 .12em}
.center{text-align:center}.center .t-lead,.center .t-display,.center .t-h2{margin-inline:auto}
.measure{max-width:34em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;transition:opacity var(--ease),transform var(--ease),background-color var(--ease)}
.btn:hover{opacity:.9}
.btn-xl{height:72px;padding:0 40px;font-size:20px}
.btn-l{height:56px;padding:0 28px;font-size:17px}
.btn-m{height:48px;padding:0 24px;font-size:15px;font-weight:600}
.btn-s{height:36px;padding:0 14px;font-size:13.5px;font-weight:600;border-radius:var(--r-s)}
.b-ink{background:var(--ink);color:var(--accent)}
.b-accent{background:var(--accent);color:var(--ink)}
.b-out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.b-soft{background:var(--calm-2);color:var(--ink)}
.b-white{background:var(--white);color:var(--ink)}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.center .ctas{justify-content:center}
@media (max-width:560px){.btn-xl{height:64px;padding:0 28px;font-size:18px;width:100%}}

/* nav: css/site-header.css, the one header every public page wears (imported above) */

/* sections */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-tight{padding-block:clamp(36px,5vw,56px)}
.hero{padding-block:clamp(48px,7vw,80px) 0}
.stage{margin-top:clamp(36px,5vw,56px);background:var(--calm-2);border-radius:var(--r) var(--r) 0 0;padding:clamp(24px,4vw,48px) clamp(12px,3vw,48px) 0;overflow:hidden}
.trust{margin-top:36px;border:1px solid var(--ink);border-radius:var(--r);padding:22px 26px;text-align:center}
.trust p{font-size:clamp(18px,1.8vw,22.7px);margin:0 0 10px}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;font-size:16px;font-weight:600}
.hero-pro{margin:10px auto 0;max-width:52em;font-size:15px;line-height:1.5;color:var(--ink-2)}
.hero-pro .pill-new{margin-right:8px;vertical-align:1px}
.hero-pro .link{color:var(--ink);white-space:nowrap}
.statement{padding-block:clamp(72px,10vw,120px) clamp(24px,4vw,40px)}
.statement .t-h3{max-width:20em;margin-inline:auto}

/* panels */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{border-radius:var(--r);padding:28px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:360px;text-decoration:none;transition:transform var(--ease)}
.panel:hover{transform:translateY(-3px)}
.panel .t-title{padding-right:56px}
.panel p{font-size:16.5px;max-width:34em}
.panel .arrow{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(42,23,51,.1);font-size:19px}
.panel.on-ink .arrow{background:rgba(255,255,255,.12)}
.panel.wide{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;min-height:420px}
.panel .media{margin-top:auto;padding-top:22px}
.panel .media img{border-radius:12px;width:100%;aspect-ratio:16/10;object-fit:cover}
@media (max-width:860px){.bento{grid-template-columns:1fr}.panel.wide{grid-template-columns:1fr}.panel{min-height:0}}
.p-panel{background:var(--panel)}.p-accent{background:var(--accent)}.p-calm-1{background:var(--calm-1)}.p-calm-2{background:var(--calm-2)}
.on-ink,.p-ink{background:var(--ink);color:var(--white)}

/* phone frame */
/* Apple's iPhone 18 Pro bezel (Luke, 13 Oct 2026; Lumira/Apps/Miracue/brand/phone-frame-iphone18-2026-10-13/).
   Apple's licence: upright and whole, never cropped, tilted, moved or shadowed, no words over it,
   at least 200px tall. The screen sits under the frame's transparent display; screens carry iOS's
   59pt top inset (bin/make-device-screens.js), and the status bar is drawn over that inset. */
.phone{position:relative;width:min(280px,72vw);aspect-ratio:1350/2760;margin-inline:auto;container-type:inline-size}
.phone>img,.phone>.demo-screen{position:absolute;left:5.333%;top:2.754%;width:89.333%;height:94.529%;border-radius:14.1%/6.5%;overflow:hidden;object-fit:cover;object-position:top;background:var(--white)}
.phone::before{content:"9:41";position:absolute;z-index:1;left:5.333%;top:2.754%;width:89.333%;height:6.61%;box-sizing:border-box;padding-left:13.2%;display:flex;align-items:center;font-size:3.9cqw;font-weight:600;letter-spacing:-.01em;color:#000;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 13'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='8' width='3' height='4' rx='.7'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.7'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.7'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.7'/%3E%3Cpath d='M29 3.2c2.3 0 4.4.9 6 2.4l1.2-1.2A10.1 10.1 0 0 0 29 1.5c-2.8 0-5.4 1.1-7.2 2.9l1.2 1.2c1.6-1.5 3.7-2.4 6-2.4zm0 3.3c1.4 0 2.6.5 3.6 1.4l1.2-1.2A6.8 6.8 0 0 0 29 4.8c-1.9 0-3.6.7-4.8 1.9l1.2 1.2c1-.9 2.2-1.4 3.6-1.4zm0 3.3c.5 0 .9.2 1.2.5L29 11.5l-1.2-1.2c.3-.3.7-.5 1.2-.5z'/%3E%3Crect x='41.5' y='1.5' width='22' height='10' rx='3' fill='none' stroke='%23000' stroke-opacity='.4'/%3E%3Crect x='43' y='3' width='19' height='7' rx='1.8'/%3E%3Cpath d='M65 5v3a1.6 1.6 0 0 0 0-3z' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") right 7% center/19% auto no-repeat}
.phone::after{content:"";position:absolute;inset:0;z-index:2;background:url(../img/device/iphone-18-pro-black.webp) center/100% 100% no-repeat;pointer-events:none}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:22px}
.phones .phone{width:min(250px,30vw)}.phones .phone.lead{width:min(290px,70vw)}
@media (max-width:760px){.phones .phone:not(.lead){display:none}}
.demo-screen iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform-origin:0 0}
.phones.has-demo{flex-wrap:wrap;row-gap:16px}
.demo-note{flex-basis:100%;margin:0 auto;text-align:center;font-size:14px;opacity:.8}

/* tour */
.tour{background:var(--calm-1);border-radius:var(--r);padding:clamp(18px,3vw,28px)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.tabs button{height:52px;padding:0 18px;border-radius:var(--pill);border:0;background:transparent;font:inherit;font-size:clamp(16px,1.6vw,20px);color:var(--ink);cursor:pointer;transition:background-color var(--ease)}
.tabs button[aria-selected="true"]{background:var(--white);font-weight:700}
.tab-body{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.tab-body[hidden]{display:none}
.tab-body .shot img{border-radius:12px;width:100%}
@media (max-width:860px){.tab-body{grid-template-columns:1fr}}

/* ink block */
.inkblock{border-radius:var(--r);padding:clamp(32px,5vw,64px) clamp(24px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.inkblock ul{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px}
.inkblock li{display:flex;gap:12px}
.inkblock li::before{content:"\2713";color:var(--accent);font-weight:700}
@media (max-width:860px){.inkblock{grid-template-columns:1fr}}

/* faq as chat */
.faq{border-radius:var(--r);overflow:hidden;background:var(--calm-2)}
.faq-head{background:var(--ink);color:var(--white);display:flex;align-items:center;gap:14px;padding:14px 24px;font-size:14px;font-weight:600;letter-spacing:.04em}
.faq-head i{width:36px;height:36px;border-radius:50%;background:var(--accent);display:block}
.faq-list{padding:14px 12px 20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.faq details{background:var(--white);border-radius:12px;max-width:100%}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;padding:14px 18px;font-size:clamp(16px,1.6vw,18px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:34px;height:34px;border-radius:50%;flex:none;display:block}
.faq details[open]{width:100%}
.faq details p{padding:0 18px 4px 66px;font-size:16px;color:var(--ink-2);max-width:62em}
.faq details p:last-child{padding-bottom:18px}

/* closing band + footer */
.close{background:var(--panel);padding:clamp(64px,9vw,96px) var(--gut) clamp(130px,14vw,170px);text-align:center}
.foot{background:var(--ink);color:var(--white);border-radius:100px 100px 0 0;margin-top:-90px;position:relative}
.foot .wrap{padding-block:64px 36px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot h4{font-size:17px;font-weight:700;margin:0 0 14px}
.foot a{display:block;text-decoration:none;font-size:15px;margin-bottom:10px;opacity:.9}
.foot a:hover{opacity:1;text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:14px}
.foot-mark{color:var(--accent);font-weight:700;font-size:28px;letter-spacing:-.01em}
.foot-social{display:flex;gap:4px;margin-left:auto}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;border-radius:50%;color:inherit;opacity:.85;text-decoration:none}
.foot-social a:hover{opacity:1;background:rgba(255,255,255,.1);text-decoration:none}
@media (max-width:760px){.foot{border-radius:40px 40px 0 0}.foot-cols{grid-template-columns:1fr 1fr}}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field input{height:56px;border-radius:12px;border:1px solid var(--field-edge);padding:0 16px;font:inherit;font-weight:400;font-size:17px;color:var(--ink);background:var(--white)}
.join{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.join input{flex:1 1 240px;height:72px;border-radius:var(--r);border:1px solid var(--field-edge);padding:0 20px;font:inherit;font-size:18px}
.on-ink .join input{border-color:transparent}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:transform var(--ease)}
a.card:hover{transform:translateY(-3px)}
.card small{font-size:13px;color:var(--ink-3)}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.note-ai{font-size:12.5px;color:var(--ink-3);margin-top:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- beside the app's v2 layer ----------
   These pages still link the build lane's layer (css/v2-fonts, v2-tokens, v2-tool, v2-site,
   v2-demo, v2-landing, marked data-v2), which restyles the older page markup. Where its
   rules reach this markup, the site's own values win. Checked by diffing computed styles
   against the design test pages, which load no layer. */
.btn,.join .btn{border-radius:var(--r)}
.btn-s{border-radius:var(--r-s)}
.hero h1.t-display{font-size:clamp(34px,4.6vw,56px) !important;line-height:1.2 !important}
section h2.t-h2,section h2.t-h3,section h2.t-title,body .section-head h2,.help-main h2{line-height:1.2 !important}
section .card.note h2{line-height:1.3 !important}
.faq details{border:0}
.faq summary{font-weight:400}
.tab-body .shot{border-radius:0}
.join input[type=email]{background:var(--white);border-color:var(--field-edge);border-radius:var(--r)}
.on-ink .join input[type=email],.close .join input[type=email]{border-color:transparent}
.eyebrow{letter-spacing:normal}
figcaption{color:inherit}
.callout{border:0}
.sheet{background:transparent}
.tool-label{font-weight:400}
.vid{border-radius:0}
.join input[type=email]{color:inherit}

/* Proof strip, v2 (Luke 1 Oct: on brand): three coloured tiles instead of an outlined box */
.trust:has(ul){border:0;padding:0;text-align:left}
.trust:has(ul)>p{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px;text-align:center}
.trust:has(ul) ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-size:17px;font-weight:600;line-height:1.35}
.trust:has(ul) li{border-radius:var(--r);padding:20px 22px;display:flex;align-items:center;gap:12px;color:var(--ink)}
.trust:has(ul) li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink);flex:none}
.trust:has(ul) li:nth-child(3n+1){background:var(--panel)}
.trust:has(ul) li:nth-child(3n+2){background:var(--calm-1)}
.trust:has(ul) li:nth-child(3n+3){background:var(--calm-2)}
@media (max-width:760px){.trust:has(ul) ul{grid-template-columns:1fr}}