/* ============================================================================
   TOTSNAME — TWIN PAIR DETAIL PAGE   (/hub/twin-baby-names/:pair)
   ----------------------------------------------------------------------------
   Loaded only on that route (hubController.twinPair sends pageCss:'twin-pair').
   Everything is scoped under .twp, so no other page is affected.

   ON !important — style.css ends with a global sweep that repaints every
   h1/h2/h3 brand-pink with !important. Headings here are navy (same decision
   as name-detail.css), so the heading colour is restated at equal weight.
   Nowhere else uses !important.

   ONE IMAGE — the hero illustration. Every other visual is CSS or inline SVG.
   ========================================================================== */

.twp{
  --navy:#102A6B;
  --ink:#27324F;
  --muted:#667091;
  --pink:#E7207B;
  --pink-dk:#C8166A;
  --pink-lt:#FCEAF3;
  --pink-soft:#FFF6FA;
  --blue:#1667C4;
  --blue-lt:#E8F2FE;
  --blue-soft:#F5F9FF;
  --cream:#FFF8EE;
  --line:#E6E8F1;
  --card:#FFFFFF;
  --page:#FBFBFD;
  --radius:18px;
  --shadow:0 1px 2px rgba(16,42,107,.04), 0 8px 24px -18px rgba(16,42,107,.25);
  --display:'Cormorant Garamond','Noto Sans Devanagari',Georgia,serif;
  --body:'DM Sans','Noto Sans Devanagari','Helvetica Neue',Arial,sans-serif;

  background:var(--page);
  color:var(--ink);
  font-family:var(--body);
  padding:22px 0 64px;
  overflow-x:clip;
}
.twp *,.twp *::before,.twp *::after{ box-sizing:border-box; }
.twp-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* Heading colour (defeats the global pink sweep in style.css) */
.twp h1,.twp h2,.twp h3,.twp h1 span,.twp h2 span{
  color:var(--navy) !important; -webkit-text-fill-color:var(--navy) !important; background:none !important;
}

.twp-i{ width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:middle; }

/* ---- Breadcrumb ---------------------------------------------------------- */
.twp-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); margin:0 0 18px; }
.twp-crumb a{ color:var(--blue); text-decoration:none; }
.twp-crumb a:hover{ text-decoration:underline; }
.twp-crumb [aria-current]{ color:var(--ink); font-weight:600; }
.twp-sep{ color:#B5BBCF; }

/* ---- Hero ---------------------------------------------------------------- */
.twp-hero{
  display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:40px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:24px; padding:28px 40px 28px 28px;
  box-shadow:var(--shadow);
}
.twp-hero-media{ margin:0; border-radius:18px; background:#FEFEFE; overflow:hidden; max-width:460px; width:100%; justify-self:center; }
.twp-hero-media img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.twp-hero-media.is-mirrored img{ transform:scaleX(-1); }

.twp-kicker{ display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px; font-weight:600; color:#D6005E; }
.twp-kicker .twp-i{ width:17px; height:17px; }

/* Name pair: the names sit on a 3-column grid (name · heart · name) and the
   meaning + gender rows reuse the same columns, so each line sits exactly
   under its own name. */
.twp-pairgrid{
  display:grid; grid-template-columns:minmax(0,max-content) auto minmax(0,max-content);
  column-gap:18px; row-gap:4px; align-items:baseline; justify-content:start;
}
.twp-title{
  grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:center;
  margin:0; font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.5px;
  font-size:clamp(38px,5.2vw,62px);
}
.twp-n{ overflow-wrap:anywhere; }
.twp-join{ display:flex; align-items:center; justify-content:center; }
.twp .twp-heart{ width:.5em; height:.5em; color:#D6005E; fill:var(--pink); stroke:var(--pink); }
.twp-m{ margin:6px 0 0; font-family:var(--display); font-size:clamp(19px,1.8vw,23px); font-style:italic; font-weight:600; color:var(--ink); }
.twp-m-a,.twp-g-a{ grid-column:1; }
.twp-m-b,.twp-g-b{ grid-column:3; }
.twp-g{ margin:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:14px; font-weight:600; color:var(--muted); }
.twp-sym{ font-size:15px; line-height:1; }
.twp-g.is-boy .twp-sym{ color:var(--blue); }
.twp-g.is-girl .twp-sym{ color:#D6005E; }

.twp-lede{ margin:18px 0 0; max-width:48ch; font-size:16.5px; line-height:1.6; color:var(--ink); }

.twp-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.twp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  padding:0 18px; border-radius:100px; border:1px solid var(--line); background:var(--card);
  color:var(--navy); font:600 14.5px/1 var(--body); text-decoration:none; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.twp-btn .twp-i{ width:17px; height:17px; }
.twp-btn:hover{ border-color:#C4CCE2; background:var(--blue-soft); }
.twp-btn-primary{ background:var(--pink); border-color:var(--pink); color:#fff; }
.twp-btn-primary:hover{ background:var(--pink-dk); border-color:var(--pink-dk); color:#fff; }
.twp-save.is-on{ background:var(--pink-lt); border-color:#F5B9D5; color:var(--pink-dk); }
.twp-save.is-on .twp-i{ fill:currentColor; }
.twp-say.is-speaking{ box-shadow:0 0 0 4px rgba(231,32,123,.18); }
.twp .twp-btn:focus-visible,.twp a:focus-visible,.twp summary:focus-visible,.twp .twp-play:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px; box-shadow:none;
}

/* ---- Highlights strip ---------------------------------------------------- */
.twp-hl{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.twp-hl li{ display:flex; align-items:center; gap:14px; padding:18px 20px; min-width:0; }
.twp-hl li + li{ border-left:1px solid var(--line); }
.twp-hl-ico{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--pink-lt); color:#D6005E;
}
.twp-hl li:nth-child(2) .twp-hl-ico{ background:#EAF6EF; color:#1F8A56; }
.twp-hl li:nth-child(3) .twp-hl-ico{ background:var(--blue-lt); color:var(--blue); }
.twp-hl li:nth-child(4) .twp-hl-ico{ background:var(--cream); color:#C98A12; }
.twp-hl-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.twp-hl-txt b{ font-size:14px; color:var(--navy); line-height:1.3; }
.twp-hl-txt span{ font-size:13.5px; color:var(--muted); overflow-wrap:anywhere; }

/* ---- Cards (shared) ------------------------------------------------------ */
.twp-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; min-width:0; }
.twp-h2{ display:block; margin:0 0 16px; font-family:var(--body); font-size:20px; font-weight:700; line-height:1.3; }
.twp-h2 .twp-i{ color:#D6005E; margin-right:10px; vertical-align:-3px; }
.twp-p{ margin:0 0 10px; font-size:15px; line-height:1.65; color:var(--ink); }
.twp-p:last-child{ margin-bottom:0; }

/* ---- Name | Why | Name --------------------------------------------------- */
.twp-trio{
  margin-top:28px; display:grid; gap:20px; align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
  grid-template-areas:"a why b";
}
.twp-person-a{ grid-area:a; }
.twp-person-b{ grid-area:b; }
.twp-why{ grid-area:why; }

.twp-person{ display:flex; flex-direction:column; border-top-width:4px; }
.twp-person.is-boy{ border-top-color:#8DB8EE; }
.twp-person.is-girl{ border-top-color:#F2A2C7; }
.twp-person-head{ display:flex; align-items:center; gap:14px; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.twp-badge{
  width:48px; height:48px; flex:0 0 48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; background:var(--blue-lt); color:var(--blue);
}
.twp-person.is-girl .twp-badge{ background:var(--pink-lt); color:#D6005E; }
.twp-person-name{ margin:0; font-family:var(--display); font-size:34px; font-weight:700; line-height:1; letter-spacing:-.3px; overflow-wrap:anywhere; }
.twp-person-hi{ margin:4px 0 0; font-size:15px; color:var(--muted); }

.twp-facts{ margin:0; flex:1 1 auto; }
.twp-facts > div{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
.twp-facts > div:last-child{ border-bottom:0; }
.twp-facts dt{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--muted); }
.twp-facts dt .twp-i{ width:16px; height:16px; color:#9AA3BE; }
.twp-facts dd{ margin:0; font-size:14.5px; font-weight:600; color:var(--navy); overflow-wrap:anywhere; }
.twp-pop dd{ display:flex; align-items:center; gap:10px; }
.twp-pop-n{ flex:0 0 auto; }
.twp-bar{ flex:1 1 auto; height:6px; border-radius:6px; background:#EEF0F6; overflow:hidden; }
.twp-bar i{ display:block; height:100%; border-radius:6px; background:var(--blue); }
.twp-person.is-girl .twp-bar i{ background:var(--pink); }

.twp-link{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:14.5px; font-weight:700; color:#D6005E; text-decoration:none;
}
.twp-link .twp-i{ width:16px; height:16px; transition:transform .15s ease; }
.twp-link:hover{ color:var(--pink-dk); }
.twp-link:hover .twp-i{ transform:translateX(3px); }

/* Why card — two overlapping circles, the shared lens holds the heart */
.twp-why{ text-align:center; background:linear-gradient(180deg,#FFFFFF 0%,var(--cream) 100%); }
.twp-why .twp-h2{ justify-content:center; }
.twp-venn{ position:relative; display:flex; justify-content:center; margin:6px 0 14px; }
.twp-orb{
  width:150px; height:150px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:0 30px 0 14px; text-align:center; background:rgba(22,103,196,.10); border:1px solid rgba(22,103,196,.22);
}
.twp-orb + .twp-orb{ margin-left:-34px; padding:0 14px 0 30px; }
.twp-orb.is-girl{ background:rgba(231,32,123,.09); border-color:rgba(231,32,123,.24); }
.twp-orb b{ font-family:var(--display); font-size:22px; font-weight:700; color:var(--navy); line-height:1.05; overflow-wrap:anywhere; }
.twp-orb span{ font-size:12.5px; color:var(--muted); line-height:1.3; }
.twp-venn-heart{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(231,32,123,.25); color:#D6005E;
}
.twp-venn-heart .twp-i{ width:15px; height:15px; fill:var(--pink); }
.twp-balance{
  display:inline-block; margin:0 0 14px; padding:7px 16px; border-radius:100px;
  background:var(--card); border:1px solid #F3C4DA; color:var(--pink-dk); font-weight:700; font-size:15px;
}
.twp-why .twp-p{ font-size:14.5px; color:var(--ink); }

/* ---- Pronunciation ------------------------------------------------------- */
.twp-pron{ margin-top:28px; }
.twp-pron-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.twp-pron-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0;
  padding:14px 16px; border-radius:14px; background:var(--blue-soft); border:1px solid #DCE8F8;
}
.twp-pron-item.is-girl{ background:var(--pink-soft); border-color:#F6D6E6; }
.twp-pron-item > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.twp-pron-item b{ font-size:17px; color:var(--navy); overflow-wrap:anywhere; }
.twp-phon{ font-size:14px; color:var(--muted); letter-spacing:.02em; overflow-wrap:anywhere; }
.twp-pron-together{ background:var(--cream); border-color:#F2E3C9; }
.twp-play{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; color:#D6005E; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.twp-play:hover{ background:var(--pink-lt); border-color:#F3C4DA; }
.twp-note{ margin:12px 0 0; font-size:13.5px; color:var(--muted); }

/* style.css gives every <section> 46px vertical padding; the unboxed sections
   here space themselves with margin-top instead. */
.twp-tags,.twp-similar,.twp-faq{ padding:0; }

/* ---- Tag chips ----------------------------------------------------------- */
.twp-tags{ margin-top:32px; }
.twp-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.twp-chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:100px;
  background:var(--card); border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--navy);
}
.twp-chip .twp-i{ width:15px; height:15px; color:#D6005E; }
.twp-chip-sym{ color:#D6005E; font-size:15px; line-height:1; }

/* ---- Similar pairs (whole card = one link) ------------------------------- */
.twp-similar{ margin-top:36px; }
.twp-sim-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.twp-sim{
  display:flex; flex-direction:column; gap:8px; min-width:0; height:100%;
  padding:18px 18px 16px; border-radius:16px; background:var(--card); border:1px solid var(--line);
  text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.twp-sim:hover{ border-color:#F0B4CF; box-shadow:0 10px 24px -18px rgba(231,32,123,.6); }
.twp-sim-names{ font-family:var(--display); font-size:24px; font-weight:700; line-height:1.1; color:var(--navy); overflow-wrap:anywhere; }
.twp-sim-heart{ color:#D6005E; font-size:.7em; vertical-align:.12em; }
.twp-sim-mean{ font-size:13.5px; color:var(--muted); line-height:1.45; }
.twp-sim-foot{ margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.twp-sim-combo{ font-size:13px; font-weight:700; color:var(--navy); }
.twp-sim-go{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--pink-lt); color:#D6005E; }
.twp-sim-go .twp-i{ width:15px; height:15px; transition:transform .15s ease; }
.twp-sim:hover .twp-sim-go .twp-i{ transform:translateX(2px); }

/* ---- Also like + Tips ---------------------------------------------------- */
.twp-duo{ margin-top:36px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.twp-also ul,.twp-tips ul{ list-style:none; margin:0; padding:0; }
.twp-also li + li{ border-top:1px solid var(--line); }
.twp-also a{ display:flex; align-items:center; gap:10px; padding:11px 2px; font-size:15px; font-weight:600; color:var(--navy); text-decoration:none; }
.twp-also a .twp-i{ width:16px; height:16px; color:#D6005E; transition:transform .15s ease; }
.twp-also a:hover{ color:var(--pink-dk); }
.twp-also a:hover .twp-i{ transform:translateX(3px); }
.twp-tips{ background:var(--cream); border-color:#F2E3C9; }
.twp-tips li{ display:flex; align-items:flex-start; gap:12px; padding:8px 0; font-size:15px; line-height:1.55; color:var(--ink); }
.twp-tips li .twp-i{
  width:22px; height:22px; flex:0 0 22px; padding:4px; margin-top:1px; border-radius:50%;
  background:#fff; color:#1F8A56; border:1px solid #CDE9D9; stroke-width:3;
}

/* ---- FAQ ----------------------------------------------------------------- */
.twp-faq{ margin-top:36px; }
.twp-faq-list{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.twp-faq details + details{ border-top:1px solid var(--line); }
.twp-faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 22px; font-size:15.5px; font-weight:600; color:var(--navy);
}
.twp-faq summary::-webkit-details-marker{ display:none; }
.twp-faq summary .twp-i{ color:#D6005E; transition:transform .2s ease; }
.twp-faq details[open] summary .twp-i{ transform:rotate(180deg); }
.twp-faq details p{ margin:0; padding:0 22px 18px; font-size:15px; line-height:1.65; color:var(--ink); max-width:80ch; }

/* ---- Final CTA ----------------------------------------------------------- */
.twp-cta{
  margin-top:40px; text-align:center; padding:40px 24px; border-radius:24px;
  background:linear-gradient(135deg,var(--pink-soft) 0%,#FFFFFF 50%,var(--blue-soft) 100%);
  border:1px solid var(--line);
}
.twp-cta-ico{ display:inline-flex; width:48px; height:48px; border-radius:50%; align-items:center; justify-content:center; background:#fff; color:#D6005E; box-shadow:0 2px 10px rgba(231,32,123,.18); }
.twp-cta-ico .twp-i{ fill:var(--pink); }
.twp-cta h2{ margin:14px 0 8px; font-family:var(--display); font-size:clamp(28px,3.4vw,38px); font-weight:700; line-height:1.1; }
.twp-cta p{ margin:0 auto 20px; max-width:46ch; font-size:16px; color:var(--muted); }

/* ---- Toast --------------------------------------------------------------- */
.twp-toast{
  position:fixed; left:50%; bottom:88px; transform:translate(-50%,12px); z-index:2147483100;
  padding:11px 20px; border-radius:100px; background:var(--navy,#102A6B); color:#fff; font:600 14px/1.3 'DM Sans',sans-serif;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-width:calc(100vw - 32px);
}
.twp-toast.is-show{ opacity:1; transform:translate(-50%,0); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .twp-hero{ padding:24px; gap:28px; }
  .twp-hl li{ padding:16px 14px; gap:10px; }
}
@media (max-width:1023px){
  .twp-trio{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"a b" "why why"; }
  .twp-sim-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .twp-pron-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .twp-pron-together{ grid-column:1 / -1; }
  .twp-hl{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .twp-hl li:nth-child(3){ border-left:0; }
  .twp-hl li:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:819px){
  .twp-hero{ grid-template-columns:1fr; text-align:left; }
  .twp-hero-media{ max-width:440px; }
  .twp-duo{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .twp-trio{ grid-template-columns:1fr; grid-template-areas:"a" "why" "b"; }
}
@media (max-width:560px){
  .twp{ padding-top:14px; }
  .twp-wrap{ padding:0 14px; }
  .twp-hero{ padding:16px; border-radius:20px; gap:18px; }
  .twp-pairgrid{ column-gap:10px; }
  .twp-lede{ font-size:15.5px; }
  .twp-actions .twp-btn{ flex:1 1 auto; padding:0 14px; }
  .twp-hl li{ flex-direction:column; align-items:flex-start; gap:8px; padding:14px; }
  .twp-card{ padding:18px; }
  .twp-facts > div{ grid-template-columns:104px minmax(0,1fr); }
  .twp-pron-row{ grid-template-columns:1fr; }
  .twp-sim-grid{ grid-template-columns:1fr; }
  .twp-orb{ width:132px; height:132px; }
  .twp-faq summary{ padding:15px 16px; }
  .twp-faq details p{ padding:0 16px 16px; }
}
@media (max-width:360px){
  .twp-hl{ grid-template-columns:1fr; }
  .twp-hl li + li{ border-left:0; border-top:1px solid var(--line); }
  .twp-orb{ width:118px; height:118px; padding:0 22px 0 10px; }
  .twp-orb + .twp-orb{ padding:0 10px 0 22px; margin-left:-28px; }
}
@media (prefers-reduced-motion:reduce){
  .twp *{ transition:none !important; }
}

/* ---- Dark theme (site toggle) -------------------------------------------- */
[data-theme="dark"] .twp{
  --navy:#E6ECFF; --ink:#D4D9EA; --muted:#A6AECB; --line:#2B3450; --card:#171D30; --page:#10152A;
  --blue-soft:#15223C; --pink-soft:#2A1628; --cream:#221C14; --blue-lt:#1B2C4C; --pink-lt:#3A1A31;
}
[data-theme="dark"] .twp-hero-media{ background:#FEFEFE; }
[data-theme="dark"] .twp-why{ background:linear-gradient(180deg,var(--card) 0%,var(--cream) 100%); }
[data-theme="dark"] .twp-venn-heart,[data-theme="dark"] .twp-play,[data-theme="dark"] .twp-cta-ico,[data-theme="dark"] .twp-tips li .twp-i{ background:var(--card); }
[data-theme="dark"] .twp-btn{ background:var(--card); }
[data-theme="dark"] .twp-btn-primary{ background:var(--pink); color:#fff; }
[data-theme="dark"] .twp-cta{ background:linear-gradient(135deg,var(--pink-soft) 0%,var(--card) 50%,var(--blue-soft) 100%); }
[data-theme="dark"] .twp-toast{ background:#E7207B; }