/* Pryme runs one committed visual world: near-black ground, emerald signal.
     Every colour is painted explicitly so the page holds on any host theme. */
  :root {
    /* ── Pryme Brand Book v1.0 ──────────────────────────────────────
       Paper is the ground; everything else is measured against it.
       Emerald is the brand and carries the mark, the buttons and the
       borders. Deep Forest is what green TEXT is set in — Emerald
       clears 4.5:1 on Paper by three hundredths and fails on every
       other surface, so it never does the reading. Mist is the
       palette's own hue at 3% saturation, which is why panels sit
       inside the brand rather than beside it. */

    --emerald:   #1A8754;
    --forest:    #0B5137;
    --black:     #0A0A0A;
    --sage:      #8FC7AC;
    --paper:     #FFFFFF;
    --mist:      #F4F7F5;
    --slate:     #525252;

    --bg:        #FFFFFF;
    --bg-2:      #FAFCFB;
    --surface:   #F4F7F5;
    --surface-2: #E9F0EC;
    --line:      #E2ECE6;
    --line-2:    #C8DCD1;
    --ink:       #0A0A0A;
    --ink-2:     #525252;
    --ink-3:     #525252;
    --accent:    #1A8754;
    --accent-2:  #0B5137;
    --accent-ink:#FFFFFF;
    --glow:      rgba(26, 135, 84, 0.07);

    --display: "Sora", "Helvetica Neue", Arial, sans-serif;
    --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --r-sm: 10px;
    --r:    16px;
    --r-lg: 22px;
    --pad: clamp(1.25rem, 4vw, 3.5rem);
    --max: 1200px;
    --measure: 62ch;
  }

  * { box-sizing: border-box; }

  /* ambient field — slow-drifting emerald light behind everything */
  .bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

  .bg-fx i {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    display: block;
  }

  .bg-fx .o1 {
    width: 620px; height: 620px;
    top: -14%; left: -8%;
    background: radial-gradient(circle, rgba(26,135,84,0.09), transparent 68%);
    animation: drift1 32s ease-in-out infinite alternate;
  }

  .bg-fx .o2 {
    width: 520px; height: 520px;
    top: 34%; right: -12%;
    background: radial-gradient(circle, rgba(26,135,84,0.06), transparent 68%);
    animation: drift2 44s ease-in-out infinite alternate;
  }

  .bg-fx .o3 {
    width: 700px; height: 700px;
    bottom: -18%; left: 32%;
    background: radial-gradient(circle, rgba(26,135,84,0.05), transparent 70%);
    animation: drift3 52s ease-in-out infinite alternate;
  }

  @keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(16vw, 12vh, 0) scale(1.18); } }
  @keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-14vw, -16vh, 0) scale(0.9); } }
  @keyframes drift3 { from { transform: translate3d(0,0,0) scale(0.95); } to { transform: translate3d(-10vw, 8vh, 0) scale(1.2); } }

  #site, #flow, .chat-launcher, .chat-panel { position: relative; z-index: 1; }

  .layer-card, .layer-card * { transition: color 320ms ease, border-color 320ms ease, background-color 320ms ease; }

  @media (prefers-reduced-motion: reduce) {
    .bg-fx i { animation: none; }
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.03;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
  }

  p { margin: 0; }
  a { color: inherit; }
  [hidden] { display: none !important; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

  /* the name, at the size a name deserves */
  .hero-brand {
    display: inline-flex; align-items: center; gap: clamp(0.6rem, 1.4vw, 1rem);
    margin-bottom: clamp(1.3rem, 3vw, 2rem);
  }
  .hero-brand .prymk {
    width: clamp(2.6rem, 5.4vw, 4.2rem); height: clamp(2.6rem, 5.4vw, 4.2rem);
  }
  .hero-brand span {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.035em;
    line-height: 1; color: var(--ink);
  }

  /* the product lockup, set inside a line of type */
  .lk-in { white-space: nowrap; }
  .sec-scope {
    font-size: 0.8125rem !important; color: var(--ink-3) !important;
    padding-left: 0.85rem; border-left: 2px solid var(--sage); margin-top: 1rem !important;
  }
  .lk-in em {
    font-style: normal; font-weight: 400; color: var(--emerald);
    letter-spacing: -0.02em; margin-left: 0.22em;
  }

  /* who the offer is for, said where the offer is made */
  .hero-avail {
    display: flex; gap: 0.6rem; align-items: flex-start;
    max-width: 74ch; margin: clamp(2rem, 4vw, 2.8rem) auto 0;
    padding-top: 1.3rem; border-top: 1px solid var(--line);
    font-size: 0.8125rem; line-height: 1.7; color: var(--ink-2); text-align: left;
  }
  .hero-avail svg {
    width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.18rem;
    fill: none; stroke: var(--emerald); stroke-width: 1.6;
  }
  .hero-avail b { color: var(--ink); font-weight: 600; }

  .eyebrow {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 760ms ease, transform 760ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }

  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .relay-row { opacity: 1 !important; transform: none !important; transition: none; }
    .meter i { transition: none; }
    .card-vis { transition: none; }
    .blog-rail { scroll-behavior: auto; }
  }

  /* ---------- buttons ---------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem 1.7rem;
    border-radius: 999px;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  }

  .btn:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); }

  .btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
  .btn-ghost:hover { background: transparent; border-color: var(--forest); color: var(--forest); transform: translateY(-1px); }

  .btn-sm { padding: 0.6rem 1.2rem; font-size: 0.87rem; }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 150ms ease;
  }

  .text-link::after { content: "\2192"; transition: transform 150ms ease; }
  .text-link:hover { color: var(--ink); }
  .text-link:hover::after { transform: translateX(3px); }

  /* ---------- masthead ---------- */

  .masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 220ms ease;
  }

  .masthead.stuck { border-bottom-color: var(--line); }

  .masthead {
    transform: translateY(0);
    transition: border-color 220ms ease, transform 420ms cubic-bezier(0.22,0.8,0.3,1), opacity 320ms ease;
  }

  .masthead.away {
    transform: translateY(-104%);
    opacity: 0;
    pointer-events: none;
  }

  .masthead .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.05rem;
  }

  /* ── the mark ────────────────────────────────────────────────────
     Redrawn from the brand book's construction page: 200-unit square,
     ring radius 82, stroke 10, a 300-degree arc whose 60-degree
     opening is centred 60 degrees clockwise of vertical, round caps,
     the crown node one unit larger, the tree four units above the
     ring's centre. Horizontal is the default lockup and the header is
     where it belongs. */
  .mark {
    display: inline-flex; align-items: center; gap: 0.5rem;
    text-decoration: none; color: var(--ink);
  }
  .prymk { width: 1.85rem; height: 1.85rem; flex: none; display: block; }
  .prymk-ring, .prymk-br { stroke: var(--emerald); }
  .prymk-water { stroke: var(--sage); }
  .prymk-n { fill: var(--emerald); }
  .mark b {
    font-family: var(--display); font-weight: 700; font-size: 1.22rem;
    letter-spacing: -0.035em; line-height: 1; color: inherit;
  }
  .mark em {
    font-style: normal; font-weight: 400; color: var(--emerald);
    font-family: var(--display); font-size: 1.22rem;
    letter-spacing: -0.02em; margin-left: -0.18em;
  }
  .foot-brand .mark b, .foot-brand .mark em { font-size: 1.1rem; }

  .brand-nav { display: flex; align-items: center; gap: 2.6rem; }

  .mainnav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.95rem; font-weight: 500; color: var(--ink); }
  .mainnav > a { text-decoration: none; transition: color 140ms ease; }
  .mainnav > a:hover { color: var(--forest); }

  .navitem { position: static; }

  .navtrigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: color 140ms ease;
  }

  .navtrigger:hover, .navitem.open .navtrigger { color: var(--forest); }

  .caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
    transition: transform 180ms ease;
  }

  .navitem.open .caret { transform: rotate(180deg); }

  .mega {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 44px -24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22,0.8,0.3,1), visibility 180ms;
    z-index: 40;
  }

  .navitem.open .mega { opacity: 1; visibility: visible; transform: none; }

  .mega-inner {
    max-width: var(--max);
    margin-inline: auto;
    padding: 2.25rem var(--pad) 2.5rem;
    display: grid;
    gap: 1.75rem 2.5rem;
  }

  .mega-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-biz { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); align-items: start; }
  .mstack { display: grid; gap: 1.75rem; align-content: start; }
  .mega-plat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }

  @media (max-width: 1180px) {
    .mega-biz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 1040px) {
    .mega-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mega-biz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mega-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mega-plat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .mgroup { display: grid; gap: 0.55rem; align-content: start; }

  .mgroup h4 {
    margin: 0 0 0.35rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .mgroup a {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color 140ms ease;
  }

  .mgroup a:hover { color: var(--forest); }

  .mpromo {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    padding: 1.2rem 1.3rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 160ms ease;
  }

  .mpromo:hover { border-color: var(--forest); }

  .mpromo-label {
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--forest);
  }

  .mpromo strong {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.03em;
    color: var(--ink);
  }

  .mpromo-note { font-size: 0.85rem; color: var(--ink-2); }

  .nav-right { display: flex; align-items: center; gap: 1.1rem; }

  .lang {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.34rem 0.85rem 0.34rem 0.38rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 150ms ease;
  }

  .lang:hover { border-color: var(--forest); }

  .lang-flag { width: 22px; height: 22px; border-radius: 50%; flex: none; }
  .signin { font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none; }
  .signin:hover { color: var(--ink); }

  @media (max-width: 860px) { .mainnav { display: none; } }
  @media (max-width: 460px) { .signin { display: none; } }

  /* ---------- hero ---------- */

  .hero {
    position: relative;
    text-align: center;
    padding-block: clamp(4rem, 11vw, 8rem) clamp(3rem, 7vw, 5rem);
    overflow: hidden;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto;
    height: 120%;
    background:
      radial-gradient(60% 55% at 50% 22%, var(--glow) 0%, transparent 68%),
      radial-gradient(circle at 18% 30%, rgba(26,135,84,0.05) 0%, transparent 42%);
    pointer-events: none;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0,0,0,0.07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(65% 60% at 50% 35%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(65% 60% at 50% 35%, #000 0%, transparent 78%);
    pointer-events: none;
    animation: gridDrift 34s linear infinite;
  }

  @keyframes gridDrift { from { background-position: 0 0; } to { background-position: 46px 46px; } }

  @media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.42rem 1.1rem;
    margin-bottom: 2rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(0,0,0,0.02);
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  .hero-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

  .hero > * { position: relative; z-index: 1; }

  .hero h1 {
    font-size: clamp(2.15rem, 5.4vw, 4.05rem);
    max-width: 30ch;
    margin-inline: auto;
  }

  .hero h1 em { font-style: normal; color: var(--forest); }

  .hero .lede {
    margin: 1.7rem auto 0;
    max-width: 76ch;
    font-size: 1.1rem;
    color: var(--ink-2);
  }

  .hero .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2.4rem;
  }

  /* ---------- brief panel ---------- */

  .brief {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.35rem 1.4rem 1.5rem;
    text-align: left;
  }

  .brief-showcase { max-width: 780px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; }

  .brief-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--forest); }

  .live::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2.4s ease-in-out infinite;
  }

  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

  .entry {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.95rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(6px);
    animation: rise 620ms cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
  }

  .entry:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
  .entry:nth-child(4) { animation-delay: 140ms; }
  .entry:nth-child(5) { animation-delay: 320ms; }
  .entry:nth-child(6) { animation-delay: 500ms; }
  .entry:nth-child(7) { animation-delay: 680ms; }
  .entry:nth-child(8) { animation-delay: 860ms; }

  @keyframes rise { to { opacity: 1; transform: none; } }

  .fx-ribbon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem;
    padding: 1rem 0 0.35rem;
  }

  @media (max-width: 900px) { .fx-ribbon { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 560px) { .fx-ribbon { grid-template-columns: repeat(2, 1fr); } }

  .fx-cell {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    padding: 0.7rem 0.85rem 0.75rem;
    display: grid;
    gap: 0.45rem;
  }

  .fx-cell.more {
    background: transparent;
    border-style: dashed;
    border-color: var(--line-2);
    box-shadow: none;
    align-content: center;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease;
  }

  .fx-cell.more:hover { border-color: var(--forest); background: rgba(53,208,138,0.05); }
  .fx-cell.more .fx-top .fx-code { font-size: 1rem; }

  .fx-cell.more .fx-code { color: var(--forest); }
  .fx-cell.more .fx-country { color: var(--ink-3); }

  .fx-top { display: flex; align-items: center; gap: 0.5rem; }

  .flag {
    width: 21px;
    height: 14px;
    flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    display: block;
  }

  .fx-code {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--ink);
  }

  .fx-country {
    font-family: var(--body);
    font-size: 0.68rem;
    color: var(--ink-3);
    letter-spacing: 0.01em;
  }

  .fx-cell b {
    font-family: var(--mono);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .route {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.16rem 0.5rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.54rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-2);
    vertical-align: 1px;
  }

  .stamp {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--ink-3);
    padding-top: 0.2rem;
    font-variant-numeric: tabular-nums;
  }

  .who {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 0.3rem;
  }

  .said { font-size: 0.93rem; line-height: 1.5; color: var(--ink); }
  .said b { font-weight: 600; }
  .said .quiet { color: var(--ink-2); }

  @media (prefers-reduced-motion: reduce) {
    .entry { opacity: 1; transform: none; animation: none; }
    .live::before { animation: none; }
  }

  /* ---------- section scaffolding ---------- */

  section { position: relative; }

  .sec-head { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.6rem; }
  .sec-head.center { text-align: center; }
  .sec-head h2 { font-size: clamp(1.9rem, 4vw, 3.05rem); max-width: 24ch; }
  .sec-head.wide h2 { max-width: none; white-space: nowrap; }

  @media (max-width: 820px) { .sec-head.wide h2 { white-space: normal; font-size: clamp(1.6rem, 6vw, 2.2rem); } }
  .sec-head.center h2 { margin-inline: auto; }
  .sec-head p { color: var(--ink-2); max-width: var(--measure); margin-top: 1.1rem; }
  .sec-head.center p { margin-inline: auto; }
  .pad-b { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
  .rule-top { border-top: 1px solid var(--line); }

  /* ── the water ────────────────────────────────────────────────────
     Sage, round caps, no fill — the mark's own stroke at page scale.
     Each layer drifts at its own speed so the four never line up, and
     the whole field scales vertically with scroll so the page reads as
     something moving over water rather than a static pattern. */
  .water {
    position: fixed; left: 0; right: 0; bottom: 0; height: 62vh;
    z-index: 0; pointer-events: none; overflow: hidden;
    mask-image: linear-gradient(180deg, transparent, #000 28%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 100%);
  }
  .water svg { width: 100%; height: 100%; display: block; }
  .water use {
    fill: none; stroke: var(--sage);
    stroke-linecap: round; stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .wv-field {
    transform-origin: 50% 130px;
    transform: scaleY(var(--wv-amp, 1));
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .wv-lyr { will-change: transform; }
  @keyframes wv-drift { to { transform: translateX(-1440px); } }

  /* nearest layer: fastest, strongest, thickest */
  .wv-1 use { stroke-width: 2.6; opacity: 0.32; }
  .wv-1 { animation: wv-drift 34s linear infinite; }
  .wv-2 use { stroke-width: 2.1; opacity: 0.26; }
  .wv-2 { animation: wv-drift 52s linear infinite; transform: translateY(26px); }
  .wv-3 use { stroke-width: 1.7; opacity: 0.2; }
  .wv-3 { animation: wv-drift 78s linear infinite reverse; transform: translateY(52px); }
  .wv-4 use { stroke-width: 1.3; opacity: 0.15; }
  .wv-4 { animation: wv-drift 112s linear infinite; transform: translateY(78px); }

  /* the layers that carry a translateY need it to survive the drift */
  .wv-2 { animation-name: wv-drift-2; }
  .wv-3 { animation-name: wv-drift-3; }
  .wv-4 { animation-name: wv-drift-4; }
  @keyframes wv-drift-2 { from { transform: translate(0, 26px); } to { transform: translate(-1440px, 26px); } }
  @keyframes wv-drift-3 { from { transform: translate(-1440px, 52px); } to { transform: translate(0, 52px); } }
  @keyframes wv-drift-4 { from { transform: translate(0, 78px); } to { transform: translate(-1440px, 78px); } }

  /* where two sections meet, the water crests — the seam is where a
     page most needs a floor under it */
  .seam { position: relative; }
  .seam::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3.5rem;
    pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C120 12 240 12 360 40 C480 68 600 68 720 40 C840 12 960 12 1080 40 C1200 68 1320 68 1440 40' fill='none' stroke='%238FC7AC' stroke-width='2' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-size: 1440px 3.5rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .wv-lyr { animation: none !important; }
    .wv-field { transition: none; }
  }


  /* ══════════════════════════════════════════════════════════════════
   * WHERE THIS COMES FROM
   *
   * A timeline that reads as one continuous thing, not five pivots.
   * The dots run Sage to Deep Forest so the line itself carries the
   * growth, and the rule behind them is a single unbroken hairline.
   * ═══════════════════════════════════════════════════════════════════ */
  .story { padding: clamp(3.5rem, 7vw, 5.5rem) 0; position: relative; }

  .tl {
    position: relative; margin-top: clamp(2rem, 4vw, 3rem);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
  }
  .tl-line {
    position: absolute; left: 0.3rem; right: 0.3rem; top: 0.42rem; height: 1px;
    background: linear-gradient(90deg, var(--sage), var(--emerald) 60%, var(--forest));
    opacity: 0.45;
  }
  .tl-stop { position: relative; }
  .tl-dot {
    display: block; width: 0.85rem; height: 0.85rem; border-radius: 50%;
    background: var(--sage); margin-bottom: clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 0 0 4px var(--bg);
  }
  .tl-dot.sage    { background: #B4DCC6; }
  .tl-dot.sage-2  { background: var(--sage); }
  .tl-dot.emerald { background: var(--emerald); }
  .tl-dot.emerald-2 { background: var(--emerald); }
  .tl-dot.forest  { background: var(--forest); }

  .tl-year {
    display: block; font-family: var(--display); font-weight: 600;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.03em;
    color: var(--emerald); line-height: 1;
  }
  .tl-stop:last-child .tl-year { color: var(--forest); }
  .tl-what {
    display: block; font-size: 0.95rem; font-weight: 600;
    margin: 0.5rem 0 0.45rem; color: var(--ink);
  }
  .tl-stop p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.6; margin: 0; }

  .tl-close {
    margin-top: clamp(2.2rem, 4vw, 3rem); padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    font-size: 0.95rem; color: var(--ink-2); line-height: 1.7; max-width: 78ch;
  }

  @media (max-width: 860px) {
    .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.4rem; }
    .tl-line { display: none; }
  }
  @media (max-width: 520px) {
    .tl { grid-template-columns: 1fr; }
  }


  /* ── ground ───────────────────────────────────────────────────────
     A page that is only Paper looks unfinished at this scale. Mist is
     the palette's own hue at 3% saturation, so a wash of it adds depth
     without adding a colour, and a Sage dot field gives the surface a
     grain you feel rather than see. */
  .grain {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(143,199,172,0.34) 1px, transparent 0);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%);
    opacity: 0.5;
  }
  @media (prefers-reduced-motion: reduce) { .grain { opacity: 0.35; } }

  /* sections alternate Paper and Mist so the page has a rhythm */
  .onmist { background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 14%, var(--mist) 86%, var(--paper) 100%); }
  .onmist::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(143,199,172,0.30) 1px, transparent 0);
    background-size: 26px 26px; opacity: 0.55;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  }
  .onmist > .wrap { position: relative; z-index: 1; }

  /* one diffuse bloom behind the pinned screen — the only place on the
     page where Emerald is allowed to be atmosphere rather than ink */
  .pin-frame::before {
    content: ''; position: absolute; inset: -18% -10% -22%;
    background: radial-gradient(60% 55% at 50% 45%, rgba(26,135,84,0.16), transparent 70%);
    filter: blur(48px); z-index: -1; pointer-events: none;
  }
  .pin-media { isolation: isolate; }

  /* the real screen, held on the scroll stage */
  .showreal {
    margin: 0; border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; background: var(--mist);
    box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 26px 64px rgba(10,10,10,0.10);
  }
  .showreal img { display: block; width: 100%; height: auto; }
  .showreal figcaption {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 0.95rem; border-top: 1px solid var(--line); background: var(--bg);
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .showreal figcaption i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--emerald); flex: none; }


  /* ══════════════════════════════════════════════════════════════════
   * THE PRODUCT, SHOWN
   *
   * The screen is pinned and the argument scrolls past it: three blocks
   * of copy, and the screen changes to the one being talked about. It
   * reads as one continuous demonstration rather than three tabs a
   * visitor has to think to press.
   * ═══════════════════════════════════════════════════════════════════ */
  /* overflow-x only — `overflow: hidden` on an ancestor kills the
     sticky pin, and the bloom only ever spills sideways */
  .prod {
    padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(3.5rem, 7vw, 5rem);
    position: relative; overflow-x: clip;
  }

  .pin-wrap {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; margin-top: 2.2rem;
  }

  .pin-media { position: sticky; top: clamp(5.5rem, 12vh, 8rem); }
  .pin-frame {
    position: relative; border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; background: var(--mist);
    box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 26px 64px rgba(10,10,10,0.10);
  }
  .pin-shot { margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease; }
  .pin-shot:not(:first-child) { position: absolute; inset: 0; }
  .pin-shot.on { opacity: 1; visibility: visible; }
  .pin-shot img { display: block; width: 100%; height: auto; }
  .pin-shot figcaption {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 0.95rem; border-top: 1px solid var(--line);
    background: var(--bg);
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .pin-shot figcaption i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--emerald); flex: none; }

  /* the rail is where you are, and a way to jump */
  .pin-rail {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem; margin-top: 0.9rem;
  }
  @media (max-width: 560px) { .pin-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .rail-step {
    display: flex; align-items: center; gap: 0.45rem; min-width: 0;
    font: inherit; font-size: 0.8125rem; cursor: pointer; text-align: left;
    padding: 0.5rem 0.55rem; border-radius: var(--r-sm); transition: .18s;
    border: 1px solid transparent; background: none; color: var(--ink-3);
  }
  .rail-step .rail-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the marker is a dot that fills, not a number to count */
  .rail-step::before {
    content: ''; width: 0.45rem; height: 0.45rem; flex: none; border-radius: 50%;
    background: var(--line-2); transition: .18s;
  }
  .rail-step:hover { color: var(--ink); }
  .rail-step.on { background: var(--bg); border-color: var(--line); color: var(--ink); font-weight: 600; }
  .rail-step.on::before { background: var(--emerald); transform: scale(1.35); }


  .pin-copies { display: grid; }
  .pin-copy {
    min-height: 56vh; display: flex; flex-direction: column; justify-content: center;
    opacity: 0.3; transition: opacity .4s ease;
  }
  .pin-copies > .pin-copy:first-child { min-height: 48vh; }
  .pin-copy.on { opacity: 1; }
  .pin-eyebrow {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--forest); display: block; margin-bottom: 0.7rem;
  }
  .pin-copy h3 {
    font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.7vw, 2rem);
    letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 1.5rem;
  }
  .prod-pts { display: grid; gap: 1.1rem; }
  .prod-pt { display: flex; gap: 0.8rem; align-items: flex-start; }
  .prod-pt svg {
    width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.18rem;
    fill: none; stroke: var(--emerald); stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .prod-pt b { display: block; font-size: 0.97rem; font-weight: 600; }
  .prod-pt span { display: block; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; margin-top: 0.15rem; }

  /* below the fold width, the pin stops being a pin */
  @media (max-width: 900px) {
    .pin-wrap { grid-template-columns: 1fr; }
    .pin-media { position: static; }
    .pin-copy { min-height: 0; opacity: 1; margin-top: 2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pin-shot { transition: none; }
    .pin-copy { transition: none; opacity: 1; }
  }

  /* the real screen, held on the scroll stage */
  .showreal {
    margin: 0; border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; background: var(--mist);
    box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 26px 64px rgba(10,10,10,0.10);
  }
  .showreal img { display: block; width: 100%; height: auto; }
  .showreal figcaption {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 0.95rem; border-top: 1px solid var(--line); background: var(--bg);
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .showreal figcaption i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--emerald); flex: none; }


  /* ══════════════════════════════════════════════════════════════════
   * THE PRODUCT, SHOWN
   *
   * A financial brand earns trust by being specific. Three real screens
   * from Pryme Business, each with the three things it actually does —
   * no adjectives, no mock data dressed up as a feature list.
   * ═══════════════════════════════════════════════════════════════════ */

  .prod-tabs {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin: 2.2rem 0 1.6rem; padding-bottom: 0.1rem;
  }
  .prod-tab {
    font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer;
    padding: 0.6rem 1.1rem; border-radius: 999px; transition: .16s;
    border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2);
  }
  .prod-tab:hover { border-color: var(--emerald); color: var(--ink); }
  .prod-tab[aria-selected="true"] {
    background: var(--emerald); border-color: var(--emerald); color: #fff; font-weight: 600;
  }

  .prod-panel { display: none; }
  .prod-panel.on { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
  @media (max-width: 940px) { .prod-panel.on { grid-template-columns: 1fr; } }

  .prod-shot {
    border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; background: var(--mist);
    box-shadow: 0 1px 2px rgba(10,10,10,0.04), 0 20px 50px rgba(10,10,10,0.07);
  }
  .prod-shot img { display: block; width: 100%; height: auto; }
  .prod-cap {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 0.95rem; border-top: 1px solid var(--line);
    background: var(--bg); font-family: var(--mono);
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  }
  .prod-cap i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--emerald); flex: none; }

  .prod-side h3 {
    font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 0.7rem;
  }
  .prod-side > p { color: var(--ink-2); line-height: 1.6; margin: 0 0 1.6rem; max-width: 44ch; }
  .prod-side h3 + .prod-pts { margin-top: 1.5rem; }
  .prod-pts { display: grid; gap: 1.1rem; margin: 0 0 1.7rem; }
  .prod-pt { display: flex; gap: 0.8rem; align-items: flex-start; }
  .prod-pt svg {
    width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.18rem;
    fill: none; stroke: var(--emerald); stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .prod-pt b { display: block; font-size: 0.97rem; font-weight: 600; }
  .prod-pt span { display: block; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; margin-top: 0.15rem; }
  .prod-note {
    font-size: 0.83rem; color: var(--ink-3); line-height: 1.6;
    padding-left: 0.85rem; border-left: 2px solid var(--sage); max-width: 46ch;
  }


  /* ---------- scroll stage ---------- */

  .stage { position: relative; }
  .stage-track { position: relative; }

  .stage-pin {
    position: relative;
    display: grid;
    padding-block: clamp(3rem, 7vw, 5rem);
    gap: clamp(2.5rem, 6vw, 4rem);
  }

  .stage-layer { min-width: 0; }
  .layer-card .brief-showcase { max-width: 860px; margin-inline: auto; }

  /* pinned mode — only on wide, motion-friendly viewports */
  .stage.pinned .stage-track { height: 380vh; }

  .stage.pinned .stage-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-block: 0;
    gap: 0;
    place-items: center;
    overflow: hidden;
  }

  .stage.pinned .stage-layer {
    grid-area: 1 / 1;
    width: 100%;
    will-change: transform, opacity;
  }

  .stage.pinned .layer-card .brief-showcase {
    --panel-bg: 245, 246, 243;
    max-width: min(1440px, 94vw);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: var(--fill, 0px);
    padding: calc(1.4rem * var(--chrome, 1) + 0.2rem) calc(1.4rem * var(--chrome, 1) + 0.2rem) 1.5rem;
    border-color: rgba(30, 35, 33, var(--chrome, 1));
    background: rgba(var(--panel-bg, 14 17 16), var(--chrome, 1));
    border-radius: calc(16px * var(--chrome, 1));
  }

  .stage.pinned .layer-card .brief-showcase .entry {
    flex: 1 1 auto;
    align-content: center;
    padding-block: 0.5rem;
  }

  .stage.pinned .layer-card .brief-showcase .fx-ribbon { padding-top: 0.75rem; }
  .stage.pinned .layer-card .brief-showcase .brief-head { padding-bottom: 0.7rem; }

  .stage-cue {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .stage.pinned .stage-cue { display: flex; }
  .stage-cue i { width: 1px; height: 22px; background: linear-gradient(var(--accent), transparent); }

  /* ---------- narrative thread ---------- */

  .layer-thread { display: none; }
  .stage.pinned .layer-thread { display: block; opacity: 0; pointer-events: none; }

  .thread-wrap { text-align: center; }

  .thread-lede {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.9vw, 2.4rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--ink);
    max-width: 38ch;
    margin: 0 auto clamp(2.5rem, 5vw, 3.75rem);
    opacity: var(--o, 0);
    transform: translateY(calc(18px * (1 - var(--o, 0))));
  }

  .thread-lede em { font-style: normal; color: var(--forest); }

  .thread-rail { position: relative; }

  .rail-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--line-2);
    overflow: visible;
  }

  .rail-motes {
    position: absolute;
    top: -12px;
    left: 0; right: 0;
    height: 24px;
    overflow: hidden;
    pointer-events: none;
  }

  .mote {
    position: absolute;
    top: 1px;
    width: 22px; height: 22px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1.5px var(--bg), 0 1px 3px rgba(0,0,0,0.18);
    animation-name: moteRun;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .mote-flag { display: block; width: 100%; height: 100%; }

  @keyframes moteRun {
    from { left: -8%; opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    to   { left: 104%; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) { .mote { animation: none; display: none; } }

  .rail-line i {
    display: block;
    height: 100%;
    transform: scaleX(var(--draw, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(26,135,84,0.25), var(--accent));
  }

  .thread-nodes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.9rem, 2vw, 1.5rem);
    text-align: left;
  }

  .tnode {
    position: relative;
    padding-top: 2.6rem;
    opacity: var(--o, 0);
    transform: translateY(calc(20px * (1 - var(--o, 0))));
  }

  .tdot {
    position: absolute;
    top: -4.5px; left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(26,135,84, 0.12);
  }

  .tstem {
    position: absolute;
    top: 4px; left: 4px;
    width: 1px;
    height: 2.3rem;
    background: linear-gradient(var(--accent), rgba(26,135,84,0.08));
  }

  .tcard {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(170deg, rgba(26,135,84,0.05), var(--surface) 62%);
    padding: 1.15rem 1.2rem 1.3rem;
    height: 100%;
  }

  .tbadge {
    display: inline-grid;
    place-items: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    background: rgba(0, 0, 0, 0.03);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.85rem;
  }

  .tcard b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: 0.5rem;
  }

  .tcard p { font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }

  .thread-close {
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2.2vw, 1.75rem);
    letter-spacing: -0.03em;
    color: var(--ink-2);
    opacity: var(--o, 0);
    transform: translateY(calc(16px * (1 - var(--o, 0))));
  }

  .thread-close em { font-style: normal; color: var(--forest); }

  /* ---------- blog rail ---------- */

  .blog-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(262px, 1fr);
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .blog-rail > * { scroll-snap-align: start; }
  .blog-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .post {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 180ms ease, transform 180ms ease;
  }

  .post:hover { border-color: var(--line-2); transform: translateY(-4px); }

  .post-art {
    position: relative;
    height: 116px;
    background:
      radial-gradient(circle at 22% 30%, rgba(26,135,84,0.10) 0%, transparent 58%),
      linear-gradient(160deg, #EEF1EC, #F8F9F6);
  }

  .post:nth-child(2) .post-art { background: radial-gradient(circle at 76% 40%, rgba(26,135,84,0.09) 0%, transparent 58%), linear-gradient(200deg, #EDF0EB, #F8F9F6); }
  .post:nth-child(3) .post-art { background: radial-gradient(circle at 50% 70%, rgba(26,135,84,0.10) 0%, transparent 58%), linear-gradient(140deg, #EFF2ED, #F8F9F6); }
  .post:nth-child(4) .post-art { background: radial-gradient(circle at 30% 68%, rgba(26,135,84,0.08) 0%, transparent 55%), linear-gradient(180deg, #ECEFEA, #F8F9F6); }
  .post:nth-child(5) .post-art { background: radial-gradient(circle at 68% 26%, rgba(26,135,84,0.09) 0%, transparent 55%), linear-gradient(220deg, #EEF1EC, #F8F9F6); }

  .post-art span {
    position: absolute;
    left: 0.85rem; bottom: 0.85rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--line-2);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  .post-body { padding: 1.2rem 1.3rem 1.35rem; display: flex; flex-direction: column; flex: 1; gap: 0.6rem; }
  .post h3 { font-size: 1.08rem; letter-spacing: -0.03em; line-height: 1.24; }
  .post p { font-size: 0.88rem; color: var(--ink-2); }

  .post .meta {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.57rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .post .meta em { font-style: normal; color: var(--ink-2); }

  .rail-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .rail-hint span { margin-right: auto; }

  .rail-hint button {
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    width: 2.3rem; height: 2.3rem;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: var(--body);
    transition: border-color 140ms ease, color 140ms ease;
  }

  .rail-hint button:hover { border-color: var(--forest); color: var(--forest); }

  /* ---------- footer ---------- */

  footer { background: var(--bg-2); border-top: 1px solid var(--line); }

  .foot-top {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 2rem;
    padding-block: clamp(2.75rem, 5vw, 4rem) 2.5rem;
  }

  @media (max-width: 980px) { .foot-top { grid-template-columns: 1fr 1fr 1fr; } }
  @media (max-width: 620px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

  .foot-brand .mark { display: inline-block; margin-bottom: 1rem; }

  .foot-brand address {
    font-style: normal;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--ink-2);
  }

  .foot-brand address strong { color: var(--ink); font-weight: 600; }

  .foot-brand address a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
  .foot-brand address a:hover { color: var(--forest); border-color: var(--forest); }

  .socials { margin-top: 1.6rem; }

  .socials-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.65rem;
  }

  .social-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.55rem; }

  .social {
    display: inline-grid;
    place-items: center;
    width: 2.3rem; height: 2.3rem;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--bg);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }

  .social svg { width: 1.05rem; height: 1.05rem; display: block; }

  .social:hover {
    border-color: var(--line);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .foot-col h4 {
    margin: 0 0 0.95rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .foot-col ul { margin: 0; padding: 0; list-style: none; }
  .foot-col li { margin-bottom: 0.52rem; }
  .foot-col a { font-size: 0.87rem; color: var(--ink-2); text-decoration: none; transition: color 140ms ease; }
  .foot-col a:hover { color: var(--forest); }

  .foot-legal { border-top: 1px solid var(--line); padding-block: 1.9rem; }
  .foot-disclose {
    font-size: 0.95rem !important; font-weight: 500; color: var(--ink) !important;
    line-height: 1.55; padding-left: 0.9rem; border-left: 2px solid var(--emerald);
    margin-bottom: 1.5rem !important; max-width: 60ch;
  }

  .foot-legal p {
    font-size: 0.78rem;
    line-height: 1.75;
    color: var(--ink-3);
    max-width: none;
    margin-bottom: 0.9rem;
    text-wrap: pretty;
  }

  .foot-legal p:last-child { margin-bottom: 0; }
  .foot-legal strong { color: var(--ink-2); font-weight: 600; }

  .fill { color: var(--ink-2); border-bottom: 1px dotted var(--line-2); font-family: var(--mono); font-size: 0.73rem; }
  .legal-link { color: var(--forest); text-decoration: none; border-bottom: 1px solid currentColor; }
  .legal-link:hover { color: var(--ink); }

  .foot-base {
    border-top: 1px solid var(--line);
    padding-block: 1.5rem 2.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--ink-3);
  }

  .foot-base nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  .foot-base a { color: var(--ink-3); text-decoration: none; }
  .foot-base a:hover { color: var(--forest); }


  /* ---------- content pages ---------- */

  .page-hero {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
    overflow: hidden;
  }

  .page-hero::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 160%;
    background: radial-gradient(48% 46% at 22% 26%, var(--glow) 0%, transparent 66%);
    pointer-events: none;
  }

  .page-hero > * { position: relative; z-index: 1; }

  .crumbs {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1.5rem;
  }

  .crumbs a { text-decoration: none; }
  .crumbs a:hover { color: var(--forest); }

  .page-top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (max-width: 940px) { .page-top { grid-template-columns: 1fr; } }

  .page-top h1 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); letter-spacing: -0.04em; }
  .page-top .lede { margin-top: 1.2rem; font-size: 1.08rem; color: var(--ink-2); max-width: 52ch; }
  .page-top .actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

  .ng-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: var(--surface);
  }

  .ng-badge .flag { width: 18px; height: 12px; }

  .hl-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
  }

  @media (max-width: 720px) { .hl-row { grid-template-columns: 1fr; } }

  .hl {
    border-left: 2px solid var(--accent);
    padding: 0.2rem 0 0.2rem 1.1rem;
  }

  .hl b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .hl span { display: block; margin-top: 0.25rem; font-size: 0.88rem; color: var(--ink-2); }

  .feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
  }

  .feat {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 1.35rem 1.4rem 1.5rem;
    transition: border-color 170ms ease, transform 170ms ease;
  }

  .feat:hover { border-color: var(--forest); transform: translateY(-3px); }
  .feat h3 { font-size: 1.12rem; letter-spacing: -0.03em; margin-bottom: 0.55rem; }
  .feat p { font-size: 0.92rem; color: var(--ink-2); }

  .steps-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
  }

  .stepc { padding: 1.6rem 1.6rem 1.7rem 0; border-right: 1px solid var(--line); }
  .stepc:last-child { border-right: 0; }

  @media (max-width: 820px) {
    .stepc { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
    .stepc:last-child { border-bottom: 0; }
  }

  .stepc .n {
    display: inline-grid;
    place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--forest);
    font-family: var(--mono);
    font-size: 0.68rem;
    margin-bottom: 0.9rem;
  }

  .stepc h3 { font-size: 1.05rem; letter-spacing: -0.03em; margin-bottom: 0.45rem; }
  .stepc p { font-size: 0.9rem; color: var(--ink-2); }

  .spec-wrap { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

  .spec {
    border-top: 1px solid var(--line-2);
    display: grid;
  }

  .spec-row {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 1.5rem;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.94rem;
  }

  @media (max-width: 700px) { .spec-row { grid-template-columns: 1fr; gap: 0.25rem; } }

  .spec-row dt {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 0.25rem;
  }

  .spec-row dd { margin: 0; color: var(--ink-2); }
  .spec-row dd b { color: var(--ink); font-weight: 600; }

  .faq { border-top: 1px solid var(--line-2); padding-bottom: clamp(3rem, 6vw, 4.5rem); }

  .faq details { border-bottom: 1px solid var(--line); }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.15rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.03em;
    color: var(--ink);
  }

  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--mono); color: var(--forest); font-size: 1.1rem; }
  .faq details[open] summary::after { content: "\2212"; }
  .faq p { padding-bottom: 1.2rem; font-size: 0.94rem; color: var(--ink-2); max-width: var(--measure); }

  .page-cta {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, rgba(26,135,84,0.06), var(--surface) 60%);
    padding: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    display: grid;
    gap: 1rem;
    justify-items: start;
  }

  .page-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.035em; max-width: 22ch; }
  .page-cta p { color: var(--ink-2); max-width: 54ch; }

  /* ---- page visuals ---- */

  .pv {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 1.35rem 1.4rem 1.5rem;
  }

  .pv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .pv-rows { display: grid; }

  .pv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.93rem;
    color: var(--ink-2);
  }

  .pv-row:last-child { border-bottom: 0; }
  .pv-row b { color: var(--ink); font-family: var(--mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
  .pv-row .l { display: flex; align-items: center; gap: 0.6rem; }

  .swapbox { display: grid; gap: 0.5rem; padding-top: 1rem; }

  .swapfield {
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--bg);
    padding: 0.7rem 0.9rem 0.8rem;
  }

  .swapfield label {
    display: block;
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.4rem;
  }

  .swapctl { display: flex; align-items: center; gap: 0.75rem; }

  .swapctl select {
    flex: none;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
  }

  .swapctl input,
  .swapctl output {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: right;
    font-family: var(--mono);
    font-size: 1.25rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    padding: 0;
  }

  .swapctl input:focus { outline: none; }
  .swapfield.to { border-color: var(--forest); background: rgba(26,135,84,0.04); }
  .swapfield.to output { color: var(--forest); font-weight: 500; }

  #sw-flip { cursor: pointer; font-family: var(--body); }

  .swapnote {
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    color: var(--ink-3);
  }

  .rates-wrap { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

  .rates { overflow-x: auto; border-top: 1px solid var(--line-2); }

  .rates table { width: 100%; min-width: 640px; border-collapse: collapse; }

  .rates th, .rates td {
    text-align: left;
    padding: 0.9rem 1.25rem 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
    color: var(--ink-2);
    vertical-align: top;
  }

  .rates thead th {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-block: 0.75rem;
  }

  .rates tbody th {
    font-family: var(--body);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
  }

  .rates tbody tr:hover td, .rates tbody tr:hover th { background: var(--surface); }

  .rates-note { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-3); max-width: var(--measure); }


  .swapside {
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--bg);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .swapside span { display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink); }
  .swapside b { font-family: var(--mono); font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
  .swapside.to b { color: var(--forest); }

  .swaparrow {
    justify-self: center;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--forest);
    font-size: 0.9rem;
    margin-block: -0.15rem;
    background: var(--bg);
  }

  .swapmeta { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.9rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

  .pv-card {
    aspect-ratio: 1.586;
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
    border-radius: 16px;
    background: linear-gradient(150deg, #14201A 0%, #070908 68%);
    border: 1px solid #1E2823;
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  }

  .pv-card::after {
    content: "";
    position: absolute;
    right: -60px; bottom: -60px;
    width: 165px; height: 165px;
    border: 1px solid #35D08A;
    border-radius: 50%;
    opacity: 0.4;
  }

  .pv-card .t { display: flex; justify-content: space-between; align-items: flex-start; }
  .pv-card .nm { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.04em; color: #F2F5F2; }
  .pv-card .chip { width: 34px; height: 26px; border-radius: 4px; background: linear-gradient(140deg, #D8BC6A, #9C7C22); }
  .pv-card .num { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; color: #C4C9C1; }
  .pv-card .f { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7E8177; }

  .pv-code {
    border-radius: var(--r-lg);
    border: 1px solid #1E2823;
    background: #0A0C0B;
    padding: 1.2rem 1.3rem 1.35rem;
    overflow-x: auto;
  }

  .pv-code .bar { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
  .pv-code .bar i { width: 9px; height: 9px; border-radius: 50%; background: #2A302C; }
  .pv-code pre { margin: 0; font-family: var(--mono); font-size: 0.76rem; line-height: 1.7; color: #C4C9C1; }
  .pv-code .k { color: #35D08A; }
  .pv-code .s { color: #E4C77B; }
  .pv-code .c { color: #6B736C; }

  .checklist { display: grid; gap: 0.7rem; padding-top: 1rem; }

  .checkrow {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    font-size: 0.92rem;
    color: var(--ink-2);
  }

  .checkrow i {
    width: 1.15rem; height: 1.15rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--forest);
    display: grid; place-items: center;
    font-size: 0.62rem;
    font-style: normal;
    margin-top: 0.15rem;
  }

  .checkrow b { color: var(--ink); font-weight: 600; }


  /* ---------- architecture + flow ---------- */

  .arch {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    overflow-x: auto;
  }

  .arch svg { width: 100%; min-width: 660px; height: auto; display: block; }

  .a-box { fill: var(--bg); stroke: var(--line-2); }
  .a-box-accent { fill: rgba(26,135,84,0.07); stroke: var(--accent); }
  .a-box-bank { fill: rgba(26,135,84,0.14); stroke: var(--accent); }
  .a-line { stroke: var(--line-2); fill: none; stroke-width: 1.2; }
  .a-line-accent { stroke: var(--accent); fill: none; stroke-width: 1.4; }
  .a-t { fill: var(--ink); font-family: var(--body); font-size: 11px; font-weight: 600; }
  .a-s { fill: var(--ink-3); font-family: var(--mono); font-size: 7.5px; letter-spacing: 1.1px; text-transform: uppercase; }
  .a-a { fill: var(--accent); font-family: var(--body); font-size: 11px; font-weight: 600; }

  .arch-note { margin-top: 1.1rem; font-size: 0.85rem; color: var(--ink-3); max-width: var(--measure); padding-bottom: clamp(3rem, 6vw, 4.5rem); }

  .flow {
    list-style: none;
    margin: 0;
    padding: 0 0 clamp(3rem, 6vw, 4.5rem);
    position: relative;
    counter-reset: fstage;
  }

  .fstage {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 1.25rem;
    padding-bottom: 2.1rem;
    counter-increment: fstage;
  }

  .fstage:last-child { padding-bottom: 0; }

  .fstage::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 2.4rem;
    bottom: -0.2rem;
    width: 1px;
    background: var(--line-2);
  }

  .fstage:last-child::before { display: none; }

  .fmark {
    position: relative;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: var(--bg);
    display: grid;
    place-items: center;
  }

  .fmark::after {
    content: counter(fstage);
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--forest);
  }

  .fbody { padding-top: 0.15rem; max-width: 66ch; }

  .fmeta {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.4rem;
  }

  .fbody h3 { font-size: 1.15rem; letter-spacing: -0.032em; margin-bottom: 0.5rem; }
  .fbody p { font-size: 0.95rem; line-height: 1.68; color: var(--ink-2); }

  /* ---------- legal documents ---------- */

  .legal-head { max-width: 60ch; }
  .legal-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); letter-spacing: -0.04em; }
  .legal-head .lede { margin-top: 1.1rem; font-size: 1.06rem; color: var(--ink-2); }

  .legal-meta {
    margin-top: 1.4rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .legal-wrap { padding-bottom: clamp(3rem, 6vw, 5rem); }

  .legal-short {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    background: var(--surface);
    padding: 1.5rem 1.7rem 1.6rem;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    max-width: 78ch;
  }

  .legal-short h2 {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 1rem;
  }

  .legal-short ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.55rem; }
  .legal-short li { font-size: 0.95rem; color: var(--ink); }
  .legal-short-note { margin-top: 1.1rem; font-size: 0.82rem; color: var(--ink-3); }

  .legal-body {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  @media (max-width: 940px) { .legal-body { grid-template-columns: 1fr; } }

  .legal-toc { position: sticky; top: 6rem; }

  @media (max-width: 940px) {
    .legal-toc { position: static; border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.3rem; background: var(--surface); }
  }

  .legal-toc h2 {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.9rem;
  }

  .legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; counter-reset: none; }
  .legal-toc a { font-size: 0.87rem; color: var(--ink-2); text-decoration: none; }
  .legal-toc a:hover { color: var(--forest); }

  .legal-doc { max-width: 72ch; }

  .lsec { padding-bottom: 2.1rem; }
  .lsec + .lsec { border-top: 1px solid var(--line); padding-top: 2.1rem; }

  .lsec h2 {
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 1.32rem;
    letter-spacing: -0.032em;
    margin-bottom: 1rem;
    scroll-margin-top: 6rem;
  }

  .lsec h2 span {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--forest);
  }

  .lsec p { font-size: 0.96rem; line-height: 1.72; color: var(--ink-2); margin-bottom: 0.9rem; }
  .lsec p:last-child { margin-bottom: 0; }
  .lsec strong { color: var(--ink); font-weight: 600; }

  .lsec ul { margin: 0 0 0.9rem; padding-left: 1.2rem; display: grid; gap: 0.55rem; }
  .lsec li { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); }
  .lsec li::marker { color: var(--forest); }

  .legal-foot {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink-3);
  }

  /* ---------- open account flow ---------- */

  .flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.2rem;
    border-bottom: 1px solid var(--line);
  }

  .flow-exit { font-size: 0.87rem; color: var(--ink-2); text-decoration: none; }
  .flow-exit:hover { color: var(--forest); }

  .flow-body {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
    align-items: start;
    min-height: 62vh;
  }

  @media (max-width: 860px) { .flow-body { grid-template-columns: 1fr; } }
  .flow-body.solo { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }

  .rail { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
  .rail li { position: relative; padding: 0 0 1.45rem 1.4rem; font-size: 0.9rem; color: var(--ink-3); }
  .rail li:last-child { padding-bottom: 0; }

  .rail li::before {
    content: "";
    position: absolute;
    left: -4px; top: 0.5em;
    width: 7px; height: 7px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 50%;
  }

  .rail li[data-state="done"]::before { background: var(--accent); border-color: var(--forest); }
  .rail li[data-state="current"]::before { background: var(--accent); border-color: var(--forest); box-shadow: 0 0 0 4px rgba(53,208,138,0.16); }
  .rail li[data-state="current"] { color: var(--ink); font-weight: 500; }
  .rail li[data-state="done"] { color: var(--ink-2); }

  .rail .step-no {
    display: block;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.18rem;
  }

  .step h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
  .step > p.sub { color: var(--ink-2); margin-top: 0.95rem; max-width: 52ch; }

  .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
  @media (max-width: 700px) { .choices { grid-template-columns: 1fr; } }

  .choice {
    text-align: left;
    padding: 1.4rem 1.45rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--body);
    transition: border-color 150ms ease, background 150ms ease;
  }

  .choice:hover { border-color: var(--line-2); }
  .choice[aria-pressed="true"] { border-color: var(--forest); background: rgba(53,208,138,0.07); }

  .choice strong {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: 0.45rem;
  }

  .choice span { font-size: 0.9rem; color: var(--ink-2); }
  /* [graft:OPEN-CHOICE-ROWS] the two choices as full-width rows: icon, name,
     the sentence on ONE line, an arrow. The row is the button. */
  .choices.rows { grid-template-columns: 1fr; gap: 0.85rem; margin-top: 1.8rem; }
  .choices.rows .choice { display: flex; align-items: center; gap: 1.1rem; padding: 1.05rem 1.3rem 1.05rem 1.1rem; }
  .choices.rows .ch-ic { flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(53,208,138,0.13); color: var(--forest); font-size: 1rem; transition: background 150ms ease; }
  .choices.rows .choice[aria-pressed="true"] .ch-ic { background: var(--forest); color: #fff; }
  .choices.rows .ch-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; flex: 1; font-size: 1rem; color: var(--ink); }
  .choices.rows .choice strong { display: block; margin: 0; font-size: 1.18rem; line-height: 1.2; }
  .choices.rows .ch-body > span { display: block; font-size: 0.92rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .choices.rows .ch-go { flex: none; color: var(--ink-3); font-size: 1rem; transition: transform 150ms ease, color 150ms ease; }
  .choices.rows .choice:hover .ch-go, .choices.rows .choice[aria-pressed="true"] .ch-go { color: var(--forest); transform: translateX(4px); }
  @media (max-width: 1100px) { .choices.rows .ch-body > span { white-space: normal; } }

  .fields { display: grid; gap: 1.2rem; margin-top: 2rem; max-width: 34rem; }
  /* [graft:OPEN-BIZ-CARD] the business, forming beside the form */
  @media (min-width: 1200px) {
    .step[data-step="2"] { display: grid; grid-template-columns: minmax(0, 34rem) minmax(17rem, 23rem); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
    .step[data-step="2"] > :not(.fields):not(.biz-card) { grid-column: 1 / -1; }
    .step[data-step="2"] > .fields { grid-column: 1; }
    .step[data-step="2"] > .biz-card { grid-column: 2; position: sticky; top: 5.5rem; }
  }
  .biz-card { margin-top: 2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem 1.4rem 1.2rem; box-shadow: 0 18px 40px rgba(11, 81, 55, 0.07); }
  .bc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
  .bc-eyebrow { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 0.5rem; }
  .bc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald, #35D08A); box-shadow: 0 0 0 0 rgba(53, 208, 138, 0.45); animation: bcpulse 2.2s ease-out infinite; }
  @keyframes bcpulse { from { box-shadow: 0 0 0 0 rgba(53, 208, 138, 0.45); } to { box-shadow: 0 0 0 10px rgba(53, 208, 138, 0); } }
  .bc-mark { color: var(--forest); opacity: 0.9; display: inline-flex; }
  .bc-name { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
  .bc-meta { margin-top: 0.3rem; font-size: 0.88rem; color: var(--ink-2); }
  .bc-sector { margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0.75rem 0.38rem 0.6rem; border-radius: 999px; background: rgba(53, 208, 138, 0.12); color: var(--forest); font-size: 0.86rem; font-weight: 600; }
  .bc-sector .bc-ic { font-size: 1rem; line-height: 1; }
  .bc-addr { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
  .bc-addr .bc-k, .bc-rows dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .bc-addr code { font-family: var(--mono); font-size: 0.86rem; color: var(--ink); overflow-wrap: anywhere; }
  .bc-rows { margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.55rem; }
  .bc-rows > div { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.6rem; align-items: baseline; }
  .bc-rows > div[hidden] { display: none; }
  .bc-rows dd { margin: 0; font-size: 0.86rem; color: var(--ink-2); }
  .bc-rows dd.on { color: var(--forest); font-weight: 600; }
  .bc-note { margin: 0.9rem 0 0; font-size: 0.74rem; color: var(--ink-3); }
  .bc-v { transition: opacity 220ms ease, transform 220ms ease; }
  .bc-v.off { opacity: 0.42; }
  .bc-v.pop { transform: translateY(-2px); }
  @media (prefers-reduced-motion: reduce) { .bc-dot { animation: none; } .bc-v { transition: none; } }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  @media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

  .field label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.5rem;
  }

  .field input, .field select {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.95rem;
  }

  .field input::placeholder { color: var(--ink-3); }
  .field .hint { margin-top: 0.45rem; font-size: 0.8rem; color: var(--ink-3); }

  .checks { display: grid; gap: 0.85rem; margin-top: 2rem; max-width: 38rem; }

  .check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
  }

  .check input { margin-top: 0.25rem; accent-color: var(--forest); width: 1rem; height: 1rem; }
  .check strong { display: block; font-size: 0.94rem; font-weight: 600; margin-bottom: 0.18rem; color: var(--ink); }
  .check span { font-size: 0.86rem; color: var(--ink-2); }

  .review { border-top: 1px solid var(--line-2); margin-top: 2rem; max-width: 38rem; }

  .review-row {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.25rem;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.94rem;
  }

  @media (max-width: 620px) { .review-row { grid-template-columns: 1fr; gap: 0.2rem; } }

  .review-row dt {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 0.3rem;
  }

  .review-row dd { margin: 0; color: var(--ink); }

  .flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--line);
    max-width: 38rem;
  }

  .back-link {
    background: none;
    border: 0;
    padding: 0.5rem 0.6rem;
    font-family: var(--body);
    font-size: 0.9rem;
    color: var(--ink-2);
    cursor: pointer;
  }

  .back-link:hover { color: var(--forest); }

  .flow-note {
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.7;
    color: var(--ink-3);
    max-width: 38rem;
  }

  .done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--forest);
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
  }


  .phone-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    overflow: hidden;
    max-width: 22rem;
  }

  .phone-prefix,
  .phone-prefix-edit {
    display: flex;
    align-items: center;
    padding: 0.8rem 0.85rem;
    font-family: var(--mono);
    font-size: 0.92rem;
    color: var(--ink-2);
    background: rgba(0,0,0,0.03);
    border: 0;
    border-right: 1px solid var(--line-2);
    white-space: nowrap;
  }

  .phone-prefix-edit { width: 4.6rem; color: var(--ink); }
  .phone-prefix-edit:focus { outline: none; background: rgba(26,135,84,0.06); }

  .phone-row input#f-phone {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding-left: 0.8rem;
  }

  .phone-row input#f-phone:focus { outline: none; }
  .phone-row:focus-within { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(26,135,84,0.1); }

  .subhead {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--line);
  }

  .field textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.95rem;
    resize: vertical;
  }

  .field textarea::placeholder { color: var(--ink-3); }

  .lookup { position: relative; }

  .lookup-list {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% - 1.6rem);
    z-index: 5;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    box-shadow: 0 14px 30px rgba(0,0,0,0.12);
    max-height: 15rem;
    overflow-y: auto;
  }

  .lookup-list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-family: var(--body);
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
  }

  .lookup-list button:last-child { border-bottom: 0; }
  .lookup-list button:hover, .lookup-list button:focus { background: var(--surface); }
  .lookup-list b { display: block; font-weight: 600; }
  .lookup-list span { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); }



  .icp {
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--surface);
    padding: 1.15rem 1.25rem 1.25rem;
    margin-top: -0.35rem;
  }

  .icp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
  .icp-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.03em; color: var(--ink); }

  .icp-by {
    font-family: var(--mono);
    font-size: 0.57rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 0.25rem;
  }

  .icp-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--forest);
    white-space: nowrap;
  }

  .icp-state::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.2s ease-in-out infinite;
  }

  .icp-state.done::before { animation: none; }
  @media (prefers-reduced-motion: reduce) { .icp-state::before { animation: none; } }

  .icp-list { display: grid; gap: 0.55rem; }

  .icp-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 0.8rem 0.9rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
    animation: reqIn 320ms cubic-bezier(0.22,0.8,0.3,1) both;
  }

  .icp-item:hover { border-color: var(--line-2); }
  .icp-item.is-on { border-color: var(--forest); background: rgba(26,135,84,0.05); }
  .icp-item input { margin-top: 0.2rem; accent-color: var(--forest); width: 1rem; height: 1rem; }
  .icp-item b { display: block; font-size: 0.93rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
  .icp-item span { display: block; font-size: 0.85rem; color: var(--ink-2); }

  .icp-item em {
    display: block;
    margin-top: 0.4rem;
    font-style: normal;
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .icp-note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-3); }

  .officers { display: grid; gap: 0.55rem; }
  .officers-q { font-size: 0.97rem; font-weight: 600; color: var(--ink); }

  .officers-src {
    font-family: var(--mono);
    font-size: 0.57rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: -0.3rem;
    margin-bottom: 0.3rem;
  }

  .officer-list { display: grid; gap: 0.5rem; }

  .officer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
  }

  .officer:hover { border-color: var(--forest); }
  .officer.is-on { border-color: var(--forest); background: rgba(26,135,84,0.05); }
  .officer input { accent-color: var(--forest); width: 1rem; height: 1rem; }
  .officers-change { justify-self: start; padding: 0.3rem 0; font-size: 0.85rem; }

  .officer b { display: block; font-family: var(--body); font-size: 0.94rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .officer span { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.15rem; }


  .otp { display: flex; gap: 0.6rem; margin-top: 2rem; flex-wrap: wrap; }

  .otp input {
    width: 3.1rem; height: 3.6rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 1.4rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
  }

  .otp input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(26,135,84,0.12); }
  .otp.is-bad input { border-color: #B4231F; }

  @media (max-width: 480px) { .otp input { width: 2.6rem; height: 3.1rem; font-size: 1.2rem; } }

  .otp-msg { margin-top: 0.9rem; font-size: 0.88rem; }
  .otp-msg.bad { color: #B4231F; }
  .otp-msg.good { color: var(--forest); }

  .otp-resend {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.1rem;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    color: var(--ink-3);
  }

  .otp-resend button { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .otp-resend button:disabled { opacity: 0.45; cursor: default; }

  .pw-meter { height: 3px; border-radius: 999px; background: var(--line); margin-top: 0.55rem; overflow: hidden; }
  .pw-meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 260ms ease, background 260ms ease; }

  .fields-tight { gap: 0.9rem; margin-top: 1.5rem; }
  .pw-rules { margin: 0.7rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; }
  @media (max-width: 560px) { .pw-rules { grid-template-columns: 1fr; } }

  .pw-rules li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.82rem;
    color: var(--ink-3);
    transition: color 180ms ease;
  }

  .pw-rules li::before {
    content: "\00d7";
    position: absolute;
    left: 0.25rem;
    color: var(--ink-3);
    font-family: var(--mono);
  }

  .pw-rules li.ok { color: var(--ink-2); }
  .pw-rules li.ok::before { content: "\2713"; color: var(--forest); }

  .next-in { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; max-width: 38rem; }

  .next-in li {
    padding: 0.9rem 1.05rem 0.95rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--surface);
  }

  .next-in b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
  .next-in span { display: block; font-size: 0.87rem; line-height: 1.55; color: var(--ink-2); }

  /* ---------- chat ---------- */

  .chat-launcher {
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    font-family: var(--body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(26,135,84,0.28);
  }

  .chat-launcher::before {
    content: "";
    width: 7px; height: 7px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    animation: pulse 2.4s ease-in-out infinite;
  }

  .chat-panel {
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 61;
    width: min(374px, calc(100vw - 2.7rem));
    height: min(560px, calc(100vh - 2.7rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 22px 56px rgba(0,0,0,0.16);
  }

  .chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
  }

  .chat-who { display: flex; align-items: center; gap: 0.75rem; }

  .chat-avatar {
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--forest);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 0.62rem;
  }

  .chat-who strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.03em; color: var(--ink); }

  .chat-who span {
    font-family: var(--mono);
    font-size: 0.54rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--forest);
  }

  .chat-close {
    background: none;
    border: 0;
    color: var(--ink-3);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    font-family: var(--body);
  }

  .chat-close:hover { color: var(--ink); }

  .chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.9rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: #EFEDE6;
    background-image:
      radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
      radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px;
    background-position: 0 0, 13px 13px;
  }

  .chat-day {
    align-self: center;
    margin-block: 0.2rem 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.75);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6D7268;
  }

  .msg {
    position: relative;
    font-size: 0.885rem;
    line-height: 1.45;
    padding: 0.5rem 0.7rem 1.05rem;
    max-width: 82%;
    border-radius: 9px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.09);
    color: #10130F;
    word-break: break-word;
  }

  .msg .t {
    position: absolute;
    right: 0.6rem;
    bottom: 0.28rem;
    font-size: 0.58rem;
    color: #7C8177;
    font-variant-numeric: tabular-nums;
  }

  .msg.eva { background: #FFFFFF; align-self: flex-start; border-top-left-radius: 2px; }

  .msg.eva::before {
    content: "";
    position: absolute;
    top: 0; left: -7px;
    border-top: 8px solid #FFFFFF;
    border-left: 8px solid transparent;
  }

  .msg.you { background: #DCF3E1; align-self: flex-end; border-top-right-radius: 2px; }

  .msg.you::before {
    content: "";
    position: absolute;
    top: 0; right: -7px;
    border-top: 8px solid #DCF3E1;
    border-right: 8px solid transparent;
  }

  .msg.you .t::after {
    content: " \2713\2713";
    color: #34B7F1;
    letter-spacing: -1px;
  }

  .typing {
    align-self: flex-start;
    background: #FFFFFF;
    border-radius: 9px;
    border-top-left-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.09);
    padding: 0.7rem 0.8rem;
    display: flex;
    gap: 0.28rem;
    position: relative;
  }

  .typing::before {
    content: "";
    position: absolute;
    top: 0; left: -7px;
    border-top: 8px solid #FFFFFF;
    border-left: 8px solid transparent;
  }

  .typing i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #9AA096;
    animation: bubbleDot 1.25s ease-in-out infinite;
  }

  .typing i:nth-child(2) { animation-delay: 0.18s; }
  .typing i:nth-child(3) { animation-delay: 0.36s; }

  @keyframes bubbleDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-4px); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: 0.7; } }

  .chat-form { display: flex; border-top: 1px solid var(--line); }

  .chat-form input {
    flex: 1;
    min-width: 0;
    padding: 0.95rem 1.05rem;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.9rem;
  }

  .chat-form input::placeholder { color: var(--ink-3); }
  .chat-form input:focus { outline: none; }

  .chat-form button {
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--forest);
    padding: 0 1.2rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .chat-form button:hover { background: var(--surface-2); }

  .chat-fine {
    padding: 0.65rem 1.1rem 0.85rem;
    font-family: var(--mono);
    font-size: 0.54rem;
    line-height: 1.6;
    color: var(--ink-3);
    border-top: 1px solid var(--line);
  }

  /* ---------------- log in ---------------- */

  .login-wrap { max-width: 27rem; margin: 0 auto; padding: 1rem var(--pad) 5rem; }
  .login-wrap h1 {
    font-family: var(--display);
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    font-weight: 500; letter-spacing: -0.035em; line-height: 1.14;
    margin: 0 0 0.5rem;
  }
  .login-wrap .sub { font-size: 0.95rem; color: var(--ink-2); margin: 0 0 1.7rem; }

  .lg-btn { width: 100%; justify-content: center; }
  .lg-btn + .lg-btn { margin-top: 0.6rem; }
  .lg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .lg-btn:disabled:hover { background: var(--accent); border-color: var(--forest); transform: none; }
  .lg-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  .lg-or {
    display: flex; align-items: center; gap: 0.9rem; margin: 1.2rem 0;
    font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .lg-or::before, .lg-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

  .lg-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; font-size: 0.86rem; }
  .lg-link {
    background: none; border: 0; padding: 0; font: inherit;
    color: var(--forest); font-weight: 600; cursor: pointer;
  }
  .lg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .lg-muted { color: var(--ink-3); }

  .lg-who {
    display: flex; align-items: center; gap: 0.8rem;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--bg-2); padding: 0.75rem 0.9rem; margin-bottom: 1.3rem;
  }
  .lg-av {
    width: 2.3rem; height: 2.3rem; flex: none; border-radius: 9px;
    background: rgba(26,135,84,0.08); color: var(--forest);
    display: grid; place-items: center;
    font-family: var(--display); font-size: 0.82rem; font-weight: 600;
  }
  .lg-who b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
  .lg-who div span { display: block; font-family: var(--mono); font-size: 0.71rem; color: var(--ink-3); }
  .lg-who .lg-link { margin-left: auto; font-size: 0.8rem; }

  .lg-spaces { display: grid; gap: 0.5rem; margin-bottom: 1.2rem; }
  .lg-space {
    display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
    border: 1px solid var(--line-2); border-radius: var(--r);
    background: var(--bg); padding: 0.72rem 0.85rem; font: inherit; cursor: pointer;
  }
  .lg-space:hover { border-color: var(--forest); background: rgba(26,135,84,0.05); }
  .lg-space b { display: block; font-family: var(--body); font-size: 0.9rem; font-weight: 600; color: var(--ink); }
  .lg-space div { min-width: 0; }
  .lg-space div span { display: block; font-family: var(--mono); font-size: 0.71rem; color: var(--ink-3); }
  .lg-space i { margin-left: auto; font-style: normal; color: var(--forest); }

  .lg-code { display: flex; gap: 0.5rem; }
  .lg-code input {
    width: 100%; max-width: 3.2rem; aspect-ratio: 1 / 1; text-align: center;
    font-family: var(--mono); font-size: 1.2rem;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: var(--bg); color: var(--ink); padding: 0;
  }
  .lg-code input:focus { outline: none; border-color: var(--forest); }
  .lg-code.bad input { border-color: #A81F1B; background: rgba(168,31,27,0.06); }
  .lg-code.bad { animation: lgshake 0.32s; }
  @keyframes lgshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

  .lg-bad { color: #A81F1B; }

  .lg-mid { text-align: center; padding: 0.5rem 0 0.2rem; }
  .lg-tick {
    width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem; border-radius: 50%;
    background: var(--accent); display: grid; place-items: center;
    animation: lgpop 0.45s cubic-bezier(0.2, 1.4, 0.5, 1);
  }
  .lg-tick svg { width: 1.6rem; height: 1.6rem; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  @keyframes lgpop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .lg-domain {
    display: inline-block; font-family: var(--mono); font-size: 0.85rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.28rem 0.85rem; margin-bottom: 1.2rem;
  }

  .lg-spin {
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
    animation: lgspin 0.7s linear infinite; display: inline-block;
  }
  @keyframes lgspin { to { transform: rotate(360deg); } }

  .lg-status {
    display: flex; align-items: center; gap: 0.45rem;
    margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .lg-status i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    animation: lgpulse 1.9s ease-in-out infinite;
  }
  @keyframes lgpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  .lg-legal { font-size: 0.78rem; color: var(--ink-3); margin-top: 1.4rem; line-height: 1.55; }
  .lg-legal a { color: var(--ink-2); }

/* ---------- personal: the heartbeat ---------- */
.hb-sec{position:relative;background:linear-gradient(180deg,var(--bg) 0%,var(--mist) 30%,var(--mist) 70%,var(--bg) 100%);overflow:hidden;padding-block:clamp(3.5rem,7vw,6rem)}
.hb-sec::before{content:"";position:absolute;left:62%;top:50%;width:min(820px,90vw);height:min(820px,90vw);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(26,135,84,.16),rgba(26,135,84,0) 62%);pointer-events:none}
.hb-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;position:relative;z-index:1}
.hb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.hb-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:hbDot 1.6s ease-out infinite}
@keyframes hbDot{0%{box-shadow:0 0 0 0 rgba(26,135,84,.5)}70%{box-shadow:0 0 0 9px rgba(26,135,84,0)}100%{box-shadow:0 0 0 0 rgba(26,135,84,0)}}
.hb-copy h2{font-size:clamp(1.9rem,4vw,3.05rem);max-width:14ch}.hb-copy h2 em{font-style:normal;color:var(--accent)}
.hb-lede{color:var(--ink-2);max-width:46ch;margin-top:1.1rem}
.hb-caps{position:relative;min-height:6.2rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line-2)}
.ocap{position:absolute;left:0;right:0;top:1.4rem;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.ocap.on{opacity:1;transform:none}
.ocap b{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em}
.ocap span{display:block;color:var(--ink-2);max-width:44ch;margin-top:.3rem;font-size:.95rem;line-height:1.45}
.hb-dots{display:flex;gap:8px;margin-top:1rem}
[data-set="intl"]{display:none}
html[data-region="uk"] [data-set="ng"],html[data-region="us"] [data-set="ng"],html[data-region="ca"] [data-set="ng"],html[data-region="row"] [data-set="ng"]{display:none}
html[data-region="uk"] .op[data-set="intl"],html[data-region="us"] .op[data-set="intl"],html[data-region="ca"] .op[data-set="intl"],html[data-region="row"] .op[data-set="intl"],html[data-region="uk"] .ocap[data-set="intl"],html[data-region="us"] .ocap[data-set="intl"],html[data-region="ca"] .ocap[data-set="intl"],html[data-region="row"] .ocap[data-set="intl"]{display:block}
html[data-region="uk"] .odot[data-set="intl"],html[data-region="us"] .odot[data-set="intl"],html[data-region="ca"] .odot[data-set="intl"],html[data-region="row"] .odot[data-set="intl"]{display:inline-block}
.odot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--line-2);cursor:pointer;transition:width .3s,background .3s}
.odot.on{width:26px;border-radius:4px;background:var(--accent)}
.hb-cta{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:1.8rem}
.hb-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding-top:10px}
.hb-iphone{position:relative;padding:11px;border-radius:clamp(40px,4vw,56px);background:linear-gradient(160deg,#3a3d3f,#1b1d1f 40%,#2a2d2f 70%,#141617);box-shadow:0 50px 100px -30px rgba(11,81,55,.5),0 0 0 1.5px #0b0c0d,inset 0 0 0 1.5px rgba(255,255,255,.18)}
.hb-iphone::before{content:"";position:absolute;inset:4px;border-radius:inherit;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.ip-btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#2a2d2f,#0f1112);left:-3px}.ip-mute{top:15%;height:26px}.ip-vu{top:23%;height:52px}.ip-vd{top:31%;height:52px}.ip-pwr{left:auto;right:-3px;top:22%;height:84px;background:linear-gradient(270deg,#2a2d2f,#0f1112)}
.hb-phone{position:relative;width:clamp(230px,20vw,300px);aspect-ratio:374/830;border-radius:clamp(30px,3vw,44px);overflow:hidden;background:#0A0A0A}
.op{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.op.front{opacity:1}
.op img{display:block;width:100%;height:100%;object-fit:cover}
.hb-phone::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.hb-title{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem)}.hb-title h2,.hb-title h1{margin:0}
.hero2 .hero-title{display:flex!important;align-items:center;justify-content:flex-start;
  gap:clamp(.9rem,2vw,1.4rem);margin:0 0 clamp(.9rem,1.6vw,1.3rem)}
.hero2 .hero-title h1{flex:0 1 auto;min-width:0}
.hero-title .hb-core{width:clamp(64px,6.4vw,92px);height:clamp(64px,6.4vw,92px)}
@media(max-width:940px){.hero-title{flex-wrap:wrap}}
.hb-core{position:relative;flex:0 0 auto;width:clamp(64px,6vw,84px);height:clamp(64px,6vw,84px);display:flex;align-items:center;justify-content:center;pointer-events:none}
.hb-core .orb{width:100%;height:100%;flex:none;position:relative;z-index:2;border-radius:42% 58% 63% 37%/47% 41% 59% 53%;background:radial-gradient(circle at 38% 32%,#CDE9DA,#1A8754 52%,#0B5137 96%);box-shadow:0 18px 40px -12px rgba(11,81,55,.7),inset 0 2px 8px rgba(255,255,255,.45),inset 0 -7px 12px rgba(8,48,31,.4);animation:orbJelly 6.5s ease-in-out infinite,orbBeat 1.6s ease-in-out infinite}
.hb-core .orb::before{content:"";position:absolute;top:15%;left:19%;width:30%;height:22%;border-radius:60% 50% 55% 45%;background:rgba(255,255,255,.55);filter:blur(1.4px);z-index:2}
.hb-core .orb::after{content:"";position:absolute;inset:0;z-index:1;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23fff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M39.4%2019.6%20A16%2016%200%201%201%2032.4%2010.6'/%3E%3Cpath%20d='M24%2035%20V17.5'/%3E%3Cpath%20d='M24%2024.2%2016.4%2020.2'/%3E%3Cpath%20d='M24%2024.2%2031.6%2020.2'/%3E%3Ccircle%20cx='24'%20cy='15.4'%20r='2.7'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='15.4'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='32.6'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3C/svg%3E") center/64% no-repeat}
@keyframes orbJelly{0%,100%{border-radius:42% 58% 63% 37%/47% 41% 59% 53%}25%{border-radius:58% 42% 40% 60%/63% 57% 43% 37%}50%{border-radius:37% 63% 58% 42%/52% 65% 35% 48%}75%{border-radius:55% 45% 47% 53%/39% 46% 54% 61%}}
@keyframes orbBeat{0%,36%,100%{transform:scale(1)}8%{transform:scale(1.14)}17%{transform:scale(1)}25%{transform:scale(1.09)}}
.hb-core .hring{position:absolute;border:1.5px solid rgba(26,135,84,.28);border-radius:50%;animation:orbRing 3.6s cubic-bezier(.22,1,.36,1) infinite;z-index:1}
.hb-core .hring.b{animation-delay:1.2s}.hb-core .hring.c{animation-delay:2.4s}
@keyframes orbRing{0%{width:64%;height:64%;opacity:.7}100%{width:300%;height:300%;opacity:0}}
.hb-ecg{position:relative;width:100%;height:60px;pointer-events:none}
.hb-ecg svg{position:absolute;inset:0;width:100%;height:100%}
.hb-live{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--accent-2);white-space:nowrap;background:var(--paper);padding:5px 10px;border-radius:999px;border:1px solid var(--line-2)}
.hb-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(26,135,84,.7)}
@media (max-width:940px){.hb-grid{grid-template-columns:1fr;gap:1rem}.hb-stage{order:-1;margin-bottom:1.5rem}.hb-sec::before{left:50%;top:38%}.hb-copy h2{max-width:none}.hb-caps{min-height:4.8rem}}
@media (prefers-reduced-motion:reduce){.hb-core .orb,.hb-core .hring,.hb-eyebrow i{animation:none!important}.op{transition:none}}

/* ---------- proof band: flip to QR ---------- */
.proof{padding-block:0 clamp(2.5rem,5vw,4rem)}
.proof-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;perspective:1600px}
.pf{position:relative;min-height:214px;cursor:pointer;outline:none;border-radius:var(--r)}
.pf-in{position:relative;width:100%;height:100%;min-height:214px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.pf:hover .pf-in,.pf:focus-visible .pf-in,.pf.flip .pf-in{transform:rotateY(180deg)}
.pf-f,.pf-b{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:0 1px 0 rgba(11,81,55,.04),0 14px 30px -24px rgba(11,81,55,.35)}
.pf-f{padding:1.25rem 1.1rem 1rem;display:flex;flex-direction:column;overflow:hidden}
.pf-f::before{content:"";position:absolute;left:1.1rem;top:.85rem;width:22px;height:2px;border-radius:2px;background:var(--accent)}
.pf-f b{display:block;margin-top:.55rem;font-family:var(--display);font-size:clamp(1.02rem,1.4vw,1.28rem);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.pf-f>span{display:block;margin-top:.3rem;font-size:.76rem;line-height:1.4;color:var(--ink-2)}
.pf-hint{margin-top:auto;padding-top:.6rem;font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .25s}
.pf:hover .pf-hint{opacity:0}
.pf-b{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;padding:.9rem;text-align:center;background:linear-gradient(160deg,#FFFFFF,#F4F7F5)}
.pf-qr{flex:0 0 auto;width:96px;height:96px;padding:7px;background:#fff;border-radius:10px;border:1px solid var(--line)}
.pf-qr svg{display:block;width:100%;height:100%}
.pf-bt{display:flex;flex-direction:row;align-items:center;gap:.45rem;min-width:0;flex-wrap:wrap;justify-content:center}
.pf-mk{width:18px;height:18px}.pf-mk svg{width:100%;height:100%}
.pf-bt b{font-family:var(--display);font-size:.95rem;letter-spacing:-.01em;color:var(--ink)}
.pf-bt span:last-child{flex-basis:100%;font-size:.68rem;line-height:1.3;color:var(--ink-2)}
.pf:focus-visible{box-shadow:0 0 0 3px rgba(26,135,84,.35)}
@media (max-width:1100px){.proof-row{grid-template-columns:repeat(3,minmax(0,1fr))}.pf-hint{opacity:1}}
@media (max-width:560px){.proof-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pf-bx{justify-content:flex-start;align-items:stretch;text-align:left;padding:.9rem 1rem;gap:0}
.pf-tick{margin-top:auto;padding-top:.5rem;flex:0 0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pf-tick-in{display:flex;gap:6px;width:max-content;animation:pfTick 26s linear infinite}
.pf-tick-in span{flex:0 0 auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;padding:4px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
@keyframes pfTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pf-fx{display:flex;flex-direction:column;height:100%}
.pf-fxh{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}.pf-fxh b{font-family:var(--display);font-size:.9rem;letter-spacing:-.01em}
.pf-lock{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;padding:3px 8px;border-radius:999px;background:var(--accent);color:#fff}
.pf-fxr{display:flex;justify-content:space-between;align-items:baseline;padding:.3rem 0;border-bottom:1px solid var(--line);font-size:.78rem}.pf-fxr span{color:var(--ink-2)}.pf-fxr b{font-variant-numeric:tabular-nums;color:var(--ink)}
.pf-fxf{margin-top:auto;padding-top:.5rem;font-size:.66rem;line-height:1.35;color:var(--ink-2)}
.pf-ag{margin-top:auto;padding-top:.6rem;display:flex;align-items:center}
.pf-ag img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 6px rgba(11,81,55,.25);margin-left:-8px}.pf-ag img:first-child{margin-left:0}
.pf-ag .orb{width:24px;height:24px;flex:0 0 24px;position:relative;z-index:2;margin-left:-6px;border-radius:42% 58% 63% 37%/47% 41% 59% 53%;background:radial-gradient(circle at 38% 32%,#CDE9DA,#1A8754 52%,#0B5137 96%);box-shadow:0 6px 16px -6px rgba(11,81,55,.5),inset 0 2px 6px rgba(255,255,255,.45),inset 0 -5px 9px rgba(8,48,31,.4);animation:orbBeat 1.6s ease-in-out infinite}
.pf-ag i{width:26px;height:26px;margin-left:-7px;border-radius:50%;border:2px solid #fff;background:var(--forest);color:#fff;font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center}
.pf-ag i:nth-child(3){background:#1A8754}.pf-ag i:nth-child(4){background:#3C8F6A}.pf-ag i:nth-child(5){background:#6BAF8C}
.pf-agb{display:flex;flex-direction:column;height:100%}
.pf-agh{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}.pf-agh b{font-family:var(--display);font-size:.88rem;letter-spacing:-.01em}.pf-pi{width:18px;height:18px}.pf-pi svg{width:100%;height:100%}
.pf-agr{display:grid;grid-template-columns:22px auto 1fr 7px;gap:.35rem;align-items:center;padding:.22rem 0;border-bottom:1px solid var(--line);font-size:.74rem}
.pf-agr img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.pf-agr i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(26,135,84,.5);animation:hbDot 1.6s ease-out infinite}.pf-agr span{font-weight:600;color:var(--ink);white-space:nowrap}.pf-agr em{font-style:normal;color:var(--ink-2);font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){.pf-in{transition:none}.pf-tick-in,.pf-ag .orb,.pf-agr i{animation:none}}
/* ---------- the stack ---------- */
.stk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;counter-reset:none}
.stk::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line-2)}
.stk-node{position:relative;padding:2rem 1.4rem 0 0}
.stk-node::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.stk-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:.5rem}
.stk-node b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:-.01em}
.stk-node>span:last-child{display:block;margin-top:.4rem;color:var(--ink-2);font-size:.92rem;line-height:1.5;max-width:30ch}
.stk-cta{margin-top:2rem}
.stack{padding-bottom:clamp(3rem,6vw,5rem)}
@media (max-width:860px){.stk{grid-template-columns:1fr 1fr}.stk::before{display:none}.stk-node{padding-left:1.4rem}.stk-node::before{top:2.4rem}}
@media (max-width:520px){.stk{grid-template-columns:1fr}}
/* ---------- investors ---------- */
.invest{padding-block:clamp(3.5rem,7vw,5.5rem)}
.inv-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.inv-grid h2{font-size:clamp(1.9rem,4vw,3.05rem);max-width:14ch}
.inv-grid p{color:var(--ink-2);max-width:48ch;margin-top:1.1rem}
.inv-pts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.inv-pts li{padding:1rem 0;border-bottom:1px solid var(--line)}
.inv-pts b{display:block;font-size:1rem}
.inv-pts span{display:block;color:var(--ink-2);font-size:.92rem;margin-top:.2rem;line-height:1.45}
@media (max-width:860px){.inv-grid{grid-template-columns:1fr}}
/* ---------- ready ---------- */
.ready{padding-block:clamp(2.5rem,5vw,4rem)}
.ready .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.ready-head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.ready-head p{color:var(--ink-2);margin-top:.5rem}
.ready-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rl{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.05rem;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);color:inherit;text-decoration:none;position:relative;transition:border-color .25s,transform .25s,box-shadow .25s}
.rl:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 18px 30px -24px rgba(11,81,55,.4)}
.rl-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.rl-t{font-family:var(--display);font-size:1rem;letter-spacing:-.015em;color:var(--ink);line-height:1.25;padding-right:34px}
.rl-m{font-size:.76rem;color:var(--ink-2)}
.rl-a{position:absolute;right:.9rem;top:.9rem;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);transition:background .25s,border-color .25s}
.rl-a::after{content:"→";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--ink)}
.rl:hover .rl-a{background:var(--accent);border-color:var(--accent)}.rl:hover .rl-a::after{color:#fff}
@media (max-width:900px){.ready .wrap{grid-template-columns:1fr}}
@media (max-width:560px){.ready-list{grid-template-columns:1fr}}
/* ---------- lanes (unused) ---------- */
.lanes{background:var(--forest);color:#EAF7EF;padding-block:clamp(3.5rem,7vw,5.5rem)}
.lanes-h{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:2rem}
.lane-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.lane{display:flex;flex-direction:column;gap:.35rem;padding:1.4rem;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(143,199,172,.22);color:inherit;text-decoration:none;transition:background .25s,transform .25s,border-color .25s}
.lane:hover{background:rgba(255,255,255,.1);border-color:rgba(143,199,172,.55);transform:translateY(-2px)}
.lane-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.lane b{font-family:var(--display);font-size:1.1rem;color:#fff;letter-spacing:-.01em}
.lane>span:not(.lane-k){color:rgba(234,247,239,.72);font-size:.9rem;line-height:1.45}
.lane i{font-style:normal;margin-top:auto;padding-top:.9rem;color:var(--sage);font-weight:600;font-size:.9rem}
.lane i::after{content:" →"}
@media (max-width:940px){.lane-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.lane-row{grid-template-columns:1fr}}

/* ---------- regions ---------- */
.intl-only,.uk-only,.us-only,.ca-only,.row-only,.hero .actions.intl-only,.hero h1.intl-only,.hero .lede.intl-only{display:none}
html[data-region="uk"] .ng-only,html[data-region="us"] .ng-only,html[data-region="ca"] .ng-only,html[data-region="row"] .ng-only{display:none!important}
html[data-region="uk"] .intl-only,html[data-region="us"] .intl-only,html[data-region="ca"] .intl-only,html[data-region="row"] .intl-only{display:block}
html[data-region="uk"] .hero .actions.intl-only,html[data-region="us"] .hero .actions.intl-only,html[data-region="ca"] .hero .actions.intl-only,html[data-region="row"] .hero .actions.intl-only{display:flex}
html[data-region="uk"] .hero .lede.intl-only,html[data-region="us"] .hero .lede.intl-only,html[data-region="ca"] .hero .lede.intl-only,html[data-region="row"] .hero .lede.intl-only,html[data-region="uk"] .hero h1.intl-only,html[data-region="us"] .hero h1.intl-only,html[data-region="ca"] .hero h1.intl-only,html[data-region="row"] .hero h1.intl-only{display:block}
html[data-region="uk"] .rl.intl-only,html[data-region="us"] .rl.intl-only,html[data-region="ca"] .rl.intl-only,html[data-region="row"] .rl.intl-only{display:flex}
html[data-region="uk"] .uk-only,html[data-region="us"] .us-only,html[data-region="ca"] .ca-only,html[data-region="row"] .row-only{display:inline}
html[data-region="uk"] .rnotice,html[data-region="us"] .rnotice,html[data-region="ca"] .rnotice,html[data-region="row"] .rnotice{display:flex}
.rnotice{gap:.6rem;align-items:flex-start;text-align:left;max-width:64ch;margin:2rem auto 0;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.7);font-size:.78rem;line-height:1.45;color:var(--ink-2)}
.rnotice svg{width:16px;height:16px;flex:0 0 16px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;margin-top:1px}
.rnotice b{color:var(--ink);font-weight:600}
.mark:focus:not(:focus-visible){outline:none}
html[data-region="uk"] h1.intl-only,html[data-region="us"] h1.intl-only,html[data-region="ca"] h1.intl-only,html[data-region="row"] h1.intl-only{display:block}
.rails-call{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem;margin-top:1rem}
.rails-call b{color:var(--ink)}.rails-call a{color:var(--accent);font-weight:600;text-decoration:none;margin-left:.3rem}
.region{position:relative}
.region-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .7rem;border:1px solid var(--line-2);border-radius:999px;background:transparent;font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer}
.region-btn .caret{width:6px;height:6px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(45deg);margin:-3px 0 0 .1rem}
.region-flag{font-size:.95rem;line-height:1}
.region-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 20px 40px -20px rgba(11,81,55,.35);padding:.35rem;display:none;z-index:60}
.region.open .region-menu{display:block}
.region-menu button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;border-radius:8px;background:transparent;font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer;text-align:left}
.region-menu button:hover{background:var(--surface)}
.region-menu button.on{background:var(--surface-2);font-weight:600}
@media (max-width:940px){.region-btn span:not(.region-flag){display:none}.region-btn .caret{display:inline-block}}

/* ---------- hero v2: Eva at work ---------- */
.hero2{text-align:left;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem);overflow:hidden}
.hero2::before{inset:-20% -10% auto;height:120%}
.hero-glow{position:absolute;right:-6%;top:-10%;width:min(900px,70vw);height:min(900px,70vw);border-radius:50%;background:radial-gradient(circle,rgba(26,135,84,.18),rgba(26,135,84,0) 62%);pointer-events:none;animation:heroGlow 1.6s ease-in-out infinite}
@keyframes heroGlow{0%,36%,100%{transform:scale(.92);opacity:.6}8%{transform:scale(1.04);opacity:1}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(2rem,4vw,4rem);align-items:center;position:relative;z-index:1}
.hero-kicker{display:inline-flex;align-items:center;gap:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);margin-bottom:1.6rem}
.hero-kicker>span{display:inline-flex;align-items:center;gap:9px}
.hero-kicker i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(26,135,84,.5),0 0 10px rgba(26,135,84,.8);animation:hbDot 1.6s ease-out infinite}
.hero-kicker>span:nth-child(2) i{animation-delay:.25s}.hero-kicker>span:nth-child(3) i{animation-delay:.5s}
.hero-copy{transform:translateY(-28px)}
.hero2 h1{margin-inline:0;max-width:none;font-size:clamp(2rem,3.05vw,2.85rem);text-align:left;white-space:nowrap}.hero2 h1 em{display:block}
@media (max-width:940px){.hero2 h1{white-space:normal;font-size:clamp(2rem,8vw,2.6rem)}.hero2 h1 em{display:inline}}
.hero2 .lede{margin:1.4rem 0 0;max-width:46ch;text-align:left;font-size:1.08rem}
.hero2 .actions{justify-content:flex-start;margin-top:2rem}
.hero2 .rnotice{margin:1.6rem 0 0}
.hero-stage{position:relative;height:clamp(560px,52vw,720px);display:grid;grid-template-columns:auto minmax(280px,1fr);align-items:center}
.hero-orbit{position:absolute;left:24%;top:50%;width:0;height:0;pointer-events:none}
.hero-orbit .hring{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:420px;height:420px;border:1.5px solid rgba(26,135,84,.22);border-radius:50%;animation:heroRing 3.6s cubic-bezier(.22,1,.36,1) infinite}
.hero-orbit .hring.b{animation-delay:1.2s}.hero-orbit .hring.c{animation-delay:2.4s}
@keyframes heroRing{0%{width:300px;height:300px;opacity:.7}100%{width:760px;height:760px;opacity:0}}
.hero-phone{position:relative;width:clamp(220px,17vw,260px);padding:10px;border-radius:clamp(38px,4vw,52px);background:linear-gradient(160deg,#3a3d3f,#1b1d1f 40%,#2a2d2f 70%,#141617);box-shadow:0 50px 100px -30px rgba(11,81,55,.55),0 0 0 1.5px #0b0c0d,inset 0 0 0 1.5px rgba(255,255,255,.18);z-index:2}
.hero-scr{border-radius:clamp(30px,3.2vw,42px);overflow:hidden;background:#000}.hero-scr img{display:block;width:100%;height:auto}
.hero-phone .ip-btn{position:absolute;width:3px;border-radius:2px;background:#0f1112;left:-3px}.hero-phone .m{top:15%;height:26px}.hero-phone .vu{top:23%;height:52px}.hero-phone .vd{top:31%;height:52px}.hero-phone .pw{left:auto;right:-3px;top:22%;height:84px}
.hero-pulses{position:relative;height:100%;margin-left:-64px;min-width:280px;pointer-events:none}
.hp{position:absolute;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(11,81,55,.45);width:280px;opacity:0;transform:translateY(18px) scale(.96);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);z-index:3}
.hp.in{opacity:1;transform:none}
.hp .orb{width:34px;height:34px;flex:0 0 34px;position:relative;border-radius:42% 58% 63% 37%/47% 41% 59% 53%;background:radial-gradient(circle at 38% 32%,#CDE9DA,#1A8754 52%,#0B5137 96%);box-shadow:0 8px 22px -7px rgba(11,81,55,.5),inset 0 2px 8px rgba(255,255,255,.45),inset 0 -7px 12px rgba(8,48,31,.4);animation:orbJelly 6.5s ease-in-out infinite,orbBeat 1.6s ease-in-out infinite}
.hp .orb::before{content:"";position:absolute;top:15%;left:19%;width:30%;height:22%;border-radius:60% 50% 55% 45%;background:rgba(255,255,255,.55);filter:blur(1px)}
.hp .orb::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23fff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M39.4%2019.6%20A16%2016%200%201%201%2032.4%2010.6'/%3E%3Cpath%20d='M24%2035%20V17.5'/%3E%3Cpath%20d='M24%2024.2%2016.4%2020.2'/%3E%3Cpath%20d='M24%2024.2%2031.6%2020.2'/%3E%3Ccircle%20cx='24'%20cy='15.4'%20r='2.7'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='15.4'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='32.6'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3C/svg%3E") center/64% no-repeat}
.hp-t{display:flex;flex-direction:column;min-width:0;flex:1}.hp-t b{font-size:.86rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-t span{font-size:.74rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-st{flex:0 0 auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.hp-st.done{background:var(--surface-2);color:var(--forest)}.hp-st.ask{background:var(--accent);color:#fff}.hp-st.hold{background:#FFF1E3;color:#B4560F}
.hp[data-k="0"]{left:0;top:8%}.hp[data-k="1"]{left:6%;top:26%}.hp[data-k="2"]{left:0;top:44%}.hp[data-k="3"]{left:8%;top:62%}.hp[data-k="4"]{left:2%;top:80%}
.hp[data-set="intl"]{display:none}
html[data-region="uk"] .hp[data-set="ng"],html[data-region="us"] .hp[data-set="ng"],html[data-region="ca"] .hp[data-set="ng"],html[data-region="row"] .hp[data-set="ng"]{display:none}
html[data-region="uk"] .hp[data-set="intl"],html[data-region="us"] .hp[data-set="intl"],html[data-region="ca"] .hp[data-set="intl"],html[data-region="row"] .hp[data-set="intl"]{display:flex}
.hero-live{position:absolute;left:24%;bottom:-4px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--accent-2);white-space:nowrap;background:var(--paper);padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);z-index:3}
.hero-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(26,135,84,.7)}
@media (max-width:1100px){.hp{width:240px}.hp-t span{display:none}.hero-stage{grid-template-columns:auto minmax(240px,1fr)}.hero-pulses{min-width:240px}}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr}.hero2 h1{max-width:none}.hero-stage{height:auto;padding:2rem 0 1rem;grid-template-columns:1fr;justify-items:center}.hp{position:relative;left:auto!important;top:auto!important;width:100%;max-width:360px;margin-top:8px}.hero-pulses{position:relative;height:auto;margin:1rem 0 0;display:flex;flex-direction:column;align-items:center;width:100%}.hero-orbit{display:none}.hero-live{position:relative;left:auto;bottom:auto;transform:none;margin-top:1rem}}
@media (prefers-reduced-motion:reduce){.hero-glow,.hero-orbit .hring,.hp .orb,.hero-kicker i{animation:none!important}.hp{opacity:1;transform:none}}

/* ---------- regulator & partner logos ---------- */
.rlogos{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.2rem;margin:0 0 1.4rem}
.rlogo{display:inline-flex;align-items:center;gap:.6rem}
.rlogo img{height:30px;width:auto;display:block}
.rlogo em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rlogos-sm{gap:.9rem 1.2rem;margin-top:.9rem}.rlogos-sm .rlogo img{height:22px}.rlogos-sm .rlogo em{display:none}
.rlogo-in{height:16px;width:auto;vertical-align:-3px;margin-right:6px}
.pf-reg{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pf-reg img{height:22px;width:auto;display:block}
.hl.hl-logo img{height:34px;width:auto;display:block;margin-bottom:.15rem}

/* ---------- product pages: compact sections ---------- */
.pp{padding-top:clamp(1.8rem,3.5vw,2.8rem)}
.pp-last{padding-bottom:clamp(2.5rem,5vw,4rem)}
.pp-head{display:flex;align-items:baseline;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-2);margin-bottom:1rem}
.pp-head h2{font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.025em;margin:0}
.pp-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem}
.pp-feat{display:grid;grid-template-columns:22px 1fr;gap:.7rem;padding:.9rem 0;border-bottom:1px solid var(--line);align-items:start}
.pp-feat:nth-last-child(-n+3){border-bottom:0}
.pp-ck{width:22px;height:22px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.pp-ck svg{width:12px;height:12px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pp-feat h3{font-size:.98rem;letter-spacing:-.02em;margin:0 0 .25rem}
.pp-feat p{font-size:.86rem;line-height:1.45;color:var(--ink-2);margin:0}
.pp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;position:relative}
.pp-steps::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:1px;background:var(--line-2)}
.pp-step{position:relative;padding-top:2.2rem}
.pp-step .n{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--paper);border:1.5px solid var(--accent);color:var(--forest);font-family:var(--mono);font-size:.72rem;display:inline-flex;align-items:center;justify-content:center}
.pp-step h3{font-size:.98rem;letter-spacing:-.02em;margin:0 0 .25rem}
.pp-step p{font-size:.86rem;line-height:1.45;color:var(--ink-2);margin:0}
.pp-spec{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
.pp-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.8rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.88rem;align-items:baseline}
.pp-row dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pp-row dd{margin:0;color:var(--ink-2)}.pp-row dd b{color:var(--ink);font-weight:600}
.pp-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
.pp-faq details{border-bottom:1px solid var(--line)}
.pp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";font-family:var(--mono);color:var(--forest)}
.pp-faq details[open] summary::after{content:"\2212"}
.pp-faq p{margin:0;padding:0 0 .9rem;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
@media (max-width:940px){.pp-feats{grid-template-columns:1fr 1fr}.pp-feat:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.pp-feat:nth-last-child(-n+2){border-bottom:0}.pp-steps{grid-template-columns:1fr 1fr}.pp-steps::before{display:none}.pp-spec,.pp-faq{grid-template-columns:1fr}}
@media (max-width:560px){.pp-feats,.pp-steps{grid-template-columns:1fr}.pp-feat{border-bottom:1px solid var(--line)!important}.pp-row{grid-template-columns:1fr;gap:.2rem}}
.mega-simple{display:flex;gap:4rem;align-items:flex-start}.mgroup-cta{align-self:flex-end;padding-bottom:.2rem}.mgroup-cta .text-link{font-weight:600}

/* ---------- provider board ---------- */
.pb{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem 1rem;box-shadow:0 30px 60px -40px rgba(11,81,55,.35)}
.pb-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--surface);margin-bottom:1rem}
.pb-tab{flex:1;border:0;background:transparent;font:inherit;font-size:.8rem;font-weight:600;color:var(--ink-2);padding:.5rem .6rem;border-radius:999px;cursor:pointer}
.pb-tab.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pb-pane{display:none}.pb[data-tab="telco"] .pb-pane[data-p="telco"],.pb[data-tab="power"] .pb-pane[data-p="power"],.pb[data-tab="tv"] .pb-pane[data-p="tv"]{display:block}
.pb-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.pb-tile{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.6rem .3rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-2);transition:transform .25s,border-color .25s,opacity .25s,box-shadow .25s;cursor:default}
.pb-tile span{font-size:.72rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pb-tile.sm{padding:.45rem .2rem}.pb-tile.sm span{font-size:.62rem}
.pb-tile.lit{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,135,84,.15);transform:translateY(-2px)}.pb-tile.lit span{color:var(--ink);font-weight:600}
.pb-tile.dim{opacity:.38}
[data-tv].pb-tile{cursor:pointer}
.pm{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--bg);color:var(--fg);font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pm i{font-style:normal}.pb-tile.sm .pm{width:36px;height:36px;font-size:.52rem;border-radius:10px;letter-spacing:0}
.pb-in{display:block;margin-top:.9rem}.pb-in span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.35rem}
.pb-in input{width:100%;font:inherit;font-size:1rem;letter-spacing:.04em;padding:.6rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);outline:none}
.pb-in input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,135,84,.15)}
.pb-out{margin-top:.7rem;font-size:.84rem;line-height:1.45;color:var(--ink-2);min-height:2.6em}.pb-out b{color:var(--ink)}
.pb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.8rem}.pb-chips span{font-size:.72rem;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pb-foot{display:flex;align-items:center;gap:8px;margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pb-foot i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:560px){.pb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- The Ledger ---------- */
.lg-hero{padding-block:clamp(2rem,4vw,3rem) 0}
.lg-mast{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:clamp(2rem,5vw,5rem);align-items:end;padding-bottom:2rem;border-bottom:1px solid var(--line-2)}
.lg-mast h1{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.035em;max-width:16ch;margin-top:.6rem}
.lg-mast .lede{margin-top:1rem;max-width:52ch;color:var(--ink-2)}
.lg-sub label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.lg-sub div{display:flex;gap:.5rem}.lg-sub input{flex:1;min-width:0;font:inherit;padding:.6rem .8rem;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);outline:none}.lg-sub input:focus{border-color:var(--accent)}
.lg-sub span{display:block;margin-top:.45rem;font-size:.74rem;color:var(--ink-2)}
.lg-tools{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;flex-wrap:wrap}
.lg-topics{display:flex;gap:6px;flex-wrap:wrap}.lg-t{border:1px solid var(--line);background:var(--paper);font:inherit;font-size:.82rem;padding:.4rem .85rem;border-radius:999px;color:var(--ink-2);cursor:pointer}.lg-t.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lg-search{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;min-width:240px;background:var(--paper)}.lg-search svg{width:16px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}.lg-search input{border:0;background:transparent;font:inherit;font-size:.9rem;outline:none;width:100%}
.lg-wrap{padding-bottom:clamp(3rem,6vw,5rem)}
.lg-card{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.lg-card:hover{transform:translateY(-3px);box-shadow:0 26px 40px -30px rgba(11,81,55,.45);border-color:var(--line-2)}
.lg-art{position:relative;min-height:150px}.lg-big .lg-art{min-height:320px}
.lg-topic{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--forest)}.lg-topic.inv{background:rgba(255,255,255,.14);color:#CDE9DA}
.lg-feat{position:absolute;right:14px;top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lg-body{padding:1.1rem 1.2rem 1.2rem}.lg-body h3{font-size:1.1rem;letter-spacing:-.02em;margin:0 0 .4rem;line-height:1.25}.lg-big .lg-body h3{font-size:clamp(1.4rem,2.6vw,2rem)}.lg-body p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.5}.lg-big .lg-body p{font-size:1.02rem;max-width:60ch}
.lg-big{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);margin-top:.5rem}.lg-big .lg-body{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.lg-meta{display:flex;align-items:center;gap:.6rem;margin-top:1rem;font-size:.78rem;color:var(--ink-2)}.lg-meta b{color:var(--ink);font-weight:600}.lg-meta em{font-style:normal;margin-left:auto;white-space:nowrap}
.lg-av{width:26px;height:26px;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--mono);font-size:.6rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.lg-av.lg{width:40px;height:40px;font-size:.78rem}
.lg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.lg-series{margin-top:2.5rem}.lg-srow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.lg-srow a{display:block;padding:1.1rem 1.2rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-2);color:inherit;text-decoration:none}.lg-srow a:hover{border-color:var(--line-2)}.lg-srow b{display:block;font-family:var(--display);font-size:1rem;letter-spacing:-.015em;margin-bottom:.3rem}.lg-srow span{font-size:.86rem;color:var(--ink-2);line-height:1.45}
.lg-empty{color:var(--ink-2);padding:2rem 0}
/* article */
.lg-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;background:transparent}.lg-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}
.lg-ahero{padding-block:clamp(2rem,4vw,3rem) 0}
.lg-ahead{max-width:800px;margin-top:.5rem}.lg-ahead .lg-topic{position:static;display:inline-block;background:var(--surface-2)}
.lg-ahead h1{font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.035em;margin:.8rem 0 .8rem;max-width:20ch}.lg-ahead .lede{color:var(--ink-2);max-width:60ch}
.lg-byline{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;font-size:.9rem}.lg-byline b{display:block}.lg-byline span{color:var(--ink-2);font-size:.82rem}
.lg-share{margin-left:auto;border:1px solid var(--line-2);background:var(--paper);font:inherit;font-size:.82rem;padding:.4rem .9rem;border-radius:999px;cursor:pointer}
.lg-aart{height:clamp(160px,26vw,320px);border-radius:var(--r);margin-top:2rem}
.lg-agrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(2rem,5vw,5rem);padding-block:2.5rem 1rem}
.lg-toc{position:sticky;top:110px;align-self:start;font-size:.86rem}.lg-toc span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.6rem}.lg-toc a{display:block;padding:.35rem 0;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}.lg-toc a:hover{color:var(--ink)}.lg-toc .lg-back{margin-top:.8rem;color:var(--accent);border:0;font-weight:600}
.lg-prose{max-width:66ch;font-size:1.06rem;line-height:1.7;color:var(--ink)}
.lg-prose p{margin:0 0 1.3rem}.lg-prose h2{font-size:1.45rem;letter-spacing:-.025em;margin:2.2rem 0 .8rem;scroll-margin-top:110px}
.lg-prose blockquote{margin:2rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--accent);background:var(--surface);font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em;line-height:1.35;color:var(--forest)}
.lg-kv{margin:2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;border-top:1px solid var(--line-2)}.lg-kv div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.92rem}.lg-kv dt{color:var(--ink-2)}.lg-kv dd{margin:0;font-weight:600;text-align:right}
.lg-note{font-size:.8rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:1rem;margin-top:2.5rem}
.lg-next{padding-bottom:clamp(3rem,6vw,5rem)}
@media (max-width:940px){.lg-mast{grid-template-columns:1fr}.lg-big{grid-template-columns:1fr}.lg-grid,.lg-srow{grid-template-columns:1fr 1fr}.lg-agrid{grid-template-columns:1fr}.lg-toc{position:static;display:flex;flex-wrap:wrap;gap:.4rem 1rem}.lg-toc span{flex-basis:100%}.lg-toc a{border:0;padding:.2rem 0}}
@media (max-width:600px){.lg-grid,.lg-srow{grid-template-columns:1fr}.lg-kv{grid-template-columns:1fr}.lg-search{min-width:0;width:100%}}
.lg-art svg,.lg-aart svg{position:absolute;inset:0;width:100%;height:100%;display:block}.lg-art{overflow:hidden}.lg-aart{position:relative;overflow:hidden}.lg-art>.lg-topic,.lg-art>.lg-feat{z-index:1}

.lg-dek{margin-top:.9rem;max-width:46ch;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.lg-mast{align-items:end;padding-bottom:1.4rem}
.lg-mast>*{min-width:0}
@media(max-width:860px){.lg-mast{grid-template-columns:minmax(0,1fr)}}
.lg-mast h1{font-size:clamp(1.9rem,4vw,3.1rem)}
.lg-sub{align-self:end}
.lg-pill{display:flex;align-items:center;gap:.55rem;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:5px 5px 5px 14px;transition:border-color .2s,box-shadow .2s}
.lg-pill:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(26,135,84,.10)}
.lg-pill .lg-pill-l{margin:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap;padding-right:.55rem;border-right:1px solid var(--line-2)}
.lg-pill input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.9rem;outline:none;color:var(--ink)}
.lg-pill button{flex:none;width:34px;height:34px;border:0;border-radius:999px;background:var(--forest);cursor:pointer;display:grid;place-items:center;transition:transform .18s,background .18s}
.lg-pill button:hover{background:var(--accent);transform:translateX(2px)}
.lg-pill button svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.lg-sub em{display:block;margin-top:.5rem;font-style:normal;font-size:.72rem;color:var(--ink-2);padding-left:14px}
.lg-sub.done em{color:var(--accent)}
.lg-sub.done .lg-pill{border-color:var(--accent)}
.lg-tools{display:flex;justify-content:space-between;align-items:center;gap:.9rem;padding:.85rem 0;flex-wrap:nowrap}
.lg-seg{position:relative;flex:1 1 auto;min-width:0;display:flex;gap:2px;background:var(--surface-2);border-radius:999px;padding:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
.lg-seg::-webkit-scrollbar{display:none}
.lg-ink{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:999px;background:var(--ink);opacity:0;transition:transform .32s cubic-bezier(.4,.9,.2,1),width .32s cubic-bezier(.4,.9,.2,1),opacity .2s;pointer-events:none}
.lg-t{position:relative;z-index:1;border:0;background:transparent;font:inherit;font-size:.82rem;line-height:1;padding:.5rem .8rem;border-radius:999px;color:var(--ink-2);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;transition:color .22s}
.lg-t:hover{color:var(--ink)}
.lg-t b{font-family:var(--mono);font-weight:500;font-size:.62rem;opacity:.55}
.lg-t[disabled]{opacity:.38;cursor:default}
.lg-t.on,.lg-t.on:hover{color:#fff}
.lg-t.on b{opacity:.65}
.lg-search{flex:none;display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:999px;padding:.45rem .55rem;min-width:0;width:34px;background:var(--paper);cursor:text;overflow:hidden;transition:width .3s cubic-bezier(.4,.9,.2,1),border-color .2s,padding .3s}
.lg-search.open{width:210px;padding:.45rem .9rem;gap:.5rem;border-color:var(--line-2)}
.lg-search:focus-within{border-color:var(--accent)}
.lg-search svg{flex:none;width:16px;height:16px}
.lg-search input{width:0;opacity:0;transition:opacity .2s;font-size:.85rem}
.lg-search.open input{width:100%;opacity:1}
@media(max-width:860px){.lg-tools{gap:.5rem}.lg-seg{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}.lg-search.open{width:150px}}
@media(max-width:640px){.lg-mast{padding-bottom:1.1rem}.lg-dek{font-size:.9rem}.lg-sub em{padding-left:0}.lg-pill .lg-pill-l{display:none}.lg-pill{padding-left:16px}}

.fl-sum{max-width:100ch}
.fl-more{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.75rem}
.fl-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:.55rem;padding:.25rem 0;color:var(--ink-2);transition:color .18s}
.fl-more summary::-webkit-details-marker{display:none}
.fl-more summary:hover{color:var(--forest)}
.fl-more summary b{font-weight:600;color:var(--forest);font-size:.86rem}
.fl-more summary i{font-style:normal;font-size:.78rem;opacity:.75}
.fl-chev{align-self:center;width:8px;height:8px;border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.fl-more[open] .fl-chev{transform:rotate(-135deg) translateY(-1px)}
.fl-more[open] summary b::after{content:' \2014 less'}
.fl-body{padding-top:.6rem;animation:flIn .28s ease both}
@keyframes flIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:640px){.fl-more summary i{display:none}}

/* ============ Personal onboarding chat ============ */
#pchat{padding:0}
body.pc-on{overflow:hidden}
body.pc-on #flow{height:100vh;overflow:hidden!important;display:flex;flex-direction:column;overflow:hidden}
body.pc-on #pchat{flex:1;min-height:0;display:flex}
body.pc-on .pc-shell{height:100%;width:100%;border-radius:0;border-left:0;border-right:0;border-bottom:0;max-width:none}
.pc-shell{display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;max-width:1180px;margin:0 auto;height:calc(100vh - 92px);min-height:560px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:0 24px 60px -40px rgba(11,81,55,.35)}
.pc-side{background:var(--mist);border-right:1px solid var(--line-2);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.pc-side-h{display:flex;align-items:center;gap:.7rem;padding:1.05rem 1.1rem;border-bottom:1px solid var(--line-2)}
.pc-side-h b{display:block;font-size:.92rem;font-family:var(--display);letter-spacing:-.01em}
.pc-side-h span{font-size:.74rem;color:var(--ink-2)}
.pc-av{flex:none;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:radial-gradient(circle at 38% 32%,#CDE9DA 0,#1A8754 52%,#0B5137 96%);color:#fff;font-weight:600;font-size:.8rem;box-shadow:0 0 0 3px rgba(26,135,84,.12)}
.pc-steps{list-style:none;margin:0;padding:1rem .9rem;display:flex;flex-direction:column;gap:.15rem;flex:1;overflow:auto}
.pc-steps li{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:10px;font-size:.84rem;color:var(--ink-2);transition:background .2s,color .2s}
.pc-steps li .pc-dot{flex:none;width:18px;height:18px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--paper);display:grid;place-items:center}
.pc-steps li .pc-dot svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pc-steps li.on{background:var(--surface-2);color:var(--ink);font-weight:500}
.pc-steps li.on .pc-dot{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,135,84,.12)}
.pc-steps li.did .pc-dot{background:var(--accent);border-color:var(--accent)}
.pc-steps li.did .pc-dot svg{opacity:1}
.pc-side-f{padding:.9rem 1.1rem;border-top:1px solid var(--line-2);font-size:.72rem;color:var(--ink-2);line-height:1.5}
.pc-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--mist)}
.pc-top{display:flex;align-items:center;gap:.7rem;padding:.75rem 1.1rem;background:var(--paper);border-bottom:1px solid var(--line-2)}
.pc-top b{display:block;font-size:.94rem;font-family:var(--display)}
.pc-presence{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--ink-2)}
.pc-presence i{width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 0 rgba(26,135,84,.55);animation:pcPulse 2.4s ease-out infinite}
@keyframes pcPulse{0%{box-shadow:0 0 0 0 rgba(26,135,84,.5)}70%{box-shadow:0 0 0 7px rgba(26,135,84,0)}100%{box-shadow:0 0 0 0 rgba(26,135,84,0)}}
.pc-top .pc-x{margin-left:auto;border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.78rem;color:var(--ink-2);cursor:pointer}
.pc-top .pc-x:hover{color:var(--forest);border-color:var(--line-2)}
.pc-stream{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1.4rem clamp(.9rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.45rem;background-image:radial-gradient(circle at 1px 1px,rgba(26,135,84,.10) 1px,transparent 0);background-size:22px 22px}
.pc-row{display:flex;max-width:100%}
.pc-row.out{justify-content:flex-end}
.pc-b{max-width:min(78%,560px);padding:.62rem .85rem;border-radius:14px;font-size:.92rem;line-height:1.5;position:relative;animation:pcIn .26s cubic-bezier(.2,.9,.3,1) both;box-shadow:0 1px 2px rgba(11,81,55,.07)}
@keyframes pcIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.pc-row.in .pc-b{background:var(--paper);border-top-left-radius:5px}
.pc-row.out .pc-b{background:#D6EFE0;border-top-right-radius:5px}
.pc-b .pc-t{display:block;margin-top:.25rem;font-size:.64rem;color:var(--ink-2);text-align:right;font-family:var(--mono)}
.pc-row.out .pc-b .pc-t:after{content:' \2713\2713';color:var(--accent);letter-spacing:-2px}
.pc-b a{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
.pc-b strong{font-weight:600}
.pc-type{display:inline-flex;gap:4px;padding:.72rem .9rem}
.pc-type i{width:6px;height:6px;border-radius:999px;background:var(--sage);animation:pcBounce 1.2s infinite}
.pc-type i:nth-child(2){animation-delay:.15s}.pc-type i:nth-child(3){animation-delay:.3s}
@keyframes pcBounce{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
.pc-day{align-self:center;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.pc-compose{flex:none;border-top:1px solid var(--line-2);background:var(--paper);padding:.75rem clamp(.8rem,2.5vw,1.4rem)}
.pc-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.pc-chip{border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:.45rem .9rem;font:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.pc-chip:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-1px)}
.pc-chip small{display:block;font-size:.68rem;color:var(--ink-2)}
.pc-bar{display:flex;align-items:center;gap:.6rem}
.pc-field{flex:1;display:flex;align-items:center;gap:.4rem;min-width:0;background:var(--mist);border:1px solid var(--line-2);border-radius:999px;padding:.55rem .95rem;transition:border-color .2s,box-shadow .2s}
.pc-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(26,135,84,.10)}
.pc-field .pc-pre{font-family:var(--mono);font-size:.86rem;color:var(--ink-2);white-space:nowrap}
.pc-field input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.95rem;outline:none;color:var(--ink)}
.pc-send{flex:none;width:42px;height:42px;border:0;border-radius:999px;background:var(--forest);cursor:pointer;display:grid;place-items:center;transition:background .18s,transform .18s}
.pc-send:hover{background:var(--accent);transform:translateX(2px)}
.pc-send:disabled{opacity:.4;cursor:default;transform:none}
.pc-send svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pc-otp{display:flex;gap:.45rem}
.pc-otp input{width:44px;height:50px;text-align:center;font-family:var(--mono);font-size:1.1rem;border:1px solid var(--line-2);border-radius:12px;background:var(--mist);outline:none}
.pc-otp input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(26,135,84,.10)}
.pc-hint{margin-top:.45rem;font-size:.74rem;color:var(--ink-2)}
.pc-meter{display:flex;gap:4px;margin-top:.5rem}
.pc-meter i{height:4px;flex:1;border-radius:999px;background:var(--line-2);transition:background .25s}
.pc-meter i.a{background:#C9A227}.pc-meter i.b{background:var(--accent)}
.pc-terms{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;line-height:1.5}
.pc-terms input{margin-top:.25rem;accent-color:var(--accent);width:16px;height:16px}
.pc-card{border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);padding:.9rem 1rem;margin-top:.55rem}
.pc-card h4{margin:0 0 .5rem;font-size:.86rem;font-family:var(--display)}
.pc-kv{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.84rem}
.pc-kv dt{color:var(--ink-2)}
.pc-kv dd{margin:0;text-align:right;font-weight:500}
.pc-qr{display:flex;gap:1rem;align-items:center;margin-top:.6rem;flex-wrap:wrap}
.pc-qr svg{width:124px;height:124px;flex:none;border:1px solid var(--line-2);border-radius:12px;padding:6px;background:#fff}
.pc-qr .pc-qt{font-size:.84rem;color:var(--ink-2);max-width:26ch}
.pc-go{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.pc-wave{display:inline-flex;align-items:flex-end;gap:2px;height:14px;vertical-align:-2px;margin-right:.4rem}
.pc-wave i{width:2.5px;border-radius:2px;background:var(--accent);animation:pcW 1s ease-in-out infinite}
@keyframes pcW{0%,100%{height:4px;opacity:.5}50%{height:14px;opacity:1}}
@media(max-width:900px){
  .pc-shell{grid-template-columns:1fr;height:calc(100vh - 78px);border-radius:0;border-left:0;border-right:0}
  .pc-side{display:none}
  .pc-b{max-width:88%}
}
/* ============ Personal web login ============ */
.plg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.plg-copy{max-width:46ch}
.plg h1{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.03em}
.plg .sub{color:var(--ink-2);margin-top:.6rem}
.plg-tabs{display:inline-flex;gap:2px;background:var(--surface-2);border-radius:999px;padding:4px;margin-bottom:1.4rem}
.plg-tab{border:0;background:transparent;font:inherit;font-size:.84rem;padding:.45rem .95rem;border-radius:999px;color:var(--ink-2);cursor:pointer}
.plg-tab.on{background:var(--ink);color:#fff}
.plg-steps{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.plg-steps li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2)}
.plg-steps li b{display:block;color:var(--ink);font-weight:500}
.plg-steps .n{flex:none;width:22px;height:22px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:.68rem;color:var(--ink-2)}
.plg-steps li.on .n{background:var(--accent);border-color:var(--accent);color:#fff}
.plg-note{margin-top:1.1rem;font-size:.78rem;color:var(--ink-2);max-width:44ch}
.plg-qr{display:flex;gap:1.1rem;align-items:center;margin-top:1.2rem;flex-wrap:wrap}
.plg-qr svg{width:170px;height:170px;border:1px solid var(--line-2);border-radius:14px;padding:10px;background:#fff}
/* phone mock */
.phm{flex:none;width:300px;border-radius:38px;background:#0E1512;padding:10px;box-shadow:0 30px 70px -30px rgba(11,81,55,.55);position:relative}
.phm-scr{background:var(--paper);border-radius:29px;overflow:hidden;height:560px;display:flex;flex-direction:column;position:relative}
.phm-bar{display:flex;justify-content:space-between;align-items:center;padding:.5rem .95rem .2rem;font-family:var(--mono);font-size:.64rem;color:var(--ink)}
.phm-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:104px;height:22px;border-radius:999px;background:#0E1512;z-index:3}
.phm-hero{background:var(--forest);padding:1.25rem 1rem;display:grid;place-items:center}
.phm-orb{width:78px;height:78px;border-radius:999px;background:radial-gradient(circle at 38% 32%,#CDE9DA 0,#1A8754 52%,#0B5137 96%);box-shadow:0 0 0 8px rgba(143,199,172,.15)}
.phm-body{padding:1rem;overflow:auto;flex:1 1 auto;min-height:0}
.phm-hero,.phm-bar,.phm-acts,.phm-head{flex:none}
.phm-cam{min-height:0}
.phm-mid{min-height:0}
.phm-body h3{font-size:1.05rem;font-family:var(--display);margin:0 0 .7rem}
.phm-who{background:var(--mist);border-radius:14px;padding:.75rem .85rem;margin-bottom:.7rem}
.phm-who b{display:block;font-size:.95rem}
.phm-who span{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.phm-warn{display:flex;gap:.7rem;background:var(--mist);border-radius:14px;padding:.75rem .85rem;margin-bottom:.7rem}
.phm-warn b{display:block;font-size:.86rem;margin-bottom:.2rem}
.phm-warn p{margin:0;font-size:.78rem;color:var(--ink-2);line-height:1.45}
.phm-warn .phm-ic{flex:none;width:34px;height:34px;border-radius:999px;background:var(--surface-2);display:grid;place-items:center}
.phm-warn .phm-ic svg{width:17px;height:17px;fill:none;stroke:var(--forest);stroke-width:1.8;stroke-linecap:round}
.phm-stop{border-left:3px solid #B3261E;padding:.15rem 0 .15rem .7rem;color:#B3261E;font-size:.82rem;font-weight:500;line-height:1.45;margin-bottom:.7rem}
.phm-fine{font-size:.74rem;color:var(--ink-2);line-height:1.45}
.phm-acts{display:flex;gap:.5rem;padding:.8rem 1rem 1rem;border-top:1px solid var(--line)}
.phm-btn{flex:1;border:0;border-radius:999px;padding:.7rem;font:inherit;font-weight:500;font-size:.9rem;cursor:pointer}
.phm-btn.ok{background:var(--forest);color:#fff}
.phm-btn.ok:hover{background:var(--accent)}
.phm-btn.no{background:var(--surface-2);color:var(--ink-2)}
.phm-cam{flex:1;background:#12201A;position:relative;display:grid;place-items:center;overflow:hidden}
.phm-cam:before{content:'';position:absolute;inset:0;background:
 radial-gradient(60% 40% at 30% 25%,rgba(143,199,172,.18),transparent 60%),
 radial-gradient(50% 35% at 75% 70%,rgba(26,135,84,.22),transparent 60%),
 repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 12px,transparent 12px 30px)}
.phm-frame{width:186px;height:186px;position:relative;z-index:1}
.phm-frame i{position:absolute;width:34px;height:34px;border:3px solid #8FC7AC;border-radius:6px}
.phm-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.phm-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.phm-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.phm-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.phm-scan{position:absolute;left:6px;right:6px;height:2px;background:linear-gradient(90deg,transparent,#8FC7AC,transparent);animation:pmScan 2.1s ease-in-out infinite}
@keyframes pmScan{0%{top:8px}50%{top:172px}100%{top:8px}}
.phm-cap{position:absolute;bottom:18px;left:0;right:0;display:grid;place-items:center;z-index:2}
.phm-shutter{width:62px;height:62px;border-radius:999px;border:4px solid rgba(255,255,255,.75);background:rgba(255,255,255,.15);cursor:pointer;transition:transform .15s}
.phm-shutter:hover{transform:scale(1.05)}
.phm-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--line);font-size:.9rem}
.phm-head b{font-family:var(--display)}
.phm-head button{border:0;background:none;font:inherit;color:var(--forest);cursor:pointer;font-size:.88rem}
.phm-mid{flex:1;display:grid;place-items:center;text-align:center;padding:1.4rem}
.phm-tick{width:66px;height:66px;border-radius:999px;background:var(--accent);display:grid;place-items:center;margin:0 auto 1rem;animation:pcIn .4s cubic-bezier(.2,.9,.3,1) both}
.phm-tick svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.plg-wait{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-2);margin-top:1rem}
.plg-wait i{width:14px;height:14px;border-radius:999px;border:2px solid var(--line-2);border-top-color:var(--accent);animation:lgSpin .7s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.plg-solo{grid-template-columns:minmax(0,1fr);max-width:34rem}
@media(max-width:980px){.plg{grid-template-columns:1fr}.phm{margin:0 auto}}

.login-wrap.wide{max-width:1060px;padding-top:2.2rem}
body.pc-on .chat-launcher,body.pc-on #chat-panel{display:none!important}
.choice{cursor:pointer}

.pc-si{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.pc-clist{margin-top:.55rem;max-height:250px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.pc-cdiv{position:sticky;top:0;background:var(--mist);padding:.35rem .9rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line)}
.pc-crow{display:flex;align-items:center;gap:.7rem;width:100%;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:.9rem;padding:.55rem .9rem;cursor:pointer;text-align:left;transition:background .15s}
.pc-crow:last-child{border-bottom:0}
.pc-crow:hover{background:var(--surface-2)}
.pc-crow .fl{font-size:1.15rem;line-height:1;flex:none}
.pc-crow b{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-crow i{font-style:normal;font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.pc-cnone{padding:1.1rem;text-align:center;color:var(--ink-2);font-size:.86rem}
.pc-voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.5rem}
.pc-voice{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line-2);background:var(--paper);border-radius:14px;padding:.6rem .8rem;font:inherit;cursor:pointer;text-align:left;transition:border-color .18s,transform .18s,background .18s}
.pc-voice:hover{border-color:var(--accent);transform:translateY(-1px)}
.pc-voice.on{border-color:var(--accent);background:var(--surface-2);box-shadow:0 0 0 3px rgba(26,135,84,.10)}
.pc-vw{flex:none;display:inline-flex;align-items:center;gap:2.5px;height:22px;width:26px}
.pc-vw i{width:3px;border-radius:2px;background:var(--sage);height:6px;transition:height .2s}
.pc-voice:hover .pc-vw i,.pc-voice.on .pc-vw i{background:var(--accent);animation:pcW 1s ease-in-out infinite}
.pc-voice:hover .pc-vw i:nth-child(2),.pc-voice.on .pc-vw i:nth-child(2){animation-delay:.1s}
.pc-voice:hover .pc-vw i:nth-child(3),.pc-voice.on .pc-vw i:nth-child(3){animation-delay:.2s}
.pc-voice:hover .pc-vw i:nth-child(4),.pc-voice.on .pc-vw i:nth-child(4){animation-delay:.3s}
.pc-voice:hover .pc-vw i:nth-child(5),.pc-voice.on .pc-vw i:nth-child(5){animation-delay:.4s}
.pc-vt b{display:block;font-size:.92rem;font-weight:500}
.pc-vt small{display:block;font-size:.76rem;color:var(--ink-2)}

/* the real orb — same construction as the heartbeat section */
.pc-orb,.phm-orb2{position:relative;flex:none;display:grid;place-items:center}
.pc-orb .orb,.phm-orb2 .orb{width:100%;height:100%;flex:none;position:relative;z-index:2;border-radius:42% 58% 63% 37%/47% 41% 59% 53%;background:radial-gradient(circle at 38% 32%,#CDE9DA,#1A8754 52%,#0B5137 96%);box-shadow:0 10px 24px -10px rgba(11,81,55,.6),inset 0 2px 8px rgba(255,255,255,.45),inset 0 -7px 12px rgba(8,48,31,.4);animation:orbJelly 6.5s ease-in-out infinite,orbBeat 1.6s ease-in-out infinite}
.pc-orb .orb::before,.phm-orb2 .orb::before{content:"";position:absolute;top:15%;left:19%;width:30%;height:22%;border-radius:60% 50% 55% 45%;background:rgba(255,255,255,.55);filter:blur(1.1px);z-index:2}
.pc-orb .orb::after,.phm-orb2 .orb::after{content:"";position:absolute;inset:0;z-index:1;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23fff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M39.4%2019.6%20A16%2016%200%201%201%2032.4%2010.6'/%3E%3Cpath%20d='M24%2035%20V17.5'/%3E%3Cpath%20d='M24%2024.2%2016.4%2020.2'/%3E%3Cpath%20d='M24%2024.2%2031.6%2020.2'/%3E%3Ccircle%20cx='24'%20cy='15.4'%20r='2.7'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='15.4'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='32.6'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3C/svg%3E") center/64% no-repeat}
.pc-orb{width:38px;height:38px}
.pc-orb .hring{position:absolute;border:1.5px solid rgba(26,135,84,.3);border-radius:50%;animation:orbRing 3.6s cubic-bezier(.22,1,.36,1) infinite;z-index:1}
.pc-orb .hring.b{animation-delay:1.2s}
.phm-orb2{width:88px;height:88px}

.rnflag{font-size:1.05rem;line-height:1;vertical-align:-2px;margin-right:.25rem}
.rnotice{align-items:center}
.rails-link{color:#C2610F;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;font-size:.92rem;transition:color .18s}
.rails-link:hover{color:#8F460A}
html[data-region="uk"] #waitLink,html[data-region="us"] #waitLink,html[data-region="ca"] #waitLink{display:none}

/* highlights that carry a currency */
.hl-money b{display:inline-flex;align-items:baseline;gap:.35rem}
.hl-flag{font-size:.62em;line-height:1;vertical-align:.06em}
.hl-sym{color:var(--accent);font-size:.82em}
.pp-note{color:var(--ink-2);font-size:.86rem;margin:0}
/* How it works — one connected track */
.pp-track{counter-reset:s}
.pp-track:before{content:"";position:absolute;left:14px;right:14px;top:13px;height:1.5px;background:linear-gradient(90deg,var(--accent),var(--line-2));opacity:.45}
.pp-track .pp-step{transition:transform .2s}
.pp-track .pp-step:hover{transform:translateY(-2px)}
.pp-track .pp-step .n{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 0 5px var(--paper)}
.pp-track .pp-step h3{font-size:1rem;margin-bottom:.25rem}
.pp-when{display:inline-block;margin-top:.55rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);background:var(--surface-2);border-radius:999px;padding:.22rem .6rem}
@media(max-width:880px){.pp-track:before{left:13px;right:auto;top:14px;bottom:14px;width:1.5px;height:auto;background:linear-gradient(180deg,var(--accent),var(--line-2))}.pp-track .pp-step{padding-top:0;padding-left:2.6rem;min-height:34px}.pp-track .pp-step .n{top:2px}}
/* The detail — a spec sheet, not a paragraph */
.pp-spec .pp-row{display:grid;grid-template-columns:minmax(9rem,11rem) 1fr;gap:1rem;align-items:baseline;padding:.7rem 0 .7rem .9rem;border-top:1px solid var(--line);border-left:2px solid transparent;transition:border-color .18s,background .18s}
.pp-spec .pp-row:hover{border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),transparent 60%)}
.pp-spec dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.pp-spec dd{margin:0;font-size:.94rem;line-height:1.5}
.pp-tag{display:inline-block;margin-left:.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .5rem;border-radius:999px;vertical-align:1px}
.pp-tag.ok{background:var(--accent);color:#fff}
.pp-tag.soon{background:#FFF1E3;color:#B4560F}
.pp-tag.plain{background:var(--surface-2);color:var(--forest)}
/* developer reference */
.dv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem}
.dv-card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:1rem 1.1rem}
.dv-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.dv-row{display:flex;align-items:baseline;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dv-row:last-child{border-bottom:0}
.dv-m{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;padding:.2rem .45rem;border-radius:5px;color:#fff;flex:none}
.dv-m.post{background:var(--accent)}
.dv-m.get{background:#1B5E8C}
.dv-row code{font-family:var(--mono);font-size:.82rem;color:var(--forest)}
.dv-e{font-family:var(--mono);font-size:.78rem;color:var(--forest);background:var(--surface-2);border-radius:6px;padding:.18rem .5rem;flex:none}
.dv-d{flex:1 1 11rem;min-width:0;font-size:.84rem;color:var(--ink-2)}

.cl-orb{position:relative;flex:none;width:26px;height:26px;display:grid;place-items:center}
.cl-orb-lg{width:34px;height:34px}
.cl-orb .orb{width:100%;height:100%;flex:none;position:relative;border-radius:42% 58% 63% 37%/47% 41% 59% 53%;background:radial-gradient(circle at 38% 32%,#CDE9DA,#1A8754 52%,#0B5137 96%);box-shadow:inset 0 2px 6px rgba(255,255,255,.45),inset 0 -5px 9px rgba(8,48,31,.4);animation:orbJelly 6.5s ease-in-out infinite,orbBeat 1.6s ease-in-out infinite}
.cl-orb .orb::before{content:"";position:absolute;top:15%;left:19%;width:30%;height:22%;border-radius:60% 50% 55% 45%;background:rgba(255,255,255,.55);filter:blur(1px);z-index:2}
.cl-orb .orb::after{content:"";position:absolute;inset:0;z-index:1;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23fff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M39.4%2019.6%20A16%2016%200%201%201%2032.4%2010.6'/%3E%3Cpath%20d='M24%2035%20V17.5'/%3E%3Cpath%20d='M24%2024.2%2016.4%2020.2'/%3E%3Cpath%20d='M24%2024.2%2031.6%2020.2'/%3E%3Ccircle%20cx='24'%20cy='15.4'%20r='2.7'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='15.4'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3Ccircle%20cx='32.6'%20cy='19.4'%20r='2.2'%20fill='%23fff'%20stroke='none'/%3E%3C/svg%3E") center/64% no-repeat}
.chat-launcher::before{display:none!important}
.chat-launcher{padding-left:.7rem}
.chat-avatar{background:none!important;color:transparent;display:grid;place-items:center;padding:0}
.hl-money .hl-sym{font-size:1em}

.plg-solo{max-width:36rem}
.plg-solo .plg-note{max-width:none}
.plg-warn{margin-top:.45rem}
@media(min-width:700px){.plg-solo .plg-warn{white-space:nowrap}}
.plg-swap{display:inline-block;margin-top:.9rem;border:0;background:none;padding:0;font:inherit;font-size:.86rem;color:var(--forest);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.plg-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.3rem}
.plg-hold{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:.75rem .9rem;font:inherit;cursor:pointer;transition:border-color .18s,transform .18s,background .18s}
.plg-hold:hover{border-color:var(--accent);background:var(--surface-2);transform:translateY(-1px)}
.plg-hk{flex:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--forest);background:var(--surface-2);border-radius:999px;padding:.28rem .6rem}
.plg-ht{flex:1;min-width:0}
.plg-ht b{display:block;font-size:.95rem;font-weight:500}
.plg-ht span{display:block;font-size:.78rem;color:var(--ink-2)}
.plg-hold i{font-style:normal;color:var(--ink-2);font-size:1.2rem}

.plg-match{margin-top:1.3rem;border:1px solid var(--line-2);border-radius:var(--r);padding:.85rem 1rem;background:var(--paper);max-width:24rem}
.plg-ml{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.plg-match b{display:block;font-family:var(--mono);font-size:1.5rem;letter-spacing:.08em;color:var(--forest);margin:.2rem 0 .35rem}
.plg-mn{display:block;font-size:.78rem;color:var(--ink-2);line-height:1.45}
/* the phone's own lock screen, where the notification actually lands */
.phm-lock{flex:1;min-height:0;display:flex;flex-direction:column;background:linear-gradient(170deg,#0B5137,#07130D 60%);padding:1.1rem .8rem;color:#fff}
.phm-time{text-align:center;margin:1.2rem 0 1.6rem}
.phm-time b{display:block;font-family:var(--display);font-size:2.9rem;font-weight:600;letter-spacing:-.04em;line-height:1}
.phm-time span{font-size:.78rem;color:rgba(255,255,255,.7)}
.phm-notif{display:flex;gap:.6rem;background:rgba(255,255,255,.92);color:var(--ink);border-radius:18px;padding:.7rem .8rem;cursor:pointer;box-shadow:0 12px 30px -14px rgba(0,0,0,.6);animation:notifIn .5s cubic-bezier(.2,.9,.3,1) both;transition:transform .18s}
.phm-notif:hover{transform:scale(1.02)}
@keyframes notifIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
.phm-nic{flex:none;width:30px;height:30px;display:grid;place-items:center}
.phm-nic{width:30px;height:30px}
.phm-nh{display:flex;align-items:baseline;gap:.4rem}
.phm-nh b{font-size:.76rem;letter-spacing:.02em}
.phm-nh em{font-style:normal;font-size:.68rem;color:var(--ink-2);margin-left:auto}
.phm-notif p{margin:.1rem 0 0;font-size:.8rem;line-height:1.4}
.phm-slide{margin-top:auto;text-align:center;font-size:.74rem;color:rgba(255,255,255,.65)}

.plg-mq{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);margin:.25rem 0 .4rem}
.phm-notif{display:block;padding:0;overflow:hidden}
.phm-nbody{display:flex;gap:.6rem;padding:.7rem .8rem;cursor:pointer}
.phm-nacts{display:flex;border-top:1px solid rgba(10,10,10,.08)}
.phm-na{flex:1;border:0;background:none;padding:.6rem;font:inherit;font-size:.86rem;font-weight:500;cursor:pointer}
.phm-na.no{color:#B3261E;border-right:1px solid rgba(10,10,10,.08)}
.phm-na.ok{color:var(--forest)}
.phm-na:hover{background:rgba(10,10,10,.04)}
.phm-na:disabled{color:var(--ink-2);cursor:default}

/* the assistant thread, on the phone */
.phm-chead{flex:none;display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--paper)}
.phm-chead b{display:block;font-family:var(--display);font-size:.95rem}
.phm-chead span{display:block;font-size:.72rem;color:var(--ink-2)}
.phm-chat{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--mist);background-image:radial-gradient(circle at 1px 1px,rgba(26,135,84,.10) 1px,transparent 0);background-size:20px 20px;padding:.8rem .7rem .7rem}
.phm-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.45rem;scrollbar-width:none}
.phm-msgs::-webkit-scrollbar{width:0}
.pmsg{max-width:86%;font-size:.82rem;line-height:1.45;padding:.55rem .7rem;border-radius:16px;animation:pmIn .24s cubic-bezier(.2,.9,.3,1) both;box-shadow:0 1px 2px rgba(11,81,55,.07)}
@keyframes pmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pmsg.a{align-self:flex-start;background:var(--paper);border-bottom-left-radius:5px}
.pmsg.u{align-self:flex-end;background:#D9F0E0;border-bottom-right-radius:5px}
.pmsg .pmcard{display:block;background:var(--surface);border-radius:12px;padding:.5rem .6rem;margin-bottom:.45rem}
.pmsg .pmcard b{display:block;font-size:.82rem}
.pmsg .pmcard span{display:block;font-size:.72rem;color:var(--ink-2)}
.pmsg .pmnote{display:block;margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--ink-2)}
.pmtype{display:inline-flex;gap:4px;padding:.65rem .7rem}
.pmtype i{width:5px;height:5px;border-radius:999px;background:var(--sage);animation:pmBounce 1.2s infinite}
.pmtype i:nth-child(2){animation-delay:.15s}.pmtype i:nth-child(3){animation-delay:.3s}
@keyframes pmBounce{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
.phm-chips{flex:none;display:flex;gap:.4rem;padding-top:.6rem}
.pmchip{flex:1;border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:.5rem .6rem;font:inherit;font-size:.78rem;font-weight:500;cursor:pointer;transition:background .18s,border-color .18s}
.pmchip.ok{border-color:var(--accent);color:var(--forest)}
.pmchip.no{color:#B3261E}
.pmchip:hover{background:var(--surface-2)}

/* ═══════════════════════════════════════════════════════════════════
   PARTNER WORKSPACE

   A signed-in surface on a marketing site, so it keeps the brand's
   tokens and drops the brand's rhythm: tighter type, denser rows, no
   hero. A partner opens this to do three things — bring a customer,
   quote a facility, see what they are owed — and everything else is in
   the way.

   Namespaced pw- throughout, because this file is spliced into a
   2.6MB document that already owns most short class names.
   ═══════════════════════════════════════════════════════════════════ */

#partner{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;
  font-family:var(--body);color:var(--ink)}
#partner[hidden]{display:none}

.pw-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}

/* ── sign in ─────────────────────────────────────────────────────── */
.pw-si{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pw-si-l{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,6vw,5rem);max-width:620px;margin-left:auto;width:100%}
.pw-si-r{background:var(--mist);border-left:1px solid var(--line);
  padding:clamp(2rem,6vw,5rem);display:flex;flex-direction:column;justify-content:center}
.pw-si h1{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1;
  letter-spacing:-.02em;margin:1.4rem 0 .7rem}
.pw-si .pw-sub{color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:44ch}
.pw-back{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-2);
  text-decoration:none;font-size:.85rem}
.pw-back:hover{color:var(--accent-2)}

.pw-field{margin-top:1.05rem}
.pw-field label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);margin-bottom:.38rem}
.pw-field input,.pw-field select{width:100%;box-sizing:border-box;padding:.78rem .9rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);
  font:inherit;font-size:.95rem;color:var(--ink)}
.pw-field input:focus,.pw-field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--glow)}
.pw-field.bad input{border-color:#C0392B}
.pw-err{color:#C0392B;font-size:.8rem;margin-top:.4rem}

.pw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.35rem;border-radius:var(--r-sm);border:1px solid var(--accent);
  background:var(--accent);color:#fff;font:inherit;font-size:.92rem;font-weight:600;
  cursor:pointer;transition:background .15s}
.pw-btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.pw-btn[disabled]{opacity:.45;cursor:not-allowed}
.pw-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.pw-btn.ghost:hover{background:var(--surface);border-color:var(--line-2)}
.pw-btn.sm{padding:.5rem .8rem;font-size:.82rem}
.pw-btn.wide{width:100%;margin-top:1.3rem}

.pw-prog{list-style:none;margin:1.6rem 0 0;padding:0}
.pw-prog li{display:flex;gap:.85rem;padding:.85rem 0;border-top:1px solid var(--line)}
.pw-prog li:first-child{border-top:none}
.pw-prog .pw-pk{width:1.9rem;height:1.9rem;border-radius:8px;flex:none;display:grid;
  place-items:center;background:var(--paper);border:1px solid var(--line-2);
  font-size:.72rem;font-weight:700;color:var(--accent-2);font-family:var(--mono)}
.pw-prog b{display:block;font-size:.92rem;margin-bottom:.12rem}
.pw-prog span{font-size:.84rem;color:var(--ink-2);line-height:1.5}

/* ── the workspace shell ─────────────────────────────────────────── */
.pw-top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.pw-top-in{display:flex;align-items:center;gap:1rem;padding:.85rem 0}
.pw-who{display:flex;align-items:center;gap:.7rem;min-width:0}
/* .pw-who span would otherwise out-specify .pw-av and paint the initials
   dark, small and top-left inside their own tile — so the avatar is
   selected at equal depth and the text rule is scoped to the label. */
.pw-who>.pw-av{width:36px;height:36px;border-radius:9px;flex:none;display:grid;
  place-items:center;background:var(--accent);color:#fff;font-weight:700;
  font-size:.82rem;letter-spacing:.02em;line-height:1}
.pw-who .pw-txt{min-width:0}
.pw-who .pw-txt b{display:block;font-size:.95rem;line-height:1.25}
.pw-who .pw-txt span{display:block;font-size:.76rem;color:var(--ink-2)}
.pw-sp{flex:1}

.pw-tabs{display:flex;gap:1.4rem;overflow-x:auto;padding:0;margin-bottom:-1px;scrollbar-width:none}
.pw-tabs::-webkit-scrollbar{display:none}
.pw-tab{padding:.45rem 0 .6rem;border:0;border-bottom:2px solid transparent;border-radius:0;
  background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-2);
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem}
.pw-tab:hover{color:var(--ink);background:none}
.pw-tab.on{color:var(--ink);border-bottom-color:var(--accent);background:none}
.pw-tab .n{font-size:.66rem;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;
  padding:.06rem .42rem;line-height:1.4}

.pw-body{padding:1.6rem 0 5rem}
.pw-h{font-family:var(--display);font-size:1.45rem;letter-spacing:-.015em;margin:0 0 .3rem}
.pw-hs{color:var(--ink-2);font-size:.92rem;line-height:1.55;max-width:70ch;margin:0 0 1.3rem}

.pw-grid{display:grid;gap:.9rem}
.pw-k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pw-k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pw-k2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.pw-k4,.pw-k3,.pw-k2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-si{grid-template-columns:minmax(0,1fr)}.pw-si-r{border-left:none;border-top:1px solid var(--line)}}
@media(max-width:560px){.pw-k4,.pw-k3,.pw-k2{grid-template-columns:minmax(0,1fr)}}

.pw-kpi{border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.05rem;
  background:var(--paper)}
.pw-kpi .l{font-size:.78rem;color:var(--ink-2);font-weight:500}
.pw-kpi .v{font-family:var(--display);font-size:1.6rem;letter-spacing:-.02em;margin:.4rem 0 .28rem}
.pw-kpi .d{font-size:.76rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:.45rem}
.pw-kpi.lead{background:var(--forest);border-color:var(--forest);color:#EAF6EF}
.pw-kpi.lead .l,.pw-kpi.lead .d{color:#A9D3BE}
.pw-kpi.lead .d{border-top-color:rgba(255,255,255,.14)}

.pw-card{border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.25rem;
  background:var(--paper)}
.pw-card h3{font-family:var(--display);font-size:1.02rem;margin:0 0 .2rem;letter-spacing:-.01em}
.pw-card .pw-cs{font-size:.86rem;color:var(--ink-2);line-height:1.55;margin:0 0 .9rem}
.pw-card.pw-plain{border:0;padding:0;background:none}
.pw-card.pw-tight{padding:.95rem 1.05rem}
.pw-tight h3{margin-bottom:.1rem}
.pw-tight .pw-field{margin-top:.65rem}
.pw-tight .pw-field label{font-size:.66rem;margin-bottom:.28rem}
.pw-tight .pw-field input,.pw-tight .pw-field select{padding:.58rem .72rem;font-size:.9rem}
.pw-tight .pw-btn.wide{margin-top:.85rem;padding-top:.62rem;padding-bottom:.62rem}
.pw-row{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.pw-row.pw-row4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pw-quote.tight{padding:.7rem .85rem;margin-top:.8rem}
.pw-quote.tight .pw-split{margin-top:0;gap:.5rem}
.pw-quote.tight .pw-split>div{padding:.5rem .65rem}
.pw-quote.tight .pw-split .n{font-size:1rem}
.pw-hint{font-size:.76rem;color:var(--ink-2);line-height:1.5;margin-top:.55rem}
.pw-actions{display:flex;align-items:center;gap:.9rem;margin-top:.85rem;flex-wrap:wrap}
.pw-actions .pw-hint{margin:0;flex:1;min-width:12rem}
.pw-k12{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
@media(max-width:900px){.pw-k12{grid-template-columns:minmax(0,1fr)}.pw-row.pw-row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pw-row,.pw-row.pw-row4{grid-template-columns:minmax(0,1fr)}}

.pw-sec{margin:1.9rem 0 .8rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.pw-sec h2{font-family:var(--display);font-size:1.02rem;margin:0;letter-spacing:-.01em}
.pw-sec span{font-size:.82rem;color:var(--ink-2)}

.pw-tblw{border:0;border-radius:0;overflow:visible;background:none}
.pw-tblw .pw-tbl th{background:none;border-bottom:1px solid var(--line-2)}
.pw-tblw .pw-tbl th:first-child,.pw-tblw .pw-tbl td:first-child{padding-left:0}
.pw-tblw .pw-tbl th:last-child,.pw-tblw .pw-tbl td:last-child{padding-right:0}
.pw-tblw .pw-scroll{overflow-x:auto}
table.pw-tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.pw-tbl th{text-align:left;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;padding:.72rem 1rem;background:var(--mist);
  border-bottom:1px solid var(--line);white-space:nowrap}
.pw-tbl td{padding:.78rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.pw-tbl tr:last-child td{border-bottom:none}
.pw-tbl .num{text-align:right}
.pw-tbl .main{font-weight:600}
.pw-tbl .sub{font-size:.76rem;color:var(--ink-2);font-weight:400;margin-top:.12rem}
.pw-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.84rem}

.pw-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;
  border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.pw-pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pw-pill.ok{background:#E6F4EA;color:#1B6E3C}
.pw-pill.wait{background:#FBF2DC;color:#8A6300}
.pw-pill.go{background:#EDEAFB;color:#4F44B8}
.pw-pill.no{background:#FBE6E3;color:#B03A32}
.pw-pill.info{background:#E7EFF8;color:#2E5F96}

.pw-note{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem .95rem;
  font-size:.86rem;color:var(--ink-2);line-height:1.55;margin-top:.9rem}
.pw-note b{color:var(--ink)}
.pw-note.warn{background:#FDF6E8;border-color:#EEDFBB}
.pw-note.bad{background:#FCEDEB;border-color:#F0D2CD}
.pw-note .pw-ni{flex:none;width:1.05rem;height:1.05rem;margin-top:.12rem;color:var(--accent)}
.pw-note.warn .pw-ni,.pw-note.bad .pw-ni{color:#B0791A}

.pw-kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--line);font-size:.87rem}
.pw-kv:last-child{border-bottom:none}
.pw-kv .k{color:var(--ink-2)}
.pw-kv .v{font-weight:600;text-align:right}
.pw-kv.big .v{font-family:var(--display);font-size:1.15rem}

/* the quote, which is the whole point of the workspace */
.pw-quote{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.15rem;margin-top:1rem}
.pw-quote .pw-ql{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);margin-bottom:.55rem}
.pw-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:.8rem}
.pw-split>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.65rem .8rem}
.pw-split .t{font-size:.72rem;color:var(--ink-2)}
.pw-split .n{font-family:var(--display);font-size:1.12rem;letter-spacing:-.015em;margin-top:.2rem}
.pw-split .mine{border-color:var(--accent);background:var(--glow)}
@media(max-width:560px){.pw-split{grid-template-columns:minmax(0,1fr)}}

/* the two destinations, picked rather than typed */
.pw-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:.9rem 0 .2rem}
.pw-opt{text-align:left;padding:.85rem .95rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);font:inherit;cursor:pointer;color:var(--ink)}
.pw-opt:hover{border-color:var(--accent);background:var(--glow)}
.pw-opt.on{border-color:var(--accent);background:var(--glow);box-shadow:0 0 0 1px var(--accent)}
.pw-opt b{display:block;font-size:.92rem;margin-bottom:.2rem}
.pw-opt span{display:block;font-size:.8rem;color:var(--ink-2);line-height:1.5;font-weight:400}
@media(max-width:560px){.pw-pick{grid-template-columns:minmax(0,1fr)}}

.pw-bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:.8rem}
.pw-band{border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .8rem;
  background:var(--paper)}
.pw-band.on{border-color:var(--accent);background:var(--glow)}
.pw-band .bl{font-size:.74rem;color:var(--ink-2)}
.pw-band .bv{font-family:var(--mono);font-size:1rem;font-weight:600;margin-top:.22rem}
.pw-band .bc{font-size:.7rem;color:var(--ink-2);margin-top:.28rem}
@media(max-width:760px){.pw-bands{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pw-empty{padding:2.2rem 1rem;text-align:center;color:var(--ink-2);font-size:.9rem}
.pw-tblw .pw-empty{padding:1rem 0;text-align:left;border-top:1px solid var(--line)}

/* the sign-in entry on the marketing partners page */
.pw-entry{border:1px solid var(--line);border-radius:var(--r);background:var(--mist);
  padding:clamp(1.2rem,3vw,2rem);display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.pw-entry .pw-et{flex:1;min-width:16rem}
.pw-entry h3{font-family:var(--display);font-size:1.15rem;margin:0 0 .35rem;letter-spacing:-.01em}
.pw-entry p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.6;max-width:56ch}


/* ── agreements ──────────────────────────────────────────────────────
   A line on the overview, a tab of its own, and the document rendered
   at its own measure inside it. */
.pw-alert{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:#FDF6E8;border:1px solid #EEDFBB;border-radius:var(--r-sm);
  padding:.75rem 1rem;margin-bottom:1.3rem;font-size:.9rem;color:var(--ink-2)}
.pw-alert b{color:var(--ink)}
.pw-alert .pw-btn{margin-left:auto}

.pw-tbl tr.pw-hot td{background:var(--glow)}

.pw-agbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.pw-agref{font-family:var(--mono);font-size:.82rem;color:var(--ink-2)}

.pw-doc{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:clamp(1.2rem,3vw,2.4rem);max-height:62vh;overflow-y:auto;margin-top:.4rem}
.pw-agfoot{border:1px solid var(--line);border-radius:var(--r);background:var(--mist);
  padding:1.1rem 1.25rem;margin-top:1rem}
.pw-check{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;
  line-height:1.55;cursor:pointer;color:var(--ink-2)}
.pw-check input{margin-top:.2rem;flex:none;width:1rem;height:1rem;accent-color:var(--accent)}
/* The agreement, on screen. It has to read like the document it is — a
   person is signing it — so it keeps the paper's measure and hierarchy
   rather than being restyled into a web page. */
.pfa{max-width:46rem;margin:0 auto;font-size:12.5px;line-height:1.62;color:#1b1b1b;
  font-family:Georgia,'Times New Roman',serif;background:#fff}
.pfa-head{border-bottom:2px solid #1A8754;padding-bottom:10px;margin-bottom:18px}
.pfa-bank b{display:block;font-size:20px;letter-spacing:-.2px;color:#0B5137}
.pfa-bank span{display:block;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:#555}
.pfa-reg{font-size:9.5px;color:#666;margin-top:7px}
.pfa-t{font-size:23px;letter-spacing:-.3px;margin:0 0 4px;color:#0B5137;font-weight:700}
.pfa-st{font-size:11.5px;color:#555;margin-bottom:18px}
.pfa-p{margin:10px 0}
.pfa-n{display:flex;gap:12px;margin:7px 0}
.pfa-n>span{flex:none;width:2.1rem;color:#555}

.pfa-kv{width:100%;border-collapse:collapse;margin:10px 0 16px}
.pfa-kv th{text-align:left;font-weight:400;color:#555;padding:6px 12px 6px 8px;
  width:38%;vertical-align:top;border-bottom:1px solid #e6e6e6;font-size:12px}
.pfa-kv td{padding:6px 8px;border-bottom:1px solid #e6e6e6;vertical-align:top}

.pfa-pt{font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;color:#1A8754;
  font-weight:700;margin-top:30px;font-family:system-ui,sans-serif}
.pfa-h{font-size:19px;margin:2px 0 6px;color:#0B5137;font-weight:700;
  border-bottom:1.5px solid #1A8754;padding-bottom:6px}
.pfa-sh{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#0B5137;
  font-weight:700;margin:20px 0 2px;border-bottom:1px solid #1A8754;padding-bottom:4px;
  font-family:system-ui,sans-serif}
.pfa-ch{font-size:13.5px;font-weight:700;color:#0B5137;margin:22px 0 6px}

.pfa-c{display:flex;gap:12px;margin:7px 0}
.pfa-cn{flex:none;width:2.6rem;color:#555;font-size:12px}
.pfa-cb{flex:1;min-width:0}

.pfa-box{background:#F2F8F4;border-left:3px solid #1A8754;padding:12px 16px;margin:18px 0}
.pfa-box h4{font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:#0B5137;
  margin:0 0 8px;font-family:system-ui,sans-serif}
.pfa-box ol{margin:0;padding-left:18px}
.pfa-box li{margin:6px 0}

.pfa-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin:14px 0 22px}
@media(max-width:620px){.pfa-two{grid-template-columns:minmax(0,1fr)}}
.pfa-sig h4{font-size:12.5px;color:#0B5137;margin:0 0 8px;font-weight:700}
.pfa-sl{display:flex;gap:10px;align-items:flex-end;margin:11px 0}
.pfa-sl>span{flex:none;width:7rem;font-size:11px;color:#555}
.pfa-sl>i{flex:1;border-bottom:1px solid #999;min-height:1.25rem;font-style:normal;font-size:12px}

.pfa-foot{margin-top:28px;padding-top:9px;border-top:1px solid #e6e6e6;
  font-size:9.5px;color:#777;text-align:center}

/* ==========================================================================
   NIGERIA — the lead sequence, v3
   The device is a real iPhone: the screen is authored at 402 x 874 CSS px,
   the exact logical resolution, and the whole thing is scaled. Nothing is
   stretched, so the type inside sits at the size it really sits at.
   ========================================================================== */
.ngl{display:block}
.ngl .wrapx{width:min(var(--max),100%);margin:0 auto;padding:0 var(--pad)}
.ngl-k{display:inline-flex;align-items:center;gap:.5rem;font:700 .64rem/1 var(--body);
  letter-spacing:.16em;text-transform:uppercase;color:var(--emerald)}
.ngl-k i{width:6px;height:6px;border-radius:50%;background:var(--emerald);flex:0 0 6px}
.ngl h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.08;margin:.9rem 0 0}
.ngl p.ngl-l{margin:0;font-size:1rem;line-height:1.65;color:var(--ink-2)}

/* ----------------------------------------------------- the device shell */
.ipx{--ds:.68;position:relative;flex:0 0 auto;
  width:calc(428px * var(--ds));height:calc(900px * var(--ds))}
.ipx-in{position:absolute;top:0;left:0;width:428px;height:900px;
  transform:scale(var(--ds));transform-origin:top left;
  border-radius:60px;padding:13px;
  background:linear-gradient(145deg,#4A5A52 0%,#1A2520 32%,#0A1310 70%,#39483F 100%);
  box-shadow:0 60px 110px -50px rgba(0,0,0,.9),0 10px 30px -14px rgba(0,0,0,.6),
    inset 0 0 0 1.5px rgba(255,255,255,.14)}
.ipx-s{position:relative;width:402px;height:874px;border-radius:47px;overflow:hidden;
  background:#F6F8F7;color:#0A0A0A;font-family:var(--body)}
.ipx-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:9;
  width:124px;height:36px;border-radius:999px;background:#05100C}
.ipx-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:9;
  width:140px;height:5px;border-radius:999px;background:rgba(10,20,15,.3)}
.ipx-btn{position:absolute;background:#2A352F;border-radius:2px}
.ipx-btn.a{left:-2px;top:150px;width:3px;height:30px}
.ipx-btn.b{left:-2px;top:200px;width:3px;height:56px}
.ipx-btn.c{left:-2px;top:270px;width:3px;height:56px}
.ipx-btn.d{right:-2px;top:220px;width:3px;height:88px}

/* status bar, true iOS metrics */
.ios-bar{display:flex;align-items:center;justify-content:space-between;height:54px;
  padding:0 30px 0 34px;font:700 17px/1 var(--body);letter-spacing:-.2px}
.ios-bar-r{display:flex;align-items:center;gap:6px}
.ios-sig{display:flex;align-items:flex-end;gap:2px}
.ios-sig i{width:3.5px;border-radius:1px;background:#0A0A0A}
.ios-sig i:nth-child(1){height:5px}.ios-sig i:nth-child(2){height:8px}
.ios-sig i:nth-child(3){height:11px}.ios-sig i:nth-child(4){height:14px}
.ios-wifi{width:17px;height:12px;position:relative}
.ios-wifi::before{content:"";position:absolute;inset:0;border:2.2px solid #0A0A0A;border-radius:50%;
  clip-path:polygon(0 0,100% 0,100% 55%,0 55%)}
.ios-wifi::after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:#0A0A0A}
.ios-bat{width:25px;height:12.5px;border-radius:3.5px;border:1.5px solid rgba(10,10,10,.4);
  position:relative;padding:1.5px}
.ios-bat i{display:block;width:72%;height:100%;border-radius:2px;background:#0A0A0A}
.ios-bat::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:1.6px;height:4px;border-radius:0 1px 1px 0;background:rgba(10,10,10,.4)}

/* ------------------------------------------------------ the Loans screen */
.scr{padding:0 16px;height:100%;display:flex;flex-direction:column;overflow:hidden}
.scr>*{flex:0 0 auto}
.ln-nav{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;
  padding:10px 14px;box-shadow:0 1px 3px rgba(10,30,20,.07)}
.ln-back{font-size:24px;line-height:1;color:#6B7A72;font-weight:300}
.ln-nav>div{flex:1 1 auto;text-align:center;margin-left:-20px}
.ln-nav em{display:block;font-style:normal;font-size:13px;color:#6B7A72}
.ln-nav b{display:block;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.6px;
  margin-top:1px}
.orbx{width:34px;height:34px;border-radius:50%;flex:0 0 auto;position:relative;
  background:radial-gradient(60% 55% at 36% 30%,#8FF3BE,#27B873 46%,#0B5137 100%);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,255,255,.4)}
.orbx::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;border:1.6px solid rgba(255,255,255,.85);
  border-bottom-color:transparent}

.seg{display:flex;gap:4px;margin:14px 0;padding:4px;border-radius:16px;background:#E8EEEB}
.seg span{flex:1 1 0;text-align:center;padding:11px 4px;border-radius:12px;
  font:600 15px/1 var(--body);color:#6B7A72}
.seg span.on{background:#fff;color:#0A0A0A;box-shadow:0 1px 3px rgba(10,30,20,.12)}

.cred{position:relative;overflow:hidden;border-radius:22px;padding:18px 18px 16px;
  background:linear-gradient(150deg,#3A8A62 0%,#1C6442 55%,#14543A 100%);color:#fff}
.cred::after{content:"";position:absolute;right:-28%;top:-72%;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%)}
.cred-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  position:relative;z-index:1}
.cred-h>div>span{display:block;font-size:15px;color:rgba(255,255,255,.78)}
.cred-h b{display:block;font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-1.2px;
  margin-top:2px}
.cred-h b em{font-style:normal;font-size:15px;font-weight:600;color:rgba(255,255,255,.8);
  letter-spacing:0;margin-left:5px}
.cred-rep{flex:0 0 auto;background:#fff;color:#14603C;border-radius:999px;padding:9px 14px;
  font:700 14px/1 var(--body);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.cred-m{display:block;position:relative;z-index:1;height:7px;border-radius:999px;margin:16px 0 9px;
  background:rgba(255,255,255,.3);overflow:hidden}
.cred-m i{display:block;height:100%;border-radius:999px;background:#fff}
.cred-f{display:flex;justify-content:space-between;position:relative;z-index:1;font-size:14px;
  color:rgba(255,255,255,.88)}
.cred-n{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1;
  margin-top:8px;font-size:13px;color:rgba(255,255,255,.66)}
.cred-pips{display:flex;gap:4px}
.cred-pips i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.cred-pips i.on{background:#fff}
.agr{margin:10px 0 14px;text-align:center;font-size:13px;color:#6B7A72}
.agr b{color:#14603C;font-weight:700}

.ltabs{display:flex;gap:4px;padding:4px;border-radius:16px;background:#E8EEEB;margin-bottom:14px}
.ltabs span{flex:1 1 0;text-align:center;padding:10px 2px;border-radius:12px;
  font:600 14px/1 var(--body);color:#6B7A72;white-space:nowrap}
.ltabs span.on{background:#fff;color:#0A0A0A;box-shadow:0 1px 3px rgba(10,30,20,.12)}
.ltabs em{font-style:normal;color:#9AA8A1;margin-left:3px}

.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lt{border-radius:18px;background:#fff;padding:14px 8px 12px;text-align:center;
  box-shadow:0 1px 3px rgba(10,30,20,.06)}
.lt span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 9px;border-radius:14px;
  background:#EDF3F0;font-size:21px}
.lt b{display:block;font-size:13px;font-weight:700;line-height:1.25}
.lt em{display:block;font-style:normal;font-size:12px;color:#9AA8A1;margin-top:3px}

.hey{display:flex;align-items:center;gap:8px;width:max-content;margin:16px auto 0;
  border-radius:999px;background:#1C2A24;color:#fff;padding:9px 10px 9px 14px;font:600 15px/1 var(--body);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.hey i.live{width:8px;height:8px;border-radius:50%;background:#7BEFB4;flex:0 0 8px;font-style:normal}
.hey i.mic{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.14);font-size:13px}

.tabbar{margin:auto -16px 0;padding:14px 26px 30px;background:#fff;display:flex;align-items:center;
  justify-content:space-between;box-shadow:0 -1px 0 rgba(10,30,20,.07)}
.tabbar span{font:600 12px/1 var(--body);color:#9AA8A1;display:grid;justify-items:center;gap:7px}
.tabbar span i{width:22px;height:22px;border:1.8px solid #9AA8A1;border-radius:5px;display:block;
  font-style:normal}
.tabbar .fab{width:52px;height:52px;border-radius:50%;margin-top:-26px;
  background:radial-gradient(60% 55% at 36% 30%,#8FF3BE,#27B873 46%,#0B5137 100%);
  box-shadow:0 10px 22px -8px rgba(11,81,55,.85);position:relative}
.tabbar .fab::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
  border-bottom-color:transparent}

/* ------------------------------------------------------- the Swap screen */
.scr.sheeted{padding:0}
.behind{padding:6px 24px 26px;text-align:center;opacity:.42}
.behind-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 18px;
  font-size:22px;color:#6B7A72}
.behind-fl{display:block;width:34px;height:34px;margin:0 auto 10px;border-radius:7px;
  background:linear-gradient(90deg,#008751 0 33.3%,#fff 33.3% 66.6%,#008751 66.6%)}
.behind>span{display:block;font-size:15px;color:#6B7A72}
.behind>b{display:block;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-1.2px;
  margin-top:4px}
.behind>b em{font-style:normal;color:#9AA8A1}
.sheet{margin-top:auto;border-radius:30px 30px 0 0;background:#fff;padding:12px 18px 28px;
  box-shadow:0 -14px 40px -18px rgba(10,30,20,.4)}
.sheet-g{display:block;width:44px;height:5px;border-radius:999px;background:#D9E6DF;margin:0 auto 16px}
.sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.sheet-h b{display:block;font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.9px}
.sheet-h span{display:block;font-size:14px;color:#6B7A72;margin-top:3px;line-height:1.35}
.rate{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#E3F2EA;
  padding:8px 14px;font:600 15px/1 var(--body);margin-bottom:12px}
.rate i{width:8px;height:8px;border-radius:50%;background:#1A8754}
.swp{position:relative}
.swp-r{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:18px;
  background:#F2F6F4;padding:14px 16px;margin-bottom:10px}
.swp-r em{display:block;font-style:normal;font:600 12px/1 var(--body);letter-spacing:1.2px;
  text-transform:uppercase;color:#9AA8A1;margin-bottom:8px}
.cur{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#fff;
  padding:7px 12px 7px 7px;font:700 17px/1 var(--body);box-shadow:inset 0 0 0 1.5px #DCE6E1}
.cur i{font-style:normal;color:#9AA8A1;font-size:12px}
.swp-v{text-align:right;min-width:0}
.swp-v b{display:block;font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-1px;
  color:#0A0A0A}
.swp-v u{display:block;text-decoration:none;font-size:12.5px;color:#9AA8A1;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swp-x{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:#fff;display:grid;place-items:center;font-size:19px;color:#1A8754;
  box-shadow:0 3px 12px rgba(10,30,20,.18)}
.srows{margin-top:14px}
.srows div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:16px;
  color:#6B7A72;border-bottom:1px solid #EDF1EF}
.srows div b{color:#0A0A0A;font-weight:700}
.srows .tot{border-bottom:0;padding-top:12px}
.srows .tot b{font-family:var(--display);font-size:24px;letter-spacing:-.9px}
.seg.two{margin:14px 0 0}
.sheet-n{margin:10px 0 12px;font-size:14px;color:#6B7A72;line-height:1.4}
.targ{border-radius:18px;background:#F2F6F4;padding:13px 16px}
.targ em{display:block;font-style:normal;font:600 12px/1 var(--body);letter-spacing:1.2px;
  text-transform:uppercase;color:#9AA8A1;margin-bottom:8px}
.targ div{display:flex;align-items:center;gap:8px;border-radius:14px;background:#fff;padding:12px 14px;
  box-shadow:inset 0 0 0 1.5px #DCE6E1}
.targ span{font-size:16px;color:#6B7A72}
.targ b{flex:1 1 auto;font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.8px}
.targ u{text-decoration:none;color:#9AA8A1;font-size:18px}
.sgo{margin-top:16px;border-radius:999px;background:#8FC7AC;color:#fff;text-align:center;padding:18px;
  font:700 18px/1 var(--body)}

/* ---------------------------------------------------------------- SPACES */
.ngsp{position:relative;overflow:hidden;background:#06231A;color:#fff;
  padding:clamp(3.2rem,7vw,6rem) 0 clamp(4rem,8vw,7rem)}
.ngsp-aura{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 40% at 8% 4%,rgba(26,135,84,.45),transparent 72%),
    radial-gradient(38% 44% at 96% 10%,rgba(246,200,106,.15),transparent 72%),
    radial-gradient(80% 50% at 50% 104%,rgba(123,239,180,.14),transparent 72%),
    linear-gradient(165deg,#0E3F2B 0%,#06231A 55%)}
.ngsp>.wrapx{position:relative;z-index:1}
.ngsp .ngl-k{color:#F6C86A}.ngsp .ngl-k i{background:#F6C86A}
.ngsp h2{color:#fff;max-width:16ch;font-size:clamp(1.9rem,3.8vw,3rem)}
.ngsp h2 em{font-style:normal;color:#7BEFB4}
.ngsp .ngl-l{color:rgba(255,255,255,.66);max-width:44ch}
.ngsp-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.2rem,4vw,3.5rem);align-items:end;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
@media(max-width:900px){.ngsp-top{grid-template-columns:1fr;align-items:start}}

/* one scene: the dashboard behind, the phone standing in front of it */
.scene{position:relative;min-height:660px}
.scene-ws{width:calc(100% - 232px);margin-left:auto;position:relative;z-index:1}
.scene-ph{position:absolute;left:0;top:62px;z-index:3}
.scene-ph .ipx{--ds:.62}
.scene-cap{display:flex;align-items:center;gap:.45rem;font:600 .62rem/1 var(--body);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.7rem}
.scene-cap b{color:#fff;font-weight:700}
.scene-dot{width:6px;height:6px;border-radius:50%;background:#7BEFB4;flex:0 0 6px;
  box-shadow:0 0 0 3px rgba(123,239,180,.18)}
.scene-ph .scene-cap{justify-content:center}

/* the money arc between them */
.scene-arc{position:absolute;left:236px;top:188px;width:210px;height:190px;z-index:2;pointer-events:none}
.scene-arc svg{width:100%;height:100%;overflow:visible}
.scene-arc path{fill:none;stroke:rgba(123,239,180,.45);stroke-width:1.5;stroke-dasharray:5 6}
.scene-arc circle{fill:#F6C86A;filter:drop-shadow(0 0 6px rgba(246,200,106,.9))}
.scene-arc .mv{animation:arcrun 3.6s cubic-bezier(.45,0,.55,1) infinite}
.scene-arc .mv.b{animation-delay:1.2s}.scene-arc .mv.c{animation-delay:2.4s}
@keyframes arcrun{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}
  100%{offset-distance:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.scene-arc .mv{animation:none;opacity:.8}}
.scene-arc-l{position:absolute;left:50%;top:44%;transform:translateX(-50%);text-align:center;width:max-content}
.scene-arc-l b{display:block;font:700 .6rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:#7BEFB4}
.scene-arc-l span{display:block;font-size:.66rem;color:rgba(255,255,255,.45);margin-top:.22rem}

@media(max-width:1180px){
  .scene{min-height:0;display:flex;flex-direction:column;align-items:center;gap:1.8rem}
  .scene-ws{width:100%;margin:0}
  .scene-ph{position:static}
  .scene-arc{display:none}
}

/* -------------------------------------------------------- the workspace */
.ngws{border-radius:18px;overflow:hidden;background:#fff;color:#0A0A0A;width:100%;
  box-shadow:0 50px 90px -46px rgba(0,0,0,.78),inset 0 0 0 1px rgba(255,255,255,.1)}
.ngws-chrome{display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;background:#F1F5F3;
  border-bottom:1px solid #E2ECE6}
.ngws-chrome i{width:8px;height:8px;border-radius:50%;background:#D6E3DC;flex:0 0 8px}
.ngws-chrome span{margin-left:.5rem;font-family:var(--mono);font-size:.6rem;color:#8A978F}
.ngws-b{padding:1.1rem 1.25rem 1.3rem}
.ngws-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.ngws-top h3{margin:0;font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
.ngws-top h3 em{font-style:normal;font-size:.62rem;font-weight:600;color:#6B7A72;
  border:1px solid #E2ECE6;border-radius:999px;padding:.3rem .6rem;margin-left:.6rem;
  vertical-align:middle;letter-spacing:0}
.ngws-sw{display:flex;align-items:center;gap:.6rem;text-align:right}
.ngws-sw b{display:block;font-size:.72rem;font-weight:600}
.ngws-sw em{display:block;font-style:normal;font-size:.58rem;color:#8A978F}
.ngws-tog{width:2.1rem;height:1.2rem;border-radius:999px;background:#1A8754;position:relative;flex:0 0 auto}
.ngws-tog::after{content:"";position:absolute;top:3px;right:3px;width:.85rem;height:.85rem;
  border-radius:50%;background:#fff}
.ngws-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:1rem 2rem;
  padding-bottom:.9rem;border-bottom:1px solid #EDF1EF}
@media(max-width:620px){.ngws-grid{grid-template-columns:1fr}}
.ngws-k{display:block;font:600 .55rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:#8A978F;margin-bottom:.35rem}
.ngws-fig{display:block;font-family:var(--display);font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:700;
  letter-spacing:-.04em;line-height:1.05}
.ngws-sub{display:block;font-size:.72rem;color:#6B7A72;margin-top:.22rem}
.ngws-sub u{text-decoration:none;color:#9A2B2B;font-weight:700}
.ngws-split{display:flex;height:9px;border-radius:999px;overflow:hidden;gap:2px;margin:.1rem 0 .6rem}
.ngws-split i{display:block;height:100%}
.ngws-split i.r{background:#1A8754}.ngws-split i.n{background:#E3AE4A}
.ngws-leg{display:grid;gap:.28rem}
.ngws-leg span{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:#6B7A72}
.ngws-leg i{width:7px;height:7px;border-radius:2px;flex:0 0 7px}
.ngws-leg i.r{background:#1A8754}.ngws-leg i.n{background:#E3AE4A}
.ngws-leg b{color:#0A0A0A;font-weight:700}
.ngws-mini{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;padding:.75rem 0;font-size:.72rem;color:#6B7A72}
.ngws-mini b{color:#0A0A0A;font-weight:600}
.ngws-chart{display:flex;align-items:flex-end;gap:2px;height:4.8rem;margin-top:.35rem}
.ngws-chart span{flex:1 1 0;height:var(--h);border-radius:3px 3px 0 0;background:#DCEBE3;position:relative}
.ngws-chart span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--f);
  background:#E3AE4A;border-radius:0 0 3px 3px}
.ngws-ax{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.45rem;
  font-family:var(--mono);font-size:.55rem;color:#9AA8A1}
.ngws-key{display:inline-flex;align-items:center;gap:.3rem}
.ngws-key i{width:7px;height:7px;border-radius:2px;margin-left:.45rem}
.ngws-key i.r{background:#DCEBE3;margin-left:0}.ngws-key i.n{background:#E3AE4A}
.ngws-flowh{margin:1.3rem 0 .75rem;font-family:var(--display);font-size:1rem;font-weight:700;
  letter-spacing:-.025em}
.ngws-flowh em{display:block;font-style:normal;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.09em;text-transform:uppercase;color:#9AA8A1;margin-top:.2rem;font-weight:400}
.ngws-flow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.9fr) minmax(0,.9fr);
  gap:.6rem;align-items:stretch}
@media(max-width:820px){.ngws-flow{grid-template-columns:1fr}}
.ngws-in,.ngws-out{display:flex;flex-direction:column;justify-content:center;border-radius:15px;
  padding:.8rem .9rem}
.ngws-in{background:linear-gradient(150deg,#0E3F2B,#09321F);color:#fff}
.ngws-in>span{font:600 .55rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.ngws-in b{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.035em;
  color:#F6C86A;margin-top:.25rem}
.ngws-in em{font-style:normal;font-size:.6rem;color:rgba(255,255,255,.55);margin-top:.2rem;line-height:1.4}
.ngws-mid{padding:.45rem .85rem .2rem;min-width:0}
.ngws-track{display:block;position:relative;height:3px;border-radius:999px;background:#E6EEEA;
  margin:0 -.3rem;overflow:hidden}
.ngws-track i{position:absolute;inset:0 auto 0 0;width:34%;border-radius:999px;
  background:linear-gradient(90deg,#1A8754,#F6C86A)}
.ngws-drops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.1rem}
.ngws-drops>div{position:relative;padding-top:.9rem;min-width:0}
.ngws-pin{position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:#fff;
  border:2.5px solid #D9E6DF}
.ngws-drops>.on .ngws-pin{border-color:#E3AE4A;box-shadow:0 0 0 3px rgba(227,174,74,.22)}
.ngws-drops em{display:block;font-style:normal;font:600 .52rem/1 var(--body);letter-spacing:.1em;
  text-transform:uppercase;color:#9AA8A1}
.ngws-drops b{display:block;font-family:var(--display);font-size:.95rem;font-weight:700;
  letter-spacing:-.03em;margin-top:.18rem}
.ngws-drops u{display:block;text-decoration:none;font-size:.56rem;color:#9AA8A1;margin-top:.08rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ngws-held{display:block;text-align:center;font-size:.56rem;color:#9AA8A1;margin-top:.65rem}
.ngws-out{background:#E9F3ED;align-items:flex-start}
.ngws-bank{width:1.5rem;height:1.5rem;border-radius:7px;background:#1A8754;position:relative;
  margin-bottom:.4rem}
.ngws-bank::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:.72rem;height:.55rem;border:2px solid #fff;border-radius:2px}
.ngws-out>span{font:600 .55rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#0B5137}
.ngws-out b{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.035em;
  color:#0B5137;margin-top:.25rem}
.ngws-out em{font-style:normal;font-size:.6rem;color:#6B7A72;margin-top:.2rem}

.ngsp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 2rem;
  margin-top:clamp(2.4rem,4vw,3.2rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:900px){.ngsp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ngsp-facts{grid-template-columns:1fr}}
.ngsp-facts b{display:block;font-family:var(--display);font-size:1.28rem;font-weight:700;
  letter-spacing:-.035em;color:#F6C86A}
.ngsp-facts span{display:block;font-size:.78rem;color:rgba(255,255,255,.62);margin-top:.25rem;line-height:1.55}
.ngsp-sectors{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1.9rem}
.ngsp-sectors span{font-size:.72rem;color:rgba(255,255,255,.72);border-radius:999px;padding:.4rem .7rem;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ngsp-sec-k{background:none!important;box-shadow:none!important;padding-left:0!important;
  font:700 .58rem/1 var(--body)!important;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4)!important}

/* --------------------------------------------------------- MULTICURRENCY */
.ngmc{padding:clamp(3rem,7vw,5.2rem) 0;background:var(--bg);overflow:hidden}
.ngmc-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.2rem,4vw,3.5rem);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
@media(max-width:900px){.ngmc-top{grid-template-columns:1fr;align-items:start}}
.ngmc h2{font-size:clamp(1.8rem,3.5vw,2.65rem);max-width:16ch}
.ngmc-scene{position:relative;min-height:600px}
.ngmc-acct{width:calc(100% - 230px);border-radius:24px;padding:1.5rem 1.6rem 1.6rem;background:var(--bg);
  box-shadow:0 40px 80px -46px rgba(10,40,26,.5),inset 0 0 0 1px var(--line)}
.ngmc-ph{position:absolute;right:0;top:40px}
.ngmc-ph .ipx{--ds:.62}
.ngmc-cap{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-bottom:.7rem;
  font:600 .62rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ngmc-cap b{color:var(--ink);font-weight:700}
.ngmc-cap i{width:6px;height:6px;border-radius:50%;background:var(--emerald);flex:0 0 6px;
  box-shadow:0 0 0 3px rgba(26,135,84,.14)}
@media(max-width:1100px){
  .ngmc-scene{min-height:0;display:flex;flex-direction:column;align-items:center;gap:2rem}
  .ngmc-acct{width:100%}
  .ngmc-ph{position:static}
}
.ngacct-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.ngacct-h b{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
.ngacct-h b em{font-style:normal;font-weight:600;color:var(--emerald)}
.ngacct-h span{font-size:.74rem;color:var(--ink-3)}
.ngcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.ngcard{position:relative;overflow:hidden;border-radius:16px;padding:.8rem .85rem .85rem;
  background:linear-gradient(160deg,var(--bg),var(--surface));box-shadow:inset 0 0 0 1px var(--line)}
.ngcard.on{box-shadow:inset 0 0 0 1.5px var(--emerald);
  background:linear-gradient(160deg,var(--bg),rgba(26,135,84,.09) 140%)}
.ngcard-g{position:absolute;right:-.15rem;bottom:-.95rem;font-family:var(--display);font-size:3rem;
  font-weight:700;line-height:1;color:var(--forest);opacity:.06;letter-spacing:-.05em}
.ngcard-f{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.55rem}
.ngcard-live{width:6px;height:6px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 3px rgba(26,135,84,.14)}
.ngcard-b{font:700 .5rem/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--forest);
  background:rgba(26,135,84,.12);border-radius:999px;padding:.25rem .4rem}
.ngcard-v{position:relative;z-index:1;display:block;font-family:var(--display);font-size:1.02rem;
  font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.ngcard-c{position:relative;z-index:1;display:block;font-family:var(--mono);font-size:.54rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:.2rem}
.ngflag{width:1.6rem;height:1.6rem;border-radius:50%;display:block;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(10,20,15,.1),0 1px 2px rgba(10,20,15,.12)}
.ngflag.sm{width:22px;height:22px}
.ngflag[data-f="ng"]{background:linear-gradient(90deg,#008751 0 33.3%,#fff 33.3% 66.6%,#008751 66.6%)}
.ngflag[data-f="us"]{background:repeating-linear-gradient(180deg,#B22234 0 14.3%,#fff 14.3% 28.6%)}
.ngflag[data-f="gb"]{background:#012169;position:relative}
.ngflag[data-f="gb"]::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 40%,#fff 40% 60%,transparent 60%),
             linear-gradient(180deg,transparent 40%,#fff 40% 60%,transparent 60%)}
.ngflag[data-f="gb"]::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 44%,#C8102E 44% 56%,transparent 56%),
             linear-gradient(180deg,transparent 44%,#C8102E 44% 56%,transparent 56%)}
.ngflag[data-f="eu"]{background:#003399;position:relative}
.ngflag[data-f="eu"]::after{content:"\2605";position:absolute;inset:0;display:grid;place-items:center;
  color:#FFCC00;font-size:.62rem;line-height:1}
.ngmc-pts{display:grid;gap:.65rem;margin:1.3rem 0 0;padding:0}
.ngmc-pts li{list-style:none;display:flex;gap:.65rem;font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.ngmc-pts i{flex:0 0 1.05rem;width:1.05rem;height:1.05rem;border-radius:50%;margin-top:.2rem;
  background:var(--surface-2);position:relative}
.ngmc-pts i::after{content:"";position:absolute;left:4px;top:4.5px;width:5px;height:2.5px;
  border-left:1.7px solid var(--forest);border-bottom:1.7px solid var(--forest);transform:rotate(-45deg)}
.ngmc-pts b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- the rest */
.ngmore{padding:clamp(2.6rem,6vw,4.4rem) 0;background:var(--mist);border-top:1px solid var(--line)}
.ngmore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.8rem);
  margin-top:clamp(1.6rem,4vw,2.6rem)}
@media(max-width:940px){.ngmore-grid{grid-template-columns:1fr}}
.ngmore h2{font-size:clamp(1.6rem,3vw,2.2rem);max-width:20ch}
.ngtile{display:flex;flex-direction:column;border-radius:18px;padding:1.2rem 1.25rem 1.25rem;
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.ngtile-k{font:700 .58rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.ngtile h3{font-family:var(--display);font-size:1.1rem;font-weight:700;letter-spacing:-.03em;margin:.6rem 0 .4rem}
.ngtile p{margin:0;font-size:.84rem;line-height:1.6;color:var(--ink-2)}
.ngtile-art{margin-top:1rem}
.ngbox{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.ngbox:last-child{border-bottom:0}
.ngbox b{flex:0 0 auto;font-size:.78rem;font-weight:600}
.ngbox-m{flex:1 1 auto;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ngbox-m i{display:block;height:100%;border-radius:999px;background:var(--emerald)}
.ngbox small{flex:0 0 auto;font-family:var(--mono);font-size:.64rem;color:var(--ink-3)}
.ngcode{margin-top:1rem;border-radius:12px;padding:.75rem .85rem;background:#0D1813;color:#CFE9DC;
  font-family:var(--mono);font-size:.66rem;line-height:1.7;overflow:hidden}
.ngcode b{color:#7BEFB4;font-weight:400}.ngcode em{color:#F6C86A;font-style:normal}
.ngagents{display:grid;gap:.5rem;margin-top:1rem}
.ngag{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--ink-2)}
.ngag i{width:1.7rem;height:1.7rem;border-radius:9px;flex:0 0 1.7rem;display:grid;place-items:center;
  background:var(--surface-2);color:var(--forest);font:700 .56rem/1 var(--display);font-style:normal}
.ngag b{color:var(--ink);font-weight:600}
.ngtile .ngtile-cta{margin-top:auto;padding-top:1.1rem}
.ngtile-cta a{font:600 .82rem/1 var(--body);color:var(--forest);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1.5px}
.ngtile-cta a:hover{color:var(--ink)}


@media(min-width:1181px){
  .scene-ws .ngws-chrome{padding-left:3.4rem}
  .scene-ws .ngws-b{padding-left:3.1rem}
}

/* the Loans screen, trimmed so the tab bar sits on the 874th pixel */
.cred-h>div{min-width:0}
.cred-h b{white-space:nowrap}
.ln-nav{padding:9px 14px}
.seg{margin:10px 0}
.cred{padding:15px 16px 13px}
.cred-m{margin:13px 0 8px}
.agr{margin:8px 0 10px}
.ltabs{margin-bottom:10px}
.lgrid{gap:9px}
.lt{padding:11px 6px 10px}
.lt span{width:40px;height:40px;margin-bottom:7px;font-size:19px}
.hey{margin-top:12px}
.tabbar{padding:12px 26px 26px}

/* ==========================================================================
   build v1.1_4 — Spaces on the website's own ground
   The band was a dark slab in a light house. It now sits on white with the
   same soft green wash the rest of the site uses; the colour is carried by
   the screens and the accents, not by a block of paint.
   ========================================================================== */
.ngsp{background:var(--bg)!important;color:var(--ink)!important;
  padding:clamp(3.2rem,7vw,5.6rem) 0 clamp(3.4rem,7vw,5.4rem)!important;
  border-top:1px solid var(--line)}
.ngsp-aura{
  background:
    radial-gradient(38% 34% at 6% 2%,rgba(26,135,84,.08),transparent 70%),
    radial-gradient(34% 40% at 98% 6%,rgba(246,200,106,.09),transparent 70%),
    radial-gradient(70% 46% at 50% 104%,rgba(26,135,84,.06),transparent 72%)!important}
.ngsp-aura::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(rgba(26,135,84,.11) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent)}
.ngsp h2{color:var(--ink)!important}
.ngsp h2 em{color:var(--emerald)!important}
.ngsp .ngl-k{color:var(--emerald)!important}
.ngsp .ngl-k i{background:var(--emerald)!important}
.ngsp-top{align-items:start}

.scene-cap{color:var(--ink-3)!important}
.scene-cap b{color:var(--ink)!important}
.scene-dot{background:var(--emerald)!important;box-shadow:0 0 0 3px rgba(26,135,84,.14)!important}

.scene-arc path{stroke:rgba(26,135,84,.45)!important}
.scene-arc circle{fill:#C9971F!important;filter:drop-shadow(0 0 5px rgba(201,151,31,.5))!important}
.scene-arc-l b{color:var(--forest)!important}
.scene-arc-l span{color:var(--ink-3)!important}

.ngws{box-shadow:0 44px 80px -46px rgba(10,40,26,.42),inset 0 0 0 1px var(--line)!important}
.ipx-in{box-shadow:0 50px 90px -46px rgba(10,40,26,.5),0 8px 24px -12px rgba(10,40,26,.3),
  inset 0 0 0 1.5px rgba(255,255,255,.16)!important}

.ngsp-facts{border-top-color:var(--line)!important}
.ngsp-facts b{color:var(--forest)!important}
.ngsp-facts span{color:var(--ink-2)!important}
.ngsp-sectors span{color:var(--ink-2)!important;background:var(--surface)!important;
  box-shadow:inset 0 0 0 1px var(--line)!important}
.ngsp-sec-k{color:var(--ink-3)!important;background:none!important;box-shadow:none!important}

/* the lede is gone, so the headline carries the top row on its own */
.ngsp-top{grid-template-columns:minmax(0,1fr)}
.ngsp h2{max-width:22ch}

/* ==========================================================================
   v1.1_5 — the water runs under everything
   .water is a fixed layer at z-index 0. Any section that paints an opaque
   background hides it, which is what these three were doing. They are
   transparent now, so the signature carries straight through the Nigerian
   sequence the way it does through the rest of the page.
   ========================================================================== */
.ngsp,.ngmc{background:transparent!important}
.ngmore{background:rgba(244,247,245,.55)!important;
  backdrop-filter:saturate(1.02)}
.ngsp,.ngmc,.ngmore{position:relative;z-index:1}

/* the aura stays as a wash of light, never as a lid */
.ngsp-aura{
  background:
    radial-gradient(38% 32% at 6% 2%,rgba(26,135,84,.07),transparent 72%),
    radial-gradient(32% 38% at 98% 6%,rgba(246,200,106,.07),transparent 72%)!important}
.ngsp-aura::after{display:none!important}

/* the screens keep their own ground so the water reads behind, not through */
.ngws,.ipx-in,.ngmc-acct{position:relative;z-index:1}

/* ==========================================================================
   v1.1_6 — the Nigerian narrative, as bands
   The pitch order: the hook, Spaces, the agents, the books, selling online,
   building on us, every currency, then the personal side. Each band is
   transparent so the water keeps running underneath; only the cards lift
   off it, and they lift at 72% so the signature still reads through.
   ========================================================================== */
.ngb{position:relative;z-index:1;background:transparent;
  padding:clamp(2.6rem,5.5vw,4.4rem) 0}
.ngb .wrapx{width:min(var(--max),100%);margin:0 auto;padding:0 var(--pad)}
.ngb-top{max-width:64ch}
.ngb h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.65rem,3.1vw,2.35rem);margin:.85rem 0 .75rem;max-width:24ch;color:var(--ink)}
.ngb h2 em{font-style:normal;color:var(--emerald)}
.ngb-l{margin:0;font-size:1rem;line-height:1.65;color:var(--ink-2);max-width:58ch}
.ngb-grid{display:grid;gap:clamp(.85rem,2vw,1.35rem);margin-top:clamp(1.7rem,3.5vw,2.5rem)}
.ngb-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ngb-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ngb-grid.c2{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:start}
@media(max-width:960px){.ngb-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ngb-grid.c3,.ngb-grid.c2{grid-template-columns:1fr}}
@media(max-width:580px){.ngb-grid.c4{grid-template-columns:1fr}}

.ngbt{border-radius:16px;padding:1.05rem 1.15rem 1.2rem;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line)}
.ngbt i.ngbt-i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:10px;
  background:var(--surface-2);color:var(--forest);font:700 .68rem/1 var(--display);
  font-style:normal;margin-bottom:.75rem}
.ngbt b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;
  letter-spacing:-.025em;line-height:1.3;color:var(--ink)}
.ngbt span{display:block;margin-top:.4rem;font-size:.83rem;line-height:1.55;color:var(--ink-2)}
.ngbt .ngtile-art{margin-top:1rem}

.ngb-sign{display:inline-flex;align-items:center;gap:.55rem;margin-top:clamp(1.1rem,2.5vw,1.5rem);
  font:600 .82rem/1.4 var(--body);color:var(--forest)}
.ngb-sign i{width:1.1rem;height:1.1rem;border-radius:50%;flex:0 0 1.1rem;
  background:var(--emerald);box-shadow:0 0 0 4px rgba(26,135,84,.12)}

.ngb-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ngb-list li{display:flex;gap:.65rem;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.ngb-list li i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--sage);
  margin-top:.55rem}
.ngb-list li b{color:var(--ink);font-weight:600}

.ngb-rule{border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}

/* the Spaces headline now carries one line under it */
.ngsp-lede{margin-top:1rem!important;max-width:54ch;color:var(--ink-2)!important}


/* ==========================================================================
   v1.1_7 — two doors
   Individuals arrive first, so the hero is theirs and the phone is captioned
   as theirs. "Get customers" is a sentence addressed to a business, so it
   opens the business run with the page a business actually signs into. The
   brand line closes the page rather than opening it.
   ========================================================================== */
.hero-cap{position:absolute;left:0;right:0;bottom:-2.1rem;display:flex;align-items:center;
  justify-content:center;gap:.45rem;font:600 .62rem/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.hero-cap b{color:var(--ink);font-weight:700}
.hero-cap i{width:6px;height:6px;border-radius:50%;background:var(--emerald);flex:0 0 6px}
@media(max-width:860px){.hero-cap{position:static;margin-top:1.1rem}}

.ngbz .ngb-top{max-width:60ch}
.ngb-l2{margin-top:.85rem!important}
.ngbz-shot{position:relative;z-index:1;margin:clamp(1.8rem,4vw,2.8rem) 0 0;
  border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 40px 90px -46px rgba(8,30,20,.45),inset 0 0 0 1px var(--line)}
.ngbz-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 .9rem;
  background:var(--surface);border-bottom:1px solid var(--line)}
.ngbz-chrome i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:0 0 8px}
.ngbz-chrome em{margin:0 auto;font:400 .64rem/1 var(--mono);font-style:normal;color:var(--ink-3)}
.ngbz-shot img{display:block;width:100%;height:auto}
.ngbz-shot figcaption{display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;
  border-top:1px solid var(--line);font:600 .62rem/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.ngbz-shot figcaption b{color:var(--ink);font-weight:700}
.ngbz-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);flex:0 0 6px}

.sigoff{position:relative;z-index:1;background:transparent;
  padding:clamp(3rem,6vw,5rem) 0;text-align:center}
.sigoff-mk{display:block;width:46px;height:46px;margin:0 auto .9rem}
.sigoff-mk svg{width:100%;height:100%}
.sigoff-mk .prymk-ring{stroke:var(--emerald)}
.sigoff-mk .prymk-water{stroke:var(--sage)}
.sigoff-mk .prymk-br{stroke:var(--forest)}
.sigoff-mk .prymk-n{fill:var(--emerald)}
.sigoff p{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.3rem,2.4vw,1.85rem);color:var(--ink)}


/* no drawn arrow beside a text link */
.text-link::after{content:none!important}

/* ==========================================================================
   v1.1_8 — the facts, the team, and Pryme Pay
   ========================================================================== */

/* the four facts, as a strip rather than four blocks */
.ngsp-facts{grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;margin-top:clamp(1.8rem,3vw,2.4rem)!important;
  padding-top:1.2rem!important;border-top:1px solid var(--line)!important}
.ngsp-facts>div{padding:0 1.5rem;border-left:1px solid var(--line)}
.ngsp-facts>div:first-child{padding-left:0;border-left:0}
.ngsp-facts>div:last-child{padding-right:0}
.ngsp-facts i{display:block;width:16px;height:2px;border-radius:2px;background:var(--emerald);
  margin-bottom:.6rem}
.ngsp-facts b{display:block!important;font-family:var(--display)!important;
  font-size:1rem!important;font-weight:700!important;letter-spacing:-.025em!important;
  color:var(--ink)!important}
.ngsp-facts span{display:block!important;margin-top:.3rem!important;font-size:.8rem!important;
  line-height:1.5!important;color:var(--ink-2)!important}
@media(max-width:900px){.ngsp-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:1.4rem 0!important}
  .ngsp-facts>div:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:560px){.ngsp-facts{grid-template-columns:1fr!important}
  .ngsp-facts>div{padding:0;border-left:0}}

/* the team, with no casing and with what each one just did */
.ngteam{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);border-top:1px solid var(--line);padding-top:1.5rem}
.ngtm{padding:0 1.6rem;border-left:1px solid var(--line);display:flex;flex-direction:column}
.ngtm:first-child{padding-left:0;border-left:0}
.ngtm:last-child{padding-right:0}
.ngtm-k{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:11px;
  background:var(--surface-2);color:var(--forest);font:700 .64rem/1 var(--display);
  letter-spacing:.04em;margin-bottom:.8rem}
.ngtm-k.cf{background:#EAF4EE}.ngtm-k.cc{background:#FDF3DF;color:#8A6412}
.ngtm-k.sm{background:#EDF2FB;color:#2B4C86}
.ngtm-k.co{background:#F1EEFA;color:#55408F}   /* [graft:AGENTS-FIVE] Compliance */
.ngtm>b{font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:-.025em;
  color:var(--ink);line-height:1.25}
.ngtm-r{margin-top:.2rem;font:600 .68rem/1 var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--emerald)}
.ngtm p{margin:.6rem 0 0;font-size:.83rem;line-height:1.55;color:var(--ink-2)}
.ngtm-did{margin-top:auto;padding-top:1rem;display:flex;gap:.45rem;align-items:flex-start;
  font:400 .72rem/1.45 var(--mono);color:var(--ink-3)}
.ngtm-did i{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--sage);margin-top:.4rem}
.ngtm-did.need i{background:#E3AE4A}
@media(max-width:1020px){.ngteam{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 0}
  .ngtm{padding:0 1.4rem}.ngtm:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:620px){.ngteam{grid-template-columns:1fr}
  .ngtm{padding:0;border-left:0}.ngtm+.ngtm{padding-top:1.4rem;border-top:1px solid var(--line)}}

/* ---------------------------------------------------------- Pryme Pay */
.ppw{position:relative;z-index:1;margin-top:clamp(1.8rem,4vw,2.8rem);border-radius:16px;
  overflow:hidden;background:#fff;
  box-shadow:0 44px 96px -48px rgba(8,30,20,.44),inset 0 0 0 1px var(--line)}
.pp-chrome{display:flex;align-items:center;gap:6px;height:38px;padding:0 1rem;
  background:var(--surface);border-bottom:1px solid var(--line)}
.pp-chrome>i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:0 0 8px}
.pp-url{margin:0 auto 0 1.1rem;padding:.26rem .8rem;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);font:400 .68rem/1.5 var(--mono);color:var(--ink-3)}
.pp-chrome em{margin-left:auto;font:700 .6rem/1 var(--body);font-style:normal;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.pp-body{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);min-height:420px}
@media(max-width:860px){.pp-body{grid-template-columns:1fr}}

.pp-side{padding:1.5rem 1.5rem 1.3rem;color:#DDEBE3;display:flex;flex-direction:column;
  background:linear-gradient(170deg,#124630 0%,#0A2E1F 70%,#092A1C 100%)}
.pp-biz{display:flex;align-items:center;gap:.55rem;margin-bottom:1.5rem}
.pp-biz span{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:8px;
  background:rgba(255,255,255,.14);color:#fff;font:700 .78rem/1 var(--display)}
.pp-biz b{color:#fff;font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.pp-lab{font-size:.76rem;color:rgba(221,235,227,.62)}
.pp-amt{display:block;margin:.3rem 0 1.3rem;font-family:var(--display);font-weight:700;
  font-size:1.85rem;letter-spacing:-.045em;color:#fff}
.pp-li{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.pp-li b{display:block;font-size:.78rem;font-weight:500;color:#EAF5EF}
.pp-li em{display:block;margin-top:.15rem;font:400 .66rem/1.4 var(--mono);font-style:normal;
  color:rgba(221,235,227,.5)}
.pp-li u{flex:0 0 auto;text-decoration:none;font:400 .76rem/1.4 var(--mono);color:#EAF5EF}
.pp-li.tot{border-bottom:0;margin-top:.3rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.18)}
.pp-li.tot b,.pp-li.tot u{font-weight:700;color:#fff}
.pp-fo{display:flex;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1.4rem;
  font:400 .62rem/1.4 var(--mono);color:rgba(221,235,227,.42)}

.pp-main{position:relative;padding:1.8rem 1.9rem;min-height:420px}
@media(max-width:560px){.pp-main{padding:1.3rem 1.2rem}}
.pp-s{position:absolute;inset:1.8rem 1.9rem auto;opacity:0;transform:translateY(8px);
  pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.pp-s.on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:560px){.pp-s{inset:1.3rem 1.2rem auto}}
.pp-h{display:block;font-family:var(--display);font-size:1.35rem;font-weight:700;
  letter-spacing:-.035em;color:var(--ink)}
.pp-h.c,.pp-s p.c{text-align:center}
.pp-s p{margin:.55rem 0 0;font-size:.88rem;line-height:1.6;color:var(--ink-2);max-width:48ch}
.pp-s p.c{margin-left:auto;margin-right:auto}
.pp-btn{display:block;margin-top:1.2rem;padding:.95rem 1rem;border-radius:12px;text-align:center;
  background:linear-gradient(150deg,#2A8F5E,#13573A);color:#fff;
  font:700 .92rem/1 var(--body);letter-spacing:-.01em;
  box-shadow:0 14px 26px -14px rgba(11,81,55,.7)}
.pp-btn.sm{margin-top:0;padding:.78rem .9rem;font-size:.84rem}
.pp-btn.gh{background:var(--surface-2);color:var(--forest);box-shadow:none}
.pp-cta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.3rem}
.pp-ticks{list-style:none;margin:1.2rem 0 0;padding:1.1rem 0 0;display:grid;gap:.6rem;
  border-top:1px solid var(--line)}
.pp-ticks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;line-height:1.5;
  color:var(--ink-2)}
.pp-ticks i{flex:0 0 1rem;width:1rem;height:1rem;border-radius:50%;margin-top:.12rem;
  background:var(--surface-2);position:relative}
.pp-ticks i::after{content:"";position:absolute;left:.3rem;top:.26rem;width:.26rem;height:.46rem;
  border:solid var(--emerald);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}

.pp-exact{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem;padding:.9rem 1rem;
  border-radius:12px;background:rgba(26,135,84,.06);box-shadow:inset 0 0 0 1.5px rgba(26,135,84,.42)}
.pp-exact>span{font:600 .62rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.pp-exact>b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.04em;
  color:var(--ink)}
.pp-exact>u,.pp-rows u{margin-left:auto;text-decoration:none;flex:0 0 auto;padding:.3rem .65rem;
  border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  font:600 .6rem/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pp-rows{margin-top:1rem;display:grid}
.pp-rows>div{display:flex;align-items:center;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid var(--line)}
.pp-rows>div:last-child{border-bottom:0}
.pp-rows span{flex:0 0 9.5rem;font:600 .62rem/1.3 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.pp-rows b{font-size:.88rem;font-weight:600;color:var(--ink)}
.pp-rows b.mn{font-family:var(--mono);font-weight:400;letter-spacing:.06em;font-size:.95rem}
@media(max-width:560px){.pp-rows>div{flex-wrap:wrap;gap:.2rem}.pp-rows span{flex:1 0 100%}
  .pp-exact>b{font-size:1.1rem}.pp-cta{grid-template-columns:1fr}}
.pp-wait{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-size:.8rem;
  color:var(--ink-2)}
.pp-wait i{width:7px;height:7px;border-radius:50%;background:var(--emerald);flex:0 0 7px;
  box-shadow:0 0 0 0 rgba(26,135,84,.45);animation:ppPulse 1.8s ease-out infinite}
@keyframes ppPulse{0%{box-shadow:0 0 0 0 rgba(26,135,84,.45)}
  70%{box-shadow:0 0 0 8px rgba(26,135,84,0)}100%{box-shadow:0 0 0 0 rgba(26,135,84,0)}}

.pp-ok{display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;margin:0 auto .9rem;
  background:var(--emerald);color:#fff}
.pp-ok svg{width:1.5rem;height:1.5rem}

.pp-dots{display:flex;justify-content:center;gap:.4rem;padding:.9rem 0 1rem;
  border-top:1px solid var(--line);background:#fff}
.pp-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:all .3s ease}
.pp-dots i.on{width:18px;border-radius:999px;background:var(--emerald)}

.ngpay-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:clamp(1.6rem,3vw,2.2rem);padding-top:1.4rem;border-top:1px solid var(--line)}
.ngpay-pts>div{padding:0 1.6rem;border-left:1px solid var(--line)}
.ngpay-pts>div:first-child{padding-left:0;border-left:0}
.ngpay-pts>div:last-child{padding-right:0}
.ngpay-pts b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.ngpay-pts span{display:block;margin-top:.35rem;font-size:.83rem;line-height:1.55;color:var(--ink-2)}
@media(max-width:860px){.ngpay-pts{grid-template-columns:1fr;gap:1.3rem}
  .ngpay-pts>div{padding:0;border-left:0}}

@media(prefers-reduced-motion:reduce){
  .pp-s{transition:none}.pp-wait i{animation:none}}


/* ==========================================================================
   v1.1_10 — the signature opens the page, and the Ledger cards shrink
   ========================================================================== */
.hero-sig{display:block;margin-bottom:1.1rem;font-family:var(--display);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.02rem,1.5vw,1.22rem);
  color:var(--forest)}

/* the Ledger: small cards, no art block */
.blog-rail{grid-auto-columns:minmax(192px,1fr)!important;gap:.85rem!important}
.post{border-radius:14px}
.post-art{height:auto!important;background:none!important;padding:.9rem .9rem 0!important}
.post-art span{position:static!important;display:inline-block;padding:.2rem .5rem!important;
  font-size:.5rem!important;letter-spacing:.12em!important;background:var(--surface-2)!important;
  border-color:transparent!important;color:var(--ink-3)!important}
.post-body{padding:.6rem .9rem .9rem!important;gap:.35rem!important}
.post h3{font-size:.87rem!important;letter-spacing:-.022em!important;line-height:1.3!important}
.post p{font-size:.75rem!important;line-height:1.45!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .meta{padding-top:.65rem!important;font-size:.5rem!important;letter-spacing:.1em!important}
.rail-hint{margin-top:.9rem!important}
.rail-hint button{width:2rem!important;height:2rem!important;font-size:.8rem!important}


/* ==========================================================================
   v1.1_12 — the two doors under the opening section
   One is a door you walk through, the other is the question everybody asks
   before they do. Neither is a box: the primary carries the orb and its own
   second line, the secondary is a quiet row that underlines on hover.
   ========================================================================== */
.hb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;margin-top:1.6rem}
.hbc{display:inline-flex;align-items:center;gap:.85rem;padding:.8rem 1.5rem .8rem .9rem;
  border-radius:999px;text-decoration:none;position:relative;overflow:hidden;
  background:linear-gradient(140deg,#2A8F5E 0%,#157046 48%,#0B5137 100%);color:#fff;
  box-shadow:0 18px 34px -18px rgba(11,81,55,.75),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s ease,box-shadow .2s ease}
.hbc::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 18% -20%,rgba(255,255,255,.26),transparent 62%)}
.hbc:hover{transform:translateY(-2px);box-shadow:0 24px 44px -18px rgba(11,81,55,.8),
  inset 0 1px 0 rgba(255,255,255,.22)}
.hbc-orb{position:relative;z-index:1;width:2.3rem;height:2.3rem;flex:0 0 2.3rem;
  border-radius:42% 58% 63% 37%/47% 41% 59% 53%;
  background:radial-gradient(circle at 34% 28%,#EAFBF2 0,#9FE3C0 26%,#2A8F5E 64%,#0B4330 100%);
  box-shadow:0 0 0 4px rgba(255,255,255,.16),0 6px 14px -6px rgba(0,0,0,.5);
  animation:hbcBeat 1.6s ease-in-out infinite}
@keyframes hbcBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.07)}28%{transform:scale(1)}
  42%{transform:scale(1.04)}56%{transform:scale(1)}}
.hbc .hbc-t{position:relative;z-index:1}
.hbc .hbc-t b{display:block;font:700 .95rem/1.2 var(--body);letter-spacing:-.012em;color:#fff}
.hbc .hbc-t em{display:block;margin-top:.15rem;font-style:normal;
  font-size:.72rem;line-height:1.35;color:rgba(234,251,242,.78)}

.hbc-safe{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  padding:.3rem 0;color:var(--ink)}
.hbc-ic{display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:0 0 2.1rem;
  border-radius:50%;background:var(--surface-2);color:var(--forest);
  transition:background .2s ease,color .2s ease}
.hbc-ic svg{width:1.05rem;height:1.05rem}
.hbc-safe .hbc-t b{display:block;font:600 .9rem/1.2 var(--body);letter-spacing:-.01em;
  color:var(--ink);text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:4px;text-decoration-thickness:1.5px;
  transition:text-decoration-color .2s ease,color .2s ease}
.hbc-safe .hbc-t em{display:block;margin-top:.12rem;font-style:normal;font-size:.72rem;
  line-height:1.35;color:var(--ink-3)}
.hbc-safe:hover .hbc-t b{color:var(--forest);text-decoration-color:var(--forest)}
.hbc-safe:hover .hbc-ic{background:var(--emerald);color:#fff}
@media(max-width:520px){.hb-cta{flex-direction:column;align-items:flex-start;gap:1.1rem}}
@media(prefers-reduced-motion:reduce){.hbc-orb{animation:none}.hbc:hover{transform:none}}


/* ==========================================================================
   v1.1_13 — the screen rail, and the two doors
   The caption was a title and a paragraph that reflowed on every beat and
   shoved the buttons down the page. The eight screen names are now a rail
   of chips you can read at a glance and click, and only one sentence
   changes underneath, inside a slot of fixed height. Nothing below it moves.
   ========================================================================== */
.hb-dots{display:flex!important;flex-wrap:wrap;gap:.4rem!important;margin-top:1.15rem!important}
.odot{width:auto!important;height:auto!important;border-radius:999px!important;
  padding:.42rem .8rem!important;background:transparent!important;
  box-shadow:inset 0 0 0 1px var(--line-2);
  font:600 .74rem/1 var(--body);color:var(--ink-3)!important;cursor:pointer;
  transition:color .22s ease,box-shadow .22s ease,background .22s ease!important;
  display:inline-block}
.odot>span{pointer-events:none}
.odot:hover{color:var(--ink)!important}
.odot.on{background:var(--emerald)!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px var(--emerald),0 8px 18px -10px rgba(26,135,84,.8)}
.odot.on:hover{color:#fff!important}

.hb-caps{min-height:3rem!important;margin-top:1.5rem!important;padding-top:1.25rem!important;
  border-top:1px solid var(--line)!important}
.ocap{top:1.25rem!important;transform:translateY(4px)!important;
  transition:opacity .45s ease,transform .45s ease!important}
.ocap.on{transform:none!important}
.ocap b{display:none!important}
.ocap span{margin-top:0!important;max-width:46ch!important;font-size:.92rem!important;
  line-height:1.5!important;color:var(--ink-2)!important}

/* ---------------------------------------------------------- the two doors */
.hb-cta{display:block;margin-top:1.5rem}
.hb-doors{display:flex;flex-wrap:wrap;gap:.65rem}
.hbd{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding:0 1.5rem;
  border-radius:999px;text-decoration:none;font:600 .92rem/1 var(--body);letter-spacing:-.012em;
  white-space:nowrap;transition:background .2s ease,box-shadow .2s ease,color .2s ease,transform .2s ease}
.hbd.go{background:var(--emerald);color:#fff;box-shadow:0 14px 26px -14px rgba(26,135,84,.85)}
.hbd.go:hover{background:var(--forest);transform:translateY(-1px);
  box-shadow:0 18px 32px -14px rgba(11,81,55,.85)}
.hbd.gh{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.hbd.gh:hover{color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest);transform:translateY(-1px)}

.hb-fine{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .85rem;margin:1rem 0 0;
  font:400 .74rem/1.5 var(--body);color:var(--ink-3)}
.hb-fine span{display:inline-flex;align-items:center;gap:.85rem}
.hb-fine span+span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--line-2);flex:0 0 3px}
@media(max-width:520px){.hbd{width:100%}
  .hb-fine{gap:.25rem 0;flex-direction:column;align-items:flex-start}
  .hb-fine span+span::before{display:none}}
@media(prefers-reduced-motion:reduce){.hbd:hover{transform:none}}


/* v1.1_13a — region gating for the named chips, and the rail above the line */
.odot[data-set="intl"]{display:none}
html[data-region="uk"] .odot[data-set="intl"],
html[data-region="us"] .odot[data-set="intl"],
html[data-region="ca"] .odot[data-set="intl"],
html[data-region="row"] .odot[data-set="intl"]{display:inline-block}
html[data-region="uk"] .odot[data-set="ng"],
html[data-region="us"] .odot[data-set="ng"],
html[data-region="ca"] .odot[data-set="ng"],
html[data-region="row"] .odot[data-set="ng"]{display:none}

.hb-dots{margin-top:1.7rem!important;padding-top:1.4rem!important;
  border-top:1px solid var(--line)}
.hb-caps{margin-top:.95rem!important;padding-top:0!important;border-top:0!important;
  min-height:2.9rem!important}
.ocap{top:0!important}


/* ==========================================================================
   v1.1_14 — the index
   Chips read as a tab bar: eight equal boxes, none of them the subject.
   This is an index instead. A hairline runs down the left, each screen is a
   numbered line, and a short emerald marker travels to whichever one the
   phone is showing — that line alone comes forward in the display face while
   the rest sit back in the body face. Every row is the same height, so the
   marker moves and nothing else does.
   ========================================================================== */
.hb-dots{display:block!important;position:relative;
  margin-top:1.7rem!important;padding:1.35rem 0 .1rem 1.15rem!important;
  border-top:1px solid var(--line)}
.hb-dots::before{content:"";position:absolute;left:0;top:1.35rem;bottom:.35rem;
  width:1px;background:var(--line)}

.odot{position:relative;display:flex!important;align-items:center;gap:.9rem;
  width:100%!important;height:auto!important;min-height:2rem;
  padding:.1rem 0!important;border-radius:0!important;background:none!important;
  box-shadow:none!important;text-align:left;cursor:pointer;
  font:500 .87rem/1.3 var(--body)!important;letter-spacing:0;color:var(--ink-3)!important;
  transition:color .28s ease!important}
.odot::before{content:"";position:absolute;left:-1.15rem;top:50%;
  width:2px;height:1.25rem;border-radius:2px;background:var(--emerald);
  transform:translateY(-50%) scaleY(0);transform-origin:center;
  transition:transform .34s cubic-bezier(.3,.9,.3,1)}
.odot.on::before{transform:translateY(-50%) scaleY(1)}
.odot i{flex:0 0 1.35rem;font:400 .6rem/1 var(--mono);font-style:normal;
  letter-spacing:.06em;color:var(--line-2);transition:color .28s ease}
.odot>span{display:block}
.odot:hover{color:var(--ink)!important}
.odot:hover i{color:var(--ink-3)}
.odot.on{color:var(--ink)!important;
  font:700 1rem/1.25 var(--display)!important;letter-spacing:-.028em!important}
.odot.on i{color:var(--emerald)}
.odot:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}

/* the one sentence, in a slot that never resizes */
.hb-caps{margin-top:1.15rem!important;padding-top:0!important;border-top:0!important;
  min-height:2.9rem!important}
.ocap{top:0!important}

/* ---------------------------------------------------------- the two doors */
.hb-cta{margin-top:1.35rem}
.hb-doors{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem}
.hbd.go{height:2.65rem;padding:0 1.25rem;font-size:.88rem;
  box-shadow:0 12px 22px -14px rgba(26,135,84,.85)}
.hbd.go:hover{box-shadow:0 16px 28px -14px rgba(11,81,55,.85)}

.hbs{display:inline-flex;align-items:center;height:2.65rem;text-decoration:none;
  font:600 .88rem/1 var(--body);letter-spacing:-.012em;color:var(--ink);
  border-bottom:1.5px solid var(--line-2);transition:color .2s ease,border-color .2s ease}
.hbs:hover{color:var(--forest);border-bottom-color:var(--forest)}

.hb-fine{margin-top:.95rem!important}
@media(max-width:520px){.hbd.go{width:auto}.hb-doors{gap:.8rem 1.2rem}}
@media(prefers-reduced-motion:reduce){.odot::before{transition:none}}


/* v1.1_14a — the index wins over the old chip rules, and the region gate wins
   over the index */
.odot.on{background:none!important;box-shadow:none!important}
.odot.on:hover{color:var(--ink)!important}
.odot[data-set="intl"]{display:none!important}
html[data-region="uk"] .odot[data-set="intl"],
html[data-region="us"] .odot[data-set="intl"],
html[data-region="ca"] .odot[data-set="intl"],
html[data-region="row"] .odot[data-set="intl"]{display:flex!important}
html[data-region="uk"] .odot[data-set="ng"],
html[data-region="us"] .odot[data-set="ng"],
html[data-region="ca"] .odot[data-set="ng"],
html[data-region="row"] .odot[data-set="ng"]{display:none!important}


/* ==========================================================================
   v1.1_15 — the phone does the talking
   No index, no tabs. A rail fills across the 6.4 seconds each screen holds,
   the counter says where you are in the set, and the name and its one line
   sit underneath in a slot that never resizes. Four elements in the column
   instead of seven.
   ========================================================================== */
#hbDots{display:none!important}

.hbp{display:flex;align-items:center;gap:1rem;margin-top:1.8rem;padding-top:1.5rem;
  border-top:1px solid var(--line)}
.hbp-rail{position:relative;flex:1 1 auto;height:2px;border-radius:2px;
  background:var(--line);overflow:hidden}
.hbp-rail i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:2px;
  background:var(--emerald);transform:scaleX(0);transform-origin:left center}
.hbp-rail i.run{animation:hbpFill linear forwards}
.hbp-rail i.hold{animation-play-state:paused}
@keyframes hbpFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hbp-n{flex:0 0 auto;font:400 .68rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.hbp-n b{font-weight:400;color:var(--emerald)}
.hbp-n em{font-style:normal}

.hb-caps{margin-top:1.1rem!important;padding-top:0!important;border-top:0!important;
  min-height:4.5rem!important}
.ocap{top:0!important}
.ocap b{display:block!important;font-family:var(--display)!important;font-weight:700!important;
  font-size:1.08rem!important;letter-spacing:-.03em!important;color:var(--ink)!important}
.ocap span{margin-top:.35rem!important;max-width:46ch!important;font-size:.92rem!important;
  line-height:1.5!important;color:var(--ink-2)!important}

.hb-cta{margin-top:1.5rem}
@media(prefers-reduced-motion:reduce){.hbp-rail i{animation:none!important;transform:scaleX(1)}}


/* ==========================================================================
   v1.1_16 — the screen, read top to bottom
   The name sits on the line, the line fills underneath it across the 6.4
   seconds the screen holds, and one sentence sits under the line. Three
   fixed rows: the name moves nothing, the sentence moves nothing.
   ========================================================================== */
.hbsc{position:relative;height:6.2rem;margin-top:1.9rem;padding-top:1.5rem;
  border-top:1px solid var(--line)}
.hbsc .hb-caps{position:static!important;min-height:0!important;margin:0!important;
  padding:0!important;border:0!important}
.hbsc .ocap{position:absolute!important;left:0;right:0;top:1.5rem;bottom:0}
.hbsc .ocap b{position:absolute;top:0;left:0;margin:0;
  font-family:var(--display)!important;font-weight:700!important;
  font-size:1.12rem!important;line-height:1.2!important;letter-spacing:-.032em!important;
  color:var(--ink)!important}
.hbsc .ocap span{position:absolute;top:2.55rem;left:0;right:0;margin:0!important;
  max-width:none!important;font-size:.92rem!important;line-height:1.5!important;
  color:var(--ink-2)!important}

.hbsc .hbp{position:absolute;left:0;right:0;top:3.45rem;margin:0;padding:0;border:0;
  display:flex;align-items:center;gap:1rem}
@media(max-width:900px){.hbsc{height:7.4rem}}
@media(max-width:620px){.hbsc{height:8.6rem}}


/* v1.1_16a — the three rows, measured
   Absolute children ignore the wrapper's padding, so every row is pinned
   from the hairline itself: name at 1.5rem, line at 3.5rem, sentence at
   4.5rem, and the block ends at 6.6rem. */
.hbsc{height:6.6rem!important;padding-top:0!important}
.hbsc .ocap{top:0!important}
.hbsc .ocap b{top:1.5rem!important}
.hbsc .hbp{top:3.5rem!important}
.hbsc .ocap span{top:4.5rem!important}
@media(max-width:900px){.hbsc{height:7.8rem!important}}
@media(max-width:620px){.hbsc{height:9rem!important}}


/* v1.1_17 — no rule under the lede; the filling line is the only line here */
.hbsc{border-top:0!important;margin-top:1.6rem!important}


/* v1.1_18 — the opening section sits up under the masthead
   96px of air above the first thing on the page pushed the phone past the
   fold. The top is 2.4rem now; the bottom keeps its room for the trace. */
.hb-sec{padding-top:clamp(1.4rem,2.6vw,2.4rem)!important}
@media(max-width:900px){.hb-sec{padding-top:clamp(1.2rem,4vw,2rem)!important}}


/* ==========================================================================
   v1.1_19 — the questions, written the way they are asked
   Eight plain questions and eight plain answers. No casing, two columns,
   and the same copy carried in FAQPage schema in the head so an answer
   engine can lift a passage without guessing.
   ========================================================================== */
.faq{padding-block:clamp(2.6rem,6vw,4.4rem);position:relative;z-index:1}
.faq-head{max-width:46ch;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.faq-head h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.65rem,3.1vw,2.35rem);margin:.85rem 0 0;color:var(--ink)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.4rem) clamp(2rem,5vw,4rem)}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}
.faq-q h3{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.025em;
  line-height:1.3;margin:0 0 .45rem;color:var(--ink)}
.faq-q p{margin:0;font-size:.89rem;line-height:1.62;color:var(--ink-2);max-width:56ch}


/* ==========================================================================
   v1.1_23 — which door opens the page
   Nigeria opens on the heartbeat, because that is the story a Nigerian
   visitor arrives for. Everywhere else opens on the multicurrency account,
   because that is the only thing on offer there. Whichever section runs
   second gets its top room back.
   ========================================================================== */
html[data-region="uk"] .hero2,
html[data-region="us"] .hero2,
html[data-region="ca"] .hero2,
html[data-region="row"] .hero2{padding-block:clamp(1.4rem,2.6vw,2.4rem) clamp(2rem,5vw,3.5rem)}
html[data-region="uk"] .hb-sec,
html[data-region="us"] .hb-sec,
html[data-region="ca"] .hb-sec,
html[data-region="row"] .hb-sec{padding-top:clamp(2.4rem,5vw,4rem)!important}


/* v1.1_24 — schema is data, never copy
   The region rules set .intl-only to display:block, which overrode the
   browser's own script{display:none} and painted the FAQ schema onto the
   page as text. Structured data stays structured. */
script[type="application/ld+json"]{display:none!important}


/* ==========================================================================
   v1.1_25 — Pryme Business, for the markets outside Nigeria
   The same two things the Nigerian page leads on, in the order an
   international business cares about them: every currency on one ledger,
   then the four agents that run the account. Then, plainly, where Pryme
   is licensed and where it is not.
   ========================================================================== */
.ibx-h{max-width:58ch;margin-top:clamp(2.2rem,4.5vw,3.2rem)}
.ibx-h h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.15;
  font-size:clamp(1.25rem,2.2vw,1.6rem);margin:0 0 .5rem;color:var(--ink)}
.ibx-h p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.ibx-cards{margin-top:1.3rem!important}
.ibx-pts{margin-top:1.4rem!important}
.ibx-cta{padding-top:clamp(1.6rem,3vw,2.2rem)}
.ibx-cta a{font:600 .9rem/1 var(--body);color:var(--forest);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1.5px}
.ibx-cta a:hover{color:var(--ink)}

/* where we are licensed, and where we are not */
.lic{margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.lic h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.15rem,2vw,1.4rem);margin:0 0 1.1rem;color:var(--ink)}
.lic-rows{display:grid;gap:0}
.lic-r{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:.9rem;align-items:start;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.lic-r:last-child{border-bottom:0}
.lic-f{font-size:1.05rem;line-height:1.4}
.lic-r b{display:block;font-family:var(--display);font-size:.95rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.lic-r span{display:block}
.lic-r div span{margin-top:.25rem;font-size:.83rem;line-height:1.55;color:var(--ink-2);max-width:72ch}
.lic-s{flex:0 0 auto;align-self:center;font:600 .6rem/1 var(--body);letter-spacing:.12em;
  text-transform:uppercase;font-style:normal;color:var(--ink-3);white-space:nowrap}
.lic-s.on{color:var(--emerald)}
.lic-s.wait{color:#B07D11}
@media(max-width:700px){.lic-r{grid-template-columns:1.6rem minmax(0,1fr)}
  .lic-s{grid-column:2;align-self:start;margin-top:.4rem}}
.lic-ft{margin:1.2rem 0 0;font-size:.78rem;line-height:1.6;color:var(--ink-3);max-width:74ch}


/* ==========================================================================
   v1.1_29 — product pages, shown with the real app
   Three screens per page at the phone's own proportions, each one a figure
   with its own caption, so the picture is also words a crawler can read.
   ========================================================================== */
.pshots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.6rem);margin:0}
@media(max-width:1100px){.pshots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.pshots{grid-template-columns:1fr;gap:1.6rem}}
.pshot{margin:0;display:flex;flex-direction:column}
.pshot-d{position:relative;border-radius:clamp(14px,2.4vw,22px);padding:4px;
  background:linear-gradient(145deg,#4A5A52 0%,#1A2520 32%,#0A1310 70%,#39483F 100%);
  box-shadow:0 26px 54px -28px rgba(8,30,20,.6),inset 0 0 0 1px rgba(255,255,255,.12)}
.pshot-i{position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:2;
  width:28%;height:3.4%;min-height:7px;border-radius:999px;background:#05100C}
.pshot-d img{display:block;width:100%;height:auto;
  border-radius:clamp(11px,2vw,18px);background:#F6F8F7}
.pshot figcaption{margin-top:.8rem}
.pshot figcaption b{display:block;font-family:var(--display);font-size:.92rem;
  font-weight:700;letter-spacing:-.025em;color:var(--ink);line-height:1.3}
.pshot figcaption span{display:block;margin-top:.25rem;font-size:.8rem;line-height:1.5;
  color:var(--ink-2)}
@media(max-width:760px){.pshot-d{max-width:320px}.pshot figcaption{max-width:320px}}

/* keep reading */
.pp-rel .prel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--line)}
@media(max-width:760px){.pp-rel .prel{grid-template-columns:1fr}}
.prel-a{display:block;padding:1.2rem 1.5rem;border-left:1px solid var(--line);
  text-decoration:none;transition:background .2s ease}
.prel-a:first-child{padding-left:0;border-left:0}
.prel-a:hover{background:rgba(26,135,84,.04)}
.prel-a b{display:block;font-family:var(--display);font-size:1rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.prel-a span{display:block;margin-top:.3rem;font-size:.82rem;line-height:1.5;color:var(--ink-2)}
@media(max-width:760px){.prel-a{padding:1.1rem 0;border-left:0;border-top:1px solid var(--line)}
  .prel-a:first-child{border-top:0}}


/* ==========================================================================
   v1.1_30 — the product pages, restyled
   One line under each screen; the full description stays in the image's alt
   text, where a crawler reads it and a layout cannot break it. What you get
   loses its boxes and tick marks and becomes an editorial grid. How it works
   becomes a track the steps actually run along, because they are a sequence.
   ========================================================================== */
.pshot figcaption{margin-top:.85rem;font:600 .82rem/1.3 var(--body);
  letter-spacing:-.012em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){.pshot figcaption{font-size:.74rem}}
@media(max-width:760px){.pshot figcaption{white-space:normal;max-width:320px}}

/* ---------------------------------------------------------- what you get */
.ppf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.6rem) clamp(2rem,4vw,3.4rem);
  margin-top:clamp(1.6rem,3vw,2.4rem)}
@media(max-width:1000px){.ppf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ppf{grid-template-columns:1fr}}
.ppf-i{padding-top:1.1rem;border-top:1px solid var(--line)}
.ppf-r{display:block;width:20px;height:2px;border-radius:2px;background:var(--emerald);
  margin-bottom:.8rem}
.ppf-i h3{font-family:var(--display);font-size:1.02rem;font-weight:700;
  letter-spacing:-.028em;line-height:1.28;margin:0 0 .4rem;color:var(--ink)}
.ppf-i p{margin:0;font-size:.87rem;line-height:1.6;color:var(--ink-2)}
.ppf-i a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------- how it works */
.ppt{list-style:none;margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));
  gap:0;position:relative}
.ppt::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;
  background:var(--line)}
.ppt-s{position:relative;padding:0 clamp(1rem,2vw,1.8rem) 0 0}
.ppt-s+.ppt-s{padding-left:clamp(1rem,2vw,1.8rem)}
.ppt-n{display:block;font:400 .66rem/1 var(--mono);letter-spacing:.12em;
  color:var(--emerald);margin:0 0 1.35rem 1.1rem}
.ppt-d{position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--emerald);box-shadow:0 0 0 4px var(--bg)}
.ppt-s+.ppt-s .ppt-d{left:clamp(1rem,2vw,1.8rem)}
.ppt-s h3{font-family:var(--display);font-size:1rem;font-weight:700;
  letter-spacing:-.028em;line-height:1.28;margin:0 0 .4rem;color:var(--ink)}
.ppt-s p{margin:0;font-size:.86rem;line-height:1.58;color:var(--ink-2)}
.ppt-w{display:block;margin-top:.5rem;font:600 .62rem/1 var(--body);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:860px){
  .ppt{grid-template-columns:1fr;gap:1.6rem;padding-left:1.6rem}
  .ppt::before{left:4px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .ppt-s,.ppt-s+.ppt-s{padding:0}
  .ppt-d,.ppt-s+.ppt-s .ppt-d{left:-1.6rem;top:5px}
  .ppt-n{margin-bottom:.45rem}}


/* v1.1_30a — the caption fits the column rather than being cut off */
.pshot figcaption{font-size:.78rem}
@media(max-width:1280px){.pshot figcaption{font-size:.72rem}}
@media(max-width:1060px){.pshot figcaption{font-size:.68rem}}


/* ==========================================================================
   v1.1_32 — the product pages get something only they could have
   One screen at a size you can read, with labels tied to the part that
   matters. Then the piece that belongs to that page alone: the account
   formats, the live calculator, the goal comparison, the credit ladder.
   ========================================================================== */
.hshot{margin:0;display:flex;justify-content:flex-end}
.hshot-d{position:relative;width:min(300px,100%);border-radius:30px;padding:5px;
  background:linear-gradient(145deg,#4A5A52 0%,#1A2520 32%,#0A1310 70%,#39483F 100%);
  box-shadow:0 44px 90px -40px rgba(8,30,20,.62),inset 0 0 0 1px rgba(255,255,255,.12)}
.hshot-i{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:2;
  width:84px;height:12px;border-radius:999px;background:#05100C}
.hshot-d img{display:block;width:100%;height:auto;border-radius:26px;background:#F6F8F7}
.hnote{position:absolute;right:calc(100% + 1.1rem);transform:translateY(-50%);
  display:flex;align-items:center;gap:.6rem;white-space:nowrap;
  font:600 .72rem/1.2 var(--body);letter-spacing:-.008em;color:var(--ink-2)}
.hnote i{display:block;width:1.9rem;height:1px;background:var(--line-2);flex:0 0 1.9rem;order:2}
.hnote::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--emerald);
  flex:0 0 6px;order:3}
@media(max-width:1140px){.hnote{display:none}}
@media(max-width:900px){.hshot{justify-content:flex-start}.hshot-d{width:min(260px,100%)}}

/* the rest of the set, at a readable size */
.sstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,4vw,3rem);margin-top:clamp(1.6rem,3vw,2.4rem);align-items:start}
@media(max-width:760px){.sstrip{grid-template-columns:1fr}}
.sshot{margin:0;display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem);align-items:center}
.sshot-d{position:relative;border-radius:20px;padding:4px;
  background:linear-gradient(145deg,#4A5A52 0%,#1A2520 32%,#0A1310 70%,#39483F 100%);
  box-shadow:0 24px 50px -28px rgba(8,30,20,.55),inset 0 0 0 1px rgba(255,255,255,.12)}
.sshot-i{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:2;
  width:48px;height:8px;border-radius:999px;background:#05100C}
.sshot-d img{display:block;width:100%;height:auto;border-radius:17px;background:#F6F8F7}
.sshot figcaption b{display:block;font-family:var(--display);font-size:1rem;font-weight:700;
  letter-spacing:-.028em;line-height:1.3;color:var(--ink)}
.sshot figcaption span{display:block;margin-top:.35rem;font-size:.85rem;line-height:1.55;
  color:var(--ink-2)}

/* ---------------------------------------------------- the set pieces, shared */
.pc .pp-note{margin:.6rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.pc-ft,.gl-note,.lad-e p{margin:1.1rem 0 0;font-size:.8rem;line-height:1.6;color:var(--ink-3)}

/* multicurrency — the account formats */
.pc-tabs{display:flex;gap:.4rem;margin-top:clamp(1.4rem,3vw,2rem)}
.pc-t{border:0;border-radius:999px;padding:.5rem 1rem;cursor:pointer;background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-2);font:600 .8rem/1 var(--body);color:var(--ink-3);
  transition:all .2s ease}
.pc-t:hover{color:var(--ink)}
.pc-t.on{background:var(--emerald);color:#fff;box-shadow:inset 0 0 0 1px var(--emerald)}
.pc-name{margin-top:1.4rem;font:600 .64rem/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--emerald)}
.pc-rows{margin:.9rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4rem)}
@media(max-width:760px){.pc-rows{grid-template-columns:1fr}}
.pc-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:.8rem 0;border-bottom:1px solid var(--line)}
.pc-rows dt{font-size:.85rem;color:var(--ink-2)}
.pc-rows dd{margin:0;font:600 .9rem/1.4 var(--body);color:var(--ink);text-align:right}

/* swap — the calculator */
.swc{margin-top:clamp(1.4rem,3vw,2rem);position:relative;max-width:34rem}
.swc-leg{padding:1.05rem 1.2rem;border-radius:16px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)}
.swc-leg.out{margin-top:.5rem;background:rgba(26,135,84,.06);
  box-shadow:inset 0 0 0 1.5px rgba(26,135,84,.4)}
.swc-l{display:block;font:600 .62rem/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.swc-row{display:flex;align-items:center;gap:1rem;margin-top:.6rem}
.swc-row select{flex:0 0 auto;border:0;border-radius:999px;padding:.45rem 1.9rem .45rem .85rem;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center/14px;
  box-shadow:inset 0 0 0 1px var(--line-2);font:600 .9rem/1 var(--body);color:var(--ink);
  -webkit-appearance:none;appearance:none;cursor:pointer}
.swc-row input{flex:1 1 auto;min-width:0;border:0;background:transparent;text-align:right;
  font-family:var(--display);font-size:1.55rem;font-weight:700;letter-spacing:-.04em;
  color:var(--ink);outline:0}
.swc-row b{flex:1 1 auto;text-align:right;font-family:var(--display);font-size:1.55rem;
  font-weight:700;letter-spacing:-.04em;color:var(--forest)}
.swc-flip{position:absolute;left:50%;top:calc(50% - 2.6rem);transform:translate(-50%,-50%);z-index:2;
  width:2.3rem;height:2.3rem;border:0;border-radius:50%;cursor:pointer;background:#fff;
  color:var(--forest);display:grid;place-items:center;
  box-shadow:0 6px 16px -8px rgba(8,30,20,.5),inset 0 0 0 1px var(--line)}
.swc-flip svg{width:1rem;height:1rem}
.swc-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.85rem;
  font:400 .78rem/1.4 var(--mono);color:var(--ink-2)}
.swc-when{display:flex;gap:.3rem;margin-top:1rem;padding:.25rem;border-radius:999px;
  background:var(--surface-2);width:max-content}
.swc-when span{padding:.45rem 1.1rem;border-radius:999px;cursor:pointer;
  font:600 .8rem/1 var(--body);color:var(--ink-3)}
.swc-when span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,30,20,.12)}
.swc-note{margin:.9rem 0 0;font-size:.8rem;line-height:1.55;color:var(--ink-3);max-width:46ch}

/* boxes — the goal comparison */
.gl{margin-top:clamp(1.4rem,3vw,2rem)}
.gl-in{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem}
.gl-in label{display:flex;align-items:center;gap:.7rem;font-size:.95rem;color:var(--ink-2)}
.gl-f{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .9rem;border-radius:12px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2)}
.gl-f em{font-style:normal;font-family:var(--display);font-weight:700;color:var(--ink-3)}
.gl-f input{width:7.5rem;border:0;background:transparent;outline:0;
  font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.gl-f select{border:0;background:transparent;outline:0;cursor:pointer;
  font:700 1.05rem/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.gl-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:clamp(1.4rem,3vw,2rem);border-top:1px solid var(--line)}
@media(max-width:900px){.gl-out{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gl-out{grid-template-columns:1fr}}
.gl-b{padding:1.2rem 1.3rem;border-left:1px solid var(--line)}
.gl-b:first-child{padding-left:0;border-left:0}
.gl-bh{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.gl-bh b{font-family:var(--display);font-size:.98rem;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.gl-rate{font:400 .66rem/1 var(--mono);color:var(--emerald)}
.gl-big{margin:.7rem 0 .9rem;font-family:var(--display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.045em;color:var(--ink)}
.gl-big em{display:block;font-style:normal;font-family:var(--body);font-size:.7rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.2rem}
.gl-r{display:flex;justify-content:space-between;gap:.8rem;padding:.4rem 0;
  font-size:.78rem;color:var(--ink-2);border-top:1px solid var(--line)}
.gl-r b{color:var(--ink);font-weight:600;text-align:right}

/* credit — the ladder */
.lad{margin-top:clamp(1.4rem,3vw,2rem)}
.lad-r{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative}
.lad-r::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line)}
.lad-r li{position:relative;padding:1.7rem clamp(.8rem,1.6vw,1.4rem) 0 0}
.lad-r li+li{padding-left:clamp(.8rem,1.6vw,1.4rem)}
.lad-d{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.lad-r li+li .lad-d{left:clamp(.8rem,1.6vw,1.4rem)}
.lad-r li.done .lad-d{background:var(--sage);box-shadow:inset 0 0 0 1.5px var(--sage)}
.lad-r li.now .lad-d{background:var(--emerald);box-shadow:0 0 0 4px rgba(26,135,84,.16)}
.lad-r b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:700;
  letter-spacing:-.035em;color:var(--ink)}
.lad-r li.now b{color:var(--emerald)}
.lad-r em{display:block;margin-top:.3rem;font-style:normal;font-size:.8rem;line-height:1.5;
  color:var(--ink-2)}
@media(max-width:820px){.lad-r{grid-template-columns:1fr;gap:1.2rem;padding-left:1.5rem}
  .lad-r::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .lad-r li,.lad-r li+li{padding:0}
  .lad-d,.lad-r li+li .lad-d{left:-1.5rem;top:4px}}
.lad-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
@media(max-width:760px){.lad-ex{grid-template-columns:1fr}}
.lad-e{padding:1.3rem clamp(1.2rem,2.5vw,2rem) 1.4rem 0}
.lad-e+.lad-e{padding-left:clamp(1.2rem,2.5vw,2rem);border-left:1px solid var(--line)}
@media(max-width:760px){.lad-e+.lad-e{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.lad-k{display:block;font:600 .62rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--emerald);margin-bottom:.9rem}
.lad-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.lad-row:last-of-type{border-bottom:0}
.lad-row b{color:var(--ink);font-weight:600;text-align:right}

/* the facts, back in a form that is not a table */
.pfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  padding-top:1.4rem;border-top:1px solid var(--line)}
@media(max-width:900px){.pfacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 0}}
@media(max-width:560px){.pfacts{grid-template-columns:1fr}}
.pfact{padding:0 1.5rem;border-left:1px solid var(--line)}
.pfact:first-child{padding-left:0;border-left:0}
@media(max-width:900px){.pfact:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:560px){.pfact{padding:0;border-left:0}}
.pfact span{display:block;font:600 .62rem/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.pfact b{display:block;margin-top:.45rem;font-family:var(--display);font-size:.95rem;
  font-weight:700;letter-spacing:-.025em;line-height:1.35;color:var(--ink)}


/* ==========================================================================
   v1.1_33 — the product hero fits one screen
   The copy was being centred against a 654px phone, which pushed the
   headline 258px down the page and ran the buttons past the fold. The
   column now starts at the top, the padding above it is roughly halved,
   and the device is sized so the whole hero lands inside a laptop screen.
   ========================================================================== */
.page-hero{padding-top:clamp(1.5rem,3vw,2.6rem)!important;
  padding-bottom:clamp(1.6rem,3vw,2.6rem)!important}
.page-hero .page-top{align-items:start!important}
.page-hero .crumbs{margin-bottom:clamp(1rem,2vw,1.6rem)}
.hshot-d{width:min(252px,100%)}
.hshot-i{top:7px;width:70px;height:10px}
.hshot-d img{border-radius:22px}
.hshot-d{border-radius:26px;padding:4px}
.hnote{font-size:.68rem;right:calc(100% + .9rem)}
.hnote i{width:1.5rem;flex-basis:1.5rem}
@media(max-width:900px){.hshot-d{width:min(228px,100%)}}


/* ==========================================================================
   v1.1_34 — icons on what you get, and a track that draws itself
   ========================================================================== */
.ppf-i{padding-top:1.1rem}
.ppf-ic{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:11px;
  background:var(--surface-2);color:var(--forest);margin-bottom:.85rem}
.ppf-ic svg{width:1.15rem;height:1.15rem}
.ppf-i:hover .ppf-ic{background:var(--emerald);color:#fff;transition:background .2s ease,color .2s ease}

/* the track */
.ppt{position:relative}
.ppt::before{background:var(--line)}
.ppt-fill{position:absolute;left:0;top:11px;height:1px;width:100%;background:var(--emerald);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s cubic-bezier(.22,.8,.26,1)}
.ppt.in .ppt-fill{transform:scaleX(1)}
.ppt-s{opacity:0;transform:translateY(10px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.26,1)}
.ppt-s.in{opacity:1;transform:none}
.ppt-d{background:var(--line-2);box-shadow:0 0 0 4px var(--bg);
  transition:background .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.3,1.4,.4,1)}
.ppt-s.in .ppt-d{background:var(--emerald);transform:scale(1.15)}
.ppt-s:hover .ppt-d{box-shadow:0 0 0 5px rgba(26,135,84,.16)}
.ppt-s h3{transition:color .2s ease}
.ppt-s:hover h3{color:var(--forest)}
@media(max-width:860px){
  .ppt-fill{left:4px;top:6px;bottom:6px;width:1px;height:auto;
    transform:scaleY(0);transform-origin:top center}
  .ppt.in .ppt-fill{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){
  .ppt-fill{transition:none;transform:none}
  .ppt-s{opacity:1;transform:none;transition:none}
  .ppt-s .ppt-d{background:var(--emerald)}}

/* the product headline sits on two lines */
.page-hero h1{font-size:clamp(1.85rem,3.2vw,2.45rem);line-height:1.1}
.page-hero h1 br{display:block}


/* ==========================================================================
   v1.1_36 — the product hero, grouped left, on the home page's device
   The copy sat in a 537px column and the phone was pushed to the far right,
   which left a hole down the middle of every hero. The two now sit together
   on the left, and the device is the same iPhone the home page uses — same
   shell, same side buttons, same clamp — rather than a second one.
   ========================================================================== */
.page-hero .page-top{grid-template-columns:minmax(0,30rem) auto!important;
  justify-content:start!important;gap:clamp(2rem,4.5vw,4.5rem)!important;
  align-items:start!important}
@media(max-width:1000px){.page-hero .page-top{grid-template-columns:1fr!important}}

.hshot{display:block;margin:0}
.hshot-d{position:relative;width:auto!important;border-radius:clamp(40px,4vw,56px)!important;
  padding:11px!important;background:linear-gradient(160deg,#3a3d3f,#1b1d1f 40%,#2a2d2f 70%,#141617)!important;
  box-shadow:0 50px 100px -30px rgba(11,81,55,.5),0 0 0 1.5px #0b0c0d,
    inset 0 0 0 1.5px rgba(255,255,255,.18)!important;display:inline-block}
.hshot-d::before{content:"";position:absolute;inset:4px;border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);pointer-events:none}
.hshot-s{position:relative;width:clamp(230px,20vw,300px);aspect-ratio:374/830;
  border-radius:clamp(30px,3vw,44px);overflow:hidden;background:#0A0A0A}
.hshot-s img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}

/* the labels move to the open side, now that the device sits on the left */
.hnote{left:calc(100% + 1.1rem);right:auto;font-size:.72rem}
.hnote i{order:0;width:1.9rem;flex-basis:1.9rem}
.hnote::after{content:none}
.hnote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--emerald);
  flex:0 0 6px;order:-1;margin-right:-.2rem}
@media(max-width:1240px){.hnote{display:none}}


/* v1.1_36a — the headline keeps to its two lines in the narrower column */
.page-hero .page-top{grid-template-columns:minmax(0,33rem) auto!important}
.page-hero h1{font-size:clamp(1.75rem,2.6vw,2.2rem)}
.page-hero .lede{max-width:34ch}


/* v1.1_37 — the hero copy sits level with the middle of the device
   Top-aligned, the column ended well above the phone's midpoint and the
   composition read as two unrelated blocks. Centred, the headline, the
   paragraph and the buttons balance against the screen beside them. */
.page-hero .page-top{align-items:center!important}
@media(max-width:1000px){.page-hero .page-top{align-items:start!important}}


/* ==========================================================================
   v1.1_38 — the Bill Payments set pieces
   ========================================================================== */
/* airtime — say it, and see what she prepares */
.say{margin-top:clamp(1.4rem,3vw,2rem);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
@media(max-width:860px){.say{grid-template-columns:1fr}}
.say-chips{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.say-c{border:0;cursor:pointer;text-align:left;border-radius:999px;padding:.7rem 1.15rem;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font:500 .9rem/1.3 var(--body);color:var(--ink-2);transition:all .2s ease}
.say-c:hover{color:var(--ink)}
.say-c.on{background:var(--emerald);color:#fff;box-shadow:inset 0 0 0 1px var(--emerald),
  0 10px 22px -12px rgba(26,135,84,.8)}
.say-out{padding-top:.3rem}
.say-k{font:600 .62rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
.say-rows{margin-top:.9rem}
.say-rows>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.say-rows b{color:var(--ink);font-weight:600;text-align:right}
.say-n{margin:.9rem 0 0;font-size:.82rem;line-height:1.55;color:var(--ink-3)}
.say-cta{display:flex;gap:.5rem;margin-top:1.1rem}
.say-go,.say-no{padding:.55rem 1.1rem;border-radius:999px;font:600 .8rem/1 var(--body)}
.say-go{background:var(--emerald);color:#fff}
.say-no{background:var(--surface-2);color:var(--ink-3)}

/* electricity — prepaid or postpaid */
.mtr{margin-top:clamp(1.4rem,3vw,2rem)}
.mtr-tabs{display:flex;gap:.3rem;padding:.25rem;border-radius:999px;background:var(--surface-2);
  width:max-content}
.mtr-t{border:0;cursor:pointer;padding:.5rem 1.2rem;border-radius:999px;background:transparent;
  font:600 .85rem/1 var(--body);color:var(--ink-3);transition:all .2s ease}
.mtr-t.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,30,20,.12)}
.mtr-h{margin-top:1.3rem;font-family:var(--display);font-size:1.1rem;font-weight:700;
  letter-spacing:-.03em;color:var(--ink)}
.mtr-rows{margin:1rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,4rem)}
@media(max-width:760px){.mtr-rows{grid-template-columns:1fr}}
.mtr-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.75rem 0;border-bottom:1px solid var(--line)}
.mtr-rows dt{font-size:.84rem;color:var(--ink-2)}
.mtr-rows dd{margin:0;font:600 .88rem/1.4 var(--body);color:var(--ink);text-align:right}
.mtr-n{margin:1.1rem 0 0;font-size:.84rem;line-height:1.6;color:var(--ink-3);max-width:62ch}

/* television — the bouquets */
.bq{margin-top:clamp(1.4rem,3vw,2rem);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
@media(max-width:860px){.bq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bq{grid-template-columns:1fr}}
.bq-r{display:flex;align-items:baseline;gap:.7rem;padding:.95rem 1.4rem;
  border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.bq-r:nth-child(3n+1){padding-left:0;border-left:0}
@media(max-width:860px){.bq-r:nth-child(3n+1){padding-left:1.4rem;border-left:1px solid var(--line)}
  .bq-r:nth-child(2n+1){padding-left:0;border-left:0}}
@media(max-width:520px){.bq-r{padding-left:0;border-left:0}}
.bq-r b{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.bq-r span{font-size:.72rem;color:var(--ink-3)}
.bq-r em{margin-left:auto;font-style:normal;font:700 .95rem/1 var(--display);
  letter-spacing:-.03em;color:var(--ink)}
.bq-r.on b,.bq-r.on em{color:var(--emerald)}
.bq-r.on span{color:var(--emerald)}


/* ==========================================================================
   v1.1_39 — the Business pages are shown on a desktop
   ========================================================================== */
.page-hero:has(+ .wrap .dshot) .page-top,
.page-top.one{grid-template-columns:minmax(0,62ch)!important}
.dshot{margin:0;position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 44px 96px -48px rgba(8,30,20,.44),inset 0 0 0 1px var(--line)}
.dshot-c{display:flex;align-items:center;gap:6px;height:38px;padding:0 1rem;
  background:var(--surface);border-bottom:1px solid var(--line)}
.dshot-c i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:0 0 8px}
.dshot-c em{margin:0 auto;font:400 .68rem/1.5 var(--mono);font-style:normal;color:var(--ink-3)}
.dshot img{display:block;width:100%;height:auto}
.dnotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:clamp(1.2rem,2.5vw,1.8rem);padding-top:1.3rem;border-top:1px solid var(--line)}
@media(max-width:820px){.dnotes{grid-template-columns:1fr;gap:1.2rem}}
.dnote{padding:0 1.6rem;border-left:1px solid var(--line)}
.dnote:first-child{padding-left:0;border-left:0}
@media(max-width:820px){.dnote{padding:0;border-left:0}}
.dnote i{display:block;width:18px;height:2px;border-radius:2px;background:var(--emerald);
  margin-bottom:.7rem}
.dnote b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;
  letter-spacing:-.025em;line-height:1.3;color:var(--ink)}
.dnote span{display:block;margin-top:.3rem;font-size:.84rem;line-height:1.55;color:var(--ink-2)}


/* ==========================================================================
   AGENT PAGES  —  dark workspace shots, the register, the certificate
   ========================================================================== */
.dshot.dark{background:#0B0F0D;
  box-shadow:0 44px 96px -48px rgba(4,16,11,.6),inset 0 0 0 1px rgba(255,255,255,.09)}
.dshot.dark .dshot-c{background:#121715;border-bottom-color:rgba(255,255,255,.07)}
.dshot.dark .dshot-c i{background:rgba(255,255,255,.16)}
.dshot.dark .dshot-c em{color:rgba(255,255,255,.42)}

.cert{margin-top:1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:clamp(1.1rem,2.4vw,1.5rem)}
.cert-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media(max-width:700px){.cert-r{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cert-c .l{display:block;font:400 .66rem/1.5 var(--mono);text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}
.cert-c b{display:block;margin-top:.3rem;font-family:var(--display);font-size:1.02rem;
  font-weight:700;letter-spacing:-.025em;line-height:1.3;color:var(--ink)}
.cert-p{display:flex;gap:4px;margin-top:.55rem}
.cert-p i{width:11px;height:6px;border-radius:2px;background:var(--line-2)}
.cert-p i.on{background:var(--emerald)}
.cert-t{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.4rem}
.cert-t span{font:400 .7rem/1 var(--mono);color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:.42rem .72rem}
.cert-n{margin:.95rem 0 0;font-size:.86rem;line-height:1.62;color:var(--ink-2)}

.dgal{display:grid;gap:clamp(1.4rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.dgal-cap{margin-top:.9rem}
.dgal-cap b{display:block;font-family:var(--display);font-size:1rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.dgal-cap span{display:block;margin-top:.28rem;font-size:.86rem;line-height:1.6;color:var(--ink-2)}


/* ==========================================================================
   THE AGENTS

   Eight sections, eight different shapes. The first draft of this page was
   five hairline lists in a row — a register, a ledger, a set of bounds, an
   index, a FAQ — all set in the same type at the same volume, which reads
   as noise however good each list is. So: one list (the register), one
   console, one grid, one rail, and the rest carried by the dark bands at
   the top and bottom. Mono is rationed to the places that are genuinely
   machine output: the status panel, the source and state of an answer.
   ========================================================================== */
.ag-hero{position:relative;z-index:1;background:#0A0E0C;color:#F2F6F3;
  padding:clamp(2.4rem,5vw,3.4rem) 0 var(--agover);--agover:clamp(3.5rem,8vw,7rem)}
.ag-crumb{font:400 .7rem/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  color:rgba(242,246,243,.38)}
.ag-crumb a{color:inherit;text-decoration:none}
.ag-crumb a:hover{color:rgba(242,246,243,.8)}
.ag-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3.4rem);
  align-items:start;margin-top:clamp(1.6rem,3.4vw,2.6rem)}
@media(max-width:880px){.ag-top{grid-template-columns:1fr}}
.ag-hero h1{margin:0;max-width:38ch;font-family:var(--display);font-weight:700;
  letter-spacing:-.035em;line-height:1.08;font-size:clamp(1.85rem,3.2vw,2.55rem);color:#F7FAF8}
.ag-lede{margin:1.2rem 0 0;max-width:56ch;font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.7;
  color:rgba(242,246,243,.7)}
.ag-act{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.8rem}
.ag-link{color:#8FC7AC;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;font-size:.95rem}
.ag-link:hover{color:#C6E4D5}

/* the status panel — the one place the page talks like the product does */
.ag-cert{text-align:right;min-width:16rem;padding-top:.3rem}
@media(max-width:880px){.ag-cert{text-align:left;padding-top:1.4rem}}
.ag-line{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  font:400 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#8FC7AC;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid rgba(242,246,243,.14)}
@media(max-width:880px){.ag-line{justify-content:flex-start}}
.ag-line i{width:6px;height:6px;border-radius:50%;background:#8FC7AC;flex:0 0 6px}
.ag-cert .st{display:block;font:400 .72rem/1.5 var(--mono);text-transform:uppercase;
  letter-spacing:.12em;color:#F2F6F3}
.ag-cert .gt{display:block;margin-top:.3rem;font:400 .76rem/1.5 var(--mono);
  color:rgba(242,246,243,.52)}
.ag-pips{display:flex;gap:4px;justify-content:flex-end;margin-top:.55rem}
@media(max-width:880px){.ag-pips{justify-content:flex-start}}
.ag-pips i{width:13px;height:6px;border-radius:2px;background:rgba(242,246,243,.14)}
.ag-hero.in .ag-pips i.on{animation:agpip .34s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(.18s + var(--i) * .055s)}
@keyframes agpip{from{background:rgba(242,246,243,.14);transform:scaleX(.3)}
  to{background:#8FC7AC;transform:none}}
@media(prefers-reduced-motion:reduce){.ag-hero.in .ag-pips i.on{animation:none;background:#8FC7AC}}
.ag-cert-pi{display:inline-block;margin-top:.9rem;font:400 .72rem/1.5 var(--mono);
  color:#8FC7AC;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ag-cert-pi:hover{color:#C6E4D5}

.ag-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2.2rem,4.5vw,3.2rem);border-top:1px solid rgba(242,246,243,.14);
  padding-top:1.4rem}
@media(max-width:620px){.ag-figs{grid-template-columns:1fr;gap:1.1rem}}
.ag-figs>div{padding:0 1.7rem;border-left:1px solid rgba(242,246,243,.14)}
.ag-figs>div:first-child{padding-left:0;border-left:0}
@media(max-width:620px){.ag-figs>div{padding:0;border-left:0}}
.ag-figs b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.5rem,2.6vw,2rem);color:#F7FAF8}
.ag-figs span{display:block;margin-top:.28rem;font-size:.85rem;line-height:1.55;
  color:rgba(242,246,243,.56)}

.ag-shot{margin-top:calc(-1 * var(--agover,5rem));position:relative;z-index:2}
.ag-shot .dshot{box-shadow:0 50px 110px -56px rgba(4,16,11,.72),
  inset 0 0 0 1px rgba(255,255,255,.1)}

/* 3 · the register — the only list on the page */
.agreg{list-style:none;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;padding:0}
.agreg-i{border-top:1px solid var(--line)}
.agreg-i:last-child{border-bottom:1px solid var(--line)}
.agreg-h{display:grid;width:100%;align-items:baseline;
  grid-template-columns:3rem minmax(0,12rem) minmax(0,1fr) 1.4rem;gap:1rem;
  appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;padding:1.2rem 0;transition:opacity .18s}
@media(max-width:760px){.agreg-h{grid-template-columns:2.4rem minmax(0,1fr) 1.4rem}
  .agreg-h .agreg-s{display:none}}
.agreg-h:hover{opacity:.7}
.agreg-n{font:400 .72rem/1.6 var(--mono);color:var(--ink-3);letter-spacing:.06em}
.agreg-h b{font-family:var(--display);font-size:clamp(1.05rem,1.7vw,1.25rem);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-2);transition:color .18s}
.agreg-i.on .agreg-h b{color:var(--ink)}
.agreg-s{font-size:.93rem;line-height:1.6;color:var(--ink-3)}
.agreg-x{position:relative;width:13px;height:13px;justify-self:end;align-self:center}
.agreg-x::before,.agreg-x::after{content:"";position:absolute;background:var(--ink-3);
  transition:transform .24s,background .18s}
.agreg-x::before{left:0;right:0;top:6px;height:1px}
.agreg-x::after{top:0;bottom:0;left:6px;width:1px}
.agreg-i.on .agreg-x::before{background:var(--emerald)}
.agreg-i.on .agreg-x::after{transform:scaleY(0);background:var(--emerald)}
.agreg-b{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.2rem,3.4vw,3rem);padding:0 0 2rem;animation:agfade .3s ease both}
@media(max-width:760px){.agreg-b{grid-template-columns:1fr;gap:1.4rem}}
@keyframes agfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.agreg-b,.agask-w{animation:none}}
.agreg-b>p{margin:0;font-size:1rem;line-height:1.72;color:var(--ink-2);max-width:52ch}
.agreg-d{margin:0}
.agreg-d>div{display:flex;gap:1.2rem;justify-content:space-between;align-items:baseline;
  padding:.62rem 0;border-top:1px solid var(--line)}
.agreg-d>div:first-child{border-top:0;padding-top:0}
.agreg-d dt{font:400 .68rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);flex:0 0 auto}
.agreg-d dd{margin:0;text-align:right;font-size:.88rem;line-height:1.55;color:var(--ink)}

/* 4 · the console */
.agask{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  margin-top:clamp(1rem,2.4vw,1.6rem);--askgap:clamp(1.6rem,4vw,3.2rem)}
@media(max-width:880px){.agask{grid-template-columns:1fr}}
.agask-q{display:flex;flex-direction:column;padding-right:var(--askgap)}
@media(max-width:880px){.agask-q{padding-right:0}}
.agask-b{appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;padding:1rem 0 1.05rem 1.6rem;position:relative;
  border-top:1px solid var(--line)}
.agask-b:last-child{border-bottom:1px solid var(--line)}
.agask-b q{quotes:"\201c" "\201d";font-size:1rem;line-height:1.55;color:var(--ink-2);
  transition:color .18s}
.agask-b:hover q{color:var(--ink)}
.agask-b::before{content:"";position:absolute;left:0;top:1.45rem;width:9px;height:1px;
  background:var(--line-2);transition:background .2s,width .24s}
.agask-b.on q{color:var(--ink);font-weight:600}
.agask-b.on::before{background:var(--emerald);width:17px}
.agask-a{padding-left:var(--askgap);border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center}
@media(max-width:880px){.agask-a{padding-left:0;border-left:0;border-top:1px solid var(--line);
  padding-top:1.5rem;margin-top:1.7rem}}
.agask-w{animation:agfade .3s ease both}
.agask-who{font:400 .68rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3)}
.agask-t{margin:.65rem 0 0;font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.64;
  color:var(--ink);max-width:48ch}
.agask-m{margin:1.5rem 0 0;padding-top:1.15rem;border-top:1px solid var(--line)}
.agask-m>div{display:flex;gap:1.2rem;align-items:baseline;padding:.42rem 0}
.agask-m dt{flex:0 0 4.6rem;font:400 .66rem/1.6 var(--mono);text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}
.agask-m dd{margin:0;font:400 .8rem/1.6 var(--mono);color:var(--ink-2)}
.agask-m dd.ok,.agask-m dd.hold,.agask-m dd.no{display:flex;align-items:baseline;gap:.6rem;
  color:var(--ink)}
.agask-m dd.ok::before,.agask-m dd.hold::before,.agask-m dd.no::before{content:"";
  flex:0 0 13px;width:13px;height:6px;border-radius:2px;transform:translateY(-1px)}
.agask-m dd.ok::before{background:var(--emerald)}
.agask-m dd.hold::before{background:linear-gradient(90deg,var(--emerald) 50%,transparent 50%);
  box-shadow:inset 0 0 0 1px var(--emerald)}
.agask-m dd.no::before{box-shadow:inset 0 0 0 1px var(--emerald)}
.agask-f{margin:1.7rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.68;color:var(--ink-2);max-width:80ch}
.agask-f b{font-weight:600;color:var(--ink)}

/* 5 · where it stops — a grid, deliberately not another list */
.agst-h{padding-bottom:clamp(1.3rem,2.8vw,2rem)}
.agst-k{display:block;font:400 .68rem/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.agst-h h2{margin:.6rem 0 0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  line-height:1.08;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--ink);text-wrap:balance}
.agst-h h2 .agcur{color:var(--emerald);font:inherit;background:none;border:0;padding:0}
.agst-h>p{margin:.75rem 0 0;max-width:74ch;font-size:.9rem;line-height:1.66;color:var(--ink-3)}
.agst-h>p a{color:var(--ink-2)}
.agst-l{list-style:none;margin:0;padding:0;position:relative}
.agst-l::before{content:"";position:absolute;left:1px;top:.2rem;bottom:.2rem;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--emerald) 0%,rgba(143,199,172,.28) 100%)}
.agst-i{position:relative;padding:clamp(1.05rem,2.2vw,1.5rem) 0 clamp(1.05rem,2.2vw,1.5rem)
  clamp(2.2rem,3.4vw,3.2rem);border-top:1px solid var(--line);transition:background .2s}
.agst-i:first-child{border-top:0}
.agst-i:hover{background:linear-gradient(90deg,rgba(26,135,84,.05),rgba(26,135,84,0) 52%)}
.agst-i::before{content:"";position:absolute;left:-3px;top:calc(clamp(1.05rem,2.2vw,1.5rem) + .28rem);
  width:10px;height:10px;border-radius:50%;background:var(--paper);
  border:2px solid var(--emerald);transition:box-shadow .2s,background .2s}
.agst-i:hover::before{background:var(--emerald);box-shadow:0 0 0 4px rgba(26,135,84,.14)}
.agst-r{display:flex;align-items:baseline;gap:clamp(.7rem,1.6vw,1.1rem);max-width:72ch}
.agst-n{font:400 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:color .2s}
.agst-i:hover .agst-n{color:var(--emerald)}
.agst-t{display:inline-block;font-family:var(--display);font-size:clamp(1.08rem,1.5vw,1.28rem);
  font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
a.agst-t{text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--line-2);
  transition:text-decoration-color .18s}
.agst-t:hover{text-decoration-color:var(--emerald)}
.agst-e{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font:400 .64rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.agst-e i{display:block;width:2px;height:11px;border-radius:2px;background:var(--emerald)}
.agst-i p{margin:.5rem 0 0;max-width:72ch;font-size:.95rem;line-height:1.7;color:var(--ink-2)}
@media(max-width:620px){.agst-r{flex-wrap:wrap;row-gap:.45rem}
  .agst-e{margin-left:0;width:100%}}

/* region-aware amounts: one span, five renderings, CSS picks the visitor's */
.amt i{display:none;font-style:normal}
html[data-region="ng"] .amt i[data-r="ng"],html[data-region="uk"] .amt i[data-r="uk"],
html[data-region="us"] .amt i[data-r="us"],html[data-region="ca"] .amt i[data-r="ca"],
html[data-region="row"] .amt i[data-r="row"]{display:inline}
html:not([data-region]) .amt i[data-r="row"]{display:inline}

/* one day, every currency — the 24-hour rail */
.agday-r{position:relative;height:74px;margin-top:clamp(1.4rem,3vw,2.2rem)}
.agday-r::before{content:"";position:absolute;left:0;right:0;top:40px;height:2px;
  border-radius:2px;background:var(--line-2)}
.agday-fill{position:absolute;left:0;top:40px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--sage),var(--emerald));
  transition:width .7s cubic-bezier(.2,.7,.2,1)}
.agday-r>i{position:absolute;top:36px;width:1px;height:10px;background:var(--line-2);
  transform:translateX(-.5px)}
.agday-r>i.maj{top:32px;height:18px;background:var(--ink-3);opacity:.55}
.agday-r>i.maj::after{content:attr(data-h);position:absolute;top:24px;left:50%;
  transform:translateX(-50%);font:400 .62rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.agday-r>i.maj.e0::after{left:0;transform:none}
.agday-r>i.maj.e24::after{left:auto;right:0;transform:none}
.agday-d{position:absolute;top:34px;width:14px;height:14px;transform:translateX(-50%);
  border-radius:50%;border:2px solid var(--emerald);background:var(--paper);padding:0;
  cursor:pointer;z-index:1;transition:box-shadow .2s,background .2s}
.agday-d.st-no{border-color:#B9432E}.agday-d.st-ask{border-color:#B7791F}
.agday-d.st-brief{border-color:var(--forest)}
.agday-d.on{background:var(--emerald);box-shadow:0 0 0 5px rgba(26,135,84,.16);
  animation:agLiveBeat 1.6s ease-in-out infinite}
.agday-d.on.st-no{background:#B9432E;box-shadow:0 0 0 5px rgba(185,67,46,.16)}
.agday-d.on.st-ask{background:#B7791F;box-shadow:0 0 0 5px rgba(183,121,31,.16)}
.agday-d.on.st-brief{background:var(--forest);box-shadow:0 0 0 5px rgba(11,81,55,.16)}
.agday-d:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.agday-dt{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font:400 .64rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-3);white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none}
.agday-d.on .agday-dt,.agday-d:hover .agday-dt{opacity:1;color:var(--ink)}
.agday-p{margin-top:clamp(1.2rem,2.6vw,1.7rem);display:grid;
  grid-template-columns:9.5rem minmax(0,1fr);gap:.6rem 1.4rem;align-items:baseline;min-height:3.2rem}
@media(max-width:620px){.agday-p{grid-template-columns:1fr}}
.agday-k{display:inline-flex;align-items:center;gap:.55rem;padding-top:0;
  font:400 .64rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.agday-k i{display:block;width:8px;height:8px;border-radius:50%;background:var(--emerald)}
.agday-k.st-no i{background:#B9432E}.agday-k.st-ask i{background:#B7791F}
.agday-k.st-brief i{background:var(--forest)}
.agday-p p{margin:0;font-family:var(--display);font-size:clamp(.98rem,1.25vw,1.12rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.45;color:var(--ink);
  animation:agdayIn .45s cubic-bezier(.2,.7,.2,1)}
.agday-p .amt,.agday-p .agcur{color:var(--emerald);font-style:normal}
@keyframes agdayIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.agday-c{display:flex;flex-wrap:wrap;gap:.8rem clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(1.1rem,2.4vw,1.6rem);padding-top:1rem;border-top:1px solid var(--line)}
.agday-c span{font:400 .62rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.agday-c span b{display:block;font:500 1.05rem/1.2 var(--mono);letter-spacing:0;color:var(--ink);
  text-transform:none;font-variant-numeric:tabular-nums}
.agday-c span.loc b{color:var(--emerald)}
.agday-c span.loc{color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.agday-d.on{animation:none}.agday-p p{animation:none}
  .agday-fill{transition:none}}

.ag-close{padding-top:clamp(2.4rem,5vw,4rem)}
.ag-close-i{max-width:46rem;margin:0 auto;text-align:center}
.ag-close-i h2{margin:.8rem 0 0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  line-height:1.15;font-size:clamp(1.25rem,2vw,1.7rem);color:var(--ink);text-wrap:balance}
@media(min-width:900px){.ag-close-i h2{white-space:nowrap}}
.ag-close-i p{margin:1rem auto 0;max-width:40rem;font-size:1rem;line-height:1.7;color:var(--ink-2)}
.ag-close-a{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.6rem}

.ag-coins{display:flex;align-items:center;flex:none;padding:.3rem 0}
.ag-coins b{position:relative;margin-left:-.7rem;width:clamp(2.6rem,3.6vw,3.2rem);
  height:clamp(2.6rem,3.6vw,3.2rem);border-radius:50%;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 8px 20px rgba(11,81,55,.22),inset 0 1px 0 rgba(255,255,255,.35);
  border:2px solid var(--paper);z-index:calc(var(--i) + 1);
  animation:orbBeat 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
.ag-coins b::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.42),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,.18) 100%)}
.ag-coins b i{position:relative;z-index:1;display:grid;place-items:center;width:62%;height:62%;
  border-radius:50%;background:rgba(6,22,14,.62);color:#fff;font-style:normal;
  font:700 clamp(.9rem,1.25vw,1.1rem)/1 var(--display);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.ag-coins b:first-child{margin-left:0}
.ag-coins b.fl-ng{background:linear-gradient(90deg,#008751 0 33.4%,#fff 33.4% 66.6%,#008751 66.6%)}
.ag-coins b.fl-us{background:linear-gradient(#3C3B6E,#3C3B6E) top left/46% 54% no-repeat,
  repeating-linear-gradient(180deg,#B22234 0 7.7%,#fff 7.7% 15.4%)}
.ag-coins b.fl-uk{background:linear-gradient(#C8102E,#C8102E) center/100% 16% no-repeat,
  linear-gradient(90deg,#C8102E,#C8102E) center/16% 100% no-repeat,
  linear-gradient(#fff,#fff) center/100% 30% no-repeat,
  linear-gradient(90deg,#fff,#fff) center/30% 100% no-repeat,
  linear-gradient(45deg,transparent 45%,#fff 45% 55%,transparent 55%),
  linear-gradient(-45deg,transparent 45%,#fff 45% 55%,transparent 55%),#012169}
.ag-coins b.fl-gh,.agmx-f.fl-gh{background:linear-gradient(180deg,#CE1126 0 33.4%,#FCD116 33.4% 66.6%,#006B3F 66.6%)}
.ag-coins b.fl-ke,.agmx-f.fl-ke{background:linear-gradient(180deg,#000 0 30%,#fff 30% 34%,#BB0000 34% 66%,#fff 66% 70%,#006600 70%)}
.ag-coins b.fl-eu{background:radial-gradient(circle at 84.0% 50.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 79.4% 67.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 67.0% 79.4%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 50.0% 84.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 33.0% 79.4%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 20.6% 67.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 16.0% 50.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 20.6% 33.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 33.0% 20.6%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 50.0% 16.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 67.0% 20.6%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 79.4% 33.0%,#FFCC00 0 4.5%,transparent 5.5%),#003399}
@media(prefers-reduced-motion:reduce){.ag-coins b{animation:none}}

/* the matrix: each currency keeps its own row of things, and they share the rest */
.agmx-g{margin-top:clamp(1.2rem,2.6vw,1.9rem)}
.agmx-r{display:grid;grid-template-columns:minmax(9rem,13rem) repeat(var(--n),minmax(0,1fr));
  gap:0 clamp(.8rem,2vw,1.6rem);align-items:center;padding:clamp(.85rem,1.6vw,1.1rem) 0;
  border-top:1px solid var(--line)}
.agmx-hd{border-top:0;padding-bottom:.6rem;align-items:end}
.agmx-l b{display:block;font-family:var(--display);font-size:1rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.agmx-l small{display:block;margin-top:.15rem;font-size:.78rem;line-height:1.45;color:var(--ink-3)}
.agmx-c{display:flex;align-items:center;gap:.5rem;font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.agmx-hd .agmx-c{flex-direction:column;align-items:flex-start;gap:.45rem}
.agmx-hd em{font:400 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-style:normal}
.agmx-f{position:relative;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  overflow:hidden;border:2px solid var(--paper);box-shadow:0 6px 14px rgba(11,81,55,.16)}
.agmx-f::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.42),rgba(255,255,255,0) 46%)}
.agmx-f i{position:relative;z-index:1;display:grid;place-items:center;width:62%;height:62%;
  border-radius:50%;background:rgba(6,22,14,.62);color:#fff;font:700 .82rem/1 var(--display);
  font-style:normal;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.agmx-f.fl-ng{background:linear-gradient(90deg,#008751 0 33.4%,#fff 33.4% 66.6%,#008751 66.6%)}
.agmx-f.fl-us{background:linear-gradient(#3C3B6E,#3C3B6E) top left/46% 54% no-repeat,
  repeating-linear-gradient(180deg,#B22234 0 7.7%,#fff 7.7% 15.4%)}
.agmx-f.fl-uk{background:linear-gradient(#C8102E,#C8102E) center/100% 16% no-repeat,
  linear-gradient(90deg,#C8102E,#C8102E) center/16% 100% no-repeat,
  linear-gradient(#fff,#fff) center/100% 30% no-repeat,
  linear-gradient(90deg,#fff,#fff) center/30% 100% no-repeat,
  linear-gradient(45deg,transparent 45%,#fff 45% 55%,transparent 55%),
  linear-gradient(-45deg,transparent 45%,#fff 45% 55%,transparent 55%),#012169}
.agmx-f.fl-eu{background:radial-gradient(circle at 84.0% 50.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 79.4% 67.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 67.0% 79.4%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 50.0% 84.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 33.0% 79.4%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 20.6% 67.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 16.0% 50.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 20.6% 33.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 33.0% 20.6%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 50.0% 16.0%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 67.0% 20.6%,#FFCC00 0 4.5%,transparent 5.5%),radial-gradient(circle at 79.4% 33.0%,#FFCC00 0 4.5%,transparent 5.5%),#003399}
.agmx-t{flex:none;width:7px;height:7px;border-radius:50%;background:var(--emerald)}
.agmx-br{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:clamp(1rem,2vw,1.4rem) 0 .3rem}
.agmx-br span{height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(143,199,172,.2),var(--emerald))}
.agmx-br span:last-child{background:linear-gradient(90deg,var(--emerald),rgba(143,199,172,.2))}
.agmx-br em{font:400 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald);font-style:normal;white-space:nowrap}
.agmx-one{grid-template-columns:minmax(9rem,13rem) minmax(0,1fr)}
.agmx-w{display:block;font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink)}
.agmx-w a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.agmx-w .agcur{color:var(--emerald)}
@media(max-width:900px){
  .agmx-r{grid-template-columns:1fr;gap:.5rem .8rem;padding:1rem 0}
  .agmx-hd{display:none}
  .agmx-c::before{content:attr(data-c);font:400 .62rem/1 var(--mono);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);min-width:2.2rem}
  .agmx-one .agmx-c::before{content:none}}

/* the phone dashboard: screens on the right, what each one is on the left */
figure.agdash.agdash-ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;background:transparent;box-shadow:none;
  border-radius:0;overflow:visible;padding:clamp(1rem,2vw,2rem) 0}
@media(max-width:820px){figure.agdash.agdash-ph{grid-template-columns:1fr}}
.agph-k{display:inline-flex;align-items:center;gap:.45rem;font:400 .62rem/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.agph-k b{width:6px;height:6px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 3px var(--acc-soft);animation:agLiveBeat 1.6s ease-in-out infinite}
.agdash-ph .agdash-t{flex-direction:column;gap:.25rem;padding:0;border:0;background:none;overflow:visible}
.agdash-ph .agdash-b{text-align:left;white-space:normal;padding:.95rem 1.05rem 1.1rem;border-radius:14px;
  display:flex;flex-direction:column;gap:.25rem;transition:background .2s,color .2s}
.agdash-ph .agdash-b b{font-family:var(--display);font-size:1.05rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.agdash-ph .agdash-b span:not(.agdash-p){font:400 .88rem/1.5 var(--body);color:var(--ink-3)}
.agdash-ph .agdash-b.on{background:rgba(26,135,84,.06)}
.agdash-ph .agdash-b.on span:not(.agdash-p){color:var(--ink-2)}
.agdash-ph .agdash-p{left:1.05rem;right:1.05rem;bottom:.55rem}
.agph-frame{width:clamp(220px,21vw,300px);margin:0 auto;aspect-ratio:620/1376;
  border-radius:clamp(30px,3vw,44px);overflow:hidden;background:#0A0A0A;
  box-shadow:0 2px 4px rgba(8,40,26,.08),0 48px 104px -42px rgba(11,81,55,.5),0 0 0 6px #0A0A0A,0 0 0 7px rgba(255,255,255,.25)}
.agph-frame .agdash-s{height:100%;background:#0A0A0A}
.agph-frame .agdash-i{height:100%;object-fit:cover}

/* the Ledger: the orb leads, and the cards lose their casing */
.lg-title{margin-top:.6rem}
.lg-title .hb-core{width:clamp(56px,5.4vw,80px);height:clamp(56px,5.4vw,80px)}
.lg-card{border-color:transparent!important;background:transparent!important;border-radius:18px!important}
.lg-card > :first-child{border-radius:18px;overflow:hidden}
.lg-card:hover{background:rgba(255,255,255,.55)!important;
  box-shadow:0 1px 2px rgba(8,40,26,.05),0 28px 62px -34px rgba(11,81,55,.35)!important}
.lg-srow a{border-color:transparent!important;background:transparent!important;
  border-left:2px solid var(--emerald)!important;border-radius:0!important}

/* guides: the short answer, tables, lists, callouts, FAQ and sources */
/* the library: guides with their explainers, set as lists */
.lg-desk{margin-top:3.5rem}
.lg-more{margin-top:.2rem}
.lg-more summary{cursor:pointer;list-style:none;padding:.4rem 0;font-size:.86rem;font-weight:600;color:var(--forest)}
.lg-more summary::-webkit-details-marker{display:none}
.lg-more summary:hover{text-decoration:underline;text-underline-offset:3px}
/* [graft:BLOG-SHELF-CSS] the library as shelves; "Show more"; the jump row */
.lg-lib-grid.lg-shelves{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.4rem}
.lg-shelf ul{margin-bottom:.5rem}
.lg-seeall{display:inline-block;font-size:.86rem;font-weight:600;color:var(--forest);text-decoration:none;padding:.3rem 0}
.lg-seeall:hover{text-decoration:underline;text-underline-offset:3px}
.lg-rest[hidden]{display:none}
.lg-showall{display:block;margin:1.4rem auto 0;padding:.7rem 1.4rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--forest);font:600 .9rem/1 inherit;cursor:pointer}
.lg-showall:hover{border-color:var(--forest)}
.lg-showall:focus-visible,.lg-seeall:focus-visible,.lg-jump a:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.lg-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin:3.5rem 0 -2rem}
.lg-jump a{padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;font-size:.86rem;color:var(--ink-2);text-decoration:none}
.lg-jump a:hover{border-color:var(--forest);color:var(--forest)}
.lg-subsec{margin-top:2.6rem}
.lg-subhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--line);padding-top:1.2rem}
.lg-subhead h2{font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em;margin:0;color:var(--ink)}
.lg-within{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;margin:0 0 1.2rem;font-size:.92rem;color:var(--ink-3)}
.lg-within a{color:var(--forest);font-weight:600;text-decoration:none}
/* Around the world: a country is its flag and its name until it is opened */
.lg-countries{align-items:start}
.lg-country{padding:0}
.lg-country summary{list-style:none;display:flex;align-items:center;gap:.75rem;padding:1.15rem 0;cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:-.022em;line-height:1.3;color:var(--ink)}
.lg-country summary::-webkit-details-marker{display:none}
.lg-country summary::marker{content:""}
.lg-flag{font-size:1.4rem;line-height:1;flex:none}
.lg-country-t{flex:1;min-width:0}
.lg-chev{flex:none;width:.5rem;height:.5rem;margin-right:.35rem;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.lg-country[open] .lg-chev{transform:rotate(-135deg) translateY(-2px)}
.lg-country summary:hover .lg-country-t{color:var(--forest)}
.lg-country summary:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}
.lg-country ul{margin:0 0 .5rem}
.lg-country[open]{padding-bottom:1.1rem}
/* The library and the agents desk: a subject is its name until it is opened */
.lg-folds{align-items:start}
.lg-fold{padding:0}
.lg-fold summary{list-style:none;display:flex;align-items:center;gap:.75rem;padding:1.15rem 0;cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:-.022em;line-height:1.3;color:var(--ink)}
.lg-fold summary::-webkit-details-marker{display:none}
.lg-fold summary::marker{content:""}
.lg-fold-t{flex:1;min-width:0}
.lg-fold[open] .lg-chev{transform:rotate(-135deg) translateY(-2px)}
.lg-fold summary:hover .lg-fold-t{color:var(--forest)}
.lg-fold summary:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}
.lg-fold ul{margin:0 0 .5rem}
.lg-fold[open]{padding-bottom:1.1rem}
@media(max-width:1020px){.lg-lib-grid.lg-shelves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.lg-lib-grid.lg-shelves{grid-template-columns:1fr}}
@media(max-width:600px){.lg-shelf{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:1rem;padding:1rem 0}.lg-shelf .lg-lib-r{grid-column:1/-1;margin-bottom:.35rem}.lg-shelf .lg-lib-t{margin:0}.lg-shelf ul{display:none}}
.lg-lib{margin:4.5rem 0 1rem}
.lg-lib-head{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;margin-bottom:1.6rem}
.lg-lib-head h2{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;margin:0;color:var(--ink)}
.lg-lib-head p{margin:0;max-width:44ch;color:var(--ink-3);font-size:.95rem}
.lg-lib-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.5rem}
.lg-lib-g{padding:1.6rem 0 1.4rem;border-top:1px solid var(--line);min-width:0}
.lg-lib-r{display:block;font:400 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin-bottom:.6rem}
.lg-lib-t{display:block;font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:-.022em;line-height:1.3;color:var(--ink);text-decoration:none;margin-bottom:.8rem}
.lg-lib-t:hover{color:var(--forest)}
.lg-lib-g ul{list-style:none;margin:0;padding:0;columns:1}
.lg-lib-g li{margin:0;padding:.36rem 0;font-size:.9rem;line-height:1.45}
.lg-lib-g li a{color:var(--ink-2);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s}
.lg-lib-g li a:hover{color:var(--forest);background-size:100% 1px}
@media(max-width:820px){.lg-lib-grid{grid-template-columns:1fr}}
/* explainer: part of the guide */
.lg-partof{display:flex;flex-wrap:wrap;gap:.35rem .7rem;align-items:baseline;margin:0 0 1.2rem!important;font-size:.92rem}
.lg-partof span{font:400 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lg-partof a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* guide: go deeper */
.lg-prose .lg-deeper{list-style:none;margin:.8rem 0 2rem;padding:0;counter-reset:d}
.lg-deeper li{counter-increment:d;border-top:1px solid var(--line);margin:0!important}
.lg-deeper li:last-child{border-bottom:1px solid var(--line)}
.lg-deeper a{display:flex;flex-direction:column;padding:.85rem 0;text-decoration:none}
.lg-deeper b{font-family:var(--display);font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.35}
.lg-deeper span{font-size:.88rem;line-height:1.5;color:var(--ink-3);margin-top:.2rem}
.lg-deeper a:hover b{color:var(--forest)}
.lg-answer{margin:0 0 2rem;padding:1.15rem 1.3rem 1.2rem;border-left:3px solid var(--emerald);
  background:linear-gradient(90deg,rgba(26,135,84,.07),rgba(26,135,84,0) 85%);border-radius:0 12px 12px 0}
.lg-answer span{display:block;font:400 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin-bottom:.55rem}
.lg-answer p{margin:0!important;font-size:1.06rem;line-height:1.65;color:var(--ink)}
.lg-prose h3{font-family:var(--display);font-size:1.12rem;letter-spacing:-.02em;margin:1.8rem 0 .5rem;color:var(--ink)}
.lg-prose .lg-ul,.lg-prose .lg-ol{margin:.6rem 0 1.3rem;padding-left:1.25rem}
.lg-prose .lg-ul li,.lg-prose .lg-ol li{margin:.4rem 0;line-height:1.7;color:var(--ink-2)}
.lg-prose .lg-ol li::marker{font-family:var(--mono);color:var(--emerald)}
.lg-callout{margin:1.4rem 0;padding:1rem 1.15rem;border-radius:12px;background:var(--surface-2);
  font-size:.96rem;line-height:1.65;color:var(--ink-2)}
.lg-agrid>*,.lg-prose{min-width:0}
.lg-prose .lg-kv-long{display:block!important;margin:1.2rem 0 1.6rem;border-top:1px solid var(--line)}
.lg-prose .lg-kv-long>div{display:grid!important;grid-template-columns:minmax(9rem,13rem) minmax(0,1fr);gap:.4rem 1.4rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);width:auto!important}
.lg-prose .lg-kv-long dt{font-family:var(--display);font-weight:700;letter-spacing:-.015em;color:var(--ink);text-align:left!important;font-size:.98rem}
.lg-prose .lg-kv-long dd{margin:0;font-weight:400!important;text-align:left!important;color:var(--ink-2);font-size:.95rem;line-height:1.65}
@media(max-width:620px){.lg-prose .lg-kv-long>div{grid-template-columns:1fr}}
.lg-tw{margin:1.3rem 0 1.6rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lg-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.9rem;line-height:1.5}
.lg-table th,.lg-table td{padding:.7rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lg-table thead th{font:400 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.lg-table tbody th{font-weight:600;color:var(--ink)}
.lg-table td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.lg-faq details{border-top:1px solid var(--line);padding:.9rem 0}
.lg-faq details:last-child{border-bottom:1px solid var(--line)}
.lg-faq summary{cursor:pointer;font-family:var(--display);font-weight:600;letter-spacing:-.015em;color:var(--ink);list-style:none}
.lg-faq summary::-webkit-details-marker{display:none}
.lg-faq details p{margin:.6rem 0 0!important;color:var(--ink-2)}
.lg-src{padding-left:1.2rem;font-size:.86rem;line-height:1.6}
.lg-src li{margin:.3rem 0;color:var(--ink-3)}
.lg-src a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;word-break:break-word}

.dgx{display:grid;gap:clamp(1.5rem,3.2vw,2.8rem);margin-top:clamp(1.1rem,2.6vw,1.9rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.dgx-i{display:flex;flex-direction:column;padding-left:clamp(1.1rem,2.2vw,1.7rem);
  border-left:1px solid var(--line)}
.dgx-i:first-child{padding-left:0;border-left:0}
@media(max-width:900px){.dgx-i{padding-left:0;border-left:0}}
.dgx-k{display:flex;align-items:center;gap:.6rem;font:400 .66rem/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.dgx-k i{display:block;width:16px;height:2px;border-radius:2px;background:var(--emerald)}
.dgx-i b{display:block;margin-top:.6rem;font-family:var(--display);font-size:1.15rem;
  font-weight:700;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.dgx-i p{margin:.4rem 0 0;font-size:.94rem;line-height:1.7;color:var(--ink-2);max-width:54ch}
.dgx-m{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;
  font:400 .64rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.dgx-m i{display:block;width:5px;height:5px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 3px rgba(26,135,84,.14)}
.dgx-c{flex:1 0 auto}
@supports(grid-template-rows:subgrid){
  .dgx{grid-template-rows:auto auto}
  .dgx-i{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  .dgx-c{flex:none}}
.dgx-f{margin:clamp(1rem,2.2vw,1.5rem) 0 0;align-self:stretch}

/* 8 · the band it closes on */
.ag-pi{position:relative;z-index:1;background:#0A0E0C;color:#F2F6F3;
  margin-top:clamp(3rem,7vw,5.5rem);padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(3rem,7vw,4.6rem)}
.ag-sw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  padding-bottom:clamp(2rem,4vw,2.8rem);margin-bottom:clamp(2rem,4vw,2.8rem);
  border-bottom:1px solid rgba(242,246,243,.14)}
@media(max-width:860px){.ag-sw{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}}
@media(max-width:480px){.ag-sw{grid-template-columns:1fr;gap:1.1rem}}
.ag-sw-i{display:block;padding:0 1.4rem;border-left:1px solid rgba(242,246,243,.14);
  text-decoration:none;color:inherit;transition:opacity .18s}
.ag-sw-i:first-child{padding-left:0;border-left:0}
@media(max-width:860px){.ag-sw-i{padding:0;border-left:0}}
a.ag-sw-i:hover{opacity:.62}
.ag-sw-c{display:block;font:400 .68rem/1 var(--mono);letter-spacing:.16em;
  color:rgba(242,246,243,.38)}
.ag-sw-i.on .ag-sw-c{color:#8FC7AC}
.ag-sw-i b{display:block;margin-top:.55rem;font-family:var(--display);font-size:.98rem;
  font-weight:700;letter-spacing:-.025em;color:#F7FAF8}
.ag-sw-i.on b{color:#8FC7AC}
.ag-sw-r{display:block;margin-top:.22rem;font-size:.82rem;line-height:1.5;
  color:rgba(242,246,243,.48)}
.ag-pi-b{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media(max-width:860px){.ag-pi-b{grid-template-columns:1fr;gap:1.6rem}}
.ag-pi-k{display:block;font:400 .7rem/1.5 var(--mono);text-transform:uppercase;
  letter-spacing:.16em;color:rgba(242,246,243,.46)}
.ag-pi-n{margin:.7rem 0 0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  line-height:1.1;font-size:clamp(1.8rem,3.2vw,2.5rem);color:#F7FAF8}
.ag-pi-l{margin:.5rem 0 0;font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.55;color:#8FC7AC}
.ag-pi-p{margin:0;font-size:1rem;line-height:1.72;color:rgba(242,246,243,.7)}
.ag-pi-a{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:1.8rem}

/* ==========================================================================
   CHECKOUT

   The buyer's three screens are the argument, so they run as a walkthrough
   that advances on its own until somebody takes hold of it. Everything
   after that is the merchant's two questions: when does the money arrive,
   and what does it cost me.
   ========================================================================== */
.cko-w{margin-top:clamp(1.4rem,3vw,2.2rem)}
.cko-t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
@media(max-width:760px){.cko-t{grid-template-columns:1fr}}
.cko-b{display:block;appearance:none;-webkit-appearance:none;background:none;border:0;
  cursor:pointer;font:inherit;color:inherit;text-align:left;
  padding:1.05rem 1.6rem 1.15rem 0;position:relative;border-top:1px solid var(--line)}
.cko-b::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--emerald)}
.cko-b.on::after{width:100%}
.cko-w:not(.manual) .cko-b.on::after{width:0;animation:ckofill 5.4s linear forwards}
@keyframes ckofill{to{width:100%}}
@media(prefers-reduced-motion:reduce){.cko-w:not(.manual) .cko-b.on::after{animation:none;width:100%}}
.cko-b .n{font:400 .7rem/1.6 var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.cko-b b{display:block;margin-top:.15rem;font-family:var(--display);
  font-size:clamp(1rem,1.5vw,1.14rem);font-weight:700;letter-spacing:-.03em;color:var(--ink-3);
  transition:color .2s}
.cko-b.on b{color:var(--ink)}
.cko-b .s{display:block;margin-top:.3rem;font-size:.9rem;line-height:1.6;color:var(--ink-3);
  transition:color .2s}
.cko-b.on .s{color:var(--ink-2)}
.cko-stage{margin-top:clamp(1.3rem,2.6vw,2rem);position:relative}
.cko-stage img{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 36px 80px -46px rgba(8,30,20,.38)}
.cko-stage img.in{animation:ckoin .4s ease both}
@keyframes ckoin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cko-stage img.in{animation:none}}

.cko-fig{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.cko-shot{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 36px 80px -46px rgba(8,30,20,.34)}
/* a desktop screen on a phone is unreadable at 350px, so let it be panned */
@media(max-width:760px){
  .cko-fig,.cko-stage{overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .cko-fig img,.cko-stage img{min-width:680px}
}
.cko-cap{margin:.9rem 0 0;font-size:.9rem;line-height:1.65;color:var(--ink-2);max-width:72ch}

.cko-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.8rem,4.5vw,4rem);margin:clamp(1.2rem,2.6vw,1.8rem) 0 0}
@media(max-width:720px){.cko-facts{grid-template-columns:1fr}}
.cko-facts>div{display:flex;gap:1.2rem;justify-content:space-between;align-items:baseline;
  padding:.85rem 0;border-top:1px solid var(--line)}
.cko-facts>div:nth-child(-n+2){border-top:0;padding-top:0}
@media(max-width:720px){.cko-facts>div:nth-child(2){border-top:1px solid var(--line);
  padding-top:.85rem}}
.cko-facts>div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
@media(max-width:720px){.cko-facts>div:nth-last-child(2){border-bottom:0}}
.cko-facts dt{font:400 .68rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);flex:0 0 auto}
.cko-facts dd{margin:0;text-align:right;font-size:.95rem;line-height:1.5;color:var(--ink);
  font-weight:600}

.cko-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  margin-top:clamp(1.2rem,2.6vw,1.8rem);border-top:1px solid var(--line);padding-top:1.3rem}
@media(max-width:900px){.cko-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem 0}}
@media(max-width:520px){.cko-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 0}}
.cko-rail>div{padding:0 1.2rem;border-left:1px solid var(--line)}
.cko-rail>div:first-child{padding-left:0;border-left:0}
@media(max-width:900px){.cko-rail>div:nth-child(3n+1){padding-left:0;border-left:0}}
@media(max-width:520px){.cko-rail>div:nth-child(odd){padding-left:0;border-left:0}
  .cko-rail>div:nth-child(3n+1){padding-left:1.2rem;border-left:1px solid var(--line)}
  .cko-rail>div:nth-child(odd){padding-left:0;border-left:0}}
.cko-rail b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.cko-rail span{display:block;margin-top:.22rem;font:400 .72rem/1.5 var(--mono);color:var(--ink-3)}


/* the hero's second column: a payment landing, in the time it really took */
.cko-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(1.4rem,3vw,2.2rem)}
@media(max-width:980px){.cko-top{grid-template-columns:1fr;gap:2.4rem;align-items:start}}
.cko-top h1{margin:0 0 1.15rem}
.cko-top .actions{margin-top:1.7rem}
.cko-live{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.5rem 0 1.4rem}
.cko-live-k{display:flex;align-items:center;gap:.55rem;font:400 .68rem/1 var(--mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.cko-live-k i{width:7px;height:7px;border-radius:50%;background:var(--emerald);flex:0 0 7px;
  animation:ckopulse 1.8s ease-in-out infinite}
@keyframes ckopulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.cko-live-k i{animation:none}}
.cko-live-o{display:flex;align-items:baseline;gap:.65rem;margin-top:1.15rem}
.cko-live-o b{font:400 .82rem/1 var(--mono);letter-spacing:.04em;color:var(--ink)}
.cko-live-o span{font-size:.86rem;color:var(--ink-3)}
.cko-live-a{margin-top:.4rem;font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.9rem,3vw,2.35rem);line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cko-live-bar{position:relative;height:3px;border-radius:3px;background:var(--line-2);
  margin-top:1.15rem;overflow:hidden}
.cko-live-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:var(--emerald)}
.cko-live-f{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:.68rem;font:400 .76rem/1.5 var(--mono);color:var(--ink-3)}
.cko-live-f #lv-t{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cko-live.done .cko-live-f #lv-t,.cko-live.done .cko-live-f #lv-s{color:var(--emerald)}
.cko-live-n{margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--line);
  font-size:.82rem;line-height:1.5;color:var(--ink-3)}
.cko-live-n b{font-weight:600;color:var(--ink-2)}


/* ==========================================================================
   VIRTUAL ACCOUNTS

   A developer page, so the code is real and copyable rather than a picture
   of code, and the failures get as much room as the happy path — which is
   the thing an integrator is actually scanning for.
   ========================================================================== */
.vac-fig{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.vac-shot{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 36px 80px -46px rgba(8,30,20,.34)}
@media(max-width:760px){
  .vac-fig{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .vac-fig img{min-width:680px}
}
.vac-cap{margin:.9rem 0 0;font-size:.9rem;line-height:1.65;color:var(--ink-2);max-width:74ch}

/* the first call */
.vac-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(1.2rem,2.6vw,1.8rem)}
@media(max-width:800px){.vac-steps{grid-template-columns:1fr;gap:1.4rem}}
.vac-steps>div>i{display:block;width:20px;height:2px;border-radius:2px;background:var(--emerald);
  margin-bottom:.8rem}
.vac-steps b{display:block;font-family:var(--display);font-size:1.04rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.vac-steps span{display:block;margin-top:.3rem;font-size:.92rem;line-height:1.62;
  color:var(--ink-2)}

.vac-code{position:relative;margin-top:clamp(1.3rem,2.8vw,2rem);background:#0A0E0C;
  border-radius:14px;padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.2rem,2.6vw,1.7rem);
  overflow-x:auto;box-shadow:0 30px 70px -44px rgba(4,16,11,.5)}
.vac-code pre{margin:0;font:400 .82rem/1.75 var(--mono);color:#D8E6DE;white-space:pre;
  tab-size:2}
.vac-code .c{color:rgba(216,230,222,.45)}
.vac-code .s{color:#8FC7AC}
.vac-code .k{color:#F2F6F3;font-weight:600}
.vac-copy{position:absolute;top:.85rem;right:.85rem;appearance:none;-webkit-appearance:none;
  background:rgba(242,246,243,.08);border:1px solid rgba(242,246,243,.16);border-radius:999px;
  color:#D8E6DE;font:400 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:.5rem .8rem;cursor:pointer;transition:background .18s,color .18s}
.vac-copy:hover{background:rgba(143,199,172,.2);color:#F2F6F3}
.vac-copy.ok{background:var(--emerald);border-color:var(--emerald);color:#fff}

/* failures and the values that cause them */
.vac-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:0 clamp(1.8rem,4.5vw,3.6rem);margin-top:clamp(1.2rem,2.6vw,1.8rem)}
@media(max-width:860px){.vac-two{grid-template-columns:1fr;gap:2.2rem}}
.vac-two>div:last-child{padding-left:clamp(1.8rem,4.5vw,3.6rem);
  border-left:1px solid var(--line)}
@media(max-width:860px){.vac-two>div:last-child{padding-left:0;border-left:0;
  padding-top:1.6rem;border-top:1px solid var(--line)}}
.vac-h{font:400 .7rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3);margin:0 0 .3rem}
.vac-err>div{padding:1.05rem 0 1.15rem;border-top:1px solid var(--line)}
.vac-err>div:last-child{border-bottom:1px solid var(--line)}
.vac-err code{font:400 .84rem/1.5 var(--mono);color:#B4472F;letter-spacing:.01em}
.vac-err p{margin:.35rem 0 0;font-size:.92rem;line-height:1.62;color:var(--ink-2)}
.vac-trig>div{padding:1.05rem 0 1.15rem;border-top:1px solid var(--line)}
.vac-trig>div:last-child{border-bottom:1px solid var(--line)}
.vac-trig b{display:block;font:400 .95rem/1.4 var(--mono);color:var(--ink);letter-spacing:.02em}
.vac-trig span{display:block;margin-top:.3rem;font-size:.9rem;line-height:1.55;color:var(--ink-2)}

/* one endpoint */
.vac-ev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem 0;
  margin-top:clamp(1.3rem,2.8vw,2rem);border-top:1px solid var(--line);padding-top:1.3rem;
  align-items:start}
@media(max-width:760px){.vac-ev{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.vac-ev{grid-template-columns:1fr;gap:1.1rem}}
.vac-ev>div{padding:0 1.4rem;border-left:1px solid var(--line)}
.vac-ev>div:nth-child(3n+1){padding-left:0;border-left:0}
@media(max-width:760px){.vac-ev>div{padding-left:1.4rem;border-left:1px solid var(--line)}
  .vac-ev>div:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:460px){.vac-ev>div{padding:0;border-left:0}}
.vac-ev b{display:block;font:400 .84rem/1.5 var(--mono);color:var(--ink);letter-spacing:.01em}
.vac-ev span{display:block;margin-top:.25rem;font-size:.86rem;line-height:1.55;color:var(--ink-2)}

/* going live */
.vac-gl{list-style:none;margin:clamp(1.2rem,2.6vw,1.8rem) 0 0;padding:0}
.vac-gl li{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:1rem;
  align-items:baseline;padding:1.05rem 0 1.15rem;border-top:1px solid var(--line)}
.vac-gl li:last-child{border-bottom:1px solid var(--line)}
@media(max-width:700px){.vac-gl li{grid-template-columns:2.2rem minmax(0,1fr);row-gap:.5rem}
  .vac-gl .vac-who{grid-column:2}}
.vac-gl .n{font:400 .72rem/1.6 var(--mono);color:var(--ink-3)}
.vac-gl b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink)}
.vac-gl p{margin:.28rem 0 0;font-size:.91rem;line-height:1.6;color:var(--ink-2)}
.vac-who{justify-self:end;font:400 .68rem/1 var(--mono);text-transform:uppercase;
  letter-spacing:.09em;padding:.42rem .7rem;border-radius:999px;white-space:nowrap}
.vac-who.you{color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line)}
.vac-who.us{color:var(--forest);background:rgba(143,199,172,.22);
  border:1px solid rgba(26,135,84,.28)}


/* ==========================================================================
   INVOICING AND PAYROLL  —  the charts

   Two colours, both validated against this surface for colour-vision
   separation (emerald vs gold, normal-vision deltaE 19.8, CVD 8.1) and never
   carrying meaning on their own: every segment is directly labelled, a
   legend names each one, and the numbers are one click away as a table.
   ========================================================================== */
.srow{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  border-top:1px solid var(--line);padding-top:1.35rem;margin-top:clamp(1.2rem,2.6vw,1.8rem)}
@media(max-width:860px){.srow{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem 0}}
@media(max-width:480px){.srow{grid-template-columns:1fr;gap:1.1rem}}
.srow>div{padding:0 1.5rem;border-left:1px solid var(--line)}
.srow>div:first-child{padding-left:0;border-left:0}
@media(max-width:860px){.srow>div:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:480px){.srow>div{padding:0;border-left:0}}
.srow b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.2vw,1.72rem);line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums}
.srow span{display:block;margin-top:.3rem;font-size:.86rem;line-height:1.5;color:var(--ink-2)}

/* legend — identity is never colour alone */
.vlg{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin:0 0 1.3rem;
  font-size:.86rem;color:var(--ink-2)}
.vlg span{display:inline-flex;align-items:center;gap:.5rem}
.vlg i{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.vlg b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* when the money lands — stacked columns */
.cash{margin-top:clamp(1rem,2.2vw,1.5rem)}
.cash-plot{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.5rem,1.4vw,1rem);align-items:end}
@media(max-width:640px){.cash-plot{grid-template-columns:repeat(3,minmax(0,1fr));
  row-gap:1.6rem}}
.cash-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.cash-v{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:1.02rem;
  color:var(--ink);margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.cash-v.z{color:var(--ink-3);font-family:var(--mono);font-size:.8rem;font-weight:400}
.cash-bar{height:var(--h,0px);min-height:3px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:2px}
.cash-bar i{display:block;border-radius:4px 4px 0 0}
.cash-bar i+i{border-radius:0 0 4px 4px}
.cash-bar i.due{background:#C08A2E}
.cash-bar i.not{background:#1A8754}
.cash-bar.empty{height:3px;background:var(--line-2);border-radius:2px}
.cash-x{margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--line);
  font-size:.86rem;line-height:1.4;color:var(--ink)}
.cash-n{margin-top:.2rem;font:400 .72rem/1.5 var(--mono);color:var(--ink-3)}
.cash-tip{position:absolute;left:50%;bottom:calc(100% - 1.6rem);transform:translate(-50%,-6px);
  background:#0A0E0C;color:#F2F6F3;border-radius:8px;padding:.5rem .7rem;white-space:nowrap;
  font:400 .74rem/1.45 var(--mono);opacity:0;pointer-events:none;transition:opacity .16s;
  z-index:3;box-shadow:0 12px 30px -16px rgba(4,16,11,.6)}
.cash-col:hover .cash-tip,.cash-col:focus-within .cash-tip{opacity:1}
/* on a phone every value is already a direct label, so the tooltip only
   risks pushing the page sideways */
@media(max-width:700px){.cash-tip{display:none}}

/* how old it is — one stacked bar, three states */
.age{margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:clamp(1.3rem,2.8vw,2rem);
  border-top:1px solid var(--line)}
.age-bar{display:flex;gap:2px;height:12px;margin:1.1rem 0 1rem}
.age-bar i{display:block;border-radius:6px}
.age-bar i:first-child{border-radius:6px 2px 2px 6px}
.age-bar i:last-child{border-radius:2px 6px 6px 2px}

/* a plain numbers table, always available */
.vtab{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.88rem}
.vtab th,.vtab td{text-align:right;padding:.6rem .5rem;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums;color:var(--ink)}
.vtab th:first-child,.vtab td:first-child{text-align:left;color:var(--ink-2)}
.vtab th{font:400 .68rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);border-top:0}
.vtog{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;cursor:pointer;
  margin-top:1.1rem;font:400 .8rem/1.5 var(--body);color:var(--ink-2);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px}
.vtog:hover{color:var(--ink)}

/* the payroll approval rail */
.rail{margin-top:clamp(1.3rem,2.8vw,2rem)}
.rail-t{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.6rem,1.6vw,1.2rem)}
@media(max-width:900px){.rail-t{grid-template-columns:1fr;gap:0}}
.rail-s{position:relative;padding-top:2.1rem}
.rail-s::before{content:"";position:absolute;top:7px;left:0;right:0;height:2px;
  background:var(--line-2)}
.rail-s.on::before,.rail-s.done::before{background:var(--emerald)}
.rail-s:last-child::before{right:50%}
.rail-s i{position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-2);z-index:1}
.rail-s.done i{background:var(--emerald);box-shadow:inset 0 0 0 2px var(--emerald)}
.rail-s.on i{box-shadow:inset 0 0 0 3px var(--emerald)}
.rail-s b{display:block;font-family:var(--display);font-size:1rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink-2)}
.rail-s.done b,.rail-s.on b{color:var(--ink)}
.rail-s span{display:block;margin-top:.25rem;font-size:.85rem;line-height:1.5;color:var(--ink-3)}
.rail-s.on span{color:var(--emerald)}
@media(max-width:900px){
  .rail-s{padding:0 0 1.3rem 1.9rem}
  .rail-s::before{top:6px;bottom:-6px;left:7px;right:auto;width:2px;height:auto}
  .rail-s:last-child::before{display:none}
  .rail-s i{top:2px}
}

/* a plain data table (countries, boxes) */
.ptab{width:100%;border-collapse:collapse;margin-top:clamp(1.2rem,2.6vw,1.8rem);
  font-size:.92rem}
.ptab th{font:400 .68rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);text-align:right;padding:0 .6rem .7rem;white-space:nowrap}
.ptab th:first-child{text-align:left;padding-left:0}
.ptab th:last-child{padding-right:0}
.ptab td{text-align:right;padding:.95rem .6rem;border-top:1px solid var(--line);
  color:var(--ink);font-variant-numeric:tabular-nums;vertical-align:baseline}
.ptab td:first-child{text-align:left;padding-left:0}
.ptab td:last-child{padding-right:0}
.ptab tbody tr:last-child td{border-bottom:1px solid var(--line)}
.ptab .nm{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.ptab .sub{display:block;margin-top:.2rem;font:400 .74rem/1.4 var(--mono);color:var(--ink-3)}
.ptab .mono{font-family:var(--mono);font-size:.86rem}
.pstate{display:inline-flex;align-items:center;gap:.45rem;font:400 .72rem/1 var(--mono);
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.pstate::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.pstate.ok{color:var(--forest)}.pstate.ok::before{background:var(--emerald)}
.pstate.short{color:#9E3B26}.pstate.short::before{background:#B4472F}
@media(max-width:760px){
  .ptab,.ptab tbody,.ptab tr,.ptab td{display:block;width:100%}
  .ptab thead{display:none}
  .ptab tr{border-top:1px solid var(--line);padding:1rem 0}
  .ptab tbody tr:last-child{border-bottom:1px solid var(--line)}
  .ptab td{border-top:0;padding:.18rem 0;text-align:left;display:flex;
    justify-content:space-between;gap:1rem}
  .ptab td::before{content:attr(data-l);font:400 .68rem/1.6 var(--mono);text-transform:uppercase;
    letter-spacing:.08em;color:var(--ink-3)}
  .ptab td:first-child{padding-bottom:.5rem}
  .ptab td:first-child::before{display:none}
}


/* The no-JavaScript index. Most model crawlers do not run scripts, so without
   this they see the home page and conclude the site has one page. */
.nojs{max-width:var(--max);margin:0 auto;padding:3rem 1.5rem;font-family:var(--body)}
.nojs h2{font-family:var(--display);font-size:1.6rem;letter-spacing:-.03em;margin:0 0 .8rem}
.nojs h3{font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em;margin:2rem 0 .6rem}
.nojs p{max-width:72ch;line-height:1.7;color:var(--ink-2);margin:0}
.nojs ul{margin:0;padding-left:1.1rem}
.nojs li{margin:.6rem 0;line-height:1.6;color:var(--ink-2)}
.nojs a{color:var(--ink)}


/* ── outside Nigeria the hero leads with the agents, not the wallet ── */
.hagents{display:none;flex-direction:column;gap:.6rem;margin-top:1.6rem;
  padding-top:1.3rem;border-top:1px solid var(--line)}
.hagents-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.hagents-r{display:flex;flex-wrap:wrap;gap:.45rem}
.hagents-r a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  padding:.4rem .75rem .4rem .55rem;border-radius:999px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:.82rem;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;
  transition:background .15s,box-shadow .15s,color .15s,transform .15s}
.hagents-r a:hover{background:#fff;color:var(--forest);transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px var(--emerald),0 6px 16px -10px rgba(8,30,20,.5)}
.hagents-r a svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--emerald);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hagents-f{font-size:.8rem;color:var(--ink-3);line-height:1.5;max-width:52ch}
html[data-region="uk"] .hagents.intl-only,html[data-region="us"] .hagents.intl-only,
html[data-region="ca"] .hagents.intl-only,html[data-region="row"] .hagents.intl-only{display:flex}
html[data-region="uk"] .hero-kicker.intl-only,html[data-region="us"] .hero-kicker.intl-only,
html[data-region="ca"] .hero-kicker.intl-only,html[data-region="row"] .hero-kicker.intl-only{display:flex}
.hero-kicker.intl-only{display:none}
@media(max-width:720px){.hagents-r a{font-size:.78rem;padding:.35rem .65rem .35rem .5rem}}

/* ── outside Nigeria the hero keeps the app, with room to breathe ── */
html[data-region="uk"] .hero-grid,html[data-region="us"] .hero-grid,
html[data-region="ca"] .hero-grid,html[data-region="row"] .hero-grid{align-items:center}
html[data-region="uk"] .hero-copy,html[data-region="us"] .hero-copy,
html[data-region="ca"] .hero-copy,html[data-region="row"] .hero-copy{transform:none}
html[data-region="uk"] .hero2 h1,html[data-region="us"] .hero2 h1,
html[data-region="ca"] .hero2 h1,html[data-region="row"] .hero2 h1{max-width:100%}
html[data-region="uk"] .hero2,html[data-region="us"] .hero2,
html[data-region="ca"] .hero2,html[data-region="row"] .hero2{
  padding-top:clamp(3.5rem,5vw,5.5rem);padding-bottom:clamp(3rem,5vw,5.5rem)}

/* ── the five desks ── */
.hteam{display:none;flex-direction:column;gap:.75rem;margin-top:1.7rem;
  padding-top:1.35rem;border-top:1px solid var(--line)}
html[data-region="uk"] .hteam.intl-only,html[data-region="us"] .hteam.intl-only,
html[data-region="ca"] .hteam.intl-only,html[data-region="row"] .hteam.intl-only{display:flex}
.hteam-r{display:flex;flex-wrap:wrap;gap:.4rem}
.hteam-b{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:0;
  padding:.44rem .8rem .44rem .58rem;border-radius:999px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-2);font:600 .82rem/1 var(--body);
  color:var(--ink-3);letter-spacing:-.005em;
  transition:background .22s,box-shadow .22s,color .22s,transform .22s}
.hteam-b svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.65;transition:opacity .22s}
.hteam-b:hover{color:var(--forest);box-shadow:inset 0 0 0 1px var(--sage)}
.hteam-b.on{background:var(--forest);color:#fff;box-shadow:none;transform:translateY(-1px)}
.hteam-b.on svg{opacity:1}

/* ── one rail: five desks, the live one says its name ── */
.hteam{gap:0;margin-top:1.8rem;padding-top:1.4rem}
.hteam-r{flex-wrap:nowrap;gap:.4rem;width:100%;align-items:center}
.hteam-b{flex:0 0 auto;gap:0;white-space:nowrap;
  padding:.5rem .55rem;border-radius:999px;font-size:.84rem;
  transition:background .3s,box-shadow .3s,color .3s,padding .34s cubic-bezier(.22,1,.36,1)}
.hteam-b svg{width:16px;height:16px}
.hteam-b span{display:inline-block;max-width:0;opacity:0;overflow:hidden;margin-left:0;
  transition:max-width .36s cubic-bezier(.22,1,.36,1),opacity .26s ease,margin-left .36s cubic-bezier(.22,1,.36,1)}
.hteam-b.on,.hteam-b:hover,.hteam-b:focus-visible{padding-right:.95rem}
.hteam-b.on span,.hteam-b:hover span,.hteam-b:focus-visible span{max-width:13rem;opacity:1;margin-left:.45rem}
.hteam-b:not(.on):hover{background:var(--acc-soft);color:var(--forest);box-shadow:inset 0 0 0 1px var(--sage)}
@media(prefers-reduced-motion:reduce){
  .hteam-b,.hteam-b span{transition:none}
  .hteam-b span{max-width:13rem;opacity:1;margin-left:.45rem}
}

/* the headline and the workspace start on the same line */
html[data-region="uk"] .hero-grid,html[data-region="us"] .hero-grid,
html[data-region="ca"] .hero-grid,html[data-region="row"] .hero-grid{align-items:center}
html[data-region="uk"] .hero-copy,html[data-region="us"] .hero-copy,
html[data-region="ca"] .hero-copy,html[data-region="row"] .hero-copy{transform:none}
html[data-region="uk"] .hero-stage,html[data-region="us"] .hero-stage,
html[data-region="ca"] .hero-stage,html[data-region="row"] .hero-stage{margin-top:0;align-self:center}
@media(max-width:940px){
  html[data-region="uk"] .hero-stage,html[data-region="us"] .hero-stage,
  html[data-region="ca"] .hero-stage,html[data-region="row"] .hero-stage{margin-top:0}
  .hteam-r{flex-wrap:wrap}
}

/* the app overhangs the workspace, so the hero needs room under it */
html[data-region="uk"] .hero2,html[data-region="us"] .hero2,
html[data-region="ca"] .hero2,html[data-region="row"] .hero2{padding-bottom:clamp(7rem,11vw,9.5rem)}

/* the regional disclosure now sits with the rest of the legal matter */
.fl-region{display:none;margin:0 0 1rem;padding:.75rem .9rem;border-radius:10px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);
  font-size:.78rem;line-height:1.6;color:var(--ink-2);max-width:none}
html[data-region="uk"] .fl-region.intl-only,html[data-region="us"] .fl-region.intl-only,
html[data-region="ca"] .fl-region.intl-only,html[data-region="row"] .fl-region.intl-only{display:block}
.fl-region .rnflag{margin-right:.4rem}

/* the second hero action is a peer, not a text link */
.hero-dl{background:transparent!important;color:var(--forest)!important;
  box-shadow:inset 0 0 0 1.5px var(--sage)!important;transition:background .16s,box-shadow .16s,transform .16s}
.hero-dl:hover{background:var(--acc-soft)!important;
  box-shadow:inset 0 0 0 1.5px var(--emerald)!important;transform:translateY(-1px)}
html[data-region="uk"] .hero .actions.intl-only,html[data-region="us"] .hero .actions.intl-only,
html[data-region="ca"] .hero .actions.intl-only,html[data-region="row"] .hero .actions.intl-only{
  flex-wrap:wrap;gap:.6rem .7rem;align-items:center}

/* the Nigerian regulator marks belong to the Nigerian market only — outside it,
   the proof card keeps the licensed partner and drops CBN and NDIC */
html[data-region="uk"] .pf-reg img[alt="CBN"],html[data-region="us"] .pf-reg img[alt="CBN"],
html[data-region="ca"] .pf-reg img[alt="CBN"],html[data-region="row"] .pf-reg img[alt="CBN"],
html[data-region="uk"] .pf-reg img[alt="NDIC"],html[data-region="us"] .pf-reg img[alt="NDIC"],
html[data-region="ca"] .pf-reg img[alt="NDIC"],html[data-region="row"] .pf-reg img[alt="NDIC"],
html[data-region="uk"] .pf-reg img[alt="NIBSS"],html[data-region="us"] .pf-reg img[alt="NIBSS"],
html[data-region="ca"] .pf-reg img[alt="NIBSS"],html[data-region="row"] .pf-reg img[alt="NIBSS"]{display:none}

/* ── the register shows the screen it is describing ── */
.agreg-b.has-shot{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.2rem,2.4vw,2.6rem);align-items:start}
.agreg-t{min-width:0}
.agreg-shot{margin:0;min-width:0;border-radius:12px;overflow:hidden;background:var(--surface);
  box-shadow:0 1px 2px rgba(8,40,26,.05),0 26px 56px -30px rgba(11,81,55,.42),0 0 0 1px rgba(11,81,55,.09)}
.agreg-shot-c{display:flex;align-items:center;gap:5px;padding:7px 11px;background:var(--surface-2);
  border-bottom:1px solid rgba(11,81,55,.09)}
.agreg-shot-c i{width:7px;height:7px;border-radius:50%;background:rgba(11,81,55,.17);flex:none}
.agreg-shot-c em{margin-left:7px;font-style:normal;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.agreg-shot img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .agreg-b.has-shot{grid-template-columns:minmax(0,1fr)}
  .agreg-shot{order:-1;margin-bottom:.4rem}
}

/* ── the agent band belongs to the same daylight as the home page ── */
.ag-hero{background:
  radial-gradient(120% 80% at 82% 0%, rgba(143,199,172,.22) 0%, rgba(143,199,172,0) 58%),
  linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 62%,var(--bg) 100%)!important;
  color:var(--ink)!important;
  padding:clamp(2.6rem,5vw,3.8rem) 0 var(--agover)!important;
  border-bottom:0}
.ag-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(11,81,55,.085) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 72%)}
.ag-hero > .wrap{position:relative;z-index:1}

.ag-crumb{color:var(--ink-3)}
.ag-crumb a{color:var(--ink-3)}
.ag-crumb a:hover{color:var(--forest)}
.ag-hero h1{color:var(--ink)!important;max-width:24ch;
  font-size:clamp(2rem,3.9vw,3.15rem);margin-top:clamp(1.3rem,2.6vw,2rem)}
.ag-lede{color:var(--ink-2)!important;margin-top:0}
.ag-link{color:var(--forest)!important}
.ag-link:hover{color:var(--emerald)!important}

/* the lede and the certificate read as one row under the headline */
.ag-top{grid-template-columns:minmax(0,1fr) minmax(0,16.5rem)!important;
  gap:clamp(1.6rem,3.4vw,3rem)!important;align-items:start!important;
  margin-top:clamp(1.1rem,2.2vw,1.6rem)!important}
.ag-cert{text-align:left!important;min-width:0!important;padding:.1rem 0 0 clamp(1.1rem,2vw,1.7rem)!important;
  border-left:1px solid var(--line-2)}
.ag-line{justify-content:flex-start!important;color:var(--emerald)!important;
  border-bottom:1px solid var(--line)!important}
.ag-line i{background:var(--emerald)!important}
.ag-cert .st{color:var(--ink)!important}
.ag-cert .gt{color:var(--ink-3)!important}
.ag-pips{justify-content:flex-start!important}
.ag-pips i{background:var(--line-2)!important}
.ag-hero.in .ag-pips i.on{background:var(--emerald)!important}
.ag-cert-pi{color:var(--forest)!important}
.ag-cert-pi:hover{color:var(--emerald)!important}

.ag-figs{border-top:1px solid var(--line)!important;
  margin-top:clamp(2rem,4vw,2.8rem)!important;padding-top:1.5rem!important}
.ag-figs>div{border-left:1px solid var(--line)!important}
.ag-figs>div:first-child{border-left:0!important}
.ag-figs b{color:var(--ink)!important}
.ag-figs span{color:var(--ink-3)!important}

/* the screen below it no longer has a dark band to sit against */
.ag-shot .dshot.dark .dshot-c{background:var(--surface-2);border-bottom:1px solid rgba(11,81,55,.1)}
.ag-shot .dshot.dark .dshot-c i{background:rgba(11,81,55,.17)}
.ag-shot .dshot.dark .dshot-c em{color:var(--ink-3)}
.ag-shot .dshot.dark{background:var(--surface);
  box-shadow:0 2px 4px rgba(8,40,26,.06),0 44px 96px -40px rgba(11,81,55,.42),0 0 0 1px rgba(11,81,55,.1)}
@media(max-width:900px){
  .ag-top{grid-template-columns:minmax(0,1fr)!important}
  .ag-cert{border-left:0;padding-left:0!important;padding-top:1.3rem!important;
    border-top:1px solid var(--line)}
  .ag-hero h1{max-width:none}
}

/* ── the orb is the mark every agent wears ── */
.ag-id{display:flex;align-items:center;gap:clamp(1.05rem,2.1vw,1.8rem);
  margin-top:clamp(1.3rem,2.6vw,2rem)}
.ag-id h1{margin-top:0!important}
.ag-orb{position:relative;flex:none;
  width:clamp(58px,6.4vw,88px);height:clamp(58px,6.4vw,88px);
  border-radius:42% 58% 63% 37%/47% 41% 59% 53%;
  background:radial-gradient(circle at 38% 32%,#CDE9DA,#1A8754 52%,#0B5137 96%);
  box-shadow:0 14px 34px -10px rgba(11,81,55,.5),
    inset 0 3px 12px rgba(255,255,255,.45),inset 0 -10px 18px rgba(8,48,31,.4);
  animation:orbJelly 6.5s ease-in-out infinite,orbBeat 1.6s ease-in-out infinite}
.ag-orb::before{content:"";position:absolute;top:15%;left:19%;width:30%;height:22%;
  border-radius:60% 50% 55% 45%;background:rgba(255,255,255,.55);filter:blur(1.5px)}
.ag-orb::after{content:"";position:absolute;inset:-34%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(26,135,84,.26) 0%,rgba(26,135,84,0) 68%);
  animation:agOrbGlow 1.6s ease-in-out infinite}
@keyframes agOrbGlow{0%,36%,100%{opacity:.55;transform:scale(1)}
  8%{opacity:1;transform:scale(1.13)}}
@media(prefers-reduced-motion:reduce){
  .ag-orb,.ag-orb::after{animation:none}
}
@media(max-width:620px){.ag-id{gap:.9rem}}

/* ── the name carries the band; the mandate sits under it ── */
.ag-id{align-items:center}
.ag-idt{min-width:0}
.ag-hero h1{max-width:none!important;margin:0!important;
  font-size:clamp(2.3rem,4.6vw,3.6rem)!important;letter-spacing:-.04em;line-height:1.02}
.ag-strap{margin:.55rem 0 0;max-width:46ch;
  font-size:clamp(.95rem,1.18vw,1.08rem);line-height:1.55;
  color:var(--ink-2);letter-spacing:-.008em}

/* the orb wears the Pryme mark, as it does in the app */
.ag-orb{display:grid;place-items:center;
  width:clamp(68px,7.4vw,104px);height:clamp(68px,7.4vw,104px);
  background:radial-gradient(circle at 36% 30%,#A9D8C2 0%,#2E9C68 34%,#13build 0%,#0B5137 78%,#07351F 100%)}
.ag-orb{background:radial-gradient(circle at 36% 30%,#A9D8C2 0%,#2E9C68 36%,#0B5137 78%,#06301D 100%)}
.ag-orb-m{width:48%;height:48%;position:relative;z-index:1;
  filter:drop-shadow(0 1px 2px rgba(3,24,15,.45))}
.ag-orb::before{top:12%;left:16%;width:26%;height:19%;background:rgba(255,255,255,.5);filter:blur(2px)}
@media(max-width:620px){
  .ag-id{align-items:flex-start}
  .ag-strap{max-width:none}
}

/* ── the agent has a pulse before you scroll ── */
.ag-top{grid-template-columns:minmax(0,1fr) minmax(0,21rem)!important;
  align-items:start!important}
.ag-right{display:flex;flex-direction:column;gap:1.15rem;min-width:0}
.ag-live{border-radius:13px;overflow:hidden;background:var(--paper);
  box-shadow:0 1px 2px rgba(8,40,26,.05),0 28px 62px -34px rgba(11,81,55,.45),
    0 0 0 1px rgba(11,81,55,.09)}
.ag-live-c{display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--surface-2);
  border-bottom:1px solid rgba(11,81,55,.09)}
.ag-live-c > i{width:7px;height:7px;border-radius:50%;background:rgba(11,81,55,.17);flex:none}
.ag-live-c em{margin-left:7px;font-style:normal;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ag-live-d{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--emerald);
  flex:none;animation:agLiveBeat 1.6s ease-in-out infinite}
@keyframes agLiveBeat{0%,36%,100%{opacity:1;transform:scale(1)}8%{opacity:.45;transform:scale(.68)}}
.ag-live-r{list-style:none;margin:0;padding:.25rem .95rem .85rem}
.ag-live-i{display:flex;flex-direction:column;gap:.1rem;padding:.62rem 0;
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(7px);
  transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
.ag-live-i:last-child{border-bottom:0}
.ag-live-i.in{opacity:1;transform:none}
.ag-live-k{font-family:var(--mono);font-size:.55rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--emerald)}
.ag-live-k.no{color:var(--ink-3)}
.ag-live-k.ask{color:#B4772A}
.ag-live-t{font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.ag-cert{padding-left:0!important;border-left:0!important;padding-top:0!important}
@media(max-width:900px){
  .ag-top{grid-template-columns:minmax(0,1fr)!important}
  .ag-right{margin-top:.4rem}
}

/* ── the mandate holds one line, and the card meets it ── */
.ag-strap{max-width:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(.82rem,1vw,.95rem)!important;margin-top:.5rem!important;color:var(--ink-2)}
.ag-left{min-width:0}
.ag-top{align-items:start!important}
.ag-right{margin-top:calc(clamp(2.3rem,4.6vw,3.6rem) * 1.02 + .5rem)}

/* ── the right-now card ── */
.ag-live{border-radius:15px;background:var(--paper);
  box-shadow:0 1px 2px rgba(8,40,26,.05),0 2px 6px rgba(8,40,26,.04),
    0 34px 70px -34px rgba(11,81,55,.5),0 0 0 1px rgba(11,81,55,.1);
  transition:box-shadow .25s,transform .25s}
.ag-live:hover{transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(8,40,26,.05),0 40px 84px -34px rgba(11,81,55,.56),
    0 0 0 1px rgba(11,81,55,.16)}
.ag-live-c{padding:9px 13px;
  background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%)}
.ag-live-c em{font-size:.55rem;letter-spacing:.1em}
.ag-live-d{width:7px;height:7px;box-shadow:0 0 0 3px var(--acc-soft)}
.ag-live-r{padding:.35rem .9rem .75rem}
.ag-live-i{position:relative;display:grid!important;grid-template-columns:2px minmax(0,1fr);
  gap:0 .72rem;align-items:stretch;padding:.68rem 0 .68rem .1rem;
  opacity:.55;transform:none!important;
  transition:opacity .4s cubic-bezier(.22,1,.36,1),background .4s}
.ag-live-i.on{opacity:1}
.ag-live-b{grid-row:1;border-radius:2px;background:var(--line-2);transition:background .4s}
.ag-live-i.on .ag-live-b{background:var(--emerald)}
.ag-live-x{display:flex;flex-direction:column;gap:.14rem;min-width:0}
.ag-live-k{font-size:.54rem;letter-spacing:.14em;color:var(--ink-3)}
.ag-live-i.on .ag-live-k{color:var(--emerald)}
.ag-live-i.on .ag-live-k.ask{color:#B4772A}
.ag-live-i.on .ag-live-k.no{color:var(--ink-2)}
.ag-live-t{font-size:.815rem;line-height:1.45;color:var(--ink-3)}
.ag-live-i.on .ag-live-t{color:var(--ink)}
@media(max-width:900px){
  .ag-right{margin-top:.2rem}
  .ag-strap{white-space:normal}
}
@media(max-width:560px){.ag-strap{white-space:normal}}

/* ── the band lets the site's own water run under it ── */
.ag-hero{background:radial-gradient(120% 78% at 84% -6%,
    rgba(143,199,172,.26) 0%, rgba(143,199,172,0) 56%)!important;
  z-index:0!important}
.ag-hero::after{opacity:.42}

/* the name heads the band; strap and card start on the same line */
.ag-id{align-items:center;margin-top:clamp(1.3rem,2.6vw,2rem)}
.ag-top{margin-top:clamp(1.3rem,2.4vw,1.9rem)!important;align-items:start!important}
.ag-right{margin-top:clamp(-5.3rem,-4.3vw,-2.9rem)!important}
.ag-strap{margin:0 0 clamp(1rem,1.9vw,1.5rem)!important;
  font-size:clamp(.86rem,1.06vw,1.02rem)!important;color:var(--ink-2)}
.ag-lede{margin-top:0!important}
@media(max-width:900px){
  .ag-strap{white-space:normal;margin-bottom:1rem!important}
}

/* ── the workspace section, running ── */
.agdash{margin:0;border-radius:16px;overflow:hidden;background:var(--surface);
  box-shadow:0 2px 4px rgba(8,40,26,.06),0 48px 104px -42px rgba(11,81,55,.46),
    0 0 0 1px rgba(11,81,55,.1)}
.agdash-c{display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);
  border-bottom:1px solid rgba(11,81,55,.09)}
.agdash-c > i{width:8px;height:8px;border-radius:50%;background:rgba(11,81,55,.17);flex:none}
.agdash-c em{margin-left:8px;font-style:normal;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.07em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agdash-live{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;flex:none;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;color:var(--emerald)}
.agdash-live b{width:6px;height:6px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 3px var(--acc-soft);animation:agLiveBeat 1.6s ease-in-out infinite}

.agdash-t{display:flex;gap:0;padding:0 .55rem;background:var(--surface);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.agdash-t::-webkit-scrollbar{display:none}
.agdash-b{position:relative;flex:0 0 auto;border:0;background:none;cursor:pointer;
  padding:.72rem .95rem .78rem;font:600 .82rem/1 var(--body);color:var(--ink-3);
  letter-spacing:-.005em;white-space:nowrap;transition:color .2s}
.agdash-b:hover{color:var(--forest)}
.agdash-b.on{color:var(--forest)}
.agdash-p{position:absolute;left:.55rem;right:.55rem;bottom:0;height:2px;border-radius:2px;
  background:transparent;overflow:hidden}
.agdash-b.on .agdash-p{background:var(--line-2)}
.agdash-p.run::after{content:"";position:absolute;inset:0;transform-origin:left center;
  background:var(--emerald);animation:agdashRun 5.2s linear forwards}
.agdash.pinned .agdash-b.on .agdash-p{background:var(--emerald)}
@keyframes agdashRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.agdash-s{position:relative;background:var(--paper)}
.agdash-i{display:block;width:100%;height:auto;opacity:0;position:absolute;inset:0;
  transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.agdash-i.on{opacity:1;position:relative;inset:auto}
@media(prefers-reduced-motion:reduce){
  .agdash-live b,.agdash-p.run::after{animation:none}
  .agdash-i{transition:none}
}
@media(max-width:620px){.agdash-b{font-size:.76rem;padding:.6rem .7rem .68rem}}

/* ── the three points that carry the band ── */
.agpts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.7rem,1.3vw,1.1rem);
  margin-top:clamp(2.2rem,4vw,3rem);padding-top:clamp(1.6rem,2.8vw,2.2rem);
  border-top:1px solid var(--line)}
.agpt{position:relative;display:flex;flex-direction:column;gap:.5rem;min-width:0;
  padding:1.15rem 1.25rem 1.3rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 100%);
  box-shadow:inset 0 0 0 1px rgba(11,81,55,.1),0 1px 2px rgba(8,40,26,.04);
  transition:box-shadow .22s,transform .22s,background .22s}
.agpt:hover{transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 100%);
  box-shadow:inset 0 0 0 1px rgba(11,81,55,.2),0 16px 36px -20px rgba(11,81,55,.4)}
.agpt-r{width:26px;height:3px;border-radius:3px;background:var(--emerald)}
.agpt b{font-family:var(--display);font-weight:700;letter-spacing:-.024em;
  font-size:clamp(1.02rem,1.42vw,1.22rem);color:var(--ink);line-height:1.25;
  text-wrap:balance}
.agpt p{margin:0;font-size:.875rem;line-height:1.6;color:var(--ink-2);max-width:40ch}
@media(max-width:900px){.agpts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.agpts{grid-template-columns:minmax(0,1fr)}}