/* Canceled uses the app's own palette: a navy ground in both appearances, a cream
   focal surface, and Sunshine yellow for accents. Tokens mirror the native asset
   catalog and Web/public/style.css in the canceled-app project. */
@font-face{font-family:Archivo;src:url("fonts/archivo.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}

body.app-canceled{color-scheme:dark;--bg:#142d4e;--surface:#fffdf6;--ink:#fffdf6;--muted:#c5d0df;--accent:#f7dc12;--line:#4a5c7488;--stamp:#a42620;--slip-ink:#142d4e;--slip-secondary:#48566c}
@media(prefers-color-scheme:dark){body.app-canceled{--bg:#151d2c;--ink:#fff4cd;--muted:#becbe0}}

.app-canceled h1,.app-canceled h2,.app-canceled h3,.app-canceled .family-brand{font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:900;letter-spacing:-.04em}
.app-canceled .eyebrow{color:var(--accent)}
.app-canceled a{color:var(--accent)}

/* The wordmark carries a trailing period in Sunshine, as it does in the app. */
.app-canceled .family-brand .stop{color:var(--accent)}

.app-canceled .app-hero{grid-template-columns:1.1fr .9fr;gap:56px}
/* Archivo at weight 900 sets much heavier than the shared 650, so this app runs a
   smaller headline scale, closer to the one the app itself uses. */
.app-canceled h1{font-size:clamp(38px,4.2vw,58px)}

/* In development, so the hero states status instead of offering an action. */
.status-note{font-size:14px;border-left:3px solid var(--accent);padding:12px 16px;background:#ffffff0f;max-width:52ch;margin:32px 0 0;color:var(--ink)}

.app-canceled .hero-screen{background:#ffffff0d;border:1px solid var(--line);border-radius:28px}
.app-canceled .hero-screen img{border-radius:18px}

.app-canceled .features{margin-top:56px}
.app-canceled .feature h2{font-size:25px}

/* The cream slip, the app's focal card, carrying the mutual-cancellation rule. */
.rule-slip{background:var(--surface);color:var(--slip-ink);border-radius:16px;padding:30px 32px;margin:64px 0;max-width:56ch;box-shadow:0 8px 24px #0003;position:relative}
.rule-slip::before{content:"";display:block;width:24px;height:6px;background:var(--accent);margin-bottom:18px}
.rule-slip p{margin:0;font-size:19px;line-height:1.5}
.rule-slip p+p{margin-top:12px;font-size:15px;color:var(--slip-secondary)}

.reveal-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:40px 0 72px}
.reveal-split p{color:var(--muted)}
.reveal-split figure{margin:0}
/* Capped like the shared hero screenshot, so a tall phone capture does not tower
   over the three lines of copy beside it. */
.reveal-split img{display:block;max-height:560px;width:auto;border-radius:18px;border:1px solid var(--line)}
.reveal-split figcaption{font-size:12px;color:var(--muted);padding-top:14px;max-width:34ch}

/* The rotating copy bank. Each line gets the same Sunshine tick the plan slips use. */
.copy-bank{border-top:1px solid var(--line);padding:56px 0 24px;max-width:70ch}
.copy-bank ul{list-style:none;padding:0;margin:30px 0 26px;display:grid;gap:15px}
.copy-bank li{position:relative;padding-left:28px;font-size:18px;line-height:1.45}
.copy-bank li::before{content:"";position:absolute;left:0;top:.58em;width:14px;height:4px;background:var(--accent)}
.copy-bank>p:not(.eyebrow){color:var(--muted)}
.copy-bank .quiet{font-size:14px;max-width:62ch}

.app-canceled .closing{border-top:1px solid var(--line);padding-top:44px}

@media(max-width:760px){.app-canceled .app-hero,.reveal-split{grid-template-columns:1fr;gap:28px}.reveal-split{padding-bottom:48px}.rule-slip{padding:24px;margin:44px 0}.app-canceled h1{font-size:clamp(38px,10vw,58px)}}