/* Product pages share the site's original warm paper, ink and bronze palette. */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.footer-links { flex-wrap: wrap; }
.product-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 18px 0; font-size: .9rem; }
.product-nav a { color: var(--sub); }
.product-nav a:first-child { color: var(--accent); font-weight: 500; }
.product-icon { width: 56px; height: 56px; border-radius: 13px; flex: 0 0 auto; }
.product-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.product-identity .eyebrow { margin: 0; }
.eyebrow { color: var(--accent); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 16px; }
.actions a { font-size: .92rem; }
.analytics-actions button { font: inherit; background: transparent; cursor: pointer; }
.analytics-actions button:disabled { opacity: .55; cursor: default; }
.fine-print { color: var(--sub); font-size: .85rem; line-height: 1.6; }
.home-intro { padding-top: 32px; padding-bottom: 18px; }
.home-intro p { font-size: .94rem; color: var(--sub); }
.feature-band { padding: 24px 0 64px; }
.feature-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.feature-copy { padding: 32px 0; }
.feature-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.04; font-weight: 400; letter-spacing: -.025em; }
.feature-title em { color: var(--accent); font-weight: 400; }
.feature-subtitle { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin-top: 12px; font-weight: 400; }
.feature-lede { font-size: 1.1rem; color: var(--sub); max-width: 520px; margin-top: 24px; line-height: 1.75; }
.feature-kicker { margin-top: 24px; color: var(--ink); font-size: 1.1rem; }
.feature-art { position: relative; display: grid; place-items: center; padding: 30px 24px; background: #e9e1ce; border-radius: 160px 160px 18px 18px; }
.feature-art.amber { background: #211c14; }
.feature-art.mathlip { background: #e2d9ed; }
.feature-art.often { background: #dbe4db; }
.phone-shot { width: min(100%, 270px); height: auto; border: 1px solid #3a3020; border-radius: 22px; box-shadow: 0 18px 38px #0003; }
.feature-art > .phone-shot { width: min(100%, 248px); }
.screen-window { width: min(100%, 288px); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 38px #0002; background: #f6f3ec; }
.screen-window img { width: 100%; height: auto; }
/* Crop the marketing margins, preserving the published interface unchanged. */
.screen-window.often-screen { aspect-ratio: 660 / 760; }
.screen-window.often-screen img { margin-top: -88%; }
.screen-window.often-cadence img { margin-top: -100%; }
.screen-window.often-reach img { margin-top: -96%; }
.screen-window.mathlip-screen { aspect-ratio: 660 / 1090; }
.screen-window.mathlip-screen img { margin-top: -52%; }
.art-caption { margin-top: 16px; font-size: .78rem; color: var(--sub); text-align: center; }
.section { padding: clamp(48px, 7vw, 80px) 0; border-top: 1px solid var(--rule); }
.section-heading { display: flex; gap: 20px; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
.section-heading h2 { margin-bottom: 0; }
.app-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.app-card { border-top: 2px solid var(--accent-border); padding-top: 26px; min-width: 0; }
.app-card h2, .app-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.2; }
.app-card p { color: var(--sub); margin: 16px 0; font-size: 1rem; }
.app-card .card-title { display: flex; align-items: center; gap: 14px; }
.app-card .card-title img { width: 48px; height: 48px; border-radius: 11px; }
.card-art { margin-top: 28px; padding: 26px 24px 0; height: 300px; overflow: hidden; background: #e2d9ed; border-radius: 10px; display: flex; justify-content: center; }
.card-art.often { background: #dbe4db; }
.card-art .screen-window { width: 240px; flex-shrink: 0; }
.card-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.card-links a { font-size: .94rem; font-weight: 500; }
.maker { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.maker p { color: var(--sub); margin-bottom: 16px; }
.maker h2 { max-width: 320px; }
.product-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; }
.product-facts dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 500; }
.product-facts dd { font-size: .96rem; color: var(--sub); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 70px); }
.prose { max-width: 740px; }
.prose p, .split p { margin-bottom: 18px; color: var(--sub); font-size: 1rem; }
.prose h2, .split h2 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; line-height: 1.25; margin-bottom: 20px; }
.prose h3, .split h3 { font-weight: 500; font-size: 1.08rem; margin: 22px 0 8px; }
.feature-list { list-style: none; }
.feature-list li { padding: 14px 0; border-top: 1px solid var(--rule); color: var(--sub); }
.feature-list strong { display: block; color: var(--ink); font-weight: 500; }
.screenshots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.screenshots figure { min-width: 0; }
.screenshots img { border-radius: 12px; width: 100%; height: auto; }
.screenshots .screen-window { width: 100%; }
.screenshots figcaption { margin-top: 14px; font-size: .92rem; color: var(--sub); }
.screenshots figcaption strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.purchase-box { background: var(--bg-raise); border: 1px solid var(--card-border); border-radius: 8px; padding: 28px; }
.purchase-box ul { padding-left: 20px; color: var(--sub); margin-bottom: 20px; }
.purchase-box li { margin: 8px 0; }
.faq { max-width: 800px; }
.faq details { border-top: 1px solid var(--rule); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-size: 1.04rem; font-weight: 500; padding-right: 18px; }
.faq details p { color: var(--sub); margin-top: 14px; max-width: 720px; }
.support-strip { padding: 30px 0; border-top: 1px solid var(--rule); }
.support-strip .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.support-strip p { color: var(--sub); }
.legal { max-width: 800px; margin: 0 auto; padding: 30px clamp(22px, 5vw, 44px) 72px; overflow-wrap: anywhere; }
.legal h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.2; margin: 20px 0; }
.legal h2 { font-size: 1.2rem; font-weight: 500; margin: 32px 0 12px; }
.legal h3 { font-size: 1.05rem; font-weight: 500; margin: 24px 0 10px; }
.legal p, .legal ul, .legal ol { margin: 14px 0; color: var(--sub); }
.legal strong { color: var(--ink); font-weight: 500; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 8px 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.legal th, .legal td { padding: 12px 10px; text-align: left; border: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.legal th { background: var(--bg-raise); font-weight: 500; }
.legal .provider-table { table-layout: fixed; }
.legal .provider-table th:first-child { width: 35%; }
.legal .provider-table tbody th { background: transparent; }
.legal .provider-table tbody th a { display: inline-block; margin-top: 6px; font-weight: 400; }
.legal .dim, .legal .note { color: var(--sub); font-size: .9rem; }
.legal .langbar { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 24px 0; font-size: .9rem; }
.legal .langbar a { margin: 0; }
.legal .langbar a[aria-current="true"] { color: var(--ink); font-weight: 600; }
html:not(.language-ready) .doc:target { display: block; }
html:not(.language-ready) .doc:target ~ #en { display: none; }
.support-body .container { max-width: 860px; }
.topic p, ol.steps li, ul.plain li { font-size: 1rem; }
.topic { overflow-wrap: anywhere; }
.support-header h1 { max-width: 650px; }
[id] { scroll-margin-top: 88px; }
/* ── Desktop handoff ──
   None of the apps installs on a desktop, and Apple records a download's source
   on the device that downloads, so a desktop store click can never be
   attributed. A QR code of the app's own short link moves the visitor to their
   phone with the qr channel intact. Shown only to pointer devices wide enough
   to be a computer; no user-agent sniffing and no JavaScript.
   Colours inside the figure are literal, not tokens: the QR modules are black
   on white inside the SVG and never follow the theme, so the caption and rule
   have to stay legible against that white ground in the dark theme too. */
.qr-handoff { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .qr-handoff {
    display: flex; align-items: center; gap: 20px;
    max-width: 430px; margin-top: 26px; padding: 16px;
    background: #fff; border: 1px solid #e3dcc9; border-radius: 8px;
  }
  .qr-handoff img { width: 148px; height: 148px; flex: 0 0 auto; }
  .qr-handoff figcaption { font-size: .84rem; line-height: 1.5; color: #4e5257; }
  .qr-handoff .qr-link { display: block; margin-top: 8px; font-weight: 500; color: #1b1d21; }
}

@media (max-width: 760px) {
  .feature-layout { grid-template-columns: 1fr; gap: 16px; }
  .feature-copy { padding: 12px 0 16px; }
  .feature-art { max-width: 430px; width: 100%; margin: 0 auto; padding: 30px; }
  .feature-art > .phone-shot { width: 224px; }
  .feature-title { max-width: 600px; }
  .home-intro { padding-top: 24px; }
  .split, .maker { grid-template-columns: 1fr; gap: 28px; }
  .section-heading { flex-wrap: wrap; gap: 12px; }
  .screenshots { gap: 16px; }
}
@media (max-width: 560px) {
  .app-cards, .product-facts { grid-template-columns: 1fr; }
  .app-cards { gap: 40px; }
  .product-facts { gap: 18px; }
  .product-facts dt { margin-bottom: 3px; }
  .screenshots { grid-template-columns: 1fr; gap: 32px; }
  .screenshots figure { width: 100%; max-width: 320px; margin: 0 auto; }
  .purchase-box { padding: 24px; }
  .legal th, .legal td { padding: 8px 6px; font-size: .85rem; }
  .feature-band { padding-bottom: 40px; }
  .actions { align-items: stretch; }
}