/* Photos, stage tints, the journey graphic and the doctor band. Loaded after calc.css (and after the hub's and hCG's own styles) on every calculator page. */
.t1{--tone:#F1E2D2;--tink:#8A4B2F}.t2{--tone:#E1EADB;--tink:#3F6B48}.t3{--tone:#F5DCCF;--tink:#A2482F}.t4{--tone:#E3E0F3;--tink:#584C96}.t5{--tone:#F4E7C6;--tink:#8A5A1C}
.gnum{position:absolute;right:-4px;top:-22px;font:600 120px/1 var(--display);color:var(--tink);opacity:.12;pointer-events:none}
.cap,.dphoto figcaption,.hphoto figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;padding:5px 12px;font:700 12px/1.3 var(--body)}

/* hub: photo beside the title, stages as tinted cards, a tinted head on each stage's list */
.hgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center}
.hphoto{margin:0;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:11/7;background:var(--panel2)}
.hphoto img{width:100%;height:100%;object-fit:cover;display:block}
.journey a[class^="t"]{position:relative;overflow:hidden;background:var(--tone);border-color:transparent;border-radius:20px;padding:20px 18px 18px;min-height:172px}
.journey a[class^="t"]:hover{border-color:var(--tink)}
.journey a[class^="t"] .n,.journey a[class^="t"] .c{color:var(--tink)}
.journey a[class^="t"] .c{font-weight:600}
.journey a[class^="t"] .ic,.journey a[class^="t"]:hover .ic{background:rgba(255,255,255,.8);border-color:transparent}
.journey a[class^="t"] .ic svg,.journey a[class^="t"]:hover .ic svg{stroke:var(--tink)}
.journey::before{display:none}
.ghead{position:relative;overflow:hidden;background:var(--tone);border-radius:22px;padding:24px 26px;margin-bottom:22px}
.ghead .gnum{right:14px;top:-30px;font-size:170px;opacity:.1}
.ghead .gk,.jk{display:block;font:700 11px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--tink)}
.ghead h2{margin:8px 0 4px}
.ghead .sub{margin:0}

/* calculator pages: which stage this is, beside the title */
.stagechip{float:right;position:relative;overflow:hidden;width:250px;margin:18px 0 12px 28px;padding:18px 18px 16px;border-radius:20px;background:var(--tone);display:flex;flex-direction:column;gap:4px;transition:transform .15s}
.stagechip:hover{transform:translateY(-2px)}
.stagechip .gnum{font-size:110px;top:-20px}
.stagechip .n{font:700 11px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--tink)}
.stagechip .t{font:500 17px/1.25 var(--display)}
.stagechip .go{font-size:13px;font-weight:700;color:var(--tink);margin-top:6px}
.calc{clear:both}

/* the journey: five stages, this one open */
.jrail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.jrail li{position:relative}
.jrail li+li::before{content:"";position:absolute;left:-10px;top:50%;width:10px;border-top:2px dashed var(--line)}
.jrail a{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;height:100%;min-height:124px;padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:border-color .15s}
.jrail a:hover{border-color:var(--coral)}
.jrail .gnum{right:-2px;top:-14px;font-size:84px;color:var(--faint);opacity:.16}
.jrail .n{font:700 11px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.jrail .t{font:500 15px/1.3 var(--display)}
.jrail .c{margin-top:auto;font-size:12px;color:var(--faint)}
.jrail .on{background:var(--tone);border-color:transparent;box-shadow:0 12px 26px -16px rgba(42,42,42,.4)}
.jrail .on .gnum{color:var(--tink);opacity:.16}
.jrail .on .n{color:var(--tink)}
.jrail .here{margin-top:auto;align-self:flex-start;background:var(--ink);color:#fff;font:700 11px/1 var(--body);padding:5px 9px;border-radius:999px}
.jrail .done .t{color:var(--mute)}
.jnow{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.jnow>div{padding:22px}
.jnow .jl{background:var(--tone)}
.jnow .jr .jk{color:var(--coral-ink)}
.jnow h3{font:500 20px/1.25 var(--display);margin:6px 0 6px}
.jnow p{margin:0;color:var(--mute);font-size:15px}
.jnow .jthis{margin-top:14px;color:var(--ink)}
.jsteps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.jsteps li{font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.65)}
.jsteps li.on{background:var(--ink);color:#fff}
.jsteps li.ar{background:none;padding:0;color:var(--tink)}
.jnext{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;counter-reset:j}
.jnext a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:15px;line-height:1.35;transition:border-color .15s}
.jnext a::before{counter-increment:j;content:counter(j);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel2);font:700 13px/1 var(--body);color:var(--coral-ink)}
.jnext a::after{content:"→";color:var(--coral-ink)}
.jnext a:hover{border-color:var(--coral)}
.jnext small{display:block;font-weight:500;font-size:12px;color:var(--faint)}

/* doctor band: clinic photo, the doctors, the three ways to reach them */
.help.docband{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;padding:0;overflow:hidden;align-items:stretch;border-radius:24px}
.help.docband.wide{grid-template-columns:minmax(0,1fr)}
.dphoto{margin:0;position:relative;min-height:280px;background:var(--panel2)}
.dphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dbody{padding:28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:0}
.dbody h2,.dbody p{margin:0}
.docs{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%}
.docs li{display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:1.3;color:var(--mute)}
.docs img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--panel);display:block}
.docs b{color:var(--ink);font-size:13px;margin-top:2px}
.dbody .dnote{font-size:12px;color:var(--faint)}
.wide .docs{gap:16px}
.wide .docs img{aspect-ratio:4/5;border-radius:18px}
.wide .docs b{font-size:15px}
.wide .docs li{font-size:13px}

/* read next: each article with its own picture */
.reads.pic{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.reads.pic a{padding:0;overflow:hidden;border-radius:16px;display:flex;flex-direction:column}
.reads.pic img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--panel2)}
.reads.pic span{padding:12px 14px 14px;font-weight:600;font-size:15px;line-height:1.35}

@media (max-width:860px){
  .hgrid{grid-template-columns:minmax(0,1fr)}
  .hphoto{display:none}
  .journey a[class^="t"]{min-height:0}
}
@media (max-width:760px){
  .stagechip{float:none;display:inline-flex;flex-direction:row;align-items:center;gap:8px;width:auto;margin:14px 0 0;padding:7px 14px;border-radius:999px}
  .stagechip .gnum,.stagechip .go{display:none}
  .stagechip .n{letter-spacing:.06em}
  .stagechip .t{font:600 13px/1.2 var(--body)}
  .jrail{grid-template-columns:minmax(0,1fr);gap:6px}
  .jrail li+li::before{display:none}
  .jrail a{min-height:0;flex-direction:row;align-items:center;gap:10px;padding:10px 14px}
  .jrail .gnum{display:none}
  .jrail .n{flex:none;width:58px}
  .jrail .c,.jrail .here{margin:0 0 0 auto;flex:none}
  .jrail .c{display:none}
  .jnow{grid-template-columns:minmax(0,1fr)}
  .jnow>div{padding:18px}
  .ghead{padding:20px}
  .ghead .gnum{font-size:130px;top:-20px}
  .help.docband{grid-template-columns:minmax(0,1fr)}
  .dphoto{min-height:0;aspect-ratio:16/9}
  .dbody{padding:20px}
  .docs,.wide .docs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .wide .docs b{font-size:13px}
  .wide .docs li{font-size:12px}
}
@media (max-width:560px){
  .reads.pic{grid-template-columns:minmax(0,1fr);gap:10px}
  .reads.pic a{flex-direction:row;align-items:center}
  .reads.pic img{width:104px;flex:none;aspect-ratio:1}
  .reads.pic span{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){.stagechip,.jrail a,.jnext a{transition:none}}