/* ==========================================================================
   Corenexis Helpdesk - public landing page
   Loaded only on the public pages so the panel bundle stays small.
   Depends on the tokens defined in app.css.
   ========================================================================== */

body.public { background: var(--bg); }

.shell { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* --- Header -------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.site-header-inner { display: flex; align-items: center; gap: 20px; height: 62px; }

.site-brand {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    font-size: 16px; font-weight: 600; color: var(--text);
    letter-spacing: -.01em; white-space: nowrap;
}
/* Last line of defence on a very narrow phone: the name gives way before the
   "Raise a ticket" button is allowed to slide off the right edge. */
.site-brand > span:not(.brand-mark-swap) { overflow: hidden; text-overflow: ellipsis; }
.site-brand:hover { text-decoration: none; }
.site-brand .brand-mark-swap { width: 30px; height: 30px; border-radius: 8px; }
.dim-brand { color: var(--text-3); font-weight: 500; }

.site-nav { display: none; gap: 24px; flex: 1; }
/* Holds the switcher and CTA against the right edge on a phone, where the
   nav above is display:none and its flex:1 no longer spaces them out. */
.site-header-actions { margin-left: auto; }
.site-nav a { font-size: 14px; font-weight: 500; color: var(--text-2); }
.site-nav a:hover { color: var(--primary); text-decoration: none; }

/* --- Theme control ------------------------------------------------------- */
/* One flip on a phone, the full three-way segment from 560px up. The icon is
   the theme you are switching TO, so it reads as a button, not a status. */
.theme-flip {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 34px; height: 32px;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface-2); color: var(--text-2); cursor: pointer;
    transition: color .13s var(--ease), border-color .13s var(--ease);
}
.theme-flip:hover { color: var(--primary); border-color: var(--border-strong); }
.theme-flip span { line-height: 0; }
.theme-flip .on-dark { display: none; }
:root[data-theme='dark'] .theme-flip .on-light { display: none; }
:root[data-theme='dark'] .theme-flip .on-dark { display: inline-flex; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-flip .on-light { display: none; }
    :root:not([data-theme='light']) .theme-flip .on-dark { display: inline-flex; }
}

.site-header .theme-seg { display: none; }
@media (min-width: 560px) {
    .site-header .theme-seg { display: inline-flex; }
    .theme-flip { display: none; }
}

/* Below that the header is down to brand + flip + CTA, so every pixel of the
   gutter and the gaps counts. */
@media (max-width: 559px) {
    .site-header .shell { padding-inline: 16px; }
    .site-header-inner { gap: 12px; }
}
/* Narrower still and even that is not enough. Dropping the greyed-out second
   word is tidier than letting it ellipsise to "Corenexis Sup..." - the mark
   and the name still say whose helpdesk this is. */
@media (max-width: 400px) {
    .site-header .dim-brand { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    padding: 74px 0 66px;
    background:
        radial-gradient(760px 420px at 50% -18%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 68%),
        var(--bg);
    text-align: center;
}
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(circle at 50% 30%, #000 20%, transparent 72%);
}
.hero .shell { position: relative; z-index: 1; }

.pill {
    display: inline-flex; align-items: center; gap: 7px;
    height: 28px; padding: 0 13px; margin-bottom: 20px;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
    border-radius: 20px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}

.hero h1 {
    font-size: clamp(30px, 5.4vw, 46px); font-weight: 600;
    letter-spacing: -.03em; line-height: 1.12; margin-bottom: 16px;
}
.hero-lead {
    max-width: 56ch; margin: 0 auto 28px;
    font-size: clamp(15px, 2vw, 17.5px); line-height: 1.65; color: var(--text-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.hero-meta {
    display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
    font-size: 13px; color: var(--text-3);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta svg { color: var(--primary); }

/* --- Sections ------------------------------------------------------------ */
.section { padding: 62px 0; }
.section.alt { background: var(--surface-2); border-block: 1px solid var(--border); }

.section-head { text-align: center; max-width: 60ch; margin: 0 auto 34px; }
.section-head h2 { font-size: clamp(22px, 3.4vw, 28px); letter-spacing: -.02em; margin-bottom: 8px; }
.section-head p { font-size: 15px; color: var(--text-2); }

/* --- Contact cards ------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
/* Two classes, so it outranks the two-column rule in the media query below. */
.contact-grid.single { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }

.contact-card {
    padding: 26px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.contact-card.primary { border-color: color-mix(in srgb, var(--primary) 34%, transparent); }

.cc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: 14px;
    border-radius: 11px; background: var(--primary-soft); color: var(--primary);
}
.contact-card h3 { font-size: 17px; margin-bottom: 6px; }
.contact-card p { font-size: 14px; color: var(--text-2); margin-bottom: 14px; }

.cc-mail {
    display: inline-block; margin-bottom: 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14.5px; font-weight: 600; color: var(--primary);
    word-break: break-all;
}
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.note-line {
    display: flex; align-items: flex-start; gap: 10px;
    max-width: 720px; margin: 26px auto 0; padding: 13px 16px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
    background: var(--surface); font-size: 13.5px; line-height: 1.6; color: var(--text-2);
}
.note-line svg { flex: none; margin-top: 2px; color: var(--text-3); }

/* --- Steps --------------------------------------------------------------- */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.step-card {
    position: relative; padding: 24px 22px 22px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px;
}
.sc-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-bottom: 13px;
    border-radius: 50%; background: var(--secondary); color: #fff;
    font-size: 14px; font-weight: 600;
}
:root[data-theme="dark"] .sc-n { background: var(--primary); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sc-n { background: var(--primary); }
}
.step-card h3 { font-size: 16px; margin-bottom: 6px; }
.step-card p { font-size: 14px; color: var(--text-2); }

/* --- Coverage ------------------------------------------------------------ */
.coverage-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.coverage-card {
    padding: 20px; border-radius: 13px;
    background: var(--surface); border: 1px solid var(--border);
    transition: border-color .16s var(--ease);
}
.coverage-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.cv-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-bottom: 11px;
    border-radius: 9px; background: var(--surface-2); color: var(--primary);
}
.coverage-card h3 { font-size: 15px; margin-bottom: 5px; }
.coverage-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

.product-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }

/* --- Closing band -------------------------------------------------------- */
.cta-band {
    padding: 48px 0;
    background:
        radial-gradient(520px 300px at 88% 10%, rgba(254, 89, 64, .28), transparent 66%),
        var(--secondary);
    color: #fff;
}
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cta-inner h2 { font-size: 25px; letter-spacing: -.02em; margin-bottom: 5px; }
.cta-inner p { font-size: 15px; color: rgba(255, 255, 255, .72); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { padding: 26px 0; background: var(--surface); border-top: 1px solid var(--border); }
.site-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--primary); }

@media (min-width: 720px) {
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(3, 1fr); }
    .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .site-nav { display: flex; }
    .coverage-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Public support form (/support)
   ========================================================================== */

.support-hero {
    position: relative; overflow: hidden;
    padding: 52px 0 40px;
    background:
        radial-gradient(680px 340px at 50% -22%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 66%),
        var(--bg);
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.support-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    height: 27px; padding: 0 12px; margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 20px; background: var(--primary-soft); color: var(--primary);
    font-size: 12px; font-weight: 600; letter-spacing: .03em;
}
.support-hero h1 {
    font-size: clamp(28px, 5vw, 40px); font-weight: 600;
    letter-spacing: -.025em; margin-bottom: 10px;
}
.support-hero .lead {
    font-size: 16px; color: var(--text-2); max-width: 52ch; margin: 0 auto; line-height: 1.6;
}

.support-body {
    display: grid; grid-template-columns: 1fr; gap: 22px;
    padding-top: 32px; padding-bottom: 64px; align-items: start;
}

.support-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; box-shadow: var(--shadow-sm);
    padding: 26px;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-step + .form-step { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--border); }
.step-head { display: flex; gap: 12px; margin-bottom: 16px; }
.step-n {
    width: 26px; height: 26px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--primary); color: #fff;
    font-size: 13px; font-weight: 600;
}
.step-head h2 { font-size: 16.5px; font-weight: 600; margin-bottom: 3px; letter-spacing: -.01em; }
.step-head p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.55; }

/* Category cards */
/* grid-auto-rows: 1fr sizes every row to the tallest card, so all four options
   match regardless of how many lines their hint wraps to. The label then has to
   stretch (flex) and the card fill it, or the box stays its natural height
   inside a taller cell and the alignment gain is lost. */
.choice-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 10px; }
.choice { position: relative; display: flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-body {
    flex: 1; padding: 14px 16px 14px 40px; position: relative;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
}
.choice-body::before {
    content: ''; position: absolute; left: 15px; top: 17px;
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--border-strong);
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.choice:hover .choice-body { border-color: var(--text-3); background: var(--surface-2); }
.choice input:checked + .choice-body {
    border-color: var(--primary); background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.choice input:checked + .choice-body::before {
    border-color: var(--primary); box-shadow: inset 0 0 0 3.5px var(--primary);
}
.choice input:focus-visible + .choice-body { outline: 2px solid var(--primary); outline-offset: 2px; }
.choice-dot { display: none; }
.choice-title { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.choice-hint { display: block; font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* Product chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: 20px;
    background: var(--surface); color: var(--text-2);
    font-size: 13.5px; font-weight: 500;
    transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.chip:hover span { border-color: var(--text-3); color: var(--text); }
.chip input:checked + span {
    border-color: var(--primary); background: var(--primary); color: #fff;
}
.chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 14px; }

.support-actions {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.support-actions .hint { margin: 0; max-width: 46ch; }

/* Success panel */
.support-done { text-align: center; }
.done-mark {
    width: 62px; height: 62px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}
.support-done h2 { font-size: 23px; margin-bottom: 8px; letter-spacing: -.02em; }
.support-done .lead { font-size: 15px; color: var(--text-2); max-width: 46ch; margin: 0 auto 22px; line-height: 1.6; }

.ref-box {
    display: inline-flex; flex-direction: column; gap: 4px;
    padding: 14px 26px; margin-bottom: 22px;
    border: 1px dashed color-mix(in srgb, var(--primary) 42%, transparent);
    border-radius: var(--radius); background: var(--primary-soft);
}
.ref-box .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.ref-box .v { font-size: 20px; font-weight: 600; color: var(--primary); letter-spacing: .02em; }

.done-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; text-align: left; max-width: 420px; margin-inline: auto; }
.done-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.done-list svg { flex: none; margin-top: 2px; color: var(--primary); }

/* Aside */
.support-aside { display: grid; gap: 14px; }
.aside-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px;
}
.aside-card h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; margin-bottom: 9px;
}
.aside-card h3 svg { color: var(--primary); }
.aside-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 10px; }
.aside-card.muted-card { background: var(--surface-2); }

.mail-link {
    display: block; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px; font-weight: 500; word-break: break-all;
}

.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tips li {
    position: relative; padding-left: 16px;
    font-size: 13.5px; color: var(--text-2); line-height: 1.55;
}
.tips li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

@media (min-width: 620px) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .choice-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .support-actions { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 940px) {
    .support-body { grid-template-columns: minmax(0, 1fr) 300px; }
    .support-card { padding: 30px; }
    .support-done { grid-column: 1; }
}

/* Warning variants for the two public pages. Amber rather than the brand red:
   this is guidance for someone who picked the wrong address, not an error they
   have already hit.

   The tint is mixed into --surface rather than being a fixed cream. It used to
   fall back to #fffbeb, because --warning-soft was never defined anywhere - so
   in dark mode the card painted a light cream panel and kept the dark theme's
   pale body text on top of it, which is close to unreadable. Mixing against the
   surface keeps the amber in both themes and the text legible in both. */
.aside-card.warn-card {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
/* Only the icon carries the amber. Colouring the heading text with it too
   drops to 2.9:1 against this background in light mode - the tint that makes a
   good 10% wash makes poor text. The icon says "warning" on its own. */
.aside-card.warn-card h3 { color: var(--text); }
.aside-card.warn-card h3 svg { color: var(--warning); }
.aside-card.warn-card p { color: var(--text-2); }

/* --- Working hours ------------------------------------------------------- */
/* Deliberately quieter than .notice-band below it: this is information, not a
   warning, and two amber bands in a row would flatten the one that matters. */
.hours-band {
    display: flex; gap: 14px; align-items: flex-start;
    margin-top: 26px; padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.hours-band .hb-icon { flex: none; color: var(--primary); line-height: 0; padding-top: 2px; }
.hours-band > div > strong { display: block; font-size: 15px; margin-bottom: 8px; }
.hours-band p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin: 0; }

.hb-times {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin-bottom: 10px !important;
}
.hb-times span {
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 13px; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.hb-times span:first-child {
    border-color: color-mix(in srgb, var(--primary) 34%, transparent);
    background: var(--primary-soft); color: var(--primary);
}

@media (max-width: 620px) {
    .hours-band { flex-direction: column; gap: 10px; }
}

.notice-band {
    display: flex; gap: 14px; align-items: flex-start;
    margin-top: 26px; padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.notice-band .nb-icon { flex: none; color: var(--warning, #b45309); line-height: 0; padding-top: 2px; }
.notice-band > div > strong { display: block; font-size: 15px; margin-bottom: 4px; }
.notice-band p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin: 0; }

@media (max-width: 620px) {
    .notice-band { flex-direction: column; gap: 8px; }
}