/* ====================================================================
   MODERN TASTEMAKER — subpage layer (rev8 rebase, F-15 closure).
   Article + tool pages on the rev7 design system. Loaded AFTER
   site.css + rev7.css. Every color below is a var() into the codified
   tokens in site.css :root (navy #0B1526 family / orange #B93A03
   action-only / gold #C9A45C frames-only) — this file declares NO
   palette values of its own.
   ==================================================================== */

/* ---------- article layout (free-808-pack, free-sample-packs) ---------- */
.article{max-width:720px;margin:0 auto;padding:72px 20px 88px}
.article h1{font-size:clamp(1.9rem,6.5vw,3.1rem);line-height:1.1;letter-spacing:-.022em;font-weight:700;text-wrap:pretty;color:var(--ink-light)}
.article .lede{margin-top:24px;font-size:clamp(1.02rem,4.4vw,1.3rem);line-height:1.5;color:var(--champagne);text-wrap:pretty}
.article p.body{margin-top:20px;font-size:1rem;line-height:1.6;color:var(--ink-light);text-wrap:pretty}
.article p.body a,.article li a,.pick p a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
.article h2{margin-top:48px;font-size:1.5rem;line-height:1.15;letter-spacing:-.018em;font-weight:700;color:var(--ink-light)}
.article ul{margin:20px 0 0;padding-left:22px}
.article li{margin-top:10px;font-size:1rem;line-height:1.6;color:var(--ink-light)}
.article li::marker{color:var(--gold)}

/* gold-frame badge (frames-only gold: border + gold text on navy) */
.sp-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;vertical-align:middle;color:var(--gold-bright);border:var(--frame-strong);margin-left:10px}

/* measurement table */
/* REV13.1 (P2a): fixed layout — auto layout let cell min-content force the
   table to 371.5px at a 390 viewport and slice the Peak column. Column
   shares below; filename cells break at <wbr> points after underscores
   (break-word is only the fallback), so names take a clean two lines. */
table.measure{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:24px;font-size:.95rem;font-variant-numeric:tabular-nums}
table.measure th:nth-child(1){width:30%}
table.measure th:nth-child(2){width:10%}
table.measure th:nth-child(3){width:14%}
table.measure th:nth-child(4){width:17%}
table.measure th:nth-child(5){width:16%}
table.measure th:nth-child(6){width:13%}
table.measure th,table.measure td{padding:12px 10px;text-align:left;border-bottom:var(--frame)}
table.measure th{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-light)}
table.measure td.note{font-weight:700;color:var(--gold-bright);white-space:nowrap}
table.measure td{overflow-wrap:anywhere;color:var(--ink-light)}
table.measure td:first-child{overflow-wrap:break-word}
@media (max-width:560px){
  table.measure{font-size:.85rem}
  table.measure th,table.measure td{padding:9px 6px}
  /* REV13.1 (P2a): header labels at .72rem/.18em tracking were wider than
     their fixed-layout columns and collided ("NOTETARGET"). Compact
     label treatment on phones; values keep the .85rem size. */
  table.measure th{font-size:.62rem;letter-spacing:.06em;padding:9px 4px}
}

/* method / explainer panel — navy panel, gold frame */
.method{margin-top:24px;padding:18px 20px;border:var(--frame);border-radius:var(--radius-md);background:var(--navy-900);font-size:.92rem;line-height:1.6;color:var(--muted-light)}
.method strong{color:var(--ink-light)}

/* CTA row under article sections */
.cta-row{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* player + sound-board blocks inside the article flow */
.hear-block{margin-top:28px}
.board-block{margin-top:28px;padding:20px;border:var(--frame);border-radius:var(--radius-md);background:var(--navy-900)}
.board-block .board-note{font-size:.92rem;line-height:1.6;color:var(--muted-light)}
.board-block .board-note strong{color:var(--ink-light)}

/* roundup picks */
.pick{margin-top:44px;padding-top:36px;border-top:var(--frame)}
.pick .num{font-size:.75rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright)}
.pick h2{margin-top:12px}
.pick .meta{margin-top:10px;font-size:.85rem;color:var(--muted-light);letter-spacing:.02em}
.pick p{margin-top:16px;font-size:1rem;line-height:1.6;text-wrap:pretty;color:var(--ink-light)}
.pick p.catch{color:var(--muted-light);font-size:.95rem}
.pick p.catch strong{color:var(--ink-light)}
.pick .btn{margin-top:22px}

/* follow box (Gumroad follow form — standalone POST, no site JS) */
.follow{max-width:720px;margin:56px auto 0;padding:26px 24px;border:var(--frame);border-radius:var(--radius-md);background:var(--navy-900);text-align:center}
.follow .f-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright)}
.follow p{margin-top:10px;font-size:.98rem;line-height:1.55;color:var(--ink-light)}
.follow form{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.follow input[type=email]{flex:1 1 260px;max-width:340px;min-height:44px;box-sizing:border-box;background:var(--navy-850);border:var(--frame-strong);border-radius:999px;color:var(--ink-light);font-size:.95rem;padding:12px 18px;font-family:inherit}
.follow button{background:var(--cta-bg);color:var(--cta-ink);border:0;border-radius:999px;font-size:.95rem;font-weight:600;min-height:44px;box-sizing:border-box;padding:12px 24px;cursor:pointer;font-family:inherit}
.follow .f-note{margin-top:12px;font-size:.8rem;color:var(--muted-light)}

/* ---------- tap tempo tool ---------- */
.tap-tool{max-width:560px;margin:0 auto;padding:28px 20px 48px;text-align:center}
.tap-tool h1{font-size:34px;margin:8px 0 6px;color:var(--ink-light)}
.tap-tool .sub{color:var(--muted-light);line-height:1.55;margin:0 0 22px}
.tap-tool #tap{width:100%;min-height:180px;border-radius:var(--radius-xl);border:var(--frame-strong);background:var(--navy-800);color:var(--cta-ink);font-size:26px;font-weight:800;letter-spacing:.04em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-image:var(--cta-bg)}
.tap-tool #tap:active{transform:scale(.99)}
.tap-tool #tap:focus-visible,.tap-tool a:focus-visible,.tap-tool button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tap-tool .bpm{font-size:84px;font-weight:800;line-height:1;margin:26px 0 2px;color:var(--ink-light)}
.tap-tool .bpm small{font-size:22px;color:var(--muted-light);font-weight:600}
.tap-tool .meta{color:var(--muted-light);min-height:24px}
.tap-tool .bands{display:grid;gap:10px;margin-top:26px}
.tap-tool .band{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:var(--frame);border-radius:var(--radius-md);color:var(--ink-light);text-decoration:none;background:var(--navy-800);min-height:52px;text-align:left}
.tap-tool .band b{color:var(--gold-bright)}
.tap-tool .band.on{border:var(--frame-strong);box-shadow:0 0 0 1px var(--gold) inset}
.tap-tool .row{display:flex;gap:10px;justify-content:center;margin-top:18px}
.tap-tool .ghost{background:none;border:var(--frame);color:var(--muted-light);border-radius:999px;padding:10px 18px;min-height:44px;cursor:pointer;font-size:14px;font-family:inherit}
.tap-tool footer{margin-top:34px;color:var(--muted-light);font-size:13px;line-height:1.6}
.tap-tool footer a{color:var(--gold-bright)}

/* ---------- learn (education section: /learn/ + lesson articles) ----------
   APPEND to assets/subpage.css, after the .tap-tool block, as ONE block.
   Discipline (same as the rest of subpage.css): NO palette values are
   declared here — every color is a var() into the codified tokens in
   site.css :root. Components arranged, not invented: .card, .chip,
   .badge, .pick, .method, .eyebrow all come from site.css/subpage.css. */

/* nav: current-page state (learn pages set aria-current="page") */
.ventures a[aria-current="page"]{color:var(--gold-pop)}

/* ---------- /learn/ index ---------- */
.learn-wrap{max-width:1120px;margin:0 auto;padding:72px 20px 88px}
.learn-head{max-width:720px;margin:0 auto;text-align:center}
.learn-head h1{font-size:clamp(1.9rem,6.5vw,3.1rem);line-height:1.1;letter-spacing:-.022em;font-weight:700;text-wrap:pretty;color:var(--ink-light)}
.learn-head .lede{margin-top:24px;font-size:clamp(1.02rem,4.4vw,1.3rem);line-height:1.5;color:var(--champagne);text-wrap:pretty}
.learn-head .eyebrow{margin-bottom:0}
.learn-navrow{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.learn-cat{margin-top:88px}
.learn-cat .cat-head{margin-bottom:44px}
.howto-col{max-width:720px;margin:0 auto}
.howto-col .pick:first-child{margin-top:0;padding-top:0;border-top:0}

/* tips & tricks cards: the number is the visual (no art image) */
.tip-band{display:flex;align-items:baseline;gap:14px;padding:20px 20px 0}
.tip-num{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--gold-pop)}
.tip-cat{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);opacity:.85}
.tip-do{font-size:.95rem;line-height:1.55;color:var(--muted-light);text-wrap:pretty}
.tip-do strong{color:var(--ink-light)}

/* tutorial meta chips (difficulty / time / daw) — .badge metrics, label scale */
.learn-meta{display:flex;flex-wrap:wrap;gap:8px}
.lchip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:999px;border:var(--frame);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);white-space:nowrap}
.lchip b{color:var(--gold-bright);font-weight:700}

/* "what you'll learn" bullets inside tutorial cards */
.learn-list{margin:2px 0 0;padding-left:18px}
.learn-list li{margin-top:6px;font-size:.92rem;line-height:1.5;color:var(--ink-light)}
.learn-list li::marker{color:var(--gold)}

/* ---------- lesson articles (extends .article) ---------- */
.learn-back{display:inline-block;margin-bottom:18px;font-size:.85rem;font-weight:600;color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
.article .learn-meta{margin-top:20px}

/* steps */
.step{margin-top:44px}
.step-num{font-size:.75rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright)}
.step h2{margin-top:10px}
.step .method{margin-top:20px}

/* settings callout rows (inside the existing .method box) */
.set-title{font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright)}
.setlist{margin-top:12px;display:grid;gap:8px}
.set-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 14px;border:var(--frame);border-radius:var(--radius-sm);background:var(--navy-800);font-size:.92rem;line-height:1.45}
.set-row .k{color:var(--muted-light)}
.set-row .v{color:var(--ink-light);font-weight:600;text-align:right}

/* end-of-article product tie-in: the homepage .card, reused verbatim */
.learn-tiein{margin-top:44px;padding-top:36px;border-top:var(--frame)}
.learn-tiein .eyebrow{margin-bottom:0}
.learn-tiein .card{max-width:560px;margin:22px auto 0}

/* ====================================================================
   PRETTY-BEAUTY · LEARN COMPANION (2026-10-16, Lane 7 finisher).
   Appended as ONE delimited block (merge = delete the block).
   Andrew's standing note: Learn must feel SMOOTH, not boxy.
   Same discipline as the rest of this file: NO palette values —
   every color is a var() into site.css :root, plus rgba()
   derivatives of codified hexes only (white, navy-950 6,13,24,
   gold-pop 232,196,118). Presentation only: no copy touched.
   ==================================================================== */

/* ---------- LP-1 · Voice: Learn speaks in the brand type ------- */
/* Article + Learn-index H1s take the Anton display face (site.css
   rev13 wired .headline/.card h3 only; the .article/.learn-head
   H1s were still system-sans bold). Same size/leading family as
   .headline-md, display tracking — one voice across the site. */
.article h1,.learn-head h1{
  font-family:var(--font-display);font-weight:400;
  letter-spacing:.014em;line-height:1.08;
}
/* Section heads inside articles take the Oswald label voice at a
   display weight — hierarchy by VOICE (Anton > Oswald > sans
   prose), not by boldness alone. */
.article h2,.pick h2,.step h2{
  font-family:var(--font-label);font-weight:600;letter-spacing:.015em;
}
/* Tip-card numerals are the visual on /learn/ — Anton makes them
   carved type instead of a bold sans digit. Color unchanged. */
.tip-num{font-family:var(--font-display);font-weight:400;letter-spacing:.01em}
/* Meta chips join the label voice. */
.lchip{font-family:var(--font-label);letter-spacing:.12em}

/* ---------- LP-2 · Prose: measure + air ------------------------- */
/* Body copy loosens one step (1.6 -> 1.68) and the lede breathes;
   sizes and colors untouched, so no claim or contrast changes. */
.article p.body{line-height:1.68}
.article li{line-height:1.65}
.article .lede{line-height:1.55}
.learn-head .lede{line-height:1.55}
.tip-do{line-height:1.6}

/* ---------- LP-3 · Smooth, not boxy: panels --------------------- */
/* The framed panels (.method / .board-block / .follow) trade
   their 14px corners for the site's large radius, take the same
   lit-surface finish as the cards (PB-4), and soften their
   shadow. Borders stay the gold frame — the frame is the brand;
   the BOXINESS was the corners + the flat fill. */
.method,.board-block{
  border-radius:18px;
  background-image:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(6,13,24,.26);
}
.follow{
  border-radius:22px;
  background-image:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(6,13,24,.26);
}
/* Setting rows inside .method round up to match (10px -> 12px)
   and take the lit finish too. */
.set-row{
  border-radius:12px;
  background-image:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
/* The Learn index opens with the hero's halo: the same gold glow
   that tops the homepage, behind the Learn head. Background only
   — the wrap's layout is untouched. */
.learn-wrap{
  background:radial-gradient(720px 400px at 50% 0%, rgba(232,196,118,.08), rgba(232,196,118,0) 62%);
}
/* Lesson tie-in cards are homepage .card (site.css PB-4 finish
   applies); the divider above them softens to the frame's own
   gradient language via the shelf motif colors — border kept,
   radius on the card already handled in site.css. */
/* ============ /PRETTY-BEAUTY · LEARN COMPANION ============ */

/* ====================================================================
   LEARN PRETTY PASS (lane 3, 2026-10-16) — presentation ONLY.
   Andrew-directed, two stacked briefs:
   · 11:51 EDT — the Learn pages are "very boxy": SMOOTHER design.
     Kill the hard boxy feel — generous radii, soft borderless
     surfaces (tint + shadow separate elements instead of 1px box
     outlines), gold hairlines sparingly as accents, fluid rhythm,
     pill shapes, smooth hover states. Calm + premium (Apple-like).
   · 11:53 EDT — FUN, INTERACTIVE, user-friendly: tips feel alive
     (hover lift + soft glow, press states), friendly progress cues
     (reading-progress hairline), playful-but-premium micro-motion,
     prefers-reduced-motion respected.
   Discipline: every color is a var() into the codified tokens in
   site.css :root — this block declares NO palette values of its own.
   Every rule is scoped to Learn (.learn-wrap / .learn-article /
   learn-only components) so shared .article / .card / .pick / .method
   surfaces elsewhere are untouched. Article copy, links, prices and
   MTM50 mentions are unchanged — CSS + one scope class only.
   ==================================================================== */

/* --- type: learn headlines join the codified display system (Anton),
       learn labels join the label system (Oswald) --- */
.learn-head h1,.learn-article h1,.learn-article > h2,
.howto-col .pick h2{font-family:var(--font-display);font-weight:400;letter-spacing:.012em}
.learn-head h1{font-size:clamp(2.2rem,7vw,3.6rem)}
.learn-article h1{line-height:1.04}
.learn-article > h2{margin-top:56px;line-height:1.12}
.tip-cat,.lchip,.learn-article .step-num,.learn-article .set-title,
.learn-wrap .set-title,.learn-article .pick .num,.howto-col .pick .num,
.learn-back{font-family:var(--font-label)}

/* --- reading: calmer measure, warmer emphasis on the measured numbers --- */
.learn-article{padding-top:64px}
.learn-article p.body{font-size:1.0625rem;line-height:1.72}
.learn-article p.body strong{color:var(--champagne)}
.learn-article .lede{position:relative;padding-left:22px}
.learn-article .lede::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:3px;border-radius:99px;background:var(--gold)}

/* --- soft surfaces: tint + shadow do the separating, not box outlines --- */
.learn-wrap .method,.learn-article .method{
  border:0;background:var(--navy-850);border-radius:var(--radius-xl);
  padding:24px 26px;box-shadow:var(--shadow-rest)}
.learn-article .step .method{margin-top:22px}
.learn-article .set-title{position:relative;padding-left:30px}
.learn-article .set-title::before{content:"";position:absolute;left:0;top:50%;width:18px;height:3px;margin-top:-2px;border-radius:99px;background:var(--gold)}
.learn-article .setlist{gap:10px;margin-top:14px}
.learn-article .set-row,.learn-wrap .set-row{
  border:0;background:var(--navy-800);border-radius:12px;padding:12px 16px}
.learn-article .set-row .k{font-family:var(--font-label);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding-top:.18em}
.learn-article .set-row .v{font-family:var(--font-label);font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .learn-wrap .method,.learn-article .method{padding:20px}
  .learn-article .set-row{flex-direction:column;align-items:flex-start;gap:3px}
  .learn-article .set-row .v{text-align:left}
}

/* --- steps: pill step labels, more air --- */
/* First, retire a pre-existing collision: site.css styles .step as a
   sequencer cell (navy-800 fill, 1px border, radius 8px, cursor:pointer,
   :active scale .93). Article <section class="step"> inherited all of it —
   the single biggest source of the "very boxy" feel. In learn articles a
   step is an editorial section, not a box: spacing + the pill label mark
   it; only the settings panel carries a surface. */
.learn-article .step{background:transparent;border:0;border-radius:0;
  min-height:0;padding:0;cursor:default}
.learn-article .step:active{transform:none}
.learn-article .step{margin-top:52px}
.learn-article .step-num{
  display:inline-flex;align-items:center;min-height:30px;padding:5px 14px;
  border-radius:999px;background:var(--gold-soft);letter-spacing:.22em}
.learn-article .step h2{margin-top:14px;font-family:var(--font-display);font-weight:400;letter-spacing:.012em;line-height:1.12}

/* --- picks (how-to rows + keep-learning): soft panels, friendly slide --- */
.learn-article .pick,.howto-col .pick{
  margin-top:22px;padding:28px;border-top:0;border-radius:var(--radius-xl);
  background:var(--navy-900);box-shadow:var(--shadow-rest);
  transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease)}
.howto-col .pick:first-child{margin-top:0;padding-top:28px;border-top:0}
.learn-article .pick .num,.howto-col .pick .num{
  display:inline-flex;align-items:center;min-height:28px;padding:4px 13px;
  border-radius:999px;background:var(--gold-soft)}
.learn-article .pick h2,.howto-col .pick h2{margin-top:14px}
.learn-article .pick .btn,.howto-col .pick .btn{margin-top:20px}
@media (hover:hover) and (min-width:700px){
  .learn-article .pick:hover,.howto-col .pick:hover{
    transform:translateX(6px);box-shadow:var(--shadow-hover)}
}

/* --- tip cards: borderless tint panels that feel alive --- */
.tip-card{border-color:transparent;background:var(--navy-800)}
.tip-band{align-items:center;padding:24px 24px 0}
.tip-num{font-family:var(--font-display);font-size:2.6rem;letter-spacing:.01em;
  transition:transform var(--dur-fast) var(--ease)}
.tip-cat{letter-spacing:.24em}
.tip-card .body{padding:16px 24px 24px}
.tip-card .blurb{line-height:1.55}
@media (hover:hover){
  .tip-card:hover{box-shadow:var(--shadow-hover),0 16px 40px var(--gold-soft)}
  .tip-card:hover .tip-num{transform:translateY(-2px)}
}
.tip-card:active{transform:scale(.985)}
/* "Try it" becomes a real callout: soft panel + one gold accent bar */
.tip-do{position:relative;margin-top:auto;background:var(--navy-850);
  border-radius:14px;padding:14px 16px 14px 20px}
.tip-do::before{content:"";position:absolute;left:0;top:12px;bottom:12px;
  width:3px;border-radius:99px;background:var(--gold)}
.tip-do strong{font-family:var(--font-label);font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright)}
@media (max-width:560px){
  .tip-band{padding:20px 20px 0}
  .tip-card .body{padding:14px 20px 20px}
}

/* --- index head: soft glow + gold accent rule under the lede --- */
.learn-head{position:relative;z-index:0}
.learn-head::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-48px;
  height:340px;pointer-events:none;
  background:radial-gradient(560px 300px at 50% 0%,var(--gold-soft),transparent 70%)}
.learn-head .lede::after{content:"";display:block;width:64px;height:2px;
  border-radius:99px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* --- nav chips + tutorial tile + meta chips: pills that respond --- */
.learn-navrow .chip{transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
@media (hover:hover){
  .learn-navrow .chip:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--champagne)}
}
.learn-wrap .tile .big{font-family:var(--font-display);font-weight:400;letter-spacing:.01em}
.learn-wrap .tile .small{font-family:var(--font-label)}
.learn-meta .lchip{border:0;background:var(--navy-800);padding:5px 13px}

/* --- section rhythm + anchor friendliness (sticky-bar offset) --- */
.learn-cat{margin-top:96px;scroll-margin-top:92px}
.learn-cat .grid{gap:28px}
.learn-cat .cat-head{margin-bottom:40px}
.learn-cat .sub{max-width:600px;margin-left:auto;margin-right:auto}
.tip-card[id]{scroll-margin-top:92px}

/* --- back link becomes a friendly pill button --- */
.learn-back{display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;
  border:var(--frame);border-radius:999px;text-decoration:none;
  font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.learn-back:hover{border-color:var(--gold);color:var(--champagne);background:var(--navy-850)}

/* --- product tie-in: full outline retires; one gold rule + soft panel --- */
.learn-tiein{margin-top:64px;padding-top:8px;border-top:0;text-align:center}
.learn-tiein::before{content:"";display:block;width:64px;height:2px;
  border-radius:99px;margin:0 auto 28px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.learn-tiein .card{border-color:transparent;background:var(--navy-800);
  box-shadow:var(--shadow-float);text-align:left}

/* --- reading progress hairline (articles): friendly cue, gold accent.
       Scroll-driven, no JS. Unsupported browsers simply don't show it. --- */
@supports (animation-timeline:scroll()){
  .learn-article::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;
    z-index:70;transform:scaleX(0);transform-origin:0 50%;
    background:linear-gradient(90deg,var(--gold),var(--gold-pop));
    animation:learn-progress linear both;animation-timeline:scroll(root block)}
  @keyframes learn-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media (prefers-reduced-motion:reduce){
    .learn-article::before{display:none}
  }
}

/* --- focus visibility inside learn mains --- */
.learn-wrap :focus-visible,.learn-article :focus-visible{
  outline:2px solid var(--focus);outline-offset:3px}

/* --- reduced motion: the pretty pass goes still --- */
@media (prefers-reduced-motion:reduce){
  .tip-card:active{transform:none}
  .tip-num,.learn-navrow .chip{transition:none}
  .learn-article .pick,.howto-col .pick{transition:none}
}
.learn-article .pick h2{font-family:var(--font-display);font-weight:400}

/* ====================================================================
   REV13.1 (P4) — subpage header ventures strip: at 390/393 the nowrap
   email link was clipped mid-address at the screen edge. Below 400px
   the strip wraps, so the full address drops to its own line and reads
   complete. At 430 (where it already fits) nothing changes. Subpages
   only — the homepage does not load this file.
   ==================================================================== */
@media (max-width:400px){
  .ventures{flex-wrap:wrap;row-gap:0}
}

/* ====================================================================
   LEARN SLEEK PASS — rev13.2 (2026-10-16). Andrew: beef up Learn,
   "pretty and professional and smooth… sleek." Presentation ONLY,
   layered on the LEARN PRETTY PASS above. Same discipline: every
   color is a var() into the codified tokens in site.css :root —
   this block declares NO palette values of its own. Gold stays in
   its legal roles (hairlines, display numerals, accent bars).
   New systems: (1) the section mini-nav sticks under the bar as a
   floating pill rail; (2) tip cards carry a meta system — read time
   + level — in the label voice; (3) section eyebrows get flanking
   gold hairlines (the editorial section break); (4) pick meta lines
   join the label voice so index rows and article chips read as one
   system; (5) smooth anchor travel, reduced-motion respected.
   ==================================================================== */

/* --- (1) sticky mini-nav: a pill rail that rides under the bar --- */
.learn-navrow{
  position:sticky;top:calc(52px + var(--safe-t));z-index:30;
  max-width:720px;margin-left:auto;margin-right:auto;
  padding:6px;border:var(--frame);border-radius:999px;
  background:var(--navy-900);box-shadow:var(--shadow-rest)}
.learn-navrow .chip{border-color:transparent}
@media (max-width:560px){
  .learn-navrow{border-radius:22px}
}

/* anchor landings clear bar + rail */
.learn-cat{scroll-margin-top:156px}
.tip-card[id]{scroll-margin-top:156px}

/* --- (2) tip-card meta system: read time + level, label voice --- */
.tip-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tip-meta .tm{
  display:inline-flex;align-items:center;gap:6px;min-height:24px;
  padding:3px 11px;border-radius:999px;background:var(--navy-850);
  font-family:var(--font-label);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-light);
  white-space:nowrap}
.tip-meta .tm b{color:var(--gold-bright);font-weight:600}

/* --- (3) section eyebrows: flanking gold hairlines --- */
.learn-cat .cat-head .eyebrow{
  display:flex;align-items:center;justify-content:center;gap:16px}
.learn-cat .cat-head .eyebrow::before,
.learn-cat .cat-head .eyebrow::after{
  content:"";width:44px;height:1px;flex:none}
.learn-cat .cat-head .eyebrow::before{
  background:linear-gradient(90deg,transparent,var(--gold))}
.learn-cat .cat-head .eyebrow::after{
  background:linear-gradient(90deg,var(--gold),transparent)}

/* --- (4) pick meta joins the label voice (index rows + articles) --- */
.howto-col .pick .meta,.learn-article .pick .meta{
  font-family:var(--font-label);font-size:.78rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase}

/* --- article display tier: one step up, same voice --- */
.learn-article h1{font-size:clamp(2.1rem,6.2vw,3.4rem)}

/* --- start-here path markers take the brand gold --- */
.learn-wrap .method li::marker{color:var(--gold)}

/* --- (5) smooth anchor travel on subpages --- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  .learn-navrow{position:static}
}