:root{
    --navy:#0F2033;
    --navy-2:#132A42;
    --navy-3:#1B3A57;
    --ink:#13202C;
    --ink-soft:#57646F;
    --paper:#F4F8FA;
    /* The page backdrop has been its own, slightly deeper tone since
       2026-08-15. --paper stays what it was and keeps coloring individual
       components - otherwise tabs, input fields and the PDF block would
       have lost their contrast against the backdrop. */
    --backdrop:#E7EDF1;
    --card:#FFFFFF;
    --line:#DAE3E9;
    --line-dark:rgba(255,255,255,0.12);
    --teal:#18BFB4;
    /* Lowered from #0F766E on 2026-08-15. On the new, darker page backdrop
       the teal text on a grid line only reached a contrast of 4.26 against
       the 4.5 threshold - now 5.05. On white it rises from 5.47 to 6.37,
       so it gets better everywhere and worse nowhere. */
    --teal-deep:#0C6B63;
    --teal-soft:#E2F7F5;
    --m-photo:#3B82F6;
    --m-note:#F59E0B;
    --m-measure:#34C77B;
    --m-area:#8B5CF6;
    --m-issue:#EF4444;
    --radius:16px;
    --display:'Manrope',sans-serif;
    --body:'Inter',sans-serif;
    --mono:'IBM Plex Mono',monospace;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; font-family:var(--body); color:var(--ink); background:var(--backdrop); line-height:1.55; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:var(--display); margin:0; letter-spacing:-0.015em;}
  p{margin:0;}
  ul{margin:0; padding:0; list-style:none;}
  a{color:inherit;}
  button{font-family:var(--body); cursor:pointer;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  /* Short pages (404): the hero stretches so header, hero and footer fill
     the window, instead of leaving page background below the footer. */
  .page-fill{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;}
  .page-fill main{flex:1; display:flex; flex-direction:column;}
  .page-fill .hero{flex:1; display:flex; align-items:center;}
  .page-fill .hero > .wrap{width:100%;}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--teal);}
  .eyebrow.on-dark{color:#63E5DC;}
  .section{padding:100px 0; position:relative;}
  .section-head{max-width:660px; margin-bottom:52px;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px); font-weight:800; line-height:1.12;}
  .section-head .lead{margin-top:16px; color:var(--ink-soft); font-size:17px;}
  .accent{color:var(--teal-deep);}

  /* Scroll progress */
  #scrollbar{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--teal),#63E5DC); width:0; z-index:200; transition:width .1s linear;}

  /* ---------- HEADER ---------- */
  header{position:sticky; top:0; z-index:100; background:rgba(15,32,51,0.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-dark);}
  .nav{display:flex; align-items:center; justify-content:space-between; height:74px;}
  .brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:20px; color:#fff; text-decoration:none;}
  .brand svg, .brand img, .foot-brand img{flex:none;}
  .nav-links{display:flex; gap:32px; font-size:14.5px; font-weight:500;}
  .nav-links a{color:#B9C8D4; text-decoration:none; transition:color .15s;}
  .nav-links a:hover{color:#fff;}
  /* Language switch link: same look as the other nav-links entries. */
  .lang-switch{color:#B9C8D4; text-decoration:none; transition:color .15s;}
  .lang-switch:hover{color:#fff;}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:10px; font-weight:600; font-size:14.5px; border:1px solid transparent; text-decoration:none; transition:transform .18s, background .18s, border-color .18s, box-shadow .18s; white-space:nowrap;}
  .btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
  .btn-accent{background:var(--teal); color:#04211E; box-shadow:0 6px 18px -6px rgba(24,191,180,0.55);}
  .btn-accent:hover{background:#14A79D; transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(24,191,180,0.6);}
  .btn-outline-dark{background:transparent; color:#E5EEF4; border-color:rgba(255,255,255,0.28);}
  .btn-outline-dark:hover{border-color:#fff; transform:translateY(-2px);}
  .btn-navy{background:var(--navy); color:#fff;}
  .btn-navy:hover{background:#0A1727; transform:translateY(-2px);}
  .menu-toggle{display:none; background:none; border:none; padding:8px;}
  .menu-toggle span{display:block; width:22px; height:2px; background:#fff; position:relative;}
  .menu-toggle span::before,.menu-toggle span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:#fff;}
  .menu-toggle span::before{top:-7px;} .menu-toggle span::after{top:7px;}

  /* ---------- HERO ---------- */
  /* Darker backdrop since 2026-08-15. On near-black the fine contour lines
     only really stand out - on navy they got lost. The glow top right
     stays, just pulled back. */
  .hero{background:radial-gradient(1150px 560px at 76% -12%, #16384F 0%, #0B1726 46%, #08111C 100%);
    color:#fff; position:relative; overflow:hidden; padding:88px 0 120px;}
  /* The streak of light along the top edge. In the reference it's a
     rainbow; here it runs from teal to pale blue-white - the same effect
     without making the page look playful. Pure light, no filter. */
  .hero::after{content:""; position:absolute; left:-8%; right:-8%; top:-72px;
    height:190px; pointer-events:none; z-index:0;
    background:radial-gradient(closest-side at 50% 100%,
      rgba(99,229,220,0.30) 0%, rgba(120,175,225,0.16) 42%,
      rgba(214,232,255,0.07) 66%, transparent 100%);
    filter:blur(2px);}
  /* The tiled grid here was dropped on 2026-08-15. It ran in an endless
     loop - which the "Continuous Animation" UX rule explicitly reserves
     for loading indicators only - and it competed with the contour lines
     for the same area. A drawing in the background is enough. */
  .hero-cross{position:absolute; width:15px; height:15px; opacity:.5; pointer-events:none; z-index:0;}
  .hero-cross::before,.hero-cross::after{content:""; position:absolute; background:rgba(99,229,220,0.55);}
  .hero-cross::before{left:50%; top:0; width:1px; height:100%;}
  .hero-cross::after{top:50%; left:0; height:1px; width:100%;}
  #coordChip{position:absolute; left:28px; bottom:22px; z-index:2; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:#63E5DC; background:rgba(11,26,43,0.65); border:1px solid rgba(24,191,180,0.3); border-radius:8px; padding:6px 12px; display:flex; gap:16px; backdrop-filter:blur(4px); opacity:0; transition:opacity .3s;}
  #coordChip.show{opacity:1;}
  #coordChip .axis{color:#7E97A8;}
  #heroGlow{position:absolute; width:560px; height:560px; border-radius:50%; pointer-events:none; z-index:0;
    background:radial-gradient(circle, rgba(24,191,180,0.22) 0%, transparent 65%); transform:translate(-50%,-50%); left:70%; top:35%; transition:left .5s ease-out, top .5s ease-out;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; position:relative; z-index:1;}
  .hero-badge{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#63E5DC; background:rgba(24,191,180,0.12); border:1px solid rgba(24,191,180,0.35); padding:8px 14px; border-radius:100px; margin-bottom:22px;}
  .hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 2.2s ease-in-out infinite;}
  .hero h1{font-size:clamp(36px,4.8vw,58px); font-weight:800; line-height:1.06;}
  .hero h1 .glow-word{background:linear-gradient(100deg,#63E5DC 0%, var(--teal) 45%, #2BD3C8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:sheen 5s ease-in-out infinite; position:relative; display:inline-block;}
  .hero h1 .glow-word::after{content:""; position:absolute; left:0; right:0; bottom:-14px; height:1px; background:rgba(24,191,180,0.7);}
  .hero h1 .dim-label{position:absolute; left:50%; transform:translateX(-50%); bottom:-36px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#63E5DC; font-weight:400;}
  .hero h1 .dim-tick-l,.hero h1 .dim-tick-r{position:absolute; bottom:-18px; width:1px; height:9px; background:rgba(24,191,180,0.7);}
  .hero h1 .dim-tick-l{left:0;} .hero h1 .dim-tick-r{right:0;}
  @keyframes sheen{0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;}}
  .hero .sub{margin-top:24px; font-size:18px; color:#AEC1CE; max-width:500px;}
  .hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
  .trustbar{margin-top:54px; padding-top:26px; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:22px 30px; font-family:var(--mono); font-size:13px; color:#8DA4B4;}
  .trustbar li{display:flex; align-items:center; gap:8px;}
  .trustbar li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none;}

  /* Hero device */
  .device{position:relative; background:linear-gradient(160deg,#1A3450,#0D1C2E); border-radius:26px; padding:16px; border:1px solid rgba(255,255,255,0.1); box-shadow:0 40px 90px -30px rgba(0,0,0,0.7); transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); transition:transform .5s ease;}
  .device:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(0.5deg);}
  .device-screen{background:#0B1A2B; border-radius:16px; padding:18px; position:relative; overflow:hidden;
    background-image:linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size:24px 24px;}
  .device-screen::after{content:""; position:absolute; top:0; bottom:0; left:-3px; width:2px; background:linear-gradient(180deg, transparent, rgba(99,229,220,0.9), transparent); box-shadow:0 0 18px 3px rgba(24,191,180,0.35); animation:scan 5.5s ease-in-out infinite; pointer-events:none;}
  @keyframes scan{0%{left:-3px; opacity:0;} 8%{opacity:1;} 46%{left:calc(100% + 1px); opacity:1;} 54%{opacity:0;} 100%{left:-3px; opacity:0;}}
  .device-corner{position:absolute; width:14px; height:14px; border:1.5px solid rgba(99,229,220,0.6); z-index:3; pointer-events:none;}
  .device-corner.tl{top:8px; left:8px; border-right:none; border-bottom:none;}
  .device-corner.tr{top:8px; right:8px; border-left:none; border-bottom:none;}
  .device-corner.bl{bottom:8px; left:8px; border-right:none; border-top:none;}
  .device-corner.br{bottom:8px; right:8px; border-left:none; border-top:none;}
  .titleblock{margin-top:14px; display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid rgba(255,255,255,0.14); border-radius:10px; overflow:hidden; font-family:var(--mono);}
  .titleblock div{padding:9px 13px; border-right:1px solid rgba(255,255,255,0.1);}
  .titleblock div:last-child{border-right:none;}
  .titleblock .tb-label{display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#8DA4B4; margin-bottom:2px;}
  .titleblock .tb-val{font-size:12px; color:#D6E4E8;}
  .dim{position:absolute; pointer-events:none; font-family:var(--mono); font-size:11px; color:#63E5DC; z-index:2;}
  .dim-line{background:rgba(99,229,220,0.55); position:absolute;}
  .dim-h-wrap{left:14px; right:14px; top:-30px; height:20px;}
  .dim-h-wrap .dim-line{left:0; right:0; top:9px; height:1px;}
  .dim-h-wrap .t1,.dim-h-wrap .t2{position:absolute; width:1px; height:9px; background:rgba(99,229,220,0.55); top:5px;}
  .dim-h-wrap .t1{left:0;} .dim-h-wrap .t2{right:0;}
  .dim-h-wrap .lbl{position:absolute; left:50%; top:-8px; transform:translateX(-50%); padding:0 8px; letter-spacing:.08em; background:var(--navy);}
  .dim-v-wrap{left:-32px; top:14px; bottom:14px; width:20px;}
  .dim-v-wrap .dim-line{top:0; bottom:0; left:9px; width:1px;}
  .dim-v-wrap .t1,.dim-v-wrap .t2{position:absolute; height:1px; width:9px; background:rgba(99,229,220,0.55); left:5px;}
  .dim-v-wrap .t1{top:0;} .dim-v-wrap .t2{bottom:0;}
  .dim-v-wrap .lbl{position:absolute; top:50%; left:-14px; transform:translateY(-50%) rotate(-90deg); letter-spacing:.08em; white-space:nowrap; background:var(--navy); padding:0 8px;}
  .device-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .device-title{color:#E9F3F1; font-family:var(--mono); font-size:12px; letter-spacing:.06em;}
  .floor-select{font-family:var(--mono); font-size:12.5px; background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:7px 11px; appearance:none; cursor:pointer;}
  .plan-stage{position:relative; height:330px;}
  .plan-stage svg{width:100%; height:100%;}
  .plan-stage svg .wall{stroke-dasharray:900; stroke-dashoffset:900; animation:drawIn 1.1s ease forwards;}
  @keyframes drawIn{to{stroke-dashoffset:0;}}
  .callout-card{position:absolute; background:#fff; color:var(--ink); border-radius:11px; padding:10px 12px; font-size:12.5px; box-shadow:0 14px 30px -10px rgba(0,0,0,0.5); width:152px; line-height:1.4; opacity:0; transform:translateY(10px) scale(0.96); animation:calloutIn .5s ease forwards;}
  @keyframes calloutIn{to{opacity:1; transform:translateY(0) scale(1);}}
  .callout-card .tag{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; display:block;}
  .device-footer{display:flex; align-items:center; justify-content:space-between; margin-top:14px;}
  .export-chip{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:#E9F3F1; background:rgba(24,191,180,0.16); border:1px solid rgba(24,191,180,0.4); padding:7px 12px; border-radius:9px;}
  @keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.5; transform:scale(1.4);}}
  @keyframes pulsing{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}
  /* Color veil in the fill color (#742424), symbolizes a click */
  @keyframes click-flash{0%{box-shadow:0 0 0 0 rgba(116,36,36,0.7);} 70%{box-shadow:0 0 0 10px rgba(116,36,36,0);} 100%{box-shadow:0 0 0 0 rgba(116,36,36,0);}}
  #floorSelect{transition:transform .18s, box-shadow .18s;}
  #floorSelect:hover{transform:translateY(-2px); box-shadow:0 6px 16px -4px rgba(0,0,0,0.55);}
  .floor-hint{position:absolute; right:0; top:calc(100% + 10px); display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#63E5DC; background:rgba(11,26,43,0.92); border:1px solid rgba(24,191,180,0.45); border-radius:8px; padding:7px 11px; white-space:nowrap; z-index:5; animation:hintBob 1.8s ease-in-out infinite; pointer-events:none;}
  .floor-hint::before{content:""; position:absolute; top:-5px; right:22px; width:8px; height:8px; background:rgba(11,26,43,0.92); border-left:1px solid rgba(24,191,180,0.45); border-top:1px solid rgba(24,191,180,0.45); transform:rotate(45deg);}
  .floor-hint svg{flex:none; animation:hintArrow 1.8s ease-in-out infinite;}
  @keyframes hintBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);}}
  @keyframes hintArrow{0%,100%{transform:translateY(-2px); opacity:.7;} 50%{transform:translateY(2px); opacity:1;}}
  .floor-used #floorSelect{animation:none !important;}
  .floor-used .floor-hint{display:none;}
  .pulse-ring{animation:pulse 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box;}

  /* ---------- APP UI REPLICA (Material 3, from the real app code) ---------- */
  .app-toolbar{display:inline-flex; align-items:center; gap:2px; background:rgba(255,255,255,0.95); border-radius:8px; padding:4px 6px; box-shadow:0 8px 18px -6px rgba(0,0,0,0.4); font-family:var(--body);}
  .app-tb-btn{width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#3D4B54; flex:none;}
  .app-tb-btn--active{color:#0077B6;}
  .app-tb-divider{width:1px; height:16px; background:#DDE3E7; margin:0 2px; flex:none;}
  .app-tb-revision{font-size:10.5px; color:#3D4B54; padding:0 5px; white-space:nowrap;}
  .app-floor-select{border:none; background:transparent; font-family:var(--body); font-size:11px; font-weight:600; color:#1A1C1E; padding:2px 3px; appearance:none; cursor:pointer;}
  .app-floor-select:focus{outline:none;}
  .app-zoom{display:flex; flex-direction:column; background:rgba(255,255,255,0.95); border-radius:9px; box-shadow:0 8px 18px -6px rgba(0,0,0,0.4); overflow:hidden;}
  .app-zoom-btn{width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:#3D4B54; font-size:14px; font-family:var(--body); border-bottom:1px solid #EEF1F2;}
  .app-zoom-btn:last-child{border-bottom:none;}
  /* Reality→Plan beam (signature) */
  .beam-wrap{position:absolute; right:-8px; top:-26px; width:120px; pointer-events:none; z-index:2;}
  .beam-photo{width:84px; height:60px; border-radius:9px; background:linear-gradient(140deg,#2C567A,#183350); border:1px solid rgba(255,255,255,0.25); box-shadow:0 10px 24px -8px rgba(0,0,0,0.5); position:relative; overflow:hidden; animation:beamFloat 5s ease-in-out infinite;}
  .beam-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 48%, transparent 60%); animation:beamSheen 4s ease-in-out infinite;}
  @keyframes beamFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
  @keyframes beamSheen{0%,60%,100%{transform:translateX(-100%);} 30%{transform:translateX(100%);}}

  /* ---------- MARQUEE ---------- */
  .marquee-band{background:var(--navy); border-top:1px solid var(--line-dark); padding:18px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
  .marquee-track{display:flex; gap:40px; width:max-content; animation:marquee 36s linear infinite;}
  .marquee-track span{font-family:var(--mono); font-size:13px; color:#7E97A8; white-space:nowrap; display:flex; align-items:center; gap:10px;}
  .marquee-track span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--teal);}
  @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* ---------- COMPARE ---------- */
  .split{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;}
  .compare{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); box-shadow:0 24px 50px -30px rgba(15,32,51,0.25);}
  .compare-row{display:grid; grid-template-columns:1fr 1fr;}
  .compare-head{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:15px 20px; border-bottom:1px solid var(--line);}
  .compare-head.before{color:#69747E; background:#FAFBFC;}
  .compare-head.after{color:var(--teal-deep); background:var(--teal-soft);}
  .compare-body{padding:15px 20px; font-size:14.5px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:flex-start;}
  .compare-row:last-child .compare-body{border-bottom:none;}
  .compare-body.before{color:var(--ink-soft);}
  .compare-body::before{content:"–"; color:#C3CBD1; font-weight:700; flex:none;}
  .compare-body.after::before{content:"✓"; color:var(--teal); font-weight:700;}

  /* ---------- FEATURES ---------- */
  .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .feat-card{background:var(--card); padding:32px 28px; position:relative; overflow:hidden; transition:background .2s;}
  .feat-card::after{content:""; position:absolute; inset:0; background:radial-gradient(240px 160px at var(--mx,50%) var(--my,50%), rgba(24,191,180,0.09), transparent 70%); opacity:0; transition:opacity .25s;}
  .feat-card:hover::after{opacity:1;}
  .feat-icon{width:40px; height:40px; margin-bottom:16px; color:var(--teal-deep);}
  .feat-card h3{font-size:16.5px; font-weight:700; margin-bottom:8px;}
  .feat-card p{font-size:14px; color:var(--ink-soft);}

  /* ---------- WORKFLOW ---------- */
  .flow{background:var(--navy); color:#fff; border-radius:24px; padding:64px; position:relative; overflow:hidden;}
  .flow::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size:30px 30px;}
  .flow h2{color:#fff; font-size:clamp(26px,3vw,36px); font-weight:800; position:relative;}
  .flow .lead{color:#AEC1CE; margin-top:14px; font-size:15.5px; position:relative;}
  .flow-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:46px; position:relative;}
  .flow-step{background:rgba(255,255,255,0.05); border:1px solid var(--line-dark); border-radius:14px; padding:22px 18px; transition:transform .2s, border-color .2s, background .2s;}
  .flow-step:hover{transform:translateY(-5px); border-color:rgba(24,191,180,0.5); background:rgba(24,191,180,0.07);}
  .flow-num{font-family:var(--mono); font-size:12px; color:var(--teal); margin-bottom:12px; display:block;}
  .flow-step h3{font-size:15.5px; font-weight:700; margin-bottom:7px; color:#fff;}
  .flow-step p{font-size:13px; color:#9FB3C1;}

  /* ---------- VIEWS (real screenshots) ---------- */
  .shots{display:grid; grid-template-columns:repeat(3,1fr); gap:42px 26px;}
  .shot{margin:0; display:flex; flex-direction:column; align-items:center; gap:16px;}
  .shot .phone{width:100%; max-width:238px; background:var(--navy); border-radius:26px;
    padding:8px; box-shadow:0 26px 50px -24px rgba(15,32,51,0.55);}
  .shot .phone img{display:block; width:100%; height:auto; border-radius:19px;}
  .shot figcaption{text-align:center; max-width:300px;}
  .shot .tag{font-family:var(--mono); font-size:11px; color:var(--teal-deep);
    text-transform:uppercase; letter-spacing:.06em;}
  .shot h4{font-size:16px; margin-top:5px;}
  .shot figcaption p{margin-top:7px; font-size:14px; color:var(--ink-soft); line-height:1.5;}

  /* ---------- AUDIENCE / BLOG ---------- */
  .role-picker{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px; display:flex; align-items:center; gap:6px; max-width:480px; transition:border-color .15s, box-shadow .15s;}
  .role-picker:focus-within{border-color:var(--teal); box-shadow:0 0 0 4px rgba(24,191,180,0.12);}
  .role-picker select{flex:1; border:none; background:transparent; font-family:var(--body); font-size:15px; font-weight:600; padding:10px 8px; color:var(--ink); appearance:none; cursor:pointer;}
  .role-picker select:focus{outline:none;}
  .role-picker .role-icon{width:20px; height:20px; color:var(--teal-deep); flex:none; margin-left:6px;}
  .article-card{margin-top:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:38px 42px; position:relative; overflow:hidden; box-shadow:0 24px 50px -32px rgba(15,32,51,0.3);}
  .article-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--teal),#63E5DC);}
  .article-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal-deep); background:var(--teal-soft); padding:6px 12px; border-radius:100px;}
  .article-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#8A5606; background:#FBF0DE; padding:5px 11px; border-radius:100px; margin-left:8px;}
  .article-card h3{font-size:23px; font-weight:800; margin:16px 0 14px;}
  .article-card .kicker{font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; display:block;}
  .article-card p{font-size:15px; color:var(--ink-soft); max-width:700px;}
  .article-card p strong{color:var(--ink);}
  .article-body{opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease;}
  .article-body.show{opacity:1; transform:translateY(0);}

  /* ---------- PDF ---------- */
  .pdf-section{background:var(--navy); color:#E9F3F1; border-radius:24px; padding:64px; position:relative; overflow:hidden;}
  .pdf-section::before{content:""; position:absolute; width:480px; height:480px; border-radius:50%; right:-120px; top:-160px; background:radial-gradient(circle, rgba(24,191,180,0.16), transparent 70%);}
  .pdf-split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; position:relative;}
  .pdf-section h2{color:#fff; font-size:clamp(26px,3vw,34px); font-weight:800;}
  .pdf-section .lead{color:#AEC1CE; margin-top:14px; font-size:15.5px;}
  .pdf-list{margin-top:22px; display:grid; gap:10px;}
  .pdf-list li{display:flex; gap:10px; font-size:14.5px; color:#D6E4E8;}
  .pdf-list li::before{content:"—"; color:var(--teal); flex:none;}
  .pdf-page{background:#fff; color:var(--ink); border-radius:12px; padding:22px; box-shadow:0 36px 70px -24px rgba(0,0,0,0.6); font-size:12.5px; transform:rotate(1.5deg); transition:transform .3s;}
  .pdf-page:hover{transform:rotate(0deg) scale(1.02);}
  .pdf-page-head{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:14px;}
  .pdf-thumb{height:120px; border:1px dashed #B9C6CF; border-radius:8px; margin-bottom:12px; position:relative; overflow:hidden;}
  .pdf-thumb svg{width:100%; height:100%;}
  .pdf-fields{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .pdf-fields div{background:var(--paper); border-radius:6px; padding:8px 10px;}
  .pdf-fields .label{display:block; font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; margin-bottom:2px;}

  /* ---------- PRIVACY ---------- */
  .privacy-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .privacy-list{display:grid; gap:16px; margin-top:22px;}
  .privacy-item{display:flex; gap:14px; align-items:flex-start;}
  .privacy-item .ico{width:22px; height:22px; color:var(--teal-deep); flex:none; margin-top:2px;}
  .privacy-item h4{font-size:15px; font-weight:700; margin-bottom:2px;}
  .privacy-item p{font-size:14px; color:var(--ink-soft);}
  .shield-badge{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:44px; text-align:center; box-shadow:0 24px 50px -32px rgba(15,32,51,0.3);}
  .shield-badge svg{width:120px; height:120px;}
  .shield-badge .caption{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:16px;}

  /* ---------- CTA / WAITLIST ---------- */
  .cta-section{background:radial-gradient(800px 400px at 20% 0%, #17405C 0%, var(--navy) 60%); color:#fff; border-radius:24px; padding:64px; position:relative; overflow:hidden;}
  .cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start; position:relative;}
  .cta-section h2{color:#fff; font-size:clamp(26px,3vw,36px); font-weight:800;}
  .cta-section .lead{color:#AEC1CE; margin-top:16px; font-size:15.5px; max-width:440px;}
  .form-card{background:rgba(255,255,255,0.05); border:1px solid var(--line-dark); border-radius:var(--radius); padding:28px; backdrop-filter:blur(6px);}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12.5px; color:#AEC1CE; margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em;}
  .field input, .field select, .field textarea{width:100%; padding:12px 14px; border-radius:9px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:#fff; font-size:14.5px; font-family:var(--body);}
  .field textarea{resize:vertical; min-height:64px;}
  .field input::placeholder, .field textarea::placeholder{color:#7C93A0;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--teal); outline-offset:1px;}
  .radio-row{display:flex; gap:16px; flex-wrap:wrap;}
  /* Custom checkboxes instead of the system rendering: only this way can
     "indeterminate" (for "All", once 1-2 of 3 are individually on) be
     clearly told apart from "checked" - unfilled with a dash instead of
     filled with a check mark. The system rendering otherwise draws an
     indeterminate state filled in as well, and in testing that read as an
     automatic check instead of an in-between state. */
  .radio-row input[type="checkbox"]{appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none; margin:0; border:1.5px solid rgba(255,255,255,0.4); border-radius:4px; background:rgba(255,255,255,0.06); cursor:pointer; position:relative;}
  .radio-row input[type="checkbox"]:checked{background:var(--teal); border-color:var(--teal);}
  .radio-row input[type="checkbox"]:checked::after{content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #04262A; border-width:0 2px 2px 0; transform:rotate(40deg);}
  .radio-row input[type="checkbox"]:indeterminate::after{content:""; position:absolute; left:3px; top:6.5px; width:8px; height:2px; border-radius:1px; background:var(--teal);}
  .radio-row input[type="checkbox"]:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
  /* Request type: real radios, just drawn as pills - arrow keys and tab
     order come for free that way, with no custom keyboard handling like
     the carousel or the how-to tabs need. */
  .segmented{display:flex; gap:8px; flex-wrap:wrap;}
  /* ".field label" (class+type) would be more specific than a single
     class selector and would override the "flex" here with "block" -
     hence ".segmented .segmented-opt" instead of just ".segmented-opt". */
  .segmented .segmented-opt{position:relative; flex:1 1 auto; min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px 12px; border-radius:9px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:#D6E4E8; font-size:13px; font-weight:600; line-height:1.3; cursor:pointer; transition:background .15s, border-color .15s, color .15s; text-transform:none; letter-spacing:0;}
  .segmented-opt input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
  .segmented-opt:hover{border-color:rgba(255,255,255,0.4);}
  .segmented-opt:focus-within{outline:2px solid var(--teal); outline-offset:2px;}
  .segmented-opt.is-active{background:var(--teal); border-color:var(--teal); color:#04262A;}
  .radio-row label{display:flex; align-items:center; gap:7px; font-size:13.5px; color:#D6E4E8; font-family:var(--body); text-transform:none; letter-spacing:0;}
  .consent{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:#9FB4BE; margin:16px 0 20px;}
  .form-msg{margin-top:14px; font-size:13.5px; min-height:18px;}
  .form-msg.ok{color:#63E5DC;}
  .form-msg.err{color:#F2A29A;}

  /* ---------- FAQ ---------- */
  .faq-layout{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px;}
  .faq-list{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .faq-item{background:var(--card);}
  .faq-item summary{list-style:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:15px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+"; font-family:var(--mono); font-size:18px; color:var(--teal-deep); transition:transform .2s;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item .faq-a{padding:0 22px 20px; color:var(--ink-soft); font-size:14.5px; max-width:600px;}

  /* ---------- FOOTER ---------- */
  footer{background:#0A1727; color:#AEC1CE; padding:64px 0 28px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
  .foot-brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:18px; color:#fff;}
  .foot-desc{margin-top:14px; font-size:14px; color:#7E97A8; max-width:290px;}
  .foot-col h5{font-family:var(--display); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#87A0B0; margin-bottom:16px;}
  .foot-col ul{display:grid; gap:10px;}
  .foot-col a{font-size:14px; color:#D6E4E8; text-decoration:none;}
  .foot-col a:hover{color:var(--teal);}
  .foot-bottom{margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#87A0B0; flex-wrap:wrap; gap:14px;}
  .foot-social{display:flex; gap:14px;}
  .foot-social a{width:32px; height:32px; border:1px solid rgba(255,255,255,0.15); border-radius:8px; display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s;}
  .foot-social a:hover{border-color:var(--teal); color:var(--teal);}
  .foot-social svg{width:15px; height:15px;}

  /* Reveal */
  [data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease;}
  [data-reveal].in{opacity:1; transform:translateY(0);}
  [data-reveal][data-delay="1"]{transition-delay:.12s;}
  [data-reveal][data-delay="2"]{transition-delay:.24s;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    [data-reveal]{opacity:1; transform:none; transition:none;}
    .hero::before, .marquee-track, .hero h1 .glow-word, .beam-photo, .beam-photo::after, .device-screen::after{animation:none !important;}
    #coordChip{display:none;}
    .plan-stage svg .wall{stroke-dasharray:none; stroke-dashoffset:0; animation:none;}
    .callout-card{opacity:1; transform:none; animation:none;}
    .pulse-ring{animation:none;}
    .device{transform:none;}
    #heroGlow{display:none;}
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .hero-grid,.split,.privacy-grid,.cta-grid,.pdf-split,.faq-layout{grid-template-columns:1fr;}
    .feat-grid{grid-template-columns:repeat(2,1fr);}
    .shots{grid-template-columns:repeat(2,1fr);}
    .flow-steps{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .flow,.pdf-section,.cta-section{padding:44px 28px;}
    .device{transform:none;}
  }
  @media (max-width:720px){
    .nav-links{display:none;}
    .menu-toggle{display:block;}
    .section{padding:66px 0;}
    .hero{padding:56px 0 80px;}
    .feat-grid,.flow-steps{grid-template-columns:1fr;}
    .compare-row{grid-template-columns:1fr;}
    .compare-head.after{border-top:1px solid var(--line);}
    .foot-grid{grid-template-columns:1fr;}
    .hero-cta .btn{width:100%;}
    .article-card{padding:28px 22px;}
    .beam-wrap{display:none;}
    .dim, #coordChip, .hero-cross{display:none;}
    .titleblock div{padding:8px 10px;}
  }

  /* ---------- NEW BADGE ---------- */
  .feat-card{position:relative;}
  .feat-new{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); background:var(--teal-soft); border:1px solid rgba(24,191,180,0.35); border-radius:20px; padding:3px 8px;}

  /* ---------- HOW-TO ---------- */
  .howto{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 40px -28px rgba(15,32,51,0.4);}
  .howto-tabs{display:flex; gap:4px; padding:10px 10px 0; overflow-x:auto; border-bottom:1px solid var(--line); background:var(--paper); scrollbar-width:none;}
  .howto-tabs::-webkit-scrollbar{display:none;}
  .howto-tab{flex:none; border:1px solid transparent; background:transparent; color:var(--ink-soft); font-size:14px; font-weight:600; padding:11px 16px; border-radius:10px 10px 0 0; white-space:nowrap; transition:color .15s, background .15s;}
  .howto-tab:hover{color:var(--ink);}
  .howto-tab:focus-visible{outline:2px solid var(--teal); outline-offset:-2px;}
  .howto-tab.is-active{background:var(--card); color:var(--navy); border-color:var(--line); border-bottom-color:var(--card); margin-bottom:-1px; box-shadow:inset 0 2px 0 var(--teal);}
  .howto-panel{display:none; grid-template-columns:1.1fr 0.9fr; gap:44px; padding:38px 34px;}
  .howto-panel.is-active{display:grid;}
  .howto-copy h3{font-family:var(--display); font-size:22px; font-weight:800; margin-bottom:20px; line-height:1.2;}
  .howto-steps{list-style:none; display:flex; flex-direction:column; gap:16px;}
  .howto-steps li{display:flex; gap:14px; font-size:15.5px; color:var(--ink-soft); line-height:1.5;}
  .howto-steps b{color:var(--ink); font-weight:650;}
  .hs-n{flex:none; width:26px; height:26px; border-radius:50%; background:var(--teal-soft); color:var(--teal-deep); font-family:var(--mono); font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:1px;}
  .howto-note{margin-top:22px; padding:12px 14px; border-left:2px solid var(--teal); background:var(--teal-soft); border-radius:0 8px 8px 0; font-size:14px; color:var(--ink);}
  .mono-inline{font-family:var(--mono); font-size:12.5px; background:#EEF3F5; border:1px solid var(--line); border-radius:5px; padding:1px 6px;}
  .howto-shot{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;}
  .howto-shot .phone{width:100%; max-width:268px; background:var(--navy); border-radius:26px; padding:9px; box-shadow:0 26px 50px -22px rgba(15,32,51,0.55);}
  .howto-shot .phone img{display:block; width:100%; border-radius:18px;}
  .howto-shot figcaption{font-size:13px; color:var(--ink-soft); text-align:center; max-width:300px; line-height:1.45;}
  @media(max-width:900px){
    .howto-panel.is-active{grid-template-columns:1fr; gap:30px; padding:28px 20px;}
    .howto-shot{order:-1;}
  }
  /* ---------- PLAN STRAIGHTENING ---------- */
  .scan-panel{background:var(--navy); color:#fff; border-radius:24px; padding:56px; position:relative; overflow:hidden;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center;}
  .scan-panel::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size:30px 30px;}
  .scan-copy{position:relative;}
  .scan-copy h2{color:#fff; font-size:clamp(26px,3vw,36px); font-weight:800; line-height:1.14;}
  .scan-copy .lead{color:#AEC1CE; margin-top:14px; font-size:15.5px;}
  .scan-list{margin-top:24px; display:grid; gap:13px;}
  .scan-list li{display:flex; gap:11px; font-size:14.5px; color:#9FB3C1; line-height:1.5;}
  .scan-list li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; margin-top:8px;}
  .scan-list b{color:#E9F3F1; font-weight:650;}
  .scan-panel .shot-pair{position:relative;}
  .scan-panel figcaption{color:#9FB3C1;}
  .scan-panel figcaption b{color:var(--teal); font-size:12.5px;}

  /* ---------- BAUVATION ON PC ----------
     Frame for screenshots from the Windows build. Deliberately no phone
     frame: the image is 16:9 and should be read that way too. */
  /* One wide screenshot instead of two narrow ones: the column below would
     squeeze a 16:9 image to half the page width, and then the interface
     inside it can no longer be read. */
  .scan-panel.is-stacked{grid-template-columns:1fr; gap:36px; align-items:start;}
  .desktop-shot{margin:0; position:relative;}
  .desktop-frame{background:#08131F; border:1px solid rgba(255,255,255,0.14); border-radius:12px;
    overflow:hidden; box-shadow:0 30px 60px -26px rgba(0,0,0,0.7);}
  .desktop-bar{display:flex; align-items:center; gap:7px; padding:9px 13px;
    background:rgba(255,255,255,0.055); border-bottom:1px solid rgba(255,255,255,0.1);}
  .desktop-bar i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.26); flex:none;}
  .desktop-bar span{margin-left:7px; font-family:var(--mono); font-size:11px;
    letter-spacing:.06em; color:#9FB3C1;}
  .desktop-frame img{display:block; width:100%; height:auto;}
  .desktop-shot figcaption{margin-top:14px; font-size:12.5px; color:#9FB3C1; line-height:1.5;}

  /* Three smaller pieces of evidence below the large screenshot. Stacked
     on the phone: three side by side would be 100 px wide each and thus
     no longer evidence, just decoration. */
  .desktop-trio{margin-top:34px; display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
  .desktop-trio .desktop-shot figcaption{margin-top:11px; font-size:12px;}
  .desktop-trio .desktop-frame{border-radius:9px;}
  .desktop-trio b{display:block; color:#E9F3F1; font-weight:650; margin-bottom:2px;}
  @media (max-width:760px){
    .desktop-trio{grid-template-columns:1fr; gap:26px;}
  }

  /* Two screenshots side by side (before/after, free/snapped) */
  .shot-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
  .shot-pair .howto-shot .phone{max-width:200px; border-radius:20px; padding:7px;}
  .shot-pair .howto-shot .phone img{border-radius:14px;}
  .shot-pair figcaption{font-size:12.5px; max-width:220px;}

  @media (max-width:980px){
    .scan-panel{grid-template-columns:1fr; gap:34px; padding:44px 28px;}
  }

  /* ---------- PORTRAIT / SMALL DISPLAYS ---------- */
  /* Nothing may be wider than the display: otherwise the phone zooms the
     whole page out instead of wrapping it. */
  html{overflow-x:clip;}
  body{overflow-x:clip; max-width:100%;}
  img,svg,video,canvas{max-width:100%;}
  /* Grid and flex children are allowed to shrink below their content width. */
  .hero-grid > *,.split > *,.privacy-grid > *,.cta-grid > *,.pdf-split > *,
  .faq-layout > *,.howto-panel > *,.scan-panel > *,.flow-steps > *,
  .feat-grid > *,.shots > *,.foot-grid > *{min-width:0;}
  .privacy-item > div,.howto-steps li > div,.scan-list li > div{min-width:0;}
  .compare-body,.faq-item .faq-a,.howto-steps li,.scan-list li,
  .privacy-item h4,.privacy-item p,.feat-card p{overflow-wrap:break-word;}

  @media (max-width:560px){
    .wrap{padding:0 18px;}
    .section{padding:54px 0;}
    .flow,.pdf-section,.cta-section,.scan-panel{padding:34px 20px; border-radius:18px;}
    .article-card{padding:24px 18px;}
    .howto-panel.is-active{padding:24px 16px;}
    .shot-pair{grid-template-columns:1fr; gap:26px; justify-items:center;}
    .shot-pair .howto-shot .phone{max-width:230px;}
    .shot-pair figcaption{max-width:260px;}
    .nav{height:64px;}
    .brand{font-size:18px;}
    .btn{padding:11px 16px; font-size:14px;}
    .trustbar{gap:14px 20px; font-size:12px;}
    .shield-badge{padding:30px 20px;}
  }

  /* ---------- ACCESSIBILITY & POLISH ---------- */
  /* Jump target for keyboard and screen reader: the first stop when tabbing. */
  .skip-link{position:absolute; left:-9999px; top:0; z-index:300; background:var(--teal); color:#04211E;
    padding:12px 18px; border-radius:0 0 10px 0; font-weight:700; font-size:15px; text-decoration:none;}
  .skip-link:focus{left:0;}

  /* Visible focus on everything operable - not just on buttons. */
  a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,
  input:focus-visible,details:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px;}
  header a:focus-visible,footer a:focus-visible{outline-color:#63E5DC;}

  /* Anchor jumps must not land underneath the sticky header. */
  section[id],#howto,#faq,#warteliste{scroll-margin-top:90px;}

  /* No 300 ms wait for a possible double-tap. */
  a,button,summary,select,label{touch-action:manipulation;}

  /* Fingertips need 44 px - tabs, footer icons, menu button. */
  .howto-tab{min-height:44px;}
  .faq-item summary{min-height:44px;}
  .foot-social a{width:44px; height:44px;}
  .menu-toggle{width:44px; height:44px; display:none; align-items:center; justify-content:center;}
  .nav-links a{padding:10px 0; display:inline-block;}

  /* Images keep their aspect ratio so nothing jumps as they load in. */
  .howto-shot .phone img{height:auto;}

  /* Where you currently are: the section is tracked in the header nav. */
  .nav-links a.is-current{color:#fff;}
  .nav-links a.is-current::after{content:""; display:block; height:2px; margin-top:4px;
    background:var(--teal); border-radius:2px;}

  @media (max-width:720px){
    .menu-toggle{display:flex;}
    section[id],#howto,#faq,#warteliste{scroll-margin-top:78px;}
    /* The expanded menu hangs below the header - via a class rather than
       inline styles, so nothing stays stuck when rotating to landscape. */
    .nav-links.is-open{display:flex; flex-direction:column; gap:4px;
      position:absolute; top:100%; left:0; right:0; background:var(--navy);
      padding:14px 28px 20px; border-bottom:1px solid var(--line-dark);}
    .nav-links.is-open a{padding:12px 0;}
  }

  /* Body text must not drop below 15 px on the phone. */
  @media (max-width:560px){
    .feat-card p,.faq-item .faq-a,.howto-steps li,.scan-list li,
    .flow-step p,.privacy-item p,.compare-body,.pdf-list li,.article-card p{font-size:15.5px;}
    .howto-shot figcaption,.shot-pair figcaption{font-size:13.5px;}
    .section-head .lead{font-size:16.5px;}
  }
  /* ---------- TEASERS & LINKS TO SUBPAGES ---------- */
  .more-row{margin-top:26px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;}
  .more-link{display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:15px;
    color:var(--teal-deep); text-decoration:none; white-space:nowrap;}
  .more-link span{transition:transform .18s;}
  .more-link:hover span,a:hover .more-link span{transform:translateX(4px);}
  .more-note{font-size:14.5px; color:var(--ink-soft);}

  .role-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .role-card{background:var(--card); padding:26px 24px 24px; text-decoration:none; color:inherit;
    display:flex; flex-direction:column; gap:9px; transition:background .18s;}
  .role-card:hover{background:#FBFDFD;}
  .role-tag{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--teal-deep);}
  .role-card h3{font-size:17px; font-weight:700;}
  .role-card p{font-size:14.5px; color:var(--ink-soft); flex:1;}
  .role-card .more-link{margin-top:4px; font-size:14.5px;}

  .teaser-band{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:38px 40px; display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center;
    box-shadow:0 18px 40px -30px rgba(15,32,51,0.4);}
  .teaser-copy h2{font-size:clamp(24px,2.6vw,30px); font-weight:800; margin-top:2px;}
  .teaser-copy .lead{margin-top:12px; color:var(--ink-soft); font-size:16px; max-width:620px;}
  .teaser-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
  .teaser-chips li{font-family:var(--mono); font-size:12px; color:var(--ink-soft);
    border:1px solid var(--line); border-radius:100px; padding:6px 12px;}

  @media (max-width:980px){
    .role-cards{grid-template-columns:repeat(2,1fr);}
    .teaser-band{grid-template-columns:1fr; gap:24px; padding:30px 24px; justify-items:start;}
  }
  @media (max-width:720px){
    .role-cards{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .role-card p{font-size:15.5px;}
    .more-note{font-size:15px;}
    .teaser-band .btn{width:100%;}
    .shots{grid-template-columns:1fr; gap:34px;}
  }

  /* ---------- SUBPAGES ---------- */
  /* Head area of a subpage: less breathing room than a section in the
     middle of the home page, because the site header already sits above it. */
  .page-head{padding:132px 0 54px;}
  .page-head .section-head{margin-bottom:0;}
  .page-head h1{font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.1;}
  .page-head .lead{margin-top:18px; color:var(--ink-soft); font-size:17.5px; max-width:660px;}

  .breadcrumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:26px;
    font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-soft);}
  .breadcrumbs a{color:var(--teal-deep); text-decoration:none;}
  .breadcrumbs a:hover{text-decoration:underline;}
  .breadcrumbs span[aria-hidden]{color:var(--line);}

  /* Body copy. Narrow line length so it stays readable on a large screen. */
  .prose{max-width:720px;}
  .prose.narrow{max-width:640px;}
  .prose h1{font-size:clamp(30px,4vw,44px); font-weight:800; line-height:1.12;}
  .prose h2{font-size:clamp(21px,2.2vw,26px); font-weight:800; margin-top:44px; line-height:1.2;}
  .prose h2:first-child{margin-top:0;}
  /* Sub-levels for generated legal texts (privacy policy). */
  .prose h3{font-size:18.5px; font-weight:700; margin-top:32px; line-height:1.3;}
  .prose h4{font-size:16.5px; font-weight:700; margin-top:22px; line-height:1.35;}
  .prose p{margin-top:16px; font-size:16.5px; line-height:1.7; color:var(--ink);}
  .prose .lead{margin-top:20px; font-size:18.5px; line-height:1.62; color:var(--ink-soft);}
  .prose ul{margin-top:16px; padding-left:22px;}
  .prose li{margin-top:9px; font-size:16.5px; line-height:1.65;}
  .prose a{color:var(--teal-deep);}
  .prose em{font-style:italic;}

  .note-box{margin-top:28px; padding:18px 22px; border-radius:12px;
    background:var(--teal-soft); border:1px solid #B6E7E2; font-size:15.5px; line-height:1.6;}
  .note-box strong{color:var(--teal-deep);}

  /* ---------- BLOG ---------- */
  .post-list{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  .post-card{display:flex; flex-direction:column; gap:10px; padding:30px 28px; text-decoration:none;
    color:inherit; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    transition:transform .2s, box-shadow .2s;}
  .post-card:hover{transform:translateY(-4px); box-shadow:0 22px 44px -24px rgba(15,32,51,0.35);}
  .post-card h3{font-size:19px; font-weight:750; line-height:1.25;}
  .post-card p{font-size:15px; color:var(--ink-soft); line-height:1.6; flex:1;}
  .post-head{display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--ink-soft);}
  .post-trade{text-transform:uppercase; color:var(--teal-deep);}
  .post-text .post-head{margin-bottom:18px;}

  /* ---------- TRADE OVERVIEW ---------- */
  .trade-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .trade-card{background:var(--card); padding:26px 24px; display:flex; flex-direction:column; gap:8px;}
  .trade-card h3{font-size:17px; font-weight:700;}
  .trade-card p{font-size:14.5px; line-height:1.55; color:var(--ink-soft);}
  .trade-problem{color:var(--ink) !important;}
  .trade-badge{align-self:flex-start; font-family:var(--mono); font-size:10.5px;
    text-transform:uppercase; letter-spacing:.06em; color:var(--teal-deep);
    background:var(--teal-soft); border-radius:100px; padding:4px 10px;}

  /* Header and footer: what used to sit as a style attribute in the markup. */
  .nav-right{display:flex; align-items:center; gap:18px;}
  .foot-note{color:#7F93A3;}

  /* Honeypot field against bots - invisible to humans and screen readers,
     but not via display:none, because some bots watch for that. */
  .honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  .form-msg a{color:inherit; text-decoration:underline;}

  .prose > *,.post-list > *,.trade-grid > *{min-width:0;}

  @media (max-width:980px){
    .trade-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:720px){
    .page-head{padding:112px 0 40px;}
    .post-list{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .trade-grid{grid-template-columns:1fr;}
    .prose p,.prose li{font-size:17px;}
    .prose .lead{font-size:18px;}
  }

  /* The consent line is a flex box. Without these two rules the link to
     the privacy policy would become its own flex item and sit at the
     right edge instead of within the sentence. */
  .consent > input[type="checkbox"]{flex:none; margin-top:3px;}
  .consent > span{min-width:0; line-height:1.5;}
  .consent a{color:inherit; text-decoration:underline;}
  .consent a:hover{color:var(--teal);}

  /* ---------- CAROUSEL (3D) -------------------------------------------------
     Two states. Without JavaScript, .carousel-track is a perfectly normal
     row to swipe through - every slide stays reachable, nothing hides
     behind an effect. Only the script sets .is-3d and arranges the slides
     in space. The script reads the --carousel-x1/x2 and --carousel-max
     values from the stylesheet, so the tuning for narrow windows lives
     here rather than in the code. */
  .carousel{--carousel-w:262px; --carousel-h:520px; --carousel-x1:228; --carousel-x2:372; --carousel-max:2;
    position:relative;}
  .carousel-track{display:flex; gap:26px; margin:0; padding:0 0 16px; list-style:none;
    overflow-x:auto; scroll-snap-type:x mandatory;}
  .carousel-slide{flex:0 0 auto; width:var(--carousel-w); scroll-snap-align:center;}
  .carousel-ctrl{display:none;}

  .carousel.is-3d .carousel-stage{perspective:1500px; perspective-origin:50% 44%;}
  .carousel.is-3d .carousel-track{display:block; position:relative; overflow:visible;
    height:var(--carousel-h); padding:0; scroll-snap-type:none;
    transform-style:preserve-3d; touch-action:pan-y; outline-offset:14px;}
  .carousel.is-3d .carousel-slide{position:absolute; top:0; left:50%; width:var(--carousel-w);
    margin-left:calc(var(--carousel-w) / -2); transform-style:preserve-3d;
    transform:translate3d(var(--x,0px),0,var(--z,0px)) rotateY(var(--r,0deg)) scale(var(--s,1));
    opacity:var(--op,1); z-index:var(--zi,1);
    transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease;}
  .carousel.is-3d .carousel-slide[data-far]{opacity:0; pointer-events:none;}
  .carousel.is-3d .carousel-slide:not(.is-active){cursor:pointer;}

  /* Controls: arrows and dots. Both are real buttons, so they're also
     reachable by keyboard - the effect must not be the only door in. */
  .carousel.is-3d .carousel-ctrl{display:flex; align-items:center; justify-content:center;
    gap:14px; margin-top:26px; flex-wrap:wrap;}
  .carousel-btn{width:46px; height:46px; flex:none; border-radius:50%;
    border:1px solid var(--line); background:var(--card); color:var(--navy);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease, color .2s ease;}
  .carousel-btn:hover{border-color:var(--teal); color:var(--teal-deep);
    box-shadow:0 8px 18px -10px rgba(15,32,51,0.55);}
  .carousel-btn svg{width:18px; height:18px;}
  .carousel-dots{display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none;}
  .carousel-dot{width:40px; height:44px; flex:none; border:0; background:none; padding:0;
    cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .carousel-dot i{display:block; width:20px; height:4px; border-radius:2px;
    background:var(--line); transition:background-color .25s ease, width .25s ease;}
  .carousel-dot:hover i{background:#B8C7D1;}
  .carousel-dot[aria-current="true"] i{background:var(--teal-deep); width:26px;}
  .carousel-count{font-family:var(--mono); font-size:12px; color:var(--ink-soft);
    letter-spacing:.04em; min-width:52px; text-align:center;}

  /* On a dark backdrop (a navy section) the coloring flips. */
  .carousel.on-dark .carousel-btn{background:rgba(255,255,255,0.06); color:#E9F3F1;
    border-color:var(--line-dark);}
  .carousel.on-dark .carousel-btn:hover{border-color:var(--teal); color:var(--teal);}
  .carousel.on-dark .carousel-dot i{background:rgba(255,255,255,0.22);}
  .carousel.on-dark .carousel-dot[aria-current="true"] i{background:var(--teal);}
  .carousel.on-dark .carousel-count{color:#9FB3C1;}

  /* Cards in the carousel need a shared height, otherwise the stage
     wobbles on every change. */
  .carousel-slide > .feat-card{height:100%; margin:0;}

  @media (max-width:900px){
    .carousel{--carousel-w:236px; --carousel-x1:172; --carousel-x2:286;}
  }
  @media (max-width:780px){
    /* Only the two direct neighbors remain - two rings per side ran past
       the edge here and pushed their headings into each other. */
    .carousel{--carousel-max:1;}
  }
  @media (max-width:640px){
    .carousel{--carousel-w:210px; --carousel-x1:142;}
  }

  /* System setting "reduce motion": no rotation, no depth, no transition.
     The slides then sit flat side by side. */
  @media (prefers-reduced-motion: reduce){
    .carousel.is-3d .carousel-slide{transition:none;
      transform:translate3d(var(--x,0px),0,0) scale(var(--s,1));}
  }

  /* Card variant: wider than a screenshot, because text is read here. In
     the grid, .feat-grid supplies the border via the 1px gaps - standing
     alone, the card needs its own. */
  .carousel.carousel-cards{--carousel-w:320px; --carousel-x1:250; --carousel-x2:410;}
  .carousel-slide > .feat-card{border:1px solid var(--line); border-radius:14px;}
  @media (max-width:900px){
    .carousel.carousel-cards{--carousel-w:290px; --carousel-x1:215; --carousel-x2:350;}
  }
  @media (max-width:780px){
    .carousel.carousel-cards{--carousel-w:280px; --carousel-x1:200;}
  }
  @media (max-width:640px){
    .carousel.carousel-cards{--carousel-w:260px; --carousel-x1:180;}
  }

  /* Only the front slide shows its caption. The neighbors' captions
     otherwise overlapped and turned into mush in the middle. */
  .carousel.is-3d .carousel-slide figcaption{transition:opacity .3s ease;}
  .carousel.is-3d .carousel-slide:not(.is-active) figcaption{opacity:0;}

  @media (max-width:560px){
    /* Eight dots side by side would drop below 44 px width here - below
       what a thumb reliably hits. On the phone, arrows and swiping take
       over, and the counter shows where you are. */
    .carousel-dots{display:none;}
    .carousel-count{min-width:auto;}
  }

  /* With the cards, three texts would otherwise sit side by side, all
     half-readable. The neighbors therefore show only icon and heading -
     exactly one card is ever readable at a time. */
  .carousel.carousel-cards.is-3d .feat-card p{transition:opacity .3s ease;}
  .carousel.carousel-cards.is-3d .carousel-slide:not(.is-active) .feat-card p{opacity:0;}

  /* Only while measuring: every height freed, so the slides show their
     natural size instead of the stage height just computed. */

  /* Cards fill the stage, so a short card doesn't leave a gap down to the
     controls. Freed again while measuring. */
  .carousel.carousel-cards.is-3d .carousel-slide{height:100%;}
  /* While measuring, both heights have to give way - otherwise the card
     measures against the stage that's currently being computed. The
     !important is deliberate here: the class only applies for the
     duration of the measurement. */
  .carousel.carousel-measuring .carousel-slide,
  .carousel.carousel-measuring .carousel-slide > .feat-card{height:auto !important;}

  /* The track is a div with tabindex - the general focus rule further up
     only covers a, button, summary, select, input and details. Without
     this rule, focus jumps into the carousel invisibly while tabbing. */
  .carousel-track:focus-visible{outline:2px solid var(--teal); outline-offset:8px;
    border-radius:10px;}

  /* ---------- BACKDROP (background) -----------------------------------------
     Drafting paper instead of an empty surface. A fixed layer behind
     everything that drifts more slowly than the content while scrolling.
     The offset is computed modulo the grid size - that way the pattern
     drifts on forever without the layer ever showing an edge, and it
     never needs to be larger than the screen plus one grid width.

     The layer sits at z-index -1. That's visible because the body's
     background shows through to the canvas, which is painted first.
     Cards and dark sections cover the grid - intentionally: the white
     cards are meant to sit on the drafting paper. */
  .backdrop{position:fixed; left:0; right:0; top:-140px; height:calc(100vh + 280px);
    z-index:-1; pointer-events:none;}

  /* Variant 1: grid. Fine divisions every 24px, bold ones every 120px -
     exactly the ratio of a drafting sheet. The opacity is deliberately
     very low; it should be noticeable that it isn't white, and nothing
     more. */
  .backdrop-grid .backdrop{
    background-image:
      /* Three soft streaks of light, diagonally across the area. They sit
         above the grid, not below it: that gives the paper a shimmer
         instead of making the lines brighter. The transitions are
         deliberately wide - narrow edges would read as stripes, not light. */
      linear-gradient(104deg, transparent 4%,  rgba(255,255,255,0.78) 15%, transparent 27%),
      linear-gradient(104deg, transparent 40%, rgba(255,255,255,0.50) 51%, transparent 63%),
      linear-gradient(104deg, transparent 72%, rgba(255,255,255,0.68) 84%, transparent 96%),
      linear-gradient(to right,  rgba(15,32,51,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,32,51,0.035) 1px, transparent 1px),
      linear-gradient(to right,  rgba(15,32,51,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,32,51,0.025) 1px, transparent 1px);
    background-size:
      100% 100%, 100% 100%, 100% 100%,
      120px 120px, 120px 120px, 24px 24px, 24px 24px;
    background-repeat:
      no-repeat, no-repeat, no-repeat,
      repeat, repeat, repeat, repeat;
  }

  /* Variant 2: soft gradient, two very pale color fields in teal and
     navy. No grid - for cases where the drafting paper feels too
     technical. */
  .backdrop-gradient .backdrop{
    background-image:
      radial-gradient(900px 620px at 12% 8%,  rgba(24,191,180,0.10), transparent 62%),
      radial-gradient(760px 560px at 88% 42%, rgba(15,32,51,0.075), transparent 60%);
  }

  /* Variant 3: both layered together. */
  .backdrop-both .backdrop{
    background-image:
      radial-gradient(900px 620px at 12% 8%,  rgba(24,191,180,0.10), transparent 62%),
      radial-gradient(760px 560px at 88% 42%, rgba(15,32,51,0.06), transparent 60%),
      linear-gradient(to right,  rgba(15,32,51,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,32,51,0.05) 1px, transparent 1px),
      linear-gradient(to right,  rgba(15,32,51,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,32,51,0.025) 1px, transparent 1px);
    background-size:auto, auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  }

  /* System setting "reduce motion": the grid stays, the drift doesn't. A
     static pattern isn't motion - that's precisely why nothing but the
     drifting is removed here. The script checks the same setting. */
  @media (prefers-reduced-motion: reduce){
    .backdrop{transform:none !important;}
  }

  /* The contour lines sit above the gradient but below everything
     readable. The mask fades them out toward the left edge so the
     heading stands on a calm backdrop. */
  #heroContour{position:absolute; inset:0; width:100%; height:100%; z-index:0;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.35) 26%, #000 52%);
    mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.35) 26%, #000 52%);}