/* schedule3.in, in the manner of Apple's product pages: big tight headlines, short copy, generous space, light grey
   and black bands, rounded tiles, blue text links with a chevron. System fonts only (San Francisco on Apple devices,
   Segoe UI on Windows): no web-font requests, in keeping with a product sold on privacy. */
:root {
  --bg: #ffffff; --tile: #f5f5f7; --ink: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7;
  --link: #0066cc; --btn: #0071e3; --dark: #000000; --dark-ink: #f5f5f7; --dark-muted: #86868b; --dark-tile: #1d1d1f;
  --ok: #1d8a43; --max: 980px; --wide: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Light only, as on apple.com: the black band is a deliberate design choice, not a dark mode. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.47 var(--font); letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; color: inherit; }
p { margin: 0; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--bg); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 16px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
.wrap.wide { max-width: var(--wide); }
.center { text-align: center; }
.stack { display: grid; gap: 18px; }
.center.stack { justify-items: center; }

/* type, Apple's scale */
.headline-hero { font-size: clamp(2.3rem, 7.4vw, 5.4rem); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; }
.headline { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.07; font-weight: 700; letter-spacing: -0.005em; }
.headline-sm { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1; font-weight: 700; }
.kicker { font-size: clamp(1.15rem, 2.4vw, 1.75rem); line-height: 1.2; font-weight: 600; }
.eyebrow { font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 600; color: var(--muted); }
.intro { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 500; color: var(--muted); max-width: 34ch; }
.intro.wide { max-width: 46ch; }
.intro b, .intro strong { color: var(--ink); font-weight: 600; }
.body { color: var(--muted); max-width: 62ch; }
.tnum { font-variant-numeric: tabular-nums; }

/* bands */
section { padding-block: clamp(72px, 10vw, 128px); }
section.tight { padding-block: clamp(48px, 7vw, 80px); }
.band-tile { background: var(--tile); }
.band-dark { background: var(--dark); color: var(--dark-ink); }
.band-dark .intro, .band-dark .eyebrow, .band-dark .body { color: var(--dark-muted); }
.band-dark .intro b, .band-dark .intro strong { color: var(--dark-ink); }
.band-dark a { color: #2997ff; }

/* links and buttons */
.more { font-size: clamp(1rem, 1.6vw, 1.3rem); }
.more::after { content: " \203A"; }
.links { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; align-items: center; }
.pill { display: inline-block; background: var(--btn); color: #fff; border-radius: 980px; padding: 11px 22px; font-size: 17px; font-weight: 400; }
.pill:hover { text-decoration: none; background: #0077ed; }
.pill.sm { padding: 5px 12px; font-size: 12px; }
.pill.ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }

/* global navigation: a thin translucent bar */
.nav-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.nav-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 52px; max-width: var(--wide); }
.brand { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: 0.011em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 24px; font-size: 12px; letter-spacing: -0.01em; }
.nav a { color: var(--ink); opacity: 0.88; }
.nav a:hover { opacity: 1; text-decoration: none; color: var(--link); }
.nav a[aria-current="page"] { opacity: 0.5; pointer-events: none; }
.nav .pill { opacity: 1; color: #fff; }
.menu-btn { display: none; background: none; border: 0; padding: 8px; color: var(--ink); font: inherit; font-size: 14px; }
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 52px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); padding: 12px max(22px, env(safe-area-inset-right, 0px)) 22px max(22px, env(safe-area-inset-left, 0px)); font-size: 22px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .nav a { padding: 12px 0; }
  .nav .pill { margin-top: 10px; text-align: center; font-size: 17px; font-weight: 400; }
  .nav.open { display: flex; }
}

/* hero */
.hero { padding-block: clamp(56px, 8vw, 96px) 0; text-align: center; }
.hero .stack { gap: 14px; justify-items: center; }
.hero .links { margin-top: 14px; }
.hero-shot { margin: clamp(40px, 6vw, 64px) auto 0; max-width: var(--wide); padding-inline: max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px)); }
.hero-shot img, .shot img { border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); }

/* tiles (Apple's rounded panels) */
.tiles { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--wide); margin: 0 auto; padding-inline: max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px)); }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { background: var(--tile); border-radius: 28px; padding: clamp(28px, 4vw, 48px); display: grid; gap: 12px; align-content: start; min-width: 0; }
.band-tile .tile { background: var(--bg); }
.band-dark .tile { background: var(--dark-tile); }
.tile.span2 { grid-column: span 2; }
.tile h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.1; font-weight: 700; }
.tile p { color: var(--muted); }
.band-dark .tile p { color: var(--dark-muted); }
.tile .big { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.tile .shot { margin-top: 14px; }
@media (max-width: 860px) { .tiles, .tiles.three { grid-template-columns: 1fr; } .tile.span2 { grid-column: auto; } }

/* a feature: words above a large picture */
.feature { display: grid; gap: clamp(28px, 4vw, 48px); justify-items: center; text-align: center; }
.feature .shot { max-width: var(--wide); width: 100%; padding-inline: max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px)); }

/* list with ticks */
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; text-align: left; }
ul.ticks li { padding-left: 28px; position: relative; color: var(--muted); }
ul.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* tables (compare, formats) */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
td.yes { color: var(--ok); font-weight: 600; }
td.no { color: var(--muted); }
thead th { position: sticky; top: 52px; background: var(--bg); }
.fmt td:first-child { width: 62%; }
.fmt tr.head td { font-weight: 700; padding-top: 22px; }
.fmt tr.sub td:first-child { padding-left: 30px; color: var(--muted); }
.fmt tr.sub2 td:first-child { padding-left: 52px; color: var(--muted); }

/* articles (the format pages) */
.article { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.article h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.12; font-weight: 700; margin-top: 36px; }
.article h3 { font-size: 1.2rem; font-weight: 600; margin-top: 8px; }
.article p, .article li { color: var(--muted); }
.article ul, .article ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.note { background: var(--tile); border-radius: 18px; padding: 22px 24px; display: grid; gap: 8px; }
.note p { color: var(--ink); }
.download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--tile); border-radius: 18px; padding: 20px 24px; }
.download small { color: var(--muted); display: block; font-size: 14px; }
.download .links { justify-content: flex-start; gap: 10px 22px; }
.crumbs { font-size: 12px; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* pricing */
.price { font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.01em; }

/* questions */
.faq { max-width: 760px; margin: 0 auto; }
details { border-bottom: 1px solid var(--line); padding: 22px 0; }
details summary { cursor: pointer; font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 18px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--muted); font-weight: 300; font-size: 1.6rem; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details p { margin-top: 12px; color: var(--muted); max-width: 62ch; }

/* footer, Apple's small grey type */
.site-footer { background: var(--tile); color: var(--muted); font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; padding-block: 36px 24px; }
.site-footer .wrap { max-width: var(--max); }
.site-footer .lead { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.site-footer .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding-block: 22px; }
.site-footer h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .fine { border-top: 1px solid var(--line); padding-top: 16px; }

/* ---- the premium layer: hero, glow, the trial balance fan, and calm motion. Content is all there without scripts;
   with them, it eases in as it is reached. Nothing moves for visitors who ask their computer for less motion. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.headline { letter-spacing: -0.02em; }

/* hero */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 980px; background: var(--tile); color: var(--ink); font-size: 14px; font-weight: 500; }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.rot, .grad { background: linear-gradient(calc(92deg + var(--mx, 0) * 70deg), #0071e3 0%, #5b5bf0 25%, #a93fd8 50%, #5b5bf0 75%, #0071e3 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.caret, .landed { display: none; }

/* the hero tour: the word, the tabs under it and the picture follow one another */
.tabs { display: none; }
.js .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.tabs button { position: relative; overflow: hidden; border: 0; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; padding: 7px 15px; border-radius: 980px;
  background: var(--tile); color: var(--muted); cursor: pointer; transition: background .3s ease, color .3s ease, transform .2s ease; }
.tabs button:hover { color: var(--ink); transform: translateY(-1px); }
.tabs button.on { background: var(--ink); color: #fff; }
.tabs button.on::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--prog, 0) * 100%); background: linear-gradient(90deg, #4da3ff, #c07bff); }
.js .rot { cursor: pointer; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.js .caret { display: inline-block; width: .055em; height: .82em; margin-left: .04em; vertical-align: -.04em; border-radius: 2px; background: #6a55f0; animation: blink 1.05s steps(1) infinite; }
.js .caret.typing { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.js .landed { display: inline-grid; place-items: center; width: .42em; height: .42em; margin-left: .12em; vertical-align: .55em; border-radius: 50%; background: #34c759; color: #fff;
  font-size: .5em; line-height: 1; opacity: 0; transform: scale(.3); transition: opacity .2s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
.js .landed.on { opacity: 1; transform: none; }
.frame .alt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .6s ease; }
.frame .alt.on { opacity: 1; }
.hero-shot.ready .float { transition: opacity .28s ease; }
.js .float.swap { opacity: 0; }
.pill.lg { padding: 14px 28px; font-size: 18px; box-shadow: 0 10px 26px -10px rgba(0,113,227,.65); }
.trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.trust li::before { content: "\2713"; color: var(--ok); font-weight: 700; margin-right: 6px; }
.frame { position: relative; isolation: isolate; }
.frame::before { content: ""; position: absolute; inset: 8% 4% -4%; z-index: -1; border-radius: 40px; filter: blur(60px); opacity: .55;
  background: radial-gradient(40% 60% at 25% 50%, #4f8cff, transparent 70%), radial-gradient(40% 60% at 75% 50%, #b065ff, transparent 70%); }
.float { position: absolute; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 12px 16px; border-radius: 16px;
  background: color-mix(in srgb, #fff 86%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); font-size: 15px; }
.float b { font-weight: 600; }
.float small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.float .led, .float .tick { grid-row: span 2; }
.led { width: 12px; height: 12px; border-radius: 50%; }
.led.g { background: #34c759; box-shadow: 0 0 0 4px rgba(52,199,89,.2); }
.tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #34c759; color: #fff; font-size: 14px; font-weight: 700; }
.tick.b { background: #0071e3; }
.f1 { left: -2%; top: 14%; }
.f2 { right: -2%; top: 38%; }
.f3 { left: 6%; bottom: 8%; }
@media (max-width: 860px) { .float { display: none; } }

/* the dark band with a soft glow */
.glow { position: relative; overflow: hidden; isolation: isolate; }
.glow::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 40% at 50% 58%, rgba(41,151,255,.22), transparent 70%), radial-gradient(30% 30% at 30% 40%, rgba(176,101,255,.14), transparent 70%), radial-gradient(30% 30% at 72% 70%, rgba(41,151,255,.12), transparent 70%); }

/* the fan: one trial balance in the middle, every output around it */
.fan { position: relative; display: block; max-width: var(--max); height: 460px; margin: 0 auto clamp(40px, 6vw, 72px); }
.wires { position: absolute; left: 50%; top: 50%; width: 980px; height: 440px; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.wires path { fill: none; }
.wire { stroke: rgba(255,255,255,.2); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.pulse { stroke: #4da3ff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .08 3; stroke-dashoffset: .08; opacity: 0; filter: drop-shadow(0 0 4px #2997ff); }
.fan .src, .fan .out { position: absolute; left: 50%; top: 50%; border-radius: 16px; }
.fan .src { transform: translate(-50%, -50%); z-index: 2; width: 270px; padding: 18px 20px; display: grid; gap: 7px; text-align: left;
  background: linear-gradient(160deg, #2a2a2e, #141416); color: #f5f5f7; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.8), 0 0 70px -10px rgba(41,151,255,.45); }
.fan .src .t { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.fan .src .r { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--dark-muted); border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 6px; }
.fan .src .r b { color: #f5f5f7; font-weight: 600; font-variant-numeric: tabular-nums; }
.fan .src .ok { font-size: 13px; color: #34c759; font-weight: 600; }
.fan .out { --sh: 0 0 0 1px rgba(255,255,255,.12), 0 14px 30px -14px rgba(0,0,0,.7);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 12px 18px; font-size: 16px; font-weight: 600; z-index: 3;
  background: #1d1d1f; color: #f5f5f7; box-shadow: var(--sh);
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d, 0s), opacity .8s ease var(--d, 0s), background .25s ease; }
.band-dark .fan .out { color: #f5f5f7; }
.fan .out svg { width: 19px; height: 19px; fill: none; stroke: #4da3ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fan .out:hover, .fan .out:focus-visible { text-decoration: none; background: #2a2a2e; }
.fan.done .out { transition: transform .3s ease, background .25s ease; }
.fan.done .out:hover { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 4px)); }
.fan .out::after { content: attr(data-hint); position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, 4px); padding: 7px 11px; border-radius: 10px;
  background: #f5f5f7; color: #1d1d1f; font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 5; }
.fan .out:hover::after, .fan .out:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.js .fan:not(.in) .out { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.js .fan:not(.in) .wire { stroke-dashoffset: 1; }
.js .fan.in .pulse { animation: pulse 4.5s linear infinite; animation-delay: calc(1.6s + var(--i) * .5s); }
.js .fan.in .out { animation: lit 4.5s linear infinite; animation-delay: calc(1.6s + var(--i) * .5s); }
@keyframes pulse { 0% { stroke-dashoffset: .08; opacity: 1; } 20% { stroke-dashoffset: -1; opacity: 1; } 21%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes lit { 0%, 16% { box-shadow: var(--sh); } 21% { box-shadow: 0 0 0 1px #4da3ff, 0 0 28px rgba(41,151,255,.6); } 45%, 100% { box-shadow: var(--sh); } }
@media (max-width: 1060px) {
  .fan { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding-inline: 22px; }
  .wires { display: none; }
  .fan .src, .fan .out { position: relative; left: auto; top: auto; transform: none; }
  .fan .src { grid-column: 1 / -1; justify-self: center; width: min(100%, 320px); margin-bottom: 8px; }
  .fan .out { white-space: normal; justify-content: flex-start; }
  .fan.done .out:hover { transform: translateY(-3px); }
  .fan .out::after { display: none; }
  .js .fan:not(.in) .out { transform: scale(.9); }
}

/* calm motion */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero-shot img { transform: perspective(1400px) rotateX(calc(14deg * (1 - var(--p, 1)))) scale(calc(1.06 - .06 * var(--p, 1))); transform-origin: 50% 100%; will-change: transform; }
.js .float { transform: translateY(calc((1 - var(--p, 1)) * var(--k, 40px))); transition: opacity .8s ease var(--fd, .6s); }
.js .hero-shot:not(.in) .float { opacity: 0; }
.f1 { --k: 70px; --fd: .5s; } .f2 { --k: 40px; --fd: .75s; } .f3 { --k: 100px; --fd: 1s; }
.tile { transition: transform .35s ease, box-shadow .35s ease; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.25); }
.pill { transition: background .2s ease, transform .2s ease; }
.pill:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .fan:not(.in) .out { opacity: 1; transform: none; transition: none; }
  .js .hero-shot img, .js .float { transform: none; }
  .tile, .pill, .fan .out { transition: none; }
  .tile:hover, .pill:hover { transform: none; }
  .pulse { display: none; }
}

/* ---- trust: numbers strip, team, prices */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: var(--wide); margin: 0 auto; padding-inline: max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px)); text-align: center; }
.stat .big { font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.stat p:last-child { color: var(--muted); margin-top: 10px; font-size: 15px; max-width: 24ch; margin-inline: auto; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1060px) { .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles.four { grid-template-columns: 1fr; } }
.tile .role { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #0071e3, #7a4cf0); box-shadow: 0 10px 24px -12px rgba(0,113,227,.7); }
.tile.span2 { grid-column: span 2; }
.fine { font-size: 13px; color: var(--muted); }
.prices .price { margin-top: 6px; }
.prices .price small { font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.prices .ticks { margin-top: 10px; }
.prices .tile.featured { background: var(--ink); color: #f5f5f7; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.prices .tile.featured p, .prices .tile.featured .eyebrow, .prices .tile.featured .price small, .prices .tile.featured ul.ticks li { color: var(--dark-muted); }
.prices .tile.featured h3, .prices .tile.featured .price { color: #fff; }
.tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 980px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(90deg, #0071e3, #7a4cf0); vertical-align: 2px; }