/* Gatsbee — home page sections
   Loaded after gatsbee.css, on the home page only. Brand tokens unchanged.
   1. Order anatomy  2. Product strip  3. Week as signature  4. Founders */

/* ============ 1. ORDER ANATOMY ============ */
.anatomy{
  margin:0;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr);
  align-items:center;gap:clamp(16px,2.5vw,36px);
  padding:clamp(28px,4vw,56px);
  background:var(--midnight);color:var(--on-dark);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  overflow:hidden;
}
.anatomy::before{ /* the sunburst, echoed from the hero, very quiet */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 50% 50%,rgba(217,154,30,.12),transparent 55%);
}
.anatomy > *{position:relative}

/* the raw retailer document: what lands in the inbox */
.po{
  background:#FBF8F4;color:#3a3d4a;
  font-family:var(--f-raw);font-size:12.5px;line-height:1.5;
  padding:22px 22px 18px;transform:rotate(-1.6deg);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6);
}
.po-head{display:grid;gap:2px;padding-bottom:14px;margin-bottom:10px;border-bottom:1px dashed #c9c2bc}
.po-head b{font-family:var(--f-display);font-stretch:110%;font-size:17px;font-weight:600;color:var(--ink)}
.po-src{font-size:11px;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase}
.po-lines{width:100%;border-collapse:collapse}
.po-lines th{text-align:left;font-weight:400;color:#8a8792;font-size:11px;padding:0 0 6px}
.po-lines th:not(:first-child),.po-lines td:not(:first-child){text-align:right}
.po-lines td{padding:6px 0;border-top:1px dotted #dcd5cf;white-space:nowrap}
.po-lines tr.more td{color:#8a8792}
.po-foot{margin-top:12px;color:#8a8792;font-size:11.5px}

/* the three steps between */
.anat-steps{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--gold-light)}
.anat-steps span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.anat-steps span::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
.anat-steps::before,.anat-steps::after{content:"";width:1px;height:28px;background:linear-gradient(var(--gold),transparent)}
.anat-steps::before{background:linear-gradient(transparent,var(--gold))}

/* the clean order: what Gatsbee hands your ERP */
.clean{
  background:var(--paper);color:var(--ink);padding:20px 20px 14px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow:0 30px 60px -20px rgba(10,12,24,.55);
}
.clean-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line-light);gap:12px}
.clean-head strong{font-family:var(--f-display);font-stretch:110%;font-size:15px;font-weight:600}
.clean-head span{font-size:13px;color:var(--ink-soft)}
.clean-head b{font-family:var(--f-numeral);font-weight:500;font-size:20px;color:var(--ink)}
.clean-lines{list-style:none;margin:0;padding:0}
.clean-lines li{display:grid;grid-template-columns:1fr auto 76px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-light);font-size:14px}
.clean-lines .qty{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.clean-lines .st{font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:flex-end;gap:6px;font-variant-numeric:tabular-nums}
.clean-lines .st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.clean-lines .ok{color:var(--green-ink)}
.clean-lines .bad{color:var(--rouge)}
.clean-lines li.flag{background:linear-gradient(90deg,var(--rouge-soft),transparent 85%);margin:0 -20px;padding-left:20px;padding-right:20px}
.clean-lines .why{grid-column:1/-1;font-size:12.5px;color:var(--rouge);margin-top:-4px}
.clean-foot{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);padding-top:12px}
.clean-foot .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(47,181,122,.18)}
.anatomy figcaption{grid-column:1/-1;font-size:12.5px;color:var(--on-dark-soft);margin-top:4px}

/* reveal choreography: runs once when the figure scrolls into view */
.anatomy.armed .clean-lines li,.anatomy.armed .clean-foot{opacity:0;transform:translateY(6px)}
.anatomy.armed .anat-steps span{opacity:.25}
.anatomy.run .clean-lines li,.anatomy.run .clean-foot{opacity:1;transform:none;transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.anatomy.run .anat-steps span{opacity:1;transition:opacity 300ms ease}
.anatomy.run .anat-steps span:nth-child(2){transition-delay:250ms}
.anatomy.run .anat-steps span:nth-child(3){transition-delay:500ms}
.anatomy.run .clean-lines li:nth-child(1){transition-delay:650ms}
.anatomy.run .clean-lines li:nth-child(2){transition-delay:770ms}
.anatomy.run .clean-lines li:nth-child(3){transition-delay:890ms}
.anatomy.run .clean-lines li:nth-child(4){transition-delay:1010ms}
.anatomy.run .clean-foot{transition-delay:1150ms}

@media (max-width:900px){
  .anatomy{grid-template-columns:1fr}
  .po{transform:rotate(-1deg);max-width:440px}
  .anat-steps{flex-direction:row;justify-content:center;gap:18px}
  .anat-steps::before,.anat-steps::after{display:none}
}
@media (max-width:420px){.clean-lines li{grid-template-columns:1fr auto 64px;font-size:13px}}

/* ============ 2. PRODUCT STRIP ============ */
.product-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:clamp(40px,5vw,64px);border-top:2px solid var(--ink)}
.product-strip article{padding:28px 28px 8px 0}
.product-strip article + article{padding-left:28px;border-left:1px solid var(--line-light)}
.product-strip .tag{display:inline-block;font-size:13px;font-weight:700;padding:5px 12px;margin-bottom:18px;background:var(--midnight);color:var(--champagne)}
.product-strip h3{font-size:clamp(22px,2vw,28px);margin-bottom:14px}
.product-strip p{color:var(--ink-soft);font-size:16px;margin-bottom:18px}
.product-strip ul{list-style:none;margin:0 0 22px;padding:0}
.product-strip li{padding:7px 0 7px 22px;position:relative;font-size:15px;border-top:1px solid var(--line-light)}
.product-strip li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;transform:rotate(45deg);background:var(--gold)}
@media (max-width:900px){
  .product-strip{grid-template-columns:1fr}
  .product-strip article,.product-strip article + article{padding:28px 0 12px;border-left:0}
  .product-strip article + article{border-top:1px solid var(--line-light)}
}

/* ============ 3. THE WEEK AS SIGNATURE ============ */
.week{overflow:hidden;transition:background-color 500ms ease}
.week::before{ /* colour wash that follows the mode */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 85% 100%,rgba(176,58,74,.10),transparent 70%);
  transition:opacity 500ms ease;
}
.week::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 60% at 85% 100%,rgba(47,181,122,.14),transparent 70%);
  transition:opacity 500ms ease;
}
.week[data-mode="with"]::before{opacity:0}
.week[data-mode="with"]::after{opacity:1}
.week > .wrap{position:relative;z-index:1}

/* one continuous track that draws itself */
.timeline::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
  background:var(--rouge);transform-origin:left;transform:scaleX(1);
  transition:background-color 300ms ease;
}
.timeline[data-mode="with"]::before{background:var(--green)}
.timeline.draw::before{animation:track 700ms var(--ease-out) both}
@keyframes track{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============ 4. FOUNDERS ============ */
.founder-pattern{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("../img/pattern-cubes-night.svg") repeat;background-size:240px;
  opacity:.16;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 65%);
          mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 65%);
}
/* two co-founders side by side, each with a small portrait above the quote */
.founders .wrap.founders-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding-top:110px;padding-bottom:110px}
.founder-card{margin:0;display:flex;flex-direction:column;gap:28px;padding-right:clamp(28px,4vw,64px)}
.founder-card + .founder-card{padding-right:0;padding-left:clamp(28px,4vw,64px);border-left:1px solid rgba(217,154,30,.28)}
.founder-photo{flex:0 0 auto;width:120px;height:160px;object-fit:cover;object-position:50% 25%;border-radius:4px;box-shadow:0 0 0 1px rgba(217,154,30,.35)}
@media (max-width:860px){
  .founders .wrap.founders-grid{grid-template-columns:1fr;padding-top:72px;padding-bottom:72px}
  .founder-card,.founder-card + .founder-card{padding:0;border-left:0}
  .founder-card + .founder-card{margin-top:56px;padding-top:56px;border-top:1px solid rgba(217,154,30,.28)}
  .founder-photo{width:96px;height:128px}
}

/* reduced motion: show everything in its final state */
@media (prefers-reduced-motion:reduce){
  .anatomy.armed .clean-lines li,.anatomy.armed .clean-foot{opacity:1;transform:none}
  .anatomy.armed .anat-steps span{opacity:1}
  .timeline.draw::before{animation:none}
}

/* ============ FINAL POLISH ============ */
/* tablet: stagger the document (left) and the result (right) instead of stacking flush */
@media (max-width:900px) and (min-width:601px){
  .po{justify-self:start;width:min(440px,72%)}
  .anat-steps{justify-self:center}
  .clean{justify-self:end;width:min(540px,82%)}
}
@media (max-width:600px){ .po,.clean{width:100%} }

/* comfortable line lengths when the strip stacks */
@media (max-width:900px){ .product-strip h3,.product-strip p{max-width:60ch} }

/* better line breaks: no orphan words in headings, softer rag in body copy */
h1,h2,h3,.founder blockquote p{text-wrap:balance}
p,li{text-wrap:pretty}

/* keyboard users see where they are on the dark sections too */
.dark :focus-visible,.anatomy :focus-visible{outline-color:var(--gold-light)}

.feed-note{font-size:12px;color:var(--ink-soft);margin-top:8px}