/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
    :root{
      color-scheme: light;
      /* Brand */
      --teal:#30A9A4; --teal-dark:#227673; --teal-soft:#5fc2bd;
      --navy:#222B37; --navy-soft:#2C3849; --navy-2:#34425A; --navy-3:#46566e;
      --gold:#CDAD58; --gold-deep:#AB8736;
      --mint-1:#DEEFEC; --mint-2:#E8F3F0; --mint-3:#F2F7F5;
      --mint-q:#EAF4F1; --mint-border:#C2DDD8;
      --text:#0c1116; --muted:#555; --base:#fff; --line:#E6E6E6;
      /* extended palette (consolidated from repeated literals) */
      --ink:#33404b;        /* body copy slate */
      --screen:#0e1620;     /* phone / app-screen background */
      --teal-ice:#8fe2dd;   /* teal icon on a navy chip */
      --hair:#c2ccc9;       /* faint divider / dot gray */
      /* shared gradients */
      --grad-head:linear-gradient(180deg, #3fb5ad 0%, #1f6f6b 100%);   /* heading highlight + feature panel */
      --grad-btn:linear-gradient(180deg, #3ab6af, #2a938e);
      --grad-btn-hover:linear-gradient(180deg, #2a938e, #1f6b68);

      --container:1300px;
      --radius:14px; --radius-sm:9px;
      --shadow-sm:0 4px 14px rgba(34,43,55,.06);
      --shadow:0 14px 36px rgba(34,43,55,.10);
      --shadow-lg:0 22px 52px rgba(34,43,55,.14);
      --ease:cubic-bezier(.22,.61,.36,1);
      --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

      /* Spacing scale (4px base, airy but restrained). Use these instead of magic numbers. */
      --sp-1:.25rem;  /* 4  */  --sp-2:.5rem;   /* 8  */  --sp-3:.75rem; /* 12 */
      --sp-4:1rem;    /* 16 */  --sp-5:1.5rem;  /* 24 */  --sp-6:2rem;   /* 32 */
      --sp-7:3rem;    /* 48 */  --sp-8:4rem;    /* 64 */  --sp-9:5rem;   /* 80 */
      --sp-10:6.5rem; /* 104 */
      --section-y:var(--sp-10);     /* default section vertical padding */
      --gap:var(--sp-6);            /* default grid/flex gap */
      --pad-x:var(--sp-5);          /* container side padding */
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
    body{
      margin:0; background:var(--base); color:var(--text);
      font-family:var(--font); line-height:1.6; font-size:1.0625rem;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    img{ display:block; max-width:100%; }
    a{ color:var(--teal-dark); text-decoration:none; }

    /* ---------- Stylistic heading system ---------- */
    h1, h2{ margin:0 0 .45em; font-weight:800; letter-spacing:-.022em; line-height:1.1; color:var(--text); }
    /* highlight words: bold + gradient teal (replaces the old bold / normal / italic mix) */
    h1 b, h2 b, h1 i, h2 i, h1 em, h2 em{
      font-weight:800; font-style:normal;
      background:var(--grad-head);   /* vertical: light at top, dark at bottom */
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    /* Desktop-only heading break: forces a balanced line break on wide screens where a
       lone word would otherwise orphan. Collapses on tablet/phone so text wraps naturally. */
    .br-d{ display:none; }
    @media (min-width:1120px){ .br-d{ display:inline; } }
    h1{ font-size:clamp(2.35rem,5.2vw,3.75rem); }
    h2{ font-size:clamp(1.85rem,3.6vw,2.5rem); }
    h3{ margin:0 0 .4em; font-size:1.18rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
    p{ margin:0 0 1rem; }
    :focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:6px; }

    /* ---------- Layout helpers ---------- */
    .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
    section{ padding:var(--sp-10) 0; }
    [id]{ scroll-margin-top:96px; }
    .bg-mint-1{ background:var(--mint-1); }
    .bg-mint-2{ background:var(--mint-2); }
    .bg-mint-3{ background:var(--mint-3); }
    .center{ text-align:center; }
    .measure{ max-width:820px; margin-inline:auto; }
    #launch .measure{ max-width:840px; }   /* pricing intro: 20% wider than the shared measure */
    .lead{ font-size:1.22rem; line-height:1.5; }
    .muted{ color:var(--muted); }
    .eyebrow{
      display:inline-flex; align-items:center; gap:7px;
      font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
      color:var(--teal-dark); background:var(--mint-q); border:1px solid var(--mint-border);
      border-radius:999px; padding:6px 13px 6px 11px; margin-bottom:18px;
    }
    .eyebrow::before{   /* Phosphor "sparkle" glyph, tinted with currentColor */
      content:""; flex:0 0 auto; width:14px; height:14px; background-color:currentColor;
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,144a15.78,15.78,0,0,1-10.42,14.94l-51.65,19-19,51.61a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88l51.65-19,19-51.61a15.92,15.92,0,0,1,29.88,0l19,51.65,51.61,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E") center/contain no-repeat;
      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,144a15.78,15.78,0,0,1-10.42,14.94l-51.65,19-19,51.61a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88l51.65-19,19-51.61a15.92,15.92,0,0,1,29.88,0l19,51.65,51.61,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .section-head{ margin-bottom:var(--sp-8); }

    /* ---------- Buttons ---------- */
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      height:50px; padding:0 24px; border-radius:var(--radius-sm); font-weight:700; font-size:1rem;
      cursor:pointer; border:1.5px solid transparent; transition:transform .15s var(--ease), background .2s, box-shadow .2s, color .2s; white-space:nowrap;
    }
    .btn:active{ transform:translateY(1px); }
    .btn-primary{ background:var(--grad-btn); color:#fff; }
    .btn-primary:hover{ background:var(--grad-btn-hover); color:#fff; }
    .btn-secondary{ background:#fff; color:var(--teal-dark); border-color:var(--teal); }
    .btn-secondary:hover{ background:var(--mint-3); }
    .btn-navy{ background:var(--navy); color:#fff; }
    .btn-navy:hover{ background:var(--navy-2); color:#fff; }

    /* ---------- Apple App Store "Coming soon" badge ---------- */
    .appstore-badge{
      display:inline-flex; align-items:center; gap:12px; height:54px; padding:0 22px 0 12px;
      background:var(--navy); color:#fff; border-radius:12px; line-height:1; transition:background .2s, transform .15s var(--ease);
    }
    .appstore-badge:hover{ background:#16202b; color:#fff; transform:translateY(-1px); }
    .appstore-badge .ab-icon{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12); display:grid; place-items:center; }
    .appstore-badge .ab-icon svg{ width:18px; height:18px; }
    .appstore-badge .ab-t{ display:flex; flex-direction:column; gap:3px; text-align:left; }
    .appstore-badge .ab-t small{ font-size:.72rem; font-weight:500; letter-spacing:.02em; opacity:.92; }
    .appstore-badge .ab-t strong{ font-size:1.05rem; font-weight:700; letter-spacing:.04em; }

    /* ============================================================
       HEADERS
       ============================================================ */
    /* Transparent header (home only): centered logo, menu below, sits over the hero gradient */
    .header-top{ position:relative; z-index:3; padding:26px 0 27px; text-align:center; }
    .header-top .ht-logo img{ height:195px; width:auto; margin:0 auto 45px; }   /* native 144x195: displayed 1:1, no scaling; margin evens the gap to the nav */
    /* one connected button bar: shared pill container, links are segments split by hairline dividers */
    .header-top nav{ display:inline-flex; align-items:stretch; overflow:hidden;
      background:rgba(255,255,255,.65); border:1px solid rgba(48,169,164,.22);
      border-radius:12px; box-shadow:0 1px 2px rgba(34,43,55,.05); }
    .header-top nav a{ padding:11px 20px; color:var(--navy); font-weight:600; font-size:1rem;
      border-right:1px solid rgba(48,169,164,.18); transition:background .2s, color .2s; }
    .header-top nav a:last-child{ border-right:0; }
    .header-top nav a:hover{ background:#fff; color:var(--teal-dark); }

    /* Sticky white header (slides in on scroll for home; default header for other pages) */
    .header-main{
      position:fixed; top:-1px; left:0; right:0; z-index:60; background:#fff; padding-top:1px;
      border-bottom:1px solid var(--line);
      transform:translateY(-106%); opacity:0; transition:transform .35s var(--ease), opacity .25s var(--ease), box-shadow .25s var(--ease);
    }
    .header-main.show{ transform:translateY(0); opacity:1; box-shadow:var(--shadow-sm); }   /* shadow only once it has slid in */
    .header-main .container{ max-width:none; padding-left:32px; padding-right:32px; }   /* full-width sticky header, not max-width constrained */
    /* Inner pages: a static white bar at the top, in normal flow so it scrolls away with the page; the fixed .header-main then slides in past the threshold. The bar is cloned from .header-main in site.js. */
    .header-flow{ position:relative; z-index:5; background:#fff; border-bottom:1px solid var(--line); }
    .header-flow .container{ max-width:none; padding-left:32px; padding-right:32px; }
    .header-flow .btn-primary{ box-shadow:none; }
    .hm-inner{ display:flex; align-items:center; justify-content:space-between; height:92px; gap:18px; }
    .hm-inner .brand img{ width:155px; height:82px; }                    /* horizontal crest logo at its exact native size (155x82); header height fitted to it */
    .hm-nav{ display:flex; align-items:center; gap:28px; }
    .hm-links{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
    .hm-links a{ color:var(--text); font-weight:500; }
    .hm-links a:hover{ color:var(--teal-dark); }
    .header-main .btn-primary{ box-shadow:none; }          /* no shadow on header button */
    .nav-toggle{ display:none; position:relative; width:30px; height:22px; background:none; border:0; cursor:pointer; padding:0; z-index:1; }
    .nav-toggle span{ position:absolute; right:0; height:2.5px; border-radius:2px; background:var(--navy);
      transition:transform .3s var(--ease), width .25s var(--ease), opacity .2s var(--ease); }
    .nav-toggle span:nth-child(1){ top:3px; width:30px; }
    .nav-toggle span:nth-child(2){ top:10px; width:19px; }
    .nav-toggle span:nth-child(3){ top:17px; width:24px; }
    body.menu-open .nav-toggle span:nth-child(1){ top:10px; width:30px; transform:rotate(45deg); }
    body.menu-open .nav-toggle span:nth-child(2){ opacity:0; transform:translateX(12px); }
    body.menu-open .nav-toggle span:nth-child(3){ top:10px; width:30px; transform:rotate(-45deg); }

    /* Mobile full-height menu (shared by both headers) */
    .mnav{ position:fixed; top:76px; left:0; right:0; height:calc(100dvh - 76px); z-index:50; background:#fff;
      display:flex; flex-direction:column; overflow-y:auto;
      transform:translateX(100%); opacity:0; visibility:hidden;
      transition:transform .35s var(--ease), opacity .25s var(--ease), visibility .35s; }
    body.menu-open .mnav{ transform:translateX(0); opacity:1; visibility:visible; }
    .mnav a.mlink{ display:block; padding:20px 26px; font-weight:600; font-size:1.12rem; color:var(--navy);
      border-bottom:1px solid var(--mint-border); transition:background .2s, color .2s; }
    .mnav a.mlink:first-child{ border-top:1px solid var(--mint-border); }
    .mnav a.mlink:hover, .mnav a.mlink:active{ background:var(--mint-3); color:var(--teal-dark); }
    .mnav .mnav-cta{ padding:26px; }
    .mnav .mnav-cta .btn{ width:100%; box-shadow:none; }

    /* ============================================================
       1 · HERO
       ============================================================ */
    .hero{ position:relative; overflow:hidden; isolation:isolate; padding:0 0 0;
      background:
        radial-gradient(72% 62% at 50% 112%, rgba(48,169,164,.20), rgba(48,169,164,0) 74%),      /* main teal anchor (brand teal): pushed down so ~60% is cut off by the section bottom */
        radial-gradient(96% 86% at 50% 78%, rgba(95,194,189,.16), rgba(95,194,189,0) 80%),       /* soft teal spread (palette teal-soft) */
        radial-gradient(60% 50% at 50% 50%, rgba(94,194,189,.07), rgba(94,194,189,0) 80%),       /* faint mint higher */
        linear-gradient(180deg,#ffffff 0%, #f7fcfb 58%, #eef7f4 100%);
    }
    .hero::after{ /* whiten the top + side edges so color pools toward the center */
      content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background:
        linear-gradient(180deg,#fff 0%, rgba(255,255,255,0) 22%),
        linear-gradient(90deg,#fff 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, #fff 100%);
    }
    .hero::before{ /* fading dotted pattern */
      content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background-image:radial-gradient(circle, rgba(34,43,55,.17) 1.3px, transparent 1.6px);
      background-size:26px 26px;
      -webkit-mask-image:radial-gradient(58% 80% at 50% 46%, #000 0%, rgba(0,0,0,.4) 52%, transparent 82%);
      mask-image:radial-gradient(58% 80% at 50% 46%, #000 0%, rgba(0,0,0,.4) 52%, transparent 82%);
    }
    .hero-inner{ padding-bottom:0; }
    .hero-copy{ max-width:none; margin:0 auto 0; text-align:center; }
    .hero-copy h1{ max-width:1080px; margin-inline:auto; }   /* full size, two lines; capped width keeps it off a third line on desktop */
    .hero-copy h1 .hb{ display:inline; }   /* forced break for a balanced two-line title; removed on small screens so it flows */
    @media (max-width:600px){ .hero-copy h1 .hb{ display:none; } }
    .hero-copy .subhead, .hero-copy .capture, .hero-copy .reassure, .hero-copy .form-note{ max-width:660px; margin-inline:auto; }
    .hero .subhead{ font-size:1.2rem; color:#23303a; max-width:660px; margin:0 auto 28px; line-height:1.5; white-space:nowrap; }

    .capture{ display:flex; gap:10px; justify-content:center; max-width:500px; margin:0 auto 14px; }
    .capture input[type=email]{
      flex:1; min-width:0; height:50px; padding:0 16px; border:1.5px solid #c6d6d3; border-radius:var(--radius-sm);
      font-size:1rem; font-family:inherit; background:#fff;
    }
    .capture input[type=email]:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(48,169,164,.2); }
    .reassure{ font-size:.92rem; color:var(--muted); margin:0; }
    .form-note{ font-size:.92rem; font-weight:600; color:var(--teal-dark); margin:.55rem 0 0; min-height:1.1em; }
    .hero-or{ display:flex; align-items:center; justify-content:center; gap:14px; margin:20px auto 14px; max-width:300px; color:var(--muted); font-size:.85rem; }
    .hero-or::before,.hero-or::after{ content:""; height:1px; flex:1; background:var(--line); }

    /* hero stage: three columns, bubbles | phone | bubbles */
    .hero-stage{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:40px;
      max-width:1180px; margin:31px auto 0; }   /* +25px from the empty form-note above = 56px gap below the form, matching the gap below the menu */
    .phone{
      position:relative; z-index:2; width:404px; padding:12px 12px 0; background:var(--screen);
      border-radius:50px 50px 0 0; box-shadow:0 26px 44px -20px rgba(14,22,32,.42); align-self:end;
    }
    .phone::before{ content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
      width:104px; height:28px; background:var(--screen); border-radius:16px; z-index:3; }
    .phone .screen{ border-radius:38px 38px 0 0; overflow:hidden; background:#fff; height:560px; }
    .phone .screen img{ width:100%; object-fit:cover; object-position:top center; }

    /* side columns: 3 items each, top-aligned, 40px apart; every button fills the column width */
    .bub-col{ display:flex; flex-direction:column; justify-content:flex-start; gap:40px; width:100%; max-width:280px; padding-top:50px; }  /* gap matches the 40px column-to-phone gap; top padding starts level with the phone screen's top corners (desktop; reset on mobile) */
    .bub-col.left{ justify-self:end; }
    .bub-col.right{ justify-self:start; }
    .bub-col > *{ width:100%; }

    .bubble{ display:flex; align-items:center; gap:10px;
      border:1px solid; border-radius:14px; padding:12px 15px;
      box-shadow:0 6px 16px -6px rgba(34,43,55,.20); font-weight:600; font-size:.93rem; line-height:1.2; }
    .bubble.light{ background:#fff; color:var(--text); border-color:rgba(48,169,164,.5); }   /* teal border, matches the teal icon */
    .bubble.light.gold-bd{ border-color:rgba(205,173,88,.6); }                                /* gold border for gold-icon bubbles */
    .bubble.dark{ background:var(--navy); color:#fff; border-color:var(--navy-2); }
    .as-badge{ box-shadow:0 6px 16px -6px rgba(34,43,55,.24); }
    .bubble .bi{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
    .bi-gold{ background:rgba(205,173,88,.16); color:var(--gold-deep); }
    .bi-teal{ background:rgba(48,169,164,.14); color:var(--teal-dark); }
    .bi-navy{ background:rgba(255,255,255,.12); color:#9fe6e2; }

    /* ============================================================
       2 · YOUR BREEDING LIFE (triptych)
       ============================================================ */
    .life{ border-top:2px solid rgba(48,169,164,.3); }   /* slightly darker teal divider between the hero and section 2 */
    .life-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:50px; }
    .life-head h2{ margin:0; }
    .life-head .intro{ margin:0; color:var(--ink); font-size:1.08rem; line-height:1.6; }
    .life-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
    .life-card-wrap{ display:flex; flex-direction:column; }
    .life-card{ position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
    .life-card img{ width:100%; height:100%; object-fit:cover; display:block; }
    .life-chip{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:12px;
      background:var(--navy); color:#fff; display:grid; place-items:center; }
    .life-chip svg{ width:24px; height:24px; }
    .life-band{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px;
      background:rgba(34,43,55,.8); }
    .life-band .life-title{ color:#fff; font-weight:800; font-size:1.2rem; letter-spacing:-.01em; }
    .life-caption{ margin:16px 2px 0; color:var(--muted); font-size:.98rem; line-height:1.55; }
    .life-close{ text-align:center; font-weight:800; color:var(--teal-dark); font-size:1.24rem; margin:42px auto 0; }

    /* ============================================================
       4 · FEATURE GRID
       ============================================================ */
    .grid-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .fcard{
      display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid rgba(48,169,164,.25);
      border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s; height:100%;
    }
    .fcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
    .fcard .ic{ width:58px; height:58px; border-radius:15px; display:grid; place-items:center; color:#fff;
      background:var(--grad-btn);
      box-shadow:0 6px 14px -8px rgba(34,118,115,.35); }
    .fcard .ic svg{ width:28px; height:28px; }
    .fcard h3{ margin:4px 0 0; }
    .fcard p{ margin:0; color:var(--muted); font-size:.97rem; line-height:1.5; }
    .fcard ul{ margin:2px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
    .fcard ul li{ position:relative; padding-left:16px; color:var(--muted); font-size:.9rem; line-height:1.45; }
    .fcard ul li::before{ content:""; position:absolute; left:2px; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--teal); }

    /* ---------- 4A · Every kind of breeder ----------
       Lighter companion to the feature grid: soft-tinted teal glyphs, hairline cards,
       no gradient tiles, so the two grids read as distinct. */
    /* breeders and how-it-works are both white; drop the doubled padding between them */
    #breeders{ padding-bottom:0; }
    .bgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
    .brcard{ position:relative; display:flex; flex-direction:column; gap:11px; background:#fff; border:1px solid var(--line);
      border-radius:var(--radius); padding:24px 22px; transition:transform .18s var(--ease), box-shadow .18s; height:100%; }
    .brcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
    .brcard .bic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
      color:var(--teal); background:rgba(48,169,164,.1); }
    .brcard .bic svg{ width:24px; height:24px; }
    .brcard h3{ margin:2px 0 0; font-size:1.05rem; }
    .brcard p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }
    .soon-tag{ position:absolute; top:47px; right:22px; transform:translateY(-50%);
      font-size:.5rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
      color:var(--teal-dark); background:var(--mint-2); border:1px solid rgba(48,169,164,.3); border-radius:999px; padding:3px 8px; }

    /* ============================================================
       5 · HOW IT WORKS
       ============================================================ */
    /* green mint gradient + masked dotted texture. Reusable: add class="mint-scene" to any section. */
    .mint-scene{ position:relative; overflow:hidden; isolation:isolate;
      background:
        radial-gradient(50% 50% at 50% 42%, rgba(48,169,164,.16), rgba(48,169,164,0) 72%),
        radial-gradient(70% 60% at 50% 50%, rgba(255,255,255,0) 40%, var(--mint-2) 100%),
        var(--mint-3);
    }
    .mint-scene::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background-image:radial-gradient(circle, rgba(34,43,55,.10) 1.3px, transparent 1.6px);
      background-size:26px 26px;
      -webkit-mask-image:radial-gradient(120% 85% at 50% 45%, #000 0%, rgba(0,0,0,.28) 60%, transparent 82%);
      mask-image:radial-gradient(120% 85% at 50% 45%, #000 0%, rgba(0,0,0,.28) 60%, transparent 82%); }
    .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
    .step-card{ display:flex; flex-direction:column; }
    .step-bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-radius:13px;
      background:var(--navy); color:#fff; margin-bottom:14px; }
    .step-bar .num{ font-size:1.5rem; font-weight:800; letter-spacing:.02em; }
    .step-bar .sic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
      background:rgba(48,169,164,.22); color:var(--teal-ice); }
    .step-figure{ height:330px; border-radius:18px; overflow:hidden; box-shadow:0 8px 20px -6px rgba(34,43,55,.22); background:var(--screen); }
    .step-figure.has-screen{ background:#eceff1; }   /* light bg so no dark corner-leak behind the recreated app screen */
    .step-figure img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
    /* ============================================================
       APP UI KIT (isolated, namespaced .au; mirrors the real app, NOT the marketing system)
       ============================================================ */
    .au{ --au-card:#fff; --au-tile:#e6efeb; --au-tile-bd:#dce7e2; --au-ink:#16201c; --au-sec:#7a8884;
      --au-sep:#e4e9e7; --au-teal:#2f9e98; --au-tealink:#1f6f6b; --au-tint:#dcefe9;
      --au-pink:#f7cdd2; --au-pinkink:#b15563; --au-blue:#3b6ea5; --au-gold:#bf9540;
      /* kit type scale + spacing: every screen maps its text onto these eight sizes
         so headings, body, meta, and tags stay consistent across all components */
      --au-fs-display:1.38rem; --au-fs-title:1.12rem; --au-fs-heading:1rem; --au-fs-body:.92rem;
      --au-fs-sub:.84rem; --au-fs-meta:.76rem; --au-fs-small:.66rem; --au-fs-tag:.58rem;
      --au-pad-x:16px; --au-bot:26px;   /* shared side padding + uniform bottom bumper above the tab bar */
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable",system-ui,sans-serif;
      line-height:1.35;
      color:var(--au-ink); background:#eef2f1; height:100%; display:flex; flex-direction:column; text-align:left; }
    .au *{ box-sizing:border-box; }
    .au svg{ display:block; }
    /* Dark dashboard variant (promoted from components/dashboard-dark.html); reusable anywhere */
    .au.dark{ --au-card:#16232c; --au-tile:#1a2832; --au-tile-bd:#2b3a45; --au-ink:#eef3f4;
      --au-sec:#90a4ab; --au-sep:#2b3a45; --au-tealink:#80d8d2; --au-tint:rgba(54,179,172,.16); background:var(--screen); }
    .au.dark .au-greet .g1{ color:var(--au-sec); }
    .au.dark .au-bell{ background:rgba(255,255,255,.06); color:#80d8d2; }
    .au.dark .au-stat .ic{ background:rgba(255,255,255,.05); }
    .au.dark .au-act{ box-shadow:none; border:1px solid var(--au-sep); }
    .au-status{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 20px 3px; }
    .au-status .t{ font-size:.82rem; font-weight:700; letter-spacing:.02em; }
    .au-status .sys{ display:flex; align-items:center; gap:5px; }
    .au-status .sys svg{ height:11px; width:auto; color:var(--au-ink); }
    .au-nav{ flex:0 0 auto; position:relative; display:flex; align-items:center; padding:4px var(--au-pad-x) 12px; }
    .au-nav .back{ color:var(--au-ink); } .au-nav .back svg{ width:17px; height:17px; }
    .au-nav .title{ position:absolute; left:0; right:0; text-align:center; font-size:var(--au-fs-heading); font-weight:700; }
    .au-view{ flex:1 1 auto; position:relative; overflow:hidden; }
    .au-scroll{ position:absolute; top:0; left:0; right:0; will-change:transform; }
    .au-pad{ padding:6px var(--au-pad-x) var(--au-bot); }
    /* uniform scroll-end spacing: the last element in any content wrapper sheds its own
       bottom margin, so every screen ends exactly --au-bot above the tab bar */
    .au-pad > :last-child, .au-pad2 > :last-child, .au-hpad > :last-child, .au-bpad > :last-child,
    .au-spad > :last-child, .au-hrpad > :last-child, .au-krwrap > :last-child, .au-optwrap > :last-child{ margin-bottom:0; }
    .au-greet{ display:flex; align-items:flex-start; justify-content:space-between; margin:4px 0 18px; }
    .au-greet .g1{ font-size:.98rem; } .au-greet .g2{ font-size:1.7rem; font-weight:800; letter-spacing:-.01em; margin-top:2px; }
    .au-apphead{ display:flex; align-items:center; justify-content:space-between; padding:2px 0 12px; }
    .au-apphead .hb{ font-size:1.35rem; font-weight:800; }
    .au-bell{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--au-tint); color:var(--au-tealink); display:grid; place-items:center; }
    .au-bell svg{ width:16px; height:16px; }
    .au-stats{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
    .au-stat{ background:var(--au-tile); border:1px solid var(--au-tile-bd); border-radius:16px; padding:14px; }
    .au-stat .ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-bottom:10px; }
    .au-stat .ic svg{ width:16px; height:16px; }
    .au-stat .n{ font-size:1.7rem; font-weight:800; line-height:1; }
    .au-stat .l{ font-size:.73rem; color:var(--au-sec); margin-top:5px; }
    .ic-teal{ background:var(--au-tint); color:var(--au-tealink); }
    .ic-pink{ background:#f7dce0; color:var(--au-pinkink); }
    .ic-gold{ background:#f1e7c9; color:var(--au-gold); }
    .ic-blue{ background:#dce8f4; color:var(--au-blue); }
    .au-h{ font-size:1.18rem; font-weight:800; margin:22px 0 12px; display:flex; align-items:center; justify-content:space-between; }
    .au-h .more{ font-size:.84rem; font-weight:600; color:var(--au-tealink); }
    .au-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .au-quick .qa{ display:flex; flex-direction:column; align-items:center; gap:7px; }
    .au-quick .qa .b{ width:100%; aspect-ratio:1/1; border-radius:14px; background:var(--au-tint); color:var(--au-tealink); display:grid; place-items:center; }
    .au-quick .qa .b svg{ width:19px; height:19px; }
    .au-quick .qa .lbl{ font-size:.69rem; color:var(--au-tealink); text-align:center; line-height:1.2; }
    .au-act{ background:var(--au-card); border-radius:14px; padding:13px; display:flex; align-items:center; gap:11px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au-act .av{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--au-tint); color:var(--au-tealink); display:grid; place-items:center; }
    .au-act .av svg{ width:16px; height:16px; }
    .au-act .m{ flex:1; min-width:0; }
    .au-act .m b{ font-size:.9rem; }
    .au-act .m .nm{ display:block; font-size:.85rem; color:var(--au-tealink); margin:1px 0; }
    .au-act .m .sub{ display:block; font-size:.77rem; color:var(--au-sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au-act .when{ flex:0 0 auto; font-size:.77rem; color:var(--au-sec); display:flex; align-items:center; gap:3px; }
    .au-act .when svg{ width:13px; height:13px; }
    .au-tabs{ flex:0 0 auto; display:flex; border-top:1px solid var(--au-sep); background:var(--au-card); padding:8px 0 10px; }
    .au-tabs .tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:#a4b4af; font-size:.6rem; font-weight:700; letter-spacing:.04em; }
    .au-tabs .tab svg{ width:21px; height:21px; }
    .au-tabs .tab.on{ color:var(--au-teal); }
    .hero .au-tabs, .steps .au-tabs{ display:none; }   /* these screens are cropped at the bottom, so the tab bar would sit below the cut; hide it for these instances */
    .steps .au-scroll{ transform:scale(.78); transform-origin:top left; left:0; right:auto; width:128.2%; }   /* step 2: zoom the screen out a touch so the full first breeding card fits the crop */
    .au-listhead{ display:flex; align-items:center; gap:8px; margin:2px 0 2px; }
    .au-listhead .lt{ font-size:1.12rem; font-weight:800; }
    .au-listhead .ct{ font-size:.72rem; font-weight:700; color:var(--au-tealink); background:var(--au-tint); border-radius:999px; padding:2px 9px; }
    .au-listhead .cv{ margin-left:auto; color:var(--au-sec); } .au-listhead .cv svg{ width:15px; height:15px; }
    .au-sub{ font-size:.93rem; font-weight:700; margin:9px 0 12px; }
    .au-bcard{ background:var(--au-card); border-radius:16px; padding:15px; margin-bottom:13px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au-bcard .top{ display:flex; align-items:center; gap:8px; }
    .au-bcard .nmx{ font-size:1.12rem; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au-pill{ flex:0 0 auto; font-size:.6rem; font-weight:800; letter-spacing:.05em; color:var(--au-pinkink); background:var(--au-pink); border-radius:999px; padding:3px 8px; }
    .au-bcard .cv{ flex:0 0 auto; color:#c2ccd3; } .au-bcard .cv svg{ width:14px; height:14px; }
    .au-bcard .par{ font-size:.8rem; color:var(--au-sec); margin-top:7px; letter-spacing:.02em; }
    .au-bcard .par2{ font-size:.8rem; color:var(--au-sec); margin-top:2px; }
    .au-dates{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--au-sep); border-radius:10px; margin-top:12px; }
    .au-dates div{ padding:7px 6px; min-width:0; }
    .au-dates .k{ font-size:var(--au-fs-tag); color:var(--au-sec); } .au-dates .v{ font-size:var(--au-fs-tag); font-weight:700; margin-top:2px; white-space:nowrap; }
    .au-dates .due .v{ color:var(--au-teal); }
    .au-fab{ position:absolute; right:16px; bottom:14px; width:46px; height:46px; border-radius:50%; background:var(--au-teal); color:#fff; display:grid; place-items:center; box-shadow:0 8px 18px -6px rgba(47,158,152,.6); }
    .au-fab svg{ width:22px; height:22px; }
    /* Evans import option rows */
    .au-optwrap{ padding:14px var(--au-pad-x) var(--au-bot); display:flex; flex-direction:column; gap:14px; }
    .au.fill .au-optwrap{ flex:1; } .au.fill .au-opt{ flex:1; }
    .au-opt{ display:flex; align-items:center; gap:12px; background:var(--au-card); border:1px solid var(--au-sep); border-radius:14px; padding:14px; box-shadow:0 1px 2px rgba(16,32,28,.05); }
    .au-opt .ic{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--au-tint); color:var(--au-tealink); display:grid; place-items:center; }
    .au-opt .ic svg{ width:20px; height:20px; }
    .au-opt .tx{ flex:1; min-width:0; } .au-opt .tx strong{ display:block; font-size:.92rem; } .au-opt .tx .d{ display:block; font-size:.76rem; color:var(--au-sec); line-height:1.4; margin-top:3px; }
    .au-opt .cv{ flex:0 0 auto; color:#c2ccd3; } .au-opt .cv svg{ width:15px; height:15px; }
    .au-warn{ display:flex; gap:11px; background:#fbe8c6; border-radius:14px; padding:13px 14px; }
    .au-warn .wi{ flex:0 0 auto; color:#d68a1e; margin-top:1px; } .au-warn .wi svg{ width:20px; height:20px; }
    .au-warn .tx{ flex:1; min-width:0; }
    .au-warn .wt{ display:block; font-size:.96rem; font-weight:800; color:#3d2f12; margin-bottom:3px; }
    .au-warn .wd{ display:block; font-size:.78rem; line-height:1.45; color:#6a5524; }
    .steps .au-warn{ display:none; }   /* the Beta/Other warning is recreated in the kit but hidden in How-it-works step 1; shown only in the 5b import section */
    /* Show Records screen (used inline in How-it-works step 3; adapted from components/show-records.html, which stays untouched) */
    .au-spad{ padding:6px var(--au-pad-x) var(--au-bot); }
    .au-shead{ display:flex; align-items:center; gap:12px; background:var(--au-tint); border-radius:16px; padding:13px 14px; }
    .au-shead .tile{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:#fff; color:var(--au-teal); display:grid; place-items:center; border:1px solid var(--au-tile-bd); } .au-shead .tile svg{ width:26px; height:26px; }
    .au-shead .nm{ display:flex; align-items:center; gap:7px; font-size:var(--au-fs-heading); font-weight:800; }
    .au-shead .sub{ font-size:var(--au-fs-sub); color:var(--au-tealink); margin-top:1px; }
    .au-shead .sub2{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:1px; }
    .au-gccard{ background:#fff; border:1px solid var(--au-sep); border-radius:16px; padding:15px; margin-top:14px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au-gctop{ display:flex; align-items:center; gap:10px; }
    .au-gctop .medal{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:rgba(205,173,88,.16); color:var(--au-gold); display:grid; place-items:center; } .au-gctop .medal svg{ width:19px; height:19px; }
    .au-gctop .gt{ font-size:var(--au-fs-body); font-weight:800; }
    .au-gctop .gs{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:1px; }
    .au-gctop .count{ margin-left:auto; text-align:right; }
    .au-gctop .count b{ font-size:var(--au-fs-title); font-weight:800; color:var(--au-teal); }
    .au-gctop .count span{ display:block; font-size:var(--au-fs-small); color:var(--au-sec); letter-spacing:.02em; }
    .au-legbar{ display:flex; gap:8px; margin:14px 0 4px; }
    .au-leg{ flex:1; height:7px; border-radius:4px; background:var(--au-sep); }
    .au-leg.done{ background:var(--au-teal); }
    .au-reqs{ display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin-top:13px; }
    .au-req{ display:flex; align-items:center; gap:7px; font-size:var(--au-fs-meta); color:var(--au-ink); }
    .au-req svg{ flex:0 0 auto; width:15px; height:15px; }
    .au-req.ok svg{ color:var(--au-teal); }
    .au-req.pending{ color:var(--au-sec); } .au-req.pending svg{ color:#c2ccd3; }
    .au-listhd{ display:flex; align-items:center; margin:22px 0 10px; }
    .au-listhd .lt{ font-size:var(--au-fs-heading); font-weight:800; }
    .au-listhd .add{ margin-left:auto; font-size:var(--au-fs-sub); font-weight:600; color:var(--au-tealink); display:flex; align-items:center; gap:4px; } .au-listhd .add svg{ width:14px; height:14px; }
    .au-show{ background:#fff; border:1px solid var(--au-sep); border-radius:14px; padding:13px 14px; margin-bottom:10px; box-shadow:0 1px 2px rgba(16,32,28,.04); }
    .au-show .r1{ display:flex; align-items:center; gap:8px; }
    .au-show .award{ font-size:var(--au-fs-body); font-weight:700; }
    .au-show .star{ color:var(--au-gold); display:flex; } .au-show .star svg{ width:15px; height:15px; }
    .au-show .legtag{ margin-left:auto; font-size:var(--au-fs-tag); font-weight:800; letter-spacing:.04em; color:#1f6f6b; background:var(--au-tint); border-radius:999px; padding:3px 8px; }
    .au-show .legtag.senior{ color:#7a5a14; background:#fbe8c6; }
    .au-show .show-nm{ font-size:var(--au-fs-sub); color:var(--au-ink); margin-top:5px; }
    .au-show .meta{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:3px; }
    .steps .show-figure .au-spad{ transform:scale(.78); transform-origin:top left; width:128.2%; }   /* crop step 3: scale to match the other step screens; list cropped at the bottom (tab bar hidden by .steps .au-tabs) */
    .steps .show-figure .au-shead{ display:none; }   /* crop the animal header so the Grand Champion leg tracker sits at the top of the frame */
    .step-body{ padding:26px 20px 0; }                 /* space between image and heading; 20px side indent for heading + paragraph */
    .step-body h3{ margin-bottom:8px; font-size:1.22rem; }
    .step-body p{ color:#384450; margin:0; }
    /* designed iCloud sync visual (step 3) */
    .sync-visual{ height:100%; display:flex; flex-direction:column; gap:14px; justify-content:center; align-items:center;
      padding:30px 24px; text-align:center;
      background:radial-gradient(120% 90% at 50% 25%, #2c3b4e, var(--navy)); color:#fff; }
    .sync-visual .cloud{ width:92px; height:92px; border-radius:50%; display:grid; place-items:center;
      background:radial-gradient(circle at 30% 25%, var(--teal-soft), var(--teal-dark)); box-shadow:0 14px 30px -8px rgba(48,169,164,.6); }
    .sync-visual .cloud svg{ width:46px; height:46px; color:#fff; }
    .sync-visual .st{ font-weight:700; font-size:1.1rem; }
    .sync-visual .ss{ font-size:.86rem; color:rgba(255,255,255,.66); margin-top:-8px; }
    .sync-rows{ width:100%; display:flex; flex-direction:column; gap:8px; margin-top:6px; }
    .sync-rows div{ display:flex; align-items:center; gap:9px; justify-content:space-between; background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:9px 12px; font-size:.84rem; }
    .sync-rows .ok{ color:var(--teal-ice); }

    /* ============================================================
       5b · IMPORT SPLIT
       ============================================================ */
    .split{ display:grid; grid-template-columns:auto minmax(0,560px); gap:48px; align-items:center; justify-content:center; }
    .split .device{ border-radius:30px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--screen); padding:11px; max-width:300px; margin-inline:auto; }
    .split .device img{ border-radius:22px; width:100%; aspect-ratio:1290/2796; object-fit:cover; object-position:top center; }
    .split .device .au{ height:auto; aspect-ratio:1290/2796; border-radius:22px; overflow:hidden; }
    .path{ display:flex; gap:16px; padding:18px 0; }
    .path + .path{ border-top:1px solid var(--line); }
    .path .ic{ flex:0 0 auto; width:48px; height:48px; border-radius:13px; color:#fff; display:grid; place-items:center;
      background:radial-gradient(circle at 30% 22%, var(--teal-soft), var(--teal-dark)); box-shadow:0 8px 18px -8px rgba(34,118,115,.6); }
    .path h3{ margin:0 0 4px; }
    .path p{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.5; }
    .chips{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
    .chip{ font-size:.82rem; font-weight:600; color:var(--navy); background:#fff; border:1px solid var(--navy-2); border-radius:999px; padding:6px 13px; }
    .reassure-row{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color:#333; }
    .reassure-row svg{ flex:0 0 auto; color:var(--teal); margin-top:3px; }

    /* ============================================================
       6 · PRIVACY (dark navy, bento)
       ============================================================ */
    .privacy{ position:relative; overflow:hidden; isolation:isolate;
      background:
        radial-gradient(55% 45% at 50% 0%, rgba(48,169,164,.16), rgba(48,169,164,0) 70%),
        radial-gradient(120% 90% at 50% 0%, #2b3a4d, var(--navy)); color:#fff; }
    .privacy::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;   /* subtle light dotted texture, dark-mode counterpart of the mint scenes */
      background-image:radial-gradient(circle, rgba(255,255,255,.06) 1.3px, transparent 1.6px);
      background-size:26px 26px;
      -webkit-mask-image:radial-gradient(120% 85% at 50% 35%, #000 0%, rgba(0,0,0,.22) 60%, transparent 82%);
      mask-image:radial-gradient(120% 85% at 50% 35%, #000 0%, rgba(0,0,0,.22) 60%, transparent 82%); }
    .privacy h2{ color:#fff; }
    .privacy .lead{ color:rgba(255,255,255,.82); max-width:680px; margin:0 auto; }
    .privacy .teal-rule{ width:60px; height:3px; border-radius:3px; background:var(--teal); margin:18px auto 0; }
    .bento{ display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:auto auto; gap:20px; margin-top:56px; }
    .bcard{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:30px; }
    .bcard.big{ grid-row:1 / span 2; display:flex; flex-direction:column; justify-content:center; }
    .bcard .ic{ display:block; margin-bottom:14px; color:var(--teal-soft); }   /* plain teal glyph, no boxed gradient tile */
    .bcard .ic svg{ width:32px; height:32px; }
    .bcard h3{ color:#fff; font-size:1.3rem; }
    .bcard p{ color:rgba(255,255,255,.74); margin:0; line-height:1.55; }
    .bcard.big h3{ font-size:1.5rem; }
    /* Section 6 relayout: split with the relocated sync visual on the left, three equal cards on the right */
    .privacy .split{ grid-template-columns:0.85fr 1.15fr; gap:32px; align-items:stretch; justify-content:normal; margin-top:56px; }
    .priv-visual{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:30px; display:flex; align-items:center; justify-content:center; }
    .privacy .sync-visual{ background:transparent; height:auto; padding:8px 6px; }
    .privacy .sync-visual .cloud{ box-shadow:none; }   /* keep the radial teal fill, drop the glow */
    .priv-cards{ display:flex; flex-direction:column; gap:20px; }
    .priv-cards .bcard{ flex:1; display:flex; flex-direction:column; justify-content:center; }

    /* ============================================================
       7 · PRICING
       ============================================================ */
    .plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:stretch; }
    .plan{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
      border-radius:var(--radius); padding:28px 22px; box-shadow:var(--shadow-sm); }
    .plan.free{ border-color:var(--teal); background:linear-gradient(180deg,#fff,var(--mint-3)); }
    .plan.popular{ border:1.5px solid var(--gold); }       /* gold outline only; shadow like the others */
    .plan-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .plan .pname{ font-size:.82rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-dark); }
    .plan .pill{ font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
      color:var(--gold-deep); background:rgba(205,173,88,.16); border:1px solid var(--gold); border-radius:999px; padding:3px 9px; }
    .plan .price{ font-size:2.1rem; font-weight:800; margin:14px 0 0; letter-spacing:-.02em; }
    .plan .price small{ font-size:.92rem; font-weight:600; color:var(--muted); }
    .plan .alt{ font-size:.9rem; color:var(--muted); margin:3px 0 18px; }
    .plan ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.95rem; }
    .plan li{ display:flex; gap:9px; align-items:flex-start; }
    .plan li svg{ flex:0 0 auto; color:var(--teal); margin-top:3px; }
    .plan .btn{ margin-top:auto; width:100%; }
    .plan.free .price{ color:var(--teal-dark); }
    .arba-note{ text-align:center; margin:28px auto 0; max-width:none; font-size:.97rem; color:#39434d; }   /* no cap so the sentence stays on one line on desktop; wraps naturally on small screens */
    .see-pricing{ text-align:center; margin-top:18px; font-weight:600; }

    /* ============================================================
       8a · FAQ (encapsulated mint)
       ============================================================ */
    .faq{ max-width:840px; margin:0 auto; border:1.5px solid var(--mint-border); border-radius:18px; overflow:hidden; background:var(--mint-q); }
    .faq-item + .faq-item{ border-top:1.5px solid var(--mint-border); }
    .faq-q{ width:100%; background:var(--mint-q); border:0; cursor:pointer; text-align:left; font-family:inherit;
      font-size:1.08rem; font-weight:700; color:var(--navy); padding:22px 56px 22px 24px; position:relative; transition:background .2s; }
    .faq-q:hover{ background:var(--mint-1); }
    .faq-q .chev{ position:absolute; right:20px; top:50%; transform:translateY(-50%); transition:transform .25s var(--ease); color:var(--teal-dark); }
    .faq-item.open .faq-q{ background:var(--mint-1); }
    .faq-item.open .faq-q .chev{ transform:translateY(-50%) rotate(180deg); }
    .faq-a{ max-height:0; overflow:hidden; background:#fff; transition:max-height .3s var(--ease); }
    .faq-a p{ color:#39434d; padding:20px 24px; margin:0; }

    /* ============================================================
       FOOTER (navy)
       ============================================================ */
    .site-footer{ background:var(--navy); color:rgba(255,255,255,.75); padding:66px 0 30px; }
    .footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:38px; }
    .footer-brand img{ height:76px; margin-bottom:16px; }
    .footer-brand p{ font-size:.95rem; margin:0 0 6px; max-width:300px; }
    .footer-brand .cred{ color:var(--gold); font-size:.88rem; font-weight:600; margin-bottom:14px; }
    .footer-social{ display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.75); font-weight:600; font-size:.9rem; }
    .footer-social svg{ width:20px; height:20px; flex:0 0 auto; }
    .footer-social:hover{ color:var(--gold); }
    .footer-col h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
    .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
    .footer-col a{ color:rgba(255,255,255,.75); font-weight:500; }
    .footer-col a:hover{ color:var(--gold); }
    .footer-bottom{ border-top:1px solid var(--navy-soft); margin-top:46px; padding-top:22px; font-size:.85rem; color:rgba(255,255,255,.6); text-align:center; }

    /* ---------- Scroll reveal ---------- */
    .fade{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
    .fade.in{ opacity:1; transform:none; }
    @media (prefers-reduced-motion:reduce){ .fade{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

    /* ---------- Responsive ---------- */
    @media (max-width:1000px){
      .grid-features{ grid-template-columns:repeat(2,1fr); }
      .bgrid{ grid-template-columns:repeat(2,1fr); }
      .plans{ grid-template-columns:repeat(2,1fr); }
      .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
      .split{ grid-template-columns:1fr; gap:36px; }
      .privacy .split{ grid-template-columns:1fr; }   /* stack: sync visual over the cards */
      /* content first, screen/photo second on mobile (homepage import screen, About story photo) */
      .split .device{ margin:0 auto; order:2; }
      #where-it-started .about-photo{ order:2; }
      .bento{ grid-template-columns:1fr; }
      .bcard.big{ grid-row:auto; }
      .steps{ grid-template-columns:1fr; gap:30px; max-width:520px; margin:0 auto; }
      .step-figure{ height:300px; }
    }
    @media (max-width:860px){
      section{ padding:var(--sp-9) 0; }
      .section-head{ margin-bottom:var(--sp-7); }
      .nav-toggle{ display:block; }
      body.menu-open{ overflow:hidden; }
      /* sticky header bar on mobile: logo left, hamburger right */
      .header-main .container, .header-flow .container{ padding:0 20px; }
      /* sticky logo stays at its exact native size (155x82) on phones too; header height matches */
      .hm-links{ display:none; }
      .hm-nav .btn{ display:none; }
      /* transparent header becomes a simple bar (logo + hamburger), white when menu open */
      .header-top{ display:flex; align-items:center; justify-content:space-between; height:76px; padding:0 20px; text-align:left; }
      .header-top .ht-logo img{ height:52px; margin:0; }
      .header-top nav{ display:none; }
      body.menu-open .header-top{ background:#fff; }
      /* hero: stacked; bubbles in a 2-wide grid BEFORE the phone; phone cut off at the section bottom */
      .hero-stage{ grid-template-columns:1fr; gap:16px; }
      .bub-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:520px; margin:0 auto; padding:0; }
      .bub-col.left{ order:1; }
      .bub-col.right{ order:2; }
      .bub-col > *{ width:auto; }
      .phone{ order:3; justify-self:center; width:min(360px,88vw); margin-top:8px; border-radius:46px 46px 0 0; padding-bottom:0; align-self:auto; }
      .phone .screen{ border-radius:38px 38px 0 0; height:430px; aspect-ratio:auto; }
      .life-head{ grid-template-columns:1fr; gap:16px; margin-bottom:36px; }
      .life-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; gap:28px; }
    }
    @media (max-width:560px){
      section{ padding:var(--sp-8) 0; }
      .grid-features{ grid-template-columns:1fr; }
      .bgrid{ grid-template-columns:1fr; }
      .plans{ grid-template-columns:1fr; }
      .footer-grid{ grid-template-columns:1fr; }
      .capture{ flex-direction:column; }
      .capture input[type=email]{ flex:0 0 auto; width:100%; }   /* stacked: keep height:50px (flex:1 would collapse it on the vertical axis) */
      .capture .btn{ width:100%; }
      .hero .subhead{ white-space:normal; }
    }

    /* ============================================================
       SHARED ADDITIONS for the inner pages (Features, Pricing, Getting Started, FAQ, Contact, Legal)
       ============================================================ */

    /* Skip-to-content link (a11y) */
    .skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:#fff; color:var(--teal-dark);
      padding:12px 18px; border-radius:0 0 10px 0; font-weight:700; box-shadow:var(--shadow-sm); }
    .skip-link:focus{ left:0; }

    /* Inner pages use the same header as Home: hidden at the top, slides in (with shadow) after you scroll. See site.js. */

    /* Active nav state */
    .hm-links a[aria-current="page"]{ color:var(--teal-dark); font-weight:700; }
    .mnav a.mlink[aria-current="page"]{ color:var(--teal-dark); background:var(--mint-3); }

    /* Image placeholder, for held / not-yet-built screenshots */
    .img-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
      width:100%; height:100%; min-height:280px; background:var(--mint-3); border:1.5px dashed var(--line);
      border-radius:var(--radius); color:var(--muted); text-align:center; padding:24px; }
    .img-placeholder svg{ width:46px; height:46px; opacity:.5; }
    .img-placeholder .cap{ font-size:.9rem; font-weight:600; }
    /* placeholder inside the cut-off hero-style .phone frame */
    .phone .img-placeholder{ border-radius:38px 38px 0 0; height:560px; min-height:0; }
    /* a full (not cut-off) device frame for inner-page visuals */
    .device-full{ background:var(--screen); border-radius:40px; padding:12px; max-width:300px; margin-inline:auto; box-shadow:var(--shadow-lg); }
    .device-full .au, .device-full .img-placeholder{ aspect-ratio:1290/2796; border-radius:28px; overflow:hidden; height:auto; min-height:0; }
    .device-full .img-placeholder{ background:#11202a; color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.18); }

    /* Feature row helpers (Features page reuses .split) */
    .feat-icon{ width:58px; height:58px; border-radius:15px; display:grid; place-items:center; color:#fff;
      background:var(--grad-btn); box-shadow:0 6px 14px -8px rgba(34,118,115,.35); margin-bottom:18px; }
    .feat-icon svg{ width:28px; height:28px; }
    .feat-copy h2{ margin-top:0; }
    .callout{ border:1px solid var(--mint-border); border-left:3px solid var(--teal); background:var(--mint-3);
      border-radius:12px; padding:18px 20px; margin:22px 0 0; }
    .callout strong{ color:var(--teal-dark); }

    /* Anchor-chip row (Features / FAQ indexes); .chip is defined above */
    .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
    a.chip{ transition:background .2s, border-color .2s, color .2s; }
    a.chip:hover{ border-color:var(--teal); color:var(--teal-dark); }

    /* Closing-CTA card (reused on Features, Pricing, Getting Started) */
    .final-wrap .final-cta{ position:relative; overflow:hidden; max-width:1000px; margin:0 auto; text-align:center;
      border:1px solid var(--mint-border); border-radius:24px; padding:64px 28px;
      background:
        radial-gradient(60% 80% at 50% 0%, rgba(48,169,164,.16), rgba(48,169,164,0) 70%),
        linear-gradient(180deg, var(--mint-2), #fff); }
    .final-cta::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
      background-image:radial-gradient(circle, rgba(34,43,55,.08) 1.2px, transparent 1.5px); background-size:24px 24px;
      -webkit-mask-image:radial-gradient(90% 80% at 50% 20%, #000, transparent 75%); mask-image:radial-gradient(90% 80% at 50% 20%, #000, transparent 75%); }
    .final-cta > *{ position:relative; z-index:1; }
    .final-cta p{ color:#39434d; max-width:620px; margin:0 auto 26px; }
    .cta-actions{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; }
    .cta-actions .seelink{ font-weight:600; }
    .cta-links{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:22px; font-weight:600; }

    /* Check-list (Pricing "what's included") */
    .checklist{ max-width:760px; margin:0 auto; list-style:none; padding:0; display:grid; gap:14px; }
    .checklist li{ display:flex; gap:12px; align-items:flex-start; font-size:1.02rem; }
    .checklist li svg{ flex:0 0 auto; color:var(--teal); margin-top:4px; }

    /* ============================================================
       .scene: the shared hero texture (teal glow + masked dots). One class, focal point
       set by custom properties. Default = centered glow (Pricing/FAQ/Contact).
       .scene-right shifts the glow top-right for the Features composition.
       ============================================================ */
    .scene{ --sx:50%; --sy:0%; --sa:.16; --sb:.10; --dx:50%; --dy:16%;
      position:relative; overflow:hidden; isolation:isolate;
      background:
        radial-gradient(64% 56% at var(--sx) var(--sy), rgba(48,169,164,var(--sa)), transparent 72%),
        radial-gradient(92% 72% at 50% 28%, rgba(95,194,189,var(--sb)), transparent 80%),
        linear-gradient(180deg, #fff 0%, #f4fbf9 56%, var(--mint-1) 100%); }
    .scene::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;   /* dotted texture, faded toward the glow */
      background-image:radial-gradient(circle, rgba(34,43,55,.10) 1.3px, transparent 1.6px); background-size:26px 26px;
      -webkit-mask-image:radial-gradient(120% 90% at var(--dx) var(--dy), #000 0%, rgba(0,0,0,.30) 56%, transparent 83%);
      mask-image:radial-gradient(120% 90% at var(--dx) var(--dy), #000 0%, rgba(0,0,0,.30) 56%, transparent 83%); }
    .scene-right{ --sx:78%; --sy:26%; --sa:.18; --sb:.12; --dx:72%; --dy:42%; }
    .scene .plans{ margin-top:var(--sp-7); }

    /* Comparison table (Pricing): tier columns, check/x icons, highlighted Popular (Breeder) column */
    .cmp-wrap{ overflow-x:auto; margin-top:44px; background:#fff; border:1px solid var(--line);
      border-radius:18px; box-shadow:var(--shadow); }
    table.cmp{ width:100%; border-collapse:collapse; min-width:680px; font-size:.95rem; }
    table.cmp th, table.cmp td{ padding:14px 16px; border-bottom:1px solid var(--line); text-align:center; }
    table.cmp tr:last-child td{ border-bottom:0; }
    table.cmp th:first-child, table.cmp td:first-child{ text-align:left; font-weight:600; color:var(--navy); }
    table.cmp thead th{ font-size:.86rem; letter-spacing:.03em; color:var(--teal-dark); padding-top:18px; padding-bottom:18px; }
    table.cmp thead th .pp{ display:block; font-size:.72rem; font-weight:600; letter-spacing:0; color:var(--muted); margin-top:3px; }
    /* Popular (Breeder) column: dark teal with white content so it reads at a glance */
    table.cmp td:nth-child(3), table.cmp th:nth-child(3){ background:var(--teal-dark); color:#fff;
      border-bottom-color:rgba(255,255,255,.16); }
    table.cmp thead th:nth-child(3){ color:#fff; }
    table.cmp thead th:nth-child(3) .pp{ color:rgba(255,255,255,.78); }
    table.cmp td:nth-child(3) .num{ color:#fff; }
    table.cmp td:nth-child(3) .yes svg{ color:#fff; }
    table.cmp td:nth-child(3) .no svg{ color:rgba(255,255,255,.45); }
    table.cmp td:nth-child(3) .tbd{ color:rgba(255,255,255,.7); }
    .cmp .num{ font-weight:700; color:var(--navy); }
    .cmp .yes{ display:inline-flex; } .cmp .yes svg{ width:20px; height:20px; color:var(--teal); }
    .cmp .no{ display:inline-flex; } .cmp .no svg{ width:16px; height:16px; color:#c4cecb; }
    /* Unreleased-feature marker. Unscoped from table.cmp so the same treatment can be
       reused inline inside .plan card bullets, e.g. "Color genetics (Coming Soon)". */
    .tbd{ color:var(--muted); font-style:italic; }

    /* Contact two-column + form fields */
    .contact-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:42px; align-items:start; }
    .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
    .card + .card{ margin-top:22px; }
    .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
    .field label{ font-weight:600; font-size:.95rem; }
    .field input, .field select, .field textarea{ font-family:inherit; font-size:1rem; padding:12px 14px;
      border:1.5px solid #c6d6d3; border-radius:var(--radius-sm); background:#fff; width:100%; }
    .field textarea{ min-height:140px; resize:vertical; }
    .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(48,169,164,.2); }
    .check-inline{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; margin-bottom:18px; }
    .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
    .form-status{ font-weight:600; color:var(--teal-dark); min-height:1.2em; margin:4px 0 0; }

    /* Slim mint strip (FAQ footer CTA) */
    .strip{ background:var(--mint-2); }
    .strip .inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
    .strip p{ margin:0; font-weight:600; font-size:1.05rem; }

    /* ============================================================
       LEGAL READING TEMPLATE (Privacy, Terms)
       ============================================================ */
    .legal{ max-width:760px; margin:0 auto; }
    .legal .updated{ color:var(--muted); font-size:.95rem; margin:-4px 0 0; }
    .legal .disclaimer{ background:var(--mint-q); border:1px solid var(--mint-border); border-radius:12px;
      padding:16px 18px; font-size:.95rem; color:#39434d; margin:24px 0; }
    .legal .toc{ background:var(--mint-3); border:1px solid var(--mint-border); border-radius:14px; padding:20px 24px; margin:24px 0 40px; }
    .legal .toc h2{ font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal-dark); margin:0 0 12px; }
    .legal .toc ol{ margin:0; padding-left:20px; columns:2; column-gap:28px; font-size:.95rem; }
    .legal .toc a{ line-height:1.95; }
    .legal-body{ font-size:1.0625rem; line-height:1.7; }
    .legal-body h2{ font-size:1.4rem; margin:42px 0 12px; letter-spacing:-.01em; }
    .legal-body h2 b{ font-weight:800; }
    .legal-body ul{ padding-left:22px; margin:0 0 1rem; }
    .legal-body li{ margin-bottom:8px; }
    .legal-body h3{ font-size:1.12rem; font-weight:700; margin:26px 0 8px; letter-spacing:-.005em; color:var(--text); }

    /* Website vs HerdMaster-app policy tabs (Privacy, Terms) */
    .legal-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:26px 0 0; border-bottom:2px solid var(--mint-border); }
    .legal-tab{ appearance:none; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px;
      padding:11px 18px; font:inherit; font-size:1rem; font-weight:700; color:var(--muted); cursor:pointer;
      border-radius:10px 10px 0 0; transition:color .18s ease, border-color .18s ease, background .18s ease; }
    .legal-tab:hover{ color:var(--teal-dark); background:var(--mint-3); }
    .legal-tab[aria-selected="true"]{ color:var(--teal-dark); border-bottom-color:var(--teal); }
    .legal-tab:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
    .legal-panel[hidden]{ display:none; }
    .legal-panel .updated{ margin:22px 0 0; }

    /* Inner-page responsive */
    @media (max-width:860px){
      .contact-grid{ grid-template-columns:1fr; gap:30px; }
      .legal .toc ol{ columns:1; }
    }

    /* ============================================================
       FEATURES HERO (full-width section: soft teal gradient + dots, free-floating content)
       ============================================================ */
    .fhero-section{ padding:var(--sp-7) 0 var(--sp-8); }   /* texture comes from .scene scene-right */
    .fhero-grid{ display:grid; grid-template-columns:1.02fr 1fr; align-items:center; gap:var(--sp-5); }
    .fhero-copy h1{ margin:0 0 18px; font-size:clamp(2.1rem,3.9vw,3.1rem); }
    .fhero-copy p{ color:var(--ink); line-height:1.6; margin:0; font-size:1.12rem; max-width:30em; }
    .fhero-art{ position:relative; }

    @media (max-width:860px){          /* tablet: stack, composition below the copy (gap matches the .split two-column convention) */
      .fhero-section{ padding:48px 0 56px; }
      .fhero-grid{ grid-template-columns:1fr; gap:36px; }
    }

    /* ============================================================
       FEATURES HERO COMPOSITION (.fhx-): dark dashboard phone framed by 3 proof cards.
       Reuses .phone, .au.dark, .bi-gold + tokens. Fixed 680x600 design canvas,
       scaled to fit its column by site.js (fitFeaturesHero).
       ============================================================ */
    .fhx-frame{ width:100%; max-width:560px; margin-inline:auto; }
    .fhx-stage{ position:relative; width:680px; height:600px; transform-origin:top left; overflow:hidden; background:transparent; }
    .fhx-device{ display:contents; }   /* desktop: panel+phone position absolutely within the stage; regroups into one box on mobile */
    /* gradient panel matching the heading text gradient: phone pokes above the top, cut flush at the bottom */
    .fhx-panel{ position:absolute; left:312px; top:110px; width:330px; height:292px; border-radius:32px;
      background:var(--grad-head); z-index:1; }
    .fhx-lines{ position:absolute; inset:0; z-index:2; }
    .fhx-phone{ position:absolute; left:344px; top:34px; width:262px; height:366px; overflow:hidden; z-index:3; }
    /* Pin the phone geometry so the home-hero's @media(max-width:860px) .phone rules don't leak in
       and shrink/recenter it inside the clip (that broke the composition between 700 and 860px). */
    .fhx-phone .phone{ width:404px; margin:0; padding:12px 12px 0; border-radius:50px 50px 0 0;
      transform:scale(.648); transform-origin:top left; box-shadow:none; align-self:start; justify-self:start; order:0; }
    .fhx-phone .phone .screen{ background:var(--screen); height:560px; aspect-ratio:auto; border-radius:38px 38px 0 0; }
    .fhx-phone .au-pad{ flex:1; }   /* push the tab bar to the bottom of the screen */
    .fhx-card{ position:absolute; z-index:4; width:178px; background:#fff; border:1px solid var(--line);
      border-radius:18px; padding:16px; box-shadow:var(--shadow); text-align:center; }
    .fhx-card.a{ left:64px; top:108px; width:178px; }
    .fhx-card.b{ left:36px; top:278px; width:200px; text-align:left;
      background:linear-gradient(165deg,#26374e,#192434); border-color:#2c3a52; }
    .fhx-card.c{ left:346px; top:424px; width:262px; padding:20px 18px; }   /* centered under the panel, same width as the phone frame */
    .fhx-ic{ width:50px; height:50px; display:block; margin:0 auto 8px; color:var(--teal); fill:currentColor; }
    .fhx-t{ font-weight:800; color:var(--navy); font-size:18px; line-height:1.18; }
    .fhx-card.c .fhx-t{ font-size:23px; }
    .fhx-s{ color:var(--muted); font-size:13px; margin-top:4px; }
    .fhx-s.up{ text-transform:uppercase; letter-spacing:.09em; font-size:11.5px; margin-top:6px; }
    /* card B (dark): eyebrow + filled area chart + big metric, like the reference */
    .fhx-brow{ display:flex; align-items:center; gap:8px; color:#b6ddd8; font-weight:600; font-size:15.5px; margin-bottom:10px; }
    .fhx-brow svg{ width:21px; height:21px; fill:#b6ddd8; }
    .fhx-area{ width:100%; height:62px; display:block; margin:2px 0 14px; }
    .fhx-bh{ font-weight:800; color:#fff; font-size:30px; line-height:1.04; letter-spacing:-.5px; }
    .fhx-bh small{ display:block; font-weight:600; font-size:14px; color:#9fb0bd; margin-top:4px; letter-spacing:0; }
    .fhx-stack{ display:flex; justify-content:center; margin-bottom:12px; }
    .fhx-av{ width:40px; height:40px; border-radius:50%; border:3px solid #fff; overflow:hidden;
      background-size:cover; background-position:center; background-repeat:no-repeat; }
    .fhx-av img{ width:100%; height:100%; object-fit:cover; display:block; }
    .fhx-av+.fhx-av{ margin-left:-14px; }

    /* Mobile: drop the floating layout. Stack the gradient box + phone, then the three
       cards in a single column, all the same width and the same height. Connector hidden. */
    @media (max-width:700px){
      .fhx-frame{ max-width:440px; }
      .fhx-stage{ position:static; width:100%; height:auto; transform:none !important;
        overflow:visible; display:flex; flex-direction:column; gap:16px; }
      .fhx-lines{ display:none; }
      .fhx-device{ display:block; position:relative; width:100%; height:300px; overflow:hidden;
        border-radius:24px; background:var(--grad-head); }
      .fhx-panel{ display:none; }
      .fhx-phone{ position:absolute; left:50%; top:26px; width:262px; height:auto; overflow:visible;
        transform:translateX(-50%); }
      .fhx-card{ position:static; left:auto; top:auto; width:100%; min-height:122px; box-sizing:border-box;
        display:flex; flex-direction:column; justify-content:center; }
      .fhx-card.a, .fhx-card.b, .fhx-card.c{ left:auto; top:auto; width:100%; }
      .fhx-card.a, .fhx-card.c{ align-items:center; }
      .fhx-area{ display:none; }   /* keep card B's height in line with the others */
    }

    /* ============================================================
       LAUNCH-LIST MODAL (injected by site.js; opened by every "Join" CTA except the home hero form)
       ============================================================ */
    .modal[hidden]{ display:none; }
    .modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
    .modal-overlay{ position:absolute; inset:0; background:rgba(34,43,55,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
    .modal-card{ position:relative; z-index:1; width:min(460px,100%); background:#fff; border-radius:22px;
      padding:36px 30px 28px; box-shadow:0 30px 80px rgba(34,43,55,.34); text-align:left;
      animation:modalIn .22s ease both; }
    @keyframes modalIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
    .modal-x{ position:absolute; top:14px; right:14px; width:36px; height:36px; padding:0; border:0; border-radius:10px;
      background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
    .modal-x:hover{ background:var(--mint-3); color:var(--navy); }
    .modal-x svg{ width:20px; height:20px; }
    .modal-card .eyebrow{ margin-bottom:14px; }
    .modal-card h2{ margin:0 0 8px; font-size:clamp(1.4rem,3.4vw,1.7rem); }
    .modal-sub{ color:var(--muted); margin:0 0 18px; line-height:1.5; }
    .modal-card .capture{ margin:0; }
    .modal-card .form-note{ margin:10px 2px 0; }
    @media (prefers-reduced-motion: reduce){ .modal-card{ animation:none; } }
    body.modal-open{ overflow:hidden; }

    /* ============================================================
       FEATURES: six-card grid (icon + title + screen peek + description),
       styled like the home "How it works" cards. Screens are the real .au
       component files, embedded via iframe in #embed (frameless) mode.
       ============================================================ */
    .feat-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:60px; }   /* doubled from the standard 30px for more breathing room */
    .feat-card{ display:flex; flex-direction:column; scroll-margin-top:96px; }   /* clear the sticky header on deep-link */
    .fc-icon{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
      background:var(--navy); color:var(--teal-ice); margin-bottom:14px; }
    .fc-icon svg{ width:25px; height:25px; }
    .fc-title{ margin:0 0 8px; font-size:1.22rem; }
    .fc-desc{ margin:0 0 18px; color:var(--ink); line-height:1.55; min-height:6em; }   /* ~4 lines; equalize so the phones line up */
    .fc-screen{ height:430px; border-radius:22px; overflow:hidden;
      background:linear-gradient(180deg,#eef6f3 0%,#dcece7 100%); box-shadow:0 12px 28px -12px rgba(34,43,55,.28); }
    .fc-screen iframe{ width:100%; height:840px; border:0; display:block; pointer-events:none; }

    /* embed mode: a component loaded with #embed (inside an iframe) drops its page padding + label.
       Card screens KEEP the phone frame, rising into the box and cut at the bottom. The pedigree
       document has no .preview/.preview-phone, so only its page chrome (padding/label) is trimmed. */
    body.embed{ padding:0 !important; background:transparent !important; }
    body.embed .preview{ max-width:340px !important; margin:22px auto 0 !important; }
    body.embed .preview-label{ display:none !important; }

    /* Two large feature panels (Pedigrees document, Offline + iCloud) */
    .feat-panel .panel-head{ max-width:620px; }
    /* the pedigree document is a fixed-width landscape artifact (1080x1606); render it at design size
       and scale it to fit the panel by site.js, so it never clips or collapses on narrow screens */
    .fp-doc{ position:relative; width:100%; overflow:hidden; border-radius:18px; background:#e9eeec; box-shadow:var(--shadow); margin-top:28px; }
    /* the inlined pedigree doc renders at its 1080px design width, scaled to fit by site.js */
    .fp-doc .ped-doc{ width:1080px; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; transform-origin:top left; }

    /* Pedigrees is a full-width section: centered header, then the pedigree document rendered large
       across the container (not squeezed into a two-column phone rail). */
    .fp-panel{ text-align:center; }
    .fp-panel .panel-head{ max-width:640px; margin:0 auto; }
    .fp-panel .panel-head > p{ margin-inline:auto; }
    .fp-panel .fp-doc{ max-width:960px; margin:32px auto 0; }

    @media (max-width:900px){ .feat-cards{ grid-template-columns:1fr 1fr; } }
    @media (max-width:620px){ .feat-cards{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

    /* ============================================================
       PROPORTIONATE PHONE (#embed-scroll): real-iPhone-ratio phone whose screen
       SCROLLS inside the frame (no scrollbar, wheel/touch to swipe). Status bar and
       tab bar stay pinned; content passes under. Used by /features/ and the gallery.
       ============================================================ */
    /* dynamic island lives ON the status bar (its ::after), vertically centered with
       the time and system icons at any phone width */
    body.embed.scroll .preview-phone .au-status{ position:relative; padding:12px 22px; }
    body.embed.scroll .preview-phone .au-status::after{ content:""; position:absolute; left:50%; top:50%;
      transform:translate(-50%,-50%); width:88px; height:22px; border-radius:11px; background:#0e1620;
      pointer-events:none; }   /* dynamic island */

    body.embed.scroll .preview{ margin:0 auto !important; }
    /* percentage bezel (12/340) keeps the phone's total ratio exactly 340:708 at ANY
       width, so it always fills its aspect-ratio iframe with no sliver at the bottom */
    body.embed.scroll .preview-phone{ box-shadow:none; position:relative; padding:3.5294%; }
    /* position:static so the pinned FAB anchors to the non-scrolling bezel, not the scroll
       canvas; clip-path re-clips the sticky bars, whose composited layers can paint past
       the rounded corners (the "screen poking out of the frame" artifact) */
    body.embed.scroll .preview-phone .au{ height:auto; aspect-ratio:316/684; overflow-y:auto; overflow-x:hidden;
      overscroll-behavior:contain; scrollbar-width:none; position:static; clip-path:inset(0 round 30px); }
    body.embed.scroll .preview-phone .au::-webkit-scrollbar{ display:none; }
    body.embed.scroll .preview-phone .au-status{ position:sticky; top:0; z-index:6; background:inherit; }
    body.embed.scroll .preview-phone .au-tabs{ position:sticky; bottom:0; z-index:6; margin-top:auto; }
    body.embed.scroll .preview-phone .au-fab{ bottom:74px; z-index:7; }   /* floats above the tab bar; the screen scrolls beneath it */

    /* Feature copy column + checklist (shared by the /features/ sections) */
    .fz-copy h2{ margin:10px 0 14px; }
    .fz-copy > p{ color:var(--ink); line-height:1.65; margin:0; }
    .fz-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
    .fz-list li{ display:flex; gap:10px; align-items:flex-start; line-height:1.55; color:var(--ink); }
    .fz-list li svg{ flex:0 0 auto; width:18px; height:18px; color:var(--teal); margin-top:4px; }

    /* ============================================================
       FEATURES sections (/features/): one full-width section per feature,
       alternating white and green .scene texture, phone free-floating
       beside .fz-copy/.fz-list copy. Screens parallax inside their frames
       via postMessage (site.js), and .fs3-chips swap between sibling
       screens of the same feature.
       ============================================================ */
    .fs3-intro{ padding:var(--sp-10) 0 var(--sp-2); }
    .fs3-sec{ scroll-margin-top:72px; }
    .fs3-sec > .container{ max-width:1120px; }   /* narrower than the site container so copy sits close to the edge-hugged phones */
    /* phone hugs the outer edge in a narrow fixed column (340 = the art width); copy fills a wide column beside it */
    .fs3-grid{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:clamp(30px,3.2vw,48px); align-items:center; }
    .fs3-sec.rev .fs3-grid{ grid-template-columns:minmax(0,1fr) 340px; }
    .fs3-sec.rev .fs3-art{ order:2; }   /* zig-zag: phone left, then right, then left... */
    .fs3-art{ min-width:0; display:flex; flex-direction:column; align-items:center; }
    /* The phone bezel is drawn page-side now (screens are inlined .au markup, not iframes).
       padding = 12/340 keeps the whole phone at a 340:708 ratio; the .au screen inside holds
       the 316:684 ratio and clips at the rounded edge, status bar + tab bar pinned. */
    .fs3-phone{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); width:100%; max-width:340px;
      background:var(--screen); border-radius:42px; padding:3.5294%; box-shadow:0 30px 60px -26px rgba(14,22,32,.5); }
    /* every screen occupies the same grid cell so they overlay EXACTLY (identical box,
       even bezel) and crossfade opacity on switch — no axis-relative inset mismatch */
    /* pointer-events:none keeps the framed screen a STATIC crop: touch/wheel pass through
       to the page instead of scrolling the screen, while overflow-y:auto still lets the
       status bar and tab bar stay pinned. (Mirrors the old iframe's pointer-events:none.) */
    .fs3-phone .au{ grid-area:1/1; height:auto; aspect-ratio:316/684; align-self:start; border-radius:30px;
      overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; position:static;
      clip-path:inset(0 round 30px); pointer-events:none; transition:opacity .28s ease; }
    .fs3-phone .au::-webkit-scrollbar{ display:none; }
    .fs3-phone .au:not(.show){ opacity:0; }
    /* pinned chrome + dynamic island (mirrors the #embed-scroll rules, keyed page-side) */
    .fs3-phone .au-status{ position:sticky; top:0; z-index:6; background:inherit; padding:12px 22px; }
    .fs3-phone .au-status::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:88px; height:22px; border-radius:11px; background:#0e1620; pointer-events:none; }
    .fs3-phone .au-tabs{ position:sticky; bottom:0; z-index:6; margin-top:auto; }
    .fs3-phone .au-fab{ bottom:74px; z-index:7; }
    /* multi-screen sections: phone + a tight switcher rail on the edge, wide copy beside them */
    .fs3-sec.multi .fs3-grid{ grid-template-columns:340px auto minmax(0,1fr); gap:20px; }
    .fs3-sec.multi.rev .fs3-grid{ grid-template-columns:minmax(0,1fr) auto 340px; }
    .fs3-sec.multi .fs3-art{ order:1; }  .fs3-sec.multi .fs3-rail{ order:2; }  .fs3-sec.multi .fz-copy{ order:3; }
    .fs3-sec.multi.rev .fs3-art{ order:3; }  .fs3-sec.multi.rev .fz-copy{ order:1; }
    .fs3-sec.multi:not(.rev) .fz-copy{ margin-left:clamp(14px,2.2vw,32px); }   /* extra separation from the rail */
    .fs3-sec.multi.rev .fz-copy{ margin-right:clamp(14px,2.2vw,32px); }
    .fs3-sec.multi:not(.rev) .fs3-rail{ flex-direction:row-reverse; }          /* tabs hug the phone, label sits outside */
    .fs3-rail{ align-self:center; display:flex; align-items:center; gap:12px; }
    .fs3-rail-name{ writing-mode:vertical-rl; transform:rotate(180deg); text-transform:uppercase; letter-spacing:.14em;
      font-size:.72rem; font-weight:800; color:var(--teal-dark); white-space:nowrap; }
    /* Uniform pill size across every section: a fixed 68px pill so even the 2-pill rails span
       ~146px, covering the longest switcher label (~138px) with room to spare. */
    .fs3-pills{ display:flex; flex-direction:column; gap:10px; }
    .fs3-pill{ height:68px; width:9px; padding:0; border:0; border-radius:999px; background:#d5e0dd; cursor:pointer;
      transition:background .2s ease, box-shadow .2s ease; }
    .fs3-pill:hover{ background:#bccfca; }
    .fs3-pill.on, .fs3-pill.on:hover{ background:linear-gradient(180deg, var(--teal-soft), var(--teal-dark));
      box-shadow:0 4px 12px -4px rgba(48,169,164,.5); }
    .fs3-art .step-figure{ width:100%; max-width:360px; }   /* offline sync card fills the art column */
    .fs3-art .fp-doc{ margin-top:0; }                       /* pedigrees document in the art column */
    /* Sales & Payments: designed payment card (sync-visual family, white card, teal accents) */
    .pay-card{ width:100%; max-width:340px; margin:0 auto; background:#fff; border:1px solid var(--line);
      border-radius:20px; padding:22px 22px 20px; box-shadow:0 24px 50px -24px rgba(14,22,32,.35); text-align:left; }
    .pay-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .pay-tag{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.95rem; color:var(--navy); }
    .pay-tag svg{ width:18px; height:18px; color:var(--teal); }
    .pay-pill{ font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-dark);
      background:var(--mint-3); border:1px solid rgba(48,169,164,.25); border-radius:999px; padding:4px 10px; }
    .pay-buyer{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .pay-av{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; }
    .pay-nm{ font-weight:700; color:var(--navy); }
    .pay-sub{ font-size:.85rem; color:var(--muted); margin-top:1px; }
    .pay-amt{ font-size:2.1rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; margin:16px 0 6px; }
    .pay-via{ font-size:.8rem; color:var(--muted); margin-bottom:8px; }
    .pay-methods{ display:flex; gap:8px; margin-bottom:16px; }
    .pay-method{ flex:1; text-align:center; font-weight:700; font-size:.9rem; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 0; }
    .pay-status{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--teal-dark); background:var(--mint-3); border-radius:12px; padding:10px 12px; }
    .pay-check{ flex:0 0 auto; display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff; align-items:center; justify-content:center; }
    .pay-check svg{ width:12px; height:12px; }
    @media (max-width:860px){
      /* stack every section into one column: content first, screen second */
      .fs3-grid, .fs3-sec.rev .fs3-grid,
      .fs3-sec.multi .fs3-grid, .fs3-sec.multi.rev .fs3-grid{ grid-template-columns:1fr; gap:24px; }
      .fz-copy{ order:1; }
      .fs3-art, .fs3-sec.rev .fs3-art{ order:2; }
      .fs3-sec.multi .fz-copy, .fs3-sec.multi.rev .fz-copy{ order:1; }
      .fs3-sec.multi .fs3-art, .fs3-sec.multi.rev .fs3-art{ order:2; }
      .fs3-sec.multi .fs3-rail, .fs3-sec.multi.rev .fs3-rail{ order:3; }
      .fs3-sec.multi:not(.rev) .fz-copy, .fs3-sec.multi.rev .fz-copy{ margin:0; }
      .fs3-phone{ max-width:300px; margin-inline:auto; }
      /* center the eyebrow + title; body copy stays left-aligned */
      .fs3-sec .fz-copy{ text-align:center; }
      .fs3-sec .fz-copy > p, .fs3-sec .fz-list{ text-align:left; }
      /* rail: a compact horizontal strip under the phone (reset the desktop row-reverse) */
      .fs3-sec.multi:not(.rev) .fs3-rail, .fs3-sec.multi.rev .fs3-rail{ flex-direction:column-reverse; height:auto; gap:10px; margin-top:6px; }
      .fs3-rail-name{ writing-mode:horizontal-tb; transform:none; }
      .fs3-pills{ flex-direction:row; height:auto; width:min(260px,72%); }
      .fs3-pill{ flex:1; width:auto; height:9px; }
    }

    /* ============================================================
       GETTING STARTED GUIDE (docs layout: sticky TOC + reading column, no screenshots)
       ============================================================ */
    .guide-head{ padding:60px 0 4px; }
    .guide-head h1{ margin-bottom:16px; }
    .guide-head .lead{ color:var(--ink); max-width:none; margin:0; }   /* left-aligned, runs the full width like the heading */
    .guide-meta{ display:inline-flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:22px;
      font-size:.92rem; color:var(--muted); }
    .guide-meta span{ display:inline-flex; align-items:center; gap:7px; }
    .guide-meta b{ color:var(--teal-dark); font-weight:700; }
    .guide-meta .dot{ width:4px; height:4px; border-radius:50%; background:#c2ccc9; }

    .guide-body{ padding:34px 0 96px; }
    .guide-grid{ display:grid; grid-template-columns:232px 1fr; gap:56px; align-items:start; }

    .guide-toc{ position:sticky; top:108px; }
    .guide-toc .toc-label{ font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-dark); margin:0 0 12px; }
    .guide-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
    .guide-toc li{ counter-increment:toc; }
    .guide-toc ol a{ display:flex; gap:11px; align-items:baseline; padding:9px 12px; border-radius:10px; color:var(--muted);
      text-decoration:none; font-weight:600; line-height:1.3; border-left:2px solid transparent; transition:background .15s, color .15s; }
    .guide-toc ol a::before{ content:counter(toc); font-variant-numeric:tabular-nums; font-weight:800; color:#c2ccc9; }
    .guide-toc ol a:hover{ background:var(--mint-3); color:var(--navy); }
    .guide-toc ol a.active{ background:var(--mint-q); color:var(--teal-dark); border-left-color:var(--teal); }
    .guide-toc ol a.active::before{ color:var(--teal); }
    .guide-toc .toc-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:.9rem; }
    .guide-toc .toc-foot a{ color:var(--teal-dark); font-weight:600; }

    .guide-content{ max-width:720px; }
    .guide-sec{ scroll-margin-top:104px; padding:0 0 46px; border-bottom:1px solid var(--line); margin-bottom:46px; }   /* padding:0 top so the global section{padding:112px} doesn't leak in */
    .guide-sec:last-of-type{ border-bottom:0; }
    .gs-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
    .gs-num{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
      background:var(--navy); color:var(--teal-ice); font-weight:800; font-size:1.15rem; }
    .gs-head h2{ margin:0; font-size:1.5rem; }
    .guide-sec p{ color:var(--ink); line-height:1.65; }
    .guide-sec > ul{ list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:14px; }
    .guide-sec > ul li{ position:relative; padding-left:26px; color:var(--ink); line-height:1.6; }
    .guide-sec > ul li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--teal); }
    .guide-sec strong{ color:var(--navy); }

    /* numbered sub-steps */
    .gs-steps{ counter-reset:st; list-style:none; padding:0; margin:18px 0; display:flex; flex-direction:column; gap:15px; }
    .gs-steps li{ counter-increment:st; position:relative; padding-left:42px; color:var(--ink); line-height:1.6; }
    .gs-steps li::before{ content:counter(st); position:absolute; left:0; top:-2px; width:27px; height:27px; border-radius:8px;
      background:var(--mint-q); color:var(--teal-dark); font-weight:800; font-size:.9rem; display:grid; place-items:center; }

    /* callouts: tip (teal), note (slate), warn (gold) */
    .callout.tip, .callout.note, .callout.warn{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:12px; margin:18px 0; line-height:1.55; color:var(--ink); }
    .callout.tip{ background:var(--mint-q); border:1px solid var(--mint-border); border-left:3px solid var(--teal); }
    .callout.note{ background:#f2f6f5; border:1px solid var(--line); border-left:3px solid var(--navy-3); }
    .callout.warn{ background:rgba(205,173,88,.12); border:1px solid rgba(205,173,88,.5); border-left:3px solid var(--gold-deep); }
    .callout .ci{ flex:0 0 auto; margin-top:1px; } .callout .ci svg{ width:22px; height:22px; display:block; }
    .callout.tip .ci{ color:var(--teal); } .callout.note .ci{ color:var(--navy-3); } .callout.warn .ci{ color:var(--gold-deep); }
    .callout.tip b, .callout.warn b, .callout.note b{ display:block; margin-bottom:2px; }
    .callout.tip b{ color:var(--teal-dark); } .callout.warn b{ color:var(--gold-deep); } .callout.note b{ color:var(--navy); }

    /* menu-path breadcrumb chip */
    .menu-path{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; padding:8px 13px;
      background:#fff; border:1px solid var(--line); border-radius:10px; font-size:.9rem; font-weight:600; color:var(--navy); }
    .menu-path .sep{ color:#c2ccc9; }
    .menu-path .pk{ color:var(--teal-dark); }

    /* choose-your-path trio */
    .path-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0; }
    .path-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 16px; }
    .path-card .pc-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--mint-q); color:var(--teal-dark); margin-bottom:11px; }
    .path-card .pc-ic svg{ width:21px; height:21px; }
    .path-card h4{ margin:0 0 5px; font-size:1rem; color:var(--navy); }
    .path-card p{ margin:0; font-size:.9rem; color:var(--muted); line-height:1.5; }

    /* quiet end block (no hard sell) */
    .guide-end{ margin-top:10px; padding:24px 26px; border:1px solid var(--mint-border); border-radius:16px; background:var(--mint-3); }
    .guide-end h3{ margin:0 0 6px; font-size:1.15rem; }
    .guide-end p{ margin:0 0 16px; }
    .guide-end .ge-links{ display:flex; gap:14px 22px; flex-wrap:wrap; align-items:center; font-weight:600; }
    .guide-end .ge-links a{ color:var(--teal-dark); }

    @media (max-width:900px){
      .guide-grid{ grid-template-columns:1fr; gap:24px; }
      .guide-toc{ position:static; border-bottom:1px solid var(--line); padding-bottom:16px; }
      .guide-toc ol{ flex-flow:row wrap; gap:6px; }
      .guide-toc ol a{ border-left:0; border:1px solid var(--line); padding:7px 12px; }
      .guide-toc ol a.active{ border-color:var(--teal); }
      .guide-content{ max-width:none; }
      .path-cards{ grid-template-columns:1fr; }
    }

    /* FAQ hero: the scroll-link chips sit a comfortable distance under the intro paragraph */
    .scene .chip-row{ justify-content:center; margin-top:28px; }

    /* FAQ: all categories in one white section, each a centered group */
    .faq-group{ scroll-margin-top:104px; }
    .faq-group + .faq-group{ margin-top:60px; }
    .faq-group > h2{ text-align:center; margin:0 0 26px; }

    /* Contact: header + cards in one hero (green texture); modest gap between intro and the cards */
    .contact-intro{ margin-bottom:48px; }

    /* ============================================================
       ABOUT PAGE (founder story)
       ============================================================ */
    /* Reversed .split so a section can put the copy left and the photo right (hero). */
    .split.rev{ grid-template-columns:minmax(0,560px) auto; }
    /* Rounded founder/story photo inside a .split column, reusing .life-card framing. */
    .about-photo{ width:100%; max-width:360px; margin-inline:auto; }
    .about-lead{ margin-top:18px; }
    /* Pull-quote treatment for the two founder quotes, modeled on the teal .life-close line. */
    .pull-quote{ text-align:center; font-weight:800; color:var(--teal-dark);
      font-size:clamp(1.35rem,3vw,1.7rem); line-height:1.4; max-width:760px; margin:38px auto 0; }
    .pull-quote.on-dark{ color:var(--teal-soft); }               /* teal-ice on the navy band */
    /* Credential strip on "On the show table": teal-outline pills, like the hero bubbles. */
    .cred-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }
    .cred-pill{ border:1px solid var(--teal); color:var(--teal-dark); background:rgba(48,169,164,.06);
      border-radius:999px; padding:8px 15px; font-size:.85rem; font-weight:600; }
    .about-dedication{ text-align:center; color:var(--muted); font-size:.92rem; margin:22px auto 0; max-width:640px; }
    /* Pull-quote sitting inside a copy column (under the paragraph), left-aligned. */
    .pull-quote.in-col{ text-align:left; max-width:none; margin:26px 0 0; }
    /* "Why HerdMaster": white section, phone left, copy right, left-aligned.
       The component bezel is a fixed 340px, so keep .fs3-phone at 340 (features-identical, the
       frame hugs the screen) inside a 360px column that lines up with the 360px photos above. */
    #why .split{ grid-template-columns:360px minmax(0,560px); gap:48px; align-items:center; justify-content:center; }
    #why .fs3-phone{ width:340px; max-width:340px; justify-self:start; }
    #why .pull-quote{ text-align:left; max-width:none; margin:26px 0 0; }
    /* On the show table: an app screenshot sits in the right column (reversed split) */
    #show-table .split.rev{ grid-template-columns:minmax(0,560px) 360px; }
    #show-table .fs3-phone{ width:340px; max-width:340px; justify-self:end; }
    /* credential pills live under the copy in the left column, left-aligned */
    #show-table .cred-strip{ justify-content:flex-start; margin-top:24px; }
    @media (max-width:1000px){
      /* #show-table .split.rev must be listed by its id-scoped selector, or the desktop
         two-column rule (higher specificity) wins and the section won't stack on mobile. */
      .split.rev, #why .split, #show-table .split.rev{ grid-template-columns:1fr; }
      #why .fs3-phone, #show-table .fs3-phone{ width:100%; max-width:340px; justify-self:center; margin-inline:auto; }
      /* content first, screen second: #why has the phone first in source, so push it below */
      #why .fs3-phone{ order:2; }
    }

    /* ============================================================
       SPEED COMPARISON BAND (#speed, Features page) — lifted from
       build/speed-compare-component.html; JS lives in site.js.
       ============================================================ */
    .spd-band{ background:var(--mint-3, #f2f7f5); padding:56px 0; }
    .spd-inner{ max-width:1040px; margin-inline:auto; }
    .spd-title{ display:flex; align-items:center; justify-content:center; gap:12px;
      font-size:1.9rem; font-weight:800; color:var(--text,#0c1116); margin:0 0 28px; text-align:center; }
    .spd-title svg{ width:34px; height:34px; flex:0 0 auto; }

    .spd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
    .spd-card{ background:#fff; border:1px solid var(--line,#e6e6e6); border-radius:18px; padding:24px 26px; }

    .spd-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
    .spd-mark{ width:56px; height:56px; flex:0 0 auto; border-radius:13px; background:#16181a;
      display:grid; place-items:center; overflow:hidden; }
    .spd-mark img{ width:44px; height:auto; display:block; }
    .spd-mark.is-alt{ background:#3d4247; }
    .spd-mark.is-alt svg{ width:30px; height:30px; color:#fff; }
    .spd-brand{ line-height:1.15; }
    .spd-name{ font-size:1.55rem; font-weight:800; }
    .spd-name .a{ color:var(--text,#0c1116); } .spd-name .b{ color:var(--gold,#CDAD58); }
    .spd-name.is-alt{ font-size:1.4rem; letter-spacing:.02em; color:#3d4247; }
    .spd-tag{ font-size:.6rem; letter-spacing:.16em; font-weight:700; color:#8a918e; margin-top:3px; }

    .spd-bar{ border-radius:9px; padding:9px 0; text-align:center; color:#fff;
      font-size:.8rem; font-weight:700; letter-spacing:.09em; margin-bottom:14px; background:var(--teal-dark,#227673); }
    .spd-bar.is-alt{ background:#6f7671; }

    .spd-mid{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
    .spd-rabbit{ flex:0 0 40%; height:auto; border-radius:14px; display:block; }
    .spd-watch{ flex:1; height:230px; }

    .spd-status{ background:var(--mint-q,#e9f5ef); border-radius:12px; padding:13px 16px;
      display:flex; align-items:center; gap:12px; opacity:.28; transition:opacity .35s; }
    .spd-status.is-done{ opacity:1; }
    .spd-status.is-alt{ background:#f1f3f2; }
    .spd-ico{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--teal,#30A9A4);
      display:grid; place-items:center; }
    .spd-ico.is-alt{ background:none; color:#8b938f; border-radius:0; }
    .spd-s1{ display:block; font-size:.72rem; color:#7d8985; }
    .spd-s2{ display:block; font-size:.84rem; font-weight:800; color:var(--teal-dark,#227673); letter-spacing:.02em; }
    .spd-s2.is-alt{ color:#5f6763; }

    .spd-foot{ margin-top:22px; background:var(--navy,#222B37); border-radius:14px; padding:16px 24px;
      display:flex; align-items:center; justify-content:center; gap:14px; text-align:center; }
    .spd-foot svg{ width:30px; height:30px; flex:0 0 auto; color:var(--teal-soft,#5FC2BD); }
    .spd-foot .l1{ color:#fff; font-size:1.18rem; font-weight:700; }
    .spd-foot .l1 em{ font-style:normal; color:var(--teal-soft,#5FC2BD); }
    .spd-foot .l2{ color:rgba(255,255,255,.72); font-size:.86rem; }

    .spd-note{ margin:12px 0 0; text-align:center; font-size:.72rem; color:var(--muted,#555); }

    @media (max-width:720px){
      .spd-grid{ grid-template-columns:1fr; }
      .spd-title{ font-size:1.3rem; }
      .spd-watch{ height:175px; }
    }

/* ==== screens:start (generated by scripts/inline-screens.mjs — do not edit by hand) ==== */
    /* active-breedings */
    .au[data-screen="active-breedings"] .au-hm{ font-size:var(--au-fs-display); font-weight:800; letter-spacing:.02em; padding:2px 18px 10px; display:flex; align-items:center; justify-content:space-between; }
    .au[data-screen="active-breedings"] .au-hm .au-bell{ width:34px; height:34px; border-radius:50%; background:var(--au-tint); color:var(--au-tealink); display:grid; place-items:center; }
    .au[data-screen="active-breedings"] .au-hm .au-bell svg{ width:18px; height:18px; }

    /* dashboard-dark */
    .au[data-screen="dashboard-dark"].dark{ --au-card:#16232c; --au-tile:#1a2832; --au-tile-bd:#2b3a45; --au-ink:#eef3f4;
    --au-sec:#90a4ab; --au-sep:#2b3a45; --au-tealink:#80d8d2; --au-tint:rgba(54,179,172,.16);
    background:#0e1620; }
    .au[data-screen="dashboard-dark"].dark .au-greet .g1{ color:var(--au-sec); }
    .au[data-screen="dashboard-dark"].dark .au-bell{ background:rgba(255,255,255,.06); color:#80d8d2; }
    .au[data-screen="dashboard-dark"].dark .au-stat .ic{ background:rgba(255,255,255,.05); }
    .au[data-screen="dashboard-dark"].dark .au-act{ box-shadow:none; border:1px solid var(--au-sep); }
    .au[data-screen="dashboard-dark"].dark .au-pad{ padding:6px var(--au-pad-x) var(--au-bot); }

    /* herd-list */
    .au[data-screen="herd-list"] .au-hpad{ padding:6px var(--au-pad-x) var(--au-bot); }
    .au[data-screen="herd-list"] .au-toptitle{ display:flex; align-items:center; gap:9px; padding:2px 0 12px; }
    .au[data-screen="herd-list"] .au-toptitle .ht{ font-size:var(--au-fs-display); font-weight:800; letter-spacing:-.01em; }
    .au[data-screen="herd-list"] .au-toptitle .hc{ font-size:var(--au-fs-meta); font-weight:700; color:var(--au-tealink); background:var(--au-tint); border-radius:999px; padding:2px 9px; }
    .au[data-screen="herd-list"] .au-toptitle .sortic{ margin-left:auto; color:var(--au-sec); }
    .au[data-screen="herd-list"] .au-toptitle .sortic svg{ width:20px; height:20px; }
    .au[data-screen="herd-list"] .au-search{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--au-sep); border-radius:12px; padding:10px 12px; margin-bottom:13px; color:var(--au-sec); }
    .au[data-screen="herd-list"] .au-search svg{ width:16px; height:16px; flex:0 0 auto; }
    .au[data-screen="herd-list"] .au-search .ph{ font-size:var(--au-fs-meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="herd-list"] .au-chips{ display:flex; gap:7px; margin-bottom:6px; }
    .au[data-screen="herd-list"] .au-chip{ font-size:var(--au-fs-meta); font-weight:600; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--au-sep); color:var(--au-sec); white-space:nowrap; }
    .au[data-screen="herd-list"] .au-chip.on{ background:var(--au-teal); border-color:var(--au-teal); color:#fff; }
    .au[data-screen="herd-list"] .au-breedhdr{ display:flex; align-items:center; gap:9px; margin:18px 0 9px; }
    .au[data-screen="herd-list"] .au-breedhdr .bn{ font-size:var(--au-fs-heading); font-weight:800; }
    .au[data-screen="herd-list"] .au-breedhdr .bc{ font-size:var(--au-fs-meta); color:var(--au-sec); }
    .au[data-screen="herd-list"] .au-breedhdr .cv{ margin-left:auto; color:var(--au-sec); display:flex; }
    .au[data-screen="herd-list"] .au-breedhdr .cv svg{ width:16px; height:16px; }
    .au[data-screen="herd-list"] .au-animal{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--au-sep); border-radius:14px; padding:10px 12px; margin-bottom:9px; box-shadow:0 1px 2px rgba(16,32,28,.04); }
    .au[data-screen="herd-list"] .au-avatar{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:var(--au-tint); color:var(--au-tealink); display:grid; place-items:center; }
    .au[data-screen="herd-list"] .au-avatar svg{ width:25px; height:25px; }
    .au[data-screen="herd-list"] .au-arow{ flex:1; min-width:0; }
    .au[data-screen="herd-list"] .au-aname{ display:flex; align-items:center; gap:6px; font-size:var(--au-fs-body); font-weight:700; }
    .au[data-screen="herd-list"] .au-aname .sx{ color:var(--au-sec); font-weight:700; }
    .au[data-screen="herd-list"] .au-gc{ font-size:var(--au-fs-tag); font-weight:800; letter-spacing:.04em; color:#7a5a14; background:#fbe8c6; border-radius:999px; padding:2px 6px; }
    .au[data-screen="herd-list"] .au-open{ font-size:var(--au-fs-tag); font-weight:800; letter-spacing:.04em; color:var(--au-tealink); background:var(--au-tint); border-radius:999px; padding:2px 6px; }
    .au[data-screen="herd-list"] .au-ameta{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="herd-list"] .au-aright{ flex:0 0 auto; display:flex; align-items:center; gap:7px; }
    .au[data-screen="herd-list"] .au-aright .age{ font-size:var(--au-fs-meta); color:var(--au-sec); }
    .au[data-screen="herd-list"] .au-aright .cv{ color:#c2ccd3; display:flex; }
    .au[data-screen="herd-list"] .au-aright .cv svg{ width:15px; height:15px; }

    /* kit-tracking */
    .au[data-screen="kit-tracking"] .au-pad{ padding:6px var(--au-pad-x) var(--au-bot); }
    .au[data-screen="kit-tracking"] .au-litcard{ background:var(--au-card); border-radius:16px; padding:15px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au[data-screen="kit-tracking"] .au-litcard .top{ display:flex; align-items:center; gap:8px; }
    .au[data-screen="kit-tracking"] .au-litcard .nm{ font-size:var(--au-fs-title); font-weight:800; }
    .au[data-screen="kit-tracking"] .au-litcard .tag{ font-size:var(--au-fs-small); font-weight:700; color:var(--au-tealink); background:var(--au-tint); border-radius:999px; padding:3px 10px; }
    .au[data-screen="kit-tracking"] .au-litcard .par{ font-size:var(--au-fs-sub); color:var(--au-sec); margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="kit-tracking"] .au-litcard .par2{ font-size:var(--au-fs-sub); color:var(--au-sec); margin-top:3px; }
    .au[data-screen="kit-tracking"] .au-bigbtn{ display:flex; align-items:center; gap:9px; width:100%; background:var(--au-teal); color:#fff;
    border-radius:13px; padding:14px 16px; margin-top:13px; font-size:var(--au-fs-body); font-weight:700; }
    .au[data-screen="kit-tracking"] .au-bigbtn svg{ width:18px; height:18px; flex:0 0 auto; }
    .au[data-screen="kit-tracking"] .au-bigbtn .end{ margin-left:auto; font-size:var(--au-fs-sub); font-weight:600; opacity:.92; }
    .au[data-screen="kit-tracking"] .au-kithead{ display:flex; align-items:baseline; justify-content:space-between; margin:24px 0 6px; }
    .au[data-screen="kit-tracking"] .au-kithead .lt{ font-size:var(--au-fs-title); font-weight:800; }
    .au[data-screen="kit-tracking"] .au-kithead .ct{ font-size:var(--au-fs-sub); color:var(--au-sec); }
    .au[data-screen="kit-tracking"] .au-kitrow{ padding:16px 0; border-top:1px solid var(--au-sep); }
    .au[data-screen="kit-tracking"] .au-kitrow:first-of-type{ border-top:0; }
    .au[data-screen="kit-tracking"] .au-kitrow .ktop{ display:flex; align-items:center; gap:8px; }
    .au[data-screen="kit-tracking"] .au-kitrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--au-teal); flex:0 0 auto; }
    .au[data-screen="kit-tracking"] .au-kitrow .ktitle{ font-size:var(--au-fs-heading); font-weight:800; }
    .au[data-screen="kit-tracking"] .au-kitrow .kmeta{ font-size:var(--au-fs-body); color:var(--au-sec); margin:6px 0 0 16px; }
    .au[data-screen="kit-tracking"] .au-kitrow .ktags{ display:flex; gap:8px; margin:9px 0 0 16px; }
    .au[data-screen="kit-tracking"] .au-kt{ font-size:var(--au-fs-meta); font-weight:700; border-radius:999px; padding:3px 11px; }
    .au[data-screen="kit-tracking"] .au-kt.gray{ color:#5b6a66; background:#e7ecea; }
    .au[data-screen="kit-tracking"] .au-kt.amber{ color:#c47f1a; background:#fbedd2; }
    .au[data-screen="kit-tracking"] .au-kt.green{ color:#2f8a52; background:#dcf0e2; }

    /* moon-breeding */
    .au[data-screen="moon-breeding"] .au-pad2{ padding:6px var(--au-pad-x) var(--au-bot); }
    .au[data-screen="moon-breeding"] .au-cal{ background:var(--au-card); border-radius:18px; padding:16px 14px 14px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au[data-screen="moon-breeding"] .au-calhead{ display:flex; align-items:center; justify-content:space-between; padding:0 2px 12px; }
    .au[data-screen="moon-breeding"] .au-calhead .mo{ font-size:var(--au-fs-heading); font-weight:800; }
    .au[data-screen="moon-breeding"] .au-calhead .nav{ display:flex; align-items:center; gap:18px; color:var(--au-ink); }
    .au[data-screen="moon-breeding"] .au-calhead .nav svg{ width:15px; height:15px; }
    .au[data-screen="moon-breeding"] .au-calwk{ display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--au-sep); }
    .au[data-screen="moon-breeding"] .au-calwk span{ text-align:center; font-size:var(--au-fs-small); font-weight:700; color:var(--au-sec); padding:7px 0 6px; border-right:1px solid var(--au-sep); }
    .au[data-screen="moon-breeding"] .au-calwk span:last-child{ border-right:0; }
    .au[data-screen="moon-breeding"] .au-calgrid{ display:grid; grid-template-columns:repeat(7,1fr); }
    .au[data-screen="moon-breeding"] .au-day{ position:relative; min-height:46px; padding:5px 6px 4px; border-top:1px solid var(--au-sep); border-right:1px solid var(--au-sep); display:flex; flex-direction:column; }
    .au[data-screen="moon-breeding"] .au-day:nth-child(7n){ border-right:0; }
    .au[data-screen="moon-breeding"] .au-day .dn{ font-size:var(--au-fs-meta); font-weight:600; line-height:1; }
    .au[data-screen="moon-breeding"] .au-day.out .dn{ color:#c2ccc8; }
    .au[data-screen="moon-breeding"] .au-day.sel{ outline:2px solid var(--au-teal); outline-offset:-2px; border-radius:7px; }
    .au[data-screen="moon-breeding"] .au-day .dot{ position:absolute; top:6px; right:6px; width:5px; height:5px; border-radius:50%; }
    .au[data-screen="moon-breeding"] .au-day .dot.f{ background:#3aa760; }
    .au[data-screen="moon-breeding"] .au-day .dot.m{ background:#e0524a; }
    .au[data-screen="moon-breeding"] .au-day .dot.n{ background:#c2ccc8; }
    .au[data-screen="moon-breeding"] .au-moon{ width:17px; height:17px; border-radius:50%; margin:auto auto 1px; align-self:center;
    background:#27303d; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
    .au[data-screen="moon-breeding"] .au-moon.full{ background:#f2c84b; }
    .au[data-screen="moon-breeding"] .au-moon.new{ background:#27303d; }
    .au[data-screen="moon-breeding"] .au-moon.wax-c{ background:linear-gradient(90deg,#27303d 50%,#f2c84b 50%); }
    .au[data-screen="moon-breeding"] .au-moon.wan-c{ background:linear-gradient(90deg,#f2c84b 50%,#27303d 50%); }
    .au[data-screen="moon-breeding"] .au-moon.wax-g{ background:radial-gradient(circle at 78% 50%, #f2c84b 42%, #27303d 44%); }
    .au[data-screen="moon-breeding"] .au-moon.wan-g{ background:radial-gradient(circle at 22% 50%, #f2c84b 42%, #27303d 44%); }
    .au[data-screen="moon-breeding"] .au-moon.wax-cr{ background:radial-gradient(circle at 118% 50%, #f2c84b 40%, #27303d 42%); }
    .au[data-screen="moon-breeding"] .au-moon.wan-cr{ background:radial-gradient(circle at -18% 50%, #f2c84b 40%, #27303d 42%); }
    .au[data-screen="moon-breeding"] .au-day.out .au-moon{ opacity:.45; }
    .au[data-screen="moon-breeding"] .au-legend{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 2px 0; }
    .au[data-screen="moon-breeding"] .au-legend .lg{ flex:0 1 auto; display:flex; align-items:center; gap:6px; background:var(--au-card); border:1px solid var(--au-sep); border-radius:999px; padding:7px 11px; box-shadow:0 1px 2px rgba(16,32,28,.05); }
    .au[data-screen="moon-breeding"] .au-legend .lg .d{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; }
    .au[data-screen="moon-breeding"] .au-legend .lg .d.f{ background:#3aa760; }
    .au[data-screen="moon-breeding"] .au-legend .lg .d.m{ background:#e0524a; }
    .au[data-screen="moon-breeding"] .au-legend .lg .d.n{ background:#c2ccc8; }
    .au[data-screen="moon-breeding"] .au-legend .lg .t{ font-size:var(--au-fs-meta); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="moon-breeding"] .au-moondetail{ background:var(--au-card); border-radius:18px; padding:16px; margin-top:14px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au[data-screen="moon-breeding"] .au-moondetail .dh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .au[data-screen="moon-breeding"] .au-moondetail .dh .dd{ font-size:var(--au-fs-heading); font-weight:800; }
    .au[data-screen="moon-breeding"] .au-moondetail .dh .au-moon{ width:24px; height:24px; margin:0; }
    .au[data-screen="moon-breeding"] .au-moondetail .grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }
    .au[data-screen="moon-breeding"] .au-moondetail .k{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-bottom:3px; }
    .au[data-screen="moon-breeding"] .au-moondetail .v{ font-size:var(--au-fs-heading); font-weight:800; line-height:1.25; }

    /* new-breeding */
    .au[data-screen="new-breeding"] .au-bpad{ padding:6px var(--au-pad-x) var(--au-bot); display:flex; flex-direction:column; }
    .au[data-screen="new-breeding"] .au-seg{ display:flex; gap:12px; margin:2px 0 18px; }
    .au[data-screen="new-breeding"] .au-seg .sg{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; padding:13px 10px; font-size:var(--au-fs-body); font-weight:700; border:1.5px solid var(--au-sep); background:#f3f6f5; color:var(--au-sec); }
    .au[data-screen="new-breeding"] .au-seg .sg svg{ width:22px; height:22px; }
    .au[data-screen="new-breeding"] .au-seg .sg.on{ background:var(--au-card); border-color:var(--au-teal); color:var(--au-teal); }
    .au[data-screen="new-breeding"] .au-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
    .au[data-screen="new-breeding"] .au-field .lab{ font-size:var(--au-fs-heading); font-weight:800; margin-bottom:8px; }
    .au[data-screen="new-breeding"] .au-select{ position:relative; background:#f6f8f7; border:1px solid var(--au-sep); border-radius:13px; padding:13px 14px; font-size:var(--au-fs-body); color:var(--au-sec); display:flex; align-items:center; }
    .au[data-screen="new-breeding"] .au-select .cv{ margin-left:auto; color:var(--au-ink); }
    .au[data-screen="new-breeding"] .au-select .cv svg{ width:16px; height:16px; }
    .au[data-screen="new-breeding"] .au-pairpill{ background:var(--au-card); border-radius:14px; padding:17px 14px; text-align:center; font-size:var(--au-fs-heading); font-weight:700; box-shadow:0 1px 3px rgba(16,32,28,.06); margin-bottom:18px; }
    .au[data-screen="new-breeding"] .au-datefield{ position:relative; background:#f6f8f7; border:1px solid var(--au-sep); border-radius:13px; padding:14px 14px; font-size:var(--au-fs-body); color:var(--au-sec); display:flex; align-items:center; margin-top:8px; }
    .au[data-screen="new-breeding"] .au-datefield .cal{ margin-left:auto; color:var(--au-ink); }
    .au[data-screen="new-breeding"] .au-datefield .cal svg{ width:18px; height:18px; }
    .au[data-screen="new-breeding"] .au-bdh{ font-size:var(--au-fs-heading); font-weight:800; margin:20px 0 12px; }
    .au[data-screen="new-breeding"] .au-dayrow{ display:flex; align-items:center; gap:12px; background:var(--au-card); border-radius:14px; padding:13px 14px; margin-bottom:11px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au[data-screen="new-breeding"] .au-dayrow .dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#b9a7e6; }
    .au[data-screen="new-breeding"] .au-dayrow .mid{ flex:1; min-width:0; }
    .au[data-screen="new-breeding"] .au-dayrow .mid .dt{ font-size:var(--au-fs-body); font-weight:800; }
    .au[data-screen="new-breeding"] .au-dayrow .mid .meta{ font-size:var(--au-fs-sub); color:var(--au-sec); margin-top:2px; }
    .au[data-screen="new-breeding"] .au-dayrow .add{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--au-tint); color:var(--au-teal); display:grid; place-items:center; }
    .au[data-screen="new-breeding"] .au-dayrow .add svg{ width:18px; height:18px; }
    .au[data-screen="new-breeding"] .au-savebtn{ margin-top:14px; background:var(--au-teal); color:#fff; border-radius:14px; padding:16px; text-align:center; font-size:var(--au-fs-heading); font-weight:800; box-shadow:0 10px 22px -10px rgba(47,158,152,.7); }

    /* add-health-record */
    .au[data-screen="add-health-record"] .au-hrpad{ padding:6px var(--au-pad-x) var(--au-bot); }
    .au[data-screen="add-health-record"] .au-patient{ display:flex; align-items:center; gap:12px; background:var(--au-tint); border-radius:16px; padding:13px 14px; margin-bottom:18px; }
    .au[data-screen="add-health-record"] .au-patient .pic{ flex:0 0 auto; width:48px; height:48px; border-radius:13px; background:#fff; border:1px solid var(--au-tile-bd); color:var(--au-teal); display:grid; place-items:center; }
    .au[data-screen="add-health-record"] .au-patient .pic svg{ width:28px; height:28px; }
    .au[data-screen="add-health-record"] .au-patient .pm{ flex:1; min-width:0; }
    .au[data-screen="add-health-record"] .au-patient .nmrow{ display:flex; align-items:center; gap:8px; }
    .au[data-screen="add-health-record"] .au-patient .nm{ font-size:var(--au-fs-body); font-weight:800; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="add-health-record"] .au-patient .ptag{ flex:0 0 auto; font-size:var(--au-fs-tag); font-weight:800; letter-spacing:.02em; color:#fff; background:var(--au-teal); border-radius:999px; padding:3px 7px; max-width:88px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="add-health-record"] .au-patient .breed{ font-size:var(--au-fs-sub); color:var(--au-sec); margin-top:3px; }
    .au[data-screen="add-health-record"] .au-patient .upd{ display:flex; align-items:center; gap:5px; font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:7px; }
    .au[data-screen="add-health-record"] .au-patient .upd svg{ width:13px; height:13px; flex:0 0 auto; }
    .au[data-screen="add-health-record"] .au-hrh{ font-size:var(--au-fs-title); font-weight:800; margin:0 0 12px; }
    .au[data-screen="add-health-record"] .au-seg{ display:flex; gap:9px; margin-bottom:24px; }
    .au[data-screen="add-health-record"] .au-seg .sg{ flex:1; text-align:center; font-size:var(--au-fs-sub); font-weight:700; padding:9px 4px; border-radius:999px; background:var(--au-card); border:1px solid var(--au-sep); color:var(--au-ink); white-space:nowrap; }
    .au[data-screen="add-health-record"] .au-seg .sg.on{ background:var(--au-teal); border-color:var(--au-teal); color:#fff; }
    .au[data-screen="add-health-record"] .au-field{ margin-bottom:18px; }
    .au[data-screen="add-health-record"] .au-field .lbl{ display:block; font-size:var(--au-fs-body); font-weight:700; margin-bottom:9px; }
    .au[data-screen="add-health-record"] .au-input{ display:flex; align-items:center; gap:8px; background:var(--au-card); border:1px solid var(--au-sep); border-radius:12px; padding:13px 15px; font-size:var(--au-fs-body); }
    .au[data-screen="add-health-record"] .au-input .ph{ flex:1; min-width:0; color:var(--au-sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="add-health-record"] .au-input .cal{ flex:0 0 auto; color:var(--au-ink); }
    .au[data-screen="add-health-record"] .au-input .cal svg{ width:18px; height:18px; }
    .au[data-screen="add-health-record"] .au-select{ display:flex; align-items:center; gap:8px; background:var(--au-card); border:1px solid var(--au-sep); border-radius:12px; padding:13px 15px; font-size:var(--au-fs-body); color:var(--au-tealink); }
    .au[data-screen="add-health-record"] .au-select .v{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .au[data-screen="add-health-record"] .au-select .chev{ flex:0 0 auto; color:var(--au-ink); }
    .au[data-screen="add-health-record"] .au-select .chev svg{ width:16px; height:16px; }
    .au[data-screen="add-health-record"] .au-savebtn{ margin-top:8px; text-align:center; font-size:var(--au-fs-heading); font-weight:800; color:#fff; background:var(--au-teal); border-radius:14px; padding:16px; box-shadow:0 8px 18px -8px rgba(47,158,152,.55); }

    /* health-detail */
    .au[data-screen="health-detail"] .au-pad2{ padding:6px var(--au-pad-x) var(--au-bot); }
    .au[data-screen="health-detail"] .au-animalhead{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 0 4px; }
    .au[data-screen="health-detail"] .au-animalhead .tile{ position:relative; width:88px; height:88px; border-radius:20px; background:var(--au-card); border:2px solid var(--au-teal); box-shadow:0 1px 3px rgba(16,32,28,.06); display:grid; place-items:center; margin-bottom:14px; }
    .au[data-screen="health-detail"] .au-animalhead .tile svg{ width:46px; height:46px; color:var(--au-teal); }
    .au[data-screen="health-detail"] .au-animalhead .tile .buck{ position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); font-size:var(--au-fs-tag); font-weight:800; letter-spacing:.06em; color:#fff; background:var(--au-teal); border-radius:999px; padding:3px 9px; }
    .au[data-screen="health-detail"] .au-animalhead .nm{ font-size:var(--au-fs-display); font-weight:800; letter-spacing:-.01em; line-height:1.1; }
    .au[data-screen="health-detail"] .au-animalhead .breed{ font-size:var(--au-fs-body); font-weight:600; color:var(--au-teal); margin-top:3px; }
    .au[data-screen="health-detail"] .au-subtabs{ display:flex; align-items:center; justify-content:space-between; gap:6px; border-bottom:1px solid var(--au-sep); margin:18px 0 4px; overflow:hidden; }
    .au[data-screen="health-detail"] .au-subtabs .st{ font-size:var(--au-fs-meta); font-weight:600; color:var(--au-sec); padding:8px 0 10px; white-space:nowrap; }
    .au[data-screen="health-detail"] .au-subtabs .st.on{ color:var(--au-teal); border-bottom:2px solid var(--au-teal); }
    .au[data-screen="health-detail"] .au-panel{ background:var(--au-tint); border-radius:16px; padding:16px; margin-top:16px; }
    .au[data-screen="health-detail"] .au-panel .pt{ font-size:var(--au-fs-title); font-weight:800; margin-bottom:14px; }
    .au[data-screen="health-detail"] .au-addbtn{ display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--au-card); border:1.5px dashed var(--au-teal); border-radius:12px; padding:18px 14px; }
    .au[data-screen="health-detail"] .au-addbtn svg{ width:22px; height:22px; color:var(--au-teal); }
    .au[data-screen="health-detail"] .au-addbtn .lbl{ font-size:var(--au-fs-sub); font-weight:700; }
    .au[data-screen="health-detail"] .au-hcard{ background:var(--au-card); border-radius:16px; padding:16px; margin-top:14px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au[data-screen="health-detail"] .au-hcard .ct{ font-size:var(--au-fs-title); font-weight:800; margin-bottom:12px; }
    .au[data-screen="health-detail"] .au-hrow{ display:flex; align-items:center; gap:12px; }
    .au[data-screen="health-detail"] .au-hrow .ic{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--au-tint); color:var(--au-teal); display:grid; place-items:center; }
    .au[data-screen="health-detail"] .au-hrow .ic svg{ width:20px; height:20px; }
    .au[data-screen="health-detail"] .au-hrow .m{ flex:1; min-width:0; }
    .au[data-screen="health-detail"] .au-hrow .m b{ display:block; font-size:var(--au-fs-body); font-weight:700; }
    .au[data-screen="health-detail"] .au-hrow .m .sub{ display:block; font-size:var(--au-fs-sub); color:var(--au-sec); margin-top:2px; }
    .au[data-screen="health-detail"] .au-hrow .when{ flex:0 0 auto; font-size:var(--au-fs-sub); font-weight:700; color:var(--au-teal); }
    .au[data-screen="health-detail"] .au-evhead{ font-size:var(--au-fs-title); font-weight:800; margin:22px 0 12px; }
    .au[data-screen="health-detail"] .au-evrow{ display:flex; align-items:center; gap:12px; background:var(--au-tint); border-radius:14px; padding:14px 16px; }
    .au[data-screen="health-detail"] .au-evrow .ic{ flex:0 0 auto; color:var(--au-teal); }
    .au[data-screen="health-detail"] .au-evrow .ic svg{ width:20px; height:20px; }
    .au[data-screen="health-detail"] .au-evrow .lbl{ flex:1; font-size:var(--au-fs-sub); font-weight:700; letter-spacing:.03em; }
    .au[data-screen="health-detail"] .au-evrow .cv{ flex:0 0 auto; color:var(--au-teal); }
    .au[data-screen="health-detail"] .au-evrow .cv svg{ width:16px; height:16px; }

    /* kit-record */
    .au[data-screen="kit-record"] .au-krwrap{ padding:2px var(--au-pad-x) var(--au-bot); }
    .au[data-screen="kit-record"] .au-krtile{ width:84px; height:84px; border-radius:21px; margin:6px auto 14px; background:var(--au-tile); border:1px solid var(--au-tile-bd); color:var(--au-tealink); display:grid; place-items:center; }
    .au[data-screen="kit-record"] .au-krtile svg{ width:40px; height:40px; }
    .au[data-screen="kit-record"] .au-krtitle{ text-align:center; font-size:var(--au-fs-display); font-weight:800; letter-spacing:-.01em; margin:0 0 8px; }
    .au[data-screen="kit-record"] .au-krsub{ text-align:center; font-size:var(--au-fs-body); line-height:1.45; color:var(--au-sec); margin:0 8px 22px; }
    .au[data-screen="kit-record"] .au-krlabel{ font-size:var(--au-fs-title); font-weight:800; margin:0 0 12px; }
    .au[data-screen="kit-record"] .au-krid{ display:flex; align-items:center; gap:8px; font-size:var(--au-fs-heading); font-weight:700; margin-bottom:7px; }
    .au[data-screen="kit-record"] .au-krdot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--au-teal); }
    .au[data-screen="kit-record"] .au-krmeta{ font-size:var(--au-fs-meta); color:var(--au-sec); letter-spacing:.02em; margin-bottom:11px; }
    .au[data-screen="kit-record"] .au-krpills{ display:flex; gap:8px; margin-bottom:24px; }
    .au[data-screen="kit-record"] .au-krpill{ font-size:var(--au-fs-small); font-weight:700; border-radius:999px; padding:4px 11px; }
    .au[data-screen="kit-record"] .au-krpill.gray{ color:#5b6864; background:#e7ecea; }
    .au[data-screen="kit-record"] .au-krpill.amber{ color:#9a7414; background:#f5ead0; }
    .au[data-screen="kit-record"] .au-field{ margin-bottom:18px; }
    .au[data-screen="kit-record"] .au-field > .fl{ display:block; font-size:var(--au-fs-heading); font-weight:700; margin-bottom:9px; }
    .au[data-screen="kit-record"] .au-input, .au[data-screen="kit-record"] .au-select, .au[data-screen="kit-record"] .au-textarea{ width:100%; font:inherit; font-size:var(--au-fs-body); color:var(--au-ink);
    background:var(--au-card); border:1px solid var(--au-sep); border-radius:12px; padding:13px 14px; outline:none;
    -webkit-appearance:none; appearance:none; }
    .au[data-screen="kit-record"] .au-input::placeholder, .au[data-screen="kit-record"] .au-textarea::placeholder{ color:#9aa6a2; }
    .au[data-screen="kit-record"] .au-input:focus, .au[data-screen="kit-record"] .au-select:focus, .au[data-screen="kit-record"] .au-textarea:focus{ border-color:var(--au-teal); box-shadow:0 0 0 3px rgba(47,158,152,.16); }
    .au[data-screen="kit-record"] .au-textarea{ resize:none; min-height:96px; line-height:1.4; }
    .au[data-screen="kit-record"] .au-input + .au-input, .au[data-screen="kit-record"] .au-input + .au-textarea{ margin-top:11px; }
    .au[data-screen="kit-record"] .au-fieldrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
    .au[data-screen="kit-record"] .au-fieldrow .fl{ font-size:var(--au-fs-heading); font-weight:700; }
    .au[data-screen="kit-record"] .au-selectwrap{ position:relative; flex:0 0 auto; }
    .au[data-screen="kit-record"] .au-selectwrap .au-select{ width:auto; padding-right:34px; }
    .au[data-screen="kit-record"] .au-selectwrap .cv{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--au-sec); }
    .au[data-screen="kit-record"] .au-selectwrap .cv svg{ width:13px; height:13px; }
    .au[data-screen="kit-record"] .au-savebtn{ width:100%; font:inherit; font-size:var(--au-fs-heading); font-weight:700; color:#fff; background:var(--au-teal);
    border:0; border-radius:13px; padding:15px; margin-top:6px; cursor:pointer; }

    /* show-records */
    .au[data-screen="show-records"] .au-spad{ padding:6px var(--au-pad-x) var(--au-bot); }
    .au[data-screen="show-records"] .au-shead{ display:flex; align-items:center; gap:12px; background:var(--au-tint); border-radius:16px; padding:13px 14px; }
    .au[data-screen="show-records"] .au-shead .tile{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:#fff; color:var(--au-teal); display:grid; place-items:center; border:1px solid var(--au-tile-bd); }
    .au[data-screen="show-records"] .au-shead .tile svg{ width:26px; height:26px; }
    .au[data-screen="show-records"] .au-shead .nm{ display:flex; align-items:center; gap:7px; font-size:var(--au-fs-heading); font-weight:800; }
    .au[data-screen="show-records"] .au-shead .gc{ font-size:var(--au-fs-tag); font-weight:800; letter-spacing:.04em; color:#7a5a14; background:#fbe8c6; border-radius:999px; padding:2px 6px; }
    .au[data-screen="show-records"] .au-shead .sub{ font-size:var(--au-fs-sub); color:var(--au-tealink); margin-top:1px; }
    .au[data-screen="show-records"] .au-shead .sub2{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:1px; }
    .au[data-screen="show-records"] .au-gccard{ background:#fff; border:1px solid var(--au-sep); border-radius:16px; padding:15px; margin-top:14px; box-shadow:0 1px 3px rgba(16,32,28,.06); }
    .au[data-screen="show-records"] .au-gctop{ display:flex; align-items:center; gap:10px; }
    .au[data-screen="show-records"] .au-gctop .medal{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:rgba(205,173,88,.16); color:var(--au-gold); display:grid; place-items:center; }
    .au[data-screen="show-records"] .au-gctop .medal svg{ width:19px; height:19px; }
    .au[data-screen="show-records"] .au-gctop .gt{ font-size:var(--au-fs-body); font-weight:800; }
    .au[data-screen="show-records"] .au-gctop .gs{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:1px; }
    .au[data-screen="show-records"] .au-gctop .count{ margin-left:auto; text-align:right; }
    .au[data-screen="show-records"] .au-gctop .count b{ font-size:var(--au-fs-title); font-weight:800; color:var(--au-teal); }
    .au[data-screen="show-records"] .au-gctop .count span{ display:block; font-size:var(--au-fs-small); color:var(--au-sec); letter-spacing:.02em; }
    .au[data-screen="show-records"] .au-legbar{ display:flex; gap:8px; margin:14px 0 4px; }
    .au[data-screen="show-records"] .au-leg{ flex:1; height:7px; border-radius:4px; background:var(--au-sep); }
    .au[data-screen="show-records"] .au-leg.done{ background:var(--au-teal); }
    .au[data-screen="show-records"] .au-reqs{ display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin-top:13px; }
    .au[data-screen="show-records"] .au-req{ display:flex; align-items:center; gap:7px; font-size:var(--au-fs-meta); color:var(--au-ink); }
    .au[data-screen="show-records"] .au-req svg{ flex:0 0 auto; width:15px; height:15px; }
    .au[data-screen="show-records"] .au-req.ok svg{ color:var(--au-teal); }
    .au[data-screen="show-records"] .au-req.pending{ color:var(--au-sec); }
    .au[data-screen="show-records"] .au-req.pending svg{ color:#c2ccd3; }
    .au[data-screen="show-records"] .au-listhd{ display:flex; align-items:center; margin:22px 0 10px; }
    .au[data-screen="show-records"] .au-listhd .lt{ font-size:var(--au-fs-heading); font-weight:800; }
    .au[data-screen="show-records"] .au-listhd .add{ margin-left:auto; font-size:var(--au-fs-sub); font-weight:600; color:var(--au-tealink); display:flex; align-items:center; gap:4px; }
    .au[data-screen="show-records"] .au-listhd .add svg{ width:14px; height:14px; }
    .au[data-screen="show-records"] .au-show{ background:#fff; border:1px solid var(--au-sep); border-radius:14px; padding:13px 14px; margin-bottom:10px; box-shadow:0 1px 2px rgba(16,32,28,.04); }
    .au[data-screen="show-records"] .au-show .r1{ display:flex; align-items:center; gap:8px; }
    .au[data-screen="show-records"] .au-show .award{ font-size:var(--au-fs-body); font-weight:700; }
    .au[data-screen="show-records"] .au-show .star{ color:var(--au-gold); display:flex; }
    .au[data-screen="show-records"] .au-show .star svg{ width:15px; height:15px; }
    .au[data-screen="show-records"] .au-show .legtag{ margin-left:auto; font-size:var(--au-fs-tag); font-weight:800; letter-spacing:.04em; color:#1f6f6b; background:var(--au-tint); border-radius:999px; padding:3px 8px; }
    .au[data-screen="show-records"] .au-show .legtag.senior{ color:#7a5a14; background:#fbe8c6; }
    .au[data-screen="show-records"] .au-show .show-nm{ font-size:var(--au-fs-sub); color:var(--au-ink); margin-top:5px; }
    .au[data-screen="show-records"] .au-show .meta{ font-size:var(--au-fs-meta); color:var(--au-sec); margin-top:3px; }

    /* pedigree-record */
    .ped-doc{ max-width:1180px; margin:0 auto; background:#fbf9f4; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -28px rgba(0,0,0,.35); padding:34px 38px; }
    .ped-doc{ --buck:#3b6ea5; --buck-bd:#bcd1e6; --doe:#d98aa0; --doe-bd:#ecc6d1;
            --focal-bd:#cfd9d6; --paper:#fbf9f4; --ink:#1c2530; --soft:#76808a;
            --hair:#e3ded3; color:var(--ink); }
    .ped-doc *{ box-sizing:border-box; }
    .ped-doc .ped-head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:20px;
             padding-bottom:20px; border-bottom:1px solid var(--hair); }
    .ped-doc .ped-wordmark{ font-size:1.9rem; font-weight:800; letter-spacing:.16em; color:var(--ink); line-height:1; }
    .ped-doc .ped-head .sub1{ font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); margin-top:12px; }
    .ped-doc .ped-head .sub2{ font-size:.72rem; color:var(--soft); margin-top:3px; }
    .ped-doc .ped-center{ text-align:center; padding-top:4px; }
    .ped-doc .ped-center .lbl{ font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); }
    .ped-doc .ped-center .rby{ font-size:1.05rem; font-weight:700; margin:6px 0 4px; }
    .ped-doc .ped-center .meta{ font-size:.72rem; color:#56606a; }
    .ped-doc .ped-tree{ display:grid; grid-template-columns:230px 1fr 1fr 1fr; gap:0 26px; margin-top:26px; align-items:stretch; }
    .ped-doc .gen{ display:flex; flex-direction:column; justify-content:space-around; gap:14px; min-width:0; }
    .ped-doc .gen.g1{ justify-content:center; }
    .ped-doc .gen.g2, .ped-doc .gen.g3, .ped-doc .gen.g4{ position:relative; }
    .ped-doc .pair{ position:relative; display:flex; flex-direction:column; justify-content:space-around; gap:14px; flex:1; }
    .ped-doc .gen .branch{ position:relative; }
    .ped-doc .gen.g2 .branch::before, .ped-doc .gen.g3 .branch::before, .ped-doc .gen.g4 .branch::before{ content:""; position:absolute; left:-14px; top:50%; width:14px; height:1px; background:#c9c2b4; }
    .ped-doc .card{ background:#fff; border:1px solid var(--hair); border-radius:11px; padding:11px 12px;
         box-shadow:0 2px 6px -4px rgba(28,37,48,.25); }
    .ped-doc .card.buck{ border:1px solid var(--buck-bd); }
    .ped-doc .card.doe{ border:1px solid var(--doe-bd); }
    .ped-doc .card .role{ font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
    .ped-doc .card .nmrow{ display:flex; align-items:center; gap:7px; margin:2px 0 1px; }
    .ped-doc .card .nm{ font-weight:700; line-height:1.15; }
    .ped-doc .card .ear{ font-size:.7rem; color:#3c4650; font-weight:600; }
    .ped-doc .badge-gc{ font-size:.52rem; font-weight:800; letter-spacing:.04em; color:#7a6526; background:#f1e7c9;
             border:1px solid #e2d3a0; border-radius:999px; padding:1px 5px; line-height:1.4; }
    .ped-doc .sym{ font-size:.82rem; line-height:1; }
    .ped-doc .sym.buck{ color:var(--buck); }
    .ped-doc .sym.doe{ color:var(--doe); }
    .ped-doc .card .body{ display:flex; gap:9px; margin-top:7px; }
    .ped-doc .card .fields{ flex:1; min-width:0; }
    .ped-doc .card .f{ font-size:.62rem; color:#4a545e; line-height:1.5; }
    .ped-doc .card .f b{ color:#1c2530; font-weight:600; }
    .ped-doc .photo{ flex:0 0 auto; border-radius:7px; background:linear-gradient(135deg,#dfdcd4,#cfcabf);
          border:1px solid #ccc6ba; }
    .ped-doc .wins{ margin-top:7px; border-top:1px solid #efeae0; padding-top:5px; }
    .ped-doc .wins .w{ font-size:.58rem; color:#5a646e; line-height:1.5; }
    .ped-doc .card.focal{ border:1px solid var(--focal-bd); border-radius:13px; padding:16px 16px; box-shadow:0 6px 18px -10px rgba(28,37,48,.35); }
    .ped-doc .card.focal .role{ color:var(--teal-dark); }
    .ped-doc .card.focal .nm{ font-size:1.2rem; }
    .ped-doc .card.focal .ear{ font-size:.74rem; margin-top:2px; }
    .ped-doc .card.focal .photo{ width:66px; height:66px; }
    .ped-doc .focal-fields{ display:grid; grid-template-columns:auto 1fr; gap:1px 10px; font-size:.66rem; }
    .ped-doc .focal-fields dt{ color:var(--soft); }
    .ped-doc .focal-fields dd{ margin:0; font-weight:600; color:#1c2530; }
    .ped-doc .card.focal .wins .w{ font-size:.6rem; }
    .ped-doc .gen.g2 .nm{ font-size:.96rem; }
    .ped-doc .gen.g2 .photo{ width:46px; height:46px; }
    .ped-doc .gen.g3 .nm{ font-size:.88rem; }
    .ped-doc .gen.g3 .photo{ width:40px; height:40px; }
    .ped-doc .gen.g4 .card{ padding:9px 10px; }
    .ped-doc .gen.g4 .nm{ font-size:.8rem; }
    .ped-doc .gen.g4 .photo{ width:34px; height:34px; }
    .ped-doc .gen.g4 .f{ font-size:.58rem; line-height:1.45; }
    .ped-doc .cert{ margin-top:18px; }
    .ped-doc .cert .ct{ font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
    .ped-doc .cert .rule{ width:30px; height:2px; background:var(--teal); margin:7px 0 9px; }
    .ped-doc .cert p{ font-size:.72rem; color:#3c4650; margin:0 0 18px; line-height:1.45; }
    .ped-doc .sig-line{ border-bottom:1px solid #cfc9bd; height:1px; margin-bottom:5px; }
    .ped-doc .sig-lbl{ font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#a39c8e; margin-bottom:18px; }
    .ped-doc .ped-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px;
             margin-top:26px; padding-top:16px; border-top:1px solid var(--hair); }
    .ped-doc .ped-foot .doc-id{ flex:1; text-align:center; font-size:.66rem; color:var(--soft); }
    .ped-doc .ped-foot .brand{ font-size:.66rem; text-align:right; }
    .ped-doc .ped-foot .brand .wm{ font-weight:800; letter-spacing:.14em; color:var(--ink); }
    .ped-doc .ped-foot .brand .tg{ font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:#b0a896; margin-top:2px; }
    @media (max-width:820px){
    .ped-doc .ped-tree{ grid-template-columns:1fr; }
    .ped-doc .gen .branch::before{ display:none; }
    }
/* ==== screens:end ==== */