/* MyAlphaPics site.css. "Letters are windows". Shared by every page.
   Sections: tokens, base, window, actions, header, footer, disclosure, forms, layouts (article/guide/narrow/feature), then /* home */ (index.html only). */

/* ---------- fonts (self-hosted, latin; Outfit is variable 400-600) ---------- */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/outfit-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin.woff2) format('woff2')}

/* ---------- tokens and base ---------- */
@property --open { syntax: '<number>'; inherits: true; initial-value: 1; }
:root{
  /* 26 letter hues, equal lightness (L .62 / C .105) */
  --h-A:232;--h-B:10;--h-C:147;--h-D:285;--h-E:62;--h-F:200;--h-G:337;--h-H:114;--h-I:252;--h-J:30;--h-K:168;--h-L:305;--h-M:83;--h-N:220;--h-O:358;--h-P:145;--h-Q:273;--h-R:50;--h-S:188;--h-T:325;--h-U:88;--h-V:240;--h-W:18;--h-X:155;--h-Y:293;--h-Z:70;
  --l-shutter:.62;--l-ink:.48;--l-glass:.94;--c:.105;
  --paper:#fff;--room:oklch(.975 .004 250);--ink:oklch(.23 .012 270);--ink-2:oklch(.47 .01 270);--line:oklch(.9 .005 270);
  --font:'Outfit',ui-sans-serif,system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --r-utility:6px;--r-control:12px;--r-window:20px;--r-object:24px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:24px;
}
@media (min-width:700px){:root{--pad:32px}}
@media (min-width:1100px){:root{--pad:48px}}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 16px/1.5 var(--font);color:var(--ink);background:var(--paper);overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r-control);z-index:20}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-utility)}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
h2{font:500 32px/1.15 var(--font);letter-spacing:-.02em;max-width:18ch}
.lead{font-size:20px;line-height:1.4;max-width:34ch}
.sec{padding:64px 0}
@media (min-width:900px){.sec{padding:112px 0}}
.muted{color:var(--ink-2)}
b,strong{font-weight:500}


/* the window */
.pane{--hue:var(--h-J);--open:1;--frost:1;--fs:115cqh;--pb:0px;--pos:50% 40%;--img:none;
  --shutter:oklch(var(--l-shutter) var(--c) var(--hue));--glass:oklch(var(--l-glass) .022 var(--hue));
  position:relative;overflow:hidden;border-radius:var(--r-window);background:var(--glass);isolation:isolate;container-type:size}
.pane::before{content:"";position:absolute;inset:0;z-index:0;background:var(--img) var(--pos)/cover no-repeat;filter:grayscale(1) contrast(.8) brightness(1.18);mix-blend-mode:multiply;opacity:.5}
.win{position:absolute;inset:0;z-index:2;margin:0;display:flex;align-items:flex-end;justify-content:var(--jx,center);padding:0 0 var(--pb);
  font:600 var(--fs)/1 var(--font);color:transparent;--cap:calc(var(--fs)*.73);
  background:linear-gradient(to top,transparent calc(var(--pb) + var(--open)*var(--cap)),var(--shutter) 0),var(--img) var(--pos)/cover no-repeat;
  -webkit-background-clip:text;background-clip:text}
.win{max-width:none}
.win>span{display:block;line-height:1;text-box:trim-both cap alphabetic}
.pane.empty{--img:linear-gradient(oklch(.92 .03 var(--hue)),oklch(.92 .03 var(--hue)));background:transparent}
.pane.empty::before{display:none}

/* photos: use these classes on .pane, never url() in inline styles (it would resolve against this file) */
.img-john{--img:url(john.webp)}
.img-landon{--img:url(landon.webp)}
.img-landon-paint{--img:url(landon-paint.webp)}
.lt{font-weight:600;color:oklch(var(--l-ink) var(--c) var(--hue,var(--h-J)))}
.wm{font:500 20px/1 var(--font);letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.wm b{font-weight:600;color:oklch(var(--l-ink) var(--c) var(--hue))}


/* actions */
.btn{appearance:none;border:2px solid var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:var(--r-control);
  background:var(--ink);color:#fff;font:500 16px/1 var(--font);text-decoration:none;transition:transform 120ms var(--ease),background-color 120ms var(--ease)}
.btn:hover{background:oklch(.32 .012 270);border-color:oklch(.32 .012 270)}
.btn:active{transform:scale(.97)}
.btn.alt{background:transparent;color:var(--ink)}
.btn.alt:hover{background:oklch(.95 .005 270);border-color:var(--ink)}
.link{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
.pair{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- footer ---------- */
footer{padding:48px 0;border-top:1px solid var(--line)}
.foot{display:grid;gap:32px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.foot ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.foot ul a:hover{text-decoration:underline}
.foot address{font-style:normal;color:var(--ink-2);margin-top:8px}
.foot .legal{color:var(--ink-2);font-size:12px;margin-top:16px}
@media (min-width:700px){.foot{grid-template-columns:2fr 1fr 1fr}}

/* ---------- disclosure (FAQ) ---------- */
.faq-list{margin-top:40px;max-width:820px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;min-height:64px;padding:12px 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary h3{font:500 20px/1.3 var(--font)}
.faq-list summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform 200ms var(--ease)}
.faq-list details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq-list .a{padding:0 40px 24px 0;color:var(--ink-2);max-width:64ch}
@media (prefers-reduced-motion:reduce){.faq-list summary::after{transition:none}}

/* ---------- letter hue helpers: <body class="l-J"> or any element sets --hue ---------- */
.l-A{--hue:var(--h-A)}.l-B{--hue:var(--h-B)}.l-C{--hue:var(--h-C)}.l-D{--hue:var(--h-D)}.l-E{--hue:var(--h-E)}.l-F{--hue:var(--h-F)}.l-G{--hue:var(--h-G)}.l-H{--hue:var(--h-H)}.l-I{--hue:var(--h-I)}.l-J{--hue:var(--h-J)}.l-K{--hue:var(--h-K)}.l-L{--hue:var(--h-L)}.l-M{--hue:var(--h-M)}.l-N{--hue:var(--h-N)}.l-O{--hue:var(--h-O)}.l-P{--hue:var(--h-P)}.l-Q{--hue:var(--h-Q)}.l-R{--hue:var(--h-R)}.l-S{--hue:var(--h-S)}.l-T{--hue:var(--h-T)}.l-U{--hue:var(--h-U)}.l-V{--hue:var(--h-V)}.l-W{--hue:var(--h-W)}.l-X{--hue:var(--h-X)}.l-Y{--hue:var(--h-Y)}.l-Z{--hue:var(--h-Z)}

/* ---------- generic layout utilities ---------- */
.wrap-read{max-width:calc(720px + 2*var(--pad));margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-form{max-width:calc(640px + 2*var(--pad));margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.stack>*+*{margin-top:16px}
.stack-lg>*+*{margin-top:32px}
.split{display:grid;gap:40px}
@media (min-width:900px){.split{grid-template-columns:5fr 7fr;gap:96px;align-items:start}.split.rev{grid-template-columns:7fr 5fr}}
.room{background:var(--room)}
.h1{font:500 32px/1.1 var(--font);letter-spacing:-.02em}
.h1.big{font-size:32px}
@media (min-width:900px){.h1.big{font-size:56px;line-height:1.04}}
.meta{font-size:12px;line-height:16px;color:var(--ink-2)}

/* ---------- site header (every page except the homepage hero) ---------- */
.site-header{border-bottom:1px solid var(--line);background:var(--paper)}
.sh{display:flex;align-items:center;gap:12px;min-height:64px;white-space:nowrap}
.sh .wm{margin-right:auto}
.sh a:not(.wm){text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.sh a:not(.wm):not(.go):hover{text-decoration:underline;text-underline-offset:4px}
.sh a.go{border:2px solid var(--ink);border-radius:var(--r-control);padding:0 16px;font-weight:500}
.sh a.go:hover{background:oklch(.95 .005 270)}
.sh a[aria-current="page"]:not(.go){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sh a.opt{display:none}
.sh-more{position:relative}
.sh-more summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.sh-more summary::-webkit-details-marker{display:none}
.sh-more summary::after{content:"";width:8px;height:8px;margin-left:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px)}
.sh-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sh-more .menu{position:absolute;right:0;top:100%;z-index:10;min-width:200px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-control);padding:8px;display:grid}
.sh-more .menu a{padding:0 12px;border-radius:var(--r-utility)}
.sh-more .menu a:hover{background:var(--room);text-decoration:none}
@media (min-width:900px){
  .sh{gap:24px}
  .sh a.opt{display:inline-flex}
  .sh-more{display:none}
}

/* ---------- forms ---------- */
:root{--err:oklch(.5 .17 27);--err-bg:oklch(.97 .02 27);--ok:oklch(.46 .1 150);--ok-bg:oklch(.97 .02 150);--edge:oklch(.62 .01 270)}
.form{display:grid;gap:24px}
.field{display:grid;gap:8px}
.label{font-weight:500}
.label .opt-tag{font-weight:400;color:var(--ink-2)}
.hint{font-size:12px;line-height:16px;color:var(--ink-2)}
.input,.select,.textarea{appearance:none;width:100%;min-height:48px;padding:0 16px;border:1px solid var(--edge);border-radius:var(--r-control);background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--font);transition:border-color 120ms var(--ease)}
.textarea{min-height:144px;padding:12px 16px;resize:vertical}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23262629' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;padding-right:44px}
.input::placeholder,.textarea::placeholder{color:var(--ink-2)}
.input:hover,.select:hover,.textarea:hover,.is-hover{border-color:var(--ink)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,.is-focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.input:disabled,.select:disabled,.textarea:disabled,.is-disabled{background:var(--room);color:var(--ink-2);border-color:var(--line);cursor:not-allowed}
.input.is-error,.select.is-error,.textarea.is-error,.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border:2px solid var(--err);padding-left:15px}
.input.is-success,.select.is-success,.textarea.is-success{border:2px solid var(--ok);padding-left:15px}
.msg{font-size:12px;line-height:16px;font-weight:500}
.msg.err{color:var(--err)}
.msg.ok{color:var(--ok)}
.check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;min-height:44px}
.check input{width:24px;height:24px;margin:0;accent-color:var(--ink)}
.notice{padding:16px;border-radius:var(--r-control);border:1px solid var(--line);background:var(--room)}
.notice.err{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.notice.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.notice b{display:block}
.btn:disabled,.btn.is-disabled{background:var(--room);border-color:var(--line);color:var(--ink-2);cursor:not-allowed;transform:none}
.btn.sm{min-height:40px;padding:0 16px}
.btn.is-busy{cursor:progress}
/* activation codes: literal data only */
.code-display{display:inline-block;font:500 24px/1 var(--mono);letter-spacing:.08em;padding:16px 24px;border-radius:var(--r-control);background:var(--room);border:1px solid var(--line);color:var(--ink);user-select:all;overflow-wrap:anywhere}
.receipt{display:grid;gap:16px;margin:0}
.receipt div{display:grid;gap:4px}
.receipt dt{font-size:12px;line-height:16px;color:var(--ink-2)}
.receipt dd{margin:0}
@media (min-width:700px){.receipt div{grid-template-columns:160px 1fr;gap:16px}.receipt dt{font-size:16px;line-height:24px}}

/* ---------- layout: article ---------- */
.article-head{display:grid;gap:24px;padding:32px 0 48px}
.article-head .pane{height:280px;--fs:120cqh;--pb:4cqh;--pos:30% 10%}
.article-head h1{font:500 32px/1.1 var(--font);letter-spacing:-.02em;max-width:18ch}
.article-head .meta{margin-top:16px}
@media (min-width:900px){
  .article-head{grid-template-columns:7fr 5fr;gap:64px;align-items:end;padding:64px 0 96px}
  .article-head .pane{height:auto;aspect-ratio:4/5;order:2;--fs:122cqh}
  .article-head h1{font-size:56px;line-height:1.04}
}
.prose{max-width:65ch;font-size:16px;line-height:24px}
.prose>*+*{margin-top:16px}
.prose h2{font:500 24px/32px var(--font);letter-spacing:-.01em;max-width:none;margin-top:48px}
.prose h3{font:600 16px/24px var(--font);margin-top:32px}
.prose h2+*,.prose h3+*{margin-top:8px}
.prose a{text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:24px;display:grid;gap:8px}
.prose ul li::marker{color:oklch(var(--l-ink) var(--c) var(--hue,var(--h-J)))}
.prose ol li::marker{font-weight:600;color:oklch(var(--l-ink) var(--c) var(--hue,var(--h-J)))}
.prose blockquote{margin:32px 0;padding:0 0 0 24px;border-left:2px solid oklch(var(--l-ink) var(--c) var(--hue,var(--h-J)));font-weight:500}
.prose figure{margin:32px 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:var(--r-window)}
.prose figcaption{font-size:12px;line-height:16px;color:var(--ink-2);margin-top:8px}
@media (min-width:900px){.prose{font-size:20px;line-height:28px}.prose>*+*{margin-top:24px}.prose h2{margin-top:64px}.prose h3{font-size:20px;line-height:28px}.prose figcaption{font-size:12px}}
.article-cta{max-width:65ch;margin:64px 0 96px;padding:32px;border-radius:var(--r-window);background:var(--room)}
.article-cta h2{font:500 24px/32px var(--font);max-width:none;letter-spacing:-.01em}
.article-cta p{margin-top:8px;color:var(--ink-2)}
.article-cta .pair{margin-top:24px;align-items:center}
.article-more{max-width:65ch;margin-top:-32px;padding-bottom:96px}

/* ---------- layout: guide ---------- */
.guide-head{padding:32px 0 8px}
.guide-head h1{font:500 32px/1.1 var(--font);letter-spacing:-.02em}
.guide-head .lead{margin-top:16px}
.guide{display:grid;gap:32px;padding:32px 0 96px}
.toc{font-size:16px}
.toc h2{font:500 16px/24px var(--font);letter-spacing:0;margin-bottom:8px}
.toc ol{list-style:none;padding:0;display:grid;gap:0;counter-reset:t}
.toc a{display:flex;gap:12px;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2)}
.toc a::before{counter-increment:t;content:counter(t);font-weight:600;color:oklch(var(--l-ink) var(--c) var(--hue,var(--h-J)));min-width:16px}
.toc a:hover,.toc a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.guide-body{max-width:720px}
.guide-sec{scroll-margin-top:24px}
.guide-sec+.guide-sec{margin-top:64px}
.guide-sec>h2{font:500 32px/1.15 var(--font);letter-spacing:-.02em;max-width:22ch}
.guide-sec>p{margin-top:16px;max-width:65ch}
.step-list{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:32px;counter-reset:s}
.step-list>li{display:grid;grid-template-columns:48px 1fr;gap:0 16px;counter-increment:s}
.step-list>li::before{content:counter(s);font:600 32px/1 var(--font);color:oklch(var(--l-ink) var(--c) var(--hue,var(--h-J)));grid-row:span 3}
.step-list h3{font:500 20px/1.3 var(--font);margin-bottom:8px}
.step-list p{color:var(--ink-2);max-width:56ch}
.step-list p+p{margin-top:8px}
.step-list img{display:block;max-width:100%;height:auto;margin-top:16px;border-radius:var(--r-control)}
.tip{margin-top:24px;padding:16px 24px;border-radius:var(--r-control);border:1px solid var(--line);max-width:65ch}
.tip b{display:block}
@media (min-width:900px){
  .guide-head{padding:64px 0 16px}
  .guide-head h1{font-size:56px;line-height:1.04}
  .guide{grid-template-columns:240px 1fr;gap:96px;padding-top:48px}
  .toc{position:sticky;top:24px;align-self:start}
}
@media (max-width:899px){.toc{border-bottom:1px solid var(--line);padding-bottom:16px}}

/* ---------- layout: narrow (forms, transactional) ---------- */
.narrow{padding-top:48px;padding-bottom:96px}
.narrow h1{font:500 32px/1.15 var(--font);letter-spacing:-.02em}
.narrow .lead{margin-top:16px;max-width:44ch}
.narrow .form{margin-top:32px}
.narrow .fine{margin-top:24px}
.narrow .done{margin-top:32px;display:grid;gap:16px;justify-items:start}
@media (min-width:900px){.narrow{padding-top:96px;padding-bottom:128px}.narrow h1{font-size:40px;line-height:1.2}}
@media (max-width:699px){.narrow .btn{width:100%}}

/* ---------- layout: feature (marketing interior) ---------- */
.feature-hero{display:grid;gap:32px;padding:32px 0 64px}
.feature-hero h1{font:500 32px/1.1 var(--font);letter-spacing:-.02em;max-width:14ch}
.feature-hero .lead{margin-top:16px}
.feature-hero .pair{margin-top:24px}
.feature-hero .pane{height:320px;--fs:120cqh;--pb:4cqh;--pos:30% 10%}
@media (min-width:900px){
  .feature-hero{grid-template-columns:7fr 5fr;gap:96px;align-items:center;padding:96px 0 112px;min-height:640px}
  .feature-hero h1{font-size:56px;line-height:1.04;max-width:12ch}
  .feature-hero .pane{height:auto;aspect-ratio:4/5;--fs:122cqh}
}
.feature-sec h2+p,.feature-sec h2+.lead{margin-top:16px}
.feature-sec p{max-width:56ch}
.feature-sec p+p{margin-top:16px}



/* home */
/* hero */
.hero{display:flex;flex-direction:column;padding-bottom:40px}
.hero .pane{border-radius:0;height:360px;flex:none;--fs:118cqh;--pb:2cqh;--pos:30% 10%;--img:url(john.webp);order:1}
.hero .copy{display:contents}
.hero header{order:0;padding:0 var(--pad)}
.hero .copy>*:not(header){order:2;margin-left:var(--pad);margin-right:var(--pad)}
.nav{display:flex;align-items:center;gap:20px;min-height:64px}
.nav .wm{margin-right:auto}
.nav a:not(.wm){text-decoration:none;font-size:16px;min-height:44px;display:none;align-items:center}
.nav a.keep{display:inline-flex}
.nav a.go{border:2px solid var(--ink);border-radius:var(--r-control);padding:0 16px;font-weight:500}
.hero h1{font:500 32px/1.1 var(--font);letter-spacing:-.02em;margin-top:24px;margin-bottom:16px}
.hero .lead{margin-bottom:24px}
.hero .pair{margin-bottom:8px}
.hero .fine{margin-top:16px;color:var(--ink-2)}
.hero .try{margin-top:4px}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(100svh,880px);padding-bottom:0}
  .hero .pane{height:auto;min-height:680px;--fs:133cqh;--pb:3cqh;--pos:17% 0;order:0}
  .hero .copy{display:flex;flex-direction:column;order:0;padding:0 var(--pad) 48px 64px}
  .hero header{padding:0}
  .hero .copy>*:not(header){margin-left:0;margin-right:0}
  .hero h1{font-size:56px;line-height:1.04;max-width:11ch;margin-top:auto;margin-bottom:24px}
  .hero .lead{margin-bottom:32px}
  .nav a:not(.wm){display:inline-flex}
  .nav{gap:24px}
}
@media (min-width:900px) and (max-width:1099px){.nav a.opt{display:none}}
@keyframes lift{from{--open:0}to{--open:1}}
@media (prefers-reduced-motion:no-preference){.hero .pane{animation:lift 1100ms var(--ease) 250ms both}}

/* steps */
.steps{display:grid;gap:40px;margin-top:48px;list-style:none;padding:0}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:0 16px;align-items:start}
.steps .n{font:600 56px/.9 var(--font);grid-row:span 2}
.steps h3{font:500 20px/1.3 var(--font);margin-bottom:8px}
.steps p{color:var(--ink-2);max-width:34ch}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:48px}.steps li{grid-template-columns:1fr;gap:16px}.steps .n{font-size:96px;grid-row:auto}}

/* shutter */
.shutter{background:var(--room)}
.shutter-grid{display:grid;gap:40px}
.shutter p.lead{margin-top:16px}
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.six .pane{height:150px;--fs:120cqh;--pb:4cqh;--pos:20% 0;--img:url(john.webp);border-radius:var(--r-control);--jx:center}
.six figcaption,.six .cap{font-size:12px;color:var(--ink-2);margin-top:8px}
.six figure{margin:0}
.alpha{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:24px 0 0;padding:0;list-style:none}
.alpha .pane{aspect-ratio:1/1.1;border-radius:var(--r-utility);--fs:112cqh;--pb:8cqh}
.alpha .pane.is-photo{border-radius:var(--r-utility)}
.shutter .note{font-size:12px;color:var(--ink-2);margin-top:16px;max-width:60ch}
@media (min-width:900px){
  .shutter-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .six .pane{height:220px}
  .alpha{grid-template-columns:repeat(13,1fr)}
}

/* letters and numbers */
.ln{display:grid;gap:48px;margin-top:48px}
.ln .block{display:grid;gap:24px;align-content:start}
.ln .pane{height:240px;max-width:420px;--fs:120cqh;--pb:6cqh}
.ln h3{font:500 20px/1.3 var(--font);margin-bottom:8px}
.ln .block div p{color:var(--ink-2);max-width:44ch}
.ln ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:44ch}
.ln li::marker{content:""}
.ln li{padding-left:0}
.after{display:grid;gap:32px;margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.after h3{font:500 20px/1.3 var(--font);margin-bottom:8px}
.after p{color:var(--ink-2);max-width:44ch;margin-bottom:8px}
@media (min-width:900px){
  .ln{grid-template-columns:1fr 1fr;gap:96px}
  .ln .pane{height:340px}
  .after{grid-template-columns:1fr 1fr;gap:96px}
}

/* family voice */
.voice{background:oklch(.955 .008 337)}
.voice-grid{display:grid;gap:40px;align-items:center}
.voice .pane{--hue:var(--h-G);--open:.62;height:300px;--fs:118cqh;--pb:6cqh;border-radius:var(--r-window)}
.voice .pane-cap{font-size:12px;color:var(--ink-2);margin-top:8px}
.voice p{max-width:46ch}
.voice p+p{margin-top:16px}
.voice .lead{margin-top:16px}
.voice .quiet{color:var(--ink-2)}
@media (min-width:900px){.voice-grid{grid-template-columns:5fr 7fr;gap:96px}.voice .pane{height:440px}}

/* privacy */
.privacy h2{font-size:32px;max-width:22ch}
@media (min-width:900px){.privacy h2{font-size:56px;line-height:1.04;max-width:14ch}}
.privacy-grid{display:grid;gap:32px;margin-top:40px}
.privacy dl{display:grid;gap:24px}
.privacy dt{font-weight:500;font-size:20px}
.privacy dd{color:var(--ink-2);max-width:40ch}
.privacy .except{margin-top:40px;color:var(--ink-2);max-width:60ch;font-size:16px}
@media (min-width:900px){.privacy-grid{grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px}}

/* story */
.story{background:var(--room)}
.story-grid{display:grid;gap:32px}
.story .text{display:grid;gap:20px;max-width:60ch}
.story .sig{font-weight:500}
@media (min-width:900px){.story-grid{grid-template-columns:5fr 7fr;gap:96px}}

/* pricing */
.price-grid{display:grid;gap:40px;align-items:start}
.price{margin-top:24px;font:600 96px/1 var(--font);letter-spacing:-.03em}
.incl{list-style:none;padding:0;display:grid;gap:12px;max-width:44ch}
.incl li{padding-left:0}
.buyrow{margin:24px 0 16px}
.fine{font-size:16px;color:var(--ink-2);max-width:44ch}
@media (min-width:900px){.price-grid{grid-template-columns:5fr 7fr;gap:96px}.price{font-size:128px}}

/* gift */
.gift{background:oklch(.955 .008 337);overflow:hidden}
.gift-grid{display:grid;gap:48px}
.gift h2{font-size:32px;max-width:14ch}
.gift .lead{margin-top:16px}
.gsteps{list-style:none;padding:0;margin:32px 0;display:grid;gap:20px;max-width:46ch;counter-reset:g}
.gsteps li{display:grid;grid-template-columns:32px 1fr;gap:8px;counter-increment:g}
.gsteps li::before{content:counter(g);font-weight:600;color:oklch(var(--l-ink) var(--c) var(--h-G))}
.gsteps b{display:block}
.gsteps span{color:var(--ink-2)}
.table{position:relative;container-type:inline-size;width:100%;max-width:760px;aspect-ratio:760/540;margin:0 auto}
.env{position:absolute;left:2.6cqw;top:27cqw;width:50cqw;height:35cqw;transform:rotate(-4deg);background:oklch(.62 .105 337);border-radius:var(--r-control);opacity:.9}
.front{position:absolute;left:12.6cqw;top:9cqw;width:39.5cqw;transform:rotate(-1.5deg);filter:drop-shadow(0 10px 20px rgba(60,20,50,.14))}
.front svg{display:block;width:100%;height:auto}
.back{position:absolute;left:58cqw;top:14cqw;width:37cqw;transform:rotate(3deg);background:#fff;border-radius:var(--r-object);padding:20px;box-shadow:0 10px 24px rgba(60,20,50,.12);font-size:12px;line-height:1.4}
.back .k{color:var(--ink-2);font-size:12px;display:block}
.back .say{font-size:16px;font-weight:500;line-height:1.3;margin:8px 0 16px}
.back .code{font:500 16px/1 var(--mono);letter-spacing:.04em;margin:4px 0 16px}
.back ol{margin:0;padding-left:16px;color:var(--ink-2)}
.back li+li{margin-top:4px}
.tcap{font-size:12px;color:var(--ink-2);margin-top:12px;text-align:center}
@media (max-width:700px){
  .table{aspect-ratio:auto;height:auto;container-type:normal;display:grid;justify-items:center;gap:0;padding:8px 0 16px}
  .env{display:none}
  .front{position:relative;left:auto;top:auto;width:220px;background:oklch(.62 .105 337);border-radius:var(--r-object)}
  .back{position:relative;left:auto;top:auto;width:min(100%,300px);margin-top:16px;margin-left:0}
}
@media (min-width:900px){.gift-grid{grid-template-columns:5fr 7fr;gap:48px;align-items:center}.gift h2{font-size:32px}}


/* final */
.final{background:var(--ink);color:#fff}
.final .pair{margin-top:32px}
.final h2{font-size:32px;max-width:16ch}
.final .btn{background:#fff;color:var(--ink);border-color:#fff}
.final .btn:hover{background:oklch(.92 .005 270);border-color:oklch(.92 .005 270)}
.final .link{color:#fff}
.final :focus-visible{outline-color:#fff}
@media (min-width:900px){.final h2{font-size:56px;line-height:1.04;max-width:12ch}}
.final p{color:oklch(.85 .005 270);margin-top:16px}

/* motion: one vocabulary, 150-250ms, --ease; enter only, nothing animates on load */
:root{interpolate-size:allow-keywords}
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:0s}
::view-transition-group(root){animation-duration:180ms;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
/* mobile menu: grows from its trigger */
.sh-more .menu{transform-origin:top right;transition:opacity 150ms var(--ease),transform 150ms var(--ease)}
.sh-more summary::after{transition:transform 200ms var(--ease)}
@starting-style{.sh-more .menu{opacity:0;transform:scale(.95)}}
/* FAQ: the answer opens, not snaps (falls back to a snap where ::details-content is unsupported) */
.faq-list details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size 250ms var(--ease),opacity 200ms var(--ease),content-visibility 250ms allow-discrete}
.faq-list details[open]::details-content{block-size:auto;opacity:1}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .sh-more .menu{transition:opacity 150ms var(--ease)}
  @starting-style{.sh-more .menu{transform:none}}
  .sh-more summary::after{transition:none}
  .faq-list details::details-content{transition:opacity 150ms var(--ease),content-visibility 150ms allow-discrete}
}