/* ============================================================
   Project Jade — the waitlist page.

   Self-contained. It loads /styles.css for the site's reset, fonts and nav,
   then everything below is scoped to .jade so the page's colour — the one
   place on this site that is not monochrome — cannot leak into anything
   else. The site's own tokens stay untouched.
   ============================================================ */

@font-face {
  font-family: "MatrixType";
  src: url("/assets/jade/MatrixType-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;    /* the wordmark is decorative; never block paint on it */
}

.jade {
  /* Jade's own palette, scoped. Sampled from the hero artwork so the CSS
     fallback and the image agree if the image never loads. */
  --j-violet:   #4b18e8;
  --j-violet-2: #7b46ff;
  --j-glow:     #efe9ff;
  --j-ink:      #0a0a0b;
  --j-paper:    #ffffff;
  --j-paper-ink: #121216;
  --j-paper-mut: rgba(18, 18, 22, 0.42);

  background: var(--j-ink);
  color: var(--ink);
}

/* ---- hero ---------------------------------------------------------------
   The artwork is a soft gradient, so it is a BACKGROUND rather than an <img>:
   it can then cover any viewport shape without ever being the thing that
   decides the section's height. The gradient under it is not a placeholder —
   it is what shows on a connection where a 90 KB image has not arrived yet,
   and it has to look deliberate on its own. */
.jade-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(118px, 19vh, 190px) 20px clamp(120px, 20vh, 200px);   /* top clears the transparent header */
  text-align: center;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(255, 255, 255, 0.92) 0%, rgba(233, 226, 255, 0.55) 22%, rgba(123, 70, 255, 0) 58%),
    radial-gradient(130% 110% at 6% 34%, var(--j-violet) 0%, rgba(75, 24, 232, 0.72) 30%, rgba(10, 10, 11, 0) 70%),
    linear-gradient(168deg, #2a12a8 0%, #150a52 42%, var(--j-ink) 88%);
}
.jade-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/jade/hero.webp");
  background-size: cover;
  background-position: 68% 30%;
  opacity: 0.92;
}
/* The fade into the page below, so the hero ends rather than stops. */
.jade-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, var(--j-ink) 96%);
}

/* The ONE bold thing on the page, and only because it is not type: MatrixType
   ships a single Bold cut and this is the Jade logotype drawn with it. The 700
   is what matches the @font-face descriptor — lower it and the browser stops
   finding the face and synthesises a fake bold from the fallback instead,
   which is more bold-looking, not less. Everything that is actually text on
   this page tops out at 500. */
.jade-wordmark {
  font-family: "MatrixType", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: clamp(30px, 6.4vw, 60px);
  letter-spacing: 0.10em;
  line-height: 1;
  margin: 0 0 clamp(22px, 4vw, 34px);
  color: #fff;
  text-shadow: 0 2px 40px rgba(20, 8, 70, 0.55);
}

/* TWO LINES, EVENLY SPLIT, AT EVERY WIDTH.
   `balance` does the evening-up; the max-width in `ch` is what decides how
   many lines there are to even. At ~30ch the 56-character line can only fall
   into two, and the font's lower clamp is set so 30ch still fits inside a
   360px phone with its gutters. Semi-bold: the wordmark above it is the
   loudest thing on the page and this should read as its second voice, not
   compete with it. */
.jade-hero__lead {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(22px, 5vw, 42px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: #fff;
  text-wrap: balance;
  text-wrap: pretty;                   /* older engines: at least no orphans */
  text-wrap: balance;                  /* re-stated so `balance` wins where supported */
}

.jade-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  padding: 15px 30px;
  border-radius: 999px;
  background: #0d0d10;
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
  box-shadow: 0 8px 30px rgba(8, 4, 32, 0.42);
}
.jade-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(8, 4, 32, 0.5); }
.jade-cta:active { transform: translateY(0); }
.jade-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.jade-cta--light { background: #fff; color: #0d0d10; }
.jade-cta--light:hover { background: #f2f0ff; }
.jade-cta--block { width: 100%; }
.jade-hero .jade-cta { margin-top: clamp(26px, 4.5vw, 38px); }

/* ---- the white showcase slab -------------------------------------------
   Pulled up into the hero so the two sections interlock rather than sit in a
   stack. The negative margin is the whole effect, and it is the first thing
   to check if the hero padding is ever changed. */
.jade-slab-wrap { padding: 0 clamp(14px, 3.5vw, 40px); margin-top: clamp(-90px, -11vw, -60px); position: relative; z-index: 1; }
.jade-slab {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--j-paper);
  color: var(--j-paper-ink);
  border-radius: clamp(24px, 3.2vw, 36px);
  padding: clamp(28px, 4vw, 44px) 0 clamp(44px, 6vw, 70px);
  box-shadow: 0 40px 90px -30px rgba(12, 4, 48, 0.6);
  overflow: hidden;
}

/* ---- the feature marquee ----------------------------------------------
   Always moving, never interactive. Five cards never sit comfortably in a
   row at any width, and a rail that drifts says "there is more" without
   asking anyone to discover a scrollbar.

   THE SEAM IS THE WHOLE TRICK. The five items are duplicated in the markup
   and the track is translated by exactly -50%, so at the moment the animation
   restarts the second copy is occupying the position the first one just left
   and nothing appears to move. That only holds if both halves are exactly the
   same width, which is why the spacing is a per-item `margin-right` and not a
   flex `gap`: a gap is laid between children, so it would fall an extra time
   inside the track and make the halves unequal. */
.jade-rail {
  /* No edge mask. The slab's own rounded corners already end the rail, and a
     fade painted over a WHITE slab reads as two grey smears rather than as
     depth — the effect only works over a flat dark ground. */
  overflow: hidden;
}
.jade-rail__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: jade-marquee 38s linear infinite;
  will-change: transform;
}
@keyframes jade-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hovering holds it still, so a card that caught someone's eye can be read. */
.jade-rail:hover .jade-rail__track,
.jade-rail:focus-within .jade-rail__track { animation-play-state: paused; }
/* Keyboard: the rail is a focusable region; focused, it holds still and the
   arrow keys scroll it, with a visible ring so you can see where you are. */
.jade-rail:focus-visible { overflow-x: auto; outline: 2px solid currentColor; outline-offset: 4px; border-radius: 12px; }

.jade-rail__item {
  flex: 0 0 auto;
  width: clamp(212px, 40vw, 300px);
  margin-right: clamp(14px, 2vw, 20px);
  aspect-ratio: 3 / 4;
  /* NO FRAME. The artwork arrives with its own rounded corners baked in, so a
     border-radius here would round an already-round shape and a background
     colour would show as a hard rectangle in the transparent margin around
     it. Anything added here is a second frame on top of the one in the file. */
}
.jade-rail__item img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* There is no .jade-rail__tag. Each card already carries its own label,
   drawn into the artwork, so a pill rendered over it was a second caption
   sitting on top of the first. The name lives in the <img alt> instead,
   which is where the only reader who cannot see the baked one looks. */

/* Motion is the point of this component, so there is no version of it that
   animates less. Under a reduced-motion preference it stops entirely and
   becomes what it would otherwise have been: a rail you can scroll yourself. */
@media (prefers-reduced-motion: reduce) {
  .jade-rail { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jade-rail::-webkit-scrollbar { display: none; }
  .jade-rail__track { animation: none; }
}

.jade-slab__copy { padding: clamp(34px, 5vw, 56px) clamp(24px, 4.5vw, 56px) 0; }
/* All three lines are one size, one weight, one colour — including the
   opening question. In the reference they read as a single paragraph of
   thought rather than a heading with body under it, and the moment one of
   them is emphasised the other two start to look like small print. */
.jade-slab__line {
  margin: 0 0 clamp(26px, 3.8vw, 40px);
  font-size: clamp(1.7rem, 4.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: var(--j-paper-mut);
  text-wrap: pretty;
}
.jade-slab__line:last-child { margin-bottom: 0; }

/* ---- the guessing section ----------------------------------------------
   ONE SIZE FOR ALL FIVE LINES. This is the homepage's `.built__list`
   treatment, lifted deliberately: clamp(1.8rem, 5vw, 3.4rem) at weight 500
   with -0.035em tracking, which is how every run of statement lines on this
   site is set. The question is not a heading above the options and the
   punchline is not a footnote below them — they are five sentences of the
   same thought, and any one of them set smaller immediately reads as
   subordinate to the rest. Colour carries the emphasis instead. */
.jade-guess {
  padding: clamp(74px, 12vw, 140px) clamp(20px, 5vw, 40px) clamp(40px, 7vw, 70px);
  max-width: 1040px;
  margin: 0 auto;
}
.jade-guess__q,
.jade-guess__list li,
.jade-guess__punch {
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.jade-guess__q {
  margin: 0 0 clamp(26px, 4vw, 44px);
  color: var(--ink);
}
.jade-guess__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2vw, 20px); }
.jade-guess__list li { color: var(--ink-faint); }
.jade-guess__punch {
  margin: clamp(52px, 9vw, 96px) auto 0;
  max-width: 20ch;
  text-align: center;
  color: var(--ink);
}

/* ---- pricing ------------------------------------------------------------ */
.jade-plans {
  display: grid;
  gap: clamp(14px, 2.2vw, 24px);
  grid-template-columns: 1fr;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 40px) clamp(80px, 12vw, 130px);
}
@media (min-width: 720px) { .jade-plans { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.jade-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(26px, 4vw, 40px);
  border-radius: clamp(22px, 2.8vw, 30px);
  padding: clamp(34px, 5vw, 52px) clamp(24px, 3.4vw, 34px);
  text-align: center;
  min-height: 100%;
}
.jade-plan--regular { background: var(--j-paper); color: var(--j-paper-ink); }

/* THE PRIORITY CARD'S GROUND IS THE ARTWORK, not a gradient approximating it.
   The grain is the point — it is what the CSS version could never have, and
   it is the same file the campaign art is cut from, so the card and the ads
   are literally the same surface. The flat colour under it is the paint for
   the moment before a 60 KB image lands; it is sampled from the middle of
   that file, so the swap reads as the grain arriving rather than as the card
   changing colour. */
.jade-plan--priority {
  color: #fff;
  background-color: #643ec5;   /* the file's own centre pixel */
  background-image: url("/assets/jade/card-bg.webp");
  background-size: cover;
  background-position: 70% 30%;
  box-shadow: 0 24px 60px -24px rgba(75, 24, 232, 0.75);
}

/* Nothing here is set heavier than the site's own 500. Three short lines and
   a button; weight was never what separated them — position, size and colour
   were. */
.jade-plan__name { margin: 0; font-size: clamp(19px, 2.8vw, 23px); font-weight: 500; letter-spacing: -0.025em; }
.jade-plan__price {
  margin: 0;
  font-size: clamp(17px, 2.5vw, 20px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.022em;
  opacity: 0.78;
  text-wrap: balance;
}
.jade-plan__price s { opacity: 0.5; }
.jade-plan--regular .jade-plan__price { color: rgba(18, 18, 22, 0.58); opacity: 1; }
/* The line that answers "and then what?". Set below the price and above the
   button, quieter than both, and `flex: 1` so the two cards' buttons stay on
   one line together however differently the sentences wrap. */
.jade-plan__body {
  margin: 0;
  font-size: clamp(15.5px, 2.1vw, 17px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.014em;
  opacity: 0.74;
  text-wrap: pretty;
  max-width: 34ch;
  flex: 1;
}
.jade-plan--regular .jade-plan__body { color: rgba(18, 18, 22, 0.66); opacity: 1; }
.jade-plan .jade-cta { margin-top: auto; }

/* ---- the form sheet -----------------------------------------------------
   A full-height sheet on a phone and a centred dialog from 640px up. It is a
   real <dialog>, so focus containment, Escape and the top layer come from the
   platform rather than from script that has to be kept correct by hand. */
.jade-sheet {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ink);
}
.jade-sheet::backdrop { background: rgba(6, 4, 18, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.jade-sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #121115;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
  animation: jade-rise 0.28s var(--ease);
}
@keyframes jade-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jade-sheet__panel { animation: none; } }

@media (min-width: 640px) {
  .jade-sheet__panel {
    position: relative;
    inset: auto;
    margin: 6vh auto;
    max-width: 520px;
    max-height: 88vh; max-height: 88dvh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 30px 26px;
  }
}

.jade-sheet__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.jade-sheet__title { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -0.028em; }
.jade-sheet__sub { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.jade-sheet__close {
  margin-left: auto;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.jade-sheet__close:hover { color: var(--ink); border-color: var(--line-2); }

.jade-field { margin-bottom: 20px; }
.jade-field__label { display: block; margin-bottom: 9px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }
.jade-field__note { font-weight: 400; color: var(--ink-faint); margin-left: 6px; }

.jade-input, .jade-select, .jade-textarea {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: #1a191f;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 14px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.jade-textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.jade-select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.jade-input:focus, .jade-select:focus, .jade-textarea:focus {
  outline: none; border-color: var(--j-violet-2); background: #1f1d26;
}
.jade-input::placeholder, .jade-textarea::placeholder { color: var(--ink-faint); }

.jade-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.jade-pill {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  transition: all 0.14s var(--ease);
}
.jade-pill:hover { border-color: var(--line-2); color: var(--ink); }
.jade-pill[aria-pressed="true"] {
  background: var(--j-violet-2);
  border-color: var(--j-violet-2);
  color: #fff;
}

.jade-sheet__err { margin: 0 0 14px; font-size: 13.5px; color: var(--error); }
.jade-sheet__err:empty { display: none; }
.jade-sheet__submit { margin-top: 4px; }
.jade-sheet__submit[disabled] { opacity: 0.55; cursor: default; transform: none; }
.jade-sheet__fine { margin: 14px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); text-align: center; }

/* The thank-you state replaces the form in place — a second dialog for one
   sentence would be ceremony. */
.jade-done { text-align: center; padding: 14px 0 6px; }
.jade-done__mark { font-size: 34px; line-height: 1; margin-bottom: 14px; }
.jade-done__title { margin: 0 0 8px; font-size: 20px; font-weight: 500; letter-spacing: -0.025em; }
.jade-done__body { margin: 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* The two price lines are deliberately parallel — "$20/mo when launch"
   against "lock at $20 $5/mo today" — so the comparison is one line long on
   each card and reads without arithmetic. */
.jade-plan--priority .jade-plan__price { opacity: 0.9; }

/* Who we think you are, shown instead of the email field once Google has
   answered. Quiet: it is a confirmation, not a question. */
.jade-signedin {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(123, 70, 255, 0.10);
  border: 1px solid rgba(123, 70, 255, 0.26);
}
.jade-signedin strong { color: var(--ink); font-weight: 500; }

/* The sign-in step lives in the same button as the submit, so the sheet
   never opens on a half-answered question. */
.jade-cta.is-busy { opacity: 0.6; cursor: progress; }

/* ---- the header ---------------------------------------------------------
   Transparent and absolutely positioned, so the hero gradient runs behind it
   rather than being cut off by a bar. It sits ABOVE the hero's own ::before
   and ::after layers, which are on negative z-indexes inside the hero's own
   stacking context. */
.jade-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;          /* the mark sits on the page's centre line */
  padding: clamp(18px, 3vw, 28px) clamp(18px, 4vw, 40px);
  background: none;
  border: 0;
}
.jade-nav .brand { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.jade-nav .brand__mark { width: 26px; height: 26px; display: inline-grid; place-items: center; }
.jade-nav .brand__mark svg { width: 100%; height: 100%; display: block; }
.jade-nav .brand__word { font-size: 17px; letter-spacing: -0.02em; }

/* The site's shared .brand is 600. Overridden for the whole of this page
   rather than only for the header, because the footer carries the same mark
   and a bold word down there is no less bold than one up here. Scoped to
   body.jade so nothing else on the site moves. */
body.jade .brand { font-weight: 500; }
.jade-nav .brand:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }

/* The page becomes the positioning context for that absolute header, and the
   hero gets enough top room that the wordmark never collides with it. */
body.jade { position: relative; }

/* ---- the long-form section under the plans ------------------------------
   Generated by tools/build-jade-learn.mjs. Everything above the plans is
   the campaign page; this is the part written to be read, crawled and
   quoted, so it is set for reading: one comfortable column, body type at
   the site's size, headings that scan, and nothing animated. */
.jade-learn {
  padding: 0 clamp(18px, 4vw, 40px) clamp(80px, 12vw, 130px);
  border-top: 1px solid var(--line);
}
.jade-learn__inner { max-width: 780px; margin: 0 auto; padding-top: clamp(56px, 9vw, 96px); }
.jade-learn p, .jade-learn li, .jade-learn dd {
  font-size: clamp(16px, 2.1vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* The page's own rule: nothing heavier than 500 — emphasis is colour. */
.jade-learn strong, .jade-learn b, .jade-learn th, .jade-learn summary { color: var(--ink); font-weight: 500; }
.jade-learn a[href] { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(123, 70, 255, 0.7); text-underline-offset: 3px; }
.jade-learn a[href]:hover { text-decoration-color: var(--j-violet-2); }
/* A breakdown that hasn't published yet: plain text, never a dead link. */
.jade-learn a:not([href]) { color: var(--ink-faint); }

.jade-learn__eyebrow {
  margin: 0 0 14px;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  color: var(--ink-faint) !important;
}
.jade-learn__title {
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.jade-learn__lede { font-size: clamp(18px, 2.5vw, 21px) !important; line-height: 1.5 !important; }
.jade-learn__h2 {
  margin: clamp(56px, 8vw, 84px) 0 16px;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.jade-learn h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }

.jade-learn__grid, .jade-learn__sounds { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 640px) { .jade-learn__grid, .jade-learn__sounds { grid-template-columns: 1fr 1fr; } }
.jade-learn__card, .jade-learn__sound {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 20px 18px;
}
.jade-learn__card p, .jade-learn__sound p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.jade-learn__sound .jade-learn__links { margin-top: 12px; font-size: 15px; }
.jade-learn__rows { margin-top: 18px; }
.jade-learn__rows p { margin: 0 0 8px; font-size: 15.5px; }

.jade-learn__dims { margin: 22px 0 0; display: grid; gap: 14px; }
.jade-learn__dims dt { font-weight: 500; color: var(--ink); font-size: 16px; }
.jade-learn__dims dd { margin: 2px 0 0; }

.jade-learn__steps { margin: 18px 0 0; padding-left: 1.3em; display: grid; gap: 8px; }

.jade-learn__tablewrap { margin-top: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jade-learn__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.jade-learn__table th, .jade-learn__table td {
  text-align: left; vertical-align: top; padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line); line-height: 1.5; color: var(--ink-soft);
}
.jade-learn__table thead th, .jade-learn__table tbody th { color: var(--ink); font-weight: 500; }

.jade-learn__faq { margin-top: 18px; display: grid; gap: 10px; }
.jade-learn__faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
}
.jade-learn__faq summary { cursor: pointer; font-weight: 500; color: var(--ink); font-size: 16.5px; list-style-position: outside; }
.jade-learn__faq details p { margin: 10px 0 2px; }

.jade-learn__end { margin-top: clamp(56px, 8vw, 84px); text-align: center; }
.jade-learn__endline { margin: 0 0 18px; font-size: clamp(1.3rem, 3.2vw, 1.7rem) !important; font-weight: 500; letter-spacing: -0.025em; color: var(--ink) !important; }
.jade-learn__maker { margin-top: 22px; font-size: 14.5px !important; color: var(--ink-faint) !important; }