/* zippr, the free check-up page, built the way the homepage is: a long scroll of five screens, one idea and at most
   one action each. It rides on the homepage's stylesheets (/home.css: the tokens, the type, the header and footer, the
   kicker; /stage.css: each screen's picture beside its words, the scenes with Dot, one column on phones) and adds only this page's
   pictures, its form and the steps shown once the file is saved. Every size comes from zippr's one type scale.
   No inline styles (the page's CSP allows none), no idle motion. */

/* ---------- the words: every screen's headline one size; the sentence under it at the lead size, in ink ---------- */
.cu-page .title,.cu-page .scr-hero .title{font-size:clamp(2.5rem,calc(1.45rem + 3.4vw),4.6rem);letter-spacing:-.035em;line-height:1.04;max-width:13ch;}
/* the first headline wraps to the same three lines in the fallback font and in its own, so nothing moves when the font
   arrives (a "ch" is measured in whichever font is showing) */
.cu-page .scr-hero .title{max-width:14ch;}
/* Dot's hopeful picture stands in for its usual one, at the width that picture is drawn for */
.cu-page .st-dot .d-hero{width:92%;left:4%;}
.cu-page .say{max-width:30ch;font-size:var(--step-1);line-height:1.45;color:var(--ink);}
.cu-page .say[hidden]{display:none;}
.cu-page .speech{font-size:var(--step-1);line-height:1.45;}
.cu-page .kicker{font-weight:600;}

/* ---------- 4 · get it: the form, on paper; the one filled button on the page ---------- */
.cu-card{width:100%;max-width:30rem;}
.cu-card .title{max-width:15ch;}
/* "check-up" never breaks at its hyphen */
.cu-nw{font-style:normal;white-space:nowrap;}
.cu-form{margin-top:clamp(1.2rem,3vh,1.8rem);}
.cu-fields[hidden]{display:none;}
.cu-label{display:block;font-family:var(--display);font-size:var(--step-1);font-weight:600;line-height:1.4;color:var(--ink);}
.cu-input{display:block;width:100%;min-height:54px;margin-top:.55rem;padding:0 1rem;border:0;border-radius:12px;background:var(--field-bg);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);font:inherit;font-size:var(--step-0);color:var(--field-ink);}
.cu-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px var(--cta);}
.cu-note{margin-top:.5rem;font-size:var(--step--1);line-height:1.5;color:var(--muted);}
/* the quick check keeps its room before it loads, so the button never jumps */
.cu-check{min-height:65px;margin-top:.9rem;}
.cu-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:.9rem;padding:0 1.2rem;border:0;
  border-radius:12px;background:var(--pill-bg);color:var(--pill-ink);font-size:var(--step-0);font-weight:700;cursor:pointer;transition:background .2s;}
.cu-go:hover{background:var(--pill-hover);}
.cu-go:disabled{opacity:.72;cursor:default;}
.cu-status{min-height:1.5em;margin-top:.8rem;font-size:var(--step-0);font-weight:600;line-height:1.45;color:var(--ink);}
.cu-status:empty{min-height:0;margin:0;}
.cu-status:focus{outline:none;}
.cu-again{margin-top:.1rem;font-size:var(--step-0);}
.cu-again a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font-weight:600;text-underline-offset:3px;}
.cu-again[hidden],.cu-warn[hidden]{display:none;}

/* the re-download warning: a white sheet, before anything is made */
.cu-warn{margin-top:1rem;padding:1.05rem 1.15rem 1.15rem;border-radius:16px;background:var(--sheet);color:var(--ink);
  box-shadow:inset 4px 0 0 var(--accent),var(--shadow);}
.cu-warn-title{font-family:var(--display);font-size:var(--step-1);font-weight:600;line-height:1.4;}
.cu-warn-email{overflow-wrap:anywhere;}
.cu-warn-title:focus{outline:none;}
.cu-warn p + p{margin-top:.4rem;font-size:var(--step-0);line-height:1.5;color:var(--ink);}
.cu-warn-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem;}
.cu-warn-actions{align-items:center;column-gap:1.1rem;}
.cu-yes{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.1rem;border:0;border-radius:999px;
  background:var(--pill-bg);color:var(--pill-ink);font-size:var(--step--1);font-weight:700;cursor:pointer;transition:background .2s;}
.cu-yes:hover{background:var(--pill-hover);}
/* the other answer is a quiet text link, so the question has one button */
.cu-no{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--link);font:inherit;
  font-size:var(--step-0);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.cu-yes:disabled,.cu-no:disabled{opacity:.6;cursor:default;}
/* while the warning asks, the form steps aside; the quick check stays (a new copy needs a fresh check) */
.cu-form.is-asking .cu-label,.cu-form.is-asking .cu-input,.cu-form.is-asking .cu-note,.cu-form.is-asking .cu-go{display:none;}

/* once the file is saved: where to upload it, at the size of words people read to act */
.cu-do{max-width:30ch;margin-top:clamp(.8rem,2vh,1.2rem);font-size:var(--step-0);line-height:1.55;color:var(--ink);text-wrap:pretty;}
.cu-do[hidden]{display:none;}
.cu-do b{font-weight:600;}

/* ---------- 5 · not on Claude: one outlined button, so it never looks like the Get button ---------- */
.cu-copy{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:clamp(1rem,2.4vh,1.5rem);padding:0 1.4rem;
  border:1.5px solid var(--ink);border-radius:12px;background:transparent;color:var(--ink);font-size:var(--step-0);font-weight:700;cursor:pointer;
  transition:background .2s;}
.cu-copy:hover{background:var(--sheet);}
.cu-copy[hidden],.cu-copy-status[hidden]{display:none;}
.cu-copy-status{margin-top:.8rem;max-width:30ch;font-size:var(--step-0);font-weight:600;line-height:1.45;color:var(--ink);}
.cu-copy-status:empty{display:none;}
.cu-txt-row{margin-top:.2rem;}
.cu-txt-row[hidden]{display:none;}
.cu-txt{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font-size:var(--step-0);font-weight:600;text-underline-offset:3px;}
/* the copy fallback's text box, for the moment it exists: in view (so a phone doesn't scroll to it) but unseen */
.cu-offscreen{position:fixed;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none;font-size:16px;}

/* ---------- the pictures: one per screen, on the stage beside the words (on a phone, above them) ---------- */
.st[data-on="cu-report"],.st[data-on="cu-why"]{--wall:var(--wall-split);}
.st[data-on="cu-consent"]{--wall:var(--wall-runs);}
.st[data-on="cu-paste"]{--wall:var(--wall-film);}
.st[data-on="cu-again"] .l-again,.st[data-on="cu-report"] .l-report,.st[data-on="cu-why"] .l-why,.st[data-on="cu-consent"] .l-consent,
.st[data-on="calm"] .l-file,.st[data-on="cu-paste"] .l-paste{opacity:1;visibility:visible;transition:opacity .5s ease-out .1s,visibility 0s;}
/* Dot stands on the floor: on the left (the AI's side of a chat) where a chat is shown, on the right beside the report */
.st[data-on="cu-again"],.st[data-on="cu-consent"],.st[data-on="cu-paste"]{--dw:clamp(56px,15cqw,104px);--dx:var(--st-pad);
  --dy:calc(var(--fb) - var(--dw));--ground-shadow:1;}
.st[data-on="cu-report"],.st[data-on="cu-why"]{--dw:clamp(56px,14cqw,96px);--dx:calc(100cqw - var(--st-pad) - var(--dw));--dy:calc(var(--fb) - var(--dw));--ground-shadow:1;}
.l-again,.l-report,.l-why,.l-consent,.l-paste{align-items:center;}

/* 1 · the same message, sent three times; the last one is stamped */
.cu-thread{display:grid;justify-items:end;gap:clamp(12px,3.4cqh,26px);width:100%;max-width:24rem;padding-left:calc(var(--dw) + 16px);}
.cu-sent{position:relative;padding:clamp(.6rem,2.2cqw,.9rem) clamp(.9rem,3.2cqw,1.25rem);border-radius:18px 18px 6px 18px;
  background:var(--ink-surface);color:var(--on-ink);font-size:var(--step-1);font-weight:600;line-height:1.4;
  box-shadow:0 18px 36px -24px rgba(var(--shadow-rgb),.7);}
/* a set width, in the text's own size, so a bubble doesn't change when the page's font arrives */
.cu-thread .cu-sent{width:12.4em;max-width:100%;}
.cu-stamp{position:absolute;right:calc(100% + 12px);top:-6px;padding:.18rem .5rem .12rem;border:2px solid var(--st-stamp);border-radius:7px;
  background:var(--sheet);color:var(--st-stamp);font:600 var(--step--1)/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;
  transform:rotate(-7deg);box-shadow:0 6px 14px -8px rgba(var(--shadow-rgb),.5);}
/* on arrival (wide screens, when motion is allowed): the three arrive one after another, then the stamp */
.motion .st:not([data-on="cu-again"]) .cu-thread li{opacity:0;translate:0 14px;}
.motion .st:not([data-on="cu-again"]) .cu-stamp{opacity:0;scale:1.6;}
.motion .st[data-on="cu-again"] .cu-thread li{transition:opacity .35s ease-out,translate .5s var(--st-ease);}
.motion .st[data-on="cu-again"] .cu-thread li:nth-child(2){transition-delay:.45s;}
.motion .st[data-on="cu-again"] .cu-thread li:nth-child(3){transition-delay:.9s;}
.motion .st[data-on="cu-again"] .cu-stamp{transition:opacity .2s ease-out 1.35s,scale .3s var(--st-pop) 1.35s;}

/* 2 · the check-up's report: how often the job came up, and its steps marked */
.cu-report{width:100%;max-width:25rem;padding:clamp(.9rem,3.4cqw,1.4rem);border-radius:20px;background:var(--sheet);box-shadow:var(--shadow);}
.cu-count{display:inline-flex;align-items:center;min-height:32px;padding:0 .8rem;border-radius:999px;background:var(--ink-surface);
  color:var(--on-ink);font:600 var(--step--1)/1.3 var(--body);}
.cu-marks{display:grid;gap:clamp(6px,1.6cqh,10px);margin-top:clamp(.7rem,2.2cqh,1rem);}
.cu-marks li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:clamp(48px,10cqh,58px);
  padding:.4rem .5rem .4rem .85rem;border-radius:12px;background:var(--ground);}
.cu-step{font-size:var(--step-0);font-weight:600;line-height:1.5;color:var(--ink);}
.cu-mark{flex:none;padding:.22rem .65rem;border-radius:999px;font:600 var(--step--1)/1.3 var(--body);white-space:nowrap;}
.cu-mark.is-free{background:var(--known-bg);color:var(--known-ink);}
.cu-mark.is-ai{background:var(--ai-bg);color:var(--ai-ink);}

/* 2b · the same card, for why it matters: the "No AI needed" mark on top, then what it gets you, each row ticked */
.cu-why-card .cu-count{background:var(--known-bg);color:var(--known-ink);}
.cu-why-card .cu-marks li{justify-content:flex-start;gap:.7rem;}
.cu-tick{position:relative;flex:none;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--known-bg);}
.cu-tick::after{content:"";position:absolute;left:.5rem;top:.3rem;width:.35rem;height:.65rem;border:solid var(--known-ink);border-width:0 2px 2px 0;
  transform:rotate(45deg);}

/* 3 · the check-up's own question, drawn as its chat message: the lines, then Yes or No */
.cu-ask{width:100%;max-width:25rem;margin:0 0 0 calc(var(--dw) + 12px);padding:clamp(.9rem,3.2cqw,1.3rem);border-radius:18px 18px 18px 6px;
  background:var(--sheet);box-shadow:var(--shadow);}
.cu-ask-lines{display:grid;gap:.45rem;}
.cu-ask-lines li{display:flex;align-items:center;gap:.6rem;padding:.5rem .85rem;border-radius:10px;background:var(--ground);
  font-size:var(--step-0);line-height:1.5;color:var(--ink);}
.cu-ask-lines li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.cu-ask-q{margin-top:.9rem;font-size:var(--step-0);font-weight:600;line-height:1.5;color:var(--ink);}
.cu-ask-replies{display:flex;gap:.5rem;margin-top:.55rem;}
/* the two answers are part of the picture, not buttons: outlined, never filled like the page's own actions */
.cu-ask-reply{display:inline-flex;align-items:center;min-height:32px;padding:0 .85rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-strong);
  font-size:var(--step--1);font-weight:600;line-height:1.3;color:var(--ink);}

/* 4 · the file you get, above Dot, who waits; once it is saved, the same file in Claude's skills, switched on */
.l-file{justify-content:center;align-items:center;gap:clamp(12px,3cqh,20px);}
.cu-file{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.3rem .85rem .9rem;border-radius:18px;background:var(--sheet);box-shadow:var(--shadow);
  font-size:var(--step-1);line-height:1.4;color:var(--ink);}
.cu-file b{font-weight:600;}
.cu-file-icon{position:relative;flex:none;width:40px;height:50px;border-radius:6px 15px 6px 6px;background:var(--accent);}
.cu-file-icon::after{content:"";position:absolute;right:0;top:0;width:15px;height:15px;border-radius:0 6px 0 6px;background:rgba(var(--on-ink-rgb),.45);}
.cu-skills{width:100%;max-width:21rem;padding:1rem 1.1rem 1.1rem;border-radius:18px;background:var(--sheet);box-shadow:var(--shadow);}
.cu-skills-head{font-size:var(--step--1);font-weight:600;line-height:1.3;color:var(--ink);}
.cu-skill{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.7rem;padding:.6rem .7rem .6rem .9rem;border-radius:12px;
  background:var(--ground);font-size:var(--step-0);font-weight:600;line-height:1.5;color:var(--ink);}
.cu-switch{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:var(--accent);}
.cu-switch::after{content:"";position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--sheet);}
.cu-page:not(.is-saved) .cu-skills,.cu-page.is-saved .cu-file{display:none;}

/* 5 · the prompt, pasted into any AI app, and its first answer; the rest of the long prompt is drawn as lines */
.cu-chat{display:grid;gap:clamp(12px,3cqh,20px);width:100%;max-width:25rem;padding-left:calc(var(--dw) + 16px);}
.cu-pasted,.cu-reply{padding:clamp(.7rem,2.6cqw,1rem) clamp(.9rem,3.2cqw,1.2rem);}
.cu-pasted{justify-self:end;width:88%;border-radius:18px 18px 6px 18px;background:var(--ink-surface);color:var(--on-ink);
  box-shadow:0 18px 36px -24px rgba(var(--shadow-rgb),.7);}
.cu-reply{justify-self:start;width:78%;border-radius:18px 18px 18px 6px;background:var(--sheet);color:var(--ink);box-shadow:var(--shadow);}
.cu-pasted b,.cu-reply b{display:block;font-size:var(--step-1);font-weight:600;line-height:1.4;}
.cu-bars{display:grid;gap:7px;margin-top:.7rem;}
.cu-bars i{display:block;height:9px;border-radius:5px;background:rgba(var(--on-ink-rgb),.3);}
.cu-bars i:nth-child(2){width:84%;}
.cu-bars i:nth-child(3){width:58%;}
.cu-reply .cu-bars i{background:rgba(var(--ink-rgb),.14);}

/* ---------- phones: one column, and one thing per screenful: every screen is a little taller than the
   phone, its picture (the one thing to look at) first and tall, its headline always at the same height in it, so two
   headlines never share the phone's screen; the words sit under the headline, a few at a time ---------- */
@media (max-width:768px){
  .cu-page .t1-words > section{min-height:calc(100svh + 24px);justify-content:flex-start;padding-top:1.5rem;}
  .cu-page .t1-words > section:first-of-type{min-height:calc(100svh - var(--top-h,64px) + 24px);padding-top:.4rem;}
  .cu-page .t1-words > section[data-scene]{--sh:48svh;}
  .cu-page .t1-words > section[data-scene="cu-again"]{--sh:34svh;}
  .js .cu-page .t1-words > section:not(.has-pic){padding-top:calc(var(--sh,0px) + 2.7rem);}
  .js .cu-page .t1-words > section:first-of-type:not(.has-pic){padding-top:calc(var(--sh,0px) + 1.6rem);}
  /* the form is the tallest screen: room under its button keeps the next screen's button out of the same screenful
     (a band of 264 px, under a third of the phone); once the file is saved, the form is gone and so is the room */
  .cu-page:not(.is-saved) #get-it{padding-bottom:240px;}
  /* the last screen ends on the footer: no phone-tall room under its words */
  .cu-page .t1-words > section:last-of-type{min-height:0;}
  /* the privacy screen's sentence in a narrower column: three short lines, so the room before the next screen stays under a third */
  .cu-page section[data-scene="cu-consent"] .say{max-width:24ch;}
  /* why it matters: a shorter screen, sized to its words, so the room before the next screen stays under a third; its
     picture a little taller, so it and the next screen's picture are never both half in view; its sentence on two lines,
     so its headline and the next screen's are never both in one screenful */
  .cu-page .t1-words > section[data-scene="cu-why"]{--sh:52svh;min-height:0;padding-bottom:calc(32.6svh - 1.5rem);}
  .cu-page section[data-scene="cu-why"] .say{max-width:22ch;text-wrap:balance;}
  /* in a phone's picture, Dot stays where it stands clear of the words: the first screen, where it speaks, and the file */
  .cu-page .st-flow[data-on="cu-report"] .st-dot,.cu-page .st-flow[data-on="cu-why"] .st-dot,.cu-page .st-flow[data-on="cu-consent"] .st-dot,
  .cu-page .st-flow[data-on="cu-paste"] .st-dot{display:none;}
  .cu-page .st-flow .cu-ask{margin-left:0;}
  .cu-page .st-flow .cu-chat{padding-left:0;}
  /* the narrator's line, under the headline, as words rather than a second box: Dot is in the picture above */
  .cu-page .speech{max-width:none;padding:0;border-radius:0;background:none;box-shadow:none;}
}

/* nothing cut off or running past its picture, at any width: the three sent messages
   keep their set width but never more than the column, and the check-up's question fits beside Dot's place */
.cu-thread{justify-items:stretch;}
.cu-thread li{display:flex;justify-content:flex-end;min-width:0;}
.cu-ask{width:min(100% - var(--dw) - 12px,25rem);}
@media (max-width:768px){
  .cu-page .st-flow .cu-ask{width:min(100%,25rem);}
}
@media (max-width:359px){
  /* the narrowest phones: the "Again" stamp sits a little closer to its message, so the picture's edge never cuts it */
  .cu-stamp{right:calc(100% + 3px);}
}