/* templates/assets/pages/results.css
 * Page-specific layer for body.et-p-results (port of evertrail-demo/funnel/results.html).
 * Selectors here are either unique to this page or differ from another
 * page's version of the same selector; both cases stay out of site.css by
 * design (spec 8.1, "The CSS trap"). Selector text is unprefixed and safe
 * because this file is linked only on this page, after site.css, so a rule
 * here overrides a shared rule of equal specificity for the same selector
 * text only when both target the same selector text (they never do here —
 * see the M2 report's shared/per-page partition).
 */

body { background: var(--mf-g-morning); background-attachment: fixed; }
.fp-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--mf-surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--mf-limestone); }
.fp-top-in { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.fp-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fp-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fp-status svg { width: 13px; height: 13px; }
.fp-state svg { width: 13px; height: 13px; }
.fp-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; border-radius: 50%; animation: fpspin .8s linear infinite; flex: none; }
.btn.btn-sm { font-size: 14px; padding: 10px 16px; }
.btn .fp-spin { width: 15px; height: 15px; }
.btn[aria-disabled="true"] { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { transform: none; }
.fp-prog { height: 4px; background: var(--mf-limestone); }
.fp-prog i { display: block; height: 100%; width: 0; background: var(--mf-g-summit); transition: width .6s ease; }
.fp-main { padding: 30px 0 72px; }
.fp-stack { display: grid; gap: 18px; }
.fp-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) 340px; gap: 32px; padding: 30px 32px; }
.fp-intro h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 10px 0 12px; }
.fp-intro .lead { font-size: 17px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fp-meta-line { margin-top: 18px; font-size: 13.5px; color: var(--mf-slate); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.fp-meta-line a { color: var(--mf-pine); font-weight: 500; text-decoration: none; }
.fp-meta-line a:hover { text-decoration: underline; }
.fp-index { background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 14px; padding: 14px 18px 8px; align-self: start; }
.fp-index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--mf-slate); }
.fp-index-head strong { color: var(--mf-ink); font-weight: 600; font-size: 15px; }
.fp-index ol { list-style: none; margin: 0; padding: 0; }
.fp-index li a { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--mf-limestone); font-size: 14.5px; color: var(--mf-ink); text-decoration: none; }
.fp-index li:first-child a { border-top: 0; }
.fp-index li a:hover { color: var(--mf-pine); }
.fp-index li[data-st="queued"] a { color: var(--mf-slate); }
.fp-ix { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--mf-line); display: grid; place-items: center; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--mf-slate); }
.fp-ix svg { display: none; }
.fp-ix .fp-spin { display: none; }
.fp-ix svg { width: 12px; height: 12px; }
.fp-index li[data-st="writing"] .fp-ix { border-color: var(--mf-sky); color: var(--mf-sky); }
.fp-index li[data-st="writing"] .fp-ix .fp-spin { display: inline-block; }
.fp-index li[data-st="writing"] .fp-ix .fp-num { display: none; }
.fp-index li[data-st="done"] .fp-ix { background: var(--mf-pine); border-color: var(--mf-pine); color: var(--mf-canvas); }
.fp-index li[data-st="done"] .fp-ix svg { display: block; }
.fp-index li[data-st="done"] .fp-ix .fp-num { display: none; }
.fp-ix-t { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--mf-slate); }
.fp-sec { padding: 0; overflow: hidden; scroll-margin-top: 84px; transition: opacity .3s ease; }
.fp-sec[data-state="queued"] { opacity: .68; }
.fp-sec-head { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: start; padding: 22px 28px; }
.fp-sec-head .fp-n { font-family: var(--mf-font-display); font-weight: 600; font-size: 16px; color: var(--mf-pine); display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mf-shallows); }
.fp-sec-head h2 { font-size: 23px; }
.fp-sec-head p { font-size: 14.5px; color: var(--mf-slate); margin-top: 3px; }
.fp-sec-head .fp-state { margin-top: 6px; }
.fp-skel { display: none; }
.fp-body { display: none; }
.fp-queued { display: none; }
.fp-queued { padding: 0 28px 22px 80px; font-size: 13.5px; color: var(--mf-slate); }
.fp-skel { gap: 10px; padding: 2px 28px 28px 80px; }
.fp-skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--mf-limestone) 0%, var(--mf-canvas) 50%, var(--mf-limestone) 100%); background-size: 200% 100%; animation: fpshimmer 1.3s linear infinite; }
.fp-sec[data-state="writing"] .fp-skel { display: grid; }
.fp-sec[data-state="queued"] .fp-queued { display: block; }
.fp-sec[data-state="done"] .fp-body { display: block; animation: fpin .45s ease; }
/* D348: a section written by several chain steps shows its finished parts while the rest is still
   writing (results.js sets data-et-partial): the body first, then two quiet skeleton bars below it. */
.fp-sec[data-et-partial="1"] { display: flex; flex-direction: column; }
.fp-sec[data-et-partial="1"] .fp-body { display: block; order: 1; animation: fpin .45s ease; }
.fp-sec[data-et-partial="1"] .fp-skel { order: 2; padding-top: 0; }
.fp-sec[data-et-partial="1"] .fp-skel i:nth-child(n+3) { display: none; }
.fp-sec[data-et-partial="1"] .fp-sec-foot { order: 3; }
.fp-body { border-top: 1px solid var(--mf-limestone); padding: 22px 28px 28px 80px; font-size: 15.5px; }
.fp-body p { color: var(--mf-ink); }
.fp-body .fp-intro-p { max-width: 70ch; margin-bottom: 18px; }
.fp-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mf-pine); margin-bottom: 10px; }
.fp-cols { display: grid; gap: 22px; }
.fp-cols-2 { grid-template-columns: 1fr 1fr; }
.fp-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fp-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.fp-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--mf-pine); }
.fp-list.minus li::before { top: 12px; height: 2px; width: 9px; border-radius: 2px; background: var(--mf-slate); }
.fp-callout { margin-top: 20px; border-left: 3px solid var(--mf-lake); background: var(--mf-canvas); border-radius: 0 12px 12px 0; padding: 14px 18px; }
.fp-callout b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mf-pine); margin-bottom: 6px; }
.fp-callout p { font-family: var(--mf-font-display); font-size: 18.5px; line-height: 1.4; }
.fp-tw { overflow-x: auto; border: 1px solid var(--mf-limestone); border-radius: 12px; background: var(--mf-surface); }
.fp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.fp-table th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--mf-limestone); vertical-align: top; }
.fp-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--mf-limestone); vertical-align: top; }
.fp-table th { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-slate); font-weight: 600; background: var(--mf-canvas); }
.fp-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-table td b { font-weight: 600; }
.fp-table td small { display: block; color: var(--mf-slate); font-size: 13px; }
.fp-table tr.total td { background: var(--mf-canvas); font-weight: 600; }
.fp-table tr.total td:first-child { white-space: nowrap; }
.fp-table td .mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.fp-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.fp-kv div { background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.fp-kv b { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-slate); font-weight: 600; margin-bottom: 3px; }
.fp-kv .mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.fp-auds { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fp-aud { border: 1px solid var(--mf-limestone); border-radius: 12px; padding: 16px 18px; background: var(--mf-surface); }
.fp-aud-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.fp-aud-top .pill { flex: none; white-space: nowrap; }
.fp-aud h3 { font-size: 18px; }
.fp-aud p { font-size: 14.5px; color: var(--mf-slate); line-height: 1.5; }
.fp-aud p b { color: var(--mf-ink); font-weight: 600; }
.fp-aud.avoid { background: color-mix(in srgb, var(--mf-wood) 55%, var(--mf-canvas)); border-color: color-mix(in srgb, var(--mf-honey) 45%, var(--mf-limestone)); }
.fp-aud.avoid h3 { color: var(--mf-heartwood); }
.fp-aud.avoid p { color: var(--mf-heartwood); }
.fp-aud.avoid p b { color: var(--mf-heartwood); }
.fp-hooks { list-style: none; margin: 0; padding: 0; counter-reset: hook; }
.fp-hooks li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--mf-limestone); }
.fp-hooks li:first-child { border-top: 0; padding-top: 0; }
.fp-hooks li::before { counter-increment: hook; content: counter(hook); font-family: var(--mf-font-display); font-weight: 600; font-size: 22px; color: var(--mf-lake); line-height: 1; padding-top: 2px; }
.fp-hook-q { font-family: var(--mf-font-display); font-size: 19.5px; line-height: 1.3; color: var(--mf-ink); }
.fp-hook-m { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 7px; font-size: 13.5px; color: var(--mf-slate); }
.fp-hook-m .pill { padding: 4px 9px; font-size: 11px; }
.fp-scripts { display: grid; gap: 14px; }
.fp-script { border: 1px solid var(--mf-limestone); border-radius: 12px; background: var(--mf-surface); overflow: hidden; }
.fp-script-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--mf-canvas); border-bottom: 1px solid var(--mf-limestone); font-size: 13px; color: var(--mf-slate); }
.fp-script-top .pill { margin-right: 4px; }
.fp-script-top strong { color: var(--mf-ink); font-weight: 600; font-size: 14.5px; }
.fp-copy { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mf-forest); background: var(--mf-surface); border: 1px solid var(--mf-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.fp-copy:hover { background: var(--mf-shallows); }
.fp-script-body { padding: 16px; display: grid; gap: 14px; }
.fp-lbl { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mf-slate); font-weight: 600; margin-bottom: 5px; }
.fp-pt { white-space: pre-line; font-size: 15px; line-height: 1.55; }
.fp-hl { font-weight: 600; font-size: 16px; }
.fp-beats { display: grid; gap: 6px; }
.fp-beats div { display: grid; grid-template-columns: 74px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.5; }
.fp-beats .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--mf-slate); padding-top: 3px; }
.fp-script-note { font-size: 13.5px; color: var(--mf-slate); }
.fp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fp-kpi { background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 12px; padding: 14px 16px; }
.fp-kpi span { display: block; font-size: 12.5px; color: var(--mf-slate); font-weight: 500; }
.fp-kpi b { display: block; font-family: var(--mf-font-display); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--mf-ink); margin: 4px 0 4px; }
.fp-kpi small { display: block; font-size: 13px; color: var(--mf-slate); }
.fp-why { margin-top: 14px; font-size: 14.5px; color: var(--mf-slate); max-width: 70ch; }
.fp-todo { margin-top: 24px; }
.fp-todo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.fp-todo-head .fp-h { margin: 0; }
.fp-todo-head span { font-size: 13px; color: var(--mf-slate); }
.fp-todo label { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--mf-limestone); cursor: pointer; font-size: 15px; line-height: 1.5; }
.fp-todo label:first-of-type { border-top: 0; }
.fp-todo input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--mf-pine); cursor: pointer; }
.fp-todo label:has(input:checked) span.fp-t { color: var(--mf-slate); text-decoration: line-through; text-decoration-color: var(--mf-line); }
.fp-todo .fp-when { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--mf-slate); padding-top: 4px; white-space: nowrap; }
.fp-done { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; animation: fpin .5s ease; }
.fp-inbox { display: grid; gap: 14px; align-content: start; }
.fp-inbox-row { display: flex; gap: 14px; align-items: flex-start; }
.fp-inbox-row i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mf-shallows); color: var(--mf-forest); display: grid; place-items: center; }
.fp-inbox-row i svg { width: 20px; height: 20px; }
.fp-inbox h2 { font-size: 22px; margin-bottom: 4px; }
.fp-inbox p { font-size: 15px; color: var(--mf-slate); }
.fp-inbox p b { color: var(--mf-ink); font-weight: 600; }
.fp-inbox .fp-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fp-upsell { display: grid; gap: 10px; align-content: start; }
.fp-upsell h2 { font-size: 22px; }
.fp-upsell p { font-size: 15px; color: var(--mf-slate); }
.fp-upsell .fp-price { font-family: var(--mf-font-display); font-weight: 700; font-size: 30px; color: var(--mf-forest); line-height: 1; }
.fp-upsell .fp-price small { font-family: var(--mf-font-body); font-weight: 500; font-size: 14px; color: var(--mf-slate); margin-left: 6px; }
.fp-upsell .btn { justify-self: start; margin-top: 6px; }
.fp-upsell .small { color: var(--mf-slate); }
.fp-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px); background: var(--mf-forest); color: var(--mf-canvas); font-size: 14px; padding: 11px 16px; border-radius: 999px; box-shadow: var(--mf-shadow-card); opacity: 0; transition: opacity .2s, transform .2s; z-index: 60; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
@media (max-width: 900px) {
  .fp-intro { grid-template-columns: 1fr; gap: 22px; }
  .fp-cols-2 { grid-template-columns: 1fr; }
  .fp-cols-3 { grid-template-columns: 1fr; }
  .fp-auds { grid-template-columns: 1fr; }
  .fp-kv { grid-template-columns: 1fr 1fr; }
  .fp-kpis { grid-template-columns: 1fr 1fr; }
  .fp-done { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fp-hide-m { display: none; }
  .fp-top .btn { display: none; }
  .fp-intro { padding: 22px 18px; }
  .fp-intro h1 { font-size: 27px; }
  .fp-sec-head { grid-template-columns: 32px 1fr; padding: 18px 18px 14px; }
  .fp-sec-head .fp-n { width: 32px; height: 32px; font-size: 14px; }
  .fp-sec-head .fp-state { grid-column: 2; margin-top: 0; }
  .fp-skel { padding-left: 18px; padding-right: 18px; }
  .fp-body { padding-left: 18px; padding-right: 18px; }
  .fp-queued { padding-left: 18px; padding-right: 18px; }
  .fp-hooks li { grid-template-columns: 26px 1fr; }
  .fp-todo label { grid-template-columns: 22px 1fr; }
  .fp-todo .fp-when { grid-column: 2; padding-top: 0; }
  .fp-beats div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 480px) {
  .fp-kpis { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-spin { animation: none; }
  .fp-skel i { animation: none; }
  .fp-sec { animation: none; transition: none; }
  .fp-done { animation: none; transition: none; }
}
@media print {
  body { background: var(--mf-surface); }
  .fp-prog { display: none !important; }
  .fp-skel { display: none !important; }
  .fp-queued { display: none !important; }
  .fp-copy { display: none !important; }
  .fp-inbox .fp-btns { display: none !important; }
  .fp-upsell { display: none !important; }
  .fp-toast { display: none !important; }
  .fp-top .btn { display: none !important; }
  .demo-ribbon { display: none !important; }
  .site-foot { display: none !important; }
  .fp-sec .fp-body { display: block !important; }
  .fp-sec { opacity: 1 !important; }
  .card { break-inside: avoid; box-shadow: none; }
  .fp-top { position: static; }
}
.fp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fp-figure { position: relative; overflow: hidden; border-radius: 14px; background: var(--mf-g-jasna); aspect-ratio: 16 / 9; }
.fp-cover { grid-column: 1 / -1; position: relative; overflow: hidden; border-radius: 14px; background: var(--mf-g-deep); aspect-ratio: 1000 / 230; margin-bottom: 4px; }
.fp-cover .fp-cover-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,26,17,.62), rgba(11,26,17,.08) 68%); }
.fp-cover b { position: absolute; z-index: 2; left: 26px; top: 50%; transform: translateY(-50%); max-width: 26ch; font-family: var(--mf-font-display); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--mf-canvas); text-shadow: 0 1px 14px rgba(11,26,17,.55); }
.fp-sec-figure { margin: 0 0 18px; max-width: 620px; }
.fp-aud-thumb { width: 150px; aspect-ratio: 1 / 1; margin: 0 0 18px; }
@media (max-width: 760px) {
  .fp-cover { aspect-ratio: 1000 / 340; }
  .fp-cover b { font-size: 17px; left: 18px; }
  .fp-aud-thumb { width: 120px; }
}
@media print {
  .fp-cover { display: none !important; }
  .fp-sec-figure { display: none !important; }
  .fp-aud-thumb { display: none !important; }
}

/* --- Klemen's Results review, 2026-09-21 (D65): title block, jump list, section states, print -------
 * Every selector below is new, or re-declares a port selector only to add to it: the prototype's
 * intro, cover, inbox and upsell rules above are left in place (they select nothing now, and an
 * owner's custom.css may name them). The port had dropped the prototype's three @keyframes, so its
 * spinner and skeleton shimmer never moved; they are restored here, from funnel/results.html. */
@keyframes fpspin { to { transform: rotate(360deg); } }
@keyframes fpshimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fpin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Layout: the title block across the top. From 960px the jump list is a sticky column LEFT of the
   sections -- first in reading order, as on a phone -- and Your Info sits under the sections; below
   960px the list is the collapsed "Jump to section" under the title block. */
@media (min-width: 960px) {
  .et-p-results .fp-stack { grid-template-columns: 236px minmax(0, 1fr); column-gap: 26px; align-items: start; }
  .et-p-results .fp-title-block { grid-column: 1 / -1; }
  .fp-index-nav { grid-column: 1; grid-row: 2 / span 2; position: sticky; top: 20px; align-self: start; }
  .et-p-results .fp-results, .et-p-results .fp-your-info { grid-column: 2; }
  .fp-jump { display: none; }
}
@media (max-width: 959.98px) {
  .fp-index-col { display: none; }
}

/* The title block, in Klemen's order: H1 -> H2 -> status line -> Print / Download. No cover image. */
.fp-title-block { padding: 30px 32px 28px; }
.fp-title-h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin: 0 0 12px; }
.fp-title-h2 { font-family: var(--mf-font-body); font-variation-settings: normal; font-size: 18.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--mf-slate); max-width: 62ch; margin: 0; text-wrap: pretty; }
.fp-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; font-size: 14.5px; color: var(--mf-slate); }
.fp-status-line .fp-status { font-size: 12.5px; letter-spacing: .04em; }
.fp-status-note { margin: 12px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.55; color: var(--mf-slate); } /* D318: while generating */
.fp-status-line[data-state="completed"] .fp-status { background: #DDEFE1; color: #1E5A30; }
.fp-status-line[data-state="completed"] .fp-spin { display: none; }
.fp-status-count:empty { display: none; }
.fp-title-actions { display: grid; justify-items: start; gap: 8px; margin-top: 20px; }
.fp-print-btn svg { width: 18px; height: 18px; flex: none; }
.fp-print-btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.fp-print-btn:disabled:hover { transform: none; }
.fp-print-hint { font-size: 13.5px; color: var(--mf-slate); }

/* The jump list: the desktop column (.fp-index-col, styled by the port's .fp-index) and the phone's
   collapsed list (.fp-jump) share one entry partial and these states. */
.fp-index-col { padding: 14px 16px 8px; }
.fp-jump { background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 14px; }
.fp-jump summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 600; font-size: 15.5px; color: var(--mf-ink); cursor: pointer; }
.fp-jump summary::-webkit-details-marker { display: none; }
.fp-jump summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid var(--mf-pine); border-bottom: 2px solid var(--mf-pine); transform: rotate(45deg); transition: transform .2s ease; }
.fp-jump[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fp-jump ol { list-style: none; margin: 0; padding: 0 18px 8px; }
.fp-jump li a { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--mf-limestone); font-size: 15px; color: var(--mf-ink); text-decoration: none; }
.fp-ix-title { min-width: 0; line-height: 1.3; }
.fp-ix-t { font-family: var(--mf-font-body); font-size: 12px; font-weight: 500; }
:is(.fp-index, .fp-jump) li[data-state="waiting"] a { color: var(--mf-slate); }
:is(.fp-index, .fp-jump) li[data-state="writing"] .fp-ix { border-color: var(--mf-sky); color: var(--mf-sky); }
:is(.fp-index, .fp-jump) li[data-state="writing"] .fp-ix .fp-spin { display: inline-block; }
:is(.fp-index, .fp-jump) li[data-state="writing"] .fp-ix .fp-num { display: none; }
:is(.fp-index, .fp-jump) li[data-state="done"] .fp-ix { background: var(--mf-pine); border-color: var(--mf-pine); color: var(--mf-canvas); }
:is(.fp-index, .fp-jump) li[data-state="done"] .fp-ix svg { display: block; }
:is(.fp-index, .fp-jump) li[data-state="done"] .fp-ix .fp-num { display: none; }
:is(.fp-index, .fp-jump) li[data-state="failed"] .fp-ix { border-color: var(--mf-heartwood); color: var(--mf-heartwood); }
:is(.fp-index, .fp-jump) li[data-state="failed"] .fp-ix-t { color: var(--mf-heartwood); }

/* Section cards: waiting -> writing -> done, or failed. One attribute, data-state, drives everything
   a state shows: the state pill's colour, the skeleton bars while writing, the body when done, the
   retry button only when failed, Back to top once there is content to leave. */
.fp-sec-list { display: grid; gap: 18px; }
.fp-sec-head .fp-state { justify-self: start; }
.fp-sec[data-state="waiting"] { opacity: .72; }
.fp-sec[data-state="writing"] .fp-state { background: #DCEBF8; color: #1F4E82; }
.fp-sec[data-state="done"] .fp-state { background: #DDEFE1; color: #1E5A30; }
.fp-sec[data-state="failed"] .fp-state { background: #F3E6C8; color: #8C6428; }
.fp-sec[data-state="failed"] { border-color: color-mix(in srgb, var(--mf-honey) 45%, var(--mf-limestone)); }
.fp-skel i:nth-child(1) { width: 92%; }
.fp-skel i:nth-child(2) { width: 78%; }
.fp-skel i:nth-child(3) { width: 85%; }
.fp-skel i:nth-child(4) { width: 58%; }
.fp-sec-foot { display: none; align-items: center; gap: 12px; padding: 0 28px 20px 80px; }
.fp-sec[data-state="done"] .fp-sec-foot, .fp-sec[data-state="failed"] .fp-sec-foot { display: flex; }
.fp-sec-foot [data-et-retry] { display: none; }
.fp-sec[data-state="failed"] .fp-sec-foot [data-et-retry] { display: inline-flex; }
/* The server's note on a failed card (owner's view): why it stopped, in its own words. */
.fp-sec-error { margin: 0; flex: 1 1 100%; font-size: 0.875rem; color: var(--mf-rowan); }
.fp-sec[data-state="failed"] .fp-sec-foot { flex-wrap: wrap; }
.fp-back-top { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--mf-pine); text-decoration: none; }
.fp-back-top:hover { text-decoration: underline; }

/* The generated content: sanitized markdown (runtime/src/core/markdown.js), so bare tags. The renderer
   wraps every table in .fp-table-scroll, and a wide table scrolls inside its card, never the page. */
.fp-body h2, .fp-body h3, .fp-body h4 { font-family: var(--mf-font-display); font-size: 17.5px; line-height: 1.25; margin: 20px 0 8px; }
.fp-body > :is(h2, h3, h4):first-child { margin-top: 0; }
.fp-body p { margin: 0 0 12px; line-height: 1.6; }
.fp-body ul, .fp-body ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; line-height: 1.55; }
.fp-body strong { font-weight: 600; color: var(--mf-forest); }
.fp-body a { color: var(--mf-pine); }
.fp-body blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--mf-lake); color: var(--mf-slate); }
.fp-body code { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 4px; padding: 1px 5px; }
.fp-table-scroll { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--mf-limestone); border-radius: 12px; background: var(--mf-surface); }
.fp-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fp-body th, .fp-body td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--mf-limestone); vertical-align: top; }
.fp-body th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-slate); font-weight: 600; background: var(--mf-canvas); white-space: nowrap; }
.fp-body tr:last-child td { border-bottom: 0; }
.fp-body > :last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .fp-title-block { padding: 22px 18px; }
  .fp-title-h1 { font-size: 30px; }
  .fp-title-h2 { font-size: 17px; }
  .fp-sec-foot { padding-left: 18px; padding-right: 18px; }
}

/* Print / Download: the title block and every section, in order, as a clean document. No site header,
   Share, buttons, jump list or footer; Your Info only when its <details> is open. */
@media print {
  .et-p-results .fp-stack { display: block; }
  .et-p-results .fp-stack > * + * { margin-top: 14px; }
  .site-head, [data-et-header], [data-et-share] { display: none !important; }
  .fp-index-nav { display: none !important; }
  .fp-title-actions { display: none !important; }
  .fp-status-line .fp-spin { display: none !important; }
  .fp-state { display: none !important; }
  .fp-sec-foot { display: none !important; }
  .fp-sec .fp-body:empty { display: none !important; }
  .fp-your-info:has(details:not([open])) { display: none !important; }
  .fp-title-block { box-shadow: none; }
  .fp-sec { break-inside: auto; }
  .fp-sec, .fp-sec .fp-body { transition: none !important; animation: none !important; }
  .fp-sec-head { break-after: avoid; }
  .fp-table-scroll { overflow: visible; }
}

/* --- Klemen's Results review, 2026-09-22 (D224-D226): the title block's row, the status, Share ------
 * One row under the H2: the status on the left, then the two actionable buttons, Print / Download
 * (primary) and Share (secondary, outline; moved here from the header). On a phone the status takes its
 * own line and the buttons sit side by side under it, full width together. */
.fp-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; }
.fp-title-row .fp-status-line { margin: 0; }
.fp-title-block .fp-title-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-items: normal; gap: 12px; margin: 0; }
.fp-title-block .fp-title-actions .btn { padding: 13px 22px; font-size: 15.5px; gap: 9px; }
.fp-share-btn svg { width: 18px; height: 18px; flex: none; }
.fp-title-block > .fp-print-hint { margin-top: 10px; }
@media (max-width: 760px) {
  .fp-title-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
  .fp-title-block .fp-title-actions .btn { flex: 1 1 auto; min-width: 0; padding: 13px 12px; font-size: 15px; gap: 7px; }
  .fp-title-block .fp-title-actions .btn svg { width: 17px; height: 17px; }
}

/* The status reads as information, not an action: the fixed label, then a flat pill -- no shadow, no
   hover, no pointer, smaller text -- with a small state dot that pulses while generating (still under
   reduced motion) and a check once Completed. */
.fp-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; color: var(--mf-slate); }
.fp-status-label { font-weight: 600; color: var(--mf-ink); }
.fp-status-line .fp-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: var(--mf-radius-pill); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; background: #DCEBF8; color: #1F4E82; box-shadow: none; cursor: default; user-select: none; }
.fp-status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: fp-status-pulse 1.4s ease-in-out infinite; }
.fp-status-check { display: none; flex: none; width: 12px; height: 12px; }
.fp-status-line[data-state="completed"] .fp-status { background: #DDEFE1; color: #1E5A30; }
.fp-status-line[data-state="completed"] .fp-status-dot { display: none; }
.fp-status-line[data-state="completed"] .fp-status-check { display: block; }
@keyframes fp-status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .fp-status-dot { animation: none; } }

/* The share dialog (results.js builds it): a centred card in the site's design over a dimmed backdrop,
   the title in the card-title tier (not the section H2, D162), a close icon button, the link in the
   site's input style beside a small Copy button, the Hide my info switch with its explanation, the
   link's lifetime, and a quiet Stop sharing. It fits a 360px screen with its margins. */
.et-share-dialog { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-width: 520px; max-height: calc(100vh - 32px); margin: auto; padding: 24px; border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); background: var(--mf-surface); color: var(--mf-ink); box-shadow: 0 24px 64px rgba(11, 26, 17, .28); overflow: auto; }
.et-share-dialog::backdrop { background: color-mix(in srgb, var(--mf-ink) 45%, transparent); }
.et-share-dialog:focus { outline: none; }
.et-share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.et-share-title { font-family: var(--mf-font-display); font-size: 21px; font-weight: 600; line-height: 1.25; margin: 0; }
.et-share-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mf-slate); cursor: pointer; }
.et-share-x:hover { background: var(--mf-canvas); color: var(--mf-ink); }
.et-share-x:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 1px; }
.et-share-x svg { width: 20px; height: 20px; }
.et-share-link-row { display: flex; align-items: stretch; gap: 10px; margin: 0; }
.et-share-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; color: var(--mf-ink); background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 12px; padding: 11px 13px; outline: none; }
.et-share-input:focus { border-color: var(--mf-sky); box-shadow: 0 0 0 3px var(--mf-sky-light); }
.et-share-copy { flex: none; }
.et-share-copy[data-state="copied"] { background: var(--mf-forest); }
.et-share-toggle { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.et-share-toggle input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: var(--mf-radius-pill); background: var(--mf-line); cursor: pointer; transition: background .15s ease; }
.et-share-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--mf-surface); box-shadow: 0 1px 3px rgba(11, 26, 17, .3); transition: transform .15s ease; }
.et-share-toggle input:checked { background: var(--mf-pine); }
.et-share-toggle input:checked::after { transform: translateX(18px); }
.et-share-toggle input:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.et-share-note { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--mf-slate); }
.et-share-lifetime { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--mf-slate) 82%, var(--mf-surface)); }
/* A change the Worker did not take (audit, 2026-09-30); the switch and Stop sharing wait while one is on its way. */
.et-share-error { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--mf-rowan); }
.et-share-toggle input:disabled, .et-share-stop:disabled { opacity: .55; cursor: default; }
.et-share-foot { display: flex; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mf-limestone); }
.et-share-stop { padding: 6px 0; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--mf-rowan); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--mf-rowan) 40%, transparent); }
.et-share-stop:hover { text-decoration-color: currentColor; }
.et-share-stop:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 420px) { .et-share-dialog { padding: 20px 18px; } }
@media (prefers-reduced-motion: reduce) { .et-share-toggle input, .et-share-toggle input::after { transition: none; } }

/* --- Sales v4 (D221): Easy Re-Submission, after the plan and before Your Info --------------------------
 * Shown by results.js only on the owner's view of a complete run with runs left; never printed. */
.fp-resubmit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 24px 28px; background: var(--mf-g-shallows); border-color: var(--mf-line); }
.fp-resubmit-text { flex: 1 1 320px; min-width: 0; }
.fp-resubmit-title { font-size: 21px; margin: 0 0 6px; }
.fp-resubmit-body { font-size: 15.5px; line-height: 1.55; color: var(--mf-slate); }
.fp-resubmit-left { font-weight: 600; color: var(--mf-forest); white-space: nowrap; }
.fp-resubmit-btn { flex: none; }
.fp-resubmit-btn svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 960px) {
  .et-p-results .fp-resubmit { grid-column: 2; }
  .fp-index-nav { grid-row: 2 / span 4; }
}
@media (max-width: 760px) {
  .fp-resubmit { padding: 20px 18px; }
  .fp-resubmit-btn { width: 100%; }
}
@media print {
  .fp-resubmit { display: none !important; }
}

/* --- D467: the evergreen backend's next-step block, after the plan and before Your Info -----------------
 * Shown by results.js only on the owner's view of a complete run; never printed, never on a shared view. */
.fp-next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 26px 28px; background: var(--mf-g-morning); border-color: var(--mf-line); }
.fp-next-step-text { flex: 1 1 340px; min-width: 0; }
.fp-next-step-title { font-size: 22px; margin: 0 0 6px; text-wrap: balance; }
.fp-next-step-body { font-size: 15.5px; line-height: 1.55; color: var(--mf-slate); }
.fp-next-step-btn { flex: none; }
@media (min-width: 960px) {
  .et-p-results .fp-next-step { grid-column: 2; }
}
@media (max-width: 760px) {
  .fp-next-step { padding: 20px 18px; }
  .fp-next-step-btn { width: 100%; justify-content: center; }
}
@media print {
  .fp-next-step { display: none !important; }
}

/* --- Plugin download (D358+): a results.json section whose kind is "plugin"
 * (templates/sections/plugin-download.liquid) is a card like any other -- same .fp-sec chrome, same
 * waiting/writing/done .fp-body rules above -- only its body differs: the download button, the four
 * install blocks and the invocation phrase instead of generated markdown. */
.fp-plugin-download svg { width: 18px; height: 18px; flex: none; }
.fp-plugin-download:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.fp-plugin-download:disabled:hover { transform: none; }
.fp-plugin-waiting { margin: 10px 0 0; font-size: 13.5px; color: var(--mf-slate); }
.fp-plugin-install-label { margin: 22px 0 6px; font-weight: 600; }
.fp-plugin-install { display: grid; gap: 0; margin-top: 0; border-top: 1px solid var(--mf-limestone); }
.fp-plugin-step { border-bottom: 1px solid var(--mf-limestone); }
.fp-plugin-step[open] { padding-bottom: 12px; }
.fp-plugin-step-label { margin: 0; padding: 12px 0; font-weight: 600; color: var(--mf-forest); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fp-plugin-step-label::-webkit-details-marker { display: none; }
.fp-plugin-step-label::after { content: "+"; font-weight: 400; font-size: 18px; line-height: 1; color: var(--mf-slate); }
.fp-plugin-step[open] > .fp-plugin-step-label::after { content: "\2212"; }
.fp-plugin-updating { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--mf-slate); }
.fp-plugin-step-note { margin-top: 4px; font-size: 13px; color: var(--mf-slate); }
.fp-plugin-step-path { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mf-slate); }
.fp-plugin-run { margin-top: 22px; }
.fp-plugin-run-label { margin: 0 0 8px; font-weight: 600; }
.fp-plugin-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fp-plugin-invocation { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--mf-limestone); border-radius: 6px; background: var(--mf-canvas); font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; overflow-wrap: anywhere; }
.fp-plugin-copy { flex: none; }
@media (max-width: 760px) {
  .fp-plugin-run-row { flex-direction: column; align-items: stretch; }
  .fp-plugin-copy { width: 100%; }
}
@media print {
  .fp-plugin { display: none !important; }
}

/* --- Media sections (D389): a results.json section whose kind is "images" or "lessons"
 * (templates/sections/media-section.liquid) is a card like any other -- same .fp-sec chrome, same
 * state pill -- whose body results.js draws from the run view's `media`: a gallery of images, or lessons
 * with a player and a transcript each, above them the section's own row (Play all, Download all, "4 of 6
 * ready") and the day the files are deleted. The body shows as soon as the first file exists
 * (data-et-media), not only at Ready, so the buyer watches them arrive; a file still being made is a calm
 * placeholder at its own proportions. Everything is scoped under .fp-media because the generated-content
 * rules above (.fp-body p, h3, a) would otherwise win on specificity. */
.fp-sec[data-et-media="1"] .fp-body { display: block; animation: none; }
.fp-sec[data-et-media="1"] .fp-skel { display: none; }
.fp-body.fp-media { padding-left: 28px; }
/* A media card that is done with no file to show (a run whose order has no add-on) is just its header. */
.fp-sec[data-state="done"]:not([data-et-media="1"]) .fp-body.fp-media { display: none; }

.fp-media .fp-media-top { display: grid; gap: 6px; margin: 0 0 18px; }
.fp-media .fp-media-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 6px; }
.fp-media .fp-media-head .btn svg { width: 16px; height: 16px; flex: none; }
.fp-media a.btn-solid { color: var(--mf-canvas); }
.fp-media a.btn-ghost { color: var(--mf-forest); }
.fp-media .fp-media-progress { margin: 0 0 0 auto; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--mf-slate); }
.fp-media .fp-media-meta { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mf-slate); }
.fp-media .fp-media-playall .fp-media-ic-play path { fill: currentColor; }
.fp-media .fp-media-playall .fp-media-ic-pause { display: none; }
.fp-media .fp-media-playall[data-state="playing"] .fp-media-ic-play { display: none; }
.fp-media .fp-media-playall[data-state="playing"] .fp-media-ic-pause { display: block; }

.fp-media .fp-media-groups { display: grid; gap: 28px; }
.fp-media .fp-media-group { display: grid; gap: 12px; min-width: 0; }
.fp-media .fp-media-group-head { margin: 0; font-family: var(--mf-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fp-media .fp-media-code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--mf-pine); }
.fp-media .fp-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.fp-media .fp-media-lessons { display: grid; gap: 14px; }
.fp-media .fp-media-tile { min-width: 0; border: 1px solid var(--mf-limestone); border-radius: 14px; background: var(--mf-surface); overflow: hidden; overflow-wrap: anywhere; }
.fp-media .fp-media-image { display: flex; flex-direction: column; }

/* An image: the frame takes the image's own proportions (aspect-ratio is set from the item's ratio), so a
   placeholder, a failure note and the finished image all occupy the same box and nothing moves. */
.fp-media .fp-media-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mf-canvas); }
.fp-media .fp-media-frame[data-slot="wait"] { display: grid; place-items: center; background: linear-gradient(90deg, var(--mf-limestone) 0%, var(--mf-canvas) 50%, var(--mf-limestone) 100%); background-size: 200% 100%; animation: fpshimmer 2.4s linear infinite; }
.fp-media .fp-media-frame[data-slot="failed"] { display: grid; place-items: center; background: color-mix(in srgb, var(--mf-wood) 55%, var(--mf-canvas)); }
.fp-media .fp-media-wait { margin: 0; padding: 0 16px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--mf-slate); }
.fp-media .fp-media-fail { padding: 0 16px; text-align: center; }
.fp-media .fp-media-failed { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--mf-heartwood); }
.fp-media .fp-media-err { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mf-heartwood); overflow-wrap: anywhere; }
.fp-media .fp-media-open { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.fp-media .fp-media-open:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: -3px; }
.fp-media .fp-media-img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.fp-media .fp-media-open:hover .fp-media-img { transform: scale(1.025); }
.fp-media .fp-media-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--mf-surface) 92%, transparent); color: var(--mf-forest); box-shadow: 0 1px 6px rgba(11, 26, 17, .28); pointer-events: none; }
.fp-media .fp-media-zoom svg { width: 16px; height: 16px; }
.fp-media .fp-media-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fp-media .fp-media-info { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.fp-media .fp-media-text { display: grid; gap: 6px; }
.fp-media .fp-media-title { margin: 0; font-family: var(--mf-font-display); font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.fp-media .fp-media-words-line, .fp-media .fp-media-sub, .fp-media .fp-media-pairs, .fp-media .fp-media-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mf-slate); }
.fp-media .fp-media-val { color: var(--mf-ink); }
.fp-media .fp-media-sub { margin-top: 3px; }
.fp-media .fp-media-bullets { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.fp-media .fp-media-bullets li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.45; color: var(--mf-slate); }
.fp-media .fp-media-bullets li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--mf-pine); }
.fp-media .fp-media-template { margin: 0; font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--mf-slate) 80%, var(--mf-surface)); }
.fp-media .fp-media-actions { margin-top: auto; }
.fp-media .fp-media-dl svg { width: 16px; height: 16px; flex: none; }

/* A lesson: number and title, the summary, then the player (or its placeholder) beside its Download, and
   the transcript folded under a rule. */
.fp-media .fp-media-lesson { display: grid; gap: 12px; padding: 18px 20px; }
.fp-media .fp-media-lesson-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.fp-media .fp-media-idx { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--mf-line); font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--mf-slate); }
.fp-media .fp-media-lesson .fp-media-title { padding-top: 3px; font-size: 17.5px; }
.fp-media .fp-media-summary p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--mf-slate); }
.fp-media .fp-media-summary p:last-child { margin-bottom: 0; }
.fp-media .fp-media-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.fp-media .fp-media-audio { flex: 1 1 240px; min-width: 0; width: 100%; height: 42px; }
.fp-media .fp-media-player .fp-media-wait, .fp-media .fp-media-player .fp-media-fail { flex: 1 1 240px; min-width: 0; }
.fp-media .fp-media-player .fp-media-wait { padding: 11px 16px; border-radius: 999px; background: linear-gradient(90deg, var(--mf-limestone) 0%, var(--mf-canvas) 50%, var(--mf-limestone) 100%); background-size: 200% 100%; animation: fpshimmer 2.4s linear infinite; }
.fp-media .fp-media-player .fp-media-fail { padding: 10px 14px; text-align: left; border-radius: 12px; background: color-mix(in srgb, var(--mf-wood) 55%, var(--mf-canvas)); }
.fp-media .fp-media-transcript { border-top: 1px solid var(--mf-limestone); }
.fp-media .fp-media-transcript > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 0; font-size: 14.5px; font-weight: 600; color: var(--mf-forest); cursor: pointer; }
.fp-media .fp-media-transcript > summary::-webkit-details-marker { display: none; }
.fp-media .fp-media-transcript > summary::after { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; color: var(--mf-slate); }
.fp-media .fp-media-transcript[open] > summary::after { content: "\2212"; }
.fp-media .fp-media-transcript > summary:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; border-radius: 4px; }
.fp-media .fp-media-transcript-body { padding-top: 10px; }
.fp-media .fp-media-transcript-body p { margin: 0 0 10px; max-width: 72ch; font-size: 14.5px; line-height: 1.65; white-space: pre-line; }
.fp-media .fp-media-transcript-body p:last-child { margin-bottom: 0; }

/* The larger view of an image (results.js builds the <dialog> on first use, like the share dialog): the
   image over a dimmed backdrop, its title under it, a labelled close button on its corner. */
.et-lightbox { box-sizing: border-box; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--mf-canvas); overflow: visible; }
.et-lightbox::backdrop { background: color-mix(in srgb, var(--mf-ink) 93%, transparent); }
.et-lightbox:focus { outline: none; }
.et-lightbox-img { display: block; width: auto; height: auto; max-width: min(calc(100vw - 24px), 1100px); max-height: calc(100vh - 100px); margin: 0 auto; border-radius: 12px; object-fit: contain; background: var(--mf-canvas); }
.et-lightbox-cap { margin: 12px 8px 0; text-align: center; font-size: 15px; line-height: 1.4; color: var(--mf-canvas); }
.et-lightbox-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--mf-surface) 92%, transparent); color: var(--mf-ink); box-shadow: 0 1px 6px rgba(11, 26, 17, .35); cursor: pointer; }
.et-lightbox-x:hover { background: var(--mf-surface); }
.et-lightbox-x:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.et-lightbox-x svg { width: 20px; height: 20px; }

@media (min-width: 761px) {
  .fp-media .fp-media-lesson .fp-media-summary, .fp-media .fp-media-lesson .fp-media-player { padding-left: 42px; }
}
/* An ad set of two or four images sits two across (results.js sets data-cols): two rows of two, not three
   and one. On a phone it is one column, like any other grid. */
@media (min-width: 480px) {
  .fp-media .fp-media-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fp-body.fp-media { padding-left: 18px; padding-right: 18px; }
  .fp-media .fp-media-head .btn { flex: 1 1 auto; }
  .fp-media .fp-media-progress { flex: 1 0 100%; margin: 0; }
  .fp-media .fp-media-lesson { padding: 16px; }
  .fp-media .fp-media-player .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-media .fp-media-frame[data-slot="wait"], .fp-media .fp-media-player .fp-media-wait { animation: none; }
  .fp-media .fp-media-img { transition: none; }
  .fp-media .fp-media-open:hover .fp-media-img { transform: none; }
}
/* Print: the images in their grid, the lessons' titles, summaries and transcripts (open); no player, no
   Download, no row of controls, no availability line -- those are for the screen. */
@media print {
  .fp-sec:not([data-et-media="1"]) .fp-body.fp-media { display: none !important; }
  .fp-media .fp-media-top, .fp-media .fp-media-player, .fp-media .fp-media-actions, .fp-media .fp-media-zoom { display: none !important; }
  .fp-media .fp-media-tile { break-inside: avoid; }
  .fp-media .fp-media-group-head { break-after: avoid; }
  .fp-media .fp-media-img { transition: none; }
  .fp-media .fp-media-transcript > summary::after { display: none; }
  .fp-media .fp-media-lesson .fp-media-summary { padding-left: 0; }
}
@media print {
  .fp-media .fp-media-transcript::details-content { content-visibility: visible; display: block; }
}

/* --- Narrated sections (D415): the audio step's lessons (.fp-media), then the section's text (.fp-narrated-text) ----
 * One card, two bodies. The lessons keep their own padding; the text under them starts at the same left edge
 * and is set off by the card's usual hairline, with the lessons' bottom padding tightened so the gap is one
 * rhythm, not two. An empty text body (the text steps still writing) is hidden by .fp-body:empty above. */
.fp-body.fp-narrated-text { padding-left: 28px; }
.fp-sec .fp-body.fp-narrated-text:empty { display: none !important; }
/* The text arrives before the lessons: until the first lesson exists the lessons' body is not drawn at all. */
.fp-sec[data-et-partial="1"]:not([data-et-media="1"]) .fp-body.fp-media { display: none; }
.fp-sec[data-et-media="1"] .fp-body.fp-media:has(+ .fp-narrated-text:not(:empty)) { padding-bottom: 22px; }
@media (max-width: 760px) {
  .fp-body.fp-narrated-text { padding-left: 18px; padding-right: 18px; }
}
@media print {
  .fp-sec[data-et-media="1"] .fp-body.fp-media:has(+ .fp-narrated-text:not(:empty)) { padding-bottom: 12px; }
}

/* --- Diagrams (D413, D414): the figures results.js draws from ```diagram blocks ----------------------------
 * The Worker's markdown renderer writes <figure class="et-diagram" data-et-diagram="..."> with a plain-text
 * description inside; results.js draws an inline SVG into it. Every colour and font the drawing uses is a
 * --et-dg-* variable that maps to a site token here, so a theme change on the site reaches the diagrams
 * with no change to the script (this page has no dark mode today; a dark set belongs in these variables).
 * Without JavaScript, or if drawing fails, the description stays visible as a paragraph. */
.et-diagram {
  --et-dg-card: var(--mf-surface);
  --et-dg-ink: var(--mf-ink);
  --et-dg-muted: var(--mf-slate);
  --et-dg-line: var(--mf-line);
  --et-dg-soft: color-mix(in srgb, var(--mf-moss) 12%, var(--mf-surface));
  --et-dg-accent: var(--mf-pine);
  --et-dg-accent-ink: var(--mf-surface);
  --et-dg-accent-2: var(--mf-lake);
  --et-dg-warm: var(--mf-honey);
  --et-dg-neutral: var(--mf-limestone);
  --et-dg-font-display: var(--mf-font-display);
  --et-dg-font-body: var(--mf-font-body);
  display: block;
  width: 100%;
  margin: 18px 0;
  padding: 0;
}
.et-diagram svg { display: block; width: 100%; height: auto; overflow: visible; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.et-diagram .et-diagram-text { margin: 0; font-size: 14px; color: var(--mf-slate); }
.et-diagram[data-et-drawn] .et-diagram-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fp-body > .et-diagram:first-child { margin-top: 0; }
.fp-body > .et-diagram:last-child { margin-bottom: 0; }
@media print {
  .et-diagram { break-inside: avoid; page-break-inside: avoid; }
}

/* Klemen, 2026-10-13: the jump list's two extra links (Change my answers, the done-for-you block) under the sections */
.fp-index-extra { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--mf-limestone); }
.fp-index-extra li[hidden] { display: none; }
.fp-index-extra li a { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 7px 0; font-size: 14.5px; font-weight: 600; color: var(--mf-pine); text-decoration: none; }
.fp-index-extra li a:hover { color: var(--mf-forest); text-decoration: underline; text-underline-offset: 3px; }
.fp-ix-x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mf-shallows); color: var(--mf-forest); font-size: 13px; line-height: 1; }
.fp-jump .fp-index-extra { margin: 8px 0 0; }
/* D524: "Book your setup call" under the results title (owner view only). */
.fp-results-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; background: #FFFBF1; border: 1px solid var(--mf-honey); border-radius: var(--mf-radius-card); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--mf-honey) 70%, transparent); }
.fp-results-call[hidden] { display: none; }
.fp-results-call-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #0B5CFF; box-shadow: 0 2px 8px rgba(11, 92, 255, .25); } /* Klemen, 2026-10-26: the round Zoom icon, as on /book */
.fp-results-call-icon svg { width: 28px; height: 28px; }
.fp-results-call-title { font-size: 22px; margin: 0 0 6px; }
.fp-results-call-text p { margin: 0; color: var(--mf-ink); }
.fp-results-call-btn { white-space: nowrap; }
@media (max-width: 640px) {
  .fp-results-call { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .fp-results-call-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* D563: an agent's instructions to paste -- a plain-text box with one Copy button (results.js pasteBoxes). */
.et-paste { display: grid; gap: 10px; margin: 6px 0 18px; min-width: 0; }
.et-paste-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.et-paste-name { font-weight: 600; font-size: 15px; color: var(--mf-ink); }
.et-paste-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 16px; font-size: 14.5px; } /* Klemen, 2026-10-26: smaller than the page's primary buttons */
.et-paste-copy:focus-visible { outline: 3px solid var(--mf-lake); outline-offset: 3px; }
.et-paste-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.et-paste-copy.is-done { background: var(--mf-pine); box-shadow: none; }
.et-paste-text { margin: 0; padding: 18px 20px; background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.65; color: var(--mf-ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 440px; overflow-y: auto; min-width: 0; }
.et-paste-status { margin: 0; min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--mf-pine); }
@media print {
  .et-paste-bar, .et-paste-status { display: none; }
  .et-paste-text { max-height: none; overflow: visible; }
}

/* D564: the Download button opens a small menu: PDF (print dialog) or Text file (.md). */
.fp-dl { position: relative; display: inline-block; }
.fp-dl-caret { width: 16px; height: 16px; margin-left: 2px; transition: transform .15s ease; }
.fp-print-btn[aria-expanded="true"] .fp-dl-caret { transform: rotate(180deg); }
.fp-dl-menu { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 100%; display: grid; padding: 6px; margin-top: 0; background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 14px; box-shadow: var(--mf-shadow-card); }
.fp-dl-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.fp-dl-item { display: block; width: 100%; text-align: left; white-space: nowrap; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--mf-ink); background: none; border: 0; border-radius: 10px; padding: 11px 16px; cursor: pointer; }
.fp-dl-item:hover, .fp-dl-item:focus-visible { background: var(--mf-shallows); outline: none; }
@media (prefers-reduced-motion: reduce) { .fp-dl-caret { transition: none; } }
/* D564: a clean PDF -- only the plan itself. */
@media print {
  .fp-results-call, .fp-vg, .fp-index, .fp-index-col, .fp-status-note, .fp-print-hint, .fp-status-line, .fp-dl, .fp-title-actions, .fp-sec-foot { display: none !important; }
}

/* ---------------------------------------------------------------------------------------------------
 * Sprints (D595, docs/SPRINTS-SPEC.md 6): the top slot (trial banner or refine card), the plan header, a
 * trial's locked lessons, the lessons' blocks and the next-sprint dialog. results.js builds every element;
 * only a Sprints funnel's page has the two containers (partials/sprint-top.liquid, sprint-plan.liquid).
 * ------------------------------------------------------------------------------------------------- */
.et-sprint-top[hidden], .et-sprint-plan[hidden] { display: none; }
.et-trial { padding: 26px 28px; border: 1px solid color-mix(in srgb, var(--mf-pine) 30%, var(--mf-limestone)); background: linear-gradient(180deg, color-mix(in srgb, var(--mf-moss) 10%, var(--mf-surface)), var(--mf-surface)); }
.et-trial-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-pine); }
.et-trial-title { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); }
.et-trial-promise { margin: 0 0 14px; font-size: 17px; color: var(--mf-ink); }
.et-trial-outcomes { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.et-trial-outcomes li { position: relative; padding-left: 28px; }
.et-trial-outcomes li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--mf-pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.et-trial-buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding-top: 16px; border-top: 1px solid var(--mf-limestone); }
.et-trial-inc h3 { margin: 0 0 6px; font-size: 15px; }
.et-trial-inc ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--mf-slate); }
.et-trial-cta { display: grid; justify-items: center; gap: 8px; text-align: center; }
.et-trial-price { margin: 0; font-weight: 700; font-size: 18px; }
.et-trial-guarantee { margin: 0; font-size: 13px; color: var(--mf-slate); }
.et-unlock { display: inline-flex; align-items: center; gap: 9px; }
.et-unlock .et-lock { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .et-trial { padding: 20px 18px; }
  .et-trial-buy { grid-template-columns: 1fr; }
}

.et-refine { padding: 24px 26px; display: grid; gap: 12px; }
.et-refine-title { margin: 0; font-size: 24px; }
.et-refine-body { margin: 0; color: var(--mf-slate); }
.et-rf-field { display: grid; gap: 6px; font-weight: 600; }
.et-rf-field textarea, .et-bk-field input, .et-bk-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--mf-limestone); border-radius: 10px; background: var(--mf-canvas); color: var(--mf-ink); }
.et-rf-field textarea:focus, .et-bk-field input:focus, .et-bk-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--mf-pine) 50%, transparent); outline-offset: 1px; }
.et-rf-upload { justify-self: start; cursor: pointer; }
.et-rf-hint { margin: 0; font-size: 13px; color: var(--mf-slate); }
.et-rf-error { margin: 0; color: var(--mf-heartwood); font-weight: 600; }
.et-rf-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.et-sprint-plan { padding: 22px 24px; }
.et-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.et-plan-head h2 { margin: 0; font-size: 22px; }
.et-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.et-plan-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.et-plan-item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--mf-ink); text-decoration: none; border: 1px solid var(--mf-limestone); background: var(--mf-surface); }
.et-plan-item a:hover { border-color: var(--mf-pine); }
.et-plan-n { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-pine); white-space: nowrap; }
.et-plan-t { font-weight: 600; min-width: 0; }
.et-plan-d { font-size: 13px; color: var(--mf-slate); white-space: nowrap; }
.et-plan-item .et-lock { width: 15px; height: 15px; color: var(--mf-slate); }
.et-plan-item[data-locked] .et-plan-t { color: var(--mf-slate); }
@media (max-width: 560px) {
  .et-plan-item a { grid-template-columns: minmax(0, 1fr) auto; }
  .et-plan-n { grid-column: 1 / -1; }
  .et-plan-d { grid-column: 1; }
}

/* A trial's locked lesson: its outline in place of the body; no skeleton, no blur. */
.fp-sec[data-state="locked"] .fp-skel, .fp-sec[data-state="locked"] [data-et-media-body], .fp-sec[data-state="locked"] [data-et-result-body] { display: none; }
.fp-sec[data-state="locked"] .fp-state { background: var(--mf-limestone); color: var(--mf-slate); }
.fp-sec[data-state="locked"] .et-locked { display: block; }
.et-locked { display: none; }
.et-locked-h { margin: 4px 0 8px; font-size: 15px; }
.et-locked-learn { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.et-locked-outcome { margin: 0 0 14px; }
.et-locked-teaser { display: grid; gap: 6px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--mf-sky-light) 50%, var(--mf-surface)); }
.et-locked-teaser span { font-size: 13px; font-weight: 700; color: var(--mf-slate); }
.et-locked-teaser audio { width: 100%; }
:is(.fp-index, .fp-jump) li[data-state="locked"] a { color: var(--mf-slate); }
:is(.fp-index, .fp-jump) li[hidden], .fp-sec[hidden] { display: none; }

/* Blocks (block-schemas.js shapes): drawn by results.js; the plain text stays for no-JavaScript and screen readers. */
.et-blocks { margin: 18px 0; }
.et-bk-list { display: grid; gap: 14px; }
.et-bk { margin: 0; padding: 16px 18px; border: 1px solid var(--mf-limestone); border-radius: 14px; background: var(--mf-surface); }
.et-bk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.et-bk-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-pine); background: color-mix(in srgb, var(--mf-moss) 14%, var(--mf-surface)); padding: 3px 8px; border-radius: 999px; }
.et-bk-head b { font-size: 16px; }
.et-bk-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.et-bk-table th, .et-bk-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--mf-limestone); vertical-align: top; }
.et-bk-table thead th { color: var(--mf-slate); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
/* Round three (docs/SPRINTS-PAGES-BRIEF.md 10A): chart and diagram figures, drawn by blocks-svg.js as inline SVG. */
.et-bk-chart svg, .et-bk-diagram svg { display: block; width: 100%; height: auto; margin: 4px 0 0; }
.et-bk-diagram figcaption { margin-top: 10px; font-size: 13px; color: var(--mf-slate); }
.et-bk-fallback { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.et-bk-check ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.et-bk-check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.et-bk-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mf-pine); flex: none; }
.et-bk-check input:checked + span { color: var(--mf-slate); text-decoration: line-through; }
.et-bk-text { margin: 0; white-space: pre-wrap; font: 14px/1.55 var(--mf-font-body); background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 10px; padding: 12px 14px; max-height: 420px; overflow: auto; }
.et-bk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.et-bk-note { font-size: 13px; color: var(--mf-slate); }
.et-bk-worksheet { display: grid; gap: 10px; }
.et-bk-field { display: grid; gap: 5px; font-weight: 600; font-size: 14px; }
.et-bk-action { border-color: color-mix(in srgb, var(--mf-pine) 40%, var(--mf-limestone)); background: color-mix(in srgb, var(--mf-moss) 8%, var(--mf-surface)); }
/* Brief section 12: the code block (a file to paste into a tool), its sandboxed HTML preview, and the improve row
   under every prompt and code block (the same closed row as the agents', inside the block, under its foot). */
.et-bk-file { margin: -2px 0 6px; }
.et-bk-file-name { display: inline-block; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--mf-ink); background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 6px; padding: 2px 8px; overflow-wrap: anywhere; }
.et-bk-where { margin: 0 0 10px; font-size: 14px; color: var(--mf-slate); }
.et-bk-where b { color: var(--mf-ink); font-weight: 600; }
/* A grid item's min-width is auto, so a long line would widen the block past its card: pin it, and wrap the code
   (the copy is the original text either way). */
.et-bk-list > .et-bk, .et-bk .et-bk { min-width: 0; }
.et-bk-code-text { font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; max-height: 360px; }
.et-bk-preview { margin-top: 12px; border: 1px solid var(--mf-limestone); border-radius: 10px; overflow: hidden; background: #fff; }
.et-bk-preview[hidden] { display: none; }
.et-bk-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; font-size: 12px; font-weight: 600; color: var(--mf-slate); background: var(--mf-canvas); border-bottom: 1px solid var(--mf-limestone); }
.et-bk-preview-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-bk-preview-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--mf-slate); font-size: 20px; line-height: 1; cursor: pointer; }
.et-bk-preview-x:hover { background: var(--mf-limestone); color: var(--mf-ink); }
.et-bk-preview-x:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 1px; }
.et-bk-preview iframe { display: block; width: 100%; height: 320px; border: 0; background: #fff; color-scheme: light; }
.et-bk > .et-xp-improve { margin-top: 14px; }
@media print {
  .et-bk-preview, .et-bk > .et-xp-improve, [data-et-bk-preview] { display: none !important; }
  .et-bk-code-text { max-height: none; }
}
.et-bk-act-text { margin: 0; font-weight: 600; font-size: 16px; }
.et-bk-action[data-done="1"] .et-bk-act-text { color: var(--mf-slate); }
.et-bk-action [aria-pressed="true"] { background: var(--mf-pine); color: var(--mf-canvas); border-color: var(--mf-pine); }
.et-bk-cal { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.et-bk-cal li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--mf-limestone); }
.et-bk-cal-day { font-weight: 700; display: grid; }
.et-bk-cal-day small { font-weight: 400; color: var(--mf-slate); }
.et-bk-mirror { background: color-mix(in srgb, var(--mf-sky-light) 40%, var(--mf-surface)); }
.et-bk-mirror h3 { margin: 0 0 10px; font-size: 16px; }
.et-bk-mirror dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.et-bk-mirror dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-slate); }
.et-bk-mirror dd { margin: 2px 0 0; font-weight: 600; }
.et-bk-q { margin: 0 0 10px; font-weight: 600; }
.et-bk-opts { display: grid; gap: 8px; }
.et-bk-opt { text-align: left; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); color: var(--mf-ink); cursor: pointer; }
.et-bk-opt:hover:not(:disabled) { border-color: var(--mf-pine); }
.et-bk-opt[data-mark="right"] { border-color: var(--mf-pine); background: #DDEFE1; }
.et-bk-opt[data-mark="wrong"] { border-color: var(--mf-honey); background: #F3E6C8; }
.et-bk-feedback { margin: 10px 0 0; }
@media (max-width: 560px) {
  .et-bk { padding: 14px; }
  .et-bk-mirror dl { grid-template-columns: 1fr; }
  .et-bk-cal li { grid-template-columns: 1fr; gap: 2px; }
}

/* The next-sprint dialog. */
.et-next { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 18px; padding: 0; box-shadow: var(--mf-shadow-card); background: var(--mf-surface); color: var(--mf-ink); }
.et-next::backdrop { background: rgba(20, 28, 24, .45); }
.et-next-form { padding: 22px 22px 20px; display: grid; gap: 14px; }
.et-next-form h2 { margin: 0; font-size: 22px; }
.et-next-form h3 { margin: 0 0 8px; font-size: 15px; }
.et-next-rows { display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.et-next-row { display: grid; gap: 3px; text-align: left; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); color: var(--mf-ink); cursor: pointer; }
.et-next-row span { color: var(--mf-slate); font-size: 14px; }
.et-next-row .et-next-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-pine); }
.et-next-row[aria-pressed="true"], .et-next-goal[aria-pressed="true"] { border-color: var(--mf-pine); background: color-mix(in srgb, var(--mf-moss) 14%, var(--mf-surface)); }
.et-next-goals { display: flex; flex-wrap: wrap; gap: 8px; }
.et-next-goals h3 { flex-basis: 100%; }
.et-next-goal { font: inherit; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); color: var(--mf-ink); cursor: pointer; }

/* D680: the connector. A quiet card under the plan header (owner's view only), a badge on a plan step the connector
   reported on, and its dialog (the next-sprint dialog's frame, .et-next): two app tabs, three numbered steps. */
.et-conn-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--mf-limestone); border-radius: 12px; background: color-mix(in srgb, var(--mf-sky-light) 30%, var(--mf-surface)); }
.et-conn-logos { display: inline-flex; gap: 4px; }
.et-conn-text { min-width: 0; display: grid; gap: 2px; }
.et-conn-text p { margin: 0; font-size: 14px; }
.et-conn-hint, .et-conn-latest { color: var(--mf-slate); }
.et-conn-status { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--mf-ink); }
.et-conn-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mf-pine); }
.et-plan-conn { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding: 3px 8px; border-radius: 999px; color: var(--mf-slate); background: var(--mf-limestone); }
.et-plan-conn[data-status="done"] { color: var(--mf-pine); background: color-mix(in srgb, var(--mf-moss) 16%, var(--mf-surface)); }
.et-plan-item a:has(.et-plan-conn) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.et-conn-form { gap: 16px; }
.et-conn-tabs .et-made { min-width: 120px; justify-content: center; }
.et-conn-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.et-conn-steps > li { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--mf-limestone); border-radius: 12px; background: color-mix(in srgb, var(--mf-ink) 5%, var(--mf-surface)); color: var(--mf-ink); }
.et-conn-steps h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; }
.et-conn-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--mf-pine); color: var(--mf-canvas); font-size: 13px; font-weight: 700; }
.et-conn-where { margin: 0; font-size: 14px; color: var(--mf-slate); }
.et-conn-copy { display: flex; gap: 8px; }
.et-conn-copy input { flex: 1; min-width: 0; font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 8px 12px; border: 1px solid var(--mf-limestone); border-radius: 10px; background: var(--mf-surface); color: var(--mf-ink); }
.et-conn-code { margin: 0; font-size: 15px; color: var(--mf-slate); }
.et-conn-code[data-ready] { font: 700 clamp(34px, 7vw, 44px)/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--mf-ink); }
.et-conn-code[data-expired] { opacity: .4; text-decoration: line-through; }
.et-conn-exp { margin: 0; font-size: 13px; color: var(--mf-slate); }
.et-conn-new { font: inherit; font-weight: 600; padding: 0; border: 0; background: none; color: var(--mf-pine); text-decoration: underline; cursor: pointer; }
.et-conn-new:disabled { opacity: .5; cursor: default; }
.et-conn-prompts { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-weight: 600; }
.et-conn-foot { margin: 0; font-size: 13px; color: var(--mf-slate); }
@media (max-width: 720px) {
  .et-conn-card { grid-template-columns: minmax(0, 1fr); }
  .et-conn-logos { display: none; }
  .et-conn-card .btn { justify-self: start; }
  .et-conn-steps > li { padding: 12px; }
  .et-conn-tabs .et-made { min-width: 0; flex: 1; }
}
@media (max-width: 560px) {
  .et-plan-item a:has(.et-plan-conn) { grid-template-columns: minmax(0, 1fr) auto; }
}
@media print {
  .et-conn-card, .et-plan-conn { display: none !important; }
}

@media print {
  .et-sprint-top, .et-plan-actions, .et-bk-foot button, .et-unlock, .et-locked-teaser { display: none !important; }
  .et-bk { break-inside: avoid; }
}
/* A Sprints page has two more rows across the top (the top slot above the title, the plan under it), so the jump
   list starts after them instead of at row 2. */
@media (min-width: 960px) {
  .et-p-results .et-sprint-top, .et-p-results .et-sprint-plan { grid-column: 1 / -1; }
  .et-p-results .fp-stack:has(> .et-sprint-plan) .fp-index-nav { grid-row: auto; }
}
.fp-body a.et-unlock, .et-trial a.et-unlock { color: var(--mf-canvas); text-decoration: none; }

/* Brief section 11: the plugin and the AI agents (sprint-deliverables.js shapes), drawn by results.js. */
.et-xp { margin: 14px 0 18px; }
.et-xp-card, .et-ag { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--mf-limestone); border-radius: 16px; background: var(--mf-surface); }
.et-xp-head { display: grid; gap: 4px; }
.et-xp-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--mf-ink); }
.et-xp-tagline { margin: 0; color: var(--mf-pine); font-weight: 600; }
.et-xp-desc { margin: 0; }
.et-xp-h { margin: 0; font-size: 15px; }
.et-xp-skills { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.et-xp-skills li { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--mf-canvas); border: 1px solid var(--mf-limestone); }
.et-xp-skills li > span:last-child { grid-column: 2; font-size: 14px; color: var(--mf-slate); }
.et-xp-skill-n { grid-row: span 2; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-pine); padding-top: 2px; }
.et-xp-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.et-xp-made { display: flex; flex-wrap: wrap; gap: 8px; }
.et-made { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--mf-limestone); background: var(--mf-canvas); color: var(--mf-ink); cursor: pointer; }
.et-made:hover { border-color: var(--mf-pine); }
.et-made[aria-pressed="true"] { border-color: var(--mf-pine); background: color-mix(in srgb, var(--mf-moss) 14%, var(--mf-surface)); }
.et-xp-logo { width: 18px; height: 18px; flex: none; overflow: visible; }
.et-xp-install { display: grid; gap: 8px; }
.et-xp-install ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.et-xp-install[hidden], .et-ag-install[hidden] { display: none; }
.et-ag-list { display: grid; gap: 16px; }
.et-ag-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.et-ag-name { margin: 0; font-size: 18px; }
.et-ag-runs { font-size: 13px; font-weight: 700; color: var(--mf-pine); background: color-mix(in srgb, var(--mf-moss) 14%, var(--mf-surface)); padding: 3px 10px; border-radius: 999px; }
.et-ag-what { margin: 0; }
.et-ag-install p { margin: 0 0 4px; }
/* Brief section 11b: the improve prompt, one quiet closed row inside each agent card and the plugin card. */
.et-xp-improve { margin: 0; padding-top: 12px; border-top: 1px solid var(--mf-limestone); }
.et-xp-improve > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--mf-pine); border-radius: 4px; }
.et-xp-improve > summary::-webkit-details-marker { display: none; }
.et-xp-improve > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease, margin .15s ease; }
.et-xp-improve[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.et-xp-improve > summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
.et-xp-improve > summary:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.et-xp-improve-body { display: grid; gap: 10px; margin-top: 10px; }
.et-xp-improve-body > .et-bk-note { margin: 0; }
.et-xp-improve-copy .et-bk-text { max-height: 260px; }
@media (max-width: 560px) {
  .et-xp-card, .et-ag { padding: 14px; }
  .et-xp-skills li { grid-template-columns: 1fr; }
  .et-xp-skill-n { grid-row: auto; }
  .et-xp-skills li > span:last-child { grid-column: 1; }
}
@media print {
  .et-xp-made, .et-xp-dl, .et-xp-start .et-bk-foot { display: none !important; }
  .et-xp-install[hidden], .et-ag-install[hidden] { display: grid !important; }
  .et-xp-card, .et-ag { break-inside: avoid; }
  .et-xp-improve > :not(summary) { display: none !important; }
  .et-xp-improve > summary::after { display: none; }
}

/* -------------------------------------------------------------------------------------------------
 * Brief 15.2: the trial page shows what is locked. The "What's inside your Sprint" strip (sticky under
 * the header), the frosted locked lessons with ghosts of their blocks, the plugin and the AI agents
 * drawn full size and locked, and the sticky unlock bar. Every surface is a variable with a light
 * default, so a theme layer (sprints-dark.css) recolours it by redefining the variables only.
 * Blur is a filter on placeholder shapes: there is no real text under it. Declared on body, where a
 * theme remaps the --mf-* tokens, so the mixes below follow the theme.
 * ------------------------------------------------------------------------------------------------- */
body {
  --et-ghost-bg: color-mix(in srgb, var(--mf-surface) 72%, transparent);
  --et-ghost-solid: var(--mf-surface);
  --et-ghost-border: color-mix(in srgb, var(--mf-pine) 18%, var(--mf-limestone));
  --et-ghost-ph: color-mix(in srgb, var(--mf-pine) 22%, var(--mf-limestone));
  --et-ghost-ph-soft: color-mix(in srgb, var(--mf-pine) 10%, transparent);
  --et-ghost-ink: var(--mf-ink);
  --et-ghost-muted: var(--mf-slate);
  --et-ghost-accent: var(--mf-pine);
  --et-ghost-accent-bg: color-mix(in srgb, var(--mf-moss) 16%, var(--mf-surface));
  --et-ghost-code-bg: #16241f;
  --et-ghost-code-ph: rgba(214, 236, 226, .5);
  --et-ghost-shadow: 0 10px 30px rgba(14, 59, 46, .08);
  --et-glass-bg: color-mix(in srgb, var(--mf-surface) 78%, transparent);
  --et-glass-border: color-mix(in srgb, var(--mf-pine) 16%, var(--mf-limestone));
}

/* The strip */
.et-strip { min-width: 0; max-width: 100%; position: sticky; top: calc(var(--et-head-sticky, 0px) + var(--et-ribbon-h, 0px)); z-index: 18; margin: 0 -6px; padding: 6px; }
.et-strip-in { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border: 1px solid var(--et-glass-border); border-radius: 18px; background: var(--et-ghost-solid); box-shadow: var(--et-ghost-shadow); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .et-strip-in { background: var(--et-glass-bg); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.et-strip-title { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--et-ghost-muted); white-space: nowrap; }
.et-strip-list { display: flex; gap: 6px; margin: 0; padding: 2px 0; list-style: none; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.et-strip-list::-webkit-scrollbar { display: none; }
.et-strip-list li { flex: none; }
.et-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--et-ghost-border); background: transparent; color: var(--et-ghost-muted); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.et-chip:hover { border-color: var(--et-ghost-accent); }
.et-chip:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 1px; }
.et-chip[data-open="1"] { color: var(--et-ghost-accent); background: var(--et-ghost-accent-bg); border-color: color-mix(in srgb, var(--et-ghost-accent) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-ghost-accent) 10%, transparent); }
.et-chip .et-ic { width: 15px; height: 15px; flex: none; }
.et-chip .et-lock { width: 12px; height: 12px; flex: none; opacity: .75; }
.et-gh-logos { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.et-gh-logos .et-xp-logo { width: 15px; height: 15px; }
.et-xp-logo-claude { color: #d97757; }
.et-xp-logo-chatgpt { color: #10a37f; }
html[data-et-has-strip] .fp-sec, html[data-et-has-strip] .et-sprint-plan, html[data-et-has-strip] .et-sprint-top, html[data-et-has-strip] #et-ghost-plugin, html[data-et-has-strip] #et-ghost-agents { scroll-margin-top: calc(var(--et-head-sticky, 0px) + var(--et-ribbon-h, 0px) + var(--et-strip-h, 0px) + 14px); }
html[data-et-has-strip] .fp-index-nav { top: calc(var(--et-head-sticky, 0px) + var(--et-strip-h, 0px) + 20px); }
@media (min-width: 960px) {
  .et-p-results .et-strip { grid-column: 1 / -1; align-self: start; }
}
@media (min-width: 721px) {
  /* Room for every chip: they wrap instead of scrolling; a phone scrolls the one row sideways. */
  .et-strip-in { align-items: flex-start; }
  .et-strip-title { padding-top: 8px; }
  .et-strip-list { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .et-chip { padding: 5px 10px; font-size: 13px; }
}
@media (max-width: 720px) {
  .et-strip-title { display: none; }
  .et-strip-in { padding: 6px 8px; border-radius: 16px; }
}

/* The frosted locked card */
.et-gh-card { position: relative; display: grid; gap: 14px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--et-ghost-border); background: var(--et-ghost-solid); box-shadow: var(--et-ghost-shadow); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .et-gh-card { background: var(--et-ghost-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.et-gh-card > * { margin: 0; }
.et-gh-card .et-locked-learn { margin: 0; }
.et-gh-card > .et-unlock { justify-self: start; }
.et-gh-card-extra { padding: 16px; }
.et-gh-top { display: flex; }
.et-gh-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--et-ghost-accent); background: var(--et-ghost-accent-bg); border: 1px solid color-mix(in srgb, var(--et-ghost-accent) 25%, transparent); white-space: nowrap; }
.et-gh-top .et-gh-pill { margin-left: 0; }
.et-gh-pill .et-lock { width: 12px; height: 12px; }
.et-gh-line { margin: 0; font-size: 13px; font-style: italic; color: var(--et-ghost-muted); }
.et-gh-list { display: grid; gap: 12px; }
.et-gh { margin: 0; display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--et-ghost-border); background: color-mix(in srgb, var(--et-ghost-solid) 60%, transparent); }
.et-gh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.et-gh-head b { font-size: 15px; color: var(--et-ghost-ink); min-width: 0; }
.et-gh-chip { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--et-ghost-border); color: var(--et-ghost-muted); }
.et-gh-ph { display: block; filter: blur(3px); opacity: .9; pointer-events: none; user-select: none; color: var(--et-ghost-ph); }
.et-gh-bar { display: block; height: 10px; border-radius: 6px; background: var(--et-ghost-ph); }
.et-gh-bar + .et-gh-bar { margin-top: 9px; }
.et-gh-svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; color: var(--et-ghost-ph); }
.et-gh-cap { font-size: 14px; font-weight: 600; color: var(--et-ghost-ink); text-align: center; }
.et-gh-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 0 6px; border-bottom: 2px solid var(--et-ghost-ph); }
.et-gh-bars span { flex: 1 1 0; border-radius: 6px 6px 0 0; background: var(--et-ghost-ph); }
.et-gh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.et-gh-grid span { height: 26px; border-radius: 6px; background: var(--et-ghost-ph-soft); }
.et-gh-grid span.is-head { background: var(--et-ghost-ph); }
.et-gh-check ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.et-gh-check li { display: flex; align-items: center; gap: 10px; }
.et-gh-check .et-gh-bar { margin: 0; }
.et-gh-box { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--et-ghost-ph); }
.et-gh-fields { display: grid; gap: 8px; }
.et-gh-fields .et-gh-bar { margin: 0; }
.et-gh-bar.is-label { height: 9px; }
.et-gh-field { display: block; height: 38px; border-radius: 10px; border: 1.5px solid var(--et-ghost-ph); }
.et-gh-textbox { padding: 14px; border-radius: 10px; background: var(--et-ghost-ph-soft); border: 1px solid var(--et-ghost-border); }
.et-gh-ph.et-gh-textbox, .et-gh-ph.et-gh-codebox { filter: none; }
.et-gh-textbox > *, .et-gh-codebox > * { filter: blur(2.5px); }
.et-gh-codebox { padding: 16px; border-radius: 10px; background: var(--et-ghost-code-bg); filter: none; }
.et-gh-codebox .et-gh-bar { background: var(--et-ghost-code-ph); height: 9px; }
.et-gh .et-bk-foot { margin-top: 0; }
.et-gh-btn[disabled] { display: inline-flex; align-items: center; gap: 7px; opacity: .55; cursor: not-allowed; }
.et-gh-btn .et-lock { width: 13px; height: 13px; }
.et-gh-one { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; }
.et-gh-one .et-ic { width: 16px; height: 16px; color: var(--et-ghost-accent); flex: none; }

/* The plugin and the AI agents, drawn locked */
.et-gh-plugin, .et-gh-ag { border-style: dashed; border-color: var(--et-ghost-border); background: color-mix(in srgb, var(--et-ghost-solid) 70%, transparent); }
.et-gh-plugin-head, .et-gh-ag-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.et-gh-plugin-head .et-gh-logos .et-xp-logo, .et-gh-ag-head .et-gh-logos .et-xp-logo { width: 22px; height: 22px; }
.et-gh-plugin-head .et-xp-name { min-width: 0; flex: 1 1 260px; }
.et-gh-skills li { grid-template-columns: 82px minmax(0, 1fr); }
.et-gh-skills li > b { font-size: 15px; }
.et-gh-skills li > .et-gh-ph { grid-column: 2; padding-top: 4px; }
.et-gh-skills li > .et-gh-ph .et-gh-bar { height: 8px; width: 70% !important; }
.et-gh-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.et-gh-steps .et-bk-note { display: block; margin-top: 2px; }
.et-gh-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--et-ghost-accent); }
.et-gh-ag .et-ag-runs { justify-self: start; margin: 0; }
.et-gh-ag .et-gh { border-style: solid; }
.et-gh-improve .et-gh-textbox { padding: 10px 14px; }

/* The sticky unlock bar */
.et-unlock-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.et-ub-in { pointer-events: auto; display: flex; align-items: center; gap: 12px 18px; max-width: 960px; margin: 0 auto; padding: 12px 14px 12px 20px; border-radius: 20px; border: 1px solid var(--et-glass-border); background: var(--et-ghost-solid); box-shadow: 0 14px 40px rgba(14, 59, 46, .18); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .et-ub-in { background: var(--et-glass-bg); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); }
}
.et-ub-price { margin: 0; flex: none; display: grid; line-height: 1.15; }
.et-ub-price span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--et-ghost-muted); }
.et-ub-price b { font-size: 22px; color: var(--et-ghost-ink); }
.et-ub-line { margin: 0; flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--et-ghost-ink); }
.et-ub-in .et-unlock { flex: none; }
html[data-et-has-unlock-bar] body { padding-bottom: 104px; }
@media (max-width: 720px) {
  .et-unlock-bar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .et-ub-in { flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; border-radius: 16px; }
  .et-ub-line { order: 3; flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--et-ghost-muted); }
  .et-ub-price b { font-size: 19px; }
  .et-ub-in .et-unlock { margin-left: auto; padding: 10px 16px; font-size: 15px; }
  html[data-et-has-unlock-bar] body { padding-bottom: 132px; }
  .et-gh-card { padding: 14px; }
  .et-gh { padding: 12px; }
  .et-gh-skills li { grid-template-columns: minmax(0, 1fr); }
  .et-gh-skills li > .et-gh-ph { grid-column: 1; }
}
@media print {
  .et-strip, .et-unlock-bar, .et-gh-list, .et-gh-plugin, .et-gh-agents, .et-gh-top { display: none !important; }
  html[data-et-has-unlock-bar] body { padding-bottom: 0; }
}