/* ============================================================
   A-to-Z homepage
   ============================================================

   The palette, type scale and geometry are measured from the
   approved mockup rather than borrowed from the rest of the site,
   because this page has its own identity. Everything is a custom
   property so the whole thing moves together.

   SCOPED UNDER .az. This design ships alongside the existing
   homepage and must not leak into it or into any other page, so
   every rule below is a descendant of the page wrapper. That is
   also what lets both designs share one stylesheet load without
   fighting.

   NO DARK THEME HERE, deliberately. The approved design is a warm
   light page and the brief says not to introduce one. The site's
   theme-dark class repaints other pages; this one opts out by
   setting its own surfaces explicitly rather than inheriting
   tokens that would be swapped underneath it.
   ============================================================ */

/* ---- design tokens ----

   ON :root, NOT ON .az.

   .az-seo-skin sits on <body> - it has to, because the quick answer,
   key facts and FAQ are rendered by the layout outside this page's
   markup - and body is an ANCESTOR of .az, not a descendant. Custom
   properties inherit downwards only, so with these declared on .az the
   skin resolved every var() to nothing: transparent backgrounds and a
   black border where a gradient was meant to be.

   This file is only ever loaded on the A-to-Z homepage, so putting
   them on :root cannot leak into another page. ---- */
:root {
    /* ---- palette, sampled from the mockup ---- */
    --az-bg:        #fbf9f7;   /* warm off-white page */
    --az-surface:   #ffffff;
    --az-ink:       #10162b;   /* deep navy headings */
    --az-ink-2:     #454d63;   /* body */
    /* MUTED, BUT STILL READABLE. This was #7b8298, which Lighthouse
       flagged on twelve nodes: the Ctrl-K badge, all six card counts,
       and every trending description. It measured 3.34 to 3.82
       against the tints those sit on, under the 4.5 that 12-13px text
       needs. #5f677d clears it everywhere - 5.64 on white, 4.9 on the
       lightest card tint - and is still clearly secondary to
       --az-ink-2. The design intent was quiet, not illegible. */
    --az-ink-3:     #5f677d;   /* muted */
    --az-line:      #e8e6e3;   /* hairline borders */
    --az-line-2:    #f0eeeb;

    /* the A end of the journey */
    --az-a-1:       #5b8def;
    --az-a-2:       #7b5bf0;
    /* the Z end */
    --az-z-1:       #f0655f;
    --az-z-2:       #f89a4d;
    /* the middle of the arc */
    --az-mid:       #c05ad9;

    --az-mint:      #22b06b;   /* trust / download accent */

    /* pastel card grounds */
    --az-c-convert:   #eef1fd;
    --az-c-download:  #eaf7f0;
    --az-c-create:    #fdeeea;
    --az-c-calculate: #e9f2fd;
    --az-c-improve:   #f1eefc;
    --az-c-explore:   #fdf3e5;

    /* solid badge fills, matching the mockup's circles */
    --az-i-convert:   #3d6ff0;
    --az-i-download:  #1faa63;
    --az-i-create:    #f2683f;
    --az-i-calculate: #2f7de1;
    --az-i-improve:   #7b4ff0;
    --az-i-explore:   #f0a92c;

    --az-shadow-sm: 0 1px 2px rgba(16, 22, 43, .05);
    --az-shadow:    0 4px 16px rgba(16, 22, 43, .06);
    --az-shadow-lg: 0 10px 34px rgba(16, 22, 43, .10);

    --az-r:    14px;
    --az-r-lg: 18px;

    /* Matches the mockup's content width. */
    /* MEASURED OFF THE REFERENCE, not chosen. The reference render is
       1672px wide and is a 1440 layout at roughly 1.16x, so its
       measurements divide by 1.16 to give CSS pixels: its card row is
       1513px there, 1304 here. At --az-w: 1180 the content row came out
       1132 - 170px narrower than the design, which showed up as cards
       that were too cramped and an alphabet row that did not reach far
       enough across. 1348 less the 2x24 padding lands on 1300. */
    --az-w: 1348px;

}

.az {
    background: var(--az-bg);
    color: var(--az-ink);

    /* SYSTEM STACK, MEASURED AGAINST SELF-HOSTED INTER AND KEPT.

       The reference type is a neo-grotesque that Inter matches closely
       and Segoe UI matches only approximately - Segoe is visibly
       narrower at heading size. So self-hosting Inter was built and
       measured: four latin weights, 97 KB, preloaded 800, tried with
       font-display swap and again with optional.

       It cost more than it returned. Desktop LCP went 811ms -> 1064ms,
       a 31% increase on the page's own baseline, and desktop
       performance 99 -> 98; mobile did not improve and with optional
       fell from 79 to 71. optional did not recover the LCP either,
       which means the cost is the extra transfer competing rather than
       a swap repaint. Median of three runs each.

       The brief's own test was "negligible impact AND materially
       improves fidelity". The fidelity gain is real; the impact is not
       negligible, so the stack stays. Inter is still named first for
       anyone who has it installed - that path costs nothing. */
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

.az-shell { max-width: var(--az-w); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   Header
   ============================================================ */

.az-head {
    background: #fff;
    border-bottom: 1px solid var(--az-line);
}

.az-head-in {
    max-width: var(--az-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 66px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.az-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex: 0 0 auto;
}

.az-brand img { width: 34px; height: 34px; display: block; }

.az-brand span {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--az-ink);
}

/* The flex child is the <nav> wrapper, not this list - putting the
   grow on the list left the whole header bunched to the left. */
.az-head-in > nav { flex: 1 1 auto; }

.az-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.az-nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--az-ink-2);
    text-decoration: none;
    padding: 6px 0;
}

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

/* The dropdown indicator is a small chevron drawn in CSS - the mockup's
   is subtle and does not warrant an icon font request. */
.az-nav .az-caret {
    width: 7px; height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .55;
}

.az-head-right { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }

/* ============================================================
   Narrow-width header fit
   ============================================================

   THE PROBLEM. .az-head-in is a nowrap flex row, and at 320px its
   three children needed more room than it had: the brand (126px),
   the right-hand group (160px: "Sign in" plus the burger) and two
   12px gaps came to 310px inside a 262px content box. The row
   could not shrink because a flex item defaults to
   min-width:auto, which refuses to go below its content size. The
   overflow pushed document.scrollWidth to 333px on EVERY page on
   the site, which is why a 320px phone had a horizontal scrollbar
   everywhere.

   THE FIX, in two parts.

   First, the structural one: the brand becomes the shrink target.
   flex: 0 1 auto with min-width: 0 lets it give way, and the
   wordmark truncates with an ellipsis rather than pushing the row
   wider. This is what makes the header incapable of overflowing
   at ANY width - without it, the numbers below would be a tuning
   that breaks again the first time a label gets longer.

   The brand is the right thing to sacrifice: it is a link to the
   home page that is also reachable from the menu, and its icon
   stays visible. The burger and sign-in are controls with no
   other route to them at this width, so they keep their size.

   Second, modest tightening below 420px - smaller side padding,
   smaller gaps, a slightly smaller icon and less button padding -
   so that in practice nothing needs to truncate at all on a
   320px screen.

   Applies to the shared site header, so it affects every page.
   Regression-tested against the home page, the tools directory
   and existing tool pages at 320, 375, 414 and 1280px.
   ============================================================ */

.az-head-in > * { min-width: 0; }

.az-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }

.az-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The controls must not shrink - they have no other route at this width. */
.az-head-right { min-width: auto; }

/* The narrow-width tightening that goes with this lives at the END of
   this file, not here. Later rules in this stylesheet set .az-head-in's
   gap and .az-signin's padding, and at equal specificity the last rule
   wins - a @media block here is overridden by a plain rule below it,
   which is exactly what happened on the first attempt. */

.az-adfree {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--az-ink-2);
    text-decoration: none;
}

.az-adfree:hover { color: var(--az-ink); }

.az-signin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #101a33;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 17px;
    border-radius: 999px;
    text-decoration: none;
    border: 0;
}

.az-signin, .az-signin:link, .az-signin:visited { color: #fff; }
.az-signin:hover, .az-signin:focus { background: #1b2848; color: #fff; }
.az-signin svg { width: 15px; height: 15px; }

/* Mobile header controls, hidden on desktop. */
.az-burger { display: none; }

/* ============================================================
   Hero
   ============================================================ */

.az-hero {
    position: relative;
    padding: 46px 0 26px;

    /* NOT overflow: hidden. It used to be, to stop the A and Z widening
       the page, and it also clipped the search suggestions - the
       dropdown opens below the search box and the hero ends about 50px
       further down, so every result after the first was cut off.

       The clip moved to .az-hero-art, which holds only the decorative
       layer. Nothing interactive lives inside it. */
    overflow: visible;
}

/* The decorative layer: the two letters and the arc. Absolutely
   positioned over the whole hero and clipped to it, so artwork that is
   deliberately wider than the viewport still cannot widen the page.

   pointer-events: none because it covers the hero including the search
   box - without it the arc would swallow clicks meant for the input. */
.az-hero-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.az-hero-in {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.az-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

/* Each word takes a step along the A-to-Z gradient, which is where the
   eyebrow gets its colour in the mockup. */
.az-eyebrow i { font-style: normal; }
.az-eyebrow i:nth-child(1) { color: var(--az-a-1); }
.az-eyebrow i:nth-child(2) { color: var(--az-a-2); }
.az-eyebrow i:nth-child(3) { color: var(--az-mid); }
.az-eyebrow i:nth-child(4) { color: var(--az-z-1); }

.az-title {
    font-size: clamp(30px, 4.4vw, 47px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--az-ink);
    margin: 0 0 14px;
}

.az-lede {
    font-size: 16px;
    line-height: 1.55;
    color: var(--az-ink-2);
    margin: 0 auto 26px;
    max-width: 560px;
}

/* ---- the decorative A and Z ---- */

.az-letter {
    position: absolute;
    top: 50%;
    transform: translateY(-52%);
    z-index: 1;
    font-weight: 800;
    line-height: .8;
    font-size: clamp(150px, 17vw, 250px);
    letter-spacing: -.04em;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    user-select: none;
    pointer-events: none;
}

.az-letter-a {
    left: max(8px, calc(50% - var(--az-w) / 2 - 10px));
    /* Stops sampled off the reference artwork rather than guessed:
       #729efd at the apex, #6c85fc at mid-height, violet at the feet.
       The face runs top-to-bottom, so the angle is 170deg and not a
       diagonal - a diagonal put the light on the wrong leg. */
    background-image: linear-gradient(170deg, #729efd, #6c85fc 45%, #7b5bf0 78%, #8a4fe8);
}

.az-letter-z {
    right: max(8px, calc(50% - var(--az-w) / 2 - 10px));
    /* THE Z RAN THE WRONG WAY. It was red at the top fading to orange at
       the foot; the reference is the opposite - warm #fe986a at the top
       falling through coral #fc665c to pink at the baseline, which is
       what makes it read as the far end of the journey the A starts.
       Sampled off the artwork, then reversed. */
    background-image: linear-gradient(170deg, #fe986a, #fb7d5f 40%, #fc665c 72%, #f4517f);
}

/* ---- the curved journey between them ---- */

.az-path {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ============================================================
   Search
   ============================================================ */

/* 465px is the reference's 540px divided by the same 1.16. The box was
   560, which read wide against the hero once the content column around
   it was correct. */
.az-search { position: relative; max-width: 470px; margin: 0 auto; }

.az-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--az-line);
    border-radius: 999px;
    padding: 6px 8px 6px 22px;
    box-shadow: var(--az-shadow-lg);
}

.az-search-box:focus-within {
    border-color: var(--az-a-1);
    box-shadow: 0 0 0 4px rgba(91, 141, 239, .16), var(--az-shadow-lg);
}

.az-search-box svg { width: 19px; height: 19px; color: var(--az-ink-3); flex: 0 0 auto; }

.az-search-box input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15.5px;
    font-family: inherit;
    color: var(--az-ink);
    padding: 12px 0;
    min-width: 0;
}

.az-search-box input::placeholder { color: var(--az-ink-3); }

.az-kbd {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--az-ink-3);
    background: #f4f3f1;
    border: 1px solid var(--az-line);
    border-radius: 8px;
    padding: 6px 10px;
    margin-right: 6px;
}

/* Results. Positioned under the box and never taller than the viewport
   allows, so a long list scrolls instead of running off the page. */
.az-results {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 8px);
    background: #fff;
    border: 1px solid var(--az-line);
    border-radius: var(--az-r);
    box-shadow: var(--az-shadow-lg);
    padding: 6px;
    margin: 0;
    list-style: none;
    max-height: min(60vh, 340px);
    overflow-y: auto;
    text-align: left;
    z-index: 30;
}

.az-results[hidden] { display: none; }

.az-results a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--az-ink);
    text-decoration: none;
}

.az-results li.is-active a,
.az-results a:hover { background: #f4f6fd; }

.az-results .az-empty { padding: 12px; color: var(--az-ink-3); font-size: 14px; }

/* ---- trust line ---- */

.az-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 18px 0 0;
    font-size: 13.5px;
    color: var(--az-ink-2);
}

.az-trust span { display: inline-flex; align-items: center; gap: 6px; }
.az-trust svg { width: 15px; height: 15px; }
.az-trust .az-dot { color: var(--az-ink-3); }

/* ============================================================
   Alphabet
   ============================================================ */

.az-alpha-cap {
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--az-ink);
    margin: 26px 0 12px;
}

.az-alpha {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 4px;
}

.az-alpha a, .az-alpha span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 40px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid var(--az-line);
    box-shadow: var(--az-shadow-sm);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--az-ink-2);
    text-decoration: none;
}

.az-alpha a:hover {
    border-color: var(--az-a-1);
    color: var(--az-ink);
    transform: translateY(-1px);
}

/* Empty letters are not links, are dimmed AND carry an explicit title,
   so the difference is not communicated by colour alone. */
.az-alpha span { opacity: .42; cursor: default; }

/* A visible focus ring independent of any letter's own colour - see
   the .is-on rule below for why it must not double as the selection
   indicator. outline-offset keeps it from touching the pill's own
   border/shadow at small sizes. */
.az-alpha a:focus-visible {
    outline: 3px solid var(--az-ink);
    outline-offset: 2px;
}

/* A and Z used to carry a PERMANENT decorative gradient here, on the
   theory that they are the bookends the whole design is named for.
   That reads as "already selected" before anything is clicked, which
   is exactly what this control must not do - every unselected letter,
   A and Z included, is a plain white/default tile. Their colour now
   only appears via .is-on below, once actually clicked. */

/* ============================================================
   Sections
   ============================================================ */

.az-sec { padding: 26px 0 0; }

.az-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}

.az-h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--az-ink);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.az-viewall {
    font-size: 14px;
    font-weight: 600;
    color: var(--az-a-1);
    text-decoration: none;
    white-space: nowrap;
}

.az-viewall:hover { text-decoration: underline; }

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

.az-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.az-card {
    position: relative;
    display: block;
    border-radius: var(--az-r-lg);
    padding: 16px 16px 18px;
    min-height: 158px;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid transparent;
}

.az-card:hover { transform: translateY(-2px); box-shadow: var(--az-shadow); }
.az-card:focus-visible { outline: 3px solid var(--az-a-1); outline-offset: 2px; }

.az-card-top { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }

.az-card-badge {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 8px rgba(16, 22, 43, .16);
}

.az-card-badge svg { width: 20px; height: 20px; color: #fff; }

.az-card-name { font-size: 16px; font-weight: 700; color: var(--az-ink); line-height: 1.2; }
.az-card-count { font-size: 12.5px; color: var(--az-ink-3); margin-top: 3px; }

.az-card-desc {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--az-ink-2);
    margin: 0;
    max-width: 84%;
    position: relative;
    z-index: 1;
}

/* The little illustration sits in the bottom-right corner behind the
   text, exactly as the mockup has it. */
.az-card-art {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 92px;
    height: 78px;
    opacity: .85;
    pointer-events: none;
}

.az-card-convert   { background: var(--az-c-convert); }
.az-card-download  { background: var(--az-c-download); }
.az-card-create    { background: var(--az-c-create); }
.az-card-calculate { background: var(--az-c-calculate); }
.az-card-improve   { background: var(--az-c-improve); }
.az-card-explore   { background: var(--az-c-explore); }

.az-card-convert   .az-card-badge { background: var(--az-i-convert); }
.az-card-download  .az-card-badge { background: var(--az-i-download); }
.az-card-create    .az-card-badge { background: var(--az-i-create); }
.az-card-calculate .az-card-badge { background: var(--az-i-calculate); }
.az-card-improve   .az-card-badge { background: var(--az-i-improve); }
.az-card-explore   .az-card-badge { background: var(--az-i-explore); }

/* ---- trending ---- */

.az-trend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.az-trend-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--az-line);
    border-radius: var(--az-r);
    padding: 14px;
    text-decoration: none;
    height: 100%;
}

.az-trend-card:hover { box-shadow: var(--az-shadow); transform: translateY(-2px); }
.az-trend-card:focus-visible { outline: 3px solid var(--az-a-1); outline-offset: 2px; }

.az-trend-top { display: flex; gap: 12px; align-items: flex-start; }

.az-trend-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #f3f5fa;
    overflow: hidden;
}

.az-trend-icon img { width: 26px; height: 26px; object-fit: contain; }

.az-trend-name { font-size: 14.5px; font-weight: 700; color: var(--az-ink); line-height: 1.25; }
.az-trend-desc { font-size: 12.8px; line-height: 1.45; color: var(--az-ink-2); margin: 4px 0 0; }

.az-trend-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12.5px;
    color: var(--az-ink-3);
}

.az-pop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--az-ink-2);
    font-weight: 500;
}

.az-pop::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--az-mint);
}

.az-trend-foot svg { width: 14px; height: 14px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
    .az-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .az-trend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .az-letter { font-size: clamp(120px, 15vw, 180px); opacity: .9; }
}

@media (max-width: 900px) {
    .az-nav, .az-adfree { display: none; }
    .az-burger { display: inline-flex; }
    .az-head-in { gap: 12px; }
    .az-hero { padding: 34px 0 20px; }
}

@media (max-width: 700px) {
    .az-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .az-trend { grid-template-columns: 1fr; }

    /* The letters become background accents rather than disappearing -
       they are the identity of the page. Behind the content and faded
       so the heading stays readable over them. */
    .az-letter { font-size: 120px; opacity: .17; filter: none; }
    .az-letter-a { left: -12px; top: 26%; }
    .az-letter-z { right: -12px; top: 62%; }

    .az-path { display: none; }
    .az-title { font-size: 30px; }

    .az-alpha { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
                padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
    .az-alpha a, .az-alpha span { flex: 0 0 auto; width: 44px; height: 44px; }
    .az-shell { padding: 0 16px; }
}

@media (max-width: 400px) {
    .az-cards { grid-template-columns: 1fr; }
    .az-search-box { padding-left: 16px; }
    .az-kbd { display: none; }   /* no keyboard to shortcut from */
}

/* ============================================================
   Motion
   ============================================================ */

.az-card, .az-trend-card, .az-alpha a { transition: transform .15s ease, box-shadow .15s ease; }

@media (prefers-reduced-motion: reduce) {
    .az * { transition: none !important; animation: none !important; }
    .az-card:hover, .az-trend-card:hover, .az-alpha a:hover { transform: none; }
}

/* Screen-reader-only text that is still focusable where it needs to be. */
.az-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- mobile navigation ---- */

.az-mobile-nav {
    border-top: 1px solid var(--az-line);
    background: #fff;
    padding: 6px 0 10px;
}

.az-mobile-nav[hidden] { display: none; }

.az-mobile-nav ul { list-style: none; margin: 0; padding: 0 16px; }

.az-mobile-nav a {
    display: block;
    padding: 13px 4px;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--az-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--az-line-2);
}

.az-mobile-nav li:last-child a { border-bottom: 0; }
.az-mobile-nav a:hover, .az-mobile-nav a:focus { color: var(--az-ink); }

/* The burger is a round icon-only button on mobile - the pill padding
   of .az-signin would make it far too wide for an icon. */
.az-burger { padding: 9px 11px; }
.az-burger svg { width: 17px; height: 17px; }

/* ============================================================
   Corrections after comparing the build against the mockup
   ============================================================ */

/* The page sat below the layout's normal top spacing, which put a
   band of white between the header and the hero that the mockup does
   not have. */
.az { margin-top: -1px; }
body:has(.az) .breadcrumb, body:has(.az) .a2z-breadcrumbs { display: none; }

/* ---- hero letters ----
   They were far too small and sat inside the content column. In the
   mockup they are the largest thing on the page and bleed to the
   edges of the viewport, which is what makes the A-to-Z journey read
   as the identity rather than as decoration. */
.az-letter {
    font-size: clamp(180px, 22vw, 330px);
    transform: translateY(-50%);
}

.az-letter-a { left: 1.5vw; }
.az-letter-z { right: 1.5vw; }

.az-hero { padding: 30px 0 6px; }
.az-hero-in { max-width: 700px; }

/* ---- alphabet ----
   26 buttons must sit on one row at desktop, as they do in the
   mockup. They were wrapping to two. */
.az-alpha { gap: 5px; flex-wrap: nowrap; }
.az-alpha li { flex: 0 1 auto; }

.az-alpha a, .az-alpha span {
    width: clamp(30px, 3.1vw, 42px);
    height: 38px;
    border-radius: 10px;
    font-size: 14px;
}

/* ---- category cards ----
   "57 tools" was breaking across two lines because the count sat in
   an inline span next to the name, and the description ran under the
   illustration. */
.az-card { min-height: 172px; padding: 15px 15px 16px; }
.az-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.az-card-name, .az-card-count { display: block; }
.az-card-name { font-size: 15.5px; }
.az-card-count { white-space: nowrap; }

.az-card-desc { max-width: 100%; font-size: 13px; }

/* Pushed further into the corner and faded, so it is depth behind the
   words rather than something competing with them. */
.az-card-art { width: 78px; height: 66px; right: -8px; bottom: -8px; opacity: .55; }

/* ---- trending ----
   The icon filenames in PageDetail contain spaces for 25 tools, so a
   missing icon is normal - the tile keeps its shape and shows a
   neutral ground rather than a broken-image glyph. */
.az-trend-icon { background: #f3f5fa; }
.az-trend-icon img { width: 24px; height: 24px; }
.az-trend-name { font-size: 14px; }

@media (max-width: 1100px) {
    .az-alpha { flex-wrap: wrap; }
    .az-letter { font-size: clamp(140px, 18vw, 220px); }
}

/* ---- specificity corrections ----
   A site rule of the form `header a { color: ... }` outranks a single
   class, which left the Sign in label dark on a dark pill. Scoping to
   the header raises this above it without reaching for !important. */
.az-head .az-signin,
.az-head .az-signin:link,
.az-head .az-signin:visited,
.az-head .az-signin:hover,
.az-head .az-signin:focus { color: #fff; }

.az-head .az-nav a,
.az-head .az-adfree { color: var(--az-ink-2); }

.az-head .az-nav a:hover,
.az-head .az-adfree:hover { color: var(--az-ink); }

/* The site header is followed by breadcrumbs and a main element whose
   spacing put a band of white above the hero that the mockup does not
   have. The homepage has no breadcrumb trail to show anyway - it is the
   root. */
.az-page-breadcrumbs-off + main { padding-top: 0; }
.az ~ *, main:has(> .az) { padding-top: 0; margin-top: 0; }
main:has(.az) { padding-top: 0 !important; margin-top: 0 !important; }
main:has(.az) > .container { padding-top: 0; }

/* ---- trending card text ----
   The name and the category were inline spans, so they ran together on
   one line. */
.az-trend-name, .az-trend-desc { display: block; }
.az-trend-desc { color: var(--az-ink-3); }

/* ---- hero letters ----
   Large, but they must not run off the bottom of the hero or collide
   with the search box. Anchored to the vertical centre of the hero and
   sized against its height rather than the viewport width alone. */
/* 380 left 60px of dead air below the trust line, which put 86px
   between it and "Browse tools alphabetically" where the reference has
   32. 320 is still comfortably more than the 219px the letters occupy
   plus their margins, so they neither collide with the search box nor
   run off the bottom - which is what this floor exists to prevent. */
.az-hero { min-height: 320px; display: flex; align-items: center; }
.az-hero-in { width: 100%; }

.az-letter { font-size: clamp(170px, 19vw, 290px); }
.az-letter-a { left: 2vw; }
.az-letter-z { right: 2vw; }

@media (max-width: 1280px) {
    .az-letter { font-size: clamp(130px, 15vw, 210px); }
}

/* ---- the tool tile when its icon file is missing ----
   25 icon filenames in PageDetail point at files that are not on disk;
   the model nulls those, and the tile falls back to the tool's initial
   rather than a broken-image glyph. */
/* The initial shown when a tool has no icon file - 74 of the 293 tools
   have no IconImg at all, so this ships for real rather than being a
   theoretical fallback. Back on the token now that the token itself
   clears contrast; this rule is what first exposed that it did not. */
.az-trend-initial {
    font-size: 17px;
    font-weight: 700;
    color: var(--az-ink-3);
}

/* ============================================================
   Beating the site's global link colour
   ============================================================

   WebsiteTemplate/assets/css/style.css line 9 sets

       a { text-decoration: none !important; color: #1c1c1c !important; }

   on the bare element selector. An !important declaration wins over
   any normal one no matter how specific, so every link in this design
   was being repainted near-black - which is why the Sign in label was
   invisible on its dark pill and "View all tools" was not blue.

   Matching !important is the only thing that overrides it. It is
   confined to this design's own classes so nothing else on the site
   is affected, and it is not reaching for !important out of habit -
   there is no other mechanism available against an important element
   rule.
   ============================================================ */

.az-head .az-signin,
.az-head .az-signin:link,
.az-head .az-signin:visited,
.az-head .az-signin:hover,
.az-head .az-signin:focus { color: #fff !important; }

.az-head .az-nav a,
.az-head .az-adfree,
.az-mobile-nav a { color: var(--az-ink-2) !important; }

.az-head .az-nav a:hover,
.az-head .az-adfree:hover,
.az-mobile-nav a:hover { color: var(--az-ink) !important; }

/* NOT --az-a-1 here. #5b8def is the brand blue and it is right for the
   hero letters and the arc, where contrast rules do not apply to large
   decorative shapes - but as 14px link text on the page background it
   measures 3.07. #3a66cc is the same hue a few steps down and measures
   5.04. The token keeps its value for everything it is actually for. */
.az .az-viewall { color: #3a66cc !important; }

.az .az-alpha a { color: var(--az-ink-2) !important; }

.az .az-card,
.az .az-trend-card { color: inherit !important; }

.az .az-card .az-card-name,
.az .az-trend-name { color: var(--az-ink) !important; }

.az .az-card .az-card-desc,
.az .az-trend-desc,
.az .az-card-count { color: var(--az-ink-2) !important; }

.az .az-card-count, .az .az-trend-desc { color: var(--az-ink-3) !important; }

/* The stops keep their circular shape at any width - the arc itself is
   stretched by preserveAspectRatio="none", which would squash them. */
.az-stops { transform-box: fill-box; }
.az-path { overflow: visible; }

/* Below the search box, so a stop never sits on top of the input. */
.az-search { position: relative; z-index: 3; }

/* ---- brand wordmark ----
   The reference logo's "a2z.tools" is a geometric sans with a
   single-storey 'a' and circular 'o' - Poppins, which the site's
   header already loads from Google Fonts, so this costs no extra
   request. Slightly lighter than the surrounding UI weight, matching
   the reference. */
.az-brand span {
    font-family: Poppins, Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    font-size: 20.5px;
    letter-spacing: -.005em;
}

/* ---- header dropdowns ---- */

.az-has-menu { position: relative; }

.az-navbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 6px 0;
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--az-ink-2);
    cursor: pointer;
}

.az-head .az-navbtn:hover,
.az-head .az-navbtn[aria-expanded="true"] { color: var(--az-ink); }

.az-navbtn[aria-expanded="true"] .az-caret { transform: rotate(-135deg) translateY(-1px); }

.az-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 196px;
    background: #fff;
    border: 1px solid var(--az-line);
    border-radius: var(--az-r);
    box-shadow: var(--az-shadow-lg);
    padding: 6px;
    margin: 0;
    list-style: none;
    z-index: 40;
}

.az-menu[hidden] { display: none; }

.az-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--az-ink-2) !important;
}

.az-menu a:hover, .az-menu a:focus { background: #f4f6fd; color: var(--az-ink) !important; }

/* ---- brand: the supplied wordmark image ----
   Sized by height so the header bar stays 66px whatever the artwork's
   aspect ratio is; width auto keeps it undistorted. The old icon+text
   rules are superseded - the wordmark now includes the text. */
.az-brand img { width: auto; height: 33px; display: block; }

/* ============================================================
   The A and Z, extruded
   ============================================================

   The reference letters are dimensional: a darker side-face down
   and to the right, and a soft shadow on the ground. The flat
   gradient version read as decoration rather than as the
   identity of the page.

   DRAWN, NOT IMPORTED. A second copy of the glyph in a darker
   solid colour, offset a few pixels and sitting behind the
   gradient face. That is one pseudo-element and two colour
   values - no raster artwork, no heavy filter, no extra request,
   and it scales with the font-size clamp instead of pixelating.
   Measured cost: nothing, the element already existed.

   The copy takes its letter from data-letter rather than being
   typed twice, so the markup cannot say A and the shadow say
   something else.
   ============================================================ */

/* PAINT ORDER, NOT Z-INDEX. The first attempt drew the extrusion in a
   ::before at z-index:-1, expecting it to fall behind the parent's own
   background. It did not: .az-letter carries transform: translateY(-50%)
   further up this file, a transform establishes a stacking context, and
   inside one a negative z-index child still paints ABOVE the parent's
   background. The extrusion covered the gradient face completely and
   both letters went flat dark - which is exactly what the screenshots
   showed before this was tracked down.

   So the two faces are two pseudo-elements on a transparent parent, and
   ::before paints before ::after by definition. No z-index anywhere. */

.az-letter {
    position: absolute;
    color: transparent;             /* the parent's glyph is only a spacer */
}

.az-letter::before,
.az-letter::after {
    content: attr(data-letter);
    position: absolute;
    left: 0;
    top: 0;
}

/* The side face, offset down and to the right.

   A THIN SLIVER, NOT A SLAB. Measured off the reference: the side face
   is roughly 1.5% of the cap height, a few pixels at this clamp. The
   first attempt used three times this and the letters read as extruded
   blocks rather than as printed type. */
.az-letter::before { transform: translate(.016em, .013em); }

/* The front face, carrying the gradient. background-image is not an
   inherited property, hence the explicit inherit - the gradient stays
   declared once, per letter, on the parent. */
.az-letter::after {
    background-image: inherit;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Darker than the DARKEST stop of each face gradient, not than its
   average - a side-face that is lighter than the front at the baseline
   reads as a highlight and the letter goes flat again. */
.az-letter-a::before { color: #33249c; }
.az-letter-z::before { color: #a8264f; }

/* The ground shadow is softer and lower than a generic drop-shadow -
   the reference letters sit ON the page rather than floating. */
.az-letter-a { filter: drop-shadow(3px 12px 16px rgba(74, 95, 200, .30)); }
.az-letter-z { filter: drop-shadow(3px 12px 16px rgba(216, 80, 63, .28)); }

@media (max-width: 700px) {
    /* Faded to a background accent on mobile, where the extrusion would
       only add noise behind the heading. */
    .az-letter::before { display: none; }
}

/* ---- the shared lower sections ----

   Everything below the trending row - How it works, the SEO copy, the
   FAQ - is the classic homepage's markup, reused rather than
   duplicated, and it sits in .home-shell at max-width 1200.

   That used to line up by luck: --az-w was 1180, so the two columns
   were within 20px of each other and nobody noticed. Widening --az-w
   to the reference's 1348 broke the coincidence and left "How it
   works" indented 82px further in than "Start with what you need"
   directly above it.

   Scoped under .az, so the classic homepage keeps its own 1200 and
   this is a change to one design rather than to both. */
.az .home-shell {
    max-width: var(--az-w);
    /* .home-body already provides the gutter here, so the shell adds none
       of its own - with 24px on top, the lower headings sat 24px inside
       the cards above them. */
    padding-inline: 0;
}

/* ============================================================
   From the blog
   ============================================================

   Three posts, the same card language as the trending row above:
   white surface, hairline border, the border warming to violet on
   hover. What differs is that a post leads with a picture, so the
   media panel is the top half of the card rather than a 44px tile.
   ============================================================ */

.az-blog-sec { padding-top: 30px; }

.az-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.az-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--az-surface);
    border: 1px solid var(--az-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.az-post:hover,
.az-post:focus-visible {
    border-color: #d9cffb;
    box-shadow: var(--az-shadow);
    transform: translateY(-2px);
}

/* ---- the picture ----
   A fixed aspect ratio, so three posts with three differently
   proportioned images still line their titles up - and so the row
   reserves its height before the pictures arrive. */
.az-post-media {
    display: block;
    aspect-ratio: 19 / 10;
    background: var(--az-c-improve);
    overflow: hidden;
}

.az-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.az-post:hover .az-post-media img { transform: scale(1.03); }

/* Shown when the file named in the database is not on disk. */
.az-post-noimg {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #9a8ede;
    background:
        linear-gradient(135deg, var(--az-c-improve), var(--az-c-convert));
}

.az-post-noimg svg { width: 34px; height: 34px; }

/* ---- the text ---- */
.az-post-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
    flex: 1 1 auto;
}

.az-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--az-ink-3);
}

.az-post-cat {
    font-weight: 700;
    color: var(--az-a-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
}

.az-post-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.32;
    color: var(--az-ink);

    /* Two lines, then ellipsis. Titles here run from four words to
       fourteen and without a clamp the three cards lose their shared
       baseline entirely. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.az-post-sum {
    font-size: 13px;
    line-height: 1.5;
    color: var(--az-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pushed to the bottom so it sits on one line across all three cards
   however much summary there was above it. */
.az-post-more {
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3a66cc;
}

@media (max-width: 900px) {
    .az-posts { grid-template-columns: repeat(2, 1fr); }
    /* The third post would sit alone on a second row at two columns, so
       it is dropped rather than left dangling. */
    .az-posts > li:nth-child(3) { display: none; }
}

@media (max-width: 620px) {
    .az-posts { grid-template-columns: 1fr; }
    .az-posts > li:nth-child(3) { display: block; }
}

/* ============================================================
   The shared lower sections, in this design's colours
   ============================================================

   How it works, Why use A2Z Tools and the closing call to action are
   the classic homepage's markup, reused rather than duplicated. They
   arrived carrying the classic palette - a flat #2583dc blue, plain
   white cards, grey hairlines - which read as a different site once
   the page above them turned warm.

   Everything here is scoped under .az and restyles only. No markup
   moves, so the classic homepage is untouched and there is one copy
   of these sections, not two.
   ============================================================ */

.az .home,
.az .home-body {
    /* The blocks brought their own white with them, which put a hard
       seam across the page where the warm hero background ended. */
    background: transparent;
}

.az .home-block { padding: 34px 0 0; }

.az .home-h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--az-ink);
}

.az .home-h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--az-ink);
}

.az .home-block-sub,
.az .home-block p,
.az .home-steps p,
.az .home-why p {
    color: var(--az-ink-2);
}

/* ---- how it works ----
   The step numbers were flat blue discs. They now carry the same
   A-to-Z gradient the hero letters do, and they step along it - 1 at
   the blue end, 3 at the coral end - so the three steps read as
   progress rather than as three identical badges. */

.az .home-step-num {
    color: #fff;
    font-weight: 700;
    border: 0;
    box-shadow: var(--az-shadow-sm);
}

.az .home-steps > li:nth-child(1) .home-step-num {
    background: linear-gradient(140deg, var(--az-a-1), var(--az-a-2));
}

.az .home-steps > li:nth-child(2) .home-step-num {
    background: linear-gradient(140deg, var(--az-a-2), var(--az-mid));
}

.az .home-steps > li:nth-child(3) .home-step-num {
    background: linear-gradient(140deg, var(--az-mid), var(--az-z-1));
}

/* ---- why use it ----
   Four white cards with grey borders became four tinted cards drawn
   from the same six-colour set the intent cards above them use, so
   the two rows belong to one page. */

.az .home-why > li {
    background: var(--az-c-convert);
    border: 1px solid transparent;
    border-radius: 16px;
    transition: transform .16s ease, box-shadow .16s ease;
}

.az .home-why > li:nth-child(2) { background: var(--az-c-download); }
.az .home-why > li:nth-child(3) { background: var(--az-c-calculate); }
.az .home-why > li:nth-child(4) { background: var(--az-c-explore); }

.az .home-why > li:hover { transform: translateY(-2px); box-shadow: var(--az-shadow); }

.az .home-why-icon {
    background: #fff;
    border-radius: 11px;
    box-shadow: var(--az-shadow-sm);
    color: var(--az-i-convert);
}

.az .home-why > li:nth-child(2) .home-why-icon { color: var(--az-i-download); }
.az .home-why > li:nth-child(3) .home-why-icon { color: var(--az-i-calculate); }
.az .home-why > li:nth-child(4) .home-why-icon { color: var(--az-i-explore); }

/* ---- the closing call to action ----
   A near-invisible bordered box became the one saturated block on the
   page: the A-to-Z gradient, reversed, so it closes on the warm end
   the Z sits at. */

.az .home-cta {
    /* THE WARM END IS DARKER THAN THE HERO'S ON PURPOSE.

       White text has to clear 4.5:1 against every point of this
       gradient, not just the indigo it starts on, and a contrast
       checker cannot tell you that - it reads backgroundColor, which
       on a gradient is transparent, so it reports the text as passing
       against whatever is behind. Measured by hand at the stops:

         #ef6a4a (the hero's coral)  ->  3.09:1   fails
         #c0508a                     ->  4.40:1   fails
         #c23a24 (used here)         ->  5.34:1
         #a63a72 (used here)         ->  6.05:1

       Same journey, same hues, taken a few steps down so the text on
       top of it is readable. */
    background: linear-gradient(125deg, #2d2a6e 0%, #4a35a8 42%, #a63a72 78%, #c23a24 100%);
    border: 0;
    border-radius: 22px;
    padding: 34px 24px;
    margin-top: 40px;
    box-shadow: var(--az-shadow-lg);
}

.az .home-cta .home-h2,
.az .home-cta p {
    color: #fff;
}

/* NO OPACITY HERE. It was .88, which is a further 12% off a ratio that
   was already the tightest on the page. If this line wants to sit back
   from the heading, size and weight do that without touching legibility. */
.az .home-cta p { font-size: 15px; }

.az .home-btn {
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid transparent;
}

/* White on the gradient, not blue on blue. This is also the pair the
   contrast audit flagged on the classic page - #1c1c1c on #2583dc,
   4.34:1 - and the reason it is stated as two explicit colours here
   rather than inherited. */
.az .home-cta .home-btn-primary {
    background: #fff;
    color: #2b2360;
    box-shadow: var(--az-shadow);
}

.az .home-cta .home-btn-primary:hover { background: #f4f1ff; }

.az .home-cta .home-btn-ghost {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
}

.az .home-cta .home-btn-ghost:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 620px) {
    .az .home-cta { padding: 26px 18px; border-radius: 18px; }
}

/* ============================================================
   The SEO content block, in this design's colours
   ============================================================

   The quick answer, the key facts, the prose sections and the FAQ come
   from SeoMetadata and are rendered by the layout for every page, this
   one included. On the homepage they were the most obvious break in
   the design: a 60rem centred column against the 1300px one above,
   Bootstrap's #0d6efd on the quick answer, #dee2e6 hairlines on the
   FAQ, and no background at all where the page above is warm.

   Restyle only, scoped under .az-seo-skin - the markup is shared with
   every tool page and none of it moves. The class is put on the body
   wrapper by the layout when the A-to-Z homepage is live.
   ============================================================ */

/* The page above is warm off-white and the body underneath is white, so
   the SEO block sat on a hard horizontal seam. Painting the body rather
   than the block keeps the colour going all the way to the footer. */
body.az-seo-skin { background: var(--az-bg); }

/* TWO BOXES, NOT ONE.

   The block itself takes the same shell as everything above it, so its
   left edge lands on the same gutter as the cards and the section
   headings - centring the whole thing instead left it starting 185px
   further in than "Why use A2Z Tools" directly above, which read as a
   different page.

   Its CHILDREN then cap at a readable measure and stay left. Prose set
   to 1300px is genuinely harder to read; this keeps the line length
   without giving up the alignment. */
.az-seo-skin .seo-content {
    max-width: var(--az-w);
    margin: 6px auto 10px;
    padding: 0 24px;
    color: var(--az-ink-2);
}

.az-seo-skin .seo-content > * {
    max-width: 860px;
    margin-right: auto;
}

.az-seo-skin .seo-content .seo-h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--az-ink);
    margin: 26px 0 10px;
}

.az-seo-skin .seo-content p,
.az-seo-skin .seo-content li {
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--az-ink-2);
}

/* ---- the quick answer ----
   Bootstrap blue on a blue wash became the page's own indigo on the
   convert tint, with the rule down the left in the A-to-Z gradient. */
.az-seo-skin .seo-direct-answer {
    background: var(--az-c-convert);
    border-left: 4px solid;
    border-image: linear-gradient(180deg, var(--az-a-1), var(--az-a-2)) 1;
    border-radius: 0 14px 14px 0;
    padding: 14px 18px;
    margin-top: 18px;
}

.az-seo-skin .seo-direct-answer .seo-h2 {
    margin-top: 0;
    font-size: 15px;

    /* Not var(--az-a-2). #7b5bf0 on this tint is 4.05:1, and at 15px
       bold this is not large text. #6a45d8 is 5.28:1. */
    color: #6a45d8;
}

/* ---- key facts ----
   Custom markers, because a default bullet next to this type size and
   colour was the last obviously-unstyled thing left in the block. */
.az-seo-skin .seo-keyfacts ul { list-style: none; padding-left: 0; }

.az-seo-skin .seo-keyfacts li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 7px;
}

.az-seo-skin .seo-keyfacts li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--az-a-1), var(--az-a-2));
}

/* ---- the FAQ ---- */
.az-seo-skin .seo-faq-item {
    border: 1px solid var(--az-line);
    border-radius: 14px;
    background: var(--az-surface);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.az-seo-skin .seo-faq-item:hover { border-color: #d9cffb; box-shadow: var(--az-shadow-sm); }

.az-seo-skin .seo-faq-item summary {
    padding: 13px 16px;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--az-ink);
}

.az-seo-skin .seo-faq-item[open] {
    border-color: #d9cffb;
    box-shadow: var(--az-shadow-sm);
}

.az-seo-skin .seo-faq-item[open] summary {
    background: var(--az-c-improve);
    color: var(--az-a-2);
}

.az-seo-skin .seo-faq-answer { padding: 2px 16px 14px; }

/* The reviewed-on line is a footnote and was set at body weight. */
.az-seo-skin .seo-reviewed {
    font-size: 12.5px;
    color: var(--az-ink-3);
}

.az-seo-skin .seo-related-list a { color: #3a66cc; }

/* ============================================================
   The database-driven content block, designed rather than tinted
   ============================================================

   The first pass at this only recoloured what was there: one flat
   stack of h2-then-paragraph, nine times, in the new palette. It
   matched on colour and still read as a wall.

   The content is not actually uniform, so it should not look uniform.
   Three kinds of thing are in here:

     the answer   - the quick answer, the key facts. Read first,
                    often the only thing read at all.
     the body     - about, how to use it, use cases, benefits. Prose.
     the asides   - example, good to know, privacy. Short, specific,
                    and easy to lose inside the body when they look
                    identical to it.

   Each now gets its own treatment, and the asides are tinted from the
   same six-colour set the intent cards use, so a caution reads as a
   caution at a glance.
   ============================================================ */

/* ---- the answer ---- */

.az-seo-skin .seo-direct-answer {
    background: linear-gradient(135deg, var(--az-c-convert), #f6f2ff);
    border: 1px solid #ddd7fb;
    border-left: 4px solid #7b5bf0;
    border-radius: 4px 16px 16px 4px;
    padding: 16px 20px;
    margin: 22px 0 6px;
    box-shadow: var(--az-shadow-sm);
}

.az-seo-skin .seo-direct-answer p { margin-bottom: 0; }

/* Key facts as a two-column grid of ticked items rather than a bullet
   list. They are short, parallel and scannable - the one part of this
   block somebody reads without reading sentences. */
.az-seo-skin .seo-keyfacts { margin-top: 26px; }

.az-seo-skin .seo-keyfacts ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 22px;
}

.az-seo-skin .seo-keyfacts li {
    position: relative;
    padding: 9px 12px 9px 34px;
    margin: 0;
    background: var(--az-surface);
    border: 1px solid var(--az-line);
    border-radius: 11px;
    font-size: 13.6px;
    line-height: 1.45;
}

/* A tick, drawn with two borders rotated - no icon font, no SVG per
   item, and it scales with the text. */
.az-seo-skin .seo-keyfacts li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 15px;
    width: 5px;
    height: 9px;
    border: solid #1faa63;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

@media (max-width: 700px) {
    .az-seo-skin .seo-keyfacts ul { grid-template-columns: 1fr; }
}

/* ---- the body ---- */

.az-seo-skin .seo-section { margin-top: 24px; }

/* A short accent rule above each heading, in place of nothing. It is
   what separates one section from the next now that they are no longer
   just gaps in a stack. */
.az-seo-skin .seo-section > .seo-h2::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 9px;
    background: linear-gradient(90deg, var(--az-a-1), var(--az-a-2));
}

.az-seo-skin .seo-usecases {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.az-seo-skin .seo-usecases li {
    position: relative;
    padding: 0 0 0 22px;
    margin-bottom: 7px;
}

.az-seo-skin .seo-usecases li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .58em;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--az-a-2), var(--az-mid));
}

/* ---- the asides ----
   Tinted panels, no accent rule - they are notes beside the prose, not
   further sections of it. */

.az-seo-skin .seo-section--example,
.az-seo-skin .seo-section--limits,
.az-seo-skin .seo-section--privacy {
    border-radius: 16px;
    padding: 15px 18px;
    border: 1px solid transparent;
}

.az-seo-skin .seo-section--example  { background: var(--az-c-create);   border-color: #f7d9d0; }
.az-seo-skin .seo-section--limits   { background: var(--az-c-explore);  border-color: #f3e0bd; }
.az-seo-skin .seo-section--privacy  { background: var(--az-c-download); border-color: #cfe9dc; }

.az-seo-skin .seo-section--example > .seo-h2,
.az-seo-skin .seo-section--limits > .seo-h2,
.az-seo-skin .seo-section--privacy > .seo-h2 {
    font-size: 15px;
    margin-top: 0;
}

.az-seo-skin .seo-section--example > .seo-h2::before,
.az-seo-skin .seo-section--limits > .seo-h2::before,
.az-seo-skin .seo-section--privacy > .seo-h2::before { display: none; }

/* #c2481f measured 4.38 on this tint - just under, at 15px bold. */
.az-seo-skin .seo-section--example  > .seo-h2 { color: #ad3a17; }
.az-seo-skin .seo-section--limits   > .seo-h2 { color: #96650a; }
.az-seo-skin .seo-section--privacy  > .seo-h2 { color: #147a48; }

.az-seo-skin .seo-section--example p:last-child,
.az-seo-skin .seo-section--limits p:last-child,
.az-seo-skin .seo-section--privacy p:last-child { margin-bottom: 0; }

/* ---- related tools, as chips rather than a bullet list ---- */

.az-seo-skin .seo-related-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.az-seo-skin .seo-related-list li { margin: 0; }

.az-seo-skin .seo-related-list a {
    display: inline-block;
    padding: 7px 13px;
    background: var(--az-surface);
    border: 1px solid var(--az-line);
    border-radius: 999px;
    font-size: 13.4px;
    font-weight: 600;
    color: #3a66cc;
    text-decoration: none;
}

.az-seo-skin .seo-related-list a:hover {
    border-color: #b9caf6;
    background: var(--az-c-convert);
}

/* ---- the last-reviewed footnote ---- */

.az-seo-skin .seo-reviewed {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--az-line);
    font-size: 12.5px;
    color: var(--az-ink-3);
}

/* ---- prose keeps a reading measure; structure does not ----

   Body text caps at 860px because a 1300px line is genuinely harder to
   read. The key facts grid, the FAQ and the related chips are not
   prose - they are scanned, not read - so holding them to the same
   measure only left 440px of the row empty beside them.

   Those three go the full width; everything else stays narrow. */

.az-seo-skin .seo-content > .seo-keyfacts,
.az-seo-skin .seo-content > .seo-faq,
.az-seo-skin .seo-content > .seo-section--related {
    max-width: none;
}

.az-seo-skin .seo-keyfacts ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The FAQ answers ARE prose, so they keep the measure even though the
   row they sit in does not. */
.az-seo-skin .seo-faq-answer { max-width: 820px; }

@media (max-width: 1100px) {
    .az-seo-skin .seo-keyfacts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .az-seo-skin .seo-keyfacts ul { grid-template-columns: 1fr; }
}

/* ---- the "New" pill on the recently-added row ----

   The trending pill's dot is already mint. This one is amber, so the
   two rows are distinguishable at a glance when they sit one above the
   other - they use the same card otherwise. */
.az-pop-new::before { background: var(--az-i-explore); }

/* Both rows now carry one card per category rather than four from the
   same one, so they run to eight and wrap to a second line. The gap
   between the rows was set for a single line of cards. */
.az-trend { row-gap: 14px; }

/* ============================================================
   The alphabet filter panel
   ============================================================

   Opens under the alphabet when a letter is clicked. The letters are
   still links to server-rendered pages; this is what the script shows
   instead when it can.
   ============================================================ */

.az-letterpanel {
    margin: 14px 0 4px;
    padding: 16px 18px 18px;
    background: var(--az-surface);
    border: 1px solid var(--az-line);
    border-radius: 18px;
    box-shadow: var(--az-shadow);

    /* Animated open. The panel is display:none until the script shows
       it, so the transition runs on the frame after that. */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
}

.az-letterpanel.is-open { opacity: 1; transform: none; }

.az-letterpanel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}

.az-letterpanel-head .az-h2 { font-size: 17px; }

.az-letterclose {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--az-line);
    border-radius: 999px;
    background: var(--az-surface);
    color: var(--az-ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.az-letterclose:hover { border-color: #d9cffb; color: var(--az-a-2); }
.az-letterclose svg { width: 13px; height: 13px; }

.az-letterstatus {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--az-ink-3);
}

.az-lettertools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

/* Each row fades up, staggered by its index. --i is capped in the
   script so a long letter does not take seconds to finish arriving. */
.az-lettertools li {
    animation: az-letter-in .26s ease both;
    animation-delay: calc(var(--i, 0) * 22ms);
}

@keyframes az-letter-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Somebody who has asked for less motion gets the list, not the
   entrance. */
@media (prefers-reduced-motion: reduce) {
    .az-letterpanel { transition: none; }
    .az-lettertools li { animation: none; }
}

.az-lettertool {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid var(--az-line);
    border-radius: 12px;
    background: var(--az-bg);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.az-lettertool:hover,
.az-lettertool:focus-visible {
    border-color: #c9b9f7;
    background: var(--az-c-convert);
}

.az-lettertool-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.az-lettertool-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 6px;
}

.az-lettertool-name {
    font-size: 13.6px;
    font-weight: 650;
    color: var(--az-ink);
    line-height: 1.3;
}

.az-lettertool-cat {
    font-size: 11.6px;
    color: var(--az-ink-3);
}

/* The letter currently filtering, marked in the alphabet row itself -
   otherwise the panel is the only clue which one is active.

   --az-letter-1/--az-letter-2 are set inline on the active <a> by
   home-atoz.js (a smooth blue -> violet -> magenta -> coral -> orange
   position along the A-Z gradient, A and Z landing exactly on the
   banner's own end colours). The var() fallbacks are A's colours, so
   an unselected element can never accidentally render this rule - it
   only ever applies to .is-on, which JS always pairs with the inline
   properties. */
.az .az-alpha a.is-on,
.az-alpha a.is-on {
    background: linear-gradient(140deg, var(--az-letter-1, var(--az-a-1)), var(--az-letter-2, var(--az-a-2))) !important;
    border-color: transparent !important;
    color: #fff !important;
}

@media (max-width: 1100px) { .az-lettertools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .az-lettertools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .az-lettertools { grid-template-columns: 1fr; } }

/* ---- the blog row, as the last thing on the page ----

   It sat flush against the footer: zero pixels between the bottom of
   the cards and the top of the dark band, and ten from the SEO block
   above. Measured, not guessed - the cards looked glued on.

   It is the closing section now, so it is spaced like one: a hairline
   and real air above to separate it from the FAQ, and enough below
   that the footer reads as a different thing rather than as the next
   row of the same one. */

.az-blog-sec {
    margin-top: 34px;
    padding-top: 30px;
    padding-bottom: 8px;
    margin-bottom: 56px;
    border-top: 1px solid var(--az-line);
}

/* 16:9 rather than 19:10. At three across this width the taller box
   left the picture dominating a card whose point is the headline. */
.az-post-media { aspect-ratio: 16 / 9; }

.az-post:hover,
.az-post:focus-visible { box-shadow: var(--az-shadow-lg); }

/* The byline row under the title. Kept to one line: on a three-up row
   a wrapped byline pushes one card's "Read post" out of line with the
   other two. */
.az-post-by {
    display: block;
    font-size: 11.8px;
    color: var(--az-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 620px) {
    .az-blog-sec { margin-top: 26px; padding-top: 22px; margin-bottom: 36px; }
}

/* ---------------------------------------------------------------
   Search shortcut rows (migration 117, SearchShortcuts)
   Apple-website rows carry a neutral outlined badge so they never
   read as an A2Z tool; safety rows are red.
   --------------------------------------------------------------- */
.az .az-result-badge {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: middle; white-space: nowrap;
}
.az .az-result-badge.is-official { background: #eef1f5; color: #2f3645; border: 1px solid #cfd5df; }
.az .az-result-badge.is-hub { background: #eef2fe; color: #3a5cc2; }
.az .az-result-badge.is-safety { background: #fdeeee; color: #a12626; }
.az .az-result-note { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: #5f677d; white-space: normal; }

/* ---------------------------------------------------------------
   Smart search results (migration 123): icon, highlighted name,
   category and why a tool matched; a notice for pasted links, a
   spelling correction, and starting points when nothing matched.
   --------------------------------------------------------------- */
.az-results { max-height: min(70vh, 470px); }

.az .az-results a.az-hit {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
}
.az .az-hit-icon {
    width: 34px; height: 34px; flex: none;
    padding: 5px; border-radius: 9px;
    background: #f3f5fb; object-fit: contain;
}
.az .az-hit-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.az .az-hit-name { font-weight: 600; line-height: 1.3; color: var(--az-ink); }
.az .az-hit-name mark { background: #fff0b3; color: inherit; border-radius: 3px; padding: 0 1px; }
.az .az-hit-meta {
    margin-top: 1px; font-size: 12.5px; color: var(--az-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.az .az-hit-why { color: #3a5cc2; }
.az .az-hit-go { flex: none; display: inline-flex; color: #3d6ff0; opacity: 0; transition: opacity .15s ease; }
.az .az-hit-go svg { width: 18px; height: 18px; }
.az .az-results li.is-active .az-hit-go,
.az .az-results a.az-hit:hover .az-hit-go,
.az .az-results a.az-hit:focus-visible .az-hit-go { opacity: 1; }

.az .az-notice {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 2px 2px 6px; padding: 10px 12px; border-radius: 10px;
    background: #fff5e2; color: #7a4a00; font-size: 13.5px; line-height: 1.45;
}
.az .az-notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.az .az-didyoumean { padding: 4px 12px 6px; font-size: 13px; color: var(--az-ink-3); }
.az .az-didyoumean b { color: var(--az-ink); }

.az .az-results .az-empty { padding: 12px; }
.az .az-empty-title { display: block; margin-bottom: 8px; color: var(--az-ink-2); }
.az .az-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.az .az-sugg button {
    padding: 4px 11px; border: 1px solid var(--az-line); border-radius: 999px;
    background: #fff; color: var(--az-ink-2); font-size: 13px; cursor: pointer;
}
.az .az-sugg button:hover,
.az .az-sugg button:focus-visible { border-color: #3d6ff0; color: #3d6ff0; }
.az .az-results a.az-browse { display: inline; padding: 0; color: #3d6ff0; font-weight: 600; font-size: 13.5px; }
.az .az-results a.az-browse:hover { background: none; text-decoration: underline; }

@media (max-width: 520px) {
    .az .az-hit-icon { width: 30px; height: 30px; }
    .az .az-hit-go { display: none; }
}

/* ---------------------------------------------------------------
   Recently used (recent-tools.js) - from this browser only.
   A wrapping grid on desktop, a swipeable row on phones.
   --------------------------------------------------------------- */
.az-recent[hidden] { display: none; }

.az .az-recent-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.az .az-recent-note { margin: 4px 0 0; font-size: 13.5px; color: var(--az-ink-3); }
.az .az-recent-clear {
    padding: 6px 12px; border: 1px solid var(--az-line); border-radius: 999px;
    background: #fff; color: var(--az-ink-2); font-size: 13px; cursor: pointer;
}
.az .az-recent-clear:hover,
.az .az-recent-clear:focus-visible { border-color: #3d6ff0; color: #3d6ff0; }

.az .az-recent-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
    margin: 14px 0 0; padding: 0; list-style: none;
}
.az .az-recent-list li {
    position: relative;
    animation: az-recent-in .35s ease both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes az-recent-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.az .az-recent-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 36px 12px 12px; border: 1px solid var(--az-line); border-radius: 14px;
    background: #fff; color: var(--az-ink); text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.az .az-recent-card:hover,
.az .az-recent-card:focus-visible {
    border-color: #c9d6fb; box-shadow: 0 6px 18px rgba(40, 70, 160, .10); transform: translateY(-1px);
}
.az .az-recent-icon {
    width: 36px; height: 36px; flex: none; padding: 6px; border-radius: 10px;
    background: #f3f5fb; object-fit: contain;
}
.az .az-recent-text { display: flex; flex-direction: column; min-width: 0; }
.az .az-recent-name { font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az .az-recent-meta { margin-top: 2px; font-size: 12.5px; color: var(--az-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.az .az-recent-x {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--az-ink-3); font-size: 18px; line-height: 24px; cursor: pointer;
    opacity: .55; transition: opacity .15s ease, background-color .15s ease;
}
.az .az-recent-list li:hover .az-recent-x,
.az .az-recent-x:focus-visible { opacity: 1; }
.az .az-recent-x:hover { background: #f1f3f8; color: var(--az-ink); }

@media (max-width: 620px) {
    .az .az-recent-list {
        display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 6px; -webkit-overflow-scrolling: touch;
    }
    .az .az-recent-list li { flex: 0 0 76%; scroll-snap-align: start; }
    .az .az-recent-x { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .az .az-recent-list li { animation: none; }
    .az .az-recent-card { transition: none; }
}

/* ============================================================
   Narrow-width header tightening

   PLACED LAST ON PURPOSE. Earlier in this file a @media block
   sets .az-head-in { gap: 12px } at 900px and a plain rule sets
   .az-signin padding. At equal specificity the later rule wins
   regardless of media queries, so this has to come after them or
   it silently does nothing.

   Paired with the shrink rules in the header section above: those
   make overflow impossible at any width, these make sure nothing
   actually has to truncate on a 320px screen.
   ============================================================ */

@media (max-width: 420px) {
    .az-head-in { padding: 0 14px; gap: 8px; }
    .az-head-right { gap: 8px; }
    .az-signin { padding: 9px 11px; }
    .az-brand { gap: 6px; }
    .az-brand img { width: 30px; height: auto; }
}