/* Lifesaver Page components. Colours, type, radii and shadows come from tokens.css (tokens.json); this file holds
   only the components' own rules, copied from the live pages. Prefix: ls-. Motion: two curves, never decoration. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap");
:root{--ls-ease:cubic-bezier(.2,.8,.2,1);--ls-spring:cubic-bezier(.34,1.56,.64,1)}
.ls-page{background:var(--sky);color:var(--ink);font:400 16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}

/* Paper ground: warm light from above, a fibre texture multiplied in (LifesaverPage.paper() sets --ls-noise) */
.ls-room{position:relative;background:var(--sky);overflow:hidden}
.ls-room::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%,rgba(255,246,222,.95),transparent 70%),radial-gradient(60% 45% at 50% 70%,rgba(244,229,203,.55),transparent 75%)}
.ls-room::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--ls-noise,none);background-size:180px;opacity:.16;mix-blend-mode:multiply}
.ls-room>*{position:relative}

/* Hand lines: Caveat, inked by the #ink filter (LifesaverPage.ink() adds it once), a slight turn */
.ls-hand{margin:0;font-family:var(--font-hand);filter:url(#ink)}
.ls-hand--subtitle{font-weight:600;font-size:clamp(23px,2.3vw,30px);line-height:1.1;color:var(--forest);transform:rotate(-1.2deg)}
.ls-hand--note{font-weight:600;font-size:clamp(22px,2.2vw,28px);line-height:1.25;color:var(--pen);transform:rotate(-.6deg);max-width:40ch}
.ls-title{margin:0;font:700 clamp(44px,6vw,80px)/1 var(--font-display);letter-spacing:-.025em;color:var(--ink)}

/* Film frame: a paper sheet lifted off the desk, the film inside, a cover with one play button */
.ls-frame{position:relative;padding:clamp(10px,1.4vw,16px);border-radius:var(--frame);background-color:var(--cloud);box-shadow:var(--lift);
  background-image:var(--ls-paper,none),linear-gradient(165deg,rgba(255,255,255,.7),rgba(255,255,255,0) 40%,rgba(120,100,60,.06) 100%);background-size:220px,100% 100%}
.ls-screen{position:relative;aspect-ratio:1920/1340;border-radius:var(--film);overflow:hidden;background:var(--screen);box-shadow:inset 0 0 0 1px rgba(29,42,37,.08);container-type:inline-size}
.ls-cover{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:12%;background:center/cover no-repeat}
.ls-play{position:relative;z-index:1;width:clamp(78px,9vw,112px);aspect-ratio:1;border-radius:50%;background:var(--cloud);display:grid;place-items:center;box-shadow:var(--play-halo);transition:transform .45s var(--ls-spring)}
.ls-play::before{content:"";margin-left:8%;border-left:clamp(22px,2.6vw,32px) solid var(--forest);border-top:clamp(14px,1.6vw,20px) solid transparent;border-bottom:clamp(14px,1.6vw,20px) solid transparent}
.ls-cover:hover .ls-play,.ls-cover:focus-visible .ls-play{transform:scale(1.07)}
.ls-cover:focus-visible{outline:none}
.ls-cover:focus-visible .ls-play{outline:2px solid var(--forest);outline-offset:6px}
.ls-len{position:absolute;z-index:1;left:calc(50% + clamp(56px,6vw,76px));bottom:calc(12% + clamp(24px,3vw,40px));transform:rotate(-3deg);font:700 clamp(22px,2.2vw,28px)/1 var(--font-hand);color:var(--forest);white-space:nowrap}

/* Captions: white on a dark band, low and centred, clear of the face circle bottom-left */
.ls-caps{position:absolute;z-index:2;left:24%;right:24%;bottom:7%;display:flex;justify-content:center;pointer-events:none;transition:bottom .3s var(--ls-ease)}
.ls-caps span{display:inline-block;max-width:100%;padding:.22em .6em .28em;border-radius:.4em;background:var(--caption-band);color:var(--on-dark);
  font:600 max(13px,2.4cqi)/1.3 var(--font-body);text-align:center;letter-spacing:.005em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ls-caps--aside{left:48%;right:3%}
.ls-cc{all:unset;cursor:pointer;position:absolute;z-index:3;top:3%;left:2.4%;padding:5px 9px;border-radius:7px;font:700 12px/1 var(--font-body);letter-spacing:.04em;color:var(--on-dark);background:rgba(16,22,19,.62)}
.ls-cc[aria-pressed="false"]{background:rgba(16,22,19,.3);text-decoration:line-through}
.ls-cc:focus-visible{outline:2px solid var(--on-dark)}

/* Chapter tabs: one shape for all; the playing one is a white tab with a short green mark. No lift, no fill colour. */
.ls-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,16px)}
@media (max-width:640px){.ls-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ls-ch{all:unset;cursor:pointer;position:relative;display:grid;gap:2px;padding:12px 14px;border-radius:var(--tab);background:rgba(255,253,248,.55);box-shadow:var(--tab-rest);transition:background .25s,box-shadow .25s}
.ls-ch:hover,.ls-ch:focus-visible{background:rgba(255,253,248,.9)}
.ls-ch:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.ls-ch b{font:700 15px/1.2 var(--font-display);color:var(--ink)}
.ls-ch span{font:600 18px/1 var(--font-hand);color:var(--forest)}
.ls-ch.is-on{background:var(--cloud);box-shadow:var(--tab-on)}
.ls-ch.is-on::before{content:"";position:absolute;left:14px;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--forest)}

/* Countdown: paper tiles, slightly turned in turn; the days tile goes under a day */
.ls-count{display:flex;gap:clamp(8px,1.6vw,14px);justify-content:center}
.ls-tile{display:grid;justify-items:center;gap:2px;min-width:clamp(64px,9vw,86px);padding:12px 8px 8px;border-radius:var(--tile);background:var(--cloud);box-shadow:var(--tile-shadow)}
.ls-tile[hidden]{display:none}
.ls-tile:nth-child(odd){transform:rotate(-1.2deg)}.ls-tile:nth-child(even){transform:rotate(1deg)}
.ls-tile b{font:700 clamp(34px,4.2vw,46px)/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ls-tile i{font:600 18px/1 var(--font-hand);font-style:normal;color:var(--forest)}
.ls-section-title{margin:0;font:700 clamp(20px,2vw,24px)/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ink)}

/* Waitlist form: one paper card with two labelled rows, the forest button under it, small print, a quiet chat link */
.ls-drop{display:grid;justify-items:center;gap:16px;text-align:center;width:min(620px,100%)}
.ls-form{display:grid;gap:10px;width:min(440px,100%)}
.ls-fields{display:grid;border-radius:var(--card);background:var(--cloud);overflow:hidden;text-align:left;box-shadow:var(--card-shadow);transition:box-shadow .2s}
.ls-fields:focus-within{box-shadow:0 0 0 2px var(--forest),0 14px 30px -18px rgba(70,55,25,.45)}
.ls-f{display:grid;gap:3px;padding:11px 18px 10px;cursor:text;transition:background .2s}
.ls-f+.ls-f{border-top:1px solid rgba(29,42,37,.08)}
.ls-f span{font:600 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.ls-f:focus-within{background:rgba(43,101,80,.05)}
.ls-f:focus-within span{color:var(--forest)}
.ls-f input{all:unset;box-sizing:border-box;width:100%;padding:2px 0;font:500 17px/1.3 var(--font-body);color:var(--ink)}
.ls-f input::placeholder{color:rgba(86,99,93,.55)}
.ls-btn{all:unset;cursor:pointer;box-sizing:border-box;text-align:center;padding:15px 22px;border-radius:var(--pill);background:var(--forest);color:var(--on-dark);
  font:600 15px/1 var(--font-body);white-space:nowrap;box-shadow:var(--button-shadow);transition:transform .3s var(--ls-ease),opacity .2s}
.ls-btn:hover{transform:translateY(-2px)}
.ls-btn:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.ls-btn:disabled{opacity:.6;cursor:default;transform:none}
.ls-msg{margin:0;font:600 15px/1.35 var(--font-body);color:var(--forest)}
.ls-msg--error{color:var(--error)}
.ls-msg--done{max-width:22ch;font:700 clamp(24px,2.4vw,30px)/1.2 var(--font-hand);color:var(--forest);filter:url(#ink);transform:rotate(-1deg)}
.ls-fine{margin:0;font:500 13px/1.4 var(--font-body);color:var(--soft);max-width:44ch}
.ls-chatlink{all:unset;cursor:pointer;font:600 14px/1.3 var(--font-body);color:var(--forest);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.ls-chatlink:hover{text-decoration-thickness:2.5px}
.ls-chatlink:focus-visible{outline:2px solid var(--forest);outline-offset:4px;border-radius:4px}

/* Name card: the presenter's name over the film, paper, turned -1.2deg, a sticky "hoi!" */
.ls-namecard{position:relative;display:inline-block;padding:24px 38px 26px;border-radius:var(--name-card);background:var(--cloud);transform:rotate(-1.2deg);box-shadow:var(--name-card-shadow)}
.ls-namecard h3{margin:0;font:700 58px/1 var(--font-display);letter-spacing:-.025em;color:var(--ink)}
.ls-namecard p{margin:12px 0 0;font:600 31px/1.1 var(--font-hand);color:var(--forest)}
.ls-namecard .ls-sticky{position:absolute;right:26px;top:-26px;color:var(--forest)}
.ls-sticky{display:inline-block;font:700 32px/1 var(--font-hand);color:var(--pen);transform:rotate(-3deg);background:var(--sticky);padding:8px 14px 6px;box-shadow:0 10px 18px -10px rgba(60,50,20,.5)}

/* The Lifesaver Pass face (static; the live page mounts it in 3D with pass3d.js) */
.ls-pass{position:relative;container-type:inline-size;width:100%;aspect-ratio:100/62}
.ls-pass-face{position:absolute;inset:0;border-radius:5cqi;overflow:hidden;color:var(--ink);background:linear-gradient(162deg,#FFFFFF 0%,#FBF8F0 46%,#F1ECE0 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 -1px 0 rgba(120,100,60,.08),0 1px 1px rgba(29,42,37,.06),0 26px 50px -24px rgba(70,55,25,.45);
  -webkit-mask:radial-gradient(3.4cqi at 0 58%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(3.4cqi at 100% 58%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(3.4cqi at 0 58%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(3.4cqi at 100% 58%,#0000 98%,#000) right/51% 100% no-repeat}
.ls-pass-perf{position:absolute;left:4.6cqi;right:4.6cqi;top:58%;border-top:.45cqi dotted rgba(29,42,37,.22)}
.ls-pass-logo{position:absolute;left:6cqi;top:6cqi;height:3.6cqi;width:auto}
.ls-pass-code{position:absolute;right:6cqi;top:6.2cqi;font:600 2.6cqi/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--soft)}
.ls-pass-kind{position:absolute;left:6cqi;top:21cqi;font:600 9.4cqi/1 var(--font-display);letter-spacing:-.035em}
.ls-pass-exam{position:absolute;left:6.2cqi;top:32.5cqi;right:30cqi;font:500 3.4cqi/1.2 var(--font-body);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-pass-row{position:absolute;left:6cqi;right:6cqi;bottom:5.4cqi;display:flex;gap:7cqi}
.ls-pass-row span{display:grid;gap:1.2cqi}
.ls-pass-row i{font:600 2.1cqi/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;font-style:normal;opacity:.55}
.ls-pass-row b{font:600 4.1cqi/1 var(--font-display);letter-spacing:-.02em}

@media (prefers-reduced-motion:reduce){.ls-play,.ls-btn,.ls-caps,.ls-ch{transition:none}}