/* Health Import Tool site styles.
   The palette, the radial lift and the type scale are the app's own, so the
   page and the product look like one thing. */
:root{
  --ground:#0E0E11; --card:#18181C; --raised:#212127; --line:rgba(255,255,255,.09);
  --text:#F5F5F7; --text-2:#9C9CA4; --text-3:#6A6A72;
  --signal:#FF6B6A; --warm:#FFA36B; --good:#5FD39C; --warn:#F5B942;
  --gutter:clamp(20px,5vw,32px); --radius:18px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* The warm lift at the top and a cold counterweight at the foot, as the app
   draws them. Fixed, so a long scroll keeps its centre of gravity. */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{background:radial-gradient(760px 620px at 50% -4%,rgba(255,107,106,.22),rgba(255,107,106,.06) 45%,transparent 72%)}
body::after{background:radial-gradient(560px 480px at 12% 104%,rgba(176,84,143,.10),transparent 70%)}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px}
a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.7px;
  color:var(--text-3);margin:0 0 14px}

header.site{padding:26px 0 0;position:relative;z-index:2}
.bar{display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:36px;height:36px;border-radius:9px}
.brand span{font-size:17px;font-weight:700;letter-spacing:.2em}
.bar nav{margin-left:auto;display:flex;gap:22px;font-size:14.5px}
.bar nav a{color:var(--text-2)}
.bar nav a:hover{color:var(--text);text-decoration:none}
@media(max-width:640px){.bar nav{display:none}}

.hero{padding:clamp(46px,9vw,86px) 0 clamp(30px,6vw,54px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,54px);align-items:center}
@media(min-width:880px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{font-size:clamp(34px,6vw,56px);font-weight:700;max-width:14ch}
.hero p.lede{margin-top:20px;font-size:clamp(17px,2.2vw,20px);color:var(--text-2);max-width:46ch}
.badge{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:13px 22px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:14.5px;font-weight:600;color:var(--text)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.price-line{margin-top:16px;color:var(--text-3);font-size:14.5px}

/* Phone screenshots, framed the way the device shows them. */
.phone{border-radius:34px;overflow:hidden;border:1px solid var(--line);
  background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.phone img{border-radius:33px}
.hero .phone{max-width:340px;margin:0 auto}

section{padding:clamp(40px,7vw,76px) 0;position:relative;z-index:1}
section h2{font-size:clamp(24px,3.4vw,34px);font-weight:650;max-width:20ch}
section > .wrap > p.intro{margin-top:14px;color:var(--text-2);max-width:60ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

.steps{display:grid;gap:16px;margin-top:34px;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step .n{font-size:12px;font-weight:700;color:var(--signal);letter-spacing:.1em}
.step h3{margin-top:12px;font-size:18px;font-weight:600}
.step p{margin-top:8px;color:var(--text-2);font-size:15px}

.features{display:grid;gap:20px;margin-top:36px;grid-template-columns:1fr}
@media(min-width:800px){.features{grid-template-columns:repeat(2,1fr)}}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:12px}
.feature h3{font-size:19px;font-weight:600}
.feature p{color:var(--text-2);font-size:15px}

/* The shot-beside-words band, alternating sides down the page. */
.band{display:grid;gap:clamp(26px,5vw,56px);align-items:center;grid-template-columns:1fr;
  margin-top:clamp(30px,5vw,56px)}
@media(min-width:860px){
  .band{grid-template-columns:.9fr 1.1fr}
  .band.flip .band-shot{order:2}
}
.band-shot{max-width:320px;margin:0 auto;width:100%}
.band h3{font-size:clamp(21px,2.6vw,26px);font-weight:650}
.band p{margin-top:14px;color:var(--text-2);max-width:48ch}

.facts{display:grid;gap:14px;margin-top:30px;grid-template-columns:1fr}
@media(min-width:700px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{background:var(--raised);border-radius:12px;padding:20px}
.fact strong{display:block;font-size:26px;font-weight:700;color:var(--signal);
  font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:6px;color:var(--text-2);font-size:14px}

/* The marker is positioned, not laid out. Making the <li> a flex or grid
   container turns every inline <strong> and <code> inside it into a separate
   flex item, which stacks the sentence into columns. */
ul.plain{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
ul.plain li{position:relative;padding-left:20px;color:var(--text-2);font-size:15.5px}
ul.plain li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--text-3)}
ul.plain li strong{color:var(--text);font-weight:600}

/* Export walkthroughs. Numbered, because they are steps taken elsewhere. */
.guide{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,4vw,34px);margin-top:24px}
.guide h3{font-size:20px;font-weight:650;display:flex;align-items:center;gap:12px}
.guide ol{margin:20px 0 0;padding-left:0;list-style:none;counter-reset:s;display:grid;gap:16px}
/* Same reason as ul.plain: the number is positioned so the step's own text,
   with its bold fragments, stays one flowing sentence. */
.guide li{counter-increment:s;position:relative;padding-left:32px;
  color:var(--text-2);font-size:15.5px}
.guide li::before{content:counter(s);position:absolute;left:0;top:2px;
  color:var(--signal);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.guide li strong{color:var(--text);font-weight:600}
.guide code{background:var(--raised);border-radius:5px;padding:1px 6px;font-size:.92em}
.guide .note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--text-3);font-size:14px}
.guide .cta{display:inline-block;margin-top:18px;font-weight:600;font-size:15px}

details.faq{border-top:1px solid var(--line);padding:2px 0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16.5px;
  font-weight:550;display:flex;justify-content:space-between;gap:18px;align-items:baseline}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--text-3);font-weight:400;font-size:20px}
details.faq[open] summary::after{content:"\2013"}
details.faq p{padding:0 0 20px;color:var(--text-2);font-size:15.5px;max-width:66ch}

footer{border-top:1px solid var(--line);padding:38px 0 56px;color:var(--text-3);font-size:14px}
footer .row{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
footer .spacer{flex:1 1 auto}

.prose h2{margin-top:44px;font-size:22px}
.prose h3{margin-top:28px;font-size:18px}
.prose p,.prose li{color:var(--text-2);font-size:16px}
.prose p{margin-top:14px;max-width:68ch}
.prose ul{margin-top:14px;padding-left:20px;display:grid;gap:10px;max-width:68ch}
.prose .lead{color:var(--text);font-size:18px}

/* Motion. Everything below is decoration and is switched off wholesale for
   anyone who has asked for less of it. */
@media(prefers-reduced-motion:no-preference){
  .fade{opacity:0;transform:translateY(8px);animation:settle .5s ease forwards}
  @keyframes settle{to{opacity:1;transform:none}}

  /* Sections lift into place as they are scrolled to.
     Note which way round this is. The content is visible by default and the
     script opts *into* hiding it, by putting .js-reveal on <html> immediately
     before it starts observing. Written the other way round,
     hidden in CSS and shown by JavaScript, the whole page below the hero stays
     blank for anyone with
     scripting off, and blank forever if the script throws or the observer
     never fires. It is not worth risking the page to animate it. */
  .js-reveal .reveal{opacity:0;transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .js-reveal .reveal.in{opacity:1;transform:none}
  .js-reveal .reveal[data-delay="1"]{transition-delay:.08s}
  .js-reveal .reveal[data-delay="2"]{transition-delay:.16s}
  .js-reveal .reveal[data-delay="3"]{transition-delay:.24s}

  /* The hero phone drifts a little as the page moves, the only parallax here. */
  .drift{will-change:transform}
}