/* ==========================================================
     TOKENS  (identical to CD_TankPuls.html)
     ========================================================== */
  :root{
    --ink:#0E1C2C;
    --mint:#14D8C0;
    --mint-deep:#0FB3A0;
    --mint-soft:rgba(20,216,192,.12);

    --n-950:#0E1C2C;
    --n-900:#1A2938;
    --n-800:#2A3B4D;
    --n-700:#3E5062;
    --n-600:#5A6B7C;
    --n-500:#7A8A99;
    --n-400:#9CA8B4;
    --n-300:#C4CDD5;
    --n-200:#E4E9EE;
    --n-100:#F1F4F7;
    --n-50:#F8FAFB;
    --paper:#FFFFFF;

    --p-low:#14D8C0;
    --p-avg:#7A8A99;
    --p-high:#E4A33A;
    --p-xhigh:#E06B4A;

    --r-xs:4px;
    --r-sm:8px;
    --r-md:12px;
    --r-lg:16px;
    --r-xl:24px;

    --s-1: 0 1px 2px rgba(14,28,44,.04), 0 1px 1px rgba(14,28,44,.02);
    --s-2: 0 2px 8px rgba(14,28,44,.06), 0 1px 3px rgba(14,28,44,.04);
    --s-3: 0 12px 32px rgba(14,28,44,.10), 0 2px 8px rgba(14,28,44,.06);

    --f-display: 'Satoshi','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --f-body:    'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --f-mono:    'JetBrains Mono','SF Mono',Consolas,monospace;

    --container: 1240px;
    --pad-x: clamp(20px, 5vw, 56px);
  }

  /* ==========================================================
     RESET
     ========================================================== */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--f-body);
    font-size:16px;
    line-height:1.55;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"ss01","cv11";
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  :focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:3px;}

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding-left:var(--pad-x);
    padding-right:var(--pad-x);
  }

  /* ==========================================================
     NAV
     ========================================================== */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(1.6) blur(12px);
    -webkit-backdrop-filter:saturate(1.6) blur(12px);
    border-bottom:1px solid var(--n-200);
  }
  .nav-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:32px;
    align-items:center;
    height:76px;
  }
  .brand{
    font-family:var(--f-display);
    font-weight:700;
    font-size:20px;
    letter-spacing:-.02em;
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    gap:10px;
    line-height:1;
  }
  .brand .mark{
    width:52px;height:52px;
    display:block;
    border-radius:6px;
    flex-shrink:0;
  }
  .brand .wm{display:inline-block;}
  .brand .dot{color:var(--mint);}
  .nav-links{
    display:flex;
    gap:28px;
    justify-content:center;
    font-size:14px;
    font-weight:450;
    color:var(--n-700);
  }
  .nav-links a{transition:color 160ms;}
  .nav-links a:hover{color:var(--ink);}
  .nav-cta{
    display:flex;gap:12px;align-items:center;
  }
  .nav-status{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-600);
    text-transform:uppercase;
    letter-spacing:.1em;
  }
  .nav-status .live-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 0 rgba(20,216,192,.6);
    animation:pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(20,216,192,.55);}
    70%{box-shadow:0 0 0 10px rgba(20,216,192,0);}
    100%{box-shadow:0 0 0 0 rgba(20,216,192,0);}
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    font-family:var(--f-display);
    font-size:14px;
    font-weight:500;
    letter-spacing:-.005em;
    border-radius:var(--r-sm);
    transition:all 160ms ease-out;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--ink);color:var(--paper);}
  .btn-primary:hover{background:var(--n-800);box-shadow:var(--s-2);}
  .btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--n-300);}
  .btn-secondary:hover{border-color:var(--ink);}
  .btn-mint{background:var(--mint);color:var(--ink);}
  .btn-mint:hover{background:var(--mint-deep);color:var(--paper);}
  .btn-ghost-dark{color:var(--paper);border:1px solid rgba(255,255,255,.2);padding:10px 18px;font-size:14px;border-radius:var(--r-sm);font-family:var(--f-display);font-weight:500;}
  .btn-ghost-dark:hover{border-color:var(--mint);color:var(--mint);}
  .btn-lg{padding:14px 24px;font-size:15px;}

  /* ==========================================================
     HERO
     ========================================================== */
  .hero{
    position:relative;
    background:var(--ink);
    color:var(--paper);
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 500px at 85% 15%, rgba(20,216,192,.16) 0%, transparent 60%),
      radial-gradient(600px 400px at 10% 90%, rgba(20,216,192,.06) 0%, transparent 60%);
    pointer-events:none;
  }
  /* subtle grid texture */
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
    pointer-events:none;
  }

  .hero-inner{
    position:relative;
    z-index:1;
    padding-top:96px;
    padding-bottom:112px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:72px;
    align-items:center;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:6px 12px 6px 10px;
    border-radius:999px;
    background:rgba(20,216,192,.08);
    border:1px solid rgba(20,216,192,.2);
    color:var(--mint);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:28px;
  }
  .eyebrow .dotled{width:6px;height:6px;border-radius:50%;background:var(--mint);}

  .hero h1{
    font-family:var(--f-display);
    font-weight:500;
    font-size:clamp(44px, 6.6vw, 88px);
    letter-spacing:-.035em;
    line-height:1.05;
    margin-bottom:44px;
    text-wrap:balance;
  }
  .hero h1 em{font-style:normal;color:var(--mint);}

  .hero-lede{
    font-size:18px;
    line-height:1.5;
    color:var(--n-300);
    max-width:520px;
    margin-bottom:40px;
  }

  .hero-cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:40px;
  }

  .hero-trust{
    display:flex;
    gap:28px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.08);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-400);
    flex-wrap:wrap;
  }
  .hero-trust span{display:flex;align-items:center;gap:8px;}
  .hero-trust svg{width:12px;height:12px;color:var(--mint);}

  /* Hero visual — pump + live price card */
  .hero-visual{
    position:relative;
    aspect-ratio:1/1.05;
    max-width:520px;
    justify-self:end;
    width:100%;
  }
  .hero-pump{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
  }
  .hero-pump svg, .hero-pump img{
    width:72%;
    height:auto;
    filter:drop-shadow(0 24px 48px rgba(0,0,0,.3));
    animation:floaty 8s ease-in-out infinite;
  }
  .hero-pump svg path[fill="#0E1C2C"]{fill:#E4E9EE;}
  .hero-pump svg path[fill="#14D8C0"]{fill:var(--mint);}
  @keyframes floaty{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-8px) rotate(-.4deg);}
  }

  .hero-ticker{
    position:absolute;
    left:-4%;
    bottom:4%;
    background:var(--paper);
    color:var(--ink);
    border-radius:var(--r-md);
    padding:18px 20px;
    box-shadow:var(--s-3);
    width:280px;
  }
  .hero-ticker .row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
  }
  .hero-ticker .label{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--n-500);
    margin-bottom:4px;
  }
  .hero-ticker .station{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    color:var(--ink);
  }
  .hero-ticker .meta{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    margin-top:2px;
  }
  .hero-ticker .price{
    font-family:var(--f-display);
    font-size:32px;
    font-weight:500;
    letter-spacing:-.025em;
    color:var(--mint-deep);
    font-variant-numeric:tabular-nums;
    line-height:1;
  }
  .hero-ticker .price .unit{
    font-size:12px;
    color:var(--n-500);
    font-weight:400;
    margin-left:3px;
  }
  .hero-ticker .delta{
    margin-top:14px;
    padding-top:12px;
    border-top:1px dashed var(--n-200);
    display:flex;
    justify-content:space-between;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-600);
  }
  .hero-ticker .delta b{color:var(--mint-deep);font-weight:500;}

  .hero-pin{
    position:absolute;
    top:8%;
    right:-2%;
    background:var(--paper);
    border-radius:var(--r-md);
    padding:14px 16px;
    box-shadow:var(--s-3);
    width:200px;
  }
  .hero-pin .label{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    margin-bottom:10px;
  }
  .hero-pin .bar-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .hero-pin .bar-row:last-child{margin-bottom:0;}
  .hero-pin .bar-row .tag{
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--n-600);
    width:18px;
  }
  .hero-pin .bar-row .bar{
    flex:1;
    height:6px;
    border-radius:3px;
    background:var(--n-100);
    overflow:hidden;
    position:relative;
  }
  .hero-pin .bar-row .fill{
    position:absolute;
    inset:0 auto 0 0;
    background:var(--mint);
    border-radius:3px;
  }
  .hero-pin .bar-row .val{
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    width:42px;
    text-align:right;
  }

  /* Skeleton loader for live hero data */
  @keyframes hero-skeleton-shimmer{
    0%{background-position:-200% 0;}
    100%{background-position:200% 0;}
  }
  .hero-pin.is-loading .label,
  .hero-pin.is-loading .bar-row .tag,
  .hero-pin.is-loading .bar-row .val,
  .hero-ticker.is-loading .label,
  .hero-ticker.is-loading .station,
  .hero-ticker.is-loading .meta,
  .hero-ticker.is-loading .price,
  .hero-ticker.is-loading .delta span,
  .hero-ticker.is-loading .delta b{
    color:transparent !important;
    background:linear-gradient(90deg,var(--n-100) 0%,var(--n-200) 50%,var(--n-100) 100%);
    background-size:200% 100%;
    animation:hero-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius:4px;
    display:block;
    user-select:none;
    overflow:hidden;
    text-indent:-9999px;
    white-space:nowrap;
  }
  /* Fixed dimensions so skeleton doesn't reflow with text content */
  .hero-pin.is-loading .label{ width:108px; height:12px; margin-bottom:14px; }
  .hero-pin.is-loading .bar-row{ margin-bottom:14px; }
  .hero-pin.is-loading .bar-row .tag{ width:18px; height:10px; }
  .hero-pin.is-loading .bar-row .val{ width:42px; height:10px; border-radius:3px; }
  .hero-pin.is-loading .bar-row .fill{
    background:linear-gradient(90deg,var(--n-100) 0%,var(--n-200) 50%,var(--n-100) 100%) !important;
    background-size:200% 100% !important;
    animation:hero-skeleton-shimmer 1.4s ease-in-out infinite;
    width:60% !important;
  }
  .hero-ticker.is-loading .label{ width:130px; height:11px; margin-bottom:10px; }
  .hero-ticker.is-loading .station{ width:120px; height:16px; margin-bottom:8px; }
  .hero-ticker.is-loading .meta{ width:160px; height:12px; margin-top:0; }
  .hero-ticker.is-loading .price{
    width:88px; height:32px; min-width:0;
  }
  .hero-ticker.is-loading .price .unit{ display:none; }
  .hero-ticker.is-loading .delta span{ width:130px; height:12px; border-radius:3px; }
  .hero-ticker.is-loading .delta b{ width:50px; height:12px; border-radius:3px; }

  /* ==========================================================
     PROMISE MARQUEE
     ========================================================== */
  .promise{
    background:var(--mint);
    color:var(--ink);
    padding:20px 0;
    overflow:hidden;
    border-bottom:1px solid var(--mint-deep);
  }
  .promise-track{
    display:flex;
    gap:64px;
    animation:marquee 40s linear infinite;
    white-space:nowrap;
    width:max-content;
  }
  .promise-track span{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.015em;
    display:inline-flex;
    align-items:center;
    gap:64px;
  }
  .promise-track span::after{
    content:"";
    display:inline-block;
    width:6px;height:6px;
    background:var(--ink);
    border-radius:50%;
  }
  @keyframes marquee{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ==========================================================
     SECTION STRUCTURE
     ========================================================== */
  section{
    padding-top:clamp(80px, 10vw, 140px);
    padding-bottom:clamp(80px, 10vw, 140px);
  }
  .section-head{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:24px;
    align-items:baseline;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    padding-bottom:20px;
    border-bottom:1px solid var(--n-200);
    margin-bottom:56px;
  }
  .section-head .n{color:var(--ink);font-weight:500;}
  .section-head .l{color:var(--n-700);}
  .section-head .r{color:var(--n-400);}

  .section-title{
    font-family:var(--f-display);
    font-size:clamp(36px, 5vw, 56px);
    font-weight:500;
    letter-spacing:-.03em;
    line-height:1.02;
    margin-bottom:24px;
    color:var(--ink);
    max-width:800px;
    text-wrap:balance;
  }
  .section-title em{font-style:normal;color:var(--mint-deep);}

  .section-lede{
    font-size:18px;
    line-height:1.5;
    color:var(--n-700);
    max-width:620px;
    margin-bottom:64px;
  }

  /* ==========================================================
     LIVE PREVIEW  (station cards with price pins)
     ========================================================== */
  .live-search{
    margin:32px 0 24px;
  }
  .live-search{position:relative;}
  .live-search__autocomplete{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    margin:0;
    padding:6px;
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    box-shadow:0 16px 40px rgba(14,28,44,.14);
    list-style:none;
    z-index:30;
    max-height:320px;
    overflow-y:auto;
    display:none;
  }
  .live-search__autocomplete.is-open{display:block;}
  .live-search__autocomplete li{
    padding:10px 14px;
    border-radius:6px;
    cursor:pointer;
    display:flex;
    align-items:baseline;
    gap:10px;
    color:var(--ink);
    font-size:14px;
  }
  .live-search__autocomplete li:hover,
  .live-search__autocomplete li.is-active{background:var(--n-100);}
  .live-search__autocomplete .ac-type{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    color:var(--n-500);
    letter-spacing:.1em;
    flex-shrink:0;
    min-width:64px;
  }
  .live-search__autocomplete .ac-label{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .live-search__autocomplete .ac-info{
    padding:14px;
    color:var(--n-500);
    font-size:13px;
    text-align:center;
    font-family:var(--f-mono);
  }

  .live-search__bar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:stretch;
    background:var(--paper);
    border:1px solid var(--ink);
    border-radius:var(--r-md);
    box-shadow:0 1px 0 rgba(14,28,44,.04), 0 20px 40px -24px rgba(14,28,44,.18);
    overflow:hidden;
  }
  .live-search__tag{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 20px;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    white-space:nowrap;
  }
  .live-search__tag-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 3px rgba(20,216,192,.25);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:.5;}
  }
  .live-search__field{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px 0 20px;
    min-width:0;
  }
  .live-search__glass{
    color:var(--n-500);
    flex-shrink:0;
    transition:color .15s ease;
  }
  .live-search__field:focus-within .live-search__glass{color:var(--ink);}
  .live-search__field input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    font:500 18px/1.2 var(--f-display);
    color:var(--ink);
    letter-spacing:-.015em;
    padding:18px 0;
  }
  .live-search__field input::placeholder{
    color:var(--n-500);
    font-weight:400;
  }
  .live-search__locate{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    margin-right:-4px;
    background:var(--n-50);
    border:1px solid var(--n-200);
    border-radius:999px;
    color:var(--n-700);
    font:500 12px/1 var(--f-mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    cursor:pointer;
    transition:all .15s ease;
    white-space:nowrap;
    flex-shrink:0;
  }
  .live-search__locate:hover{
    background:var(--paper);
    border-color:var(--ink);
    color:var(--ink);
  }
  .live-search__submit{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 28px;
    background:var(--mint);
    color:var(--ink);
    border:0;
    font:500 14px/1 var(--f-display);
    letter-spacing:-.005em;
    cursor:pointer;
    transition:background .15s ease;
    white-space:nowrap;
  }
  .live-search__submit:hover{background:var(--mint-deep);color:var(--paper);}
  .live-search__submit svg{transition:transform .15s ease;}
  .live-search__submit:hover svg{transform:translateX(2px);}

  .live-search__meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    padding-left:4px;
    flex-wrap:wrap;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
  }
  .live-search__meta > span{
    color:var(--n-500);
    margin-right:2px;
  }
  .live-search__sugg{
    padding:6px 12px;
    background:transparent;
    border:1px solid var(--n-200);
    border-radius:999px;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-700);
    text-transform:none;
    letter-spacing:0;
    cursor:pointer;
    transition:all .15s ease;
  }
  .live-search__sugg:hover{
    border-color:var(--ink);
    background:var(--ink);
    color:var(--paper);
  }

  @media (max-width:820px){
    .live-search__bar{
      grid-template-columns:1fr;
    }
    .live-search__tag{
      padding:10px 20px;
      justify-content:flex-start;
    }
    .live-search__field{
      padding:4px 16px 4px 20px;
      border-top:1px solid var(--n-200);
    }
    .live-search__field input{font-size:16px;padding:14px 0;}
    .live-search__locate span{display:none;}
    .live-search__locate{gap:0;padding:8px;}
    .live-search__submit{
      padding:14px 20px;
      justify-content:center;
      border-top:1px solid rgba(14,28,44,.1);
    }
  }

  .live-controls__toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px 8px 16px;
    background:transparent;
    border:1px solid var(--n-200);
    border-radius:999px;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-700);
    cursor:pointer;
    margin-bottom:24px;
    transition:all .15s ease;
  }
  .live-controls__toggle:hover{
    border-color:var(--ink);
    color:var(--ink);
  }
  .live-controls__toggle svg{
    transition:transform .2s ease;
    flex-shrink:0;
  }
  .live-controls__toggle[aria-expanded="true"]{
    border-color:var(--ink);
    color:var(--ink);
  }
  .live-controls__toggle[aria-expanded="true"] svg{
    transform:rotate(180deg);
  }
  .live-controls__summary{
    color:var(--n-500);
    text-transform:none;
    letter-spacing:0;
    font-size:11px;
    padding-left:8px;
    margin-left:2px;
    border-left:1px solid var(--n-200);
  }
  .live-controls__summary:empty{display:none;}
  .live-controls{
    margin-bottom:24px;
  }
  .live-controls[hidden]{display:none;}

  .live-filters,
  .live-sort{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
  }
  .live-filters{margin-bottom:12px;}
  .live-filters .label,
  .live-sort .label{
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    margin-right:8px;
  }
  .chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    font-family:var(--f-mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:.02em;
    border-radius:999px;
    background:var(--n-100);
    color:var(--n-700);
    border:1px solid transparent;
    cursor:pointer;
    transition:all 160ms;
  }
  .chip:hover{background:var(--n-200);}
  .chip.is-on{background:var(--ink);color:var(--paper);}
  .chip.is-on:hover{background:var(--n-800);}
  .chip .chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
  .chip .chip-arrow{margin-left:-3px;font-size:11px;line-height:1;opacity:.85;min-width:8px;display:inline-block;text-align:center;}
  .chip .chip-arrow:empty{display:none;}

  .stations{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  .station-card{
    padding:24px;
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    transition:border-color 200ms, transform 200ms, box-shadow 200ms;
    display:flex;
    flex-direction:column;
  }
  .station-card:hover{
    border-color:var(--n-300);
    transform:translateY(-2px);
    box-shadow:var(--s-2);
  }
  .station-card.is-low{border-color:var(--mint);}
  .station-card.is-low:hover{box-shadow:0 12px 32px rgba(20,216,192,.18), 0 2px 8px rgba(14,28,44,.06);}

  .sc-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:baseline;
    margin-bottom:4px;
  }
  .sc-brand{
    font-family:var(--f-display);
    font-size:17px;
    font-weight:500;
    letter-spacing:-.005em;
    color:var(--ink);
  }
  .sc-dist{
    font-family:var(--f-mono);
    font-size:12px;
    font-variant-numeric:tabular-nums;
    color:var(--n-500);
  }
  .sc-addr{
    font-size:13px;
    color:var(--n-600);
    margin-bottom:20px;
  }
  .sc-prices{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:12px;
    padding:16px 0;
    border-top:1px solid var(--n-200);
    border-bottom:1px solid var(--n-200);
    margin-bottom:16px;
  }
  .sc-fuel{display:flex;flex-direction:column;gap:4px;}
  .sc-fuel .kind{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-500);
  }
  .sc-fuel .price{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    line-height:1;
  }
  .sc-fuel .price .unit{font-size:12px;color:var(--n-500);font-weight:400;margin-left:2px;}
  .sc-fuel .price.low{color:var(--mint-deep);}
  .sc-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-top:auto;
  }
  .sc-signal{
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 10px;
    border-radius:999px;
    background:var(--n-100);
    color:var(--n-700);
    font-weight:500;
  }
  .sc-signal .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
  .sc-signal.low{background:var(--mint-soft);color:var(--mint-deep);}
  .sc-signal.avg{background:var(--n-100);color:var(--n-600);}
  .sc-signal.high{background:rgba(228,163,58,.12);color:#B87A1E;}
  .sc-signal.xhigh{background:rgba(224,107,74,.12);color:#C24A2C;}

  /* Station card skeleton + empty state */
  .station-card.is-loading{pointer-events:none;}
  .station-card.is-loading .sc-brand,
  .station-card.is-loading .sc-dist,
  .station-card.is-loading .sc-addr,
  .station-card.is-loading .sc-fuel .kind,
  .station-card.is-loading .sc-fuel .price,
  .station-card.is-loading .sc-signal,
  .station-card.is-loading .sc-foot > span:last-child{
    color:transparent !important;
    background:linear-gradient(90deg,var(--n-100) 0%,var(--n-200) 50%,var(--n-100) 100%);
    background-size:200% 100%;
    animation:hero-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius:4px;
    display:block;
    overflow:hidden;
    text-indent:-9999px;
    white-space:nowrap;
    user-select:none;
  }
  .station-card.is-loading .sc-brand{width:160px;height:18px;}
  .station-card.is-loading .sc-dist{width:50px;height:11px;border-radius:3px;}
  .station-card.is-loading .sc-addr{width:220px;height:12px;border-radius:3px;}
  .station-card.is-loading .sc-fuel .kind{width:28px;height:10px;border-radius:3px;}
  .station-card.is-loading .sc-fuel .price{width:64px;height:20px;}
  .station-card.is-loading .sc-signal{width:110px;height:18px;border-radius:999px;}
  .station-card.is-loading .sc-foot > span:last-child{width:40px;height:11px;border-radius:3px;}
  .stations-empty{
    grid-column:1 / -1;
    padding:40px 24px;
    text-align:center;
    color:var(--n-500);
    border:1px dashed var(--n-200);
    border-radius:var(--r-md);
    font-size:14px;
  }

  .live-footnote{
    margin-top:32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--n-500);
    flex-wrap:wrap;
    gap:16px;
  }
  .live-footnote a{color:var(--ink);border-bottom:1px dotted var(--n-400);padding-bottom:1px;}
  .live-footnote a:hover{border-bottom-color:var(--mint);color:var(--mint-deep);}

  /* ==========================================================
     PRINCIPLES
     ========================================================== */
  .bg-soft{background:var(--n-50);}

  .principles-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--n-200);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    overflow:hidden;
  }
  .principle{
    background:var(--paper);
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:220px;
  }
  .principle .p-num{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--mint-deep);
    font-weight:500;
    letter-spacing:.08em;
  }
  .principle h4{
    font-family:var(--f-display);
    font-size:20px;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--ink);
    text-wrap:balance;
  }
  .principle p{
    font-size:14px;
    line-height:1.55;
    color:var(--n-700);
    text-wrap:pretty;
  }

  /* ==========================================================
     TRANSPARENZ  (MTS-K + sparkline)
     ========================================================== */
  .transparenz{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  .trans-copy h3{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.01em;
    margin:0 0 16px;
    color:var(--ink);
  }
  .trans-copy h3::before{
    content:"";
    display:inline-block;
    width:16px;height:1px;
    background:var(--mint);
    vertical-align:middle;
    margin-right:12px;
    transform:translateY(-3px);
  }
  .trans-copy p{
    font-size:15px;
    line-height:1.55;
    color:var(--n-700);
    margin-bottom:16px;
    max-width:480px;
  }
  .trans-copy .source-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    margin-top:8px;
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-sm);
    font-family:var(--f-mono);
    font-size:12px;
    color:var(--ink);
    transition:all 160ms;
  }
  .trans-copy .source-link:hover{border-color:var(--ink);}
  .trans-copy .source-link .arrow{color:var(--mint-deep);}

  .chart{
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    padding:28px;
    box-shadow:var(--s-1);
  }
  .chart-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:baseline;
    padding-bottom:16px;
    border-bottom:1px solid var(--n-200);
    margin-bottom:20px;
  }
  .chart-head .title{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    color:var(--ink);
  }
  .chart-head .meta{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .chart-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:20px;
  }
  .chart-stat .k{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-500);
    margin-bottom:4px;
  }
  .chart-stat .v{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
  }
  .chart-stat .v.low{color:var(--mint-deep);}
  .chart-stat .v .unit{font-size:12px;color:var(--n-500);font-weight:400;margin-left:2px;}
  .chart-svg{width:100%;height:160px;display:block;}
  .chart-legend{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-family:var(--f-mono);
    font-size:10px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  /* ==========================================================
     STATS BAND
     ========================================================== */
  .stats{
    background:var(--ink);
    color:var(--paper);
    position:relative;
    overflow:hidden;
  }
  .stats::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(700px 400px at 90% 50%, rgba(20,216,192,.1), transparent 60%);
    pointer-events:none;
  }
  .stats-inner{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:48px;
    padding-top:80px;
    padding-bottom:80px;
  }
  .stat{
    padding:0 8px;
  }
  .stat .n{
    font-family:var(--f-display);
    font-size:clamp(48px, 6vw, 80px);
    font-weight:500;
    letter-spacing:-.035em;
    line-height:1;
    color:var(--paper);
    font-variant-numeric:tabular-nums;
    margin-bottom:12px;
  }
  .stat .n em{font-style:normal;color:var(--mint);}
  .stat .l{
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--n-400);
    margin-bottom:10px;
  }
  .stat .d{
    font-size:14px;
    line-height:1.55;
    color:var(--n-300);
    max-width:260px;
  }

  /* ==========================================================
     FAQ
     ========================================================== */
  .faq-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:72px;
    align-items:start;
  }
  .faq-aside h3{
    font-family:var(--f-display);
    font-size:28px;
    font-weight:500;
    letter-spacing:-.02em;
    line-height:1.1;
    color:var(--ink);
    margin-bottom:16px;
  }
  .faq-aside p{
    font-size:14px;
    color:var(--n-700);
    line-height:1.55;
    margin-bottom:24px;
  }
  .faq-aside .contact{
    font-family:var(--f-mono);
    font-size:12px;
    color:var(--n-600);
    line-height:1.8;
  }
  .faq-aside .contact b{color:var(--ink);font-weight:500;}

  .faq-list{
    border-top:1px solid var(--n-200);
  }
  details.faq{
    border-bottom:1px solid var(--n-200);
  }
  details.faq summary{
    list-style:none;
    cursor:pointer;
    padding:24px 0;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:20px;
    align-items:center;
    transition:color 160ms;
  }
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary:hover .q{color:var(--mint-deep);}
  details.faq summary .num{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-400);
    font-weight:500;
  }
  details.faq summary .q{
    font-family:var(--f-display);
    font-size:18px;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--ink);
    transition:color 160ms;
    text-wrap:balance;
  }
  details.faq summary .plus{
    width:22px;height:22px;
    position:relative;
    color:var(--n-600);
    transition:transform 260ms ease;
  }
  details.faq summary .plus::before,
  details.faq summary .plus::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    background:currentColor;
  }
  details.faq summary .plus::before{
    width:12px;height:1.5px;
    transform:translate(-50%,-50%);
  }
  details.faq summary .plus::after{
    width:1.5px;height:12px;
    transform:translate(-50%,-50%);
    transition:transform 260ms ease;
  }
  details.faq[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
  details.faq[open] summary .plus{color:var(--mint-deep);}
  details.faq[open] summary .q{color:var(--ink);}
  details.faq .ans{
    padding:0 0 28px 54px;
    max-width:640px;
    color:var(--n-700);
    font-size:15px;
    line-height:1.6;
  }
  details.faq .ans p + p{margin-top:12px;}

  /* ==========================================================
     DOWNLOAD CTA
     ========================================================== */
  .download{
    position:relative;
    background:var(--n-50);
    overflow:hidden;
  }
  .download-inner{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:72px;
    align-items:center;
  }
  .download h2{
    font-family:var(--f-display);
    font-size:clamp(36px, 5vw, 56px);
    font-weight:500;
    letter-spacing:-.03em;
    line-height:1.02;
    margin-bottom:24px;
    color:var(--ink);
    text-wrap:balance;
  }
  .download h2 em{font-style:normal;color:var(--mint-deep);}
  .download p{
    font-size:17px;
    line-height:1.5;
    color:var(--n-700);
    max-width:480px;
    margin-bottom:32px;
  }
  .store-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
  .store-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:12px 20px 12px 16px;
    background:var(--ink);
    color:var(--paper);
    border-radius:var(--r-sm);
    transition:all 160ms;
  }
  .store-btn:hover{background:var(--n-800);transform:translateY(-1px);}
  .store-btn .icon{width:22px;height:22px;}
  .store-btn .lbl{display:flex;flex-direction:column;line-height:1.2;}
  .store-btn .lbl .s{
    font-family:var(--f-mono);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:.7;
  }
  .store-btn .lbl .b{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    letter-spacing:-.005em;
  }
  .download .fine{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .download-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px 6px 10px;
    border-radius:999px;
    background:rgba(20,216,192,.12);
    border:1px solid rgba(20,216,192,.3);
    color:var(--mint-deep);
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:24px;
  }
  .download-eyebrow .dot{
    width:6px;height:6px;border-radius:50%;background:var(--mint);
  }

  /* Download features grid */
  .download-features{
    margin-top:96px;
    padding-top:72px;
    border-top:1px solid var(--n-200);
  }
  .dl-feat-head{
    text-align:center;
    margin-bottom:56px;
  }
  .dl-feat-head .eyebrow{
    display:inline-block;
    font-family:var(--f-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--n-500);
    margin-bottom:16px;
  }
  .dl-feat-head h3{
    font-family:var(--f-display);
    font-weight:500;
    font-size:clamp(28px, 4vw, 44px);
    letter-spacing:-.025em;
    line-height:1.05;
    color:var(--ink);
    margin:0 auto 20px;
    text-wrap:balance;
  }
  .dl-feat-head h3 em{font-style:normal;color:var(--mint-deep);}
  .dl-feat-head p{
    max-width:560px;
    margin:0 auto;
    font-size:16px;
    line-height:1.5;
    color:var(--n-700);
  }

  .dl-feat-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .dl-feat{
    background:var(--paper);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:border-color 200ms, transform 200ms, box-shadow 200ms;
  }
  .dl-feat:hover{
    border-color:var(--n-300);
    transform:translateY(-2px);
    box-shadow:var(--s-2);
  }
  .dl-feat__visual{
    aspect-ratio:240 / 140;
    background:var(--n-50);
    border-bottom:1px solid var(--n-200);
    overflow:hidden;
  }
  .dl-feat__visual svg{display:block;width:100%;height:100%;}
  .dl-feat__visual--carplay{background:#0E1C2C;}
  .dl-feat__eyebrow{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--mint-deep);
    padding:24px 24px 0;
  }
  .dl-feat h4{
    font-family:var(--f-display);
    font-size:20px;
    font-weight:500;
    letter-spacing:-.015em;
    color:var(--ink);
    line-height:1.2;
    margin:8px 24px 12px;
  }
  .dl-feat p{
    font-size:14px;
    line-height:1.55;
    color:var(--n-600);
    margin:0 24px 24px;
    max-width:none;
  }

  .dl-final-cta{
    margin-top:64px;
    padding:32px 40px;
    background:var(--ink);
    color:var(--paper);
    border-radius:var(--r-md);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }
  .dl-final-cta p{
    margin:0;
    font-family:var(--f-display);
    font-size:18px;
    font-weight:500;
    color:var(--paper);
    max-width:none;
  }
  .dl-final-cta .store-btn{
    background:var(--paper);
    color:var(--ink);
  }
  .dl-final-cta .store-btn:hover{background:var(--n-100);}

  @media (max-width: 980px){
    .dl-feat-grid{grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width: 640px){
    .dl-feat-grid{grid-template-columns:1fr;}
    .download-features{margin-top:64px;padding-top:48px;}
    .dl-final-cta{flex-direction:column;text-align:center;}
  }

  /* Phone mock (from CD) */
  .phone{
    background:var(--n-900);
    border-radius:40px;
    padding:18px 14px;
    box-shadow:var(--s-3);
    aspect-ratio:9/19;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    max-width:320px;
    margin:0 auto;
  }
  .phone::before{
    content:"";
    position:absolute;
    top:10px;left:50%;transform:translateX(-50%);
    width:96px;height:24px;
    background:var(--ink);
    border-radius:999px;
    z-index:2;
  }
  .phone-screen{
    flex:1;
    background:var(--n-50);
    border-radius:26px;
    padding:60px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
  }
  .phone-topline{
    display:flex;
    justify-content:space-between;
    font-family:var(--f-mono);
    font-size:9px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .phone-screen--image{
    padding:0;
    position:relative;
  }
  .phone-screen--image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    border-radius:inherit;
  }
  /* Fullscreen app screenshot variant — image fills phone edge-to-edge (under notch) */
  .phone--fullscreen{padding:0;}
  .phone--fullscreen .phone-screen{
    border-radius:inherit;
    padding:0;
    background:var(--ink);
  }
  .phone--fullscreen .phone-screen--image img{
    border-radius:inherit;
    object-position:center center;
  }
  .phone-head{
    font-family:var(--f-display);
    font-size:26px;
    font-weight:700;
    letter-spacing:-.025em;
    color:var(--ink);
    line-height:1;
  }
  .phone-head span{color:var(--mint-deep);}
  .phone-sub{
    font-size:11px;
    color:var(--n-600);
    margin-top:2px;
  }
  .phone-filters{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;}
  .mini-chip{
    font-family:var(--f-mono);
    font-size:9px;
    font-weight:500;
    padding:4px 9px;
    border-radius:999px;
    background:var(--paper);
    border:1px solid var(--n-200);
    color:var(--n-600);
  }
  .mini-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .phone-list{display:flex;flex-direction:column;gap:6px;margin-top:2px;flex:1;}
  .phone-station{
    background:var(--paper);
    border-radius:10px;
    padding:10px 12px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
  }
  .phone-station.low{border:1px solid var(--mint);}
  .phone-station .name{
    font-family:var(--f-display);
    font-size:11px;
    font-weight:500;
    color:var(--ink);
  }
  .phone-station .dist{
    font-family:var(--f-mono);
    font-size:9px;
    color:var(--n-500);
  }
  .phone-station .pricebox{
    font-family:var(--f-display);
    font-size:15px;
    font-weight:500;
    letter-spacing:-.015em;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    text-align:right;
    line-height:1;
  }
  .phone-station .pricebox.low{color:var(--mint-deep);}
  .phone-station .pricebox .unit{
    font-size:8px;
    color:var(--n-500);
    font-weight:400;
    display:block;
    margin-top:2px;
    letter-spacing:.02em;
  }

  /* ==========================================================
     FOOTER
     ========================================================== */
  footer.site{
    background:var(--ink);
    color:var(--n-400);
    padding:80px 0 32px;
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3, 1fr);
    gap:48px;
    padding-bottom:48px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .foot-brand .brand{color:var(--paper);font-size:24px;gap:12px;}
  .foot-brand .brand .mark{width:52px;height:52px;border-radius:6px;}
  .foot-brand p{
    font-size:14px;
    line-height:1.55;
    color:var(--n-400);
    margin-top:16px;
    max-width:320px;
  }
  .foot-col h5{
    font-family:var(--f-mono);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--paper);
    font-weight:500;
    margin-bottom:18px;
  }
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
  .foot-col a{
    font-size:14px;
    color:var(--n-400);
    transition:color 160ms;
  }
  .foot-col a:hover{color:var(--mint);}
  .foot-col .addr{
    font-family:var(--f-mono);
    font-size:12px;
    line-height:1.8;
    color:var(--n-400);
  }
  .foot-col .addr b{color:var(--paper);font-weight:500;}

  .foot-bottom{
    padding-top:32px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:24px;
    align-items:center;
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--n-500);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .foot-bottom .right{text-align:right;}
  .foot-bottom .center{color:var(--mint);}

  /* ==========================================================
     RESPONSIVE
     ========================================================== */
  @media (max-width: 1040px){
    .hero-inner{grid-template-columns:1fr;gap:56px;padding-top:64px;padding-bottom:80px;}
    .hero-visual{max-width:440px;margin:0 auto;justify-self:center;}
    .stations{grid-template-columns:repeat(2,1fr);}
    .transparenz{grid-template-columns:1fr;gap:48px;}
    .principles-grid{grid-template-columns:repeat(2,1fr);}
    .faq-grid{grid-template-columns:1fr;gap:40px;}
    .download-inner{grid-template-columns:1fr;gap:48px;}
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  }
  @media (max-width: 680px){
    .nav-links{display:none;}
    .nav-status{display:none;}
    .stations{grid-template-columns:1fr;}
    .stats-inner{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:64px;}
    .principles-grid{grid-template-columns:1fr;}
    .hero-ticker{position:relative;left:auto;bottom:auto;margin:-80px auto 0;}
    .hero-pin{display:none;}
    .foot-grid{grid-template-columns:1fr;}
    .foot-bottom{grid-template-columns:1fr;text-align:center;}
    .foot-bottom .right{text-align:center;}
    .section-head .r{display:none;}
    details.faq summary .num{display:none;}
    details.faq .ans{padding-left:0;}
    .promise-track span{font-size:18px;gap:40px;}
    .promise-track{gap:40px;}
  }

  /* Reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity 700ms ease-out, transform 700ms ease-out;}
  .reveal.is-in{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    .promise-track{animation:none;}
    .hero-pump svg{animation:none;}
  }