/* KYND FUEL — EDITORIAL REFINEMENT / 10
   Direct correction of the crowded pastel-card band and oversized transition.
   Existing KYND palette, logo system, content and form logic remain unchanged.
   This layer intentionally overrides the earlier chromatic tab treatment.
*/
:root{--soft-oat:#E8DFD0;--pistachio:#DDE8CC;--slate:#2E3941;--tamarind:#8A3F2B;--butter:#FFF1C6;--rose-clay:#B76E5C}

/* The bridge after the football image is editorial, not three app-like widgets. */
.principles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  background:var(--ivory);
  padding:32px clamp(34px,7vw,104px) 43px;
  border-bottom:0;
  position:relative;
  isolation:isolate;
}
.principles:before{content:'';position:absolute;top:0;left:clamp(34px,7vw,104px);right:clamp(34px,7vw,104px);height:1px;background:rgba(28,28,28,.13)}
.principles-kicker{
  grid-column:1/-1;
  display:flex;align-items:center;gap:15px;
  margin:0 0 31px;
  font-size:9px;letter-spacing:.16em;font-weight:600;line-height:1.5;
  color:var(--cacao);
}
.principles-kicker span:last-child{color:var(--ink);opacity:.68}
.principles-kicker-rule{display:block;width:44px;flex:0 0 44px;height:1px;background:var(--sage)}
.principles>div.principle,
.principles>div.principle:nth-child(2),
.principles>div.principle:nth-child(3),
.principles>div.principle:nth-child(4){
  background:transparent;border-radius:0;padding:5px 22px 6px 0;
  display:grid;grid-template-columns:38px 1fr;align-items:start;justify-content:start;gap:12px;
  min-height:79px;box-shadow:none;border:0;
  font-size:inherit;font-weight:inherit;letter-spacing:normal;
}
.principles>div.principle:not(:last-child){border-right:1px solid rgba(28,28,28,.15);margin-right:24px}
.principles>div.principle:not(:first-of-type){padding-left:2px}
.principle-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--sage);border-radius:50%;
  color:var(--cacao);font-size:10px;font-weight:600;letter-spacing:-.02em;
  line-height:1;
}
.principles .principle p{margin:0;font-size:clamp(13px,1.12vw,16px);font-weight:400;letter-spacing:-.035em;line-height:1.62;color:var(--ink)}
.principles .principle strong{display:block;font-weight:600;letter-spacing:-.045em}

/* A considered transition into the manifesto: colour is breathed in, not boxed in. */
.idea{
  background:linear-gradient(150deg,var(--ivory) 0%,var(--soft-oat) 92%);
  overflow:hidden;
}
.idea:before{background:var(--rose-clay);opacity:.065;right:-290px;top:-280px}
.idea.section-space{padding-top:89px;padding-bottom:116px}
.idea-grid{align-items:center;gap:clamp(52px,7vw,110px);margin-top:57px}
.idea h2{font-size:clamp(57px,5.8vw,91px);line-height:1.105;letter-spacing:-.076em;font-weight:400}
.idea h2 em{color:var(--tamarind);font-weight:300}
.idea-copy{border-left:2px solid var(--sage);padding-left:30px;max-width:475px}
.idea-copy p{font-size:clamp(14px,1.15vw,16px);line-height:1.85;letter-spacing:-.022em}
.idea-copy .small-signature{margin-top:27px;color:var(--tamarind);font-size:9px;letter-spacing:.12em}
.section-meta{letter-spacing:.125em}

/* Fine-tuned links and typography: better rhythm without changing the UX. */
.hero-photo{border-bottom:0}
.hero-photo-label{font-weight:500}
.field-content p{line-height:1.85}
.field-image span{border-radius:0}
.benefit-row{gap:35px}
.signup-wrap{box-shadow:0 18px 38px rgba(46,57,65,.09)}

@media(max-width:1024px){
 .principles{padding-left:30px;padding-right:30px}
 .principles:before{left:30px;right:30px}
 .principles>div.principle{grid-template-columns:29px 1fr;gap:9px}
 .principles>div.principle:not(:last-child){margin-right:14px}
 .principles .principle p{font-size:13px}
}
@media(max-width:780px){
 .principles{
    display:block;background:var(--ivory);
    padding:29px 25px 29px;
    gap:0;
 }
 .principles:before{left:25px;right:25px}
 .principles-kicker{
    flex-wrap:wrap;gap:9px 11px;margin:0 0 23px;
    font-size:8px;letter-spacing:.115em;
 }
 .principles-kicker-rule{width:23px;flex-basis:23px}
 .principles-kicker span:last-child{flex-basis:100%;font-size:8px;opacity:.7}
 .principles>div.principle,
 .principles>div.principle:nth-child(2),
 .principles>div.principle:nth-child(3),
 .principles>div.principle:nth-child(4){
    display:grid;grid-template-columns:39px 1fr;
    align-items:start;justify-content:stretch;
    min-height:0;margin:0;padding:16px 0 15px;
    background:transparent;border-radius:0;box-shadow:none;
 }
 .principles>div.principle:not(:last-child){border-right:0;border-bottom:1px solid rgba(28,28,28,.12);margin:0}
 .principles>div.principle:not(:first-of-type){padding-left:0}
 .principles>div.principle:first-of-type{padding-top:3px}
 .principle-number{width:28px;height:28px;font-size:9px}
 .principles .principle p{font-size:15px;line-height:1.5;letter-spacing:-.04em}
 .principles .principle strong{font-weight:600}
 .idea.section-space{padding:65px 25px 82px}
 .idea:before{top:-190px;right:-265px;width:320px;height:320px;opacity:.06}
 .idea-grid{display:block;margin-top:35px}
 .idea h2{font-size:clamp(43px,12.1vw,62px);line-height:1.125;letter-spacing:-.068em}
 .idea-copy{margin-top:28px;border-left:0;border-top:2px solid var(--sage);padding:22px 0 0;max-width:500px}
 .idea-copy p{font-size:14px;line-height:1.83;margin:0 0 14px}
 .idea-copy .small-signature{font-size:9px;line-height:1.7;margin-top:25px}
 .section-meta{font-size:8px;letter-spacing:.1em;gap:11px}
 .thin-rule{width:25px;flex:0 0 25px}
 .field-content{padding:59px 25px 64px}
 .field h2{line-height:1.1}
 .invite-intro.section-space{padding:83px 25px}
 .benefit-row{gap:19px}
}
@media(max-width:365px){
 .principles{padding-left:22px;padding-right:22px}
 .principles:before{left:22px;right:22px}
 .principles .principle p{font-size:14px}
 .idea.section-space{padding-left:22px;padding-right:22px}
 .idea h2{font-size:43px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}