/* Public Utilities, publicutilities.app
   One stylesheet, no framework, no build step, nothing fetched from elsewhere.

   The apps were redesigned to look like the ones that come with an iPhone, so
   the site uses the same materials: the system font, iOS's own neutrals, and
   one accent per app from the kit (kit/Sources/PublicUtilitiesKit/Design/PUPalette.swift).
   The system font stack is a deliberate choice here, not a default: on an Apple
   device it is SF Pro, the face every screenshot on the page is set in, so the
   words around the screenshots match the words inside them. */

:root {
  color-scheme: light dark;

  /* White page so the gray grouped backgrounds inside the screenshots read as
     panels; the gray is iOS's systemGroupedBackground. */
  --page: #FFFFFF;
  --panel: #F2F2F7;
  --ink: #000000;          /* label */
  --ink-2: #6E6E73;        /* secondary text, 4.5:1 or better on page and panel */
  --rule: rgba(60, 60, 67, 0.16);
  --rule-strong: rgba(60, 60, 67, 0.36);
  --focus: #0071E3;
  --icon-edge: rgba(0, 0, 0, 0.32);
  --icon-shadow: rgba(0, 0, 0, 0.14);
  --phone-shadow: rgba(0, 0, 0, 0.16);

  /* Neutral accent for pages that aren't about one app. */
  --accent: #1D1D1F;
  --accent-text: #1D1D1F;
  --glow: rgba(0, 0, 0, 0);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --measure: 34em;
}

/* Per-app accents. --accent is the kit's value; --accent-text is the same hue
   darkened just enough to pass 4.5:1 as link text on white and on the panel
   gray; --glow is the soft light behind the hero phone. */
.app-countdown { --accent: #E8590C; --accent-text: #BB4809; --glow: rgba(232, 89, 12, 0.20); }
.app-water     { --accent: #0B7FD0; --accent-text: #0971B9; --glow: rgba(11, 127, 208, 0.20); }
.app-convert   { --accent: #5E55D6; --accent-text: #5E55D6; --glow: rgba(94, 85, 214, 0.20); }
.app-plants    { --accent: #23843F; --accent-text: #217D3B; --glow: rgba(35, 132, 63, 0.20); }
.app-level     { --accent: #C27000; --accent-text: #A15C00; --glow: rgba(194, 112, 0, 0.22); }
.app-spinner   { --accent: #D93A4A; --accent-text: #C93544; --glow: rgba(217, 58, 74, 0.18); }
.app-metronome { --accent: #0E857B; --accent-text: #0C7A71; --glow: rgba(14, 133, 123, 0.20); }

@media (prefers-color-scheme: dark) {
  :root {
    --page: #000000;
    --panel: #1C1C1E;
    --ink: #FFFFFF;
    --ink-2: #98989F;
    --rule: rgba(84, 84, 88, 0.55);
    --rule-strong: rgba(235, 235, 245, 0.32);
    --focus: #2997FF;
    --icon-edge: rgba(255, 255, 255, 0.30);
    --icon-shadow: rgba(0, 0, 0, 0.6);
    --phone-shadow: rgba(0, 0, 0, 0.6);
    --accent: #F5F5F7;
    --accent-text: #F5F5F7;
  }
  /* The kit's dark accents already hold 4.5:1 as text on black. */
  .app-countdown { --accent: #EE5F00; --accent-text: #EE5F00; --glow: rgba(238, 95, 0, 0.28); }
  .app-water     { --accent: #0C92E8; --accent-text: #0C92E8; --glow: rgba(12, 146, 232, 0.28); }
  .app-convert   { --accent: #867DF4; --accent-text: #867DF4; --glow: rgba(134, 125, 244, 0.28); }
  .app-plants    { --accent: #30A054; --accent-text: #30A054; --glow: rgba(48, 160, 84, 0.28); }
  .app-level     { --accent: #C07F00; --accent-text: #C07F00; --glow: rgba(192, 127, 0, 0.30); }
  .app-spinner   { --accent: #FF4758; --accent-text: #FF4758; --glow: rgba(255, 71, 88, 0.26); }
  .app-metronome { --accent: #259C8F; --accent-text: #259C8F; --glow: rgba(37, 156, 143, 0.28); }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* rem everywhere, so the reader's default font size scales the whole page. */
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;      /* 17px, iOS body size */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* the hero light is wider than a phone screen */
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { margin: 0; font-weight: 700; }

p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 600px) {
  :root { --gutter: 28px; }
}

/* ---- Site header ---- */

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}

.brand {
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  padding: 10px 0;
}

.head-link {
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 10px 0;
}

.brand:hover, .head-link:hover { text-decoration: underline; }

/* ---- App icons: system corner shape baked into the image; a hairline edge
   and a soft shadow so they never sit on a field of their own color. ---- */

.icon {
  filter:
    drop-shadow(0 0 0.5px var(--icon-edge))
    drop-shadow(0 4px 10px var(--icon-shadow));
}

/* ---- Home hero ---- */

.hero {
  text-align: center;
  padding: 40px 0 8px;
}

@media (min-width: 600px) {
  .hero { padding: 72px 0 16px; }
}

.icon-row {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 16px);
}

.icon-row a { display: block; border-radius: 22%; }

.icon-row img {
  width: clamp(38px, 11.2vw, 76px);
  height: auto;
}

.hero h1 {
  font-size: clamp(2.125rem, 6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 15ch;
  margin: 32px auto 0;
  text-wrap: balance;
}

.hero .lede {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 32em;
  margin: 20px auto 0;
  text-wrap: pretty;
}

/* ---- Home: the seven apps ---- */

.lineup {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px 36px;
}

.tile {
  width: 228px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* The words fill the rest of the tile, so each row's links line up. */
.tile > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tile > div .more { margin-top: auto; padding-top: 16px; }

.tile .phone {
  display: block;
  width: 212px;
  margin: 0 auto;
}

.tile .phone img {
  filter: drop-shadow(0 18px 28px var(--phone-shadow));
}

.tile-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.tile-name img { width: 34px; }

.tile h3 {
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
}

.tile p {
  color: var(--ink-2);
  font-size: 1rem;
  margin-top: 8px;
  text-wrap: pretty;
}

.more {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 0;
  color: var(--accent-text);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.more:hover { text-decoration: underline; }

/* On a phone the lineup becomes a list: a small framed screen beside the words. */
@media (max-width: 599px) {
  .lineup {
    display: block;
    margin-top: 44px;
  }
  .tile > div { display: block; }
  .tile > div .more { margin-top: 4px; padding-top: 6px; }
  .tile {
    width: auto;
    display: grid;
    grid-template-columns: 124px 1fr;
    gap: 0 18px;
    align-items: center;
    text-align: left;
    padding: 22px 0;
    border-top: 1px solid var(--rule);
  }
  .tile:last-child { border-bottom: 1px solid var(--rule); }
  .tile .phone { width: 124px; }
  .tile .phone img { filter: drop-shadow(0 10px 16px var(--phone-shadow)); }
  .tile-name { justify-content: flex-start; margin-top: 0; gap: 8px; }
  .tile-name img { width: 28px; }
  .tile h3 { font-size: 1.1875rem; }
  .tile p { font-size: 0.9375rem; margin-top: 6px; }
  .more { font-size: 0.9375rem; margin-top: 4px; }
}

/* ---- Home: why they're free ---- */

.why {
  max-width: var(--measure);
  margin: 104px auto 0;
}

.why h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 20px;
}

.why p + p { margin-top: 14px; }

.why p { font-size: 1.125rem; }

/* ---- App page hero ---- */

.app-hero {
  text-align: center;
  padding: 36px 0 0;
}

@media (min-width: 600px) {
  .app-hero { padding-top: 56px; }
}

.app-hero .icon {
  width: clamp(96px, 26vw, 120px);
  margin: 0 auto;
}

.app-hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-top: 24px;
}

.value {
  font-size: clamp(1.1875rem, 2.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 26em;
  margin: 14px auto 0;
  text-wrap: balance;
}

/* Pending until the App Store link exists: a dashed outline, not a real badge,
   so it reads as not live yet. */
.store-pending {
  display: inline-block;
  margin-top: 26px;
  padding: 11px 20px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
}

.stage {
  position: relative;
  width: min(300px, 70vw);
  margin: 52px auto 0;
  isolation: isolate;
}

/* The one gradient on the site: a soft light behind the hero phone, fading to
   nothing on every side. */
.stage::before {
  content: "";
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: 50%;
  width: min(560px, 100vw);   /* never wider than the screen, so no sideways scroll */
  transform: translateX(-50%);
  z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent);
}

.stage img {
  filter: drop-shadow(0 26px 40px var(--phone-shadow));
}

/* ---- App page features ---- */

.features {
  max-width: 940px;
  margin: 104px auto 0;
}

.feature {
  display: grid;
  gap: 20px;
  margin-top: 64px;
}

.feature:first-child { margin-top: 0; }

.feature h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.feature p {
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 26em;
  font-size: 1.0625rem;
}

/* Every feature picture gets the same treatment: a band of the real screen,
   full width so the UI keeps its own margins, in a rounded panel. */
.crop {
  width: 100%;
  max-width: 440px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
}

@media (min-width: 760px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    margin-top: 88px;
  }
  .feature .crop { justify-self: center; }
  .feature:nth-child(even) .crop { order: -1; }
}

.also {
  max-width: var(--measure);
  margin: 72px auto 0;
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}

.free {
  text-align: center;
  margin: 104px auto 0;
  max-width: var(--measure);
}

.free h2 {
  font-size: clamp(1.625rem, 4vw, 2.375rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.free p {
  color: var(--ink-2);
  margin-top: 12px;
}

.support {
  text-align: center;
  max-width: var(--measure);
  margin: 72px auto 0;
}

.support h2 {
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
}

.support p { margin-top: 8px; color: var(--ink-2); }

.support a, .prose a, .why a {
  color: var(--accent-text);
  font-weight: 600;
}

/* ---- More free apps (app pages, 404) ---- */

.others {
  margin: 104px 0 0;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.others h2 {
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
}

.others ul {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 12px;
}

.others a {
  display: block;
  width: 84px;
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--ink-2);
  border-radius: 12px;
  padding: 4px 0;
}

.others a:hover { color: var(--ink); }

.others img {
  width: 60px;
  margin: 0 auto 8px;
}

/* ---- Prose pages (privacy) ---- */

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px 0 0;
}

@media (min-width: 600px) {
  .prose { padding-top: 64px; }
}

.prose h1 {
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.06;
}

.prose .updated {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin-top: 10px;
}

.prose .lead {
  font-size: 1.3125rem;
  line-height: 1.4;
  margin-top: 28px;
}

.prose h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-top: 40px;
}

.prose p { margin-top: 10px; }

.prose h2 + p { margin-top: 8px; }

/* ---- 404 ---- */

.lost {
  text-align: center;
  padding: 48px 0 0;
}

.lost .crop {
  max-width: 320px;
  margin: 0 auto;
}

.lost h1 {
  font-size: clamp(2.125rem, 6vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-top: 36px;
}

.lost p {
  color: var(--ink-2);
  font-size: 1.125rem;
  margin: 14px auto 0;
  max-width: 28em;
}

.lost .home-link {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 0;
  font-weight: 600;
  color: var(--ink);
}

/* ---- Footer ---- */

.site-foot {
  margin-top: 104px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  padding-bottom: 40px;
}

.site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.site-foot a {
  display: inline-block;
  padding: 8px 0;
  text-decoration: none;
}

.site-foot a:hover { color: var(--ink); text-decoration: underline; }

/* Nothing on the site animates; this is here so any later addition starts
   from the right place. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}