/*
    Marketing site. Deliberately small and dependency-free - no framework, no javascript -
    so these pages stay renderable to static HTML and servable from a CDN.

    Colour note: the brand orange comes off the logo. It has a contrast ratio of about 2.5:1
    on the light backgrounds here, so it is only ever used for text on the dark panels, where
    it reaches 7:1. Anything orange on a light background uses --orange-ink, which clears AA
    against the warm ground as well as white - #B85416 looked right but was 4.47:1 on
    --paper-warm, just under.
*/

:root {
    --ink:          #101820;
    --ink-deep:     #0B1015;
    --ink-panel:    #131C25;
    --ink-edge:     #090D12;

    --paper:        #FFFFFF;
    --paper-warm:   #F7F5F2;
    --card:         #FCFBF9;

    --line:         #E4E0D9;
    --line-strong:  #C9C2B6;
    --line-dark:    rgba(255, 255, 255, .10);

    --muted:        #5D6A75;
    --muted-dark:   #9FADBA;
    --dim-dark:     #7C8894;
    --dimmer-dark:  #78838E;

    --orange:       #F5802B;
    --orange-ink:   #B25113;
    --orange-hover: #8F3F10;
    --ok:           #4ADE80;

    --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--orange-ink); text-decoration: none; }
a:hover { color: var(--orange-hover); text-decoration: underline; }

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

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.mono { font-family: var(--mono); }

/* ---------- shared pieces ---------- */

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--orange-ink);
}

.btn, .btn-ghost, .btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.btn { background: var(--orange); color: var(--ink-deep); border: 1px solid var(--orange); }
.btn:hover { background: #FF9450; border-color: #FF9450; color: var(--ink-deep); text-decoration: none; }

.btn-ghost { color: #E8EDF2; border: 1px solid rgba(255, 255, 255, .22); font-weight: 500; }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .5); color: #fff; text-decoration: none; }

.btn-line { color: var(--ink); border: 1px solid var(--line-strong); font-weight: 500; }
.btn-line:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.section { padding: 96px 0; }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 42em; margin-bottom: 52px; }
.section-head.centered { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: 42px; line-height: 1.12; }
.section-head p { font-size: 18px; color: var(--muted); }

.on-warm { background: var(--paper-warm); }
.on-paper { background: var(--paper); }

/* dark sections invert the palette */
.on-dark { background: var(--ink); color: #F4F7FA; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #F4F7FA; }
.on-dark p { color: var(--muted-dark); }
.on-dark .eyebrow { color: var(--orange); }

/* Heroes are dark too, but are not .on-dark - without this the eyebrow keeps the
   light-background orange and sits at about 3.3:1 on the near-black. */
.hero .eyebrow { color: var(--orange); }
.hero a:not(.btn):not(.btn-ghost):not(.btn-line) { color: var(--orange); }
.hero a:not(.btn):not(.btn-ghost):not(.btn-line):hover { color: #FFA05C; }
/*
    Buttons are excluded: .on-dark a is more specific than .btn, so without the :not() list a
    Start-free-trial button inside a dark section rendered orange text on an orange fill.
*/
.on-dark a:not(.btn):not(.btn-ghost):not(.btn-line) { color: var(--orange); }
.on-dark a:not(.btn):not(.btn-ghost):not(.btn-line):hover { color: #FFA05C; }
.on-deep { background: var(--ink-deep); }

/* ---------- announcement bar ---------- */

.topbar {
    background: var(--ink-deep);
    border-bottom: 1px solid var(--line-dark);
}
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
}
.topbar-tag {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange);
}
.topbar-text { font-size: 14px; color: #93A1AE; }

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

.site-header { background: var(--ink-deep); border-bottom: 1px solid var(--line-dark); }
.site-header .wrap { display: flex; align-items: center; gap: 40px; min-height: 82px; }

.logo { display: flex; align-items: center; gap: 11px; }
.logo:hover { text-decoration: none; }
.logo-word {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #E8EDF2;
}
.logo-word b { font-weight: 700; color: var(--orange); }
.logo-word i { font-style: normal; color: var(--dim-dark); }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav > ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.main-nav a, .main-nav > ul > li > span {
    color: #C3CDD6;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.main-nav a:hover, .main-nav > ul > li > span:hover { color: #fff; text-decoration: none; }

.main-nav .has-children { position: relative; }

/*
    The submenu hangs 10px below its parent, and that gap used to close the menu: crossing it
    took the pointer off the <li>, :hover went false, and the submenu vanished before anyone
    could reach it. This transparent strip bridges the gap so the pointer never leaves the
    item. It sits inside the header, over nothing clickable.
*/
.main-nav .has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.main-nav .submenu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 232px;
    background: var(--ink-panel);
    border: 1px solid var(--line-dark);
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    list-style: none;
    margin: 10px 0 0;
    padding: 8px 0;
    z-index: 20;
    /*
        Delaying the visibility change rather than switching display gives a quarter-second
        grace period, so a diagonal path towards the second or third item does not close the
        menu on the way.
    */
    transition: opacity .12s ease, visibility 0s linear .25s;
}
.main-nav .has-children:hover .submenu,
.main-nav .has-children:focus-within .submenu {
    visibility: visible;
    opacity: 1;
    transition: opacity .12s ease, visibility 0s;
}
.main-nav .submenu a { display: block; padding: 9px 18px; font-weight: 400; }
.main-nav .submenu a:hover { background: rgba(255, 255, 255, .05); }

.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.header-actions a:first-child { color: #C3CDD6; font-size: 15px; font-weight: 500; }
.header-actions a:first-child:hover { color: #fff; text-decoration: none; }
.header-actions .btn { height: 44px; padding: 0 20px; font-size: 15px; }

/* The hamburger button and the mobile-only Log in item exist only below 860px */
.nav-toggle { display: none; }
.main-nav .nav-login { display: none; }

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

.hero { position: relative; overflow: hidden; background: var(--ink-deep); padding: 92px 0 104px; }
.hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 128, 43, .16) 0%, rgba(245, 128, 43, 0) 65%);
}
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero-copy h1 { font-size: 60px; line-height: 1.04; color: #F4F7FA; }
.hero-copy p { font-size: 19px; line-height: 1.6; color: var(--muted-dark); max-width: 30em; }
.hero-actions { display: flex; align-items: center; gap: 14px; padding-top: 6px; }

.trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 10px; }
.trust-row span { font-family: var(--mono); font-size: 13px; color: var(--dim-dark); }
.trust-dot { width: 4px; height: 4px; border-radius: 50%; background: #3A4650; }

/* a narrower hero for the interior pages */
.hero-slim { padding: 76px 0 80px; }
.hero-slim .hero-copy h1 { font-size: 46px; line-height: 1.1; }

/* ---------- the scan / report panel ---------- */

.panel {
    background: var(--ink-panel);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    box-shadow: 0 32px 70px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.panel-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--dim-dark);
}
.panel-order { padding: 22px 20px; border-bottom: 1px solid rgba(255, 255, 255, .09); background: rgba(245, 128, 43, .05); }
.panel-order-number { font-family: var(--mono); font-size: 25px; font-weight: 500; color: var(--orange); letter-spacing: -0.01em; }
.panel-order-meta { font-size: 14px; color: var(--dim-dark); margin-top: 5px; }

.panel-row {
    display: grid;
    grid-template-columns: 52px 92px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-family: var(--mono);
}
.panel-row:last-of-type { border-bottom: 0; }
.panel-row .ai { font-size: 12px; color: var(--orange); }
.panel-row .key { font-size: 12px; color: var(--dim-dark); letter-spacing: .08em; }
.panel-row .val { font-size: 14px; color: #D6DEE6; }

.panel-ok {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    background: rgba(74, 222, 128, .07);
    font-family: var(--mono);
    font-size: 12.5px;
    color: #86C79C;
}

/*
    The returns page compares two serial numbers rather than listing GS1 elements, so its rows
    are two columns instead of three, and its verdict can be negative.
*/
.panel-row.pair { grid-template-columns: 148px minmax(0, 1fr); }
.panel-bad {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    background: rgba(248, 113, 113, .09);
    font-family: var(--mono);
    font-size: 12.5px;
    color: #EFA9A9;
}

.panel-stats { display: flex; gap: 34px; padding: 20px; }
.panel-stat { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); }
.panel-stat b { font-size: 27px; font-weight: 400; color: #F4F7FA; }
.panel-stat span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-dark); }

.report-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 132px;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.report-row.head {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .02);
}
.report-row.head span {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dimmer-dark);
}
.report-row .ref, .report-row .serial { font-family: var(--mono); font-size: 13px; color: var(--dim-dark); }
.report-row .to { font-size: 14px; color: #D6DEE6; }
.report-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-family: var(--mono); font-size: 12.5px; color: var(--dimmer-dark); }
.report-foot a { margin-left: auto; }

/* ---------- integration strip ---------- */

.strip { background: var(--ink-edge); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.strip .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 44px; padding-top: 26px; padding-bottom: 26px; }
.strip-label {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dimmer-dark);
    white-space: nowrap;
}
.strip-names { display: flex; align-items: center; flex-wrap: wrap; gap: 42px; flex-grow: 1; }
.strip-names span { font-size: 19px; font-weight: 600; color: #7C8996; letter-spacing: -0.01em; }
.strip .wrap > a { font-family: var(--mono); font-size: 13px; white-space: nowrap; color: var(--orange); }

/* ---------- steps and cards ---------- */

.step { display: flex; flex-direction: column; gap: 13px; padding: 28px 24px 30px; }
.step-n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--orange-ink); }
.step h3 { font-size: 20px; }
.step p { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

.usecase {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
}
.usecase h3 { font-size: 23px; }
.usecase p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.usecase a { font-family: var(--mono); font-size: 13.5px; margin-top: 4px; }

/* ---------- pricing ---------- */

.plan { display: flex; flex-direction: column; gap: 18px; padding: 32px 28px 34px; }
.plan-name { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.plan-price span { font-size: 16px; color: var(--muted); }
.plan p { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.plan .btn, .plan .btn-line { width: 100%; }
.plan-featured { border-color: var(--orange-ink); box-shadow: 0 18px 44px rgba(16, 24, 32, .09); }
.plan-flag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-deep);
    background: var(--orange);
    padding: 3px 8px;
    border-radius: 3px;
}
.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; color: var(--muted); }
.plan-features svg { flex-shrink: 0; margin-top: 5px; }

/* ---------- closing call to action ---------- */

.cta { background: var(--ink-deep); padding: 88px 0; }
.cta .wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.cta h2 { font-size: 40px; line-height: 1.12; color: #F4F7FA; max-width: 17em; }
.cta p { font-size: 18px; color: var(--muted-dark); max-width: 32em; }
.cta-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 14px; padding-top: 6px; }

/* ---------- feature list ---------- */

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.feature-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.feature-list li b { color: var(--ink); font-weight: 600; }
.feature-list svg { flex-shrink: 0; margin-top: 6px; }
.on-dark .feature-list li { color: var(--muted-dark); }
.on-dark .feature-list li b { color: #F4F7FA; }

/* ---------- contact form ---------- */

.contact-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 44px; align-items: start; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field input, .field textarea {
    width: 100%;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 11px 13px;
}
.field textarea { resize: vertical; min-height: 170px; }
.field input:focus, .field textarea:focus {
    border-color: var(--orange-ink);
    outline: 2px solid rgba(178, 81, 19, .35);
    outline-offset: 0;
}
.field-error { font-size: 14.5px; color: #A3231B; }

/* Hidden from people, irresistible to bots. See app/classes/contactForm.class.php. */
.honeypot { position: absolute; left: -9999px; top: -9999px; }

.contact-aside { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.contact-aside h2 { font-size: 19px; }
.contact-aside p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; }

.form-sent { display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.form-sent h2 { font-size: 22px; }

/* ---------- prose (long-form and legal pages) ---------- */

.prose { max-width: 44em; }
.prose h1 { font-size: 40px; line-height: 1.12; margin: 0 0 24px; }
.prose h2 { font-size: 28px; line-height: 1.2; margin: 48px 0 14px; }
.prose h3 { font-size: 21px; margin: 34px 0 10px; }
.prose h4 { font-size: 17px; margin: 26px 0 8px; }
.prose p { margin: 0 0 18px; color: #384652; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; color: #384652; }
.prose li { margin-bottom: 8px; }
.prose li > ul, .prose li > ol { margin-top: 8px; }
.prose img { border-radius: 8px; margin: 16px 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 15.5px;
}
.prose th, .prose td {
    text-align: left;
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.prose th {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.prose td:first-child { white-space: nowrap; }
.prose-scroll { overflow-x: auto; }

.prose code, .prose .code {
    font-family: var(--mono);
    font-size: 14px;
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 6px;
}
.prose pre {
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.6;
    background: var(--ink-panel);
    color: #D6DEE6;
    border-radius: 6px;
    padding: 18px 20px;
    overflow-x: auto;
    margin: 0 0 20px;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.page-head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.page-head h1 { font-size: 46px; line-height: 1.1; color: #F4F7FA; max-width: 18em; }
.page-head p { font-size: 19px; color: var(--muted-dark); max-width: 34em; }

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

.site-footer { background: var(--ink-edge); border-top: 1px solid var(--line-dark); padding: 60px 0 34px; }
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer-heading {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dimmer-dark);
    margin: 0 0 2px;
    letter-spacing: .14em;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 14.5px; color: #93A1AE; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.site-footer address { font-style: normal; font-size: 14px; line-height: 1.75; color: var(--dim-dark); }
.site-footer .logo-word { font-size: 17px; }
.footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--line-dark);
    font-size: 13.5px;
    color: var(--dimmer-dark);
}
.footer-legal a { color: var(--dimmer-dark); }
.footer-legal a:hover { color: #fff; text-decoration: none; }

/* ---------- narrower screens ---------- */

@media (max-width: 1024px) {
    .wrap { padding: 0 32px; }
    /* The header row is logo + seven nav items + two buttons; tighten it before it wraps */
    .site-header .wrap { gap: 26px; }
    .main-nav, .main-nav > ul { gap: 21px; }
    .main-nav a, .main-nav > ul > li > span { font-size: 14.5px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .hero-copy h1 { font-size: 48px; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-head h2 { font-size: 36px; }
}

@media (max-width: 860px) {
    /*
        Phone and small-tablet header: logo on the left, trial button and hamburger on the
        right, and the nav hidden until the hamburger opens it. Opened, the nav is a full-width
        vertical list under the header. The three dropdown labels become plain group headings
        and their links sit indented below them.
    */
    .site-header .wrap { flex-wrap: wrap; gap: 14px; min-height: 0; padding-top: 14px; padding-bottom: 14px; }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 11px;
        background: none;
        border: 1px solid var(--line-dark);
        border-radius: 6px;
        cursor: pointer;
    }
    .nav-toggle span {
        display: block;
        height: 2px;
        background: #C3CDD6;
        border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }
    body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .main-nav {
        display: none;
        order: 3;
        width: 100%;
        padding: 6px 0 10px;
        border-top: 1px solid var(--line-dark);
    }
    body.nav-open .main-nav { display: block; }
    .main-nav > ul { display: block; }
    .main-nav > ul > li > a, .main-nav .has-children > span { display: block; padding: 13px 0; font-size: 17px; }
    .main-nav .has-children > span {
        padding: 18px 0 4px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--dim-dark);
        cursor: default;
    }
    .main-nav .has-children > span:hover { color: var(--dim-dark); }
    .main-nav .nav-login { display: block; border-top: 1px solid var(--line-dark); margin-top: 8px; padding-top: 4px; }
    .main-nav .submenu {
        position: static;
        visibility: visible;
        opacity: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        transition: none;
    }
    /* No gap to bridge once the submenu is inline */
    .main-nav .has-children::after { content: none; }
    .main-nav .submenu a { padding: 11px 0 11px 16px; font-size: 16px; }
    .main-nav .submenu a:hover { background: none; }

    .header-actions { margin-left: auto; gap: 12px; }
    /* Log in moves into the menu; the header keeps only the trial button and the hamburger */
    .header-actions a:first-child { display: none; }

    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap { padding: 0 22px; }
    .header-actions .btn { height: 40px; padding: 0 14px; font-size: 14px; }
    .logo-word { font-size: 19px; }
    .section { padding: 56px 0; }
    .section-head { margin-bottom: 32px; }
    .section-head h2 { font-size: 30px; }
    .hero { padding: 48px 0 56px; }
    .hero-slim { padding: 44px 0 48px; }
    .hero-copy h1, .page-head h1 { font-size: 34px; }
    .hero-copy p, .page-head p { font-size: 17px; }
    .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .hero-actions .btn, .hero-actions .btn-ghost, .cta-actions .btn, .cta-actions .btn-ghost { width: 100%; }
    .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .cta { padding: 56px 0; }
    .cta h2 { font-size: 28px; }
    .strip .wrap { gap: 20px; }
    .strip-names { gap: 24px; }
    .strip-names span { font-size: 17px; }
    .panel-row { grid-template-columns: 40px 74px minmax(0, 1fr); gap: 10px; padding-left: 16px; padding-right: 16px; }
    .report-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .report-row.head { display: none; }
    .panel-stats { flex-wrap: wrap; gap: 22px; }
    .prose h1 { font-size: 30px; }
    .prose h2 { font-size: 24px; }
    .footer-cols { grid-template-columns: minmax(0, 1fr); }
}