/* ===========================================================
   Thermory USA — Migration page
   Design tokens extracted from thermoryusa.com (see DESIGN-SYSTEM.md)
   White + near-black + one red. Sharp corners. Flat. Light-weight type.
   =========================================================== */

:root{
  /* Color */
  --red:#EE2A24;
  --red-hover:#D40000;
  --ink:#292B2C;
  --muted:#6f7274;
  --line:#E6E6E6;
  --bg:#FFFFFF;
  --bg-alt:#F7F7F7;
  --stripe:#F2F2F2;
  --charcoal:#32373C;
  --overlay:rgba(0,0,0,.35);

  /* Type */
  --font:"Hanken Grotesk","Aeonik",system-ui,-apple-system,Segoe UI,sans-serif;
  --fw-light:300;
  --fw-reg:400;
  --fw-med:500;
  --fw-semi:600;

  /* Layout */
  --wrap:1240px;
  --wrap-narrow:820px;
  --pad:clamp(20px,5vw,64px);
  --section-y:clamp(56px,8vw,110px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-weight:var(--fw-light);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-hover);text-decoration:underline}
h1,h2,h3{color:var(--ink);margin:0 0 .5em;font-weight:var(--fw-light);line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.25rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.18rem;font-weight:var(--fw-med);line-height:1.3}
p{margin:0 0 1rem}
strong{font-weight:var(--fw-semi)}
.muted{color:var(--muted)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);width:100%}
.wrap--narrow{max-width:var(--wrap-narrow)}

.eyebrow{
  font-size:.78rem;font-weight:var(--fw-semi);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1rem;
}
.eyebrow--red{color:var(--red)}
.eyebrow--onDark{color:#fff;opacity:.7}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:inherit;font-size:1rem;font-weight:var(--fw-med);
  padding:14px 26px;border:1px solid transparent;border-radius:0;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn--primary:hover{background:var(--red-hover);border-color:var(--red-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--sm{padding:9px 18px;font-size:.9rem}

/* ---------- Utility bar ---------- */
.utilbar{background:var(--charcoal);color:#dfe2e3;font-size:.8rem}
.utilbar__inner{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.utilbar__brand{font-weight:var(--fw-semi);letter-spacing:.14em;color:#fff}
.utilbar__mid{opacity:.7;letter-spacing:.02em}
.utilbar__link{margin-left:auto;color:#dfe2e3}
.utilbar__link:hover{color:#fff;text-decoration:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:28px;min-height:74px}
.logo img{height:26px;width:auto}
.mainnav{display:flex;gap:26px;margin-left:8px}
.mainnav a{color:var(--ink);font-size:.95rem;font-weight:var(--fw-reg)}
.mainnav a:hover{color:var(--red);text-decoration:none}
.site-header__cta{margin-left:auto}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;min-height:min(76vh,640px)}
.hero__text{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,90px) var(--pad);max-width:760px;margin-left:auto;
  margin-inline:max(0px,calc((100vw - var(--wrap))/2)) 0}
.hero__text h1{margin-bottom:.35em}
.hero__lede{font-size:1.15rem;max-width:34em;margin-bottom:1.8rem}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.6rem}
.hero__meta{font-size:.85rem;color:var(--muted);margin:0}
.hero__media{position:relative;overflow:hidden;min-height:320px}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 30%)}
.hero__lines{position:absolute;top:0;right:0;width:56%;height:auto;pointer-events:none;mix-blend-mode:screen;opacity:.55}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y)}
.section--alt{background:var(--bg-alt)}
.section > .wrap > .eyebrow,.section > .wrap > h2{max-width:22em}
.lead{font-size:1.15rem;max-width:40em}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.timeline__item{padding:22px 26px 26px 0;border-right:1px solid var(--line);position:relative}
.timeline__item:last-child{border-right:none}
.timeline__item::before{content:"";position:absolute;top:-8px;left:0;width:12px;height:12px;
  background:var(--line);border-radius:50%}
.timeline__item--now::before{background:var(--red)}
.timeline__tag{display:inline-block;font-size:.75rem;font-weight:var(--fw-semi);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.timeline__item--now .timeline__tag{color:var(--red)}
.timeline__item p{margin:0;font-size:1rem}

/* ---------- Spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:1rem}
.spec th,.spec td{text-align:left;padding:14px 18px}
.spec thead th{font-size:.75rem;font-weight:var(--fw-semi);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
.spec tbody tr:nth-child(odd){background:var(--stripe)}
.spec tbody td{font-weight:var(--fw-reg)}
.spec tbody td:first-child{color:var(--muted)}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);margin-top:2.4rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg);border:1px solid var(--line);padding:30px 28px;transition:border-color .2s}
.card:hover{border-color:#c4c7c8}
.section--alt .card{background:#fff}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:#3f4143;font-size:.98rem}
.card__icon{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;
  border:1px solid var(--ink);border-radius:50%;margin-bottom:18px;color:var(--ink)}
.card__icon svg{width:24px;height:24px}

/* ---------- Callouts ---------- */
.callout{margin-top:2.2rem;padding:22px 26px;background:#fff;border-left:3px solid var(--ink)}
.section--alt .callout{background:#fff}
.callout p{margin:0}
.callout--red{border-left-color:var(--red);background:#fff}
.callout--info{border-left-color:var(--red);background:var(--bg-alt);margin-top:2rem;padding:26px 30px}
.callout--info h3{margin-bottom:.4em}
.callout h3{color:var(--ink)}

/* ---------- Important band (backup) ---------- */
.band-important{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:6px;max-width:52em}
.steps li{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:none}
.steps__n{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--red);color:var(--red);font-weight:var(--fw-med);font-size:1.05rem}
.steps h3{margin:.2em 0 .3em}
.steps p{margin:0;color:#3f4143}

/* ---------- Split (Mac) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:0;background:var(--bg-alt)}
.split__media{position:relative;min-height:360px;overflow:hidden}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__text{padding:var(--section-y) var(--pad);max-width:640px}
.ticks{list-style:none;margin:1.4rem 0;padding:0}
.ticks li{position:relative;padding:8px 0 8px 30px}
.ticks li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:8px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.note{border-left:3px solid var(--line);padding:14px 20px;background:#fff;font-size:.98rem;margin-top:1.4rem}

/* ---------- Checklist ---------- */
.band-checklist{background:var(--ink);color:#fff}
.band-checklist h2,.band-checklist .eyebrow{color:#fff}
.band-checklist .eyebrow{opacity:.65}
.band-checklist .muted{color:#a9adb0}
.checklist{margin-top:2rem;display:grid;gap:2px;max-width:60em}
.check{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;cursor:pointer;
  background:rgba(255,255,255,.04);transition:background .2s}
.check:hover{background:rgba(255,255,255,.08)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{flex:0 0 auto;width:24px;height:24px;border:1.5px solid #6c7175;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.check__box::after{content:"";width:12px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .15s}
.check input:checked + .check__box{background:var(--red);border-color:var(--red)}
.check input:checked + .check__box::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible + .check__box{outline:2px solid #fff;outline-offset:2px}
.check__label{font-size:1.02rem;font-weight:var(--fw-reg);color:#f2f3f3}
.check input:checked ~ .check__label{color:#9aa0a3;text-decoration:line-through}
.checklist__foot{display:flex;align-items:center;gap:20px;margin-top:1.8rem}
.checklist__progress{margin:0;font-weight:var(--fw-med);color:#fff}
.band-checklist .btn--ghost{color:#fff;border-color:#6c7175}
.band-checklist .btn--ghost:hover{background:#fff;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{margin-top:2rem;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;
  padding:22px 4px;font-size:1.1rem;font-weight:var(--fw-reg);color:var(--ink);line-height:1.35}
.faq__q:hover{color:var(--red)}
.faq__mark{position:relative;flex:0 0 auto;width:16px;height:16px}
.faq__mark::before,.faq__mark::after{content:"";position:absolute;background:currentColor;transition:transform .2s}
.faq__mark::before{top:7px;left:0;width:16px;height:2px}
.faq__mark::after{top:0;left:7px;width:2px;height:16px}
.faq__q[aria-expanded="true"] .faq__mark::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq__a p{margin:0;padding:0 4px 24px;max-width:60em;color:#3f4143}

/* ---------- Help band ---------- */
.band-help{background:var(--charcoal);color:#fff;text-align:center;padding-block:clamp(56px,8vw,96px)}
.band-help h2{color:#fff}
.help__email{display:inline-block;color:#fff;font-size:clamp(1.4rem,3.5vw,2.1rem);
  font-weight:var(--fw-light);margin:.4rem 0 .8rem;border-bottom:2px solid var(--red);padding-bottom:6px}
.help__email:hover{color:var(--red);text-decoration:none}
.help__sub{color:#b9bdbf;max-width:34em;margin:0 auto}
.help__sub a{color:#fff}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding-block:40px}
.site-footer__inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer__logo{height:22px;filter:brightness(0) invert(1)}
.site-footer__meta p{margin:0;font-size:.9rem}
.site-footer__meta .muted{color:#9aa0a3}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__media{min-height:300px;order:-1}
  .hero__text{margin-inline:0;max-width:none;padding-block:44px}
  .grid-2{grid-template-columns:1fr;gap:28px}
  .split{grid-template-columns:1fr}
  .split__media{min-height:260px;order:-1}
  .split__text{padding-block:44px}
  .cards,.cards--2,.cards--3{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr;border-top:none}
  .timeline__item{border-right:none;border-top:2px solid var(--ink);padding:22px 0 24px}
  .timeline__item::before{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .mainnav{display:none}
  .utilbar__mid{display:none}
  .cards,.cards--2,.cards--3{grid-template-columns:1fr}
  .hero__actions .btn{flex:1 1 auto;text-align:center}
  .steps li{gap:14px}
}