/* Techsania design layer. Loaded after app.css on every page.
   The light background themes stay as they are; this layer adds the rich colour, depth and polish:
   a deep "stage" colour for headers, the hero and feature panels, confident buttons, gold accents,
   refined cards, forms and motion. Colours below the PALETTES marker are generated and contrast-checked. */

/* PALETTES:START */
:root { --brand:#0F5A40; --brand-dark:#0A4430; --brand-mid:#187352; --accent:#D4AF5A; --gold-hi:#E8CB86; --accent-ink:#7A5A12; --deep:#0B2E22; --deep-2:#134F38; --brand-rgb:15,90,64; --glow-rgb:212,175,90; }
:root[data-palette="white"]:not([data-theme="dark"]) { --brand:#1F2A36; --brand-dark:#141C25; --brand-mid:#33465A; --info:#141C25; --accent:#C9A24A; --gold-hi:#E2C47A; --accent-ink:#7A5C14; --deep:#141A21; --deep-2:#2A3542; --fx-deep:#141A21; --brand-rgb:31,42,54; --fx-rgb:31,42,54; --glow-rgb:201,162,74; --accent-rgb:201,162,74; --focus: 0 0 0 3px rgba(31,42,54,.3); }
:root[data-theme="dark"][data-palette="white"] { --brand:#3A4654; --brand-dark:#2F3945; --brand-mid:#4C5A6A; --info:#C9D3DD; --fx-link:#C9D3DD; --accent:#D4B160; --gold-hi:#E6CC8E; --accent-ink:#E3CB8F; --deep:#1B2027; --deep-2:#2E3743; --fx-deep:#1B2027; --brand-rgb:58,70,84; --fx-rgb:76,90,106; --glow-rgb:212,177,96; --accent-rgb:212,177,96; --focus: 0 0 0 3px rgba(76,90,106,.45); }
:root[data-palette="forest"]:not([data-theme="dark"]) { --brand:#0F5A40; --brand-dark:#0A4430; --brand-mid:#187352; --info:#0A4430; --accent:#D4AF5A; --gold-hi:#E8CB86; --accent-ink:#7A5A12; --deep:#0B2E22; --deep-2:#134F38; --fx-deep:#0B2E22; --brand-rgb:15,90,64; --fx-rgb:15,90,64; --glow-rgb:212,175,90; --accent-rgb:212,175,90; --focus: 0 0 0 3px rgba(15,90,64,.3); }
:root[data-theme="dark"][data-palette="forest"] { --brand:#13704F; --brand-dark:#0F5D41; --brand-mid:#1A8059; --info:#7FD3AE; --fx-link:#7FD3AE; --accent:#E0BD6B; --gold-hi:#EED39A; --accent-ink:#E8CD8C; --deep:#0E3426; --deep-2:#195A41; --fx-deep:#0E3426; --brand-rgb:19,112,79; --fx-rgb:26,128,89; --glow-rgb:224,189,107; --accent-rgb:224,189,107; --focus: 0 0 0 3px rgba(26,128,89,.45); }
:root[data-palette="ocean"]:not([data-theme="dark"]) { --brand:#0D5C96; --brand-dark:#094673; --brand-mid:#1773B5; --info:#094673; --accent:#E0B45C; --gold-hi:#EECD8C; --accent-ink:#7A5A12; --deep:#0A2540; --deep-2:#134775; --fx-deep:#0A2540; --brand-rgb:13,92,150; --fx-rgb:13,92,150; --glow-rgb:224,180,92; --accent-rgb:224,180,92; --focus: 0 0 0 3px rgba(13,92,150,.3); }
:root[data-theme="dark"][data-palette="ocean"] { --brand:#1466A6; --brand-dark:#0F548A; --brand-mid:#1E76BC; --info:#8CC8F5; --fx-link:#8CC8F5; --accent:#E2BE6E; --gold-hi:#EFD49C; --accent-ink:#EBCF94; --deep:#0D2C4A; --deep-2:#174B76; --fx-deep:#0D2C4A; --brand-rgb:20,102,166; --fx-rgb:30,118,188; --glow-rgb:226,190,110; --accent-rgb:226,190,110; --focus: 0 0 0 3px rgba(30,118,188,.45); }
:root[data-palette="lavender"]:not([data-theme="dark"]) { --brand:#5B35B0; --brand-dark:#462689; --brand-mid:#6E48C7; --info:#462689; --accent:#E0B25E; --gold-hi:#EECC8F; --accent-ink:#7D5A14; --deep:#1F1440; --deep-2:#3D2A7C; --fx-deep:#1F1440; --brand-rgb:91,53,176; --fx-rgb:91,53,176; --glow-rgb:224,178,94; --accent-rgb:224,178,94; --focus: 0 0 0 3px rgba(91,53,176,.3); }
:root[data-theme="dark"][data-palette="lavender"] { --brand:#6A43C9; --brand-dark:#5835AD; --brand-mid:#7952D6; --info:#C3ACFA; --fx-link:#C3ACFA; --accent:#E4BC6E; --gold-hi:#F0D49E; --accent-ink:#EED29A; --deep:#24174A; --deep-2:#412D84; --fx-deep:#24174A; --brand-rgb:106,67,201; --fx-rgb:121,82,214; --glow-rgb:228,188,110; --accent-rgb:228,188,110; --focus: 0 0 0 3px rgba(121,82,214,.45); }
:root[data-palette="sunset"]:not([data-theme="dark"]) { --brand:#AD3D1B; --brand-dark:#8E3014; --brand-mid:#C24E29; --info:#8E3014; --accent:#E9B04A; --gold-hi:#F3CB7F; --accent-ink:#7D5207; --deep:#3A160B; --deep-2:#702D15; --fx-deep:#3A160B; --brand-rgb:173,61,27; --fx-rgb:173,61,27; --glow-rgb:233,176,74; --accent-rgb:233,176,74; --focus: 0 0 0 3px rgba(173,61,27,.3); }
:root[data-theme="dark"][data-palette="sunset"] { --brand:#B5431F; --brand-dark:#983618; --brand-mid:#C2502A; --info:#F7B08F; --fx-link:#F7B08F; --accent:#EDBA5A; --gold-hi:#F5D18C; --accent-ink:#F3D08E; --deep:#3D1A0E; --deep-2:#733017; --fx-deep:#3D1A0E; --brand-rgb:181,67,31; --fx-rgb:194,80,42; --glow-rgb:237,186,90; --accent-rgb:237,186,90; --focus: 0 0 0 3px rgba(194,80,42,.45); }
:root[data-palette="rose"]:not([data-theme="dark"]) { --brand:#A6285A; --brand-dark:#841D47; --brand-mid:#BA376B; --info:#841D47; --accent:#E7B25E; --gold-hi:#F1CB8E; --accent-ink:#7D4F12; --deep:#3A0F22; --deep-2:#6E1E41; --fx-deep:#3A0F22; --brand-rgb:166,40,90; --fx-rgb:166,40,90; --glow-rgb:231,178,94; --accent-rgb:231,178,94; --focus: 0 0 0 3px rgba(166,40,90,.3); }
:root[data-theme="dark"][data-palette="rose"] { --brand:#AE2F62; --brand-dark:#922651; --brand-mid:#BC3C6F; --info:#F5A3C4; --fx-link:#F5A3C4; --accent:#EBBB6A; --gold-hi:#F4D29C; --accent-ink:#F2D196; --deep:#3D1225; --deep-2:#722346; --fx-deep:#3D1225; --brand-rgb:174,47,98; --fx-rgb:188,60,111; --glow-rgb:235,187,106; --accent-rgb:235,187,106; --focus: 0 0 0 3px rgba(188,60,111,.45); }
:root[data-palette="slate"]:not([data-theme="dark"]) { --brand:#2E4D6B; --brand-dark:#223A52; --brand-mid:#3B5F83; --info:#223A52; --accent:#62C3D2; --gold-hi:#9ADCE6; --accent-ink:#1D6672; --deep:#15212E; --deep-2:#2C4560; --fx-deep:#15212E; --brand-rgb:46,77,107; --fx-rgb:46,77,107; --glow-rgb:98,195,210; --accent-rgb:98,195,210; --focus: 0 0 0 3px rgba(46,77,107,.3); }
:root[data-theme="dark"][data-palette="slate"] { --brand:#33597D; --brand-dark:#294A69; --brand-mid:#3E668D; --info:#9FD7E3; --fx-link:#9FD7E3; --accent:#6CCCDB; --gold-hi:#A6E3EC; --accent-ink:#A3E2EC; --deep:#182636; --deep-2:#2F4964; --fx-deep:#182636; --brand-rgb:51,89,125; --fx-rgb:62,102,141; --glow-rgb:108,204,219; --accent-rgb:108,204,219; --focus: 0 0 0 3px rgba(62,102,141,.45); }
/* PALETTES:END */

:root {
  --ivory: #FFF8EA;
  --ivory-soft: rgba(255, 248, 234, .78);
  --on-deep-line: rgba(255, 248, 234, .16);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 3px 10px -4px rgba(16, 24, 20, .07);
  --shadow-lift: 0 2px 4px rgba(16, 24, 20, .05), 0 22px 44px -18px rgba(16, 24, 20, .22);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -18px rgba(0, 0, 0, .6);
}

/* ---- Page canvas: a faint paper grain over the theme background ---------------------- */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .05; }
:root[data-theme="dark"] body::before { opacity: .08; }
::selection { background: rgba(var(--glow-rgb), .35); }

/* ---- Typography ------------------------------------------------------------------------ */
h1, h2 { font-optical-sizing: auto; text-wrap: balance; }
p { text-wrap: pretty; }
.card h2, .sheet h2 { font-size: 24px; letter-spacing: -.015em; }
.dash-big, .room-summary b, .keycard .num, .roombox .num, .keybox .num { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }

/* ---- The deep header band (guest, staff, payment and signup pages) -------------------- */
:root[data-theme] .topbar {
  background: radial-gradient(600px 160px at 85% -40%, rgba(var(--glow-rgb), .28), transparent 70%), linear-gradient(120deg, var(--deep), var(--deep-2));
  border-bottom: 1px solid var(--on-deep-line); color: var(--ivory);
}
:root[data-theme] .topbar .brand, :root[data-theme] .site-nav .nav-brand, :root[data-theme] .site-foot .nav-brand { color: var(--ivory); }
:root[data-theme] .topbar .brand span, :root[data-theme] .site-nav .nav-brand span, :root[data-theme] .site-foot .nav-brand span { color: var(--accent); }
:root[data-theme] .topbar .brand-sub { color: var(--ivory-soft); border-color: var(--on-deep-line); }
.brand-mark { box-shadow: 0 0 0 1px rgba(var(--glow-rgb), .35), 0 4px 12px -4px rgba(0, 0, 0, .5); }
:root[data-theme] .topbar .lang-select, :root[data-theme] .site-nav .lang-select {
  background-color: rgba(255, 248, 234, .08); color: var(--ivory); border-color: rgba(255, 248, 234, .28);
}
.topbar .lang-select option, .site-nav .lang-select option { color: #1B2620; background: #fff; }
:root[data-theme] .topbar :focus-visible, :root[data-theme] .site-nav :focus-visible, :root[data-theme] .hero-stage :focus-visible,
:root[data-theme] .staff-panel :focus-visible, :root[data-theme] .site-foot :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none; }
.wrap > .topbar { border-radius: 0 0 var(--radius) var(--radius); }
.demo-banner { border-bottom-color: transparent; letter-spacing: .01em; }

/* ---- Home page navigation: glass over the hero ----------------------------------------- */
:root[data-theme] .site-nav { background: color-mix(in srgb, var(--deep) 86%, transparent); border-bottom: 1px solid var(--on-deep-line); }
:root[data-theme] .site-nav .nav-link { color: var(--ivory-soft); border-radius: 8px; transition: color .2s; }
:root[data-theme] .site-nav .nav-link:hover { color: var(--ivory); }
.site-nav .site { height: 72px; }

/* ---- Buttons ---------------------------------------------------------------------------- */
.btn { border-radius: var(--radius-sm); letter-spacing: .005em; }
.btn-primary, .btn.btn-primary, a.btn.btn-primary {
  background: linear-gradient(180deg, var(--brand-mid), var(--brand)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px -10px rgba(var(--brand-rgb), .9);
}
.btn-primary:hover, a.btn.btn-primary:hover { background: linear-gradient(180deg, var(--brand), var(--brand-dark)); }
.btn.btn-secondary.btn-primary, .btn.btn-secondary.btn-primary:hover { background: var(--brand); }
.btn-secondary { background: var(--paper); border-color: var(--border); }
.btn-secondary:hover { background: var(--paper); border-color: var(--brand); color: var(--brand-dark); }
:root[data-theme="dark"] .btn-secondary:hover { color: var(--fx-link); }
.btn-open { background: linear-gradient(180deg, var(--brand-mid), var(--brand)); box-shadow: 0 14px 30px -14px rgba(var(--brand-rgb), .95); border-radius: 18px; }
/* Gold buttons sit on the deep colour: the home page header and hero. */
:root[data-theme] .site-nav .btn-primary, :root[data-theme] .hero-stage .btn-primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--accent)); color: var(--deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -12px rgba(var(--glow-rgb), .9);
}
:root[data-theme] .site-nav .btn-primary:hover, :root[data-theme] .hero-stage .btn-primary:hover { background: var(--gold-hi); }
:root[data-theme] .hero-stage .btn-secondary { background: rgba(255, 248, 234, .06); color: var(--ivory); border-color: rgba(255, 248, 234, .32); }
:root[data-theme] .hero-stage .btn-secondary:hover { background: rgba(255, 248, 234, .12); border-color: rgba(255, 248, 234, .6); color: var(--ivory); }

/* ---- Cards, sheets, lists ------------------------------------------------------------ */
.card, .dash-card, .arrival, .room-card, .keycard, .room-summary div, .rota-wrap, .setup-row {
  border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow);
}
.card { padding: 22px; }
.dash-card, .arrival, .room-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
@media (hover: hover) {
  .dash-card:hover, .arrival:hover, .room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border); }
}
.dash-attn h3, .dash-card h3 { letter-spacing: .08em; }
.sheet { border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .35); }
@media (min-width: 640px) { .sheet { border-radius: var(--radius-lg); } }
.overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:root[data-theme] .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip { transition: border-color .2s, background-color .2s; }
.chip:hover { border-color: var(--brand); }
.banner { border-radius: var(--radius-sm); }
.pill { letter-spacing: .02em; }

/* Empty states: a soft framed message instead of bare text. */
.empty { margin: 8px 0; border: 1px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.empty .big { width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: var(--brand-soft); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-soft) 45%, transparent); }

/* ---- Forms -------------------------------------------------------------------------- */
.input, .select, .textarea { border-radius: var(--radius-sm); border-color: var(--border); transition: border-color .2s, box-shadow .2s; }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.field label { color: var(--navy-deep); }
.file-pick { border-radius: var(--radius-sm); }

/* ---- Guest check-in: progress, door key, room ---------------------------------------- */
.progress { gap: 6px; }
.progress .seg { height: 6px; }
:root[data-theme] .keybox, :root[data-theme] .toast {
  background: radial-gradient(420px 160px at 80% -20%, rgba(var(--glow-rgb), .35), transparent 70%), linear-gradient(135deg, var(--deep), var(--deep-2));
  color: var(--ivory); border-color: transparent;
}
:root[data-theme] .toast.err { background: var(--red-dark); color: #fff; }
:root[data-theme="dark"] .toast.err { background: #6E3B35; }
.keybox { border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.keybox .num { color: var(--accent); }
.keycard { border-radius: var(--radius-lg); }
.roombox { border-radius: var(--radius-lg); }

/* ---- Home page: hero stage ------------------------------------------------------------ */
.hero-stage {
  position: relative; overflow: hidden; isolation: isolate; color: var(--ivory);
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(var(--glow-rgb), .30), transparent 62%),
    radial-gradient(700px 520px at -5% 105%, rgba(var(--brand-rgb), .55), transparent 65%),
    linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%);
}
.hero-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
/* Fine gold arcs, echoing the swoosh of the logo. */
.hero-stage::after {
  content: ""; position: absolute; z-index: -1; width: 1100px; height: 1100px; right: -380px; top: -520px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(var(--glow-rgb), .30); outline: 1px solid rgba(var(--glow-rgb), .14); outline-offset: 90px;
}
.hero-stage .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 56px; text-align: start; padding-top: 104px; padding-bottom: 120px; }
.hero-stage .hero-grid .lead { margin-left: 0; margin-right: 0; }
.hero-stage .hero-grid .cta-row { justify-content: flex-start; }
.hero-stage .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); margin-bottom: 22px; }
.hero-stage .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
:root[data-theme] .hero-stage h1 { color: var(--ivory); font-size: clamp(44px, 6vw, 80px); line-height: .98; letter-spacing: -.025em; }
:root[data-theme] .hero-stage h1 em { color: var(--accent); display: inline-block; }
:root[data-theme] .hero-stage .lead { color: var(--ivory-soft); font-size: 19px; max-width: 520px; }
:root[data-theme] .hero-stage .cta-note { color: rgba(255, 248, 234, .62); }

/* The phone preview: built from the real check-in look, decoration only. */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.hero-visual::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow-rgb), .45), transparent 65%); filter: blur(30px); }
.pv-phone {
  position: relative; width: 300px; padding: 11px; border-radius: 46px; background: linear-gradient(145deg, #2B2F33, #0D0F11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .4);
  transform: rotate(-4deg);
}
.pv-phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 99px; background: #0D0F11; z-index: 2; }
.pv-screen { border-radius: 36px; overflow: hidden; background: var(--bg); color: var(--ink); font-size: 12px; line-height: 1.4; }
.pv-top { display: flex; align-items: center; gap: 7px; padding: 44px 16px 12px; background: linear-gradient(120deg, var(--deep), var(--deep-2)); color: var(--ivory); }
.pv-top img { width: 22px; height: 22px; border-radius: 6px; }
.pv-top b { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.pv-top b i { color: var(--accent); font-weight: 500; }
.pv-top span { margin-inline-start: auto; font-size: 10px; color: var(--ivory-soft); }
.pv-body { padding: 16px; display: grid; gap: 10px; }
.pv-steps { display: flex; gap: 4px; }
.pv-steps i { flex: 1; height: 4px; border-radius: 9px; background: var(--line); }
.pv-steps i.on { background: var(--brand); }
.pv-steps i.now { background: var(--accent); }
.pv-label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.pv-title { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--navy-deep); line-height: 1.1; margin-top: -4px; }
.pv-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px; box-shadow: var(--shadow); }
.pv-row { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.pv-row:first-child { border-top: 0; font-weight: 700; color: var(--navy-deep); }
.pv-row span { color: var(--muted); }
.pv-row:first-child span { color: inherit; }
.pv-row b { color: var(--navy-deep); }
.pv-total b { font-size: 14px; }
.pv-btn { margin-top: 4px; text-align: center; padding: 12px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(180deg, var(--brand-mid), var(--brand)); box-shadow: 0 8px 18px -10px rgba(var(--brand-rgb), .9); }
.pv-later { text-align: center; color: var(--brand-dark); font-weight: 600; font-size: 11.5px; padding-bottom: 6px; }
:root[data-theme="dark"] .pv-later { color: var(--fx-link); }
.pv-float {
  position: absolute; z-index: 3; display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-lift);
}
.pv-key { left: 0; bottom: 92px; text-align: center; }
.pv-key span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pv-key b { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--navy-deep); }
.pv-key small { font-size: 11px; color: var(--ok); font-weight: 700; }
.pv-ok { right: 0; top: 108px; grid-auto-flow: column; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; }
.pv-ok::before { content: "\2713"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-weight: 900; }
@media (prefers-reduced-motion: no-preference) {
  .pv-phone { animation: pv-float 8s ease-in-out infinite; }
  .pv-key { animation: pv-float 8s ease-in-out -2.5s infinite; }
  .pv-ok { animation: pv-float 8s ease-in-out -5s infinite; }
}
@keyframes pv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---- Home page: how it works ------------------------------------------------------------ */
.band { background: linear-gradient(180deg, var(--paper), var(--bg)); border-top: 0; }
.section-head h2 { letter-spacing: -.02em; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.steps { gap: 18px; border-top: 0; counter-reset: s; }
.step, .step + .step {
  position: relative; padding: 30px 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step::before { font-size: 46px; margin-bottom: 22px; color: var(--accent-ink); }
.step::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); opacity: 0; transition: opacity .3s; }
@media (hover: hover) { .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .step:hover::after { opacity: 1; } }

/* ---- Home page: staff panel ------------------------------------------------------------ */
:root[data-theme] .staff-panel {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; color: var(--ivory);
  background: radial-gradient(700px 400px at 100% 0%, rgba(var(--glow-rgb), .26), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(var(--brand-rgb), .5), transparent 65%), linear-gradient(135deg, var(--deep), var(--deep-2));
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); border: 0;
}
.staff-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--grain); opacity: .08; mix-blend-mode: overlay; pointer-events: none; }
:root[data-theme] .staff-panel h2 { color: var(--ivory); }
:root[data-theme] .staff-panel p { color: var(--ivory-soft); }
:root[data-theme] .staff-panel .btn { background: var(--ivory); color: var(--deep); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
:root[data-theme] .staff-panel .btn:hover { background: #fff; }
.ticks li { border-color: var(--on-deep-line) !important; color: var(--ivory); }
.ticks li::before { content: "\2713"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--glow-rgb), .18); color: var(--accent); font-size: 13px; }

/* ---- Home page: demo card and footer ---------------------------------------------------- */
.demo-wrap .card { border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-lift); }
#demoLinks .row-between { background: var(--bg); transition: border-color .2s; }
#demoLinks .row-between:hover { border-color: var(--border) !important; }
:root[data-theme] .site-foot { background: linear-gradient(120deg, var(--deep), var(--deep-2)); border-top: 0; color: var(--ivory); }
:root[data-theme] .site-foot p { color: var(--ivory-soft); }

/* ---- Settings button and panel ---------------------------------------------------------- */
.fx-theme { box-shadow: var(--shadow-lift); transition: transform .2s var(--ease); }
.fx-theme:hover { transform: rotate(30deg); }
.fx-panel { border-radius: 20px; }

/* ---- Small screens ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-stage .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 24px; padding-top: 56px; padding-bottom: 72px; }
  .hero-stage .hero-grid .lead { margin-left: auto; margin-right: auto; }
  .hero-stage .hero-grid .cta-row { justify-content: center; }
  .hero-visual { min-height: 500px; }
  .hero-stage::after { width: 700px; height: 700px; right: -320px; top: -300px; }
}
@media (max-width: 560px) {
  .site-nav .site { gap: 8px; height: 64px; padding: 0 14px; }
  .site-nav .nav-brand { font-size: 21px; }
  .site-nav .brand-mark { width: 28px; height: 28px; margin-inline-end: 7px; }
  .site-nav .lang-select { max-width: 92px; padding: 6px 4px; font-size: 13px; }
  .site-nav .btn { padding: 8px 11px; font-size: 13.5px; min-height: 40px; white-space: nowrap; }
  .hero-visual { min-height: 470px; transform: scale(.9); margin: -20px 0; }
  .pv-key { left: -6px; } .pv-ok { right: -6px; }
  :root[data-theme] .staff-panel { border-radius: 24px; }
  .step, .step + .step { padding: 24px 22px; border-top: 1px solid var(--line); }
  .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-card, .arrival, .room-card, .step, .fx-theme { transition: none; }
  .dash-card:hover, .arrival:hover, .room-card:hover, .step:hover { transform: none; }
}

/* =====================================================================================
   Second pass: type, living movement, scroll reveals, storytelling, touch and dashboards
   ===================================================================================== */

/* ---- Typography: Plus Jakarta Sans for text (free Open Font License, saved in the project) */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/jakarta-latin.woff2") format("woff2");
  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: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/jakarta-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { line-height: 1.6; letter-spacing: -.004em; -webkit-tap-highlight-color: transparent; }
h3 { letter-spacing: -.02em; font-weight: 700; }
.lead, .section-head p, .story-lead { line-height: 1.65; }
.btn, .chip, .pill, .seg-btn, .page-tab { letter-spacing: 0; }
.dash-big, .dash-stats b, .room-summary b, .dl dd, .rota td, .fin-amount, .chart-table td, .pv-row b, .dv-stats b { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.section-head h2, .story h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; }
.section-head h2 em, .story h2 em { font-style: italic; font-weight: 500; color: var(--brand); }
:root[data-theme="dark"] .story h2 em { color: var(--fx-link); }

/* ---- Living hero: drifting light, rising sparks, a gold shimmer ------------------------- */
.hero-aura, .hero-sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-aura i { position: absolute; border-radius: 50%; will-change: transform; }
.hero-aura i:nth-child(1) { width: 640px; height: 640px; left: -160px; top: -220px; background: radial-gradient(circle, rgba(var(--brand-rgb), .65), transparent 68%); }
.hero-aura i:nth-child(2) { width: 560px; height: 560px; right: 8%; bottom: -260px; background: radial-gradient(circle, rgba(var(--glow-rgb), .34), transparent 68%); }
.hero-aura i:nth-child(3) { width: 420px; height: 420px; left: 38%; top: 12%; background: radial-gradient(circle, rgba(255, 248, 234, .07), transparent 70%); }
.hero-sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 10px 2px rgba(var(--glow-rgb), .55); opacity: 0; }
.hero-sparks i:nth-child(1) { left: 6%; } .hero-sparks i:nth-child(2) { left: 17%; width: 3px; height: 3px; } .hero-sparks i:nth-child(3) { left: 29%; }
.hero-sparks i:nth-child(4) { left: 41%; width: 2px; height: 2px; } .hero-sparks i:nth-child(5) { left: 52%; } .hero-sparks i:nth-child(6) { left: 63%; width: 3px; height: 3px; }
.hero-sparks i:nth-child(7) { left: 72%; } .hero-sparks i:nth-child(8) { left: 81%; width: 2px; height: 2px; } .hero-sparks i:nth-child(9) { left: 89%; } .hero-sparks i:nth-child(10) { left: 96%; width: 3px; height: 3px; }
:root[data-theme] .hero-stage h1 em { background: linear-gradient(100deg, var(--accent) 20%, var(--gold-hi) 42%, var(--accent) 64%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
@media (prefers-reduced-motion: no-preference) {
  .hero-aura i:nth-child(1) { animation: aura-a 22s ease-in-out infinite alternate; }
  .hero-aura i:nth-child(2) { animation: aura-b 26s ease-in-out infinite alternate; }
  .hero-aura i:nth-child(3) { animation: aura-c 18s ease-in-out infinite alternate; }
  .hero-sparks i { animation: spark 14s linear infinite; }
  .hero-sparks i:nth-child(2) { animation-duration: 17s; animation-delay: -3s; } .hero-sparks i:nth-child(3) { animation-duration: 12s; animation-delay: -7s; }
  .hero-sparks i:nth-child(4) { animation-duration: 19s; animation-delay: -1s; } .hero-sparks i:nth-child(5) { animation-duration: 15s; animation-delay: -9s; }
  .hero-sparks i:nth-child(6) { animation-duration: 13s; animation-delay: -5s; } .hero-sparks i:nth-child(7) { animation-duration: 18s; animation-delay: -11s; }
  .hero-sparks i:nth-child(8) { animation-duration: 16s; animation-delay: -2s; } .hero-sparks i:nth-child(9) { animation-duration: 14s; animation-delay: -6s; }
  .hero-sparks i:nth-child(10) { animation-duration: 20s; animation-delay: -13s; }
  :root[data-theme] .hero-stage h1 em { animation: gold-shimmer 7s ease-in-out infinite; }
  .pv-steps i.now { animation: step-glow 2.4s ease-in-out infinite; }
  .pv-btn { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%), linear-gradient(180deg, var(--brand-mid), var(--brand)); background-size: 250% 100%, 100% 100%; animation: sweep 4.5s ease-in-out infinite; }
  .pv-ok::before { animation: tick-pop 4.5s ease-in-out infinite; }
}
@keyframes aura-a { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes aura-b { to { transform: translate(-160px, -70px) scale(1.2); } }
@keyframes aura-c { to { transform: translate(-90px, 120px) scale(.85); } }
@keyframes spark { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .5; } 100% { transform: translateY(-760px); opacity: 0; } }
@keyframes gold-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes step-glow { 50% { box-shadow: 0 0 10px 1px rgba(var(--glow-rgb), .8); } }
@keyframes sweep { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@keyframes tick-pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } }

/* ---- Scroll reveals: cards and sections slide in as they come into view (fx.js adds fx-in) */
.fx-reveal[data-reveal="left"]:not(.fx-in) { transform: translateX(-36px); }
.fx-reveal[data-reveal="right"]:not(.fx-in) { transform: translateX(36px) rotate(1deg); }
.fx-reveal[data-reveal="zoom"]:not(.fx-in) { transform: scale(.94); }
.fx-reveal[data-reveal] { transition-duration: .8s; }
.steps .step:nth-child(1) { --fx-d: 0ms !important; } .steps .step:nth-child(2) { --fx-d: 90ms !important; } .steps .step:nth-child(3) { --fx-d: 180ms !important; } .steps .step:nth-child(4) { --fx-d: 270ms !important; }

/* ---- Story section: the front desk side ----------------------------------------------- */
.story { position: relative; overflow: hidden; }
.story::before { content: ""; position: absolute; width: 760px; height: 760px; right: -220px; top: 50%; margin-top: -380px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--brand-rgb), .14), transparent 65%); pointer-events: none; }
.story-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.story-copy .eyebrow { display: block; margin-bottom: 14px; }
.story-lead { color: var(--text-soft); font-size: 18px; margin: 18px 0 28px; max-width: 470px; }
.story-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: sp; }
.story-points li { position: relative; display: grid; gap: 2px; padding-inline-start: 56px; min-height: 40px; }
.story-points li::before { counter-increment: sp; content: counter(sp); position: absolute; inset-inline-start: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ivory); background: linear-gradient(135deg, var(--deep), var(--deep-2)); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
.story-points b { color: var(--navy-deep); font-size: 16px; }
.story-points span { color: var(--text-soft); font-size: 15px; }
.story-visual { position: relative; padding: 30px 0 40px; }
.dv-window { position: relative; z-index: 1; border-radius: 20px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .45), var(--shadow); }
.story-visual::before { content: ""; position: absolute; inset: 0 26px 10px; z-index: 0; border-radius: 22px; background: linear-gradient(135deg, var(--deep), var(--deep-2)); transform: rotate(-3.5deg) translateY(18px); opacity: .9; }
.dv-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--sand); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.dv-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); flex: none; }
.dv-bar i:nth-child(1) { background: #E9877A; } .dv-bar i:nth-child(2) { background: #E9C46A; } .dv-bar i:nth-child(3) { background: #7FC79A; }
.dv-bar span { margin-inline-start: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-body { padding: 16px; display: grid; gap: 8px; }
.dv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.dv-stats div { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.dv-stats b { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.1; color: var(--navy-deep); }
.dv-stats span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.dv-row { display: grid; grid-template-columns: 1fr auto 90px; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; }
.dv-row em { font-style: normal; }
.dv-who { display: grid; line-height: 1.25; min-width: 0; }
.dv-who b { color: var(--navy-deep); }
.dv-who span { font-size: 11px; color: var(--muted); }
.dv-prog { height: 6px; border-radius: 9px; background: var(--sand); overflow: hidden; }
.dv-prog i { display: block; height: 100%; width: var(--p); border-radius: 9px; background: linear-gradient(90deg, var(--brand), var(--brand-mid)); }
.dv-done .dv-prog i { background: var(--ok); }
.dv-live { border-color: rgba(var(--glow-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--glow-rgb), .16); }
.dv-toast, .dv-room { position: absolute; z-index: 2; border-radius: 16px; box-shadow: var(--shadow-lift); }
.dv-toast { right: -14px; top: 0; display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 13px; color: var(--ivory); background: linear-gradient(120deg, var(--deep), var(--deep-2)); }
.dv-toast span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--glow-rgb), .22); font-size: 14px; }
.dv-room { left: -18px; bottom: 6px; display: grid; gap: 1px; padding: 12px 18px; background: var(--paper); border: 1px solid var(--line); }
.dv-room span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dv-room b { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--navy-deep); }
.dv-room small { font-size: 11.5px; color: var(--ok); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .dv-live .dv-prog i { animation: dv-fill 5s var(--ease) infinite; }
  .dv-live { animation: dv-glow 5s ease-in-out infinite; }
  .dv-toast { animation: dv-toast 5s var(--ease) infinite; }
  .dv-room { animation: pv-float 9s ease-in-out infinite; }
}
@keyframes dv-fill { 0%, 15% { width: 42%; } 60%, 100% { width: 72%; } }
@keyframes dv-glow { 0%, 45% { box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0); } 60% { box-shadow: 0 0 0 5px rgba(var(--glow-rgb), .22); } 100% { box-shadow: 0 0 0 3px rgba(var(--glow-rgb), .1); } }
@keyframes dv-toast { 0%, 50% { opacity: 0; transform: translateY(-10px) scale(.96); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---- Interactive details: links, buttons, cards ---------------------------------------- */
:root[data-theme] .site-nav .nav-link { position: relative; }
.site-nav .nav-link::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1.5px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--ease); }
.site-nav .nav-link:hover::after, .site-nav .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
main p a, .card p a, .banner a { text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness .2s, color .2s; }
main p a:hover, .card p a:hover, .banner a:hover { text-decoration-thickness: 2px; }
/* A light sweep across main buttons on hover. */
.btn-primary, .btn.btn-primary, a.btn.btn-primary, :root[data-theme] .site-nav .btn-primary, :root[data-theme] .hero-stage .btn-primary {
  background-size: 250% 100%, 100% 100%; background-position: 150% 0, 0 0; transition: background-position .8s var(--ease), transform .15s ease, box-shadow .2s ease;
}
.btn-primary, .btn.btn-primary, a.btn.btn-primary { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%), linear-gradient(180deg, var(--brand-mid), var(--brand)); }
.btn-primary:hover, a.btn.btn-primary:hover { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%), linear-gradient(180deg, var(--brand), var(--brand-dark)); background-position: -60% 0, 0 0; }
:root[data-theme] .site-nav .btn-primary, :root[data-theme] .hero-stage .btn-primary { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%), linear-gradient(180deg, var(--gold-hi), var(--accent)); }
:root[data-theme] .site-nav .btn-primary:hover, :root[data-theme] .hero-stage .btn-primary:hover { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%), linear-gradient(180deg, var(--gold-hi), var(--gold-hi)); background-position: -60% 0, 0 0; }
.btn.btn-secondary.btn-primary, .btn.btn-secondary.btn-primary:hover { background-image: none; }
.btn:active:not(:disabled), .chip:active, .dash-card:active, .arrival:active, .seg-btn:active, .page-tab:active { transform: scale(.97); transition-duration: .08s; }
.dash-card { position: relative; overflow: hidden; }
.dash-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.dash-card:hover::after, .dash-card:focus-visible::after { transform: scaleX(1); }
.arrival:focus-visible, .dash-card:focus-visible, .dash-item:focus-visible, .note:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.dash-item, .note { border-radius: 10px; transition: background-color .2s; }
.dash-item:hover, .note:hover { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
.dash-item:hover .dash-go { color: var(--brand); }
.bell { transition: transform .2s var(--ease), border-color .2s; }
.bell:hover { transform: rotate(-12deg); border-color: var(--border); }

/* ---- Forms: clearer fields, errors and choices ---------------------------------------- */
.field label { font-size: 14.5px; letter-spacing: .005em; }
.input, .select, .textarea { min-height: 52px; background: var(--paper); }
:root[data-theme="light"] .input, :root[data-theme="light"] .select, :root[data-theme="light"] .textarea { background: #fff; }
.textarea { min-height: 96px; }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.field-error:not(.hidden) { display: flex; align-items: center; gap: 6px; }
.field-error:not(.hidden)::before { content: "!"; flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.checkrow.card { transition: border-color .2s, background-color .2s; }
.checkrow.card:hover { border-color: var(--border); }
.code-input { letter-spacing: 12px; font-family: var(--serif); }
.step-label { display: inline-flex; align-items: center; gap: 8px; }
.step-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--glow-rgb), .2); }
.progress { margin: 8px 0 6px; }
.progress .seg { background: var(--line); }
.progress .seg.done { background: linear-gradient(90deg, var(--brand), var(--brand-mid)); }
@media (prefers-reduced-motion: no-preference) {
  .progress .seg.active::after { background: linear-gradient(90deg, var(--accent), var(--gold-hi), var(--accent)); background-size: 200% 100%; animation: fx-fill .7s cubic-bezier(.3,.7,.2,1) .1s both, gold-shimmer 2.6s ease-in-out .9s infinite; }
}

/* ---- Feedback messages: a coloured edge and calm tint ----------------------------------- */
.banner { border-inline-start-width: 4px; padding: 14px 16px 14px 18px; box-shadow: var(--shadow); }
.banner-info { border-inline-start-color: var(--info); }
.banner-ok { border-inline-start-color: var(--ok); }
.banner-warn { border-inline-start-color: var(--warn); }
.banner-error { border-inline-start-color: var(--red); }
.toast { padding: 13px 20px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }

/* ---- Dashboards and tables -------------------------------------------------------------- */
.dash-bar, .dash-bar > i { border-radius: 99px; }
.dash-bar > i { background: linear-gradient(90deg, var(--brand), var(--brand-mid)); }
.rota-wrap { box-shadow: var(--shadow); }
.rota thead th { position: sticky; top: 0; z-index: 1; background: var(--sand); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.rota tbody tr { transition: background-color .15s; }
.rota tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }
.chart-table table { border-radius: var(--radius-sm); overflow: hidden; }
.chart-table thead th { background: var(--sand); }
.chart-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sand) 45%, transparent); }
.staff-nav { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05); }
.seg-marker { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px -4px rgba(0, 0, 0, .18); }
.page-tab:hover { color: var(--brand); }
:root[data-theme="dark"] .page-tab:hover { color: var(--fx-link); }
.room-card .room-no { font-family: var(--serif); font-weight: 600; }

/* ---- Touch: bigger targets, no sticky hover lifts on phones ---------------------------- */
@media (hover: none) {
  .dash-card:hover, .arrival:hover, .room-card:hover, .step:hover { transform: none; box-shadow: var(--shadow); }
  .chip, .seg-btn, .page-tab { min-height: 44px; }
}

/* ---- Layout on smaller screens ---------------------------------------------------------- */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-copy { text-align: center; }
  .story-lead { margin-left: auto; margin-right: auto; }
  .story-points { max-width: 460px; margin: 0 auto; text-align: start; }
  .dv-toast { right: 0; } .dv-room { left: 0; }
}
@media (max-width: 560px) {
  .dv-row { grid-template-columns: 1fr auto; }
  .dv-prog { grid-column: 1 / -1; }
  .dv-stats b { font-size: 20px; }
  .story-visual { padding: 34px 0 52px; }
  .story-visual::before { inset: 10px 10px 18px; }
  .hero-aura i:nth-child(1) { width: 420px; height: 420px; }
  .hero-aura i:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-reveal[data-reveal]:not(.fx-in) { transform: none; }
  .btn-primary, .btn.btn-primary, a.btn.btn-primary { transition: none; }
}
:root[data-motion="off"] .fx-reveal[data-reveal]:not(.fx-in) { transform: none; }

/* ---- Fixes after reviewing the screenshots --------------------------------------------- */
.hero-visual { text-align: start; }
.story-visual { padding-bottom: 84px; }
.story-visual::before { inset: 44px 30px 46px; transform: rotate(-2.2deg) translateY(30px); }
.dv-room { bottom: 0; left: -18px; }
@media (max-width: 900px) {
  .hero-visual { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
  .dv-room { left: 0; }
}
@media (max-width: 480px) {
  .topbar .brand { font-size: 22px; }
  .topbar .brand-mark { width: 30px; height: 30px; margin-inline-end: 7px; }
  .topbar .wrap { gap: 10px; }
  .brand-sub { white-space: nowrap; font-size: 11px; padding-inline-start: 10px; }
  .topbar .lang-select { max-width: 112px; padding: 6px 6px; }
}
@media (max-width: 480px) { .topbar .wrap { flex-wrap: wrap; row-gap: 8px; } .topbar .lang-select { max-width: 108px; } }
@media (max-width: 400px) { .site-nav .site { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; } .site-nav .nav-brand { margin-inline-end: auto; } }
.story-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 900px) { .story-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-stage .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
@media (max-width: 900px) { .hero-stage .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .demo-wrap .card { padding: 18px; } #demoLinks .row-between { flex-wrap: wrap; } }
#demoLinks .btn { white-space: nowrap; }
/* Keyboard focus: one clear outline everywhere (gold on the deep colour). */
:root[data-theme] :is(a, button, select, input, textarea, summary, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; }
:root[data-theme] :is(.topbar, .site-nav, .hero-stage, .staff-panel, .site-foot) :is(a, button, select, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:root[data-theme="dark"] :is(a, button, select, input, textarea, summary, [tabindex]):focus-visible { outline-color: var(--fx-link); }