/* =====================================================================
 tiny.help public site theme (the homepage's design, shared).
 Linked by every marketing page as /site.css?v=N; bump N on change.
 Page-specific rules stay inline in each page.

 Type: Bricolage Grotesque for the wordmark and buttons, Instrument Serif
 for headings (italic for the accent words), JetBrains Mono for small
 labels and timecodes, the system sans for body text. Each page loads the
 three families from Google Fonts in its own <head>.

 The sky: each <main> > <section data-sky="day|dusk|night|dawn"> sets the
 palette when it crosses the middle of the viewport (site.js). Day is
 transparent, so the body's paper and grain run on from the header with
 no seam. Use the --fg, --soft, --hi, --line and --glass tokens inside
 <main> rather than fixed colours, so a section reads on any sky.
 ===================================================================== */
:root {
  --ink: #16150f;
  --paper: #faf7f0;
  --card: #ffffff;
  --accent: #5e6ad2;
  --accent-down: #4d59c4;
  --mark: #ffd84d;
  --deep: #262a4d;
  --deep-2: #31355c;
  --grey-text: #4a473d;
  --grey-soft: #6b675c;
  --grey-line: #e4e0d6;
  --max: 1200px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--paper); line-height: 1.55;
  overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a.btn { text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 3.5rem; }
.d { font-family: "Bricolage Grotesque", Georgia, serif; font-weight: 800; letter-spacing: -.035em; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9Jy41Jy8+PC9zdmc+"); background-size: 200px 200px;
}
main, header, footer { position: relative; z-index: 1; }

.btn {
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-block;
  border: 2px solid var(--ink); border-radius: 999px;
  transition: transform .13s ease, box-shadow .13s ease, background-color .13s ease;
}
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.18rem; box-shadow: 5px 5px 0 var(--ink); }
.btn-sm { padding: .55rem 1.25rem; font-size: .95rem; box-shadow: 3px 3px 0 var(--ink); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-mark { background: var(--mark); color: var(--ink); }
.btn-plain { background: var(--card); color: var(--ink); }
.btn:hover { transform: translate(-2px, -2px); }
.btn-lg:hover { box-shadow: 7px 7px 0 var(--ink); }
.btn-sm:hover { box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.arr { display: inline-block; vertical-align: -.14em; transition: transform .13s ease; }
.btn:hover .arr { transform: translateX(4px); }

.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 1.5rem; }
.wordmark { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; text-decoration: none; color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 1.3rem; }
.nav-link { font-weight: 650; font-size: .97rem; text-decoration: none; color: var(--grey-soft); }
.nav-link:hover, .nav-link[aria-current] { color: var(--ink); }
.open-desk { display: none; }
.has-desk .nav .open-desk { display: inline-block; }
.has-desk .nav .nav-trial { display: none; }
.nav .nav-login { display: inline-block; }
.has-desk .nav .nav-login { display: none; }
@media (max-width: 400px) {
  .nav.wrap { padding-inline: 1rem; }
  .nav .nav-right { gap: .5rem; }
  .nav .nav-login { white-space: nowrap; }
  .nav .nav-trial { padding-inline: .75rem; }
}
@media (max-width: 360px) {
  .nav .wordmark { font-size: 1rem; }
  .nav .nav-login { font-size: .88rem; }
}

footer { padding: 2.2rem 1.25rem 2.6rem; text-align: center; font-size: .9rem; color: var(--grey-soft); }
footer p { margin: 0; }
footer p + p { margin-top: .35rem; }
footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--ink); }
.footer-links { margin-top: .9rem !important; display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1000px) { .wrap { padding-inline: 1.5rem; } }
@media (max-width: 620px) {
  .nav-right { gap: .7rem; }
  .nav-link { display: none; }
  .wordmark { font-size: 1.15rem; }
  .btn-lg { padding: .9rem 1.5rem; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }


@property --sky  { syntax: "<color>"; inherits: true; initial-value: rgb(250 247 240 / 0); }
@property --fg   { syntax: "<color>"; inherits: true; initial-value: #16150f; }
@property --soft { syntax: "<color>"; inherits: true; initial-value: #5d594f; }
@property --hi   { syntax: "<color>"; inherits: true; initial-value: #5e6ad2; }
main {
  --sky: rgb(250 247 240 / 0); --fg: #16150f; --soft: #5d594f; --hi: #5e6ad2;
  --ok: #1f9d63; --lost: #ff6b57;
  --line: color-mix(in srgb, var(--fg) 13%, transparent);
  --glass: color-mix(in srgb, var(--fg) 4%, transparent);
  --ui-ink: #16150f; --ui-soft: #6b675c; --ui-line: #ebe7de; --ui-them: #f2efe8;
  background: var(--sky); color: var(--fg);
  transition: --sky 1.2s ease, --fg 1.2s ease, --soft 1.2s ease, --hi 1.2s ease;
}
main[data-sky="dusk"]  { --sky: #1d1b2f; --fg: #f3eee3; --soft: #aca7bf; --hi: #a9aeff; --ok: #3ddc97; }
main[data-sky="night"] { --sky: #0c0d15; --fg: #eeeadf; --soft: #9c998f; --hi: #a9aeff; --ok: #3ddc97; }
main[data-sky="dawn"]  { --sky: #f8eadf; --fg: #1b1510; --soft: #6e5f53; --hi: #5e6ad2; }

.serif { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.015em; }
.serif em { font-style: italic; }
/* No word left alone on the last line of a big heading. */
h1.serif, h2.serif, h3.serif { text-wrap: balance; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.w { max-width: var(--max); margin: 0 auto; padding-inline: 3.5rem; }
.eyebrow {
  display: flex; align-items: center; gap: .75rem; margin: 0;
  font: 500 .74rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
}
.center { justify-content: center; text-align: center; margin-inline: auto; }
.lede { margin: 0; max-width: 31em; font-size: 1.14rem; line-height: 1.6; color: var(--soft); }
.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .65rem; align-items: baseline; font-size: 1rem; }
.ticks li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 2px; background: var(--hi); transform: translateY(-.1rem) rotate(45deg); }
.text-link { color: var(--hi); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Reveal on scroll. */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.js .rv.in { opacity: 1; transform: none; }


/* ---- chapters ---- */
.ch { position: relative; padding-block: 7.5rem; }
.ch-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 4.5rem; align-items: center; }
.ch-grid.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.ch-grid.flip .ch-copy { order: 2; }
.ch h2 { font-size: clamp(2.35rem, 4.4vw, 3.85rem); line-height: 1.01; margin: 0 0 1.25rem; }
.ch h2 em { color: var(--hi); }
.ch-cta { margin-top: 2rem; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }

/* ---- the player: a scene dressed as a video ---- */
.player { margin: 0; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .5); }
.pl-top, .pl-foot { display: flex; align-items: center; gap: .8rem; padding: .65rem 1rem; font-size: .7rem; color: var(--soft); }
.pl-top { justify-content: space-between; border-bottom: 1px solid var(--line); letter-spacing: .06em; text-transform: uppercase; }
.pl-top .rec { display: inline-block; width: 7px; height: 7px; margin-right: .55rem; border-radius: 50%; background: var(--lost); vertical-align: .05em; animation: rec 1.4s steps(2, jump-none) infinite; }
.player.paused .rec { animation: none; opacity: .35; }
@keyframes rec { 50% { opacity: .2; } }
.pl-stage { position: relative; height: 470px; overflow: hidden; container-type: inline-size; cursor: pointer; }
.pl-stage.tall { height: 520px; }
.pl-foot { border-top: 1px solid var(--line); }
.pl-btn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; }
.pl-btn svg { width: 12px; height: 12px; }
.pl-btn .i-play { display: none; }
.player.paused .pl-btn .i-play { display: block; }
.player.paused .pl-btn .i-pause { display: none; }
.pl-prog { flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; }
.pl-prog span { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pl-prog i { position: absolute; inset: 0; background: var(--hi); transform-origin: left; transform: scaleX(0); }
.player figcaption { padding: .85rem 1rem .95rem; border-top: 1px solid var(--line); font-size: 1.3rem; line-height: 1.25; }

/* Product UI inside a scene is always light, whatever the sky. */
.ui { color: var(--ui-ink); font-size: 14px; line-height: 1.45; }
.chat { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--ui-ink); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(22, 21, 15, .06); font-size: 14px; line-height: 1.45; }
.chat-h { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; border-bottom: 1px solid var(--ui-line); }
.chat-h .av, .av { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem; }
.chat-h b { display: block; font-size: .92rem; }
.chat-h small { display: flex; align-items: center; gap: .35rem; color: var(--ui-soft); font-size: .76rem; }
.chat-h small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.chat-m { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; padding: .9rem .9rem .4rem; overflow: hidden; }
.chat-c { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .5rem .7rem .7rem; padding: .55rem .6rem .55rem .85rem; border: 1px solid var(--ui-line); border-radius: 14px; min-height: 42px; }
.chat-c span { color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.chat-c span.ph { color: #a29d91; }
.chat-c .send { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); }
.m { position: relative; max-width: 84%; padding: .55rem .8rem; border-radius: 16px; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); overflow-wrap: anywhere; }
.m.in { opacity: 1; transform: none; }
.m.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.m.them { align-self: flex-start; background: var(--ui-them); border-bottom-left-radius: 5px; }
.m .src { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1.5px; color: var(--accent-down); }
.m .by { display: block; margin-top: .25rem; font-size: .7rem; color: var(--ui-soft); }
.m.typing { display: flex; gap: 4px; padding: .7rem .85rem; }
.m.typing i { width: 6px; height: 6px; border-radius: 50%; background: #a29d91; animation: blip 1s infinite; }
.m.typing i:nth-child(2) { animation-delay: .15s; }
.m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blip { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
/* tapbacks: one slot per side, as in the desk */
.tb { position: absolute; top: -13px; right: -9px; padding: 2px 6px; border-radius: 999px; background: #fff; font-size: 14px; line-height: 1.3; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); transform: scale(0); transition: transform .45s cubic-bezier(.3,1.7,.5,1); }
.m.me .tb { right: auto; left: -9px; }
.tb.in { transform: scale(1); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip { padding: .28rem .62rem; border: 1.5px solid var(--accent); border-radius: 999px; background: #fff; color: var(--accent-down); font-size: .78rem; font-weight: 650; transition: background .2s, color .2s; }
.chip.hit { background: var(--accent); color: #fff; }
.cur { position: absolute; left: 0; top: 0; z-index: 30; width: 20px; pointer-events: none; transition: transform .75s cubic-bezier(.65,0,.25,1); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.cur::after { content: ""; position: absolute; left: -14px; top: -14px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.cur.clk::after { animation: clk .5s ease-out; }
@keyframes clk { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
.press { transform: scale(.94) !important; }
.lost {
  position: absolute; z-index: 25; left: 50%; bottom: 14px; padding: .5rem .9rem; border-radius: 999px;
  background: var(--lost); color: #1d0c08; font-size: .82rem; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 10px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.3,1.5,.5,1);
}
.lost.in { opacity: 1; transform: translate(-50%, 0); }

/* ---- reel: which chapter you are in ---- */
.reel { position: fixed; z-index: 30; left: 1rem; top: 50%; writing-mode: vertical-rl; display: none; align-items: center; gap: .55rem; padding: .8rem .42rem; border-radius: 999px; background: color-mix(in srgb, var(--fg) 6%, transparent); border: 1px solid var(--line); color: var(--fg); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(-50%) rotate(180deg) translateX(-6px); transition: opacity .4s, transform .4s; pointer-events: none; }
.reel i { width: 6px; height: 6px; border-radius: 50%; background: var(--hi); }
.reel.on { opacity: 1; transform: translateY(-50%) rotate(180deg); }
@media (min-width: 1180px) { .reel { display: flex; } }

/* ---- shared furniture for the other public pages ---- */
.nav-link[aria-current] { color: var(--ink); }
.cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.micro { margin: 1.1rem 0 0; font-size: .9rem; color: var(--soft); }
/* Old markup's marker highlight, as the theme's accent: italic, no block. */
.mark { font-style: italic; color: var(--hi); }
code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--glass); border: 1px solid var(--line); border-radius: 6px; padding: .08em .38em; overflow-wrap: anywhere; }
/* JetBrains Mono draws <!-- and --> as arrows that read like dashes. */
code, pre, .mono { font-variant-ligatures: none; }
.chip.quiet { border-color: var(--ui-line); color: var(--ui-soft); }

.page-hero { position: relative; padding: 5.2rem 0 3.6rem; text-align: center; }
.page-hero h1 { font-size: clamp(2.75rem, 6vw, 5.2rem); line-height: .98; margin: 0 auto 1.2rem; max-width: 14em; }
.page-hero h1 em { color: var(--hi); }
.page-hero .sub { max-width: 36em; margin: 0 auto 1.8rem; font-size: 1.15rem; line-height: 1.6; color: var(--soft); }

.sec { position: relative; padding-block: 6rem; }
.sec-head { max-width: 46rem; margin-bottom: 2.6rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .lede { margin-inline: auto; }
.sec-head h2, .sec h2.serif { font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.02; margin: 0 0 1rem; }
.sec h2 em, .sec h3 em { color: var(--hi); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; padding: 1.5rem 1.6rem 1.6rem; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.card h3, .card > b:first-child { display: block; margin: 0 0 .5rem; font: 400 1.55rem/1.1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; color: var(--fg); }
.card p { margin: 0; color: var(--soft); line-height: 1.6; }
.card p + p { margin-top: .7rem; }
.card a { color: var(--hi); }
/* The one card that should win the eye: white, ink edge, the button's hard shadow. */
.card.lift { background: #fff; color: var(--ui-ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.card.lift p { color: var(--ui-soft); }
.card.lift h3, .card.lift > b:first-child { color: var(--ui-ink); }

.faq { max-width: 48rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 1.15rem 2.2rem 1.15rem 0; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 "Instrument Serif", Georgia, serif; color: var(--hi); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { max-width: 42em; margin: -.2rem 0 1.25rem; line-height: 1.65; color: var(--soft); }
.faq details a { color: var(--hi); }
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.quote-block { max-width: 52rem; margin: 0 auto; text-align: center; }
.quote-block q { display: block; font: 400 clamp(1.7rem, 3.4vw, 2.6rem)/1.15 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; quotes: "\201C" "\201D"; }
.quote-block cite { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.4rem; font-style: normal; font-size: .95rem; color: var(--soft); }
.quote-block cite img { width: 32px; height: 32px; border-radius: 8px; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pills > li > a, .pills > li > span { display: inline-block; padding: .5rem 1rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: .95rem; text-decoration: none; transition: border-color .2s, transform .2s; }
.pills > li > a:hover { border-color: var(--fg); transform: translateY(-1px); }

.closer { position: relative; padding: 7rem 0 7.5rem; text-align: center; }
.closer h2 { max-width: 14em; margin: 0 auto 1.1rem; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; }
.closer h2 em { color: var(--hi); }
.closer .sub { max-width: 32em; margin: 0 auto 2rem; font-size: 1.15rem; line-height: 1.55; color: var(--soft); }

/* Long-form: privacy, terms, contact. */
.prose { max-width: 44rem; margin: 0 auto; padding-bottom: 6rem; font-size: 1.04rem; line-height: 1.72; }
.prose h2 { margin: 3rem 0 .8rem; font: 400 2rem/1.1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; }
.prose h3 { margin: 2rem 0 .5rem; font-size: 1.08rem; font-weight: 650; }
.prose p, .prose li { color: color-mix(in srgb, var(--fg) 82%, transparent); }
.prose a { color: var(--hi); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: .35rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

/* ---- responsive ---- */
@media (max-width: 1000px) { .w { padding-inline: 1.5rem; } }
@media (max-width: 980px) {
  .ch { padding-block: 5.5rem; }
  .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .ch-grid.flip { grid-template-columns: minmax(0, 1fr); }
  .ch-grid.flip .ch-copy { order: 0; }
  .cards, .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding-block: 4.6rem; }
}
@media (max-width: 620px) {
  .w { padding-inline: 1rem; }
  .cta .btn { width: 100%; text-align: center; }
  .pl-stage, .pl-stage.tall { height: 500px; }
  .pl-stage.stack { height: 620px; }
  .cards, .cards.two, .cards.four { grid-template-columns: minmax(0, 1fr); }
  .page-hero { padding: 3.6rem 0 2.6rem; }
  .closer { padding: 5rem 0 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m.typing i, .pl-top .rec, .faq summary::after { animation: none; transition: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  main { transition: none; }
}