/* Tildeon website. Colours, type and components mirror the app (apps/mobile/src/theme/tokens.ts, ui/*). */
:root {
  /* app palette: light */
  --page: #F4F6F4; --surface: #FFFFFF; --field: #F7F9F8; --ink: #12201E; --ink2: #3D4A47; --muted: #55625F; --faint: #8C9A95;
  --line: #DDE4E1; --chip: #EEF2F0; --track: #E3E9E6; --selBg: #E3EFE8; --selInk: #2A5A44; --blueSoft: #E3EDF7; --blueInk: #24588A;
  --accent: #2F7D5B; --accent2: #3577B2; --amber: #C98A12; --amberSoft: #F3EDE1; --amberInk: #8A6A2A;
  --inBand: #CDE6D6; --outBand: #F1EBDF; --logoDrop: #B3262B; --heading-accent: #2F7D5B;
  --sky-base: #EEF4F1; --sky1: #BFE3CF; --sky2: #C6DCF3; --sky3: #F3E3BF;
  /* rings (ui/HealthRings.tsx) */
  --ring-green: #5E9C7E; --ring-pale: rgba(201,132,90,0.38); --ring-stale: #B9C2BE; --ring-worse: #C9845A; --ring-same: #D5DCD9; --ring-track: #EEF2F0;
  /* latest report blocks (ui/LatestReport.tsx) */
  --sage: #5E9C7E; --apricot: #C9845A; --lavender: #7A72BE;
  --apricot-fill: rgba(201,132,90,0.16); --lav-fill: rgba(122,114,190,0.14); --sage-fill: rgba(94,156,126,0.14);
  --calm-bg: rgba(94,156,126,0.16); --calm-ink: #3F7A5E; --care-bg: rgba(201,132,90,0.16); --care-ink: #9A5A34;
  /* trends and range bar (ui/Trend.tsx, ui/charts.tsx) */
  --good: #4E9A72; --bad: #D2574A; --same-dot: #6E7B77; --prev-dot: #9AA6A2; --new: #D9412E;
  /* body map (app/body-map.tsx) */
  --bm-b1: #D3E9DD; --bm-b2: #B9D3E7; --bm-hair: #9FC4B1; --bm-mus: #46788A; --bm-ma: 0.1; --bm-line: #6B7A75;
  --shadow: 18,32,30; --seg-bg: #E7ECEA; --card-shadow: 0 2px 14px rgba(18,32,30,.06);
  --display: "Fraunces", Georgia, serif; --body: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark;
  --page: #0E1513; --surface: #17211E; --field: #1C2724; --ink: #E8EFEC; --ink2: #B8C5C1; --muted: #93A39E; --faint: #71827D;
  --line: #2C3935; --chip: #222D2A; --track: #26322E; --selBg: #1B3428; --selInk: #7FC8A2; --blueSoft: #1B2B3C; --blueInk: #A9CBEA;
  --accent2: #5B9BD5; --amber: #D9A441; --amberSoft: #3A3326; --amberInk: #D9B56A; --inBand: #1F4433; --outBand: #3A3326; --logoDrop: #D9443F; --heading-accent: #7FC8A2;
  --sky-base: #0F1A17; --sky1: #1E5A43; --sky2: #23426E; --sky3: #3A3326;
  --ring-pale: rgba(201,132,90,0.45); --ring-stale: #5B6763; --ring-same: #3A4642; --ring-track: #1C2724;
  --apricot-fill: rgba(201,132,90,0.18); --lav-fill: rgba(122,114,190,0.2); --sage-fill: rgba(94,156,126,0.2); --calm-ink: #8CC5A8; --care-ink: #E0A27C;
  --same-dot: #8C9A95; --prev-dot: #8C9A95;
  --bm-b1: #24463B; --bm-b2: #22395A; --bm-hair: #1A332B; --bm-mus: #000000; --bm-ma: 0.16; --bm-line: #8A9A95; --card-shadow: none; --seg-bg: #222D2A; } }
:root[data-theme="dark"] { color-scheme: dark;
  --page: #0E1513; --surface: #17211E; --field: #1C2724; --ink: #E8EFEC; --ink2: #B8C5C1; --muted: #93A39E; --faint: #71827D;
  --line: #2C3935; --chip: #222D2A; --track: #26322E; --selBg: #1B3428; --selInk: #7FC8A2; --blueSoft: #1B2B3C; --blueInk: #A9CBEA;
  --accent2: #5B9BD5; --amber: #D9A441; --amberSoft: #3A3326; --amberInk: #D9B56A; --inBand: #1F4433; --outBand: #3A3326; --logoDrop: #D9443F; --heading-accent: #7FC8A2;
  --sky-base: #0F1A17; --sky1: #1E5A43; --sky2: #23426E; --sky3: #3A3326;
  --ring-pale: rgba(201,132,90,0.45); --ring-stale: #5B6763; --ring-same: #3A4642; --ring-track: #1C2724;
  --apricot-fill: rgba(201,132,90,0.18); --lav-fill: rgba(122,114,190,0.2); --sage-fill: rgba(94,156,126,0.2); --calm-ink: #8CC5A8; --care-ink: #E0A27C;
  --same-dot: #8C9A95; --prev-dot: #8C9A95;
  --bm-b1: #24463B; --bm-b2: #22395A; --bm-hair: #1A332B; --bm-mus: #000000; --bm-ma: 0.16; --bm-line: #8A9A95; --card-shadow: none; --seg-bg: #222D2A; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 17px/1.6 var(--body); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; margin: 0 0 14px; text-wrap: balance; }
h1 { font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.6vw, 38px); }
h3 { font-size: 20px; }
.it { font-family: var(--display); font-style: italic; color: var(--heading-accent); }
.label { font: 700 12px var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--amberInk); }
.small { font-size: 14px; color: var(--muted); }
.intro { color: var(--ink2); max-width: 40em; }

/* header + logo (ui/kit.tsx Mark / Wordmark) */
header.top { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; gap: 16px; }
.brand { display: flex; align-items: flex-end; gap: 10px; text-decoration: none; color: var(--ink); }
.wordmark { display: inline-flex; align-items: flex-end; font: 500 32px/1.1 var(--display); letter-spacing: -0.4px; color: var(--ink); }
.wordmark svg { width: 8.5px; height: 27.5px; margin: 0 1.3px 6.4px; }
nav { display: flex; gap: 22px; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--ink2); font-weight: 500; font-size: 15px; }
nav a:hover { color: var(--ink); }

/* hero */
.hero { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding-block: 40px 80px; }
.hero .lede { font-size: 20px; color: var(--ink2); max-width: 32em; }
.pill { display: inline-block; padding: 5px 12px; border-radius: 12px; background: var(--selBg); color: var(--selInk); font-weight: 600; font-size: 13px; margin-bottom: 18px; }
.cta { display: inline-block; margin-top: 18px; padding: 15px 24px; border-radius: 18px; background: var(--accent); color: #FFFFFF; text-decoration: none; font-weight: 600; box-shadow: 0 6px 14px rgba(47,125,91,.35); transition: transform .2s ease, box-shadow .2s ease; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(47,125,91,.4); }

/* phone frame (presentation only; screen content is the app's own components) */
.device { justify-self: center; position: relative; width: 384px; max-width: 100%; border-radius: 52px; padding: 12px; background: #151B19;
  box-shadow: 0 0 0 1.5px #3A4441, 0 2px 4px rgba(0,0,0,.2), 0 30px 60px -20px rgba(var(--shadow),.45), 30px 50px 90px -50px rgba(47,125,91,.5);
  transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); transition: transform .5s ease; }
.device:hover { transform: none; }
.device.right { transform: perspective(1400px) rotateY(8deg) rotateX(2deg); }
.device.right:hover { transform: none; }
.device.notch::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; border-radius: 16px; background: #151B19; z-index: 3; }
.screen { position: relative; overflow: hidden; border-radius: 40px; background: var(--page); padding: 58px 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.screen .skyfx { position: absolute; inset: 0 0 auto; height: 300px; background:
  radial-gradient(circle at 10% 5%, var(--sky1) 0, transparent 55%), radial-gradient(circle at 95% 20%, var(--sky2) 0, transparent 50%),
  radial-gradient(circle at 45% 70%, var(--sky3) 0, transparent 45%), var(--sky-base); filter: blur(10px); opacity: .9; }
.screen .skyfx::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, var(--page)); }
.screen > * { position: relative; }
.greet { font: 500 26px/1.15 var(--display); letter-spacing: -0.5px; margin: 2px 0 4px; }
.greet .it { font-size: inherit; }

/* app Card (ui/kit.tsx) */
.acard { background: var(--surface); border-radius: 22px; padding: 16px; box-shadow: var(--card-shadow); }
/* Today ring card */
.today { display: flex; gap: 16px; align-items: center; }
.ringbox { position: relative; flex: none; }
.ringbox svg { display: block; width: 100%; height: 100%; }
.ringbox .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ringbox .num b { font: 600 var(--n, 23.5px) var(--mono); color: var(--ink); }
.ringbox .num span { font: 400 11px var(--body); color: var(--muted); }
.ringbox .i { position: absolute; right: -2px; top: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--chip); color: var(--muted); font: 700 12px/22px var(--body); text-align: center; }
.today .txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sky { font: 500 22px/1.15 var(--display); color: var(--ink); }
.t-small { font: 400 13px/1.35 var(--body); color: var(--ink2); }
.lastrep { display: flex; flex-direction: column; gap: 1px; }
.lastrep small { font-size: 11px; color: var(--muted); }
.lastrep span { font: 600 13px var(--body); }
.g { color: var(--ring-green); } .w { color: var(--ring-worse); }
.chipst { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 3px 10px; font: 600 12px var(--body); background: var(--care-bg); color: var(--care-ink); }
.chipst i { width: 6px; height: 6px; border-radius: 3px; background: var(--apricot); }
.link { font: 600 13px var(--body); color: var(--accent); }

/* Your latest report (ui/LatestReport.tsx) */
.lr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lr-head b { font: 500 20px var(--display); color: var(--ink); }
.lr-head span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.blk { display: flex; gap: 12px; border-radius: 20px; padding: 12px 14px; }
.blk .ic { width: 14px; height: 22px; display: grid; place-items: center; flex: none; }
.blk .bd { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.blk .tt { display: flex; justify-content: space-between; font: 600 15px var(--body); color: var(--ink); }
.blk .tt em { font: 500 15px var(--body); font-style: normal; color: var(--muted); }
.blk p { margin: 0; font: 400 13px/1.45 var(--body); color: var(--ink2); }
.blk .row { display: flex; align-items: center; }
.btn-plan { align-self: flex-start; margin-top: 6px; background: var(--surface); border-radius: 16px; padding: 6px 14px; font: 600 13px var(--body); color: var(--lavender); }
.mk-ok { font: 700 15px/1 var(--body); }
.mk { display: inline-block; border-radius: 50%; border: 1.5px solid var(--apricot); overflow: hidden; }
.mk.half { background: linear-gradient(90deg, var(--apricot) 50%, transparent 50%); }
.newdot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--new); margin-left: 7px; }
.newpill { display: inline-block; background: var(--new); color: #FFFFFF; border-radius: 6px; padding: 2px 6px; font: 700 10px var(--body); letter-spacing: .6px; }

/* sections */
.feature { padding-block: 32px 80px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two > * { min-width: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.card { background: var(--surface); border-radius: 22px; padding: 24px; box-shadow: var(--card-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(var(--shadow),.25); }
.card p { margin: 0; color: var(--ink2); font-size: 16px; }
.step { font: 600 13px var(--mono); color: var(--accent); margin-bottom: 10px; display: block; }

/* body map */
.bodies { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.bodies figure { margin: 0; background: var(--surface); border-radius: 28px; padding: 18px 12px 14px; box-shadow: var(--card-shadow); }
.bodies figcaption { text-align: center; font-size: 13px; color: var(--faint); }
.bodies h3 { text-align: center; font-size: 22px; margin: 2px 0 0; }
svg.body { width: 100%; height: auto; display: block; }
svg.body > g.fig { filter: drop-shadow(0 12px 16px rgba(var(--shadow),.12)); }
svg.body .lbl { font: 600 11.5px var(--body); fill: var(--ink); }
svg.body .sub { font: 400 10.5px var(--body); }
.legend { display: flex; gap: 14px; justify-content: center; margin-top: 16px; font-size: 13px; color: var(--ink2); flex-wrap: wrap; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 5px; margin-right: 6px; }

/* ring sheet legend (RingSheet Line) */
.sheet h3 { font: 600 15px var(--body); margin: 16px 0 2px; }
.sheet .sub { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.line { display: flex; align-items: center; gap: 10px; padding-block: 7px; font-size: 14px; color: var(--ink); }
.line i { flex: none; width: 14px; height: 10px; border-radius: 5px; }
.line i.dash { background: transparent; border: 1.5px dashed var(--ring-stale); }
.line .gl { width: 14px; text-align: center; font: 700 13px var(--body); }
.line b { margin-left: auto; font: 600 14px var(--mono); }
.words { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; margin-top: 14px; }
.words span { background: var(--chip); border-radius: 12px; padding: 6px 10px; font-size: 13px; color: var(--ink2); text-align: center; }
.words b { display: block; font: 500 15px var(--display); color: var(--ink); }

/* notifications (lock screen) */
.lock { padding: 60px 14px 26px; background: linear-gradient(165deg, #1F6B4C 0%, #24588A 60%, #3B4F86 100%); color: #FFFFFF; gap: 8px; }
.lock .clock { text-align: center; font: 600 64px/1 var(--body); letter-spacing: -0.02em; }
.lock .date { text-align: center; font-size: 15px; opacity: .85; margin-bottom: 14px; }
.ntf { background: rgba(255,255,255,.84); color: #12201E; border-radius: 20px; padding: 10px 14px 12px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.ntf .nh { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .04em; color: #55625F; margin-bottom: 2px; }
.ntf .nh .appicon { width: 18px; height: 18px; border-radius: 5px; background: #FFFFFF; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); display: grid; place-items: center; }
.ntf .nh > span:last-child { margin-left: auto; letter-spacing: 0; }
.ntf b { font-size: 15px; display: block; line-height: 1.3; }
.ntf p { margin: 1px 0 0; font-size: 14px; line-height: 1.35; color: #3D4A47; }

/* signs */
.signs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
.signs .card > p { margin-top: 10px; }
.rbar { position: relative; height: 26px; margin: 14px 4px 4px; }
.rbar .trk { position: absolute; left: 0; right: 0; top: 8px; height: 10px; border-radius: 5px; background: var(--outBand); overflow: hidden; }
.rbar .zone { position: absolute; top: 0; bottom: 0; background: var(--inBand); }
.rbar .prev { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 6px; border: 2px solid var(--prev-dot); background: var(--surface); }
.rbar .now { position: absolute; top: 3px; width: 20px; height: 20px; margin-left: -10px; border-radius: 10px; border: 3px solid var(--surface); box-shadow: 0 2px 6px rgba(var(--shadow),.25); }
.rbar-ex { display: flex; flex-direction: column; gap: 12px; }
.rbar-ex .nm { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
.rbar-ex .nm span { font: 600 15px var(--mono); }
.rbar-ex .nm small { font: 400 11px var(--body); color: var(--muted); }
.trend { font: 400 12px var(--body); color: var(--muted); }
.trend b { font: 700 14px var(--body); }
.trends { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.trends div { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; gap: 12px; }
.statuses { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 15px; }
.statuses div { display: flex; align-items: center; gap: 10px; }
.statuses .ic { width: 16px; display: grid; place-items: center; }

/* band + footer */
.band { background: var(--surface); padding-block: 64px; }
ul.ticks { list-style: none; padding: 0; margin: 0; }
ul.ticks li { padding: 7px 0 7px 30px; position: relative; color: var(--ink2); }
ul.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--ring-green); font-weight: 700; }
footer { padding-block: 40px 60px; color: var(--muted); font-size: 14px; }
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
footer .links a { color: var(--ink2); text-decoration: none; }

/* text pages */
.doc { max-width: 760px; padding-block: 24px 72px; }
.doc h1 { font-size: clamp(34px, 5vw, 46px); }
.doc h2 { font-size: 24px; margin-top: 36px; }
.doc p, .doc li { color: var(--ink2); }
.doc .tbl { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc th { color: var(--ink); font-weight: 600; }
.note { background: var(--amberSoft); border-radius: 16px; padding: 16px 18px; color: var(--ink); }
details { background: var(--surface); border-radius: 16px; padding: 14px 18px; margin: 10px 0; box-shadow: var(--card-shadow); }
summary { cursor: pointer; font-weight: 600; color: var(--ink); }

@media (max-width: 860px) {
  .hero, .two { grid-template-columns: 1fr; gap: 36px; }
  .grid3, .bodies, .signs { grid-template-columns: 1fr; }
  .device, .device.right { transform: none; }
  .words { grid-template-columns: repeat(2, 1fr); }
  nav .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { .device, .device.right, .card, .cta { transition: none; transform: none !important; } }

/* ---------- real app screenshots ---------- */
.shot, .crop { display: block; }
.shot img, .crop img { display: block; width: 100%; height: auto; }
.dk { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lt { display: none !important; } :root:not([data-theme="light"]) .dk { display: block !important; } }
:root[data-theme="dark"] .lt { display: none !important; }
:root[data-theme="dark"] .dk { display: block !important; }
.device > .shot { border-radius: 40px; overflow: hidden; background: var(--page); }
.device.sm { width: 330px; border-radius: 46px; padding: 10px; }
.device.sm > .shot { border-radius: 36px; }
.crop { border-radius: 22px; overflow: hidden; box-shadow: 0 2px 14px rgba(var(--shadow),.08), 0 24px 40px -24px rgba(var(--shadow),.3); max-width: 420px; }
.card .crop { box-shadow: 0 0 0 1px var(--line); margin: 14px 0 4px; max-width: 100%; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pair figcaption { font: 500 20px var(--display); color: var(--ink); }
.signs { grid-template-columns: 1.1fr 1fr; align-items: start; }
.signs .col { display: flex; flex-direction: column; gap: 18px; }
.hdr-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
/* appearance switch: same look as the app's Plain/Medical switch (ui/kit.tsx ModeSwitch) */
.seg { display: flex; background: var(--seg-bg); border-radius: 10px; padding: 3px; }
.seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 500 13px var(--body); color: var(--muted); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } .signs { grid-template-columns: 1fr; } .device.sm { width: 300px; } }
.hero > *, .two > *, .pair > * { min-width: 0; }
@media (max-width: 860px) { .hero, .two, .pair, .signs { grid-template-columns: minmax(0, 1fr); } .device { width: 100%; max-width: 360px; } }

/* ---------- photographs ---------- */
.photo { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(var(--shadow),.45); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.how { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; margin-top: 24px; align-items: stretch; }
.how .photo.tall { min-height: 420px; }
.how .steps { grid-template-columns: 1fr; margin-top: 0; gap: 14px; }
.how .steps .card { padding: 20px 22px; }
#notifications .photo { margin-top: 26px; aspect-ratio: 4 / 3; max-width: 100%; }
.photoband { position: relative; min-height: 460px; display: flex; align-items: center; overflow: hidden; background: #1E2A26; }
.photoband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.photoband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,21,19,.72) 0%, rgba(14,21,19,.45) 38%, rgba(14,21,19,0) 65%); }
.photoband .wrap { position: relative; z-index: 1; width: 100%; padding-block: 56px; }
.pb-text { max-width: 30rem; color: #FFFFFF; }
.pb-text h2 { color: #FFFFFF; }
.pb-text h2 .it { color: #BFE3CF; }
.pb-text p { color: rgba(255,255,255,.88); font-size: 19px; margin: 0; }
.pair figure.withphoto { position: relative; padding-top: 0; }
.withphoto > img.bg { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 50px -24px rgba(var(--shadow),.45); }
.withphoto > .device { margin-top: -170px; }
@media (max-width: 860px) {
  .how { grid-template-columns: minmax(0, 1fr); }
  .how .photo.tall { min-height: 0; aspect-ratio: 4 / 3; }
  .photoband { min-height: 380px; }
  .photoband::after { background: linear-gradient(0deg, rgba(14,21,19,.8) 0%, rgba(14,21,19,.35) 55%, rgba(14,21,19,.1) 100%); }
  .photoband { align-items: flex-end; }
  .withphoto > .device { margin-top: -120px; }
}
.withphoto > img.bg { height: auto; flex: none; display: block; max-width: 100%; }

/* ---------- body section: tall photo cards, phone rising from below ---------- */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 28px; }
.feat > * { min-width: 0; }
.fcard { position: relative; border-radius: 34px; overflow: hidden; height: 760px; box-shadow: 0 30px 60px -30px rgba(var(--shadow),.5); background: #1E2A26; }
.fcard > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,16,.55) 0%, rgba(10,18,16,0) 32%, rgba(10,18,16,0) 55%, rgba(10,18,16,.55) 100%); pointer-events: none; }
.fcard .head { position: absolute; z-index: 2; top: 28px; left: 30px; right: 30px; color: #FFFFFF; }
.fcard .head h3 { color: #FFFFFF; font-size: 36px; margin: 0 0 6px; }
.fcard .head p { margin: 0 0 12px; color: rgba(255,255,255,.9); font-size: 16px; max-width: 22em; }
.stat { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.9); color: #12201E; border-radius: 14px; padding: 8px 14px; font: 600 14px var(--body); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
.stat i { width: 9px; height: 9px; border-radius: 5px; background: #2F7D5B; }
.fcard .device.sm { position: absolute; z-index: 3; left: 50%; bottom: -230px; width: 300px; transform: translateX(-50%) rotate(-3deg); transition: bottom .5s ease, transform .5s ease; }
.fcard:nth-child(2) .device.sm { transform: translateX(-50%) rotate(3deg); }
.fcard:hover .device.sm, .fcard:focus-within .device.sm { bottom: -40px; transform: translateX(-50%) rotate(0); }
.fcard .device.sm:hover { transform: translateX(-50%) rotate(0); }
@media (max-width: 860px) { .feat { grid-template-columns: minmax(0, 1fr); } .fcard { height: 640px; } .fcard .device.sm { width: 280px; } }
@media (prefers-reduced-motion: reduce) { .fcard .device.sm { transition: none; } }

/* Body cards on phones: photo on top, the phone below it, overlapping only the photo's bottom edge. Laptop layout unchanged. */
@media (max-width: 860px) {
  .fcard { height: auto; overflow: visible; background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; }
  .fcard > img.bg { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 30px; box-shadow: 0 24px 50px -24px rgba(var(--shadow),.5); }
  .fcard::after { inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 5; border-radius: 30px; background: linear-gradient(180deg, rgba(10,18,16,.55) 0%, rgba(10,18,16,0) 40%); }
  .fcard .head { top: 22px; left: 22px; right: 22px; }
  .fcard .head h3 { font-size: 30px; }
  .fcard .device.sm, .fcard:nth-child(2) .device.sm, .fcard:hover .device.sm, .fcard:focus-within .device.sm { position: relative; left: auto; bottom: auto; width: 78%; max-width: 300px; margin-top: -70px; transform: none; transition: none; }
  .feat { gap: 48px; }
}

/* Step 1: upload methods (icons from the app's icon set) */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.way { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 8px 14px; border-radius: 18px; background: var(--field); border: 1px solid var(--line); }
.way .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px -8px rgba(var(--shadow),.4); }
.way.w-pdf .ic { background: var(--amberSoft); color: var(--amberInk); }
.way.w-photo .ic { background: var(--selBg); color: var(--accent); }
.way.w-mail .ic { background: var(--blueSoft); color: var(--blueInk); }
.way b { font: 600 15px var(--body); color: var(--ink); }
.way small { font-size: 12px; line-height: 1.3; color: var(--muted); }
@media (max-width: 420px) { .ways { gap: 8px; } .way { padding: 12px 4px; } .way .ic { width: 44px; height: 44px; } }

/* Notifications: private by default, demo switch shows the detailed version */
.ntf-demo { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.lock .ntf.det { display: none; }
.lock.detailed .ntf.det { display: block; }
.lock.detailed .ntf.priv { display: none; }
.detail-toggle { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 384px; background: var(--surface); border-radius: 18px; padding: 12px 14px; box-shadow: var(--card-shadow); cursor: pointer; }
.detail-toggle .lockic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--selBg); color: var(--accent); flex: none; }
.detail-toggle .dt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.detail-toggle b { font: 600 15px var(--body); color: var(--ink); }
.detail-toggle small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.detail-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.detail-toggle .sw { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--track); transition: background .2s; }
.detail-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.detail-toggle input:checked + .sw { background: var(--accent); }
.detail-toggle input:checked + .sw::after { transform: translateX(20px); }
.detail-toggle input:focus-visible + .sw { outline: 2px solid var(--accent2); outline-offset: 2px; }