/* Vidiicast website: front page, pricing, use cases, support and legal pages.
   Uses the app's tokens from ui.css (colours, type, buttons) so the site and the app feel like one thing.
   The one loud element is the studio: a black product shot with the red record light. Everything around it
   stays quiet: paper background, ink type, blue only on things you can press. */

body.site { background: var(--bg); }
.site .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.site main { display: block; }

/* ---------- header ---------- */
.site-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--bar); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 0.5px solid var(--sep);
}
.site-bar .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.site .brand { padding: 0; font-size: 17px; }
.site .brand .app-icon { width: 26px; height: 26px; }
.site-nav { display: flex; gap: 24px; font-size: 14px; }
.site-nav a { color: var(--label-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--label); text-decoration: none; }
.site-acts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.site-acts .signin { font-size: 14px; color: var(--label); }
.site-menu { display: none; position: relative; }
.site-menu summary { list-style: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: var(--fill); }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary span, .site-menu summary span::before, .site-menu summary span::after { display: block; width: 15px; height: 1.5px; background: var(--label); border-radius: 1px; position: relative; }
.site-menu summary span::before, .site-menu summary span::after { content: ''; position: absolute; left: 0; }
.site-menu summary span::before { top: -5px; }
.site-menu summary span::after { top: 5px; }
.site-menu nav { position: absolute; right: 0; top: 44px; min-width: 200px; display: grid; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-pop); }
.site-menu nav a { padding: 10px 12px; border-radius: 9px; color: var(--label); font-size: 15px; }
.site-menu nav a:hover { background: var(--fill); text-decoration: none; }
@media (max-width: 760px) {
  .site-nav, .site-acts .signin { display: none; }
  .site-menu { display: block; }
  .site-bar .wrap { gap: 12px; }
  .site-acts { gap: 10px; }
}

/* ---------- type ---------- */
.display { font: 700 clamp(42px, 6.6vw, 80px)/1.02 var(--font-display); letter-spacing: -0.038em; text-wrap: balance; }
.h-sect { font: 700 clamp(30px, 4vw, 44px)/1.08 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.h-feat { font: 700 clamp(24px, 2.8vw, 30px)/1.15 var(--font-display); letter-spacing: -0.022em; text-wrap: balance; }
.lede-xl { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--label-2); max-width: 58ch; text-wrap: pretty; }
.body-l { font-size: 17px; line-height: 1.6; color: var(--label-2); max-width: 52ch; text-wrap: pretty; }
.body-l strong { color: var(--label); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.cta-row .note { font-size: 13px; color: var(--label-2); }
.site .btn.large { min-height: 48px; padding: 12px 24px; }
.site section { scroll-margin-top: 72px; }

/* ---------- hero ---------- */
.hero-site { padding: 84px 0 56px; }
.hero-site .display { max-width: 15ch; }
.hero-site .lede-xl { margin-top: 22px; }
@media (max-width: 600px) { .hero-site { padding: 48px 0 36px; } }

/* ---------- the studio: the product shot ---------- */
.studio-shot {
  --s-bg: #000; --s-tile: #1c1c1e; --s-ink: #f5f5f7; --s-dim: rgba(235, 235, 245, 0.62);
  background: var(--s-bg); color: var(--s-ink); border-radius: 28px; padding: 16px; margin-top: 8px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .studio-shot { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14); } }
.ss-top { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; font-size: 14px; }
.ss-top .app-icon { width: 24px; height: 24px; }
.ss-top .show { font-weight: 600; }
.ss-top .rec { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(240, 96, 90, 0.16); color: #ff8a83; font: 600 13px/1 var(--font-rounded); font-variant-numeric: tabular-nums; }
.ss-top .rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--record); animation: tally 1.8s ease-out infinite; }
.ss-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-tile { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--s-tile); display: grid; place-items: center; overflow: hidden; }
.ss-tile.talking { box-shadow: inset 0 0 0 2px rgba(245, 245, 247, 0.85); }
.ss-tile .face { width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 600 clamp(14px, 2.2vw, 26px)/1 var(--font-display); background: color-mix(in srgb, var(--c) 26%, #1c1c1e); color: var(--c); }
.ss-tile .who { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); font-size: 12px; font-weight: 500; }
.ss-tile .who i { display: inline-flex; gap: 2px; align-items: center; height: 10px; }
.ss-tile .who i b { width: 2px; border-radius: 1px; background: #30d158; }
.ss-lanes { margin-top: 12px; border-radius: 16px; background: var(--s-tile); padding: 6px 14px; }
.ss-lane { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; }
.ss-lane + .ss-lane { border-top: 0.5px solid rgba(255, 255, 255, 0.08); }
.ss-lane .n { font-size: 13px; font-weight: 600; }
.ss-lane .n small { display: block; font-size: 11px; font-weight: 400; color: var(--s-dim); margin-top: 2px; }
.ss-lane .wave { width: 100%; height: 30px; fill: var(--c); }
.ss-lane .up { font: 500 12px/1.2 var(--font-rounded); color: var(--s-dim); text-align: right; font-variant-numeric: tabular-nums; }
.ss-lane .up b { display: block; color: var(--s-ink); font-weight: 600; }
.ss-caption { margin: 14px 4px 2px; font-size: 13px; color: var(--s-dim); }
@media (max-width: 700px) {
  .studio-shot { border-radius: 20px; padding: 10px; }
  .ss-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ss-tile { border-radius: 10px; }
  .ss-tile .who { left: 5px; bottom: 5px; padding: 2px 6px; font-size: 10px; }
  .ss-tile .who i { display: none; }
  .ss-lane { grid-template-columns: 64px minmax(0, 1fr); }
  .ss-lane .up { display: none; }
}
@media (max-width: 420px) { .ss-top .show { display: none; } }

/* ---------- logos of what it works with: plain text, no borrowed logos ---------- */
.works-with { padding: 28px 0 8px; font-size: 14px; color: var(--label-2); }
.works-with b { color: var(--label); font-weight: 600; }

/* ---------- how it works (a real sequence, so it's numbered) ---------- */
.how { padding: 96px 0 24px; }
.how ol { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: step; }
.how li { counter-increment: step; }
.how li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--label); color: var(--bg); font: 700 18px/1 var(--font-rounded); margin-bottom: 18px; }
.how h3 { font: 650 20px/1.25 var(--font-display); letter-spacing: -0.015em; }
.how p { margin-top: 8px; color: var(--label-2); font-size: 16px; line-height: 1.55; }
@media (max-width: 760px) { .how ol { grid-template-columns: 1fr; gap: 28px; } .how { padding-top: 64px; } }

/* ---------- features: text beside a picture of the real thing ---------- */
.features { padding: 72px 0 24px; }
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; padding: 56px 0; }
.feat + .feat { border-top: 0.5px solid var(--sep); }
.feat.flip > :first-child { order: 2; }
.feat .body-l { margin-top: 14px; }
.feat ul.ticklist { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: 15px; }
.feat ul.ticklist li { position: relative; padding-left: 26px; line-height: 1.5; }
.feat ul.ticklist li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--tint-text); border-bottom: 2px solid var(--tint-text); transform: rotate(-45deg); }
@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .feat.flip > :first-child { order: 0; }
}

/* small product pictures used beside features */
.pic { border-radius: 22px; background: var(--surface); padding: 22px; box-shadow: 0 0 0 0.5px var(--sep); }
.pic.dark { background: #000; color: #f5f5f7; box-shadow: none; }
.pic .pic-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--label-2); margin-bottom: 14px; }
.pic.dark .pic-h { color: rgba(235, 235, 245, 0.62); }
.pic .pic-h b { font-size: 15px; color: var(--label); }
.pic.dark .pic-h b { color: #f5f5f7; }

.files { display: grid; gap: 8px; }
.file { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 14px; }
.file .ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--label-2); }
.file .ic svg { width: 18px; height: 18px; }
.file .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .s { font-size: 12px; color: var(--label-2); }
.file .sz { font: 500 13px/1 var(--font-rounded); color: var(--label-2); font-variant-numeric: tabular-nums; }

.notes .sum { font-size: 15px; line-height: 1.55; }
.notes h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.notes .ch { display: grid; grid-template-columns: 52px 1fr; gap: 4px 10px; font-size: 14px; }
.notes .ch span { font: 500 13px/1.5 var(--font-rounded); color: var(--label-2); font-variant-numeric: tabular-nums; }
.notes .clip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 14px; }
.notes .clip span { font: 500 12px/1 var(--font-rounded); color: var(--label-2); white-space: nowrap; }

.cues { display: grid; gap: 6px; }
.cue { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 9px 12px; border-radius: 11px; font-size: 14px; color: rgba(235, 235, 245, 0.62); }
.cue span { font: 600 13px/1.4 var(--font-rounded); font-variant-numeric: tabular-nums; }
.cue.done { text-decoration: line-through; text-decoration-color: rgba(235, 235, 245, 0.3); }
.cue.next { background: #1c1c1e; color: #f5f5f7; }
.nudge-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 18px; border-radius: 16px; background: #fff; color: #1d1d1f; font-weight: 600; font-size: 15px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12); }
.nudge-pill small { font-weight: 400; color: rgba(60, 60, 67, 0.8); font-size: 12px; }

.mail { font-size: 14px; }
.mail .from { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 0.5px solid var(--sep); }
.mail .from .app-icon { width: 30px; height: 30px; }
.mail .from small { display: block; color: var(--label-2); font-size: 12px; }
.mail h4 { font: 700 20px/1.25 var(--font-display); letter-spacing: -0.015em; margin: 18px 0 6px; }
.mail p { color: var(--label-2); line-height: 1.5; }
.mail .when { display: flex; gap: 12px; align-items: center; margin: 16px 0; padding: 12px; border-radius: 12px; background: var(--fill); }
.mail .when .date-chip { background: var(--surface); }
.mail .fake-btn { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--tint); color: var(--on-tint); font-weight: 600; }

/* ---------- use cases ---------- */
.uses { padding: 96px 0 24px; }
.use-list { margin-top: 32px; border-top: 0.5px solid var(--sep); }
.use-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 20px; gap: 24px; align-items: baseline; padding: 26px 4px; border-bottom: 0.5px solid var(--sep); color: var(--label); }
.use-list a:hover { text-decoration: none; background: var(--surface-hover); }
.use-list .t { font: 650 24px/1.2 var(--font-display); letter-spacing: -0.018em; }
.use-list .s { font-size: 16px; color: var(--label-2); line-height: 1.5; }
.use-list svg { width: 18px; height: 18px; color: var(--tint-text); align-self: center; }
@media (max-width: 700px) { .use-list a { grid-template-columns: 1fr 20px; gap: 6px 12px; } .use-list .s { grid-column: 1; } .use-list svg { grid-row: 1 / span 2; grid-column: 2; } }

/* ---------- pricing ---------- */
.price-hero { padding: 72px 0 8px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; max-width: 900px; }
.plan { border-radius: 24px; background: var(--surface); padding: 30px; box-shadow: 0 0 0 0.5px var(--sep); display: flex; flex-direction: column; }
.plan.pick { box-shadow: inset 0 0 0 2px var(--tint); }
.plan .name { display: flex; align-items: center; gap: 10px; font: 700 22px/1.2 var(--font-display); }
.plan .tag { font: 600 12px/1 var(--font); padding: 5px 9px; border-radius: 999px; background: var(--tint-soft); color: var(--tint-text); }
.plan .for { margin-top: 6px; color: var(--label-2); font-size: 15px; }
.plan .amt { margin-top: 24px; display: flex; align-items: baseline; gap: 6px; }
.plan .amt b { font: 700 52px/1 var(--font-display); letter-spacing: -0.04em; }
.plan .amt span { color: var(--label-2); font-size: 15px; }
.plan .yr { margin-top: 6px; font-size: 14px; color: var(--label-2); }
.plan ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; font-size: 15px; }
.plan li { position: relative; padding-left: 26px; line-height: 1.45; }
.plan li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--tint-text); border-bottom: 2px solid var(--tint-text); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; }
.plan .fine { margin-top: 12px; font-size: 13px; color: var(--label-2); text-align: center; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.every { margin-top: 64px; }
.every ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; font-size: 15px; }
.every li { color: var(--label-2); line-height: 1.5; }
.every li b { display: block; color: var(--label); font-weight: 600; }
@media (max-width: 760px) { .every ul { grid-template-columns: 1fr; } }
.compare { width: 100%; margin-top: 20px; border-collapse: collapse; background: var(--surface); border-radius: 18px; overflow: hidden; font-size: 15px; }
.compare th, .compare td { padding: 13px 18px; text-align: left; border-bottom: 0.5px solid var(--sep); }
.compare thead th { font-size: 13px; font-weight: 600; color: var(--label-2); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 24%; }
.compare tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { padding: 88px 0 24px; max-width: 800px; }
.faq details { border-bottom: 0.5px solid var(--sep); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font: 600 17px/1.4 var(--font); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 8px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--label-2); border-bottom: 2px solid var(--label-2); transform: rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details > div { padding: 0 0 22px; color: var(--label-2); font-size: 16px; line-height: 1.6; max-width: 66ch; }
.faq details > div a { color: var(--tint-text); text-decoration: underline; text-underline-offset: 2px; }
.faq .h-sect { margin-bottom: 20px; }

/* ---------- closing call to action ---------- */
.closing { padding: 112px 0 120px; }
.closing .h-sect { max-width: 18ch; }

/* ---------- use case pages ---------- */
.uc-hero { padding: 76px 0 40px; }
.uc-hero .crumb { font-size: 14px; color: var(--label-2); margin-bottom: 16px; }
.uc-hero .display { font-size: clamp(38px, 5.6vw, 68px); max-width: 17ch; }
.uc-hero .lede-xl { margin-top: 20px; }
.get { padding: 72px 0 8px; }
.get ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.get li { padding: 18px 0; border-top: 0.5px solid var(--sep); font-size: 16px; line-height: 1.5; color: var(--label-2); }
.get li b { display: block; color: var(--label); font-weight: 600; font-size: 17px; margin-bottom: 2px; }
@media (max-width: 760px) { .get ul { grid-template-columns: 1fr; } }

/* ---------- support centre ---------- */
.help-hero { padding: 64px 0 8px; }
.help-hero .lede-xl { margin-top: 14px; }
.help-search { margin-top: 28px; max-width: 560px; position: relative; }
.help-search input { width: 100%; font: 400 17px/22px var(--font); padding: 15px 18px 15px 46px; border-radius: 14px; border: 0; background: var(--surface); color: var(--label); box-shadow: 0 0 0 0.5px var(--sep); outline: none; }
.help-search input:focus { box-shadow: 0 0 0 2px var(--tint); }
.help-search input::placeholder { color: var(--placeholder); }
.help-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--label-2); }
.help-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; padding: 48px 0 24px; }
.help-cat h2 { font: 700 20px/1.3 var(--font-display); letter-spacing: -0.012em; margin-bottom: 8px; }
.help-cat ul { list-style: none; margin: 0; padding: 0; }
.help-cat li a { display: block; padding: 12px 0; border-top: 0.5px solid var(--sep); color: var(--label); }
.help-cat li a:hover { text-decoration: none; }
.help-cat li a:hover .t { color: var(--tint-text); }
.help-cat .t { display: block; font-weight: 600; font-size: 16px; }
.help-cat .s { display: block; font-size: 14px; color: var(--label-2); margin-top: 2px; line-height: 1.45; }
.help-none { padding: 24px 0; color: var(--label-2); }
@media (max-width: 760px) { .help-cats { grid-template-columns: 1fr; } }
.help-contact { margin: 40px 0 96px; padding: 28px; border-radius: 22px; background: var(--surface); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.help-contact h2 { font: 700 20px/1.3 var(--font-display); }
.help-contact p { color: var(--label-2); margin-top: 4px; }

/* help articles reuse the legal page typography (.doc) */
.article .crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--label-2); margin-bottom: 18px; }
.article .crumbs a { color: var(--tint-text); text-decoration: none; }
.article ol { margin: 8px 0 0; padding-left: 22px; max-width: 68ch; }
.article ol li + li { margin-top: 8px; }
.article .tip { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--surface); font-size: 15px; max-width: 68ch; }
.article .tip b { color: var(--label); }
.article kbd { font: 600 12px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 0.5px var(--sep), 0 1px 0 var(--sep); }
.help-foot { margin-top: 56px; padding-top: 28px; border-top: 0.5px solid var(--sep); }
.help-foot h2 { margin-top: 0; font-size: 18px; }
.help-foot ul { list-style: none; padding: 0; }
.help-foot .stuck { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: var(--surface); }

/* legal and help pages sit in the site's frame */
.site .doc { padding-bottom: 72px; }

.pic.dark { --s-dim: rgba(235, 235, 245, 0.62); --s-ink: #f5f5f7; }
.pic.dark .ss-lane + .ss-lane { border-top: 0.5px solid rgba(255, 255, 255, 0.08); }
.feat .studio-shot { margin-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.file .t, .file .s { display: block; }

/* ---------- footer ---------- */
.site-foot { border-top: 0.5px solid var(--sep); padding: 48px 0 40px; font-size: 14px; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 48px; }
.foot-brand p { margin-top: 12px; color: var(--label-2); max-width: 30ch; line-height: 1.5; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-cols h2 { font-size: 13px; font-weight: 600; color: var(--label); margin-bottom: 10px; }
.foot-cols a { display: block; padding: 4px 0; color: var(--label-2); overflow-wrap: anywhere; }
.foot-cols a:hover { color: var(--label); }
.foot-legal { grid-column: 1 / -1; padding-top: 20px; border-top: 0.5px solid var(--sep); color: var(--label-2); font-size: 13px; }
@media (max-width: 760px) { .site-foot .wrap { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* fixes: the figure's default margin, and section padding that .wrap would otherwise reset */
figure.studio-shot { margin: 8px 0 0; }
.site .faq { padding-top: 88px; padding-bottom: 24px; }
@media (max-width: 500px) {
  .ss-tile .who { display: none; }
  .ss-tile .face { width: 42%; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pic.dark { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16); } }
:root[data-theme="dark"] .pic.dark { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
.article .intro + ol, .article .intro + ul, .article .intro + p { margin-top: 24px; }
.doc ol + p, .doc ul + p, .doc ol + .tip { margin-top: 14px; }
.lede-xl a, .body-l a { color: var(--tint-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pic .file .btn:not(.primary) { background: var(--surface); }