/* ==========================================================================
   INNER PAGES: documents, accounts, steps, FAQ, forms, tables, articles
   ========================================================================== */

/* ---------- legal documents ---------- */
.doc { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.doc__grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.doc__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: .25rem; padding-left: 1rem; border-left: 1px solid var(--c-line); }
.doc__toc h4 { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; margin-bottom: .5rem; }
.doc__toc a { display: block; padding: .3rem 0; font-size: var(--fs-xs); color: var(--c-ink-4); transition: color var(--dur); }
.doc__toc a:hover, .doc__toc a.is-active { color: var(--c-ink); }
.doc__body { display: grid; gap: 1.1rem; max-width: 62rem; }
.doc__body h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); scroll-margin-top: 6rem; }
.doc__body h3 { font-size: 1.1rem; margin-top: .75rem; }
.doc__body p, .doc__body li { color: var(--c-ink-2); font-size: var(--fs-sm); }
.doc__body ol { counter-reset: item; display: grid; gap: .6rem; }
.doc__body ol > li { position: relative; padding-left: 2.6rem; }
.doc__body ol > li::before { counter-increment: item; content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--f-mono); font-size: var(--fs-cap); color: var(--c-accent); letter-spacing: .06em; }
.doc__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-4); padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-line); }
.doc__note { padding: 1rem 1.25rem; border-radius: var(--radius); background: rgb(var(--rgb-accent) / .06); border: 1px solid rgb(var(--rgb-accent) / .2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.doc th, .doc td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.doc th { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-4); font-weight: 500; }
@media (max-width: 60rem) { .doc__grid { grid-template-columns: 1fr; } .doc__toc { position: static; border-left: 0; padding-left: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; } .doc__toc h4 { width: 100%; } }

/* ---------- legal index cards ---------- */
.legal-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.legal-card { display: grid; gap: .75rem; align-content: start; }
.legal-card .list { margin-top: .25rem; }
.legal-card .text-link { margin-top: auto; padding-top: .75rem; }

/* ---------- account cards ---------- */
.acct-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.acct { position: relative; display: grid; gap: 1rem; align-content: start; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: 1rem; border: 1px solid var(--c-line); background: linear-gradient(180deg, rgb(var(--rgb-surface) / .66), rgb(var(--rgb-surface) / .42)); backdrop-filter: blur(14px); overflow: hidden; transition: transform .35s var(--ease-out), border-color var(--dur); }
.acct::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(24rem circle at var(--hx, 50%) var(--hy, 0%), rgb(var(--rgb-accent) / .14), transparent 55%); transition: opacity var(--dur); pointer-events: none; }
.acct:hover { transform: translateY(-4px); border-color: rgb(var(--rgb-accent) / .4); }
.acct:hover::before { opacity: 1; }
.acct--featured { border-color: rgb(var(--rgb-accent) / .45); box-shadow: 0 0 0 1px rgb(var(--rgb-accent) / .1), 0 40px 80px -40px rgb(var(--rgb-accent) / .4); }
.acct__tier { font-family: var(--f-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: .04em; color: var(--c-ink); }
.acct__tagline { color: var(--c-accent-soft); font-weight: 600; font-size: var(--fs-sm); }
.acct__text { color: var(--c-ink-3); font-size: var(--fs-sm); }
.acct__label { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-4); margin-top: .5rem; }
.acct__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--c-line); color: var(--c-ink-3); font-size: var(--fs-xs); }
.acct__bar { height: 3px; border-radius: 2px; background: rgb(var(--rgb-accent-soft) / .12); overflow: hidden; }
.acct__bar i { display: block; height: 100%; width: var(--w, 40%); background: linear-gradient(90deg, var(--c-accent-deep), var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) .2s; }
.is-in .acct__bar i { transform: scaleX(1); }
@media (max-width: 60rem) { .acct-grid { grid-template-columns: 1fr; } }

/* ---------- numbered steps ---------- */
.steps { position: relative; display: grid; gap: 0; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--c-line); }
.step:last-child { border-bottom: 1px solid var(--c-line); }
.step__num { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .12em; color: var(--c-accent); padding-top: .35rem; }
.step__num::before { counter-increment: step; content: "0" counter(step); font-size: 1.6rem; font-family: var(--f-display); font-weight: 300; color: var(--c-ink-4); display: block; line-height: 1; margin-bottom: .2rem; transition: color .35s var(--ease), font-weight .35s; }
.step.is-on .step__num::before { color: var(--c-accent); font-weight: 600; } /* the row being read */
.step.is-on .step__title { color: var(--c-ink); }
.step__title { font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; color: var(--c-ink); }
.step__text { color: var(--c-ink-3); font-size: var(--fs-sm); margin-top: .4rem; max-width: 46rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .5rem; }
.faq__item { border: 1px solid var(--c-line); border-radius: var(--radius); background: rgb(var(--rgb-surface) / .35); overflow: hidden; transition: border-color var(--dur); }
.faq__item[open] { border-color: rgb(var(--rgb-accent) / .35); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 600; color: var(--c-ink); font-size: 1rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--c-accent); transition: transform .3s var(--ease); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 1.25rem 1.1rem; color: var(--c-ink-3); font-size: var(--fs-sm); display: grid; gap: .6rem; }

/* ---------- contact form ---------- */
.form { display: grid; gap: 1rem; }
.form__fields { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form__field { display: grid; gap: .4rem; }
.form__field--wide { grid-column: 1 / -1; }
.form label { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-4); }
.form input, .form select, .form textarea { width: 100%; padding: .8rem .95rem; border-radius: var(--radius-sm); border: 1px solid var(--c-line-strong); background: rgb(var(--rgb-base) / .6); color: var(--c-ink); font: inherit; font-size: var(--fs-sm); transition: border-color var(--dur), box-shadow var(--dur); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: rgb(var(--rgb-accent) / .7); box-shadow: 0 0 0 3px rgb(var(--rgb-accent) / .15); }
.form textarea { min-height: 8rem; resize: vertical; }
.form select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a8b3bd' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right .9rem center; }
.form__check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--c-ink-3); }
.form__check input { width: 1rem; height: 1rem; margin-top: .2rem; accent-color: var(--c-accent); }
.form__check a { color: var(--c-accent); }
.form__actions { display: flex; gap: 1rem; align-items: center; }
.form__done { padding: 1.25rem 1.5rem; border-radius: var(--radius); border: 1px solid rgb(var(--rgb-cool) / .4); background: rgb(var(--rgb-cool) / .08); color: var(--c-ink); }
@media (max-width: 40rem) { .form__fields { grid-template-columns: 1fr; } }

.contact-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.contact-card { display: grid; gap: .5rem; align-content: start; }
.contact-card__icon { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: grid; place-items: center; background: rgb(var(--rgb-accent) / .1); border: 1px solid rgb(var(--rgb-accent) / .25); color: var(--c-accent); margin-bottom: .4rem; }
.contact-card__icon svg { width: 1.2rem; height: 1.2rem; }
.contact-card__value { font-family: var(--f-display); font-weight: 700; color: var(--c-ink); font-size: 1.05rem; }
.contact-card__text { color: var(--c-ink-3); font-size: var(--fs-xs); }

.details { display: grid; gap: .5rem; font-size: var(--fs-sm); }
.details div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--c-line); }
.details dt { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-4); }
.details dd { margin: 0; color: var(--c-ink); }
@media (max-width: 40rem) { .details div { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- tables (calendar) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: rgb(var(--rgb-surface) / .35); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); min-width: 46rem; }
.table th, .table td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.table th { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-4); font-weight: 500; }
.table tbody tr:hover { background: rgb(var(--rgb-accent-soft) / .04); }
.table .mono { color: var(--c-ink-3); }
.imp { display: inline-flex; gap: 2px; }
.imp i { width: .35rem; height: .8rem; border-radius: 1px; background: rgb(var(--rgb-accent-soft) / .14); }
.imp--3 i:nth-child(-n+3), .imp--2 i:nth-child(-n+2), .imp--1 i:nth-child(1) { background: var(--c-accent); }
.imp--3 i { background: var(--c-short); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip { display: inline-flex; align-items: center; padding: .4rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line-strong); font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); background: rgb(var(--rgb-surface) / .4); transition: color var(--dur), border-color var(--dur), background var(--dur); }
.chip.is-active, .chip:hover { color: var(--c-ink); border-color: rgb(var(--rgb-accent) / .6); background: rgb(var(--rgb-accent) / .08); }
.filters__group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filters__label { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-4); margin-right: .3rem; }

/* ---------- article / news cards ---------- */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.card { display: grid; gap: .7rem; align-content: start; }
.card__meta { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
.card__meta span:last-child { color: var(--c-ink-4); }
.card__title { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; color: var(--c-ink); letter-spacing: -.01em; }
.card__text { color: var(--c-ink-3); font-size: var(--fs-sm); }
.card__source { color: var(--c-ink-4); font-size: var(--fs-cap); }
.card .text-link { margin-top: .3rem; }

/* ---------- level tiles (education) ---------- */
.levels { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.level { display: grid; gap: .8rem; align-content: start; }
.level__meta { display: flex; gap: 1.25rem; font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-4); padding-top: .75rem; border-top: 1px solid var(--c-line); margin-top: .5rem; }
.level__meta b { color: var(--c-ink); font-weight: 500; }
@media (max-width: 56rem) { .levels { grid-template-columns: 1fr; } }

/* ---------- quote widgets (analytics) ---------- */
.quotes { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.quote { display: grid; gap: .35rem; padding: 1rem 1.1rem; }
.quote__sym { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .12em; color: var(--c-ink-4); }
.quote__px { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; color: var(--c-ink); letter-spacing: -.01em; }
.quote__chg { font-family: var(--f-mono); font-size: var(--fs-cap); }
.quote__chg.up { color: var(--c-long); } .quote__chg.down { color: var(--c-short); }
.quote svg { width: 100%; height: 2.2rem; margin-top: .3rem; }
.quote svg path { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.quote.up svg path { stroke: var(--c-long); } .quote.down svg path { stroke: var(--c-short); }

/* ---------- instrument pair list ---------- */
.pairs { display: grid; gap: .5rem; }
.pair { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; align-items: center; padding: .85rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: rgb(var(--rgb-surface) / .35); transition: border-color var(--dur), transform .3s var(--ease-out); }
.pair:hover { border-color: rgb(var(--rgb-accent) / .4); transform: translateX(4px); }
.pair__sym { font-family: var(--f-mono); font-weight: 500; color: var(--c-ink); letter-spacing: .06em; }
.pair__name { color: var(--c-ink-3); font-size: var(--fs-sm); }
.pair__tag { font-family: var(--f-mono); font-size: var(--fs-cap); letter-spacing: .1em; color: var(--c-accent); }
@media (max-width: 40rem) { .pair { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- category groups (commodities / etf) ---------- */
.groups { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.group { display: grid; gap: .6rem; align-content: start; }
.group__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.group__tags span { padding: .3rem .65rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line-strong); font-size: var(--fs-xs); color: var(--c-ink-2); }

/* ---------- key/value "factors" ---------- */
.factors { display: grid; gap: 0; }
.factor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--c-line); }
.factor:last-child { border-bottom: 1px solid var(--c-line); }
.factor__title { font-family: var(--f-display); font-weight: 700; color: var(--c-ink); font-size: 1.05rem; }
.factor__text { color: var(--c-ink-3); font-size: var(--fs-sm); }
@media (max-width: 40rem) { .factor { grid-template-columns: 1fr; gap: .4rem; } }

/* ---------- pillars (security): five columns connected by a line ---------- */
.pillars { position: relative; display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pillar { display: grid; gap: .6rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--c-line); position: relative; }
.pillar::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.is-in .pillar::before { transform: scaleX(1); }
.is-in .pillar:nth-child(2)::before { transition-delay: .15s; } .is-in .pillar:nth-child(3)::before { transition-delay: .3s; } .is-in .pillar:nth-child(4)::before { transition-delay: .45s; } .is-in .pillar:nth-child(5)::before { transition-delay: .6s; }
.pillar__num { font-family: var(--f-mono); font-size: var(--fs-cap); color: var(--c-accent); letter-spacing: .12em; }
.pillar__title { font-family: var(--f-display); font-weight: 700; color: var(--c-ink); font-size: 1rem; }
.pillar__text { color: var(--c-ink-3); font-size: var(--fs-xs); }
@media (max-width: 60rem) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .pillars { grid-template-columns: 1fr; } }

/* ---------- inner page hero art ---------- */
.hero-art { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* the chart lines run across the whole width of the hero, from edge to edge, low in the frame */
.hero-art svg { position: absolute; left: -3%; right: auto; bottom: -6%; top: auto; width: 106%; max-width: none; height: auto; transform: scaleY(.36); transform-origin: 50% 100%; opacity: .9; } /* the lines cross the whole screen from edge to edge, below the text */
.hero-art .grid-line { stroke: rgb(var(--rgb-accent-soft) / .09); stroke-width: 1; }
.hero-art .line { stroke: var(--c-accent); stroke-width: 1.6; fill: none; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgb(var(--rgb-accent) / .5)); }
.hero-art .line--soft { stroke: rgb(var(--rgb-cool) / .8); stroke-width: 1.2; filter: none; }
.hero-art .area { fill: url(#areaFill); }
.hero-art .dot { fill: var(--c-accent); }
@media (max-width: 56rem) { .hero-art svg { left: -6%; right: auto; width: 112%; max-width: none; bottom: -2%; transform: scaleY(.55); opacity: .8; } } /* phones: the lines run across the whole screen, edge to edge */

/* ==========================================================================
   MEDIA: floating objects, image bands, airy text columns
   ========================================================================== */
.hero-media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-media img { position: absolute; display: block; }
.hero-media--rock img { right: -6%; top: 12%; width: min(58vw, 54rem); filter: drop-shadow(0 30px 60px rgb(0 0 0 / .6)); animation: media-bob 9s ease-in-out infinite; }
.hero-media--phone img { right: 4%; top: 6%; width: min(38vw, 30rem); animation: media-bob 7s ease-in-out infinite; }
.hero-media--tile img { right: 5%; top: 50%; width: min(34vw, 26rem); aspect-ratio: 1; object-fit: cover; border-radius: 1.5rem; transform: translateY(-50%) rotate(-5deg); box-shadow: 0 40px 90px -30px rgb(var(--rgb-accent) / .45), 0 0 0 1px rgb(255 255 255 / .08); animation: media-tilt 10s ease-in-out infinite; }
@keyframes media-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes media-tilt { 0%, 100% { transform: translateY(-50%) rotate(-5deg); } 50% { transform: translateY(-54%) rotate(-2deg); } }
@media (max-width: 56rem) {
  .hero-media--rock img { right: -30%; top: 50%; width: 110vw; opacity: .6; }
  .hero-media--phone img { right: -10%; top: 45%; width: 60vw; opacity: .7; }
  .hero-media--tile img { right: -8%; top: 62%; width: 50vw; opacity: .8; }
}

.media-band { position: relative; padding: clamp(5rem, 10vw, 9rem) 0; overflow: hidden; isolation: isolate; }
.media-band__img { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat; filter: saturate(.9); }
.media-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--rgb-base) / .96) 0%, rgb(var(--rgb-base) / .86) 45%, rgb(var(--rgb-base) / .55) 100%), linear-gradient(180deg, var(--c-base) 0%, transparent 18%, transparent 82%, var(--c-base) 100%); }
.media-band--photo { padding: clamp(6rem, 14vw, 12rem) 0; }
.media-band--photo .media-band__img { filter: saturate(.7) brightness(.8); }
.media-band--photo::after { background: linear-gradient(90deg, rgb(var(--rgb-base) / .92) 0%, rgb(var(--rgb-base) / .7) 50%, rgb(var(--rgb-base) / .35) 100%), linear-gradient(180deg, var(--c-base) 0%, transparent 25%, transparent 75%, var(--c-base) 100%); }
.media-band__quote { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.25; letter-spacing: -.015em; color: var(--c-ink); max-width: 30ch; }

.media-strip { height: clamp(14rem, 28vw, 22rem); background-position: center 40%; background-size: cover; background-repeat: no-repeat; position: relative; }
.media-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-base) 0%, rgb(var(--rgb-base) / .35) 35%, rgb(var(--rgb-base) / .35) 65%, var(--c-base) 100%); }

/* airy columns: text floats on the canvas instead of sitting in a box */
.airy { padding: 0; }
.two-col--airy { position: relative; }
.two-col--airy::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--c-line) 20%, var(--c-line) 80%, transparent); }
@media (max-width: 56rem) { .two-col--airy::before { display: none; } }
.two-col > .airy:nth-child(2) { padding-left: clamp(0rem, 3vw, 2rem); }

/* features: bare, with a top rule instead of a box */
.feature { padding: 1.1rem 0 0; border: 0; border-top: 1px solid var(--c-line); background: none; border-radius: 0; }
.feature__num { margin-bottom: .5rem; }
/* instrument rows: hairline instead of a box */
.pair { background: none; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; padding: .9rem .25rem; }
.pair:hover { transform: translateX(6px); border-color: rgb(var(--rgb-accent) / .5); }

/* ---------- hero backgrounds: image or video behind the heading ---------- */
.page-hero--media { overflow: hidden; isolation: isolate; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero__bg img, .page-hero__bg video { position: absolute; top: -6%; height: 112%; width: 70%; left: 42%; object-fit: cover; object-position: 50% center; opacity: .85;
  /* the clip dissolves into the dark well before the section edge: no bright seam at the bottom */
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 58%, transparent 94%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 58%, transparent 94%); }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-base) 0%, rgb(var(--rgb-base) / .96) 34%, rgb(var(--rgb-base) / .5) 60%, rgb(var(--rgb-base) / .15) 85%, rgb(var(--rgb-base) / .5) 100%), linear-gradient(180deg, var(--c-base) 0%, transparent 20%, transparent 55%, var(--c-base) 90%); }
.page-hero--photo .page-hero__bg img { filter: saturate(.75) brightness(.85); opacity: .9; }
.page-hero--video .page-hero__bg video { width: 82%; left: 30%; object-position: 50% center; } /* 85% of the frame stays visible: the nose is in, the corner mark is out */ /* right edge of the clip runs off-screen */
.page-hero--media .page-hero__content { position: relative; z-index: 1; }
.hero-art--hidden { display: none; }
@media (max-width: 56rem) {
  .page-hero__bg img, .page-hero__bg video { width: 130%; left: 0; opacity: .5; }
  .page-hero__bg::after { background: linear-gradient(180deg, rgb(var(--rgb-base) / .92), rgb(var(--rgb-base) / .7) 60%, var(--c-base) 100%); }
}

/* ---------- a rock drifting through empty space, tied to nothing ---------- */
.space-rock { position: absolute; width: var(--w, 30vw); max-width: 40rem; z-index: 0; pointer-events: none; opacity: .75; }
.space-rock--right { right: -8%; top: 0; }
.space-rock--left { left: -10%; top: 0; transform: scaleX(-1); }
/* sections that carry a rock open with extra empty space so the rock floats clear of any text */
.space-rock img { width: 100%; filter: drop-shadow(0 30px 60px rgb(0 0 0 / .7)); animation: media-bob 11s ease-in-out infinite; }
.section { position: relative; }
@media (max-width: 56rem) { .space-rock { opacity: .4; width: 55vw; } }

/* phones: the clip becomes its own block above the heading instead of a faded backdrop */
@media (max-width: 56rem) {
  .page-hero--video { padding-top: 0; }
  .page-hero--video .page-hero__bg { position: relative; inset: auto; height: 72vw; min-height: 15rem; margin: 0 calc(var(--edge) * -1) 1.5rem; width: auto; }
  .page-hero--video .page-hero__bg video { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; opacity: .95; object-position: 58% center;
    mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); }
  .page-hero--video .page-hero__bg::after { background: linear-gradient(180deg, rgb(var(--rgb-base) / .35) 0%, transparent 35%, transparent 70%, var(--c-base) 100%); }
  .page-hero--video .page-hero__content { padding-top: 0; }
}

/* the full introduction lives below the hero: a label on the left, the paragraphs on the right */
.intro-more { padding-top: clamp(2rem, 6vh, 4rem); }
.intro-more__grid { display: grid; grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.intro-more__text { display: grid; gap: 1rem; max-width: 62rem; }
.intro-more__text .lead { color: var(--c-ink-2); }
@media (max-width: 56rem) { .intro-more__grid { grid-template-columns: 1fr; gap: 1rem; } }

/* the chart art in page heroes: lines only, no grid behind them */
.hero-art .grid-line { display: none; }

/* no floating rocks on the inner pages */
.page--inner .space-rock, .page--doc .space-rock { display: none; }

/* video heroes: no painted overlay (its edge shows against the page gradient) and no mask on the <video> itself
   (the hardware video layer smears the edge row into a green line). the outer box fades the clip vertically,
   the inner box fades it towards the headline; both are plain divs */
.page-hero--video .page-hero__bg::after { display: none; }
.page-hero--video .page-hero__bg { mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .35) 12%, #000 30%, #000 52%, rgb(0 0 0 / .35) 72%, transparent 88%); -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .35) 12%, #000 30%, #000 52%, rgb(0 0 0 / .35) 72%, transparent 88%); }
.page-hero--video .page-hero__fade { position: absolute; inset: 0; mask-image: linear-gradient(90deg, transparent 22%, rgb(0 0 0 / .25) 40%, rgb(0 0 0 / .85) 62%, #000 82%, rgb(0 0 0 / .6) 100%); -webkit-mask-image: linear-gradient(90deg, transparent 22%, rgb(0 0 0 / .25) 40%, rgb(0 0 0 / .85) 62%, #000 82%, rgb(0 0 0 / .6) 100%); }
.page-hero--video .page-hero__bg video { mask-image: none; -webkit-mask-image: none; top: 4%; height: 92%; }
@media (max-width: 56rem) {
  .page-hero--video .page-hero__bg { mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 68%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 68%, transparent 100%); }
  .page-hero--video .page-hero__fade { mask-image: none; -webkit-mask-image: none; }
  .page-hero--video .page-hero__bg video { mask-image: none; -webkit-mask-image: none; top: 0; height: 100%; }
}

/* hero art, two kinds.
   charts: a band across the lower part of the first screen, from the left edge of the screen to the right edge,
   stretched horizontally only (strokes keep their width), always below the buttons.
   emblems (circles, arches, the document stack): drawn whole on the right, never cropped */
.hero-art--chart svg { left: 0; right: 0; width: 100%; max-width: none; top: auto; bottom: 3%; height: 30%; transform: none; opacity: .9; }
.hero-art--chart .line, .hero-art--chart .line--soft { vector-effect: non-scaling-stroke; }
.hero-art--chart .dot { display: none; }
.hero-art--emblem svg { left: auto; right: 2%; top: 50%; bottom: auto; width: auto; height: min(62vh, 34rem); max-width: 46vw; transform: translateY(-50%); opacity: .9; }
@media (max-width: 56rem) {
  .hero-art--chart svg { left: 0; width: 100%; bottom: 2%; height: 22%; transform: none; opacity: .8; }
  .hero-art--emblem svg { right: 50%; top: auto; bottom: 2%; height: 26vh; max-width: 90vw; transform: translateX(50%); opacity: .45; }
}
/* the stroke "draw" animation measures dashes in viewBox units, which no longer match a chart stretched to the
   screen width (it stopped two thirds of the way). charts in the hero simply fade in, fully drawn */
.hero-art--chart path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.hero-art--chart svg { animation: hero-art-in 1.2s var(--ease-out) both .2s; }
@keyframes hero-art-in { from { opacity: 0; transform: translateY(12px); } }

/* video heroes, hard stop: the clip ends at 80% of the hero and the box is clipped there too, so the edge row of the
   hardware video layer (the faint green line some browsers draw) can never reach the bottom of the section */
.page-hero--video .page-hero__bg { bottom: auto; height: 80%; clip-path: inset(0 0 0 0); mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .35) 14%, #000 34%, #000 56%, rgb(0 0 0 / .3) 76%, transparent 92%); -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .35) 14%, #000 34%, #000 56%, rgb(0 0 0 / .3) 76%, transparent 92%); }
.page-hero--video .page-hero__bg video { top: 0; height: 100%; }
@media (max-width: 56rem) { .page-hero--video .page-hero__bg { height: 72vw; clip-path: none; } }
/* numbered lists: the row being read stands out, the others step back a little */
.step > div { transition: opacity .45s var(--ease); }
@media (min-width: 64.01rem) { .steps:has(.is-on) .step:not(.is-on) > div { opacity: .4; } }
.step.is-on .step__num::before { transform: scale(1.12); transform-origin: left center; }
.step__num::before { transition: color .35s var(--ease), transform .35s var(--ease); }

.chip { cursor: pointer; } button.chip { background: none; color: var(--c-ink-3); }
.card[hidden] { display: none; }
.cards__empty { color: var(--c-ink-4); margin-top: 1rem; }

/* emblems: the viewBox now includes the tops of the arches; never clip the drawing */
.hero-art--emblem svg { overflow: visible; }

/* card grids never leave a lonely card in the last row: fixed column counts that divide the sets evenly */
.legal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 64rem) { .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .legal-grid { grid-template-columns: 1fr; } }
.cards[data-cards] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 72rem) { .cards[data-cards] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cards[data-cards] { grid-template-columns: 1fr; } }
/* even rows for small sets: four cards go two by two, six cards three by three */
.legal-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56rem) { .feature-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .legal-grid:has(> :nth-child(4):last-child), .feature-grid:has(> :nth-child(6):last-child) { grid-template-columns: 1fr; } }

/* phones: the phone picture sits under the text at the bottom of the first screen, never over the words;
   emblems are drawn whole across the width */
@media (max-width: 56rem) {
  .page-hero:has(.hero-media--phone) { align-content: start; }
  .hero-media--phone img { right: auto; left: 50%; top: auto; bottom: 3%; width: min(52vw, 15rem); margin-left: calc(min(52vw, 15rem) / -2); opacity: 1; }
  .hero-art--emblem svg { left: 8%; right: auto; width: 84%; height: auto; max-width: none; bottom: 3%; top: auto; transform: none; opacity: .55; }
}
/* phones: emblems hug the right edge of the screen, below the text with air between them */
@media (max-width: 56rem) {
  .hero-art--emblem svg { left: auto; right: -8%; width: 68%; bottom: 2%; opacity: .5; }
  .page-hero:has(.hero-art--emblem) { padding-bottom: 46vw; }
}
/* phones, one rule for every page: the hero block sits in the middle of the first screen.
   the phone picture joins the text as part of that block, on the right, just under the buttons */
@media (max-width: 56rem) {
  .page-hero:has(.hero-media--phone) { align-content: center; }
  .page-hero .hero-media--phone { position: relative; inset: auto; order: 2; height: auto; pointer-events: none; }
  .page-hero .hero-media--phone img { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: .5rem 4% 0 auto; width: min(44vw, 12.5rem); opacity: 1; }
  .page-hero > .container { order: 1; }
}
.doc__meta { flex-wrap: wrap; row-gap: .4rem; }
.doc__meta { min-width: 0; max-width: 100%; } .doc__meta > * { min-width: 0; overflow-wrap: anywhere; } .doc__grid > * { min-width: 0; }
.doc__body { grid-template-columns: minmax(0, 1fr); } .doc__body > * { min-width: 0; } .doc__body table { display: block; overflow-x: auto; max-width: 100%; }