/* care page styles (ported). */
/* ============ PRODUCT PAGE ============ */
  .p-hero{position:relative;overflow:hidden;color:#fff;
    background:radial-gradient(120% 130% at 78% 30%, #7a41ad 0%, #5d2f88 34%, #3c1c5c 74%, #281340 100%)}
  .p-hero .wrap{position:relative;z-index:3}
  .p-hero-grid{padding-block:66px 32px}
  .p-hero-copy{max-width:none}
  .p-hero h1{font-size:clamp(2.2rem,4.9vw,3.65rem);font-weight:800;letter-spacing:-.016em;line-height:1.05;margin:18px 0 0;text-transform:uppercase}
  .p-hero .sub{font-family:var(--font-playfair),Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--lilac);margin:14px 0 0}
  .p-hero .lead{color:rgba(255,255,255,.82);font-size:1.06rem;line-height:1.68;margin:20px 0 0;max-width:74ch}
  .p-hero .cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;align-items:center}


  /* how cover works: principles + illustration */
  .prin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
  .prin{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px;box-shadow:var(--shadow)}
  .prin h4{font-size:1.04rem;margin:0 0 7px}
  .prin p{font-size:.9rem;color:var(--ink);opacity:.8;line-height:1.55;margin:0}
  .illus{border:2px dashed var(--lilac);border-radius:18px;background:#fff;padding:26px 28px}
  .illus-chip{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:#8a5a00;background:#FDF0DC;border:1px solid #F3D6A4;padding:5px 12px;border-radius:999px}
  .illus-note{font-size:.9rem;color:var(--muted);margin:12px 0 20px;line-height:1.6;max-width:78ch}
  .itable{width:100%;border-collapse:separate;border-spacing:0}
  .itable th{padding:10px 14px;text-align:left;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--purple);background:var(--lilac-soft);border-bottom:1px solid var(--lilac-line);font-weight:800}
  .itable th:first-child{border-radius:9px 0 0 0}
  .itable th:last-child{border-radius:0 9px 0 0}
  .itable td{padding:14px;font-size:.93rem;border-bottom:1px dashed var(--lilac-line);color:var(--ink);vertical-align:top;line-height:1.55}
  .itable tbody tr:last-child td{border-bottom:none}
  .itable .tname{font-family:var(--font-playfair),Georgia,serif;font-weight:700;color:var(--purple);font-size:1.05rem}
  .itable .bal{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  .illus-foot{margin-top:18px;padding-top:16px;border-top:1px dashed var(--lilac-line);font-size:.86rem;color:var(--muted);line-height:1.6}

  .p-stats{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(3,1fr)}
  .p-stats .item{padding:22px 28px}
  .p-stats .item:first-child{padding-left:0}
  .p-stats .item:last-child{padding-right:0}
  .p-stats .item + .item{border-left:1px solid rgba(255,255,255,.13)}
  .p-stats .num{font-family:var(--font-playfair),Georgia,serif;font-size:1.6rem;font-weight:600;color:#fff;line-height:1;display:block;white-space:nowrap}
  .p-stats .num b{color:var(--orange);font-weight:600}
  .p-stats .lbl{font-size:.79rem;color:rgba(255,255,255,.62);margin-top:9px;line-height:1.5;display:block;max-width:34ch}

  /* problem cards */
  .risk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .risk{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:var(--shadow);
    transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;border-top:3px solid var(--orange)}
  .risk:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
  .risk h3{font-size:1.16rem;margin:0 0 8px}
  .risk p{font-size:.95rem;color:var(--ink);opacity:.82;line-height:1.6;margin:0}
  .risk-note{margin-top:28px;font-size:1rem;color:var(--muted);max-width:70ch}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
  .pstep{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:24px 22px;box-shadow:var(--shadow);
    transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
  .pstep:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--lilac)}
  /* the number sits in normal flow inside the card. It used to be absolutely
     positioned at top:0 with a connector rule beside it, which left both the
     number and the line sitting outside the card border. */
  .pstep::before{counter-increment:s;content:"0" counter(s);display:block;
    padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
    font-family:var(--font-playfair),Georgia,serif;font-size:.92rem;font-weight:700;color:var(--purple);letter-spacing:.04em}
  .pstep h3{font-size:1.08rem;margin:0 0 8px}
  .pstep p{font-size:.93rem;color:var(--ink);opacity:.82;line-height:1.6;margin:0}

  /* tier table */
  .tiers{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

  /* benefit cards */
  .ben-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .ben{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px;box-shadow:var(--shadow);
    transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
  .ben:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--lilac)}
  .ben .ico{width:44px;height:44px;border-radius:11px;background:var(--lilac-soft);display:flex;align-items:center;
    justify-content:center;color:var(--purple);margin-bottom:16px}
  .ben h3{font-size:1.22rem;margin:0 0 10px}
  .ben p{font-size:.95rem;color:var(--ink);opacity:.82;line-height:1.62;margin:0}
  .ben .link{display:block;margin-top:14px;font-size:.86rem;color:var(--purple);font-weight:600;
    border-top:1px dashed var(--lilac-line);padding-top:12px}

  /* roles */
  .roles{background:var(--purple-ink);color:#fff;position:relative;overflow:hidden}
  .roles .hex{opacity:.22}
  .role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
  .role{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 26px}
  .role.us{background:linear-gradient(160deg, rgba(179,163,202,.18), rgba(255,255,255,.05));border-color:var(--lilac)}
  .role .k{font-family:var(--font-playfair),Georgia,serif;font-size:.92rem;color:var(--lilac);font-style:italic}
  .role h3{font-size:1.3rem;margin:6px 0 12px;color:#fff}
  .role p{font-size:.94rem;color:rgba(255,255,255,.78);line-height:1.6;margin:0 0 14px}
  .role .tagr{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:6px}
  .role.us .tagr{background:var(--orange);border-color:transparent;color:#3C1C5C}

  /* launch steps */
  .launch{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:l}
  .lstep{padding:22px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  .lstep .n{counter-increment:l;font-family:var(--font-playfair),Georgia,serif;font-weight:700;color:var(--purple);font-size:.9rem}
  .lstep h4{font-size:1rem;margin:8px 0 6px}
  .lstep p{font-size:.86rem;color:var(--ink);opacity:.78;line-height:1.55;margin:0}
  .pilot{margin-top:26px;background:var(--lilac-soft);border:1px solid var(--lilac-line);border-radius:14px;
    padding:20px 24px;font-size:.95rem;color:var(--ink);line-height:1.6}
  .pilot b{color:var(--purple)}

  @media(max-width:960px){
    .p-hero-grid{padding-block:44px 20px}
    .risk-grid,.steps,.role-grid,.ben-grid,.prin-grid{grid-template-columns:1fr}
    .launch{grid-template-columns:repeat(2,1fr)}
    .illus{padding:20px 18px}
    /* scroll the table instead of letting four columns crush into the width */
    .itable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .itable thead,.itable tbody{display:table;width:100%;min-width:520px}
  }
  @media(max-width:720px){
    .p-stats{grid-template-columns:1fr}
    .p-stats .item{padding:16px 14px}
    .p-stats .item + .item{border-left:none;border-top:1px solid rgba(255,255,255,.13)}
    .p-stats .lbl{max-width:none}
    .launch{grid-template-columns:1fr}
  }
  @media(max-width:480px){
    .p-hero-grid{padding-block:38px 18px}
    .risk,.ben,.role{padding:22px 18px}
    .prin,.lstep{padding:18px 16px}
    .ben h3,.role h3{font-size:1.12rem}
    .illus{padding:18px 14px;border-radius:14px}
    .illus-note{font-size:.86rem}
    .itable td{padding:11px 10px;font-size:.88rem}
    .itable th{padding:9px 10px}
    .pilot{padding:18px 16px}
    .p-hero .cta{flex-direction:column;align-items:stretch}
    .p-hero .cta .btn{width:100%;justify-content:center}
  }