/* Img DeDup marketing page.
   Light, high-contrast, one accent colour — the same white-and-red the app
   itself uses, so the page and the product read as one thing.

   House rule: no single image occupies more than half the content column. Every
   image on the page is now a gallery figure, and the gallery's track width
   holds them to a fraction of that — so if a full-width figure is ever added
   back, the cap comes back with it rather than living here unattached. */

:root {
    --ink: #101014;
    --ink-2: #4a4a55;
    --ink-3: #8b8b96;
    --rule: #e7e7ec;
    --surface: #ffffff;
    --surface-2: #f7f7f9;
    --accent: #e62233;
    --accent-soft: #fdeef0;
    /* The two other colours the app assigns meaning to: green marks the copy
       that is kept, orange flags a red copy that is a favorite or has edits.
       Named for the meaning, not the hue, so the legend cannot drift from it. */
    --ok: #1e8e3e;
    --warn: #b45309;
    --radius: 18px;
    /* Chips and other small blocks: square enough to read as siblings of the
       note panel rather than as pills. */
    --radius-sm: 10px;
    --measure: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* ---------- nav ---------- */

/* The nav is sticky, so the browser's idea of "the top of the page" is 60px
   above the first pixel anyone can actually see. Every in-page link lands its
   target underneath the bar — the heading of the section you asked for is the
   one thing hidden. This is the whole fix, and it belongs on the root element
   rather than on each target: `scroll-padding` applies to every scroll into
   this document, including the browser's own restore-position on reload and
   find-in-page, which a per-section `scroll-margin` would miss.
   60px of bar plus a 36px breath, so a section title arrives with air above
   it rather than tucked against the bar's hairline border. */
html { scroll-padding-top: 96px; }

.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--rule);
}

.nav .wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 60px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--ink);
}

/* Half again bigger than the 26px it was. The whole brand is one link back to
   the top, and on a phone the icon is most of that link's tap target — 26px
   was under the 44px Apple asks for, and the padding below carries the rest. */
.brand img { width: 39px; height: 39px; border-radius: 10px; }

.nav nav { margin-left: auto; display: flex; gap: 22px; }

.nav nav a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 15px;
}

.nav nav a:hover { color: var(--accent); }

/* The page you are already on, so a nine-item nav still says where you are. */
.nav nav a[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- sections menu ---------- */

/* The same <details> the language picker is built from, for the same reason:
   every entry is a real link to a real anchor, so it works with JavaScript off
   and a crawler follows all of them. It replaces a flat row of five links,
   which had two problems — it grew with the page, and below 640px it was set
   to `display: none`, so a phone had no navigation at all. A closed disclosure
   is the same width in every language, which a row of five translated labels
   is emphatically not. */

.menu { position: relative; }

.menu summary {
    display: flex;
    align-items: center;
    gap: 7px;
    list-style: none;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--ink-2);
    white-space: nowrap;
}

.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { color: var(--accent); border-color: var(--accent); }
.menu[open] summary { color: var(--accent); border-color: var(--accent); }

.menu ul {
    position: absolute;
    /* Anchored to the edge the menu sits nearest, so it opens inward on both
       sides of the RTL split rather than off the viewport. */
    left: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(16, 16, 20, 0.12);
    min-width: 190px;
    max-width: min(calc(100vw - 28px), 320px);
    box-sizing: border-box;
    z-index: 20;
}

[dir="rtl"] .menu ul { left: auto; right: 0; }

.menu li a {
    display: block;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}

.menu li a:hover { background: var(--surface-2); color: var(--accent); }
.menu li a[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- language picker ---------- */

/* A <details> rather than a <select> or a menu built in script: every language
   is a real link to a real page, so it works with JavaScript off and a crawler
   can follow all twenty-five. */

.lang { position: relative; margin-left: 4px; }

.lang summary {
    display: flex;
    align-items: center;
    gap: 7px;
    /* The default disclosure triangle would sit next to a globe and read as a
       second, conflicting affordance. */
    list-style: none;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--ink-2);
    white-space: nowrap;
}

.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--accent); border-color: var(--accent); }
.lang[open] summary { color: var(--accent); border-color: var(--accent); }

.lang ul {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(16, 16, 20, 0.12);
    /* Twenty-five entries is taller than a phone. Two columns and a scroll
       cap keep the list on screen without hiding anything behind a fold. */
    columns: 2;
    column-gap: 4px;
    max-height: 62vh;
    overflow-y: auto;
    /* A backstop, not the fix — the menu measures 298px and a phone is wider
       than that. What put it off screen was the anchor, not the width (see the
       640px breakpoint). This only matters if the list ever grows a third
       column or a longer endonym, and it fails safe: whatever it cannot fit is
       clipped rather than pushed off the left edge, where there is no
       horizontal scroll to chase it with. */
    max-width: min(calc(100vw - 28px), 420px);
    box-sizing: border-box;
    z-index: 20;
}

.lang li { break-inside: avoid; }

.lang li a {
    display: block;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}

.lang li a:hover { background: var(--surface-2); color: var(--accent); }
.lang li a[aria-current] { color: var(--ink); font-weight: 600; }

/* The offer bar. Shown only to a visitor whose browser asks for a language we
   publish, and only on the English page — it offers, it never redirects. */

.lang-offer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 9px 16px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
}

.lang-offer a { color: var(--accent); font-weight: 600; }

.lang-offer button {
    background: none;
    border: 0;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
}

/* Right-to-left. Only Arabic reaches this, and only the few places where the
   page pins something to a side need saying — the rest follows `dir`. */

[dir="rtl"] .lang ul { right: auto; left: 0; }
[dir="rtl"] .nav nav { margin-left: 0; margin-right: auto; }

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

.hero { padding: 84px 0 68px; text-align: center; }

.hero img.mark {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(230, 34, 51, 0.16);
    margin-bottom: 28px;
}

h1 {
    font-size: clamp(38px, 6vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 0 0 18px;
}

.lede {
    font-size: clamp(18px, 2.2vw, 21px);
    color: var(--ink-2);
    max-width: 660px;
    margin: 0 auto 34px;
}

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid transparent;
    transition: transform 0.12s ease, background 0.12s ease;
}

.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #cc1c2c; }

.btn-ghost {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--rule);
}

.btn-ghost:hover { border-color: var(--ink-3); }

.note {
    margin-top: 18px;
    font-size: 14px;
    color: var(--ink-3);
}

/* ---------- sections ---------- */

section { padding: 68px 0; border-top: 1px solid var(--rule); }

h2 {
    font-size: clamp(27px, 3.4vw, 36px);
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    font-weight: 700;
}

.sub {
    color: var(--ink-2);
    max-width: 680px;
    margin: 0 0 38px;
}

/* ---------- workflow ---------- */

/* An ordered list drawn as a rail: a numbered marker per step and a connector
   between markers. The markup stays an <ol>, so with styles off it is still the
   workflow in order rather than a picture that failed to load. */

.flow {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    counter-reset: flow;
}

.flow li {
    counter-increment: flow;
    position: relative;
    padding: 0 0 26px 52px;
}

/* Each step draws the connector below its own marker, so the last step needs
   no special case beyond dropping it. */
.flow li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 31px;
    bottom: 0;
    width: 1px;
    background: var(--rule);
}

.flow li:last-child::before { display: none; }

.flow li::after {
    content: counter(flow);
    position: absolute;
    left: 0;
    top: 0;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 29px;
    text-align: center;
}

.flow b {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.flow span {
    display: block;
    max-width: 620px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
}

/* The branch is where one scan becomes three kinds of set; the finish is the
   only step the app cannot take for you. Marked rather than restated in prose. */
.flow .fork::after { border-color: var(--ink-3); color: var(--ink); }
.flow .done::after {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

[dir="rtl"] .flow li { padding-left: 0; padding-right: 52px; }
[dir="rtl"] .flow li::before { left: auto; right: 15px; }
[dir="rtl"] .flow li::after { left: auto; right: 0; }

/* ---------- screenshots ---------- */

/* The in-app glyph legend, rebuilt with the page's own icon set. */
.glyphs {
    list-style: none;
    margin: 0;
    padding: 0;
}
.glyphs li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 18px;
    /* Centred against the glyph, not sat on its baseline: the glyph is smaller
       than the text, so a shared baseline reads as misaligned. */
    align-items: center;
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
}

/* The labels are written short enough to hold one line each, and a wrap here
   breaks the column of glyphs into ragged blocks. Truncation is the lesser
   failure if a translation ever outgrows the column. */
.glyphs li span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.glyphs i {
    font-size: 12px;
    text-align: center;
    color: var(--ink);
}
.glyphs .g-red { color: var(--accent); }
.glyphs .g-green { color: var(--ok); }
.glyphs .g-orange { color: var(--warn); }
.glyphs .g-muted { color: var(--ink-3); }

.shot { margin: 0; }

/* The 22px radius was drawn for a figure at half the page width. On a 132px
   track it eats the status bar, so it scales down with the track. */
.shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--rule);
    background: var(--surface);
}

.steps {
    margin: 0;
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--rule);
    padding-top: 20px;
}

.steps dt {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
}

.steps dd {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}

.steps dd:last-child { margin-bottom: 0; }

/* Fifteen screenshots at 230px was a wall of phone. Halving the track width
   roughly doubles the columns, which is what makes the set readable as a set —
   any one of them is a tap away from full size in a new tab anyway. */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 28px 20px;
}

.gallery figcaption {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
}

/* The label sits on its own line above the sentence rather than running into
   it, so the grid can be scanned by heading alone. */
.gallery figcaption b {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 3px;
}


/* ---------- cards ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 24px;
}

/*
 * A section stacks a card grid, a callout and a spec table as plain siblings,
 * and none of them carried a bottom margin — so the grid ended flush against
 * the callout and the callout flush against the table, reading as one
 * undifferentiated block. The space belongs to the block that precedes it
 * rather than the one that follows, so that a section opening with a card does
 * not gain a gap under its own subtitle. The last block in a section drops it
 * again and lets the section's own padding be the only thing at the bottom.
 */
.grid,
.callout,
.spec {
    margin-bottom: 40px;
}

.wrap > :last-child {
    margin-bottom: 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 26px 24px;
}

.card i {
    font-size: 26px;
    color: var(--accent);
    display: block;
    margin-bottom: 14px;
}

.card h3 {
    font-size: 17px;
    margin: 0 0 8px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ---------- compatibility ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: #99101d;
    font-size: 14.5px;
    font-weight: 550;
}

.chip i { font-size: 14px; }

.callout {
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 22px 26px;
}

.callout h3 { margin: 0 0 8px; font-size: 17px; }
.callout p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- spec table ---------- */

.spec { width: 100%; border-collapse: collapse; font-size: 15px; }

.spec th, .spec td {
    text-align: left;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.spec th { width: 210px; font-weight: 600; color: var(--ink); }
.spec td { color: var(--ink-2); }
.spec code { font-size: 13.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }

/* ---------- footer ---------- */

footer {
    border-top: 1px solid var(--rule);
    padding: 40px 0 60px;
    color: var(--ink-3);
    /* One line on a desktop wrap. The string is ~135 characters, which is
       about 760px at this size — it wraps on phones and that is fine. */
    font-size: 12px;
    letter-spacing: 0.01em;
}

footer a { color: var(--ink-2); }

@media (max-width: 640px) {
    /* The nav used to be `display: none` here, because five labels would not
       fit beside the brand and the picker. One disclosure does, so a phone now
       has navigation instead of none — and the picker keeps its position from
       `.nav nav`'s auto margin, which is why the override that stood in for it
       is gone rather than merely overridden. */
    .nav .wrap { gap: 10px; }
    .brand { font-size: 15px; }
    /* Below about 380px the brand wordmark, the menu and the picker stop
       fitting on one line. The wordmark is the part already shown by the icon
       beside it, so it is the part that goes. */
    @media (max-width: 380px) {
        .brand { font-size: 0; gap: 0; }
    }
    /* The icon is centred directly under a sticky bar with a hairline bottom
       border, and 56px read as the icon sitting on that line. The extra is on
       the top only — the space below the buttons was never the problem. */
    .hero { padding: 70px 0 44px; }
    /* 24px is a desktop gutter beside a centred, already inset column. On a
       390px phone the column is the viewport, so the same value reads as text
       against the bezel. The nav keeps the smaller gutter — the brand is meant
       to sit near the edge. */
    .wrap { padding: 0 28px; }
    .nav .wrap { padding: 0 20px; }
    .flow li { padding-left: 44px; }
    [dir="rtl"] .flow li { padding-left: 0; padding-right: 44px; }
    .glyphs li { padding-left: 0; padding-right: 0; }
    .spec th { width: auto; display: block; border: 0; padding-bottom: 2px; }
    .spec td { display: block; padding-top: 0; }
}

/* ---------- plain list ---------- */

/* Used where a bulleted list is the honest shape — the privacy page's list of
   things the app does not do reads as a list and would be worse as prose. */

.plain {
    margin: 0 0 38px;
    padding-left: 1.15rem;
    max-width: 680px;
    color: var(--ink-2);
    display: grid;
    gap: 8px;
    line-height: 1.6;
}

/* ---------- report page ---------- */

/* The drop target. A real <input type="file"> sits inside it rather than being
   replaced by one, so the control works with a keyboard, with a screen reader
   and with drag-and-drop unavailable — which is every phone. */

.drop {
    border: 2px dashed var(--rule);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 44px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.drop:hover,
.drop:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop > i { font-size: 34px; color: var(--accent); display: block; margin-bottom: 14px; }
.drop-title { margin: 0 0 6px; font-weight: 650; font-size: 18px; }
.drop-sub { margin: 0 auto; max-width: 560px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.drop code { font-size: 13px; background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: 1px 5px; }
.drop input[type="file"] { display: block; margin: 18px auto 0; font-size: 13px; max-width: 100%; }

.r-status {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 14.5px;
}

.r-status.bad { background: var(--accent-soft); color: #99101d; }

.r-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 28px;
}

/* The script scrolls the finished report into view, and the nav is sticky — so
   without this the first heading lands underneath it. 60px is the nav's height,
   plus a little air. */
#out { scroll-margin-top: 76px; }

.r-block { padding: 34px 0 0; border: 0; }
.r-block + .r-block { border-top: 1px solid var(--rule); margin-top: 34px; }
.r-block h2 { margin-bottom: 10px; }

/* Numbers first, label under: the figure is what the eye is looking for and
   the label is what confirms it, not the other way round. */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 0 0 26px;
}

.stat {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.stat b { display: block; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.stat i { display: block; font-size: 12.5px; color: var(--ink-3); font-style: normal; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Advice cards carry the only colour on the page that means anything, and each
   tone is used once for one meaning: green is "no judgement required", orange
   is "we could not see this", red is "do not bulk-delete". */

.advice {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--ink-3);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    margin-bottom: 14px;
    background: var(--surface);
}

.advice h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.advice h3 i { font-size: 15px; margin-right: 4px; }
.advice p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }

.advice.a-ok { border-left-color: var(--ok); }
.advice.a-ok h3, .advice.a-ok h3 i { color: var(--ok); }
.advice.a-warn { border-left-color: var(--warn); background: #fffaf3; }
.advice.a-warn h3, .advice.a-warn h3 i { color: var(--warn); }
.advice.a-review { border-left-color: var(--ink-3); }
.advice.a-review h3 i { color: var(--ink-3); }
.advice.a-caution { border-left-color: var(--accent); background: var(--accent-soft); }
.advice.a-caution h3, .advice.a-caution h3 i { color: #99101d; }
.advice.a-note { border-left-color: var(--rule); background: var(--surface-2); }
.advice.a-note h3, .advice.a-note h3 i { color: var(--ink-2); }

/* Charts are inline SVG with no <style> element of their own — an SVG style
   block is document-global, so a rule meant for a bar in one chart restyles
   anything on the page that matches it. Classes live out here instead. */

.chart { width: 100%; height: auto; display: block; margin: 8px 0 26px; overflow: visible; }

/* One font stack for every label in every chart, declared once. */
.chart text {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

.c-legend { font-size: 12px; fill: var(--ink-3); }

/* The tier ramp. Two greens, two greys and a red, in that order: the pair
   within each meaning is a shade apart so the boundary is visible, and the
   meanings are far apart so nobody has to consult the key to know that the
   left end is safe and the right end is not. */
.c-t1 { fill: #1e8e3e; }
.c-t2 { fill: #57b06f; }
.c-t3 { fill: #a6a6b0; }
.c-t4 { fill: #74747f; }
.c-t5 { fill: var(--accent); }

/* The tier bar is HTML, not SVG. An SVG viewBox scales its own text with the
   drawing, so the same 12px label rendered at 12px on a desktop and about 6px
   in a 342px phone column. Flex percentages need no viewBox and the labels stay
   the size the stylesheet says. */

.lad {
    position: relative;
    /* Room above for the stop label and below for its value. */
    padding: 26px 0 34px;
    margin: 8px 0 22px;
}

.lad-bar {
    display: flex;
    height: 46px;
    border-radius: 8px;
    /* Rounds the bar as a whole while the segments inside stay square. Rounding
       each segment would notch every boundary and read as five bars again. */
    overflow: hidden;
}

.lad-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

/* An inset hairline rather than a border: a border is part of the box and would
   shrink the segment it sits on, so the widths would stop summing to 100%. */
.lad-seg + .lad-seg { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.85); }

.lad-seg .narrow { display: none; }

.lad-seg.c-t1 { background: #1e8e3e; }
.lad-seg.c-t2 { background: #57b06f; }
.lad-seg.c-t3 { background: #a6a6b0; }
.lad-seg.c-t4 { background: #74747f; }
.lad-seg.c-t5 { background: var(--accent); }

.lad-stop {
    position: absolute;
    top: 14px;
    bottom: 22px;
    border-left: 2px dashed var(--ink);
    pointer-events: none;
}

.lad-stop b,
.lad-stop i {
    position: absolute;
    left: 8px;
    white-space: nowrap;
    font-style: normal;
}

.lad-stop b { top: -18px; font-size: 11.5px; font-weight: 650; color: var(--ink); }
.lad-stop i { bottom: -20px; font-size: 11.5px; color: var(--ink-3); }

.lad-stop.flip b,
.lad-stop.flip i { left: auto; right: 8px; }

[dir="rtl"] .lad-stop { border-left: 0; border-right: 2px dashed var(--ink); }

.c-seg.c-safe { fill: var(--ok); }
.c-seg.c-photos { fill: #c9c9d2; }
.c-seg.c-videos { fill: var(--ink-2); }

.c-grid { stroke: var(--rule); stroke-width: 1; }
.c-area { fill: var(--accent-soft); }
.c-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }

.c-swatch.c-t1 { background: #1e8e3e; }
.c-swatch.c-t2 { background: #57b06f; }
.c-swatch.c-t3 { background: #a6a6b0; }
.c-swatch.c-t4 { background: #74747f; }
.c-swatch.c-t5 { background: var(--accent); }

/* The tier key carries five entries against the composition bar's three, so it
   gets a tighter gap and is allowed to run to two lines on a narrow column. */
.c-key-tiers { gap: 8px 20px; }

.r-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 4px 0 0;
}

.r-table th {
    text-align: left;
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
    padding: 0 12px 8px 0;
}

.r-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.r-table td:first-child { color: var(--ink); font-weight: 600; }
.r-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.r-table th:last-child, .r-table td:last-child { padding-right: 0; text-align: right; }
.r-table .t-test { color: var(--ink-3); font-size: 13px; }
.r-table tr.t-safe td:first-child { color: var(--ok); }
.r-table tr.t-caution td:first-child { color: var(--accent); }

[dir="rtl"] .r-table th, [dir="rtl"] .r-table td { text-align: right; }
[dir="rtl"] .r-table td.n, [dir="rtl"] .r-table th:last-child, [dir="rtl"] .r-table td:last-child { text-align: left; }

.r-pre {
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    font-size: 12.5px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink-2);
}

/* Opened from inside the app, the page chrome is furniture: the reader is
   already in the product and cannot install it twice. */
body.from-app .nav nav,
body.from-app #reading,
body.from-app .hero .lede { display: none; }

/* The tier table has six columns and a phone has room for four. Rather than
   shrink all six until none is readable, the two that are derivable from the
   others go: the test for each tier is described in prose above the table, and
   the running total is a sum of a column that is still there. */

@media (max-width: 720px) {
    .drop { padding: 32px 18px; }
    .r-table { font-size: 13px; }
    .r-table .t-test,
    .r-table th:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
    /* At this width even the widest band is about 150px, and a label centred in
       it sits closer to its own edges than to the next label. The key below the
       bar names every tier and its size, so nothing is lost by dropping them. */
    .lad-seg span { display: none; }
    .lad { padding-bottom: 38px; }
}

@media (max-width: 520px) {
    .r-table th, .r-table td { padding-right: 8px; }
    .r-table th:last-child,
    .r-table td:last-child { display: none; }
    /* With the running total gone, "Frees" becomes the last cell and needs the
       edge alignment the rule above was giving to the column that just left. */
    .r-table th:nth-last-child(2),
    .r-table td:nth-last-child(2) { padding-right: 0; text-align: right; }
}

/* Composition bar: a fixed-height strip whose segments are proportions, so it
   is stretched to the column width rather than scaled — a 28px bar that grew
   to 40px on a wide screen would read as a different chart. */

.c-wrap { margin: 8px 0 26px; }
/* The wrapper owns the spacing; a chart inside one must not add its own or the
   gap below every keyed chart doubles. */
.c-wrap .chart { margin: 0; }
.chart-bar { height: 30px; border-radius: 5px; overflow: hidden; }

.c-key {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.c-key li { display: flex; align-items: center; gap: 7px; }

.c-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.c-swatch.c-safe { background: var(--ok); }
.c-swatch.c-photos { background: #c9c9d2; }
.c-swatch.c-videos { background: var(--ink-2); }

/* What the page accepts. A definition list would be the semantic fit, but the
   three parts of each row — filename, whether it is needed, what it adds — want
   to sit on one line on a desktop and stack on a phone, and a <dl> cannot do
   that without fighting its own display model. */

.accepts {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.accepts li {
    display: grid;
    grid-template-columns: 190px 88px 1fr;
    align-items: baseline;
    gap: 4px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}

.accepts code {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 600;
}

.accepts b {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    font-weight: 600;
}

/* The one required file is the only thing in this list a reader has to act on,
   so it is the only thing wearing the accent. */
.accepts li:first-child b { color: var(--accent); }

.accepts span { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 620px) {
    .accepts li { grid-template-columns: 1fr auto; }
    .accepts span { grid-column: 1 / -1; }
}