/* ============================================================================
   Policy pages: privacy, terms, cancellation.

   Pages people come to for one answer. The three sit one tap apart at the
   top, the gist comes first, and the full text runs in one readable column
   beside a list of its sections that stays in view on a wide screen. Loaded
   after home.css and borrows the .close band and the "to confirm" marker.
   ========================================================================== */

/* ── Head ─────────────────────────────────────────────────────────────────── */
.phead { padding-block: clamp(2rem, 4vw, 3.4rem) clamp(1.4rem, 2.6vw, 2rem); }
.phead h1 { font-size: var(--t-2xl); margin-bottom: .45em; }
.phead .lede { max-width: 58ch; }
.phead__date { margin: 1rem 0 0; font-size: var(--t-xs); color: var(--ink-50); }

/* The three policies as one control: the one you are on is underlined in
   the brand orange, the way the masthead marks a link under the pointer. */
.pnav {
	display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
	border-bottom: 1px solid var(--line);
}
.pnav a {
	position: relative; padding: .6rem 0 .75rem;
	font: 600 var(--t-sm)/1 var(--ui); color: var(--ink-70); text-decoration: none;
}
.pnav a:hover { color: var(--ink); }
.pnav a[aria-current="page"] { color: var(--ink); }
.pnav a[aria-current="page"]::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px; background: var(--brand);
}

/* ── In short ─────────────────────────────────────────────────────────────── */
.pshort__in {
	max-width: 50rem;
	background: var(--sand-2);
	border-left: 3px solid var(--gold);
	padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.3rem, 3vw, 2.2rem);
}
.pshort h2 { font-size: var(--t-lg); margin-bottom: .7rem; }
.pshort ul { list-style: none; margin: 0; padding: 0; }
.pshort li {
	position: relative; padding-left: 1.3rem;
	font-size: var(--t-base); line-height: 1.55;
}
.pshort li + li { margin-top: .55rem; }
.pshort li::before {
	content: ''; position: absolute; left: 0; top: .72em;
	width: .55rem; height: 2px; background: var(--gold);
}

/* ── The text ─────────────────────────────────────────────────────────────── */
.pbody {
	display: grid; grid-template-columns: 14rem minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
	padding-block: clamp(2.6rem, 5vw, 4rem) var(--band);
}

.ptoc { position: sticky; top: calc(var(--mast-h) + 1.5rem); }
.ptoc h2 {
	font: 700 var(--t-xs)/1.3 var(--ui); letter-spacing: .02em; color: var(--ink-50);
	margin: 0 0 .8rem; font-variation-settings: normal;
}
.ptoc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.ptoc a {
	display: block; padding: .38rem 0 .38rem 1rem; margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: var(--t-sm); line-height: 1.35; color: var(--ink-70); text-decoration: none;
}
.ptoc a:hover { color: var(--ink); border-left-color: var(--gold); }

.pdoc { max-width: 42rem; }
.psec + .psec { margin-top: clamp(2rem, 3.6vw, 2.8rem); padding-top: clamp(2rem, 3.6vw, 2.8rem); border-top: 1px solid var(--line); }
.psec h2 { font-size: var(--t-xl); margin-bottom: .7em; }
.psec p, .psec li { color: var(--ink-70); }
.psec p { max-width: 64ch; }
.psec b { color: var(--ink); font-weight: 600; }
.psec ul { padding-left: 1.2rem; margin-bottom: 1.15em; }
.psec ul:last-child { margin-bottom: 0; }
.psec li { max-width: 62ch; }
.psec li + li { margin-top: .4rem; }
.psec li::marker { color: var(--gold); }
.psec a { font-weight: 600; }

/* The cancellation terms: one row per case, answer beside it. */
.pterms { margin: 0 0 1.4rem; }
.pterms div {
	display: grid; grid-template-columns: 12rem 1fr; gap: 1.2rem;
	padding: .85rem 0; border-top: 1px solid var(--line-2);
}
.pterms div:last-child { border-bottom: 1px solid var(--line-2); }
.pterms dt { font: 600 var(--t-sm)/1.45 var(--ui); color: var(--ink); }
.pterms dd { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-70); }

/* Mid-sentence markers stay inline so the full stop stays with them. */
.ppage [data-todo] { display: inline; }

/* ── Narrow screens ───────────────────────────────────────────────────────── */
/* The contents list is for moving around a long page on a wide screen; on a
   phone the sections are short enough to scroll, and it would only push the
   text down. */
@media (max-width: 900px) {
	.pbody { grid-template-columns: 1fr; }
	.ptoc { display: none; }
}
@media (max-width: 560px) {
	.pterms div { grid-template-columns: 1fr; gap: .25rem; }
}