/* SkimF, landing page.
   Plain CSS, no build step, no external request of any kind: no webfont, no CDN,
   no pixel. The only third party the page talks to is PostHog, from site.js.

   The palette is the product's own (src/ui/skimf.css), #4681 from
   colorpalettes.net: burnt #e75804, orange #fd6f12, tangerine #fd9127,
   apricot #fdce82, cream #fdeabc. All five are light; even the burnt orange
   holds white text at only 3.6:1. So nothing here carries white text: the
   ink is a warm near black, buttons are orange with ink on them, and links
   are ink underlined in burnt orange. Geist is the product's typeface but it
   is not loaded here (that would be a network request), so the stack falls
   back to the system UI font.

   House rule for this directory: no em dash characters, anywhere. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --burnt:     #e75804;
  --orange:    #fd6f12;
  --tangerine: #fd9127;
  --apricot:   #fdce82;
  --cream:     #fdeabc;
  --cream-light: #fff5e0;

  --bg:        #ffffff;
  --canvas:    #fffaf0;
  --surface:   #fdf1dc;
  --line:      #f3e3c6;
  --line-firm: #e2c9a0;

  --text:  #2a1a0e;   /* 16.8:1 on --bg, 14.1:1 on --cream */
  --muted: #5f4b3c;   /*  8.2:1 on --bg,  6.9:1 on --cream */

  --accent:      #e75804;  /* icons and focus only: 3.6:1 on --bg, 3.05:1 on --cream */
  --accent-hover:#a33c00;  /* a link under the pointer: 6.6:1 */
  --accent-ink:  #2a1a0e;
  --accent-soft: #fff1e2;
  --accent-line: #fdc79c;

  --note:      #fdce82;
  --note-ink:  #4a2a0a;
  --fav:       #e75804;

  --warn-bg:   #fff1e2;
  --warn-line: #e75804;
  --warn-ink:  #8a3400;

  /* The five from deep to pale, like light moving across a wall: under the
     top bar and over the footer. */
  --sunrise: linear-gradient(90deg, var(--burnt), var(--orange) 25%, var(--tangerine) 50%, var(--apricot) 75%, var(--cream));

  /* How far a picture's colour block sits off its picture. */
  --off: clamp(.6rem, 1.4vw, 1rem);

  --radius:    12px;
  --radius-sm: 8px;
  --wrap: 72rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --shadow:    0 1px 2px rgba(42, 26, 14, .06), 0 6px 16px rgba(42, 26, 14, .08);
  --shadow-lg: 0 2px 4px rgba(42, 26, 14, .06), 0 18px 44px rgba(42, 26, 14, .16);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.14;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 780; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.012em; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--apricot); color: var(--text); }

/* Links are ink, marked by a burnt orange underline instead of a colour. */
a {
  color: var(--text);
  text-decoration-color: var(--burnt);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
a:hover { color: var(--accent-hover); }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface);
  border-radius: 4px;
  padding: .1em .35em;
}

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg);
  color: var(--text);
  padding: .75rem 1rem;
  z-index: 20;
}
.skiplink:focus { left: .5rem; top: .5rem; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.wrap.narrow { max-width: 46rem; }

/* Colour tells the bands apart, so there is no hairline between them. */
.band { padding: clamp(3rem, 7vw, 5rem) 0; }
.band-quiet { background: var(--cream); }
.band-cta { background: var(--cream-light); }

.section-lead {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 44rem;
  margin-bottom: 2rem;
}

/* ---------- icons ---------- */
.i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 250, 240, .93);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 3px solid;
  border-image: var(--sunrise) 1;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 750;
  letter-spacing: -.015em;
}
.brand-link { color: inherit; text-decoration: none; }
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.brand-mark img, .brand-mark svg { width: 30px; height: 30px; }
.brand-name { font-size: 1.05rem; }
/* What the name stands for, kept quiet next to it. */
.brand-tagline {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted);
  padding-left: .55rem;
  border-left: 1px solid var(--line-firm);
  line-height: 1.1;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}
@media (max-width: 30rem) {
  .brand-tagline { display: none; }
}

/* The country switch: a flag per version of the site (United States, United
   Kingdom, Germany, Austria, Switzerland, Czechia), the current one marked. Pointing at a flag, or focusing
   it, says which country it is and which portals that version is about; the
   same words are the link's accessible name. */
.langs {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .15rem;
}
.langs a.flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .4rem;
  border-radius: var(--radius-sm);
  line-height: 0;
  text-decoration: none;
}
.langs a.flag img {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(42, 26, 14, .16);
  opacity: .62;
  filter: saturate(.7);
  transition: opacity .15s ease, filter .15s ease;
}
.langs a.flag:hover,
.langs a.flag[aria-current="page"] { background: var(--surface); }
.langs a.flag:hover img,
.langs a.flag:focus-visible img,
.langs a.flag[aria-current="page"] img { opacity: 1; filter: none; }
.langs a.flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Right-aligned under its flag: the switch sits at the right of the bar, so a
   tip that grows leftwards never runs off the screen. */
.flag-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: block;
  min-width: max-content;
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--cream-light);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(42, 26, 14, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s;
}
.flag-tip strong { display: block; font-weight: 700; }
.langs a.flag:hover .flag-tip,
.langs a.flag:focus-visible .flag-tip { opacity: 1; visibility: visible; }
/* The install button never wraps. The brand, six flags and the button need
   about 42rem side by side (the German button is the widest); below that the
   flags take a row of their own under the bar, right-aligned under the button,
   so nothing has to shrink. */
.topbar-right .btn-small { white-space: nowrap; }
@media (max-width: 43rem) {
  .topbar-inner { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: .5rem; }
  .topbar-right { display: contents; }
  .langs { order: 3; flex: 1 0 100%; justify-content: flex-end; }
  .langs a.flag { padding: .3rem .4rem; }
}
@media (max-width: 30rem) {
  .flag-tip { white-space: normal; min-width: 11rem; }
}
/* Where even that is too wide (the Czech button's longer words, or a phone under
   368px), the logo stands for the name: the word is still read out, not shown. */
@media (max-width: 24rem) {
  html:lang(cs) .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 23rem) {
  .brand-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
/* Orange with ink on it (6.0:1). */
.btn-primary {
  background: var(--orange);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(231, 88, 4, .25);
}
.btn-primary:hover { background: var(--tangerine); }   /* 7.4:1 */
.btn-ghost {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line-firm);
}
.btn-ghost:hover { background: var(--surface); }
.btn-big {
  font-size: 1.08rem;
  padding: .95rem 1.7rem;
  min-height: 52px;
}
.btn-small { padding: .5rem .9rem; font-size: .94rem; min-height: 40px; }
@media (max-width: 24rem) {
  .btn-big { width: 100%; }
}

.cta-note {
  color: var(--muted);
  font-size: .95rem;
  margin: .85rem 0 0;
}
.mid-cta { margin: 2.25rem 0 0; }

/* ---------- hero ---------- */
/* Cream, the picture set in an arch (.hero-figure below). The arch hangs past
   the picture's sides; the hero clips it sideways so a phone does not scroll. */
.hero {
  overflow-x: clip;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  background: linear-gradient(180deg, var(--cream-light) 0%, var(--cream) 100%);
}
.hero-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-inner { grid-template-columns: 1.02fr .98fr; }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1rem;
  padding: .3rem .75rem;
  border: 1px solid rgba(42, 26, 14, .12);
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(42, 26, 14, .06);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 650;
}
.eyebrow .i { color: var(--burnt); }
.lead {
  font-size: clamp(1.06rem, 2.1vw, 1.2rem);
  color: var(--muted);
  max-width: 34rem;
}
.hero-figure {
  position: relative;
  isolation: isolate;
  margin: 0;
}
/* The arch: a little wider and taller than the picture and ending behind it,
   so what shows is its crown and two jambs. The crown rises less on a phone,
   where the line above the picture is only 2rem away. */
.hero-figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(-5rem, -7vw, -1.75rem);
  left: calc(var(--off) * -1.5);
  right: calc(var(--off) * -1.5);
  bottom: 14%;
  border-radius: 50% 50% var(--radius) var(--radius) / 30% 30% var(--radius) var(--radius);
  background: linear-gradient(180deg, var(--apricot) 0%, var(--tangerine) 40%, var(--orange) 80%, var(--burnt) 100%);
}
.hero-figure img {
  border-radius: var(--radius);
  width: 100%;
}
/* The hero loop is the browser window itself, edge to edge, so the page
   gives it the window's corners and shadow. With reduced motion the still
   screenshot shows instead, and site.js keeps the video paused. */
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(42, 26, 14, .12);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(90, 40, 0, .1), 0 24px 56px rgba(120, 50, 0, .24);
  background: var(--canvas);
}
/* Reduced motion does not hide the loop, it only stops it from starting:
   site.js leaves it paused on its poster with a play button over it, so the
   visitor can play it if they want. Hiding it made the video look missing
   on any machine with the system setting on. */
.hero-still { display: none; }

/* ---------- portal strip ---------- */
.portals {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.portals li {
  border: 1px solid rgba(42, 26, 14, .1);
  background: var(--bg);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .92rem;
  font-weight: 650;
  color: var(--text);
  box-shadow: var(--shadow);
}
.portals-note {
  color: var(--muted);
  font-size: .9rem;
  margin: .8rem 0 0;
}
.portals-label {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- feature rows ---------- */
.feature {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .feature { grid-template-columns: 1fr 1.1fr; }
  .feature.is-flipped .feature-copy { order: 2; }
  .feature.is-flipped .feature-art { order: 1; }
}
.feature + .feature { margin-top: clamp(3rem, 7vw, 5rem); }
/* Each picture sits on a block of colour, offset down and to the right the
   same way on every row. The colour moves through the oranges, and the bar
   over each heading says which. */
.feature { --block: var(--burnt); }
.feature:nth-of-type(5n+2) { --block: var(--tangerine); }
.feature:nth-of-type(5n+3) { --block: var(--apricot); }
.feature:nth-of-type(5n+4) { --block: var(--orange); }
.feature:nth-of-type(5n+5) { --block: linear-gradient(135deg, var(--burnt), var(--apricot)); }
.band-quiet .feature { --block: var(--orange); }
.feature-art {
  position: relative;
  isolation: isolate;
  margin: 0;
}
.feature-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--block);
  transform: translate(var(--off), var(--off));
}
.feature-art img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--canvas);
}
/* A feature told in motion (Skim Mode). The loop draws its own window and
   backdrop, like the screenshots beside it; with reduced motion the still
   screenshot shows instead and site.js keeps the video paused. */
.feature-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--canvas);
}
/* A loop that is the browser window itself, edge to edge (the gallery), gets
   the window's edge and shadow from the page, as the hero does. */
.feature-video--window {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
/* Reduced motion does not hide the loop, it only stops it from starting:
   site.js leaves it paused on its poster with a play button over it, so the
   visitor can play it if they want. Hiding it made the video look missing
   on any machine with the system setting on. */
.feature-still { display: none; }
/* The loops play five times and then rest (site.js); a click plays them
   again. While one rests, a play button sits over it. The click lands on
   the video underneath, which is what site.js listens to. */
.video-frame { position: relative; }
.video-frame video { cursor: pointer; }
.video-frame.is-resting::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%232a1a0e'/%3E%3C/svg%3E") 56% 50% / 2.2rem no-repeat,
    rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.feature h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
.feature-copy h2::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: .4rem;
  border-radius: 999px;
  background: var(--block);
  margin-bottom: 1rem;
}
.feature p { color: var(--muted); }
.feature-points {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.feature-points li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--muted);
  font-size: .98rem;
}
/* Check marks: ink on an apricot dot. */
.feature-points .i {
  width: 1.4em;
  height: 1.4em;
  padding: .26em;
  margin-top: .05rem;
  border-radius: 50%;
  background: var(--apricot);
  color: var(--text);
  stroke-width: 3.2;
}

/* ---------- small cards ---------- */
.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  margin-bottom: .9rem;
}
.card-icon .i { width: 21px; height: 21px; }
.card p { color: var(--muted); font-size: .98rem; }

/* ---------- privacy ticks ---------- */
.privacy-line {
  font-size: 1.08rem;
  max-width: 44rem;
}
.ticks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.ticks li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  color: var(--muted);
}
.ticks .i { color: var(--accent); margin-top: .2rem; }

/* ---------- final CTA ---------- */
/* The oranges as a box, ink on it: 7.4:1 at the tangerine corner, 4.6:1 at
   the burnt one. Its button turns ink with cream on it. */
.cta-box {
  background: linear-gradient(135deg, var(--tangerine) 0%, var(--orange) 55%, var(--burnt) 100%);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--text);
  box-shadow: 0 2px 4px rgba(120, 50, 0, .12), 0 22px 50px rgba(180, 70, 0, .28);
  text-align: center;
}
.cta-box h2 { margin-bottom: .4rem; }
.cta-box p { color: var(--text); }
.cta-box .btn { margin-top: .5rem; }
.cta-box .btn-primary {
  background: var(--text);
  color: var(--cream);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 8px 20px rgba(90, 30, 0, .3);
}
.cta-box .btn-primary:hover { background: #45301f; }
.cta-box :focus-visible { outline-color: var(--text); }
.fineprint { color: var(--muted); font-size: .9rem; }
.cta-box .fineprint { margin-top: .9rem; color: var(--text); }

/* ---------- details blocks ---------- */
.notes { margin-top: 1.75rem; }
details {
  border-top: 1px solid var(--line);
  padding: .35rem 0;
}
details summary {
  cursor: pointer;
  font-weight: 650;
  padding: .8rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style-position: inside;
}
details summary::-webkit-details-marker { color: var(--muted); }
details summary .i { color: var(--burnt); }
details > *:not(summary) { color: var(--muted); font-size: .95rem; }
details ul { margin: 0 0 1rem; padding-left: 1.2rem; }
details li { margin-bottom: .5rem; }

.todo {
  background: var(--warn-bg);
  border: 1px dashed var(--warn-line);
  color: var(--warn-ink);
  border-radius: 6px;
  padding: 0 .35em;
  font-size: .95em;
}

/* ---------- footer ---------- */
/* The ink as a ground, the sunrise over it. */
.site-footer {
  border-top: 4px solid;
  border-image: var(--sunrise) 1;
  padding: 2.25rem 0 3rem;
  background: var(--text);
  color: var(--cream);   /* 14.1:1 */
  font-size: .9rem;
}
.site-footer p { margin: 0 0 .6rem; }
.site-footer a { color: var(--cream); text-decoration-color: var(--tangerine); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--apricot); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}
.footer-links a { color: var(--apricot); font-weight: 600; }   /* 11.4:1 */

/* ---------- the "not Chrome" notice ---------- */
dialog.chrome-only {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.5rem 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog.chrome-only::backdrop { background: rgba(42, 26, 14, .5); }
dialog.chrome-only h2 { font-size: 1.25rem; margin-bottom: .6rem; }
dialog.chrome-only p { color: var(--muted); font-size: .98rem; }
.chrome-only-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}
.chrome-only-actions .btn-primary { min-width: 6rem; }

/* ---------- the store walkthrough ---------- */
/* A dialog with a drawn browser in it (site.js builds both). The browser is a
   fixed 800 by 500 scene in its own pixels: .ig-fit scales it to the dialog,
   .ig-cam is the camera that zooms in on what to press. Inside the scene the
   colours are the browser's and the store's, not ours, so the visitor meets
   the same blue button there; ours frame it. */
/* On a short screen the dialog narrows, so the whole of it, browser and
   button, fits without scrolling. */
dialog.install-guide {
  width: min(46rem, calc(100vw - 2rem), max(24rem, calc((100dvh - 24.5rem) * 1.6 + 3.5rem)));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
dialog.install-guide::backdrop { background: rgba(42, 26, 14, .55); }
.ig-box { padding: 1.15rem clamp(1rem, 3vw, 1.6rem) 1.35rem; }
.ig-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ig-head h2 { font-size: 1.3rem; margin: 0 0 .2rem; }
.ig-head p { color: var(--muted); font-size: .98rem; margin: 0; }
.ig-close {
  flex: none;
  margin: -.3rem -.5rem 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ig-close:hover { background: var(--surface); color: var(--text); }

.ig-stage {
  padding: clamp(.45rem, 1.6vw, .85rem);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--apricot), var(--tangerine) 60%, var(--orange));
  --ig-blue: #0b57d0;
  --ig-pill: 999px;
}
.ig-stage.ig-edge { --ig-blue: #0f6cbd; --ig-pill: 4px; }
.ig-view {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(90, 40, 0, .12), 0 14px 32px rgba(120, 50, 0, .28);
}
.ig-fit {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 500px;
  transform-origin: 0 0;
}
.ig-cam {
  position: relative;
  width: 800px;
  height: 500px;
  transform-origin: 0 0;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.35;
  color: #1f1f1f;
  letter-spacing: 0;
}
.ig-cam img { display: block; }
.ig-cam svg { display: block; }
/* Steps that land at once: a restart, and every step with reduced motion. */
.ig-stage.is-instant *,
.ig-stage.is-instant *::before,
.ig-stage.is-instant *::after {
  transition: none !important;
  animation: none !important;
}

/* the browser */
.ig-win {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.ig-tabs {
  flex: none;
  height: 40px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 12px;
  background: #dde3ea;
}
.ig-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 210px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  color: #3c4043;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color .3s;
}
.ig-tab > span { overflow: hidden; text-overflow: ellipsis; }
.ig-tab-store { background: #fff; }
.ig-fav {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--ig-blue);
}
.ig-fav-logo { flex: none; width: 16px; height: 16px; }
.ig-tab-tour {
  width: 0;
  padding: 0;
  opacity: 0;
  transition: width .5s ease, padding .5s ease, opacity .3s ease, background-color .3s;
}
.is-tour .ig-tab-store { background: transparent; }
.is-tour .ig-tab-tour { width: 180px; padding: 0 12px; opacity: 1; background: #fff; }
.ig-tab-plus { align-self: center; padding: 0 10px; font-size: 18px; color: #5f6368; }

.ig-bar {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid #e3e3e3;
  background: #fff;
}
.ig-nav {
  flex: none;
  width: 84px;
  height: 20px;
  fill: none;
  stroke: #5f6368;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ig-omni {
  flex: 1;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 16px;
  background: #eef1f4;
  font-size: 13px;
  color: #3c4043;
  white-space: nowrap;
  overflow: hidden;
}
.ig-omni svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #5f6368;
  stroke-width: 1.6;
}
.ig-url-tour, .is-tour .ig-url-store { display: none; }
.is-tour .ig-url-tour { display: inline; font-weight: 600; }
.ig-tools { flex: none; display: flex; align-items: center; gap: 4px; }
.ig-tool {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.ig-tool svg { width: 19px; height: 19px; fill: #5f6368; }
.ig-avatar {
  width: 24px;
  height: 24px;
  margin: 0 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b9cde8, #7895c2);
}
/* The new icon: no room for it until it arrives, then it pops in. */
.ig-ext-slot {
  width: 0;
  height: 30px;
  display: grid;
  place-items: center;
  transition: width .45s ease;
}
.ig-ext {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.ig-ext img { width: 20px; height: 20px; }
.is-ext .ig-ext-slot { width: 30px; }
.is-ext .ig-ext { transform: scale(1); }

/* the store page */
.ig-page { position: relative; flex: 1; overflow: hidden; }
.ig-store, .ig-tour { position: absolute; inset: 0; }
.ig-store > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.is-loaded .ig-store > * { opacity: 1; transform: none; }
.is-loaded .ig-store > :nth-child(2) { transition-delay: .2s; }
.is-loaded .ig-store > :nth-child(3) { transition-delay: .4s; }
.ig-store-head {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  border-bottom: 1px solid #ececec;
  font-size: 17px;
  color: #3c4043;
}
.ig-store-head b { font-weight: 500; }
.ig-store-mark {
  width: 24px;
  height: 22px;
  border-radius: 3px 3px 6px 6px;
  background: var(--ig-blue);
  position: relative;
}
.ig-store-mark::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -6px;
  width: 8px;
  height: 8px;
  border: 2.5px solid var(--ig-blue);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.ig-search {
  width: 280px;
  height: 36px;
  margin-left: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 18px;
  background: #f1f3f4;
  font-size: 13px;
  color: #80868b;
}
.ig-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 40px 24px;
}
.ig-item-icon { flex: none; width: 64px; height: 64px; }
.ig-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ig-item-text b {
  font-size: 22px;
  font-weight: 500;
  color: #1f1f1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-item-site { color: var(--ig-blue); }
.ig-item-meta { color: #5f6368; }
.ig-add {
  flex: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--ig-pill);
  background: var(--ig-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  transition: background-color .3s, color .3s, box-shadow .3s, filter .15s;
}
.ig-add > span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .25s;
}
.ig-add-busy, .ig-add-done { opacity: 0; }
/* The download fills the button from the left. */
.ig-add::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(255, 255, 255, .24);
}
.is-busy .ig-add::before { width: 100%; transition: width 2.2s linear; }
.is-busy .ig-add-label { opacity: 0; }
.is-busy .ig-add-busy { opacity: 1; }
.is-added .ig-add {
  background: #fff;
  color: var(--ig-blue);
  box-shadow: inset 0 0 0 1px #c4c7c5;
}
.is-added .ig-add-label { opacity: 0; }
.is-added .ig-add-done { opacity: 1; }
.ig-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ig-spin .8s linear infinite;
}
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-shots { display: flex; gap: 16px; padding: 4px 40px 0; }
/* Three screenshots, drawn: two listing cards and a line on a warm ground. */
.ig-shots i {
  flex: 1;
  height: 176px;
  border-radius: 10px;
  border: 1px solid #ececec;
  background:
    linear-gradient(#fff, #fff) 10% 18% / 38% 50% no-repeat,
    linear-gradient(#fff, #fff) 90% 18% / 38% 50% no-repeat,
    linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)) 14% 86% / 60% 8% no-repeat,
    linear-gradient(160deg, var(--cream), var(--apricot));
}
.ig-shots i:nth-child(2) { background-color: var(--tangerine); background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)),
    linear-gradient(160deg, var(--apricot), var(--tangerine)); }
.ig-shots i:nth-child(3) { background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)),
    linear-gradient(160deg, var(--cream-light), var(--cream)); }

/* the tour SkimF opens after an install */
.ig-tour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--cream-light), var(--cream));
  opacity: 0;
  transition: opacity .5s ease .25s;
}
.is-tour .ig-tour { opacity: 1; }
.ig-tour-logo { width: 76px; height: 76px; margin-bottom: 6px; }
.ig-tour b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.ig-tour span { font-size: 16px; color: var(--muted); }
.ig-tour i {
  width: 150px;
  height: 40px;
  margin-top: 14px;
  border-radius: 8px;
  background: var(--orange);
}

/* the browser's own prompts */
.ig-confirm,
.ig-bubble {
  position: absolute;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .14), 0 18px 44px rgba(0, 0, 0, .24);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transition: opacity .25s ease, transform .3s ease;
}
.ig-confirm {
  top: 82px;
  left: 70px;
  width: 390px;
  padding: 18px 20px 16px;
}
.is-confirm .ig-confirm { opacity: 1; transform: none; }
.ig-confirm-head { display: flex; align-items: flex-start; gap: 12px; }
.ig-confirm-head img { flex: none; width: 28px; height: 28px; }
.ig-confirm-head b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ig-confirm-body { margin: 12px 0 0 40px; color: #3c4043; }
.ig-confirm-body span { display: list-item; margin-left: 16px; }
.ig-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.ig-btn-quiet,
.ig-btn-blue {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 18px;
  border-radius: var(--ig-pill);
  font-weight: 600;
  transition: filter .15s;
}
.ig-btn-quiet { color: var(--ig-blue); box-shadow: inset 0 0 0 1px #c4c7c5; }
.ig-btn-blue { background: var(--ig-blue); color: #fff; }
.is-pressed { filter: brightness(.8); }
.ig-bubble {
  top: 84px;
  left: 400px;
  width: 260px;
  padding: 14px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #3c4043;
}
.ig-bubble b { font-size: 14px; font-weight: 600; color: #1f1f1f; }
.ig-bubble::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 21px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 3px rgba(0, 0, 0, .06);
}
.is-bubble .ig-bubble { opacity: 1; transform: none; }

/* pointer, click and the ring round what to press */
.ig-pointer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  transition: transform .85s cubic-bezier(.5, 0, .2, 1);
  pointer-events: none;
}
.ig-pointer svg {
  width: 18px;
  height: 25px;
  margin: -2px 0 0 -2px;
  fill: #111;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
  transform-origin: 2px 2px;
}
.ig-pointer.is-press svg { animation: ig-press .35s ease; }
@keyframes ig-press { 40% { transform: scale(.78); } }
.ig-ripple {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(253, 111, 18, .5);
  opacity: 0;
  pointer-events: none;
}
.ig-ripple.is-on { animation: ig-ripple .6s ease-out; }
@keyframes ig-ripple {
  from { opacity: 1; transform: scale(.2); }
  to   { opacity: 0; transform: scale(1.6); }
}
.ig-ring {
  position: absolute;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--orange), 0 0 0 9px rgba(253, 111, 18, .3);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ig-ring.is-on { opacity: 1; animation: ig-pulse 1.2s ease-in-out infinite; }
@keyframes ig-pulse {
  50% { box-shadow: 0 0 0 3px var(--orange), 0 0 0 15px rgba(253, 111, 18, 0); }
}

/* caption, progress, actions */
.ig-caption {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 3.2em;
  margin: 1rem 0 .4rem;
}
.ig-num {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--apricot);
  font-weight: 750;
}
.ig-text {
  margin: 0;
  padding-top: .15rem;
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.45;
}
.ig-dots { display: flex; gap: .35rem; margin: 0 0 1.1rem 2.75rem; }
.ig-dots span {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--line-firm);
  transition: width .3s ease, background-color .3s ease;
}
.ig-dots .is-past { background: var(--tangerine); }
.ig-dots .is-on { width: 1.5rem; background: var(--burnt); }
.ig-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  min-height: 52px;
}
.ig-skip { color: var(--muted); font-size: .95rem; font-weight: 600; }
.ig-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .9rem; }
.ig-go, .ig-replay, .ig-note { display: none; }
.is-done .ig-go, .is-done .ig-replay { display: inline-flex; }
.is-done .ig-note { display: block; }
.is-done .ig-skip { display: none; }
.is-still .ig-replay { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-done .ig-go { animation: ig-rise .45s ease-out; }
}
@keyframes ig-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 30rem) {
  .ig-text { font-size: 1rem; }
  .ig-actions .btn-big { width: 100%; }
}

/* ---------- legal pages ---------- */
.legal { color: var(--text); }
.legal h1 { font-size: clamp(1.8rem, 4.4vw, 2.5rem); margin-bottom: .35rem; }
.legal h2 {
  font-size: 1.3rem;
  margin: 2.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5rem;
}
.legal h3 { margin: 1.5rem 0 .5rem; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .45rem; }
.legal code { font-size: .82em; }
.eyebrow-plain { color: var(--muted); font-size: .9rem; margin-bottom: .75rem; }
.eyebrow-plain a { color: var(--muted); }
.legal-meta { color: var(--muted); font-size: .92rem; }
.legal-lead { font-size: 1.06rem; margin: 1.25rem 0 1.5rem; }
.legal-card {
  font-style: normal;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin: 0 0 1rem;
  line-height: 1.7;
}
.legal-toc {
  background: var(--canvas);
  border-radius: var(--radius-sm);
  padding: .9rem 1.2rem;
}
.legal-toc ol { margin: 0; padding-left: 1.2rem; }
.legal-toc li { margin: .15rem 0; }
.legal-back {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* ---------- the About page's key facts ---------- */
/* A real table, so the rows stay machine readable. On a narrow screen each row
   becomes two stacked lines instead of a horizontal scroll. */
.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: .97rem;
}
.facts th,
.facts td {
  text-align: left;
  vertical-align: top;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
}
.facts th {
  width: 34%;
  font-weight: 650;
  color: var(--text);
  background: var(--canvas);
}
.facts td { color: var(--muted); }
.facts tr:last-child th,
.facts tr:last-child td { border-bottom: 0; }
@media (max-width: 40rem) {
  .facts th, .facts td { display: block; width: auto; }
  .facts th { border-bottom: 0; padding-bottom: .2rem; background: none; }
  .facts td { padding-top: 0; }
}
.about h3 { margin-top: 1.5rem; }
.about .fineprint { margin-top: 1.5rem; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn { transition: background-color .15s ease; }
}