/* ==========================================================================
   OnTheTools website - shared layout (every page except reset-password,
   connect-onboarding and app.html, which carry their own styles).

   Tokens (colour, type, space, radii, motion) come from brand.css; never type
   a hex here that brand.css already names. Breakpoints: 600 / 900 / 1200.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  --section-y: clamp(4.5rem, 2.2rem + 7.4vw, 9rem); /* 72 -> 144 */
  --tile-pad: clamp(22px, 2.3vw, 36px);
  --line-strong: rgba(28, 28, 30, 0.9);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
/* nothing tilted or drifting can scroll the page sideways. "hidden" first for
   Safari before 16, which drops "clip" (no sticky element lives inside main) */
main { display: block; overflow-x: hidden; overflow-x: clip; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Focus: an ink ring on light backgrounds, a white ring on ink and orange.
   Never orange: an orange ring is 2.86:1 against white. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
  border-radius: 8px;
}
:where(.on-dark) :where(a, button):focus-visible { outline-color: var(--c-white); }
/* On the orange an ink ring (5.1:1 at the gradient's darkest stop); a white
   ring there is only 2.4-3.3:1, under the 3:1 a focus indicator needs. */
:where(.on-orange) :where(a, button):focus-visible { outline-color: var(--c-ink); }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip:focus { top: 12px; }

.fine {
  font-size: var(--fs-fine);
  line-height: var(--lh-fine);
  letter-spacing: var(--ls-fine);
  color: var(--text-2);
}

/* ------------------------------------------------------------------ header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.js .site-head--home { border-bottom-color: transparent; transition: border-color var(--dur-screen) var(--ease-standard); }
.js .site-head--home.is-scrolled { border-bottom-color: var(--hairline); }

.head-row {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.head-logo { flex: none; display: block; padding: 10px 0; }
.head-logo img { width: auto; height: 24px; }

.head-nav { display: none; }
@media (min-width: 960px) {
  .head-nav { display: flex; gap: 2px; }
}
.head-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 14px;
  color: var(--text-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  transition: color var(--dur-fade) var(--ease-standard);
}
.head-nav a:hover,
.head-nav a.is-active,
.head-nav a[aria-current="page"] { color: var(--text); }
/* scroll spy: a 4 px orange dot under the section you are in */
.head-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--c-orange);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity var(--dur-fade) var(--ease-standard), transform var(--dur-screen) var(--ease-out);
}
.head-nav a.is-active::after,
.head-nav a[aria-current="page"]::after { opacity: 1; transform: none; }

.pill-ink {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-standard), background-color var(--dur-fade);
}
.pill-ink:hover { background: #000; }
.pill-ink:active { transform: var(--lift-press); }
/* the "soon" stand-in for the header pill: a fact, so no fill */
.pill-soon {
  flex: none;
  color: var(--text-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ header: the orange band
   ONLY on pages that add .site-head--band (index and download). Every rule
   below is scoped to it, so support, privacy, terms, data deletion and 404
   keep the white header above, exactly as before.

   The app's signature: the orange gradient band at the top with the white
   wordmark ("Tools" at 74% white, inside the SVG), and a white sheet with
   rounded top corners sitting over the band's bottom edge.
   - Condensing is plain CSS: the band is 80 px tall at the top of the page
     and sticks at top: -16px, so 64 px of it stays (no script, no layout
     change). The row sits in those bottom 64 px.
   - The ::after draws the sheet's two top corners under the band (orange
     outside a quarter circle), so whatever scrolls beneath reads as the
     app's sheet sliding under the band.
   - The gradient runs left to right, so the band, these corners and any
     band below the header (the hero's) meet without a seam at any height.
   - Words on the band: the logo is artwork; every other word is INK.
     Ink on the gradient is 5.1-7.2:1 (AA); white there is 2.4-3.3:1. */
.site-head--band {
  --band-h: 80px;
  --band-trim: 16px;
  --band-r: 32px;
  top: calc(-1 * var(--band-trim));
  background: var(--c-band-2) linear-gradient(90deg, var(--c-band-1) 0%, var(--c-band-2) 56%, var(--c-band-3) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
@media (max-width: 599px) {
  .site-head--band { --band-h: 68px; --band-trim: 12px; --band-r: 22px; }
}
.site-head--band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--band-r);
  background: inherit;
  pointer-events: none;
  -webkit-mask:
    radial-gradient(circle at 100% 100%, transparent calc(var(--band-r) - 0.5px), #000 var(--band-r)) left top / var(--band-r) var(--band-r) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--band-r) - 0.5px), #000 var(--band-r)) right top / var(--band-r) var(--band-r) no-repeat;
  mask:
    radial-gradient(circle at 100% 100%, transparent calc(var(--band-r) - 0.5px), #000 var(--band-r)) left top / var(--band-r) var(--band-r) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--band-r) - 0.5px), #000 var(--band-r)) right top / var(--band-r) var(--band-r) no-repeat;
}
.site-head--band .head-row { height: var(--band-h); padding-top: var(--band-trim); }
/* the logo link is a 44 px target at every width (the 22 px phone logo + 11 px each side) */
.site-head--band .head-logo { display: flex; align-items: center; min-height: var(--tap-min); padding: 0; }
.site-head--band .head-logo img { height: 26px; transform-origin: left center; }
@media (max-width: 599px) { .site-head--band .head-logo img { height: 22px; } }
/* the wordmark settles a touch smaller as the band condenses (scroll-linked
   where the browser can; elsewhere it simply stays full size) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-head--band .head-logo img {
      animation: band-logo linear both;
      animation-timeline: scroll(root);
      animation-range: 0 64px;
    }
  }
}
@keyframes band-logo { to { transform: scale(0.9); } }
html:has(.site-head--band) { scroll-padding-top: 96px; }

/* section links: a glass track on the band, the section you are in on a
   white thumb (the app's segmented control). Each link is 44 px tall. */
@media (min-width: 960px) {
  .site-head--band .head-nav {
    gap: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  }
}
.site-head--band .head-nav a {
  z-index: 0;
  padding: 0 17px;
  border-radius: var(--r-pill);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}
.site-head--band .head-nav a::before,
.site-head--band .head-nav a::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  left: 4px;
  bottom: 4px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: var(--r-pill);
}
.site-head--band .head-nav a::before { background: rgba(255, 255, 255, 0.22); opacity: 0; transition: opacity var(--dur-fade) var(--ease-standard); }
.site-head--band .head-nav a:hover::before { opacity: 1; }
.site-head--band .head-nav a::after {
  background: var(--c-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 14px -4px rgba(150, 50, 0, 0.45);
  transform: scale(0.94);
}
.site-head--band .head-nav a.is-active::after,
.site-head--band .head-nav a[aria-current="page"]::after { opacity: 1; transform: none; }
.site-head--band .head-nav a:focus-visible { outline-offset: -2px; border-radius: var(--r-pill); }
/* the one action on the band is white, the app's sheet colour */
.site-head--band .pill-ink {
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px -6px rgba(150, 50, 0, 0.5);
}
.site-head--band .pill-ink:hover { background: var(--c-orange-tint); }
/* a fact, not a button: plain ink words, no box */
.site-head--band .pill-soon { color: var(--c-ink); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ device frame
   index and download only: every rule is scoped to a <main> that follows the
   band header, so no other page can ever pick it up. :where() keeps the
   weight of a plain class, so home.css can still place a frame. A slim graphite
   bezel round a real screenshot. The staged shots are 1206 x 2622 (iPhone
   16 Pro), corner radius 15.6% of the width (brand.css --r-device). With a
   bezel of 2.6% of the frame's width each side, the frame's own corner is
   15.6% x 0.948 + 2.6% = 17.4% of its width, and it is 2.113 widths tall.
   Set --pw (the frame's width) on the element or a parent. */
:where(.site-head--band ~ main) .phone {
  position: relative;
  flex: none;
  width: var(--pw, 280px);
  max-width: 100%;
  padding: calc(var(--pw, 280px) * 0.026);
  border-radius: calc(var(--pw, 280px) * 0.174);
  background: #0D0D0F;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 calc(var(--pw, 280px) * 0.009) #2B2B2E,
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 28px 56px -20px rgba(28, 28, 30, 0.34),
    0 72px 130px -56px rgba(28, 28, 30, 0.36);
}
:where(.site-head--band ~ main) .phone__glass { position: relative; border-radius: 15.6% / 7.17%; }
:where(.site-head--band ~ main) .phone__glass img { width: 100%; border-radius: 15.6% / 7.17%; background: var(--c-page); }

/* ------------------------------------------------------------------ App Store
   Apple's own black badge artwork, self-hosted (assets/brand/app-store/).
   Never redrawn, recoloured or re-lettered. Apple asks for at least 40 px
   tall and clear space of a quarter of its height around it. */
.store {
  display: inline-block;
  flex: none;
  border-radius: 9px;
  transition: transform var(--dur-press) var(--ease-standard), opacity var(--dur-fade);
}
.store img { width: auto; height: 54px; }
.store:hover { opacity: 0.86; }
.store:active { transform: var(--lift-press); }

/* Before the listing is live: a plain line, never a fake badge, and never
   a box. A box or a pill means a button, and this is not one. Apple's badge
   takes its place when the app is out. */
.store-soon {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ footer */
.site-foot {
  padding: clamp(48px, 6vw, 80px) 0 40px;
  border-top: 1px solid var(--hairline);
}
.foot-grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
}
.foot-brand > a { display: inline-block; padding: 10px 0; }
.foot-brand img { width: auto; height: 24px; }
.foot-honest {
  max-width: 28em;
  margin-top: 12px;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.foot-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}
.foot-links > div:first-child { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .foot-links { grid-template-columns: repeat(3, auto); gap: 56px; }
  .foot-links > div:first-child { grid-column: auto; }
}
.foot-h {
  margin-bottom: 4px;
  color: var(--text-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.foot-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text);
  font-size: var(--fs-label);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-base {
  display: grid;
  gap: 8px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: var(--fs-fine);
  line-height: var(--lh-fine);
}
@media (min-width: 900px) {
  .foot-base { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .foot-base .foot-tm { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ document pages
   Support, privacy, terms, data deletion. Their words are the live pages'
   words, unchanged; only the frame and the type around them are new. */
.doc-page { padding: clamp(40px, 6vw, 88px) 0 clamp(72px, 9vw, 128px); }
.doc {
  max-width: calc(var(--container-text) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: var(--text);
}
.doc h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  line-height: 1.02;
  font-weight: var(--fw-light);
  letter-spacing: -0.045em;
}
.doc .updated {
  margin-top: 18px;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.doc .version {
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-fine);
  line-height: var(--lh-fine);
  font-feature-settings: var(--font-features-tabular);
}
.doc .updated + h2,
.doc .version + h2,
.doc h1 + h2 { margin-top: clamp(40px, 5vw, 56px); padding-top: 0; border-top: 0; }
.doc h2 {
  margin-top: clamp(36px, 4vw, 48px);
  margin-bottom: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
}
.doc p,
.doc ul,
.doc ol {
  margin: 0 0 14px;
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.doc ul { list-style: disc; padding-left: 22px; }
.doc ol { list-style: decimal; padding-left: 22px; }
.doc li { margin: 0 0 10px; padding-left: 4px; }
.doc li::marker { color: var(--text-2); }
.doc strong { color: var(--text); font-weight: var(--fw-semibold); }
.doc a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.doc a:hover { text-decoration-thickness: 2px; }

/* Support: the contact box is the page's one card. */
.doc .contact {
  margin: clamp(28px, 4vw, 40px) 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--c-white);
  box-shadow: var(--shadow-1);
}
.doc .contact p { margin: 0 0 6px; }
.doc .contact p:last-child { margin-bottom: 0; }
.doc .contact .email {
  margin: 4px 0 10px;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.25;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}
.doc .contact .email a { text-decoration: none; }
.doc .contact .email a:hover { text-decoration: underline; }

/* Data deletion: the steps read as a numbered list with ink numbers. */
.doc ol li::marker { color: var(--text); font-weight: var(--fw-semibold); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .site-head, .site-foot, .skip { display: none !important; }
  .doc-page { padding: 0; }
  .doc a { text-decoration: none; }
}