/* ============================================================
       FLEETRASHIP — LIGHT DESIGN SYSTEM
       White grounds · Slate ink · Signal blue. Hairlines, not shadows.
       Display: Plus Jakarta Sans  ·  Text: Inter
       ============================================================ */
    :root{
        --paper:      #FFFFFF;   /* primary ground */
        --mist:       #F7F8FA;   /* alternate ground */
        --cloud:      #EEF1F6;   /* raised / tinted surface */
        --line:       #E2E6ED;   /* hairline */
        --line-2:     #D3D9E3;   /* stronger hairline */

        /* Brand colours sampled directly from the FleetraShip logo */
        --ink:        #0F2148;   /* logo navy — headings */
        --ink-2:      #27364F;   /* strong body */
        --muted:      #5C6779;   /* body text */
        --muted-2:    #8A93A5;   /* labels, meta */

        --brand:      #1A62C8;   /* logo blue — primary accent */
        --brand-dark: #12457F;
        --brand-soft: #E9F1FB;   /* accent wash */
        --orange:     #FF8506;   /* logo orange — emphasis only */
        --orange-soft:#FFF1E0;
        --positive:   #0F7B55;

        --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        --sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

        --gut: clamp(1.25rem, 4vw, 2.5rem);
        --sec: clamp(4.5rem, 10vw, 8.5rem);
        --ease: cubic-bezier(.22,.61,.36,1);
        --shadow-sm: 0 1px 2px rgba(14,23,38,.04), 0 4px 16px rgba(14,23,38,.05);
        --shadow-md: 0 2px 4px rgba(14,23,38,.04), 0 12px 40px rgba(14,23,38,.08);
    }

    *{ margin:0; padding:0; box-sizing:border-box; }
    html{ scroll-behavior:smooth; scroll-padding-top:88px; }
    body{
        font-family:var(--sans);
        background:var(--paper);
        color:var(--ink-2);
        font-size:16px;
        line-height:1.65;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
    }
    ::selection{ background:var(--brand); color:#fff; }
    a{ text-decoration:none; color:inherit; }
    img,svg{ max-width:100%; }

    .wrap{ width:min(1240px, 100% - (var(--gut) * 2)); margin-inline:auto; }

    /* ---------- Typography ---------- */
    .display,.h2,.h3,.h4,h1,h2,h3,h4,h5,h6{
        font-family:var(--display);
        color:var(--ink);
    }
    .display{
        font-weight:800;
        line-height:1.06;
        letter-spacing:-.035em;
        font-size:clamp(2.4rem, 6vw, 4.25rem);
    }
    .h2{
        font-weight:800;
        line-height:1.12;
        letter-spacing:-.03em;
        font-size:clamp(1.9rem, 4.2vw, 3rem);
    }
    .display .accent,.h2 .accent{ color:var(--brand); }
    .h3{ font-size:clamp(1.25rem,2.2vw,1.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.3; }
    .h4{ font-size:1.0625rem; font-weight:700; letter-spacing:-.015em; line-height:1.4; }
    .lede{ font-size:clamp(1rem,1.4vw,1.1875rem); color:var(--muted); line-height:1.72; max-width:58ch; }
    .body-sm{ font-size:.9375rem; color:var(--muted); line-height:1.7; }

    /* Eyebrow: numbered section label */
    .eyebrow{
        display:inline-flex; align-items:center; gap:.6rem;
        font-family:var(--display);
        font-size:.6875rem; font-weight:700;
        letter-spacing:.16em; text-transform:uppercase;
        color:var(--brand);
        background:var(--brand-soft);
        border-radius:100px;
        padding:.4rem .9rem .4rem .55rem;
        margin-bottom:1.5rem;
    }
    .eyebrow::before{
        content:attr(data-n);
        display:grid; place-items:center;
        width:20px; height:20px; border-radius:50%;
        background:var(--brand); color:#fff;
        font-size:.625rem; letter-spacing:0;
    }

    /* ---------- Buttons ---------- */
    .btn-x{
        display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
        font-family:var(--display); font-size:.875rem; font-weight:700;
        letter-spacing:-.005em;
        padding:.95rem 1.75rem;
        border-radius:8px; border:1px solid transparent;
        cursor:pointer;
        transition:all .3s var(--ease);
        white-space:nowrap;
    }
    .btn-primary-x{ background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(26,98,200,.24); }
    .btn-primary-x:hover{ background:var(--brand-dark); box-shadow:0 8px 24px rgba(26,98,200,.26); transform:translateY(-1px); }
    .btn-dark-x{ background:var(--ink); color:#fff; }
    .btn-dark-x:hover{ background:var(--brand); transform:translateY(-1px); }
    .btn-ghost{ border-color:var(--line-2); color:var(--ink); background:var(--paper); }
    .btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
    .btn-x i{ font-size:.7rem; transition:transform .3s var(--ease); }
    .btn-x:hover i{ transform:translateX(3px); }

    /* ---------- Nav ---------- */
    .nav{
        position:fixed; inset:0 0 auto 0; z-index:1000;
        padding:1.1rem 0;
        background:rgba(255,255,255,.82);
        backdrop-filter:blur(16px) saturate(160%);
        -webkit-backdrop-filter:blur(16px) saturate(160%);
        border-bottom:1px solid transparent;
        transition:padding .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    }
    .nav.solid{ padding:.65rem 0; border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(14,23,38,.05); }
    .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
    .brand{ display:inline-flex; align-items:center; }
    .brand img{ height:34px; width:auto; display:block; transition:height .35s var(--ease); }
    .nav.solid .brand img{ height:31px; }
    @media (max-width:480px){ .brand img{ height:29px; } .nav.solid .brand img{ height:27px; } }

    .nav-links{ display:flex; align-items:center; gap:2.15rem; list-style:none; margin:0; }
    /* Fixed-height flex items so links and the CTA share one optical centre line */
    .nav-links a{
        position:relative; display:inline-flex; align-items:center;
        height:40px;
        font-family:var(--display);
        font-size:.875rem; font-weight:600; letter-spacing:-.01em;
        color:var(--muted);
        transition:color .25s var(--ease);
    }
    .nav-links a::after{
        content:''; position:absolute; left:0; right:0; bottom:6px;
        height:2px; background:var(--brand); border-radius:2px;
        transform:scaleX(0); transform-origin:left center;
        transition:transform .3s var(--ease);
    }
    .nav-links a:hover{ color:var(--ink); }
    .nav-links a:hover::after,
    .nav-links a.is-active::after{ transform:scaleX(1); }
    .nav-cta{ display:flex; align-items:center; gap:.6rem; }

    /* Compact CTA sized to the nav, not to page buttons */
    .nav .btn-x{
        height:40px; padding:0 1.3rem;
        font-size:.8125rem; font-weight:700;
        border-radius:8px; line-height:1;
    }
    .nav .btn-x i{ font-size:.65rem; }
    .nav .btn-quiet{
        background:transparent; border-color:transparent; color:var(--muted);
        padding:0 .85rem;
    }
    .nav .btn-quiet:hover{ background:var(--mist); color:var(--ink); transform:none; box-shadow:none; }
    .nav-toggle{
        display:none; background:var(--paper); border:1px solid var(--line-2);
        border-radius:8px; color:var(--ink); width:42px; height:42px;
    }

    @media (max-width:991px){
        .nav-toggle{ display:grid; place-items:center; position:relative; z-index:2; }

        /* NOTE: .nav carries backdrop-filter, which makes it the containing block
           for fixed-position descendants. While the drawer is open we disable the
           filter (see html.menu-open below) so the panel anchors to the viewport
           and fills the full screen height instead of the header box. */
        .nav-menu{
            position:fixed; top:0; right:0; bottom:0; left:auto;
            width:min(370px,88vw); height:100vh; height:100dvh;
            z-index:1200;
            background:var(--paper); border-left:1px solid var(--line);
            padding:0;
            display:flex; flex-direction:column; gap:0;
            overflow-y:auto; -webkit-overflow-scrolling:touch;
            overscroll-behavior:contain;
            box-shadow:-24px 0 70px rgba(14,23,38,.18);
            transform:translateX(101%);
            visibility:hidden;
            transition:transform .42s var(--ease), visibility 0s linear .42s;
        }
        .nav-menu.open{ transform:translateX(0); visibility:visible; transition-delay:0s; }

        /* Drawer header — logo + close, pinned while the panel scrolls */
        .drawer-head{
            display:flex; align-items:center; justify-content:space-between; gap:1rem;
            padding:.9rem 1.25rem; border-bottom:1px solid var(--line);
            position:sticky; top:0; background:var(--paper); z-index:3;
        }
        .drawer-head img{ height:30px; width:auto; display:block; }
        .drawer-close{
            width:40px; height:40px; flex:none;
            border:1px solid var(--line); border-radius:10px;
            background:var(--mist); color:var(--ink);
            display:grid; place-items:center; font-size:.95rem; cursor:pointer;
            transition:all .25s var(--ease);
        }
        .drawer-close:hover,.drawer-close:focus-visible{
            background:var(--ink); border-color:var(--ink); color:#fff;
        }

        .drawer-label{
            display:block; font-family:var(--display);
            font-size:.6875rem; font-weight:700; letter-spacing:.16em;
            text-transform:uppercase; color:var(--muted-2);
            padding:1.35rem 1.25rem .35rem;
        }

        .nav-links{ flex-direction:column; align-items:stretch; gap:0; width:100%; padding:0 1.25rem; }
        .nav-links li + li{ border-top:1px solid var(--line); }
        .nav-links a{
            display:flex; align-items:center; justify-content:space-between;
            font-size:1.0625rem; font-weight:700; color:var(--ink);
            height:auto; padding:.95rem 0;
            transition:color .2s var(--ease), padding-left .25s var(--ease);
        }
        .nav-links a::after{ display:none; }
        .nav-links a::before{
            content:'\f054'; font-family:'Font Awesome 6 Free'; font-weight:900;
            font-size:.6rem; color:var(--line-2); order:2;
            transition:color .2s var(--ease), transform .25s var(--ease);
        }
        .nav-links a:hover,.nav-links a:active{ color:var(--brand); padding-left:.35rem; }
        .nav-links a:hover::before{ color:var(--brand); transform:translateX(3px); }
        .nav-links a.is-active{ color:var(--brand); }
        .nav-links a.is-active::before{ color:var(--brand); }

        /* Bottom block: primary action + direct contact */
        .nav-cta{
            flex-direction:column; align-items:stretch; gap:.6rem;
            margin-top:auto; padding:1.25rem 1.25rem 0;
        }
        /* Restore full-size buttons in the mobile drawer */
        .nav .btn-x{ height:auto; padding:.95rem 1.5rem; font-size:.9375rem; width:100%; }
        .nav .btn-quiet{ border-color:var(--line-2); color:var(--ink); }

        .drawer-contact{
            display:flex; flex-direction:column;
            padding:1rem 1.25rem 1.5rem; margin-top:1.25rem;
            border-top:1px solid var(--line);
        }
        .drawer-contact a{
            display:flex; align-items:center; gap:.7rem;
            font-size:.875rem; color:var(--muted); padding:.55rem 0;
            transition:color .2s var(--ease);
        }
        .drawer-contact a:hover{ color:var(--brand); }
        .drawer-contact i{ color:var(--brand); font-size:.8rem; width:16px; text-align:center; }

        /* Scrim (injected into <body> by main.js so it is never trapped
           inside the header's containing block) */
        .nav-scrim{
            position:fixed; inset:0; z-index:1100;
            background:rgba(10,20,40,.45);
            opacity:0; visibility:hidden;
            transition:opacity .35s var(--ease), visibility 0s linear .35s;
        }
        .nav-scrim.open{ opacity:1; visibility:visible; transition-delay:0s; }

        /* While open: kill the filter so fixed positioning uses the viewport,
           give the bar an opaque background, and lock page scroll. */
        html.menu-open,
        html.menu-open body{ overflow:hidden; }
        html.menu-open .nav{
            backdrop-filter:none; -webkit-backdrop-filter:none;
            background:var(--paper); z-index:1300;
            border-bottom-color:var(--line);
        }
    }
    @media (min-width:992px){ .nav-scrim{ display:none; } }
    @media (min-width:992px){
        .nav-menu{ display:flex; align-items:center; gap:2.25rem; }
        /* Drawer-only furniture */
        .drawer-head,.drawer-label,.drawer-contact{ display:none; }
    }

    /* ---------- Hero ---------- */
    .hero{
        position:relative; background:var(--paper);
        padding:clamp(8rem,15vw,11.5rem) 0 clamp(3.5rem,6vw,5rem);
        overflow:hidden;
    }
    .hero::before{
        content:''; position:absolute; inset:0; pointer-events:none;
        background:
            radial-gradient(900px 520px at 82% 4%, rgba(26,98,200,.10), transparent 62%),
            radial-gradient(760px 500px at 4% 92%, rgba(255,133,6,.07), transparent 66%);
    }
    .hero-grid-lines{
        position:absolute; inset:0; pointer-events:none;
        background-image:
            linear-gradient(rgba(14,23,38,.045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(14,23,38,.045) 1px, transparent 1px);
        background-size:80px 80px;
        mask-image:radial-gradient(circle at 50% 28%, #000 12%, transparent 74%);
        -webkit-mask-image:radial-gradient(circle at 50% 28%, #000 12%, transparent 74%);
    }
    .hero .wrap{ position:relative; z-index:2; }
    .hero-badge{
        display:inline-flex; align-items:center; gap:.6rem;
        border:1px solid var(--line); background:var(--paper);
        border-radius:100px; padding:.45rem 1rem .45rem .6rem;
        font-size:.8125rem; color:var(--muted);
        box-shadow:var(--shadow-sm);
        margin-bottom:1.75rem;
    }
    .hero-badge b{ color:var(--ink); font-weight:600; }
    .dot{ width:7px; height:7px; border-radius:50%; background:var(--positive); flex:none;
          box-shadow:0 0 0 4px rgba(15,123,85,.14); animation:breathe 2.6s ease-in-out infinite; }
    @keyframes breathe{ 0%,100%{ box-shadow:0 0 0 4px rgba(15,123,85,.14);} 50%{ box-shadow:0 0 0 8px rgba(15,123,85,0);} }

    .hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
    .hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:2rem;
                 font-size:.8125rem; color:var(--muted-2); }
    .hero-trust span{ display:inline-flex; align-items:center; gap:.45rem; }
    .hero-trust i{ color:var(--positive); font-size:.75rem; }

    .hero-metrics{
        display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        border:1px solid var(--line); border-radius:14px;
        background:var(--paper); box-shadow:var(--shadow-sm);
        margin-top:clamp(3rem,6vw,4.5rem);
        overflow:hidden;
    }
    .metric{ padding:1.75rem; }
    .metric + .metric{ border-left:1px solid var(--line); }
    .metric b{
        display:block; font-family:var(--display); font-weight:800;
        font-size:clamp(1.8rem,3.4vw,2.4rem); line-height:1; letter-spacing:-.035em;
        color:var(--ink);
    }
    .metric span{ display:block; margin-top:.55rem; font-size:.75rem; letter-spacing:.1em;
                  text-transform:uppercase; color:var(--muted-2); font-weight:500; }

    /* Hero console visual */
    .console{
        border:1px solid var(--line); border-radius:14px;
        background:var(--paper); box-shadow:var(--shadow-md);
        overflow:hidden;
    }
    .console-bar{
        display:flex; align-items:center; gap:.45rem;
        padding:.9rem 1.15rem; border-bottom:1px solid var(--line);
        background:var(--mist);
    }
    .console-bar i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
    .console-bar span{ margin-left:auto; font-family:var(--display); font-size:.6875rem; font-weight:700;
                       letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
    /* Consignment header inside the console */
    .track-head{
        display:flex; align-items:center; justify-content:space-between; gap:1rem;
        padding:1.15rem; border-bottom:1px solid var(--line);
    }
    .carrier{ display:flex; align-items:center; gap:.8rem; min-width:0; }
    .carrier-glyph{
        width:38px; height:38px; flex:none; border-radius:9px;
        border:1px solid var(--line); background:var(--mist);
        display:grid; place-items:center;
        font-family:var(--display); font-size:.6875rem; font-weight:800;
        letter-spacing:.02em; color:var(--brand);
    }
    .carrier b{ display:block; font-family:var(--display); font-size:.875rem; font-weight:700;
                letter-spacing:-.01em; color:var(--ink); }
    .carrier small{ font-size:.75rem; color:var(--muted-2); }
    .status-chip{
        display:inline-flex; align-items:center; gap:.4rem; flex:none;
        font-family:var(--display); font-size:.6875rem; font-weight:700;
        letter-spacing:.08em; text-transform:uppercase;
        color:var(--brand); background:var(--brand-soft);
        border-radius:100px; padding:.35rem .75rem;
    }
    .status-chip i{ font-size:.4rem; animation:breathe 2.6s ease-in-out infinite; }

    /* Tracking timeline */
    .timeline{ padding:1.5rem 1.15rem .5rem; }
    .tl-step{
        display:grid; grid-template-columns:auto 1fr; gap:.9rem;
        position:relative; padding-bottom:1.5rem;
    }
    .tl-step:last-child{ padding-bottom:.5rem; }
    .tl-step::before{
        content:''; position:absolute; left:8px; top:19px; bottom:-1px;
        width:2px; background:var(--line);
    }
    .tl-step:last-child::before{ display:none; }
    .tl-step.done::before{ background:var(--brand); }
    .tl-dot{
        width:18px; height:18px; border-radius:50%; margin-top:2px;
        border:2px solid var(--line); background:var(--paper);
        display:grid; place-items:center; font-size:.5rem; color:transparent;
        position:relative; z-index:2;
    }
    .tl-step.done .tl-dot{ border-color:var(--brand); background:var(--brand); color:#fff; }
    .tl-step.now .tl-dot{
        border-color:var(--brand); background:var(--paper);
        box-shadow:0 0 0 4px rgba(26,98,200,.14);
        animation:breathe 2.6s ease-in-out infinite;
    }
    .tl-body b{
        display:block; font-family:var(--display); font-size:.875rem; font-weight:700;
        letter-spacing:-.01em; color:var(--ink);
    }
    .tl-step.pending .tl-body b{ color:var(--muted-2); }
    .tl-body small{ display:block; font-size:.75rem; color:var(--muted-2); margin-top:.15rem; }
    .tl-time{ font-size:.6875rem; color:var(--muted-2); white-space:nowrap; }

    /* Console footer strip */
    .console-foot{
        display:flex; align-items:center; justify-content:space-between; gap:1rem;
        padding:1rem 1.15rem; border-top:1px solid var(--line); background:var(--mist);
    }
    .console-foot span{ font-size:.75rem; color:var(--muted-2); letter-spacing:.06em; text-transform:uppercase; }
    .console-foot b{ font-family:var(--display); font-size:.9375rem; font-weight:700;
                     letter-spacing:-.015em; color:var(--ink); }

    /* ---------- Marquee ---------- */
    .marquee{
        background:var(--mist); border-block:1px solid var(--line);
        padding:1.5rem 0; overflow:hidden; position:relative;
        mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    }
    .marquee-track{ display:flex; gap:3.5rem; width:max-content; animation:slide 40s linear infinite; }
    .marquee:hover .marquee-track{ animation-play-state:paused; }
    @keyframes slide{ to{ transform:translateX(-50%); } }
    .marquee-item{
        display:flex; align-items:center; gap:.55rem;
        font-family:var(--display); font-size:.9375rem; font-weight:700;
        letter-spacing:-.015em; color:var(--muted-2); white-space:nowrap;
        transition:color .25s var(--ease);
    }
    .marquee-item:hover{ color:var(--ink); }
    .marquee-item i{ font-size:.45rem; color:var(--brand); opacity:.55; }

    /* ---------- Sections ---------- */
    section{ position:relative; }
    .sec{ padding:var(--sec) 0; }
    .sec-paper{ background:var(--paper); }
    .sec-mist{ background:var(--mist); }
    .sec-band{ background:var(--ink); }         /* only used for the CTA */
    .sec-head{ max-width:760px; margin-bottom:clamp(2.75rem,5.5vw,4rem); }
    .sec-head .lede{ margin-top:1.35rem; }

    /* ---------- Card grid ---------- */
    .grid{ display:grid; gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
    .grid-3{ grid-template-columns:repeat(3,1fr); }
    .grid-2{ grid-template-columns:repeat(2,1fr); }
    .cell{
        border-right:1px solid var(--line); border-bottom:1px solid var(--line);
        padding:clamp(1.75rem,3vw,2.5rem);
        background:transparent;
        transition:background .3s var(--ease), box-shadow .3s var(--ease);
        position:relative;
    }
    .cell::after{
        content:''; position:absolute; left:0; top:-1px; width:0; height:2px;
        background:var(--brand); transition:width .45s var(--ease);
    }
    .cell:hover{ background:var(--paper); box-shadow:var(--shadow-md); z-index:2; }
    .sec-paper .cell:hover{ background:var(--mist); box-shadow:none; }
    .cell:hover::after{ width:100%; }

    .cell-num{
        font-family:var(--display); font-size:.75rem; font-weight:800;
        letter-spacing:.1em; color:var(--brand);
        display:block; margin-bottom:1.25rem;
    }
    .cell-ico{
        width:46px; height:46px; border-radius:11px;
        background:var(--brand-soft); color:var(--brand);
        display:grid; place-items:center; font-size:1.05rem;
        margin-bottom:1.5rem;
        transition:all .3s var(--ease);
    }
    .cell:hover .cell-ico{ background:var(--brand); color:#fff; }
    .cell h4{ margin-bottom:.7rem; }
    .cell p{ font-size:.9375rem; color:var(--muted); line-height:1.72; }

    /* ---------- Split ---------- */
    .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }

    .stat-panel{
        border:1px solid var(--line); border-radius:14px; overflow:hidden;
        background:var(--paper); box-shadow:var(--shadow-sm);
    }
    .stat-line{
        display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
        padding:1.6rem 1.75rem; border-bottom:1px solid var(--line);
    }
    .stat-line:last-child{ border-bottom:none; }
    .stat-line b{ font-family:var(--display); font-weight:800; font-size:clamp(1.75rem,3.6vw,2.5rem);
                  line-height:1; letter-spacing:-.035em; color:var(--ink); }
    .stat-line span{ font-size:.8125rem; color:var(--muted); text-align:right; line-height:1.4; }

    .pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
    .pill{
        border:1px solid var(--line); background:var(--paper); border-radius:100px;
        padding:.5rem 1rem; font-size:.8125rem; color:var(--ink-2); font-weight:500;
        display:inline-flex; align-items:center; gap:.5rem;
    }
    .pill i{ color:var(--positive); font-size:.7rem; }

    /* ---------- Steps ---------- */
    .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    .step{
        border:1px solid var(--line); border-radius:14px; background:var(--paper);
        padding:2rem 1.75rem; position:relative;
        transition:all .3s var(--ease);
    }
    .step:hover{ border-color:var(--brand); box-shadow:var(--shadow-md); transform:translateY(-3px); }
    .step-n{
        display:grid; place-items:center;
        width:38px; height:38px; border-radius:10px;
        background:var(--ink); color:#fff;
        font-family:var(--display); font-size:.875rem; font-weight:800;
        margin-bottom:1.35rem;
        transition:background .3s var(--ease);
    }
    .step:hover .step-n{ background:var(--brand); }

    /* ---------- Feature band ---------- */
    .band-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    .band-item{
        border:1px solid var(--line); border-radius:14px; background:var(--paper);
        padding:2rem 1.75rem;
        transition:all .3s var(--ease);
    }
    .band-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
    .band-item i{ color:var(--brand); font-size:1.15rem; margin-bottom:1.1rem; display:block; }
    .band-item h5{ font-family:var(--display); font-size:1rem; font-weight:700; letter-spacing:-.015em; margin-bottom:.5rem; }
    .band-item p{ font-size:.875rem; color:var(--muted); line-height:1.7; }

    /* ---------- COD ---------- */
    .cod-card{
        border:1px solid var(--line); border-radius:14px; background:var(--paper);
        padding:1.75rem; height:100%;
        display:flex; flex-direction:column; gap:.5rem;
        transition:all .3s var(--ease);
    }
    .cod-card:hover{ border-color:var(--brand); box-shadow:var(--shadow-md); transform:translateY(-3px); }
    .cod-tier{ font-family:var(--display); font-weight:800; font-size:1.85rem; line-height:1;
               letter-spacing:-.035em; color:var(--ink); }
    .cod-fee{ font-family:var(--display); font-size:.75rem; font-weight:700; letter-spacing:.06em;
              text-transform:uppercase; color:var(--brand); margin-bottom:.35rem; }
    .cod-card.free .cod-fee{ color:var(--positive); }

    /* ---------- Testimonials ---------- */
    .quote-stars{ color:var(--orange); font-size:.8rem; letter-spacing:.15em; margin-bottom:1.25rem; display:block; }
    .quote p{ font-family:var(--display); font-size:1.0625rem; font-weight:500; line-height:1.6;
              letter-spacing:-.015em; color:var(--ink-2); margin-bottom:2rem; }
    .quote-by{ display:flex; align-items:center; gap:.85rem; padding-top:1.5rem; border-top:1px solid var(--line); }
    .avatar{
        width:42px; height:42px; border-radius:50%; flex:none;
        background:var(--brand-soft); color:var(--brand);
        display:grid; place-items:center;
        font-family:var(--display); font-size:.8125rem; font-weight:800; letter-spacing:.02em;
    }
    .quote-by b{ display:block; font-family:var(--display); font-size:.875rem; font-weight:700; color:var(--ink); }
    .quote-by small{ font-size:.8125rem; color:var(--muted-2); }

    /* ---------- FAQ ---------- */
    #faq .accordion-item{ background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; }
    #faq .accordion-item:first-child{ border-top:1px solid var(--line); }
    #faq .accordion-button{
        background:transparent; box-shadow:none; border-radius:0;
        padding:1.65rem 2.5rem 1.65rem 0;
        font-family:var(--display); font-size:clamp(1rem,1.6vw,1.0625rem); font-weight:700;
        color:var(--ink); letter-spacing:-.015em; line-height:1.45;
        transition:color .25s var(--ease);
    }
    #faq .accordion-button:hover{ color:var(--brand); }
    #faq .accordion-button:not(.collapsed){ color:var(--brand); background:transparent; }
    #faq .accordion-button::after{
        content:'\f067'; font-family:'Font Awesome 6 Free'; font-weight:900;
        background:none; width:auto; height:auto; font-size:.7rem; color:var(--brand);
        transition:transform .3s var(--ease);
    }
    #faq .accordion-button:not(.collapsed)::after{ content:'\f068'; transform:none; }
    #faq .accordion-button:focus{ box-shadow:none; }
    #faq .accordion-body{ padding:0 clamp(2rem,10vw,6rem) 1.9rem 0; color:var(--muted); font-size:.9375rem; line-height:1.8; }

    /* ---------- Contact ---------- */
    .contact-line{ display:flex; gap:1rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
    .contact-line .ci{
        width:40px; height:40px; flex:none; border-radius:10px;
        background:var(--brand-soft); color:var(--brand);
        display:grid; place-items:center; font-size:.9rem;
    }
    .contact-line b{ display:block; font-family:var(--display); font-size:.6875rem; letter-spacing:.14em;
                     text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-bottom:.3rem; }
    .contact-line p,.contact-line a{ font-size:.9688rem; color:var(--ink-2); }
    .contact-line a:hover{ color:var(--brand); }

    .form-panel{
        border:1px solid var(--line); border-radius:16px; background:var(--paper);
        box-shadow:var(--shadow-md);
        padding:clamp(1.75rem,4vw,2.5rem);
    }
    .field{ margin-bottom:1.35rem; }
    .field label{ display:block; font-family:var(--display); font-size:.75rem; font-weight:700;
                  letter-spacing:.02em; color:var(--ink); margin-bottom:.5rem; }
    .field input,.field select{
        width:100%; background:var(--mist);
        border:1px solid var(--line); border-radius:9px;
        padding:.85rem 1rem; color:var(--ink);
        font-family:var(--sans); font-size:.9688rem;
        transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
        appearance:none; -webkit-appearance:none;
    }
    .field select{
        background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6779' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
        background-repeat:no-repeat; background-position:right 1rem center; background-size:10px;
        color:var(--muted);
    }
    .field input::placeholder{ color:var(--muted-2); }
    .field input:focus,.field select:focus{
        outline:none; background:var(--paper);
        border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,98,200,.14);
    }
    .form-note{ font-size:.75rem; color:var(--muted-2); margin-top:1.1rem; text-align:center; }
    .form-ok{ display:none; padding:.9rem 1rem; border:1px solid rgba(15,123,85,.3); background:rgba(15,123,85,.06);
              border-radius:9px; color:var(--positive); font-size:.875rem; text-align:center; margin-bottom:1.25rem; }

    /* ---------- CTA ---------- */
    .cta{ background:var(--ink); color:#fff; text-align:center; padding:var(--sec) 0; position:relative; overflow:hidden; }
    .cta::before{ content:''; position:absolute; inset:0;
        background:radial-gradient(760px 420px at 50% 0%, rgba(26,98,200,.55), transparent 70%); }
    .cta .wrap{ position:relative; z-index:2; }
    .cta .display{ color:#fff; }
    .cta .display .accent{ color:var(--orange); }
    .cta .lede{ color:rgba(255,255,255,.72); }

    /* ---------- Footer ---------- */
    .foot{ background:var(--mist); border-top:1px solid var(--line); padding:clamp(3.5rem,7vw,5rem) 0 2rem; }
    .foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; }
    .foot h6{ font-family:var(--display); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
              color:var(--ink); font-weight:800; margin-bottom:1.25rem; }
    .foot ul{ list-style:none; display:flex; flex-direction:column; gap:.75rem; }
    .foot a{ font-size:.9063rem; color:var(--muted); transition:color .25s var(--ease); }
    .foot a:hover{ color:var(--brand); }
    .foot p{ font-size:.9063rem; color:var(--muted); }
    .socials{ display:flex; gap:.55rem; margin-top:1.6rem; }
    .socials a{ width:38px; height:38px; border:1px solid var(--line); background:var(--paper);
                border-radius:9px; display:grid; place-items:center; font-size:.85rem; color:var(--muted);
                transition:all .3s var(--ease); }
    .socials a:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
    .foot-bottom{ border-top:1px solid var(--line); padding-top:1.75rem;
                  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
                  font-size:.8438rem; color:var(--muted-2); }
    .foot-bottom nav{ display:flex; flex-wrap:wrap; gap:1.5rem; }

    /* ---------- Reveal ---------- */
    .rv{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
    .rv.in{ opacity:1; transform:none; }
    @media (prefers-reduced-motion:reduce){
        .rv{ opacity:1; transform:none; transition:none; }
        .marquee-track{ animation:none; }
        *{ scroll-behavior:auto !important; }
    }

    /* ---------- Responsive ---------- */
    @media (max-width:991px){
        .split{ grid-template-columns:1fr; }
        .grid-3{ grid-template-columns:repeat(2,1fr); }
        .steps,.band-grid{ grid-template-columns:repeat(2,1fr); }
        .foot-grid{ grid-template-columns:1fr 1fr; }
        #faq .sticky-col{ position:static !important; }
    }
    @media (max-width:640px){
        .grid-3,.grid-2{ grid-template-columns:1fr; }
        .steps,.band-grid{ grid-template-columns:1fr; }
        .metric + .metric{ border-left:none; border-top:1px solid var(--line); }
        .foot-grid{ grid-template-columns:1fr; gap:2rem; }
        .track-head{ flex-direction:column; align-items:flex-start; gap:.85rem; }
        .tl-time{ display:none; }
    }

    /* ============================================================
       SUBPAGE PATTERNS  (used by every page except index.html)
       ============================================================ */

    /* Active nav item */
    .nav-links a.is-active{ color:var(--ink); }
    .nav-links a.is-active::after{ width:100%; }

    /* Page header banner */
    .page-head{
        position:relative; background:var(--mist);
        border-bottom:1px solid var(--line);
        padding:clamp(7.5rem,13vw,10rem) 0 clamp(2.75rem,5vw,4rem);
        overflow:hidden;
    }
    .page-head::before{
        content:''; position:absolute; inset:0; pointer-events:none;
        background:
            radial-gradient(760px 420px at 88% 0%, rgba(26,98,200,.10), transparent 64%),
            radial-gradient(560px 380px at 4% 100%, rgba(255,133,6,.07), transparent 66%);
    }
    .page-head .wrap{ position:relative; z-index:2; }
    .page-head .lede{ margin-top:1.25rem; }

    /* Breadcrumb */
    .crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
             font-size:.8125rem; color:var(--muted-2); margin-bottom:1.25rem; }
    .crumbs a{ color:var(--muted); transition:color .25s var(--ease); }
    .crumbs a:hover{ color:var(--brand); }
    .crumbs i{ font-size:.5rem; opacity:.6; }

    /* Long-form prose (legal + editorial pages) */
    .prose{ max-width:72ch; }
    .prose > * + *{ margin-top:1.15rem; }
    .prose h2{ font-size:clamp(1.3rem,2.4vw,1.6rem); font-weight:800; letter-spacing:-.02em;
               margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
    .prose h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
    .prose h3{ font-size:1.0625rem; font-weight:700; letter-spacing:-.015em; margin-top:2rem; }
    .prose p,.prose li{ color:var(--muted); line-height:1.8; }
    .prose ul,.prose ol{ padding-left:1.25rem; display:flex; flex-direction:column; gap:.6rem; }
    .prose li::marker{ color:var(--brand); }
    .prose strong{ color:var(--ink-2); font-weight:600; }
    .prose a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
    .prose table{ width:100%; border-collapse:collapse; font-size:.9375rem; }
    .prose th,.prose td{ border:1px solid var(--line); padding:.85rem 1rem; text-align:left; vertical-align:top; }
    .prose th{ background:var(--mist); font-family:var(--display); font-weight:700;
               font-size:.8125rem; letter-spacing:.02em; color:var(--ink); }
    .prose td{ color:var(--muted); }
    .table-scroll{ overflow-x:auto; }

    /* Table of contents rail */
    .toc{
        border:1px solid var(--line); border-radius:14px; background:var(--paper);
        padding:1.5rem; box-shadow:var(--shadow-sm);
    }
    .toc h6{ font-family:var(--display); font-size:.6875rem; letter-spacing:.14em;
             text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-bottom:1rem; }
    .toc ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
    .toc a{ font-size:.875rem; color:var(--muted); line-height:1.45; transition:color .25s var(--ease); }
    .toc a:hover{ color:var(--brand); }

    /* Doc meta strip */
    .doc-meta{
        display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center;
        border:1px solid var(--line); border-radius:12px; background:var(--paper);
        padding:1rem 1.25rem; font-size:.8125rem; color:var(--muted); margin-bottom:2.5rem;
    }
    .doc-meta b{ font-family:var(--display); font-size:.6875rem; letter-spacing:.12em;
                 text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-right:.4rem; }

    /* Callout */
    .callout{
        border:1px solid var(--line); border-left:3px solid var(--brand);
        border-radius:0 12px 12px 0; background:var(--brand-soft);
        padding:1.25rem 1.5rem;
    }
    .callout p{ color:var(--ink-2); font-size:.9375rem; margin:0; }
    .callout.warn{ border-left-color:var(--orange); background:var(--orange-soft); }

    /* Two-column doc layout */
    .doc-layout{ display:grid; grid-template-columns:250px 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
    .doc-layout .toc{ position:sticky; top:110px; }
    @media (max-width:991px){
        .doc-layout{ grid-template-columns:1fr; }
        .doc-layout .toc{ position:static; }
    }

    /* ============================================================
       FORM STATES  (server-rendered validation feedback)
       ============================================================ */
    .form-error{
        border:1px solid rgba(200,45,45,.28); background:rgba(200,45,45,.06);
        border-radius:9px; padding:.9rem 1.1rem; margin-bottom:1.25rem;
        color:#A32020; font-size:.875rem;
    }
    .form-error b{ font-family:var(--display); font-weight:700; display:block; margin-bottom:.35rem; }
    .form-error ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.25rem; }
    .form-error li::marker{ color:#A32020; }

    .field input.has-error,
    .field select.has-error{ border-color:rgba(200,45,45,.5); background:rgba(200,45,45,.04); }
    .field input.has-error:focus,
    .field select.has-error:focus{ box-shadow:0 0 0 3px rgba(200,45,45,.12); }

    /* Honeypot: kept in the DOM and focusable only to bots */
    .hp-field{
        position:absolute !important; left:-9999px !important;
        width:1px; height:1px; overflow:hidden;
    }