/* Extracted inline <style> block, ADR-0063 / CODE-01. Content-addressed: the same
   block on another page links this same file. Linked exactly where the block was, so
   source order — and therefore the cascade — is unchanged. Do not hand-edit. */

/* The releases page, matched to the app's.
     The website and the app were showing the same eight releases in two different visual
     languages — the app as a stack of cards you expand, the site as a numbered timeline. Same
     content, same product, two designs, so it read as two products. This is the app's.
     Eight releases all expanded is a wall you scroll past rather than a page you read: the latest
     is open, the rest are one click away. <details> rather than JS — collapses natively, is
     keyboard-operable and screen-reader-correct for free, and still works with no JS. */
  .rel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    margin-bottom:18px;padding:0;overflow:hidden}
  .rel summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:18px 22px;cursor:pointer;list-style:none;min-height:56px}
  .rel summary::-webkit-details-marker{display:none}
  .rel summary:hover{background:var(--bg)}
  .rel summary:focus-visible{outline:2px solid var(--gc-brand,#c5311d);outline-offset:-2px}
  .relv{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);white-space:nowrap}
  .rel summary h2{margin:0!important;font-size:19px!important;font-weight:750!important;
    letter-spacing:-.02em;color:var(--text);flex:1;min-width:180px}
  .rel .reldate{color:var(--muted);font-size:13px;white-space:nowrap}
  .relcount{color:var(--muted);font-size:12.5px;border:1px solid var(--line);
    border-radius:999px;padding:3px 9px;white-space:nowrap}
  .relchev{width:10px;height:10px;border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease;
    flex:0 0 auto;margin-left:2px}
  .rel[open] .relchev{transform:rotate(-135deg)}
  .rel .relbody{padding:4px 26px 26px}
  .rel.now{border-color:var(--ink-accent)}
  .rel.now .relnum span{background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;border-color:transparent}
  .relbody h2{margin:2px 0 4px;font-size:23px;letter-spacing:-.02em}
  .reldate{color:var(--muted);font-size:13px;margin-bottom:10px}
  /* Every feature had a bullet dot, 8px of margin, and its demo pressed straight up against the
     next feature's sentence — so a release read as one continuous paragraph with pictures fallen
     into it, and you couldn't tell where one shipped thing ended and the next began.
     Each feature is now its own block: a rule above it, real air around it, no bullet. The lead-in
     bold is the headline; the demo below it is the evidence for THAT feature and nothing else. */
  .relbody ul{margin:0;padding:0;list-style:none;color:var(--muted);line-height:1.7}
  .relbody li{margin:0;padding:26px 0;border-top:1px solid var(--line)}
  .relbody li:first-child{border-top:0;padding-top:6px}
  .relbody li:last-child{padding-bottom:4px}
  .relbody li b{display:block;color:var(--text);font-size:16.5px;font-weight:700;
    letter-spacing:-.01em;margin-bottom:6px}
  /* The lead paragraph is the release's own thesis — separate it from the features under it. */
  .relbody .lead{margin:2px 0 22px;padding-bottom:2px;font-size:16px;color:var(--muted)}
  .pill{font-size:11px;vertical-align:middle;padding:3px 9px;border-radius:999px;
    background:var(--panel2);border:1px solid var(--line);color:var(--muted);
    font-weight:600;letter-spacing:.02em;margin-left:8px}
  @media(max-width:640px){
    .rel summary{padding:16px;gap:10px}
    .rel .relbody{padding:4px 16px 20px}
    .relbody li{padding:20px 0}
    .rel summary h2{font-size:17px!important}
  }
  /* ── Headings ─────────────────────────────────────────────────────────────
     Appended last, so it wins on every page regardless of what that page declared. */
  h2{font-size:clamp(27px,4.4vw,40px)!important;font-weight:800!important;line-height:1.15;
     letter-spacing:-.025em}
  h3{font-weight:700;letter-spacing:-.015em}
  section{padding-top:58px}
  .eyebrow{font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
     color:var(--ink-accent2)}
  @media (max-width:600px){
    h2{font-size:clamp(24px,7vw,30px)!important}
    section{padding-top:44px}
  }
  /* The footer has its own surface, so its links need their own green — the page's accent drops to
     4.23:1 against it. Contrast is a relationship, not a property of a colour. */
  /* NOT the CTA — it's a filled blue button, and colouring its label green put mint text on blue
     at 3.26:1. A rule that says "every link in the footer" also means the one that isn't a link. */
  footer a:not(.ftcta){color:var(--good)}
  footer .ftmail{color:var(--good)}
  html[data-theme="dark"] footer a:not(.ftcta){color:#c08a2e}
  html[data-theme="dark"] footer .ftmail{color:#c08a2e}
  footer .ftcta{color:#fff}
  footer .ftcol a{color:var(--muted)}
  footer .ftcol a:hover{color:var(--text)}
  footer .ftbase a{color:var(--muted)}
  /* The nav CTA — the one thing we want a stranger to do, and it had no button anywhere. */
  .nav-cta{background:var(--gc-brand,#c5311d);color:#fff!important;border-radius:10px;
    padding:9px 15px;font-weight:650;text-decoration:none;min-height:44px;
    display:inline-flex;align-items:center}
  .nav-cta:hover{filter:brightness(1.08)}
  .nav-login{font-weight:600}
  @media (max-width:900px){
    .nav-cta{padding:8px 12px}
  }
  /* ── Nav dropdowns ────────────────────────────────────────────────────────
     Fourteen flat links made everything equally unimportant; five hid pages people want. Three
     groups, each holding what belongs together, and the descriptions do the work a bare word can't:
     "Iris" means nothing until it says "she reads your bill and builds the dashboard". */
  .navdrop{position:relative}
  .navtop{display:inline-flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;font-weight:650;
    color:inherit;font:inherit;font-size:15px;padding:8px 2px;min-height:44px}
  .navtop i{width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
    transform:rotate(45deg) translateY(-1px);transition:transform .18s ease;opacity:.6}
  .navdrop[data-open="1"] .navtop i{transform:rotate(-135deg) translateY(-1px)}
  .navtop:focus-visible{outline:2px solid var(--gc-brand,#c5311d);outline-offset:2px;border-radius:6px}

  .navmenu{position:absolute;z-index:70;top:calc(100% + 10px);inset-inline-start:0;width:308px;
    background:var(--gc-card,var(--panel));border:1px solid var(--line);border-radius:14px;
    padding:7px;box-shadow:0 20px 54px rgba(8,12,20,.20);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    /* visibility is NOT transitioned. If it fades in over 160ms, the links inside are not
       focusable at the instant the browser computes tab order — so a keyboard user pressing Tab
       sails straight past the menu and lands somewhere else entirely, and the menu shuts behind
       them. It flips instantly; only the opacity and the movement are animated. */
    transition:opacity .16s ease,transform .16s ease}
  .navdrop[data-open="1"] .navmenu{opacity:1;visibility:visible;transform:none}
  .navmenu a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;min-height:44px}
  .navmenu a:hover{background:var(--bg)}
  .navmenu a:focus-visible{outline:2px solid var(--gc-brand,#c5311d);outline-offset:-2px}
  .navmenu b{display:block;font-size:14.5px;color:var(--text);font-weight:650}
  .navmenu span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}

  /* On a phone the menu is already a stack — a dropdown inside a drawer is a maze. Everything
     shows, indented, and you scroll. */
  .navburger{display:none;background:var(--panel2);border:1px solid var(--line);color:var(--text);
    width:34px;height:34px;border-radius:10px;cursor:pointer;flex:0 0 34px;
    align-items:center;justify-content:center}
  .navburger:hover{border-color:var(--ink-accent)}
  .navburger svg{display:block}
  .navburger .x{display:none}
  .nav[data-mobopen="1"] .navburger .bars{display:none}
  .nav[data-mobopen="1"] .navburger .x{display:block}
  @media (max-width:900px){
    .nav{flex-wrap:wrap;row-gap:10px}
    .navburger{display:inline-flex}
    .nav-links{order:9;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;
      display:none}
    .nav[data-mobopen="1"] .nav-links{display:flex}
    .nav-links .nav-login{margin-top:8px}
    .navdrop{width:100%}
    /* Product / Solutions / More stay collapsed and match the real site map — the same
       click-toggle in glance-nav.js that opens the desktop dropdown opens these, just reshaped
       from a floating panel into an inline accordion row. */
    .navtop{display:flex;width:100%;justify-content:space-between;padding:11px 0}
    .navmenu{position:static;width:100%;transform:none;box-shadow:none;border:0;padding:0;
      background:none;max-height:0;overflow:hidden;transition:max-height .25s ease}
    .navdrop[data-open="1"] .navmenu{max-height:600px}
    .navmenu span{display:none}
    .navmenu a{padding:10px 0 10px 14px;min-height:0}
    .nav-links>a:not(.nav-login):not(.nav-cta){color:var(--text);font-weight:650;
      font-size:14.5px;padding:11px 0}
    /* Language + theme aren't menu items — they're page controls. Off the collapsed top bar,
       and only into view at the bottom of the open panel, not stacked in with the links. */
    .langwrap,.themebtn{display:none;order:10;margin-top:8px}
    .nav[data-mobopen="1"] .langwrap{display:block;border-top:1px solid var(--line);
      padding-top:12px;width:100%}
    .nav[data-mobopen="1"] .themebtn{display:inline-grid}
    /* A right-anchored 240px dropdown hanging off a left-hand button ran off the left edge of a
       phone — measured at left:-166px, so most languages could not be reached. At this width it
       is not a dropdown; it is a list. */
    .langmenu{position:static;width:100%;box-shadow:none;margin-top:8px}
  }