/* Training hardware page. Shared typography and colours live in styles.css. */
.training-page { --muted:#c8bfb6; --line:#ffffff20; --accent:#db9082; }
.training-page .site-header { gap:24px; }
.training-page nav a[aria-current="page"] { color:var(--accent); }
.training-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:70px; padding:76px 0 48px; align-items:end; }
.training-intro h1 { font-size:clamp(68px,8.5vw,108px); }
.training-intro h1 span { color:var(--accent); }
.intro-copy p { color:var(--muted); }
.intro-copy .lead { font-size:22px; line-height:1.5; color:#f5f1ed; margin:0 0 16px; }
.text-link { display:inline-flex; align-items:center; gap:25px; font-size:14px; font-weight:600; padding:10px 0; }
.setup-nav { display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0; }
.setup-nav a { display:flex; align-items:center; gap:12px; padding:12px 22px 12px 0; margin-right:20px; font-size:14px; }
.setup-nav a:last-child { margin-left:auto; margin-right:0; padding-right:0; }
.setup-nav a span { color:var(--accent); font-size:12px; }
.concept-notice { display:flex; gap:12px; align-items:baseline; margin:22px 0 4px; }
.concept-notice p { font-size:12px; color:#bcb4ae; max-width:900px; margin:0; }
.notice-dot { flex:0 0 6px; height:6px; border-radius:50%; background:var(--accent); }
.setup { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; align-items:center; padding:64px 0; border-bottom:1px solid var(--line); scroll-margin-top:25px; }
.setup-photo { margin:0; min-width:0; }
.setup-photo a { display:block; cursor:zoom-in; }
.setup-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:5px; border:1px solid var(--line); background:#25211e; }
.setup-photo a:hover img { border-color:var(--accent); }
.setup-photo figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 15px; margin-top:12px; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:#bcb4ae; }
.setup-photo figcaption span:first-child { color:#e3d9cf; }
.setup-copy h2,.gate-copy h2 { font-size:clamp(38px,4.7vw,56px); }
.setup-copy .eyebrow { margin-bottom:16px; }
.setup-copy > p:not(.eyebrow),.gate-copy > p { color:var(--muted); font-size:15px; }
.kit { padding:17px 0 0; margin-top:22px; border-top:1px solid var(--line); }
.kit h3 { margin:0 0 8px; text-transform:uppercase; font-size:10px; letter-spacing:.15em; color:var(--accent); }
.kit ul,.gate-includes { list-style:none; padding:0; margin:0; font-size:14px; }
.kit li,.gate-includes li { padding:4px 0 4px 18px; position:relative; }
.kit li::before,.gate-includes li::before { content:"+"; position:absolute; left:0; color:var(--accent); }
.setup-copy .setup-use { font-size:12px; margin-top:20px; }
.setup-use strong { color:#eee5dd; }
.setup-reverse { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
.setup-reverse .setup-photo { order:2; }
.setup-reverse .setup-copy { order:1; }
.gate-section { margin:64px -32px 0; padding:32px; background:#1c1917; border:1px solid var(--line); border-radius:6px; scroll-margin-top:25px; }
.gate-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:28px; }
.gate-heading .eyebrow { margin:0; }
.addon-label { text-transform:uppercase; font-size:9px; letter-spacing:.13em; padding:5px 10px; border:1px solid #db908255; border-radius:20px; white-space:nowrap; color:#e0a294; }
.gate-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:48px; align-items:center; }
.gate-copy h2 { font-size:clamp(38px,4.5vw,52px); }
.gate-copy .small { font-size:12px; }
.gate-includes { margin-top:20px; }
.devices-section { padding:80px 0 40px; scroll-margin-top:25px; }
.section-heading { max-width:690px; }
.section-heading h2,.training-flow h2 { font-size:clamp(40px,5vw,58px); }
.section-heading > p:last-child { color:var(--muted); max-width:610px; }
.device-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:35px; }
.device-card h3 { font:700 32px/1.1 Barlow,sans-serif; margin:0 0 18px; }
.device-card > p:not(.eyebrow) { font-size:15px; color:var(--muted); }
.device-card .eyebrow { margin:24px 0 12px; }
.device-card .device-note { font-size:12px; padding-top:15px; border-top:1px solid var(--line); color:#e3d9cf; }
.device-illustration { height:330px; display:flex; justify-content:center; align-items:center; background:radial-gradient(ellipse at center,#342821,#191817 70%); border:1px solid var(--line); border-radius:6px; overflow:hidden; padding:24px; }
.phone-shell { background:#171717; border:2px solid #55504b; border-radius:28px; padding:8px; width:154px; height:288px; box-shadow:0 14px 24px #0008; position:relative; transform:rotate(-5deg); }
.phone-speaker { position:absolute; z-index:1; height:5px; width:36px; border-radius:5px; background:#333; left:calc(50% - 18px); top:12px; }
.phone-screen { height:100%; background:#050505; border-radius:20px; display:flex; flex-direction:column; align-items:center; padding:28px 8px 12px; }
.screen-topline { font-size:7px; font-weight:700; letter-spacing:.13em; color:#ded7d2; }
.screen-subtitle { font-size:6px; letter-spacing:.08em; margin-top:17px; color:#aaa; }
.countdown-digit { font:700 123px/1.13 Barlow,sans-serif; color:#f5f1ed; }
.screen-caption { font-size:7px; color:#db9082; letter-spacing:.2em; }
.screen-footer { font-size:7px; color:#aaa; margin-top:auto; }
.tablet-shell { width:100%; max-width:400px; background:#171717; border:2px solid #55504b; border-radius:18px; padding:12px; box-shadow:0 14px 24px #0008; transform:rotate(3deg); }
.tablet-screen { padding:17px 17px 12px; background:#050505; border-radius:8px; }
.tablet-screen .screen-topline { display:flex; justify-content:space-between; gap:10px; font-size:8px; }
.tablet-screen .screen-topline > span { color:#aaa; font-size:7px; }
.split-digit { display:block; font:700 clamp(65px,8vw,102px)/1.25 Barlow,sans-serif; color:#9cdb88; text-align:center; font-variant-numeric:tabular-nums; }
.split-detail { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:7px; color:#aaa; }
.split-detail strong { color:#9cdb88; font-size:12px; }
.display-footer { display:flex; justify-content:space-between; font-size:7px; color:#aaa; border-top:1px solid #ffffff25; margin-top:16px; padding-top:10px; }
.illustration-note { margin:25px 0 0; font-size:11px; }
.training-flow { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:40px 0 60px; border-bottom:1px solid var(--line); }
.training-flow ol { list-style:none; padding:0; margin:0; }
.training-flow li { display:flex; gap:22px; padding:16px 0; border-bottom:1px solid var(--line); }
.training-flow li:first-child { padding-top:0; }
.training-flow li:last-child { border:0; }
.training-flow li > span { color:var(--accent); font:700 25px Barlow,sans-serif; }
.training-flow h3 { font-size:15px; margin:0 0 5px; }
.training-flow p { color:var(--muted); font-size:14px; margin:0; }
.training-closing h2 { font-size:36px; }
.training-closing p:not(.eyebrow) { color:var(--muted); font-size:14px; margin-bottom:0; }
.training-page footer > div { flex-wrap:wrap; }
@media(max-width:950px) {
    .training-intro { gap:35px; }
    .setup,.setup-reverse,.gate-layout { gap:30px; }
    .setup-copy h2 { font-size:42px; }
    .setup-nav a { margin-right:10px; padding-right:10px; font-size:12px; }
    .device-layout { gap:30px; }
    .device-illustration { height:300px; padding:20px; }
    .tablet-screen { padding:12px; }
    .tablet-screen .screen-topline { font-size:6px; }
    .tablet-screen .screen-topline > span { font-size:5px; }
    .split-detail { flex-wrap:wrap; }
}
@media(max-width:750px) {
    .training-page .site-header { align-items:flex-start; flex-direction:column; gap:14px; }
    .training-page .site-header nav { flex-wrap:wrap; gap:12px 22px; }
    .training-intro { grid-template-columns:1fr; padding:44px 0 26px; gap:24px; }
    .training-intro h1 { font-size:clamp(64px,15vw,90px); }
    .intro-copy .lead { font-size:19px; }
    .intro-copy p { font-size:15px; }
    .setup-nav { gap:0 18px; }
    .setup-nav a { margin:0; padding:8px 0; font-size:12px; gap:8px; }
    .setup-nav a:last-child { margin-left:0; }
    .concept-notice { margin-top:18px; }
    .concept-notice p { font-size:11px; }
    .setup,.setup-reverse { grid-template-columns:1fr; gap:28px; padding:38px 0; }
    .setup-reverse .setup-photo,.setup-reverse .setup-copy { order:initial; }
    .setup-copy h2 { font-size:46px; }
    .setup-copy .eyebrow { font-size:10px; }
    .setup-photo figcaption { font-size:9px; }
    .gate-section { margin:38px -8px 0; padding:22px; }
    .gate-heading { align-items:flex-start; gap:15px; }
    .gate-heading .eyebrow { font-size:9px; }
    .gate-layout,.device-layout,.training-flow { grid-template-columns:1fr; }
    .gate-photo { grid-row:1; }
    .gate-copy h2 { font-size:43px; }
    .devices-section { padding-top:50px; }
    .section-heading h2,.training-flow h2 { font-size:43px; }
    .device-layout { gap:24px; }
    .device-illustration { height:320px; padding:24px; }
    .tablet-screen { padding:17px; }
    .tablet-screen .screen-topline { font-size:8px; }
    .tablet-screen .screen-topline > span { font-size:7px; }
    .split-digit { font-size:clamp(78px,23vw,110px); }
    .training-flow { padding:25px 0 35px; gap:30px; }
    .training-closing { padding:35px 0 45px; }
    .training-closing h2 { font-size:33px; }
}

/* The gate scene follows the same landscape framing as the sensor concepts. */
.gate-photo img{aspect-ratio:3/2;object-fit:cover;background:#25211e}
.setup-photo figcaption a{display:inline;cursor:pointer}

/* Benefits explain the practical value of each training package. */
.setup-benefits{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
.setup-benefits h3{margin:0 0 12px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:var(--accent)}
.setup-benefits ol{margin:0;padding-left:21px;color:var(--muted);font-size:14px;line-height:1.6}
.setup-benefits li{padding-left:5px;margin:0 0 10px}
.setup-benefits li::marker{color:var(--accent);font-weight:600}
.setup-benefits strong{color:#f5f1ed;font-weight:600}