/* ==========================================================================
   MadeForTheTask homepage. Direction: THE BENCH II.
   Editorial, asymmetric, full-bleed colour bands. All assets local.
   Contrast notes are inline where a colour band carries text.
   ========================================================================== */

@font-face {
  font-family: "Atkinson Next";
  src: url("atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F7F2EA;
  --ink:   #25314D;
  --honey: #D9A441;
  --sage:  #7A9E7E;
  --terra: #C0562B;
  --slate: #5C6B85;
  --hair:  #E2D9CC;
  --white: #FFFFFF;
  --card:  #FCF9F4;

  /* Tints of Paper over Ink, used only as body text on the Ink band.
     #C3CCDD on Ink is 8.0:1, #A9B5CB on Ink is 6.1:1. */
  --on-ink:      #C3CCDD;
  --on-ink-dim:  #A9B5CB;

  --focus: var(--terra);

  --r-lg: 34px;
  --r-md: 24px;
  --r-sm: 14px;

  --shadow-soft: 14px 16px 0 rgba(37, 49, 77, .07), 18px 22px 44px rgba(37, 49, 77, .13);
  --shadow-hard: 10px 12px 0 rgba(11, 17, 30, .38);
  --shadow-lift: 12px 14px 0 rgba(37, 49, 77, .16);

  --gap: clamp(20px, 3.4vw, 44px);
  --pad: clamp(20px, 5vw, 64px);
  --band: clamp(64px, 9vw, 128px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: "Atkinson Next", sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

::selection { background: var(--honey); color: var(--ink); }

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
  z-index: 50;
  text-decoration: none;
}
.skip:focus { left: 0; }

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

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--band); }

.band--ink   { background: var(--ink);   color: var(--on-ink); --focus: var(--honey); }
.band--honey { background: var(--honey); color: var(--ink);    --focus: var(--ink); }

.band--ink h2, .band--ink h3 { color: var(--paper); }

/* --- section marks ------------------------------------------------------- */

.mark {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.35rem;
}
.mark i {
  font-style: normal;
  background: var(--terra);
  color: var(--white);      /* 4.56:1 on Terra */
  border-radius: 7px;
  padding: 4px 9px 3px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.band--ink .mark    { color: var(--honey); }         /* 5.74:1 on Ink */
.band--ink .mark i  { background: var(--honey); color: var(--ink); }
.band--honey .mark  { color: var(--ink); }
.band--honey .mark i{ background: var(--ink); color: var(--honey); }

/* --- shared type --------------------------------------------------------- */

.kicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 8px;
  border-radius: 4px;
  background: var(--terra);
  flex: 0 0 auto;
}

.lede {
  font-size: clamp(1.16rem, 1.02rem + 0.7vw, 1.5rem);
  line-height: 1.45;
  font-weight: 400;
}

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

.masthead {
  padding-block: 22px;
  border-bottom: 1px solid var(--hair);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.brand img { width: 44px; height: 44px; border-radius: 10px; }
.brand b {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.masthead-link {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid var(--honey);
  padding-bottom: 2px;
}
.masthead-link:hover { border-bottom-color: var(--terra); }

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

.hero { padding-block: clamp(50px, 7.4vw, 100px) clamp(52px, 7.6vw, 100px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(38px, 5vw, 64px);
  align-items: start;
}

.hero h1 {
  font-size: clamp(2.6rem, 1.1rem + 7.2vw, 6.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: clamp(26px, 3vw, 40px);
  text-wrap: pretty;
}
.hero h1 em { font-style: normal; color: var(--terra); }

.hero-deck { max-width: 47ch; }
.hero-deck .lede + .lede { margin-top: 1.05rem; }

.hero-hit {
  margin-top: clamp(26px, 3vw, 36px);
  border-left: 9px solid var(--terra);
  padding: 4px 0 4px 22px;
  max-width: 40ch;
  font-size: clamp(1.24rem, 1.02rem + 1vw, 1.72rem);
  line-height: 1.26;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(30px, 3.4vw, 42px);
}

.dateline {
  border-top: 4px solid var(--ink);
  padding-top: 16px;
  display: grid;
  gap: 0;
}
.dateline div {
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.dateline div:last-child { border-bottom: 0; }
.dateline .dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 3px;
}
.dateline .dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.34;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 6px 7px 0 rgba(37, 49, 77, .18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 9px 10px 0 rgba(37, 49, 77, .22); }
.btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(37, 49, 77, .18); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--card); box-shadow: 6px 7px 0 rgba(37, 49, 77, .14); }

.btn--honey {
  background: var(--honey);
  border-color: var(--honey);
  color: var(--ink);
  box-shadow: 6px 7px 0 rgba(11, 17, 30, .34);
}
.btn--honey:hover { box-shadow: 9px 10px 0 rgba(11, 17, 30, .38); }

/* --- 01, the method band (the icon, exploded) ---------------------------- */

.method-head {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(38px, 4.6vw, 60px);
}
.method-head h2 {
  font-size: clamp(2rem, 1.2rem + 3.1vw, 3.4rem);
  letter-spacing: -0.03em;
}
.method-head > p {
  color: var(--on-ink);
  max-width: 42ch;
}

.sheet {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.6vw, 34px);
  box-shadow: var(--shadow-hard);
}

.panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}

.panel {
  border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel--1 { background: var(--sage);  color: var(--ink); }
.panel--2 { background: var(--honey); color: var(--ink); }
.panel--3 { background: var(--terra); color: var(--white); }
/* Each panel names its own heading colour. The band rule above paints every h3 on
   this section Paper, and it outranks the colour set on .panel, so Paper was landing
   on Sage at 2.68:1 and on Honey at 2.02:1. Ink is 4.32:1 and 5.75:1, and it matches
   the numeral already sitting above the heading. */
.panel--1 h3 { color: var(--ink); }
.panel--2 h3 { color: var(--ink); }
.panel--3 h3 { color: var(--white); }

.panel .num {
  font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.6rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  opacity: .82;
}
.panel h3 {
  font-size: clamp(1.5rem, 1.15rem + 0.9vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.028em;
}
/* The slip is Paper, so the panel colours never have to carry body text. */
.panel .slip {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  font-size: 1rem;
  line-height: 1.55;
  flex: 1 1 auto;
}

.method-note {
  margin-top: clamp(30px, 3.4vw, 44px);
  color: var(--on-ink);
  max-width: 62ch;
  font-size: 1.04rem;
}
.method-note b { color: var(--honey); font-weight: 800; }

/* --- 02, the wrong first version ----------------------------------------- */

.wrong {
  padding-block: clamp(62px, 8vw, 112px);
  background:
    linear-gradient(var(--hair), var(--hair)) top left / 100% 1px no-repeat;
}

.wrong-hed {
  font-size: clamp(2.15rem, 1.15rem + 3.7vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.036em;
  max-width: 20ch;
  margin-bottom: clamp(34px, 4vw, 54px);
  text-wrap: pretty;
}
.wrong-hed em { font-style: normal; color: var(--terra); }

.wrong-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 40px);
  align-items: start;
}
.wrong-col p { font-size: 1.04rem; line-height: 1.62; }
.wrong-col p + p { margin-top: 1.1rem; }

.wrong-kick {
  border-left: 6px solid var(--honey);
  padding-left: 18px;
  font-size: clamp(1.14rem, 1rem + 0.6vw, 1.35rem) !important;
  line-height: 1.34 !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.scale {
  background: var(--card);
  border: 2px solid var(--hair);
  border-left: 10px solid var(--sage);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--shadow-lift);
}
.scale-hed {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1.16;
  margin-bottom: 12px;
}
.scale p { font-size: 0.99rem; line-height: 1.58; }

/* --- 03, the workbook ---------------------------------------------------- */

.feature {
  padding-block: clamp(62px, 8vw, 112px);
  background:
    linear-gradient(var(--hair), var(--hair)) top left / 100% 1px no-repeat;
}

.feature-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 52px);
  margin-bottom: clamp(38px, 5vw, 64px);
}
.feature-head h2 {
  font-size: clamp(2.1rem, 1.2rem + 3.5vw, 3.8rem);
  letter-spacing: -0.035em;
}

.diptych {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}

.quote-card {
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-soft);
}
.quote-card .tag {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.quote-card h3 {
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.quote-card p { font-size: 1.02rem; line-height: 1.56; }

.quote-card .figure {
  margin-top: auto;
  padding-top: 22px;
  border-top: 2px solid currentColor;
}
.quote-card .figure b {
  display: block;
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.quote-card .figure small {
  display: block;
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card--ink { background: var(--ink); color: var(--on-ink); }
.card--ink h3 { color: var(--paper); }
.card--ink .tag { color: var(--honey); }
.card--ink .figure { border-top-color: rgba(217, 164, 65, .55); }
.card--ink .figure b { color: var(--honey); }
.card--ink .figure small { color: var(--on-ink); }

.card--paper {
  background: var(--card);
  color: var(--slate);
  border: 2px solid var(--hair);
}
/* Ink, not Terra: 11.8px is small text and Terra on the card fill is 4.29:1. */
.card--paper .tag { color: var(--ink); }
.card--paper .figure { border-top-color: var(--hair); }
.card--paper .figure b { color: var(--ink); }
.card--paper .figure small { color: var(--slate); }

/* Sage carries Ink at 4.32:1, which clears 3:1 for large text only.
   The minimum here is 19.2px at weight 700, above the 18.66px bold threshold. */
.deposit {
  margin-top: clamp(22px, 2.6vw, 34px);
  background: var(--sage);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
  font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.38rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.sample-note {
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--slate);
}

/* --- 04, every number in it is yours ------------------------------------- */

.yours-head { margin-bottom: clamp(34px, 4vw, 54px); }
.yours-head h2 {
  font-size: clamp(1.85rem, 1.05rem + 2.9vw, 3.15rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 24ch;
  text-wrap: pretty;
}

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 52px);
  align-items: start;
}
.col h3 {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 4px solid var(--ink);
  margin-bottom: 6px;
}

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid rgba(37, 49, 77, .26);
  font-size: 1.01rem;
  line-height: 1.5;
  color: var(--ink);
  position: relative;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--ink);
}
.ticks b { font-weight: 800; }

.bend {
  margin-top: 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  padding: 20px 24px;
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.015em;
  box-shadow: 8px 9px 0 rgba(11, 17, 30, .26);
}

.absorb {
  margin-top: clamp(34px, 4vw, 56px);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.2vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
  box-shadow: 14px 16px 0 rgba(11, 17, 30, .3);
}
.absorb .tag {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--honey);
  margin-bottom: 16px;
}
.absorb blockquote {
  margin: 0;
  font-size: clamp(1.32rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--paper);
  text-wrap: pretty;
}
.absorb-note {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--on-ink);
  border-top: 3px solid var(--honey);
  padding-top: 18px;
}

/* --- 05, contents -------------------------------------------------------- */

.contents {
  padding-block: clamp(58px, 7.4vw, 104px);
}

.contents-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
}
.contents h2 {
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 2.9rem);
  letter-spacing: -0.032em;
}
.contents .side p { margin-top: 18px; font-size: 1.02rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(16px, 1.9vw, 22px) 0;
  border-top: 1px solid var(--hair);
}
.steps li:last-child { border-bottom: 1px solid var(--hair); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--terra);           /* 19.8px at weight 800, large-text threshold cleared */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.28;
}
.steps b {
  grid-column: 2;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.018em;
  line-height: 1.34;
}
.steps span {
  grid-column: 2;
  font-size: 1.01rem;
  line-height: 1.55;
  margin-top: 4px;
}

/* --- capacity rail (a band compressed to a strip) ------------------------ */

.rail {
  background: var(--terra);
  color: var(--white);           /* 4.56:1 on Terra */
  padding-block: clamp(30px, 3.4vw, 44px);
}
.rail-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
}
.rail-head h2 {
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rail-head p { font-size: 0.97rem; line-height: 1.45; max-width: 30ch; }

.specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255, 255, 255, .38);
  border: 2px solid rgba(255, 255, 255, .38);
  border-radius: var(--r-md);
  overflow: hidden;
}
.specs li {
  background: var(--terra);
  padding: clamp(14px, 1.6vw, 20px) clamp(12px, 1.4vw, 18px);
}
.specs b {
  display: block;
  font-size: clamp(1.72rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.specs span {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

/* --- 06, close band ------------------------------------------------------ */

.close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 4vw, 68px);
  align-items: start;
}
.close h2 {
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.7rem);
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.close .body p { color: var(--on-ink); max-width: 44ch; }
.close .body p + p { margin-top: 1rem; }

.close .free {
  margin-top: 1.5rem !important;
  border-top: 3px solid var(--sage);
  padding-top: 16px;
  font-size: 1rem;
}
.close .free a {
  color: var(--honey);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.close .free a:hover { color: var(--paper); }

.price-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px);
  color: var(--ink);
  box-shadow: var(--shadow-hard);
}
.price-card .amt {
  font-size: clamp(3.4rem, 2rem + 5vw, 5.2rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-card .amt sup {
  font-size: 0.34em;
  font-weight: 800;
  top: -1.35em;
  letter-spacing: 0;
  margin-right: 2px;
}
.price-card .once {
  margin-top: 12px;
  font-weight: 800;
  /* 19.5px at weight 800 clears the WCAG large-text threshold (18.66px bold),
     so Terra on the card fill at 4.29:1 only needs to beat 3:1. */
  font-size: 1.22rem;
  color: var(--terra);
}
.price-card ul {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.price-card li {
  border-bottom: 1px solid var(--hair);
  padding: 11px 0;
  font-size: 0.99rem;
  color: var(--ink);
  display: flex;
  gap: 11px;
  align-items: baseline;
}
.price-card li::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--sage);
  transform: translateY(-1px);
}
.price-card li:nth-child(2)::before { background: var(--honey); }
.price-card li:nth-child(3)::before { background: var(--terra); }
.price-card .btn { width: 100%; text-align: center; }
.price-card .fine {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.5;
}

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

.foot {
  background: var(--ink);
  color: var(--on-ink-dim);
  padding-block: 44px 54px;
  border-top: 1px solid rgba(247, 242, 234, .16);
}
.foot .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.foot .marks { display: flex; gap: 7px; }
.foot .marks i { width: 30px; height: 12px; border-radius: 6px; display: block; }
.foot .marks i:nth-child(1) { background: var(--sage); }
.foot .marks i:nth-child(2) { background: var(--honey); }
.foot .marks i:nth-child(3) { background: var(--terra); }
.foot p { font-size: 0.92rem; }
.foot b { color: var(--paper); font-weight: 800; }

/* ==========================================================================
   Wider screens
   ========================================================================== */

@media (min-width: 640px) {
  .specs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .panel--2 { margin-top: -26px; margin-bottom: -26px; }
  .diptych { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .hero-grid    { grid-template-columns: minmax(0, 7.2fr) minmax(0, 3fr); }
  .method-head  { grid-template-columns: minmax(0, 6fr) minmax(0, 4.4fr); align-items: end; }
  .feature-head { grid-template-columns: minmax(0, 6.4fr) minmax(0, 4.2fr); align-items: end; }
  .contents-grid{ grid-template-columns: minmax(0, 3.6fr) minmax(0, 7fr); }
  .close-grid   { grid-template-columns: minmax(0, 6fr) minmax(0, 4.6fr); }
  .rail-wrap    { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .absorb       { grid-template-columns: minmax(0, 6.6fr) minmax(0, 4fr); align-items: center; }
  .cols         { grid-template-columns: minmax(0, 5.6fr) minmax(0, 5fr); gap: clamp(34px, 4vw, 64px); }

  .wrong-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(26px, 3vw, 44px);
  }
  .wrong-col:nth-of-type(1) { grid-column: 1 / span 4; }
  .wrong-col:nth-of-type(2) { grid-column: 5 / span 4; }
  .scale { grid-column: 9 / span 4; margin-top: -14px; }

  .diptych .quote-card:last-child { margin-top: 46px; }
  .steps li { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .steps li::before { font-size: 1.4rem; }
}

@media (min-width: 1100px) {
  .contents-grid { gap: clamp(48px, 5vw, 86px); }
  .wrong-hed { font-size: clamp(3rem, 1.2rem + 3.9vw, 4.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   FLOWER LIBRARY, ONE LIVE ROW
   Merged from SITE/_design2/_component/calc-snippet.html. Nothing above this line
   was touched to make it fit. Every selector below begins at .flib, so this block
   cannot reach any other part of the page.

   The component brings its own --f-* palette rather than reading the site tokens,
   because it has to keep working pasted into a page that does not define them. The
   values are the same brand colours.
   ========================================================================== */

.flib {
  --f-paper: #F7F2EA;
  --f-ink:   #25314D;
  --f-honey: #D9A441;
  --f-sage:  #7A9E7E;
  --f-terra: #C0562B;
  --f-slate: #5C6B85;
  --f-hair:  #E2D9CC;
  --f-card:  #FCF9F4;
  --f-fill:  rgba(217, 164, 65, .10);
  --f-edge:  rgba(217, 164, 65, .50);
  --f-fig:   clamp(2.25rem, 1.4rem + 3.6vw, 3.9rem);
  --f-shadow: 12px 14px 0 rgba(37, 49, 77, .07), 16px 20px 40px rgba(37, 49, 77, .12);

  font-family: "Atkinson Next", system-ui, sans-serif;
  color: var(--f-slate);
  line-height: 1.6;
  font-synthesis-weight: none;
  container-type: inline-size;
}
.flib *, .flib *::before, .flib *::after { box-sizing: border-box; }
.flib p, .flib h3 { margin: 0; }

.flib__card {
  background: var(--f-card);
  border: 2px solid var(--f-hair);
  border-radius: 34px;
  box-shadow: var(--f-shadow);
  padding: clamp(22px, 4vw, 48px);
  max-width: 1120px;
  margin: 0 auto;
}

.flib__eyebrow {
  color: var(--f-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.flib__title {
  color: var(--f-ink);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 8px 0 10px;
  text-wrap: balance;
}
.flib__lede { font-size: 1.0625rem; max-width: 52ch; }

.flib__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 38px);
  margin-top: clamp(22px, 3vw, 34px);
  align-items: start;
}
@container (min-width: 780px) {
  .flib__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(30px, 3.6vw, 52px); }
}

/* Two cells side by side, the way they sit in the row. They stay side by side at 375px:
   the head bands are short enough and the figures are set to fit. */
.flib__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.flib__pair + .flib__pair { margin-top: 14px; }

/* --- cells: a header band sitting on its cell, the way the tab reads ------- */

.flib__field, .flib__calc {
  border: 2px solid var(--f-hair);
  border-radius: 16px;
  overflow: hidden;
  background: var(--f-paper);
}
.flib__field { border-color: var(--f-edge); background: var(--f-fill); }
.flib__field + .flib__pair,
.flib__pair + .flib__field { margin-top: 14px; }

.flib__head {
  display: block;
  background: var(--f-hair);
  color: var(--f-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flib__cell { display: flex; align-items: stretch; }
.flib__unit {
  display: flex;
  align-items: center;
  padding: 0 2px 0 14px;
  color: var(--f-slate);
  font-weight: 700;
  font-size: 1.25rem;
}
.flib__unit--end { padding: 0 16px 0 2px; }
.flib__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--f-ink);
  font: inherit;
  font-weight: 700;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.flib__input:focus { outline: none; }
.flib__field:focus-within {
  border-color: var(--f-terra);
  box-shadow: 0 0 0 3px rgba(192, 86, 43, .24);
}

/* the empty one, wearing the honey the file uses for a cell that wants you */
.flib__field--ask { border-color: var(--f-honey); background: rgba(217, 164, 65, .17); }
.flib__field--ask .flib__head { background: var(--f-honey); }

.flib__from { font-size: .9375rem; margin-top: 22px; max-width: 44ch; }

/* --- the derived side ------------------------------------------------------ */

.flib__rowname {
  color: var(--f-ink);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  min-height: 1.6em;
  overflow-wrap: anywhere;
}
.flib__rowname.is-empty { color: var(--f-slate); font-weight: 400; }

.flib__calcfig {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 8px 14px;
  color: var(--f-ink);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.flib__calcfig.is-waiting { font-size: 1rem; font-weight: 700; color: var(--f-slate); letter-spacing: 0; }
.flib__calcfig.is-long { font-size: 1.15rem; }

.flib__note { font-size: .9375rem; min-height: 1.5em; margin-top: 8px; }

.flib__price {
  margin-top: 6px;
  background: var(--f-ink);
  border: 2px solid var(--f-sage);
  border-radius: 22px;
  overflow: hidden;
}
.flib__head--pay { background: var(--f-slate); color: var(--f-paper); }

.flib__slot {
  display: flex;
  align-items: center;
  min-height: calc(var(--f-fig) * 1.2);
  padding: 12px 18px 0;
}
.flib__fig {
  display: inline-block;
  color: var(--f-honey);
  font-size: var(--f-fig);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.flib__fig.is-waiting { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.flib__fig.is-long { font-size: calc(var(--f-fig) * .74); }
.flib__sub {
  color: var(--f-paper);
  font-size: .9375rem;
  padding: 4px 18px 16px;
  min-height: 2.4em;
  overflow-wrap: anywhere;
}

.flib__foot {
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: 18px;
  border-top: 2px solid var(--f-hair);
  font-size: 1rem;
}
.flib__foot > span { display: block; max-width: 62ch; }

/* --- the movement ---------------------------------------------------------- */

@keyframes flib-tick {
  0%   { transform: translateY(-5px); color: var(--f-terra); }
  100% { transform: translateY(0);    color: var(--f-ink); }
}
@keyframes flib-tick-pay {
  0%   { transform: translateY(-5px); color: var(--f-paper); }
  100% { transform: translateY(0);    color: var(--f-honey); }
}
/* The first time a price exists. One beat, bigger than a keystroke. */
@keyframes flib-first {
  0%   { opacity: 0; transform: scale(.9) translateY(8px); color: var(--f-paper); }
  55%  { opacity: 1; transform: scale(1.035) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); color: var(--f-honey); }
}
@keyframes flib-glow {
  0%   { border-color: var(--f-honey); box-shadow: 0 0 0 0 rgba(217, 164, 65, .55); }
  100% { border-color: var(--f-sage);  box-shadow: 0 0 0 14px rgba(217, 164, 65, 0); }
}
.flib__calcfig.is-tick { animation: flib-tick 200ms cubic-bezier(.22, .9, .32, 1) both; }
.flib__fig.is-tick     { animation: flib-tick-pay 210ms cubic-bezier(.22, .9, .32, 1) both; }
.flib__fig.is-first    { animation: flib-first 420ms cubic-bezier(.2, .85, .3, 1) both; }
.flib__price.is-reveal { animation: flib-glow 520ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .flib__calcfig.is-tick,
  .flib__fig.is-tick,
  .flib__fig.is-first,
  .flib__price.is-reveal { animation: none; }
  .flib__field { transition: none; }
}

/* --- what the honey band asks of it ---------------------------------------
   Everything in the component sits on its own #FCF9F4 card, so no text of its
   own ever lands on Honey and its contrast is unchanged by the move. Two things
   are not text and did change.

   The shadow was tuned for a card on Paper. A .07 ink shadow is invisible against
   #D9A441, and the card was floating with nothing under it. This is the offset the
   other blocks on this band already use (.bend, .absorb).

   The hairline border is #E2D9CC, which is close enough to Honey that the card's
   top edge went soft. Ink at low alpha draws the same 2px line without adding a
   colour the band does not have.
   -------------------------------------------------------------------------- */

.band--honey .flib {
  --f-shadow: 10px 12px 0 rgba(11, 17, 30, .26), 18px 22px 44px rgba(11, 17, 30, .16);
  margin-top: clamp(34px, 4vw, 56px);
  scroll-margin-top: clamp(18px, 3vw, 34px);
}
.band--honey .flib__card { border-color: rgba(37, 49, 77, .14); }