/* Public, account and setup pages share the same gallery materials as the app. */
body.public-page { color:var(--wall-text); --public-line:color-mix(in srgb, var(--edge-pigment) 14.90196%, transparent); }
.public-page :is(#app,#detailed-timeline) { max-width:1360px; margin:auto; padding:0 64px; }
.public-page :is(p,nav,section,article,form) { min-width:0; }
.public-page main { display:flow-root; }
.public-page main:focus { outline:none; }
.public-page [hidden] { display:none !important; }
.public-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; border-bottom:1px solid var(--public-line); }
.public-brand { display:inline-flex; align-items:center; gap:14px; color:var(--wall-text); font:400 32px/1 var(--editorial); letter-spacing:-.7px; }
.public-brand img { width:42px; height:42px; filter:var(--brand-filter); }
.public-header nav { display:flex; align-items:center; gap:30px; }
.public-header nav a,.public-secondary { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--wall-muted); font-size:12px; }
.public-header nav a { min-width:44px; justify-content:center; }
.public-header a:hover,.public-secondary:hover { color:var(--wall-text); }
.public-header .icon,.public-secondary .icon { width:16px; height:16px; }
.public-primary { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:13px 20px; border:1px solid color-mix(in srgb, var(--primary-border) 18.03922%, transparent); border-radius:10px; background:var(--primary-fill); color:var(--primary-text); font-size:13px; transition:background .18s; }
.public-primary:hover:not(:disabled) { background:var(--primary-hover); }
.public-primary .icon { width:17px; height:17px; }
.public-page :is(a,button,input,summary):focus-visible { outline:2px solid light-dark(var(--focus), var(--focus)); outline-offset:4px; }
.public-page :is(a,button,input,summary) { scroll-margin-block:24px; }
.public-page button:disabled { opacity:.55; cursor:default; }
.public-retry { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; color:var(--stone); font-size:12px; }
.public-footer { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:36px; padding:28px 0; border-top:1px solid var(--public-line); color:var(--wall-muted); font-size:11px; }
.public-wordmark { color:var(--wall-muted); font:400 25px var(--editorial); }
.public-footer nav { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
.public-footer nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--wall-muted); }
.public-footer a:hover { color:var(--wall-text); }
.account-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(48px,8vw,120px); max-width:1040px; min-height:calc(100svh - 260px); margin:64px auto; align-items:center; }
.account-story h1 { font:400 clamp(42px,4.5vw,64px)/1.06 var(--editorial); letter-spacing:-1.4px; margin:0 0 22px; }
.account-story>p { max-width:340px; color:var(--wall-muted); font-size:14px; line-height:1.85; }
.account-preview { display:grid; gap:0; max-width:340px; margin-top:40px; padding-top:14px; border-top:1px solid var(--public-line); }
.account-preview>div { display:flex; align-items:center; gap:17px; padding:16px 0; }
.account-preview .icon { width:19px; height:19px; color:var(--timeline-gold); }
.account-preview span { color:var(--wall-text); font-size:13px; line-height:1.6; }
.account-preview small { display:block; color:var(--wall-muted); font-size:11px; }
.account-panel { padding:clamp(28px,3.5vw,44px); border:1px solid color-mix(in srgb, var(--stone) 21.96078%, transparent); border-radius:24px; background:linear-gradient(135deg,color-mix(in srgb, var(--primary-fill) 3.52941%, transparent),transparent 65%),var(--surface); box-shadow:var(--gallery-shadow); }
.account-panel h2 { font:400 37px/1.15 var(--editorial); letter-spacing:-.6px; margin:0 0 16px; }
.account-panel>p { color:var(--wall-muted); font-size:13px; line-height:1.75; }
.account-panel .public-primary { width:100%; margin-top:28px; }
.account-panel .account-provider { display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; margin-top:16px; }
.account-provider .icon { width:14px; height:14px; }
.account-panel .account-notice { font-size:12px; margin-top:18px; color:var(--stone); }
.account-notice:empty { display:none; }
.account-divider { height:1px; background:var(--public-line); margin:26px 0 20px; }
.account-panel .account-switch { font-size:12px; }
.account-switch a { display:inline-flex; align-items:center; gap:5px; color:var(--wall-text); }
.account-switch .icon { width:12px; height:12px; }
.account-panel .account-fine { font-size:11px; margin-top:14px; }
.account-steps { display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:26px 0; font-size:11px; color:var(--wall-muted); }
.account-steps li { display:flex; align-items:center; gap:8px; }
.account-steps li>span { display:grid; place-items:center; width:25px; height:25px; border:1px solid var(--control-edge); border-radius:50%; font-size:10px; }
.account-steps .current { color:var(--wall-text); }
.account-steps .current>span { background:color-mix(in srgb, var(--timeline-gold) 12.54902%, transparent); color:var(--step-active-text); border-color:color-mix(in srgb, var(--timeline-gold) 50.19608%, transparent); }
.public-page .service-setup { margin:64px auto; }
.public-page .service-setup .public-brand { font-size:28px; }
.public-page .service-setup .public-brand img { width:36px; height:36px; }
@media(max-width:900px) {
  .public-page :is(#app,#detailed-timeline) { padding:0 32px; }
  .account-layout { gap:40px; }
}
@media(max-width:650px) {
  .public-page :is(#app,#detailed-timeline) { padding:0 22px; }
  .public-header { padding:18px 0; gap:12px; }
  .public-brand { font-size:28px; gap:10px; }
  .public-brand img { width:34px; height:34px; }
  .public-header nav { gap:16px; }
  .public-header .public-demo-link { display:none; }
  .account-layout { grid-template-columns:1fr; gap:30px; margin:40px auto; min-height:0; }
  .account-story h1 { font-size:42px; margin:0 0 16px; }
  .account-story>p { max-width:100%; font-size:13px; }
  .account-preview { display:none; }
  .account-panel { padding:28px 24px; border-radius:20px; }
  .account-panel h2 { font-size:32px; }
  .public-page .service-setup { margin:24px auto; padding:28px 22px; }
  .public-page :is(#app,#detailed-timeline) .service-setup { width:100%; margin:32px auto; }
  .public-footer { margin-top:24px; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  .public-footer nav { margin-left:0; gap:4px 18px; }
}
@media(prefers-reduced-motion:reduce) { .public-primary { transition:none; } }
@media(forced-colors:active) {
  .public-page :is(a,button,input,summary):focus-visible { outline-color:Highlight; }
  .public-primary { border:1px solid ButtonText; }
}

/* The entrance opens onto a display, with a single invitation to look around. */
.welcome-gallery { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:64px; align-items:center; padding:90px 0 80px; }
.public-hero { padding:64px 0; }
.welcome-gallery .public-hero { padding:0; }
.public-hero h1 { font:400 clamp(54px,5.6vw,80px)/1.04 var(--editorial); letter-spacing:-2px; margin:0 0 28px; }
.public-hero h1 em { color:var(--heading-accent); font-weight:400; }
.public-hero>p { max-width:440px; color:var(--wall-muted); font-size:14px; line-height:1.9; }
.public-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 25px; margin:32px 0 22px; }
.public-view { display:inline-flex; align-items:center; gap:24px; min-height:48px; padding:12px 18px; border:1px solid color-mix(in srgb, var(--timeline-gold) 37.64706%, transparent); border-radius:10px; color:var(--wall-text); background:color-mix(in srgb, var(--timeline-gold) 6.27451%, transparent); font-size:13px; transition:background .2s,border-color .2s; }
.public-view:hover { border-color:color-mix(in srgb, var(--timeline-gold) 56.47059%, transparent); background:color-mix(in srgb, var(--timeline-gold) 12.54902%, transparent); }
.public-view .icon { width:17px; height:17px; color:var(--timeline-gold); }
.public-reassurance { display:flex; align-items:center; gap:8px; color:var(--wall-muted); font-size:10px; line-height:1.6; }
.public-reassurance .icon { width:13px; height:13px; color:var(--stone); }
.sample-gallery { min-width:0; position:relative; }
.sample-note { margin:18px 0 0; color:var(--wall-muted); font-size:10px; text-align:center; }
.sample-wall { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:20px; align-items:start; }
.sample-card { min-width:0; padding:24px 22px; border:1px solid color-mix(in srgb, var(--stone) 23.13725%, transparent); border-radius:22px; background:var(--sample-card-fill); box-shadow:var(--gallery-shadow); }
.sample-card h3 { --name-size:31px; font-family:var(--editorial); line-height:1.15; margin:18px 0 22px; }
.sample-marker { display:inline-block; color:var(--wall-muted); font-size:10px; letter-spacing:.03em; }
.sample-facts { display:grid; gap:13px; }
.sample-fact { display:flex; align-items:center; gap:8px; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.sample-fact .icon { width:14px; height:14px; color:var(--stone); }
.sample-lit { color:var(--sample-text); background:linear-gradient(125deg,var(--sample-top),var(--sample-bottom)); border-color:color-mix(in srgb, var(--primary-border) 62.74510%, transparent); box-shadow:0 16px 45px color-mix(in srgb, var(--shadow-pigment) 20.00000%, transparent),inset 0 1px color-mix(in srgb, var(--highlight-pigment) 60.00000%, transparent),0 0 50px color-mix(in srgb, var(--sample-glow) 3.52941%, transparent); }
.sample-lit .sample-marker { color:var(--sample-muted); }
.sample-lit .icon { color:var(--sample-icon); }
.sample-daylight { margin-top:62px; background:var(--sample-blue-fill); border-color:color-mix(in srgb, var(--daylight) 23.13725%, transparent); }
.sample-daylight .icon { color:var(--daylight); }
.sample-event { grid-column:1/-1; justify-self:center; display:flex; align-items:center; gap:14px; min-width:0; width:min(100%,390px); padding:18px 24px; margin:4px 0 0; border:1px solid color-mix(in srgb, var(--timeline-gold) 21.96078%, transparent); border-radius:999px; background:var(--sample-event-fill); box-shadow:inset 0 1px color-mix(in srgb, var(--warm-highlight) 3.13725%, transparent); }
.sample-event>.icon { color:var(--timeline-gold); width:20px; height:20px; }
.sample-event>div { min-width:0; flex:1; }
.sample-event h3 { --name-size:26px; font-family:var(--editorial); line-height:1.2; }
.sample-event p { color:var(--wall-muted); font-size:10px; margin-top:7px; line-height:1.5; }
.sample-event p>span { padding:0 5px; }
.public-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; padding:38px 0; border-block:1px solid var(--public-line); }
.public-features article { display:flex; align-items:flex-start; gap:16px; }
.public-features article>.icon { color:var(--timeline-gold); width:20px; height:20px; margin-top:3px; }
.public-features h2 { font:400 25px/1.2 var(--editorial); margin:0 0 12px; }
.public-features p { color:var(--wall-muted); font-size:12px; line-height:1.8; max-width:290px; }
.public-availability { padding:26px 0 0; text-align:center; }
.public-availability p { color:var(--wall-muted); font-size:11px; line-height:1.7; }
.public-availability + .public-footer { margin-top:26px; }
@media(min-width:1360px) { .welcome-gallery { gap:90px; } }
@media(max-width:1050px) {
  .welcome-gallery { gap:36px; padding-block:64px; }
  .public-hero h1 { font-size:58px; }
  .sample-wall { gap:12px; }
  .sample-card { padding:22px 16px; }
  .sample-fact { font-size:10px; gap:6px; }
  .public-features { gap:26px; }
}
@media(max-width:800px) {
  .welcome-gallery { grid-template-columns:1fr; gap:52px; max-width:600px; margin:auto; }
  .public-hero>p { max-width:460px; }
  .sample-card { padding:26px; }
  .sample-fact { font-size:12px; }
  .sample-wall { gap:20px; }
  .public-features { grid-template-columns:1fr; gap:28px; max-width:600px; margin:auto; }
  .public-features p { max-width:100%; }
}
@media(max-width:450px) {
  .welcome-gallery { padding:44px 0; gap:40px; }
  .public-hero { padding:44px 0; }
  .public-hero h1 { font-size:clamp(44px,12vw,54px); letter-spacing:-1px; margin:0 0 24px; }
  .public-hero>p { font-size:13px; }
  .desktop-break { display:none; }
  .public-actions { gap:12px 20px; margin-top:26px; }
  .public-actions .public-secondary { font-size:11px; }
  .public-view { font-size:12px; gap:16px; }
  .sample-wall { grid-template-columns:1fr; gap:16px; }
  .sample-card { padding:24px; }
  .sample-card h3 { margin-block:12px 18px; }
  .sample-daylight { margin:0; }
  .sample-event { width:100%; padding:18px 22px; margin:0; }
  .public-features { padding-block:30px; }
}
@media(prefers-reduced-motion:reduce) { .public-view { transition:none; } }