/* The page layouts: home, product overview, support, privacy. Redesign,
 * 10 September 2026, from the approved page package.
 *
 * Carries no colour of its own. Every accent is read through --accent,
 * --accent-hover and --on-accent, which theme-*.css scopes to .theme-<slug>.
 *
 * THIS FILE'S NAME IS LOAD-BEARING. checksite.sh reads assets/css/product.css
 * by path to check the .step rules at the foot of this file.
 */

/* ================================================================= home */

.home-hero { padding: clamp(6rem, 13vw, 10rem) 0 clamp(5rem, 9vw, 7.5rem); text-align: center; }
.home-hero h1 {
  max-width: 850px;
  margin: 1.6rem auto 0;
  font: 400 clamp(3.3rem, 7vw, 6.8rem)/.96 var(--serif);
  letter-spacing: -.055em;
}
.hero-note { max-width: 36rem; margin: 2rem auto 0; color: var(--quiet); font-size: 1.05rem; line-height: 1.5; }

/* No full-width rule above the chooser, and none above .principles-row: the
   labels' own flanking lines divide the page (Owner's brief, 11 September
   2026). The rule BELOW the chooser stays -- without it the product names
   drift into the first product's picture (his correction, same day) -- and
   it is on .chooser-inner, the site-width box, so it is exactly as long as
   the label's line above it rather than edge to edge. */
.chooser-inner { padding: 1.6rem 0 1.8rem; border-bottom: 1px solid var(--rule); }
.chooser-heading { display: flex; align-items: center; gap: 1.25rem; }
.chooser-heading::before, .chooser-heading::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
.chooser-heading .eyebrow { white-space: nowrap; }
.chooser-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.8rem; }
.chooser-item { display: flex; min-height: 3.2rem; flex-direction: column; align-items: center; color: var(--ink); text-align: center; text-decoration: none; }
.chooser-item:hover .chooser-name { text-decoration: underline; text-decoration-color: var(--accent, var(--ink)); text-underline-offset: 5px; }
.chooser-name { display: block; font: 400 1.25rem/1.2 var(--serif); letter-spacing: -.025em; }
.chooser-note { display: block; margin-top: .2rem; color: var(--quiet); font-size: .78rem; line-height: 1.2; }

.product {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  padding: clamp(5.5rem, 10vw, 9rem) 0;
}
.product + .product { border-top: 1px solid var(--rule); }
.product.reverse { grid-template-columns: minmax(0, 1.28fr) minmax(260px, .72fr); }
.product.reverse .product-copy { order: 2; }
.product.reverse .product-visual { order: 1; }
.product h2 { margin-top: 1.15rem; font: 400 clamp(3rem, 5.5vw, 5.4rem)/.94 var(--serif); letter-spacing: -.06em; }
.product .tagline { margin-top: 1.25rem; font: 400 clamp(1.35rem, 2vw, 1.8rem)/1.1 var(--serif); color: var(--accent, var(--ink)); }
.product-line { max-width: 29rem; margin-top: 1.5rem; color: var(--quiet); font-size: 1rem; line-height: 1.55; }
.metadata { margin-top: 1.4rem; color: var(--quiet); font-size: .76rem; }
.visual-note { margin-top: .75rem; color: var(--quiet); font-size: .75rem; }

.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; }

/* The studio's principles: the chooser's divider and label, then three
   ruled columns like the product pages' truths, left-aligned for paragraphs. */
.principles-row { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2.4rem; }
.principle { padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.principle h2 { font: 400 1.45rem/1.2 var(--serif); letter-spacing: -.025em; }
.principle p { margin-top: .7rem; color: var(--quiet); font-size: .9rem; line-height: 1.6; }
@media (max-width: 800px) { .principles-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ====================================================== product overview */

.product-hero { padding: clamp(6rem, 13vw, 10rem) 0 clamp(4.5rem, 8vw, 7rem); text-align: center; }
.product-hero h1 { max-width: 850px; margin: 1.6rem auto 0; font: 400 clamp(3.4rem, 7vw, 6.8rem)/.94 var(--serif); letter-spacing: -.06em; }
/* THE PRODUCT LOCKUPS. Every measurement is the one the live site used before
   the redesign, read off the approved masters: the S and M in em of the text
   so the wordmark scales as one object (see git history of this file for the
   derivation). The heading's own serif rule is overridden, not reused. */
.product-hero h1.lockup, .product-hero h1.lockup--markup { margin: 1.6rem auto 0; letter-spacing: 0; line-height: 1; }
.product-hero h1.lockup { display: flex; justify-content: center; }
.lockup .lockup-art { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.lockup-mark { display: inline-flex; width: 110px; height: 120px; flex: 0 0 110px; }
.lockup-mark svg { width: 100%; height: 100%; }
.lockup-text { font: 600 80px/1 var(--brand); letter-spacing: -.045em; }
.product-hero h1.lockup--markup { font: 600 64px/1.05 var(--brand); letter-spacing: -.035em; color: var(--ink); }
.lockup--markup .lockup-art { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .35em; }
.lockup-word { display: inline-flex; align-items: baseline; }
.lockup-s { width: .936em; height: .977em; flex: 0 0 auto; margin-right: .067em; position: relative; top: .093em; }
.lockup-m { width: .849em; height: .779em; flex: 0 0 auto; margin-right: .081em; position: relative; top: .006em; }
.lockup-s svg, .lockup-m svg { width: 100%; height: 100%; }
@media (max-width: 800px) {
  .lockup-text { font-size: 46px; }
  .lockup-mark { width: 66px; height: 72px; flex-basis: 66px; }
  .product-hero h1.lockup--markup { font-size: 34px; }
}
.product-hero .tagline { margin-top: 1.7rem; font: 400 clamp(1.45rem, 2.4vw, 2rem)/1.1 var(--serif); color: var(--accent, var(--ink)); }
.hero-copy { max-width: 31rem; margin: 1.5rem auto 0; color: var(--quiet); font-size: 1rem; line-height: 1.55; }
.product-hero .actions { justify-content: center; }
.hero-meta { margin-top: 1.5rem; color: var(--quiet); font-size: .76rem; }

.hero-image { width: min(100% - 6rem, 1180px); margin: 0 auto; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); perspective: 1400px; }
.hero-image .shot {
  border-radius: 1rem;
  box-shadow: 0 26px 70px rgba(23, 25, 24, .16), 0 5px 16px rgba(23, 25, 24, .08);
  transform: rotateX(1deg);
}
@media (prefers-color-scheme: dark) { .hero-image .shot { box-shadow: 0 20px 60px rgba(0, 0, 0, .45); } }
@media (prefers-reduced-motion: reduce) { .hero-image .shot { transform: none; } }

.truths { padding-bottom: clamp(5rem, 9vw, 8rem); }
.truths-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100% - 6rem, 1180px); margin-inline: auto; gap: clamp(1.5rem, 4vw, 4rem); }
.truth { display: flex; min-height: 9.5rem; flex-direction: column; align-items: center; justify-content: center; padding: 2.3rem 1rem 2.5rem; border-block: 1px solid var(--rule); text-align: center; }
.truth h2 { font: 400 1.45rem/1.2 var(--serif); letter-spacing: -.025em; }
.truth p { max-width: 19rem; margin-top: .6rem; color: var(--quiet); font-size: .86rem; line-height: 1.5; }

.feature { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; padding: clamp(5.5rem, 10vw, 9rem) 0; }
.feature + .feature { border-top: 1px solid var(--rule); }
.feature.reverse { grid-template-columns: minmax(0, 1.28fr) minmax(260px, .72fr); }
.feature.reverse .feature-copy { order: 2; }
.feature.reverse .feature-visual { order: 1; }
.feature h2 { margin-top: 1.15rem; font: 400 clamp(2.4rem, 4.4vw, 4.8rem)/.95 var(--serif); letter-spacing: -.06em; }
.feature-copy p { max-width: 27rem; margin-top: 1.25rem; color: var(--quiet); font-size: 1rem; line-height: 1.6; }
/* What you paste, on /markup/'s handoff band: the prompt and the brief as torn
   sheets laid over the lower edge of the screenshot, so the three share
   roughly the picture's own footprint. The brief is the larger sheet, tilted
   left and torn along the bottom -- the tear is where the excerpt ends. The
   prompt is a slip torn along the top, tilted the other way and set lower.

   clip-path makes the tear, so the shadow cannot live on the same box (a
   clipped box clips its own shadow): it is a drop-shadow filter on the
   wrapper, which follows the torn outline. The overlap (-4rem) is measured
   against the capture: it covers the demo page's "Notification settings"
   strip and stops short of the metrics rectangle and mark 3. */
/* "It’s just a text file." on /simple/: the rendered document behind, the file
   in front. Both pieces share one grid cell, so the stack is as tall as its
   parts need and no height is guessed. The sheet reuses .sheet and .sheet-paper
   from the handoff band below, without a tear. */
.keep-stack { display: grid; grid-template-columns: minmax(0, 1fr); } /* minmax(0): the unwrapped file lines must not size the column, or a phone scrolls sideways */
.keep-stack > * { grid-area: 1 / 1; min-width: 0; } /* a grid item is otherwise as wide as its longest line */
.frag { margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: .5rem; background: var(--surface); }
.frag--rendered { width: 80%; justify-self: start; align-self: start; transform: rotate(-1.8deg); box-shadow: 0 14px 30px rgba(20, 24, 28, .10); }
.frag--rendered img { width: 100%; height: auto; }
/* The file's own line breaks, unwrapped, and the sheet TORN down its right
   edge where the long lines run out. A clean edge slicing letters in half read
   as a rendering fault (the Owner, 13 September); a tear says the cut is meant.
   Same device as the /markup/ handoff sheets, so the two pages share one idea. */
.sheet--file .sheet-paper { clip-path: polygon(0 0, calc(100% - 5px) 0.0%, calc(100% - 9px) 3.85%, calc(100% - 6px) 7.69%, calc(100% - 9px) 11.54%, calc(100% - 9px) 15.38%, calc(100% - 5px) 19.23%, calc(100% - 5px) 23.08%, calc(100% - 6px) 26.92%, calc(100% - 9px) 30.77%, calc(100% - 6px) 34.62%, calc(100% - 2px) 38.46%, calc(100% - 2px) 42.31%, calc(100% - 9px) 46.15%, calc(100% - 6px) 50.0%, calc(100% - 5px) 53.85%, calc(100% - 8px) 57.69%, calc(100% - 6px) 61.54%, calc(100% - 9px) 65.38%, calc(100% - 2px) 69.23%, calc(100% - 0px) 73.08%, calc(100% - 5px) 76.92%, calc(100% - 3px) 80.77%, calc(100% - 2px) 84.62%, calc(100% - 0px) 88.46%, calc(100% - 6px) 92.31%, calc(100% - 9px) 96.15%, calc(100% - 8px) 100.0%, 0 100%); }
.sheet--file .sheet-paper pre { white-space: pre; overflow-wrap: normal; }
.sheet--file { position: relative; z-index: 1; width: 62%; justify-self: end; align-self: start; margin-top: 30%; margin-right: 2%; transform: rotate(1.6deg); }
@media (prefers-color-scheme: dark) { .frag--rendered { box-shadow: 0 14px 30px rgba(0, 0, 0, .45); } }
@media (max-width: 800px) {
  .frag--rendered { width: 88%; }
  .sheet--file { width: 84%; margin-top: 34%; margin-right: 3%; }
}
.handoff-stack { position: relative; }
.handoff {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.1rem; align-items: start;
  margin-top: -4rem; padding: 0 1.1rem;
}
.sheet { filter: drop-shadow(0 10px 18px rgba(20, 24, 28, .16)) drop-shadow(0 1px 2px rgba(20, 24, 28, .12)); }
.sheet--brief { grid-column: 1; grid-row: 1; transform: rotate(-1.6deg); }
/* The slip sits over the sheet wherever they meet (they do on a phone, where
   it follows the brief's torn edge); later in the page would otherwise win. */
.sheet--prompt { position: relative; z-index: 2; grid-column: 2; grid-row: 1; transform: rotate(1.8deg) translateY(2.6rem); }
.sheet-paper { margin: 0; overflow: hidden; border-radius: 3px; background: var(--surface); }
.sheet--brief .sheet-paper { max-height: 14rem; clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - 6px), 96.67% calc(100% - 8px), 93.33% calc(100% - 8px), 90.0% calc(100% - 2px), 86.67% calc(100% - 0px), 83.33% calc(100% - 6px), 80.0% calc(100% - 9px), 76.67% calc(100% - 0px), 73.33% calc(100% - 5px), 70.0% calc(100% - 6px), 66.67% calc(100% - 0px), 63.33% calc(100% - 2px), 60.0% calc(100% - 0px), 56.67% calc(100% - 5px), 53.33% calc(100% - 5px), 50.0% calc(100% - 0px), 46.67% calc(100% - 0px), 43.33% calc(100% - 2px), 40.0% calc(100% - 6px), 36.67% calc(100% - 0px), 33.33% calc(100% - 6px), 30.0% calc(100% - 3px), 26.67% calc(100% - 0px), 23.33% calc(100% - 6px), 20.0% calc(100% - 9px), 16.67% calc(100% - 0px), 13.33% calc(100% - 0px), 10.0% calc(100% - 8px), 6.67% calc(100% - 5px), 3.33% calc(100% - 2px), 0.0% calc(100% - 3px)); }
.sheet--prompt .sheet-paper { padding-top: 8px; clip-path: polygon(0.0% 0px, 4.55% 6px, 9.09% 6px, 13.64% 5px, 18.18% 0px, 22.73% 2px, 27.27% 0px, 31.82% 6px, 36.36% 8px, 40.91% 2px, 45.45% 3px, 50.0% 5px, 54.55% 2px, 59.09% 6px, 63.64% 0px, 68.18% 6px, 72.73% 3px, 77.27% 6px, 81.82% 8px, 86.36% 8px, 90.91% 2px, 95.45% 0px, 100.0% 6px, 100% 100%, 0 100%); }
.sheet-paper figcaption { padding: .55rem .85rem .45rem; border-bottom: 1px solid var(--rule); color: var(--quiet); font-size: .66rem; font-weight: 600; letter-spacing: .02em; }
.sheet-paper pre { margin: 0; padding: .7rem .85rem 1rem; color: var(--body); font: .68rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  .sheet { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
  .sheet-paper { background: #20252B; }
}
@media (max-width: 800px) {
  .handoff { grid-template-columns: 1fr; gap: 0; margin-top: -.9rem; padding: 0 .9rem; } /* shallower: at phone width mark 3 sits in the bottom 15% */
  .sheet--brief { grid-row: 1; }
  .sheet--prompt { grid-column: 1; grid-row: 2; margin-top: -1.4rem; padding-left: 2.5rem; transform: rotate(1.4deg); }
}

/* A statement drawn as type, where there is no screenshot to show. */

.privacy-line { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.privacy-line-inner { display: flex; width: min(100% - 6rem, 1180px); align-items: center; justify-content: space-between; gap: 2rem; margin-inline: auto; padding: 2rem 0; border-block: 1px solid var(--rule); }
.privacy-line-copy { display: grid; gap: .45rem; }
.privacy-line p { font: 400 clamp(1.25rem, 2vw, 1.75rem)/1.3 var(--serif); letter-spacing: -.025em; }
.privacy-line a { display: inline-flex; min-height: 42px; align-items: center; border: 1px solid var(--quiet); border-radius: .3rem; padding: .65rem .9rem; color: var(--ink); font-size: .8rem; text-decoration: none; white-space: nowrap; }
.privacy-line a:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.closing { padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; }
.closing p { color: var(--quiet); font-size: .82rem; }
.closing h2 { margin-top: 1rem; font: 400 clamp(2rem, 3.5vw, 3.3rem)/1.1 var(--serif); letter-spacing: -.05em; }
.closing .button { margin-top: 1.6rem; }

/* ================================================= support and privacy */

.page-hero { padding: clamp(5rem, 10vw, 8rem) 0 4rem; text-align: center; }
.page-hero h1 { margin-top: 1.3rem; font: 400 clamp(3rem, 6vw, 5.8rem)/.96 var(--serif); letter-spacing: -.06em; }
/* :not(.eyebrow) -- without it this rule outranks .eyebrow on specificity and
   sets the page's eyebrow in 1.18rem serif. */
.page-hero p:not(.eyebrow) { max-width: 38rem; margin: 1.5rem auto 0; color: var(--quiet); font: 400 1.18rem/1.5 var(--serif); }
.page-hero .actions { justify-content: center; }

.layout { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: clamp(3rem, 8vw, 8rem); padding-bottom: 7rem; }
.toc { position: sticky; top: 2rem; align-self: start; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.toc a { display: block; margin: .65rem 0; color: var(--quiet); font-size: .78rem; text-decoration: none; }
.toc a:hover { color: var(--ink); }
.toc .eyebrow { display: block; margin-bottom: .6rem; }

.legal, .support { border-top: 1px solid var(--rule); }
.section { padding: 2.4rem 0; border-bottom: 1px solid var(--rule); }
.section h2 { font: 400 2rem/1 var(--serif); letter-spacing: -.04em; }
.section p { margin-top: 1rem; color: var(--body); font-size: .95rem; line-height: 1.75; }
.lead p { margin-top: 0; color: var(--ink); font: 400 1.35rem/1.4 var(--serif); }

/* THE PRIVACY ACCORDION. The Owner's design, 10 September 2026: each clause is
   two rows -- a numbered, plain-English summary that is always visible, and
   the full clause one tap away. Nothing is removed; everything is reachable.

   <details>, so no JavaScript. The render gate opens every <details> before
   measuring, so collapsed text still has to prove it renders.

   ⚠ NO CLASS HERE MAY CONTAIN THE WORD "clause" except the <details> itself.
   The clause-count gate greps class="...clause..." and expects exactly 11 and
   13; a summary classed "clause-summary" would double the count. */
.clause { border-bottom: 1px solid var(--rule); }
/* got2-site#212 follow-up: a .clause sitting last inside a .section doubled
   the section's own border-bottom into two visible lines with a gap between
   them (the section's bottom padding) -- happened at the end of both
   "Using the keyboard and VoiceOver" and "Things that come up" on
   /markup/accessibility/, the first time a .clause list has lived inside a
   bordered .section rather than one continuous .legal article (privacy's
   clauses never hit this, since nothing after the last one shares a border).
   The section's own line is enough. */
.section > .clause:last-of-type { border-bottom: none; }
.clause > summary {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: .3rem 1rem;
  align-items: baseline;
  padding: 1.6rem 0;
  cursor: pointer;
  list-style: none;
}
.clause > summary::-webkit-details-marker { display: none; }
.num { grid-row: 1 / span 2; color: var(--accent, var(--quiet)); font: 400 1.35rem/1 var(--serif); }
.ptitle { font: 400 1.55rem/1.15 var(--serif); letter-spacing: -.03em; }
.gist { grid-column: 2; color: var(--quiet); font-size: .95rem; line-height: 1.5; }
.chev { grid-column: 3; grid-row: 1; color: var(--quiet); font-size: .8rem; white-space: nowrap; }
.chev::before { content: "Read the detail"; }
.clause[open] .chev::before { content: "Close"; }
.fulltext { padding: 0 0 1.8rem 3.2rem; }
.fulltext p { margin-top: 1rem; color: var(--body); font-size: .95rem; line-height: 1.75; }
.fulltext p:first-child { margin-top: 0; }
/* An entitlement name is 33 unbreakable monospace characters. Inset by the
   accordion's indent at 320px it pushed /markup/privacy/ 23px sideways --
   caught by the render gate, which opens every clause before measuring.
   Wrap long tokens rather than shrinking the words or the indent. */
.fulltext, .gist { overflow-wrap: anywhere; }
.clause > summary:hover .ptitle { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.entity { margin-top: 2rem; color: var(--quiet); font-size: .8rem; }

/* The support contact card -- the address above the fold for Apple's reviewer. */
.contact {
  margin-bottom: 2.4rem;
  padding: 2.2rem 2.4rem;
  border: 1px solid color-mix(in srgb, var(--accent, var(--ink)) 28%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--accent, var(--ink)) 7%, var(--paper));
}
.contact a { color: var(--accent, var(--ink)); font-size: 1.1rem; }
.faq .item { margin-top: 1.8rem; }
.faq h3 { font: 400 1.35rem/1.15 var(--serif); }
.faq h3 + p { margin-top: .7rem; }

/* got2-site#206: the accessibility page's "Known limitations" section --
   ten short items, plain text weight matching .section p, a coloured
   marker rather than a browser-default bullet so it reads as a list of
   facts, not a checklist. */
.limits { margin-top: 1.2rem; padding: 0; list-style: none; }
.limits li {
  position: relative;
  margin-top: 1rem;
  padding-left: 1.3rem;
  color: var(--body);
  font-size: .95rem;
  line-height: 1.75;
}
.limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--ink));
}

/* The install steps use the privacy pattern: title and a one-line gist
   always visible, the rest one tap away. No number column
   here -- the step's own counter is the number. */
.step > details > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem;
  align-items: baseline; cursor: pointer; list-style: none;
}
.step > details > summary::-webkit-details-marker { display: none; }
.step .ptitle { grid-column: 1; }
.step .gist { grid-column: 1; }
.step .chev { grid-column: 2; grid-row: 1; }
.step[open] .chev::before, .step details[open] .chev::before { content: "Close"; }
.step .fulltext { padding: .9rem 0 0; }

/* got2-site#212: the accessibility page's FAQ clauses reuse .clause's
   disclosure but the question itself is already the title -- no number
   column, same shape as the install steps above. */
.faq > .clause > summary { grid-template-columns: minmax(0, 1fr) auto; }
.faq > .clause .ptitle { grid-column: 1; }
.faq > .clause .gist { grid-column: 1; }
.faq > .clause .chev { grid-column: 2; grid-row: 1; }

/* The Simple .md privacy line's second sentence: the shared claim, set small. */
.privacy-line p.privacy-line-note { max-width: 40rem; color: var(--quiet); font: 400 .86rem/1.55 var(--brand); letter-spacing: 0; }

/* ========================================================== screenshots */

/* Two pictures compared, side by side even on a phone: the claim is the difference
   between them, and stacking would make it a scroll instead of a glance. */
.theme-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.1rem 0 0; }
.theme-pair .shot { margin: 0; }
.theme-pair img { width: 100%; height: auto; }
.theme-pair figcaption { grid-column: 1 / -1; color: var(--quiet); font-size: .8rem; }
.shot { overflow: hidden; border: 1px solid var(--rule); border-radius: .5rem; background: var(--surface); }
.shot picture { display: block; }
.shot img { width: 100%; height: auto; }
.shot--fit { border-radius: .5rem; }

/* A slot not yet captured: says in words what belongs there. Never ships. */
.shot--pending { display: flex; min-height: 200px; align-items: center; justify-content: center; padding: 24px; border-style: dashed; background: transparent; }
.shot--pending p { max-width: 34ch; color: var(--quiet); font-size: 13px; text-align: center; }

/* ===================================================== numbered steps */

/* ⚠ EVERY CHILD NAMES ITS COLUMN. Only the figure used to, and a fourth child
   in a step once landed in column 1, collapsed column 2 to zero width and put
   a heading, two paragraphs and a screenshot at 0px (got2-site#95). checksite.sh
   reads this file for `.step > *` and `.step::before`. Do not simplify. */
.steps { counter-reset: step; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 18px;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
.step > * { grid-column: 2; }
.step::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent, var(--ink));
  color: var(--on-accent, var(--paper));
  font: 600 14px/1 var(--brand);
}
.step h3 { font: 400 1.35rem/1.2 var(--serif); }
.step h4 { margin-top: 1.6rem; font: 400 1.15rem/1.3 var(--serif); color: var(--ink); }
.step p { margin-top: .6rem; color: var(--body); font-size: .95rem; line-height: 1.75; }
.step .shot { margin-top: 1rem; }

/* =========================================================== breakpoint */

@media (max-width: 800px) {
  .chooser-items { grid-template-columns: 1fr; margin-top: 1rem; }
  .chooser-item { padding: .9rem 0; }
  .chooser-item + .chooser-item { border-top: 1px solid var(--rule); }
  .product, .product.reverse, .feature, .feature.reverse { grid-template-columns: 1fr; gap: 3rem; padding: 5rem 0; }
  .product.reverse .product-copy, .product.reverse .product-visual,
  .feature.reverse .feature-copy, .feature.reverse .feature-visual { order: initial; }
  .hero-image, .truths-grid, .privacy-line-inner { width: var(--site); }
  .truths-grid { grid-template-columns: 1fr; gap: 0; }
  .truth + .truth { border-top: 0; }
  .privacy-line-inner { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .layout { display: block; padding-bottom: 4rem; }
  .toc { position: static; margin-bottom: 2rem; }
  .toc a { display: inline-block; margin: 0 1.25rem .5rem 0; }
  .clause > summary { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .chev { grid-column: 2; grid-row: auto; margin-top: .4rem; }
  .fulltext { padding-left: 2.8rem; }
  .contact { padding: 1.6rem 1.4rem; }
  .step { gap: 0 12px; }
  .step::before { width: 24px; height: 24px; font-size: 13px; }
}