/* ============================================================
   Fresh Cut Microgreens, by Feed the Family
   Stylesheet — you do not need to edit this file to change copy.
   All wording lives in index.html.
   ============================================================ */

:root{
  /* Brand colours lifted from the Feed the Family logo:
     forest green #314927 and rust #D15934 are exact; sage #6E7A4A is
     sampled from the leaf sprigs in the emblem. */
  --paper:      #F3F5F1;   /* cool off-white ground */
  --paper-lift: #FFFFFF;   /* panels */
  --ink:        #1C2718;   /* dark green-black, text */
  --ink-soft:   #4E5A48;   /* secondary text */
  --rule:       #D5D9D1;   /* hairlines */
  --rule-firm:  #B8BFB4;
  --field:      #314927;   /* brand forest green, dark bands */
  --field-deep: #26381E;
  --field-soft: #C6D0BE;   /* text on dark */
  --sage:       #6E7A4A;   /* brand secondary — structural marks */
  --sage-lift:  #A9BA85;   /* sage lightened for use on the dark band */
  --rust:       #D15934;   /* brand accent — used sparingly */
  --steel:      #808A7C;   /* mono metadata */

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --wide: 1220px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  color-scheme: light;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }

h1,h2,h3{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 20, "WONK" 0;
  font-weight:400;
  letter-spacing:-0.015em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.1em; max-width:62ch; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

/* ---------- layout scaffolding ---------- */

.wrap{
  max-width:var(--wide);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.band{ border-top:1px solid var(--rule); }
.band--dark{ background:var(--field); color:var(--field-soft); border-top:none; }
.band--dark h2, .band--dark h3, .band--dark strong{ color:#F2F6F1; }

.section{ padding-block:clamp(56px, 8vw, 108px); }

/* The margin index numeral — a ledger mark, set in mono */
.section-head{
  display:grid;
  grid-template-columns:3.5rem 1fr;
  gap:0 clamp(12px,3vw,32px);
  align-items:start;
  margin-bottom:clamp(28px,4vw,52px);
}
.section-head .idx{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--steel);
  padding-top:.7em;
  letter-spacing:.04em;
}
.band--dark .section-head .idx{ color:#7E9276; }
.section-head h2{ font-size:clamp(1.9rem, 4.2vw, 2.9rem); }
.section-head .lede{
  grid-column:2;
  margin-top:1.1rem;
  color:var(--ink-soft);
  font-size:1.05rem;
}
.band--dark .section-head .lede{ color:var(--field-soft); }

@media (max-width:640px){
  .section-head{ grid-template-columns:1fr; }
  .section-head .idx{ padding-top:0; margin-bottom:.6rem; }
  .section-head .lede{ grid-column:1; }
}

/* ---------- masthead ---------- */

.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  border-bottom:1px solid var(--rule);
  flex-wrap:wrap;
}
.wordmark{
  display:flex; align-items:center; gap:12px; min-width:0;
  font-family:var(--serif);
  font-variation-settings:"SOFT" 20, "WONK" 0;
  font-size:1.06rem;
  letter-spacing:.005em;
  text-decoration:none;
}
.wordmark img{ height:42px; width:auto; display:block; }
.wordmark .name{ font-family:var(--serif); font-size:1.06rem; color:var(--ink); letter-spacing:.005em; margin-left:0; white-space:nowrap; }
.wordmark span{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--steel);
  letter-spacing:.06em;
  margin-left:.7rem;
  white-space:nowrap;
}
.masthead a.jump{
  white-space:nowrap;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--rule-firm);
  padding-bottom:2px;
}
.masthead a.jump:hover{ color:var(--ink); border-color:var(--sage); }

/* ---------- hero ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  padding-block:clamp(52px,8vw,104px);
}
.hero h1{
  font-size:clamp(2.45rem, 6.2vw, 4.3rem);
  line-height:1.02;
  letter-spacing:-0.025em;
}
.hero .cutline{
  width:72px; height:1px;
  background:var(--rust);
  margin:26px 0;
  position:relative;
}
.hero .cutline::after{
  content:""; position:absolute; right:-1px; top:-3px;
  width:1px; height:7px; background:var(--rust);
}
.hero .sub{
  font-size:clamp(1.05rem,1.7vw,1.19rem);
  color:var(--ink-soft);
  max-width:46ch;
}
.hero .stamp{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.05em;
  color:var(--steel);
  margin-bottom:1.6rem;
}

.hero-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px; }

.btn{
  display:inline-block;
  background:var(--field);
  color:#F4F7F2;
  font-family:var(--sans);
  font-size:.97rem;
  font-weight:500;
  letter-spacing:.005em;
  text-decoration:none;
  padding:15px 28px;
  border:1px solid var(--field);
  border-radius:2px;
  transition:background .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--field-deep); border-color:var(--field-deep); }
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--rule-firm);
}
.btn--ghost:hover{ background:transparent; border-color:var(--ink); }
.note{ font-family:var(--mono); font-size:.76rem; color:var(--steel); letter-spacing:.02em; }

/* specimen plate in the hero */
.plate{
  background:var(--paper-lift);
  border:1px solid var(--rule);
  padding:clamp(22px,3vw,34px);
}
.plate-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--rule);
}
.plate-cell{ padding:22px 16px 16px; }
.plate-cell + .plate-cell{ border-left:1px solid var(--rule); }
.plate-cell svg{ display:block; margin:0 auto 16px; height:172px; width:auto; }
.plate-cell .name{
  font-family:var(--serif); font-variation-settings:"SOFT" 20,"WONK" 0;
  font-size:1.02rem; text-align:center;
}
.plate-cell .latin{
  font-family:var(--mono); font-size:.68rem; color:var(--steel);
  text-align:center; margin-top:5px; letter-spacing:.02em;
}
.plate-cap{
  font-family:var(--mono); font-size:.7rem; color:var(--steel);
  letter-spacing:.04em; margin-top:14px; text-align:center;
}

@media (max-width:880px){
  .hero{ grid-template-columns:1fr; }
  .plate-cell svg{ height:130px; }
}
@media (max-width:860px){
  .wordmark span:not(.name){ display:none; }
}
@media (max-width:430px){
  .masthead{ gap:10px; }
  .wordmark img{ height:34px; }
  .wordmark .name{ font-size:.98rem; }
  .masthead a.jump{ font-size:.72rem; }
}
@media (max-width:560px){
  .plate-cell svg{ height:112px; }
  .plate-cell{ padding:18px 10px 12px; }
  .hero-actions{ gap:14px; }
  .btn{ display:block; width:100%; text-align:center; }
}

/* ---------- varieties ---------- */

.varieties{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.variety{
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(24px,3vw,34px);
  background:var(--paper-lift);
}
.variety--soon{ background:transparent; }
.variety .tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--rust); margin-bottom:16px;
}
.variety--soon .tag{ color:var(--steel); }
.variety h3{ font-size:1.5rem; margin-bottom:.5rem; }
.variety .latin{ font-family:var(--mono); font-size:.72rem; color:var(--steel); margin-bottom:14px; }
.variety p{ font-size:.97rem; color:var(--ink-soft); }
.variety svg{ height:112px; width:auto; display:block; margin-bottom:22px; }

/* ---------- steps ---------- */

.steps{ border-top:1px solid var(--rule); }
.step{
  display:grid;
  grid-template-columns:3.5rem 1fr;
  gap:0 clamp(12px,3vw,32px);
  padding-block:clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--rule);
}
.step .num{
  font-family:var(--mono); font-size:.8rem; color:var(--steel);
  padding-top:.45em; letter-spacing:.04em;
}
.step h3{ font-size:1.35rem; margin-bottom:.55rem; }
.step p{ color:var(--ink-soft); font-size:1rem; }
@media (max-width:640px){
  .step{ grid-template-columns:1fr; }
  .step .num{ padding-top:0; margin-bottom:.45rem; }
}

/* ---------- traceability ---------- */

.trace-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,3vw,44px);
  margin-bottom:clamp(38px,5vw,60px);
}
.trace-item h3{ font-size:1.2rem; margin-bottom:.5rem; }
.trace-item p{ font-size:.96rem; color:var(--field-soft); }
.trace-item .rule{ width:34px; height:1px; background:var(--sage-lift); margin-bottom:18px; }

.ledger{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
}
.ledger-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; color:#8FA68A;
  flex-wrap:wrap;
}
.ledger-scroll{ overflow-x:auto; }
.ledger table{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:.79rem; white-space:nowrap;
}
.ledger th{
  text-align:left; font-weight:400; color:#8FA68A;
  padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.16);
  letter-spacing:.04em;
}
.ledger td{
  padding:12px 20px; color:#DDE6DA;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.ledger tr:last-child td{ border-bottom:none; }
.ledger td.ok{ color:var(--sage-lift); }
.ledger-cap{
  font-family:var(--mono); font-size:.75rem; color:#93A98D;
  margin-top:14px; letter-spacing:.02em; line-height:1.6;
  max-width:none;
}

/* ---------- pricing ---------- */

.price-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.price-card{
  background:var(--paper-lift);
  border:1px solid var(--rule);
  padding:clamp(28px,4vw,44px);
  border-left:2px solid var(--sage);
}
.price-fig{
  font-family:var(--serif); font-variation-settings:"SOFT" 20,"WONK" 0;
  font-size:clamp(3rem,7vw,4.2rem); line-height:1;
  letter-spacing:-0.03em;
}
.price-fig .per{ font-family:var(--sans); font-size:1rem; color:var(--ink-soft); letter-spacing:0; margin-left:6px; }
.price-label{ font-family:var(--mono); font-size:.74rem; color:var(--steel); letter-spacing:.05em; margin-bottom:14px; }
.price-list{ list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--rule); }
.price-list li{
  padding:13px 0 13px 22px; border-bottom:1px solid var(--rule);
  font-size:.97rem; position:relative; color:var(--ink-soft);
}
.price-list li::before{
  content:""; position:absolute; left:0; top:1.32em;
  width:9px; height:1px; background:var(--sage);
}
@media (max-width:820px){ .price-wrap{ grid-template-columns:1fr; } }

/* ---------- form ---------- */

.form-shell{
  border:1px solid var(--rule);
  background:var(--paper-lift);
  padding:clamp(10px,1.6vw,18px);
}
.form-shell iframe{
  display:block; width:100%; height:1080px; border:0; background:transparent;
}
@media (max-width:640px){ .form-shell iframe{ height:1220px; } }
.form-fallback{
  font-family:var(--mono); font-size:.76rem; color:var(--steel);
  margin-top:16px; letter-spacing:.02em;
}
.form-fallback a{ color:var(--ink); }

/* ---------- footer ---------- */

.footer{
  border-top:1px solid var(--rule);
  padding-block:44px 56px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  align-items:center;
  font-family:var(--mono); font-size:.76rem; color:var(--steel); letter-spacing:.03em;
}
.footer-lockup{ display:flex; align-items:center; gap:16px; }
.footer-lockup img{ height:62px; width:auto; display:block; }
.footer .tagline{
  font-family:var(--serif); font-variation-settings:"SOFT" 20,"WONK" 0;
  font-size:.92rem; color:var(--sage); letter-spacing:0; margin-top:4px;
}
.footer .mark{
  font-family:var(--serif); font-variation-settings:"SOFT" 20,"WONK" 0;
  font-size:1rem; color:var(--ink); letter-spacing:0;
}

/* ---------- accessibility ---------- */
:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }