/* Kindred Box — landing styles, card-template 2.0 design system
   Aesthetic source: Kindred_RecipeCard_Template_2.0.svg
   White ground · solid color bands · hairline rules · Outfit throughout */

@font-face{font-family:'Outfit';src:url('/assets/fonts/Outfit-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('/assets/fonts/Outfit-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('/assets/fonts/Outfit-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('/assets/fonts/Outfit-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#221F20;            /* card near-black */
  --slate:#334E58;          /* card slate blue — headings, labels */
  --slate-deep:#273C44;
  --sage:#9CBCAB;           /* card sage */
  --sage-tint:#EEF4F0;      /* section ground */
  --rose:#DB9F8A;           /* card dusty rose — bands, buttons */
  --rose-deep:#C98570;
  --honey:#ECDFB8;          /* accent only, never a background */
  --line:#221F20;           /* hairline rules */
  --line-soft:#E4E3E0;
  --ink-soft:#5E6F75;
  --font:'Outfit','Avenir Next','Segoe UI',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:#fff;color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:84px 0}

/* type */
h1,h2,h3{font-weight:600;color:var(--slate);letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5vw,3.4rem);line-height:1.1}
h2{font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.2}
.kicker{display:block;font-size:.76rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}
p{color:var(--ink-soft)}

/* buttons */
.btn{display:inline-block;background:var(--rose);color:#fff;padding:14px 32px;border-radius:999px;
     font-family:var(--font);font-weight:600;font-size:.95rem;letter-spacing:.03em;border:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--rose-deep)}
.btn.ghost{background:transparent;color:var(--slate);border:1.5px solid var(--slate)}
.btn.ghost:hover{background:var(--slate);color:#fff}

/* hairline meta strip (from the card's prep/cook/serving row) */
.meta-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.meta-item{display:flex;align-items:center;gap:16px;padding:26px 28px}
.meta-item + .meta-item{border-left:1px solid var(--line)}
.meta-item svg{flex:none;width:34px;height:34px;stroke:var(--slate);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.meta-item .lbl{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.meta-item .val{font-size:.9rem;color:var(--ink-soft);margin-top:2px}

/* solid color statement band (from the card's title band) */
.band{background:var(--rose);padding:56px 24px;text-align:center}
.band h2{color:#fff;font-weight:700;font-size:clamp(1.8rem,4.2vw,2.9rem);letter-spacing:.14em;text-transform:uppercase;margin:0}
.band p{color:#fff;opacity:.92;margin-top:10px;font-size:1rem;letter-spacing:.02em}

/* blank image slots — clean, no dashes */
.slot{background:#F6F6F4;border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
.slot img.mark{width:46px;opacity:.14}

/* founders */
.founders{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.founders .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.founders .pair .slot{aspect-ratio:3/4}
.founders .pair figcaption{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:10px;text-align:center}
.founders p{margin-bottom:16px}

/* announce / first release */
.announce .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.announce .photos{display:grid;gap:18px}
.announce .photos .main.slot{aspect-ratio:4/3}
.announce .photos .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.announce .photos .pair .slot{aspect-ratio:3/4}

/* signup — the Klaviyo embed stands alone, full-bleed.
   Background matches the form's own background so any sliver at the
   edges is invisible. If the form's color changes in Klaviyo, match it here. */
.signup{background:#26464F;padding:0}
.signup [class*="klaviyo-form"]{width:100%}
/* flatten the embed to one solid color — kills any banding from
   Klaviyo backgrounds rendering with transparency or mobile tints */
.signup [class*="klaviyo-form"],
.signup [class*="klaviyo-form"] form,
.signup [class*="klaviyo-form"] form > div:not(:has(button)){background:#26464F !important}
/* Klaviyo renders the submit as a styled div/anchor, so re-assert its color
   on top of the flatten (button hex from the Klaviyo form editor) */
.signup [class*="klaviyo-form"] button:not(:has(img)),
.signup [class*="klaviyo-form"] [role="button"]:not(:has(img)),
.signup [class*="klaviyo-form"] input[type="submit"],
.signup [class*="klaviyo-form"] a[href="javascript:void(0)"]:not(:has(img)){background:#E3917B !important}
/* phones: Klaviyo's responsive styles shrink the email input despite the
   54px setting — pin it */
@media(max-width:759px){
  .signup [class*="klaviyo-form"] input[type="email"],
  .signup [class*="klaviyo-form"] input[type="text"]{height:54px !important;min-height:54px !important}
}
/* desktop only: cap the embed's inner width so copy + email field don't
   stretch across the whole screen; mobile is untouched */
@media(min-width:760px){
  .signup [class*="klaviyo-form"] form{max-width:720px !important;margin:0 auto !important}
}

/* footer */
.footer-min{text-align:center;padding:44px 0;font-size:.85rem;color:var(--ink-soft);border-top:1px solid var(--line-soft)}
.footer-min img{height:46px;margin-bottom:12px}

@media(max-width:840px){
  section{padding:60px 0}
  .founders,.announce .wrap{grid-template-columns:1fr;gap:38px}
  .meta-strip .wrap{grid-template-columns:1fr}
  .meta-item + .meta-item{border-left:none;border-top:1px solid var(--line)}
}