/* ═══════════════════════════════════════════════════════════════════════
   FEATURE VISUALS
   One small, concrete panel per feature, built from the same vocabulary as
   the timeline: real names, real numbers, real filenames. Each panel is held
   between two brackets, like the mark, and deals its rows out when it reaches
   the screen. Nothing abstract, and no product screenshots.
   ═══════════════════════════════════════════════════════════════════════ */
.fvis { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 19px; font-size: 13px;
  box-shadow: 0 1px 2px rgba(22,21,31,.05), 0 26px 60px -34px rgba(113,87,180,.45); }

/* The two brackets. They close around the panel as it arrives. */
.fvis::before, .fvis::after { content: ""; position: absolute; width: 30px; height: 30px;
  border: 2px solid var(--violet); opacity: .3; pointer-events: none; }
.fvis::before { top: -11px; left: -11px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.fvis::after { bottom: -11px; right: -11px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }

/* Motion is opt-in: without JS, or with reduced motion, every row is simply
   there. The .js gate is set by config.js only when it is safe to hide them. */
.js .fvis::before, .js .fvis::after { opacity: 0; transform: translate(6px, 6px); }
.js .fvis::after { transform: translate(-6px, -6px); }
.js .fvis.lit::before, .js .fvis.lit::after {
  transition: opacity .5s ease .5s, transform .5s cubic-bezier(.2,.9,.3,1) .5s; opacity: .3; transform: none; }
.js .fvis > * { opacity: 0; }
.js .fvis.lit > * { animation: fv-in .5s cubic-bezier(.2,.9,.3,1) forwards; }
.fvis > :nth-child(1) { animation-delay: .04s } .fvis > :nth-child(2) { animation-delay: .15s }
.fvis > :nth-child(3) { animation-delay: .26s } .fvis > :nth-child(4) { animation-delay: .37s }
.fvis > :nth-child(5) { animation-delay: .48s } .fvis > :nth-child(6) { animation-delay: .59s }
.fvis > :nth-child(7) { animation-delay: .70s }
@keyframes fv-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.fv-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.fv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex: 0 0 auto;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 45%, transparent); }
.js .fvis.lit .fv-dot { animation: fv-pulse 2.6s ease-out .7s infinite; }
@keyframes fv-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 45%, transparent) }
  70%, 100% { box-shadow: 0 0 0 7px transparent } }
.fv-tag { display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-soft); border-radius: 5px; padding: 2px 7px; margin-right: 7px; }

/* chat */
.fv-msg { margin-bottom: 9px; line-height: 1.5; }
.fv-msg b { display: block; font-size: 11px; color: var(--faint); margin-bottom: 2px; font-weight: 600; }
.fv-msg.us { color: var(--text); padding-left: 11px; border-left: 2px solid var(--violet); }
.fv-msg.us b { color: var(--violet); }
.fv-req { margin-top: 12px; border: 1px dashed var(--line-2); border-radius: 9px; padding: 10px 11px; color: var(--ink); }
.fv-req em { display: block; font-style: normal; margin-top: 7px; font-size: 11px; color: var(--violet); font-weight: 600; }

/* approvals */
.fv-rule { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.fv-rule b { color: var(--ink); }
.fv-card { border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; }
.fv-t { font-weight: 600; color: var(--ink); }
.fv-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fv-route { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--muted); margin: 10px 0; }
.fv-route b { color: var(--ink); }
.fv-sum { background: var(--bg); border-radius: 9px; padding: 10px 11px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* forms */
.fv-field { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fv-field label { font-size: 12px; color: var(--faint); }
.fv-field span { color: var(--ink); text-align: right; }
.fv-arrow { text-align: center; color: var(--violet); margin: 10px 0 8px; font-size: 16px; }
.js .fvis.lit .fv-arrow { animation: fv-in .5s cubic-bezier(.2,.9,.3,1) forwards, fv-drop 1.8s ease-in-out 1s infinite; }
@keyframes fv-drop { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(3px) } }
.fv-out { background: var(--ink); color: #fff; border-radius: 9px; padding: 10px 12px; text-align: center; font-weight: 600; font-size: 12px; }

/* bulk */
.fv-row { display: grid; grid-template-columns: 1fr auto 62px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.fv-row b { font-variant-numeric: tabular-nums; color: var(--ink); }
.fv-row em { font-style: normal; font-size: 11px; color: var(--green); text-align: right; }
.fv-row.bad em { color: #a4442f; } .fv-row.bad b, .fv-row.bad span { color: var(--faint); }
.fv-row.bad { background: color-mix(in srgb, #a4442f 5%, transparent); }
.fv-note { margin-top: 11px; font-size: 12px; color: var(--muted); }

/* catalog */
.fv-price { display: grid; grid-template-columns: 1fr 66px 56px; gap: 8px; padding: 7px 9px; border-radius: 7px; align-items: baseline; color: var(--muted); }
.fv-price em { font-style: normal; font-size: 11px; color: var(--faint); }
.fv-price b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.fv-price.on { background: var(--violet-soft); color: var(--violet); }
.fv-price.on b, .fv-price.on em { color: var(--violet); }
.fv-calc { display: flex; justify-content: space-between; align-items: baseline; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); }
.fv-calc b { font-family: var(--display); font-size: 21px; color: var(--ink); }
.fv-stamp { margin-top: 8px; font-size: 11px; color: var(--green); }

/* repository */
.fv-kv { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.fv-kv span { font-size: 12px; color: var(--faint); } .fv-kv b { color: var(--ink); text-align: right; }
.fv-alert { margin-top: 12px; border-radius: 9px; padding: 10px 11px; font-size: 12px; line-height: 1.5;
  background: color-mix(in srgb, var(--brass) 13%, transparent); color: #7a5a25; }
.fv-alert b { color: #5e4419; }

/* api */
.fv-code { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); background: var(--bg); border-radius: 9px; padding: 12px 13px; overflow-x: auto; }
.fv-code .c1 { color: var(--faint) } .fv-code .c2 { color: var(--violet) } .fv-code .c3 { color: var(--ink) } .fv-code .c4 { color: var(--green) }
.fv-hook { margin-top: 11px; font-size: 12px; color: var(--muted); }

/* ═══ page layout ═══════════════════════════════════════════════════════ */
.f-hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; }
.f-hero h1.display { font-size: clamp(30px, 3.6vw, 42px); max-width: 17ch; }
.f-hero .lead { max-width: 46ch; }

/* The four blocks. Numbered, so a wall of prose reads as a sequence, and each
   one carries a bracket rule that draws itself in when the block arrives. */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 46px; }
.f-block { position: relative; padding-top: 19px; }
.f-block::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--line); }
.f-block::after { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--violet);
  transform-origin: left; }
.js .f-block::after { transform: scaleX(0); }
.js .f-block.lit::after { transition: transform .55s cubic-bezier(.2,.9,.3,1) .1s; transform: none; }
.f-num { display: block; font-size: 11px; letter-spacing: .08em; color: var(--violet); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-bottom: 9px; }
.f-grid h2 { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 8px; color: var(--ink); }
.f-grid p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.f-grid code { background: var(--bg-2); border-radius: 5px; padding: 2px 6px; font-size: .88em; }

/* The plan and the "what it is not" lines, as a pair of held notes rather than
   a bare left border. The bracket is the mark, at note size. */
.f-notes { display: grid; gap: 14px; margin-top: 44px; }
.f-note { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 42px; font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.f-note::before, .f-note::after { position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 26px; line-height: 0; color: var(--violet); opacity: .45; }
.f-note::before { content: "["; left: 19px; }
.f-note::after { content: "]"; right: 19px; }
.f-note b { color: var(--ink); font-weight: 600; }

/* Cross-links. A card that answers when you point at it. */
.card-link { position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card-link::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--violet);
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.9,.3,1); }
.card-link:hover { transform: translateY(-3px); border-color: var(--line-2);
  box-shadow: 0 1px 2px rgba(22,21,31,.05), 0 22px 44px -26px rgba(113,87,180,.5); }
.card-link:hover::before { transform: none; }
a.card-link::after { display: inline-block; margin-top: 10px; transition: transform .22s ease; }
a.card-link:hover::after { transform: translateX(5px); }

/* The lander numbers each feature, so seven sections read as a list and not as
   seven separate pages stacked on top of each other. */
.f-mark { font-size: 11px; letter-spacing: .08em; color: var(--violet); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-bottom: 7px; }

@media (prefers-reduced-motion: reduce) {
  .js .fvis > *, .js .fvis.lit > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js .fvis::before, .js .fvis::after { opacity: .3 !important; transform: none !important; }
  .js .f-block::after { transform: none !important; }
  .js .fvis.lit .fv-dot, .js .fvis.lit .fv-arrow { animation: none !important; }
  a.card-link, a.card-link::after { transition: none !important; }
}
@media (max-width: 900px) {
  .f-hero { grid-template-columns: 1fr; gap: 30px; }
  .f-grid { grid-template-columns: 1fr; gap: 30px; }
  .fvis::before, .fvis::after { display: none; }
  /* On the lander the visual sits left on every other row, which puts it above
     the heading once the grid collapses. Stacked, the words go first. */
  .f-hero > div { order: 1; } .f-hero > .fvis, .f-hero > .f-index { order: 2; }
}

/* ═══ the index on the lander ═══════════════════════════════════════════
   Seven rows, in the order a deal actually moves: what happens before the
   document exists, what happens on the page, what happens after signature.
   It is a table of contents, so it links rather than decorates. */
.f-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.f-index li { border-bottom: 1px solid var(--line); }
.f-index a { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: baseline;
  padding: 13px 8px 13px 2px; text-decoration: none; position: relative; transition: padding-left .2s ease; }
.f-index a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--violet); transform: scaleY(0); transform-origin: top; transition: transform .24s cubic-bezier(.2,.9,.3,1); }
.f-index a:hover { padding-left: 12px; }
.f-index a:hover::before { transform: none; }
.f-ix { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--violet); font-weight: 600; }
.f-iname { font-size: 15.5px; color: var(--ink); font-weight: 500; }
.f-iwhen { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); text-align: right; }
@media (prefers-reduced-motion: reduce) { .f-index a, .f-index a::before { transition: none !important; } }
@media (max-width: 900px) { .f-iwhen { display: none; } }

/* ═══ comparison pages ══════════════════════════════════════════════════
   The hero panel is the table in miniature: their column, then ours. The
   full table below repeats it with headers, because a reader who scrolled
   this far wants the whole thing and not a teaser. */
.fv-cmp { display: grid; grid-template-columns: 1fr 26px 26px; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.fv-cmp i { font-style: normal; text-align: center; font-weight: 700; font-size: 13px; }
.fv-cmp i.y { color: var(--green); } .fv-cmp i.n { color: var(--faint); opacity: .6; }
.fv-cat { padding: 9px 0; border-bottom: 1px solid var(--line); }
.fv-cat b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
.fv-cat span { color: var(--muted); font-size: 12px; line-height: 1.5; }

table.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
table.cmp th, table.cmp td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
table.cmp thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  font-weight: 600; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.cmp thead th.us { color: var(--violet); }
table.cmp tbody th { font-weight: 400; color: var(--text); }
table.cmp td { text-align: center; width: 132px; font-size: 14px; }
table.cmp td.y { color: var(--green); font-weight: 600; }
table.cmp td.n { color: var(--faint); }
table.cmp tbody tr:hover { background: var(--bg); }
table.cmp tbody td:last-child { background: color-mix(in srgb, var(--violet) 4%, transparent); }

.checks-plain { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.checks-plain li { position: relative; padding-left: 21px; color: var(--text); line-height: 1.6; }
.checks-plain li::before { content: "·"; position: absolute; left: 6px; top: -2px; color: var(--violet);
  font-size: 22px; line-height: 1.2; }
.cmp-checked { margin-top: 22px; font-size: 13.5px; line-height: 1.65; color: var(--faint); }
.cmp-checked a { color: var(--violet); }

@media (max-width: 700px) {
  table.cmp { font-size: 14px; }
  table.cmp th, table.cmp td { padding: 11px 10px; }
  table.cmp td { width: 74px; font-size: 13px; }
}
.fv-cmp-h { border-bottom: 1px solid var(--line-2); padding-bottom: 7px; }
.fv-cmp-h i { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  font-weight: 600; writing-mode: horizontal-tb; }
.fv-cmp-h i.us { color: var(--violet); }

/* ═══ the AI page ═══════════════════════════════════════════════════════ */
.fv-in { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.fv-in .att { font-size: 11px; color: var(--muted); background: var(--bg-2); border-radius: 6px;
  padding: 3px 8px; font-variant-numeric: tabular-nums; }
.fv-q { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fv-q b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 8px; font-size: 13px; }
.fv-q .chip { display: inline-block; font-size: 11.5px; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 3px 10px; margin: 0 5px 4px 0; color: var(--muted); }
.fv-q .chip.on { border-color: var(--violet); background: var(--violet-soft); color: var(--violet); font-weight: 500; }
.fv-flag { display: grid; grid-template-columns: 19px 1fr; gap: 10px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.fv-flag b { color: var(--ink); font-weight: 600; }
.fv-flag i { font-style: normal; font-weight: 700; font-size: 11px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; }
.fv-flag i.warn { background: color-mix(in srgb, var(--brass) 26%, transparent); color: #6d5020; }
.fv-flag i.info { background: var(--violet-soft); color: var(--violet); }
/* The model/code table has three real columns of text, so it needs more room
   per cell than a yes/no comparison table. */
table.cmp-wide td { width: auto; text-align: left; }
table.cmp-wide thead th { text-align: left; }
table.cmp-wide tbody td:last-child { background: transparent; }
table.cmp-wide tbody td:nth-child(2) { background: color-mix(in srgb, var(--violet) 4%, transparent); }

/* ═══ the wedge ═════════════════════════════════════════════════════════
   Three parts, because the argument is that everything else does one of
   them. The numbers run 01-03 in the same hand as the feature blocks. */
.wedge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; }
.wedge-part { position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 22px 24px;
  box-shadow: 0 1px 2px rgba(22,21,31,.05), 0 24px 54px -34px rgba(113,87,180,.42); }
.wedge-part::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
  background: var(--violet); border-radius: 0 0 2px 2px; }
.wedge-tag { display: inline-block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; color: var(--violet); background: var(--violet-soft); border-radius: 5px;
  padding: 3px 8px; margin-bottom: 13px; }
.wedge-part .f-num { margin-bottom: 6px; }
.wedge-part h3 { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.28;
  margin: 0 0 9px; color: var(--ink); }
.wedge-part p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.wedge-close { margin: 28px 0 0; font-size: 16px; line-height: 1.65; color: var(--text); max-width: 70ch; }

/* grouped matrix */
table.cmp tr.grp th { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--violet); font-weight: 600; background: var(--bg); padding-top: 17px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line-2); }
table.cmp tbody + tbody tr.grp th { padding-top: 22px; }

/* cost table */
table.cmp-cost td { width: auto; text-align: right; }
table.cmp-cost td.num { font-variant-numeric: tabular-nums; }
table.cmp-cost td.us { color: var(--violet); font-weight: 600; }
table.cmp-cost td.save { color: #a4442f; font-weight: 600; }
table.cmp-cost thead th:not(:first-child) { text-align: right; }
table.cmp-cost tbody td:last-child { background: transparent; }

/* switching steps */
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 15px; }
ol.steps li { counter-increment: s; position: relative; padding-left: 40px; color: var(--muted);
  font-size: 15.5px; line-height: 1.62; }
ol.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-size: 11px; font-weight: 600; color: var(--violet); font-variant-numeric: tabular-nums; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 30px 16px 0; font-size: 16.5px; color: var(--ink);
  position: relative; list-style: none; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 24px; width: 9px; height: 9px;
  border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet);
  transform: rotate(45deg); transition: transform .2s ease; transform-origin: 70% 70%; }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq summary:hover { color: var(--violet); }
.faq p { margin: 0 0 18px; color: var(--muted); font-size: 15.5px; line-height: 1.68; max-width: 72ch; }

.verdict { font-family: var(--display); font-size: 21px; line-height: 1.45; color: var(--ink);
  margin: 10px 0 0; padding-left: 20px; border-left: 2px solid var(--violet); max-width: 64ch; }

@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none !important; } }
@media (max-width: 900px) { .wedge { grid-template-columns: 1fr; gap: 16px; } }

/* ═══ AI demand pages ═══════════════════════════════════════════════════
   The model/code split, side by side. The whole trust argument of this
   product is that these two columns are different, so they are drawn as
   two different things rather than as one list with labels. */
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.split-cols > div { border-radius: 14px; padding: 22px 24px 24px; border: 1px solid var(--line); }
.col-model { background: var(--paper); }
.col-code { background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 22%, transparent); }
.split-cols h3 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  margin: 0 0 15px; color: var(--faint); }
.col-code h3 { color: var(--violet); }
.split-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.split-cols li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--text); }
.split-cols li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--line-2); }
.col-code li::before { background: var(--violet); }

/* worked example */
table.cmp-ex th[scope="row"] { width: 30%; color: var(--ink); font-weight: 600; font-size: 14.5px; }
table.cmp-ex td { width: auto; text-align: left; color: var(--muted); line-height: 1.6; }
table.cmp-ex tbody td:last-child { background: transparent; }

@media (max-width: 900px) { .split-cols { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 700px) { table.cmp-ex th[scope="row"] { width: 38%; } }

/* ═══ answer pages ══════════════════════════════════════════════════════
   Built to be quoted. The answer sits directly under the question with
   nothing above it, because anything above the answer is what gets lifted
   instead of the answer. */
.hero-answer h1.display { font-size: clamp(27px, 3.2vw, 38px); max-width: 21ch; }
.answer-lede { margin-top: 22px; padding: 22px 26px; background: var(--paper);
  border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 0 13px 13px 0;
  box-shadow: 0 1px 2px rgba(22,21,31,.05), 0 22px 48px -32px rgba(113,87,180,.4); }
.answer-lede p { margin: 0; font-size: 17.5px; line-height: 1.66; color: var(--text); }
.answer-block { margin-bottom: 34px; }
.answer-block:last-child { margin-bottom: 0; }

table.cmp-ans td, table.cmp-ans th { text-align: left; }
table.cmp-ans td { width: auto; font-size: 14.5px; color: var(--muted); }
table.cmp-ans th.lead-col { width: 26%; }
table.cmp-ans tbody th { font-weight: 600; color: var(--ink); font-size: 14.5px; }
table.cmp-ans tbody td:last-child { background: transparent; }

.answer-list { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--line); }
.answer-list li { border-bottom: 1px solid var(--line); }
.answer-list a { display: block; padding: 15px 2px; text-decoration: none; color: var(--ink);
  font-size: 16px; transition: padding-left .2s ease; }
.answer-list a:hover { color: var(--violet); padding-left: 9px; }
.answer-list-lg a { padding: 19px 2px; }
.answer-list-lg b { display: block; font-weight: 500; margin-bottom: 5px; }
.answer-list-lg span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.55; font-weight: 400; }
.answer-list-lg a:hover span { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .answer-list a { transition: none !important; } }
/* A quiet line under the answer. Deliberately text, not a button: the answer is
   what this page is for, and a button here competes with it. */
.answer-aside { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--faint); }
.answer-aside a { color: var(--violet); }

/* ═══ template pages ════════════════════════════════════════════════════
   The generator box is the ask, so it sits beside the h1 rather than below
   the fold, prefilled with a real brief for this document type. Submitting
   carries the text through to the app as a prompt, so the visitor lands with
   the document already being written rather than on an empty sign-up form. */
.tpl-gen { position: relative; }
.tpl-form { background: var(--paper); border: 1px solid var(--line); border-radius: 15px;
  padding: 20px 21px 21px;
  box-shadow: 0 1px 2px rgba(22,21,31,.05), 0 28px 60px -34px rgba(113,87,180,.5); }
.tpl-form::before, .tpl-form::after { content: ""; position: absolute; width: 28px; height: 28px;
  border: 2px solid var(--violet); opacity: .3; pointer-events: none; }
.tpl-form::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.tpl-form::after { bottom: -10px; right: -10px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.tpl-form label { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; margin-bottom: 11px; }
.tpl-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; line-height: 1.55;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 13px; resize: vertical; min-height: 84px; }
.tpl-form textarea:focus { outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 15%, transparent); }
.tpl-form .btn { width: 100%; margin-top: 13px; }
.tpl-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--faint); text-align: center; }

/* The numbered section table */
.tpl-n { display: inline-block; font-size: 10.5px; color: var(--violet); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-right: 9px; }
table.cmp-ex th[scope="row"] { vertical-align: top; }

ol.steps li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) { .tpl-form::before, .tpl-form::after { display: none; } }

/* ═══ guides ════════════════════════════════════════════════════════════
   Deliberately a different object from a template page: prose column, a
   summary box at the top for the reader who wants the answer and not the
   walkthrough, then numbered steps each carrying the running example. */
.hero-guide h1.display { font-size: clamp(30px, 3.4vw, 40px); }
.tldr { margin-top: 26px; background: var(--bg-2); border-radius: 14px; padding: 22px 26px 24px; }
.tldr h2 { font-family: var(--font); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--violet); font-weight: 600; margin: 0 0 14px; }
.tldr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tldr li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.tldr li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--violet); }
.running-note { margin: 22px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted);
  padding-left: 18px; border-left: 2px solid var(--line-2); }
.running-note b { color: var(--ink); }

ol.walk { list-style: none; counter-reset: w; padding: 0; margin: 0; }
ol.walk > li { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
ol.walk > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
ol.walk h2 { font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.25;
  margin: 0 0 12px; color: var(--ink); display: flex; gap: 13px; align-items: baseline; }
ol.walk h2 span { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--violet);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }
ol.walk p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.walk-ex { margin-top: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  padding: 15px 17px; font-size: 15px; line-height: 1.6; color: var(--text); }
.walk-ex b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--violet); margin-bottom: 7px; font-weight: 600; }

/* before / after */
.rw { display: grid; gap: 26px; margin-top: 28px; }
.rw-pair { border-top: 1px solid var(--line); padding-top: 22px; }
.rw-before, .rw-after { border-radius: 11px; padding: 14px 16px; margin-bottom: 10px; }
.rw-before { background: color-mix(in srgb, #a4442f 6%, transparent); }
.rw-after { background: color-mix(in srgb, var(--green) 7%, transparent); }
.rw-before span, .rw-after span { display: block; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.rw-before span { color: #a4442f; } .rw-after span { color: var(--green); }
.rw-before p, .rw-after p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.rw-why { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--faint); }

dl.fails { margin: 0; }
dl.fails dt { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--ink);
  margin-top: 24px; }
dl.fails dt:first-child { margin-top: 0; }
dl.fails dd { margin: 7px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }

/* ═══ trade contracts ═══════════════════════════════════════════════════ */
.clause-list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.clause { border-top: 1px solid var(--line); padding-top: 16px; }
.clause .f-num { margin-bottom: 6px; }
.clause h3 { font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.28;
  margin: 0 0 7px; color: var(--ink); }
.clause p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

@media (max-width: 900px) { .clause-list { grid-template-columns: 1fr; gap: 22px; } }