/* Design tokens inlined from tokens.css — postcss-import isn't wired in, so merging here. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --paper:          #F4EFE3;
  --paper-deep:     #EADFC7;
  --paper-soft:     #FAF5EA;
  --ink:            #232420;
  --ink-soft:       #434540;
  --ink-mute:       #6E7068;
  --ink-faint:      #9FA199;

  --moss:           #4E7A47;
  --moss-deep:      #355A30;
  --moss-soft:      #B6C8A9;
  --moss-wash:      #DCE6D0;

  --fern:           #355A30;
  --fern-deep:      #254320;

  --sprout:         #7FAE5E;
  --sprout-soft:    #C6DDB0;
  --sprout-wash:    #E3EED5;

  --clay:           #B8764F;
  --clay-deep:      #8F5736;
  --clay-soft:      #DDBFA3;
  --clay-wash:      #EDDAC3;

  --dusk:           #A59BB8;
  --dusk-deep:      #7B7192;
  --dusk-soft:      #D2CCDB;
  --dusk-wash:      #E8E4EE;

  --buttercream:    #E8D9A8;
  --buttercream-deep:#B99F5C;
  --buttercream-soft:#F1E8C9;
  --buttercream-wash:#F7F1DE;

  --rose:           #D9A8A0;
  --rose-deep:      #A6726A;
  --rose-soft:      #EBCEC8;
  --rose-wash:      #F4E2DE;

  --slate:          #9FB4B2;
  --slate-deep:     #6E8583;
  --slate-soft:     #CAD8D6;
  --slate-wash:     #E2E9E8;

  --sky-wash:       #DDE7EE;

  --brick:          #B85450;
  --brick-deep:     #8B3A37;

  --bg:             var(--paper);
  --bg-raised:      #FFFFFF;

  --fg:             var(--ink);
  --fg-soft:        var(--ink-soft);
  --fg-mute:        var(--ink-mute);
  --fg-faint:       var(--ink-faint);

  --accent:         var(--moss);
  --accent-hover:   var(--moss-deep);
  --accent-fg:      #FFFFFF;

  --border:         rgba(42, 37, 33, 0.10);
  --border-strong:  rgba(42, 37, 33, 0.22);
  --border-ink:     var(--ink);

  --font-serif:     'Newsreader', 'Iowan Old Style', 'Source Serif Pro', Georgia, serif;
  --font-sans:      'Instrument Sans', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --shadow-sm:      0 1px 0 rgba(42, 37, 33, 0.04), 0 2px 6px rgba(42, 37, 33, 0.06);
  --shadow-md:      0 1px 0 rgba(42, 37, 33, 0.05), 0 6px 16px rgba(42, 37, 33, 0.08);
  --shadow-lg:      0 1px 0 rgba(42, 37, 33, 0.06), 0 14px 32px rgba(42, 37, 33, 0.12);

  --ease:           cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur:            180ms;
}

::-moz-selection { background: var(--moss-soft); color: var(--ink); }

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

*, ::before, ::after{
  --tw-border-spacing-x:          0;
  --tw-border-spacing-y:          0;
  --tw-translate-x:          0;
  --tw-translate-y:          0;
  --tw-rotate:          0;
  --tw-skew-x:          0;
  --tw-skew-y:          0;
  --tw-scale-x:          1;
  --tw-scale-y:          1;
  --tw-pan-x:           ;
  --tw-pan-y:           ;
  --tw-pinch-zoom:           ;
  --tw-scroll-snap-strictness:          proximity;
  --tw-gradient-from-position:           ;
  --tw-gradient-via-position:           ;
  --tw-gradient-to-position:           ;
  --tw-ordinal:           ;
  --tw-slashed-zero:           ;
  --tw-numeric-figure:           ;
  --tw-numeric-spacing:           ;
  --tw-numeric-fraction:           ;
  --tw-ring-inset:           ;
  --tw-ring-offset-width:          0px;
  --tw-ring-offset-color:          #fff;
  --tw-ring-color:          rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:          0 0 #0000;
  --tw-ring-shadow:          0 0 #0000;
  --tw-shadow:          0 0 #0000;
  --tw-shadow-colored:          0 0 #0000;
  --tw-blur:           ;
  --tw-brightness:           ;
  --tw-contrast:           ;
  --tw-grayscale:           ;
  --tw-hue-rotate:           ;
  --tw-invert:           ;
  --tw-saturate:           ;
  --tw-sepia:           ;
  --tw-drop-shadow:           ;
  --tw-backdrop-blur:           ;
  --tw-backdrop-brightness:           ;
  --tw-backdrop-contrast:           ;
  --tw-backdrop-grayscale:           ;
  --tw-backdrop-hue-rotate:           ;
  --tw-backdrop-invert:           ;
  --tw-backdrop-opacity:           ;
  --tw-backdrop-saturate:           ;
  --tw-backdrop-sepia:           ;
  --tw-contain-size:           ;
  --tw-contain-layout:           ;
  --tw-contain-paint:           ;
  --tw-contain-style:           ;
}

::backdrop{
  --tw-border-spacing-x:          0;
  --tw-border-spacing-y:          0;
  --tw-translate-x:          0;
  --tw-translate-y:          0;
  --tw-rotate:          0;
  --tw-skew-x:          0;
  --tw-skew-y:          0;
  --tw-scale-x:          1;
  --tw-scale-y:          1;
  --tw-pan-x:           ;
  --tw-pan-y:           ;
  --tw-pinch-zoom:           ;
  --tw-scroll-snap-strictness:          proximity;
  --tw-gradient-from-position:           ;
  --tw-gradient-via-position:           ;
  --tw-gradient-to-position:           ;
  --tw-ordinal:           ;
  --tw-slashed-zero:           ;
  --tw-numeric-figure:           ;
  --tw-numeric-spacing:           ;
  --tw-numeric-fraction:           ;
  --tw-ring-inset:           ;
  --tw-ring-offset-width:          0px;
  --tw-ring-offset-color:          #fff;
  --tw-ring-color:          rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:          0 0 #0000;
  --tw-ring-shadow:          0 0 #0000;
  --tw-shadow:          0 0 #0000;
  --tw-shadow-colored:          0 0 #0000;
  --tw-blur:           ;
  --tw-brightness:           ;
  --tw-contrast:           ;
  --tw-grayscale:           ;
  --tw-hue-rotate:           ;
  --tw-invert:           ;
  --tw-saturate:           ;
  --tw-sepia:           ;
  --tw-drop-shadow:           ;
  --tw-backdrop-blur:           ;
  --tw-backdrop-brightness:           ;
  --tw-backdrop-contrast:           ;
  --tw-backdrop-grayscale:           ;
  --tw-backdrop-hue-rotate:           ;
  --tw-backdrop-invert:           ;
  --tw-backdrop-opacity:           ;
  --tw-backdrop-saturate:           ;
  --tw-backdrop-sepia:           ;
  --tw-contain-size:           ;
  --tw-contain-layout:           ;
  --tw-contain-paint:           ;
  --tw-contain-style:           ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.prose{
  color:          var(--tw-prose-body);
  max-width:          65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.25em;
  margin-bottom:          1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-lead);
  font-size:          1.25em;
  line-height:          1.6;
  margin-top:          1.2em;
  margin-bottom:          1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-links);
  text-decoration:          underline;
  font-weight:          500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-bold);
  font-weight:          600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          decimal;
  margin-top:          1.25em;
  margin-bottom:          1.25em;
  padding-inline-start:          1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type:          disc;
  margin-top:          1.25em;
  margin-bottom:          1.25em;
  padding-inline-start:          1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight:          400;
  color:          var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color:          var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-headings);
  font-weight:          600;
  margin-top:          1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color:          var(--tw-prose-hr);
  border-top-width:          1px;
  margin-top:          3em;
  margin-bottom:          3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight:          500;
  font-style:          italic;
  color:          var(--tw-prose-quotes);
  border-inline-start-width:          0.25rem;
  border-inline-start-color:          var(--tw-prose-quote-borders);
  quotes:          "\201C""\201D""\2018""\2019";
  margin-top:          1.6em;
  margin-bottom:          1.6em;
  padding-inline-start:          1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content:          open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content:          close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-headings);
  font-weight:          800;
  font-size:          2.25em;
  margin-top:          0;
  margin-bottom:          0.8888889em;
  line-height:          1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight:          900;
  color:          inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-headings);
  font-weight:          700;
  font-size:          1.5em;
  margin-top:          2em;
  margin-bottom:          1em;
  line-height:          1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight:          800;
  color:          inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-headings);
  font-weight:          600;
  font-size:          1.25em;
  margin-top:          1.6em;
  margin-bottom:          0.6em;
  line-height:          1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight:          700;
  color:          inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-headings);
  font-weight:          600;
  margin-top:          1.5em;
  margin-bottom:          0.5em;
  line-height:          1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight:          700;
  color:          inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          2em;
  margin-bottom:          2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display:          block;
  margin-top:          2em;
  margin-bottom:          2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          2em;
  margin-bottom:          2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight:          500;
  font-family:          inherit;
  color:          var(--tw-prose-kbd);
  box-shadow:          0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size:          0.875em;
  border-radius:          0.3125rem;
  padding-top:          0.1875em;
  padding-inline-end:          0.375em;
  padding-bottom:          0.1875em;
  padding-inline-start:          0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-code);
  font-weight:          600;
  font-size:          0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content:          "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content:          "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
  font-size:          0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
  font-size:          0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-pre-code);
  background-color:          var(--tw-prose-pre-bg);
  overflow-x:          auto;
  font-weight:          400;
  font-size:          0.875em;
  line-height:          1.7142857;
  margin-top:          1.7142857em;
  margin-bottom:          1.7142857em;
  border-radius:          0.375rem;
  padding-top:          0.8571429em;
  padding-inline-end:          1.1428571em;
  padding-bottom:          0.8571429em;
  padding-inline-start:          1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color:          transparent;
  border-width:          0;
  border-radius:          0;
  padding:          0;
  font-weight:          inherit;
  color:          inherit;
  font-size:          inherit;
  font-family:          inherit;
  line-height:          inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content:          none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content:          none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width:          100%;
  table-layout:          auto;
  margin-top:          2em;
  margin-bottom:          2em;
  font-size:          0.875em;
  line-height:          1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width:          1px;
  border-bottom-color:          var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-headings);
  font-weight:          600;
  vertical-align:          bottom;
  padding-inline-end:          0.5714286em;
  padding-bottom:          0.5714286em;
  padding-inline-start:          0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width:          1px;
  border-bottom-color:          var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width:          0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align:          baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width:          1px;
  border-top-color:          var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align:          top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  text-align:          start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
  margin-bottom:          0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color:          var(--tw-prose-captions);
  font-size:          0.875em;
  line-height:          1.4285714;
  margin-top:          0.8571429em;
}
.prose{
  --tw-prose-body:          #374151;
  --tw-prose-headings:          #111827;
  --tw-prose-lead:          #4b5563;
  --tw-prose-links:          #111827;
  --tw-prose-bold:          #111827;
  --tw-prose-counters:          #6b7280;
  --tw-prose-bullets:          #d1d5db;
  --tw-prose-hr:          #e5e7eb;
  --tw-prose-quotes:          #111827;
  --tw-prose-quote-borders:          #e5e7eb;
  --tw-prose-captions:          #6b7280;
  --tw-prose-kbd:          #111827;
  --tw-prose-kbd-shadows:          rgb(17 24 39 / 10%);
  --tw-prose-code:          #111827;
  --tw-prose-pre-code:          #e5e7eb;
  --tw-prose-pre-bg:          #1f2937;
  --tw-prose-th-borders:          #d1d5db;
  --tw-prose-td-borders:          #e5e7eb;
  --tw-prose-invert-body:          #d1d5db;
  --tw-prose-invert-headings:          #fff;
  --tw-prose-invert-lead:          #9ca3af;
  --tw-prose-invert-links:          #fff;
  --tw-prose-invert-bold:          #fff;
  --tw-prose-invert-counters:          #9ca3af;
  --tw-prose-invert-bullets:          #4b5563;
  --tw-prose-invert-hr:          #374151;
  --tw-prose-invert-quotes:          #f3f4f6;
  --tw-prose-invert-quote-borders:          #374151;
  --tw-prose-invert-captions:          #9ca3af;
  --tw-prose-invert-kbd:          #fff;
  --tw-prose-invert-kbd-shadows:          rgb(255 255 255 / 10%);
  --tw-prose-invert-code:          #fff;
  --tw-prose-invert-pre-code:          #d1d5db;
  --tw-prose-invert-pre-bg:          rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders:          #4b5563;
  --tw-prose-invert-td-borders:          #374151;
  font-size:          1rem;
  line-height:          1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
  margin-bottom:          0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.5em;
  margin-bottom:          0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.75em;
  margin-bottom:          0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom:          1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom:          1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.75em;
  margin-bottom:          0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.25em;
  margin-bottom:          1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.5em;
  padding-inline-start:          1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end:          0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top:          0.5714286em;
  padding-inline-end:          0.5714286em;
  padding-bottom:          0.5714286em;
  padding-inline-start:          0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end:          0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          2em;
  margin-bottom:          2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom:          0;
}
.prose-lg{
  font-size:          1.125rem;
  line-height:          1.7777778;
}
.prose-lg :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.3333333em;
  margin-bottom:          1.3333333em;
}
.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          1.2222222em;
  line-height:          1.4545455;
  margin-top:          1.0909091em;
  margin-bottom:          1.0909091em;
}
.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.6666667em;
  margin-bottom:          1.6666667em;
  padding-inline-start:          1em;
}
.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          2.6666667em;
  margin-top:          0;
  margin-bottom:          0.8333333em;
  line-height:          1;
}
.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          1.6666667em;
  margin-top:          1.8666667em;
  margin-bottom:          1.0666667em;
  line-height:          1.3333333;
}
.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          1.3333333em;
  margin-top:          1.6666667em;
  margin-bottom:          0.6666667em;
  line-height:          1.5;
}
.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.7777778em;
  margin-bottom:          0.4444444em;
  line-height:          1.5555556;
}
.prose-lg :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.7777778em;
  margin-bottom:          1.7777778em;
}
.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.7777778em;
  margin-bottom:          1.7777778em;
}
.prose-lg :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
  margin-bottom:          0;
}
.prose-lg :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.7777778em;
  margin-bottom:          1.7777778em;
}
.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          0.8888889em;
  border-radius:          0.3125rem;
  padding-top:          0.2222222em;
  padding-inline-end:          0.4444444em;
  padding-bottom:          0.2222222em;
  padding-inline-start:          0.4444444em;
}
.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          0.8888889em;
}
.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          0.8666667em;
}
.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          0.875em;
}
.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          0.8888889em;
  line-height:          1.75;
  margin-top:          2em;
  margin-bottom:          2em;
  border-radius:          0.375rem;
  padding-top:          1em;
  padding-inline-end:          1.5em;
  padding-bottom:          1em;
  padding-inline-start:          1.5em;
}
.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.3333333em;
  margin-bottom:          1.3333333em;
  padding-inline-start:          1.5555556em;
}
.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.3333333em;
  margin-bottom:          1.3333333em;
  padding-inline-start:          1.5555556em;
}
.prose-lg :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.6666667em;
  margin-bottom:          0.6666667em;
}
.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0.4444444em;
}
.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0.4444444em;
}
.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.8888889em;
  margin-bottom:          0.8888889em;
}
.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.3333333em;
}
.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom:          1.3333333em;
}
.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.3333333em;
}
.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom:          1.3333333em;
}
.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.8888889em;
  margin-bottom:          0.8888889em;
}
.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.3333333em;
  margin-bottom:          1.3333333em;
}
.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.3333333em;
}
.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0.6666667em;
  padding-inline-start:          1.5555556em;
}
.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          3.1111111em;
  margin-bottom:          3.1111111em;
}
.prose-lg :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose-lg :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose-lg :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose-lg :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          0.8888889em;
  line-height:          1.5;
}
.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end:          0.75em;
  padding-bottom:          0.75em;
  padding-inline-start:          0.75em;
}
.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0;
}
.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end:          0;
}
.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top:          0.75em;
  padding-inline-end:          0.75em;
  padding-bottom:          0.75em;
  padding-inline-start:          0.75em;
}
.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start:          0;
}
.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end:          0;
}
.prose-lg :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          1.7777778em;
  margin-bottom:          1.7777778em;
}
.prose-lg :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
  margin-bottom:          0;
}
.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size:          0.8888889em;
  line-height:          1.5;
  margin-top:          1em;
}
.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top:          0;
}
.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom:          0;
}
.mx-auto{
  margin-left:          auto;
  margin-right:          auto;
}
.mb-8{
  margin-bottom:          2rem;
}
.block{
  display:          block;
}
.flex{
  display:          flex;
}
.max-w-3xl{
  max-width:          48rem;
}
.max-w-none{
  max-width:          none;
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:          0;
  margin-top:          calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:          calc(1rem * var(--tw-space-y-reverse));
}
.px-6{
  padding-left:          1.5rem;
  padding-right:          1.5rem;
}
.py-16{
  padding-top:          4rem;
  padding-bottom:          4rem;
}
.text-4xl{
  font-size:          2.25rem;
  line-height:          2.5rem;
}
.text-lg{
  font-size:          1.125rem;
  line-height:          1.75rem;
}
.font-bold{
  font-weight:          700;
}
.uppercase{
  text-transform:          uppercase;
}
.italic{
  font-style:          italic;
}
.text-indigo-600{
  --tw-text-opacity:          1;
  color:          rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line:          underline;
}

/* =========================================================================
   Tavela marketing — scoped under tv-* classes.
   Ported from the Tavela Design System bundle (ui_kits/marketing/).
   ========================================================================= */

html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--font-sans); }

.tv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* ---------------- Nav ---------------- */
.tv-nav {
  max-width: 1200px; margin: 0 auto; padding: 20px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.tv-nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
.tv-nav__links { display: flex; gap: 28px; }
.tv-nav__links a { color: var(--fg-soft); text-decoration: none; font-size: 14px; font-weight: 500; }
.tv-nav__links a:hover { color: var(--ink); }
.tv-nav__actions { display: flex; align-items: center; gap: 14px; }
.tv-link-muted { color: var(--fg-soft); font-size: 14px; font-weight: 500; text-decoration: none; }
.tv-link-muted:hover { color: var(--ink); }

/* Sticky header variant — used on scrolled pages */
.tv-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 239, 227, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* ---------------- Buttons ---------------- */
.tv-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: 6px; border: 1px solid transparent; text-decoration: none;
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.tv-btn--primary { background: var(--moss); color: #fff; }
.tv-btn--primary:hover { background: var(--moss-deep); color: #fff; }
.tv-btn--secondary { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.tv-btn--secondary:hover { background: var(--paper-deep); color: var(--ink); }
.tv-btn--ghost { background: transparent; color: var(--ink); }
.tv-btn--ghost:hover { background: var(--paper-deep); color: var(--ink); }
.tv-btn--lg { padding: 12px 22px; font-size: 15px; border-radius: 8px; }

/* ---------------- Hero ---------------- */
.tv-hero {
  max-width: 1200px; margin: 0 auto; padding: 48px 48px 80px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center;
}
.tv-eyebrow {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-mute); display: inline-block; margin-bottom: 16px;
}
.tv-display {
  font-family: var(--font-serif); font-size: 68px; font-weight: 500;
  line-height: 1.02; letter-spacing: -0.022em; color: var(--ink);
  margin: 0 0 20px; font-variation-settings: "opsz" 72; text-wrap: pretty;
}
.tv-display em { font-style: italic; color: var(--fern); font-weight: 500; }
.tv-lede {
  font-family: var(--font-serif); font-size: 20px; line-height: 1.45;
  color: var(--fg-soft); margin: 0 0 28px; max-width: 520px; font-weight: 400;
}
.tv-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.tv-hero__footnote { margin-top: 16px; font-size: 13px; color: var(--fg-mute); }
.tv-hero__art { display: flex; justify-content: center; align-items: center; }
.tv-hero__blob { width: 100%; max-width: 380px; }

/* ---------------- Sections ---------------- */
.tv-section { max-width: 1200px; margin: 0 auto; padding: 80px 48px; }
.tv-section__head { margin-bottom: 48px; max-width: 720px; }
.tv-section__head--center { text-align: center; margin-left: auto; margin-right: auto; }
.tv-h1 {
  font-family: var(--font-serif); font-size: 44px; line-height: 1.08;
  letter-spacing: -0.018em; color: var(--ink); font-weight: 500; margin: 0;
}
.tv-h1 em { font-style: italic; color: var(--fern); font-weight: 500; }
.tv-h2 {
  font-family: var(--font-serif); font-size: 32px; line-height: 1.12;
  letter-spacing: -0.015em; color: var(--ink); font-weight: 500; margin: 0;
}
.tv-h2 em { font-style: italic; color: var(--fern); font-weight: 500; }
.tv-section__sub {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.5;
  color: var(--fg-soft); margin: 12px 0 0; max-width: 640px; font-weight: 400;
}
.tv-section__head--center .tv-section__sub { margin-left: auto; margin-right: auto; }

/* ---------------- Wash band ---------------- */
.tv-wash { width: 100%; }
.tv-wash--sage,
.tv-wash--moss { background: var(--moss-wash); }
.tv-wash--buttercream { background: var(--buttercream-wash); }
.tv-wash--clay { background: var(--clay-wash); }
.tv-wash .tv-section { padding-top: 80px; padding-bottom: 80px; }
.tv-two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.tv-pedagogy-list { display: flex; flex-direction: column; gap: 20px; }
.tv-ped { border-top: 1px solid rgba(42, 37, 33, 0.15); padding-top: 16px; }
.tv-ped__key {
  font-family: var(--font-serif); font-size: 22px; font-style: italic;
  color: var(--ink); font-weight: 500; margin-bottom: 4px;
}
.tv-ped__val { font-size: 15px; color: var(--fg-soft); line-height: 1.5; }

/* ---------------- Split feature blocks ---------------- */
.tv-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; margin-bottom: 96px;
}
.tv-split:last-child { margin-bottom: 0; }
.tv-split--reverse > :first-child { order: 2; }
.tv-split__copy .tv-chip { margin-bottom: 16px; }
.tv-split__copy h3 {
  font-family: var(--font-serif); font-size: 30px; line-height: 1.15;
  letter-spacing: -0.015em; font-weight: 500; color: var(--ink); margin: 0 0 14px;
}
.tv-split__copy h3 em { font-style: italic; color: var(--fern); }
.tv-split__copy p { font-size: 16px; line-height: 1.55; color: var(--fg-soft); margin: 0 0 18px; }
.tv-split__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tv-split__list li {
  font-size: 14px; color: var(--fg); padding-left: 22px; position: relative;
}
.tv-split__list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 6px;
  border-left: 1.5px solid var(--moss); border-bottom: 1.5px solid var(--moss);
  transform: rotate(-50deg);
}

.tv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 6px 12px; border-radius: 999px;
}
.tv-chip--moss { background: var(--moss-wash); color: var(--moss-deep); }
.tv-chip--clay { background: var(--clay-wash); color: var(--clay-deep); }
.tv-chip--buttercream { background: var(--buttercream-wash); color: var(--buttercream-deep); }
.tv-chip--dusk { background: var(--dusk-wash); color: var(--dusk-deep); }

.tv-split__panel {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 32px;
  min-height: 260px; display: flex; align-items: center; justify-content: center;
}
.tv-split__panel img { max-width: 70%; max-height: 220px; }
.tv-split__panel--ink { background: var(--ink); border-color: var(--ink); }
.tv-split__panel--ink img { filter: brightness(0) invert(1) opacity(0.85); }

/* ---------------- Grove — tabela metaphor (canopy cards + central illustration + roots) ---------------- */
.tv-grove-section {
  background: linear-gradient(to bottom, var(--sky-wash) 0%, #FFFFFF 70%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tv-grove { max-width: 1100px; margin: 0 auto; padding: 72px 48px 96px; }
.tv-grove__head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.tv-grove__head .tv-section__sub { margin-left: auto; margin-right: auto; }

/* Per-card illustration slots — placeholder dashed boxes that get swapped for drawings.
   On canopy cards the illo lives inside the <details> body (hidden until click);
   on root cards the illo sits at the top (always visible). */
.tv-leaf-card__illo, .tv-root-card__illo {
  width: 100%;
  aspect-ratio: 5 / 3;
  min-height: 0;
  padding: 6px;
}
.tv-leaf-card__illo { margin: 10px 0 0; }
.tv-leaf-card__illo img, .tv-root-card__illo img {
  width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block;
}

/* Stage holds canopy + illustration + roots. Aspect ratio matches tree.png so the
   full-width image fits exactly; flex + space-between anchors canopy cards at the
   top (over the foliage) and root cards at the bottom (over the roots). */
.tv-grove__stage {
  position: relative;
  aspect-ratio: 3500 / 4500;
  display: flex; flex-direction: column; justify-content: space-between;
  /* Top padding drops the canopy cards onto the foliage rather than sitting at the
     very top edge. Tune this % to match where the canopy sits in tree.png. */
  padding: calc(12% + 40px) 0 64px;
}

.tv-grove__canopy {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  align-items: start;
}
/* Stagger cards so they hang from the canopy like fruit at different heights. */
.tv-grove__canopy > :nth-child(1) { transform: translateY(0); }
.tv-grove__canopy > :nth-child(2) { transform: translateY(64px); }
.tv-grove__canopy > :nth-child(3) { transform: translateY(20px); }
.tv-grove__canopy > :nth-child(4) { transform: translateY(48px); }
.tv-leaf-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tv-leaf-card:hover { box-shadow: 0 6px 16px rgba(42, 37, 33, 0.12); border-color: var(--moss-soft); }

.tv-leaf-card__head {
  display: flex; flex-direction: column; gap: 4px;
}

.tv-leaf-card__tag {
  font-family: var(--font-sans); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 600; color: var(--moss-deep);
}
.tv-leaf-card h3 {
  font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.2;
}
.tv-leaf-card > p {
  font-size: 14px; line-height: 1.5; color: var(--fg-soft); margin: 10px 0 0;
}

/* Full-bleed tree backdrop — single image centered inside .tv-grove__stage.
   Feature cards sit over the canopy (z-index: 1); outcome cards sit over the roots. */
.tv-grove__tree-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}
.tv-grove__tree-img {
  display: block;
  width: 100%; height: auto;
}

.tv-grove__roots {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 0;
  align-items: end;
}
/* Mirror the stagger on the roots — different depths, like the root system fanning at varying lengths. */
.tv-grove__roots > :nth-child(1) { transform: translateY(18px); }
.tv-grove__roots > :nth-child(2) { transform: translateY(0); }
.tv-grove__roots > :nth-child(3) { transform: translateY(24px); }
.tv-grove__roots > :nth-child(4) { transform: translateY(8px); }
.tv-root-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 16px 20px; box-shadow: var(--shadow-sm);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tv-root-card__growth {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--moss-wash); color: var(--moss-deep);
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
}
.tv-root-card p {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.35;
  color: var(--ink); margin: 0;
}
.tv-root-card p em { font-style: italic; color: var(--fern); font-weight: 500; }

@media (max-width: 900px) {
  .tv-grove { padding: 48px 20px 64px; }
  .tv-grove__stage { padding: 32px 0 48px; }
  .tv-grove__canopy { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tv-grove__canopy > :nth-child(2) { transform: translateY(28px); }
  .tv-grove__canopy > :nth-child(3) { transform: translateY(8px); }
  .tv-grove__canopy > :nth-child(4) { transform: translateY(22px); }
  .tv-grove__roots { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tv-leaf-card h3 { font-size: 17px; }
  .tv-root-card p { font-size: 15px; }
}

@media (max-width: 560px) {
  .tv-grove__canopy, .tv-grove__roots { grid-template-columns: 1fr; gap: 18px; }
  .tv-grove__canopy { margin-bottom: 40px; }
  /* In a single column, the stagger reads as uneven spacing — flatten it.
     :nth-child selectors here match the specificity of the stagger rules above. */
  .tv-grove__canopy > :nth-child(n),
  .tv-grove__roots > :nth-child(n) { transform: none; }

  /* Hide the tree on mobile — cards stack cleanly without the backdrop. */
  .tv-grove__stage { aspect-ratio: auto; }
  .tv-grove__tree-wrap { display: none; }
}

/* ---------------- Placeholders (swap these out for real visuals) ---------------- */
.tv-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 10px;
  background: var(--paper-soft);
  border: 1.5px dashed rgba(42, 37, 33, 0.25);
  border-radius: 12px;
  color: var(--fg-mute);
  padding: 32px 24px;
  min-height: 100%;
  width: 100%;
}
.tv-placeholder__label {
  font-family: var(--font-serif); font-size: 18px; font-style: italic;
  color: var(--fg-soft); line-height: 1.3;
}
.tv-placeholder__hint {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-mute);
}
.tv-placeholder--hero { min-height: 380px; padding: 48px 32px; }
.tv-placeholder--icon { min-height: 104px; padding: 16px 12px; gap: 4px; }
.tv-placeholder--icon .tv-placeholder__label { font-size: 13px; font-style: normal; }
.tv-placeholder--ink {
  background: var(--ink);
  border-color: rgba(244, 239, 227, 0.25);
}
.tv-placeholder--ink .tv-placeholder__label { color: rgba(244, 239, 227, 0.78); }
.tv-placeholder--ink .tv-placeholder__hint { color: rgba(244, 239, 227, 0.55); }

/* ---------------- Steps ---------------- */
.tv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.tv-step__num {
  font-family: var(--font-serif); font-size: 44px; font-weight: 500;
  color: var(--moss); line-height: 1; margin-bottom: 12px; font-variation-settings: "opsz" 72;
}
.tv-step h3 {
  font-family: var(--font-serif); font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 6px;
}
.tv-step p { font-size: 14px; line-height: 1.55; color: var(--fg-soft); margin: 0; }

/* ---------------- Pricing ---------------- */
.tv-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.tv-price {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm);
}
.tv-price--accent { background: var(--paper); border: 1.5px solid var(--ink); box-shadow: var(--shadow-md); position: relative; }
.tv-price__flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 4px 12px; border-radius: 999px;
}
.tv-price__name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.tv-price__row { display: flex; align-items: baseline; gap: 6px; }
.tv-price__amount { font-family: var(--font-serif); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.tv-price__unit { color: var(--fg-mute); font-size: 14px; }
.tv-price__blurb { font-size: 14px; color: var(--fg-soft); margin-bottom: 4px; }
.tv-price__list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.tv-price__list li { font-size: 14px; color: var(--fg); padding-left: 22px; position: relative; }
.tv-price__list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 6px;
  border-left: 1.5px solid var(--moss); border-bottom: 1.5px solid var(--moss); transform: rotate(-50deg);
}

.tv-pricing-note { text-align: center; font-size: 13px; color: var(--fg-mute); margin-top: 32px; }

/* ---------------- Big quote ---------------- */
.tv-bigquote { margin: 0 auto; max-width: 820px; text-align: center; }
.tv-bigquote p {
  font-family: var(--font-serif); font-size: 32px; line-height: 1.25; font-style: italic;
  color: var(--ink); margin: 0 0 20px; font-weight: 400; font-variation-settings: "opsz" 36;
}
.tv-bigquote footer { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.tv-bigquote__name { color: var(--ink); font-weight: 600; }
.tv-bigquote__role { color: var(--fg-mute); }

/* ---------------- Final CTA band ---------------- */
.tv-cta-band {
  max-width: 720px; margin: 0 auto; padding: 80px 48px; text-align: center;
}
.tv-cta-band__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px;
}

/* ---------------- Footer ---------------- */
.tv-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.tv-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 48px;
  display: grid; grid-template-columns: 1fr 2fr; gap: 56px;
}
.tv-footer__brand p { font-family: var(--font-serif); font-style: italic; color: var(--fg-mute); margin: 8px 0 0; }
.tv-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tv-footer__cols h6 {
  font-family: var(--font-sans); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--fg-mute); font-weight: 600; margin: 0 0 10px;
}
.tv-footer__cols a { display: block; color: var(--fg); text-decoration: none; font-size: 14px; padding: 4px 0; }
.tv-footer__cols a:hover { color: var(--fern); }
.tv-footer__strip {
  text-align: center; font-size: 12px; color: var(--fg-mute);
  padding: 20px 0 28px; border-top: 1px solid var(--border);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .tv-nav { padding: 16px 24px; gap: 16px; flex-wrap: wrap; }
  .tv-nav__links { display: none; }
  .tv-hero {
    padding: 32px 24px 48px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tv-display { font-size: 44px; }
  .tv-lede { font-size: 18px; }
  .tv-hero__art { order: -1; }
  .tv-hero__blob { max-width: 240px; }

  .tv-section { padding: 56px 24px; }
  .tv-h1 { font-size: 32px; }
  .tv-h2 { font-size: 26px; }

  .tv-two-col { grid-template-columns: 1fr; gap: 24px; }
  .tv-split { grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; }
  /* Always show copy above screenshot on mobile, regardless of desktop alternation. */
  .tv-split__copy { order: 1; }
  .tv-split__panel { order: 2; }
  .tv-split__copy h3 { font-size: 24px; }

  .tv-steps { grid-template-columns: 1fr 1fr; gap: 24px; }
  .tv-price-grid { grid-template-columns: 1fr; }

  .tv-bigquote p { font-size: 24px; }

  .tv-cta-band { padding: 56px 24px; }

  .tv-footer__inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
  .tv-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .tv-steps { grid-template-columns: 1fr; }
  .tv-footer__cols { grid-template-columns: 1fr; gap: 20px; }
}

.hover\:underline:hover{
  text-decoration-line:          underline;
}