:root { --bg:#f8f7f3; --paper:#fffefa; --white:#fff; --ink:#191918; --muted:#64635e; --line:#dfded7; --accent:#E4002B; --accent-dark:#E4002B; --tint:#fff0ee; --green:#305b40; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--bg); color:var(--ink); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
    a { color:inherit; }
    button, input, select { font:inherit; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
    .wrap { max-width:1140px; padding:0 28px; margin:0 auto; }
    .topbar { border-bottom:1px solid var(--line); background:rgba(255,255,255,.46); }
    .topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px; }
    .brand { font-size:33px; font-weight:850; letter-spacing:-2.6px; line-height:1; }
    .eyebrow, .navnote { color:var(--muted); font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:.18em; }
    .navnote { white-space:nowrap; }
    .hero { padding:66px 0 35px; display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:35px; align-items:end; }
    .label { display:inline-flex; align-items:center; border:1px solid var(--line); padding:7px 12px; border-radius:20px; background:var(--paper); color:#5e5b55; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.13em; }
    h1 { font-size:clamp(2.95rem,6.3vw,5.5rem); letter-spacing:-.075em; line-height:.99; max-width:760px; font-weight:850; margin:20px 0 21px; }
    .hero h1 span { color:var(--accent); }
    .subhead { max-width:610px; margin:0; font-size:17px; line-height:1.65; color:var(--muted); }
    .hero-figure { position:relative; border:1px solid #e6d9d4; border-radius:24px; min-height:285px; background:linear-gradient(145deg, #ffebe4, #fff8f4 55%, #f8f7f3); overflow:hidden; padding:26px; }
    .hero-figure::before { content:""; position:absolute; width:280px; height:280px; right:-110px; top:-106px; border-radius:50%; background:var(--accent); opacity:.92; }
    .hero-figure::after { content:""; position:absolute; width:190px; height:190px; right:25px; bottom:-122px; border-radius:50%; border:46px solid #f5bbb1; }
    .hero-figure .mini-label { position:relative; z-index:1; font-weight:900; letter-spacing:.15em; font-size:11px; text-transform:uppercase; }
    .hero-figure .big { position:relative; z-index:1; font-size:81px; font-weight:850; letter-spacing:-.08em; line-height:1; margin-top:65px; }
    .hero-figure .small { position:relative; z-index:1; font-size:14px; font-weight:650; margin-top:8px; color:#56514e; }
    .tool-shell { background:var(--white); border:1px solid var(--line); border-radius:24px; box-shadow:0 17px 52px rgba(27,26,21,.055); overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); margin:10px 0 64px; }
    .inputs-panel { padding:35px; }
    .results-panel { background:var(--paper); border-left:1px solid var(--line); padding:35px; }
    .section-title { font-size:25px; line-height:1.14; letter-spacing:-.05em; font-weight:800; margin:10px 0 9px; }
    .section-copy { color:var(--muted); font-size:14px; margin:0 0 29px; }
    .form-group { margin:0 0 22px; }
    .input-label { display:block; margin-bottom:10px; font-size:13px; font-weight:750; letter-spacing:-.01em; }
    .input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
    .num, .select { appearance:none; background:#fff; border:1px solid #cbc9c0; border-radius:12px; min-height:51px; width:100%; color:var(--ink); padding:12px 14px; transition:border-color .1s; }
    .num:hover, .select:hover { border-color:#8e8b7f; }
    .select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23545450' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
    .switch { display:flex; padding:4px; border:1px solid var(--line); border-radius:12px; background:#f4f3ee; }
    .switch button { background:transparent; border:0; border-radius:8px; cursor:pointer; min-width:49px; font-size:13px; font-weight:800; color:var(--muted); }
    .switch button[aria-pressed="true"] { color:#fff; background:#252522; }
    .hint { font-size:12px; color:var(--muted); margin:7px 0 0; }
    .divider { height:1px; background:var(--line); margin:25px 0; }
    .smallprint { font-size:12px; color:var(--muted); line-height:1.65; margin:0; }
    .stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:21px; }
    .stat { padding:20px 18px; border:1px solid var(--line); border-radius:15px; background:white; }
    .stat-kicker { font-size:11px; color:#67635e; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px; }
    .stat-value { font-size:clamp(28px,4vw,39px); font-weight:850; line-height:1.1; letter-spacing:-.06em; white-space:nowrap; }
    .stat-value span { font-size:15px; letter-spacing:0; color:#706c65; font-weight:650; }
    .stat-sub { font-size:11px; color:#766f68; margin-top:9px; }
    .comparison { background:var(--tint); border:1px solid #f4d5d0; border-radius:16px; padding:20px; }
    .comparison-title { display:flex; gap:12px; align-items:center; justify-content:space-between; font-weight:800; font-size:18px; letter-spacing:-.03em; }
    .comparison-flag { color:var(--accent-dark); font-size:10px; letter-spacing:.11em; text-transform:uppercase; font-weight:850; white-space:nowrap; }
    .comparison p { font-size:12px; color:#6c504d; line-height:1.6; margin:7px 0 16px; }
    .meter-row { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin:14px 0 6px; gap:8px; }
    .meter-row strong { font-size:12px; }
    .meter { background:#f2d3cf; height:8px; border-radius:20px; overflow:hidden; }
    .meter span { display:block; height:100%; border-radius:20px; background:var(--accent); transition:width .2s ease; }
    .introductory { margin:15px 0 0; font-size:12px; color:#695f5b; }
    .cta { display:flex; align-items:center; justify-content:center; text-align:center; gap:8px; min-height:55px; padding:13px 16px; background:var(--accent); color:#fff; font-weight:800; font-size:15px; border-radius:12px; text-decoration:none; margin-top:20px; transition:background .15s; }
    .cta:hover { background:var(--accent-dark); }
    .caveat { font-size:11px; color:#736d65; line-height:1.55; margin:12px 0 0; }
    .error { display:none; padding:12px 14px; background:#fff0ef; border:1px solid #edc0bb; border-radius:10px; color:#E4002B; font-size:12px; margin-bottom:16px; }
    .error.show { display:block; }
    .body-copy { max-width:855px; margin:0 auto 68px; }
    .body-copy h2 { font-size:clamp(27px,4vw,38px); line-height:1.09; letter-spacing:-.06em; margin:0 0 17px; }
    .body-copy h3 { font-size:19px; letter-spacing:-.025em; margin:30px 0 8px; }
    .body-copy p { color:#585750; font-size:15px; line-height:1.75; margin:0 0 18px; }
    .sources { background:#efeee8; padding:20px; border-radius:14px; font-size:13px; color:#53514b; }
    .sources a { text-underline-offset:3px; }
    .faq { max-width:855px; margin:0 auto 85px; }
    .faq h2 { font-size:36px; letter-spacing:-.06em; margin:0 0 22px; }
    details { border-top:1px solid var(--line); }
    details:last-child { border-bottom:1px solid var(--line); }
    summary { cursor:pointer; list-style:none; padding:19px 35px 19px 0; position:relative; font-weight:750; font-size:16px; }
    summary::-webkit-details-marker { display:none; }
    summary::after { content:'+'; position:absolute; right:8px; top:14px; font-weight:400; font-size:24px; color:var(--accent); }
    details[open] summary::after { content:'−'; }
    details p { color:var(--muted); font-size:14px; margin:0 0 20px; line-height:1.7; }
    .footer { border-top:1px solid var(--line); min-height:92px; display:flex; justify-content:space-between; gap:12px; align-items:center; color:#74716a; font-size:11px; }
    .footer strong { color:#20201d; font-size:21px; letter-spacing:-1.1px; }
    @media (max-width:920px) { .hero { grid-template-columns:1fr; } .hero-figure { display:none; } }
    @media (max-width:740px) { .wrap { padding:0 16px; } .topbar-inner { min-height:62px; } .brand { font-size:28px; } .navnote { font-size:10px; letter-spacing:.09em; } .hero { padding:47px 0 26px; } h1 { font-size:clamp(44px,11vw,72px); margin:16px 0; } .subhead { font-size:15px; } .tool-shell { grid-template-columns:1fr; margin:2px 0 55px; border-radius:18px; } .inputs-panel, .results-panel { padding:24px 20px; } .results-panel { border-left:0; border-top:1px solid var(--line); } .stat { padding:17px 13px; } .stat-value { font-size:31px; } .stat-sub { font-size:10px; } .body-copy { margin-bottom:55px; } .faq { margin-bottom:60px; } .faq h2 { font-size:30px; } .footer { padding:16px 0; flex-wrap:wrap; } }
    @media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }
  
.protein-meter{width:19%}.fiber-meter{width:36%}.source-details{margin-top:6px}