/* global.css - Shared styles, branding, and layout */

:root {
    /* Brand Colors */
    --cfn-green: #03A63C;
    --cfn-dark-green: #0B8C38;
    --cfn-mute-green: #46A66F;
    --cfn-light-green: #8BD9AD;

    /* Neutrals */
    --npt-black: #141414;
    --npt-white: #F8FAFC; /* Slightly off-white for less glare */
    --npt-grey: #e2e8f0;

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Spacing */
    --spacing-md: 2rem;
    --spacing-lg: 4rem;

    /* Premium UI Tokens */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-blur: blur(12px) saturate(180%);
    --glow-green: 0 0 0 1px rgba(3, 166, 60, 0.15), 0 8px 24px rgba(3, 166, 60, 0.18), 0 20px 40px rgba(3, 166, 60, 0.08);
    --glow-green-hover: 0 0 0 1px rgba(3, 166, 60, 0.3), 0 12px 32px rgba(3, 166, 60, 0.28), 0 24px 48px rgba(3, 166, 60, 0.12);
    --transition-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
    --cfn-light-green-dim: rgba(139, 217, 173, 0.15);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--npt-white);
    color: var(--npt-black);
    line-height: 1.7; /* Increased for readability */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased; /* Smoother fonts on Mac */
}

img,
video,
iframe {
    max-width: 100%;
}

/* Keep anchor targets visible beneath sticky headers */
[id] {
    scroll-margin-top: 120px;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em; /* Tighter headings look more modern */
}

/* --- Navigation --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: rgba(255, 255, 255, 0.98); /* Switch to White for Black Logo */
    backdrop-filter: blur(10px);
    color: var(--npt-black); /* Dark text for links */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Softer shadow */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 45px; /* Adjust based on logo aspect ratio */
    width: auto;
    display: block;
}

/* Fallback if image fails */
.logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--cfn-green);
    margin-left: 0.5rem;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    align-items: center; /* Vertically align items */
}

/* Container for nav items, specifically helpful for dropdowns */
.nav-links li {
    position: relative;
    padding: 10px 0; /* Increase hit area vertically */
}

.nav-links a {
    text-decoration: none;
    color: var(--npt-black); /* Dark links against white header */
    font-weight: 600; /* Slightly bolder for visibility */
    font-size: 0.95rem;
    transition: color 0.3s ease;
    font-family: var(--font-heading);
    display: block;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--cfn-green); /* Green accent on hover */
}

/* --- Dropdown Menu Styles --- */
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position directly below the parent li */
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    min-width: 180px; /* Slightly wider */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Stronger shadow */
    border-radius: 8px;
    padding: 10px 0;
    z-index: 1001;
    border: 1px solid rgba(0,0,0,0.05);
    margin-top: 0; /* Remove top margin gap */

    /* Invisible bridge to prevent mouse-leave when moving from button to menu */
    padding-top: 15px;
    clip-path: inset(0 -20px -20px -20px); /* Expand interactive area */
}

/* Inner wrapper to handle padding/clip-path offset */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px; /* Height of the bridge */
    background: transparent;
}

/* Arrow indicator for dropdown parent */
.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.2s;
    display: inline-block;
}

/* Hover State - Show Menu */
.nav-links li:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

.nav-links li:hover .dropdown-menu {
    display: block;
    animation: fadeInDropdown 0.2s ease-out forwards;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dropdown items */
.dropdown-menu li {
    width: 100%;
    padding: 0; /* Reset parent padding for list items */
}

.dropdown-menu a {
    padding: 12px 20px;
    white-space: nowrap;
    color: var(--npt-black);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-radius: 0;
    display: flex;
    align-items: center;
}

.dropdown-menu a:hover {
    background-color: #f0fdf4; /* Very light green bg */
    color: var(--cfn-green);
    padding-left: 25px; /* Slight slide effect */
}

.dropdown-menu .cfn-icon {
    width: 20px;
    text-align: center;
    color: #94a3b8;
    transition: color 0.2s;
}

.dropdown-menu a:hover .cfn-icon {
    color: var(--cfn-green);
}

/* Special styling for bill pay button in nav */
.btn-nav-highlight {
    background-color: var(--cfn-green);
    color: white !important;
    padding: 8px 22px;
    border-radius: 50px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(3, 166, 60, 0.2);
}

.btn-nav-highlight:hover {
    background-color: var(--cfn-dark-green);
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(3, 166, 60, 0.3);
}

.btn-nav-highlight::after {
    color: white; /* Make arrow white for highlighted button */
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--npt-black); /* Dark icon */
}

/* --- Utility Classes --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg) 1.5rem;
}

.hidden {
    display: none !important;
}

.text-accent {
    color: var(--cfn-green);
}

/* --- Footer --- */
footer {
    background-color: var(--npt-black);
    color: #94a3b8; /* Muted text */
    text-align: center;
    padding: 3rem 1rem;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-address {
    color: #cbd5e1;
    font-style: normal;
    line-height: 1.7;
    margin: 0 auto 1rem;
}

.footer-address strong {
    color: #ffffff;
    display: block;
}

/* --- Animations --- */
html.animations-ready .fade-in-section,
html.animations-ready .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.fade-in-section.is-visible, .fade-in.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 1.5rem 5%;
        gap: 1.5rem;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        border-bottom: 1px solid var(--npt-grey);
    }

    .nav-links.active {
        display: flex;
        animation: slideDown 0.3s ease-out forwards;
    }

    .nav-links li {
        width: 100%;
        padding: 0;
    }

    /* Reset Bill Pay Button to look like a normal link */
    .btn-nav-highlight {
        background-color: transparent !important;
        color: var(--npt-black) !important;
        padding: 10px 0 !important;
        box-shadow: none !important;
        border-radius: 0;
        width: 100%;
        text-align: left;
    }

    .btn-nav-highlight:hover {
        background-color: transparent;
        color: var(--cfn-green) !important;
        box-shadow: none;
        transform: none;
    }

    /* Show the arrow again (it was white and hidden on desktop hover state) */
    .dropdown-toggle::after {
        display: inline-block;
        color: var(--cfn-green);
        float: right;
        margin-right: 1rem;
        transform: rotate(180deg); /* Point up to indicate it is "open" */
    }

    /* Adjust dropdown menu to look like an indented sub-list */
    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        display: block; /* Show nested items on mobile */
        opacity: 1;
        margin-top: 0;

        /* New sub-list styling */
        background: transparent;
        border-left: 2px solid var(--cfn-green);
        margin-left: 10px;
        padding-left: 0;
    }

    .dropdown-menu a {
        padding: 10px 15px;
        font-size: 0.9rem;
        color: #64748b; /* Lighter text for hierarchy */
    }

    .mobile-menu-btn {
        display: block;
    }
}

@media (max-width: 600px) {
    body {
        line-height: 1.6;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: clamp(2rem, 11vw, 2.7rem);
    }

    h2 {
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    p,
    li {
        overflow-wrap: anywhere;
    }

    .btn,
    button,
    input,
    select,
    textarea {
        max-width: 100%;
    }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Layout stability -------------------------------------------------- */
/* The navigation is injected by assets/js/standard-header.js after the HTML
   has parsed. Without a reserved box the whole page jumps down by the header
   height the moment it lands, which is the single largest source of CLS on
   the site. Keep this in sync with .main-header's height in that file. */
#master-header {
    min-height: 90px;
}

/* Images declare intrinsic dimensions where possible; this stops any that
   slip through from collapsing to zero height and reflowing on load. */
img {
    max-width: 100%;
    height: auto;
}

/* --- Site footer ------------------------------------------------------- */
/* Previously unstyled, so the links fell back to the UA default blue on the
   off-white body: below the 4.5:1 contrast minimum, and the links sat too
   close together to meet the 24px touch-target minimum. */
.site-footer,
footer {
    background-color: #0F1720;
    color: #E2E8F0;
    padding: 4rem 1.5rem 2.25rem;
    margin-top: 4rem;
}

.site-footer .footer-content,
footer .footer-content {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    grid-template-areas:
        "family address"
        "family links"
        "family copyright";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(3rem, 7vw, 6rem);
    max-width: 1180px;
    margin: 0 auto;
    text-align: left;
}

/* --- NPTech family -----------------------------------------------------
   The family is the footer's visual anchor: one large vertical signature on
   the left, separated from the quieter legal and contact column on the right. */
footer .footer-family {
    grid-area: family;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 clamp(2rem, 5vw, 4rem) 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

footer .footer-family-title,
.site-footer .footer-family-title {
    margin: 0 0 1.25rem;
    color: #94A3B8;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

footer .footer-brand-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .footer-brand-item {
    width: 100%;
    max-width: 205px;
}

footer .footer-brand-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

footer .footer-brand-link:hover,
footer .footer-brand-link:focus-visible {
    outline: none;
}

footer .footer-brand-link img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 47px;
    object-fit: contain;
    object-position: left center;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.68;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

footer .footer-brand-link:hover img,
footer .footer-brand-link:focus-visible img {
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
    opacity: 1;
    transform: scale(1.045);
}

footer .footer-links,
.site-footer .footer-links {
    grid-area: links;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 2rem;
    margin: 0 0 2rem;
    padding: 0 0 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

footer .footer-links a,
.site-footer .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0;
    color: #CBD5E1;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}

footer .footer-links a:hover,
footer .footer-links a:focus-visible,
.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
    color: var(--cfn-light-green);
    text-decoration: underline;
}

footer .footer-address,
.site-footer .footer-address {
    grid-area: address;
    font-style: normal;
    color: #CBD5E1;
    margin: 0 0 2rem;
    padding: 0 0 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    line-height: 1.6;
}

footer .footer-address strong,
.site-footer .footer-address strong {
    display: block;
    color: #FFFFFF;
    font-family: var(--font-heading);
    margin-bottom: 0.6rem;
    font-size: 1.3rem;
}

.site-footer p {
    color: #CBD5E1;
    font-size: 0.9rem;
}

footer .footer-content > p:last-child {
    grid-area: copyright;
    align-self: end;
    margin: 0;
    color: #64748B;
    font-size: 0.82rem;
}

/* --- Inline icons ------------------------------------------------------ */
/* Replaces Font Awesome's webfont (147KB woff2 + 18KB CSS from a third-party
   CDN) with inline SVG. Sized in em so icons track the surrounding text, and
   filled with currentColor so they inherit link/button colours exactly as the
   font-based icons did.
   Icons: Font Awesome Free 6.4.0, CC BY 4.0 — https://fontawesome.com/license/free */
.cfn-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    #master-header {
        min-height: 76px;
    }

    .site-footer,
    footer {
        padding: 3rem 1.25rem 1.75rem;
        margin-top: 2.5rem;
    }

    .site-footer .footer-content,
    footer .footer-content {
        display: block;
        text-align: center;
    }

    footer .footer-links,
    .site-footer .footer-links {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    footer .footer-links a,
    .site-footer .footer-links a {
        justify-content: center;
        width: 100%;
    }

    footer .footer-family {
        margin-bottom: 2rem;
        padding: 0 0 2rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    footer .footer-brand-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        max-width: none;
        margin: 0 auto;
    }

    footer .footer-brand-item {
        width: min(100%, 170px);
        max-width: 170px;
    }

    footer .footer-brand-link {
        justify-content: center;
    }

    footer .footer-brand-link img {
        max-height: 40px;
        object-position: center;
    }

    footer .footer-address,
    .site-footer .footer-address {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    footer .footer-brand-link img {
        transition: none;
    }
}

/* --- Edge motifs -------------------------------------------------------- */
/* Decorative fiber-bend graphics that bleed off the left/right margins of a
   section, using the brand's corner artwork. Purely atmospheric: drawn as
   pseudo-elements so assistive tech ignores them entirely, and never placed
   where they can collide with the reading column.
   Usage:  <section class="edge-motif edge-motif--left"> … </section>
   Combine --left and --right for both sides.

   Three rules keep this safe:
     - overflow:hidden on the host, so a bleeding graphic can never create a
       horizontal scrollbar;
     - content is lifted to z-index 1, so the motif always sits behind text;
     - the whole thing is switched off below 1100px, where the side margins
       don't exist and the artwork would crowd the content. */
.edge-motif {
    position: relative;
    overflow: hidden;
}

/* Anything the author put inside stays above the artwork. */
.edge-motif > * {
    position: relative;
    z-index: 1;
}

.edge-motif::before,
.edge-motif::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 520px;
    height: 520px;
    opacity: 0.28;
}

/* The artwork sits centred inside a square canvas with wide padding, so the
   bend is only about the middle third of the file. Bleed it off the top rather
   than hard off the side — pushing it far enough left to clip the canvas also
   clips the curve, leaving just the straight tails showing as loose stripes. */
.edge-motif--left::before {
    background-image: url('../images/corners.svg');
    left: -170px;
    top: -180px;
    transform: scaleY(-1);
}

.edge-motif--right::after {
    background-image: url('../images/corners3.svg');
    right: -250px;
    bottom: -90px;
    transform: scaleX(-1);
}

/* Horizontal variant, for bands that want the run-in along the top edge. */
.edge-motif--top-left::before {
    background-image: url('../images/corners2.svg');
    left: -230px;
    top: -180px;
}

@media (max-width: 1100px) {
    .edge-motif::before,
    .edge-motif::after {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Nothing animates here — declared so the intent is explicit if motion is
       ever added to these graphics later. */
}

/* --- Brand accent system ------------------------------------------------ */
/* The "since 1901" gradient, promoted from a one-off on the home page hero to
   a token used across the site. Everything decorative pulls from this, so the
   pages share a visual signature without depending on fixed-size artwork.
   Learned from the print corner motifs: web decoration wants to be large and
   soft, or thin and structural — never small and fussy. */
:root {
    --cfn-gradient: linear-gradient(45deg, var(--cfn-green), #73bf4b, #bdd63a);
    --cfn-gradient-flat: linear-gradient(90deg, var(--cfn-green), #bdd63a);
}

/* 1. Accent rule under every section title.
   The single highest-leverage cohesion move: every section on every page picks
   up the same brand mark, at any width, with no asset to maintain. */
.section-title {
    position: relative;
    padding-bottom: 22px;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 68px;
    height: 4px;
    border-radius: 999px;
    background: var(--cfn-gradient-flat);
}

/* Left-aligned headings keep the accent tucked under their first character. */
.section-title.is-left::after {
    left: 0;
    transform: none;
}

/* 2. Hairline divider — a thread of fiber running between sections. Fades out
   at both ends so it never terminates abruptly the way the print tails did. */
.brand-rule {
    border: 0;
    height: 2px;
    margin: 0;
    background: var(--cfn-gradient-flat);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* 3. Ambient glow — the replacement for the corner motifs. Scales with the
   viewport instead of being a fixed canvas, so it can never clip awkwardly,
   and it sits far enough back to read as atmosphere rather than as a graphic
   someone placed. */
.brand-glow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.brand-glow > * {
    position: relative;
    z-index: 1;
}

.brand-glow::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: min(52vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(3, 166, 60, 0.13), rgba(189, 214, 58, 0.07) 45%, transparent 70%);
    top: -28%;
    right: -14%;
}

.brand-glow--left::before {
    right: auto;
    left: -14%;
}

/* 4. Gradient text, available anywhere rather than only in the home hero.
   The original declared only the -webkit- prefixed function, which is
   non-standard; the unprefixed value is listed second so it wins where
   supported. */
.highlight-text,
.text-gradient {
    background: -webkit-linear-gradient(45deg, var(--cfn-green), #73bf4b, #bdd63a);
    background: var(--cfn-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cfn-green);
}

@media (prefers-reduced-motion: reduce) {
    .brand-glow::before { transition: none; }
}

/* --- Chevron affordance -------------------------------------------------- */
/* Replaces the long-stem arrows that followed button and link labels. A
   chevron reads as a quieter "continue" cue; the stemmed arrow competed with
   the label for weight.
   Sized off its own 320x512 viewBox — inheriting .cfn-icon's 1em square would
   letterbox it and leave a visible gap after the text. */
.cfn-icon--chevron {
    width: 0.58em;
    height: 0.9em;
    vertical-align: -0.06em;
    transition: transform 0.2s var(--transition-smooth);
}

/* Nudge on hover so the cue feels responsive rather than decorative.
   .service-link is deliberately excluded — it already widens its own flex gap
   on card hover, and doing both makes the chevron travel twice as far. */
a:hover > .cfn-icon--chevron,
button:hover > .cfn-icon--chevron {
    transform: translateX(3px);
}

.service-link .cfn-icon--chevron {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .cfn-icon--chevron { transition: none; }
    a:hover > .cfn-icon--chevron,
    button:hover > .cfn-icon--chevron,
    .service-card:hover .cfn-icon--chevron,
    .guide-card:hover .cfn-icon--chevron { transform: none; }
}

/* --- Scrollable table affordance ---------------------------------------- */
/* The comparison tables are ~640px wide inside a ~334px column on a phone, so
   they scroll horizontally. That works, but nothing signalled there was a
   third column to reach — people simply did not know to swipe. A fade on the
   right edge shows there is more, and it disappears once scrolled to the end.
   Applies only where a horizontal scrollbar actually exists. */
@media (max-width: 900px) {
    .table-wrapper {
        position: relative;
        /* Two background layers pinned to the scroll container: the gradient
           only becomes visible when the content is scrolled away from the end. */
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
                          linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
        background-position: left center, right center;
        background-repeat: no-repeat;
        background-size: 1px 100%, 34px 100%;
        background-attachment: local, scroll;
    }
}

/* Visible to screen readers only. Lives here rather than in a page stylesheet
   because the address bar uses it on every page it appears on — scoped to one
   page's sheet, the label simply renders as stray text everywhere else. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}