/* =============================================================================
   Marketing in the commerce kit's language.

   marketing.css owns the structure of every public marketing page. This sheet, loaded right after it,
   moves the look onto the same system as the marketplace: Inter at one set of weights, 8px corners,
   hairline cards, monospace money, one blue action. It follows marketing.css's own rules: no shadows,
   no literal colours (tokens only), every class prefixed ifinsta-mk-.
   Designed on the "one kit, every screen" canvas, boards 66-76.
   ============================================================================= */

/* ---- Type: Inter, bold not black, tighter ranges ---------------------------------------------- */
.ifinsta-mk { font-size: 16px; letter-spacing: 0; }
.ifinsta-mk-display, .ifinsta-mk-h2, .ifinsta-mk-h3 { font-weight: 700; }
.ifinsta-mk-display { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.03em; }
.ifinsta-mk-h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.ifinsta-mk-h3 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; letter-spacing: -0.01em; }
.ifinsta-mk-lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; letter-spacing: 0; }
.ifinsta-mk-bluehero .ifinsta-mk-display { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; }
.ifinsta-mk-bluehero--page .ifinsta-mk-display { font-size: clamp(32px, 3.8vw, 44px); }
.ifinsta-mk-bluehero .ifinsta-mk-lede { font-size: clamp(16px, 1.3vw, 18px); }
.ifinsta-mk-title { letter-spacing: 0; }

/* ---- Rhythm: tighter sections, same gutters as the marketplace --------------------------------- */
.ifinsta-mk-wrap { max-width: 1240px; padding-inline: clamp(16px, 2vw, 20px); }
.ifinsta-mk-section { padding-block: clamp(40px, 5.5vw, 72px); }
.ifinsta-mk-section--tight { padding-block: clamp(32px, 4.5vw, 56px); }
.ifinsta-mk-head { margin-bottom: clamp(24px, 3.5vw, 40px); gap: 10px; }

/* ---- Buttons: 8px, 44/48/36 ---------------------------------------------------------------------- */
.ifinsta-mk-btn { min-height: 44px; border-radius: var(--ifinsta-mk-radius-md); letter-spacing: 0; font-size: 14px; }
.ifinsta-mk-btn--lg { min-height: 48px; padding: 0 24px; font-size: 15px; }
.ifinsta-mk-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.ifinsta-mk-btn:active { transform: none; }
.ifinsta-mk-iconbtn { border-radius: var(--ifinsta-mk-radius-md); }
.ifinsta-mk-header__item { border-radius: var(--ifinsta-mk-radius-md); }

/* ---- Heroes: a quiet tint, product UI as proof, no globe -------------------------------------- */
.ifinsta-mk-bluehero { background: linear-gradient(180deg, var(--ifinsta-mk-accent-soft) 0%, var(--ifinsta-mk-bg) 100%); background-image: linear-gradient(180deg, var(--ifinsta-mk-accent-soft) 0%, var(--ifinsta-mk-bg) 100%); border-bottom: 1px solid var(--ifinsta-mk-line); }
.ifinsta-mk-globe { opacity: 0.4; }
.ifinsta-mk-window__lights { display: none; }
.ifinsta-mk-window { border-radius: var(--ifinsta-mk-radius-lg); }
.ifinsta-mk-window__bar { padding-inline: 16px; }

/* ---- Cards: flat, hairline, 8px ------------------------------------------------------------------ */
.ifinsta-mk-tile-card, .ifinsta-mk-appcard, .ifinsta-mk-plan, .ifinsta-mk-plancard, .ifinsta-mk-channel, .ifinsta-mk-panel, .ifinsta-mk-release { border-radius: var(--ifinsta-mk-radius-lg); }
.ifinsta-mk-plan { padding: 24px; gap: 14px; }
.ifinsta-mk-plan__name { font-size: 18px; letter-spacing: 0; }
.ifinsta-mk-plan__amount { font-family: var(--ifinsta-mk-font-mono); font-weight: 600; font-size: 36px; letter-spacing: -0.02em; }
.ifinsta-mk-plan__currency { font-family: var(--ifinsta-mk-font-mono); font-size: 13px; }
.ifinsta-mk-plan[data-tone="ink"] { border-width: 2px; }
.ifinsta-mk-tile-card--navy, .ifinsta-mk-tile-card--blue { border-radius: var(--ifinsta-mk-radius-lg); }

/* ---- Statements and the closing band: the one dark moment ----------------------------------------- */
.ifinsta-mk-statement { border-radius: var(--ifinsta-mk-radius-lg); }

@media (max-width: 760px) {
    .ifinsta-mk-section { padding-block: 36px; }
    .ifinsta-mk-display, .ifinsta-mk-bluehero .ifinsta-mk-display { font-size: 32px; }
    .ifinsta-mk-btn--lg { min-height: 48px; }
}

/* ---- The highlighted plan: an outline, not a fill ---------------------------------------------------- */
.ifinsta-mk-plan[data-tone="ink"] {
    --ifinsta-mk-bg: var(--ifinsta-mk-paper-0);
    --ifinsta-mk-surface: var(--ifinsta-mk-paper-2);
    --ifinsta-mk-surface-2: var(--ifinsta-mk-paper-1);
    --ifinsta-mk-text: var(--ifinsta-mk-paper-text);
    --ifinsta-mk-text-2: var(--ifinsta-mk-paper-text-2);
    --ifinsta-mk-text-3: var(--ifinsta-mk-paper-text-3);
    --ifinsta-mk-line: var(--ifinsta-mk-paper-line);
    --ifinsta-mk-line-strong: var(--ifinsta-mk-paper-line-strong);
    --ifinsta-mk-accent: var(--ifinsta-mk-paper-accent);
    --ifinsta-mk-accent-text: var(--ifinsta-mk-paper-accent);
    --ifinsta-mk-accent-hover: var(--ifinsta-mk-paper-accent-hover);
    --ifinsta-mk-accent-soft: var(--ifinsta-mk-paper-accent-soft);
    --ifinsta-mk-on-accent: var(--ifinsta-mk-on-brand);
    background: var(--ifinsta-mk-paper-2);
    border: 2px solid var(--ifinsta-mk-accent);
    color: var(--ifinsta-mk-paper-text);
}
.ifinsta-mk-plan[data-tone="ink"] .ifinsta-mk-plan__flag { background: var(--ifinsta-mk-paper-accent-soft); border-color: transparent; color: var(--ifinsta-mk-paper-accent); font-weight: 600; }

/* ---- Feature tiles: light cards; the one dark moment is the closing band ------------------------------- */
.ifinsta-mk-tile-card, .ifinsta-mk-tile-card--navy, .ifinsta-mk-tile-card--blue, .ifinsta-mk-tile-card--tint {
    min-height: 0;
    border: 1px solid var(--ifinsta-mk-line);
    border-radius: var(--ifinsta-mk-radius-lg);
    background: var(--ifinsta-mk-surface);
    color: var(--ifinsta-mk-text);
    padding: clamp(20px, 2.2vw, 28px);
}
.ifinsta-mk-tile-card--tint { background: var(--ifinsta-mk-accent-soft); }
.ifinsta-mk-tile-card--navy .ifinsta-mk-h3, .ifinsta-mk-tile-card--blue .ifinsta-mk-h3 { color: var(--ifinsta-mk-text); }
.ifinsta-mk-tile-card--navy .ifinsta-mk-tile-card__copy p, .ifinsta-mk-tile-card--blue .ifinsta-mk-tile-card__copy p { color: var(--ifinsta-mk-text-2); }
.ifinsta-mk-tile-card--blue .ifinsta-mk-btn { background: var(--ifinsta-mk-accent); border-color: var(--ifinsta-mk-accent); color: var(--ifinsta-mk-on-accent); }

/* ---- Dark sections are a full-width band, not a rounded panel ------------------------------------------ */
.ifinsta-mk-section[data-tone="ink"] { margin: 0; border-radius: 0; }

/* ---- Small screens: no cards, no boxes ---------------------------------------------------------------------
   One page edge to edge. Lists of things are rows with a hairline between them. Plan cards keep their
   border because comparing plans needs the edges; product mock-ups keep theirs because they are the proof. */
@media (max-width: 760px) {
    .ifinsta-mk-tile-card, .ifinsta-mk-tile-card--navy, .ifinsta-mk-tile-card--blue, .ifinsta-mk-tile-card--tint,
    .ifinsta-mk-appcard, .ifinsta-mk-channel, .ifinsta-mk-panel, .ifinsta-mk-release {
        border: 0;
        border-top: 1px solid var(--ifinsta-mk-line);
        border-radius: 0;
        background: transparent;
        padding-inline: 0;
        padding-block: 20px;
    }
    .ifinsta-mk-tile-card--tint { background: transparent; }
    .ifinsta-mk-section { padding-block: 32px; }
    .ifinsta-mk-wrap { padding-inline: 16px; }
    .ifinsta-mk-bluehero { border-bottom: 1px solid var(--ifinsta-mk-line); }
    .ifinsta-mk-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .ifinsta-mk-actions .ifinsta-mk-btn { width: 100%; }
}
@media (max-width: 760px) {
    .ifinsta-mk-window--finder { border: 0; border-radius: 0; background: transparent; }
    .ifinsta-mk-window--finder .ifinsta-mk-window__bar { display: none; }
}