:root {
      color-scheme: light;
      --paper:#F3F3EE;
      --surface:#FFFFFF;
      --surface-2:#E9ECE6;
      --ink:#18211B;
      --muted:#536057;
      --quiet:#707B72;
      --line:rgba(24,33,27,.13);
      --line-strong:rgba(24,33,27,.24);
      --green:#2F6144;
      --green-dark:#214A33;
      --dark:#141C17;
      --citrus:#D19412;
      --citrus-text:#654700;
      --earthy:#9C6B3F;
      --earthy-text:#68431F;
      --spice:#C25B2E;
      --spice-text:#833817;
      --pine:#3E7A54;
      --pine-text:#28583A;
      --floral:#8A6BBE;
      --floral-text:#5B4386;
      --herbal:#4E8D99;
      --herbal-text:#2E6671;
      --shadow:0 20px 55px -34px rgba(19,35,25,.42);
      --radius:18px;
      --max:1160px;
    }

    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; background:var(--paper); }
    body {
      margin:0;
      min-width:320px;
      background:var(--paper);
      color:var(--ink);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing:antialiased;
    }
    button, input, select, textarea { font:inherit; }
    button, a { -webkit-tap-highlight-color:transparent; }
    a { color:inherit; }
    img, svg { max-width:100%; }
    h1,h2,h3,p { margin-top:0; }
    h1,h2,h3 { letter-spacing:-.035em; text-wrap:balance; }
    p { text-wrap:pretty; }
    [hidden] { display:none !important; }

    .skip-link {
      position:fixed;
      left:16px;
      top:12px;
      z-index:1000;
      padding:10px 14px;
      background:var(--ink);
      color:white;
      border-radius:10px;
      transform:translateY(-160%);
      transition:transform .18s ease;
    }
    .skip-link:focus { transform:translateY(0); }

    :focus-visible {
      outline:3px solid rgba(47,97,68,.38);
      outline-offset:3px;
    }

    .mono {
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing:.02em;
    }
    .wrap { width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }
    .section { padding:86px 0; scroll-margin-top:88px; }
    .section-tight { padding:58px 0; }
    .surface { background:var(--surface); border-block:1px solid var(--line); }
    .sunk { background:var(--surface-2); }
    .dark { background:var(--dark); color:#E9EEE9; }
    .dark h1,.dark h2,.dark h3 { color:#fff; }
    .dark p { color:#BEC8BF; }
    .eyebrow {
      margin:0 0 14px;
      color:var(--green-dark);
      font:700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .section-title { max-width:760px; font-size:clamp(2rem,5vw,3.625rem); line-height:1.03; }
    .section-lead { max-width:720px; color:var(--muted); font-size:1.125rem; line-height:1.65; }
    .small { color:var(--muted); font-size:0.875rem; line-height:1.55; }

    .site-header {
      position:sticky;
      top:0;
      z-index:50;
      border-bottom:1px solid var(--line);
      background:rgba(243,243,238,.94);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .nav {
      min-height:70px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
    }
    .brand {
      display:inline-flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      font-size:1.375rem;
      font-weight:800;
      letter-spacing:-.05em;
    }
    .brand-bars { display:flex; gap:2px; }
    .brand-bars i { width:5px; height:21px; border-radius:3px; display:block; }
    .nav-links { display:flex; align-items:center; gap:28px; }
    .nav-links a {
      min-height:44px;
      display:inline-flex;
      align-items:center;
      text-decoration:none;
      color:var(--muted);
      font-weight:650;
      font-size:0.875rem;
    }
    .nav-links a:hover,.nav-links a[aria-current="page"] { color:var(--ink); }
    .nav-links .nav-cta {
      min-height:42px;
      padding:0 18px;
      border-radius:999px;
      background:var(--green);
      color:white;
    }
    .nav-links .nav-cta:hover,.nav-links .nav-cta[aria-current="page"] { background:var(--green-dark); color:white; }
    .menu-button {
      display:none;
      width:44px;
      height:44px;
      border:1px solid var(--line);
      border-radius:12px;
      background:var(--surface);
      color:var(--ink);
      cursor:pointer;
    }
    .mobile-menu {
      display:none;
      padding:12px 20px 20px;
      border-top:1px solid var(--line);
    }
    .mobile-menu a {
      min-height:48px;
      display:flex;
      align-items:center;
      border-bottom:1px solid var(--line);
      text-decoration:none;
      font-weight:650;
    }

    .button {
      min-height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      border:1px solid transparent;
      border-radius:12px;
      padding:0 21px;
      font-weight:750;
      text-decoration:none;
      cursor:pointer;
      transition:transform .16s ease, background .16s ease, border-color .16s ease;
    }
    .button:hover { transform:translateY(-1px); }
    .button-primary { background:var(--green); color:white; }
    .button-primary:hover { background:var(--green-dark); }
    .button-secondary { background:var(--surface); border-color:var(--line-strong); color:var(--ink); }
    .button-secondary:hover { background:var(--surface-2); }
    .button-dark { background:white; color:var(--dark); }
    .button-quiet { min-height:40px; padding-inline:14px; border-color:var(--line); background:transparent; color:var(--muted); }
    .button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
    .button-row { display:flex; gap:12px; flex-wrap:wrap; }

    .hero {
      position:relative;
      overflow:hidden;
      padding:72px 0 78px;
    }
    .hero:before {
      content:"";
      position:absolute;
      width:660px;
      height:660px;
      right:-280px;
      top:-270px;
      border-radius:50%;
      background:conic-gradient(from 40deg, rgba(209,148,18,.16), rgba(156,107,63,.10), rgba(194,91,46,.12), rgba(62,122,84,.13), rgba(138,107,190,.13), rgba(78,141,153,.13), rgba(209,148,18,.16));
      filter:blur(12px);
      pointer-events:none;
    }
    .hero-grid {
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr);
      gap:58px;
      align-items:center;
    }
    .hero h1 {
      margin-bottom:24px;
      font-size:clamp(3rem,7.4vw,5.25rem);
      line-height:.94;
      letter-spacing:-.065em;
    }
    .hero-copy { max-width:620px; color:var(--muted); font-size:1.1875rem; line-height:1.65; }
    .hero-note { margin:18px 0 0; color:var(--quiet); font-size:0.8125rem; }

    .card {
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .demo-card { padding:24px; }
    .card-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; }
    .card-kicker { color:var(--quiet); font-size:0.6875rem; text-transform:uppercase; letter-spacing:.12em; }
    .demo-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
    label { display:block; font-weight:700; font-size:0.8125rem; }
    select,input,textarea {
      width:100%;
      margin-top:7px;
      min-height:46px;
      border:1px solid var(--line-strong);
      border-radius:11px;
      background:white;
      color:var(--ink);
      padding:10px 12px;
    }
    textarea { min-height:112px; resize:vertical; }
    .profile-label { margin:16px 0 7px; color:var(--quiet); font-size:0.6875rem; text-transform:uppercase; letter-spacing:.1em; }
    .profile-bar {
      display:flex;
      height:30px;
      overflow:hidden;
      border-radius:8px;
      background:var(--surface-2);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
    }
    .profile-segment {
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      min-width:0;
      transition:width .42s cubic-bezier(.2,.8,.2,1);
    }
    .profile-segment span { padding-inline:7px; font:700 10px/1 ui-monospace, monospace; white-space:nowrap; }
    .score-row {
      display:grid;
      grid-template-columns:auto 1fr;
      gap:16px;
      align-items:center;
      margin-top:20px;
      padding-top:20px;
      border-top:1px solid var(--line);
    }
    .score { color:var(--green); font-size:3.125rem; font-weight:850; letter-spacing:-.06em; line-height:1; }
    .score small { font-size:1.375rem; }
    .score-label { font-weight:800; margin-bottom:3px; }
    .score-copy { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.5; }
    .legend { display:flex; flex-wrap:wrap; gap:9px 14px; margin-top:16px; }
    .legend span { display:inline-flex; align-items:center; gap:6px; color:var(--quiet); font:600 11px/1 ui-monospace, monospace; }
    .legend i { width:10px; height:10px; border-radius:3px; }

    .trust-strip { border-block:1px solid var(--line); background:var(--surface); }
    .trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
    .trust-item { padding:22px 28px; display:flex; align-items:center; gap:12px; border-right:1px solid var(--line); }
    .trust-item:last-child { border-right:0; }
    .trust-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:10px; background:var(--surface-2); }
    .trust-item strong { display:block; font-size:0.875rem; }
    .trust-item span { display:block; margin-top:2px; color:var(--quiet); font-size:0.75rem; }

    .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
    .step { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
    .step-number { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--dark); color:white; font:700 12px/1 ui-monospace, monospace; }
    .step h3 { margin:22px 0 9px; font-size:1.3125rem; }
    .step p { margin:0; color:var(--muted); line-height:1.6; }

    .families { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
    .family-card {
      min-height:196px;
      display:flex;
      flex-direction:column;
      padding:22px;
      border:1px solid var(--line);
      border-radius:16px;
      background:var(--surface);
      text-decoration:none;
      transition:transform .16s ease, box-shadow .16s ease;
    }
    .family-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
    .family-swatch { width:42px; height:42px; border-radius:13px; margin-bottom:25px; }
    .family-card h3 { margin-bottom:7px; font-size:1.375rem; }
    .family-card p { margin:0; color:var(--muted); line-height:1.55; }
    .family-link { margin-top:auto; padding-top:16px; font-size:0.8125rem; font-weight:750; }
    .family-figure { margin:0 0 18px; overflow:hidden; border-radius:14px; aspect-ratio:4 / 3; background:var(--surface-2); }
    .family-figure img { width:100%; height:100%; object-fit:cover; display:block; }
    .family-card .family-swatch { width:34px; height:34px; border-radius:11px; margin-bottom:16px; }
    .article-card .family-figure { margin:0 0 18px; aspect-ratio:16 / 10; border-radius:16px; }

    .position-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:65px; align-items:start; }
    .position-list { margin:0; }
    .position-row { display:grid; grid-template-columns:155px 1fr; gap:24px; padding:22px 0; border-top:1px solid rgba(255,255,255,.12); }
    .position-row:last-child { border-bottom:1px solid rgba(255,255,255,.12); }
    .position-row dt { color:white; font-size:1.25rem; font-weight:800; }
    .position-row dd { margin:0; color:#BEC8BF; line-height:1.6; }

    .final-cta { padding:80px 0; text-align:center; }
    .final-cta h2 { max-width:840px; margin-inline:auto; font-size:clamp(2.375rem,6vw,4.25rem); line-height:1; }
    .final-cta p { max-width:650px; margin:20px auto 28px; color:#C1CAC2; font-size:1.125rem; line-height:1.6; }
    .final-cta .button-row { justify-content:center; }

    .page-head { padding:70px 0 40px; }
    [data-page="app"] .page-head { padding:48px 0 22px; }
    .page-head h1 { font-size:clamp(2.625rem,7vw,4.875rem); line-height:.98; }
    .page-head p { max-width:730px; color:var(--muted); font-size:1.125rem; line-height:1.65; }

    .app-grid { display:grid; grid-template-columns:330px minmax(0,1fr); gap:24px; align-items:start; }
    .panel { padding:22px; }
    .tab-list { display:grid; gap:8px; }
    .tab-button {
      min-height:48px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:100%;
      padding:0 14px;
      border:1px solid var(--line);
      border-radius:11px;
      background:white;
      color:var(--muted);
      font-weight:700;
      cursor:pointer;
      text-align:left;
    }
    .tab-button[aria-selected="true"] { background:var(--dark); color:white; border-color:var(--dark); }
    .input-panel { min-height:465px; }
    .input-panel h2 { margin-bottom:8px; font-size:1.75rem; }
    .inline-message { margin:14px 0 0; padding:12px 14px; border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:0.875rem; line-height:1.5; }
    .error-message { background:#F7EAE5; color:#7B3219; }
    .success-message { background:#E4EFE8; color:#245139; }
    .sample-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
    .sample-chip {
      min-height:74px;
      padding:12px;
      border:1px solid var(--line);
      border-radius:12px;
      background:white;
      color:var(--ink);
      cursor:pointer;
      text-align:left;
    }
    .sample-chip:hover { background:var(--surface-2); }
    .sample-chip[aria-pressed="true"] { border-color:var(--green); box-shadow:0 0 0 2px rgba(47,97,68,.15); }
    .sample-chip strong,.sample-chip span { display:block; }
    .sample-chip span { margin-top:5px; color:var(--quiet); font-size:0.75rem; }
    .manual-table { width:100%; border-collapse:collapse; margin-top:16px; }
    .manual-table th { padding:0 8px 8px; color:var(--quiet); font-size:0.6875rem; text-align:left; text-transform:uppercase; letter-spacing:.08em; }
    .manual-table td { padding:5px 8px; }
    .manual-table input,.manual-table select { margin:0; min-height:42px; }
    .manual-table td:last-child { width:48px; }
    .icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:white; cursor:pointer; }
    .result-panel { margin-top:24px; padding:24px; }
    .result-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
    .badge { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:#E4EFE8; color:#245139; font-size:0.75rem; font-weight:800; }
    .result-details { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
    .result-detail { padding:15px; border-radius:12px; background:var(--surface-2); }
    .result-detail span { display:block; color:var(--quiet); font-size:0.6875rem; text-transform:uppercase; letter-spacing:.08em; }
    .result-detail strong { display:block; margin-top:7px; line-height:1.35; }
    .data-table-wrap { overflow-x:auto; margin-top:20px; }
    .data-table { width:100%; border-collapse:collapse; min-width:560px; }
    .data-table th,.data-table td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; font-size:0.8125rem; }
    .data-table th { color:var(--quiet); font-size:0.6875rem; text-transform:uppercase; letter-spacing:.08em; }

    .page-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
    .article-card { padding:26px; }
    .article-card h2,.article-card h3 { margin-bottom:10px; }
    .article-card p,.article-card li { color:var(--muted); line-height:1.7; }
    .article-card ul { padding-left:20px; }
    .method-box { padding:24px; border-left:4px solid var(--green); background:var(--surface); border-radius:0 14px 14px 0; }
    .formula { padding:16px; border-radius:12px; background:var(--dark); color:white; overflow:auto; }

    .footer { background:#0F150F; color:#B8C1B9; }
    .spectrum { height:6px; display:grid; grid-template-columns:repeat(6,1fr); }
    .footer-main { padding:58px 0 28px; }
    .footer-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; }
    .footer h2 { max-width:520px; color:white; font-size:1.75rem; }
    .footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .footer-links h3 { color:#82C59A; font:700 11px/1.2 ui-monospace, monospace; text-transform:uppercase; letter-spacing:.13em; }
    .footer-links a { min-height:38px; display:flex; align-items:center; color:#C0C8C1; text-decoration:none; font-size:0.875rem; }
    .footer-links a:hover { color:white; }
    .footer-bottom { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:0.75rem; }

    .modal-backdrop {
      position:fixed;
      inset:0;
      z-index:100;
      display:grid;
      place-items:center;
      padding:20px;
      background:rgba(12,18,14,.65);
    }
    .modal { width:min(520px,100%); max-height:90vh; overflow:auto; padding:24px; background:white; border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.3); }
    .modal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }

    @media (max-width:900px) {
      .hero-grid,.position-grid,.app-grid,.footer-grid { grid-template-columns:1fr; }
      .hero { padding-top:52px; }
      .hero-grid { gap:34px; }
      .hero-copy { font-size:1.0625rem; }
      .trust-grid { grid-template-columns:1fr; }
      .trust-item { border-right:0; border-bottom:1px solid var(--line); }
      .trust-item:last-child { border-bottom:0; }
      .steps,.families { grid-template-columns:repeat(2,1fr); }
      .app-grid { gap:16px; }
      .tab-list { grid-template-columns:repeat(4,1fr); }
      .tab-button { justify-content:center; text-align:center; font-size:0.75rem; }
      .result-details { grid-template-columns:1fr; }
    }

    @media (max-width:720px) {
      .wrap { width:min(var(--max), calc(100% - 28px)); }
      .section { padding:66px 0; }
      .nav-links { display:none; }
      .menu-button { display:grid; place-items:center; }
      .mobile-menu[data-open="true"] { display:grid; }
      .hero { padding:44px 0 54px; }
      .hero-grid { grid-template-columns:1fr; }
      .hero h1 { font-size:clamp(2.9375rem,14vw,4.25rem); }
      .hero-copy { font-size:1rem; line-height:1.58; }
      .hero .button-row { display:grid; }
      .hero .button { width:100%; }
      .demo-card { padding:18px; }
      .demo-controls { grid-template-columns:1fr; }
      .score-row { grid-template-columns:1fr; }
      .score { font-size:2.75rem; }
      .steps,.families,.page-grid { grid-template-columns:1fr; }
      .tab-list { grid-template-columns:repeat(2,1fr); }
      .sample-grid { grid-template-columns:1fr; }
      .position-row { grid-template-columns:1fr; gap:7px; }
      .footer-links { grid-template-columns:1fr 1fr; }
      .manual-table th:nth-child(3),.manual-table td:nth-child(3) { display:none; }
    }

    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    }

    .scanner-shell { margin-top:20px; }
    .scanner-reader { min-height:280px; border:1px dashed var(--line-strong); border-radius:14px; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; }
    .scanner-reader:empty::before { content:"Camera preview appears here"; color:var(--quiet); font-size:0.875rem; }
    .scanner-reader video { width:100% !important; height:auto !important; object-fit:cover; }
    .scanner-reader img { max-width:100%; }
    .scanner-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
    .camera-picker { margin-top:12px; }
    .camera-picker label { display:block; margin-bottom:6px; font-size:0.8125rem; font-weight:700; }
    .camera-picker select { width:100%; min-height:44px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); color:var(--ink); padding:0 12px; }
    .scanner-result { overflow-wrap:anywhere; }
    .scanner-note { margin-top:12px; font-size:0.8125rem; color:var(--quiet); }
    @media (max-width:520px) { .scanner-reader { min-height:230px; } .scanner-actions .button { width:100%; } }

    /* Mobile app layout: compact, scanner-first, and easier to operate one-handed. */
    @media (max-width:720px) {
      [data-page="app"] .page-head { padding:28px 0 14px; }
      [data-page="app"] .page-head .eyebrow { margin-bottom:10px; font-size:0.6875rem; }
      [data-page="app"] .page-head h1 { margin-bottom:14px; font-size:clamp(2.375rem,11.5vw,3.25rem); line-height:.98; }
      [data-page="app"] .page-head p { margin-bottom:0; font-size:1rem; line-height:1.5; }
      [data-page="app"] .section-tight { padding:18px 0 44px; }
      [data-page="app"] .app-grid { gap:12px; }
      [data-page="app"] aside.panel { padding:16px; border-radius:16px; box-shadow:none; }
      [data-page="app"] aside.panel > h2 { margin-bottom:5px; }
      [data-page="app"] aside.panel > .small { margin-bottom:13px; font-size:0.875rem; }
      [data-page="app"] .tab-list {
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding:1px 1px 5px;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
      }
      [data-page="app"] .tab-list::-webkit-scrollbar { display:none; }
      [data-page="app"] .tab-button {
        flex:0 0 auto;
        min-width:auto;
        min-height:44px;
        padding:0 16px;
        border-radius:999px;
        justify-content:center;
        scroll-snap-align:start;
        white-space:nowrap;
        font-size:0.8125rem;
      }
      [data-page="app"] .tab-button span { display:none; }
            [data-page="app"] .saved-palate-block { display:block; }
      [data-page="app"] .saved-palate-block > .u-hr { display:none; }
      [data-page="app"] .input-panel { padding:18px; border-radius:16px; box-shadow:none; }
      [data-page="app"] .input-panel h2 { margin-bottom:8px; font-size:1.75rem; line-height:1.05; }
      [data-page="app"] .input-panel > .small { margin-bottom:14px; font-size:0.9375rem; line-height:1.5; }
      [data-page="app"] .scanner-shell { margin-top:12px; }
      [data-page="app"] .scanner-reader {
        min-height:0;
        aspect-ratio:4 / 3;
        max-height:360px;
        border-radius:12px;
      }
      [data-page="app"] .scanner-reader video { width:100% !important; height:100% !important; object-fit:cover; }
      [data-page="app"] .scanner-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
      [data-page="app"] .scanner-actions .button { width:100%; min-height:46px; padding-inline:12px; }
      [data-page="app"] #chooseQrImageButton { grid-column:1 / -1; }
      [data-page="app"] .scanner-note { margin:9px 0 0; font-size:0.75rem; line-height:1.45; }
    }

    @media (max-width:390px) {
      [data-page="app"] .page-head h1 { font-size:2.4375rem; }
      [data-page="app"] .scanner-actions { grid-template-columns:1fr; }
      [data-page="app"] #chooseQrImageButton { grid-column:auto; }
    }
  

    /* Prevent programmatic route focus from drawing a page-height outline. */
    #main-content:focus { outline:none; }

    /* Mobile matcher refinement: compact, horizontal choices and fewer card layers. */
    @media (max-width:720px) {
      [data-page="app"] .page-head { padding:22px 0 10px; }
      [data-page="app"] .page-head h1 {
        max-width:330px;
        margin-bottom:10px;
        font-size:clamp(2.1875rem,10.5vw,2.875rem);
        line-height:.98;
      }
      [data-page="app"] .page-head p {
        max-width:350px;
        font-size:0.9375rem;
        line-height:1.45;
      }
      [data-page="app"] .section-tight { padding:10px 0 34px; }
      [data-page="app"] .app-grid { gap:10px; }
      [data-page="app"] aside.panel {
        padding:14px;
        border-radius:14px;
      }
      [data-page="app"] aside.panel > h2 { font-size:1.125rem !important; }
      [data-page="app"] aside.panel > .small { display:none; }
      [data-page="app"] .tab-list {
        margin-top:8px;
        padding-bottom:2px;
      }
      [data-page="app"] .tab-button {
        min-height:40px;
        padding:0 14px;
        font-size:0.75rem;
      }
      [data-page="app"] .input-panel {
        min-height:0;
        padding:16px;
        border-radius:14px;
      }
      [data-page="app"] .input-panel h2 {
        margin-bottom:5px;
        font-size:1.5625rem;
      }
      [data-page="app"] .input-panel > .small {
        margin-bottom:10px;
        font-size:0.875rem;
      }
      [data-page="app"] #samplePanel h3 {
        margin:16px 0 9px !important;
        font-size:0.875rem !important;
      }
      [data-page="app"] .sample-grid {
        display:flex;
        gap:9px;
        margin:0;
        overflow-x:auto;
        padding:2px 2px 8px;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        overscroll-behavior-inline:contain;
      }
      [data-page="app"] .sample-grid::-webkit-scrollbar { display:none; }
      [data-page="app"] .sample-chip {
        flex:0 0 min(78%,270px);
        min-height:78px;
        padding:12px 14px;
        border-radius:13px;
        scroll-snap-align:start;
      }
      [data-page="app"] .sample-chip strong {
        font-size:1rem;
        line-height:1.2;
      }
      [data-page="app"] .sample-chip span {
        margin-top:4px;
        font-size:0.8125rem;
        line-height:1.35;
      }
      [data-page="app"] .sample-chip[aria-pressed="true"] {
        border-color:var(--green);
        box-shadow:inset 0 0 0 1px var(--green);
        background:#F8FBF8;
      }
      [data-page="app"] .result-panel {
        margin-top:10px;
        padding:16px;
        border-radius:14px;
        box-shadow:none;
      }
      [data-page="app"] .result-head { gap:10px; }
      [data-page="app"] .result-head h2 { font-size:1.375rem; }
      [data-page="app"] .result-details { gap:8px; margin-top:14px; }
      [data-page="app"] .result-detail { padding:12px; }
    }

    @media (max-width:390px) {
      [data-page="app"] .page-head h1 { font-size:2.25rem; }
      [data-page="app"] .sample-chip { flex-basis:86%; }
    }

.match-feedback{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.match-feedback-q{margin:0 0 12px;font-size:0.9375rem;color:var(--muted);max-width:60ch}
.match-feedback-actions{display:flex;gap:10px;flex-wrap:wrap}
.feedback-btn{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:650 14px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .15s,background .15s,transform .06s}
.feedback-btn:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:color-mix(in srgb,var(--green) 5%,var(--surface))}
.feedback-btn:active{transform:translateY(1px)}
.feedback-btn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.feedback-btn[disabled]{opacity:.55;cursor:default}
.match-feedback-ack{margin:14px 0 0;font-size:0.875rem;color:var(--green-dark);font-weight:600}
@media(prefers-reduced-motion:reduce){.feedback-btn{transition:none}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---- Tier 3: utility classes replacing inline style attributes ----
   Lets Content-Security-Policy drop style-src 'unsafe-inline'. ---- */
:root{--citrus:#D19412;--citrus-text:#654700;--earthy:#9C6B3F;--earthy-text:#5C3B20;--spice:#C25B2E;--spice-text:#7E3417;--pine:#3E7A54;--pine-text:#2A5439;--floral:#8A6BBE;--floral-text:#4E3878;--herbal:#4E8D99;--herbal-text:#2C565E;}
.bg-citrus{background:#D19412}
.fam-citrus{--family:#D19412;--family-text:#654700}
.bg-earthy{background:#9C6B3F}
.fam-earthy{--family:#9C6B3F;--family-text:#5C3B20}
.bg-spice{background:#C25B2E}
.fam-spice{--family:#C25B2E;--family-text:#7E3417}
.bg-pine{background:#3E7A54}
.fam-pine{--family:#3E7A54;--family-text:#2A5439}
.bg-floral{background:#8A6BBE}
.fam-floral{--family:#8A6BBE;--family-text:#4E3878}
.bg-herbal{background:#4E8D99}
.fam-herbal{--family:#4E8D99;--family-text:#2C565E}
.u-mt-14{margin-top:14px}
.u-mt-18{margin-top:18px;display:inline-block}
.u-mt-22{margin-top:22px}
.u-pt-20{padding-top:20px}
.u-fs-26{font-size:1.625rem}
.u-fs-15{font-size:0.9375rem}
.u-muted-light{color:#C6D0C8}
.u-footer-note{max-width:34ch;margin:14px 0 0;color:#C6D0C8}
.u-brand-light{color:#fff;text-decoration:none}
.u-accent{color:#82C59A}
.u-hero-h2{font-size:clamp(2.5rem,7vw,4.5rem);line-height:.96}
.famcard,.famcard *{text-decoration:none}


/* ---- Equalizer wordmark ---- */
.brand-bars{ align-items:flex-end; }
.brand-bars i{ transform-origin:bottom; will-change:transform; }
.brand-bars i.bg-citrus{ height:10px; }
.brand-bars i.bg-earthy{ height:17px; }
.brand-bars i.bg-spice { height:7px; }
.brand-bars i.bg-pine  { height:21px; }
.brand-bars i.bg-floral{ height:13px; }
.brand-bars i.bg-herbal{ height:16px; }
@keyframes nose-eq{
  0%,100%{ transform:scaleY(.52) }
  22%    { transform:scaleY(1) }
  44%    { transform:scaleY(.68) }
  66%    { transform:scaleY(.94) }
  84%    { transform:scaleY(.60) }
}
.brand-bars i{ animation:nose-eq 2.4s ease-in-out infinite; }
.brand-bars i.bg-citrus{ animation-duration:2.3s; animation-delay:-.20s; }
.brand-bars i.bg-earthy{ animation-duration:2.7s; animation-delay:-1.10s; }
.brand-bars i.bg-spice { animation-duration:2.1s; animation-delay:-.60s; }
.brand-bars i.bg-pine  { animation-duration:2.9s; animation-delay:-1.60s; }
.brand-bars i.bg-floral{ animation-duration:2.5s; animation-delay:-.90s; }
.brand-bars i.bg-herbal{ animation-duration:2.6s; animation-delay:-1.35s; }
@media (prefers-reduced-motion: reduce){
  .brand-bars i{ animation:none; }
}

/* Matcher horizontal-overflow fix.
   A 1fr grid track carries an implicit min-width:auto, so the horizontally
   scrolling sample row stretched its column — and the whole page — instead of
   scrolling inside it. minmax(0,1fr) plus min-width:0 lets it contain itself. */
@media (max-width:900px){
  .app-grid,.footer-grid{ grid-template-columns:minmax(0,1fr); }
  .app-grid > *,
  .app-grid .card,
  .app-grid .panel{ min-width:0; }
}

/* Report-method tabs on narrow screens.
   The base .tab-button{width:100%} was never overridden inside the flex
   scroller, so each pill filled the screen and the remaining four were parked
   off-canvas with no affordance. Size them to content and wrap instead. */
@media (max-width:720px){
  .tab-list{ flex-wrap:wrap; overflow-x:visible; }
  .tab-list .tab-button{ width:auto; flex:0 0 auto; }
}

/* QR scan region was rendering as a wide rectangle: the viewfinder was forced
   into a 4:3 box with object-fit:cover, which scales the video non-uniformly,
   while html5-qrcode draws its (square) scan overlay in the video's own
   coordinate space. Let the video keep its natural ratio and the box is square. */
@media (max-width:720px){
  .scanner-reader{ aspect-ratio:auto; max-height:none; }
  .scanner-reader video{ height:auto !important; object-fit:contain; }
}


/* ---- COA confirmation card ---------------------------------------------
   Shown after a scan or a pasted link parses. The parser proposes; the
   person decides. Values stay editable because "the parser matched our
   fixtures" is not the same claim as "this matches the paper in your hand". */
.coa-confirm{
  margin-top:18px; padding:20px;
  border:1px solid var(--line); border-radius:16px;
  background:var(--surface);
}
.coa-confirm > h3{ margin:0 0 6px; }
.coa-confirm > .small{ margin:0 0 16px; color:var(--muted); }
.coa-label{
  margin:18px 0 8px; font-size:0.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.coa-meta{
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px;
  margin:0; font-size:0.9375rem;
}
.coa-meta dt{ color:var(--muted); }
.coa-meta dd{ margin:0; font-weight:650; }
.coa-coverage{
  margin:12px 0 0; padding:12px 14px; border-radius:12px;
  background:var(--surface-2); color:var(--ink);
  font-size:0.9375rem; line-height:1.5;
}
.coa-coverage[data-partial="true"]{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #8A8377 45%, transparent);
}
#coaConfirmName{
  width:100%; min-height:46px; padding:0 12px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:1rem;
}
.coa-rows{ display:grid; gap:8px; }
.coa-row{
  display:grid; grid-template-columns:1fr 96px; gap:10px; align-items:center;
}
.coa-row label{ font-size:0.9375rem; }
.coa-row input{
  min-height:42px; padding:0 10px; text-align:right;
  border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.9375rem;
}
.coa-row input:focus-visible,#coaConfirmName:focus-visible{
  outline:3px solid rgba(47,97,68,.38); outline-offset:2px;
}
@media (max-width:520px){
  .coa-meta{ grid-template-columns:1fr; gap:2px 0; }
  .coa-meta dd{ margin-bottom:8px; }
}
/* ---- saved jar list (append to css/shell.*.css) ---- */
.saved-list {
  list-style: none;
  margin: 12px 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.saved-item-name {
  font-size: 0.875rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.saved-item-remove {
  flex: none;
  /* 44px is the accessible minimum tap target; these sit in a narrow sidebar
     on phones and a smaller control here would be genuinely hard to hit. */
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted, #6E655C);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.saved-item-remove:hover {
  color: #93401F;
  border-color: #93401F;
}
.saved-item-remove:focus-visible {
  outline: 2px solid #2F6144;
  outline-offset: 2px;
}
/* On phones the sidebar has to stay short, so this block collapses rather
   than disappearing. It was previously display:none below 430px, which made
   export, import, delete and account backup unreachable on the device most
   people use. Hidden controls are worse than crowded ones. */
.saved-palate-block > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: 650 1rem/1 Inter, system-ui, sans-serif;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.saved-palate-block > summary::-webkit-details-marker { display: none; }
.saved-palate-block > summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.8em;
}
/* On phones the sidebar has to stay short, so this block collapses rather
   than disappearing. It was previously display:none below 430px, which made
   export, import, delete and account backup unreachable on the device most
   people use. Hidden controls are worse than crowded ones. */
.saved-palate-block > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: 650 1rem/1 Inter, system-ui, sans-serif;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.saved-palate-block > summary::-webkit-details-marker { display: none; }
.saved-palate-block > summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.8em;
}
.saved-palate-block[open] > summary::after { content: "▴"; }