/* ────────────────────────────────────────────────────────────
   ILMENO — Tour pages (use-cases/*)
   Same design language as the landing page (index.html keeps its
   CSS inline; the tokens below MUST stay in sync with it): cream /
   indigo / coral, Crimson serif headings, graphite iPhone frame.
   Light + dark via html[data-theme], palettes via html[data-palette]
   — both read from the same localStorage keys as the landing page,
   so a visitor keeps their look when branching into a tour.
   ──────────────────────────────────────────────────────────── */

:root {
    --cream:        #F5EBE0;
    --cream-2:      #FAF3E8;
    --cream-d:      #ECE0CF;
    --ink:          #1E2347;
    --ink-2:        #2A3060;
    --ink-soft:     #4B5275;
    --ink-mute:     #8893B0;
    --accent:       #FF7849;
    --accent-d:     #D55F32;
    --accent-soft:  #FFE4D6;
    --sage:         #7BA888;
    --sage-soft:    #DAE7DC;
    --rule:         rgba(30, 35, 71, 0.14);
    --paper:        #FFFEFB;
    --sans:         -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    --serif:        'Crimson Pro', 'Crimson Text', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html[data-lang="de"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="de"] { display: none; }

body { max-width: 1180px; margin: 0 auto; padding: 0 32px 80px; }

a { color: inherit; }

/* iPhone frame — identical to the landing page */
.iphone-frame {
    position: relative; display: inline-block;
    width: 100%; max-width: 280px;
    padding: 12px 11px 11px;
    background: linear-gradient(180deg, #2a2a2c 0%, #1c1c1e 50%, #2a2a2c 100%);
    border-radius: 48px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 0.5px rgba(0, 0, 0, 0.6),
        0 30px 60px -20px rgba(30, 35, 71, 0.20),
        0 8px 24px -8px rgba(30, 35, 71, 0.14);
}
.iphone-frame img {
    display: block; width: 100%; height: auto;
    border-radius: 36px; background: #0A0F1F;
    box-shadow: 0 0 0 2px #0a0a0a, inset 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}
.iphone-frame::before {
    content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 26%; height: 22px; background: #050505; border-radius: 12px; z-index: 2;
}

/* ════ NAV — same as landing ═════════════════════════════════════ */

nav.top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 56px;
}
nav.top .brand {
    font-family: var(--serif); font-weight: 600;
    font-size: 24px; color: var(--ink);
    text-decoration: none; letter-spacing: -0.005em;
}
nav.top .brand small {
    font-style: italic; font-weight: 400; font-size: 14px;
    color: var(--ink-mute); margin-left: 8px;
}
nav.top .links { display: flex; gap: 28px; align-items: center; }
nav.top .links a {
    color: var(--ink-soft); text-decoration: none;
    font-size: 14px; letter-spacing: 0.02em;
}
nav.top .links a:hover { color: var(--accent-d); }
nav.top .actions { display: flex; gap: 10px; align-items: center; }
nav.top button {
    background: transparent; border: none;
    font: inherit; font-size: 13px; color: var(--ink-soft);
    cursor: pointer; padding: 8px 12px; border-radius: 8px;
    letter-spacing: 0.04em;
}
nav.top button:hover { background: var(--cream-d); }
nav.top .cta {
    background: var(--accent); color: var(--paper);
    font-size: 14px; font-weight: 700;
    padding: 10px 20px; border-radius: 8px;
    text-decoration: none;
}
nav.top .cta:hover { background: var(--accent-d); }

/* ════ TOUR HERO ═════════════════════════════════════════════════ */

.case-hero {
    text-align: center;
    max-width: 760px; margin: 0 auto 72px;
}
.case-hero .eyebrow {
    font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-soft);
    margin-bottom: 20px; font-weight: 600;
}
.case-hero .eyebrow .dot { color: var(--accent); margin: 0 6px; }
.case-hero h1 {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height: 1.08; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 22px;
}
.case-hero h1 em, .case-hero h1 .accent { color: var(--accent-d); font-style: italic; }
.case-hero .case-lede {
    font-family: var(--serif);
    font-size: clamp(18px, 1.8vw, 21px);
    line-height: 1.45; color: var(--ink-soft);
    text-align: left;
}
.case-hero .case-lede strong { color: var(--ink); font-weight: 600; }

/* ════ BODY — text column + sticky phone column ══════════════════ */

.case-body {
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 72px; align-items: start;
    margin-bottom: 72px;
}

.case-block { margin-bottom: 56px; }
.case-block:last-child { margin-bottom: 0; }
.section-title {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(24px, 2.6vw, 30px);
    letter-spacing: -0.015em; color: var(--ink);
    margin-bottom: 28px;
}
.section-title::after {
    content: ""; flex: 0 0 44px; height: 1.5px;
    background: var(--accent-d); opacity: 0.45;
}

/* Journey — numbered like the landing page mechanics (i · ii · iii) */
.journey-list {
    list-style: none; counter-reset: journey;
}
.journey-list li {
    counter-increment: journey;
    position: relative;
    padding: 0 0 26px 52px;
}
.journey-list li:last-child { padding-bottom: 0; }
.journey-list li::before {
    content: counter(journey, lower-roman);
    position: absolute; left: 0; top: 1px;
    width: 36px; text-align: right;
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 20px; color: var(--accent-d); line-height: 1.3;
}
.journey-list h4 {
    font-family: var(--serif); font-weight: 600;
    font-size: 19px; color: var(--ink);
    line-height: 1.3; margin-bottom: 6px;
}
.journey-list p {
    font-size: 15px; line-height: 1.55; color: var(--ink-soft);
}

/* Insights — three small cards, stacked in the narrow column */
.insight-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.insight-card {
    background: var(--paper);
    border-radius: 16px; padding: 20px 22px;
}
.insight-card .label {
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 700;
    color: var(--accent-d); margin-bottom: 8px;
}
.insight-card h5 {
    font-family: var(--serif); font-weight: 600;
    font-size: 17px; color: var(--ink); margin-bottom: 6px;
}
.insight-card p {
    font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}

/* ════ SIM SHELL — phone + state switcher ════════════════════════ */

.sim-shell {
    position: sticky; top: 24px;
    background: var(--paper);
    border-radius: 24px;
    padding: 26px 26px 30px;
}
.sim-controls { margin-bottom: 22px; }
.stage-label {
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 700;
    color: var(--ink-mute); margin-bottom: 12px;
    text-align: center;
}
.choice-row {
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.choice-row input[type="radio"] { display: none; }
.choice-row label {
    font-size: 13px; font-weight: 600; color: var(--ink-soft);
    background: var(--cream);
    padding: 8px 16px; border-radius: 999px;
    cursor: pointer; letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s;
}
.choice-row label:hover { background: var(--cream-d); }
.choice-row input[type="radio"]:checked + label {
    background: var(--ink); color: var(--paper);
}

/* State switching — CSS-only. The radios sit in .sim-controls, the
   states in .sim-stage, so plain sibling selectors can't connect
   them; :has() on the shared .sim-shell ancestor does. Every
   id="state-X" across the eight tour pages maps to data-state="X". */
.sim-state { display: none; text-align: center; }
.sim-shell:has(#state-siri:checked)      [data-state="siri"],
.sim-shell:has(#state-share:checked)     [data-state="share"],
.sim-shell:has(#state-inbox:checked)     [data-state="inbox"],
.sim-shell:has(#state-schedule:checked)  [data-state="schedule"],
.sim-shell:has(#state-place:checked)     [data-state="place"],
.sim-shell:has(#state-manual:checked)    [data-state="manual"],
.sim-shell:has(#state-morning:checked)   [data-state="morning"],
.sim-shell:has(#state-afternoon:checked) [data-state="afternoon"],
.sim-shell:has(#state-evening:checked)   [data-state="evening"],
.sim-shell:has(#state-health:checked)    [data-state="health"],
.sim-shell:has(#state-family:checked)    [data-state="family"],
.sim-shell:has(#state-sport:checked)     [data-state="sport"],
.sim-shell:has(#state-daily:checked)     [data-state="daily"],
.sim-shell:has(#state-weekly:checked)    [data-state="weekly"],
.sim-shell:has(#state-anchor:checked)    [data-state="anchor"],
.sim-shell:has(#state-say:checked)       [data-state="say"],
.sim-shell:has(#state-sync:checked)      [data-state="sync"],
.sim-shell:has(#state-enrich:checked)    [data-state="enrich"],
.sim-shell:has(#state-timeline:checked)  [data-state="timeline"],
.sim-shell:has(#state-trail:checked)     [data-state="trail"] { display: block; }

.sim-state .iphone-frame { max-width: 250px; margin: 0 auto 24px; }

.sim-card { text-align: left; }
.sim-card .kicker {
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 700;
    color: var(--accent-d); margin-bottom: 10px;
}
.sim-card h3 {
    font-family: var(--serif); font-weight: 600;
    font-size: 21px; line-height: 1.25;
    letter-spacing: -0.01em; color: var(--ink);
    margin-bottom: 10px;
}
.sim-card .card-body {
    font-size: 14px; line-height: 1.55;
    color: var(--ink-soft); margin-bottom: 18px;
}
.sim-meta {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 18px;
}
.sim-note {
    background: var(--cream-2);
    border-radius: 12px; padding: 12px 14px;
}
.sim-note small {
    display: block; font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-mute);
    margin-bottom: 5px;
}
.sim-note strong {
    display: block; font-size: 13px; line-height: 1.4;
    font-weight: 600; color: var(--ink);
}
.metric-list {
    list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
}
.metric-list li {
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--ink-soft);
    background: var(--cream);
    border-radius: 999px; padding: 5px 12px;
}

/* ════ TOUR FOOTER — prev/next navigation ════════════════════════ */

.tour-footer {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    padding: 8px 0 24px;
}
.tour-link {
    display: inline-block; text-decoration: none;
    font-size: 15px; font-weight: 600;
    padding: 14px 26px; border-radius: 10px;
}
.tour-link.primary { background: var(--ink); color: var(--paper); }
.tour-link.primary:hover { background: var(--ink-2); }
.tour-link.secondary {
    background: transparent; color: var(--ink);
    border: 1.5px solid var(--ink);
}
.tour-link.secondary:hover { background: var(--ink); color: var(--paper); }

/* ════ PAGE FOOTER — same as landing ═════════════════════════════ */

footer {
    padding: 32px 0 0;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px; align-items: center;
    font-size: 13px; color: var(--ink-mute);
}
footer .left, footer .right { display: flex; gap: 18px; align-items: center; }
footer .right { justify-content: flex-end; }
footer a { color: var(--ink-mute); text-decoration: none; }
footer a:hover { color: var(--accent-d); }
footer .build { text-align: center; font-size: 11px; letter-spacing: 0.04em; }

/* ════ RESPONSIVE ═════════════════════════════════════════════════ */

@media (max-width: 900px) {
    body { padding: 0 18px 60px; }
    nav.top .links { display: none; }
    .case-hero { margin-bottom: 48px; }
    .case-body { grid-template-columns: 1fr; gap: 48px; margin-bottom: 48px; }
    .sim-shell { position: static; }
    footer { grid-template-columns: 1fr; text-align: center; }
    footer .left, footer .right { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 540px) {
    .sim-meta { grid-template-columns: 1fr; }
    .sim-state .iphone-frame { max-width: 220px; }
}

/* ════ DARK THEME — token flip, same values as landing ═══════════ */

html[data-theme="dark"] {
    --cream:       #13172B;
    --cream-2:     #1B2039;
    --cream-d:     #0C0F20;
    --ink:         #F1EADF;
    --ink-2:       #FBF6EE;
    --ink-soft:    #B4BAD3;
    --ink-mute:    #7A85A6;
    --rule:        rgba(241, 234, 223, 0.12);
    --paper:       #1E2340;
    --sage-soft:   #17271D;
    color-scheme: dark;
}
html[data-theme="dark"] nav.top .cta { color: #FFFEFB; }

/* ════ COLOR PALETTES — same token sets as the landing page ══════ */

html[data-palette="mint"] {
    --cream:        #EAF2EA;
    --cream-2:      #F2F7F0;
    --cream-d:      #DCE8DB;
    --ink:          #1D3A2A;
    --ink-2:        #2A4D39;
    --ink-soft:     #4A6B58;
    --ink-mute:     #7E9C8B;
    --accent:       #DE8A35;
    --accent-d:     #B56C1E;
    --accent-soft:  #F7E6CD;
    --sage:         #6B8FA8;
    --sage-soft:    #DDE8EE;
    --rule:         rgba(29, 58, 42, 0.14);
    --paper:        #FDFEFB;
}
html[data-palette="mint"][data-theme="dark"] {
    --cream:        #0F1F16;
    --cream-2:      #172A1F;
    --cream-d:      #0A1710;
    --ink:          #E7F0E4;
    --ink-2:        #F4FAF0;
    --ink-soft:     #AFC5B4;
    --ink-mute:     #7A9483;
    --rule:         rgba(231, 240, 228, 0.12);
    --paper:        #1B3024;
    --sage-soft:    #1B2733;
}

html[data-palette="violet"] {
    --cream:        #F0ECF6;
    --cream-2:      #F7F4FB;
    --cream-d:      #E2DBEE;
    --ink:          #2A2140;
    --ink-2:        #3A2E57;
    --ink-soft:     #5A4E7A;
    --ink-mute:     #8F86AC;
    --accent:       #D99A2B;
    --accent-d:     #A97417;
    --accent-soft:  #F5E7C8;
    --sage:         #7BA888;
    --sage-soft:    #DEE9DF;
    --rule:         rgba(42, 33, 64, 0.14);
    --paper:        #FEFDFC;
}
html[data-palette="violet"][data-theme="dark"] {
    --cream:        #171126;
    --cream-2:      #211936;
    --cream-d:      #100B1C;
    --ink:          #EFEAF7;
    --ink-2:        #F9F6FE;
    --ink-soft:     #BBB1D4;
    --ink-mute:     #857CA6;
    --rule:         rgba(239, 234, 247, 0.12);
    --paper:        #251C3D;
    --sage-soft:    #16261B;
}

html[data-palette="ocean"] {
    --cream:        #E9F0F2;
    --cream-2:      #F2F7F8;
    --cream-d:      #DAE6E9;
    --ink:          #123641;
    --ink-2:        #1C4A57;
    --ink-soft:     #40616D;
    --ink-mute:     #7C99A3;
    --accent:       #FF7849;
    --accent-d:     #D55F32;
    --accent-soft:  #FFE3D6;
    --sage:         #7BA888;
    --sage-soft:    #D9E7DD;
    --rule:         rgba(18, 54, 65, 0.14);
    --paper:        #FCFEFE;
}
html[data-palette="ocean"][data-theme="dark"] {
    --cream:        #0C1E24;
    --cream-2:      #143039;
    --cream-d:      #081418;
    --ink:          #E4F0F2;
    --ink-2:        #F2FAFB;
    --ink-soft:     #A9C4CB;
    --ink-mute:     #6F929C;
    --rule:         rgba(228, 240, 242, 0.12);
    --paper:        #17333C;
    --sage-soft:    #14271C;
}

html[data-palette="mono"] {
    --cream:        #F7F6F3;
    --cream-2:      #FCFBF9;
    --cream-d:      #E9E7E1;
    --ink:          #191919;
    --ink-2:        #2B2B2B;
    --ink-soft:     #4D4D4D;
    --ink-mute:     #8A8A8A;
    --accent:       #E23D28;
    --accent-d:     #B92E1C;
    --accent-soft:  #F9DCD6;
    --sage:         #5F6B5F;
    --sage-soft:    #E5E9E3;
    --rule:         rgba(25, 25, 25, 0.14);
    --paper:        #FFFFFF;
}
html[data-palette="mono"][data-theme="dark"] {
    --cream:        #141414;
    --cream-2:      #1E1E1E;
    --cream-d:      #0D0D0D;
    --ink:          #F0EEE9;
    --ink-2:        #FAF9F6;
    --ink-soft:     #BDBBB5;
    --ink-mute:     #858380;
    --rule:         rgba(240, 238, 233, 0.12);
    --paper:        #212121;
    --sage-soft:    #21251F;
}