:root{
    --green:#164a2c; --green-2:#2f7d3b; --green-3:#e7f2df; --leaf:#bfe3a5;
    --mari:#f3a712; --mari-soft:#ffe1a3; --chilli:#c93a22; --chilli-soft:#fbe3dc;
    --soil:#3a2718; --soil-2:#6b5443; --kraft:#f1e3c8; --kraft-2:#e7d4b0; --paper:#ffffff;
    --ink-blue:#1b2f5e; --pen:#c8322b;
    --stage:#e6e3dc;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--stage); color:var(--soil); font-family:Figtree,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
  ::selection{ background:var(--mari); color:var(--soil); }
  :focus-visible{ outline:3px solid var(--mari); outline-offset:2px; border-radius:6px; }
  svg.lucide{ width:18px; height:18px; stroke-width:2; flex:none; }
  .tnum{ font-variant-numeric:tabular-nums; }

  /* stage */

  /* provenance tags */

  /* phone */
  .phone{ width:100%; max-width:390px; background:var(--kraft); border-radius:28px; overflow:hidden; box-shadow:0 18px 40px -12px rgba(40,30,20,.35), 0 2px 6px rgba(40,30,20,.12); }
  body.customer .partner-only{ display:none !important; }
  body:not(.customer) .customer-only{ display:none !important; }

  /* front */
  .front{ background:var(--green); color:#fff; padding:18px 20px 0; }
  .bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .brand{ display:flex; gap:6px; align-items:center; font-size:12.5px; font-weight:800; letter-spacing:.03em; }
  .brand svg{ color:var(--mari); }
  .seg{ display:flex; background:rgba(255,255,255,.13); border-radius:10px; padding:3px; }
  .seg button{ all:unset; cursor:pointer; padding:5px 9px; border-radius:7px; font-size:12px; font-weight:800; color:#dbeccd; }
  .seg button[aria-pressed=true]{ background:var(--mari); color:var(--soil); box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .mode{ margin-top:12px; display:flex; background:rgba(0,0,0,.18); border-radius:12px; padding:3px; }
  .mode button{ all:unset; cursor:pointer; flex:1; text-align:center; padding:8px 6px; border-radius:9px; font-size:13px; font-weight:800; color:#cfe5c1; display:flex; gap:6px; justify-content:center; align-items:center; }
  .mode button[aria-pressed=true]{ background:#fff; color:var(--green); }
  .who{ margin-top:20px; font-size:13.5px; color:var(--leaf); font-weight:600; display:flex; flex-wrap:wrap; gap:4px 10px; }
  .front h2{ font-family:"Young Serif",serif; font-weight:400; font-size:31px; line-height:1.1; margin-top:8px; letter-spacing:-0.01em; text-wrap:balance; }
  .front h2 em{ font-style:normal; color:var(--mari); }
  .ratio{ display:flex; align-items:flex-end; gap:14px; margin-top:20px; }
  .ratio .n{ font-family:"Young Serif",serif; font-size:86px; line-height:.82; color:var(--mari); }
  .ratio .lbl{ font-size:14px; line-height:1.35; color:#e3f1d8; padding-bottom:6px; }
  .ratio .lbl b{ color:#fff; display:block; font-size:16px; }
  .gauge{ margin-top:16px; }
  .gauge .track{ height:10px; border-radius:99px; position:relative; background:linear-gradient(90deg,#e1563c 0 60%, var(--mari) 60% 84%, #7cc35a 84%); }
  .gauge .pin{ position:absolute; top:-6px; width:6px; height:22px; border-radius:3px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transform:translateX(-50%); }
  .gauge .goal{ position:absolute; top:-22px; transform:translateX(-50%); font-size:11px; font-weight:800; color:var(--leaf); white-space:nowrap; }
  .gauge .ticks{ display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:#cfe5c1; margin-top:6px; }
  .remark{ font-family:Caveat,cursive; font-size:25px; line-height:1.3; color:var(--mari-soft); margin-top:18px; transform:rotate(-1deg); }
  .remark small{ display:block; font-family:Figtree,sans-serif; font-size:12px; color:#cfe5c1; transform:none; margin-top:4px; font-weight:600; }
  .edge{ height:28px; margin:16px -20px 0; background:linear-gradient(var(--green) 0 22px, var(--mari) 22px); }

  .body{ padding:2px 16px 28px; }
  section.blk{ margin-top:26px; }
  section.blk:first-child{ margin-top:0; }
  h3{ font-family:"Young Serif",serif; font-weight:400; font-size:23px; line-height:1.15; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
  h3 svg{ width:22px; height:22px; color:var(--green-2); }
  .card{ background:var(--paper); border-radius:18px; }

  /* partner tip */
  .tip{ background:#e7f5f5; color:#0a4f54; border-radius:14px; padding:12px 14px; font-size:14.5px; line-height:1.5; display:flex; gap:10px; }
  .tip svg{ color:#0d7f86; margin-top:2px; }
  .tip b{ display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#0a5f64; margin-bottom:2px; }

  /* marker table */
  .markers{ padding:4px 14px; }
  .mrow{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:12px 0; border-top:1px solid #efe7d6; }
  .mrow:first-child{ border-top:0; }
  .mname{ font-size:14.5px; font-weight:700; }
  .mname small{ display:block; font-size:12px; color:var(--soil-2); font-weight:500; margin-top:1px; }
  .mval{ font-family:"Young Serif",serif; font-size:22px; text-align:right; line-height:1.1; }
  .stat{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:6px; }
  .st{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; white-space:nowrap; padding:3px 9px 3px 7px; border-radius:99px; }
  .st svg{ width:14px; height:14px; }
  .st.bad{ background:var(--chilli-soft); color:#9e2a16; } .st.mid{ background:#fdeec8; color:#855300; } .st.ok{ background:var(--green-3); color:#1f6630; }
  .mini{ flex:1; height:6px; border-radius:99px; background:#efe7d6; position:relative; }
  .mini span{ position:absolute; top:-3px; width:4px; height:12px; border-radius:2px; background:var(--soil); transform:translateX(-50%); }
  .mini i{ position:absolute; top:0; bottom:0; border-radius:99px; background:#cfe8bf; }

  /* concern cards */
  .care{ background:var(--paper); border-radius:18px; overflow:hidden; margin-top:12px; }
  .care:first-of-type{ margin-top:0; }
  .care .top{ padding:14px 16px; color:#fff; position:relative; }
  .care.c1 .top{ background:var(--chilli); } .care.c2 .top{ background:#a5521b; } .care.c3 .top{ background:#8a6a12; }
  .care .k{ font-size:12px; font-weight:800; display:flex; gap:6px; align-items:center; opacity:.95; }
  .care .top p{ font-family:"Young Serif",serif; font-size:19.5px; line-height:1.2; margin-top:5px; padding-right:74px; }
  .stamp{ position:absolute; right:12px; top:14px; border:2px solid #fff; font-size:11.5px; font-weight:800; letter-spacing:.08em; padding:3px 7px; transform:rotate(-5deg); }
  .care .in{ padding:14px 16px 16px; font-size:15px; line-height:1.55; }
  .hl{ background:linear-gradient(transparent 55%, var(--mari-soft) 55%); font-weight:700; }
  .lab{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--soil-2); margin:14px 0 8px; display:flex; gap:6px; align-items:center; }
  .lab svg{ width:15px; height:15px; }
  .steps{ display:grid; gap:7px; }
  .step{ display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; background:#f7f9f2; border-radius:12px; padding:10px 12px; font-size:14.5px; line-height:1.45; }
  .step .ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--green-3); color:var(--green-2); }
  .step.prod .ic{ background:var(--mari-soft); color:#8a5200; }
  .step.doc .ic{ background:#e6ecf7; color:var(--ink-blue); }
  .step b{ color:var(--green); }
  .step.prod{ background:#fff7e6; }
  .step.prod b{ color:#7a4700; }
  .why{ margin-top:10px; font-size:14px; color:var(--soil-2); line-height:1.5; }
  .note{ font-family:Caveat,cursive; color:var(--pen); font-size:22px; line-height:1.15; margin-top:12px; transform:rotate(-1deg); }

  .minor{ background:var(--paper); border-radius:14px; padding:12px 14px; margin-top:12px; font-size:14.5px; line-height:1.5; display:grid; grid-template-columns:22px 1fr; gap:8px; }
  .minor svg{ color:#9a6500; margin-top:2px; }

  /* good */
  .good{ padding:4px 14px; }
  .good div{ display:grid; grid-template-columns:22px 1fr; gap:10px; padding:11px 0; border-top:1px solid #efe7d6; font-size:14.5px; line-height:1.45; }
  .good div:first-child{ border-top:0; }
  .good svg{ color:var(--green-2); margin-top:1px; }
  .good b{ color:var(--green); }

  /* fatty acid detail */
  details.fa{ background:var(--paper); border-radius:18px; }
  details.fa summary{ list-style:none; cursor:pointer; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:15px; }
  details.fa summary::-webkit-details-marker{ display:none; }
  details.fa summary svg{ transition:transform .25s cubic-bezier(.2,.8,.2,1); }
  details.fa[open] summary svg{ transform:rotate(180deg); }
  .fagroup{ padding:0 16px 6px; }
  .fagroup h4{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--soil-2); margin:10px 0 4px; }
  .farow{ display:grid; grid-template-columns:1fr 58px; gap:4px 10px; padding:8px 0; border-top:1px solid #f2ebdc; font-size:13.5px; }
  .farow .v{ text-align:right; font-weight:800; }
  .farow .v.lo{ color:#9e2a16; } .farow .v.hi{ color:#855300; } .farow .v.in{ color:#1f6630; }
  .farow .rng{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--soil-2); }

  /* plan */
  .plan{ background:var(--green); color:#fff; border-radius:20px; padding:18px 16px; }
  .daily{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .daily div{ background:rgba(255,255,255,.1); border-radius:12px; padding:10px; font-size:13.5px; line-height:1.4; }
  .daily b{ display:flex; gap:6px; align-items:center; color:var(--mari); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; margin-bottom:3px; }
  .daily b svg{ width:15px; height:15px; }
  .tl{ margin-top:16px; display:grid; grid-template-columns:76px 1fr; gap:12px 10px; font-size:14px; line-height:1.45; }
  .tl .d{ font-family:"Young Serif",serif; color:var(--mari); font-size:17px; }
  .targets{ margin-top:16px; background:#fff; color:var(--soil); border-radius:14px; padding:12px 14px; }
  .targets b{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--soil-2); }
  .tg{ display:grid; grid-template-columns:1fr auto auto; gap:6px 12px; margin-top:8px; font-size:14px; align-items:center; }
  .tg .from{ color:#9e2a16; font-weight:700; } .tg .to{ color:var(--green-2); font-weight:800; }
  .promise{ margin-top:16px; font-family:"Young Serif",serif; font-size:19px; line-height:1.3; color:var(--leaf); }
  .sign{ font-family:Caveat,cursive; font-size:26px; color:var(--mari); margin-top:8px; }

  .safety{ background:#fff; border:2px solid var(--ink-blue); border-radius:16px; padding:12px 14px; display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14.5px; line-height:1.5; color:var(--ink-blue); }
  .safety b{ display:block; }

  .foot{ padding:18px 20px 26px; background:var(--kraft-2); font-size:12.5px; line-height:1.5; color:var(--soil-2); }
  .foot b{ color:var(--soil); }