/* Recov public site — marketing pages and policy documents.
   Light, high-contrast, print-friendly. Policy pages are read end to end, printed, and sent to
   regulators; legibility outranks decoration. Brand accents from the product's design tokens. */
:root{
  --ink:#0F1E27;--body:#2C4049;--dim:#5E747F;--line:#DDE7E9;--faint:#EEF4F4;
  --bg:#FFFFFF;--panel:#F4F8F8;--dawn:#A85C15;--blade:#1B7168;--r:10px;
  --max:1120px;--doc:740px;--header-h:65px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font-family:'Karla',system-ui,-apple-system,sans-serif;
  line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.doc{max-width:var(--doc);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif;color:var(--ink);line-height:1.1}
h1{font-weight:700;font-size:46px;letter-spacing:-.01em}
h2{font-weight:700;font-size:30px;margin:44px 0 12px}
h3{font-weight:600;font-size:21px;margin:26px 0 7px;line-height:1.25}
p{margin:0 0 14px}
a{color:var(--blade)}
strong,b{color:var(--ink)}
ul,ol{margin:0 0 15px 22px}
li{margin-bottom:8px}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dawn)}
.lede{font-size:19.5px;color:var(--ink);line-height:1.5}

/* header / footer */
/* ONE header on every page, rendered by scripts/site-header.mjs (ADR-602); this file owns how it looks.
   Two tiers. The rules before the @supports block are what a browser WITHOUT popover support gets
   (Safari < 17, Chrome < 114, Firefox < 125). There a [popover] element is ordinary content, with no UA
   display:none, so nothing popover-related may be positioned over the page: the header scrolls with the
   page, the brand and Sign in share a row, and the whole navigation is a plain list under them with the
   groups expanded under small headings. (Emulated in Chromium, not run in a real old browser.) Everything
   that needs popovers is inside `@supports selector(:popover-open)`: the sticky one-row header, the
   slide-in menu and the wide-screen group panels. */
header.site{border-bottom:1px solid var(--line);background:rgba(255,255,255,.94)}
/* No padding here: .bar shares an element with .wrap, whose 24px side gutter is all it wants. */
header.site .bar{display:flex;flex-wrap:wrap;align-items:center}
.brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:25px;color:var(--ink);
  text-decoration:none;letter-spacing:.01em}
/* Sign in, Menu and Close are the three buttons; the app sign-in is the only link that leaves the site. */
.signin,.menu-toggle,.menu-close{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:8px;text-decoration:none;cursor:pointer;white-space:nowrap}
.signin:hover,.menu-close:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.menu-toggle{margin-left:8px;color:#fff;background:var(--ink);border-color:var(--ink)}
.menu-toggle:hover{background:var(--body);border-color:var(--body)}
/* These control popovers, so without popover support they do nothing and are not shown. The nav's own
   Sign in is the wide-screen one; below that the bar's is shown. */
.menu-toggle,.menu-close,.menu-scrim,.group-toggle,.menu-signin{display:none}
/* .menu and .group-panel are popovers, which arrive with UA defaults (a centred box, a border, padding, a
   Canvas background); reset the ones every layout shares, once. */
.menu,.group-panel{margin:0;padding:0;border:0;background:transparent;overflow:visible;color:inherit}
.menu{flex-basis:100%}
/* The navigation as a plain list: the fallback, and the contents of the phone menu. */
.menu-list{list-style:none;margin:0}
.menu-list li{margin:0}
.site-nav a:not(.signin){display:flex;align-items:center;min-height:44px;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:19px;color:var(--ink);text-decoration:none}
.group-title{display:block;margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dawn)}
.group-panel ul{list-style:none;margin:2px 0 10px;padding:0 0 0 14px;border-left:2px solid var(--line)}
.site-nav .group-panel a:not(.signin){font-size:17.5px;font-weight:500;color:var(--body)}
.site-nav a[aria-current]:not(.signin){color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:6px;text-decoration-color:var(--dawn)}

@supports selector(:popover-open){
  /* One sticky row at every width. Its height is the custom property --header-h, a number rather than
     "whatever the content makes it", because the wide-screen group panels sit at its bottom edge and the two
     must agree. */
  header.site{position:sticky;top:0;height:var(--header-h);backdrop-filter:blur(8px);z-index:10}
  header.site .bar{flex-wrap:nowrap;height:100%}
  .menu-toggle{display:inline-flex}

  /* Below 900px: Menu opens the nav as a panel sliding over the page from the right (ADR-419's drawer).
     This is the NEGATION of the desktop query below, not a second inequality. Widths can be fractional
     (browser zoom), and two inequalities that must meet exactly (`max-width:899.98px` beside `min-width:900px`)
     leave a gap in an engine that compares exactly. Chromium 141 compares with a tolerance (measured:
     `(max-width:899.99px)` matches a 900px viewport), so there they overlap instead. `not` reverses the WHOLE
     media query, so a width gets this layout exactly when `(min-width:900px)` is false for it. */
  @media not all and (min-width:900px){
    /* .menu is the popover and fills the viewport (in the top layer, so the sticky header's backdrop-filter,
       which would otherwise be its containing block, does not apply). It holds the drawer and the scrim. */
    .menu{position:fixed;inset:0;width:auto;height:auto}
    /* The dimming is a real button inside the popover, not ::backdrop: measured, a tap on the backdrop
       closed the menu AND followed the link under it. A tap on this is inside the popover, so it only closes. */
    .menu-scrim{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
      background:rgba(15,30,39,.45);cursor:default;touch-action:none;-webkit-tap-highlight-color:transparent}
    .drawer{position:absolute;top:0;right:0;bottom:0;z-index:1;width:min(320px,86vw);padding:12px 24px 32px;
      overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-left:1px solid var(--line);
      box-shadow:-12px 0 40px rgba(15,30,39,.18)}
    .menu-close{display:flex;margin:0 0 6px auto}
    /* The group lists are popovers (for the wide-screen panels). Here they are plain lists, expanded under
       their heading: author CSS overrides the closed-popover display:none and the UA popover box. */
    .group-panel{display:block;position:static;width:auto;height:auto}
  }
  /* A phone menu opens with a short slide-in; users who ask for less motion get none. Entry only: an exit
     transition would need `display`/`overlay` transitions, and a browser that has one without the other
     would draw the closing drawer inside the header. No width condition: `not all and (min-width:900px)
     and (prefers-reduced-motion:no-preference)` would negate BOTH conditions, and from 900px `.drawer` is
     display:contents and `.menu-scrim` is display:none, so these rules have nothing to act on there. */
  @media (prefers-reduced-motion:no-preference){
    .drawer{transition:transform .22s ease-out}
    .menu-scrim{transition:opacity .22s ease-out}
    @starting-style{
      .menu:popover-open .drawer{transform:translateX(100%)}
      .menu:popover-open .menu-scrim{opacity:0}
    }
  }

  /* From 900px: one row — brand, the links, Sign in. Each group's label is a button that opens that
     group's links as a full-width panel directly under the header. */
  @media (min-width:900px){
    :root{--header-h:72px}
    .bar-signin,.menu-toggle,.menu-close,.menu-scrim,.group-title{display:none}
    .menu-signin{display:list-item}
    /* .menu and .drawer are only wrappers here, so the one list can sit in the bar... */
    .menu,.drawer{display:contents}
    /* ...except a phone menu left open while the window is widened. An open popover is in the top layer,
       where display:contents is not honoured (measured: it computes to block), so pin it where the in-line
       nav would be instead of letting it land at the top-left of the page. */
    .menu:popover-open{display:flex;position:fixed;inset:0 max(24px,calc((100% - var(--max)) / 2 + 24px)) auto auto;
      height:var(--header-h);align-items:center}
    .site-nav{display:flex;align-items:center;margin-left:24px}
    .menu-list{display:flex;align-items:center;gap:clamp(14px,1.9vw,22px)}
    /* Labels may wrap to two lines rather than being forced onto one: with the web font they never need to
       (measured: one line each from 900px), but with a fallback font (blocked or still loading) the row is
       ~35% wider, and nowrap made it overflow the page sideways at 900-1120px. The bar's height is fixed,
       so the worst case is a two-line label, not a taller header or a horizontal scrollbar. */
    .site-nav a:not(.signin),.group-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
      font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15.5px;line-height:1.15;
      letter-spacing:.05em;text-transform:uppercase;color:var(--dim);text-decoration:none}
    .site-nav a:not(.signin):hover,.group-toggle:hover{color:var(--ink)}
    .group-toggle{gap:7px;background:none;border:0;cursor:pointer}
    .group-toggle::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
      border-bottom-width:0}
    .group:has(> .group-panel:popover-open) > .group-toggle{color:var(--ink)}
    .group:has(> .group-panel:popover-open) > .group-toggle::after{transform:rotate(180deg)}
    /* The panel is an auto popover in the top layer, so it sits at the viewport's top edge plus the
       header's height, and is full width with its links on the page's content column. */
    .group-panel{position:fixed;inset:var(--header-h) 0 auto 0;width:auto;height:auto;background:var(--bg);
      border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(15,30,39,.28)}
    .group-panel ul{display:flex;flex-wrap:wrap;gap:0 30px;max-width:var(--max);margin:0 auto;
      padding:6px 24px 12px;border-left:0}
    .group-panel li{margin:0}
    .site-nav .group-panel a:not(.signin){padding:0;font-size:17px;font-weight:500;letter-spacing:.01em;
      text-transform:none;color:var(--ink)}
    .site-nav a[aria-current]:not(.signin),.group-toggle[aria-current]{color:var(--ink);text-decoration:underline;
      text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:var(--dawn)}
  }
}

/* Policies pages: the old quick links, now a small section nav between the header and <main>. It is not
   in the sticky header, and it shares the document column (.doc) with <main>. */
.subnav{display:flex;flex-wrap:wrap;gap:0 20px;padding-top:6px;padding-bottom:8px}
.subnav a{display:inline-flex;align-items:center;min-height:44px;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  text-decoration:none}
.subnav a:hover,.subnav a[aria-current]{color:var(--ink)}
.subnav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;
  text-decoration-color:var(--dawn)}
footer.site{border-top:1px solid var(--line);margin-top:70px;padding:36px 0 60px;font-size:15px;color:var(--dim)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
footer.site h4{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
footer.site a{display:block;color:var(--body);text-decoration:none;margin-bottom:6px}
footer.site a:hover{color:var(--blade)}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px}

/* marketing blocks */
/* Vertical padding as LONGHANDS, never the shorthand: .hero shares an element with .wrap/.doc, and
   `padding:76px 0 54px` would zero the 24px side gutter they set (measured: hero text flush with the
   screen edge at every width below 1120px). */
.hero{padding-top:76px;padding-bottom:54px}
.hero h1{max-width:16ch}
.hero .lede{max-width:56ch;margin-top:16px}
.actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.06em;text-transform:uppercase;padding:13px 24px;border-radius:8px;text-decoration:none;
  background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.grid{display:grid;gap:20px;margin:26px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.card.fill{background:var(--panel);border-color:transparent}
.card h3{margin-top:0}
.band{background:var(--panel);padding:52px 0;margin:60px 0}
.stat{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:38px;color:var(--ink);line-height:1}

/* documents */
.docmeta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;color:var(--dim);
  padding:14px 0 0;margin-top:14px;border-top:1px solid var(--line)}
.docmeta b{color:var(--body);font-weight:700}
.toc{background:var(--panel);border-radius:var(--r);padding:18px 24px;margin:26px 0}
.toc h3{margin:0 0 8px}
.toc ol{margin-bottom:0}
.box{background:var(--panel);border-left:3px solid var(--blade);border-radius:0 var(--r) var(--r) 0;
  padding:16px 20px;margin:20px 0}
.box.note{border-left-color:var(--dawn)}
.box h3{margin-top:0}

/* learn — knowledgebase */
.banner.draft{background:#FBF0E4;border:1px solid var(--dawn);border-radius:var(--r);
  padding:12px 18px;margin:0 0 22px;font-size:14.5px;color:#6B3E10;font-weight:600}
.banner.draft strong{color:#6B3E10}
.audiencechips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.audiencechip{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:var(--panel);
  border-radius:20px;padding:4px 12px}
.empty-state{color:var(--dim);font-size:15.5px;padding:8px 0 24px}
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
th{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  text-align:left;color:var(--dim);border-bottom:2px solid var(--line);padding:9px 11px 8px}
td{border-bottom:1px solid var(--line);padding:10px 11px;vertical-align:top}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.updated{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--dim)}
@media (max-width:640px){
  h1{font-size:34px}h2{font-size:25px}body{font-size:16.5px}
  /* The phone hero. Its 76px of top padding is the wide-screen value: under the 65px header it put the
     eyebrow 141px down the page. And 16ch of a condensed face is only 246px at the 34px phone headline, so
     the home page headline broke into three short lines (longest 188px) above a lede that runs the full
     364px column (all measured in Chromium at 412px). Longhand padding, as above: .hero shares an element
     with .wrap/.doc. */
  .hero{padding-top:32px}
  .hero h1{max-width:none}
  /* Phones: footer links and card headings get 44px-tall tap targets (the header's own links are 44px
     in its own rules), and the CTA buttons stack at full width with centred labels instead of
     wrapping raggedly. */
  .actions{flex-direction:column}
  .btn{text-align:center}
  footer.site a{padding:10px 0;margin-bottom:0}
  .card h3 a{display:inline-block;padding:10px 0;margin:-10px 0}
}
@media print{header.site,.subnav,footer.site .cols,.actions{display:none}body{font-size:11pt}.doc{max-width:none}}

/* guides — "Getting started" step-by-step pages */
.rolebadge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blade);border-radius:20px;
  padding:4px 13px;margin:0 0 14px}
.rolebadge.dawn{background:var(--dawn)}
.steps{list-style:none;margin:26px 0;padding:0;display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
.stepnum{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.step h3{margin-top:0}
.step p:last-child{margin-bottom:0}
.checklist{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.checklist li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:5px;
  border:2px solid var(--blade);background:var(--panel)}
@media (max-width:640px){
  .step{padding:16px 18px;gap:12px}
  .stepnum{width:28px;height:28px;font-size:15px}
}

/* faq — homepage "Frequently asked" section */
.faq{margin:26px 0}
.faqitem{border-bottom:1px solid var(--line);padding:15px 0}
.faqitem:last-child{border-bottom:none}
.faqitem summary{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:19px;
  color:var(--ink);cursor:pointer;list-style:none;padding-left:26px;position:relative}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::before{content:"+";position:absolute;left:0;top:0;width:20px;color:var(--dawn);
  font-weight:700}
.faqitem[open] summary::before{content:"\2212"}
.faqitem p{margin:10px 0 0;padding-left:26px}

/* keyboard access — the header is sticky, so anchored headings need clearance and
   every focusable thing needs a visible ring. */
.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:0 0 var(--r) 0;text-decoration:none;font-weight:700}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--dawn);outline-offset:3px;border-radius:3px}
h2[id],h3[id],section[id]{scroll-margin-top:98px}