/* Page-specific styles for index.html: the home page. The hero's grid,
   the eyebrow label and the guide cards are shared (brand-shared.css). */

  /* ---------- hero ---------- */
  .home-hero{ padding: 64px 0 56px; }
  .home-hero .wrap{ grid-template-columns: 1.08fr 0.92fr; gap: 48px; }
  .home-hero h1{ max-width: 600px; }
  .home-hero p.lead{ max-width: 520px; }

  /* The three headline facts under the buttons. */
  .home-facts{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--slate);
  }
  .home-facts strong{
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--navy-deep);
    margin-right: 3px;
  }

  /* ---------- the showcase: a real answer from three calculators ---------- */
  .showcase{
    position: relative;
    max-width: 440px;
    width: 100%;
    justify-self: end;
    padding: 34px 0 58px;
  }
  .showcase-card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 26px 26px 22px;
    box-shadow: 0 1px 0 rgba(13, 43, 78, .04), 0 24px 48px -12px rgba(13, 43, 78, .18);
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: rise .6s cubic-bezier(.2, .7, .3, 1) both;
  }
  .showcase-card::before{
    content: '';
    position: absolute;
    top: -1px; left: 26px;
    width: 22px; height: 6px;
    background: var(--navy);
    transform: skewX(-12deg);
  }
  .showcase-card:hover{ transform: translateY(-3px); box-shadow: 0 1px 0 rgba(13, 43, 78, .04), 0 30px 56px -12px rgba(13, 43, 78, .24); }
  .showcase-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .showcase-year{
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--cream);
    color: var(--brown);
    letter-spacing: .04em;
  }
  .showcase-input{ margin-top: 18px; font-size: 14.5px; color: var(--slate); }
  .showcase-value{
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--navy-deep);
  }
  .showcase-unit{ font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--slate); }

  /* The year's pay split three ways, in proportion: £35,920 / £6,486 / £2,594. */
  .showcase-bar{
    display: flex;
    gap: 3px;
    height: 10px;
    margin-top: 20px;
  }
  .showcase-bar span{ display: block; border-radius: 2px; transform-origin: left; animation: grow .8s .25s cubic-bezier(.2, .7, .3, 1) both; }
  .sb-home{ flex: 35920; background: var(--navy); }
  .sb-tax{ flex: 6486; background: var(--brown); }
  .sb-ni{ flex: 2594; background: #C79A6D; }
  .showcase-legend{
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--slate);
  }
  .showcase-legend > span{ display: flex; align-items: center; gap: 9px; }
  .showcase-legend > span::before{ content: ''; width: 9px; height: 9px; border-radius: 2px; flex: none; }
  .showcase-legend strong{ margin-left: auto; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
  .sl-home::before{ background: var(--navy); }
  .sl-tax::before{ background: var(--brown); }
  .sl-ni::before{ background: #C79A6D; }
  .showcase-more{
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
  }
  .showcase-more span{ display: inline-block; transition: transform var(--hover-fade); }
  .showcase-card:hover .showcase-more span{ transform: translateX(3px); }

  /* Two smaller answers pinned to the card's corners. */
  .showcase-chip{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--navy-deep);
    color: #fff;
    border-radius: 5px;
    padding: 12px 16px 13px;
    box-shadow: 0 16px 32px -10px rgba(13, 43, 78, .45);
    transition: transform .2s ease;
    animation: rise .6s cubic-bezier(.2, .7, .3, 1) both;
  }
  .showcase-chip:hover{ transform: translateY(-2px); }
  .chip-label{ font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #E3B685; }
  .chip-value{ font-family: var(--font-display); font-size: 17px; font-weight: 700; }
  .chip-stamp{ top: -10px; right: -22px; animation-delay: .15s; }
  .chip-company{ bottom: 6px; left: -26px; background: #fff; color: var(--navy-deep); border: 1px solid var(--line); box-shadow: 0 16px 32px -12px rgba(13, 43, 78, .22); animation-delay: .3s; }
  .chip-company .chip-label{ color: var(--brown); }

  @keyframes rise{
    from{ opacity: 0; transform: translateY(14px); }
    to{ opacity: 1; transform: none; }
  }
  @keyframes grow{
    from{ transform: scaleX(0); }
    to{ transform: scaleX(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .showcase-card, .showcase-chip, .showcase-bar span{ animation: none; }
  }

  /* ---------- sections ---------- */
  .section{ padding: 64px 0; border-top: 1px solid var(--line); }

  .section-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 16px;
  }

  .section h2{
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 700;
    color: var(--navy-deep);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .section-lead{
    color: var(--slate);
    font-size: 16.5px;
    max-width: 660px;
    margin-bottom: 0;
  }
  .section-link{
    display: inline-block;
    margin-top: 18px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--navy);
  }
  .section-link:hover{ color: var(--brown); }

  /* A section heading with its "see all" link on the right. */
  .section-head-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
  }
  .section-head-row .section-link{ margin: 0 0 4px; white-space: nowrap; }

  /* ---------- search in the hero (site.js) ----------
     The box sits over the two buttons; its list of matches opens on top
     of them, and of the showcase beside it. */
  .hero-search{ position: relative; max-width: 520px; margin-top: 26px; }
  .hero-search-label{
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-deep);
  }
  .hero-search .search-input{ font-size: 17px; padding-block: 16px; box-shadow: 0 8px 22px rgba(13,43,78,.07); }
  .hero-search .search-input:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent), 0 8px 22px rgba(13,43,78,.07); }
  .hero-search + .cta-row{ margin-top: 22px; }
  .search-results{
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 40;
    margin-top: 6px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 16px 36px rgba(13,43,78,.14);
  }
  .search-results[hidden]{ display: none; }
  .search-results ul{ list-style: none; }
  .search-results-head{
    padding: 10px 10px 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .search-hit{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 3px;
    color: var(--ink);
  }
  .search-hit:hover, .search-hit:focus-visible, .search-hit.is-best{ background: var(--cream); color: var(--navy-deep); }
  .search-hit:focus-visible{ outline: 2px solid var(--navy); outline-offset: -2px; }
  .search-hit-title{ font-size: 14.5px; font-weight: 600; }
  .search-hit-guide .search-hit-title{ font-weight: 500; }
  /* The same skewed tags as the menu: orange for a calculator, navy for a guide. */
  .search-hit .tag{
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 9px;
    background: var(--brown);
    transform: skewX(-12deg);
  }
  .search-hit-guide .tag{ background: var(--navy); }
  .search-hit-group{ font-size: 12.5px; color: var(--slate); white-space: nowrap; }
  .search-none{ padding: 12px 10px; font-size: 14px; color: var(--slate); }

  /* ---------- the filter above the cards (site.js) ---------- */
  .calc-filter{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
    margin-top: 26px;
  }
  .calc-filter-groups{ display: flex; flex-wrap: wrap; gap: 8px; }
  .calc-filter-btn{
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-deep);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color var(--hover-fade), background var(--hover-fade), color var(--hover-fade);
  }
  .calc-filter-btn:hover{ border-color: var(--navy); }
  .calc-filter-btn[aria-pressed="true"]{ background: var(--navy); border-color: var(--navy); color: #fff; }
  .calc-filter-btn:focus-visible{ outline: 2px solid var(--navy); outline-offset: 2px; }
  .calc-filter-find{ display: flex; align-items: center; gap: 14px; }
  .search-field-sm{ flex: 0 1 260px; }
  /* "7 of 23 calculators", to the left of the box (under it on a phone); the screen-reader version is the status line above. */
  .calc-filter-count{ order: -1; font-size: 13px; color: var(--slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .calc-filter-count:empty{ display: none; }
  .search-field-sm .search-icon{ left: 12px; width: 15px; height: 15px; }
  .search-field-sm .search-input{ padding: 8px 38px 8px 36px; }
  .search-field-sm .search-clear{ right: 4px; width: 30px; height: 30px; font-size: 20px; }
  .calc-filter + .calc-group{ margin-top: 30px; }
  .calc-group[hidden], .calc-card[hidden], .calc-filter-none[hidden]{ display: none; }
  .calc-filter-none{
    margin-top: 32px;
    padding: 26px;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 4px;
    color: var(--slate);
    text-align: center;
  }
  .calc-filter-none a{ color: var(--navy); font-weight: 600; }

  /* ---------- calculators, in four numbered groups ---------- */
  .calc-group{ margin-top: 44px; }
  .calc-group-head{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .calc-group-num{
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--brown);
  }
  .calc-group-title{
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--navy-deep);
  }
  .calc-group-blurb{ font-size: 14.5px; color: var(--slate); }

  .calc-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
  }
  /* Each card: the name (whose link covers the whole card), what it does,
     the calculator's own default answer, a button that says what it does,
     and its guide. */
  .calc-card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 22px 22px 18px;
    position: relative;
    transition: border-color var(--hover-fade), box-shadow var(--hover-fade), transform var(--hover-fade);
  }
  .calc-card:hover{
    border-color: var(--navy);
    box-shadow: 0 10px 24px rgba(13, 43, 78, .09);
    transform: translateY(-2px);
  }
  .calc-card-tag{
    position: absolute;
    top: -1px; left: 22px;
    width: 14px; height: 5px;
    background: var(--brown);
    transform: skewX(-12deg);
    display: block;
  }
  .calc-card h4{
    font-size: 16.5px;
    font-weight: 700;
    color: var(--navy-deep);
    margin-bottom: 8px;
  }
  .calc-card-link{ color: inherit; }
  .calc-card-link::after{ content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 4px; }
  .calc-card-link:focus-visible{ outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .calc-card:has(.calc-card-link:focus-visible){ outline: 2px solid var(--navy); outline-offset: 2px; }
  .calc-card-new{
    display: inline-block;
    margin-left: 6px;
    padding: 3px 6px 2px;
    border-radius: 2px;
    background: var(--brown);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 2px;
  }
  .calc-card p{
    font-size: 14px;
    color: var(--slate);
    margin: 0 0 14px;
  }
  .calc-card .calc-card-eg{
    margin: 0 0 18px;
    padding: 8px 12px;
    background: var(--cream);
    border-left: 2px solid var(--brown);
    border-radius: 0 3px 3px 0;
  }
  .calc-card-eg-k{ display: block; font-size: 12.5px; color: var(--slate); margin-bottom: 1px; }
  .calc-card-eg-v{ display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--navy-deep); font-variant-numeric: tabular-nums; }
  .calc-card-eg-v small{ font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--slate); }
  .calc-card-foot{
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
  }
  .calc-card-go{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid color-mix(in srgb, var(--navy) 45%, transparent);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    transition: background var(--hover-fade), color var(--hover-fade), border-color var(--hover-fade);
  }
  .calc-card:hover .calc-card-go{ background: var(--navy); border-color: var(--navy); color: #fff; }
  .calc-card-go span{ display: inline-block; transition: transform var(--hover-fade); }
  .calc-card:hover .calc-card-go span{ transform: translateX(3px); }
  /* Above the card's own link, so it can be clicked on its own. */
  .calc-card-guide{
    position: relative;
    z-index: 2;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--slate);
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--slate) 45%, transparent);
    text-underline-offset: 3px;
  }
  .calc-card-guide:hover{ color: var(--navy); text-decoration-color: currentColor; }
  /* When a card is too narrow for the button and the guide side by side,
     every card of that width puts the guide under the button, so a row of
     cards always matches. */
  .calc-card{ container-type: inline-size; }
  @container (max-width: 285px){
    .calc-card-foot{ flex-direction: column; align-items: flex-start; }
  }

  /* ---------- guides: the lead guide tall on the left ---------- */
  .home-guides{
    grid-template-columns: 1.25fr 1fr 1fr;
    margin-top: 34px;
  }
  .home-guides .is-featured{ grid-row: span 2; }

  /* ---------- how the figures are kept right ---------- */
  .trust-band{
    background: var(--navy-deep);
    color: #fff;
    padding: 68px 0 72px;
  }
  .trust-band .section-eyebrow{ color: #E3B685; }
  .trust-band .eyebrow-frag{ background: #E3B685; }
  .trust-band h2{
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 640px;
  }
  .trust-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px;
  }
  .trust-item{ border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 20px; }
  .trust-num{ font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #E3B685; }
  .trust-item h3{ font-size: 18px; font-weight: 700; margin: 8px 0 8px; }
  .trust-item p{ font-size: 15px; color: #C9D6E6; line-height: 1.6; }

  /* ---------- about ---------- */
  /* Plain block inside the normal .wrap — not a .wrap itself — so it
     inherits the same left edge as every other section instead of
     re-centring (and drifting left) on its own narrower max-width. */
  .about-teaser{ border-top: 0; }
  .about-teaser-inner{ max-width: 680px; }

  /* ---------- narrower screens ---------- */
  @media (max-width: 980px){
    .home-hero .wrap{ grid-template-columns: 1fr; gap: 20px; }
    .showcase{ justify-self: start; margin-left: 26px; }
    .home-guides{ grid-template-columns: repeat(2, 1fr); }
    .home-guides .is-featured{ grid-row: auto; grid-column: 1 / -1; }
  }
  @media (max-width: 900px){
    .calc-grid{ grid-template-columns: repeat(2, 1fr); }
    .trust-grid{ grid-template-columns: 1fr; gap: 0; }
    .trust-item{ padding: 20px 0 22px; }
  }
  @media (max-width: 640px){
    /* The group buttons scroll sideways in one row; the filter box goes
       under them, full width. A match's group is left off so its name
       fits on one line. */
    .calc-filter{ display: block; }
    .calc-filter-groups{ flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 2px 2px; margin-left: -2px; scrollbar-width: none; }
    .calc-filter-btn{ white-space: nowrap; }
    .calc-filter-find{ display: block; margin-top: 12px; }
    .calc-filter-count{ order: 0; margin-top: 6px; }
    .search-hit-group{ display: none; }
    .home-hero{ padding: 40px 0 36px; }
    .calc-grid, .home-guides{ grid-template-columns: 1fr; }
    .section{ padding: 48px 0; }
    .section-head-row{ flex-direction: column; align-items: flex-start; gap: 4px; }
    .section-head-row .section-link{ margin: 10px 0 0; }
    .showcase{ margin-left: 0; max-width: none; padding: 24px 0 0; }
    .chip-stamp, .chip-company{ position: static; margin-top: 12px; }
    .showcase-value{ font-size: 40px; }
    .showcase-unit{ display: block; margin-top: 2px; }
  }