/* ============================================================
   TakeCare — marketing site
   Implemented from the "TakeCare Website" design mockup.
   Soft-care design system: warm oatmeal, no pure black, no red.
   ============================================================ */

:root{
  --cream:#FAF4EC; --cream-2:#F2E8DA; --paper:#FFFDFA; --card:#FFFFFF;
  --ink:#4A433C; --ink-soft:#978C7E; --ink-faint:#BDB3A4;
  --blue:#A6C8EC; --blue-deep:#6E9BD0; --blue-wash:#E7F0FA;
  --lilac:#C8B9EC; --lilac-deep:#9A83D6; --lilac-wash:#EFE9FA;
  --rose:#F4B7C4; --rose-deep:#E58AA0; --butter:#F7D98C; --mint:#AFDDC2; --coral:#F3A98D; --sky:#C2E3EF;
  --primary:#5E8FC4; --on-primary:#FFFFFF; --primary-container:#E7F0FA; --on-primary-container:#21405E;
  --secondary:#8E76C9; --secondary-container:#EFE9FA; --tertiary:#DF7E96; --tertiary-container:#FCE6EB;
  --outline:#BEB4A4; --outline-variant:#E7DECF;
  --band-low:#93CFB6; --band-mid:#F2C879; --band-high:#EB9582; --band-none:#EAEFEC;
  --sh-1:0 1px 2px rgba(120,104,84,.05), 0 4px 10px rgba(120,104,84,.06);
  --sh-2:0 2px 6px rgba(120,104,84,.05), 0 10px 26px rgba(120,104,84,.09), 0 30px 60px rgba(120,104,84,.05);
  --sh-3:0 4px 12px rgba(120,104,84,.08), 0 24px 60px rgba(120,104,84,.16), 0 50px 90px rgba(120,104,84,.08);
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-body:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --gutter:44px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:#EAE6F4;
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{max-width:100%;}

.msr{
  font-family:'Material Symbols Rounded';
  font-weight:normal;
  font-style:normal;
  line-height:1;
  letter-spacing:normal;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

.eyebrow{
  font-weight:700;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--secondary);
}

/* ── The framed "artboard" — floats on the lilac page on desktop,
      goes full-bleed on small screens ──────────────────────────── */
.site{
  max-width:1180px;
  margin:32px auto;
  background:linear-gradient(170deg,#ECEAFB 0%,#F2EDF6 26%,#F8F2EE 52%,#FBEDEA 78%,#FBE6EC 100%);
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--sh-3);
}

/* Skip link for keyboard users */
.skip{
  position:absolute;left:-9999px;top:auto;
  background:var(--card);color:var(--ink);border-radius:12px;
  padding:10px 16px;font-weight:700;z-index:20;box-shadow:var(--sh-2);
}
.skip:focus{left:16px;top:16px;}

/* ── Nav ─────────────────────────────────────────────────────── */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px var(--gutter);background:var(--paper);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand img{width:42px;height:42px;object-fit:contain;}
.brand__word{font-family:var(--font-display);font-weight:600;font-size:23px;color:var(--ink);}
.brand__word b{font-weight:600;color:var(--primary);}
.nav__links{display:flex;gap:30px;align-items:center;}
.nav__links a{text-decoration:none;font-weight:700;font-size:14px;color:var(--ink-soft);transition:color .18s;}
.nav__links a:hover{color:var(--ink);}
.nav__right{display:flex;align-items:center;gap:14px;}

.lang{display:inline-flex;background:var(--cream-2);border-radius:999px;padding:3px;}
.lang button{
  border:0;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:12px;
  padding:6px 12px;border-radius:999px;background:transparent;color:var(--ink-soft);
  transition:background .18s,color .18s,box-shadow .18s;
}
.lang button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh-1);}

/* ── Buttons / store badge ───────────────────────────────────── */
.badge-link{display:inline-flex;transition:transform .18s;}
.badge-link:hover{transform:translateY(-2px);}
.badge-link img{height:58px;width:auto;display:block;}

/* ── Hero ────────────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:20px;
  padding:52px var(--gutter) 44px;align-items:center;
  background:linear-gradient(165deg,#F0ECFA,#F8F2EE 55%,#FBEDEF);
}
.hero h1{
  font-family:var(--font-display);font-weight:600;font-size:50px;line-height:55px;
  color:var(--ink);margin:14px 0 0;
}
.hero .lede{
  font-weight:500;font-size:18px;line-height:28px;color:var(--ink-soft);
  margin:18px 0 0;max-width:480px;
}
.hero__cta{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap;}
.checks{display:flex;gap:20px;margin-top:22px;flex-wrap:wrap;}
.check{display:flex;align-items:center;gap:7px;}
.check .msr{font-size:20px;color:var(--band-low);}
.check span:last-child{font-weight:700;font-size:13px;color:var(--ink);}

.hero__art{position:relative;display:flex;justify-content:center;padding:10px 0;isolation:isolate;}
.hero__blob{
  position:absolute;top:6px;width:320px;height:520px;border-radius:48px;z-index:0;
  background:linear-gradient(160deg,var(--blue-wash),var(--lilac-wash));
}
/* The hero phone must sit above the soft glow blob (both share hero__art's
   stacking context; a static phone would otherwise paint under the absolute blob). */
.hero__art .phone{position:relative;z-index:1;}
.hero__taki{
  position:absolute;right:-4px;bottom:44px;width:138px;height:138px;object-fit:contain;z-index:2;
  filter:drop-shadow(0 16px 22px rgba(120,104,84,.20));
  animation:bobslow 4s ease-in-out infinite;
}

/* ── Phone mock ──────────────────────────────────────────────── */
.phone{
  width:252px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;
  scroll-snap-align:start;
}
.phone__frame{
  width:252px;padding:9px;border-radius:44px;
  background:linear-gradient(160deg,#3a332c,#2b2622);
  box-shadow:0 4px 12px rgba(120,104,84,.18),0 24px 60px rgba(120,104,84,.22);
}
.phone__screen{
  background:var(--cream);border-radius:36px;overflow:hidden;height:520px;position:relative;
}
.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.phone__label{
  display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border-radius:999px;padding:8px 16px;box-shadow:var(--sh-1);
}
.phone__label .dot{width:7px;height:7px;border-radius:99px;background:var(--primary);flex:0 0 auto;}
.phone__label span:last-child{font-weight:700;font-size:13px;color:var(--ink);}

/* ── Generic section head ────────────────────────────────────── */
.section{padding:44px var(--gutter) 8px;}
.section h2{
  font-family:var(--font-display);font-weight:600;font-size:34px;line-height:40px;
  color:var(--ink);margin:8px 0 24px;
}

/* ── Features ────────────────────────────────────────────────── */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.feature{background:var(--card);border-radius:26px;box-shadow:var(--sh-2);padding:22px;}
.feature__icon{
  width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;
}
.feature__icon .msr{font-size:26px;color:var(--ink);}
.feature h3{
  font-family:var(--font-display);font-weight:600;font-size:19px;line-height:24px;
  color:var(--ink);margin:14px 0 6px;
}
.feature p{font-weight:500;font-size:14px;line-height:21px;color:var(--ink-soft);margin:0;}

/* ── How it works (timeline) ─────────────────────────────────── */
.steps{display:flex;flex-direction:column;gap:14px;}
.step{
  background:var(--card);border-radius:26px;box-shadow:var(--sh-1);
  padding:22px 24px;display:flex;align-items:center;gap:22px;
}
.step__num{font-family:var(--font-display);font-weight:600;font-size:40px;width:44px;flex:0 0 auto;}
.step__icon{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.step__icon .msr{font-size:28px;}
.step__body{flex:1;min-width:0;}
.step h3{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink);margin:0 0 4px;}
.step p{font-weight:500;font-size:15px;line-height:22px;color:var(--ink-soft);margin:0;}

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery{padding:48px 0 8px;}
.gallery__head{padding:0 var(--gutter);}
.gallery__head h2{
  font-family:var(--font-display);font-weight:600;font-size:34px;line-height:40px;
  color:var(--ink);margin:8px 0 0;
}
.gallery__scroll{
  display:flex;gap:20px;overflow-x:auto;padding:20px var(--gutter) 24px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}

/* ── Privacy teaser ──────────────────────────────────────────── */
.privacy{padding:36px var(--gutter) 8px;}
.privacy__card{
  background:linear-gradient(160deg,#E4F3EA,var(--card));border-radius:34px;box-shadow:var(--sh-2);
  padding:34px;display:flex;gap:30px;align-items:center;
}
.privacy__card>div{flex:1;}
.privacy__card h2{
  font-family:var(--font-display);font-weight:600;font-size:30px;line-height:36px;
  color:var(--ink);margin:8px 0 16px;
}
.privacy__list{display:flex;flex-direction:column;gap:12px;}
.privacy__item{display:flex;gap:12px;align-items:flex-start;}
.privacy__item .msr{font-size:24px;color:var(--band-low);flex:0 0 auto;}
.privacy__item span:last-child{font-weight:500;font-size:15px;line-height:22px;color:var(--ink);}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-weight:700;font-size:14px;color:var(--primary);text-decoration:none;
}
.link-arrow:hover{text-decoration:underline;}
.privacy__taki{width:180px;height:180px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 16px 22px rgba(120,104,84,.16));}

/* ── Final CTA ───────────────────────────────────────────────── */
.cta{padding:44px var(--gutter) 12px;}
.cta__card{
  background:linear-gradient(160deg,var(--primary-container),var(--secondary-container));
  border-radius:34px;padding:44px;text-align:center;
}
.cta__taki{width:130px;height:130px;object-fit:contain;animation:bob 3.6s ease-in-out infinite;}
.cta__card h2{
  font-family:var(--font-display);font-weight:600;font-size:36px;line-height:42px;
  color:var(--ink);margin:10px auto 0;max-width:560px;
}
.cta__card p{
  font-weight:500;font-size:17px;line-height:26px;color:var(--ink-soft);
  margin:12px auto 24px;max-width:480px;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer{
  padding:34px var(--gutter) 40px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;border-top:1px solid var(--outline-variant);margin-top:20px;
}
.footer__brand{display:flex;align-items:center;gap:11px;}
.footer__brand img{width:34px;height:34px;object-fit:contain;}
.footer__brand .name{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);}
.footer__brand .tag{font-weight:500;font-size:12px;color:var(--ink-soft);}
.footer__links{display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.footer__links a{text-decoration:none;font-weight:700;font-size:13px;color:var(--ink-soft);}
.footer__links a:hover{color:var(--ink);}
.footer__links .copy{font-weight:500;font-size:13px;color:var(--ink-faint);}

/* ============================================================
   Legal / Privacy document pages
   ============================================================ */
body.doc-page{background:var(--cream);}
.doc{max-width:900px;margin:0 auto;padding:0 32px;}
.doc .nav{background:transparent;padding:26px 0;}
.doc__head{padding:22px 0 8px;}
.doc__head h1{
  font-family:var(--font-display);font-weight:600;font-size:42px;line-height:48px;
  color:var(--ink);margin:10px 0 6px;
}
.doc__updated{font-weight:500;font-size:14px;color:var(--ink-soft);margin:0;}
.callout{
  background:var(--blue-wash);border-radius:24px;padding:20px 22px;
  display:flex;gap:14px;align-items:flex-start;margin:22px 0 8px;
}
.callout .msr{font-size:26px;color:var(--primary);flex:0 0 auto;}
.callout p{font-weight:500;font-size:15px;line-height:23px;color:var(--ink);margin:0;}
.intro-card{
  background:linear-gradient(160deg,var(--card),var(--blue-wash));border-radius:28px;box-shadow:var(--sh-2);
  padding:26px 28px;display:flex;gap:18px;align-items:center;margin:22px 0 8px;
}
.intro-card img{width:104px;height:104px;object-fit:contain;flex:0 0 auto;}
.intro-card p{font-weight:500;font-size:16px;line-height:24px;color:var(--ink);margin:0;}

.doc__body{
  background:var(--card);border-radius:28px;box-shadow:var(--sh-2);
  padding:38px 40px;margin:20px 0 60px;
}
.doc__body .stack{display:flex;flex-direction:column;gap:28px;}
.doc__body h2{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink);margin:0 0 10px;}
.doc__body h3{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);margin:0 0 8px;}
.doc__body p{font-weight:500;font-size:15px;line-height:23px;color:var(--ink-soft);margin:0;}
.doc__body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.doc__body li{font-weight:500;font-size:15px;line-height:22px;color:var(--ink-soft);}
.doc__note{
  background:var(--blue-wash);border-radius:22px;padding:22px 24px;
  display:flex;gap:14px;align-items:flex-start;
}
.doc__note .msr{font-size:26px;color:var(--primary);flex:0 0 auto;}
.doc__note h2{font-size:21px;line-height:27px;margin:0 0 10px;}
.doc__note p{color:var(--ink);}

.doc table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;}
.doc .table-wrap{overflow-x:auto;}
.doc th{
  text-align:left;font-family:var(--font-body);font-weight:700;color:var(--ink);
  padding:12px 14px;background:var(--cream-2);
}
.doc thead th:first-child{border-radius:12px 0 0 12px;}
.doc thead th:last-child{border-radius:0 12px 12px 0;}
.doc tbody tr{border-bottom:1px solid var(--outline-variant);}
.doc tbody tr:last-child{border-bottom:0;}
.doc td{padding:12px 14px;color:var(--ink-soft);}
.doc td.k{color:var(--ink);font-weight:600;}

.doc__footer{
  padding:24px 0 48px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-top:1px solid var(--outline-variant);
}
.doc__footer .copy{font-weight:500;font-size:13px;color:var(--ink-faint);}
.doc__footer .links{display:flex;gap:22px;}
.doc__footer a{text-decoration:none;font-weight:700;font-size:13px;color:var(--ink-soft);}
.doc__footer a:hover{color:var(--ink);}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .features{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:8px;}
  .hero__copy{text-align:center;}
  .hero .lede{margin-left:auto;margin-right:auto;}
  .hero__cta,.checks{justify-content:center;}
  .hero__art{margin-top:8px;}
  .hero h1{font-size:42px;line-height:47px;}
}
@media (max-width:760px){
  :root{--gutter:24px;}
  .site{margin:0;border-radius:0;box-shadow:none;}
  .nav__links{display:none;}
  .privacy__card{flex-direction:column;text-align:center;}
  .privacy__list{text-align:left;}
  .privacy__card h2{font-size:26px;line-height:32px;}
  .intro-card{flex-direction:column;text-align:center;}
  .section h2,.gallery__head h2{font-size:28px;line-height:34px;}
  .cta__card h2{font-size:28px;line-height:34px;}
  .cta__card{padding:32px 22px;}
  .doc__body{padding:26px 22px;}
}
@media (max-width:520px){
  .features{grid-template-columns:1fr;}
  .hero h1{font-size:34px;line-height:39px;}
  .hero .lede{font-size:16px;line-height:25px;}
  .step{gap:14px;padding:18px;}
  .step__num{font-size:32px;width:34px;}
  .footer,.doc__footer{flex-direction:column;align-items:flex-start;}
}

/* ── Motion preferences ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero__taki,.cta__taki{animation:none;}
}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes bobslow{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(-2deg)}}