/* gettyle.app: colours from the app's Palette.swift, iOS system fonts, no external resources.

   Layout: frame-wide rows, columns inside (owner, 2026-10-23).
   - Wide screens (from 64rem): every row of the home page, the header and the footer span --frame, so
     all rows share one left and one right edge. Inside a row the content is split into columns, all
     separated by --col-gap: the hero (title across, then the intro | the calculator card), the three
     questions, the goal-mode lists (stacked, the phone screenshot beside them), "your data" | "why
     Tyle", and the footer's two paragraphs under its links. Two-column rows are equal; the hero's card column is a little wider so
     the result fits on one line.
   - Narrower screens: everything stacks in one column of --measure (about 65-75 characters a line), the
     calculator before the for-whom line so its result stays on a phone's first screen.
   - Document pages (privacy, terms, support, licences; owner, 2026-10-23): they span the frame too. Wide
     screens: the title across, then the page's contents (a sticky list of its sections) on the left and
     the text at --measure on the right, ending on the frame's right edge. Narrower: one column, with the
     contents collapsed under the title on pages with three sections or more. The 404 page has no
     contents: its title and text keep to --measure on the frame's left edge.
   The framed phone screenshot sits in the goal-mode row (.features > .shot; images from design/mockups). */
:root {
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --text: #000000;
  --text-body: #1C1C1E; /* long running text (documents): a touch softer than the headings */
  --muted: #6C6C70;     /* the one secondary text colour: supporting text, notes, footer */
  --hairline: rgba(60, 60, 67, 0.18);
  --card-border: rgba(60, 60, 67, 0.14);
  --accent: #0A7F45;
  --on-accent: #FFFFFF;
  --highlight: #C21FC6;
  --highlight-text: #BA1EBE; /* --highlight as text: 4.68:1 on --bg, 5.23:1 on --surface (--highlight is 4.37:1 on --bg) */
  --display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;

  /* Layout: frame-wide rows with columns inside (wide screens); one column of --measure otherwise. */
  --frame: 64rem;     /* every row on wide screens */
  --measure: 34rem;   /* the single column: about 65-75 characters a line of body text */
  --col-gap: 2.5rem;  /* between the columns of every row */
  --gutter: 1.25rem;
  --card-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Spacing scale */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --space-top: clamp(1.5rem, 5vw, 3.5rem);    /* header to the first heading, on every page */
  --space-section: clamp(4rem, 9vw, 6.5rem);  /* between page sections, and before the footer */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --text: #FFFFFF;     /* headings, like Apple's labels */
    --text-body: #E5E5EA; /* long running text: softer than pure white on black */
    --muted: #98989F;
    --hairline: rgba(84, 84, 88, 0.65);
    --card-border: transparent;
    --accent: #34E07F;
    --on-accent: #000000;
    --highlight: #E23DE6;
    --highlight-text: var(--highlight); /* 6.04:1 on --bg */
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* One column below 64rem (and always for the documents' text): every block ends at the same right edge. */
main.wrap > *, main .wrap > *, .hero-intro > *, .site-footer > * { max-width: var(--measure); }
/* Wide screens: the home page's rows and the footer span the frame; their columns are set below. */
@media (min-width: 64rem) {
  .home main .wrap > *, .home .hero-intro > *, .site-footer > * { max-width: none; }
}

/* Two equal columns from 64rem (stacked before). */
@media (min-width: 64rem) {
  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  main .cols > p { margin: 0; }
}

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 3px; border-radius: 4px; }

.skip {
  /* 44 px tall at least: 0.625rem padding around a 1.55 line of 17 px text. */
  position: absolute; left: 1rem; top: -5rem;
  background: var(--surface); padding: 0.625rem 0.875rem; border-radius: 10px; z-index: 10;
}
.skip:focus { top: 1rem; }

/* Headings and summaries balance their lines (no single word left on the last one); running text
   avoids a lone word on its last line. */
h1, h2, h3, summary { text-wrap: balance; }
p, li { text-wrap: pretty; }

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

/* ---------- header and footer ---------- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.25rem; padding-bottom: 1.25rem;
}

.wordmark {
  /* The brand mark: larger than the calculator sentence (up to 2rem) and the section headings'
     smallest size, well below the hero title; 44 px tap target without moving the header. */
  display: inline-block; padding: 0.5rem 0; margin: -0.5rem 0;
  font: 700 clamp(2rem, 3.2vw, 2.5rem)/1 var(--display);
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}
.wordmark::after {
  content: "";
  display: inline-block;
  width: 0.28em; height: 0.28em;
  margin-left: 0.06em;
  border-radius: 50%;
  /* The full stop is magenta everywhere: the app icon, the app's opening "tyle?" → "tyle." (owner, 2026-10-23). */
  background: var(--highlight);
}

/* Tap targets of about 44 px (Apple's minimum), without moving the text. */
.lang {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 0.75rem; margin-right: -0.75rem;
  color: var(--muted); font-size: 0.9375rem; text-decoration: none;
}
.lang:hover { color: var(--text); text-decoration: underline; }

.site-footer {
  margin-top: var(--space-section);
  padding-top: var(--s3);
  padding-bottom: 3rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
.site-footer ul {
  list-style: none; margin: 0 0 var(--s1); padding: var(--s1) 0 0; /* the 44 px links add the rest */
  border-top: 1px solid var(--hairline);
  /* Narrow screens: even columns, so no link is left alone on a line; wide screens: one row. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0 1rem;
}
/* Four links (no "Kontakt" until the seller details are in): two by two, never three and one. */
.site-footer ul:not(:has(> li:nth-child(5))) { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46rem) {
  .site-footer ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
}
.site-footer a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text); text-decoration: none;
}
.site-footer a:hover, .site-footer a[aria-current="page"] { text-decoration: underline; }
.site-footer p { margin: 0 0 var(--s1); }
.site-footer p + p { margin-top: var(--s2); } /* the not-advice line and the copyright: two blocks */
/* Wide screens: the links across the frame, the two paragraphs in two columns under them. */
@media (min-width: 64rem) {
  .site-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .site-footer nav { grid-column: 1 / -1; }
  .site-footer p + p { margin-top: 0; }
  .site-footer p { text-wrap: wrap; } /* "pretty" left these lines short and ragged side by side */
}
/* A link inside a footer sentence is part of the text: underlined, on the line, not a 44 px button,
   and never split across lines. */
.site-footer p a { display: inline; min-height: 0; text-decoration: underline; white-space: nowrap; }

/* ---------- home ---------- */

.hero { padding-top: var(--space-top); }

.hero h1 {
  margin: 0;
  /* "Ile wystarczy?" on one line from 300 px; capped so it stays on one line in the single column and,
     from 64rem, "How much is enough?" stays on one line across the frame. */
  font: 700 clamp(2.75rem, 13vw, 4.25rem)/0.92 var(--display);
  letter-spacing: -0.045em;
}
@media (min-width: 64rem) { .hero h1 { font-size: 6.5rem; } }

/* The name's first mention on the page: bold, in the text colour (owner, 2026-10-23). */
.lede strong { color: var(--text); font-weight: 700; }

.lede {
  margin: var(--s3) 0 0;
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.45;
  color: var(--muted);
}


.calc {
  margin-top: clamp(var(--s3), 4vw, var(--s4));
  /* Its own text fills the card's inner width. */
  padding: var(--card-pad);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--card-border); /* a border that takes no space, so the notes line up */
  border-radius: 28px;
}

/* The card's label: small and muted, on the card's text column. */
.eyebrow {
  margin: 0 0 var(--s1);
  color: var(--muted);
  font: 600 0.9375rem/1.3 var(--display);
}

.sentence {
  margin: 0;
  font: 600 clamp(1.375rem, 3.6vw, 1.75rem)/1.5 var(--display);
  letter-spacing: -0.015em;
}

/* The label is the tap area (44 px and more; tapping it focuses the field), so the field itself can hug the
   digits and its underline sits right under them instead of reaching into the line below (owner, 2026-10-23).
   The negative margin keeps the sentence's line height. */
.field { display: inline-block; padding: 0.3em 0; margin: -0.3em 0; position: relative; z-index: 1; } /* above the next line, so its whole box takes the tap */
.field input {
  font: inherit;
  line-height: 1.1;
  color: inherit;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--highlight);
  border-radius: 0;
  padding: 0 0.1em 0.04em;
  margin: 0 0.1em;
  text-align: center;
  min-width: 3ch;
}
.field input:focus-visible { outline-offset: 4px; }

.result { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.result-label { margin: 0; color: var(--muted); font: 500 1.0625rem/1.3 var(--display); }
.result-value {
  margin: 0.15rem 0 0;
  font: 700 clamp(1.875rem, 8vw, 3rem)/1.02 var(--display);
  letter-spacing: -0.035em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.note { margin: var(--s2) 0 0; color: var(--muted); font-size: 0.9375rem; }
.result + .note { margin-top: var(--s1); }

/* Right under the lede: the app icon, "coming soon" and the requirement; who it's for below. */
.get { margin-top: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.get p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
/* A plain label until the App Store badge exists: nothing here looks tappable. */
.get .soon { color: var(--text); font: 600 1.0625rem/1.3 var(--display); }
/* Decorative (the text names the app); rounded about as much as an iOS icon. */
.app-icon {
  flex: none; display: block;
  width: 64px; height: 64px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px var(--card-border);
}

.for-whom { margin: var(--s2) 0 0; color: var(--muted); }
/* One column: the for-whom line goes after the calculator, so its result stays on the first screen of a
   short phone (375×667). Only the order changes. */
@media (max-width: 63.99rem) {
  .hero { display: flex; flex-direction: column; }
  .hero-intro { display: contents; } /* so its children are .hero's flex items and can be reordered */
  .hero .for-whom { order: 1; margin-top: var(--s3); }
}
/* Wide screens: the title across the frame; under it the intro (lede, App Store row, who it's for) and
   the calculator card side by side, their tops level. */
@media (min-width: 64rem) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--col-gap); align-items: start;
  }
  .hero h1 { grid-column: 1 / -1; }
  /* Level with each other, and clear of the large title's descenders. */
  .hero .lede, .hero .calc { margin-top: var(--s4); }
  .hero .result-value { font-size: 2.75rem; } /* "6 years and 7 months" on one line in the card */
}

.block { margin-top: var(--space-section); }

.block h2, .prose h2 {
  margin: 0 0 var(--s2);
  font: 700 clamp(1.6rem, 3.6vw, 2.25rem)/1.15 var(--display);
  letter-spacing: -0.025em;
}

.questions {
  display: grid;
  gap: var(--s4) var(--col-gap);
  margin-top: var(--s4);
}
/* Three columns across the frame from 64rem, one under another before; each with a hairline above. */
@media (min-width: 64rem) {
  .questions { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  /* Each question's title and text share rows with the others' (subgrid), so the texts start level even
     when one title takes two lines. */
  .questions > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
}
/* Colour (owner, 2026-10-23): headings in the text colour, everything under them muted; the one colour
   cue of each column is a short green bar above its heading (no white rules). */
.questions > div, .features > div:not(.shot) { position: relative; padding-top: calc(var(--s2) + 3px); }
.questions > div::before, .features > div:not(.shot)::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 3px; border-radius: 1.5px; background: var(--accent);
}
.features li, .features > div > p { color: var(--muted); }
/* "Your data" and "Why Tyle": supporting text too. */
.pair p { color: var(--muted); }
.questions h3, .features h3 { margin: 0 0 var(--s1); font: 650 1.25rem/1.25 var(--display); letter-spacing: -0.01em; }

/* Goal mode | Tyle Pro (owner, 2026-10-23): built like the questions, with short lists. Stacked below 64rem. */
.features { display: grid; row-gap: var(--s4); margin-top: var(--s4); }
.features > div > p { margin: 0 0 var(--s1); }
.features .aside { margin: var(--s2) 0 0; color: var(--muted); font-size: 0.9375rem; }
/* The framed phone (the Plan tab; owner, 2026-10-23). Below 64rem: centred under the lists. From 64rem: the
   two lists stacked at --measure on the left, the phone on the right, its top level with theirs and its
   right edge on the frame's (three columns would leave the lists under 45 characters a line). The image's
   width and height attributes keep its space while it loads. */
.features > .shot { justify-self: center; width: 280px; max-width: 100%; }
.shot img { display: block; width: 100%; height: auto; }
@media (min-width: 64rem) {
  .features:has(> .shot) { grid-template-columns: var(--measure) minmax(0, 1fr); }
  .features:has(> .shot) > div:not(.shot) { grid-column: 1; }
  .features > .shot { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; width: 320px; }
}

/* A quiet marker: a short muted dash instead of the default bullet. */
.prose .marks { list-style: none; margin: 0; padding: 0; }
.prose .marks li { position: relative; margin: 0 0 var(--s1); padding-left: 1.25rem; }
.prose .marks li:last-child { margin-bottom: 0; }
.marks li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 0.5rem; height: 2px; border-radius: 1px; background: var(--muted);
}
.questions p { margin: 0; color: var(--muted); }

/* "Your data" and "Why Tyle": two short sections in one row from 64rem, stacked as two blocks before. */
@media (max-width: 63.99rem) { .pair > section + section { margin-top: var(--space-section); } }
/* Side by side: headings on one row, texts level on the next (subgrid), even when one heading wraps. */
@media (min-width: 64rem) {
  .pair > section { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
.pair section p { margin-bottom: 0; }

/* The answer in "Skąd nazwa?" / "Why Tyle?": the app's magenta, as text. */
.pun { font-weight: 700; color: var(--highlight-text); }

/* ---------- documents ---------- */

.prose p { margin: 0 0 var(--s2); }
.prose li { margin: 0 0 var(--s1); }
.doc-body p, .doc-body li, .missing p { color: var(--text-body); }
.prose ul { padding-left: 1.25rem; margin: 0 0 var(--s2); }

/* Documents and the 404 page share one title. */
.doc h1 {
  /* Smaller than the hero's; sized so the longest two-word title ("Polityka prywatności") keeps to one
     line in the column at every width. */
  margin: var(--space-top) 0 var(--s3);
  font: 700 clamp(1.875rem, 9.6vw, 3.625rem)/1 var(--display);
  letter-spacing: -0.04em;
}
.doc-head { margin-bottom: var(--s4); }
.doc-head h1 { margin-bottom: 0; }
.doc-head .meta { margin: var(--s1) 0 0; color: var(--muted); }
.doc-body > p:first-of-type, .missing > h1 + p { font-size: 1.1875rem; } /* the lead */
.doc-body section { margin-top: var(--s4); }
.doc .prose h2 { font-size: clamp(1.375rem, 2.6vw, 1.6rem); margin-bottom: var(--s1); scroll-margin-top: var(--s3); }

/* The page's contents. Wide screens: a sticky column on the frame's left edge, the text at --measure on
   the right, ending on the frame's right edge; the title spans both, as on the home page. The sticky
   column stays within its grid row, so it never runs into the footer. Narrower: a collapsed list under
   the title (pages with three sections or more). */
.toc { display: none; }
.toc-title { margin: 0 0 var(--s1); color: var(--muted); font: 600 0.9375rem/1.3 var(--display); }
.toc ul, .toc-narrow ul { list-style: none; margin: 0; padding: 0; }
.prose .toc li, .prose .toc-narrow li { margin: 0; }
.toc a, .toc-narrow a {
  display: flex; align-items: center; min-height: 44px; /* each link a 44 px block */
  color: var(--muted); text-decoration: none; line-height: 1.3;
}
.toc a:hover, .toc-narrow a:hover { color: var(--text); text-decoration: underline; }
.toc-narrow { margin: calc(-1 * var(--s2)) 0 var(--s4); }
.toc-narrow ul { padding-bottom: var(--s1); }
@media (min-width: 64rem) {
  .doc-page {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--measure);
    column-gap: var(--col-gap); align-items: start;
  }
  main .doc-page > * { max-width: none; }
  .doc-head { grid-column: 1 / -1; }
  .toc { display: block; grid-column: 1; grid-row: 2; position: sticky; top: var(--s3); }
  .doc-body { grid-column: 2; grid-row: 2; }
  .toc-narrow { display: none; }
}

details {
  border-top: 1px solid var(--hairline);
  padding: 0.25rem 0;
}
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary {
  cursor: pointer;
  padding: 0.85rem 0;
  font: 600 1.125rem/1.35 var(--display);
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
/* The +/– marker is drawn, not written, so screen readers don't read it out. */
summary::after {
  content: "";
  flex: none;
  width: 0.75rem; height: 0.75rem;
  margin-top: 0.3em;
  color: var(--accent);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
details[open] summary::after { background-size: 100% 2px, 0 0; }
details p { margin: 0 0 var(--s2); color: var(--text-body); }