/* tesserane site: the pages beside the tour (the privacy policy, the terms, the terms of sale, the legal notice,
   the contact, the account and early.html, the standalone homepage). Each loads scrollcraft.css and
   styles.css first, for the reset, the fonts, the tokens on :root and the footer, and draws only its document
   here. Nothing glows: a card is a crisp line (--card-edge), and the keyboard's focus is the site's outline. */

/* No bar is stuck over these pages, so a link to a section keeps only a little air above it. */
html { scroll-padding-top: 24px; }

.page {
  /* body text a step under the headings' ink, as the questions' answers read */
  --doc-ink: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-ink-soft));
  min-height: 100svh; display: flex; flex-direction: column;
}
.page main { flex: 1 0 auto; }

/* The top of each page: the name, back to the site. Drawn like the site bar, flat on the ground, but not stuck. */
.page-bar {
  display: flex; align-items: center; height: var(--bar-h);
  padding: 0 max(var(--g), calc((100% - 1420px) / 2 + var(--g)));
  background: rgb(var(--ground)); border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--text));
  font: 400 13.5px/1.45 var(--sc-font-text);
}
.page-bar .site-brand { color: inherit; text-decoration: none; border-radius: 8px; }
.page-bar .site-brand:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 4px; }

/* ===================================================================== the document === */
.doc {
  width: 100%; max-width: calc(760px + 2 * var(--g)); margin: 0 auto;
  padding: clamp(44px, 7vw, 96px) var(--g) clamp(16px, 3vw, 40px);
  overflow-wrap: break-word;
}
.doc-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(26px, 4vw, 44px); }
.doc h1 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance;
}
.doc .doc-lead { margin: 0; max-width: 62ch; color: var(--sc-ink); font-size: 17.5px; line-height: 1.6; }
.doc .doc-date { margin: 0; color: var(--sc-ink-soft); font-size: 14px; }
.doc h2 {
  margin: clamp(36px, 5vw, 52px) 0 12px; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(21px, 2.3vw, 26px); line-height: 1.2; letter-spacing: -0.005em; color: var(--sc-ink); text-wrap: balance;
}
.doc h3 { margin: 26px 0 8px; color: var(--sc-ink); font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.doc p, .doc li, .doc dd { color: var(--doc-ink); font-size: 16px; line-height: 1.68; }
.doc p { margin: 0 0 14px; max-width: 68ch; }
.doc ul { margin: 0 0 16px; padding-left: 1.25em; max-width: 68ch; }
.doc li { margin: 0 0 8px; padding-left: 0.2em; }
.doc li::marker { color: var(--sc-ink-soft); }
.doc strong { color: var(--sc-ink); font-weight: 600; }
.doc a { color: var(--sc-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:hover { color: rgb(var(--accent-strong)); }
.doc a:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 4px; }
.doc .doc-head + h2 { margin-top: 0; }

/* A card: the surface and one crisp line round it, as the plans and the answers are drawn. */
.doc-card {
  margin: 0 0 18px; padding: 18px 22px; border-radius: 16px;
  background: var(--sc-surface); box-shadow: 0 0 0 1px var(--card-edge);
}
.doc-card > :last-child { margin-bottom: 0; }
.doc-card h2 { margin-top: 0; }
/* Google's Limited Use statement, set apart from the text around it */
.doc .doc-statement { padding-left: 14px; border-left: 2px solid rgb(var(--accent) / 0.6); color: var(--sc-ink); }

/* The legal notice: each field and its value, side by side, stacked on a phone. */
.notice {
  display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 12px 24px; margin: 0 0 22px;
}
.notice dt { color: var(--sc-ink-soft); font-size: 14.5px; line-height: 1.68; }
.notice dd { margin: 0; color: var(--sc-ink); }
@media (max-width: 560px) {
  .notice { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .notice dd { margin-bottom: 12px; }
}

/* The contact: the one address, large. */
.contact-address { display: inline-block; font-size: clamp(19px, 2.6vw, 24px); font-weight: 500; }

/* The account: its three places, one card each. */
.acct h2 { margin-bottom: 8px; }

/* ================================================= early.html: the standalone homepage === */
.home-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: clamp(28px, 4.4vw, 48px); }
.doc .home-brand { margin: 0; display: inline-flex; align-items: center; gap: 14px; color: var(--sc-ink); font-size: clamp(30px, 4vw, 40px); line-height: 1; }
.doc .home-brand img { width: clamp(44px, 5vw, 56px); height: auto; flex: none; }
.doc .home-claim { margin: 6px 0 0; color: var(--sc-accent); font-size: 17px; font-weight: 500; }
.doc .home-does { display: grid; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; list-style: none; }
.doc .home-does li { margin: 0; padding: 14px 0; border-top: 1px solid rgb(var(--line)); }
.doc .home-does li:last-child { border-bottom: 1px solid rgb(var(--line)); }
.doc .home-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; }