/* ==========================================================================
   IPH Subscription Plans section  (Indo Property Hub)
   Every rule is scoped to .iph-subs so nothing leaks into the theme.
   Fonts: Poppins (400-800) and Roboto (400/500) from Google Fonts.
   ========================================================================== */
.iph-subs {
  --wall: #dcdcdf;
  --wall-light: #ebebed;
  --charcoal: #2b2d31;
  --charcoal-soft: #5b5f66;
  --rule: rgba(43, 45, 49, 0.12);
  --orange: #f07a4f;
  --orange-deep: #e2643a;
  --table: #ffffff;
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 28px;
  color-scheme: light;
}
.iph-subs, .iph-subs * { box-sizing: border-box; }
.iph-subs {
  margin: 0;
  font-family: var(--font);
  color: var(--charcoal);
  overflow-x: hidden;
  background-color: var(--wall);
  /* plaster wall: fine grain + broad mottling + light falling from above */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .4  0 0 0 0 .42  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 -.05'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    radial-gradient(120% 70% at 50% 0%, var(--wall-light) 0%, rgba(235,235,237,0) 70%);
}

.iph-subs .scene {
  position: relative;
  overflow: hidden;
  padding-block: 40px 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- charcoal glass billing toggle ---------- */
.iph-subs .billing {
  margin-top: 28px;
  position: relative;
  padding: 6px;
  border-radius: 999px;
  border: 3px solid transparent;
  background:
    linear-gradient(165deg, #45474d 0%, #2c2e33 50%, #1f2024 100%) padding-box,
    radial-gradient(30% 10% at 50% 0%, #c9f3ff 0%, rgba(201,243,255,0) 100%) border-box,
    linear-gradient(180deg, #ffffff 0%, #b9bdc2 18%, #7e8288 45%, #d7d9dc 60%, #85898f 85%, #e9eaec 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -6px 14px rgba(0,0,0,0.35),
    0 0 0 0.5px rgba(43,45,49,0.4),
    0 14px 26px -10px rgba(43,45,49,0.45),
    0 30px 50px -24px rgba(43,45,49,0.35);
}
.iph-subs .billing::after {          /* glossy reflection */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 48%, rgba(255,255,255,0.14) 56%, rgba(255,255,255,0) 72%),
              linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 40%);
}
.iph-subs .billing-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 999px;
  background: #18191c;
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.08);
  padding: 3px;
}
.iph-subs .billing-knob {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #f8936b 0%, var(--orange) 45%, #dc5e33 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.65),
    inset 0 -3px 5px rgba(160,55,20,0.4),
    0 3px 6px rgba(0,0,0,0.5),
    0 0 18px rgba(240,122,79,0.45);
  transition: transform .45s cubic-bezier(.5,1.6,.4,1);
}
.iph-subs .billing[data-period="year"] .billing-knob { transform: translateX(100%); }
.iph-subs .billing button {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  min-width: 150px;
  padding: 10px 30px;
  font: 700 1.05rem/1 var(--font);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
  border-radius: 999px;
  transition: color .3s;
}
.iph-subs .billing button[aria-checked="true"] {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(140,45,15,0.6), 0 2px 4px rgba(140,45,15,0.3);
}
.iph-subs .billing button:focus-visible { outline: 2px solid rgba(240,122,79,0.6); outline-offset: 2px; }

/* ---------- carousel stage ---------- */
.iph-subs .stage-box { position: relative; width: 100%; margin-top: 18px; }
.iph-subs .stage {
  position: absolute; left: 50%; top: 0;
  transform-origin: 50% 0;
}
.iph-subs .carousel {
  position: absolute; inset: 0;
  perspective: 1600px;
}
.iph-subs .slot {
  position: absolute;
  left: 50%; top: 0;
  width: 300px; margin-left: -150px;
  padding-bottom: 60px;
  will-change: transform;
  transform-origin: 50% 100%;
  cursor: pointer;
}
.iph-subs .slot.is-front { cursor: default; }
/* tiles away from the front skip the live backdrop blur (it re-renders every frame over the moving map) and
   carry a little more frost instead */
.iph-subs .slot:not(.is-front) .iph-tile {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(165deg, rgba(247,247,248,0.9) 0%, rgba(236,236,238,0.9) 45%, rgba(230,230,233,0.9) 100%) padding-box;
}


/* ---------- table ---------- */
.iph-subs .table-edge { position: absolute; left: 0; right: 0; }
.iph-subs .table-top { position: absolute; }
.iph-subs .table-top {
  background: linear-gradient(180deg, #e9e9eb 0%, #f4f4f5 30%, #fcfcfc 80%, #fefefe 100%);
}
.iph-subs .table-edge {
  height: 78px;
  /* the turn from top to edge is shown by light only: the face falls into soft shade */
  background: linear-gradient(180deg, #f2f2f3 0%, #ebebed 25%, #e2e2e5 70%, #d9d9dc 100%);
  box-shadow: 0 26px 40px -18px rgba(43,45,49,0.32);
  display: flex; align-items: center; justify-content: center; gap: 56px;
}


/* ---------- 3D triangle arrows ---------- */
.iph-subs .arrow {
  width: 64px; height: 56px;
  border: 0; padding: 0; background: none; cursor: pointer;
  transition: transform .15s, opacity .3s, filter .3s;
  filter: drop-shadow(0 4px 4px rgba(43,45,49,0.28)) drop-shadow(0 10px 12px rgba(226,100,58,0.25));
}
.iph-subs .arrow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.iph-subs .arrow:hover:not(:disabled) { transform: translateY(-2px); filter: drop-shadow(0 6px 6px rgba(43,45,49,0.28)) drop-shadow(0 12px 16px rgba(226,100,58,0.35)); }
.iph-subs .arrow:active:not(:disabled) { transform: translateY(2px); filter: drop-shadow(0 1px 2px rgba(43,45,49,0.3)); }
.iph-subs .arrow:disabled { opacity: 0.32; cursor: default; filter: grayscale(0.4) drop-shadow(0 2px 2px rgba(43,45,49,0.2)); }
.iph-subs .arrow:focus-visible { outline: 3px solid rgba(240,122,79,0.45); outline-offset: 6px; border-radius: 10px; }

/* ---------- the tile (as built) ---------- */
.iph-subs .iph-tile {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  padding: 30px 28px 28px;
  display: flex; flex-direction: column;
  border: 3.5px solid transparent;
  background:
    linear-gradient(165deg, rgba(247,247,248,0.8) 0%, rgba(236,236,238,0.8) 45%, rgba(230,230,233,0.8) 100%) padding-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    inset 0 2px 6px rgba(255,255,255,0.8),
    inset 0 -8px 18px rgba(43,45,49,0.04),
    0 0 0 0.5px rgba(43,45,49,0.25),
    0 24px 50px -20px rgba(43,45,49,0.28),
    0 6px 40px rgba(43,45,49,0.08);
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
  animation: iph-float 6s ease-in-out infinite;
}
/* chrome rim drawn as a ring only, so the glass inside stays see-through */
.iph-subs .iph-tile::before {
  content: "";
  position: absolute; inset: -3.5px;
  border-radius: var(--radius);
  padding: 3.5px;
  background:
    radial-gradient(30% 6% at 50% 0%, #c9f3ff 0%, rgba(201,243,255,0) 100%),
    radial-gradient(30% 6% at 50% 100%, #b9eeff 0%, rgba(185,238,255,0) 100%),
    linear-gradient(180deg, #ffffff 0%, #c4c7cc 12%, #8f9399 30%, #e9eaec 50%, #8f9399 70%, #b8bcc1 88%, #f4f5f6 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.iph-subs .iph-tile::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: calc(var(--radius) - 3.5px);
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 52%, rgba(255,255,255,0.55) 58%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0) 82%),
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 18%);
  pointer-events: none;
}
.iph-subs .iph-tile > * { position: relative; z-index: 1; }
.iph-subs .iph-tile > .iph-charge-back { position: absolute; z-index: 0; pointer-events: none; }
@keyframes iph-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.iph-subs .iph-shadow {
  position: absolute; left: 12%; right: 12%; bottom: 16px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43,45,49,0.30), rgba(43,45,49,0.10) 60%, transparent);
  filter: blur(6px);
  animation: iph-shadow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes iph-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.9); opacity: 0.7; } }

.iph-subs .iph-tile h3, .iph-subs .iph-tile .lede, .iph-subs .iph-price, .iph-subs .iph-features li {
  text-shadow: 0 -1px 0 rgba(255,255,255,0.95), 0 1px 1px rgba(43,45,49,0.22), 0 2px 4px rgba(43,45,49,0.10);
}
.iph-subs .iph-tile .cat {
  /* full-width category band across the top of the card, inside the chrome rim */
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: -30px -28px 20px;
  padding: 13px 20px 12px;
  border-radius: calc(var(--radius) - 3.5px) calc(var(--radius) - 3.5px) 0 0;
  font: 700 0.9rem/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 4px rgba(0,0,0,0.18), 0 2px 4px rgba(43,45,49,0.15);
}
.iph-subs .iph-tile .cat svg { width: 18px; height: 18px; flex: none; stroke: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.iph-subs .iph-tile .cat--properties { background: linear-gradient(180deg, #4a4c52 0%, #2b2d31 55%, #1f2024 100%); }
.iph-subs .iph-tile .cat--services {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #f8936b 0%, var(--orange) 50%, #d95a30 100%);
  text-shadow: 0 1px 1px rgba(140,45,15,0.6);
}
.iph-subs .iph-tile h3 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.iph-subs .iph-tile .lede { margin: 0 0 18px; color: var(--charcoal-soft); font-size: 0.92rem; line-height: 1.5; min-height: 3em; }
.iph-subs .iph-price {
  display: flex; align-items: flex-start; gap: 4px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  transition: opacity .25s;
}
.iph-subs .iph-price.is-swapping { opacity: 0; }
.iph-subs .iph-price .cur { font-size: 0.92rem; font-weight: 600; margin-top: 8px; color: var(--charcoal-soft); }
.iph-subs .iph-price .amt { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.iph-subs .iph-price .per { font-size: 1rem; font-weight: 500; align-self: flex-end; color: var(--charcoal-soft); margin-bottom: 4px; }
.iph-subs .iph-features { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.iph-subs .iph-features li { display: flex; align-items: center; gap: 13px; font-size: 0.94rem; font-weight: 600; }
.iph-subs .iph-features svg {
  flex: none; width: 24px; height: 24px; border-radius: 50%; padding: 5px;
  background:
    radial-gradient(60% 50% at 38% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #f8936b 0%, var(--orange) 50%, #d95a30 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -2px 3px rgba(160,55,20,0.35), 0 2px 3px rgba(43,45,49,0.25), 0 4px 8px -2px rgba(226,100,58,0.45);
  stroke: #fff; stroke-width: 3.6;
  filter: drop-shadow(0 1px 0.6px rgba(140,45,15,0.55));
}
.iph-subs .iph-btn {
  margin-top: auto;
  display: block; width: 100%;
  border: 0; border-radius: 999px;
  padding: 15px 24px;
  font: 700 1rem/1 var(--font); letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(140,45,15,0.55), 0 2px 4px rgba(140,45,15,0.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #f8936b 0%, var(--orange) 45%, #dc5e33 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.65), inset 0 -3px 5px rgba(160,55,20,0.35), 0 2px 3px rgba(43,45,49,0.22), 0 10px 20px -8px rgba(226,100,58,0.7);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.iph-subs .slot.is-front .iph-btn:hover { filter: saturate(1.25); transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -3px 5px rgba(160,55,20,0.35), 0 3px 4px rgba(43,45,49,0.22), 0 14px 26px -8px rgba(226,100,58,0.75); }
.iph-subs .slot.is-front .iph-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(160,55,20,0.4), 0 1px 2px rgba(43,45,49,0.2); }
.iph-subs .iph-btn:focus-visible { outline: 3px solid rgba(240,122,79,0.4); outline-offset: 3px; }
.iph-subs .iph-charge { position: absolute; z-index: 2; pointer-events: none; }


/* ================= SCREEN MODE: white tiles in front of a live market-activity screen ================= */
.iph-subs { color-scheme: dark; }
.iph-subs { background: #05070c; }
.iph-subs .scene { isolation: isolate; }
.iph-subs .market-screen {
  display: block;
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: #05070c;
}
.iph-subs .market-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* screen surface: fine scanlines and a soft vignette */
.iph-subs .market-screen::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.iph-subs .billing {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -6px 14px rgba(0,0,0,0.35),
    0 0 0 0.5px rgba(0,0,0,0.6),
    0 14px 26px -10px rgba(0,0,0,0.8),
    0 30px 50px -24px rgba(0,0,0,0.7);
}
/* dark grey table, near-black tile shadows, charcoal front panel */
.iph-subs .table-top {
  background: linear-gradient(180deg, #2a2b2f 0%, #333438 30%, #3c3d42 80%, #414247 100%);
}
.iph-subs .table-edge {
  background: linear-gradient(180deg, #2f3034 0%, #28292d 25%, #212226 70%, #1b1c1f 100%);
  box-shadow: 0 26px 40px -18px rgba(0,0,0,0.85);
}
.iph-subs .iph-shadow {
  background: radial-gradient(closest-side, rgba(0,0,0,0.85), rgba(0,0,0,0.35) 60%, transparent);
}
.iph-subs .iph-tile {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    inset 0 2px 6px rgba(255,255,255,0.8),
    inset 0 -8px 18px rgba(43,45,49,0.04),
    0 0 0 0.5px rgba(0,0,0,0.4),
    0 24px 50px -20px rgba(0,0,0,0.7),
    0 6px 40px rgba(0,0,0,0.3);
}
.iph-subs .arrow { filter: drop-shadow(0 4px 4px rgba(0,0,0,0.6)) drop-shadow(0 10px 14px rgba(226,100,58,0.3)); }
.iph-subs .arrow:hover:not(:disabled) { filter: saturate(1.25) drop-shadow(0 6px 6px rgba(0,0,0,0.6)) drop-shadow(0 12px 18px rgba(226,100,58,0.45)); }
.iph-subs .arrow:disabled { filter: grayscale(0.4) drop-shadow(0 2px 2px rgba(0,0,0,0.5)); }


/* toggle sits first in the scene now */
.iph-subs .scene { padding-block: 44px 0; }
.iph-subs .billing { margin-top: 26px; }
/* title sits on the live screen, above the toggle */
.iph-subs .scene-intro {
  position: relative; z-index: 1;
  text-align: center; color: #fff;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  max-width: 920px;
}
.iph-subs .scene-intro::before {         /* soft dark pool behind the text so it reads over the brightest map nodes */
  content: ""; position: absolute; inset: -30px -80px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5,7,12,0.72), rgba(5,7,12,0));
}
.iph-subs .scene-intro h1 {
  margin: 0 0 10px;
  font: 600 clamp(1.6rem, 3.2vw, 2.4rem)/1.15 "Poppins", system-ui, sans-serif; letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.iph-subs .scene-intro p {
  margin: 0 auto; max-width: 56ch;
  font-size: clamp(0.98rem, 1.5vw, 1.15rem); line-height: 1.5;
  color: rgba(255,255,255,0.78); text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.iph-subs .toggle-charge { z-index: 3; }


/* ================= CTA under the table ================= */
.iph-subs .plan-cta { position: relative; z-index: 2; display: flex; justify-content: center; padding-block: 8px 56px; }
.iph-subs .cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px; border-radius: 999px;
  font: 600 1.05rem/1.2 var(--font); color: #fff; text-decoration: none; text-align: center;
  background: linear-gradient(165deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1.5px solid rgba(240,122,79,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 10px 24px -10px rgba(0,0,0,0.7), 0 0 22px -6px rgba(240,122,79,0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, box-shadow .2s, transform .2s, filter .2s;
}
.iph-subs .cta-btn svg { width: 18px; height: 18px; flex: none; stroke: var(--orange); transition: transform .2s; }
.iph-subs .cta-btn:hover { filter: saturate(1.25); transform: translateY(-2px); background: linear-gradient(165deg, rgba(240,122,79,0.22), rgba(240,122,79,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 28px -10px rgba(0,0,0,0.7), 0 0 28px -4px rgba(240,122,79,0.6); }
.iph-subs .cta-btn:hover svg { transform: scale(1.08); }
.iph-subs .cta-btn strong { color: var(--orange); font-weight: 700; }
.iph-subs .cta-btn:focus-visible { outline: 3px solid rgba(240,122,79,0.5); outline-offset: 4px; }
@media (max-width: 520px) { .iph-subs .cta-btn { font-size: 0.95rem; padding: 14px 22px; } }


/* ================= plan-type indicator, set into the table's front panel ================= */
.iph-subs .table-edge { gap: 28px; }
.iph-subs .plan-nav {
  display: flex; align-items: stretch; gap: 4px;
  padding: 5px;
  border-radius: 16px;
  background: linear-gradient(180deg, #121316 0%, #1a1b1f 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.06), 0 1px 0 rgba(255,255,255,0.05);
}
.iph-subs .pn-group {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 7px 14px 7px;
  border-radius: 12px;
  transition: background .35s, box-shadow .35s;
}
.iph-subs .pn-label {
  display: flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; padding: 0;
  font: 700 0.74rem/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  transition: color .3s, filter .2s;
}
.iph-subs .pn-label svg { width: 15px; height: 15px; stroke: currentColor; flex: none; }
.iph-subs .pn-label:hover { color: rgba(255,255,255,0.75); }
.iph-subs .pn-label:focus-visible, .iph-subs .pn-dot:focus-visible { outline: 2px solid rgba(240,122,79,0.7); outline-offset: 3px; border-radius: 6px; }
.iph-subs .pn-dots { display: flex; gap: 7px; align-items: center; height: 9px; }
.iph-subs .pn-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.22);
  transition: transform .3s, background .3s, box-shadow .3s;
}
.iph-subs .pn-dot::before { content: ""; position: absolute; inset: -6px; }      /* larger tap area */
.iph-subs .pn-dot { position: relative; }
.iph-subs .pn-dot:hover { background: rgba(255,255,255,0.5); }
/* active group lights up in the same colour as its card band */
.iph-subs .pn-properties.is-on {
  background: linear-gradient(180deg, #4a4c52 0%, #2b2d31 55%, #1f2024 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.5), 0 0 14px rgba(255,255,255,0.08);
}
.iph-subs .pn-services.is-on {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #f8936b 0%, var(--orange) 50%, #d95a30 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.5), 0 0 18px rgba(240,122,79,0.45);
}
.iph-subs .pn-group.is-on .pn-label { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.45); cursor: default; }
.iph-subs .pn-group.is-on .pn-dot { background: rgba(255,255,255,0.4); }
.iph-subs .pn-group.is-on .pn-dot.is-here { background: #fff; transform: scale(1.35); box-shadow: 0 0 8px rgba(255,255,255,0.8); }
.iph-subs .pn-properties .pn-dot.is-here { box-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 0 2px rgba(240,122,79,0.9); }
@media (max-width: 520px) { .iph-subs .pn-group { padding: 6px 9px; } .iph-subs .pn-label { letter-spacing: 0.12em; font-size: 0.68rem; } .iph-subs .table-edge { gap: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .iph-subs .iph-tile, .iph-subs .iph-shadow { animation: none; }
  .iph-subs .slot { transition-duration: .01s; }
}

/* ---------- section shell ---------- */
.iph-subs { position: relative; isolation: isolate; overflow: hidden; }
/* optional: add class "iph-subs--fullbleed" if the section sits inside a boxed theme container */
.iph-subs.iph-subs--fullbleed { width: 100vw; margin-left: calc(50% - 50vw); }
/* billing period: both prices are in the HTML, the toggle only shows one (keeps translations intact) */
.iph-subs[data-period="year"] .p-month,
.iph-subs[data-period="month"] .p-year { display: none; }