/* Grace Before — inner pages (Privacy, Terms, Support). Loaded after styles.css and built on its tokens. */

.page { position: relative; padding-bottom: clamp(72px, 10vw, 128px); }
.page::before { content: ''; position: absolute; inset: 0 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(207, 224, 234, .75), rgba(207, 224, 234, 0) 72%); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(62, 89, 103, .08); }
.foot nav a[aria-current="page"] { color: var(--ink); }

/* ---------- Page head ---------- */
.page-head { padding: clamp(132px, 17vw, 190px) 0 clamp(40px, 6vw, 68px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.page-head .display-l { margin-top: 14px; }
.page-head .lead { margin-top: 20px; max-width: 31em; }
.stamp { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 18px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 .5px rgba(32, 54, 65, .12); font-size: 13.5px; font-weight: 500; color: var(--muted); }
.stamp i { font-size: 16px; color: var(--primary); }

/* ---------- At a glance ---------- */
.glance { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border-radius: 28px; box-shadow: var(--shadow-card); padding: 10px; }
.glance > div { padding: 22px 20px 24px; }
.glance > div + div { border-left: 1px solid var(--line); }
.glance i { font-size: 26px; color: var(--primary); }
.glance h2 { font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; margin-top: 14px; }
.glance p { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 6px; text-wrap: pretty; }
.glance.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .glance, .glance.three { grid-template-columns: 1fr 1fr; }
  .glance > div + div { border-left: 0; }
  .glance > div:nth-child(even) { border-left: 1px solid var(--line); }
  .glance > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .glance, .glance.three { grid-template-columns: 1fr; padding: 4px 8px; }
  .glance > div { padding: 18px 12px 20px; }
  .glance > div:nth-child(even) { border-left: 0; }
  .glance > div + div { border-top: 1px solid var(--line); }
}

/* ---------- Document layout: sticky contents + reading column ---------- */
.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: clamp(40px, 7vw, 96px); justify-content: center; margin-top: clamp(48px, 7vw, 88px); align-items: start; }
.toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; padding-bottom: 8px; }
.toc p { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 10px; padding-left: 14px; }
.toc a { display: block; padding: 7px 14px; font-size: 14.5px; line-height: 1.3; color: var(--muted); border-left: 1.5px solid var(--line); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); font-weight: 600; border-left-color: var(--primary); }
@media (max-width: 900px) { .doc-grid { grid-template-columns: minmax(0, 680px); } .toc { display: none; } }

.doc { counter-reset: sec; }
.doc section + section { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line); }
.doc h2 { font-size: clamp(24px, 2.8vw, 29px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; display: flex; gap: 12px; align-items: baseline; }
.doc.numbered h2::before { counter-increment: sec; content: counter(sec); flex: none; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: var(--primary); min-width: .9em; }
.doc h3 { font-size: 18.5px; font-weight: 600; letter-spacing: -.02em; margin-top: 30px; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; color: #344A55; text-wrap: pretty; }
.doc p { margin-top: 14px; }
.doc h3 + p { margin-top: 8px; }
.doc ul { margin: 14px 0 0; padding: 0; list-style: none; }
.doc ul li { position: relative; padding-left: 24px; }
.doc ul li + li { margin-top: 8px; }
.doc ul li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .7; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a, .link { color: var(--primary); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(62, 89, 103, .4); }
.doc a:hover, .link:hover { text-decoration-color: currentColor; }

/* A quiet aside, and the app's settings-style rows */
.note { margin-top: 20px; padding: 18px 20px; border-radius: 20px; background: var(--tint); display: flex; gap: 14px; }
.note > i { flex: none; font-size: 22px; color: var(--primary); margin-top: 2px; }
.note p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.rows { margin-top: 20px; background: var(--white); border-radius: 24px; box-shadow: var(--shadow-card); padding: 2px 20px; }
.rows > div { display: flex; gap: 16px; padding: 18px 0; }
.rows > div + div { border-top: 1px solid var(--line); }
.rows .ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--tint); display: grid; place-items: center; color: var(--primary); font-size: 21px; }
.doc .rows p { margin: 0; }
.rows b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.rows span { display: block; font-size: 15.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; text-wrap: pretty; }
.doc-end { margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }

/* ---------- Support ---------- */
.help-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.help-card { background: var(--white); border-radius: 28px; box-shadow: var(--shadow-card); padding: clamp(24px, 3.4vw, 36px); display: flex; flex-direction: column; align-items: flex-start; }
.help-card .ico { width: 52px; height: 52px; border-radius: 18px; background: var(--tint); display: grid; place-items: center; color: var(--primary); font-size: 26px; }
.help-card h2 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin-top: 20px; }
.help-card p { font-size: 16.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; text-wrap: pretty; }
.help-card .btn { margin-top: 24px; }
.help-card .fine { text-align: left; margin-top: 14px; }
.help-card.care { background: var(--deep); color: #fff; box-shadow: 0 24px 50px -28px rgba(32, 54, 65, .7); }
.help-card.care .ico { background: rgba(255, 255, 255, .12); color: #fff; }
.help-card.care p { color: rgba(255, 255, 255, .82); }
.help-card.care a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); }
@media (max-width: 820px) { .help-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .help-card .btn { width: 100%; padding: 0 16px; font-size: 16px; } }

.faq { max-width: 760px; margin: clamp(56px, 8vw, 96px) auto 0; }
.faq-head { text-align: center; }
.faq-head .display-l { font-size: clamp(30px, 4.4vw, 46px); margin-top: 12px; }
.faq h3 { font-size: 14.5px; font-weight: 600; color: var(--primary); margin: 40px 0 12px 6px; }
.qa-group { background: var(--white); border-radius: 24px; box-shadow: var(--shadow-card); padding: 2px 22px; }
.qa + .qa { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 15px; color: var(--primary); transition: transform .3s var(--ease), background .2s; }
.qa[open] summary i { transform: rotate(45deg); background: var(--hush); }
.qa .a { padding: 0 46px 22px 0; }
.qa .a p, .qa .a li { font-size: 16.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.qa .a p + p, .qa .a ol + p, .qa .a p + ol { margin-top: 10px; }
.qa .a ol { list-style: decimal; padding-left: 22px; }
.qa .a li + li { margin-top: 4px; }
.qa .a strong { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) { .qa-group { padding: 2px 18px; } .qa .a { padding-right: 0; } }