/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC PAGES: the landing page's visual language, shared.

   The public site pages (classes, parents, why, Cog+, tutors, pricing, help,
   privacy, about, contact, terms) are built from the same primitives as the
   landing page, under the same class names, so their markup reads the same:
   mk-* type and actions, .ch chapters, .leaf paper, .settle / .unfold / ink
   motion, .zone decision band, .faq__* rows, .plans / .tier pricing, letter
   and email anatomy. Added here because those pages need them and the
   landing does not: data tables, a long-form reading layout with a sticky
   contents column, landing-scale form fields and messages, and definition
   rows.

   Loaded only by public pages (partials/public_page_head.html, from a page's
   extra_head), after the site sheets. That order matters: equal-specificity
   ties go to this sheet. The ground texture and the page-fade switch-off
   below therefore reach only the pages that load it.

   Rules of the family (DESIGN.md plus the landing's owner-approved
   marketing extension):
     · one idea per chapter, stated by a headline, proven by one object;
     · weight is the hierarchy: a solid (700) statement, then an air (300)
       completion (.mk-air). No caps chapter labels, no italics;
     · paper (.leaf) on the ground, hairlines for structure, exactly one
       raised object (.is-raised) per chapter;
     · one filled button per view (.mk-btn), everything else a text link;
     · teal is the tutor acting on the learner's work, nothing else;
     · no gradients beyond the ground, no glass, no side stripes;
     · hidden start states exist only under html.js-motion (added by
       js/public-pages.js), so no-script and reduced-motion visitors get the
       finished page; nothing loops.
   Every colour is a --cls-* token, so dark mode mostly follows by itself.
   Where a value must change in dark it is written twice, for the
   prefers-color-scheme fallback and for the explicit .dark class.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================ tokens ============================ */
:root{
  /* the ground: the landing's stronger texture (two washes and a weave) */
  --cls-ground-image:
    radial-gradient(1120px 640px at 80% -14%, rgba(43,140,238,.075), transparent 62%),
    radial-gradient(840px 540px at 2% 106%, rgba(122,105,78,.09), transparent 66%),
    repeating-linear-gradient(45deg, rgba(74,62,44,.032) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(74,62,44,.024) 0 1px, transparent 1px 5px);

  /* display tier: fluid 390 -> 1440 viewport, authored end points */
  --mk-d0:clamp(44px, calc(4.952vw + 24.69px), 96px);   /* reserved: see .mk-fit-h   */
  /* page title and chapter statement. Below a 472px screen it follows the screen (9vw, never
     under 32px, the chapter headline's floor), so a long title keeps its words whole on a phone
     and no statement outgrows the title */
  --mk-d1:clamp(32px, min(9vw, calc(3.048vw + 28.11px)), 72px);
  --mk-d2:clamp(32px, calc(2.286vw + 23.09px), 56px);   /* chapter headline          */
  --mk-d3:clamp(28px, calc(1.143vw + 23.54px), 40px);   /* section head, price       */
  --mk-d4:clamp(22px, calc(.571vw + 19.77px), 28px);    /* object headline, pull quote */
  --mk-copy:clamp(17px, calc(.19vw + 16.26px), 19px);   /* running copy and eyebrows */
  --mk-track-d0:-.045em; --mk-track-d1:-.04em; --mk-track-d2:-.035em; --mk-track-d3:-.03em; --mk-track-d4:-.02em;
  --mk-w-solid:700; --mk-w-air:300; --mk-w-hair:200;    /* weight is the hierarchy */

  /* rhythm */
  --mk-max:1260px;
  --mk-gutter:max(20px, 6.25vw);
  --mk-section:clamp(88px, calc(6vw + 64px), 144px);
  --mk-chrome:var(--tutix-chrome-top, 64px);            /* the bar above the page: sticky offsets and anchor landings */
  --mk-sticky-gap:48px;
  --mk-measure:62ch;                                    /* long reading: documents, bios, answers, row text */

  /* motion, wired to the values the landing actually plays */
  --mk-ease:cubic-bezier(.45,0,.55,1);                  /* timed entrances, in-out  */
  --mk-ease-rise:cubic-bezier(.22,.61,.36,1);           /* long rises, no overshoot */
  --mk-dur-fade:700ms;                                  /* a settling paper's fade  */
  --mk-dur-rise:900ms;                                  /* a settling paper's fall  */
  --mk-dur-unfold:1100ms;                               /* a letter picked up       */
  --mk-dur-ink:1200ms;                                  /* one ink stroke, drawn once */
  --mk-dur-ink-fade:600ms;                              /* the tutor's words after the stroke */
  --mk-stagger:120ms;                                   /* between papers in a [data-stagger] group */
  --mk-rise:40px;                                       /* how far a paper falls as it settles */

  /* one extra radius, ONLY for large product frames >= 560px wide */
  --mk-r-media:24px;

  /* the landing's page-tier names, kept so ported markup reads the same */
  --c-pad:clamp(20px, 2.2vw, 30px);                     /* leaf padding */
  --c-eyebrow-gap:12px;                                 /* eyebrow to headline */
  --c-ink-w:2.4;                                        /* tutor ink stroke, user units */
  --c-settle:var(--mk-dur-rise);
  --c-drop:var(--mk-rise);
  --c-tint-amber:color-mix(in srgb, var(--cls-amber) 15%, transparent);
  --c-edge-amber:color-mix(in srgb, var(--cls-amber) 45%, transparent);

  /* a form control's edge: at least 3:1 against the field and against the
     paper, ground or tray around it, in both themes (a hairline is not enough
     to find a field by). Measured 3.4-3.6:1 light, 3.4-3.7:1 dark. Hover
     steps up to ink-4; focus is the blue-deep edge plus the ring. */
  --mk-field-edge:color-mix(in srgb, var(--cls-ink-4) 70%, var(--cls-line-2));
}
@media (prefers-color-scheme:dark){
  :root:not([class~="cls-light"]){
    --cls-ground-image:
      radial-gradient(1120px 640px at 80% -14%, rgba(43,140,238,.083), transparent 62%),
      radial-gradient(840px 540px at 2% 106%, rgba(214,178,120,.065), transparent 66%),
      repeating-linear-gradient(45deg, rgba(255,246,234,.020) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(-45deg, rgba(255,246,234,.016) 0 1px, transparent 1px 5px);
  }
}
:root[class~="dark"]{
  --cls-ground-image:
    radial-gradient(1120px 640px at 80% -14%, rgba(43,140,238,.083), transparent 62%),
    radial-gradient(840px 540px at 2% 106%, rgba(214,178,120,.065), transparent 66%),
    repeating-linear-gradient(45deg, rgba(255,246,234,.020) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255,246,234,.016) 0 1px, transparent 1px 5px);
}
@media (max-width:767px){:root{--mk-rise:0px}}

/* ============================ base ============================ */
/* the page keeps the bar's height plus a margin clear whenever it scrolls
   something into view: an anchor jump, and keyboard focus in either
   direction (Shift+Tab back up the page lands below the bar, not under it) */
html{scroll-behavior:auto;scroll-padding-top:calc(var(--mk-chrome) + 24px)}
body{background-color:var(--cls-ground);background-image:var(--cls-ground-image);background-attachment:fixed}
/* the headline paints at once: no page-wide fade */
#main-content.fade-in{animation:none}
.lp{color:var(--cls-ink);font-family:var(--cls-font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* the site's base reset (h1-h6 {font-size:inherit;font-weight:inherit}) outranks this zero-specificity
   reset, so a heading only gets its size and weight from a class: .mk-d0-.mk-d4, or a component rule */
:where(.lp) :where(h1,h2,h3,h4,h5,h6){margin:0;font-style:normal;font-weight:var(--mk-w-solid);text-wrap:balance;overflow-wrap:anywhere;min-width:0}
:where(.lp) :where(p){margin:0;text-wrap:pretty}
:where(.lp) :where(blockquote,figure,dl,dd){margin:0}
:where(.lp) :where(img,svg){max-width:100%}
:where(.lp) :where(button){font:inherit;color:inherit}
:where(.lp) :where(a,button,[tabindex],input,select,textarea,summary):focus{outline:none}
:where(.lp) :where(a,button,[tabindex],input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--cls-focus);transition:none;border-radius:var(--cls-r-xs)}
/* anchor targets need no margin of their own: the root's scroll-padding above
   already lands them 24px below the bar. A scroll-margin-top on a target adds
   to that (use it only to land somewhere other than the bar + 24px). */
/* a chapter reached by a link lands on its first line, not on its empty top padding */
.lp .ch[id]:not(.ch--coda){scroll-margin-top:calc(-1 * var(--mk-section))}

/* ============================ layout ============================ */
.mk-shell{width:100%;max-width:calc(var(--mk-max) + 2 * var(--mk-gutter));margin-inline:auto;padding-inline:var(--mk-gutter)}
.ch{position:relative;padding-block:var(--mk-section)}
.ch--coda{padding-top:0}                              /* a follow-on that reads as part of the chapter before it */
.hero{padding-block:clamp(40px, 6vw, 96px) var(--mk-section)}
/* the decision band: everything after the story (offer, questions, close) on one tray */
.zone{background:var(--cls-tray);border-top:1px solid var(--cls-line)}
.mk-head{max-width:760px}
.mk-head--wide{max-width:860px}
.lk-copy{margin-top:22px}
.mk-eyebrow + :is(h1,h2,h3){margin-top:var(--c-eyebrow-gap)}
.mk-cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* two-column chapters. Ratios are the landing's: 5:6 type:object (object
   dominant), 6:5 object:type, 4:7 and 4:8 a label column beside long content.
   All stack at 899px, type above object (.mk-type). The words always come
   first in reading order: a reversed split keeps .mk-type first and draws its
   object on the left from 900px up. */
.mk-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px, 4vw, 56px);align-items:center}
.mk-split--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px, 6vw, 104px)}
@media (min-width:900px){ .mk-split--rev > .mk-type{order:1} }
.mk-split--start{align-items:start}
.mk-aside{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px, 6vw, 104px);align-items:start}
.mk-aside--wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px clamp(40px, 6vw, 104px)}
.mk-sticky{position:sticky;top:calc(var(--mk-chrome) + var(--mk-sticky-gap))}
/* a split head row: headline left, copy right, bottom-aligned */
.mk-headrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.mk-headrow > :last-child{justify-self:end}
/* a masthead: the lede (with its actions) sits low on the right and ends on the shell's right
   edge, as wide as it needs up to 480px but never more than half the row; the title takes the rest */
.mk-headrow--mast{grid-template-columns:minmax(0,1fr) fit-content(min(480px, calc(50% - 32px)))}
/* the offer: headline left, the offer low on the right, a full-width row beneath */
.mk-offer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);grid-template-areas:"h s" "p p";gap:32px clamp(32px, 4vw, 56px);align-items:start}
.mk-offer__head{grid-area:h;padding-top:clamp(0px, 2vw, 24px)}
.mk-offer__side{grid-area:s;align-self:end;padding-bottom:clamp(0px, 2vw, 24px)}
.mk-offer__body{grid-area:p;min-width:0}
/* the close: centred, the one CTA of the band, set off from what precedes it by a hairline */
.close{padding-top:clamp(40px, 5vw, 72px)}
.close__wrap{display:grid;justify-items:center;text-align:center;padding-top:var(--mk-section);border-top:1px solid var(--cls-line-2)}
.close__wrap--bare{padding-top:0;border-top:0}
.close__type{display:grid;justify-items:center}
.close__type:not(:first-child){margin-top:clamp(40px, 4vw, 56px)}
.close__type .mk-copy{margin-inline:auto}
.close__cta{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px}
/* a quiet line of small facts above the close's button (they sat as pills under it) */
.close__facts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}
.close__facts li{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:500;line-height:1.4;color:var(--cls-ink-2)}
.close__facts svg{width:16px;height:16px;flex:none;color:var(--cls-ink-3)}
.close__facts + .close__cta{margin-top:26px}

/* ============================ type ============================ */
.mk-d0{font-size:var(--mk-d0);line-height:.98;letter-spacing:var(--mk-track-d0);font-weight:var(--mk-w-solid)}
.mk-d1{font-size:var(--mk-d1);line-height:1.02;letter-spacing:var(--mk-track-d1);font-weight:var(--mk-w-solid)}
.mk-d2{font-size:var(--mk-d2);line-height:1.05;letter-spacing:var(--mk-track-d2);font-weight:var(--mk-w-solid)}
.mk-d3{font-size:var(--mk-d3);line-height:1.1;letter-spacing:var(--mk-track-d3);font-weight:var(--mk-w-solid)}
.mk-d4{font-size:var(--mk-d4);line-height:1.2;letter-spacing:var(--mk-track-d4);font-weight:var(--mk-w-solid)}
.mk-air{font-weight:var(--mk-w-air)}
.mk-break{display:block}                              /* the air clause on its own line */
.mk-nb{white-space:nowrap}                            /* keeps a hyphenated pair on one line */
.mk-eyebrow{font-size:var(--mk-copy);line-height:1.3;font-weight:var(--mk-w-air);color:var(--cls-ink-3);letter-spacing:-.01em}
.mk-copy{font-size:var(--mk-copy);line-height:1.5;color:var(--cls-ink-3);max-width:40ch}
.mk-copy strong,.mk-copy b{color:var(--cls-ink);font-weight:500}
.mk-copy + .mk-copy{margin-top:.75em}
.mk-num{font-variant-numeric:tabular-nums}
.key{color:var(--cls-ink);font-weight:500}
.lbl{margin:16px 0 8px;font-size:12.5px;font-weight:500;color:var(--cls-ink-3);line-height:1.3}
.mk-meta{font-size:12.5px;line-height:1.4;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
/* The page title (h1) comes in two sizes and no others:
     · a title with no object beside it (a masthead, with or without a lede) is .mk-d1;
     · a title beside an object (a hero split, a document's summary) is .mk-fit-h inside a .mk-fit
       column: it grows with its column up to d1 and never drops below d2, the chapter headline
       size, so no chapter headline on the page is ever bigger than its title. On phones, where
       nothing sits beside it, it comes out at d1 like every other title. */
.mk-fit{container-type:inline-size;min-width:0}
.mk-fit-h{font-size:clamp(var(--mk-d2), 11cqi, var(--mk-d1));line-height:1.04;letter-spacing:var(--mk-track-d1);font-weight:var(--mk-w-solid)}
/* long reading: letters, bios, answers, documents */
.mk-read{font-size:17px;line-height:1.65;color:var(--cls-ink-2);max-width:var(--mk-measure)}
.mk-read > * + *{margin-top:1em}
.mk-read strong{color:var(--cls-ink);font-weight:600}
/* a link inside running text: always underlined (colour alone does not mark it) */
.mk-a{color:var(--cls-blue-deep);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);transition:text-decoration-color var(--cls-dur-fast) var(--cls-ease-out)}
.mk-a:hover{text-decoration-color:currentColor}
/* a link inside a sentence can wrap: its keyboard ring is an outline, which closes around
   each line's piece, where the shared box-shadow ring is sliced open at the break. Same
   look (a 2px gap, then 2px of blue-deep). Not box-decoration-break:clone: that re-wraps
   the whole paragraph around the link. */
.lp :is(.mk-a,.mk-prose a):focus-visible{box-shadow:none;outline:2px solid var(--cls-blue-deep);outline-offset:2px}

/* ============================ actions ============================ */
/* Porcelain buttons: fill brighter on hover, recess on press, never a transform.
   White on blue is the owner's choice for every public primary button. */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--cls-pill);
  background:var(--cls-blue);border:1px solid var(--cls-blue-deep);color:var(--cls-on-lead);font-size:15.5px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:var(--cls-lit-on);transition:background-color var(--cls-dur-fast) var(--cls-ease-out)}
.mk-btn:hover{background:var(--cls-blue-hover)}
.mk-btn:active{box-shadow:var(--cls-recess)}
.mk-btn svg{width:16px;height:16px;flex:none}
.mk-btn--sm{min-height:36px;padding:0 14px;font-size:13px}
@media (pointer:coarse){.mk-btn--sm{min-height:44px}}
.mk-btn--block{width:100%}
.mk-btn.mk-btn--ghost{background:var(--cls-leaf);border-color:var(--cls-line-2);color:var(--cls-ink);box-shadow:none}
.mk-btn.mk-btn--ghost:hover{background:var(--cls-tray);border-color:var(--cls-line-hover)}
.mk-btn:disabled,.mk-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.mk-link{display:inline-flex;align-items:center;gap:6px;color:var(--cls-blue-deep);font-size:15.5px;font-weight:500;text-decoration:none;white-space:nowrap;min-height:44px}
.mk-link span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--cls-dur-fast) var(--cls-ease-out)}
.mk-link:hover span{text-decoration-color:currentColor}
.mk-link svg{width:14px;height:14px;flex:none}
.mk-link svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chev{width:14px;height:14px;flex:none}

/* ============================ surfaces ============================ */
/* paper: every object the product produces. One raised paper per chapter. */
.leaf{position:relative;background:var(--cls-leaf);border:1px solid var(--cls-line);border-radius:var(--cls-r);padding:var(--c-pad);
  color:var(--cls-ink-2);font-size:15.5px;line-height:1.6;min-width:0}
.leaf.is-raised{box-shadow:var(--cls-raise),var(--cls-lit)}
.leaf > p + p{margin-top:10px}
/* dark: the hairline all but vanishes on paper (1.07:1), so everything inside a
   paper (its rows, rules and grids) draws its hairlines one step stronger. Set
   on the paper's children, so the paper's own edge keeps the quiet line. */
@media (prefers-color-scheme:dark){ :root:not([class~="cls-light"]) .lp .leaf > *{--cls-line:var(--cls-line-2)} }
:root[class~="dark"] .lp .leaf > *{--cls-line:var(--cls-line-2)}
/* a large product frame (>= 560px wide only) */
.leaf--frame{border-radius:var(--mk-r-media);padding:clamp(22px, 3vw, 44px)}
/* a sunk desk that papers sit on */
.mk-desk{position:relative;background:var(--cls-sunk);border:1px solid var(--cls-line);border-radius:var(--mk-r-media);padding:clamp(24px, 4vw, 56px)}
/* a desk with its words in a column beside the papers (5:7, top-aligned), stacked under 960px
   like the landing's week desk: <div class="mk-desk mk-desk--split"><div>words</div><div>papers</div></div> */
.mk-desk--split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 4vw, 64px);align-items:start}
.mk-desk--split > *{min-width:0}
/* the product's quiet icon square: leaf, a line-2 edge, lit, an ink-3 glyph. 32px; 44px with --lg */
.mk-sq{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--cls-r-sm);
  background:var(--cls-leaf);border:1px solid var(--cls-line-2);box-shadow:var(--cls-lit);color:var(--cls-ink-3)}
.mk-sq svg{width:16px;height:16px}
.mk-sq--lg{width:44px;height:44px;border-radius:12px}
.mk-sq--lg svg{width:22px;height:22px}
/* an inset field inside a paper: an answer box, an option, a plan */
.mk-inset{background:var(--cls-panel);border:1px solid var(--cls-line-2);border-radius:var(--cls-r-sm);padding:16px 18px}
/* a paper's sender row, one anatomy for every email and notice the product sends: a 32px
   avatar or logo, the sender in ink, an optional second line (address, subject) in ink-3.
     <header class="lh"><img class="lh__av" …><span class="lh__name">Sage · Class summary</span></header>
     <div class="lh"><img class="lh__av" …><p class="lh__who"><span class="lh__name">Tutix</span><span class="lh__meta">To …</span></p></div> */
.lh{display:flex;align-items:center;gap:12px;min-width:0}
.lh__av{width:32px;height:32px;flex:none;border-radius:10px;display:block}
.lh__who{display:grid;min-width:0;gap:2px}
.lh__name{min-width:0;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--cls-ink);line-height:1.3}
.lh__meta{font-size:12.5px;color:var(--cls-ink-3);line-height:1.35;font-variant-numeric:tabular-nums}
/* status: a state word, never a sentence; the dot or the edge carries it with the word */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.st--covered{color:var(--cls-green-ink)}
.st--covered::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cls-green);flex:none}
.st--carried{color:var(--cls-amber-ink);background:var(--c-tint-amber);border:1px solid var(--c-edge-amber);border-radius:var(--cls-pill);padding:3px 10px}
.st--info{color:var(--cls-blue-deep)}
.st--info::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cls-blue);flex:none}
/* short labels on a pill: a tag (neutral) and a chip (a topic, in the blue tint) */
.mk-tag{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--cls-pill);background:var(--cls-tray);border:1px solid var(--cls-line);
  font-size:12.5px;font-weight:600;line-height:1;color:var(--cls-ink-2);white-space:nowrap}
.mk-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mk-chips > li,.mk-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:5px 12px;border-radius:var(--cls-pill);
  background:color-mix(in srgb, var(--cls-blue) 12%, var(--cls-leaf));font-size:14px;font-weight:600;line-height:1.3;color:var(--cls-blue-deep)}
.mk-chips svg,.mk-chip svg{width:16px;height:16px;flex:none}
.signoff{margin-top:14px;display:flex;align-items:flex-end;gap:12px;color:var(--cls-ink-3);font-size:12.5px}
.sig{display:block;flex:none;overflow:visible;max-width:100%;height:auto}
.sig .ink{stroke-width:2}

/* ============================ lists ============================ */
/* ruled rows at the landing's 4:8: a short title (an icon may lead it) beside its paragraph,
   on hairlines, under a head that runs across the shell. Principles, reasons, choices.
     <ul class="mk-rows"><li><h3>{{ icon }}<span>Title</span></h3><p>…</p></li></ul>
   The body can be a <div> holding the paragraph and a small object. A title inside a <span>
   wraps at 8.5em on wide screens, so a set of long titles reads as a set of two-line titles
   (leave the span out when the titles are short). */
.mk-rows{list-style:none;margin:clamp(40px, 5vw, 64px) 0 0;padding:0;border-top:1px solid var(--cls-line-2)}
.mk-rows > li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px clamp(40px, 6vw, 104px);align-items:start;padding:clamp(26px, 2.8vw, 36px) 0;border-bottom:1px solid var(--cls-line-2)}
.mk-rows > li > *{min-width:0}
.mk-rows h3{display:flex;align-items:flex-start;gap:16px;font-size:var(--mk-d4);font-weight:600;line-height:1.2;letter-spacing:var(--mk-track-d4);color:var(--cls-ink)}
.mk-rows h3 > svg{width:22px;height:22px;flex:none;margin-top:4px;color:var(--cls-ink-3)}
.mk-rows p{font-size:17px;line-height:1.6;color:var(--cls-ink-2);max-width:var(--mk-measure)}
/* a tick list (plan features, checklists). The tick is ink-3, not the tutor's teal. */
.mk-ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mk-ticks > li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.45;color:var(--cls-ink-2)}
.mk-ticks > li > svg:first-child{width:16px;height:16px;margin-top:3px;color:var(--cls-ink-3)}
/* numbered steps on hairlines, the number in a 30px gutter */
.mk-steps{list-style:none;margin:0;padding:0;counter-reset:mk-step}
.mk-steps > li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--cls-line);font-size:15.5px;line-height:1.5;color:var(--cls-ink)}
.mk-steps > li:last-child{border-bottom:0}
.mk-steps > li::before{counter-increment:mk-step;content:counter(mk-step);position:absolute;left:0;top:15px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
/* a ledger: marker column, item, status on the right */
.ledger{list-style:none;margin:6px 0 0;padding:0}
.ledger li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--cls-line);font-size:15.5px;color:var(--cls-ink)}
.ledger li:last-child{border-bottom:0}
.ledger .tick{margin:0;width:26px;height:22px}
.ledger__gap{display:block;width:26px;height:22px}
.ledger__r{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px;align-items:center}
.ledger__to{font-size:12.5px;color:var(--cls-ink-3)}
/* "What the tutor keeps noticing": the class page's own panel, as a ledger of what it watches,
   then the smaller things it does about them (/tutor-classes, /classes-for-parents).
     <article class="leaf is-raised mk-noticing settle" aria-labelledby="x"><p id="x" class="mk-noticing__h">…</p>
       <ul class="ledger ledger--lead"><li>{{ icon 18 }}<span>…</span></li></ul>
       <ul class="ledger__more"><li>{{ icon 18 }}<span>…</span></li></ul></article> */
.mk-noticing{width:100%;max-width:600px;padding:clamp(24px, 2.8vw, 36px);--rot:-.4deg}
.mk-noticing__h{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--cls-ink-3)}
.mk-noticing__h + .ledger{margin-top:10px}
.ledger--lead li{grid-template-columns:30px minmax(0,1fr);min-height:64px;padding:14px 0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.ledger--lead li > svg,.ledger__more li > svg{width:18px;height:18px;color:var(--cls-ink-3)}
.ledger--lead:not(:last-child) li:last-child{border-bottom:1px solid var(--cls-line)}
.ledger__more{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.ledger__more li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;font-size:15.5px;line-height:1.55;color:var(--cls-ink-2)}
.ledger__more li > svg{margin-top:3px}

/* ============================ motion ============================ */
/* paper settling: the only entrance. Type is simply there. */
.settle{transform:rotate(var(--rot,0deg))}
html.js-motion .settle{opacity:0;transform:translateY(var(--c-drop)) rotate(calc(var(--rot,0deg) + var(--tilt,1.4deg)))}
html.js-motion .settle.is-in,html.js-motion .settle:focus-within{opacity:1;transform:rotate(var(--rot,0deg))}
html.js-motion .settle.is-in{transition:opacity var(--mk-dur-fade) var(--mk-ease) var(--rd,0ms),transform var(--mk-dur-rise) var(--mk-ease-rise) var(--rd,0ms)}
/* a letter picked up off the desk from its top edge */
html.js-motion .unfold{opacity:0;transform-origin:50% 0;transform:perspective(1800px) rotateX(9deg) translateY(24px)}
html.js-motion .unfold.is-in,html.js-motion .unfold:focus-within{opacity:1;transform:none}
html.js-motion .unfold.is-in{transition:opacity var(--mk-dur-fade) var(--mk-ease) var(--rd,0ms),transform var(--mk-dur-unfold) var(--mk-ease-rise) var(--rd,0ms)}
/* reduced motion: the finished state, same meaning */
@media (prefers-reduced-motion:reduce){
  .lp *,.lp *::before,.lp *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}

/* ============================ the tutor's ink ============================ */
/* teal = the tutor acting on the learner's work (a tick, a circle, a strike,
   a signature). Never a headline, a decoration, an icon or a button. */
.ink{fill:none;stroke:var(--cls-teal);stroke-width:var(--c-ink-w);stroke-linecap:round;stroke-linejoin:round}
.ink-note{color:var(--cls-teal-ink)}
.ink-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;max-width:none}
.tick{display:inline-block;width:26px;height:22px;vertical-align:-3px;margin-left:4px;overflow:visible;max-width:none}
html.js-motion .inkset .ink{stroke-dasharray:1 2;stroke-dashoffset:1.02}
html.js-motion .inkset.is-drawn .ink{animation:c-draw var(--dur,var(--mk-dur-ink)) var(--cls-ease-out) var(--delay,0ms) both}
html.js-motion .inkset .ink.ink--done{animation:none;stroke-dashoffset:0}
html.js-motion .inkset .ink-fade{opacity:0}
html.js-motion .inkset.is-drawn .ink-fade{opacity:1;transition:opacity var(--mk-dur-ink-fade) var(--mk-ease) var(--delay,0ms)}
@keyframes c-draw{from{stroke-dasharray:1 2;stroke-dashoffset:1.02}to{stroke-dasharray:1 2;stroke-dashoffset:0}}
/* struck text: a real deletion, in the tutor's ink */
del.hand{text-decoration:line-through;text-decoration-color:var(--cls-teal);text-decoration-thickness:2px}
/* each tutor's own ink, from its avatar (stroke, then text ink light / dark). Sage keeps teal.
   Set data-tutor-ink on the element that holds that tutor's marks; artwork-adjacent marks only. */
.lp [data-tutor-ink="nova"]{--cls-teal:#0a9cc0;--cls-teal-ink:#0b5f78}
.lp [data-tutor-ink="spark"]{--cls-teal:#f0781f;--cls-teal-ink:#a94508}
.lp [data-tutor-ink="atlas"]{--cls-teal:#4b8fd6;--cls-teal-ink:#245a94}
.lp [data-tutor-ink="pixel"]{--cls-teal:#a07ae3;--cls-teal-ink:#6a3eae}
.lp [data-tutor-ink="echo"]{--cls-teal:#7a82e6;--cls-teal-ink:#4247b0}
.lp [data-tutor-ink="bolt"]{--cls-teal:#d4930f;--cls-teal-ink:#855500}
@media (prefers-color-scheme:dark){
  :root:not([class~="cls-light"]) .lp [data-tutor-ink="nova"]{--cls-teal-ink:#4cc3e3}
  :root:not([class~="cls-light"]) .lp [data-tutor-ink="spark"]{--cls-teal-ink:#f6a15b}
  :root:not([class~="cls-light"]) .lp [data-tutor-ink="atlas"]{--cls-teal-ink:#86b8ec}
  :root:not([class~="cls-light"]) .lp [data-tutor-ink="pixel"]{--cls-teal-ink:#bb9cf2}
  :root:not([class~="cls-light"]) .lp [data-tutor-ink="echo"]{--cls-teal-ink:#a3a8f5}
  :root:not([class~="cls-light"]) .lp [data-tutor-ink="bolt"]{--cls-teal-ink:#e9b54a}
}
:root[class~="dark"] .lp [data-tutor-ink="nova"]{--cls-teal-ink:#4cc3e3}
:root[class~="dark"] .lp [data-tutor-ink="spark"]{--cls-teal-ink:#f6a15b}
:root[class~="dark"] .lp [data-tutor-ink="atlas"]{--cls-teal-ink:#86b8ec}
:root[class~="dark"] .lp [data-tutor-ink="pixel"]{--cls-teal-ink:#bb9cf2}
:root[class~="dark"] .lp [data-tutor-ink="echo"]{--cls-teal-ink:#a3a8f5}
:root[class~="dark"] .lp [data-tutor-ink="bolt"]{--cls-teal-ink:#e9b54a}

/* ============================ questions (FAQ rows) ============================ */
/* short replies you open one at a time: a sticky head left, hairline rows right.
   Native <details class="faq__row"><summary>Q + chevron</summary><div class="faq__a">A</div></details>,
   or, where a page script drives it, <div class="faq__row"><button class="faq__q" aria-expanded>...</button><div class="faq__a">...</div></div>. */
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px clamp(40px, 6vw, 104px);align-items:start}
.faq__head{position:sticky;top:calc(var(--mk-chrome) + var(--mk-sticky-gap))}
.faq__list{border-top:1px solid var(--cls-line-2);min-width:0}
.faq__row{border-bottom:1px solid var(--cls-line-2)}
.faq__row > summary,.faq__q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:64px;padding:12px 0;cursor:pointer;
  background:none;border:0;text-align:left;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--cls-ink)}
.faq__row > summary::-webkit-details-marker{display:none}
.faq__row > summary svg,.faq__q svg{width:16px;height:16px;flex:none;color:var(--cls-ink-3);transform:rotate(90deg);transition:transform var(--cls-dur) var(--cls-ease-out)}
.faq__row > summary svg path,.faq__q svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.faq__row[open] > summary svg,.faq__q[aria-expanded="true"] svg{transform:rotate(-90deg)}
.faq__row > summary:hover svg,.faq__q:hover svg{color:var(--cls-ink)}
.faq__a{padding:0 48px 24px 0;font-size:15.5px;line-height:1.6;color:var(--cls-ink-2);max-width:var(--mk-measure)}
.faq__a > * + *{margin-top:.75em}

/* ============================ pricing ============================ */
/* a Monthly / Yearly switch, then plans of equal height. The switch is driven by
   js/public-pages.js from data attributes (see the header there). */
.plans{min-width:0}
.plans__period{display:inline-flex;gap:2px;padding:4px;border-radius:var(--cls-pill);background:var(--cls-sunk);border:1px solid var(--cls-line-2)}
.plans__period button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border:0;border-radius:var(--cls-pill);background:transparent;
  color:var(--cls-ink-3);font-size:14px;font-weight:600;cursor:pointer;transition:background-color var(--cls-dur-fast) var(--cls-ease-out),color var(--cls-dur-fast) var(--cls-ease-out)}
.plans__period button:hover{color:var(--cls-ink)}
.plans__period button[aria-pressed="true"]{background:var(--cls-leaf);color:var(--cls-ink);box-shadow:var(--cls-raise),var(--cls-lit)}
.plans__period button[aria-pressed="true"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cls-blue);flex:none}
@media (pointer:coarse){.plans__period button{min-height:44px}}
.plans__grid{margin-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plans__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tier{display:flex;flex-direction:column;background:var(--cls-panel);padding:clamp(22px, 2vw, 28px)}
.tier--lead{background:var(--cls-leaf);border-color:var(--cls-blue)}   /* ties the card to its "Most popular" badge */
.tier__name{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--cls-ink)}
.tier__price{margin-top:10px;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px;font-variant-numeric:tabular-nums}
.tier__amt{font-size:var(--mk-d3);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--cls-ink)}
.tier__per{font-size:15.5px;color:var(--cls-ink-3)}
.tier__save{flex-basis:100%;margin-top:4px;font-size:13px;color:var(--cls-ink-3)}
.tier__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.tier__list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.45;color:var(--cls-ink-2)}
.tier__ic{flex:none;width:18px;height:18px;margin-top:2px;color:var(--cls-blue-ink)}
/* the figure a plan is compared on (minutes, limits, rates) reads first, in ink; the rest of the line stays quieter */
.tier__fig{color:var(--cls-ink);font-weight:600;font-variant-numeric:tabular-nums}
.tier__list li > span{text-wrap:balance}   /* short lines break evenly instead of stranding one word */
.tier__list li.tier__li--lead{color:var(--cls-ink);font-weight:500}
/* what the plan adds beyond its monthly allowances, set apart under a hairline */
.tier__body .tier__list.tier__list--more{margin-top:18px;padding-top:18px;border-top:1px solid var(--cls-line)}
/* what every plan includes: one quiet row under the cards, so each card lists only what differs */
.plans__every{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;margin-top:clamp(24px, 3vw, 32px);padding-top:20px;border-top:1px solid var(--cls-line-2)}
.plans__every-h{font-size:15.5px;font-weight:600;letter-spacing:-.005em;line-height:1.4;color:var(--cls-ink)}
.plans__every-list{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;margin:0;padding:0}
.plans__every-list li{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;line-height:1.4;color:var(--cls-ink-2)}
.plans__every-list .pi{flex:none;width:16px;height:16px;color:var(--cls-blue-ink)}
.tier__note{margin-top:16px;font-size:13px;line-height:1.55;color:var(--cls-ink-3)}
/* each plan: name, price, its button, then the list, so every plan's action is in view with its price;
   the parts line up across the row whatever the price block or list length */
.tier__cta{padding-top:20px}
.tier__body{flex:1;padding-top:24px}
.tier__body .tier__list{margin-top:0}
@supports (grid-template-rows:subgrid){
  .plans__grid .tier{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0}
}
.tier__cta .mk-btn{width:100%}
/* a label on a plan's top edge ("Popular"): a state word, white on blue */
.tier__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:var(--cls-pill);background:var(--cls-blue);border:1px solid var(--cls-blue-deep);color:var(--cls-on-lead);font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap;box-shadow:var(--cls-lit-on)}
/* items for one period only step out when the other is picked */
[data-plans][data-period="y"] [data-only="m"],[data-plans][data-period="m"] [data-only="y"]{display:none}

/* ============================ letters and emails ============================ */
/* anatomy for anything "the product sends you": date/sender row, title,
   opening line, body, hairline-ruled sections each with a .lbl, close, sign-off */
.letter{padding:clamp(28px, 4.2vw, 64px);font-size:17px;line-height:1.65}
.letter__date{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
.letter__from{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--cls-ink)}
.letter__from img{width:32px;height:32px;border-radius:10px;display:block}
.letter__title{margin-top:28px;font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--cls-ink)}
.letter__open{margin-top:8px;font-size:19px;color:var(--cls-ink);font-weight:400}
.letter__body{margin-top:18px;display:grid;gap:12px;max-width:60ch}
.letter__close{margin-top:28px}
.sect{margin-top:28px;padding-top:18px;border-top:1px solid var(--cls-line);max-width:60ch}
.sect .lbl{margin-top:0}
/* the class reminder email */
.rm__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rm__tags{display:flex;flex-wrap:wrap;gap:6px}
.rm__tag{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--cls-pill);background:var(--cls-tray);border:1px solid var(--cls-line);
  font-size:12.5px;font-weight:600;line-height:1;color:var(--cls-ink-2);white-space:nowrap}
.rm__tag--kind{background:color-mix(in srgb, var(--cls-blue) 12%, var(--cls-leaf));border-color:color-mix(in srgb, var(--cls-blue) 28%, var(--cls-leaf));color:var(--cls-blue-deep)}
.rm__tag--kind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cls-blue);flex:none}
.rm__time{font-size:12.5px;color:var(--cls-ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.rm__title{margin-top:14px;font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--cls-ink)}
.rm__tutor{margin-top:16px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:var(--cls-r);
  background:color-mix(in srgb, var(--cls-teal) 7%, var(--cls-leaf));border:1px solid color-mix(in srgb, var(--cls-teal) 26%, var(--cls-leaf))}
.rm__tutor img{width:48px;height:48px;border-radius:14px;display:block}
.rm__id{min-width:0}
.rm__label{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--cls-teal-ink)}
.rm__who{margin-top:2px;font-size:15.5px;line-height:1.35;color:var(--cls-ink-3)}
.rm__who b{font-weight:600;color:var(--cls-ink)}
.rm__greet{margin-top:2px;font-size:14px;line-height:1.45;color:var(--cls-teal-ink)}
.rm__open{margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.4;color:var(--cls-ink)}
.rm__close{margin-top:16px;font-size:15.5px;line-height:1.55;color:var(--cls-ink-2)}
.rm__foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--cls-line)}
.rm__signoff{font-size:15.5px;line-height:1.45;color:var(--cls-teal-ink)}

/* ============================ tables ============================ */
/* no header band: a quiet header row over a hairline, rows on hairlines,
   the first column in ink. Wrap in .mk-table-wrap for a sideways scroll on
   phones (give the wrap tabindex="0", role="region" and an aria-label), or
   add .mk-table--stack to turn each row into a labelled block under 768px
   (each cell carries data-label with its column header's words). */
.mk-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.mk-table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;color:var(--cls-ink-2);font-variant-numeric:tabular-nums}
.mk-table caption{caption-side:top;text-align:left;padding-bottom:12px;font-size:14px;font-weight:500;color:var(--cls-ink-3)}
.mk-table thead th{padding:0 20px 12px 0;border-bottom:1px solid var(--cls-line-2);text-align:left;vertical-align:bottom;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--cls-ink-3)}
.mk-table tbody th,.mk-table tbody td{padding:14px 20px 14px 0;border-bottom:1px solid var(--cls-line);text-align:left;vertical-align:top}
.mk-table tbody th{font-weight:600;color:var(--cls-ink)}
.mk-table tbody tr:last-child > *{border-bottom:0}
.mk-table :is(th,td):last-child{padding-right:0}
.mk-table .is-num{text-align:right}
.mk-table .is-lead{color:var(--cls-ink);font-weight:500}
.mk-table--wide{min-width:640px}
/* a comparison, them against us: ruled rows, and the lead column (the last one, cells
   .is-lead) lifted as one paper. Wrap it in .mk-vs, which draws that paper; --vs-lead is the
   lead column's width (set the same width on its <col>). Stacks with .mk-table--stack on phones.
     <div class="mk-vs" style="--vs-lead:33%"><table class="mk-table mk-table--vs mk-table--stack">… */
.mk-vs{position:relative;--vs-lead:50%;--vs-in:clamp(20px, 2.2vw, 30px)}
.mk-vs::before{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--vs-lead);background:var(--cls-leaf);border:1px solid var(--cls-line);border-radius:var(--cls-r);box-shadow:var(--cls-raise),var(--cls-lit)}
.mk-table--vs{position:relative;z-index:1;table-layout:fixed;font-size:17px;line-height:1.5}
.mk-table--vs thead :is(th,td){padding:clamp(22px, 2.2vw, 30px) 20px 16px 0;border-bottom:1px solid var(--cls-line-2);font-size:14px;font-weight:600;line-height:1.35;color:var(--cls-ink-3)}
.mk-table--vs tbody :is(th,td){padding:20px 20px 20px 0;vertical-align:baseline}
.mk-table--vs tbody th{letter-spacing:-.01em}
@media (min-width:768px){.mk-table--vs tbody tr:last-child > *{padding-bottom:clamp(24px, 2.4vw, 32px)}}
/* inside the lifted column the rules stop short of the paper's edges */
.mk-table--vs :is(th,td).is-lead{position:relative;padding-left:var(--vs-in);padding-right:var(--vs-in);color:var(--cls-ink)}
.mk-table--vs :is(thead,tbody) .is-lead{border-bottom:0}
.mk-table--vs thead .is-lead{font-weight:600}
.mk-table--vs .is-lead::after{content:"";position:absolute;left:var(--vs-in);right:var(--vs-in);bottom:-1px;height:1px;background:var(--cls-line)}
.mk-table--vs thead .is-lead::after{background:var(--cls-line-2)}
.mk-table--vs tbody tr:last-child .is-lead::after{content:none}
/* dark: on the lifted paper the plain hairline is too faint, as inside any paper */
@media (prefers-color-scheme:dark){ :root:not([class~="cls-light"]) .lp .mk-table--vs .is-lead{--cls-line:var(--cls-line-2)} }
:root[class~="dark"] .lp .mk-table--vs .is-lead{--cls-line:var(--cls-line-2)}

/* ============================ breadcrumbs ============================ */
/* where you are, quietly, above a masthead's eyebrow or title:
     <nav class="mk-crumbs" aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li>
       <li><span aria-hidden="true">/</span><span aria-current="page">Page</span></li></ol></nav> */
.mk-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:14px;line-height:1.4;color:var(--cls-ink-3)}
.mk-crumbs li{display:flex;align-items:center;gap:10px}
.mk-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--cls-ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);transition:text-decoration-color var(--cls-dur-fast) var(--cls-ease-out),color var(--cls-dur-fast) var(--cls-ease-out)}
.mk-crumbs a:hover{color:var(--cls-ink);text-decoration-color:currentColor}
.mk-crumbs [aria-current]{color:var(--cls-ink-3)}
.mk-crumbs + *{margin-top:clamp(14px, 1.8vw, 24px)}
@media (pointer:coarse){.mk-crumbs a{min-height:44px}}

/* ============================ long-form reading (documents) ============================ */
/* a contents column beside the document (4:8). The contents are a <details
   class="mk-toc" data-collapse-below="900" open> so they sit open beside the
   text on wide screens and fold to one row on phones. */
.mk-doc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px clamp(40px, 6vw, 104px);align-items:start}
/* the document's masthead, on the same 4:8 grid and top-aligned: the title (crumbs, h1 .mk-fit-h,
   date) over the contents column, the short version (the page's one raised paper) over the text */
.mk-doc--mast{row-gap:clamp(32px, 6vw, 48px)}
.mk-doc__date{margin-top:22px;font-size:var(--mk-copy);font-weight:var(--mk-w-air);line-height:1.4;letter-spacing:-.01em;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
.mk-doc__date time{white-space:nowrap}
.mk-doc__sum{width:100%;max-width:var(--mk-measure);font-size:17px;padding:clamp(24px, 3vw, 40px)}
.mk-doc__sum h2{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--cls-ink)}
.mk-doc__sum ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--cls-line-2)}
.mk-doc__sum li{padding:14px 0;border-bottom:1px solid var(--cls-line-2);font-size:17px;line-height:1.55;color:var(--cls-ink-2);text-wrap:pretty}
.mk-doc__sum li:last-child{border-bottom:0;padding-bottom:0}
/* the chapter holding the document, closer to the masthead than a chapter break */
.mk-doc__body{padding-top:clamp(64px, calc(4vw + 40px), 104px)}
/* a section number, set light so the title carries the weight (the headline's two weights, at section scale) */
.mk-doc__n{font-weight:var(--mk-w-air);color:var(--cls-ink-3)}
/* the way to reach us, at the document's end: its one raised paper */
.mk-doc__reach{margin-top:28px;max-width:560px;padding:clamp(22px, 2.6vw, 32px)}
.mk-prose .mk-doc__reach h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--cls-ink)}
.mk-doc__reach dl{margin:14px 0 0;border-top:1px solid var(--cls-line-2)}
.mk-doc__reach dl > div{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:0 16px;align-items:center;padding:4px 0;border-bottom:1px solid var(--cls-line-2)}
.mk-doc__reach dl > div:last-child{border-bottom:0;padding-bottom:0}
.mk-doc__reach dt{font-size:14px;font-weight:500;line-height:1.4;color:var(--cls-ink-3)}
.mk-doc__reach dt strong{font-weight:inherit;color:inherit}
.mk-doc__reach dd{margin:0;font-size:17px;line-height:1.4;min-width:0}
.mk-doc__reach dd a{display:inline-flex;align-items:center;min-height:44px}
.mk-toc{position:sticky;top:calc(var(--mk-chrome) + 32px);max-height:calc(100vh - var(--mk-chrome) - 48px);overflow:auto;overscroll-behavior:contain;min-width:0;padding-right:4px}
/* room inside the scrolling column for the keyboard ring, which would otherwise be clipped at its edges */
@media (min-width:900px){ .mk-toc{margin-left:-6px;padding:0 6px 6px} }
.mk-toc > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink);cursor:default}
.mk-toc > summary::-webkit-details-marker{display:none}
.mk-toc > summary svg{display:none;width:16px;height:16px;flex:none;color:var(--cls-ink-3);transform:rotate(90deg);transition:transform var(--cls-dur) var(--cls-ease-out)}
.mk-toc[open] > summary svg{transform:rotate(-90deg)}
/* wide, the contents are a fixed column and the script keeps the label from folding them. Without
   the script the label can still fold them, so a folded column shows its chevron and opens again */
@media (min-width:900px){
  .mk-toc:not([open]) > summary{cursor:pointer}
  .mk-toc:not([open]) > summary svg{display:block}
}
.mk-toc :is(ol,ul){list-style:none;margin:14px 0 0;padding:0}
.mk-toc a{position:relative;display:flex;align-items:baseline;min-height:36px;padding:8px 0 8px 18px;font-size:14px;line-height:1.4;color:var(--cls-ink-3);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color var(--cls-dur-fast) var(--cls-ease-out)}
.mk-toc a:hover{color:var(--cls-ink)}
.mk-toc a:is([aria-current],.is-active){color:var(--cls-ink);font-weight:600}
.mk-toc a:is([aria-current],.is-active)::before{content:"";position:absolute;left:2px;top:calc(8px + .7em);width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--cls-ink)}
/* a link's section number sits in its own column, so the titles line up */
.mk-toc .mk-doc__n{flex:none;width:2.1em;font-weight:inherit;color:inherit}
@media (pointer:coarse){.mk-toc a{min-height:44px}}
/* the document: 17px reading type at the reading measure, sections on hairlines */
.mk-prose{font-size:17px;line-height:1.65;color:var(--cls-ink-2);max-width:var(--mk-measure);min-width:0}
.mk-prose > * + *,.mk-prose section > * + *{margin-top:1em}
.mk-prose section + section{margin-top:48px;padding-top:40px;border-top:1px solid var(--cls-line-2)}
.mk-prose h2{font-size:var(--mk-d4);font-weight:var(--mk-w-solid);line-height:1.2;letter-spacing:var(--mk-track-d4);color:var(--cls-ink);font-variant-numeric:tabular-nums}
.mk-prose h3{margin-top:1.8em;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--cls-ink)}
.mk-prose :is(h2,h3) + *{margin-top:.6em}
.mk-prose section > h2 + :is(p,ul,h3){margin-top:.8em}
.mk-prose h3 .mk-doc__n{margin-right:.15em}
/* a heading reached from the contents lands with its section's rule just under the bar
   (the page already keeps the bar + 24px clear; this adds the 40px from the rule to the heading) */
.mk-prose section > h2[id]{scroll-margin-top:40px}
.mk-prose :is(ul,ol){padding-left:1.3em}
.mk-prose ul{list-style:disc}
.mk-prose ol{list-style:decimal}
.mk-prose li + li{margin-top:.4em}
.mk-prose li{text-wrap:pretty}
.mk-prose li::marker{color:var(--cls-ink-3)}
.mk-prose strong{color:var(--cls-ink);font-weight:600}
.mk-prose a{color:var(--cls-blue-deep);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);overflow-wrap:anywhere}
.mk-prose a:hover{text-decoration-color:currentColor}
.mk-prose .mk-table{font-size:15px}

/* ============================ forms ============================ */
/* landing-scale fields: 52px, 17px text (no zoom on phones), sentence-case
   labels as authored. .lp-prefixed to outrank the site's form reset. */
.mk-form{display:grid;gap:22px}
.mk-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.lp .mk-label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;line-height:1.35;color:var(--cls-ink-2)}
.lp .mk-field{display:block;width:100%;min-height:52px;margin:0;padding:12px 16px;border-radius:var(--cls-r-sm);border:1px solid var(--mk-field-edge);
  background-color:var(--cls-leaf);box-shadow:var(--cls-lit);color:var(--cls-ink);font-family:inherit;font-size:17px;font-weight:400;line-height:1.45;
  -webkit-appearance:none;appearance:none;transition:border-color var(--cls-dur-fast) var(--cls-ease-out),background-color var(--cls-dur-fast) var(--cls-ease-out)}
.lp .mk-field::placeholder{color:var(--cls-ink-4);opacity:1}
.lp .mk-field:hover:not(:focus):not(:disabled){border-color:var(--cls-ink-4)}
.lp .mk-field:focus,.lp .mk-field:focus-visible{outline:none;border-color:var(--cls-blue-deep);border-radius:var(--cls-r-sm);box-shadow:var(--cls-focus);transition:none}
.lp textarea.mk-field{min-height:168px;resize:vertical}
.lp select.mk-field{background-image:var(--pi-select-chevron);background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:48px;cursor:pointer}
.lp .mk-field--pill{border-radius:var(--cls-pill);padding-inline:22px}
.lp .mk-field--pill:focus,.lp .mk-field--pill:focus-visible{border-radius:var(--cls-pill)}
.lp .mk-field:disabled{opacity:.55;cursor:not-allowed;background-color:var(--cls-well);box-shadow:none}
.lp .mk-field:is([aria-invalid="true"],.is-error){border-color:var(--cls-red-ink)}
.mk-hint{margin-top:8px;font-size:14px;line-height:1.45;color:var(--cls-ink-3)}
.mk-error{margin-top:8px;font-size:14px;font-weight:500;line-height:1.45;color:var(--cls-red-ink)}
/* a checkbox or radio beside its label */
.lp .mk-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding-top:10px;font-size:15.5px;line-height:1.45;color:var(--cls-ink-2);cursor:pointer}
.lp .mk-check input{flex:none;width:20px;height:20px;margin:1px 0 0;border:1px solid var(--mk-field-edge);border-radius:6px;background-color:var(--cls-leaf);color:var(--cls-blue);cursor:pointer}
.lp .mk-check input[type="radio"]{border-radius:50%}
.lp .mk-check input:checked{background-color:var(--cls-blue);border-color:var(--cls-blue-deep)}
.lp .mk-check input:focus-visible{box-shadow:var(--cls-focus)}
/* a message after an action. Pages whose script writes the older
   mkt-banner classes get the same look inside .lp. */
.mk-banner,.lp .mkt-banner{display:block;padding:14px 18px;border-radius:var(--cls-r-sm);border:1px solid var(--cls-line);background:var(--cls-tray);
  font-size:15.5px;font-weight:500;line-height:1.5;color:var(--cls-ink)}
.mk-banner--ok,.lp .mkt-banner--success{background:color-mix(in srgb, var(--cls-green) 8%, var(--cls-leaf));border-color:color-mix(in srgb, var(--cls-green) 30%, var(--cls-leaf))}
.mk-banner--err,.lp .mkt-banner--error{background:color-mix(in srgb, var(--cls-red) 7%, var(--cls-leaf));border-color:color-mix(in srgb, var(--cls-red) 30%, var(--cls-leaf))}
/* a form's foot: the message region (always in the page, so its words are read out when they
   appear), then the actions, the primary first and on the start edge; on phones the primary runs
   the width. The in-flight state is .mk-btn[aria-disabled="true"] (see actions).
     <div class="mk-form__status" role="status" aria-live="polite"><div id="…" class="mk-banner hidden"></div></div>
     <div class="mk-form__actions"><button type="submit" class="mk-btn">Send</button><button type="button" class="mk-link">…</button></div> */
.mk-form__status > .mk-banner{margin-bottom:18px}
.mk-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* ============================ responsive ============================ */
@media (min-width:900px){
  .mk-rows h3 > span{max-width:8.5em}
}
/* four plans need about 264px each before a price and its period share a line (the longest,
   "$0.00 /month base", wraps below that and the row's subgrid then pads every card); with a
   classic scrollbar that is a 1280px window. Below it they go two by two */
@media (max-width:1279px){
  .plans__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* three plans keep their row down to 1100px */
@media (min-width:1100px) and (max-width:1279px){
  .plans__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:959px){
  .mk-desk--split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){
  .mk-split,.mk-split--rev,.mk-aside,.mk-aside--wide,.mk-headrow,.faq__grid,.mk-doc{grid-template-columns:minmax(0,1fr)}
  .mk-split > .mk-type,.mk-aside > .mk-type{order:-1}
  .mk-headrow > :last-child{justify-self:start}
  .mk-rows > li{grid-template-columns:minmax(0,1fr)}
  .mk-rows h3:has(> svg) + *{padding-left:38px}
  .mk-doc--mast .mk-break{display:inline}
  .mk-doc__sum{max-width:none}
  .mk-doc__body{padding-top:clamp(48px, 8vw, 72px)}
  .mk-sticky,.faq__head{position:static}
  .mk-offer{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "s" "p"}
  .mk-offer__side{align-self:start;padding-bottom:0}
  .mk-toc{position:static;max-height:none;overflow:visible;padding-right:0;border-block:1px solid var(--cls-line-2)}
  /* the label stays on the shell edge; the padding gives the keyboard ring room around it */
  .mk-toc > summary{min-height:52px;cursor:pointer;padding-inline:8px;margin-inline:-8px}
  .mk-toc > summary svg{display:block}
  .mk-toc :is(ol,ul){margin:0 0 14px}
}
@media (max-width:767px){
  .settle{--rot:0deg!important}
  .mk-desk{padding:0;border:0;background:none;border-radius:0}
  .leaf--frame{border-radius:var(--cls-r)}
  .faq__a{padding-right:0}
  .mk-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mk-table--stack,.mk-table--stack tbody,.mk-table--stack tr,.mk-table--stack :is(th,td){display:block;width:100%}
  .mk-table--stack tr{padding:14px 0;border-bottom:1px solid var(--cls-line)}
  .mk-table--stack tbody tr:last-child{border-bottom:0}
  .mk-table--stack tbody :is(th,td){padding:4px 0;border-bottom:0}
  /* the label is for the eye: the column header already names the cell for assistive tech,
     so the label's spoken text is empty where that is supported */
  .mk-table--stack td[data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--cls-ink-3)}
  .mk-table--stack .is-num{text-align:left}
  /* figures: each one beside its label, on hairlines */
  .mk-table--kv tbody tr{padding:18px 0;border-bottom-color:var(--cls-line-2)}
  .mk-table--kv tbody tr:first-child{padding-top:0}
  .mk-table--kv tbody th{padding:0 0 4px}
  .mk-table--kv tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--cls-line)}
  .mk-table--kv tbody td:last-child{border-bottom:0}
  .mk-table--kv .is-num{text-align:right}
  .mk-table--kv td[data-label]::before{font-size:14px;font-weight:400;line-height:inherit;text-align:left}
  /* a comparison stacks without its lifted paper */
  .mk-vs::before{content:none}
  .mk-table--vs{font-size:15.5px}
  .mk-table--vs :is(th,td).is-lead{padding-inline:0}
  .mk-table--vs .is-lead::after{content:none}
}
@media (max-width:639px){
  .plans__grid,.plans__grid--3{grid-template-columns:minmax(0,1fr)}
  .mk-form__row{grid-template-columns:minmax(0,1fr)}
  .mk-form__actions .mk-btn{flex:1 1 auto}
}
@media (max-width:480px){
  /* a long primary wraps inside its pill rather than running past a small phone's edge (two lines
     20px apart, 62px tall). Its sides ease from 24px at a 390px screen to 16px at 320, so most still
     fit on one line there. A one-line label sits exactly where it did (20px keeps its baseline) */
  .mk-btn:not(.mk-btn--sm){max-width:100%;white-space:normal;text-align:center;line-height:20px;padding-block:10px;
    padding-inline:clamp(16px, calc(11.43vw - 20.57px), 24px)}
  .ledger--lead li{font-size:17px}
  .leaf{font-size:15.5px}
  .letter{font-size:15.5px}
  .letter__title,.rm__title{font-size:19px}
  .mk-read,.mk-prose{font-size:16px}
  .mk-rows p{font-size:15.5px}
  .mk-rows h3:has(> svg) + *{padding-left:0}
  .mk-doc__sum li{font-size:16px}
  .mk-doc__reach dl > div{grid-template-columns:minmax(0,1fr);padding:10px 0 0}
  .close__facts{flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin-inline:auto;gap:6px}
  .ledger li{grid-template-columns:30px minmax(0,1fr)}
  .ledger__r{grid-column:2;justify-content:flex-start}
}

/* ============================ print ============================ */
@media print{
  body{background-image:none}
  html.js-motion .settle,html.js-motion .unfold{opacity:1;transform:none}
  html.js-motion .inkset .ink{stroke-dashoffset:0;animation:none}
  html.js-motion .inkset .ink-fade{opacity:1}
  .leaf.is-raised,.mk-btn{box-shadow:none}
  .mk-toc{position:static;max-height:none;overflow:visible}
  .mk-crumbs{display:none}
  /* a document on paper: the text alone, black on white (whatever the screen's theme, and with
     or without background graphics), no site bar, contents, notices or footer; outside
     addresses printed after their links */
  :has(.lp .mk-prose){color-scheme:light!important;background:none!important;background-color:Canvas!important}
  .lp:has(.mk-prose){color-scheme:light}
  body:has(.lp .mk-prose) :is(#main-navbar,#nav-drawer,.site-footer,.skip-link,#tutix-consent-banner,#toast-container,#cog-toast-container,#credit-limit-inline-card),
  .lp:has(.mk-prose) .mk-toc{display:none!important}
  .lp:has(.mk-prose) :is(.hero,.ch){padding:0}
  .lp:has(.mk-prose) .mk-doc{display:block}
  .mk-doc__sum{max-width:none;margin:18pt 0 24pt}
  .lp:has(.mk-prose),.lp:has(.mk-prose) *{color:CanvasText!important;background:none!important;box-shadow:none!important;text-shadow:none!important}
  .lp:has(.mk-prose) *{border-color:color-mix(in srgb, CanvasText 28%, transparent)!important}
  .mk-prose{max-width:none;font-size:11pt;line-height:1.5}
  .mk-prose a[href^="http"]::after{content:" (" attr(href) ")";font-weight:400;overflow-wrap:anywhere}
  .mk-doc--mast h1{font-size:30pt}
  .mk-prose section + section{margin-top:18pt;padding-top:14pt}
  .lp:has(.mk-prose) :is(h2,h3){break-after:avoid}
  .lp:has(.mk-prose) :is(tr,li,.mk-doc__sum,.mk-doc__reach){break-inside:avoid}
}

/* keyboard focus: these draw their own lit edge, so the ring is restated */
.lp .mk-btn:focus-visible,.lp .plans__period button:focus-visible{box-shadow:var(--cls-focus)}
/* a page script hides and shows with .hidden / [hidden]: nothing above may override that */
.lp .hidden,.lp [hidden]{display:none!important}