/* Endelir marketing site — shared stylesheet.
 *
 * Lifted out of index.html on 23 August 2026, unchanged apart from making the
 * @font-face URLs absolute, because this file is served from /css/ and the
 * homepage was serving them from /. Extracted so that the use-case, industry
 * and integration pages inherit the identity instead of copying it: thirty-odd
 * pages cannot each carry their own copy of the tokens and stay in step.
 *
 * The tokens are the Steel Rail values from public/dist/css/endelir.css.
 * Change one there, change it here. tests/Feature/ThemeContrastTest.php
 * measures the application's stylesheet, not this one.
 */

/* Iris rebrand (27 Aug 2026): the industrial Barlow Condensed is retired.
   Fonts now come from Google Fonts, linked in every page <head>
   (template.py for generated pages, index.html for the homepage):
   Bricolage Grotesque (display, friendly) + Plus Jakarta Sans (body).
   The old self-hosted Barlow woff2 files were deleted on 10 Sep 2026. */

  /* ── Design tokens ───────────────────────────────────────────────────────
     Lifted from the Endelir design system so this page is self-contained.
     They are the same values public/dist/css/endelir.css carries; if you
     change one there, change it here. */
  /* ── Iris tokens (27 Aug 2026 rebrand) ──────────────────────────────────
     Soft pastels, green-anchored, on a cool off-white ground (never pure
     white). Teal is the accent; violet is the second hue; the two meet in
     --grad-brand, the logo/button gradient. */
  :root {
    --color-bg:#eceef6; --color-surface:#f8f9fe; --color-text:#1a2130;
    --color-divider:color-mix(in srgb, #1a2130 12%, transparent);
    --color-neutral-100:#f8f9fe; --color-neutral-200:#e7e9f3; --color-neutral-300:#d7dbe9;
    --color-neutral-400:#b9bece; --color-neutral-500:#9aa0b3; --color-neutral-600:#7a8196;
    --color-neutral-700:#586074; --color-neutral-800:#3f4658; --color-neutral-900:#252c3c;
    /* accent = Iris teal anchor (was steel blue) */
    --color-accent:#0f9e90;
    --color-accent-100:#e4f5f1; --color-accent-200:#c6ece5; --color-accent-300:#93dccf;
    --color-accent-400:#4cc3b0; --color-accent-500:#1cae9c; --color-accent-600:#12a394;
    --color-accent-700:#0f9e90; --color-accent-800:#0b7d72; --color-accent-900:#0a5c54;
    /* the second Iris hue + supporting pastels */
    --color-violet:#7c6cf0; --color-violet-600:#6a5ae0;
    --color-peri:#c9d2ff; --color-aqua:#c6ecf1; --color-mint:#cdf1de;
    /* signature gradients: the mark + primary buttons, and the soft hero wash */
    --grad-brand:linear-gradient(118deg,#8b7cf6 0%,#4a9f97 55%,#0e9a8c 100%);
    /* The same violet-to-teal, deep enough to carry white text (25 Sep 2026).
       --grad-brand under white text measured 2.0-3.1:1 on buttons and the hero;
       this measures >=6.0:1 for white, >=4.68:1 for the hero's 88% off-white,
       sampled at 101 points along the ramp. --grad-brand stays for the logo mark. */
    --grad-deep:linear-gradient(118deg,#5a45d4 0%,#2a6b7e 55%,#0b6a60 100%);
    --grad-wash:linear-gradient(125deg,#e6e1ff 0%,#d7deff 26%,#c9edf1 62%,#d4f3e2 100%);
    --font-heading:"Bricolage Grotesque", system-ui, sans-serif;
    --font-body:"Plus Jakarta Sans", system-ui, sans-serif;
    /* depth — soft, violet-tinted shadows so cards lift off the ground */
    --shadow-sm:0 1px 2px rgba(60,50,120,.10);
    --shadow-md:0 6px 20px -8px rgba(60,50,120,.24);
    --shadow-lg:0 26px 50px -18px rgba(60,50,120,.32);
    /* status chips — Iris pastels */
    --e-green:#0a7d57; --e-green-2:#4a9d78; --e-green-wash:#cdf1de; --e-green-ink:#086444;
    --e-amber:#b06a12; --e-amber-wash:#fdeecd; --e-amber-ink:#8a5200; --e-amber-edge:#f3d9a6;
    --e-red:#b8447e; --e-red-wash:#ffd6e5; --e-red-ink:#9a336a;
    /* TEXT tokens that flip with the theme (25 Sep 2026). --color-accent-800 was
       doing two jobs: teal TEXT on pale tints, and a solid SURFACE (the honesty
       band). Dark mode moved it to a mid teal, which kept the band dark but sank
       the text to 2.1-2.8:1 on the now-dark tints. Text reads these instead; the
       surfaces keep accent-800. Measured >=4.73:1 on every ground they sit on. */
    --e-ink-accent:#0a5c54;          /* teal text on the page, tints and cards */
    --e-link:#0a6b61;                /* every link; accent-700 was 3.1:1 on the page */
    --e-on-green:#f5f5f8;            /* text on a solid --e-green chip */
    --e-btn-accent:#0b7d72; --e-btn-accent-ink:#ffffff;  /* small solid teal buttons */
  }
  *, *::before, *::after { box-sizing:border-box; }
  h1,h2,h3,h4 { font-family:var(--font-heading); font-weight:600; line-height:1.1; letter-spacing:-.015em; margin:0; }
  p { margin:0; }
  img, svg { display:block; max-width:100%; }
  :focus { outline:none; }
  :focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  ::selection { background:color-mix(in srgb, var(--color-accent) 30%, transparent); }
  /* Skip link (29 Sep 2026): the first thing a keyboard reaches, jumping past the nav to
     <main id="content">. Off-screen until focused. Fixed colours on purpose: it sits on
     whatever is under it, so it carries its own surface and ink and never inverts. */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .skip-link { position:absolute; left:12px; top:-60px; z-index:1000; padding:10px 16px; border-radius:8px;
    background:#0a5c54; color:#fff; font-weight:600; text-decoration:none; }
  .skip-link:focus, .skip-link:focus-visible { top:12px; outline:2px solid #fff; outline-offset:2px; }
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-heading); font-weight:600; font-size:14px; line-height:1.2;
    padding:10px 24px; cursor:pointer; text-decoration:none; color:var(--color-text);
    background:transparent; border:1px solid var(--color-divider);
    transition:background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  .btn:hover { text-decoration:none; background:color-mix(in srgb, var(--color-text) 7%, transparent); }
  /* The mark's violet→teal gradient, on every primary button. !important beats
     the inline `background:var(--color-accent-700)` that the page markup still
     carries, so this reskins them all without touching a single button tag. */
  .btn-primary { background:var(--grad-deep) !important; border-color:transparent !important; color:#fff !important;
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 10px 22px -8px rgba(90,72,200,.5); }
  .btn-primary:hover { filter:brightness(1.06) saturate(1.04); color:#fff !important;
    box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 15px 30px -8px rgba(90,72,200,.6); }
  .btn-secondary:hover { border-color:var(--color-accent); }
  .duotone { position:relative; overflow:hidden; }
  .duotone::after { content:""; position:absolute; inset:0; pointer-events:none; background:var(--color-accent); mix-blend-mode:color; }
  /* Two tiers. Two-column layouts (hero, agent app, FAQ) put display:grid on
     .wrap itself, so they need the self-matching selector; three-and-four-up
     grids sit on a child and can hold their columns longer. */
  @media (max-width:1080px) {
    .wrap[style*="grid-template-columns"],
    #app [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
    /* The nav used to be display:none here, which left every phone and tablet
       with no navigation at all — logo, Sign in, Start free, nothing else.
       Tolerable while the site was one scrolling page; useless the moment
       there are Use cases, Industries and Integrations to reach. Second row,
       scrolls sideways, no JavaScript and no hamburger to get wrong. */
    header .wrap { flex-wrap:wrap; height:auto !important; padding-block:10px; }
    header nav {
      order:3; width:100%; margin-left:0 !important;
      overflow-x:auto; overscroll-behavior-x:contain;
      scrollbar-width:none; -ms-overflow-style:none;
      padding-bottom:2px;
    }
    header nav::-webkit-scrollbar { display:none; }
    header nav a { white-space:nowrap; }
  }
  @media (max-width:880px) {
    .wrap > [style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  }
  @media (max-width:620px) {
    .wrap { padding-inline:20px; }
    .sec { padding-block:48px; }
    h1 { font-size:38px !important; }
    .hd h2 { font-size:30px !important; }
    .rail > * { flex-basis:290px; }
    table { font-size:13.5px; }
  }

  /* ── Page styles, carried verbatim from the approved v2 mockup ────────── */

  /* The mockup's own :root status palette used to be re-declared here — same
     specificity, later in the file, so its STEEL RAIL values silently beat the
     Iris ones above in light mode for two weeks. Tokens are declared ONCE. */
  body { margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.62; }
  a { color:var(--e-link); text-decoration:none; }
  a:hover { color:var(--e-ink-accent); text-decoration:underline; text-underline-offset:3px; }

  /* Where the whole card is the link, the rule above underlines every word in
     it on hover, which reads as broken rather than clickable. Lift the card and
     underline only its title. */
  .card-link:hover { text-decoration:none; border-color:var(--color-accent-400); box-shadow:var(--shadow-md); }
  .card-link:hover b { text-decoration:underline; text-underline-offset:3px; }
  .card-link { transition:border-color .15s ease, box-shadow .15s ease; }
  .wrap { max-width:1180px; margin:0 auto; padding-inline:28px; }
  .sec { padding-block:72px; border-bottom:1px solid var(--color-divider); }
  .plate { background:var(--color-surface); border:1px solid color-mix(in srgb, #ffffff 60%, var(--color-divider)); box-shadow:var(--shadow-md); }
  .kick { font-family:var(--font-heading); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-neutral-700); }
  .num { font-family:var(--font-heading); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .ico { display:block; }
  .hd h2 { font-size:42px; margin:10px 0; letter-spacing:-.025em; text-wrap:balance; }
  .hd p { font-size:17px; color:var(--color-neutral-800); margin:0; max-width:64ch; text-wrap:pretty; }
  /* the miniature UI used as product imagery */
  .ui { background:var(--color-bg); border:1px solid var(--color-divider); overflow:hidden; }
  .ui-bar { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--color-neutral-100); border-bottom:1px solid var(--color-divider); }
  .ui-dot { width:7px; height:7px; border-radius:50%; flex:none; }
  .av { display:grid; place-items:center; background:var(--grad-deep); color:#fff; font-family:var(--font-heading); font-weight:700; flex:none; box-shadow:0 4px 10px -3px rgba(60,50,120,.4); }
  .row { display:flex; align-items:center; gap:9px; padding:8px 10px; border-bottom:1px solid var(--color-neutral-200); }
  .row:last-child { border-bottom:0; }
  /* Four lines, one 12s cycle, 3s apart. fill-mode:backwards is load-bearing:
     without it a delayed element shows its OWN opacity (default 1) during the
     delay, so all four stack visibly on paint. The 0% frame is hidden, so
     backwards keeps every waiting line down until its turn. */
  /* Rounded — the client's call, 22 Aug 2026. One radius scale so the site and
     the panel agree; the design system's square default is set aside, and the
     registration marks go with it (a crosshair on a rounded corner reads as a
     mistake). */
  :root {
    --r-lg:18px; --r-md:12px; --r-sm:8px;
    /* Card tints — two steps per hue, mirrored in handoff/endelir.css.
       Step 1 carries artwork, step 2 carries text. */
    --e-tint-steel-1:#f2f1ff;   --e-tint-steel-2:#e6e3ff;
    --e-tint-green-1:#f1faf5;   --e-tint-green-2:#dff2e7;
    --e-tint-amber-1:#fff9ef;   --e-tint-amber-2:#fdefd8;
    --e-tint-neutral-1:#f7f8fb; --e-tint-neutral-2:#eceef4;
    --e-bubble:#d9f5e4;         --e-bubble-ink:#0f3d2a;
    --e-tick:#0f9e90;
    --e-ink-green:#12402c;      --e-ink-amber:#4a3208;
    /* The ink set had only two of its four hues. The steel and neutral cards
       had no ink to reach for, so they used --color-accent-900 and
       --color-neutral-900 instead — ramp steps that do NOT invert between
       themes (900 is the darkest end in both). Dark text on a dark card was
       the result: 1.42:1 and 1.18:1. These two complete the set. */
    --e-ink-steel:#2a2765;      --e-ink-neutral:#252c3c;
    /* Card LINK inks. "Learn more" used --color-accent-700, one teal for all
       four card hues — which clears 4.5 on none of them in light mode (2.66 to
       2.93) while passing comfortably in dark. A single accent cannot serve
       four tinted backgrounds in two themes; each hue needs its own. */
    --e-link-steel:#3a3585;     --e-link-green:#0f6b45;
    --e-link-amber:#6b4a12;     --e-link-neutral:#3a4459;
    /* DEVICE INKS — deliberately defined ONCE, here, and never redefined in
       either dark block. The phone mockups inside the cards are hardcoded
       background:#fff because they are pictures of a phone screen, and a phone
       screen does not turn dark because the website did. Their text was using
       ordinary theme tokens, which DO invert — so in dark mode the site put
       near-white text (#e9ecf6) on a permanently white card at 1.18:1, and a
       mint link at 1.9:1. Anything drawn on the white device surface must use
       these and nothing else. */
    --e-device-ink:#1a2130;        --e-device-ink-soft:#525a6e;
    --e-device-accent:#0b7d72;     --e-device-divider:rgba(26,33,48,.14);
    /* The boundary is the SURFACE, not the enclosure. Inside the same mockup,
       the outgoing chat bubble uses --e-bubble, which DOES invert, so it keeps
       --e-bubble-ink, which inverts with it. Pinning that bubble to a fixed
       dark ink — which I did on the first pass — puts dark text on the dark
       bubble at 1.03:1. Fixed ink belongs on fixed surfaces only. */
  }
  .plate, .cell, .ui, .shot { border-radius:var(--r-lg); }
  /* Industries rail — horizontal, snapped, keyboard-scrollable. The seventh
     card peeks past the edge so the overflow is legible without arrows. */
  .rail { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:28px; padding:4px 28px 18px; margin-inline:-28px; scrollbar-width:thin; }
  .rail > * { flex:0 0 366px; scroll-snap-align:start; }
  .rail::-webkit-scrollbar { height:8px }
  .rail::-webkit-scrollbar-thumb { background:var(--color-accent-300); border-radius:999px }
  .rail::-webkit-scrollbar-track { background:var(--color-neutral-200); border-radius:999px }
  .ui { overflow:hidden; }
  .itile, .av { border-radius:var(--r-sm); }
  .btn { border-radius:999px !important; padding-inline:24px; }
  .duotone { border-radius:var(--r-lg); overflow:hidden; }
  .bub, .mock__thread > div { border-radius:var(--r-md); }

  /* ── Iris dark mode (27 Aug 2026) ───────────────────────────────────────
     Follows the visitor's device setting by default; the header toggle stamps
     data-theme on <html> to force one, and wins over the OS. The token set is
     identical in both selectors below. Higher specificity than plain :root, so
     placement at end is safe. Grad-brand (the violet-teal identity) is kept —
     it reads on both grounds. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --color-bg:#0b0f17; --color-surface:#151c29; --color-text:#e9ecf6;
    --color-divider:color-mix(in srgb, #e9ecf6 15%, transparent);
    --color-neutral-100:#151c29; --color-neutral-200:#1e2636; --color-neutral-300:#2b3448;
    --color-neutral-400:#48526a; --color-neutral-500:#727b90; --color-neutral-600:#8b93a7;
    --color-neutral-700:#a3abbe; --color-neutral-800:#c2c9d8; --color-neutral-900:#0e131d;
    --color-accent:#2ad3b3;
    --color-accent-100:#10302a; --color-accent-200:#16463b; --color-accent-300:#4fbfa8;
    --color-accent-400:#3f9384; --color-accent-500:#1cae9c; --color-accent-600:#22c0aa;
    --color-accent-700:#2ad3b3; --color-accent-800:#0e7d6f; --color-accent-900:#0c443d;
    --color-violet:#9d8cff; --color-violet-600:#8f7cf5;
    --color-peri:#aeb8ff; --color-aqua:#22414b; --color-mint:#173a2c;
    --grad-wash:linear-gradient(125deg,#241f45 0%,#1b2350 30%,#123039 64%,#123028 100%);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 6px 20px -8px rgba(0,0,0,.55);
    --shadow-lg:0 26px 50px -18px rgba(0,0,0,.7);
    --e-green:#3ecf92; --e-green-2:#4a9d78; --e-green-wash:#173a2c; --e-green-ink:#8fe8bb;
    --e-amber:#e0a94a; --e-amber-wash:#33280f; --e-amber-ink:#f3cf8a; --e-amber-edge:#5a4620;
    --e-red:#f07aac; --e-red-wash:#3a1c2b; --e-red-ink:#ffb3d0;
    --e-tint-steel-1:#181735; --e-tint-steel-2:#201f45;
    --e-tint-green-1:#12281f; --e-tint-green-2:#173a2c;
    --e-tint-amber-1:#282010; --e-tint-amber-2:#382b10;
    --e-tint-neutral-1:#141a26; --e-tint-neutral-2:#1c2333;
    --e-bubble:#173a2c; --e-bubble-ink:#a8f0cc; --e-tick:#2ad3b3;
    --e-ink-green:#a8f0cc; --e-ink-amber:#f3cf8a;
    --e-ink-steel:#cbc8f7; --e-ink-neutral:#c6cddc;
    --e-link-steel:#a9a4f0; --e-link-green:#6fe0a8;
    --e-link-amber:#e8bd72; --e-link-neutral:#9fb0cc;
    --e-ink-accent:#7fe3cf; --e-link:#7fe3cf; --e-on-green:#07261a;
    --e-btn-accent:#2ad3b3; --e-btn-accent-ink:#0b0f17;
  } }
  :root[data-theme="dark"] {
    --color-bg:#0b0f17; --color-surface:#151c29; --color-text:#e9ecf6;
    --color-divider:color-mix(in srgb, #e9ecf6 15%, transparent);
    --color-neutral-100:#151c29; --color-neutral-200:#1e2636; --color-neutral-300:#2b3448;
    --color-neutral-400:#48526a; --color-neutral-500:#727b90; --color-neutral-600:#8b93a7;
    --color-neutral-700:#a3abbe; --color-neutral-800:#c2c9d8; --color-neutral-900:#0e131d;
    --color-accent:#2ad3b3;
    --color-accent-100:#10302a; --color-accent-200:#16463b; --color-accent-300:#4fbfa8;
    --color-accent-400:#3f9384; --color-accent-500:#1cae9c; --color-accent-600:#22c0aa;
    --color-accent-700:#2ad3b3; --color-accent-800:#0e7d6f; --color-accent-900:#0c443d;
    --color-violet:#9d8cff; --color-violet-600:#8f7cf5;
    --color-peri:#aeb8ff; --color-aqua:#22414b; --color-mint:#173a2c;
    --grad-wash:linear-gradient(125deg,#241f45 0%,#1b2350 30%,#123039 64%,#123028 100%);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 6px 20px -8px rgba(0,0,0,.55);
    --shadow-lg:0 26px 50px -18px rgba(0,0,0,.7);
    --e-green:#3ecf92; --e-green-2:#4a9d78; --e-green-wash:#173a2c; --e-green-ink:#8fe8bb;
    --e-amber:#e0a94a; --e-amber-wash:#33280f; --e-amber-ink:#f3cf8a; --e-amber-edge:#5a4620;
    --e-red:#f07aac; --e-red-wash:#3a1c2b; --e-red-ink:#ffb3d0;
    --e-tint-steel-1:#181735; --e-tint-steel-2:#201f45;
    --e-tint-green-1:#12281f; --e-tint-green-2:#173a2c;
    --e-tint-amber-1:#282010; --e-tint-amber-2:#382b10;
    --e-tint-neutral-1:#141a26; --e-tint-neutral-2:#1c2333;
    --e-bubble:#173a2c; --e-bubble-ink:#a8f0cc; --e-tick:#2ad3b3;
    --e-ink-green:#a8f0cc; --e-ink-amber:#f3cf8a;
    --e-ink-steel:#cbc8f7; --e-ink-neutral:#c6cddc;
    --e-link-steel:#a9a4f0; --e-link-green:#6fe0a8;
    --e-link-amber:#e8bd72; --e-link-neutral:#9fb0cc;
    --e-ink-accent:#7fe3cf; --e-link:#7fe3cf; --e-on-green:#07261a;
    --e-btn-accent:#2ad3b3; --e-btn-accent-ink:#0b0f17;
  }
  /* The toggle button in the header */
  .theme-toggle { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:999px;
    border:1px solid var(--color-divider); background:var(--color-neutral-100); color:var(--color-neutral-800);
    cursor:pointer; flex:none; transition:background-color .16s, border-color .16s, color .16s; }
  .theme-toggle:hover { color:var(--color-text); border-color:var(--color-accent-300); }
  .theme-toggle .ico { width:18px; height:18px; }
  .theme-toggle .moon { display:none; }
  :root[data-theme="dark"] .theme-toggle .moon { display:block; }
  :root[data-theme="dark"] .theme-toggle .sun { display:none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .moon { display:block; } :root:not([data-theme="light"]) .theme-toggle .sun { display:none; } }


  /* ══ Second pass, 25 Sep 2026: the posh layer ═══════════════════════════
     Scoped to <body class="p2"> so it is proven on the homepage before the 41
     subpages take it (the owner's call: homepage first). Techniques from the
     Ledger mock, palette from Iris:
       · ONE calm surface. The per-card tints (indigo, green, amber, brown) are
         gone; colour now carries meaning only — teal/green live or done, amber
         time running out, rose late or lost.
       · Depth from layered shadows tinted to the page, overlaps and a tilted
         3D stage, instead of outlines and washes.
       · Sentence-case labels. Tracked ALL-CAPS eyebrows on every section were
         the commonest template tell on the page.
       · ONE entrance on load, then a slow drift; both off under
         prefers-reduced-motion.
     Surfaces that never flip with the theme (the AI band, the paper trace, the
     message cards over photographs) carry their own fixed inks, per the
     device-ink rule above: fixed ink on fixed surfaces only. */
  :root {
    --p2-edge:color-mix(in srgb, var(--color-text) 9%, transparent);
    --p2-s1:0 1px 2px rgba(60,50,120,.06), 0 4px 12px -3px rgba(60,50,120,.10);
    --p2-s2:0 1px 2px rgba(60,50,120,.05), 0 14px 30px -12px rgba(60,50,120,.22), 0 36px 72px -32px rgba(60,50,120,.30);
    --p2-s3:0 2px 4px rgba(60,50,120,.06), 0 26px 50px -18px rgba(60,50,120,.30), 0 70px 120px -44px rgba(90,69,212,.42);
    /* the rotating verb, drawn in the Iris ramp; >=5.6:1 at every stop on --color-bg */
    --p2-verb:linear-gradient(100deg,#5a45d4 0%,#2a6b7e 55%,#0b6a60 100%);
    --p2-aura:radial-gradient(55% 65% at 80% 38%, color-mix(in srgb, var(--color-violet) 17%, transparent), transparent 72%),
              radial-gradient(45% 55% at 100% 92%, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 72%);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --p2-s1:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -3px rgba(0,0,0,.45);
    --p2-s2:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -12px rgba(0,0,0,.62), 0 36px 72px -32px rgba(0,0,0,.72);
    --p2-s3:0 2px 4px rgba(0,0,0,.4), 0 26px 50px -18px rgba(0,0,0,.7), 0 70px 120px -44px rgba(124,108,240,.34);
    --p2-verb:linear-gradient(100deg,#b9adff 0%,#8fd8e6 55%,#7fe3cf 100%);
  } }
  :root[data-theme="dark"] {
    --p2-s1:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -3px rgba(0,0,0,.45);
    --p2-s2:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -12px rgba(0,0,0,.62), 0 36px 72px -32px rgba(0,0,0,.72);
    --p2-s3:0 2px 4px rgba(0,0,0,.4), 0 26px 50px -18px rgba(0,0,0,.7), 0 70px 120px -44px rgba(124,108,240,.34);
    --p2-verb:linear-gradient(100deg,#b9adff 0%,#8fd8e6 55%,#7fe3cf 100%);
  }

  .p2 .kick { text-transform:none; letter-spacing:.01em; font-size:13px; }
  .p2 .eyebrow { display:inline-block; font-family:var(--font-heading); font-weight:600; font-size:15px; color:var(--e-ink-accent); margin-bottom:12px; }
  .p2 .sec { padding-block:104px; border-bottom:0; }
  .p2 .band { background:var(--color-neutral-200); }
  .p2 .hd h2 { font-size:46px; line-height:1.06; letter-spacing:-.032em; margin:0 0 14px; max-width:22ch; }
  .p2 .hd p { font-size:18px; line-height:1.55; }
  .p2 .fig { font-family:var(--font-heading); font-weight:600; font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.03em; }
  .p2 .card { background:var(--color-surface); border:1px solid var(--p2-edge); border-radius:var(--r-lg); box-shadow:var(--p2-s2); }
  .p2 .card.quiet { box-shadow:var(--p2-s1); }
  .p2 .well { background:var(--color-neutral-200); border-radius:calc(var(--r-lg) - 6px); }
  .p2 .ui { border-color:var(--p2-edge); }
  .p2 .check { list-style:none; padding:0; margin:0; max-width:52ch; }
  .p2 .check li { display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--p2-edge); font-size:15px; }
  .p2 .check li:last-child { border-bottom:1px solid var(--p2-edge); }
  .p2 .check .ico { color:var(--e-green); flex:none; margin-top:3px; }
  .p2 .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
  .p2 .chip.live { background:var(--e-green-wash); color:var(--e-green-ink); }
  .p2 .chip.time { background:var(--e-amber-wash); color:var(--e-amber-ink); }
  .p2 .chip.late { background:var(--e-red-wash); color:var(--e-red-ink); }
  .p2 .chip.ai { background:color-mix(in srgb, var(--color-violet) 16%, var(--color-surface)); color:var(--e-ink-steel); }
  .p2 .chip.plain { border:1px solid var(--p2-edge); color:var(--color-neutral-800); }

  /* 3D: a tilted plate, and the drift. The tilt is desktop-only; a phone
     gets the flat picture, because a rotated card on a 375px screen reads as
     a rendering fault, not as depth. */
  .p2 .persp { perspective:1800px; }
  @media (min-width:1081px) {
    .p2 .tilt-r { transform:rotateY(-9deg) rotateX(4deg); }
    .p2 .tilt-l { transform:rotateY(9deg) rotateX(4deg); }
  }
  @keyframes p2-drift { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
  /* `translate`, not `transform`: an animation's end value overrides the stylesheet, so a
     transform-based entrance erased the stage's rotateY/rotateX tilt the moment it ended
     (live 25 Sep, the hero sat flat). `translate` is a separate property; the tilt survives. */
  @keyframes p2-enter { from { opacity:0; translate:0 28px } to { opacity:1; translate:0 0 } }
  .p2 .drift { animation:p2-drift 8s ease-in-out infinite; }
  .p2 .drift.d2 { animation-delay:-2.7s; }
  .p2 .drift.d3 { animation-delay:-5.3s; }
  .p2 .enter { animation:p2-enter 1.2s cubic-bezier(.2,.7,.2,1) both; }
  @media (prefers-reduced-motion:reduce) { .p2 .drift, .p2 .enter { animation:none; } }

  /* ── Hero ── */
  .p2 .hero { position:relative; background:var(--color-bg); overflow:hidden; }
  /* the glow fades out before the hero ends; cut off by overflow it left a hard mint edge */
  .p2 .hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:var(--p2-aura);
    -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 94%); mask-image:linear-gradient(to bottom, #000 62%, transparent 94%); }
  .p2 .hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding-block:64px; }
  /* bottom padding was 128px / 104px while the proof slab overlapped the hero's edge by 64px;
     the slab ("Measured on live traffic") went on 29 Sep 2026 — zero customers, no live figures */
  /* The verb line rotates through four phrases; the longest, "Answer every
     enquiry", is 538px at 58px and the column is 542px, so the size follows the
     viewport and the line never wraps on desktop (a wrap made it three lines). */
  .p2 .hero h1 { font-size:clamp(44px, 4.3vw, 56px); line-height:1.03; letter-spacing:-.035em; margin:20px 0 20px; }
  @media (min-width:1081px) { .p2 #verb { white-space:nowrap; } }
  .p2 #verb { display:block; background:var(--p2-verb); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--e-ink-accent); transition:opacity .3s ease; padding-bottom:.06em; }
  .p2 .hero-sub { font-size:19.5px; line-height:1.5; color:var(--color-neutral-800); margin:0 0 28px; max-width:46ch; text-wrap:pretty; }
  .p2 .hero-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:var(--color-surface); border:1px solid var(--p2-edge); box-shadow:var(--p2-s1); font-size:14px; font-weight:600; color:var(--color-neutral-800); }
  .p2 .hero-pill .ui-dot { background:var(--color-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); }
  .p2 .btn-ghost { font-size:16px; padding:12px 22px; background:var(--color-surface); border-color:var(--p2-edge); box-shadow:var(--p2-s1); }

  /* the stage: the photograph is the largest layer, cards float in front at
     different depths, and nothing covers her face or the phone */
  .p2 .stage .photo { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--p2-s3); background:var(--color-neutral-300); aspect-ratio:3/2; }
  .p2 .stage .photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:44% 40%; }
  .p2 .float { border-radius:var(--r-md); box-shadow:var(--p2-s3); }
  .p2 .f-note { background:var(--color-surface); border:1px solid var(--p2-edge); padding:12px 14px; font-size:13.5px; line-height:1.42; }
  .p2 .f-note .t { font-size:11.5px; font-weight:600; color:var(--e-ink-accent); margin-bottom:5px; font-variant-numeric:tabular-nums; }
  .p2 .f-hand { background:var(--grad-deep); color:#ffffff; padding:12px 14px; font-size:13.5px; line-height:1.42; }
  .p2 .f-hand .t { font-size:11.5px; font-weight:600; color:#ffffff; margin-bottom:5px; font-variant-numeric:tabular-nums; }
  .p2 .f-window { background:var(--color-surface); border:1px solid var(--p2-edge); padding:10px 14px; }
  .p2 .f-inbox { background:var(--color-surface); border:1px solid var(--p2-edge); overflow:hidden; }
  .p2 .f-inbox .row { border-bottom-color:var(--p2-edge); padding:9px 13px; }
  @media (min-width:1081px) {
    .p2 .stage { position:relative; height:580px; perspective:2000px; }
    .p2 .stage-in { position:absolute; inset:0; transform:rotateY(-10deg) rotateX(5deg); transform-style:preserve-3d; }
    .p2 .stage .at { position:absolute; }
    .p2 .stage .photo-at { left:0; top:30px; width:90%; transform:translateZ(-10px); }
    .p2 .stage .window-at { right:2%; top:0; width:158px; transform:translateZ(100px); }
    .p2 .stage .inbox-at { right:-26px; top:300px; width:314px; transform:translateZ(70px); }
    .p2 .stage .note-at { left:14px; top:350px; width:232px; transform:translateZ(120px); }
    .p2 .stage .hand-at { left:2%; top:452px; width:234px; transform:translateZ(150px); }
  }
  @media (max-width:1080px) {
    .p2 .hero-grid { grid-template-columns:1fr; padding-block:48px; }
    .p2 .stage { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:640px; }
    .p2 .stage-in { display:contents; }
    .p2 .stage .photo-at { grid-column:1 / -1; }
    .p2 .stage .window-at { display:none; }
    .p2 .stage .inbox-at { grid-column:1 / -1; order:3; margin-top:6px; }  /* notes overlap the PHOTO, then the inbox */
    .p2 .stage .note-at { margin-top:-54px; margin-left:12px; position:relative; }
    .p2 .stage .hand-at { margin-top:-54px; margin-right:12px; position:relative; }
    .p2 .drift { animation:none; }
  }
  @media (max-width:620px) {
    .p2 .hero h1 { font-size:40px !important; }
    .p2 .hero h1 { min-height:3.1em; }  /* room for a two-line phrase, so the rotation never moves the text below */
    .p2 .hero-sub { font-size:17.5px; }
    .p2 .stage { grid-template-columns:1fr; gap:12px; }
    .p2 .stage .inbox-at { display:none; }
    .p2 .stage .note-at { margin:-48px 14px 0 14px; }
    .p2 .stage .hand-at { margin:0 14px 0 34px; }
  }

  /* ── Sub-nav ── */
  .p2 .subnav { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--color-bg) 84%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--p2-edge); margin-top:56px; }
  .p2 .subnav .wrap { display:flex; gap:22px; height:50px; align-items:center; overflow-x:auto; scrollbar-width:none; }
  .p2 .subnav .wrap::-webkit-scrollbar { display:none; }
  .p2 .subnav a { font-size:14px; white-space:nowrap; color:var(--color-neutral-800); }
  .p2 .subnav a:hover { color:var(--e-ink-accent); }

  /* ── Three jobs ── */
  .p2 .jobs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
  .p2 .jobs .card { display:flex; flex-direction:column; padding:12px; }
  .p2 .jobs .well { height:228px; padding:18px; display:flex; flex-direction:column; justify-content:center; }
  .p2 .jobs .txt { padding:22px 12px 14px; }
  .p2 .jobs .txt .kick { color:var(--color-neutral-700); }
  .p2 .jobs h3 { font-size:23px; margin:6px 0 10px; letter-spacing:-.02em; }
  .p2 .jobs p { font-size:15.5px; line-height:1.55; color:var(--color-neutral-800); }
  @media (max-width:1080px) { .p2 .jobs { grid-template-columns:1fr; max-width:560px; } }

  /* ── The AI: a fixed dark band in both themes, with its own inks ── */
  .p2 .ai-band { position:relative; background:#10162a; color:#eef0f8; overflow:hidden; }
  .p2 .ai-band::before { content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(50% 60% at 85% 20%, rgba(124,108,240,.22), transparent 70%), radial-gradient(45% 55% at 5% 100%, rgba(15,158,144,.16), transparent 70%); }
  .p2 .ai-band .wrap { position:relative; }
  .p2 .ai-band .eyebrow { color:#b9adff; }
  .p2 .ai-band h2 { color:#f3f4fa; }
  .p2 .ai-band .soft { color:#b8c0d2; }
  .p2 .ai-top { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; align-items:center; margin-bottom:72px; }
  .p2 .trace-wrap { position:relative; padding:14px 0 26px; transform-style:preserve-3d; }
  .p2 .trace-wrap .sheet { position:absolute; border-radius:var(--r-lg); }
  .p2 .trace-wrap .sheet.s-a { left:18px; right:-12px; top:26px; bottom:0; background:#232b44; }
  .p2 .trace-wrap .sheet.s-b { left:9px; right:-6px; top:20px; bottom:12px; background:#2f3856; }
  .p2 .paper { position:relative; background:#f6f7fc; color:var(--e-device-ink); border-radius:var(--r-lg); overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.25), 0 28px 56px -18px rgba(0,0,0,.55), 0 60px 120px -40px rgba(124,108,240,.45); }
  .p2 .paper .hdr { display:flex; align-items:baseline; padding:18px 22px; border-bottom:2px solid var(--e-device-ink); font-family:var(--font-heading); font-weight:600; font-size:16.5px; }
  .p2 .paper .hdr .t { margin-left:auto; font-family:var(--font-body); font-weight:500; font-size:12.5px; color:var(--e-device-ink-soft); font-variant-numeric:tabular-nums; }
  .p2 .paper .ln { display:grid; grid-template-columns:78px minmax(0,1fr); gap:16px; padding:14px 22px; border-bottom:1px solid var(--e-device-divider); font-size:14.5px; line-height:1.45; }
  .p2 .paper .ln .t { font-size:12.5px; color:var(--e-device-ink-soft); font-variant-numeric:tabular-nums; padding-top:1px; }
  .p2 .paper .ln.last { border-bottom:0; background:#e8e5ff; font-weight:600; }
  .p2 .paper .ln.last .t { color:#3a2fa0; font-weight:600; }
  .p2 .caps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#2a3350; border:1px solid #2a3350; border-radius:var(--r-lg); overflow:hidden; }
  .p2 .caps > div { background:#10162a; padding:30px 28px; }
  .p2 .caps h3 { font-size:19.5px; margin:0 0 10px; color:#f3f4fa; letter-spacing:-.015em; }
  .p2 .caps p { font-size:15px; line-height:1.55; color:#b8c0d2; }
  .p2 .caps .ico { color:#7fe3cf; margin-bottom:14px; }
  .p2 .addon { margin-top:28px; background:var(--grad-deep); color:#ffffff; padding:30px 32px; border-radius:var(--r-lg); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:center;
    box-shadow:0 2px 6px rgba(0,0,0,.25), 0 28px 56px -18px rgba(0,0,0,.5), 0 60px 120px -40px rgba(124,108,240,.5); }
  .p2 .addon .t { font-size:13px; font-weight:600; color:#ffffff; margin-bottom:6px; }
  .p2 .addon h3 { font-size:28px; letter-spacing:-.025em; color:#ffffff; }
  .p2 .addon p { font-size:16px; line-height:1.6; color:#ffffff; }
  @media (max-width:1080px) {
    .p2 .ai-top { grid-template-columns:1fr; gap:40px; margin-bottom:48px; }
    .p2 .caps { grid-template-columns:1fr 1fr; }
    .p2 .addon { grid-template-columns:1fr; gap:12px; padding:26px 24px; }
  }
  @media (max-width:620px) {
    .p2 .caps { grid-template-columns:1fr; }
    .p2 .paper .ln { grid-template-columns:1fr; gap:3px; padding:12px 18px; }
    .p2 .paper .hdr { padding:16px 18px; }
    .p2 .trace-wrap .sheet { display:none; }
  }

  /* ── What it does: alternating rows, no tinted panels ── */
  .p2 .alt { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:72px; align-items:center; padding-block:40px; }
  .p2 .alt.flip { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  .p2 .alt h3 { font-size:32px; margin:6px 0 14px; letter-spacing:-.025em; line-height:1.1; }
  .p2 .alt .lede { font-size:16.5px; line-height:1.6; color:var(--color-neutral-800); margin:0 0 20px; max-width:48ch; text-wrap:pretty; }
  .p2 .alt .kick { color:var(--color-neutral-700); }
  .p2 .plate2 { padding:10px; }
  .p2 .adnote { margin:14px 6px 4px; padding:10px 12px; border-radius:var(--r-sm); background:var(--color-neutral-200); font-size:13px; line-height:1.45; color:var(--color-neutral-800); }
  .p2 .adnote code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:12px; color:var(--e-ink-accent); }
  @media (max-width:1080px) {
    .p2 .alt, .p2 .alt.flip { grid-template-columns:1fr; gap:32px; padding-block:28px; }
    .p2 .alt.flip > :first-child { order:2; }
  }

  /* ── After the conversation: fanned sheets ── */
  .p2 .fan { position:relative; margin-bottom:64px; }
  .p2 .leads { overflow:hidden; }
  .p2 .leads .top { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--p2-edge); }
  .p2 .leads .top b { font-family:var(--font-heading); font-weight:600; font-size:15px; }
  .p2 .leads .top .x { margin-left:auto; font-size:12.5px; font-weight:600; border:1px solid var(--p2-edge); padding:5px 11px; border-radius:999px; background:var(--color-bg); }
  .p2 .lrow { display:grid; grid-template-columns:150px 112px 70px minmax(0,1fr); gap:14px; padding:12px 18px; border-bottom:1px solid var(--p2-edge); font-size:13.5px; align-items:center; }
  .p2 .lrow:last-child { border-bottom:0; }
  .p2 .lrow.head { font-size:12px; color:var(--color-neutral-700); padding-block:9px; }
  .p2 .lrow .who { font-weight:600; }
  .p2 .lrow .sum { color:var(--color-neutral-800); }
  .p2 .lrow.hi { background:color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
  .p2 .report { overflow:visible; }
  .p2 .report .in { position:relative; background:var(--color-surface); border:1px solid var(--p2-edge); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--p2-s3); }
  .p2 .report .bk { position:absolute; border-radius:var(--r-lg); border:1px solid var(--p2-edge); }
  .p2 .report .bk.b1 { left:10px; right:-10px; top:10px; bottom:-10px; background:var(--color-neutral-300); }
  .p2 .report .bk.b2 { left:5px; right:-5px; top:5px; bottom:-5px; background:var(--color-neutral-200); }
  .p2 .report .hdr { display:flex; align-items:baseline; padding:14px 18px; border-bottom:2px solid var(--color-text); font-family:var(--font-heading); font-weight:600; font-size:15px; }
  .p2 .report .hdr span { margin-left:auto; font-family:var(--font-body); font-weight:500; font-size:12.5px; color:var(--color-neutral-700); font-variant-numeric:tabular-nums; }
  .p2 .report .r { display:flex; align-items:center; padding:11px 18px; border-bottom:1px solid var(--p2-edge); font-size:13.5px; }
  .p2 .report .r:last-child { border-bottom:0; }
  .p2 .report .r span { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--color-neutral-800); }
  .p2 .four { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
  .p2 .four .card { padding:24px 22px; }
  .p2 .four h3 { font-size:18.5px; margin:0 0 10px; letter-spacing:-.015em; }
  .p2 .four p { font-size:14.5px; line-height:1.55; color:var(--color-neutral-800); }
  .p2 .four .ico { color:var(--e-ink-accent); margin-bottom:14px; }
  @media (min-width:1081px) {
    .p2 .fan { height:440px; perspective:2000px; }
    .p2 .fan-in { position:absolute; inset:0; transform:rotateX(8deg); transform-style:preserve-3d; }
    .p2 .fan .leads { position:absolute; left:0; top:0; width:72%; }
    /* the report overlaps the sheet's right edge; the summaries wrap before it */
    .p2 .fan .lrow { padding-right:104px; }
    .p2 .fan .report-at { position:absolute; right:0; top:150px; width:34%; transform:translateZ(90px) rotateZ(2deg); }
  }
  @media (max-width:1080px) {
    .p2 .fan-in { display:grid; gap:28px; }
    .p2 .four { grid-template-columns:1fr 1fr; }
    .p2 .report .bk { display:none; }
  }
  @media (max-width:700px) {
    .p2 .lrow { grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
    .p2 .lrow.head { display:none; }
    .p2 .lrow .sum { grid-column:1 / -1; }
    .p2 .lrow .agent { display:none; }
    .p2 .four { grid-template-columns:1fr; }
  }

  /* ── Why us: a ruled row, no boxes ── */
  .p2 .why { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--color-text); }
  .p2 .why > div { padding:26px 24px 0; }
  .p2 .why > div:first-child { padding-left:0; }
  .p2 .why > div + div { border-left:1px solid var(--p2-edge); }
  .p2 .why h3 { font-size:19.5px; margin:0 0 10px; letter-spacing:-.015em; }
  .p2 .why p { font-size:15px; line-height:1.55; color:var(--color-neutral-800); }
  .p2 .why .ico { color:var(--e-ink-accent); margin-bottom:14px; }
  @media (max-width:1080px) {
    .p2 .why { grid-template-columns:1fr 1fr; row-gap:26px; }
    .p2 .why > div { padding:22px 20px 0 0 !important; border-left:0 !important; }
  }
  @media (max-width:620px) { .p2 .why { grid-template-columns:1fr; } }

  /* ── Industries: 3x2 on desktop, two up on tablets, a swipe rail on phones.
     The message card breaks the photograph's edge, at full size. Cards over a
     photograph are pictures of a phone screen, so they keep fixed surfaces and
     the device inks in both themes. ── */
  .p2 .ind-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:60px 30px; }
  .p2 .ind .shot { position:relative; }
  .p2 .ind .pic { aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--color-neutral-300); box-shadow:var(--p2-s2); }
  .p2 .ind .pic img { display:block; width:100%; height:100%; object-fit:cover; }
  .p2 .ind .msg { position:absolute; right:-12px; bottom:-26px; width:72%; display:flex; flex-direction:column; gap:6px; }
  /* Each card sits where its photograph is empty, checked against the photo
     (25 Sep 2026): the hotel's plain wall (never the swans), the food's hood
     (never the steam or the thali), the clinic's glass wall above the waiting
     patients, the sky above the fabricator's tape, the rail above her hand. */
  .p2 .ind .msg.tr { top:-20px; bottom:auto; width:60%; }
  .p2 .ind .msg.tl { top:-20px; bottom:auto; left:-12px; right:auto; width:62%; }
  .p2 .ind h3 { font-size:21px; margin:42px 0 8px; letter-spacing:-.02em; }
  .p2 .ind p { font-size:15px; line-height:1.55; color:var(--color-neutral-800); margin:0 0 10px; text-wrap:pretty; }
  .p2 .ind a.more { font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; position:relative; }
  /* position:relative (29 Sep 2026): the link's hidden sr-only suffix is position:absolute. On phones
     .ind-grid scrolls sideways and is not positioned, so without this the suffix escapes it and the
     homepage grew to 1444px wide at 360. */
  .p2 .dv { background:#fbfcff; color:var(--e-device-ink); border:1px solid var(--e-device-divider); border-radius:var(--r-md); padding:10px 13px; font-size:13px; line-height:1.4;
    box-shadow:0 2px 4px rgba(20,20,50,.08), 0 18px 36px -14px rgba(20,20,50,.38); }
  .p2 .dv.out { align-self:flex-end; background:#e4f5f1; color:#0a4f48; border-color:#c6ece5; }
  .p2 .dv.in { align-self:flex-start; }
  .p2 .dv.act { text-align:center; font-weight:600; color:var(--e-device-accent); padding:8px 12px; }
  .p2 .dv .menu { display:flex; align-items:center; gap:10px; padding:5px 0; border-top:1px solid var(--e-device-divider); font-size:12.5px; }
  .p2 .dv .menu:first-of-type { border-top:0; }
  .p2 .dv .menu img { width:24px; height:24px; border-radius:6px; object-fit:cover; flex:none; }
  .p2 .dv .menu span:last-child { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--e-device-ink-soft); }
  .p2 .ind-foot { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:64px; padding-top:28px; border-top:1px solid var(--p2-edge); }
  .p2 .ind-foot p { font-size:15px; color:var(--color-neutral-800); max-width:60ch; }
  @media (max-width:1080px) { .p2 .ind-grid { grid-template-columns:1fr 1fr; } }
  @media (max-width:700px) {
    .p2 .ind-grid { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-20px; padding:4px 20px 30px; scroll-padding-left:20px; scrollbar-width:none; }
    .p2 .ind-grid::-webkit-scrollbar { display:none; }
    .p2 .ind { flex:0 0 84%; scroll-snap-align:start; }
    .p2 .ind .msg { right:10px; }
    .p2 .ind .msg.tr, .p2 .ind .msg.tl { top:10px; }
    .p2 .ind .msg.tl { left:10px; right:auto; }
  }

  /* ── Agent app ── */
  .p2 .app-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:64px; align-items:center; }
  .p2 .feat4 { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:56ch; }
  .p2 .feat4 > div { padding:14px 16px; font-size:14.5px; }
  .p2 .stores { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
  .p2 .phone { border-radius:34px; padding:9px; background:var(--color-surface); border:1px solid var(--p2-edge); box-shadow:var(--p2-s3); }
  /* over the header's empty right side, where a push banner belongs; lower
     down it covered the first message */
  .p2 .phone-float { position:absolute; right:-58px; top:-34px; width:214px; }
  @media (min-width:1081px) {
    .p2 .phone-tilt { transform:rotateY(-14deg) rotateX(5deg); transform-style:preserve-3d; }
    .p2 .phone-tilt .phone-float { transform:translateZ(70px); }
  }
  @media (max-width:1080px) {
    .p2 .app-grid { grid-template-columns:1fr; gap:44px; }
    .p2 .app-grid .persp { max-width:320px; margin-top:52px; }  /* room for the push note above the phone */
    .p2 .phone-float { right:-6px; top:-62px; width:184px; }
  }
  @media (max-width:620px) { .p2 .feat4 { grid-template-columns:1fr; } }

  /* ── Pricing: one surface, Growth raised with sheets behind ── */
  .p2 .plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; }
  .p2 .plan { display:flex; flex-direction:column; padding:28px; }
  .p2 .plan ul { list-style:none; padding:0; margin:18px 0 26px; font-size:14.5px; }
  .p2 .plan li { display:flex; gap:10px; padding:8px 0; border-top:1px solid var(--p2-edge); }
  .p2 .plan li b { min-width:66px; }
  /* Growth sits on two sheets. Real elements, not ::before/::after at
     z-index:-1: on a transformed card those paint OVER its own background. */
  .p2 .raise-wrap { position:relative; display:flex; transform:translateY(-14px); }
  .p2 .raise-wrap > .plan { flex:1; position:relative; }
  .p2 .raise-wrap .bk { position:absolute; border-radius:var(--r-lg); border:1px solid var(--p2-edge); }
  .p2 .raise-wrap .bk.b1 { inset:12px -12px -12px 12px; background:var(--color-neutral-300); }
  .p2 .raise-wrap .bk.b2 { inset:6px -6px -6px 6px; background:var(--color-neutral-200); }
  .p2 .plan.raised { border-color:color-mix(in srgb, var(--color-accent) 45%, transparent); box-shadow:var(--p2-s3); }
  .p2 .addon-line { margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:18px 22px; }
  .p2 .addon-line p { font-size:15px; color:var(--color-neutral-800); }
  .p2 .notes2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
  .p2 .notes2 .card { padding:22px 24px; }
  .p2 .notes2 h3 { font-size:20px; margin:0 0 7px; }
  .p2 .notes2 p { font-size:14.5px; color:var(--color-neutral-800); text-wrap:pretty; }
  @media (max-width:1080px) {
    .p2 .plans { grid-template-columns:1fr; max-width:520px; }
    .p2 .raise-wrap { transform:none; }
    .p2 .raise-wrap .bk { display:none; }
    .p2 .notes2 { grid-template-columns:1fr; }
  }

  /* the limits table is 426px at its narrowest; on a phone it scrolls inside
     its card instead of being clipped by it (it was cut off at the Scale column) */
  .p2 .limits { overflow-x:auto; overscroll-behavior-x:contain; }
  /* on a phone all four columns fit once the desktop padding goes; a table that
     scrolls sideways hides Growth and Scale from anyone who does not think to swipe */
  @media (max-width:620px) {
    .p2 .limits th, .p2 .limits td { padding:9px 5px !important; font-size:12.5px !important; }
    .p2 .limits tr > :first-child { padding-left:16px !important; }
    .p2 .limits tr > :last-child { padding-right:14px !important; }
  }

  /* ── FAQ ── */
  .p2 .faq-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start; }
  .p2 .faq details { border-bottom:1px solid var(--p2-edge); }
  .p2 .faq details:last-child { border-bottom:0; }
  .p2 .faq summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px; padding:19px 0; font-family:var(--font-heading); font-weight:600; font-size:19px; }
  .p2 .faq summary::-webkit-details-marker { display:none; }
  .p2 .faq summary .ico { margin-left:auto; flex:none; color:var(--e-ink-accent); transition:transform .2s ease; }
  .p2 .faq details[open] summary .ico { transform:rotate(45deg); }
  .p2 .faq p { font-size:15.5px; line-height:1.6; color:var(--color-neutral-800); margin:0 0 20px; max-width:70ch; text-wrap:pretty; }
  @media (max-width:1080px) { .p2 .faq-grid { grid-template-columns:1fr; gap:28px; } }
  @media (max-width:620px) {
    .p2 .sec { padding-block:64px; }
    .p2 .hd h2 { font-size:32px !important; }
    .p2 .alt h3 { font-size:27px; }
    .p2 .faq summary { font-size:17px; }
  }

  /* ══ Human touch, 25 Sep 2026 ═══════════════════════════════════════════
     The owner: after the hero, seven screens passed with no person in them.
     A photograph now leads each of the three jobs, the AI section, the
     evening report, "A person sets it up" and the agent app. Each photograph
     was composed with a calm zone where a product card sits over it. */
  .p2 .jobs .shot { position:relative; margin-bottom:58px; }
  .p2 .jobs .pic { aspect-ratio:1/1; border-radius:calc(var(--r-lg) - 6px); overflow:hidden; background:var(--color-neutral-300); }
  .p2 .jobs .pic img, .p2 .ai-photo img, .p2 .fan-photo img, .p2 .why-photo img, .p2 .app-photo img { display:block; width:100%; height:100%; object-fit:cover; }
  .p2 .jobs .rise { position:absolute; left:14px; right:14px; bottom:-58px; }
  @media (max-width:1080px) { .p2 .jobs .pic { aspect-ratio:6/5; } }
  .p2 .jobs .rise .ui { box-shadow:var(--p2-s3) !important; }
  /* hidden only when script can reveal it (js-rise is set in <head>, never under reduced motion) */
  .js-rise .p2 .jobs .rise { transform:translateY(36px); opacity:0; transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
  .js-rise .p2 .jobs .card:nth-child(2) .rise { transition-delay:.12s; }
  .js-rise .p2 .jobs .card:nth-child(3) .rise { transition-delay:.24s; }
  .js-rise .p2 .jobs .rise.in { transform:none; opacity:1; }

  .p2 .ai-stage { position:relative; }
  .p2 .ai-photo { aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; background:#0b1020;
    box-shadow:0 2px 6px rgba(0,0,0,.3), 0 40px 80px -30px rgba(0,0,0,.75); }
  @media (min-width:1081px) {
    .p2 .ai-top { align-items:start; margin-bottom:200px; }
    .p2 .ai-top > div:first-child { padding-top:40px; }
    /* clears the paragraph on its left and her face on its right */
    .p2 .ai-stage .trace-at { position:absolute; left:-48px; bottom:-180px; width:70%; }
  }
  @media (max-width:1080px) { .p2 .ai-stage .trace-at { position:relative; margin:-34px 12px 0; } }

  .p2 .fan-photo { aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; background:var(--color-neutral-300); box-shadow:var(--p2-s3); }
  @media (min-width:1081px) {
    .p2 .fan.has-photo { height:750px; }
    .p2 .fan.has-photo .photo-at { position:absolute; left:0; top:0; width:50%; }
    .p2 .fan.has-photo .leads { left:auto; right:0; top:44px; width:60%; }
    .p2 .fan.has-photo .lrow { padding-right:18px; }
    .p2 .fan.has-photo .report-at { right:3%; top:448px; width:31%; }  /* under the sheet's last row, never over a summary */
  }

  .p2 .why-wrap { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; }
  .p2 .why-photo { aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:var(--color-neutral-300); box-shadow:var(--p2-s3); }
  .p2 .why-wrap .why { grid-template-columns:1fr 1fr; row-gap:6px; }
  .p2 .why-wrap .why > div { padding:24px 24px 18px 0 !important; border-left:0 !important; }
  @media (max-width:1080px) { .p2 .why-wrap { grid-template-columns:1fr; gap:36px; } }
  @media (max-width:620px) { .p2 .why-wrap .why { grid-template-columns:1fr; } }

  .p2 .app-grid.has-photo { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
  .p2 .app-stage { position:relative; }
  .p2 .app-photo { aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; background:var(--color-neutral-300); box-shadow:var(--p2-s3); }
  @media (min-width:1081px) {
    .p2 .app-stage { padding:70px 0; }
    .p2 .app-stage .app-phone { position:absolute; right:-18px; top:0; width:236px; }
  }
  @media (max-width:1080px) {
    .p2 .app-grid.has-photo { grid-template-columns:1fr; }
    .p2 .app-stage .app-phone { width:240px; max-width:none; margin:-60px 8px 0 auto; }
  }
  /* on a phone the push note would sit on his face; the phone mock says it alone */
  @media (max-width:620px) { .p2 .app-stage .phone-float { display:none; } }

  /* ══ Subpages, 25 Sep 2026: the same layer carried to the 41 pages ═══════
     <body class="p2 sub">. The gradient band becomes the calm hero with a tilted
     photograph; cards take the one surface; the closing band is the navy band. */
  .p2.sub .sec { padding-block:80px; }
  .p2 .sub-hero { position:relative; background:var(--color-bg); overflow:hidden; border-bottom:1px solid var(--p2-edge); }
  .p2 .sub-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:var(--p2-aura);
    -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent); mask-image:linear-gradient(to bottom,#000 60%,transparent); }
  .p2 .sub-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:56px; align-items:center; padding-block:48px 76px; }
  .p2 .sub-grid.solo { grid-template-columns:minmax(0,1fr); max-width:78ch; }
  .p2 .sub-hero h1 { font-size:46px; line-height:1.06; letter-spacing:-.03em; margin:18px 0 14px; text-wrap:balance; }
  .p2 .sub-hero .hero-sub { font-size:18px; margin-bottom:26px; max-width:58ch; }
  .p2 .crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:13.5px; margin-bottom:16px; color:var(--color-neutral-700); }
  .p2 .crumbs a { color:var(--color-neutral-800); }
  .p2 .sub-photo { position:relative; perspective:1800px; }
  .p2 .sub-photo .ph { aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:var(--color-neutral-300); box-shadow:var(--p2-s3); }
  .p2 .sub-photo .ph img, .p2 .ix-pic img { display:block; width:100%; height:100%; object-fit:cover; }
  @media (min-width:1081px) { .p2 .sub-photo .tilt { transform:rotateY(-8deg) rotateX(4deg); transform-style:preserve-3d; } }
  .p2 .sub-photo .sub-float { position:absolute; left:-30px; bottom:-24px; width:236px; }
  .p2 .ix-pic { aspect-ratio:16/10; border-radius:calc(var(--r-lg) - 8px); overflow:hidden; margin:-10px -12px 8px; background:var(--color-neutral-300); }
  @media (max-width:1080px) {
    .p2 .sub-grid { grid-template-columns:1fr; gap:40px; padding-block:36px 64px; }
    .p2 .sub-photo { max-width:620px; }
    .p2 .sub-photo .sub-float { left:12px; bottom:-20px; }
  }
  @media (max-width:620px) { .p2 .sub-hero h1 { font-size:34px !important; } .p2.sub .sec { padding-block:56px; } }
  /* The body copy keeps its reading width but lines up with the hero's left edge;
     centred at 78ch it started 130px right of the headline above it. */
  .p2.sub .sec > .wrap[style*="max-width:78ch"] { max-width:1180px !important; }
  .p2.sub .sec > .wrap[style*="max-width:78ch"] > * { max-width:78ch; }

  /* ══ Mobile pass, 25 Sep 2026 ═══════════════════════════════════════════
     Found on an iPhone, not guessed: the owner said the phone site "is not ok".
     Everything below is for screens of 1080px and narrower unless it says so. */

  /* ── The header: one slim row that stays, and a Menu button ──
     It was two or three rows (logo and buttons, then a sideways nav row) and it
     scrolled away, so after the first screen a phone had no navigation at all.
     The button and the hidden row both wait for html.js-nav (set in <head>):
     with no JavaScript the old sideways row is still there. */
  .menu-toggle, .nav-m { display:none; }
  @media (max-width:1080px) {
    header.site-hd { position:sticky; top:0; z-index:60; }
    html { scroll-padding-top:72px; }  /* a jump to #pricing lands below the bar, not under it */
    html.js-nav header.site-hd .wrap { flex-wrap:nowrap; height:60px !important; padding-block:0; gap:10px; }
    html.js-nav header.site-hd .site-nav { display:none !important; }
    html.js-nav header.site-hd .hd-signin { display:none; }
    html.js-nav header.site-hd .wrap > div { gap:8px !important; }
    html.js-nav .menu-toggle { display:inline-grid; place-items:center; width:44px; height:44px; margin-right:-8px; padding:0;
      border:0; border-radius:999px; background:transparent; color:var(--color-text); cursor:pointer; flex:none; }
    .menu-toggle .m-close { display:none; }
    header.nav-open .menu-toggle .m-open { display:none; }
    header.nav-open .menu-toggle .m-close { display:block; }
    .theme-toggle { width:44px; height:44px; }
    header.site-hd .btn-primary { padding:9px 15px !important; white-space:nowrap; }
    /* the open menu: the same links, as a list under the bar */
    html.js-nav header.nav-open .site-nav { display:flex !important; flex-direction:column; gap:0 !important; position:absolute; left:0; right:0; top:100%;
      margin:0 !important; padding:6px 20px 18px; max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain;
      background:var(--color-neutral-100); border-bottom:1px solid var(--color-divider); box-shadow:0 24px 40px -20px rgba(20,20,50,.35); }
    html.js-nav header.nav-open .site-nav a { display:block; padding:14px 2px; font-size:17px !important; color:var(--color-text) !important; border-bottom:1px solid var(--color-divider); }
    html.js-nav header.nav-open .site-nav a:last-child { border-bottom:0; }
    html.js-nav header.nav-open .site-nav a.nav-m { color:var(--e-ink-accent) !important; font-weight:600; }
    /* the homepage's "On this page" bar now sits under the bar, not behind it */
    .p2 .subnav { top:60px; }
  }
  @media (max-width:760px) {
    /* the menu carries the same jumps; on a phone the second bar cost 50px of every screen and showed three of its eight links */
    html.js-nav .p2 .subnav { display:none; }
  }

  /* The phone gutter. site.css asked for 20px at <=620 on line ~120, but the base
     `.wrap` rule sits LATER in the file at 28px and silently won, so phones ran
     on 28px and the industries rail (built as margin-inline:-20px) never reached
     the glass. Stated here, after the base rule, where it holds. */
  @media (max-width:620px) { .wrap { padding-inline:20px; } }

  /* ── The hero headline on a phone ──
     It reserved three lines (min-height:3.1em) so a two-line phrase would not
     push the page down, which left a line-high hole under every one-line phrase
     and put the photograph a screen and a half down. Now each phrase fits ONE
     line at every phone width (measured 360/375/390/402/430, all four phrases),
     so the headline is always exactly two lines: no hole, no jump. */
  @media (max-width:620px) {
    .p2 .hero h1 { font-size:min(40px, 8.8vw) !important; min-height:0; margin:16px 0 16px; }
    .p2 #verb { white-space:nowrap; }
    .p2 .hero-grid { padding-top:28px; }
  }

  /* ── Icon lists on a phone: the icon beside the title, not above it ──
     The six AI cells, the four "after the conversation" cards and the four
     "why us" points each stacked icon / title / text with desktop padding;
     the six AI cells alone ran to two full screens. Same words, about half
     the height: the icon takes a narrow column and the text keeps the rest. */
  @media (max-width:620px) {
    .p2 .caps > div, .p2 .four .card, .p2 .why > div {
      display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:14px; align-content:start; }
    .p2 .caps .ico, .p2 .four .ico, .p2 .why .ico { grid-row:1 / span 2; margin:3px 0 0; }
    .p2 .caps > div { padding:20px 18px 22px; }
    .p2 .caps h3, .p2 .four h3, .p2 .why h3 { font-size:17.5px; margin:0 0 6px; }
    .p2 .caps p, .p2 .four p, .p2 .why p { font-size:14.5px; line-height:1.5; }
    .p2 .four { gap:10px; }
    .p2 .four .card { padding:18px 18px 20px; }
    .p2 .why-wrap .why { row-gap:0; }
    .p2 .why-wrap .why > div { padding:18px 0 16px !important; }
    .p2 .why-wrap .why > div + div { border-top:1px solid var(--p2-edge); }
  }

  /* ── What it does, on a phone ──
     The inbox drawing keeps only the open conversation: at 38% of a phone the
     list column wrapped every name onto two lines and squeezed the chat. The
     flow drawing swaps to its upright copy, whose labels stay readable. */
  @media (max-width:620px) {
    .p2 .im-list { display:none !important; }
    .p2 .flow-d { display:none !important; }
    .p2 .flow-m { display:block !important; }
  }

  /* ── One heading scale on a phone ──
     Measured at 402px: homepage section titles ran 32, 40 and 46px side by side,
     and on the subpages every section title was 34px, the same as the page's
     own h1, so nothing on the page outranked anything else. */
  @media (max-width:620px) {
    .p2 h2 { font-size:30px !important; line-height:1.1 !important; }
    .p2.sub h2 { font-size:26px !important; line-height:1.15 !important; }
    .p2 .sub-hero h1 { font-size:32px !important; line-height:1.08; margin:14px 0 12px; }
    .p2.sub .sub-hero .hero-sub { font-size:16.5px; line-height:1.58; }
  }

  /* ── Pricing on a phone ──
     Three full cards, each listing six limits, then the fourteen-row table that
     lists the same limits again: three screens. The cards keep price, year price
     and the three limits people compare first (number, agents, contacts); every
     limit stays one scroll away in the table directly below. */
  @media (max-width:620px) {
    .p2 .plans { gap:16px; }
    .p2 .plan { padding:22px 20px; }
    .p2 .plan .fig { font-size:38px !important; }
    .p2 .plan ul { margin:14px 0 18px; font-size:14px; }
    .p2 .plan li { padding:7px 0; }
    .p2 .plan li:nth-child(n+4) { display:none; }
    .p2 .addon-line { margin-top:20px; }
  }

  /* ── Footer on a phone: two columns, with rows a thumb can hit ──
     One column of 16 links at 23px apart ran to a screen and a half. */
  @media (max-width:620px) {
    footer .wrap > [style*="grid-template-columns:minmax(0,1.5fr) repeat(3"] { grid-template-columns:1fr 1fr !important; gap:34px 20px !important; }
    footer .wrap > [style*="grid-template-columns:minmax(0,1.5fr) repeat(3"] > :first-child { grid-column:1 / -1; max-width:none !important; }
    footer .wrap > [style*="grid-template-columns:minmax(0,1.5fr) repeat(3"] > :nth-child(2) { grid-row:span 2; }  /* Product is the long column; Legal sits under Company */
    footer [style*="flex-direction:column; gap:9px"] { gap:2px !important; }
    footer [style*="flex-direction:column; gap:9px"] a { padding-block:7px; }
  }

  /* ── Subpage hero on a phone: headline, then the photograph, then the words ──
     It ran crumbs, a label, a four-line headline, an eight-line paragraph and two
     buttons before the photograph began, a screen and a half of text. The text
     column becomes display:contents so its pieces can be ordered around the
     photo; "Start free" is in the bar at the top the whole way down. The label
     pill repeats the breadcrumb, so it goes on a phone. */
  @media (max-width:620px) {
    .p2 .sub-grid { row-gap:0; padding-block:22px 44px; }
    .p2 .sub-grid > div:first-child { display:contents; }
    .p2 .sub-grid .crumbs { order:1; margin-bottom:6px; }
    .p2 .sub-grid .hero-pill { display:none; }
    .p2 .sub-grid h1 { order:2; }
    .p2 .sub-grid .sub-photo { order:3; margin:10px 0 34px; }
    .p2 .sub-grid .hero-sub { order:4; }
    .p2 .sub-grid > div:first-child > div { order:5; }
  }
  /* numbered steps on the subpages: a 36px number column plus a 16px gap cost 52px of a 362px line */
  @media (max-width:620px) {
    .p2.sub li[style*="grid-template-columns:36px"] { grid-template-columns:22px minmax(0,1fr) !important; gap:10px !important; }
  }

  /* ── Rhythm on a phone: 64px above and below every section plus up to 60px
     under each heading was desktop spacing on a 400px screen. ── */
  @media (max-width:620px) {
    .p2 .sec { padding-block:52px; }
    .p2 .hd { margin-bottom:30px !important; }
  }
  @media (max-width:620px) {
    .p2 .sub-photo .ph { aspect-ratio:3/2; }  /* 4:3 at full width was 270px of a 700px screen */
    .p2.sub .sec { padding-block:46px; }
  }
  @media (max-width:620px) { .p2 .sub-grid .hero-sub:last-child { margin-bottom:0; } }  /* contact has no buttons under its intro */
  @media (max-width:700px) { .p2 .ind-foot { margin-top:20px; } }  /* the rail already carries 30px of bottom padding */

  /* ── 29 Sep 2026: byline, data tables (pricing, comparisons) ── */
  .p2 .byline { font-size:13.5px; color:var(--color-neutral-700); margin:-6px 0 22px; }
  @media (max-width:620px) { .p2 .sub-grid .byline { order:4; margin:-4px 0 20px; } }
  .p2 .dtable-wrap { overflow-x:auto; margin-top:8px; border:1px solid var(--p2-edge); border-radius:var(--r-lg); background:var(--color-surface); }
  .p2 .dtable { width:100%; min-width:560px; border-collapse:collapse; font-size:14.5px; line-height:1.5; }
  .p2 .dtable th, .p2 .dtable td { text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--p2-edge); color:var(--color-neutral-800); }
  .p2 .dtable thead th { font-family:var(--font-heading); font-weight:600; font-size:13px; color:var(--color-neutral-700); }
  .p2 .dtable tbody th { font-weight:600; color:var(--color-text); }
  .p2 .dtable tr:last-child > * { border-bottom:0; }
  .p2 .src { font-size:13.5px; line-height:1.55; color:var(--color-neutral-700); margin:12px 0 0; }
  .p2 .src a, .p2 .sec p a:not(.btn) { text-decoration:underline; text-underline-offset:3px; }
  /* <picture> (AVIF with a JPEG fallback, 29 Sep 2026) must not become a box of its own: every
     rule sizes the <img> against its frame (.ph, .pic, .shot …), and height:100% inside an
     auto-height inline <picture> would stop filling it. */
  picture { display:contents; }