/* DJN homepage, round 3. Tokens from team2/identity.md. Montserrat (headings, final per Blake Oct 29) + Helvetica body. */
:root{
  --ground:#FFFFFF; --tile:#F2F4F5; --ink:#14171C; --muted:#555B64;
  --line:#DDE0E4; --deep:#24354D; --accent:#1F4E9A;
  --display:"Montserrat",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:16px; --sec:40px;
}
@media (min-width:1024px){ :root{ --gut:32px; --sec:64px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
body{ margin:0; background:var(--ground); color:var(--ink); font:400 17px/1.5 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
picture{ display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0; letter-spacing:-0.02em; color:var(--ink); }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
button,select{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
.wrap{ max-width:1344px; margin:0 auto; padding:0 var(--gut); }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:8px; top:-80px; z-index:100; background:var(--deep); color:var(--ground); padding:12px 16px; }
.skip:focus{ top:8px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* one link style everywhere: underline at about 35% of the text color, visible on white and Tile */
.textlink,.returning a,.hero-rating span,.q-prod,.f-legal a,.f-contact a{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);
}
.textlink{ display:inline-block; padding:12px 0; margin:-12px 0; font-weight:500; }
.textlink:hover,.returning a:hover,.hero-rating:hover span,.q-prod:hover{ text-decoration-color:currentColor; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 32px; background:var(--deep); color:var(--ground); font:600 16px/1 var(--display); text-decoration:none; border-radius:3px; }
.btn:hover{ background:var(--ink); }
.btn-light{ background:var(--ground); color:var(--deep); }
.btn-light:hover{ background:var(--line); color:var(--ink); }

/* 0 announcement */
.announce{ background:var(--deep); color:var(--ground); text-align:center; font-size:14px; line-height:20px; padding:8px var(--gut); }
.announce .short{ display:none; }
@media (max-width:389px){ .announce .long{ display:none; } .announce .short{ display:inline; } }

/* 1 header */
.hdr{ position:sticky; top:0; z-index:20; background:var(--ground); border-bottom:1px solid var(--line); }
.hdr-in{ display:flex; align-items:center; height:56px; gap:4px; }
.logo{ flex:1; display:flex; align-items:center; min-height:44px; padding-left:4px; }
.logo img{ width:140px; }
.icon-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }
.icon-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mainnav,.hdr-reorder{ display:none; }
.hdr-tools{ display:flex; align-items:center; }
.menu-btn{ margin-left:-12px; }
.hdr-tools .cart{ margin-right:-12px; }
.acct{ position:relative; }
.acct-menu{ position:absolute; right:0; top:48px; min-width:220px; background:var(--ground); border:1px solid var(--line); padding:8px 0; z-index:30; }
.acct-menu a{ display:block; padding:12px 24px; text-decoration:none; font-size:16px; }
.acct-menu a:hover{ background:var(--tile); }
.acct-menu li:nth-child(4){ border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
@media (min-width:768px){ .logo{ justify-content:center; padding-left:0; } .logo img{ width:156px; } }
@media (min-width:1200px){
  .hdr-in{ height:72px; gap:24px; }
  .menu-btn{ display:none; }
  .logo{ flex:none; } .logo img{ width:180px; }
  .mainnav{ display:block; flex:1; }
  .mainnav ul{ display:flex; justify-content:center; gap:24px; }
  .mainnav a,.hdr-reorder{ display:block; padding:12px 0; font-size:15px; font-weight:500; text-decoration:none; }
  .mainnav a:hover,.hdr-reorder:hover{ color:var(--accent); }
  .hdr-reorder{ margin-right:12px; }
}

/* drawer */
.drawer{ position:fixed; inset:0; z-index:50; background:rgba(20,23,28,0.4); }
.drawer[hidden]{ display:none; }
.drawer-panel{ background:var(--ground); width:min(380px,92vw); height:100%; overflow-y:auto; padding:8px 16px 40px; }
.drawer-top{ display:flex; justify-content:flex-end; margin-right:-4px; }
.drawer-close svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.drawer-search input{ width:100%; height:48px; border:1px solid var(--line); border-radius:3px; padding:0 12px; font:inherit; font-size:16px; }
.drawer-h{ margin-top:24px; font:700 13px/1 var(--display); letter-spacing:0.04em; color:var(--muted); }
.drawer ul a{ display:block; padding:12px 0; min-height:44px; text-decoration:none; font-size:17px; border-bottom:1px solid var(--line); }

/* stars (Ink) */
.stars{ position:relative; display:inline-block; width:80px; height:15px; flex:none; vertical-align:-2px; }
.stars-bg,.stars-fg{ position:absolute; left:0; top:0; height:15px; overflow:hidden; white-space:nowrap; display:flex; gap:1px; }
.stars-fg{ width:100%; }
.stars svg{ width:15px; height:15px; flex:none; }
.stars-bg svg{ fill:var(--line); } .stars-fg svg{ fill:var(--ink); }

/* 2 hero: one photo. Phone: full bleed above the copy. Desktop: the photo fills the right of a full-width band
   (white scrim baked into the file under the headline), the copy sits left on the white. */
.hero{ position:relative; background:var(--ground); }
.hero-photo{ position:relative; }
.hero-photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; object-position:50% 100%; }
.hero-cap{ display:none; }
.hero-cap a{ display:inline-block; padding:12px 0; margin:-12px 0; color:var(--ink); text-decoration:none; }
.hero-in{ position:relative; }
.hero-copy{ padding:16px 0 8px; }
.hero h1{ font-size:28px; line-height:1.08; letter-spacing:-0.025em; text-wrap:balance; }
.hero-sub{ margin-top:10px; font-size:16px; line-height:1.45; max-width:34em; text-wrap:pretty; }
.hero-act{ margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; }
.hero-rating{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:15px; text-decoration:none; }
.returning{ display:flex; flex-wrap:nowrap; align-items:center; gap:12px; font-size:14px; white-space:nowrap; }
@media (max-width:379px){ .returning{ flex-wrap:wrap; column-gap:12px; } .returning .ret-l{ width:100%; margin-bottom:-12px; } }
.returning .ret-l{ color:var(--muted); }
.returning a{ display:inline-block; padding:12px 0; }
@media (min-width:768px){ .hero h1{ font-size:42px; } .hero-copy{ max-width:640px; padding:24px 0 32px; } .hero-photo img{ max-height:480px; } }
@media (min-width:1024px){
  .hero{ min-height:600px; display:flex; align-items:center; overflow:hidden; }
  .hero-photo{ position:absolute; top:0; right:0; bottom:0; width:66%; }
  .hero-photo picture,.hero-photo img{ width:100%; height:100%; max-height:none; aspect-ratio:auto; }
  .hero-photo img{ object-fit:cover; object-position:0% 92%; }
  .hero-cap{ display:block; position:absolute; right:32px; bottom:18px; font-size:14px; line-height:20px; }
  .hero-in{ width:100%; }
  .hero-copy{ max-width:480px; padding:64px 0; }
  .hero h1{ font-size:40px; line-height:1.06; }
  .hero-sub{ margin-top:20px; font-size:18px; line-height:1.5; max-width:30em; }
  .hero-act{ margin-top:28px; }
  .returning{ margin-top:8px; font-size:15px; }
}
@media (min-width:1280px){ .hero{ min-height:660px; } .hero-copy{ max-width:600px; } .hero h1{ font-size:50px; } .hero-photo{ width:62%; } }
@media (min-width:1600px){ .hero-photo{ width:60%; } }

/* section heads */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; }
.sec-head > .textlink{ white-space:nowrap; flex:none; }
h2{ font-size:26px; line-height:1.15; text-wrap:balance; }
@media (min-width:1024px){ h2{ font-size:34px; } .sec-head{ margin-bottom:28px; } }

/* 3 best sellers: slider on phone (2.2 visible), 4 x 2 grid from 1024 */
.best{ padding:4px 0 var(--sec); }
.grid{ position:relative; margin:0 calc(var(--gut) * -1); padding:0 var(--gut); display:grid; grid-auto-flow:column; grid-auto-columns:44%; column-gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut); scrollbar-width:none; }
.grid::-webkit-scrollbar{ display:none; }
.card{ position:relative; display:flex; flex-direction:column; scroll-snap-align:start; }
.card > *{ align-self:start; }
.card > .card-act{ align-self:stretch; margin-top:auto; padding-top:12px; }
.card-img{ display:block; background:var(--tile); }
.card-img img{ width:100%; aspect-ratio:5/4; }
.card-name{ margin-top:12px; font-size:16px; line-height:1.3; font-weight:600; letter-spacing:0; }
.card-name a{ display:block; padding:12px 0; margin:-12px 0; text-decoration:none; }
.card-name a:hover{ color:var(--accent); }
.rating{ margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:15px; line-height:22px; }
.cut{ margin-top:6px; font-size:15px; line-height:21px; color:var(--ink); }
.price{ margin-top:8px; display:flex; flex-direction:column; font-size:15px; line-height:22px; }
.price .now{ font-weight:700; font-size:17px; }
.price .sub{ color:var(--muted); }
.card-act{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.btn-card{ display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:44px; border:1px solid var(--ink); border-radius:3px; font:600 15px/1 var(--display); color:var(--ink); background:var(--ground); text-decoration:none; }
.btn-card:hover{ background:var(--ink); color:var(--ground); }
.flavor-sel{ -webkit-appearance:none; appearance:none; width:100%; min-height:44px; border:1px solid var(--line); border-radius:3px; padding:0 32px 0 10px; font:500 15px/1 var(--body); color:var(--ink); background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2314171C' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 8px center / 18px; cursor:pointer; }
.flavor-sel:hover{ border-color:var(--ink); }
@media (min-width:768px){ .grid{ grid-auto-columns:30%; } }
@media (min-width:1024px){
  .best{ padding-top:32px; }
  .card{ display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; }
  .card > .card-act{ align-self:end; margin-top:12px; padding-top:0; }
  .grid{ margin:0; padding:0; overflow:visible; grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; column-gap:24px; row-gap:0; }
  .card:nth-child(-n+4) .card-act{ margin-bottom:48px; }
  .card-name{ font-size:17px; } .cut,.rating,.price{ font-size:16px; } .price{ flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap; } .price .now{ font-size:18px; }
  .card-act{ flex-direction:row; } .card-act .flavor-sel{ flex:1 1 55%; min-width:0; } .card-act .flavor-sel + .btn-card{ flex:1 1 45%; }
  .btn-card{ font-size:16px; }
}

/* 4 why band: three range-wide reasons, type only */
.why{ background:var(--tile); padding:var(--sec) 0; }
.why-grid{ margin-top:20px; display:grid; gap:0; border-top:1px solid var(--line); }
.why-item{ padding:16px 0; border-bottom:1px solid var(--line); }
.why-item h3{ font-size:18px; line-height:1.25; letter-spacing:-0.01em; }
.why-item p{ margin-top:8px; font-size:16px; line-height:1.5; }
.why-item .textlink{ padding:10px 0; margin:-10px 0; }
@media (min-width:1024px){
  .why-grid{ margin-top:32px; grid-template-columns:repeat(3,1fr); gap:48px; border-top:0; }
  .why-item{ padding:20px 0 0; border-bottom:0; border-top:1px solid var(--ink); }
  .why-item h3{ font-size:20px; }
  .why-item p{ font-size:17px; }
}

/* 5 product lines: one tabbed module */
.lines{ padding:var(--sec) 0; }
.tabs{ margin:16px calc(var(--gut) * -1) 0; padding:0 var(--gut); display:flex; gap:24px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ position:relative; flex:none; min-height:48px; padding:0; font:600 16px/1 var(--display); color:var(--muted); white-space:nowrap; }
.tab[aria-selected="true"]{ color:var(--ink); }
.tab[aria-selected="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); }
.tab:hover{ color:var(--ink); }
.panel{ margin-top:20px; }
.panel[hidden]{ display:none; }
.panel-media{ margin:0 calc(var(--gut) * -1); background:var(--tile); }
.panel-media img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.panel-copy{ margin-top:20px; }
.panel h3{ font-size:24px; line-height:1.15; letter-spacing:-0.02em; text-wrap:balance; }
.panel-body{ margin-top:10px; font-size:16px; line-height:1.55; text-wrap:pretty; }
.lrows{ margin-top:16px; border-top:1px solid var(--line); }
.lrows a{ display:grid; grid-template-columns:48px 1fr auto 18px; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.lrows img{ grid-row:1 / span 2; width:48px; height:48px; background:var(--tile); }
.l-name{ grid-column:2; font:600 15px/1.3 var(--display); align-self:end; }
.l-line{ grid-column:2; font-size:14px; line-height:20px; color:var(--muted); align-self:start; }
.l-price{ grid-column:3; grid-row:1 / span 2; font-size:15px; white-space:nowrap; }
.lrows svg{ grid-column:4; grid-row:1 / span 2; width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.6; }
.lrows a:hover .l-name{ color:var(--accent); }
.panel-act{ margin-top:20px; }
.panel-act .btn{ width:100%; }
@media (min-width:768px){ .panel-act .btn{ width:auto; } }
@media (min-width:1024px){
  .tabs{ margin:24px 0 0; padding:0; gap:40px; }
  .tab{ font-size:17px; min-height:56px; }
  .panels{ display:grid; margin-top:32px; }
  .panel{ grid-area:1 / 1; margin-top:0; display:grid; grid-template-columns:repeat(12,1fr); column-gap:64px; align-items:start; }
  .panel[hidden]{ display:grid; visibility:hidden; }
  .panel-media{ grid-column:1 / span 6; margin:0; }
  .panel-copy{ grid-column:7 / span 6; margin-top:0; max-width:560px; }
  .panel h3{ font-size:32px; line-height:1.1; }
  .panel-body{ margin-top:16px; font-size:17px; }
  .lrows{ margin-top:20px; }
  .lrows a{ grid-template-columns:56px 1fr auto 18px; column-gap:16px; }
  .lrows img{ width:56px; height:56px; }
  .l-name{ font-size:16px; } .l-line{ font-size:15px; } .l-price{ font-size:16px; }
  .panel-act{ margin-top:24px; }
}

/* 6 reviews */
.reviews{ background:var(--tile); padding:var(--sec) 0; }
.reviews .sec-head{ flex-direction:column; align-items:flex-start; gap:8px; }
.rv-line{ font-size:16px; }
.rv-row{ margin:0 calc(var(--gut) * -1); padding:0 var(--gut); display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut); scrollbar-width:none; }
.rv-row::-webkit-scrollbar{ display:none; }
.rv-row li{ position:relative; scroll-snap-align:start; border-top:1px solid var(--ink); padding-top:16px; }
.rq{ margin:12px 0 0; }
.rq blockquote{ margin:0; }
.rq blockquote p{ font-size:17px; line-height:1.5; }
.rq figcaption{ margin-top:10px; font-size:15px; line-height:22px; color:var(--muted); }
.q-name{ display:block; color:var(--ink); font-weight:700; }
.q-prod{ display:inline-block; padding:11px 0; margin:-11px 0; color:var(--muted); }
@media (min-width:768px){ .rv-row{ grid-auto-columns:44%; } }
@media (min-width:1024px){
  .reviews .sec-head{ flex-direction:row; align-items:baseline; }
  .rv-row{ margin:8px 0 0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(4,1fr); gap:40px; overflow:visible; }
  .rq blockquote p{ font-size:18px; }
}

/* 7 range */
.range{ padding:var(--sec) 0; }
.range-row{ margin:0 calc(var(--gut) * -1); padding:0 var(--gut); display:grid; grid-auto-flow:column; grid-auto-columns:42%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut); scrollbar-width:none; }
.range-row::-webkit-scrollbar{ display:none; }
.range-row li{ scroll-snap-align:start; }
.range-row a{ display:block; text-decoration:none; }
.range-row img{ width:100%; aspect-ratio:4/3; background:var(--tile); }
.r-name{ display:block; margin-top:12px; font:600 16px/1.3 var(--display); }
.r-line{ display:block; margin-top:4px; font-size:14px; line-height:20px; color:var(--muted); }
.range-row a:hover .r-name{ color:var(--accent); }
@media (min-width:768px){ .range-row{ grid-auto-columns:30%; } }
@media (min-width:1024px){ .range-row{ margin:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(5,1fr); gap:24px; overflow:visible; } .r-name{ font-size:17px; } .r-line{ font-size:15px; } }

/* 10 faq */
.faq{ padding:var(--sec) 0; }
.faq-list{ margin-top:16px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:52px; padding:10px 0; cursor:pointer; font:600 16px/1.35 var(--display); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--ink); stroke-width:1.6; transition:transform .2s; }
.faq details[open] summary svg{ transform:rotate(180deg); }
.faq details p{ padding:0 0 20px; font-size:16px; line-height:1.55; max-width:44em; }
@media (min-width:1024px){ .faq-list{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,auto); grid-auto-flow:column; column-gap:48px; border-top:0; } .faq details:nth-child(1),.faq details:nth-child(4){ border-top:1px solid var(--line); } }

/* 11 footer: the one dark moment */
.ftr{ background:var(--deep); color:var(--ground); padding:40px 0 24px; }
.ftr a{ color:var(--ground); }
.f-h{ font-size:20px; color:var(--ground); }
.f-field{ margin-top:16px; display:flex; gap:8px; }
.f-field input{ flex:1; min-width:0; height:52px; border:1px solid var(--line); border-radius:3px; padding:0 16px; font:inherit; font-size:16px; background:var(--ground); color:var(--ink); }
.f-fine{ margin-top:8px; font-size:14px; color:var(--line); }
.f-brand{ margin-top:16px; display:flex; align-items:center; gap:24px; }
.f-brand .f-logo{ display:none; }
@media (min-width:1024px){ .f-brand .f-logo{ display:block; } }
.f-logo{ width:88px; }
.f-contact{ font-size:15px; }
.f-contact a{ display:inline-block; padding:12px 0; }
.f-menus{ margin-top:24px; border-top:1px solid var(--muted); }
.fcol{ border-bottom:1px solid var(--muted); }
.fcol summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:52px; font:600 15px/1 var(--display); cursor:pointer; }
.fcol summary::-webkit-details-marker{ display:none; }
.fcol summary svg{ width:18px; height:18px; fill:none; stroke:var(--ground); stroke-width:1.6; }
.fcol[open] summary svg{ transform:rotate(180deg); }
.fcol ul{ padding-bottom:12px; }
.fcol a{ display:block; padding:12px 0; min-height:44px; font-size:15px; text-decoration:none; color:var(--line); }
.fcol a:hover{ color:var(--ground); text-decoration:underline; }
.f-bottom{ margin-top:24px; }
.f-legal{ margin-top:12px; font-size:12px; line-height:18px; color:var(--line); max-width:60em; }
.f-legal a{ color:var(--line); margin-right:12px; display:inline-block; padding:13px 0; margin-top:-13px; margin-bottom:-13px; }
@media (min-width:1024px){
  .ftr{ padding:48px 0 24px; }
  .f-top{ display:grid; grid-template-columns:5fr 7fr; gap:64px; }
  .f-brand{ margin-top:32px; }
  .f-menus{ margin-top:0; border:0; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
  .fcol{ border:0; }
  .fcol summary{ pointer-events:none; min-height:0; margin-bottom:12px; }
  .fcol summary svg{ display:none; }
  .fcol a{ padding:4px 0; min-height:0; }
  .f-bottom{ margin-top:32px; padding-top:20px; border-top:1px solid var(--muted); }
}