/* ============================================================================
   RDesk — public site (landing, /agent, /privacy, /terms, /aup)
   Rebuilt 2026-09-22 to the approved mock-up
   (app.nebulassh.com/repo/temp/20260921_203856_3d1b6d1a.png).

   One stylesheet for every public page so they cannot drift apart — the old
   pages each carried their own inline <style> and had already diverged.

   ⚠️ The LOGO is deliberately unchanged: /img/logo.png, the original #1982BB
   mark. The mock-up drew a brighter one; the user's instruction was to keep
   ours. Everything else follows the mock-up's palette, which is a brighter
   azure family than the old #1982BB-everywhere scheme.

   ⚠️ Never name a class ad-*  — EasyList hides those and the block vanishes in
   any ad-blocking browser (bitten before on another project).
   ============================================================================ */

:root{
    /* --- mock-up palette, sampled from the PNG --- */
    --navy:#091326;          /* hero / dark bands */
    --navy-nav:#0C172B;      /* nav bar            */
    --navy-cta:#0E1B2D;      /* closing CTA band   */
    --navy-foot:#07121F;     /* footer             */

    --band:#F8FBFE;          /* light section      */
    --band-alt:#E4F3FE;      /* "how it works"     */
    --surface:#FFFFFF;
    --hairline:#E3EBF3;

    --ink:#0B1A2E;
    --muted:#5A6B80;
    --faint:#8797AA;

    --primary:#0B79F0;
    --primary-press:#0A67CE;
    --accent:#3DA0FF;        /* the blue half of a headline */

    --ink-dark:#FFFFFF;      /* text on the dark bands */
    --muted-dark:#A7BACE;
    --faint-dark:#7B90A6;
    --hairline-dark:rgba(255,255,255,.10);

    --brand:#1982BB;         /* the logo's own blue — keep */

    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --display:'Space Grotesk','Inter',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',monospace;

    --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
    --shadow:0 6px 24px rgba(11,26,46,.06);
    --shadow-lg:0 18px 50px rgba(11,26,46,.14);
}

/* Dark mode. The hero, CTA and footer are already dark, so only the light
   bands and the cards need a second set of values. */
:root[data-theme="dark"]{
    --band:#0B1626;
    --band-alt:#0E1D30;
    --surface:#111E31;
    --hairline:rgba(255,255,255,.09);
    --ink:#EDF3FA;
    --muted:#9FB2C6;
    --faint:#7C8FA4;
    --shadow:0 6px 24px rgba(0,0,0,.3);
    --shadow-lg:0 18px 50px rgba(0,0,0,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--band);color:var(--ink);line-height:1.55;
     overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:#BFDDFF;color:#0B1A2E}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* ---------------------------------------------------------------- nav ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(12,23,43,.92);
     backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--hairline-dark)}
.nav-in{max-width:1120px;margin:0 auto;padding:0 28px;height:62px;
        display:flex;align-items:center;gap:22px}
/* ⚠️ The logo is the original /img/logo.png. Do not swap it for a drawn mark. */
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
       font-weight:600;font-size:1.1rem;color:#fff;letter-spacing:-.01em}
.brand img{width:28px;height:28px;display:block;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-links a{font-size:.9rem;color:var(--muted-dark);transition:color .15s}
.nav-links a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
           border:1px solid var(--hairline-dark);background:transparent;color:var(--muted-dark);
           cursor:pointer;transition:background .15s,color .15s}
.theme-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.theme-btn svg{width:17px;height:17px}
.nav-burger{display:none;width:36px;height:36px;border:0;background:transparent;color:#fff;cursor:pointer}
.nav-burger svg{width:22px;height:22px}

/* ------------------------------------------------------------- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     padding:12px 22px;border-radius:var(--r-sm);font-size:.93rem;font-weight:600;
     border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;
     font-family:var(--sans);white-space:nowrap}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-press)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-on-dark:hover{background:rgba(255,255,255,.08)}
.btn-sm{padding:9px 16px;font-size:.86rem}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;background:var(--navy);color:var(--ink-dark);overflow:hidden;
      padding:78px 0 92px}
/* The mock-up's blue "wave" photograph, rebuilt as gradients so there is no
   extra asset to ship, scale or keep in sync. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(760px 520px at 78% 34%, rgba(23,120,240,.42), transparent 62%),
      radial-gradient(520px 420px at 96% 76%, rgba(10,80,190,.35), transparent 66%),
      radial-gradient(420px 320px at 60% 6%,  rgba(60,160,255,.16), transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}

.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;
         text-transform:uppercase;color:var(--accent);display:block}
.hero h1{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.08;
         font-weight:700;letter-spacing:-.025em;margin:16px 0 0}
.hero h1 .b{color:var(--accent);display:block}
.hero .lede{color:var(--muted-dark);font-size:1.04rem;margin:18px 0 0;max-width:34em}

.pills{display:flex;flex-wrap:wrap;gap:10px 18px;margin:26px 0 0}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted-dark)}
.pill i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.pill i svg{width:14px;height:14px}
.pill-green i{background:rgba(34,197,94,.16);color:#4ADE80}
.pill-blue  i{background:rgba(59,130,246,.18);color:#60A5FA}
.pill-cyan  i{background:rgba(14,165,233,.18);color:#38BDF8}
.pill-amber i{background:rgba(245,158,11,.18);color:#FBBF24}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.hero-note{color:var(--faint-dark);font-size:.84rem;margin:16px 0 0}

/* the little hand-written call-outs from the mock-up */
.scribble{position:absolute;font-family:'Segoe Script','Bradley Hand','Comic Sans MS',cursive;
          font-size:.84rem;color:rgba(255,255,255,.72);line-height:1.35;z-index:2;pointer-events:none}
.scribble-1{top:26px;right:16px;text-align:right}
.scribble-2{bottom:20px;right:74px;text-align:right}
.scribble svg{display:block;width:44px;height:26px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.4}
.scribble-1 svg{margin:2px 10px 0 auto;transform:scaleX(-1)}
.scribble-2 svg{margin:0 auto 0 -38px;transform:rotate(-6deg)}

/* --- the mock session window in the hero --- */
.shot{position:relative;background:#0F1B2D;border:1px solid rgba(255,255,255,.12);
      border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#132238;
          border-bottom:1px solid rgba(255,255,255,.08)}
.shot-bar img{width:17px;height:17px}
.shot-bar b{font-size:.82rem;font-weight:600;color:#E7EFF9}
.shot-bar .sp{margin-left:auto;display:flex;gap:12px;color:#7B90A6;font-size:.8rem}
.shot-row{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:.82rem;color:#C7D6E6}
.shot-row .live{width:9px;height:9px;border-radius:50%;background:#22C55E;flex:none;
                box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.shot-end{margin-left:auto;background:#EF4444;color:#fff;font-size:.72rem;font-weight:700;
          padding:4px 13px;border-radius:6px}
.shot-sec{padding:10px 14px;border-top:1px solid rgba(255,255,255,.07)}
.shot-sec .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#6F86A0}
.shot-sec .v{font-size:.82rem;color:#DDE8F4;margin-top:4px;display:flex;align-items:center;gap:7px}
.shot-tools{display:flex;gap:8px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.07)}
.shot-tools span{flex:1;height:31px;border-radius:8px;background:#18293F;display:grid;place-items:center;color:#8DA5BE}
.shot-tools svg{width:15px;height:15px}
.shot-stats{padding:4px 14px 10px;border-top:1px solid rgba(255,255,255,.07)}
.shot-stats div{display:flex;justify-content:space-between;font-size:.76rem;color:#93A8C0;padding:4px 0}
.shot-stats b{color:#DDE8F4;font-weight:600}
.shot-foot{display:flex;align-items:center;gap:7px;padding:9px 14px;background:rgba(34,197,94,.10);
           border-top:1px solid rgba(34,197,94,.22);font-size:.76rem;color:#6EE7A0}
.shot-foot svg{width:13px;height:13px}

/* --- guest Display ID box (kept: this is the landing page's live feature) --- */
.connect{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
         border-radius:var(--r);padding:16px;margin:26px 0 0;max-width:430px}
.connect-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.connect-top .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
                  text-transform:uppercase;color:var(--faint-dark)}
.guest-badge{font-size:.68rem;font-weight:600;color:#7DD3FC;background:rgba(56,189,248,.14);
             border:1px solid rgba(56,189,248,.28);padding:3px 9px;border-radius:999px}
.connect-body{display:flex;gap:9px}
.cid{flex:1;min-width:0;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);
     border-radius:var(--r-sm);padding:12px 14px;color:#fff;font-family:var(--mono);
     font-size:1.02rem;letter-spacing:.04em}
.cid::placeholder{color:#5D7288}
.cid:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,160,255,.2)}
.go{background:var(--primary);color:#fff;border:0;border-radius:var(--r-sm);padding:12px 20px;
    font-weight:600;font-size:.9rem;cursor:pointer;font-family:var(--sans)}
.go:hover{background:var(--primary-press)}
.go:disabled{opacity:.45;cursor:not-allowed}
.connect-note{font-size:.78rem;color:var(--faint-dark);margin-top:10px;line-height:1.5}
.connect-err{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.34);color:#FCA5A5;
             border-radius:var(--r-sm);padding:9px 12px;font-size:.82rem;margin-top:10px}

/* -------------------------------------------------------------- bands ---- */
.band{padding:84px 0;background:var(--band)}
.band-alt{background:var(--band-alt)}
.band-white{background:var(--surface)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 46px}
.sec-head .eyebrow{color:var(--primary)}
.sec-head h2{font-family:var(--display);font-size:clamp(1.65rem,3vw,2.15rem);font-weight:700;
             letter-spacing:-.022em;margin:12px 0 0;line-height:1.2}
.sec-head h2 .b{color:var(--primary)}
.sec-head p{color:var(--muted);margin:14px 0 0;font-size:1rem}
.sec-head.left{text-align:left;margin-left:0}

/* --- feature cards (3 x 2) --- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
      padding:26px 24px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.chip{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:17px}
.chip svg{width:21px;height:21px}
.chip-blue{background:#E3EFFE;color:#1D74E8}
.chip-green{background:#DFF6E7;color:#16A34A}
.chip-sky{background:#DDF1FD;color:#0284C7}
.chip-violet{background:#E9E6FE;color:#6D4DF2}
.chip-teal{background:#D9F3EF;color:#0D9488}
.chip-amber{background:#FDF0DC;color:#D97706}
.chip-rose{background:#FDE5EC;color:#DB2777}
:root[data-theme="dark"] .chip{filter:brightness(.55) saturate(1.3)}
.card h3{font-family:var(--display);font-size:1.03rem;font-weight:600;margin:0 0 8px}
.card p{color:var(--muted);font-size:.9rem;line-height:1.6}

/* --- how it works --- */
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:start}
.step{display:flex;gap:16px}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;flex:none;
         display:grid;place-items:center;font-weight:700;font-size:1rem;font-family:var(--display)}
.step .sv{margin:2px 0 0}
.step .si{color:var(--primary);margin-bottom:7px;display:block}
.step .si svg{width:19px;height:19px}
.step h3{font-family:var(--display);font-size:1rem;font-weight:600;margin:0 0 6px}
.step p{color:var(--muted);font-size:.88rem;line-height:1.55}
.step-arrow{color:var(--primary);opacity:.5;align-self:center;margin-top:8px}
.step-arrow svg{width:26px;height:16px}

/* --- use cases --- */
.use-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:48px;align-items:center}
.use-list{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.use{display:flex;gap:15px;align-items:flex-start}
.use .chip{width:38px;height:38px;border-radius:11px;margin:0;flex:none}
.use .chip svg{width:18px;height:18px}
.use h3{font-family:var(--display);font-size:.97rem;font-weight:600;margin:0 0 3px}
.use p{color:var(--muted);font-size:.87rem}
.devices{position:relative;min-height:260px}
.laptop{background:#0F1B2D;border:1px solid var(--hairline);border-radius:12px 12px 4px 4px;
        padding:9px;box-shadow:var(--shadow-lg)}
.laptop-screen{border-radius:7px;overflow:hidden;background:#0B1626}
.laptop-base{height:9px;background:#C9D6E4;border-radius:0 0 11px 11px;margin:0 -22px}
:root[data-theme="dark"] .laptop-base{background:#31465E}
.phone{position:absolute;right:-6px;bottom:-18px;width:108px;background:#0F1B2D;
       border:1px solid rgba(255,255,255,.14);border-radius:15px;padding:7px;box-shadow:var(--shadow-lg)}
.oslist{display:flex;justify-content:center;gap:34px;margin-top:34px;color:var(--muted);font-size:.87rem}
.oslist span{display:inline-flex;align-items:center;gap:8px}
.oslist svg{width:17px;height:17px}

/* --- pricing --- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:22px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
      padding:28px 25px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:0 0 4px}
.plan .price{margin:8px 0 18px}
.plan .price .n{font-family:var(--display);font-size:2.05rem;font-weight:700;letter-spacing:-.02em}
.plan .price .per{color:var(--muted);font-size:.88rem}
.plan .price .talk{font-family:var(--display);font-size:1.45rem;font-weight:700;color:var(--primary)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 22px;flex:1;
         font-size:.88rem;color:var(--muted)}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li svg{width:15px;height:15px;color:#16A34A;flex:none;margin-top:3px}
.plan-dark{background:linear-gradient(150deg,#0F1B2D,#14273F);border-color:rgba(255,255,255,.12);color:#fff}
.plan-dark ul{color:#AFC3D7}
.plan-dark .price .talk{color:var(--accent)}

/* --- generic prose (privacy / terms / aup / android notes) --- */
.prose{max-width:820px;margin:0 auto;background:var(--surface);border:1px solid var(--hairline);
       border-radius:var(--r-lg);padding:44px 46px;box-shadow:var(--shadow)}
.prose h1{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.2rem);font-weight:700;
          letter-spacing:-.022em;margin:0 0 10px}
.prose h2{font-family:var(--display);font-size:1.15rem;font-weight:600;margin:34px 0 10px}
.prose h3{font-family:var(--display);font-size:1rem;font-weight:600;margin:22px 0 8px}
.prose p,.prose li{color:var(--muted);font-size:.94rem;line-height:1.72}
.prose ul,.prose ol{margin:10px 0 10px 22px;display:flex;flex-direction:column;gap:7px}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.prose .updated{color:var(--faint);font-size:.84rem;margin-bottom:26px}
.prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--hairline);padding:9px 12px;text-align:left;color:var(--muted)}
.prose th{background:var(--band);color:var(--ink);font-weight:600}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--band);padding:2px 6px;border-radius:5px}

/* --- forms --- */
.form-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
           padding:26px;box-shadow:var(--shadow);max-width:640px;margin:0 auto}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px}
.fld input,.fld textarea{width:100%;padding:11px 13px;border:1px solid var(--hairline);
    border-radius:var(--r-sm);font-size:.92rem;font-family:var(--sans);background:var(--band);color:var(--ink)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(11,121,240,.14)}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.note-ok{background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.3);color:#15803D;
         padding:12px 16px;border-radius:var(--r-sm);margin-bottom:16px;font-size:.9rem}
.note-err{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.3);color:#B91C1C;
          padding:12px 16px;border-radius:var(--r-sm);margin-bottom:16px;font-size:.9rem}

/* --- closing CTA --- */
.cta{background:var(--navy-cta);color:#fff;padding:78px 0;text-align:center}
.cta .eyebrow{color:var(--accent)}
.cta h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:700;
        letter-spacing:-.022em;margin:12px 0 0}
.cta p{color:var(--muted-dark);margin:13px 0 0}
.cta .row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* -------------------------------------------------------------- footer --- */
.foot{background:var(--navy-foot);color:var(--muted-dark);padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:40px}
.foot .brand{margin-bottom:14px}
.foot-about{font-size:.86rem;color:var(--faint-dark);line-height:1.65;max-width:26em}
.foot h4{font-family:var(--display);font-size:.93rem;font-weight:600;color:#fff;margin:0 0 15px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot ul a{font-size:.87rem;color:var(--muted-dark);transition:color .15s}
.foot ul a:hover{color:#fff}
.sub{display:flex;gap:9px;margin-top:13px}
.sub input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--hairline-dark);
           border-radius:var(--r-sm);padding:10px 13px;color:#fff;font-size:.86rem;font-family:var(--sans)}
.sub input::placeholder{color:#63788E}
.sub input:focus{outline:none;border-color:var(--accent)}
.sub button{background:var(--primary);border:0;border-radius:var(--r-sm);width:42px;flex:none;
            display:grid;place-items:center;color:#fff;cursor:pointer}
.sub button:hover{background:var(--primary-press)}
.sub button svg{width:16px;height:16px}
.foot-bottom{margin-top:44px;border-top:1px solid var(--hairline-dark);padding:20px 0;
             display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
             font-size:.82rem;color:var(--faint-dark)}
.foot-bottom .heart{color:#EF4444}

/* ------------------------------------------------------ rise animation --- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}

/* ------------------------------------------------------------ responsive - */
@media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:42px}
    .use-grid{grid-template-columns:1fr;gap:38px}
    .cards{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:1fr;gap:26px}
    .step-arrow{display:none}
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
    .scribble{display:none}
}
@media (max-width:680px){
    .nav-links{display:none}
    .nav-links.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;
        align-items:flex-start;gap:0;background:var(--navy-nav);padding:8px 28px 18px;
        border-bottom:1px solid var(--hairline-dark)}
    .nav-links.open a{padding:11px 0;width:100%}
    .nav-burger{display:grid;place-items:center;margin-left:auto}
    .nav-right .btn{display:none}
    .cards{grid-template-columns:1fr}
    .fld-2{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .band{padding:60px 0}
    .hero{padding:52px 0 64px}
    .prose{padding:30px 22px}
    .connect-body{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
    .rise{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
    .card:hover{transform:none}
}

/* --- classes the legal pages' existing markup uses. Their CONTENT is untouched
       (Instruction/read.md §7: /terms §05 and /aup §02 mirror the agent's consent
       guarantees and must stay in step with it), so the stylesheet adapts to the
       markup rather than the markup being rewritten to suit the stylesheet. ---- */
.prose header.page{margin:0 0 4px}
.prose header.page .eyebrow{color:var(--primary);margin-bottom:8px}
.prose .lead{font-size:1.03rem;color:var(--ink);line-height:1.7;margin-bottom:20px}
.prose article > p:first-child{margin-top:0}
.prose section{margin-top:26px}
.prose .box,.prose blockquote{background:var(--band);border:1px solid var(--hairline);
    border-left:3px solid var(--primary);border-radius:var(--r-sm);padding:14px 18px;margin:16px 0}
.prose dl{margin:10px 0}
.prose dt{font-weight:600;color:var(--ink);margin-top:12px}
.prose dd{color:var(--muted);margin-left:0}

/* ---------------------------------------------------------- /agent page ---
   Scoped under .agent-page because that view's markup uses very generic class
   names (.card .grid .body .head .lead .note) that would otherwise collide
   with the landing page's in this shared stylesheet. The markup keeps its
   class names; only the download LINKS matter and they are untouched. */
.agent-page{max-width:860px;margin:0 auto}
.agent-page .head{text-align:center;margin-bottom:38px}
.agent-page .head .eyebrow{color:var(--primary)}
.agent-page .head h1{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.3rem);
    font-weight:700;letter-spacing:-.022em;margin:12px 0 0}
.agent-page .head p{color:var(--muted);margin:14px auto 0;max-width:60ch;font-size:.97rem}

.agent-page .lead,.agent-page .card{display:flex;align-items:center;gap:18px;background:var(--surface);
    border:1px solid var(--hairline);border-radius:var(--r-lg);padding:22px 24px;
    box-shadow:var(--shadow);margin-bottom:16px}
.agent-page .lead{border-color:rgba(11,121,240,.35);box-shadow:0 8px 30px rgba(11,121,240,.12)}
.agent-page .ico{width:48px;height:48px;border-radius:13px;background:#E3EFFE;color:#1D74E8;
    display:grid;place-items:center;flex:none}
.agent-page .ico svg{width:22px;height:22px;fill:currentColor}
.agent-page .body{flex:1;min-width:0}
.agent-page .row1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.agent-page h3{font-family:var(--display);font-size:1.05rem;font-weight:600;margin:0}
.agent-page .tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:#fff;background:var(--primary);padding:3px 9px;border-radius:999px}
.agent-page .os{color:var(--muted);font-size:.86rem;margin-top:4px}
.agent-page .ver{color:var(--faint);font-size:.8rem;margin-top:3px}
.agent-page .ver b{color:var(--ink)}
.agent-page .dl{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
    padding:11px 20px;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;
    border:1px solid transparent;white-space:nowrap}
.agent-page .dl svg{width:15px;height:15px;fill:currentColor}
.agent-page .dl-primary{background:var(--primary);color:#fff}
.agent-page .dl-primary:hover{background:var(--primary-press)}
.agent-page .dl-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.agent-page .dl-ghost:hover{border-color:var(--primary);color:var(--primary)}
.agent-page .grid{display:block}
.agent-page .strip{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;
    margin:30px 0 26px;color:var(--muted);font-size:.87rem}
.agent-page .feat{display:inline-flex;align-items:center;gap:8px}
.agent-page .feat svg{width:15px;height:15px;fill:#16A34A;flex:none}
.agent-page .note{display:flex;gap:12px;background:var(--band-alt);border:1px solid var(--hairline);
    border-radius:var(--r);padding:15px 18px;color:var(--muted);font-size:.87rem;line-height:1.62}
.agent-page .note svg{width:17px;height:17px;fill:var(--primary);flex:none;margin-top:2px}
.agent-page .note b{color:var(--ink)}
@media (max-width:680px){
    .agent-page .lead,.agent-page .card{flex-direction:column;align-items:flex-start;gap:14px}
    .agent-page .dl{width:100%}
}
/* the "01", "02" … markers the legal pages put inside their <h2> */
.prose h2 .n{font-family:var(--mono);font-size:.78rem;color:var(--primary);
    margin-right:11px;font-weight:700;vertical-align:.12em}

/* callouts + table of contents, ported from the legal pages' old inline styles so
   their markup keeps working untouched (read.md §7 — that copy is load-bearing) */
.prose .callout{background:var(--band);border:1px solid var(--hairline);
    border-left:3px solid var(--primary);border-radius:var(--r);padding:18px 20px;
    margin:22px 0;color:var(--muted);font-size:.93rem;line-height:1.7}
.prose .callout b{color:var(--ink)}
.prose .callout.warn{border-left-color:#DC2626}
.prose .callout.ok{border-left-color:#16A34A}
.prose .toc{background:var(--band);border:1px solid var(--hairline);border-radius:var(--r);
    padding:16px 20px;margin:0 0 34px}
.prose .toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;display:block}
.prose .toc li{margin:0 0 5px;font-size:.89rem}
@media (max-width:640px){ .prose .toc ol{columns:1} }

/* Public marketing refresh: shared rhythm, page introductions and restrained motion. */
:root { --r:18px; --r-lg:22px; --shadow:0 12px 36px rgba(11,26,46,.055); }
.nav-in { height:76px; max-width:1240px; }
.wrap { max-width:1200px; }
.nav-links { gap:22px; }
.nav-links a { position:relative; padding:8px 0; }
.nav-links a::after { content:""; position:absolute; height:2px; bottom:0; left:0; right:0; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after { transform:scaleX(1); }
.nav-links a[aria-current="page"] { color:#fff; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.skip-link { position:fixed; top:8px; left:16px; z-index:100; padding:12px 20px; color:#fff; background:#075dbb; border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.hero { padding:92px 0 96px; }
.hero::before { animation:ambient-drift 12s ease-in-out 2 alternate; }
.hero::after,.page-hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.14; background-image:linear-gradient(rgba(133,179,231,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(133,179,231,.24) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to right,transparent,#000); }
.hero-grid { grid-template-columns:1.12fr .88fr; gap:70px; }
.hero h1 { font-size:clamp(2.75rem,4.7vw,4rem); letter-spacing:-.05em; line-height:1.06; }
.hero h1 .b { background:linear-gradient(110deg,#82caff,#3b99ff 65%,#a9b6ff); color:#76bcff; background-clip:text; -webkit-text-fill-color:transparent; }
.hero .lede { max-width:32em; line-height:1.8; }
.hero .connect { margin-top:28px; box-shadow:0 15px 40px rgba(0,0,0,.12); }
.session-scene { padding:32px 0; }
.session-scene::before { content:""; position:absolute; inset:10% -10%; border:1px solid rgba(93,166,247,.18); border-radius:50%; transform:rotate(-24deg); pointer-events:none; }
.session-scene .shot { transform:perspective(1100px) rotateY(-7deg) rotateX(3deg); box-shadow:0 35px 80px rgba(0,0,0,.4),0 0 60px rgba(27,121,241,.12); animation:session-arrive 1.1s cubic-bezier(.2,.7,.3,1) both; }
.session-scene .shot-bar { padding:18px; }
.session-scene .shot-row,.session-scene .shot-sec,.session-scene .shot-tools { padding:16px 18px; }
.session-scene .shot-stats { padding:10px 18px; }
.session-scene .shot-foot { padding:14px 18px; }
.session-caption { display:flex; gap:10px; align-items:center; color:#c3d9f0; font-size:.78rem; margin:0 0 24px 12px; }
.status-dot { width:7px; height:7px; flex:none; background:#68dab0; border-radius:50%; box-shadow:0 0 0 5px #68dab018; }
.session-label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:24px; font-size:.67rem; color:#9eb3cd; }
.session-label span { color:#77b9ff; }
.trust-strip { border-bottom:1px solid var(--hairline); background:var(--surface); }
.trust-strip .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:24px; padding-bottom:24px; flex-wrap:wrap; }
.trust-strip span { font-size:.75rem; color:var(--muted); }
.trust-strip b { font-size:.8rem; font-weight:500; }
.trust-strip b::before { content:"✓"; color:var(--primary); margin-right:10px; }
.band { padding:88px 0; }
.sec-head h2 { letter-spacing:-.035em; }
.home-overview .sec-head { max-width:620px; }
.journey-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.journey-card { display:flex; flex-direction:column; min-height:340px; padding:32px; border:1px solid var(--hairline); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); transition:transform .3s,box-shadow .3s,border-color .3s; }
.journey-number { font-family:var(--mono); letter-spacing:.08em; font-size:.65rem; color:var(--primary); }
.journey-card h3 { font-family:var(--display); font-size:1.5rem; line-height:1.3; letter-spacing:-.03em; margin:28px 0 14px; }
.journey-card p { font-size:.9rem; line-height:1.8; color:var(--muted); margin:0 0 28px; }
.text-link { display:flex; align-items:center; justify-content:space-between; margin-top:auto; color:var(--primary); font-weight:600; font-size:.85rem; }
.text-link span { font-size:1.4rem; transition:transform .25s; }
.journey-card:hover,.card:hover,.plan:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.journey-card:hover .text-link span { transform:translate(3px,-3px); }
.card,.plan { transition:transform .3s,box-shadow .3s,border-color .3s; }
.btn:hover { transform:translateY(-2px); }
.page-hero { position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:72px 0 78px; }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 90% 10%,#1568bd55,transparent 65%); }
.back-link { color:#9fb8d4; font-size:.8rem; }
.page-hero h1 { max-width:900px; font-family:var(--display); font-size:clamp(2.3rem,5vw,3.9rem); letter-spacing:-.045em; line-height:1.12; margin:28px 0 20px; }
.page-hero p { max-width:650px; color:var(--muted-dark); font-size:1.05rem; line-height:1.8; }
.page-hero + .band { padding-top:64px; }
.form-card { box-shadow:var(--shadow-lg); padding:34px; }
.pricing-empty { text-align:center; color:var(--muted); margin-bottom:28px; }
.pricing-empty a,.contact-feedback a { color:var(--primary); text-decoration:underline; }
.contact-feedback { padding-top:24px; padding-bottom:24px; }
.use-grid > * { min-width:0; }
.oslist { flex-wrap:wrap; gap:18px; }
/* Content remains readable if scripts are blocked or unavailable. */
.rise { opacity:1; transform:none; }
.motion-ready .rise:not(.in) { opacity:0; transform:translateY(22px); }
.motion-ready .rise { transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1); }
@keyframes ambient-drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-3%,2%,0) scale(1.08); } }
@keyframes session-arrive { from { opacity:0; transform:perspective(1100px) translateY(28px) rotateY(-12deg); } to { opacity:1; transform:perspective(1100px) rotateY(-7deg) rotateX(3deg); } }
@media(min-width:981px) { .journey-card:nth-child(2) { transition-delay:.08s; } .journey-card:nth-child(3) { transition-delay:.16s; } }
@media(max-width:1050px) { .nav-links { gap:14px; } .nav-right .btn { display:none; } .hero-grid { gap:35px; } }
@media(max-width:980px) { .hero-grid { grid-template-columns:1fr; } .session-scene { max-width:540px; width:100%; margin:auto; } .journey-card { padding:24px; } }
@media(max-width:700px) {
    .nav-right { margin-left:auto; }
    .nav-in { height:68px; } .nav-links.open { top:68px; }
    .hero { padding:56px 0; } .hero h1 { font-size:clamp(2.5rem,9vw,3.5rem); }
    .journey-grid { grid-template-columns:1fr; } .journey-card { min-height:280px; }
    .band { padding:60px 0; } .trust-strip .wrap { gap:16px 22px; } .trust-strip span { flex-basis:100%; }
    .page-hero { padding:48px 0; } .form-card { padding:24px; }
    .session-scene .shot { transform:none; } .session-caption { margin-left:0; font-size:.72rem; }
    .session-scene::before { inset:10% 0; } .cta { padding:60px 0; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
    .motion-ready .rise:not(.in) { opacity:1; transform:none; }
    .session-scene .shot,.journey-card:hover,.card:hover,.plan:hover,.btn:hover { transform:none; }
}