/* Checkout + thank-you pages (LeadWell palette) */
:root {
  --navy: #0D1B33; --navy-2: #12233F; --blue: #1E4E9C; --blue-dk: #163C7A;
  --gold: #E0B65A; --gold-lt: #F8EBCB; --mist: #F3F6FB; --line: #DCE4EF;
  --ink: #12233F; --ink-2: #5A6577; --ok: #1F7A4D;
  --head: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3 { font-family: var(--head); letter-spacing: -0.02em; line-height: 1.12; margin: 0; color: var(--ink); }
.co-wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

/* Header */
.co-head { border-bottom: 1px solid var(--line); background: #fff; }
.co-head .co-wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.co-head img { height: 56px; width: auto; }
.co-secure { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.co-secure::before { content: ""; width: 10px; height: 12px; border: 2px solid var(--ok); border-radius: 3px; box-shadow: inset 0 -5px 0 rgba(31,122,77,.18); }

/* Steps */
.co-steps { display: flex; gap: 10px; align-items: center; margin: 28px 0 22px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.co-steps span { display: inline-flex; align-items: center; gap: 8px; }
.co-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mist); border: 1px solid var(--line); font-size: 0.75rem; }
.co-steps .is-on { color: var(--ink); }
.co-steps .is-on b { background: var(--blue); border-color: var(--blue); color: #fff; }
.co-steps .is-done b { background: var(--ok); border-color: var(--ok); color: #fff; }
.co-steps i { width: 28px; height: 1px; background: var(--line); }

/* Layout */
.co-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: start; padding-bottom: 64px; }
.co-card { border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: clamp(20px, 3vw, 32px); }
.co-card h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 6px; }
.co-sub { margin: 0 0 22px; color: var(--ink-2); }

/* Form */
.co-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.co-f--full { grid-column: 1 / -1; }
.co-f label { font-size: 0.875rem; font-weight: 600; }
.co-f label span { font-weight: 400; color: var(--ink-2); }
.co-f input { width: 100%; padding: 12px 14px; border: 1px solid #C9D4E4; border-radius: 10px; font: inherit; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.co-f input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,78,156,.15); }
.co-f input[aria-invalid="true"] { border-color: #C0392B; }
.co-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--ink-2); }
.co-check input { margin-top: 3px; accent-color: var(--blue); width: 16px; height: 16px; }
.co-pay { grid-column: 1 / -1; margin-top: 6px; padding: 16px 18px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-2); }
.co-pay strong { color: var(--ink); }
.co-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.co-cards span { padding: 4px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.co-btn { grid-column: 1 / -1; display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 54px; padding: 14px 24px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; box-shadow: 0 12px 26px rgba(30,78,156,.25); }
.co-btn:hover { background: var(--blue-dk); transform: translateY(-1px); }
.co-btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.co-msg { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: 0.875rem; color: #C0392B; }
.co-fine { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 0.8125rem; color: var(--ink-2); }

/* Summary */
.co-sum { position: sticky; top: 20px; background: var(--navy); color: rgba(255,255,255,.82); border: 0; overflow: hidden; isolation: isolate; }
.co-sum::before { content: ""; position: absolute; z-index: -1; right: -30%; top: -25%; width: 90%; height: 70%; background: radial-gradient(closest-side, rgba(46,100,184,.55), transparent); }
.co-sum h2 { color: #fff; font-size: 1.125rem; margin-bottom: 16px; }
.co-prod { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.14); }
.co-prod img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.co-prod strong { display: block; color: #fff; font-size: 0.9375rem; line-height: 1.35; }
.co-prod span { font-size: 0.8125rem; color: rgba(255,255,255,.65); }
.co-items { list-style: none; margin: 14px 0; padding: 0; }
.co-items li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.875rem; }
.co-items li span:last-child { color: rgba(255,255,255,.6); white-space: nowrap; }
.co-totals { border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; display: grid; gap: 8px; font-size: 0.9375rem; }
.co-totals div { display: flex; justify-content: space-between; }
.co-totals s { color: rgba(255,255,255,.6); }
.co-save { color: var(--gold); font-weight: 700; }
.co-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 1.25rem; font-weight: 800; color: #fff; }
.co-guar { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: 0.8125rem; }
.co-guar strong { color: var(--gold); }

/* Thank you */
.ty { text-align: center; padding: clamp(40px, 7vw, 88px) 0; }
.ty__badge { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; background: var(--ok); position: relative; box-shadow: 0 16px 34px rgba(31,122,77,.3); }
.ty__badge::after { content: ""; position: absolute; left: 50%; top: 46%; width: 16px; height: 30px; border: solid #fff; border-width: 0 4px 4px 0; transform: translate(-50%, -50%) rotate(45deg); }
.ty h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); margin-bottom: 12px; }
.ty__lead { max-width: 620px; margin: 0 auto 28px; font-size: 1.0625rem; color: var(--ink-2); }
.ty__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: 0 auto 32px; text-align: left; }
.ty__step { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--mist); }
.ty__step b { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.875rem; }
.ty__step h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.ty__step p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.ty__order { max-width: 520px; margin: 0 auto 28px; padding: 16px 20px; border-radius: 14px; background: var(--navy); color: rgba(255,255,255,.85); font-size: 0.9375rem; }
.ty__order strong { color: #fff; }
.ty__note { margin-top: 18px; font-size: 0.875rem; color: var(--ink-2); }
.co-demo { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--gold-lt); border: 1px solid #EAD39A; font-size: 0.8125rem; color: #6B5214; }

/* Footer */
.co-foot { border-top: 1px solid var(--line); padding: 22px 0; font-size: 0.8125rem; color: var(--ink-2); }
.co-foot .co-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.co-foot a { color: var(--ink-2); margin-left: 16px; }

@media (max-width: 899px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-sum { position: static; order: -1; }
  .ty__steps { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .co-form { grid-template-columns: 1fr; }
  .co-steps i { width: 14px; }
  .co-secure { font-size: 0.75rem; }
}

.co-pay__h { margin: 12px 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.co-pay .co-cards { margin-top: 6px; }

/* Step 2 preview: payment method tabs */
.pm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.pm-tab { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.pm-tab:hover { border-color: var(--blue); }
.pm-tab.is-on { border-color: var(--blue); background: #EAF0F8; box-shadow: 0 0 0 1px var(--blue) inset; }
.pm-panel { margin-bottom: 18px; }
.pm-panel input[disabled] { background: var(--mist); cursor: not-allowed; }
.pm-note { margin: 0 0 12px; color: var(--ink-2); font-size: 0.9375rem; }
.pm-fake { display: grid; place-items: center; min-height: 50px; border-radius: 10px; background: var(--mist); border: 1px dashed #B9C6D9; font-weight: 700; color: var(--ink-2); }
.pm-pay { width: 100%; }

[hidden] { display: none !important; }

/* ===== Payment logos + secure badge ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.co-pay.pm{display:flex;flex-direction:column;gap:14px}
.pm__badge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#12233F}
.pm__lock{width:22px;height:22px;color:#1D6B3F;flex:none}
.pm__badge>span:first-of-type{display:flex;flex-direction:column;line-height:1.25}
.pm__badge strong{font-size:15px}
.pm__badge small{font-size:12.5px;color:#5A6577}
.pm__by{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#5A6577;border:1px solid #DCE4EF;background:#fff;border-radius:999px;padding:5px 12px}
.pm__stripe{height:16px;width:auto}
.pm__logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pm__logos li{width:58px;height:38px;border:1px solid #DCE4EF;border-radius:7px;display:grid;place-items:center;box-shadow:0 1px 2px rgba(13,27,51,.06)}
.pm__logo{width:30px;height:20px}
.pm__note{margin:0;font-size:13px;color:#5A6577}
@media (max-width:420px){.pm__by{margin-left:0}.pm__logos li{width:52px;height:34px}}
.pm__logos li{width:64px;height:42px;padding:0 8px}
.pm__logo{width:100%;height:24px}
.pm__logos li[title="Visa"] .pm__logo,.pm__logos li[title="Discover"] .pm__logo{height:30px}
.pm__logos li[title="Apple Pay"] .pm__logo,.pm__logos li[title="Google Pay"] .pm__logo,.pm__logos li[title="American Express"] .pm__logo{height:28px}

/* ===== Discount code ===== */
.co-code{margin:16px 0 0;padding-top:14px;border-top:1px solid #E7ECF3}
.co-code label{display:block;font-size:13px;font-weight:600;color:#12233F;margin-bottom:6px}
.co-code__row{display:flex;gap:8px}
.co-code__row input{flex:1;min-width:0;font:inherit;padding:9px 11px;border:1px solid #C9D4E3;border-radius:8px;text-transform:uppercase}
.co-code__row button{font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;border:1px solid #1E4E9C;background:#fff;color:#1E4E9C;cursor:pointer}
.co-code__row button:hover{background:#EEF3FB}
.co-code__msg{margin:6px 0 0;font-size:13px;min-height:1em;color:#5A6577}
.co-code__msg.is-ok{color:#1D6B3F}
.co-code__msg.is-bad{color:#B42318}
/* discount code inside the dark order summary */
.co-sum .co-code{border-top-color:rgba(255,255,255,.14)}
.co-sum .co-code label{color:#fff}
.co-sum .co-code__msg{color:#BFD3F5}
.co-sum .co-code__msg.is-ok{color:#8BE3AE}
.co-sum .co-code__msg.is-bad{color:#FFB4AB}
.co-sum .co-code__row button{background:#fff}