/* ---- Theme tokens -------------------------------------------------- */
:root {
  --accent: #2563eb;        /* on light backgrounds */
  --accent-light: #7aa5ff;  /* on dark backgrounds — keeps AA contrast */
}

html { scroll-behavior: smooth; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(37,99,235,0.22); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #1d4ed8; }
img { max-width: 100%; }

/* ---- Animation ------------------------------------------------------ */
@keyframes ci_ken { 0% { transform: scale(1.04); } 100% { transform: scale(1.14); } }
@keyframes ci_up  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ci-in { opacity: 0; animation: ci_up 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }
.ci-ken { animation: ci_ken 24s ease-in-out infinite alternate; }

/* ---- Hover states (were `style-hover` attrs in the design source) ---- */
.ci-zoom { transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.ci-zoomwrap:hover .ci-zoom { transform: scale(1.06); }

.ci-navlink { transition: opacity 0.35s ease, color 0.35s ease; opacity: 0.88; }
.ci-navlink:hover { opacity: 1; color: var(--nav-fg); }

.ci-btn { transition: filter 0.18s ease, transform 0.15s ease; }
.ci-btn:hover { filter: brightness(1.06); transform: translateY(-2px); color: #fff; }
.ci-btn--flat:hover { transform: none; }

.ci-ghost:hover { color: var(--accent-light); }

.ci-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ci-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(17,24,39,0.45); }

.ci-footlink { color: #d4d4d8; transition: color 0.18s ease; }
.ci-footlink:hover { color: #f4f4f5; }

/* ---- Form controls --------------------------------------------------- */
.ci-field { width: 100%; padding: 13px 14px; border: 1px solid #2f3037; border-radius: 10px; background: #1b1c21; font-size: 20px; font-family: inherit; color: #f4f4f5; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ci-field::placeholder { color: #71717a; }
.ci-field:focus { outline: none; border-color: var(--accent-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

.ci-rc { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid #2f3037; border-radius: 12px; background: #1b1c21; cursor: pointer; font-size: 20px; font-weight: 600; color: #e4e4e7; transition: border-color 0.15s ease, background 0.15s ease; }
.ci-rc:hover { border-color: #43454e; }
.ci-rc:has(input:checked) { border-color: var(--accent-light); background: color-mix(in srgb, var(--accent) 15%, #1b1c21); color: #fafafa; }
.ci-rc:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.ci-rc input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }

/* ---- Checkout gate (modal before Stripe) ------------------------------ */
.ci-gate { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 40px; border: 1px solid #2f3037; border-top: 3px solid var(--accent-light); border-radius: 20px; background: #202127; color: #e4e4e7; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 500; box-shadow: 0 44px 80px -40px rgba(0,0,0,0.7); }
.ci-gate::backdrop { background: rgba(17,18,22,0.72); backdrop-filter: blur(4px); }
.ci-gate[open] { animation: ci_up 0.35s cubic-bezier(0.22,1,0.36,1); }
.ci-gate-x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border: none; border-radius: 10px; background: transparent; color: #a1a1aa; cursor: pointer; transition: color 0.18s ease, background 0.18s ease; }
.ci-gate-x:hover { color: #fafafa; background: #2a2b31; }
.ci-gate-title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; color: #fafafa; margin: 0; padding-right: 40px; }
.ci-gate-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ci-gate-list li { position: relative; padding-left: 21px; font-size: 18.5px; line-height: 1.55; color: #d4d4d8; }
.ci-gate-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light); }
.ci-gate-check { align-items: flex-start; margin-top: 24px; cursor: default; font-size: 19px; }
.ci-gate-check input { margin-top: 4px; }
.ci-gate-check span { line-height: 1.5; }
.ci-gate-check label { cursor: pointer; }
.ci-gate-check a { color: var(--accent-light); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ci-gate-go { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 22px; padding: 17px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-weight: 700; font-size: 21.5px; cursor: pointer; }
.ci-btn:disabled, .ci-btn:disabled:hover { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.ci-gate-cancel { display: block; margin: 14px auto 0; padding: 6px 10px; border: none; background: transparent; color: #a1a1aa; font-family: inherit; font-weight: 600; font-size: 18.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.18s ease; }
.ci-gate-cancel:hover { color: var(--accent-light); }
.ci-gate-x:focus-visible, .ci-gate-cancel:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

button:focus-visible, a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

/* ---- Layout ---------------------------------------------------------- */
/* One gutter for every container, so it can shrink on phones in one place. */
.ci-wrap, .ci-gutter { padding-left: 36px; padding-right: 36px; }
.ci-wrap { padding-top: 112px; padding-bottom: 112px; }
.ci-contact-pad { padding-top: 156px; padding-bottom: 104px; }
.ci-page-pad { padding-top: 152px; padding-bottom: 72px; }
.ci-policy-toc { position: sticky; top: 112px; }

/* ---- Policies page ---------------------------------------------------- */
.ci-toclink { color: #3f3f46; transition: color 0.18s ease; }
.ci-toclink:hover { color: var(--accent); }

/* ---- Responsive ------------------------------------------------------ */
/* Nav links need ~1180px at the current type scale before they collide with
   the logo and the CTA, so they drop out earlier than the layout does. */
@media (max-width: 1200px) {
  .ci-nav-links { display: none !important; }
}

@media (max-width: 1040px) {
  .ci-method-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .ci-policy-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ci-policy-toc { position: static !important; }
}

@media (max-width: 900px) {
  .ci-wrap, .ci-gutter { padding-left: 24px; padding-right: 24px; }
  .ci-wrap { padding-top: 76px; padding-bottom: 76px; }
  .ci-contact-pad { padding-top: 118px; padding-bottom: 76px; }
  .ci-page-pad { padding-top: 116px; padding-bottom: 56px; }
  .ci-hero-h1 { font-size: 61.5px !important; }
  .ci-2col, .ci-method-grid, .ci-price-grid, .ci-apply-grid, .ci-about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ci-foot-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
  .ci-form-2 { grid-template-columns: 1fr !important; }
  /* The before/after original is 409px wide, so don't stretch it full width. */
  .ci-about-grid [style*="aspect-ratio: 409 / 478"] { max-width: 500px; }
}

/* Below this the longest words in the hero headline overflow a phone. */
@media (max-width: 560px) {
  .ci-wrap, .ci-gutter { padding-left: 20px; padding-right: 20px; }
  .ci-wrap { padding-top: 64px; padding-bottom: 64px; }
  .ci-hero-h1 { font-size: 44px !important; }

  /* Phone type scale. Sizes are set inline across the pages, so they are
     matched by value here and scaled down in one place. */
  [style*="font-size: 16px"]   { font-size: 13.5px !important; }
  [style*="font-size: 17.5px"] { font-size: 15.5px !important; }
  [style*="font-size: 18px"]   { font-size: 15.5px !important; }
  [style*="font-size: 18.5px"] { font-size: 16px !important; }
  [style*="font-size: 19.5px"] { font-size: 16.5px !important; }
  [style*="font-size: 20px"]   { font-size: 17px !important; }
  [style*="font-size: 20.5px"] { font-size: 17px !important; }
  [style*="font-size: 21.5px"] { font-size: 17.5px !important; }
  [style*="font-size: 22.5px"] { font-size: 18px !important; }
  [style*="font-size: 24px"]   { font-size: 20px !important; }
  [style*="font-size: 25px"]   { font-size: 21px !important; }
  [style*="font-size: 26.5px"] { font-size: 18.5px !important; }
  [style*="font-size: 30.5px"] { font-size: 24px !important; }
  [style*="font-size: 32px"]   { font-size: 26px !important; }
  [style*="font-size: 77.5px"] { font-size: 60px !important; }
  [style*="font-size: clamp(24px"]   { font-size: 18.5px !important; }
  [style*="font-size: clamp(27px"]   { font-size: 23px !important; }
  [style*="font-size: clamp(40px"],
  [style*="font-size: clamp(42.5px"] { font-size: 34px !important; }
  .ci-field, .ci-rc { font-size: 17px; }

  /* Nav: logo and button on one line. */
  [style*="font-size: 25.5px"] { font-size: 19px !important; white-space: nowrap; }
  #ci-nav nav { gap: 12px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  .ci-nav-cta { font-size: 16px !important; padding: 9px 16px !important; white-space: nowrap; }

  /* Cards: less padding, icon above text so the copy gets the full width. */
  [style*="padding: 32px 34px"] { padding: 24px 20px !important; }
  .ci-card[style*="display: flex"] { flex-direction: column; gap: 16px !important; }
  [style*="padding: 40px"] { padding: 26px 20px !important; }
  [style*="padding: 44px"] { padding: 26px 18px !important; }
  [style*="padding: 48px"] { padding: 30px 22px !important; }

  /* Pricing badge sits above the card title instead of on top of it. */
  [style*="position: absolute; top: 22px; right: 24px"] { position: static !important; align-self: flex-start; margin-bottom: 16px; }

  /* Form: day choices stack like the other options. */
  .ci-rc { padding: 13px 14px; }
  .ci-rc[style*="min-width: 110px"] { flex-basis: 100% !important; justify-content: flex-start !important; }

  .ci-gate { padding: 28px 20px; }
  .ci-gate-title { font-size: 27px; }
  .ci-gate-list li { font-size: 16px; }
  .ci-gate-check { font-size: 16.5px; }
  .ci-gate-go { font-size: 17.5px; padding: 15px; }
  .ci-gate-cancel { font-size: 16px; }
}

@media (max-width: 420px) {
  [style*="font-size: 25.5px"] { font-size: 17.5px !important; gap: 9px !important; }
  [style*="font-size: 25.5px"] > span { width: 30px !important; height: 30px !important; font-size: 17px !important; }
  .ci-nav-cta { font-size: 15px !important; padding: 8px 13px !important; }
}

@media (max-width: 374px) {
  .ci-hide-xs { display: none; }
}

@media (max-width: 380px) {
  .ci-hero-h1 { font-size: 39px !important; }
  [style*="font-size: clamp(40px"],
  [style*="font-size: clamp(42.5px"] { font-size: 30px !important; }
  [style*="font-size: 77.5px"] { font-size: 52px !important; }
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ci-in { opacity: 1; animation: none; }
  .ci-ken { animation: none; }
  .ci-zoom, .ci-card, .ci-btn { transition: none; }
  .ci-gate[open] { animation: none; }
}