/* Public marketing pages (the landing page and Our Story).

   The landing page is built as a color-blocked landscape rather than a
   stack of white cards: warm cream paper steps into white, into muted
   sage, and finally into the deep forest bar that ends every Trellis ad.

   The seams are HARD color edges. A page of curved dividers is a template
   tell, and the overlays were also eating each band's bottom padding, so
   they are gone; where two neighbouring tints are too close to read as a
   step (cream against paper, sage against cream) a single hairline draws
   the line. The page keeps exactly one designed transition — the organic
   rise into the closing forest band — so that one reads as a decision.

   The hero's fence pattern is a restrained hand-authored SVG mask. The leaf
   mark is used only as a list bullet; the other organic image masks are not
   used on the page.

   Display type is Gill Sans, the quote uses the Instrument Serif stack, and
   small body copy stays in Calibri. Fraunces remains a local fallback for
   the quote on systems without Instrument Serif. */

/* ------------------------------------------------------------------
   Instrument Serif. Self-hosted so the quote keeps the requested face
   without a third-party request. Fraunces remains the local fallback.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.ttf") format("truetype");
}

/* Fraunces fallback. Variable, subset by Unicode range so a page that never
   prints a latin-ext character never downloads that file. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Palette. Taken from the printed ad set and the logo mark
   (app/static/icon.svg): cream paper, forest green ink, sage leaves.
   Nothing here is blue.
   ------------------------------------------------------------------ */
.mk {
  --mk-cream: #f6f1e5;
  --mk-paper: #fffdf9;
  --mk-sage: #e3ebdb;
  --mk-forest: #1d4a35;

  --mk-ink: #1f2a23;
  --mk-muted: #5b6a5f;
  /* Captions sit in the drop-shadow under a screenshot, where the mat
     darkens the band behind them; they get their own darker ink. */
  --mk-caption: #47554b;
  --mk-green: #2f5d3f;
  --mk-green-deep: #1d4a35;
  --mk-leaf: #5e9b6b;
  --mk-leaf-soft: #8fbc7a;
  --mk-step-ink: #4a8556;
  --mk-rule: #cfd6c7;
  --mk-rule-strong: #b3c0ab;
  --mk-frame: rgba(29, 74, 53, .3);
  --mk-shadow: 0 1.15rem 2.6rem rgba(24, 48, 33, .13), 0 .18rem .5rem rgba(24, 48, 33, .06);

  --mk-band-bg: var(--mk-paper);
  --mk-head-ink: var(--mk-green-deep);
  --mk-curve-h: clamp(3.25rem, 6.5vw, 6.5rem);
  --mk-gutter: clamp(1.15rem, 3.5vw, 3rem);

  --mk-display: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --mk-quote: "Instrument Serif", "Fraunces", Georgia, "Times New Roman", serif;
  --mk-body: Calibri, "Gill Sans", "Gill Sans MT", Arial, sans-serif;
  --mk-sans: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --mk-sans-semi: "Gill Sans SemiBold", "Gill Sans Semibold", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;

  color: var(--mk-ink);
  font-family: var(--mk-body);
}

/* Our Story keeps the older single-column shape; only the landing page
   opts into the full-bleed banded landscape. */
.mk--landing {
  /* base.html wraps content in main.container-fluid.px-4 (1.5rem of side
     padding) — cancelling exactly that, rather than reaching for 100vw,
     is what keeps a scrollbar-width sliver of horizontal scroll from
     ever appearing (Samantha rule 4). */
  margin: 0 -1.5rem -1.5rem;
}

/* Butt the hero against the navbar — but only when nothing else was
   rendered into main first. A flash message makes .mk the second div,
   :first-of-type stops matching, and the pull-up switches itself off
   instead of clipping the alert. */
main > div.mk--landing:first-of-type {
  margin-top: -1.5rem;
}

/* ------------------------------------------------------------------
   Bands. Hard edges, symmetric padding, one hairline where the color
   step is too quiet to read on its own.
   ------------------------------------------------------------------ */
.mk-band {
  position: relative;
  padding: clamp(3rem, 5.5vw, 6rem) 0;
  background: var(--mk-band-bg);
}

.mk-band--cream { --mk-band-bg: var(--mk-cream); }
.mk-band--paper { --mk-band-bg: var(--mk-paper); }
.mk-band--sage { --mk-band-bg: var(--mk-sage); }

.mk-band--cream + .mk-band--paper,
.mk-band--paper + .mk-band--cream,
.mk-band--cream + .mk-band--sage,
.mk-band--sage + .mk-band--cream {
  border-top: 1px solid var(--mk-rule);
}

.mk-band--forest {
  --mk-band-bg: var(--mk-forest);
  --mk-ink: #eef2e8;
  --mk-muted: #d9e6db;
  --mk-caption: #d9e6db;
  --mk-head-ink: #f6f1e5;
  --mk-rule: rgba(246, 241, 229, .28);
  --mk-green: #bcd6c1;
  color: var(--mk-ink);
}

.mk-band--hero {
  padding-top: clamp(2.25rem, 4vw, 4rem);
  padding-bottom: clamp(3.5rem, 6vw, 6.5rem);
  /* The compact week calendar is allowed to remain legible at the top of the
     page. `clip` keeps any optical overshoot off the document without
     turning the band into a scroll container. */
  overflow-x: clip;
}

/* The page's one designed seam: the ground rising into the closing bar.
   Hand-drawn, asymmetric, and generous — nothing else on the page has a
   curve, so this one has to be worth looking at. */
.mk-band--forest::before {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(1px - var(--mk-curve-h));
  height: var(--mk-curve-h);
  background: inherit;
  content: "";
  pointer-events: none;
  -webkit-mask: var(--mk-curve) no-repeat center / 100% 100%;
  mask: var(--mk-curve) no-repeat center / 100% 100%;
  --mk-curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 134C86 130 138 113 214 96 298 77 356 96 430 92 520 87 566 43 656 33 742 23 800 62 884 76 972 91 1028 57 1114 43 1208 28 1298 62 1370 88 1394 97 1418 104 1440 108V160H0Z'/%3E%3C/svg%3E");
}

.mk-wrap {
  position: relative;
  z-index: 1;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--mk-gutter);
}

.mk-wrap--narrow { max-width: 52rem; }

/* ------------------------------------------------------------------
   The fence is the page's one repeating garden motif. It introduces the
   hero and returns in the closing band, with each band choosing its own
   quiet ink color.
   ------------------------------------------------------------------ */
.mk-band--lattice {
  --mk-lattice-ink: 47, 93, 63;
  --mk-lattice-alpha: .32;
  --mk-lattice-fade: 52%;
  --mk-lattice-angle: 218deg;
}

.mk-band--lattice::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--mk-lattice-angle),
      rgba(var(--mk-lattice-ink), var(--mk-lattice-alpha)) 0%,
      rgba(var(--mk-lattice-ink), 0) var(--mk-lattice-fade));
  content: "";
  pointer-events: none;
  /* Two mask layers intersected: the woven lattice tile, and a fade that
     starts the weave 4rem down so it never collides with the navbar (or,
     on the closing band, with the curve above it). */
  -webkit-mask-image: url("../img/motif-lattice.svg"), linear-gradient(to bottom, transparent 0, #000 4rem);
  mask-image: url("../img/motif-lattice.svg"), linear-gradient(to bottom, transparent 0, #000 4rem);
  -webkit-mask-size: 72px 72px, 100% 100%;
  mask-size: 72px 72px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.mk-band--forest.mk-band--lattice {
  --mk-lattice-ink: 198, 224, 200;
  --mk-lattice-alpha: .22;
  --mk-lattice-fade: 64%;
  --mk-lattice-angle: 20deg;
}

/* ------------------------------------------------------------------
   Type.
   ------------------------------------------------------------------ */
.mk .serif,
.mk h1,
.mk h2,
.mk h3 {
  color: var(--mk-head-ink);
  font-family: var(--mk-display);
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: -.014em;
}

.mk h1,
.mk h2 { text-wrap: balance; }

.mk h1 {
  max-width: 19ch;
  font-size: clamp(2.3rem, 4.4vw, 3.75rem);
  line-height: 1.04;
}

.mk h2 {
  max-width: 22ch;
  font-size: clamp(1.72rem, 3vw, 2.6rem);
  line-height: 1.1;
}

.mk .mk-wrap--narrow h2,
.mk .text-center h2 { max-width: none; }

.mk .lede {
  max-width: 36em;
  color: var(--mk-muted);
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.62;
}

.mk p,
.mk li { text-wrap: pretty; font-family: var(--mk-body); }

.mk p { max-width: 40em; }

.mk .text-muted { color: var(--mk-muted) !important; }

/* Links are green ink with a leaf-colored underline. Left alone they
   inherit Bootstrap blue, which is the one color this page never uses. */
.mk a:not(.btn) {
  color: var(--mk-green-deep);
  text-decoration-color: var(--mk-leaf-soft);
  text-underline-offset: .18em;
}

.mk a:not(.btn):hover,
.mk a:not(.btn):focus-visible {
  color: var(--mk-green);
  text-decoration-color: currentColor;
}

.mk-band--forest a:not(.btn) {
  color: #f6f1e5;
  text-decoration-color: rgba(246, 241, 229, .55);
}

/* The trellis sentence is the line the ads set in italic serif. It gets
   that treatment here, held out from the body copy by a sage hairline. */
.mk .mk-metaphor {
  max-width: 24em;
  margin: 0 0 1.5rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--mk-leaf-soft);
  color: var(--mk-green);
  font-family: var(--mk-quote);
  font-size: clamp(1.16rem, 1.75vw, 1.55rem);
  font-style: italic;
  font-variation-settings: normal;
  font-weight: 400;
  line-height: 1.4;
}

/* Letterspaced small-cap label, with a single sage leaf in front of it —
   the sub-line style the ad set uses ("YOUR WAY"). */
.mk .eyebrow {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: .9rem;
  color: var(--mk-green);
  font-family: var(--mk-sans-semi);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* The numbered walk, 01 through 08. A Gill Sans numeral, the label, and a
   hairline that runs out to the edge of the column. */
.mk-step {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.15rem;
}

.mk-step-n {
  /* Leaf green at 49px measured 2.92:1 on cream — under the 3:1 large-text
     floor. This is the same family, one step down. */
  color: var(--mk-step-ink);
  font-family: var(--mk-display);
  font-size: clamp(2.3rem, 3.6vw, 3.2rem);
  font-variation-settings: "SOFT" 26, "WONK" 0;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .82;
}

.mk-step-label {
  color: var(--mk-green);
  font-family: var(--mk-sans-semi);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .17em;
  line-height: 1.3;
  text-transform: uppercase;
}

.mk-step::after {
  height: 1px;
  flex: 1 1 auto;
  background: var(--mk-rule);
  content: "";
}

/* ------------------------------------------------------------------
   Screenshots. A thin dark-green rule and a .4rem white mat, the way the
   ads frame a product shot — the same mat and the same radius on every
   frame, including the drawn transcript. No faux browser chrome, ever.
   ------------------------------------------------------------------ */
.mk .shot {
  /* min-width: 0 — inside a grid column a figure is a grid item, and
     without it the image's intrinsic width blows the column out past a
     phone viewport. */
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.mk .shot img {
  display: block;
  width: 100%;
  height: auto;
  padding: .4rem;
  border: 1px solid var(--mk-frame);
  border-radius: .5rem;
  background: #fff;
  box-shadow: var(--mk-shadow);
}

.mk .shot--hero img,
.mk .shot--hero video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  box-shadow: 0 1.6rem 3.4rem rgba(24, 48, 33, .17), 0 .3rem .8rem rgba(24, 48, 33, .07);
}

.mk-hero-list { max-width: 40em; }

.mk-aside-list {
  display: inline-block;
  max-width: 44em;
  text-align: left;
}

.mk .shot figcaption {
  margin-top: .6rem;
  color: var(--mk-caption);
  font-size: .74rem;
  letter-spacing: .02em;
  line-height: 1.45;
}

.mk .shot .hs-mock-transcript {
  /* Keep the old source mockup available as a readable design reference for
     tests, but show the fixed capture above it. The marketing page should
     present the transcript like an exported PDF at every viewport. */
  display: none;
  overflow-x: hidden;
  /* Matted and framed exactly like the photographs beside it. */
  border: 1px solid var(--mk-frame);
  border-radius: .5rem;
  box-shadow: var(--mk-shadow);
}

/* The full calendar is the hero evidence. It stays inside its column so the
   entire month, including the open current date, remains visible. */
@media (min-width: 992px) {
  .mk-band--hero .mk-wrap {
    max-width: none;
    padding-right: 0;
    padding-left: max(var(--mk-gutter), calc(50vw - 38rem + var(--mk-gutter)));
  }

  .mk-band--hero .shot--hero figcaption {
    max-width: 46em;
  }
}

/* ------------------------------------------------------------------
   Prove it happened: the one section that drops the two-column rhythm
   and runs its evidence the full width of the band.
   ------------------------------------------------------------------ */
.mk-full-head {
  max-width: 48rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.mk-full-head h2 { max-width: 26ch; }

.mk-full-figs {
  display: grid;
  max-width: 70rem;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

/* The quiet centered line ("works on the devices you already own"). */
.mk-aside {
  max-width: 44em;
  margin: 0 auto;
  text-align: center;
}

.mk-aside .serif {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.25;
}

.mk-aside p { max-width: none; }

/* ------------------------------------------------------------------
   Lists. Leaf Image.png markers, matching the Trellis mark.
   ------------------------------------------------------------------ */
.mk .checks,
.mk .plainlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk .checks li,
.mk .plainlist li {
  position: relative;
  margin-bottom: .62rem;
  padding-left: 1.6rem;
  font-size: clamp(1.05rem, 1.18vw, 1.18rem);
  line-height: 1.45;
}

/* The short utility/disclaimer lists keep a smaller, but still comfortable,
   measure. Every bullet within one list uses the same size. */
.mk .checks.small li {
  font-size: clamp(.96rem, 1.05vw, 1.05rem);
}

.mk .checks li::before,
.mk .plainlist li::before {
  position: absolute;
  top: .28rem;
  left: 0;
  width: .82rem;
  height: .82rem;
  background: url("../img/Leaf%20Image.png") center / contain no-repeat;
  content: "";
}

.mk .plainlist {
  columns: 2 21rem;
  column-gap: 3rem;
}

.mk-toolbox-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.mk-toolbox-columns .plainlist {
  columns: initial;
}

.mk .plainlist li {
  margin-bottom: .9rem;
  break-inside: avoid;
}

.mk .plainlist strong {
  color: var(--mk-head-ink);
  font-family: var(--mk-sans-semi);
  font-weight: 600;
}

/* The Minnesota sign-off is intentionally outside this copy refresh. Keep
   its existing compact treatment while the new marketing bullets breathe. */
.mk .mn-pride .checks li {
  font-size: 1rem;
}

/* ------------------------------------------------------------------
   Buttons. Forest green on cream; the landing page is never blue.
   ------------------------------------------------------------------ */
.mk .btn { border-radius: .35rem; }

.mk .btn-trellis {
  border-color: var(--mk-green-deep);
  background: var(--mk-green-deep);
  color: #f7f4ea;
  font-family: var(--mk-sans-semi);
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 .18rem .5rem rgba(24, 48, 33, .18);
}

.mk .btn-trellis:hover,
.mk .btn-trellis:focus-visible {
  border-color: #143526;
  background: #143526;
  color: #fffdf7;
}

/* base.html sets a site-wide light-theme outline palette at a higher
   specificity than a plain .mk descendant selector, so the marketing
   green needs the extra .btn to win. The border is 3:1 against cream. */
.mk .btn.btn-outline-secondary {
  --bs-btn-color: var(--mk-green-deep);
  --bs-btn-border-color: #7d8c76;
  --bs-btn-hover-bg: var(--mk-green-deep);
  --bs-btn-hover-border-color: var(--mk-green-deep);
  --bs-btn-hover-color: #f7f4ea;
  --bs-btn-active-bg: var(--mk-green-deep);
  --bs-btn-active-border-color: var(--mk-green-deep);
}

.mk-band--forest .btn-trellis {
  border-color: #f6f1e5;
  background: #f6f1e5;
  color: var(--mk-forest);
}

.mk-band--forest .btn-trellis:hover,
.mk-band--forest .btn-trellis:focus-visible {
  border-color: #fffdf7;
  background: #fffdf7;
  color: #143526;
}

/* ------------------------------------------------------------------
   Framed cards: pricing, Minnesota, the closing bar.
   ------------------------------------------------------------------ */
.mk .price-card,
.mk .mn-pride {
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid var(--mk-frame);
  border-radius: .55rem;
  background: var(--mk-paper);
  box-shadow: var(--mk-shadow);
}

/* A paper card on a paper band is invisible. On white, the card takes the
   cream; on cream it stays white. */
.mk-band--paper .price-card,
.mk-band--paper .mn-pride {
  background: var(--mk-cream);
}

.mk .price-card h2 { max-width: 18ch; }

.mk .price-rule {
  height: 4px;
  margin: 1rem 0 1.25rem;
  border-top: 1px solid var(--mk-green);
  border-bottom: 1px solid var(--mk-green);
}

.mk .price-big {
  color: var(--mk-head-ink);
  font-family: var(--mk-display);
  font-size: clamp(3rem, 5.6vw, 4.4rem);
  font-variation-settings: "SOFT" 26, "WONK" 0;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
}

/* "/ year" is a unit, not part of the numeral: sans face, optically
   spaced off the 9 rather than separated by a full word space. */
.mk .price-per {
  margin-left: .18em;
  color: var(--mk-muted);
  font-family: var(--mk-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .02em;
}

/* Trial and lapse mechanics: approved wording, quieter placement. The
   hairline is what makes both columns of the card end together. */
.mk .price-fine {
  max-width: none;
  margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--mk-rule);
  color: var(--mk-muted);
  line-height: 1.55;
}

.mk .mk-signoff {
  max-width: none;
  font-family: var(--mk-sans-semi);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
}

.mk-cta h2 {
  max-width: 20ch;
  margin: 0 auto 1.25rem;
  font-size: clamp(2rem, 3.7vw, 3.2rem);
}

.mk-cta { text-align: center; }

.mk-cta p { margin-inline: auto; }

/* A leaf between two hairlines — the ornament that closes a section. */
/* The site footer sits directly under the forest closer. Left alone it is
   a grey band of blue links; on the landing page it finishes the
   landscape in cream with forest ink. */
body:has(main > .mk--landing) footer {
  margin-top: 0;
  border-top: 0;
  background: #f6f1e5;
  color: #47554b;
}

body:has(main > .mk--landing) footer a {
  color: #1d4a35;
  text-decoration-color: #8fbc7a;
  text-underline-offset: .18em;
}

/* ------------------------------------------------------------------
   Our Story keeps the plain single column it already had.
   ------------------------------------------------------------------ */
.mk:not(.mk--landing) > section {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}

/* ------------------------------------------------------------------
   The printed-transcript illustration. Paper-white on purpose: it mimics
   a printable record, not the visitor's theme.
   ------------------------------------------------------------------ */
.mk .hs-mock-transcript { padding: .4rem; background: #fff; color-scheme: light; }
.mk .hs-mock-transcript:focus-visible { outline: 3px solid var(--tr-action); outline-offset: -3px; }
.mk .tsm-sheet { max-width: 30rem; margin: 0 auto; padding: .8rem .95rem; border: 1px solid #dee2e6; background: #fff; box-shadow: 0 .3rem 1rem rgba(33, 37, 41, .14); color: #212529; font-family: Georgia, "Times New Roman", serif; font-size: .62rem; line-height: 1.35; }
.mk .tsm-head { margin-bottom: .5rem; padding-bottom: .35rem; border-bottom: 3px double #2f5d3f; text-align: center; }
.mk .tsm-school { font-size: 1.25em; font-weight: 700; letter-spacing: .02em; }
.mk .tsm-title { display: flex; align-items: center; gap: .5rem; margin: .2rem 0; color: #2f5d3f; font-variant: small-caps; font-weight: 600; letter-spacing: .16em; }
.mk .tsm-title > span { white-space: nowrap; }
.mk .tsm-title::before,
.mk .tsm-title::after { flex: 1 1 auto; border-top: 1px solid #2f5d3f; content: ""; }
.mk .tsm-cap { color: #6b7280; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; }
.mk .tsm-label { display: flex; align-items: center; gap: .45rem; margin: .45rem 0 .25rem; color: #2f5d3f; font-variant: small-caps; font-weight: 700; letter-spacing: .09em; }
.mk .tsm-label::after { flex: 1 1 auto; border-top: 1px solid #cbd5cf; content: ""; }
.mk .tsm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mk .tsm-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; margin-bottom: .2rem; }
.mk .tsm-info > div { min-width: 0; }
.mk .tsm-field { margin-bottom: .18rem; padding: .06rem 0 .03rem; border-bottom: 1px solid #cbd5cf; }
.mk .tsm-val { overflow-wrap: anywhere; }
.mk .tsm-certify { margin-top: .5rem; }
.mk .tsm-certify p { max-width: none; }
.mk .tsm-sum { display: grid; grid-template-columns: 3fr 2fr; align-items: start; gap: .6rem; }
.mk .tsm-table { width: 100%; border-collapse: collapse; }
.mk .tsm-table th,
.mk .tsm-table td { padding: .06rem .25rem; border: 1px solid #cbd5cf; font-weight: 400; text-align: left; }
.mk .tsm-band th { background: #eef4ef; color: #2f5d3f; font-weight: 700; }
.mk .tsm-band th:first-child { border-left: 3px solid #2f5d3f; }
.mk .tsm-cols th { color: #6b7280; font-size: .82em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mk .tsm-c { text-align: center !important; }
.mk .tsm-r { text-align: right !important; }
.mk .tsm-total td { border-top: 2px solid #2f5d3f; font-weight: 700; }
.mk .tsm-notes { min-height: 2.6rem; padding: .2rem .3rem; border: 1px solid #cbd5cf; }
.mk .tsm-sig { display: flex; gap: 1rem; margin-top: .55rem; }
.mk .tsm-sig > div { flex: 1; }
.mk .tsm-sig-line { height: .9rem; border-bottom: 1px solid #212529; }
.mk .tsm-foot { margin-top: .5rem; color: #6b7280; font-size: .82em; letter-spacing: .04em; text-align: center; }

/* ------------------------------------------------------------------
   Dark mode. The landscape is designed for the light, cream-paper world;
   at night it keeps the same band rhythm in night inks. The steps are
   spread far enough apart to still read as separate bands, and the
   closing forest bar is the DEEPEST note on the page, so the crescendo
   runs the same direction it does in daylight.
   ------------------------------------------------------------------ */
[data-bs-theme="dark"] .mk {
  --mk-cream: #22271f;
  --mk-paper: #1a1f1a;
  --mk-sage: #2a382d;
  --mk-forest: #081d10;

  --mk-ink: #e7ebe4;
  --mk-muted: #a9b6ab;
  --mk-caption: #b4c1b6;
  --mk-green: #9bc9a8;
  --mk-green-deep: #2c6944;
  --mk-leaf: #7fae86;
  --mk-leaf-soft: #6b9b74;
  --mk-step-ink: #7fae86;
  --mk-rule: #3c4a3f;
  --mk-rule-strong: #4c5c50;
  --mk-frame: rgba(155, 201, 168, .3);
  --mk-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .35);

  --mk-head-ink: #dfe9dd;
}

[data-bs-theme="dark"] .mk a:not(.btn) {
  color: var(--mk-green);
  text-decoration-color: var(--mk-leaf);
}

[data-bs-theme="dark"] .mk-band--forest {
  --mk-ink: #e7f0e6;
  --mk-muted: #cfe0d1;
  --mk-caption: #cfe0d1;
  --mk-head-ink: #f2ede0;
  --mk-rule: rgba(226, 236, 220, .22);
  --mk-green: #bcd6c1;
}

[data-bs-theme="dark"] .mk-band--lattice {
  --mk-lattice-ink: 159, 199, 170;
  --mk-lattice-alpha: .2;
}

[data-bs-theme="dark"] .mk .btn.btn-outline-secondary {
  --bs-btn-color: #cfe0d3;
  --bs-btn-border-color: #7d9184;
  --bs-btn-hover-bg: #cfe0d3;
  --bs-btn-hover-border-color: #cfe0d3;
  --bs-btn-hover-color: #14251b;
  --bs-btn-active-bg: #cfe0d3;
  --bs-btn-active-border-color: #cfe0d3;
  --bs-btn-active-color: #14251b;
}

[data-bs-theme="dark"] .mk .shot img { background: #f4f5f2; }

/* 4.93:1 — the old #3c8a5b/#0f1a13 pair measured 4.23. */
[data-bs-theme="dark"] .mk .btn-trellis {
  border-color: #40915f;
  background: #40915f;
  color: #08120c;
}

[data-bs-theme="dark"] .mk .btn-trellis:hover,
[data-bs-theme="dark"] .mk .btn-trellis:focus-visible {
  border-color: #4fa26e;
  background: #4fa26e;
  color: #08120c;
}

[data-bs-theme="dark"] .mk-band--forest .btn-trellis {
  border-color: #e8efe2;
  background: #e8efe2;
  color: #14301f;
}

[data-bs-theme="dark"] body:has(main > .mk--landing) footer {
  background: #1a1f1a;
  color: #a9b6ab;
}

[data-bs-theme="dark"] body:has(main > .mk--landing) footer a {
  color: #9bc9a8;
  text-decoration-color: #7fae86;
}

/* ------------------------------------------------------------------
   Narrower windows.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* Narrower windows show the hero band nearly edge to edge, so the same
     lattice that reads as a watermark on a laptop sits right under the
     headline. Quieter here. */
  .mk-band--lattice { --mk-lattice-alpha: .24; --mk-lattice-fade: 44%; }
  .mk h1 { max-width: 18ch; }
  .mk h2 { max-width: 26ch; }
  /* One column means full-width measures unless they are held in. */
  .mk-band--hero .lede,
  .mk-band--hero .small { max-width: 30em; }
  .mk .mk-metaphor { max-width: 26em; }
  .mk-toolbox-columns { grid-template-columns: 1fr; }
  /* Two 1428px-wide record shots side by side in a tablet column are two
     unreadable thumbnails. Stack them. */
  .mk-full-figs { grid-template-columns: 1fr; }
}

/* Short laptop windows (a real 1366x768 is about 625-660px of viewport):
   tighten the hero's vertical rhythm so the primary button is above the
   fold without shrinking the display type. */
@media (min-width: 992px) and (max-height: 780px) {
  .mk-band--hero { padding-top: 1.5rem; padding-bottom: 2.5rem; }
  .mk-band--hero .row.g-5 { --bs-gutter-y: 2rem; }
  .mk-band--hero .eyebrow { margin-bottom: .5rem; }
  .mk-band--hero h1 { margin-bottom: .6rem !important; font-size: clamp(2.1rem, 3.7vw, 3.1rem); }
  .mk-band--hero .mk-metaphor { margin-bottom: .95rem; font-size: 1.18rem; }
  .mk-band--hero .lede { margin-bottom: 1.1rem !important; font-size: 1.05rem; line-height: 1.55; }
}

@media (max-width: 767.98px) {
  .mk-band { padding: 2.5rem 0; }
  .mk-band--hero { padding-top: 1.5rem; padding-bottom: 2.75rem; }
  .mk-band--forest { padding: 4rem 0 3.5rem; }
  .mk-band--lattice { --mk-lattice-alpha: .2; --mk-lattice-fade: 38%; }
  /* base.html narrows main's side padding to .75rem below 700px; the
     full-bleed pull has to match it or a real sideways scroll appears. */
  .mk .row.g-5 { --bs-gutter-x: 1.5rem; }
  .mk-full-figs { grid-template-columns: 1fr; }

  /* The transcript REFLOWS on a phone instead of scrolling or clipping.
     A horizontally clipped sheet loses whole grade years (every grade
     cell in 10th and 12th), and nothing in a role="img" illustration can
     be scrolled to by a screen-reader user anyway. */
  .mk .tsm-sheet { min-width: 0; font-size: .58rem; }
  .mk .tsm-grid,
  .mk .tsm-info,
  .mk .tsm-sum { grid-template-columns: 1fr; }
  .mk .tsm-sum { gap: .45rem; }
}

@media (max-width: 700px) {
  .mk--landing { margin-left: -.75rem; margin-right: -.75rem; }
}

/* Two full-width buttons stack better than two half-width ones. */
@media (max-width: 479.98px) {
  .mk .mk-hero-cta .btn {
    flex: 1 1 auto;
    min-width: 12rem;
  }
}

@media (forced-colors: active) {
  .mk .shot img,
  .mk .price-card,
  .mk .mn-pride { border-color: CanvasText; }

  .mk .checks li::before,
  .mk .plainlist li::before { background: CanvasText; }

  .mk-band--forest::before,
  .mk-band--lattice::after { display: none; }
}

/* ------------------------------------------------------------------
   Two moments of motion on the page (Samantha, 2026-08-08 round 2): the
   hero calendar on load and the closing band on scroll. The hidden
   initial state only exists once the script has stamped mk-reveal-on on
   <html>, so a no-JS visit — and every crawler — sees the whole page;
   reduced-motion sees no movement at all.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html.mk-reveal-on .mk [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
  }

  html.mk-reveal-on .mk [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------
   Print. Two things go wrong otherwise: the reveal machinery prints a
   dozen blank pages, and the forest bar prints near-white ink on white
   once background graphics are off.
   ------------------------------------------------------------------ */
@media print {
  html.mk-reveal-on .mk [data-reveal],
  .mk [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mk-band { padding: 1rem 0; }

  .mk-band--forest {
    --mk-ink: #1f2a23;
    --mk-muted: #3d4a41;
    --mk-caption: #3d4a41;
    --mk-head-ink: #123024;
    --mk-rule: #b3c0ab;
    --mk-green: #1d4a35;
    background: transparent !important;
    color: #1f2a23 !important;
  }

  .mk-band--forest .btn-trellis {
    border-color: #1d4a35;
    background: transparent;
    color: #1d4a35;
    box-shadow: none;
  }

  .mk-band--forest a:not(.btn) { color: #1d4a35; }

  .mk-band--forest::before,
  .mk-band--lattice::after { display: none !important; }
}