/* Landing page: tokens (same as design/prototyp/app.css), page layout, waitlist form, numbered sections.
   Pond language on purpose: coloured paper, 1px ink frames, colour as blocks, serif names, step frames.
   The demo app itself is styled in app.css. */
:root{
  --font:"Onest",system-ui,sans-serif;--serif:"Newsreader",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);--hov:.2s;
  --page:#E1EBF7;--ink:#000;--ink2:#4C5164;--tone:rgb(0 0 0/.06);--band:#D4DEEC;--rule:rgb(0 0 0/.18);--line:#000;
  --rail:#1D1D1D;--rail-fg:#E1EBF7;--rail-line:rgb(255 255 255/.4);--rail-tone:rgb(255 255 255/.1);
  --lime:#CEF058;--pond:#CBE25B;--lav:#CBA6F7;--yellow:#FFD330;--orange:#FF9F67;--on-acc:#000;
  --mf1:var(--orange);--mf2:var(--lav);--mf3:var(--lime);
  --pad:30px;--gap:24px;--max:1380px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --page:#22252C;--ink:#E8ECF1;--ink2:#9BA7B5;--tone:rgb(255 255 255/.07);--band:#2B2F38;--rule:rgb(255 255 255/.16);--line:#E8ECF1;
  --rail:#141619;--rail-fg:#E8ECF1;color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:500 16px/1.6 var(--font);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;margin:0}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--line);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.wrap{max-width:calc(var(--max) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:10;padding:10px 14px;background:var(--yellow);color:var(--on-acc);text-decoration:none}
.skip:focus{top:12px}

/* ---- hero: Pond home grid (4 columns), logo block left, claim + form in the middle, theme square right ---- */
.hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;padding-top:var(--pad);padding-bottom:40px}
/* logo = "Dear," over the year as 2 × 2 italic digits in a lime square: read "Dear 2026," (docs/nazov/dear-year.svg) */
.logo{grid-column:1;grid-row:1;margin:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;width:160px;height:160px;padding:12px 20px 14px 18px;background:var(--pond);color:var(--on-acc);font:italic 400 52px/1 var(--serif);letter-spacing:-.02em;animation:quad .21s step-end .3s both}
.logo span{display:flex;align-items:center}
.logo .dear{grid-column:1 / -1;font-size:28px;line-height:32px}
.logo span:nth-child(odd):not(.dear){justify-content:flex-end}
/* tags = Pond double blocks: lavender number + lime word, a lime line under it */
.tags{grid-column:1;grid-row:2;align-self:start;display:flex;flex-direction:column;align-items:flex-start;font-size:16px;line-height:40px;color:var(--on-acc)}
.tags p{display:flex;margin:0}
.tags b{font-weight:500;background:var(--lav);padding:0 12px}
.tags span{background:var(--lime);padding:0 12px}
/* E2E tag links to the privacy section: orange icon square + lime word, like the waitlist button */
.tags .lk{display:flex;color:var(--on-acc);text-decoration:none}
.tags .lk .ic{display:grid;place-items:center;width:40px;padding:0;background:var(--orange)}
.tags .lk span+span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tags .lk:hover span+span{background:var(--lav)}
.claim{grid-column:2 / span 2;grid-row:1 / span 2;max-width:640px}
h1{margin:-6px 0 0;font:400 88px/.92 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.lead{margin:24px 0 28px;font-size:19px;line-height:1.55;max-width:34em;text-wrap:pretty}
.mode{grid-column:4;grid-row:1;justify-self:end;width:48px;height:48px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.mode:hover{background:var(--tone)}

/* ---- waitlist form: 1px ink field, lime block button with an orange icon square (Pond Download) ---- */
.wl{max-width:560px}
.wl .fr{display:flex;gap:0}
.wl label{display:block;font-size:14px;line-height:20px;margin-bottom:8px}
.wl input[type=email]{flex:1;min-width:0;height:52px;padding:0 16px;border:0;border-radius:0;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:17px;font-weight:500}
.wl input[type=email]::placeholder{color:var(--ink2);opacity:1}
.wl input[type=email]:focus{outline:none;box-shadow:inset 0 0 0 2px var(--line)}
.wl input[type=email]:focus-visible{outline:2px solid var(--line);outline-offset:3px}
.wl button{flex:none;height:52px;display:flex;align-items:stretch;font-size:16px;font-weight:600;color:var(--on-acc);background:var(--lime);transition:background-color 0s .11s}
.wl button .ic{display:grid;place-items:center;width:52px;background:var(--orange)}
.wl button .ic svg{stroke-width:2.2}
.wl button .tx{display:grid;place-items:center;padding:0 20px;white-space:nowrap}
.wl button:hover{background:var(--lav)}
.wl button:disabled{cursor:progress}
.wl .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.wl .note{margin:10px 0 0;font-size:14px;line-height:20px;color:var(--ink2)}
/* status: text first, colour only as a block behind it */
.wl .st{margin:12px 0 0;min-height:28px;font-size:15px;line-height:28px}
.wl .st:empty{display:none}
.wl .st[data-k="ok"] span,.wl .st[data-k="exists"] span{background:var(--lime);color:var(--on-acc);padding:3px 8px}
.wl .st[data-k="err"] span{background:var(--orange);color:var(--on-acc);padding:3px 8px}
.wl.done .fr{opacity:.55}

/* ---- live demo frame ---- */
.show{padding-bottom:16px}
.cap{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;font-size:14px;line-height:20px;color:var(--ink2)}
.cap p{margin:0}
.pause{flex:none;height:36px;display:flex;align-items:center;gap:8px;padding:0 14px 0 10px;font-size:14px;font-weight:500;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pause:hover{background:var(--tone)}
.pause svg{width:16px;height:16px}
.pause[hidden]{display:none}

/* ---- numbered sections: Pond "1. Design 2. Engineering", serif name above a 1px frame, text under it ---- */
.how{padding-top:88px;padding-bottom:40px}
.how>h2,.e2e h2{margin:0 0 40px;font:400 48px/1 var(--serif);letter-spacing:-.02em;max-width:16em;text-wrap:balance}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.steps h3{margin:0 0 14px;font:400 30px/36px var(--serif);letter-spacing:-.02em;text-wrap:balance}
.steps h3 span{color:var(--ink2);margin-right:.25em}
.frame{position:relative;aspect-ratio:1;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden;container-type:inline-size}
.frame .ill{width:84%;height:auto;display:block;stroke:var(--line);stroke-width:1;stroke-linejoin:round;fill:var(--page)}
.frame .ill *{vector-effect:non-scaling-stroke}
.frame .ill .l{fill:var(--lime)}.frame .ill .v{fill:var(--lav)}.frame .ill .y{fill:var(--yellow)}.frame .ill .o{fill:var(--orange)}.frame .ill .b{fill:var(--band)}.frame .ill .n{fill:var(--ink);stroke:none}.frame .ill .ka{fill:var(--on-acc);stroke:none}
.frame .ill text{font:italic 400 30px/1 var(--serif);stroke:none;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.steps p{margin:16px 0 0;font-size:16px;line-height:1.6;max-width:36em;text-wrap:pretty}
.frame.dots{background:radial-gradient(circle at 12px 12px,var(--rule) 0 1px,transparent 1.6px) 0 0/24px 24px}
/* UI fragments inside a frame: the real editor and a real Months card, not pictures of them */
.frag{width:calc(100% - 40px)}
.frag .ed{position:relative;left:auto;top:auto;width:100%;animation:none}
.frag .cardx{display:block;width:100%;background:var(--page);box-shadow:0 0 0 1px var(--line),8px 8px 0 var(--lav)}
.soon{position:absolute;left:20px;top:20px;display:flex;font-size:14px;line-height:28px;color:var(--on-acc);z-index:2}
.soon b{font-weight:500;background:var(--lav);padding:0 8px}
.soon span{background:var(--lime);padding:0 8px}

/* ---- privacy (E2E): the same numbered-section frames on a tone band, paper squares instead of open frames ---- */
.e2e{background:var(--band);padding:88px 0 96px}
.e2e .frame{background-color:var(--page)}
.nw{white-space:nowrap}
.seal{display:flex;flex-direction:column;gap:14px}
.seal .ci{box-shadow:0 0 0 1px var(--line);background:var(--band)}
.seal .ci .card::after{display:none}
.seal .ci .t{color:var(--ink2);overflow-wrap:anywhere;letter-spacing:.02em}
.via{display:flex;align-items:center;gap:10px;padding-left:14px;font-size:13px;line-height:20px}
.via .ic{display:grid;place-items:center;width:28px;height:28px;background:var(--orange);color:var(--on-acc)}
.via .ic svg{width:16px;height:16px;stroke-width:2}
.e2e .nots{margin:0;display:grid;grid-template-columns:auto auto;justify-items:start;font-size:20px;line-height:44px;color:var(--on-acc)}
.nots b{grid-row:1 / span 3;display:grid;place-items:center;padding:0 18px;background:var(--lav);font:italic 400 56px/1 var(--serif);letter-spacing:-.02em}
.nots span{background:var(--lime);padding:0 16px}
.frag .words{background:var(--page);box-shadow:0 0 0 1px var(--line),8px 8px 0 var(--lav);padding:14px 16px 12px}
.e2e .wh{display:flex;margin:0 0 4px;font-size:13px;line-height:24px;color:var(--on-acc)}
.wh b{font-weight:600;background:var(--lav);padding:0 8px}
.wh span{background:var(--lime);padding:0 8px}
.words ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.words li{display:flex;align-items:baseline;gap:8px;padding:8px 0 6px;font-size:15px;line-height:20px;border-bottom:1px solid var(--line)}
.words i{flex:none;width:18px;font:italic 400 15px/20px var(--serif);color:var(--ink2)}

/* ---- closing waitlist + footer ---- */
.end{padding-top:96px;padding-bottom:96px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.end h2{grid-column:1 / span 2;margin:0;font:400 64px/.95 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.end .wl{grid-column:3 / span 2;align-self:end}
.foot{background:var(--rail);color:var(--rail-fg)}
.foot .wrap{display:flex;align-items:center;gap:24px;padding-top:24px;padding-bottom:24px;font-size:14px;line-height:20px}
/* wordmark "Dear / Year" like the app login (client/styles/auth.css .auth-brand) */
.foot .mini{display:flex;flex-direction:column;justify-content:center;width:48px;height:48px;padding:4px 5px;background:var(--pond);color:var(--on-acc);font:italic 400 16px/1.05 var(--serif);letter-spacing:-.02em;flex:none}
.foot .mini span:last-child{align-self:flex-end}
.foot p{margin:0}
.foot .pv{margin-left:auto;max-width:40em;text-align:right}

/* ---- motion: step frames like Pond, nothing tweens on hover ---- */
@keyframes quad{0%{clip-path:polygon(0 0,0 0,0 0,0 0,0 0,0 0)}.001%,33.332%{clip-path:polygon(0 0,50% 0,50% 50%,0 50%,0 50%,0 0)}33.333%,66.665%{clip-path:polygon(0 0,100% 0,100% 50%,0 50%,0 50%,0 0)}66.666%,99.999%{clip-path:polygon(0 0,100% 0,100% 50%,50% 50%,50% 100%,0 100%)}100%{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%,0 0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ---- tablet ---- */
@media (max-width:1100px){
  .hero{grid-template-columns:repeat(3,minmax(0,1fr))}
  .claim{grid-column:2 / span 2}
  .mode{grid-column:3;grid-row:auto;position:absolute;right:var(--pad);top:var(--pad)}
  .hero{position:relative}
  .claim{padding-right:64px}
  h1{font-size:72px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .end h2{grid-column:1 / span 4;font-size:56px}
  .end .wl{grid-column:1 / span 4}
}
/* ---- phone ---- */
@media (max-width:732px){
  :root{--pad:16px;--gap:16px}
  .hero{grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:24px;padding-bottom:28px}
  .tags{grid-column:2;grid-row:1;align-self:end}
  .claim{grid-column:1 / span 2;grid-row:2}
  .logo{width:96px;height:96px;padding:7px 12px 8px 11px;font-size:31px}
  .logo .dear{font-size:17px;line-height:20px}
  .tags .lk .ic{width:32px}
  .tags{font-size:14px;line-height:32px}
  .tags b,.tags span{padding:0 8px}
  .mode{width:44px;height:44px;top:var(--pad);right:var(--pad)}
  .claim{padding-right:0}
  h1{font-size:52px;line-height:.95}
  .lead{font-size:17px;margin:16px 0 22px}
  .wl .fr{flex-direction:column;gap:10px}
  .wl input[type=email]{flex:none}
  .wl button{height:52px}
  .wl button .tx{flex:1}
  .cap{flex-direction:column;align-items:flex-start;gap:10px}
  .how{padding-top:64px}
  .how>h2,.e2e h2{font-size:36px;margin-bottom:28px}
  .e2e{padding:64px 0}
  .steps{grid-template-columns:1fr;row-gap:48px}
  .steps h3{font-size:28px}
  .end{display:flex;flex-direction:column;gap:28px;padding-top:64px;padding-bottom:64px}
  .end h2{font-size:44px}
  .end .wl{align-self:stretch}
  .foot .wrap{flex-wrap:wrap;gap:16px}
  .foot .pv{margin-left:0;text-align:left;flex-basis:100%}
}
.frame .ill text.big{font-size:64px}
.frame .ill .t{stroke:none}