/*
 * HCN Management — Registration V2, Step 1: the HCN-service section (owner-approved V8 design, 0.72.0-dev).
 *
 * Markup: templates/portal/registration-v2-service.php. Behaviour: assets/js/registration-v2-service.js.
 * Every rule is scoped to `.hcn-v2svc` (the section) or `.hcn-v2svc-dialog` (its two dialogs), so no
 * other V2 step changes.
 *
 * SIZES. V8 was drawn on a 16px page; Registration V2 reads at 18px (17px on a phone) and its A− / A+
 * tools scale that root. Every V8 pixel size is therefore written as em (V8 px ÷ 16) against the V2
 * root, so the component keeps V8's proportions, sits at the flow's reading size and grows with A+.
 * The smallest V8 sizes (11–12px) are kept at 13.5px or more for older pilgrims.
 *
 * COLOURS. V8's own palette, as component tokens: HCN green #085438 (selected tab, prices, links),
 * ivory/sage surfaces, the gold call to action #8F6E46 (white text, 4.67:1), V8's focus brown.
 *
 * TYPE. Inter throughout, self-hosted (latin subset, SIL OFL 1.1 — assets/fonts/inter/OFL.txt). The
 * family is registered under a component-only name, so no other screen changes face. Nothing is
 * fetched from a third party.
 *
 * LAYOUT. Container queries on the picker, because the section lives inside the V2 card, not on a page
 * of its own: below 580px of picker width the two halves stack (V8's phone layout), from 580px they sit
 * side by side 60 / 40 (V8 tablet), from 780px V8's desktop spacing applies. A browser without container
 * queries gets the stacked layout, which works at every width.
 */

@font-face {
    font-family: "HCN Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.hcn-reg--v2 .hcn-v2svc,
.hcn-reg--v2 .hcn-v2svc-dialog {
    --v2svc-green: #085438;
    --v2svc-green-deep: #063e2c;
    --v2svc-ink: #182f26;
    --v2svc-text: #34443b;
    --v2svc-muted: #58675e;
    --v2svc-line: #e0e7dd;
    --v2svc-tab-line: #dfe6de;
    --v2svc-tint: #f2f8f3;
    --v2svc-gold: #8F6E46;
    --v2svc-gold-deep: #735231;
    --v2svc-focus: #85612b;
    --v2svc-font: "HCN Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-family: var(--v2svc-font);
    color: var(--v2svc-ink);
    font-feature-settings: "cv11", "ss01";
}
.hcn-reg--v2 .hcn-v2svc button,
.hcn-reg--v2 .hcn-v2svc input,
.hcn-reg--v2 .hcn-v2svc select,
.hcn-reg--v2 .hcn-v2svc textarea,
.hcn-reg--v2 .hcn-v2svc-dialog button { font-family: var(--v2svc-font) !important; }

/* ------------------------------------------------------------------ Step 1's contact fields in the wide card */

/* The service section takes the step's full 1,000px. The contact fields above it keep the owner's
   ordinary-field measure (620-680px, 0.72.1-dev) instead of stretching a single e-mail line across it.
   Not behind a media query: on a narrower card the column is narrower than 680px anyway. */
.hcn-reg--v2 .hcn-reg__form > .hcn-reg__section:has(~ .hcn-v2svc) { max-width: 680px; }

/* ------------------------------------------------------------------ heading */

.hcn-reg--v2 .hcn-v2svc { margin: 8px 0 0; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__head { margin: 0 0 1.5em; text-align: center; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__title {
    margin: 0 0 .3em;
    color: var(--v2svc-ink);
    font-family: var(--v2svc-font);
    font-size: clamp(1.75em, 3.6vw, 2.4em);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__intro {
    max-width: 600px;
    margin: 0 auto;
    color: var(--v2svc-muted);
    font-size: 1em;
}

/* ------------------------------------------------------------------ the picker */

.hcn-reg--v2 .hcn-v2svc__picker {
    container: hcn-v2svc / inline-size;
    background: #fff;
    border: 1px solid var(--v2svc-tab-line);
    border-radius: 23px;
    box-shadow: 0 18px 54px rgba(11, 53, 35, .065);
    overflow: hidden;
}
/* The thin divider between the two halves (vertical side by side, horizontal when stacked) is the 1px
   grid gap showing the panel's own line colour — no side border is drawn on either half. */
.hcn-reg--v2 .hcn-v2svc__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: var(--v2svc-line);
}
.hcn-reg--v2 .hcn-v2svc__left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

/* The tabs: a radio group drawn as three equal tabs, flush with the top edge, square inside joins. */
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--v2svc-tab-line);
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 10px 4px;
    background: #f7f9f6;
    border: 0;
    border-right: 1px solid var(--v2svc-tab-line);
    border-radius: 0;
    color: #17342a;
    font-size: .8125em;
    font-weight: 770;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:last-child { border-right: 0; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:first-child { border-top-left-radius: 22px; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:hover { background: #ecf3ed; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:has(.hcn-v2svc__radio:checked),
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab.is-selected {
    background: var(--v2svc-green);
    color: #fff;
}
/* The radio itself is invisible; the whole tab is its label and target. */
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
/* Focus: drawn INSIDE the tab, because the picker clips what is outside its rounded edge. */
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:has(.hcn-v2svc__radio:focus-visible) {
    z-index: 2;
    outline: 3px solid var(--v2svc-focus);
    outline-offset: -5px;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:has(.hcn-v2svc__radio:checked):has(.hcn-v2svc__radio:focus-visible) { outline-color: #fff; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab-label {
    /* One line at the normal text size; with the A+ tool on a narrow phone the name wraps at its space or
       hyphen instead of running into the next tab. */
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: manual;
    text-wrap: balance;
}
/* The official HCN pictograms: the light drawing on a light tab, the dark one on the green tab. On a
   narrow picker there is no room for an icon beside the full name, so the icon goes and the name stays. */
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__icon { display: none; width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }

/* The service text, the count and the comparison link. */
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__content { flex: 1; min-width: 0; padding: 20px 18px 20px; background: #fff; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__text[hidden] { display: none; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__name {
    margin: 0 0 .4em;
    color: var(--v2svc-ink);
    font-family: var(--v2svc-font);
    font-size: 1.375em;
    font-weight: 790;
    line-height: 1.23;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__desc {
    max-width: 60ch;
    margin: 0 0 1.05em;
    color: var(--v2svc-muted);
    font-size: .875em;
    line-height: 1.55;
}

.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__qty { display: grid; gap: 5px; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__qty-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__qty-label {
    margin: 0;
    color: #41564a;
    font-size: .8125em;
    font-weight: 780;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__count {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    white-space: nowrap;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__count-num {
    color: var(--v2svc-green);
    font-size: 1.375em;
    font-weight: 790;
    line-height: 1;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__count-word { font-size: .8125em; font-weight: 700; }

.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__range { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__step {
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #cddbd0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: var(--v2svc-green) !important;
    font-size: 1.2em !important;
    font-weight: 530 !important;
    line-height: 1 !important;
    text-transform: none !important;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__step[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__step:hover:not(:disabled) { background: var(--v2svc-tint) !important; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__step:disabled { opacity: .45; cursor: not-allowed; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__step:focus-visible {
    outline: 3px solid var(--v2svc-focus) !important;
    outline-offset: 3px;
}

/* The slider: a 6px track with V8's green fill and a 24px ring thumb, in a 32px-tall hit area. */
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__slider {
    --hcn-v2svc-pct: 14.286%;
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(to right, var(--v2svc-green) 0 var(--hcn-v2svc-pct), #e4e8e4 var(--hcn-v2svc-pct) 100%);
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border: 5px solid var(--v2svc-green);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 9px rgba(21, 56, 38, .16);
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__slider::-moz-range-track { height: 6px; border-radius: 99px; background: #e4e8e4; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__slider::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--v2svc-green); }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 5px solid var(--v2svc-green);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 9px rgba(21, 56, 38, .16);
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__slider:focus-visible { outline: 3px solid var(--v2svc-focus); outline-offset: 4px; border-radius: 8px; }

.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 12px;
    margin-top: 8px;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__micro { margin: 0; color: var(--v2svc-muted); font-size: .8125em; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__compare {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    margin: 0 0 0 auto !important;
    padding: 4px 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--v2svc-green) !important;
    font-size: .8125em !important;
    font-weight: 790 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__compare[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__compare:hover { color: var(--v2svc-green-deep) !important; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__compare svg { width: 16px; height: 16px; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__compare:focus-visible { outline: 3px solid var(--v2svc-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ the price */

.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__pricing {
    position: relative;
    min-width: 0;
    min-height: 190px;
    padding: 20px 18px 23px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #f2f6f1 0%, #f8f8f4 58%, #faf8f3 100%);
}
/* The Hajj illustration: decorative, behind the text, never in the way of a tap. */
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__art {
    position: absolute;
    right: 0;
    bottom: -25px;
    z-index: 0;
    width: min(58%, 260px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: .40;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 43%, #000 90%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 43%, #000 90%);
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__art[hidden] { display: none; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__price-box { position: relative; z-index: 2; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__price-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__price-label { font-size: .875em; font-weight: 740; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__badge {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #d5e4d7;
    border-radius: 99px;
    color: var(--v2svc-green);
    font-size: .75em;
    font-weight: 750;
    white-space: nowrap;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__price {
    margin: .15em 0 0;
    color: var(--v2svc-green);
    font-family: var(--v2svc-font);
    font-size: 2.9375em;
    font-weight: 750;
    line-height: 1.13;
    letter-spacing: -.065em;
    font-variant-numeric: tabular-nums;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__foot { margin: 3px 0 0; font-size: .875em; font-weight: 780; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tier { max-width: 30ch; margin: 7px 0 0; color: var(--v2svc-text); font-size: .8125em; line-height: 1.5; }

/* ------------------------------------------------------------------ service C's questions */

.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__extra,
.hcn-reg--v2 .hcn-reg__form .hcn-v2svc .hcn-v2svc__extra {
    /* The block keeps its .hcn-reg__subsection class (Step 1's own markup), whose form rhythm adds a
       margin and padding on top; inside the picker the divider sits directly under the panel. */
    margin: 0;
    padding: 20px 18px 4px;
    border-top: 1px solid var(--v2svc-line);
    background: #fff;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__extra[hidden] { display: none !important; }
.hcn-reg--v2 .hcn-reg__form .hcn-v2svc .hcn-v2svc__extra > .hcn-field { margin: 0 0 20px; }

/* ------------------------------------------------------------------ the gold call to action */

.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__action {
    padding: 16px 18px 20px;
    border-top: 1px solid var(--v2svc-line);
    background: #fff;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__action--alone { padding: 16px 0 0; border: 0; background: none; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    background: var(--v2svc-gold) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 1em !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__cta:hover { background: var(--v2svc-gold-deep) !important; }
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__cta:focus-visible {
    outline: 3px solid #684522 !important;
    outline-offset: 4px;
}
.hcn-reg--v2 .hcn-v2svc .hcn-v2svc__arrow,
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc__arrow { width: 19px; height: 19px; flex: 0 0 19px; }

/* ------------------------------------------------------------------ V8 tablet: side by side */

@container hcn-v2svc (min-width: 580px) {
    .hcn-reg--v2 .hcn-v2svc__panel { grid-template-columns: minmax(0, 60%) minmax(0, 40%); }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab { min-height: 60px; padding: 9px 4px; gap: 5px; font-size: .8125em; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__icon { display: block; width: 19px; height: 19px; flex-basis: 19px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:has(.hcn-v2svc__radio:checked) .hcn-v2svc__icon--light,
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab.is-selected .hcn-v2svc__icon--light,
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:not(.is-selected):not(:has(.hcn-v2svc__radio:checked)) .hcn-v2svc__icon--dark { display: none; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__content { padding: 23px 21px 20px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__name { font-size: 1.4375em; }
    /* The price lines up with the service heading: tab height plus the content's top padding. */
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__pricing { min-height: 0; padding: calc(60px + 23px + 6px) 21px 20px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__price { font-size: 3.1em; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__art { right: -6px; bottom: -16px; width: min(85%, 400px); opacity: .45; }
    .hcn-reg--v2 .hcn-reg__form .hcn-v2svc .hcn-v2svc__extra { padding: 20px 21px 4px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__action { padding: 16px 21px 20px; }
}

/* ------------------------------------------------------------------ V8 desktop */

@container hcn-v2svc (min-width: 780px) {
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab { min-height: 63px; padding: 11px 9px; gap: 7px; font-size: .875em; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__icon { width: 22px; height: 22px; flex-basis: 22px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__content { padding: 28px 30px 24px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__name { font-size: 1.5625em; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__pricing { padding: calc(63px + 28px + 6px) 30px 28px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__price { font-size: 3.8125em; }
    .hcn-reg--v2 .hcn-reg__form .hcn-v2svc .hcn-v2svc__extra { padding: 22px 30px 6px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__action { padding: 18px 30px 22px; }
}

/* A very narrow phone: the names stay whole, the gutters close up a little. */
@container hcn-v2svc (max-width: 340px) {
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab { padding: 8px 2px; font-size: .78em; letter-spacing: -.01em; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__content { padding: 17px 15px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__pricing { padding: 18px 16px 22px; min-height: 182px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__art { width: 59%; opacity: .34; }
    .hcn-reg--v2 .hcn-reg__form .hcn-v2svc .hcn-v2svc__extra { padding: 18px 15px 2px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__action { padding: 14px 15px 17px; }
}

/* ================================================================== the two dialogs */

.hcn-reg--v2 .hcn-v2svc-dialog {
    width: calc(100% - 28px);
    max-width: 990px;
    max-height: min(90dvh, 850px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 19px;
    box-shadow: 0 28px 90px rgba(0, 39, 25, .30);
    color: var(--v2svc-ink);
    font-size: 1em;
    line-height: 1.5;
}
.hcn-reg--v2 .hcn-v2svc-dialog--review { max-width: 560px; }
.hcn-reg--v2 .hcn-v2svc-dialog::backdrop { background: rgba(20, 34, 27, .7); }
.hcn-reg--v2 .hcn-v2svc-dialog__inner { display: flex; flex-direction: column; max-height: min(90dvh, 850px); }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid #dfe5dc;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__title {
    margin: 0;
    color: var(--v2svc-ink);
    font-family: var(--v2svc-font);
    font-size: 1.4375em;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -.025em;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__sub { margin: 4px 0 0; color: var(--v2svc-muted); font-size: .875em; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__close {
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fafbf9 !important;
    border: 1px solid #dfe4dc !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--v2svc-ink) !important;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__close svg { width: 21px; height: 21px; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__body { padding: 18px 24px 20px; overflow: auto; overscroll-behavior: contain; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 24px;
    background: #fff;
    border-top: 1px solid #dfe5dc;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__note { margin: 0; color: var(--v2svc-muted); font-size: .8125em; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__primary,
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: .9375em !important;
    font-weight: 770 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__primary {
    background: var(--v2svc-green) !important;
    border: 1px solid var(--v2svc-green) !important;
    color: #fff !important;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__primary:hover { background: var(--v2svc-green-deep) !important; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__primary:disabled { opacity: .7; cursor: progress; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__secondary {
    background: #fff !important;
    border: 1px solid #a9b9aa !important;
    color: var(--v2svc-green) !important;
}
.hcn-reg--v2 .hcn-v2svc-dialog button:focus-visible,
.hcn-reg--v2 .hcn-v2svc-dialog [tabindex]:focus-visible {
    outline: 3px solid var(--v2svc-focus) !important;
    outline-offset: 3px;
}

/* The comparison table (desktop and tablet). */
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__guide { margin: 0 0 10px; color: var(--v2svc-muted); font-size: .75em; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__table {
    max-width: 100%;
    overflow: auto;
    border: 1px solid #e3e8e2;
    border-radius: 13px;
    scrollbar-color: #99aa9d transparent;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8125em;
    line-height: 1.46;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp th,
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp td {
    min-width: 185px;
    width: 24%;
    padding: 13px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e9ede7;
    border-right: 1px solid #edf0e9;
    color: var(--v2svc-ink);
    text-align: left;
    vertical-align: top;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp th:last-child,
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp td:last-child { border-right: 0; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp tr:last-child th,
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp tr:last-child td { border-bottom: 0; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f3f7f2;
    font-weight: 790;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 194px;
    max-width: 210px;
    width: 27%;
    font-weight: 730;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp thead th:first-child { z-index: 4; background: #f3f7f2; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp td.is-selected { background: #f1f8f2; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp thead th.is-selected { background: #dfefe2; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__price { display: block; margin-top: 3px; color: var(--v2svc-green); font-size: .9231em; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__table:focus-visible { outline: 3px solid var(--v2svc-focus); outline-offset: 3px; }

.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__policy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 17px;
    background: #f4f8f4;
    border: 1px solid #dae9dd;
    border-radius: 12px;
    color: #42584a;
    font-size: .8125em;
    line-height: 1.65;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__policy svg { flex: 0 0 23px; width: 23px; height: 23px; margin-top: 2px; color: var(--v2svc-green); }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__policy p { margin: 0; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__policy strong { color: var(--v2svc-green); font-weight: 800; }

/* The phone comparison: one service at a time. Hidden above a phone. */
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp { display: none; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__bar { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 7px; align-items: center; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__label { margin: 0; text-align: center; font-size: 1em; font-weight: 820; line-height: 1.45; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__label small { display: block; color: var(--v2svc-green); font-size: .8125em; font-weight: 780; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__nav {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #c5d7c7 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: var(--v2svc-green) !important;
    font-size: 1.75em !important;
    line-height: 1 !important;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__nav:disabled { color: #8b958c !important; cursor: not-allowed; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__hint { margin: 8px 0 12px; color: var(--v2svc-muted); font-size: .8125em; text-align: center; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__stage {
    max-width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    background: #fff;
    border: 1px solid #dee8dc;
    border-radius: 12px;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__slide { margin: 0; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__slide[hidden] { display: none; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__slide.is-next { animation: hcn-v2svc-next .2s ease; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__slide.is-prev { animation: hcn-v2svc-prev .2s ease; }
@keyframes hcn-v2svc-next { from { transform: translateX(13px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes hcn-v2svc-prev { from { transform: translateX(-13px); opacity: .4; } to { transform: none; opacity: 1; } }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__feature {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border-bottom: 1px solid #e8eee7;
    overflow-wrap: anywhere;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__feature:last-child { border-bottom: 0; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__feature:nth-child(even) { background: #f8fbf8; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__feature dt { margin: 0; color: #284b36; font-size: .8125em; font-weight: 780; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__feature dd { margin: 0; color: var(--v2svc-text); font-size: .875em; line-height: 1.48; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__dots { display: flex; justify-content: center; padding: 6px 0 0; }
/* Each dot is a 44 × 32 target with a 10px mark (12px for the service on view). */
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__dot {
    position: relative;
    width: 44px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c9d4c8;
    transform: translate(-50%, -50%);
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__dot[aria-current="true"]::before { width: 12px; height: 12px; background: var(--v2svc-green); }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__stage:focus-visible { outline: 3px solid var(--v2svc-focus); outline-offset: 3px; }

/* The review dialog. */
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-review { margin: 0; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-review__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid #dfe5dc;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-review__row dt { margin: 0; color: var(--v2svc-muted); font-size: .875em; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-review__row dd { margin: 0; font-size: 1em; font-weight: 750; text-align: right; }
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-review__cost {
    color: var(--v2svc-green);
    font-size: 1.6875em !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}
.hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-review__hint { margin: 14px 0 0; color: var(--v2svc-muted); font-size: .8125em; }

@media (max-width: 650px) {
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__head { padding: 17px 16px 14px; }
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__title { font-size: 1.25em; }
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__body { padding: 13px 12px 16px; }
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__foot { padding: 13px 15px; }
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__policy { padding: 12px; }
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-dialog__foot { flex-wrap: wrap; }
    .hcn-reg--v2 .hcn-v2svc-dialog--review .hcn-v2svc-dialog__foot > * { flex: 1 1 auto; }
    .hcn-reg--v2 .hcn-v2svc-dialog--compare .hcn-v2svc-dialog__primary { flex: 1 1 auto; }
}
/* The swipe hint only applies while the table is wider than the dialog (its min-width is 760px). */
@media (min-width: 900px) {
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__guide { display: none; }
}
@media (max-width: 620px) {
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__table,
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-cmp__guide { display: none; }
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp { display: block; }
}

/* ------------------------------------------------------------------ preferences */

.hcn-reg--v2.is-contrast .hcn-v2svc,
.hcn-reg--v2.is-contrast .hcn-v2svc-dialog { --v2svc-muted: #1C1C1D; --v2svc-line: #6b7078; --v2svc-tab-line: #6b7078; }
@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab,
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__cta { transition: none !important; }
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__slide.is-next,
    .hcn-reg--v2 .hcn-v2svc-dialog .hcn-v2svc-mcmp__slide.is-prev { animation: none; }
}
@media (forced-colors: active) {
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab:has(.hcn-v2svc__radio:checked),
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__tab.is-selected { outline: 3px solid Highlight; outline-offset: -4px; }
    .hcn-reg--v2 .hcn-v2svc .hcn-v2svc__cta { border: 2px solid ButtonText !important; }
}