/* TrainCove landing (R-152, R-153, R-188). The owner's night-horizon Earth is the scene; a product view rises from its
   bottom edge; the sections below say what works today. Same-origin assets only, no inline styles (CSP).
   Direction: docs/superpowers/specs/2026-10-30-traincove-design-direction.md (punctual, plain-spoken, a little warm;
   a railway at night; the timetable; the line). Method: unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. */

/* ---------- fonts: self-hosted latin and greek subsets. Inter for everything, JetBrains Mono for times and figures */
@font-face{font-family:Inter;src:url('assets/fonts/inter-latin-variable.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url('assets/fonts/inter-greek-variable.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono-latin-variable.woff2') format('woff2');font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono-greek-variable.woff2') format('woff2');font-weight:400 500;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

:root{
  /* night ramp, from the sky of the photo */
  --night:#020a1a;           /* page */
  --night-2:#0a1527;         /* raised panel */
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.14);
  --ink:#ffffff;             /* primary, 19.8:1 */
  --soft:#c9d6ea;            /* secondary, 13.5:1 */
  --quiet:#a9b8cf;           /* muted, 9.8:1 */
  --signal:#8fb8ff;          /* the accent on night, 9.9:1 */
  --hover:#dbe7fa;
  /* the app's light ramp, inside the product view */
  --paper:#ffffff;
  --side:#f7f8fa;
  --line-c:#e6e8ec;
  --row:#eff1f4;
  --graphite:#17191c;        /* 17.6:1 */
  --pencil:#5b6270;          /* 6.1:1 */
  --muted:#6b7280;           /* 4.8:1 */
  --accent:#1565d0;          /* the logo hue, 5.5:1 with white */
  --accent-tint:#eaf0fc;
  /* type */
  --body:Inter,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* space and motion */
  --gutter:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
@media (min-width:600px){:root{--gutter:32px}}
@media (min-width:1280px){:root{--gutter:48px}}

/* one language at a time: the document's lang decides; app.js switches it */
:root[lang="el"] [lang="en"]:not(.lx),:root[lang="en"] [lang="el"]:not(.lx):not(.d){display:none !important}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
p,h1,h2,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block}
a{color:inherit}
time{font:inherit}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
main:focus{outline:none}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.skip{position:absolute;left:var(--gutter);top:-64px;z-index:10;padding:8px 16px;border-radius:8px;background:var(--ink);color:var(--night);font-weight:500;text-decoration:none}
.skip:focus{top:16px}

/* ---------- the scene: the owner's 3840 x 2160 photo, served unmodified and only scaled by the browser.
   Its horizon is 54% down the image. The layer is a focal-point cover one viewport tall: the image is at least the
   viewport's width and at least 115% of its height (123% on portrait screens), offset so that 54% of the image lands at
   62% of the viewport (64% on portrait), the lower middle, at every aspect ratio. It scrolls away with the hero. */
body{position:relative;isolation:isolate}
.sky{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;z-index:-1;pointer-events:none;background-color:#031534;background-image:url("assets/earth-horizon.webp");background-repeat:no-repeat;
  background-size:max(100vw, calc(115svh * 16 / 9)) auto;
  background-position:50% calc(62svh - 0.54 * max(56.25vw, 115svh))}
.sky::before{content:'';position:absolute;inset:0;background:#031534;opacity:0;transition:opacity .5s var(--ease)}
.reveal:not(.sky-ready) .sky::before{opacity:1}
/* scrims, never on the image itself: a soft pool behind the copy, and a fade into the page at the bottom edge */
.sky::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 62% 44% at 50% 30%,rgba(2,10,26,.5) 0%,rgba(2,10,26,0) 100%),
  linear-gradient(0deg,#020a1a 0%,rgba(2,10,26,.72) 12%,rgba(2,10,26,0) 36%)}
@media (max-aspect-ratio: 1/1){
  .sky{background-size:max(100vw, calc(123svh * 16 / 9)) auto;
    background-position:50% calc(64svh - 0.54 * max(56.25vw, 123svh))}
}

/* ---------- navigation, full width on the page gutter: the logo and the four links on the left; Sign in as text,
   one button and the language switch on the right */
.nav{position:relative;z-index:3;display:flex;align-items:center;gap:24px;padding:24px var(--gutter) 0}
.brand{display:block;flex:none;border-radius:4px}
.logo{width:auto;height:24px}
.menu{display:flex;align-items:center;gap:32px;flex:1;justify-content:space-between;margin-left:16px}
.links{display:flex;gap:4px}
.links a,.signin{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:8px;color:var(--soft);font-size:14px;font-weight:500;line-height:20px;text-decoration:none;transition:color .16s var(--ease),background-color .16s var(--ease)}
.links a:hover,.signin:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.account{display:flex;align-items:center;gap:8px}
.langs{display:flex;flex:none;padding:2px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--hair-2)}
.lx{min-width:36px;min-height:32px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--quiet);font:500 12px/16px var(--mono);cursor:pointer;transition:color .16s var(--ease),background-color .16s var(--ease)}
.lx:hover{color:var(--ink)}
.lx[aria-pressed="true"]{background:rgba(255,255,255,.12);color:var(--ink)}
.menu-btn{display:none}

/* buttons: one white primary on the night */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:8px;background:var(--ink);color:var(--night);font:500 16px/1 var(--body);text-decoration:none;white-space:nowrap;transition:background-color .16s var(--ease),transform .16s var(--ease)}
.btn:hover{background:var(--hover)}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:36px;padding:0 16px;font-size:14px}

/* ---------- the hero copy, centred on the calm sky between the nav and the product view */
main{display:block}
.intro{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(78svh - 60px);padding:48px var(--gutter) 96px;text-align:center}
h1{max-width:12em;font:600 clamp(40px,5.6vw,72px)/1.04 var(--body);letter-spacing:-.02em;text-wrap:balance}
.lead{max-width:36rem;margin-top:20px;color:var(--soft);font-size:clamp(17px,1.25vw,18px);line-height:1.5;text-wrap:balance}
.actions{margin-top:32px}
@media (min-width:900px){.lead .s2{display:block}}
@media (min-width:1000px){h1{letter-spacing:-.03em}} /* -0.03em only from 56px */

/* ---------- the product view: the app's light theme, today's timetable and one customer's line */
.pv{position:relative;z-index:1;width:min(1120px,100% - 2 * var(--gutter));margin:0 auto}
.win{display:grid;grid-template-columns:200px minmax(0,1fr);height:520px;overflow:hidden;border-radius:16px 16px 0 0;background:var(--paper);color:var(--graphite);font-size:14px;line-height:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 -8px 48px rgba(2,10,26,.6);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.win b{font-weight:500}
.win small{display:block;color:var(--pencil);font-size:13px;line-height:20px}
.win-side{padding:20px 12px;background:var(--side);border-right:1px solid var(--line-c)}
.ws-name{padding:0 8px 16px;font-weight:500}
.ws-nav{display:grid;gap:2px}
.ws-nav li{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:4px;color:var(--pencil);font-weight:500}
.ws-nav li.on{background:var(--accent-tint);color:var(--accent)}
.count{margin-left:auto;color:var(--accent);font:500 12px/16px var(--mono)}

.win-main{padding:20px 24px;min-width:0}
.wm-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line-c)}
.wm-title{font-size:20px;line-height:28px;font-weight:500}
.wm-date{color:var(--muted);font:400 12px/16px var(--mono)}
.tt-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px 0;border-bottom:1px solid var(--row)}
.tt-row time{font:500 14px/20px var(--mono);font-variant-numeric:tabular-nums;color:var(--graphite)}
.tt-row.task time{color:var(--pencil);font-size:12px}
.tt-st{display:grid;justify-items:end;gap:2px;padding-top:2px;color:var(--muted);font:400 12px/16px var(--mono);white-space:nowrap}
.tt-note{font-style:normal}
.tt-now{display:grid;grid-template-columns:72px auto minmax(0,1fr);align-items:center;gap:12px;height:24px;color:var(--accent);font:500 12px/16px var(--mono)}
.tt-now::after{content:'';height:1px;background:var(--accent)}
.tt-row.next{margin:0 -24px;padding:12px 24px;background:var(--side)}
.tt-row.next::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.tt-row.next time,.tt-row.next .tt-st{color:var(--accent)}

/* the signature: a 2px rail in signal blue with 8px stations, one customer's events in order */
.line{position:relative;padding-top:16px}
.line::before{content:'';position:absolute;left:3px;top:24px;bottom:28px;width:2px;background:var(--accent)}
.st{position:relative;padding:0 0 16px 24px}
.st::before{content:'';position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.st-next::before{background:var(--paper);box-shadow:inset 0 0 0 2px var(--accent)}
.st time{display:block;color:var(--muted);font:400 12px/16px var(--mono);font-variant-numeric:tabular-nums}
.st b{display:block}
.st-next b,.st-next time{color:var(--accent)}

/* ---------- the sections: one story (Eleni Hair Studio and her customer Nikos), one product moment per section,
   split left and right with the visual at least half the width, and one full-width moment (the ticket) */
.sections{max-width:1280px;margin:0 auto;padding:64px var(--gutter) 0}
.note-line{margin-bottom:24px;color:var(--quiet);font:400 13px/20px var(--mono)}
.stamp{margin-bottom:12px;color:var(--quiet);font:400 12px/16px var(--mono)}
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:48px;align-items:center;padding:56px 0;scroll-margin-top:24px}
.sec-flush{padding-top:0}
.sec-right .sec-text{grid-column:1 / span 5}
.sec-right .sec-vis{grid-column:6 / -1}
.sec-left .sec-text{grid-column:8 / -1;grid-row:1}
.sec-left .sec-vis{grid-column:1 / span 7;grid-row:1}
#phone .sec-vis{grid-column:1 / span 6}
#phone .sec-text{grid-column:7 / -1}
.sec-stack .sec-text{grid-column:1 / span 6}
.sec-stack .sec-vis{grid-column:1 / -1;margin-top:40px}
.vis-pair .stage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
.sec-band .sec-text{grid-column:1 / span 4}
.sec-band .sec-vis{grid-column:5 / -1}
.sec-full .sec-text{grid-column:1 / span 6}
.sec-full .sec-vis{grid-column:1 / -1;margin-top:56px}
h2{font:500 clamp(32px,3.4vw,48px)/1.08 var(--body);letter-spacing:0;text-wrap:balance}
@media (min-width:1177px){h2{letter-spacing:-.02em}} /* -0.02em only from 40px */
.sec-lead{max-width:28rem;margin-top:16px;color:var(--soft);font-size:18px;line-height:28px;text-wrap:pretty}
.tag{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--soft);font:400 12px/16px var(--mono)}
.tag::before{content:'';width:8px;height:8px;border-radius:50%}
.tag-live::before{background:var(--signal)}
.tag-pilot::before{box-shadow:inset 0 0 0 2px var(--signal)}
.tag-dev::before{box-shadow:inset 0 0 0 1px var(--quiet)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* the app's light surfaces, floating on the night */
.stage{position:relative}
.card{background:var(--paper);color:var(--graphite);border-radius:16px;font-size:14px;line-height:20px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.card b{font-weight:500}
.card small{display:block;color:var(--pencil);font-size:13px;line-height:20px}
.col-title{color:var(--pencil);font-size:13px;font-weight:500}

/* 1. the record */
.rec-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line-c)}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent-tint);color:var(--accent);font-weight:500}
.rec-name{font-size:18px;line-height:24px;font-weight:500}
.rec-sub{color:var(--muted);font-size:13px}
.rec-tag{margin-left:8px;padding:2px 8px;border-radius:4px;background:#eef0f2;color:var(--pencil);font-size:12px;line-height:16px;font-weight:500;vertical-align:2px}
.wrap{font-size:13px;overflow-wrap:anywhere}
.rec-body{display:grid;grid-template-columns:240px minmax(0,1fr)}
.fields{padding:8px 24px 16px;background:var(--side);border-right:1px solid var(--line-c);border-bottom-left-radius:16px}
.fields div{padding:12px 0;border-bottom:1px solid var(--line-c)}
.fields div:last-child{border-bottom:0}
.fields dt{color:var(--muted);font-size:12px;line-height:16px}
.fields dd{margin-top:2px;font-weight:500}
.accent{color:var(--accent)}
.activity{padding:20px 24px 8px}

/* 2. the inbox */
.inbox{display:grid;grid-template-columns:208px minmax(0,1fr);overflow:hidden}
.convs{background:var(--side);border-right:1px solid var(--line-c)}
.convs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding:12px 16px;border-bottom:1px solid var(--line-c)}
.convs li.on{background:#eef0f2}
.convs time{color:var(--muted);font:400 12px/20px var(--mono)}
.convs small{grid-column:1 / -1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line-c)}
.th-subj{font-size:16px;line-height:24px;font-weight:500}
.th-meta{color:var(--pencil);font-size:13px}
.msgs{position:relative;padding:20px 20px 8px 44px}
.msgs::before{content:'';position:absolute;left:23px;top:28px;bottom:48px;width:2px;background:var(--accent)}
.msg{position:relative;padding-bottom:16px}
.msg::before{content:'';position:absolute;left:-24px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--accent)}
.msg.out::before{background:var(--accent);box-shadow:none}
.msg.note::before{left:-24px;top:18px;background:#6d4bd8;box-shadow:none}
.who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.who time{color:var(--muted);font:400 12px/16px var(--mono)}
.msg p+p{margin-top:2px}
.msg.note{margin-bottom:16px;padding:12px 16px;border-radius:4px;background:var(--side);box-shadow:inset 2px 0 0 #6d4bd8}
.msg.note .who{color:#6d4bd8}
.msg small{margin-top:4px;color:var(--muted);font-size:12px}

/* 3. the week and the ticket */
.vis-full .stage{display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:center}
.week{padding:20px 120px 24px 24px}
.wk-head{display:flex;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line-c)}
.wk-title{font-size:16px;line-height:24px;font-weight:500}
.wk-sub{color:var(--muted);font:400 12px/16px var(--mono)}
.days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding-top:16px}
.day>p{padding-bottom:8px;color:var(--pencil);font:500 12px/16px var(--mono)}
.day.today>p{color:var(--accent)}
.day ol{display:grid;gap:8px}
.day li{display:grid;place-items:center;height:36px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-c);color:var(--pencil);font:400 13px/1 var(--mono)}
.day li.mine{background:var(--accent);box-shadow:none;color:#fff;font-weight:500}
.ticket{position:relative;z-index:2;margin-left:-96px;transform:rotate(-2deg);filter:drop-shadow(0 28px 32px rgba(0,0,0,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.3));color:var(--graphite)}
.tk-main{padding:24px 24px 20px;border-radius:16px 16px 0 0;background:var(--paper);
  -webkit-mask:radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) 100% 0/51% 100% no-repeat}
.tk-stub{position:relative;padding:20px 24px 24px;border-radius:0 0 16px 16px;background:var(--side);
  -webkit-mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) 100% 0/51% 100% no-repeat}
.tk-stub::before{content:'';position:absolute;left:20px;right:20px;top:0;border-top:1px dashed #c9cdd4}
.tk-kicker{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;font-weight:500}
.tk-when{margin-top:8px;font-size:28px;line-height:36px;font-weight:500}
.tk-when .mono{color:var(--accent);font-weight:500}
.tk-facts{display:grid;gap:8px;margin-top:16px}
.tk-facts div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}
.tk-facts dt{color:var(--muted);font-size:13px}
.tk-facts dd{font-weight:500}
.route{position:relative;display:flex;justify-content:space-between;margin-top:24px;padding-top:16px}
.route::before{content:'';position:absolute;left:4px;right:4px;top:3px;height:2px;background:var(--accent)}
.route li{position:relative;display:grid;gap:2px;font-size:12px;line-height:16px}
.route li::before{content:'';position:absolute;top:-16px;left:0;width:8px;height:8px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--accent)}
.route li.done::before{background:var(--accent);box-shadow:none}
.route li:last-child{text-align:right}
.route li:last-child::before{left:auto;right:0}
.route time{color:var(--muted);font-family:var(--mono)}
.tk-stub p:first-child{color:var(--muted);font-size:12px}
.tk-ref{margin-top:4px;font:500 20px/28px var(--mono);letter-spacing:.04em}
.tk-link{margin-top:8px;color:var(--muted);font-size:12px}

/* 4. one route of steps, and the advisor's recommendation */
.flow{padding:20px 24px 8px}
.fl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line-c)}
.fl-title{font-size:16px;line-height:24px;font-weight:500}
.fl-sub{color:var(--muted);font-size:13px}
.switch,.toggle{position:relative;flex:none;width:36px;height:20px;border-radius:10px;background:#d5d9e0}
.switch.on{background:var(--accent)}
.switch.on::after{left:18px}
.switch::after,.toggle::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.advice{position:relative;padding:24px;background:var(--night-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2),0 32px 64px -16px rgba(0,0,0,.7)}
.adv-kicker{color:var(--signal);font-size:13px;font-weight:500;line-height:20px}
.adv-title{margin-top:4px;font-size:18px;font-weight:500;line-height:26px}
.adv-why{margin-top:8px;color:var(--soft);font-size:14px;line-height:22px}
.adv-figs{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.adv-figs dt{color:var(--quiet);font-size:13px;line-height:20px}
.adv-figs dd{margin-top:4px;font:500 14px/20px var(--mono);font-variant-numeric:tabular-nums}

/* 5. a phone, built in code, with the call summary */
.vis-phone .stage{display:grid;justify-items:center}
.phone{position:relative;width:320px;height:600px;padding:12px;border-radius:52px;background:linear-gradient(160deg,#24272d,#0d0f12);transform:rotate(-3deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 3px #0a0b0d,0 48px 96px -24px rgba(0,0,0,.75)}
.phone::before{content:'';position:absolute;z-index:2;left:50%;top:24px;width:96px;height:28px;margin-left:-48px;border-radius:14px;background:#0a0b0d}
.ph-screen{position:relative;height:100%;padding:64px 20px 20px;border-radius:40px;background:var(--side);color:var(--graphite);font-size:13px;line-height:18px;overflow:hidden}
.ph-bar{position:absolute;left:36px;top:28px;font-size:13px;font-weight:500}
.ph-app{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:500}
.ph-caller{margin-top:12px;font-size:20px;line-height:28px;font-weight:500}
.ph-meta{color:var(--muted);font-size:12px}
.bubbles{display:grid;gap:8px;margin-top:16px}
.bubbles li{max-width:88%;padding:8px 12px;border-radius:14px}
.bubbles .ai{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-c);border-bottom-left-radius:4px}
.bubbles .caller{justify-self:end;background:#e3e7ee;border-bottom-right-radius:4px}
.ph-sum{margin-top:16px;padding:12px 16px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-c)}
.ph-label{color:var(--muted);font-size:12px}
.ph-sum p+p{margin-top:2px;font-size:14px;line-height:20px}
.ph-out{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:500}
.ph-out::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ph-foot{position:absolute;left:20px;right:20px;bottom:24px;color:var(--muted);font-size:12px;text-align:center}

/* 6. the change log and do-not-contact */
.log{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.log-main,.log-side{padding:20px 24px 16px}
.log-side{border-left:1px solid var(--line-c)}
.changes{margin-top:8px}
.changes li:last-child{border-bottom:0}
.changes li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 12px;padding:12px 0;border-bottom:1px solid var(--line-c)}
.changes time{grid-row:span 2;color:var(--muted);font:400 12px/20px var(--mono)}
.changes span{color:var(--pencil)}
.dnc{margin-top:8px}
.dnc li{display:flex;align-items:center;gap:10px;height:44px;border-bottom:1px solid var(--line-c);color:var(--pencil)}
.dnc li:last-child{border-bottom:0}
.dnc span{color:var(--graphite);font-weight:500}
.dnc .toggle{margin-left:auto}
.dnc small{width:80px;color:var(--muted);font-size:12px}

/* ---------- the close: the horizon comes back as one scene band behind the last call to action (in main) and the
   footer (its own landmark). The band's copy sits on a dark pool; the footer on the night fade. */
/* Owner 2026-11-14: the band stops just above the horizon, so only the first blue glow shows under the call to action and
   the footer follows at once (no Earth surface). The scene keeps its own focal point (band height below), the section crops
   it at 69% of the band, a clean edge right where the glow is brightest (owner: no added fade or light of our own). */
.close-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:calc(0.69 * max(560px,80svh));padding:96px var(--gutter) 64px;text-align:center}
.close-cta .close-actions{margin-bottom:auto}
.close-cta h2{max-width:16em}
/* the band's own focal point, like the hero's: the photo's horizon (54% down the image) lands at 70% of the band at every
   aspect ratio, so the copy in the top half always sits on dark sky */
.close-sky{--band:max(560px,80svh);position:absolute;left:0;right:0;top:0;z-index:-1;height:var(--band);pointer-events:none;background:var(--night) url("assets/earth-horizon.webp") no-repeat;
  background-size:max(100vw, calc(var(--band) * 16 / 9)) auto;
  background-position:50% calc(0.7 * var(--band) - 0.54 * max(56.25vw, var(--band)))}
.close-sky::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 56% 40% at 50% 26%,rgba(2,10,26,.6) 0%,rgba(2,10,26,0) 100%),linear-gradient(180deg,#020a1a 0%,rgba(2,10,26,.4) 24%,rgba(2,10,26,0) 44%,rgba(2,10,26,0) 74%,rgba(2,10,26,.85) 94%,#020a1a 100%)}
.close-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 24px;margin-top:32px}
.text-link{color:var(--ink);font-size:16px;text-underline-offset:4px;transition:color .16s var(--ease)}
.text-link:hover{color:var(--ink)}
.foot{max-width:1280px;margin:0 auto;padding:64px var(--gutter) 32px;color:var(--soft);font-size:14px;line-height:20px}
.foot-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
.foot-brand img{width:auto;height:20px}
.foot-brand p{max-width:22rem;margin-top:16px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.foot-h{margin-bottom:12px;color:var(--quiet);font:400 12px/16px var(--mono)}
.foot ul{display:grid;gap:8px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--hair);color:var(--quiet);font-size:13px}
.foot a{color:var(--ink);text-decoration:none;text-underline-offset:3px}
.foot a:hover{text-decoration:underline}
/* Legal basics: who runs the service (company, address, VAT number, email), one quiet line under the preview note; GET / fills it
   from the server's configuration (src/shared/operator.ts). */
.foot-operator{display:flex;flex-wrap:wrap;gap:4px 24px;width:100%;margin:0;overflow-wrap:anywhere}

/* ---------- medium screens: the sidebar folds away, the sections stack in reading order */
@media (max-width:1023px){
  .win{grid-template-columns:minmax(0,1fr)}
  .win-side{display:none}
}
@media (max-width:1099px){
  .sec{grid-template-columns:minmax(0,1fr);row-gap:40px;padding:48px 0}
  .sec-flush{padding-top:0}
  .sec .sec-text,.sec .sec-vis,#phone .sec-vis,#phone .sec-text{grid-column:1 / -1;grid-row:auto}
  .sec-stack .sec-vis{margin-top:0}
  .vis-pair .stage{grid-template-columns:minmax(0,1fr)}
  .sec-full .sec-vis{margin-top:0}
  .vis-full .stage{grid-template-columns:minmax(0,1fr)}
  .ticket{width:min(400px,100%);margin:-48px 0 0 auto}
  .week{padding-right:24px}
  .flow{max-width:none}
}

/* ---------- below 1180px the links fold into one menu button (only with JS; without it they simply wrap) */
@media (max-width:1179px){
  .js .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px;border:0;border-radius:8px;background:none;color:var(--ink);cursor:pointer}
  .js .menu-btn .i-close,.js .menu-btn[aria-expanded="true"] .i-open{display:none}
  .js .menu-btn[aria-expanded="true"] .i-close{display:block}
  .js .menu{position:absolute;left:var(--gutter);right:var(--gutter);top:72px;margin:0;display:none;flex-direction:column;align-items:stretch;gap:8px;padding:8px;border-radius:12px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--hair-2),0 8px 24px rgba(2,10,26,.6)}
  .js .menu.open{display:flex;animation:drop .2s var(--ease) both}
  .js .links{flex-direction:column;gap:2px}
  .js .links a,.js .signin{display:flex;min-height:44px;border-radius:4px;font-size:16px}
  .js .account{flex-direction:column;align-items:stretch;gap:8px;padding:8px 0 0;border-top:1px solid var(--hair)}
  .js .account .btn-sm{min-height:44px;border-radius:4px;font-size:16px}
  .nav{gap:12px}
  .langs{margin-left:auto}
  html:not(.js) .nav{flex-wrap:wrap}
  html:not(.js) .menu{order:3;flex-basis:100%;flex-wrap:wrap;justify-content:flex-start;gap:8px}
}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (max-width:599px){
  .intro{min-height:calc(72svh - 64px);padding:48px var(--gutter) 64px}
  .lead{font-size:17px}
  .actions{width:100%;max-width:320px}
  .actions .btn{width:100%}
  /* the phone view keeps the timetable, simpler: the staff column moves under the row */
  .win{height:440px}
  .win-main{padding:16px 20px}
  .tt-row,.tt-now{grid-template-columns:48px minmax(0,1fr);gap:8px}
  .tt-now::after{grid-column:1 / -1;display:none}
  .tt-row.next{margin:0 -20px;padding:12px 20px}
  .tt-st{grid-column:2;display:flex;gap:8px;padding-top:0}
  .sections{padding-top:64px}
  .sec{padding:40px 0;row-gap:32px}
  /* dense moments get simpler on phones instead of zooming down */
  .rec-body,.inbox{grid-template-columns:minmax(0,1fr)}
  .fields{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;border-right:0;border-bottom:1px solid var(--line-c);border-radius:0}
  .fields div:nth-last-child(-n+2){border-bottom:0}
  .convs{display:none}
  .days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .day:nth-child(n+4){display:none}
  .ticket{margin:-12px auto 0;transform:rotate(-1.5deg)}
  .log{grid-template-columns:minmax(0,1fr)}
  .log-side{border-left:0;border-top:1px solid var(--line-c)}
  .changes li{grid-template-columns:minmax(0,1fr)}
  .changes time{grid-row:auto}
  .phone{width:288px;height:580px;transform:none}
  .close-cta{padding-top:72px}
  .foot{padding-top:48px}
  .foot-top{grid-template-columns:minmax(0,1fr);gap:32px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column;margin-top:32px}
}

/* short landscape (phones on their side): the copy needs the whole height, so the product view simply follows it */
@media (max-height:520px) and (min-aspect-ratio: 1/1){
  .sky{background-size:max(100vw, calc(141svh * 16 / 9)) auto;
    background-position:50% calc(76svh - 0.54 * max(56.25vw, 141svh))}
  .intro{min-height:0;padding:32px var(--gutter) 64px}
  h1{font-size:clamp(36px,5.6vw,64px)}
}

/* ---------- the opening, one orchestrated moment: the copy and the product view rise 8px as the Earth fades in once its
   image has decoded (app.js adds .reveal, then .sky-ready; until then the sky shows its own colour). */
.reveal .nav,.reveal .intro>*,.reveal .pv{animation:rise .48s var(--ease) both}
.reveal .intro>:nth-child(1){animation-delay:.06s}
.reveal .intro>:nth-child(2){animation-delay:.12s}
.reveal .intro>:nth-child(3){animation-delay:.18s}
.reveal .pv{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}