@font-face{font-family:Bogue;src:url('https://llto.link/early-access/17fc9831f3d78b79/bogue-regular.woff2?v=licensed') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Bogue;src:url('https://llto.link/early-access/9cb0a0d377830200/bogue-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* Subset of the original color webfont; only this letter loads its required glyphs. */
@font-face{font-family:'LL Handwriting Teal';src:url('https://llto.link/early-access/e8b277aca637ebde/ll-handwriting-teal-welcome.woff2?v=welcome-copy-oct31') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'LL Sans';src:url('https://llto.link/early-access/2cf053ec5134ba48/ll-sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'LL Sans Variable+';src:url('https://llto.link/early-access/767541a53ce898f2/ll-sans-content.woff2') format('woff2');font-weight:420 500;font-display:swap}
:root{--ink:#27706b;--ink-dark:#27706b;--subcopy:#528581;--placeholder-ink:#8FAAA9;--cream:#fcfcf7;--form-scale:1;--action-layer:10}
body{font-family:'LL Sans',Arial,sans-serif;color:var(--ink-dark);isolation:isolate}
/* Fixed CSS sizes ignore the default browser font size; disable mobile text inflation. */
html{font-size:16px;-webkit-text-size-adjust:none;text-size-adjust:none;background:var(--sky-top);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--sky-bottom)}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}button,input,select{-webkit-tap-highlight-color:transparent}
button:not(.choice):focus-visible,select:focus-visible{outline:3px solid #257c87;outline-offset:5px}
button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}
/* Keyboard occlusion must not recompose the sky or either cloud layer. Native
   mobile uses the large viewport; the phone preview supplies its full page height. */
:root{--scene-height:100vh}
@supports(height:100lvh){:root{--scene-height:100lvh}}
.cloud-surface{position:fixed;inset:0;width:100%;height:var(--scene-height);border:0;pointer-events:none;background:transparent}
.sky-background,.cloud-surface{bottom:auto;height:var(--scene-height)}
.sky-stage{width:max(100vw,calc(var(--scene-height) * 1.7777777778));height:max(56.25vw,var(--scene-height))}
.cloud-background{z-index:1}.cloud-foreground{z-index:3}
.signup-main{position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:110px 32px 150px;overflow:clip}
.question{position:relative;width:100%;max-width:1222px;text-align:center}
/* Temporary visual copy used for the simultaneous question handoff. */
.question-outgoing{position:absolute!important;margin:0!important;pointer-events:none!important;overflow:visible}
/* Fixed type sizes: available width changes wrapping, not letter size. */
h1{font-family:Bogue,Georgia,serif;font-weight:400;font-size:80px;line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-feature-settings:'liga' 0;margin:0 auto;max-width:1222px;text-wrap:balance}
h1:focus{outline:none}
/* Only the child label rolls. A shared grid width keeps the prefix, wrapping,
   and heading height identical from the 1st through the 6th kid. */
.child-heading-slot{display:inline-grid;vertical-align:baseline;white-space:nowrap;overflow:clip;overflow-clip-margin:.12em}
.child-heading-slot>span{grid-area:1/1;text-align:left}
.child-heading-sizer{visibility:hidden;pointer-events:none}
.child-heading-outgoing{pointer-events:none}
/* Match Figma’s grayscale text rendering without changing its 420 weight. */
.description{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:'LL Sans Variable+','LL Sans',Arial,sans-serif;font-weight:420;font-size:32px;line-height:1.25;letter-spacing:-.01em;color:var(--subcopy);max-width:912px;margin:28px auto 0;text-wrap:balance}
.fields{width:min(100%,872px);margin:clamp(44px,4.792vw,92px) auto 0;display:flex;flex-direction:column;gap:24px}
/* One resting surface for text fields, dropdowns, and answer options. State
   rules change these color stops, never replace the gradient. */
@property --glass-fill-start{syntax:'<color>';inherits:false;initial-value:transparent}
@property --glass-fill-end{syntax:'<color>';inherits:false;initial-value:transparent}
.glass{--glass-fill-start:rgb(252 252 247 / .35);--glass-fill-end:rgb(252 252 247 / .48);border:1px solid transparent;border-radius:200px;background:linear-gradient(150deg,var(--glass-fill-start),var(--glass-fill-end));box-shadow:none;transition:--glass-fill-start 240ms ease-in-out,--glass-fill-end 240ms ease-in-out,opacity 240ms ease-in-out,transform 160ms}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.084vw,40px)}
/* Match the description rendering while retaining Figma’s option weight. */
.choice{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;min-height:clamp(100px,7.708vw,148px);padding:22px 36px;font-family:'LL Sans Variable+','LL Sans',Arial,sans-serif;font-size:32px;letter-spacing:-.02em;line-height:1.35;color:var(--ink);font-weight:480;border-radius:9999px}
@media(hover:hover){.choice:hover:not(:disabled){--glass-fill-start:#fffffa;--glass-fill-end:#fffffa}}
.choice.selected{--glass-fill-start:#fffffa;--glass-fill-end:#fffffa;color:var(--ink)}
/* Option focus uses the glass fill, never an outside ring. */
.choice:focus,.choice:focus-visible{outline:none;outline-offset:0}
.choice:focus-visible{--glass-fill-start:rgb(255 255 250 / .65);--glass-fill-end:rgb(255 255 250 / .65)}
.choice.selected:focus-visible{--glass-fill-start:#fffffa;--glass-fill-end:#fffffa}
.category-choices{gap:20px}.category-choices .choice{font-size:27px;min-height:108px;padding:20px 36px}
/* Full-width answers give the longer development responses room to wrap. */
.long-choices{grid-template-columns:1fr;gap:14px}
.long-choices .choice{min-height:88px;font-size:27px;padding:18px 36px}
@media(min-width:701px){
 .question[data-kind=multi] .fields:has(.long-choices){width:min(100%,1120px)}
 .question[data-kind=multi] .long-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){.long-choices .choice{min-height:64px;padding:14px 28px}}
/* Keep the exclusive option in place; mute it while other answers are chosen. */
.none-choice:disabled{opacity:.45;--glass-fill-start:rgb(255 254 250 / .12);--glass-fill-end:rgb(255 254 250 / .12);cursor:not-allowed}
.number-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.number-choices .choice{width:100px;min-height:100px;padding:10px}
.field-label,.date-fields>label{display:block;position:relative;width:100%;border:0;border-radius:200px}
/* Keep the insertion cursor matched to the question, including empty fields. */
.text-input{caret-color:var(--ink)}
/* Brighter directional glass edge: white highlights fade between opposite corners. */
.field-label::after,.date-fields>label::after,.choice::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;opacity:.75;pointer-events:none;background:linear-gradient(135deg,#fff 0%,#ffffffe6 18%,#ffffff24 42%,#ffffff14 56%,#ffffffcc 80%,#fff 100%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
select.glass{border-color:transparent;box-shadow:none}
.text-input{display:block;width:100%;height:110px;padding:24px 50px;font-size:32px;color:var(--ink);text-align:left;outline:none;border:1px solid transparent;border-radius:inherit;box-shadow:none;background:transparent}.text-input::placeholder{font-family:'LL Sans Variable+','LL Sans',Arial,sans-serif;font-weight:420;color:var(--placeholder-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;opacity:1}
/* Preserve the resting fill; hover and focus use a clearly brighter cream fill. */
.field-label:focus-within{--glass-fill-start:rgb(252 252 247 / .80);--glass-fill-end:rgb(252 252 247 / .90)}
/* Hover previews the focused fill; a focused field keeps that fill on pointer entry/exit. */
@media(hover:hover){
 .field-label:hover:not(:focus-within){--glass-fill-start:rgb(252 252 247 / .80);--glass-fill-end:rgb(252 252 247 / .90)}
 select.glass:hover{--glass-fill-start:#fffffa;--glass-fill-end:#fffffa}
}
/* Every text field uses its wrapper's shared glass surface. The email text can
   fade at its left edge without masking or duplicating the background. */
.email-field .text-input.is-left-clipped{mask-image:linear-gradient(to right,transparent var(--email-text-inset),#000 calc(var(--email-text-inset) + 24px));-webkit-mask-image:linear-gradient(to right,transparent var(--email-text-inset),#000 calc(var(--email-text-inset) + 24px))}
.question[data-kind=email] .fields,.question[data-kind=name] .fields,.question[data-kind=text] .fields,.question[data-kind=date] .fields,.question[data-kind=child] .fields{max-width:680px}
.date-fields{display:grid;grid-template-columns:1.55fr .8fr 1fr;gap:14px}.date-fields label{min-width:0}select{width:100%;height:92px;padding:16px 24px;font-size:22px;cursor:pointer;color:var(--ink);text-overflow:ellipsis}
/* Empty date controls use the same placeholder typography as text fields. */
.date-fields select:has(option[value=""]:checked),.date-fields option[value=""]{font-family:'LL Sans Variable+','LL Sans',Arial,sans-serif;font-weight:420;color:var(--placeholder-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
.date-fields option:not([value=""]){font-family:'LL Sans',Arial,sans-serif;font-weight:400;color:var(--ink)}
.date-input{width:100%}.date-wheels{display:none}
@media(max-width:700px){
 .date-input:has(.date-wheels) .date-fields{display:none}
 .date-wheels{position:relative;display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:8px;width:100%;height:240px}
 .date-wheels::before{content:'';position:absolute;top:96px;left:0;right:0;height:48px;border-block:1px solid #ffffffa6;background:rgb(255 254 250 / .15);pointer-events:none}
 .date-wheel{position:relative;height:240px;min-width:0;padding-block:96px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;touch-action:pan-y;outline:none;mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent)}
 .date-wheel::-webkit-scrollbar{display:none}
 .date-wheel:focus-visible{background:rgb(255 255 250 / .18);border-radius:16px}
 .date-wheel-row{height:48px;min-height:48px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-family:'LL Sans Variable+','LL Sans',sans-serif;font-size:26px;line-height:1;font-weight:480;color:var(--ink);opacity:.55;user-select:none;-webkit-user-select:none;cursor:pointer;-webkit-font-smoothing:antialiased}
 .date-wheel-row.is-current{opacity:1}.date-wheel-placeholder{font-family:'LL Sans Variable+','LL Sans',Arial,sans-serif;font-size:21px;font-weight:420;color:var(--placeholder-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;opacity:1}
}
fieldset{border:0;padding:0;margin:0;min-width:0;text-align:left}legend{font-size:18px;margin:0 0 10px 20px}.child-gender .choices{gap:16px}.child-gender .choice{min-height:80px;font-size:24px}
.question[data-kind=child] .fields{gap:20px;margin-top:clamp(44px,4.792vw,92px)}.question[data-kind=child] .text-input{height:84px}
.actions{margin-top:30px;min-height:64px;display:flex;align-items:center;justify-content:center}.next-button{background:#257c87;color:#fcfcf7;border:1px solid #ffffff90;min-height:56px;padding:14px 36px;font-size:20px}.next-button:hover{background:#206b75}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:5px;padding:14px 22px;font-size:18px}
.error{font-size:16px;line-height:1.4;color:#803f28;margin:16px auto 0;max-width:640px}.error:empty{display:none}
/* Center the question and answers; revealing Next must not shift that group. */
@media(min-width:701px){.signup-main{padding-block:120px}.question .actions{position:absolute;top:100%;left:0;width:100%}.question[data-kind=complete] .actions{position:static}}
@media(max-width:700px){.signup-main{padding:72px 22px 120px;align-items:flex-start;--question-top-space:72px}h1{font-size:34px;line-height:1.13}.description{font-size:16px;margin-top:20px}.fields{margin-top:34px;gap:16px}.choices{gap:14px}.choice{min-height:86px;padding:18px 24px}.category-choices{grid-template-columns:1fr;gap:10px}.category-choices .choice{min-height:64px;padding:14px 28px}.text-input{height:78px;font-size:21px;padding:20px 32px}.date-fields{gap:8px;grid-template-columns:1.4fr .85fr 1fr}select{font-size:16px;height:68px;padding:10px 12px}.actions{margin-top:24px}.next-button{font-size:18px;min-height:52px}.question[data-kind=child] .fields{gap:16px}.question[data-kind=child] .text-input{height:68px}.child-gender .choice{min-height:62px}}
@media(max-height:700px){.signup-main{align-items:flex-start;padding-top:90px;padding-bottom:100px}.fields{margin-top:30px}}

/* A loose 3 / 2 / 2 arrangement; DOM and reading order remain 0 through 6. */
@media(max-width:700px){
 .number-choices{--number-size:clamp(72px,22vw,88px);position:relative;display:block;width:min(100%,352px);height:calc(3 * var(--number-size) + 64px);margin-inline:auto}
 .number-choices .choice{position:absolute;width:var(--number-size);height:var(--number-size);min-height:var(--number-size);padding:10px}
 .number-choices .choice:nth-child(1){left:2%;top:14px}
 .number-choices .choice:nth-child(2){left:calc(49% - var(--number-size) / 2);top:0}
 .number-choices .choice:nth-child(3){right:0;top:20px}
 .number-choices .choice:nth-child(4){left:12%;top:calc(var(--number-size) + 36px)}
 .number-choices .choice:nth-child(5){right:8%;top:calc(var(--number-size) + 28px)}
 .number-choices .choice:nth-child(6){left:3%;top:calc(2 * var(--number-size) + 64px)}
 .number-choices .choice:nth-child(7){right:21%;top:calc(2 * var(--number-size) + 54px)}
}
@media(max-width:700px) and (max-height:600px){
 .signup-main:has(.question[data-step=kidCount]){padding-top:44px;--question-top-space:44px}
}


/* Keep true foreground overlap without letting its densest pixels hide inputs. */
.cloud-foreground{mask-image:linear-gradient(to bottom,transparent 35%,#0003 65%,#0006 80%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 35%,#0003 65%,#0006 80%,#000 100%)}
/* LDS Web buttons apply to actions only; answer choices retain the signup design. */
/* Keep the fill and decorative rim fully rounded in every size and state. */
.next-button,.text-button.skip{-webkit-appearance:none;appearance:none;border-radius:9999px}
.next-button{position:relative;isolation:isolate;border:0;min-height:64px;padding:19px 48px;background:linear-gradient(180deg,#50bcb5,#298a83);color:white;box-shadow:0 0 0 1.5px #0000000a;font-size:22px;line-height:26px;letter-spacing:.002em;font-weight:400;font-feature-settings:'liga' 0}
/* LDS Web / LG / Teal / Hug: 46px outer + 2px label + 2px rim per side. */
@media(min-width:701px){
 .next-button{height:64px;min-height:64px;padding:0 50px;white-space:nowrap}
 .next-button:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
}
.next-button::before,.text-button.skip::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:linear-gradient(180deg,#ffffff52,#00000029);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
.next-button::before{mix-blend-mode:soft-light}
.next-button:hover{background:linear-gradient(180deg,#58c2bb,#2d948c)}
.next-button:active{transform:translateY(1px)}
.next-button[type=submit]:not([hidden]){animation:next-grow 280ms cubic-bezier(.22,1,.36,1);transform-origin:center}
@keyframes next-grow{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes next-slide{from{opacity:0;transform:translateY(var(--next-enter-offset,100svh))}to{opacity:1;transform:translateY(0)}}
.text-button.skip{position:relative;isolation:isolate;border:0;min-height:40px;padding:10px 22px;background:rgb(255 255 255 / .15);color:#355c63;font-size:16px;line-height:19.2px;letter-spacing:.002em;text-decoration:none;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.text-button.skip::before{padding:1px;background:linear-gradient(#fff6,#00000029)}
/* Outside the animated form so Skip stays pinned to the screen on every step. */
#skip-question{position:fixed;z-index:var(--action-layer);top:calc(24px + env(safe-area-inset-top,0px) + var(--mobile-viewport-top,0px));right:calc(24px + env(safe-area-inset-right,0px));opacity:1;transition:opacity 200ms ease-in-out}
#skip-question.answered{opacity:0;pointer-events:none}
@media(max-width:700px){
 /* Center the 40px control in an invisible 44px title row below the safe area. */
 #skip-question{top:calc(2px + env(safe-area-inset-top,0px) + var(--mobile-viewport-top,0px));right:calc(16px + env(safe-area-inset-right,0px))}
}
/* Body-level actions sit above both cloud layers and the Safari edge treatments. */
.next-action{position:absolute;left:0;right:0;z-index:var(--action-layer);display:flex;justify-content:center;pointer-events:none}
.next-action:empty{display:none}
.next-action>.next-button{pointer-events:auto}
@media(max-width:700px){.next-action:not([data-step=welcome]){position:fixed;inset:0;top:0!important}}
.child-part-title{font-family:'LL Sans',Arial,sans-serif;font-size:22px;line-height:1.3;font-weight:400;margin:0;color:var(--ink)}
.child-part-title:focus{outline:none}
@media(max-width:700px){
 .next-button{font-size:18px;line-height:21.6px;min-height:52px;padding:15px 30px}
 /* LDS Web LG, with a fluid width and 24px viewport margins. */
 .next-button[type=submit]{position:fixed;bottom:calc(24px + var(--mobile-viewport-inset,0px));left:24px;right:24px;translate:none;z-index:1;margin:0;width:calc(100% - 48px);max-width:none;height:64px;min-height:64px;padding:19px 48px;font-size:22px;line-height:26px}
 .next-button::before{padding:1.5px}
 .next-button[type=submit]::before{padding:2px}
 .next-button[type=submit]:not([hidden]){animation-name:next-slide;animation-duration:380ms}
 .question[data-child-mode=sequential]{min-height:530px;display:flex;flex-direction:column}
 .question[data-child-mode=sequential] .fields{margin-top:44px;min-height:190px;gap:24px;justify-content:flex-start}
 .child-part-fields{display:flex;min-height:100px;flex-direction:column;justify-content:center}
 .question[data-child-mode=sequential] .actions{min-height:112px;flex-direction:column;gap:4px;margin-top:0}
}
.question[data-step=coParent] .choices{grid-template-columns:1fr;gap:18px}.question[data-step=coParent] .choice{min-height:92px}
@media(max-width:700px){.question[data-step=coParent] .choice{min-height:78px}.question[data-step=job] .choices,.question[data-step=role] .choices{grid-template-columns:1fr}}

/* Use the category reference size for every mobile option label. */
@media(max-width:700px){.question .choice{font-size:18px}}

html[data-review] *{animation:none!important;transition:none!important}
/* Responsive adaptation of the revised desktop typography and spacing. */
@media(max-width:700px){.description{font-size:20px;line-height:1.25;margin-top:20px}.fields{margin-top:44px}}
/* Mobile scroll ends after the content, not an empty action placeholder. */
@media(max-width:700px){
 .signup-main{padding-bottom:24px}
 .actions{min-height:0}
 .actions:not(:has(#restart)){margin-top:0}
 /* 64px Next + 24px below it + 24px between it and the last answer. */
 body:has(.next-action .next-button[type=submit]:not([hidden])) .signup-main{padding-bottom:112px}
 .question[data-child-mode=sequential]{min-height:0}
 .question[data-child-mode=sequential] .fields{min-height:0}
 .question[data-child-mode=sequential] .actions{min-height:0;margin-top:0}
}
/* https://joshpuckett.me/seamless-mobile-safari
   Solid viewport edges give Safari colors to extend behind its controls.
   Fade only decorative layers; never paint a fade over inputs or Next.
   Decorative edges stay on the full scene when the keyboard covers its bottom. */
@media(max-width:700px),(pointer:coarse){
 :root{
  --edge-top-size:max(12px,env(safe-area-inset-top,0px));
  --edge-bottom-size:max(12px,env(safe-area-inset-bottom,0px));
  --edge-fade:48px;
  --scene-edge-mask:linear-gradient(to bottom,transparent var(--edge-top-size),#000 calc(var(--edge-top-size) + var(--edge-fade)),#000 calc(100% - var(--edge-bottom-size) - var(--edge-fade)),transparent calc(100% - var(--edge-bottom-size)));
 }
 .edge-top::after,.edge-bottom::after{content:'';position:fixed;left:0;right:0;z-index:4;pointer-events:none}
 .edge-top::after{top:0;height:var(--edge-top-size);background:var(--sky-top)}
 .edge-bottom::after{top:calc(var(--scene-height) - var(--edge-bottom-size));height:var(--edge-bottom-size);background:var(--sky-bottom)}
 .sky-background::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,var(--sky-top) var(--edge-top-size),transparent calc(var(--edge-top-size) + var(--edge-fade)),transparent calc(100% - var(--edge-bottom-size) - var(--edge-fade)),var(--sky-bottom) calc(100% - var(--edge-bottom-size)))}
 .cloud-background{mask-image:var(--scene-edge-mask);-webkit-mask-image:var(--scene-edge-mask)}
 .cloud-foreground{mask-image:linear-gradient(to bottom,transparent 35%,#0003 65%,#0006 80%,#000 100%),var(--scene-edge-mask);-webkit-mask-image:linear-gradient(to bottom,transparent 35%,#0003 65%,#0006 80%,#000 100%),var(--scene-edge-mask);-webkit-mask-composite:source-in;mask-composite:intersect}
 .signup-main{padding-left:calc(22px + env(safe-area-inset-left,0px));padding-right:calc(22px + env(safe-area-inset-right,0px));padding-top:calc(var(--question-top-space,112px) + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
 body:has(.next-action .next-button[type=submit]:not([hidden])) .signup-main{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:700px){
 .next-button[type=submit]{bottom:calc(24px + max(env(safe-area-inset-bottom,0px),var(--mobile-viewport-inset,0px)))}
}

/* The Homepage Founder Note's paper, with the original welcome as a letter.
   The sheet stays between the two cloud layers; Get started stays above them. */
.signup-main:has(.question[data-kind=welcome]){align-items:center;padding:56px 32px}
.question[data-kind=welcome]{isolation:isolate;max-width:912px;padding:56px 132px;text-align:left;background:#fffffa url('https://llto.link/early-access/c472201256725fcc/welcome-paper.webp?v=full-detail') center top / auto 829.474px repeat-y;box-shadow:0 738.055px 103.486px #0000,0 472.073px 94.239px #00000003,0 265.982px 79.706px #00000005,0 118.018px 59.009px 0 #0000000a,0 29.945px 32.587px #0000000a}
/* Keep the paper grain at the original 912 × 829.474 Figma frame scale.
   Cover enlarged it with the long letter (especially on mobile), losing the
   fine paper texture. Crossfade an offset copy across the repeat boundaries
   to continue the original material without a visible horizontal seam. */
.question[data-kind=welcome]::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('https://llto.link/early-access/c472201256725fcc/welcome-paper.webp?v=full-detail') center 414.737px / auto 829.474px repeat-y;mask-image:linear-gradient(#000,transparent 50%,#000);mask-size:100% 829.474px;mask-repeat:repeat-y;-webkit-mask-image:linear-gradient(#000,transparent 50%,#000);-webkit-mask-size:100% 829.474px;-webkit-mask-repeat:repeat-y}
.question[data-kind=welcome] h1,.question[data-kind=welcome] .fields{font-family:'LL Handwriting Teal',cursive;font-weight:400;font-synthesis:none;color:#246662;letter-spacing:0}
/* Retain an accessible document heading without a visible letter title. */
.question[data-kind=welcome] h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.question[data-kind=welcome] .fields{width:100%;max-width:none;margin:0;gap:22px;font-size:26px;line-height:1.45}
.question[data-kind=welcome] .fields p{margin:0}
.question[data-kind=welcome] .actions{display:none}
.welcome-action-slot{min-height:64px;margin-block:14px}
.next-action[data-step=welcome] .next-button{animation-name:next-grow}
@media(max-width:700px){
 body:has(.next-action .next-button[type=submit]:not([hidden])) .signup-main:has(.question[data-kind=welcome]){padding:24px 16px}
 .question[data-kind=welcome]{padding:56px 24px}
 .question[data-kind=welcome] .fields{font-size:24px;line-height:1.45;margin-top:0;gap:22px}
 .next-action[data-step=welcome] .next-button[type=submit]{position:relative;inset:auto;width:calc(100% - 80px);max-width:360px;animation-name:next-grow}
}