/* International Wire — fee quiz (build C). Mobile-first stylesheet organised in cascade layers. */
@layer reset, base, layout, hero, footer, modal, motion;

@font-face { font-family: Headline; src: url("fonts/sans-a.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: Body; src: url("fonts/sans-b.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@layer reset {
  *, ::before, ::after { box-sizing: border-box; }
  body { margin: 0; min-width: 320px; }
  hr { margin: 0; border: 0; }
  button, input { font: inherit; }
  button { cursor: pointer; }
}

@layer base {
  :root {
    --c-text: #201e1e;
    --c-brand: #0b1e4e;
    --c-accent: #ed5257;
    --c-accent-hover: #df434a;
    --c-dim: #737373;
    --c-shell: #f4efea;
    --c-shell-m: #f6f1ed;
    --c-card: #fffcfa;
    --c-soft: #f5f5f5;
    --c-line: #dedede;
    --c-tint: #fce6e5;
    --c-tint-2: #fff2f1;
    --c-tint-3: #fff0ef;
    --ease-out: cubic-bezier(.2, .7, .15, 1);
    font-family: Headline, Arial, sans-serif;
    color: var(--c-text);
    background: #fff;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }
  html { scroll-behavior: smooth; }
  :is(a, button, input):focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }
  body[data-modal-open] { overflow: hidden; }
}

@layer layout {
  [data-ui="page"] { max-width: 1920px; margin: 0 auto; }
  [data-ui="header"] { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 64px; margin: 0 auto; padding: 0 20px; }
  [data-ui="logo"] { color: var(--c-brand); font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
  [data-ui="nav"] { display: flex; align-items: center; gap: 0; }
  [data-ui="about"] { display: none; color: var(--c-text); font-family: Body, Arial, sans-serif; font-size: 16px; text-decoration: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: var(--c-accent); color: #fff; font-weight: 500; text-align: center; text-decoration: none; transition: background-color .24s ease, transform .24s ease, box-shadow .24s ease; }
  .btn:hover { background: var(--c-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(237, 82, 87, .18); }
  .btn:active { transform: translateY(0); box-shadow: none; }
  .btn:disabled { background: #b8b8b8; cursor: not-allowed; box-shadow: none; transform: none; }
  .btn[data-size="s"] { width: 110px; min-width: 110px; height: 36px; padding: 0 12px; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }

  @media (max-width: 370px) {
    [data-ui="header"] { padding: 0 16px; }
    [data-ui="logo"] { font-size: 16px; }
  }
  @media (min-width: 901px) {
    [data-ui="header"] { width: calc(100% - 80px); max-width: 1720px; height: 88px; }
    [data-ui="logo"] { font-size: 23px; }
    [data-ui="nav"] { gap: 24px; }
    [data-ui="about"] { display: inline; }
    .btn[data-size="s"] { width: auto; min-width: 107px; height: 40px; font-size: 16px; font-weight: 400; }
  }
  @media (min-width: 1600px) {
    [data-ui="header"] { width: calc(100% - 200px); }
  }
}

@layer hero {
  [data-ui="hero"] { position: relative; width: calc(100% - 32px); max-width: 600px; min-height: 880px; margin: 12px auto 0; padding: 65px 24px 50px; overflow: hidden; border-radius: 18px; background: var(--c-shell-m); isolation: isolate; clip-path: inset(0 round 18px); will-change: transform; }
  [data-ui="blur"], [data-ui="dial"] { display: none; }
  [data-ui="copy"] { position: relative; z-index: 2; width: 100%; }
  [data-ui="hero"] h1 { margin: 0; font-size: 36px; line-height: 43px; font-weight: 600; letter-spacing: -.025em; }
  [data-ui="tagline"] { max-width: 400px; margin: 60px 0 0; font-size: 18px; line-height: 1.25; font-weight: 400; }
  .btn[data-size="l"] { width: 215px; height: 46px; margin-top: 34px; font-size: 15px; }
  [data-ui="offer"] { position: relative; z-index: 3; display: flex; flex-direction: column; width: calc(100% + 16px); min-height: 410px; margin: 39px -8px 0; padding: 26px 20px 14px; overflow: hidden; border: 0; border-radius: 16px; background: #fff; }
  [data-ui="eyebrow"] { margin: 0 0 27px; color: var(--c-accent); font-size: 13px; font-weight: 500; }
  [data-ui="offer"] h2 { margin: 0; font-size: 30px; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; }
  [data-ui="offer-text"] { margin: 29px 0 0; font-size: 18px; line-height: 1.25; }
  .btn[data-size="m"] { width: 220px; height: 46px; margin-top: auto; flex: 0 0 auto; font-size: 15px; }

  @media (max-width: 900px) {
    [data-ui="offer"] h2 br { display: none; }
  }
  @media (max-width: 370px) {
    [data-ui="hero"] { padding: 55px 20px 40px; }
    [data-ui="hero"] h1 { font-size: 32px; line-height: 1.18; }
    [data-ui="tagline"] { margin-top: 46px; }
    [data-ui="offer"] { width: calc(100% + 8px); margin-left: -4px; margin-right: -4px; }
    [data-ui="offer"] h2 { font-size: 27px; }
    [data-ui="offer-text"] { font-size: 17px; }
  }
  @media (min-width: 901px) {
    [data-ui="hero"] { width: calc(100% - 80px); max-width: 1720px; height: min(952px, 59vw); min-height: 630px; margin-top: 0; padding: 0; border-radius: 24px; background: var(--c-shell); clip-path: inset(0 round 24px); }
    [data-ui="blur"] { position: absolute; display: block; width: 2699.75px; height: 2391.71px; max-width: none; pointer-events: none; mix-blend-mode: multiply; transform: rotate(14.59deg); }
    [data-ui="blur"][data-pos="top"] { left: 580px; top: -1600px; }
    [data-ui="blur"][data-pos="bottom"] { left: 155px; top: 430px; }
    [data-ui="copy"] { position: absolute; top: 26.5%; left: 7%; width: 43%; }
    [data-ui="hero"] h1 { font-size: clamp(46px, 4.16vw, 80px); line-height: 1.17; }
    [data-ui="tagline"] { max-width: 740px; margin-top: 22px; font-size: clamp(19px, 1.5vw, 29px); }
    .btn[data-size="l"] { width: 250px; height: 56px; margin-top: 6%; font-size: 18px; }
    [data-ui="dial"] { position: absolute; z-index: 1; display: block; top: 14%; left: 75.5%; width: 24.5%; height: 66%; max-width: none; object-fit: cover; transform: rotate(6.55deg); pointer-events: none; }
    [data-ui="offer"] { position: absolute; top: 15.8%; left: 51.7%; width: 33.2%; height: 66.7%; min-height: 0; margin: 0; padding: 2.4% 2.3% 2.6%; border: 1px solid rgba(222, 199, 191, .32); border-radius: 24px; background: var(--c-card); }
    [data-ui="eyebrow"] { margin-bottom: 6%; font-size: clamp(13px, 1vw, 18px); }
    [data-ui="offer"] h2 { font-size: clamp(27px, 2.08vw, 40px); line-height: 1.15; }
    [data-ui="offer-text"] { margin-top: 8%; font-size: clamp(16px, 1.15vw, 22px); }
    .btn[data-size="m"] { width: 260px; height: 56px; font-size: 18px; }
  }
  @media (min-width: 1600px) {
    [data-ui="hero"] { width: calc(100% - 200px); height: 952px; min-height: 0; }
    [data-ui="copy"] { top: 252px; left: 120px; width: 760px; }
    [data-ui="hero"] h1 { font-size: 80px; }
    [data-ui="tagline"] { font-size: 29px; }
    .btn[data-size="l"] { margin-top: 58px; }
    [data-ui="dial"] { top: 135px; left: 1298px; width: 420px; height: 630px; }
    [data-ui="offer"] { top: 150px; left: 890px; width: 570px; height: 635px; padding: 41px 39px 45px; border-radius: 28px; }
    [data-ui="eyebrow"] { margin-bottom: 32px; font-size: 18px; }
    [data-ui="offer"] h2 { font-size: 40px; }
    [data-ui="offer-text"] { margin-top: 38px; font-size: 22px; }
  }
}

@layer footer {
  [data-ui="footer"] { width: 100%; min-height: 174px; margin: 0 auto; padding: 27px 20px 22px; }
  [data-ui="footer"] hr { display: none; height: 1px; background: var(--c-line); }
  [data-ui="logo"][data-size="l"] { display: inline-block; margin: 0; font-size: 18px; }
  [data-ui="footer-row"] { display: block; margin-top: 17px; font-size: 12px; }
  [data-ui="footer-row"] p { margin: 0; color: var(--c-dim); }
  [data-ui="links"] { display: flex; gap: 11px; margin-top: 32px; padding: 0; color: var(--c-text); font-size: 13px; white-space: nowrap; }
  [data-ui="links"] a { color: inherit; text-decoration: none; }
  [data-ui="links"] a:hover, [data-ui="links"] a:focus-visible { text-decoration: underline; }

  @media (min-width: 901px) {
    [data-ui="footer"] { width: calc(100% - 80px); max-width: 1720px; height: 350px; min-height: 0; margin-top: 12vw; padding: 0; }
    [data-ui="footer"] hr { display: block; }
    [data-ui="logo"][data-size="l"] { margin-top: 49px; font-size: 32px; }
    [data-ui="footer-row"] { display: flex; justify-content: space-between; gap: 24px; margin-top: 47px; font-size: 17px; }
    [data-ui="links"] { gap: 18px; margin-top: 0; padding-right: 10px; color: inherit; font-size: inherit; }
  }
  @media (min-width: 1600px) {
    [data-ui="footer"] { width: calc(100% - 200px); margin-top: 210px; }
  }
}

@layer modal {
  [data-ui="modal"] { position: fixed; z-index: 10; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 16px; }
  [data-ui="modal"][hidden] { display: none; }
  [data-ui="backdrop"] { position: fixed; inset: 0; background: rgba(0, 0, 0, .48); animation: veil .3s ease both; }
  [data-ui="panel"] { position: relative; flex: 0 0 auto; width: min(100%, 500px); height: auto; min-height: 0; max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 18px; background: #fff; box-shadow: 0 16px 60px rgba(0, 0, 0, .1); animation: lift .35s cubic-bezier(.2, .75, .2, 1) both; }
  [data-ui="close"] { position: absolute; z-index: 2; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-dim); font-size: 26px; line-height: 1; opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
  [data-ui="close"]:focus-visible { opacity: 1; }
  [data-ui="close"]:hover { background: var(--c-soft); }
  [data-ui="stage"] { min-height: 100%; }

  .step { transition: opacity .18s ease-in, transform .18s ease-in; }
  .step.is-out { opacity: 0; transform: translateY(-12px); }
  .step.is-in { opacity: 0; transform: translateY(14px); transition: none; }
  .step.is-in.is-live { opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
  [data-ui="panel"].is-sizing { overflow-y: hidden; transition: height .32s var(--ease-out); }

  .step[data-kind="question"] { display: flex; flex-direction: column; min-height: 0; padding: 56px 24px 28px; }
  .counter { margin: 0; color: var(--c-dim); font-size: 15px; font-weight: 500; }
  .prompt { margin: 20px 0 0; font-size: 26px; line-height: 1.17; font-weight: 600; letter-spacing: -.02em; }
  .answers { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .answer { width: 100%; min-height: 56px; padding: 14px 16px; border: 2px solid transparent; border-radius: 10px; background: var(--c-soft); color: var(--c-text); text-align: left; font-size: 17px; font-weight: 500; line-height: 1.2; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
  .answer:hover { background: var(--c-tint); transform: translateY(-2px); }
  .answer:active, .answer[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-tint-2); transform: none; }
  .note { margin: auto 0 0; padding-top: 20px; color: var(--c-dim); font-size: 14px; }

  .step[data-kind="result"] { min-height: 0; padding: 56px 24px 32px; }
  .headline { margin: 0; font-size: 29px; line-height: 1.17; font-weight: 600; letter-spacing: -.02em; }
  .sub { margin: 20px 0 0; font-size: 18px; line-height: 1.24; }
  .lead-form { margin-top: 32px; }
  .lead-form label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 500; }
  .lead-form input { display: block; width: 100%; height: 54px; padding: 0 13px; border: 1px solid #c7c7c7; border-radius: 8px; background: #fff; color: var(--c-text); font-size: 17px; transition: border-color .2s ease, box-shadow .2s ease; }
  .lead-form input::placeholder { color: var(--c-dim); opacity: 1; }
  .lead-form input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(237, 82, 87, .12); }
  .lead-form .btn { width: 100%; max-width: 100%; height: 52px; margin-top: 20px; font-size: 16px; }
  .fine { margin: 12px 0 0; color: var(--c-dim); font-size: 14px; }
  .fine[hidden] { display: none; }

  @media (max-width: 370px) {
    [data-ui="modal"] { padding-left: 10px; padding-right: 10px; }
    .step[data-kind="question"], .step[data-kind="result"] { padding-left: 20px; padding-right: 20px; }
  }
  @media (min-width: 901px) {
    [data-ui="modal"] { padding: 24px 16px; }
    [data-ui="panel"] { width: min(760px, 100%); max-height: calc(100dvh - 48px); border-radius: 24px; }
    [data-ui="close"] { top: 24px; right: 28px; width: 40px; height: 40px; font-size: 31px; }
    .step[data-kind="question"] { padding: 54px 52px 50px; }
    .counter { font-size: 20px; }
    .prompt { margin-top: 30px; font-size: 42px; line-height: 1.15; }
    .answers { grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 38px; }
    .answer { min-height: 72px; padding: 18px 20px; border-radius: 14px; font-size: 20px; }
    .note { padding-top: 30px; font-size: 16px; }
    .step[data-kind="result"] { padding: 60px 52px; }
    .headline { font-size: 40px; line-height: 1.18; }
    .sub { margin-top: 26px; font-size: 23px; line-height: 1.3; }
    .lead-form { margin-top: 40px; }
    .lead-form label { font-size: 16px; }
    .lead-form input { height: 58px; padding: 0 18px; border-radius: 12px; font-size: 18px; }
    .lead-form .btn { width: 360px; height: 54px; font-size: 18px; }
    .fine { font-size: 15px; }
  }
  @media (min-width: 901px) and (max-height: 900px) {
    .step[data-kind="question"] { padding: 58px 64px 48px; }
    .prompt { margin-top: 25px; font-size: 40px; }
    .answers { gap: 14px 24px; margin-top: 35px; }
    .answer { min-height: 72px; padding: 16px 20px; font-size: 20px; }
    .note { margin-top: 32px; padding: 0; font-size: 16px; }
    .step[data-kind="result"] { padding-top: 70px; }
    .headline { font-size: 40px; }
    .sub { margin-top: 28px; font-size: 23px; }
    .lead-form { margin-top: 40px; }
    .lead-form label { font-size: 16px; }
    .lead-form input { height: 60px; font-size: 18px; }
    .lead-form .btn { height: 54px; margin-top: 20px; font-size: 18px; }
    .fine { font-size: 16px; }
  }
}

@layer motion {
  @keyframes veil { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lift { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
  [data-stagger] { opacity: 0; translate: 0 24px; transition: opacity .75s ease, translate .75s var(--ease-out); transition-delay: var(--d, 0ms); }
  [data-stagger][data-shown] { opacity: 1; translate: 0 0; }
  [data-stagger="1"] { --d: 60ms; }
  [data-stagger="2"] { --d: 100ms; }
  [data-stagger="3"] { --d: 120ms; }
  [data-stagger="4"] { --d: 190ms; }
  [data-stagger="5"] { --d: 200ms; }
  [data-stagger="6"] { --d: 240ms; }
  [data-stagger="7"] { --d: 250ms; }
  [data-stagger="8"] { --d: 260ms; }
  [data-stagger="9"] { --d: 280ms; }
  [data-stagger="10"] { --d: 330ms; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    [data-stagger] { opacity: 1; translate: none; }
  }
}