/* UpBox Milk & Formula Guide styles.
   Namespaced under .upbox-milk / .uml-. No global selectors. */
.upbox-milk{
    --navy:#0F1E35; --sage:#6F8F79; --coral:#E4573D; --cream:#F6F2EB;
    --card:#FFFFFF; --card-2:#FBF8F2; --line:#E6DECE; --ink:#0F1E35; --ink-soft:#4B566B;
    --sage-tint:#E8EEE9; --coral-tint:#F9E7E1;
    box-sizing:border-box; width:100%; background:var(--cream);
    font-family:var(--font-sans),system-ui,sans-serif; color:var(--ink);
  }
  .upbox-milk *,.upbox-milk *::before,.upbox-milk *::after{box-sizing:border-box;}
  .upbox-milk [hidden]{display:none !important;}

  .uml-container{max-width:1240px;margin:0 auto;padding:60px 40px;}
  .uml-grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:52px;align-items:start;}

  .uml-eyebrow{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);}
  .uml-title{margin:0 0 12px;font-family:var(--font-serif),serif;font-weight:600;font-size:42px;line-height:1.08;color:var(--navy);}
  .uml-sub{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:46ch;}

  .uml-control{margin:28px 0 0;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:16px;}
  .uml-field{margin-bottom:20px;}
  .uml-field:last-child{margin-bottom:0;}
  .uml-field-label{margin:0 0 9px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);}
  .uml-optional{font-weight:500;color:var(--ink-soft);text-transform:none;letter-spacing:0;}
  .uml-seg{display:flex;gap:4px;padding:4px;background:var(--sage-tint);border:1px solid var(--line);border-radius:999px;}
  .uml-seg button{flex:1;padding:10px 12px;border:none;background:transparent;border-radius:999px;font-family:var(--font-sans),sans-serif;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:background .16s,color .16s,box-shadow .16s;}
  .uml-seg button.is-active{background:var(--card);color:var(--navy);box-shadow:0 2px 6px -1px rgba(15,30,53,.16);}
  .uml-age-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
  .uml-readout{font-family:var(--font-serif),serif;font-weight:700;color:var(--navy);line-height:1;display:flex;align-items:baseline;gap:6px;}
  .uml-readout>span:first-child{font-size:32px;}
  .uml-readout-unit{font-family:var(--font-sans),sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase;}
  .uml-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--sage-tint);outline:none;margin:2px 0 10px;cursor:pointer;}
  .uml-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--coral);border:4px solid var(--card);box-shadow:0 3px 10px -1px rgba(228,87,61,.45);cursor:pointer;transition:transform .12s ease;}
  .uml-slider::-webkit-slider-thumb:active{transform:scale(1.12);}
  .uml-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--coral);border:4px solid var(--card);box-shadow:0 3px 10px -1px rgba(228,87,61,.45);cursor:pointer;}
  .uml-slider:focus-visible{box-shadow:0 0 0 3px rgba(228,87,61,.3);}
  .uml-scale{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}

  .uml-measure-row{display:flex;gap:8px;}
  .uml-input{flex:1;min-width:0;height:46px;padding:0 13px;font-family:var(--font-sans),sans-serif;font-size:15px;font-weight:600;color:var(--navy);background:var(--card-2);border:1px solid var(--line);border-radius:11px;outline:none;-moz-appearance:textfield;}
  .uml-input::-webkit-outer-spin-button,.uml-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .uml-input:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(111,143,121,.16);}
  .uml-input::placeholder{color:#B7AF9F;font-weight:500;}
  .uml-unit{display:flex;gap:2px;padding:3px;background:var(--sage-tint);border:1px solid var(--line);border-radius:11px;flex:none;}
  .uml-unit button{padding:0 12px;border:none;background:transparent;border-radius:8px;font-family:var(--font-sans),sans-serif;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
  .uml-unit button.is-active{background:var(--card);color:var(--navy);}
  .uml-help{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-soft);}
  .uml-help a,.uml-how a,.uml-note a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--sage);}
  .uml-help a:hover,.uml-how a:hover,.uml-note a:hover{border-bottom-color:var(--navy);}


  .uml-explain{margin-top:10px;padding:13px 14px;background:var(--card-2);border:1px solid var(--line);border-radius:11px;}
  .uml-explain strong{display:block;margin-bottom:5px;font-size:12.5px;color:var(--navy);}
  .uml-explain p{margin:0;font-size:12.5px;line-height:1.52;color:var(--ink-soft);}
  .uml-explain a,.uml-guards a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--sage);}
  .uml-explain a:hover,.uml-guards a:hover{border-bottom-color:var(--navy);}

  .uml-stepper{display:flex;gap:8px;align-items:stretch;}
  .uml-stepper button{width:46px;height:46px;flex:none;border:1px solid var(--line);background:var(--card-2);border-radius:11px;font-size:20px;font-weight:600;color:var(--navy);cursor:pointer;line-height:1;}
  .uml-stepper button:hover{background:var(--sage-tint);}
  .uml-feeds-input{text-align:center;max-width:80px;}

  .uml-result{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 45px rgba(15,30,53,.08);padding:26px;}
  .uml-result-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative;}
  .uml-result-top::before{content:"";position:absolute;top:-26px;left:-26px;right:-26px;height:4px;background:linear-gradient(90deg,var(--coral),#C6472F);border-radius:20px 20px 0 0;}
  .uml-result-kicker{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
  .uml-result-big{margin:0;font-family:var(--font-serif),serif;font-weight:700;font-size:44px;line-height:1.02;color:var(--navy);}
  .uml-result-big .uml-oz{font-family:var(--font-sans),sans-serif;font-weight:600;font-size:.44em;color:var(--ink-soft);}
  .uml-result-sub{margin:6px 0 0;font-size:13px;color:var(--ink-soft);}
  .uml-perfeed{text-align:right;min-width:150px;}
  .uml-perfeed-label{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
  .uml-perfeed-val{margin:0;font-family:var(--font-serif),serif;font-weight:700;font-size:28px;line-height:1.02;color:var(--navy);}
  .uml-perfeed-val .uml-oz{font-family:var(--font-sans),sans-serif;font-weight:600;font-size:.5em;color:var(--ink-soft);}
  .uml-perfeed-sub{margin:5px 0 0;font-size:12px;color:var(--ink-soft);}

  .uml-block-label{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}
  .uml-how{margin-bottom:16px;}
  .uml-how p:last-child{margin:0;font-size:14px;line-height:1.55;color:var(--ink);}
  .uml-note{margin-bottom:16px;padding:14px 16px;background:var(--sage-tint);border-radius:12px;}
  .uml-note p{margin:0;font-size:13.5px;line-height:1.5;color:var(--navy);}
  .uml-guards{margin-bottom:16px;padding:18px 20px;background:var(--card-2);border:1px solid var(--line);border-radius:14px;}
  .uml-guards ul{margin:0;padding:0;list-style:none;}
  .uml-guards li{position:relative;padding-left:20px;margin-bottom:10px;font-size:13px;line-height:1.5;color:var(--ink);}
  .uml-guards li:last-child{margin-bottom:0;}
  .uml-guards li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--sage);}
  .uml-support{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .uml-support p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-soft);max-width:46ch;}
  .uml-support p strong{color:var(--navy);font-weight:700;}
  .uml-support-links{display:flex;gap:14px;}
  .uml-support a{font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--coral);padding-bottom:1px;}


  .uml-actions{margin-top:16px;}
  .uml-download{border:1px solid var(--navy);background:transparent;color:var(--navy);border-radius:999px;padding:11px 17px;font-weight:700;font-size:13px;cursor:pointer;}
  .uml-download:hover{background:var(--navy);color:#fff;}
  .uml-shop{margin-top:16px;padding:18px 20px;background:var(--sage-tint);border-radius:14px;}
  .uml-shop-copy{margin:0 0 13px;font-size:13px;line-height:1.5;color:var(--ink-soft);}
  .uml-shop-cta{display:inline-block;padding:11px 17px;background:var(--navy);color:#fff;text-decoration:none;border-radius:999px;font-size:13px;font-weight:700;}
  .uml-related{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
  .uml-related-links{display:flex;gap:9px 18px;flex-wrap:wrap;}
  .uml-related-links a{font-size:12.5px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--sage);}


  .uml-footer{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:block;}
  .uml-disclaimer{margin:0;max-width:92ch;font-size:12px;line-height:1.6;color:var(--ink-soft);}


  .uml-sources-compact{margin-top:12px;display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;color:var(--ink-soft);}
  .uml-source-label{font-size:11.5px;font-weight:700;color:var(--navy);}
  .uml-sources-compact a{font-size:11.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--sage);}
  .uml-sources-compact a:hover{color:var(--navy);border-bottom-color:var(--navy);}

  .uml-result.uml-fade{opacity:0;transform:translateY(6px);}
  .uml-result{transition:opacity .26s ease,transform .26s ease;}

  @media(max-width:960px){
    .uml-container{padding:44px 26px;}
    .uml-grid{grid-template-columns:1fr;gap:32px;}
    .uml-title{font-size:34px;}
    .uml-sub{max-width:none;}

  }
  @media(max-width:560px){
    .uml-container{padding:34px 18px;}
    .uml-title{font-size:29px;}
    .uml-result-big{font-size:36px;}
    .uml-result-top{flex-direction:column;}
    .uml-perfeed{text-align:left;}
  }
  @media(prefers-reduced-motion:reduce){ .uml-result{transition:none;} }
  .upbox-milk{overflow-x:clip;}
  .upbox-milk a,.upbox-milk p,.upbox-milk li{overflow-wrap:anywhere;}