/* ==========================================================================
   gads-packages/pkg.css — Google Ads Packages, the live section.
   Applied 2026-09-23 from /doctor/gads-pkg-hue6-v2t-2.html ("A step darker"),
   on the client's instruction: "apply 2nd one is final, remove all old design
   and content". The whole previous section (the white tray, q5r s2u2 +
   k2f-4) and its markup were removed.
   Colour: Standard blue, Advanced green, Professional lavender, Enterprise
   sand at L* 87 / C* 14; the page outside #EDEFF1; everything inside the
   card white.
   ========================================================================== */
/* ==========================================================================
   gads-pkg-rf10-t8q/rf.css — PREVIEW, 2026-09-22. Linked only by
   /doctor/gads-pkg-rf10-t8q.html. Ten options for the packages section;
   each card its own colour on its top zone only (name → Planning
   documentation), everything below white; one alignment system.

   VERTICAL   every equivalent line of the four cards is a row of one shared
              grid (subgrid, nested through crown → tray, points, drawer).
   HORIZONTAL two text edges per card:
                A = --A (the card inset, 20px; 16px on phones)
                B = A + --L (a 30px lead column that holds every icon, tick,
                    chapter number and topic number)
              A panel that needs a ground reaches OUT past A by --out, so its
              text stays on A / B.
   POINTS     the point's name only (one line where the width allows; a long
              name wraps identically in all four cards); the rest is in the tooltip.
   COLOUR     each package its own hue, as a solid light tint on the top zone
              with a firm edge in the same hue; its deep shade for the price,
              the figures and the mark. Below the top zone: white, dark ink,
              the site's blue for actions and selection only.
   CRISP      no transparency, no gradients, no soft shadow behind text; the
              platform's normal (full-strength) font rendering.
   ========================================================================== */

.kx{
  --hb:#004594; --hr:#D8E4F6; --hr2:#C9DAF3; --hp:#E4EFFD; --hp2:#EFF5FE; --dot:#1A73E8;
  --ink:#0D1526; --ink2:#1E2B40; --ink3:#324968; --ink4:#4B6282;
  --edge:#C3D3EC; --edge2:#9FB6DA; --rule:#DCE5F3;
  --act:#0760C6; --act-h:#054E9F;
  --ease:cubic-bezier(.22,.61,.36,1);
  --A:20px; --L:30px; --out:8px; --gap:16px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --lv:var(--ta);
  position:relative; padding:var(--r9-open,58px) 0 var(--r9-close,50px); background:#fff;
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif);
  color:var(--ink2); -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto;
}
:root{ --kx-top:108px; }
/* each package's own colour: tint · deeper tint · edge · mid · deep shade.
   Tints sit at L* 86–90 with chroma 15–17 (below that chroma a light colour reads hazy);
   every text colour clears 5.4:1 on its tint and on its deeper band. */
.kx .k[data-h="std"]{ --t:#BFEAE2; --t2:#A2DDD3; --tb:#76C4B8; --tm:#008C7E; --ta:#075A4E; }   /* teal */
.kx .k[data-h="adv"]{ --t:#C0E7F9; --t2:#A3D9F2; --tb:#75C0DE; --tm:#0887A9; --ta:#0A4C88; }   /* sky */
.kx .k[data-h="pro"]{ --t:#DEDDFB; --t2:#CDCDF3; --tb:#B1B2E2; --tm:#6A72B6; --ta:#372C92; }   /* indigo */
.kx .k[data-h="ent"]{ --t:#C4DBF8; --t2:#AECCF2; --tb:#8AB1DE; --tm:#286FA6; --ta:#162D4E; }   /* navy */
.kx *, .kx *::before, .kx *::after{ box-sizing:border-box; }
.kx :where(h2,h3,h4,h5,p,ul,dl,dd,dt){ margin:0; padding:0; }
.kx :where(h2,h3,h4,h5){ font:inherit; letter-spacing:0; color:inherit; text-transform:none; }
.kx ul{ list-style:none; }
.kx button{ font:inherit; color:inherit; margin:0; border:0; border-radius:0; background:none; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent; text-transform:none; letter-spacing:inherit; box-shadow:none; }
.kx button:disabled{ cursor:default; }
.kx .k-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.kx :focus-visible{ outline:2px solid var(--act); outline-offset:-2px; }
.k-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.kx .kx-in{ width:min(var(--maxw,1440px), 100% - 2 * var(--pad,24px)); margin:0 auto; container:kx / inline-size; }
.kx .kx-hd{ text-align:center; margin-bottom:var(--r9-lede,38px); }
.kx .kx-t{ font-size:clamp(26px, 2.92vw, 42px); font-weight:800; line-height:1.08; letter-spacing:-.034em; color:var(--ink); text-wrap:balance; }
.kx .kx-t::after{ content:"."; color:var(--act); }
.kx .kx-s{ max-width:560px; margin:12px auto 0; font-size:15px; line-height:1.55; color:#5E6672; text-wrap:balance; }

/* =============================================================== grid == */
.kx .kx-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:repeat(var(--kn), auto); column-gap:var(--gap); row-gap:0; }
.kx .k{ display:grid; grid-template-rows:subgrid; min-width:0; }
.kx .k-crown, .kx .k-pts, .kx .k-more, .kx .k-tray{ display:grid; grid-template-rows:subgrid; min-width:0; }
/* the card's edge, as real borders on its four zones */
.kx .k-crown{ background:var(--t); border:1px solid var(--tb); border-bottom:0; }
.kx .k-pts, .kx .k-acts{ background:#fff; border-left:1px solid var(--edge); border-right:1px solid var(--edge); }
.kx .k-more{ background:#fff; border:1px solid var(--edge); border-top:0; }

/* ======================================================= row anatomy == */
.kx .k-row{ min-width:0; padding-left:var(--A); padding-right:var(--A); }
.kx .k-lead{ display:flex; align-items:flex-start; width:var(--L); flex:0 0 var(--L); }
.kx .k-ic{ width:16px; height:16px; fill:none; stroke:var(--ink4); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* crown */
.kx .k-id{ display:flex; align-items:center; gap:12px; padding-top:20px; }
.kx .k-badge{ display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px var(--tb); }
.kx .k-gl{ display:block; width:24px; height:30px; margin-top:-2px; }
.kx .k-name{ display:block; min-width:0; }
.kx .k-name > span{ display:block; font-size:10.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; line-height:1.2; color:var(--ink3); }
.kx .k-name > b{ display:block; margin-top:2px; font-size:20px; font-weight:800; letter-spacing:-.022em; line-height:1.15; color:var(--ink); }
.kx .k-qual{ display:flex; align-items:flex-start; padding-top:12px; font-size:13px; font-weight:650; line-height:1.35; color:var(--ink2); }
.kx .k-qi{ width:16px; height:16px; fill:none; stroke:var(--ta); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kx .k-from{ padding-top:16px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; line-height:1.3; color:var(--ink3); }
.kx .k-was{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding-top:6px; font-size:13px; line-height:1.3; color:var(--ink3); }
.kx .k-was s{ text-decoration-thickness:1px; }
/* 2026-09-24 · white-space was nowrap, which made this badge an un-shrinkable
   flex item. The Enterprise badge ("Priced to the engagement") is ~180px wide,
   so wherever its card is narrower it pushed out of the card and, above the
   section's clip bound, widened the whole page. Wrapping is self-limiting: the
   badge keeps its one-line max-content width wherever there is room, and only
   folds when the card is genuinely too narrow. No ellipsis, nothing hidden. */
.kx .k-off{ display:inline-block; max-width:100%; padding:2px 7px; border:1px solid var(--tb); border-radius:4px; background:#fff; font-size:11.5px; font-weight:800;
  line-height:1.35; color:var(--ta); white-space:normal; }
.kx .k-now{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; padding-top:4px; }
.kx .k-now b, .kx .k-nowin b{ font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--ta); font-variant-numeric:tabular-nums; }
.kx .k-now b i, .kx .k-nowin b i{ font-style:normal; font-size:.66em; font-weight:700; }
.kx .k-now span, .kx .k-nowin span{ font-size:13px; font-weight:600; color:var(--ink3); }
.kx .k-now.is-c b{ font-size:24px; letter-spacing:-.024em; }
.kx .k-bill{ padding-top:12px; }
.kx .k-bill b{ display:block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; line-height:1.3; color:var(--ink3); }
.kx .k-bill .k-bv{ display:block; margin-top:3px; font-size:12.5px; font-weight:650; line-height:1.4; color:var(--ink); }

/* tray tiles — every tray is a white panel inside the coloured top */
.kx .k-tray{ margin-top:16px; margin-bottom:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--tb); border-radius:8px; }
.kx .k-tile{ min-width:0; }
.kx .k-tile dt{ font-size:12px; font-weight:650; line-height:1.3; color:var(--ink3); }
.kx .k-tile dd{ margin-top:3px; }
.kx .k-fn{ font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--ta); font-variant-numeric:tabular-nums; }
.kx .k-fu{ font-size:13px; font-weight:600; color:var(--ink3); }
.kx .k-ft{ display:block; font-size:13px; font-weight:650; line-height:1.4; color:var(--ink); }
/* 2 x 2 (options 1, 5): figures on the first shared row, text facts on the second */
.kx .k-tray--q{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-left:var(--A); margin-right:var(--A); }
.kx .k-tray--q .k-tile{ padding:11px 0 11px 0; }
.kx .k-tray--q .k-tile:nth-child(2n){ padding-left:14px; box-shadow:inset 1px 0 0 var(--rule); }
.kx .k-tray--q .k-tile:nth-child(n+3){ border-top:1px solid var(--rule); }
/* four rows (options 3, 4): icon in the lead column, text on edge B */
.kx .k-tray--r{ grid-template-columns:minmax(0,1fr); margin-left:calc(var(--A) - var(--out)); margin-right:calc(var(--A) - var(--out)); padding:0 var(--out); }
.kx .k-tray--r .k-tile{ display:grid; grid-template-columns:var(--L) minmax(0,1fr); grid-template-rows:auto 1fr; padding:9px 0; }
.kx .k-tray--r .k-tile .k-lead{ grid-row:1 / 3; padding-top:1px; }
.kx .k-tray--r .k-tile + .k-tile{ border-top:1px solid var(--rule); }
/* figure pair + two full-width facts (options 1, 2, 5): the two figures side by side on one shared row, then each text
   fact on its own full-width row — full width keeps every fact to one or two lines, so the rows carry almost no blank gap */
.kx .k-tray--s{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-left:calc(var(--A) - var(--out)); margin-right:calc(var(--A) - var(--out)); padding:0 var(--out); }
.kx .k-tray--s .k-tile{ padding:10px 0; }
.kx .k-tray--s .k-tile:nth-child(2){ padding-left:14px; box-shadow:inset 1px 0 0 var(--rule); }
.kx .k-tray--s .k-tile:nth-child(n+3){ grid-column:1 / -1; padding:9px 0; border-top:1px solid var(--rule); }

/* ============================================ nine points: one line == */
.kx .k-pts{ padding:8px 0 6px; }
.kx .k-pt{ position:relative; padding:0; }   /* the button carries the inset, so icon = A and name = B, like every other row */
.kx .k-pt:hover, .kx .k-pt:focus-within, .kx .k-pt.is-tip{ z-index:40; }
.kx .k-ptb{ display:grid; grid-template-columns:var(--L) minmax(0,1fr) 16px; align-items:center; width:100%; min-height:32px;
  padding:6px var(--A); transition:background-color .2s var(--ease); }
.kx .k-ptb .k-lead{ align-items:center; }
/* a point's name is the same in all four cards, so if a long name takes two lines it takes two lines in every
   card — the rows stay equal and nothing is ever cut off */
.kx .k-pl{ font-size:12.5px; font-weight:650; line-height:1.35; color:var(--ink); }
.kx .k-info{ width:16px; height:16px; fill:none; stroke:var(--ink4); stroke-width:1.4; transition:stroke .2s; }
.kx .k-info .k-infd{ fill:var(--ink4); stroke:none; }
.kx .k-ptb:hover, .kx .k-pt.is-tip .k-ptb{ background:var(--hp2); }
.kx .k-ptb:hover .k-pl, .kx .k-pt.is-tip .k-pl{ color:var(--hb); }
.kx .k-ptb:hover .k-info, .kx .k-pt.is-tip .k-info{ stroke:var(--hb); }
.kx .k-ptb:hover .k-infd, .kx .k-pt.is-tip .k-infd{ fill:var(--hb); }
.kx .k-ptb:hover .k-ic, .kx .k-pt.is-tip .k-ic{ stroke:var(--hb); }
/* the tooltip: the header dropdown's light style */
.kx .k-tip{ position:absolute; left:calc(var(--A) - 6px); right:calc(var(--A) - 6px); top:calc(100% - 2px); z-index:41; display:block;
  padding:10px 12px 11px; background:#fff; border:1px solid #AFBCCD; border-radius:8px; color:var(--ink2); font-size:12.5px; line-height:1.45;
  box-shadow:0 12px 24px -12px rgba(13,21,38,.28);
  opacity:0; visibility:hidden; transform:translateY(4px); pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.kx .k-tip::before{ content:""; position:absolute; left:14px; top:-6px; width:10px; height:10px; background:#fff;
  border-left:1px solid #AFBCCD; border-top:1px solid #AFBCCD; transform:rotate(45deg); }
.kx .k-pt:hover .k-tip, .kx .k-pt:focus-within .k-tip, .kx .k-pt.is-tip .k-tip{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.kx .k-tipt{ display:block; margin-bottom:4px; font-size:12.5px; font-weight:800; color:var(--ink); }
.kx .k-tipv{ display:block; font-size:13px; line-height:1.5; color:var(--ink2); }
.kx .k-tr{ display:grid; grid-template-columns:84px minmax(0,1fr); column-gap:10px; padding:5px 0; border-top:1px solid var(--rule); color:var(--ink3); }
.kx .k-tr:first-of-type{ border-top:0; }
.kx .k-tr b{ font-weight:700; color:var(--ink3); }
.kx .k-tr.is-cur{ margin:0 -12px; padding-left:12px; padding-right:12px; background:var(--hp2); color:var(--ink); }
.kx .k-tr.is-cur b{ color:var(--hb); }
.kx .k-tr.is-cur b::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--dot); vertical-align:1px; }
.kx .k-em{ font-weight:700; color:var(--ink); }
.kx .k-fa{ font-weight:650; color:var(--ink); }

/* ============================================================ actions == */
.kx .k-acts{ display:grid; gap:8px; align-content:end; padding-top:12px; padding-bottom:18px; }
.kx .k-b1, .kx .k-b2{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; text-align:center;
  font-size:14px; font-weight:750; line-height:1.2; text-decoration:none; transition:background-color .25s var(--ease), box-shadow .25s, color .25s; }
.kx .k-b1{ background:var(--act); color:#fff; }
.kx .k-b1:hover{ background:var(--act-h); color:#fff; }
.kx .k-b2{ min-height:42px; background:#fff; color:var(--act); box-shadow:inset 0 0 0 1px var(--edge2); }
.kx .k-b2:hover{ background:var(--hp2); box-shadow:inset 0 0 0 1px var(--act); }

/* ============================================================= drawer == */
.kx .k-mrow{ padding:0; }
.kx .k-mbar{ display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:0 var(--A); background:var(--hp2);
  box-shadow:inset 0 1px 0 var(--edge); transition:background-color .3s var(--ease); }
.kx .k-mbar b{ font-size:13.5px; font-weight:800; color:var(--hb); }
.kx .k-tri{ width:10px; height:7px; fill:var(--hb); transition:transform .36s var(--ease); }
.kx .k-mbar[aria-expanded="true"] .k-tri{ transform:rotate(180deg); }
.kx .k-mbar:hover{ background:var(--hp); }
.kx .k-fold{ display:grid; grid-template-rows:0fr; min-width:0; transition:grid-template-rows .42s var(--ease); }
.kx .k-fold > .k-rc{ min-height:0; min-width:0; overflow:clip; visibility:hidden; transition:visibility 0s linear .42s; }
.kx .k-fold.is-open{ grid-template-rows:1fr; }
.kx .k-fold.is-open > .k-rc{ visibility:visible; transition-delay:0s; }
.kx .k-key{ position:relative; display:block; flex:0 0 auto; width:22px; height:22px; background:var(--hp); border-radius:4px; transition:background-color .3s var(--ease); }
.kx .k-key::before, .kx .k-key::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:2px; margin:-1px 0 0 -5px; background:var(--hb);
  transition:transform .36s var(--ease); }
.kx .k-key::after{ transform:rotate(90deg); }
.kx [aria-expanded="true"] > .k-key::after{ transform:rotate(90deg) scaleX(0); }
.kx .k-key--s{ width:18px; height:18px; background:transparent; }
.kx .k-key--s::before, .kx .k-key--s::after{ width:9px; margin-left:-4.5px; }
/* chapter heads: number in the lead column, title on edge B */
.kx .k-r--ch > .k-rc{ box-shadow:inset 0 1px 0 var(--rule); }
.kx .k-ch{ display:grid; grid-template-columns:var(--L) minmax(0,1fr) 22px; align-items:center; width:100%; min-height:52px; padding:10px var(--A); }
.kx .k-cn{ display:grid; place-items:center; width:22px; height:22px; border-radius:4px; background:var(--hp); font-family:var(--mono); font-size:11px;
  font-weight:700; color:var(--hb); transition:background-color .3s var(--ease), box-shadow .3s; }
.kx .k-ch[aria-expanded="true"] .k-cn{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--hb); }
.kx .k-ch .k-lead{ align-items:center; }
.kx .k-ctw{ display:block; min-width:0; }
.kx .k-ct{ display:block; font-size:14px; font-weight:800; letter-spacing:-.012em; line-height:1.3; color:var(--ink); }
.kx .k-ch:hover .k-ct, .kx .k-ch[aria-expanded="true"] .k-ct{ color:var(--hb); }
.kx .k-cc{ display:block; margin-top:1px; font-size:11.5px; font-weight:600; color:var(--ink3); }
/* topic heads: number in the lead column, title on edge B */
.kx .k-r--th > .k-rc{ padding:0 var(--A); }
.kx .k-r--th:not(.is-first) > .k-rc .k-tb{ box-shadow:inset 0 1px 0 var(--rule); }
.kx .k-tb{ display:grid; grid-template-columns:var(--L) minmax(0,1fr) 18px; align-items:start; width:100%; padding:9px 0; }
.kx .k-tx{ font-family:var(--mono); font-size:11px; font-weight:600; line-height:1.6; color:var(--ink3); font-variant-numeric:tabular-nums; }
.kx .k-ttw{ display:block; min-width:0; }
.kx .k-tt{ display:block; font-size:13.5px; font-weight:750; line-height:1.35; color:var(--ink); }
.kx .k-tb:hover .k-tt, .kx .k-tb[aria-expanded="true"] .k-tt{ color:var(--hb); }
.kx .k-every{ display:block; margin-top:2px; font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; line-height:1.3; color:var(--ink3); }
.kx .k-pvw{ display:block; margin-top:2px; font-size:12.5px; font-weight:700; line-height:1.35; color:var(--hb); }
.kx .k-tb[aria-expanded="true"] .k-pvw{ display:none; }
/* topic and chapter bodies: text on edge B, ticks in the lead column */
.kx .k-r--tb > .k-rc, .kx .k-r--cb > .k-rc{ padding:0 var(--A); }
.kx .k-tbd{ padding-bottom:12px; }
.kx .k-cb{ padding:0 0 14px; }
.kx .k-an{ padding-left:var(--L); }
.kx .k-an + .k-an{ margin-top:10px; }
.kx .k-sl{ margin-bottom:2px; font-size:11.5px; font-weight:700; line-height:1.35; color:var(--ink3); }
.kx .k-a{ font-size:13.5px; line-height:1.55; color:var(--ink2); }
.kx .k-bf{ padding-left:var(--L); font-size:13.5px; }
.kx .k-t4{ display:grid; gap:8px; padding-left:var(--L); }
.kx .k-t4 dt{ font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ink3); }
.kx .k-t4 dd{ margin-top:1px; font-size:13.5px; font-weight:650; line-height:1.4; color:var(--ink); }
.kx .k-ticks{ display:grid; gap:6px; }
.kx .k-ticks li{ display:grid; grid-template-columns:var(--L) minmax(0,1fr); align-items:start; font-size:13.5px; line-height:1.5; color:var(--ink2); }
.kx .k-tk{ width:18px; height:18px; margin-top:1px; padding:3.5px; border-radius:4px; background:var(--hp); fill:none; stroke:var(--hb); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.kx .k-entn{ margin-top:10px; padding-left:var(--L); font-size:13px; line-height:1.5; color:var(--ink2); }
.kx .k-entn b{ display:block; font-size:12px; font-weight:750; color:var(--ink); }
/* the shared topics grouped (4) or folded (5) */
.kx .k-r--inc > .k-rc, .kx .k-r--ib > .k-rc, .kx .k-r--igs > .k-rc{ padding:0 var(--A); }
.kx .k-inc{ margin:4px calc(0px - var(--out)) 14px; padding:10px var(--out) 12px; background:var(--hp2); box-shadow:inset 0 0 0 1px var(--hr); border-radius:8px; }
.kx .k-inch .k-every{ margin:0 0 8px; color:var(--hb); }
.kx .k-ig + .k-ig{ margin-top:10px; padding-top:10px; border-top:1px solid var(--hr); }
.kx .k-igt{ display:flex; align-items:baseline; margin-bottom:6px; font-size:13px; font-weight:750; line-height:1.35; color:var(--ink); }
.kx .k-ib{ display:grid; grid-template-columns:var(--L) minmax(0,1fr) 18px; align-items:start; width:100%; padding:10px 0; box-shadow:inset 0 1px 0 var(--rule); }
.kx .k-ibw{ display:block; min-width:0; }
.kx .k-ib .k-every{ margin-top:1px; }
.kx .k-ib:hover .k-every, .kx .k-ib[aria-expanded="true"] .k-every{ color:var(--hb); }
.kx .k-ibn{ display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--ink3); }
.kx .k-igs{ padding:0 0 12px; }
/* the pager (2): keys, one topic at a time, Previous / Next */
/* a folded row never carries vertical padding (it would keep that height while shut); the inner element carries it */
.kx .k-r--keys > .k-rc{ padding:0 var(--A); }
.kx .k-r--keys .k-pks{ margin:2px 0 10px; }
.kx .k-pks{ display:flex; gap:4px; padding:3px; background:var(--hp); border-radius:6px; }
.kx .k-pk{ position:relative; display:grid; place-items:center; flex:1 1 0; min-width:0; height:30px; border-radius:4px; font-family:var(--mono); font-size:12px;
  font-weight:700; color:var(--ink3); transition:background-color .25s var(--ease), color .25s, box-shadow .25s; }
.kx .k-pk.is-inc::after{ content:""; position:absolute; right:3px; top:3px; width:5px; height:5px; border-radius:50%; background:var(--ink4); }
.kx .k-pk:hover{ color:var(--hb); background:var(--hp2); }
.kx .k-pk[aria-selected="true"]{ background:#fff; color:var(--hb); box-shadow:inset 0 0 0 1.5px var(--hb); }
.kx .k-r--views > .k-rc{ padding:0 var(--A); }
.kx .k-pvs{ display:grid; }
.kx .k-pvv{ grid-area:1 / 1; display:flex; flex-direction:column; min-width:0; padding-bottom:12px; visibility:hidden; opacity:0;
  transition:opacity .3s var(--ease), visibility 0s linear .3s; }
.kx .k-pvv.is-on{ visibility:visible; opacity:1; transition-delay:.08s, 0s; }
.kx .k-pvh{ display:flex; align-items:baseline; }
.kx .k-pvt{ font-size:14px; font-weight:800; line-height:1.3; color:var(--ink); }
.kx .k-pvv > .k-every{ padding-left:var(--L); }
.kx .k-pvv .k-tbd{ padding:8px 0 0; }
.kx .k-pstep{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding:12px 0 0 var(--L); }
.kx .k-pp, .kx .k-pn{ padding:5px 8px; border-radius:4px; font-size:12.5px; font-weight:750; color:var(--hb); transition:background-color .25s; }
.kx .k-pp{ margin-left:-8px; }
.kx .k-pn{ margin-right:-8px; }
.kx .k-pp:hover:not(:disabled), .kx .k-pn:hover:not(:disabled){ background:var(--hp); }
.kx .k-pp:disabled, .kx .k-pn:disabled{ color:#8A96A8; }
.kx .k-pos{ font-family:var(--mono); font-size:11px; color:var(--ink3); }


/* ======================================================================
   BELOW THE TOP ZONE: white, dark ink, light neutral controls; the site's
   blue only for the chosen chapter, key or topic
   ====================================================================== */
.kx{ --nz:#EEF2F7; --nz2:#F5F7FA; --nzl:#B9C5D4; }
.kx .k-ptb:hover, .kx .k-pt.is-tip .k-ptb{ background:var(--nz2); }
.kx .k-mbar{ background:var(--nz2); }
.kx .k-mbar:hover{ background:var(--nz); }
.kx .k-mbar b{ color:var(--ink); }
.kx .k-tri{ fill:var(--ink); }
.kx .k-key{ background:var(--nz); }
.kx .k-key::before, .kx .k-key::after{ background:var(--ink2); }
.kx .k-cn{ background:var(--nz); color:var(--ink2); }
.kx .k-ch[aria-expanded="true"] .k-cn{ background:#fff; color:var(--hb); box-shadow:inset 0 0 0 1.5px var(--hb); }
.kx .k-tk{ background:var(--nz); stroke:var(--ink); }
.kx .k-inc{ background:var(--nz2); box-shadow:inset 0 0 0 1px var(--rule); }
.kx .k-inch .k-every{ color:var(--ink); }
.kx .k-ig + .k-ig{ border-top-color:var(--rule); }
.kx .k-pks{ background:var(--nz); }
.kx .k-pk:hover{ background:var(--nz2); }
.kx .k-r--ch:has([aria-expanded="true"]) > .k-rc,
.kx .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--keys, .k-r--views, .k-r--ib, .k-r--igs, .k-r--fh, .k-r--cht) > .k-rc{ background:var(--nz2); }


/* ======================================================================
   TOP-ZONE STYLES — the tint runs from the name to the last figure
   ====================================================================== */
/* crest: centred mark in a ring of the card's colour, name and price centred */
.cr-crest .k-id{ flex-direction:column; gap:10px; padding-top:24px; text-align:center; }
.cr-crest .k-badge{ width:60px; height:60px; box-shadow:inset 0 0 0 3px var(--tm); }
.cr-crest .k-gl{ width:32px; height:40px; }
.cr-crest :is(.k-qual, .k-was, .k-now){ justify-content:center; }
.cr-crest :is(.k-from, .k-bill){ text-align:center; }
.cr-crest .k-qual .k-lead{ width:auto; flex:0 0 auto; margin-right:7px; }
/* two-tone: a deeper band for who it is, the lighter tint for cost and figures */
.cr-twotone :is(.k-id, .k-qual){ background:var(--t2); }
.cr-twotone .k-qual{ padding-bottom:14px; }
/* name band: the name on the deeper band only */
.cr-band .k-id{ background:var(--t2); padding-bottom:16px; }
/* rail: a firm rail of the card's colour down the top zone only */
.cr-rail .k-crown{ box-shadow:inset 5px 0 0 var(--tm); }
/* price plate: the four price lines on one white plate */
.cr-plate .k-plate{ display:grid; grid-template-rows:subgrid; min-width:0; margin:14px calc(var(--A) - var(--out)) 0; padding:0 var(--out) 12px;
  background:#fff; box-shadow:inset 0 0 0 1px var(--tb); border-radius:8px; }
.cr-plate .k-plate .k-row{ padding-left:0; padding-right:0; }
.cr-plate .k-plate .k-from{ padding-top:12px; }
/* price line: the price on the name's own line; Billing Terms as chips */
.cr-priceline .k-id{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; column-gap:12px; }
.cr-priceline .k-name > b{ font-size:18px; }
.cr-priceline .k-nowin{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.cr-priceline .k-nowin b{ font-size:23px; line-height:1.05; }
.cr-priceline .k-nowin span{ font-size:12px; }
.cr-priceline .k-nowin.is-c b{ max-width:84px; font-size:16px; line-height:1.2; text-align:right; }
.cr-priceline .k-bill .k-chips{ display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
.cr-priceline .k-bill .k-chip{ display:inline-block; padding:2px 5px; background:#fff; border:1px solid var(--tb); border-radius:4px; font-size:11.5px;
  font-weight:700; line-height:1.35; color:var(--ta); }


/* ======================================================================
   FIGURE LAYOUTS
   ====================================================================== */
/* two figures side by side, value first, then the two text facts */
.tr-pairff .k-tray--s .k-tile{ display:flex; flex-direction:column-reverse; justify-content:flex-end; }
.tr-pairff .k-tray--s .k-tile dd{ margin:0 0 2px; }
.tr-pairff .k-tray--s .k-ft{ font-size:13.5px; font-weight:750; }
.tr-pairff .k-tray--s .k-tile dt{ font-size:11.5px; }
/* four rows, value first, the label beneath, the icon in the lead column */
.tr-rowsff .k-tile--ff dd{ margin:0; }
.tr-rowsff .k-tile--ff dt{ margin-top:2px; font-size:11.5px; }
.tr-rowsff .k-tile--ff .k-ft{ font-size:13.5px; font-weight:750; }


/* ======================================================================
   POINT STYLES — the point's name; the tooltip holds this package's answer
   ====================================================================== */
.pt-num .k-num{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--nzl);
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink2); }
.pt-iconsq .k-isq{ display:grid; place-items:center; width:24px; height:24px; background:var(--nz); border-radius:5px; }
.pt-iconsq .k-isq .k-ic{ width:14px; height:14px; }
.pt-tick .k-ptb .k-tk{ margin-top:0; }
.pt-group .k-pts{ padding-top:4px; }
.pt-group .k-pg{ display:flex; align-items:center; gap:10px; padding-top:12px; padding-bottom:2px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); }
.pt-group .k-pg::after{ content:""; flex:1 1 auto; height:1px; background:var(--rule); }
/* plain names on edge A, a hairline between rows, no icons */
.pt-plain .k-ptb{ grid-template-columns:minmax(0,1fr) 16px; column-gap:10px; }
.pt-plain .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--rule); }
.pt-plain .k-pl{ font-size:13px; }
/* menu rows: plain rows that light up on hover */
.pt-rowhover .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--rule); }


/* ======================================================================
   DRAWER STYLES
   ====================================================================== */
/* outline: plain hanging numbers, no plates */
.me-outline .k-mbar{ background:#fff; }
.me-outline .k-cn{ width:auto; height:auto; place-items:start; background:none !important; box-shadow:none !important; font-size:12px; color:var(--ink3); }
.me-outline .k-ch[aria-expanded="true"] .k-cn{ color:var(--hb); }
.me-outline .k-ch .k-key{ background:transparent; }
/* flat: every topic of the open chapter shown at once */
.kx .k-r--fh > .k-rc{ padding:0 var(--A); }
.kx .k-fh{ display:grid; grid-template-columns:var(--L) minmax(0,1fr); align-items:start; padding:10px 0 4px; }
.kx .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:inset 0 1px 0 var(--rule); }
/* tabs: the five chapters as numbered tabs, the chosen one's title beneath */
.kx .k-r--tabs > .k-rc{ padding:0 var(--A); }
.kx .k-r--tabs .k-ctabs{ margin:10px 0 4px; }
.kx .k-ctabs{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:3px; padding:3px; background:var(--nz); border-radius:6px; }
.kx .k-ctab{ display:grid; place-items:center; height:32px; border-radius:4px; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink3);
  transition:background-color .25s var(--ease), color .25s, box-shadow .25s; }
.kx .k-ctab span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kx .k-ctab b{ font-weight:700; }
.kx .k-ctab:hover{ background:var(--nz2); color:var(--ink); }
.kx .k-ctab[aria-selected="true"]{ background:#fff; color:var(--hb); box-shadow:inset 0 0 0 1.5px var(--hb); }
.kx .k-r--cht > .k-rc{ padding:0 var(--A); }
.kx .k-r--cht .k-ctt{ padding:8px 0 6px; }
.kx .k-ctt{ display:flex; align-items:center; font-size:14.5px; font-weight:800; line-height:1.3; color:var(--ink); }
.kx .k-ctt .k-cn{ background:#fff; color:var(--hb); box-shadow:inset 0 0 0 1.5px var(--hb); }


/* ======================================================================
   gads-pkg-rf10-t8q — COLOUR FROM THE REFERENCE (/gads-pkg-msw-k4d/)
   The page's own package set. Each colour fills the TOP AREA only, from
   the name down to Planning documentation; the four figures sit on a white
   panel inside it. The deeper shade: small labels and the card's edge.
   Below the top area: white. The same colour jobs in every option.
   ====================================================================== */
/*                      top area   soft wash  line       edge       small labels */
.kx .k[data-h="std"]{ --t:#F5E1C8; --tw:#FBF3EA; --tl:#D6BA95; --te:#BE9E72; --ti:#765311; }   /* sand  */
.kx .k[data-h="adv"]{ --t:#CAECDA; --tw:#EBF7F1; --tl:#96C9B0; --te:#71B093; --ti:#006843; }   /* green */
.kx .k[data-h="pro"]{ --t:#D0E6FF; --tw:#EDF5FE; --tl:#9EC2E8; --te:#79A7D4; --ti:#00609D; }   /* blue  */
.kx .k[data-h="ent"]{ --t:#D9E5F0; --tw:#F0F5F9; --tl:#AEC1D0; --te:#8FA6B8; --ti:#385E76; }   /* slate */
.kx .k{ --lv:var(--ti); --ta:var(--ink); --tb:var(--te); }
.rf{ --ink:#0D1A2E; --ink2:#243041; --ink3:#4B5769; --ink4:#667284; --muted:#5E6672; --rule:#E6EAF0; }

/* ------------------------------------------------ the card ---------- */
.rf .k-crown{ background:var(--t); border-color:var(--te); }
.rf .k-pts, .rf .k-acts{ border-color:var(--te); }
.rf .k-more{ border-color:var(--te); }
.rf .k-badge{ width:42px; height:42px; background:#fff; box-shadow:none; }

/* ------------------------------------------- the top area ----------- */
.rf .k-name > span{ font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--ti); }
.rf .k-name > b{ font-size:21px; font-weight:800; letter-spacing:-.022em; color:var(--ink); }
.rf .k-qual{ padding-top:10px; font-size:13.5px; font-weight:650; color:var(--ti); }
.rf .k-qi{ stroke:var(--ti); }
/* one fine line of the package's own line colour opens the price block, inset to the text edges */
.rf .k-from{ position:relative; margin-top:14px; padding-top:14px; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--muted); }
.rf .k-from::before{ content:""; position:absolute; left:var(--A); right:var(--A); top:0; height:1px; background:var(--tl); }
.rf .k-was{ padding-top:4px; font-size:13px; color:var(--muted); }
.rf .k-off{ padding:1px 7px; border:1px solid var(--te); border-radius:0; background:#fff; font-size:11.5px; font-weight:800; color:var(--ti); }
.rf .k-now{ padding-top:3px; }
.rf .k-now b{ font-size:30px; letter-spacing:-.032em; color:var(--ink); }
.rf .k-now span{ font-size:13.5px; color:var(--muted); }
.rf .k-now.is-c b{ font-size:25px; }
.rf .k-bill{ padding-top:12px; }
.rf .k-bill b{ font-size:12.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ti); }
.rf .k-bill .k-bv{ margin-top:2px; font-size:13.5px; font-weight:600; color:var(--ink2); }

/* ---------------------- the four figures: a white panel in the top area */
.rf .k-tray{ margin-top:16px; margin-bottom:var(--A); margin-left:calc(var(--A) - var(--out)); margin-right:calc(var(--A) - var(--out));
  padding:0 var(--out); background:#fff; box-shadow:none; border:0; border-radius:0; }
.rf .k-tile dt{ font-size:12px; font-weight:600; color:var(--muted); }
.rf .k-fn{ font-size:21px; color:var(--ink); }
.rf .k-fu{ font-size:13px; color:var(--muted); }
.rf .k-ft{ font-size:13.5px; font-weight:650; color:var(--ink); }
.rf .k-tray--r .k-tile{ padding:10px 0; }
.rf .k-tray--r .k-tile + .k-tile{ border-top:1px solid var(--rule); }
.rf .k-tray--r .k-lead{ align-items:flex-start; }
.rf .k-tray--r .k-ic{ width:22px; height:22px; padding:4px; background:var(--tw); stroke:var(--ti); }
.rf .k-tray--r .k-tile{ grid-template-columns:var(--L) minmax(0,1fr); }
.rf.tr-plain .k-tray--r .k-tile{ grid-template-columns:minmax(0,1fr); }
.rf .k-tray--s .k-tile{ padding:11px 0; }
.rf .k-tray--s .k-tile:nth-child(2){ padding-left:14px; box-shadow:inset 1px 0 0 var(--rule); }
.rf .k-tray--s .k-tile:nth-child(n+3){ padding:10px 0; border-top:1px solid var(--rule); }
.rf .k-tray--q{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.rf .k-tray--q .k-tile{ padding:11px 0; }
.rf .k-tray--q .k-tile:nth-child(2n){ padding-left:14px; box-shadow:inset 1px 0 0 var(--rule); }
.rf .k-tray--q .k-tile:nth-child(n+3){ border-top:1px solid var(--rule); }
/* the dropdown panel (9): white rows on the package's soft wash */
.rf.tr-panel .k-tray{ background:var(--tw); padding-top:4px; padding-bottom:4px; }
.rf.tr-panel .k-tray--r .k-tile{ margin:2px 0; padding:9px 8px; background:#fff; }
.rf.tr-panel .k-tray--r .k-tile + .k-tile{ border-top:0; }
.rf.tr-panel .k-tray--r .k-tile{ margin-left:calc(0px - var(--out) + 4px); margin-right:calc(0px - var(--out) + 4px); padding-left:calc(var(--out) - 4px); }

/* ------------------------------------- centred top area (1, 5, 8) --- */
.cr-centre .k-id{ flex-direction:column; gap:8px; padding-top:22px; text-align:center; }
.cr-centre .k-badge{ width:46px; height:46px; }
.cr-centre .k-qual{ justify-content:center; }
.cr-centre .k-qual .k-lead{ width:auto; flex:0 0 auto; margin-right:7px; }
.cr-centre :is(.k-from, .k-bill){ text-align:center; }
.cr-centre :is(.k-was, .k-now){ justify-content:center; }
/* price first (3): the price is the largest thing */
.cr-price .k-now b{ font-size:36px; letter-spacing:-.036em; }
.cr-price .k-now.is-c b{ font-size:28px; }
/* Billing Terms as chips (7) */
.cr-chips .k-bill .k-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.cr-chips .k-bill .k-chip{ display:inline-block; padding:2px 7px; background:#fff; border:1px solid var(--tl); font-size:12px; font-weight:700;
  line-height:1.35; color:var(--ink2); }

/* ------------------------------ the nine points: white, small, tooltip */
.rf .k-pts{ padding:8px 0 8px; box-shadow:none; }
.rf .k-ptb{ grid-template-columns:var(--L) minmax(0,1fr); min-height:34px; padding-top:7px; padding-bottom:7px; }
.rf .k-ptb .k-ic{ stroke:var(--ti); }
.rf .k-pl{ font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:underline dotted #C2CAD5; text-decoration-thickness:1px;
  text-underline-offset:5px; text-decoration-skip-ink:none; }
.rf .k-ptb:hover, .rf .k-pt.is-tip .k-ptb{ background:#F6F8FA; }
.rf .k-ptb:hover .k-pl, .rf .k-pt.is-tip .k-pl{ text-decoration-color:var(--ink3); }
.rf .k-tip{ top:calc(100% - 4px); }
.rf.pt-plain .k-ptb{ grid-template-columns:minmax(0,1fr); }
.rf.pt-num .k-num{ box-shadow:inset 0 0 0 1px var(--tl); color:var(--ti); }
.rf.pt-iconsq .k-isq{ background:var(--tw); }
.rf.pt-iconsq .k-isq .k-ic{ stroke:var(--ti); }
.rf.pt-tick .k-tk{ background:var(--tw); stroke:var(--ti); }
.rf.pt-rowhover .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--rule); }

/* ------------------------------------------------------ buttons ----- */
.rf .k-acts{ padding-top:12px; padding-bottom:20px; }
.rf .k-b2{ color:var(--ti); box-shadow:inset 0 0 0 1px var(--te); }
.rf .k-b2:hover{ background:var(--tw); color:var(--ti); box-shadow:inset 0 0 0 1px var(--ti); }

/* -------------------------------------------- More details: white --- */
.rf .k-mbar{ background:#fff; box-shadow:inset 0 1px 0 var(--te); min-height:48px; }
.rf .k-mbar:hover{ background:#F6F8FA; }
.rf .k-mbar b{ font-size:14px; font-weight:750; color:var(--ink); }
.rf .k-tri{ fill:var(--ink); }
.rf .k-ct{ font-size:14.5px; font-weight:750; }
.rf .k-cn{ background:#fff; box-shadow:inset 0 0 0 1px #D3DAE4; color:var(--ink3); }
.rf .k-ch[aria-expanded="true"] .k-cn{ background:var(--ink); color:#fff; box-shadow:none; }
.rf .k-ch:hover .k-ct, .rf .k-ch[aria-expanded="true"] .k-ct, .rf .k-tb:hover .k-tt, .rf .k-tb[aria-expanded="true"] .k-tt{ color:var(--ink); }
.rf .k-key{ background:#fff; box-shadow:inset 0 0 0 1px #D3DAE4; }
.rf .k-key--s{ box-shadow:none; }
.rf .k-r--ch:has([aria-expanded="true"]) > .k-rc,
.rf .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--keys, .k-r--views, .k-r--fh, .k-r--cht) > .k-rc{ background:#F7F9FB; }
.rf .k-pk[aria-selected="true"], .rf .k-ctab[aria-selected="true"]{ color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.rf .k-ctt .k-cn{ background:var(--ink); color:#fff; box-shadow:none; }
.rf .k-tk{ background:#F1F4F8; stroke:var(--ink); }
.rf .k-pp, .rf .k-pn{ color:#0760C6; }
.me-outline.rf .k-cn{ background:none !important; box-shadow:none !important; color:var(--ink3); }
.me-outline.rf .k-ch[aria-expanded="true"] .k-cn{ color:var(--ink); }
/* ======================================================================
   TWO ACROSS (lane ≤ 1180px) · ONE 480px COLUMN (lane ≤ 740px)
   — the source page's own break points

   2026-09-24 · the one-column threshold was 720px and produced a
   1 -> 2 -> 1 -> 2 column reversal while resizing. The page's outer padding
   is a flat 18px up to viewport 760px and then jumps to 30.4px at 761px, so
   .kx-in RISES to 724.0px at vw=760, DROPS to 700.1px at vw=761, and climbs
   again — crossing a 720px threshold three times (vw 760 up, 761 down,
   784 up). Any threshold inside the jump interval (700.1, 724.0] is crossed
   three times; only a threshold ABOVE 724.0 (or below 700.1) is crossed once.
   Below 700.1 would start two columns at vw~736, breaking the approved
   "768 and below = one package". So the threshold is 740px: 16px of margin
   above the 724.0px pre-jump maximum, putting the single transition at
   vw~806 — between the approved 768 (switcher) and 820 (two columns).
   The 1180px threshold is crossed once already (vw~1284) and is unchanged.
   ====================================================================== */
@container kx (max-width:1180px){
  .kx .kx-row{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; }
  .kx .k:nth-child(n+3){ margin-top:var(--gap); }
}
@container kx (max-width:740px){
  .kx{ --A:16px; --L:28px; }
  .kx .kx-row{ grid-template-columns:minmax(0,480px); justify-content:center; }
  .kx .k + .k{ margin-top:var(--gap); }
  .kx .k-a, .kx .k-ticks li{ font-size:14px; }
}
@media (max-width:640px){ .kx .kx-s{ font-size:14px; } }
@media (prefers-reduced-motion:reduce){
  .kx .k-fold, .kx .k-fold > .k-rc, .kx .k-key::before, .kx .k-key::after, .kx .k-pvv, .kx .k-tip{ transition:none; }
}

/* ======================================================================
   gads-pkg-dm10-v6c — BELOW THE TOP AREA, IN THE SAME COLOUR FAMILY
   Each package's own five shades (top area · lightest tint · rule · line ·
   edge · deep shade) now reach the nine points, the buttons and More
   details, each option by one concept (bc-*). Plus the phone switch.
   ====================================================================== */
.kx [data-h="std"]{ --t:#F5E1C8; --tw:#FBF3EA; --tr:#EBDDC9; --tl:#D6BA95; --te:#BE9E72; --ti:#765311; }   /* sand  */
.kx [data-h="adv"]{ --t:#CAECDA; --tw:#EBF7F1; --tr:#C9E6D8; --tl:#96C9B0; --te:#71B093; --ti:#006843; }   /* green */
.kx [data-h="pro"]{ --t:#D0E6FF; --tw:#EDF5FE; --tr:#CDE0F5; --tl:#9EC2E8; --te:#79A7D4; --ti:#00609D; }   /* blue  */
.kx [data-h="ent"]{ --t:#D9E5F0; --tw:#F0F5F9; --tr:#D5E0EA; --tl:#AEC1D0; --te:#8FA6B8; --ti:#385E76; }   /* slate */

/* ---------------------- the drawer and the tooltips wear the package ---- */
.rf2 .k-pl{ text-decoration-color:var(--tl); }
.rf2 .k-ptb:hover .k-pl, .rf2 .k-pt.is-tip .k-pl{ text-decoration-color:var(--ti); }
.rf2 .k-tip{ border-color:var(--te); box-shadow:0 12px 24px -14px rgba(13,26,46,.3); }
.rf2 .k-tip::before{ border-left-color:var(--te); border-top-color:var(--te); }
.rf2 .k-tipt{ color:var(--ti); }
.rf2 .k-mbar{ box-shadow:inset 0 1px 0 var(--tl); }
.rf2 .k-mbar b{ color:var(--ink); }
.rf2 .k-tri{ fill:var(--ti); }
.rf2 .k-cn{ background:#fff; box-shadow:inset 0 0 0 1px var(--tl); color:var(--ti); }
.rf2 .k-ch[aria-expanded="true"] .k-cn, .rf2 .k-ctt .k-cn{ background:var(--ti); color:#fff; box-shadow:none; }
.rf2 .k-key{ background:#fff; box-shadow:inset 0 0 0 1px var(--tl); }
.rf2 .k-key::before, .rf2 .k-key::after{ background:var(--ti); }
.rf2 .k-key--s{ background:transparent; box-shadow:none; }
.rf2 .k-r--ch > .k-rc{ box-shadow:inset 0 1px 0 var(--tr); }
.rf2 .k-r--th:not(.is-first) > .k-rc .k-tb, .rf2 .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:inset 0 1px 0 var(--tr); }
.rf2 .k-r--ch:has([aria-expanded="true"]) > .k-rc,
.rf2 .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--keys, .k-r--views, .k-r--fh, .k-r--cht, .k-r--tabs) > .k-rc{ background:var(--tw); }
.rf2 .k-every{ color:var(--ti); }
.rf2 .k-tk{ background:var(--tw); stroke:var(--ti); }
.rf2 .k-entn b::before{ background:var(--ti); }
.rf2 .k-pks, .rf2 .k-ctabs{ background:var(--tw); box-shadow:inset 0 0 0 1px var(--tr); }
.rf2 .k-pk[aria-selected="true"], .rf2 .k-ctab[aria-selected="true"]{ background:#fff; color:var(--ti); box-shadow:inset 0 0 0 1.5px var(--ti); }
.rf2 .k-pk:hover, .rf2 .k-ctab:hover{ background:#fff; color:var(--ti); }
.rf2 .k-pk.is-inc::after{ background:var(--tl); }
.rf2 .k-pp, .rf2 .k-pn{ color:var(--ti); }
.rf2 .k-pp:hover:not(:disabled), .rf2 .k-pn:hover:not(:disabled){ background:var(--tw); }
.rf2 .k-b2{ color:var(--ti); box-shadow:inset 0 0 0 1px var(--te); }

/* ============================================= THE TEN COLOUR CONCEPTS == */
/* 1 · Soft Card — the whole body in the package's lightest tint */
.bc-wash :is(.k-pts, .k-acts, .k-more){ background:var(--tw); }
.bc-wash .k-mbar{ background:transparent; }
.bc-wash .k-mbar:hover{ background:#fff; }
.bc-wash .k-ptb:hover, .bc-wash .k-pt.is-tip .k-ptb{ background:#fff; }
.bc-wash .k-r--ch:has([aria-expanded="true"]) > .k-rc,
.bc-wash .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--keys, .k-r--views, .k-r--fh, .k-r--cht, .k-r--tabs) > .k-rc{ background:#fff; }

/* 2 · Framed White — white body, a firm frame in the package edge colour */
.bc-frame :is(.k-crown, .k-pts, .k-acts, .k-more){ border-width:2px; }
.bc-frame .k-mbar{ background:var(--tw); }
.bc-frame .k-mbar:hover{ background:var(--t); }
.bc-frame .k-ptb:hover, .bc-frame .k-pt.is-tip .k-ptb{ background:var(--tw); }
.bc-frame.pt-num .k-num{ background:var(--tw); box-shadow:none; color:var(--ti); }

/* 3 · White Panels — the same white panel as the figures, on the lightest tint */
.bc-panels :is(.k-pts, .k-acts){ background:var(--tw); }
.bc-panels .k-pts{ position:relative; isolation:isolate; padding:14px 0; }
.bc-panels .k-pts::before{ content:""; position:absolute; z-index:-1; inset:6px calc(var(--A) - var(--out)); background:#fff; }
.bc-panels .k-ptb:hover, .bc-panels .k-pt.is-tip .k-ptb{ background:var(--tw); }
.bc-panels .k-more{ background:#fff; }
.bc-panels .k-mbar{ background:var(--tw); }

/* 4 · Colour Rules — a white body whose every line is the package colour */
.bc-rules .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--tr); }
.bc-rules .k-acts{ box-shadow:inset 0 1px 0 var(--tr); }
.bc-rules .k-ptb:hover, .bc-rules .k-pt.is-tip .k-ptb{ background:var(--tw); }
.bc-rules .k-mbar{ background:#fff; box-shadow:inset 0 1px 0 var(--tl), inset 0 -1px 0 var(--tr); }

/* 5 · Bookend — the colour at the top and, lightly, at the foot */
.bc-footer :is(.k-acts, .k-more){ background:var(--tw); }
.bc-footer .k-acts{ box-shadow:inset 0 1px 0 var(--tr); }
.bc-footer .k-mbar{ background:transparent; }
.bc-footer .k-mbar:hover{ background:#fff; }
.bc-footer .k-ptb:hover, .bc-footer .k-pt.is-tip .k-ptb{ background:var(--tw); }
.bc-footer .k-r--ch:has([aria-expanded="true"]) > .k-rc,
.bc-footer .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--keys, .k-r--views, .k-r--fh, .k-r--cht, .k-r--tabs) > .k-rc{ background:#fff; }

/* 6 · Ink Labels — the point names in the package's deep shade */
.bc-ink .k-pl{ color:var(--ti); font-weight:650; }
.bc-ink .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--tr); }
.bc-ink .k-ptb:hover, .bc-ink .k-pt.is-tip .k-ptb{ background:var(--tw); }
.bc-ink .k-ptb:hover .k-pl, .bc-ink .k-pt.is-tip .k-pl{ color:var(--ti); }
.bc-ink .k-mbar{ background:#fff; }

/* 7 · Tinted Heads — every chapter head on the lightest tint, text on white */
.bc-heads .k-mbar{ background:var(--tw); }
.bc-heads .k-r--ch > .k-rc{ background:var(--tw); box-shadow:inset 0 1px 0 #fff; }
.bc-heads .k-r--ch:has([aria-expanded="true"]) > .k-rc{ background:var(--t); }
.bc-heads .k-fold.is-open:is(.k-r--keys, .k-r--views, .k-r--cb) > .k-rc{ background:#fff; }
.bc-heads .k-ptb:hover, .bc-heads .k-pt.is-tip .k-ptb{ background:var(--tw); }

/* 8 · Step Down — colour, lightest tint, white */
.bc-step .k-pts{ background:var(--tw); }
.bc-step .k-ptb:hover, .bc-step .k-pt.is-tip .k-ptb{ background:#fff; }
.bc-step.pt-num .k-num{ background:#fff; box-shadow:inset 0 0 0 1px var(--tl); }
.bc-step .k-mbar{ background:#fff; }

/* 9 · Menu Panel — the points as white rows on the lightest tint, like the figures */
.bc-menu .k-pts{ padding:10px 0; }
.bc-menu .k-pts{ position:relative; isolation:isolate; }
.bc-menu .k-pts::before{ content:""; position:absolute; z-index:-1; inset:10px calc(var(--A) - var(--out)); background:var(--tw); }
.bc-menu .k-pt{ padding:1px calc(var(--A) - var(--out) + 4px); }
.bc-menu .k-pt:first-child{ padding-top:5px; }
.bc-menu .k-pt:last-child{ padding-bottom:5px; }
.bc-menu .k-ptb{ padding-left:calc(var(--out) - 4px); padding-right:calc(var(--out) - 4px); background:#fff; box-shadow:none !important; }
.bc-menu .k-ptb:hover, .bc-menu .k-pt.is-tip .k-ptb{ background:#fff; box-shadow:inset 0 0 0 1px var(--te) !important; }
.bc-menu .k-tip{ left:4px; right:4px; }
.bc-menu .k-mbar{ background:#fff; }

/* 10 · Soft Checklist — ticks on plates of the top-area colour */
.bc-soft .k-ptb .k-tk{ background:var(--t); stroke:var(--ti); }
.bc-soft .k-ptb:hover, .bc-soft .k-pt.is-tip .k-ptb{ background:var(--tw); }
.bc-soft .k-b2{ background:var(--tw); }
.bc-soft .k-mbar{ background:#fff; }


/* ======================================================================
   THE PHONE SWITCH — one package on screen, pinned while you read it
   ====================================================================== */
.kx .k-sw{ display:none; }
.kx .s-k{ margin:0; border:0; border-radius:0; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; background:#fff; }
.kx .s-k:focus-visible{ outline:2px solid #0760C6; outline-offset:-2px; }
.kx .s-n{ display:block; font-size:11.5px; font-weight:800; letter-spacing:-.005em; line-height:1.25; color:var(--ink2); }
.kx .s-p{ display:block; font-size:15px; font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--ink); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.kx .s-p small{ margin-left:3px; font-size:10.5px; font-weight:600; letter-spacing:0; color:var(--muted); }
.kx .s-was{ display:block; font-size:11px; font-weight:600; line-height:1.3; text-decoration:line-through; text-decoration-thickness:1px;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.kx .s-off{ display:block; font-size:11px; font-weight:800; line-height:1.3; color:var(--ti); }
.kx .s-min{ display:block; font-size:10.5px; font-weight:600; line-height:1.3; color:var(--ink3); }
.kx .s-min b{ font-weight:800; color:var(--ink); }
.kx .s-na{ display:block; font-size:11px; line-height:1.3; }

@container kx (max-width:740px){
  .kx .k-sw{ display:block; position:sticky; top:var(--kx-top); z-index:30; margin:0 0 14px; padding:8px 0 10px; background:#fff;
    box-shadow:-18px 0 0 #fff, 18px 0 0 #fff; }
  .kx .k-sw::after{ content:""; position:absolute; left:-18px; right:-18px; bottom:0; height:1px; background:#E3E8EF; }
  /* one package on screen */
  .kx .kx-row[data-cur="std"] > .k:not([data-h="std"]),
  .kx .kx-row[data-cur="adv"] > .k:not([data-h="adv"]),
  .kx .kx-row[data-cur="pro"] > .k:not([data-h="pro"]),
  .kx .kx-row[data-cur="ent"] > .k:not([data-h="ent"]){ display:none; }
  .kx .kx-row > .k{ margin-top:0 !important; }

  /* ledger: four columns, five rows that line up across them */
  .kx .sw-ledger .s-keys{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:repeat(5, auto);
    box-shadow:inset 0 0 0 1px #D6DEE9; }
  .kx .sw-ledger .s-k{ grid-row:1 / span 5; display:grid; grid-template-rows:subgrid; justify-items:center; align-items:start; min-width:0;
    padding:7px 3px 8px; text-align:center; }
  .kx .sw-ledger .s-k + .s-k{ box-shadow:inset 1px 0 0 #E6EBF2; }
  .kx .sw-ledger .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 0 0 0 1.5px var(--te); cursor:default; }
  .kx .sw-ledger .s-k[aria-selected="true"] .s-n{ color:var(--ti); }
  .kx .sw-ledger .s-p{ padding-top:2px; font-size:14.5px; white-space:normal; text-wrap:balance; }
  .kx .sw-ledger .s-k[data-h="ent"] .s-p{ font-size:13px; line-height:1.1; }
  .kx .sw-ledger .s-k[data-h="ent"] .s-off{ font-size:10px; line-height:1.2; }
  .kx .sw-ledger .s-p small{ display:block; margin:1px 0 0; }
  .kx .sw-ledger .s-was{ padding-top:4px; }
  .kx .sw-ledger .s-off{ font-size:10.5px; text-wrap:balance; }
  .kx .sw-ledger .s-min{ padding-top:3px; font-size:10px; text-wrap:balance; }

  /* tabs: name and price; the chosen package's terms on one line under the row */
  .kx .sw-tabs{ padding-bottom:0; }
  .kx .sw-tabs .s-keys{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; padding:4px; background:#F1F4F8; }
  .kx .sw-tabs .s-k{ display:grid; justify-items:center; align-content:center; row-gap:2px; min-width:0; min-height:52px; padding:7px 2px;
    background:transparent; text-align:center; }
  .kx .sw-tabs .s-n{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
  .kx .sw-tabs .s-p{ font-size:14.5px; white-space:nowrap; }
  .kx .sw-tabs .s-p small{ display:none; }
  .kx .sw-tabs .s-k[data-h="ent"] .s-p{ max-width:100%; font-size:12px; line-height:1.15; white-space:normal; text-wrap:balance; }
  .kx .sw-tabs .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 0 0 0 1.5px var(--te); cursor:default; }
  .kx .sw-tabs .s-k[aria-selected="true"] .s-n{ color:var(--ti); }
  .kx .sw-tabs .s-lines{ padding:9px 2px 10px; }
  .kx .sw-tabs .s-line{ display:none; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:2px 14px; margin:0; font-size:12.5px;
    text-align:center; }
  .kx .sw-tabs[data-cur="std"] .s-line[data-h="std"], .kx .sw-tabs[data-cur="adv"] .s-line[data-h="adv"],
  .kx .sw-tabs[data-cur="pro"] .s-line[data-h="pro"], .kx .sw-tabs[data-cur="ent"] .s-line[data-h="ent"]{ display:flex; }
  .kx .sw-tabs .s-line > *{ display:inline; font-size:12.5px; }

  /* slider: a card per package, all facts, swiped sideways */
  .kx .sw-slider .s-keys{ display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    scrollbar-width:none; margin:0 -18px; padding:0 18px; scroll-padding:0 18px; }
  .kx .sw-slider .s-keys::-webkit-scrollbar{ display:none; }
  .kx .sw-slider .s-k{ flex:0 0 138px; display:grid; align-content:start; row-gap:2px; padding:9px 11px 10px; text-align:left;
    scroll-snap-align:start; box-shadow:inset 0 0 0 1px #D6DEE9; }
  .kx .sw-slider .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 0 0 0 1.5px var(--te); cursor:default; }
  .kx .sw-slider .s-k[aria-selected="true"] .s-n{ color:var(--ti); }
  .kx .sw-slider .s-p{ padding-top:1px; font-size:16px; }
  .kx .sw-slider .s-was{ padding-top:3px; }
  .kx .sw-slider .s-min{ padding-top:2px; }
}
@media (prefers-reduced-motion:reduce){ .kx .kx-row > .k{ animation:none !important; } }
@keyframes k-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.kx .kx-row > .k.is-in{ animation:k-in .32s cubic-bezier(.22,.61,.36,1); }
/* ======================================================================
   gads-pkg-o3n5-w2p — OPTION 3, CALM AND EASY TO READ
   Kept: the top-area colour, the price-first order, the figures on a white
   panel, the thin package-coloured card edge. Below Planning documentation
   the card is neutral. The content INSIDE the coloured top is cleaned up
   five ways (cc-*), and the part below five ways (nb-*).
   ====================================================================== */
.n3{ --nk:#0D1A2E; --nk2:#2B3545; --nm:#5E6672; --nl:#C9D1DC; --nr:#E6EAF0; --np:#F5F7F9; --nh:#F1F4F7; }

/* --------------------------- the part below the figures: neutral --- */
.n3 :is(.k-pts, .k-acts, .k-more){ background:#fff; }
.n3 .k-pts::before{ content:none; }
.n3 .k-pts{ padding:10px 0 8px; box-shadow:none; }
.n3 .k-pl{ font-size:14px; font-weight:600; color:var(--nk); text-decoration:none; }
.n3 .k-ptb{ min-height:36px; padding-top:8px; padding-bottom:8px; }
.n3 .k-ptb .k-ic{ stroke:#6B7584; }
.n3 .k-ptb:hover, .n3 .k-pt.is-tip .k-ptb{ background:var(--nh); }
.n3 .k-ptb:hover .k-pl, .n3 .k-pt.is-tip .k-pl{ color:var(--nk); }
.n3.cue-info .k-ptb{ grid-template-columns:var(--L) minmax(0,1fr) 16px; column-gap:0; }
.n3.cue-info .k-ptb .k-info{ margin-left:8px; }
.n3.cue-info .k-ptb{ grid-template-columns:var(--L) minmax(0,1fr) 24px; }
.n3.cue-info.pt-plain .k-ptb{ grid-template-columns:minmax(0,1fr) 24px; column-gap:0; }
.n3 .k-info{ width:16px; height:16px; fill:none; stroke:#9AA4B2; stroke-width:1.4; }
.n3 .k-info .k-infd{ fill:#9AA4B2; stroke:none; }
.n3 .k-ptb:hover .k-info, .n3 .k-pt.is-tip .k-info{ stroke:var(--nk2); }
.n3 .k-ptb:hover .k-infd, .n3 .k-pt.is-tip .k-infd{ fill:var(--nk2); }
.n3 .k-tip{ border-color:var(--nl); box-shadow:0 12px 24px -14px rgba(13,26,46,.28); }
.n3 .k-tip::before{ border-left-color:var(--nl); border-top-color:var(--nl); }
.n3 .k-tipt{ color:var(--nk); }
.n3 .k-tipv{ font-size:13.5px; line-height:1.55; }

.n3 .k-acts{ padding-top:14px; padding-bottom:20px; box-shadow:none; }
.n3 .k-b2{ color:var(--nk); box-shadow:inset 0 0 0 1px var(--nl); }
.n3 .k-b2:hover{ background:var(--nh); color:var(--nk); box-shadow:inset 0 0 0 1px #9AA4B2; }

.n3 .k-mbar{ background:#fff; box-shadow:inset 0 1px 0 var(--nr); }
.n3 .k-mbar:hover{ background:var(--nh); }
.n3 .k-mbar b{ color:var(--nk); }
.n3 .k-tri{ fill:var(--nk); }
.n3 .k-cn{ background:#fff; box-shadow:inset 0 0 0 1px var(--nl); color:var(--nk2); }
.n3 .k-ch[aria-expanded="true"] .k-cn, .n3 .k-ctt .k-cn{ background:var(--nk); color:#fff; box-shadow:none; }
.n3 .k-key{ background:#fff; box-shadow:inset 0 0 0 1px var(--nl); }
.n3 .k-key::before, .n3 .k-key::after{ background:var(--nk2); }
.n3 .k-key--s{ background:transparent; box-shadow:none; }
.n3 .k-r--ch > .k-rc{ box-shadow:inset 0 1px 0 var(--nr); }
.n3 .k-r--th:not(.is-first) > .k-rc .k-tb, .n3 .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:inset 0 1px 0 var(--nr); }
.n3 .k-r--ch:has([aria-expanded="true"]) > .k-rc,
.n3 .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--keys, .k-r--views, .k-r--fh, .k-r--cht, .k-r--tabs) > .k-rc{ background:#fff; }
.n3 .k-every{ color:var(--nm); }
.n3 .k-tk{ background:var(--nh); stroke:var(--nk); }
.n3 .k-entn b::before{ background:var(--nk2); }
.n3 .k-ct{ color:var(--nk); }
.n3 .k-tt{ font-size:14px; color:var(--nk); }
.n3 .k-tx{ color:var(--nm); }
.n3 .k-sl{ color:var(--nm); font-size:12px; }
/* easier reading in More details, all five */
.n3 .k-a, .n3 .k-ticks li{ font-size:14px; line-height:1.62; color:#243041; }
.n3 .k-an + .k-an{ margin-top:12px; }

/* ================================ INSIDE THE COLOURED TOP (cc-*) ===== */
/* common: fewer colour roles — the package deep shade only where named */
.n3 .k-name > span{ color:var(--nm); }
.n3 .k-bill b{ color:var(--nm); font-weight:650; }
.n3 .k-off{ border-color:var(--nl); color:var(--nk); }
.n3 .k-tray--r .k-ic{ width:16px; height:16px; padding:0; background:none; stroke:#6B7584; }
.n3 .k-tile dt{ color:var(--nm); }

/* 1 · calm — only the price and the ticks carry the package colour; no icons in the figures */
.cc-calm .k-now b{ color:var(--ti); }
.cc-calm .k-qual{ color:var(--nk2); }
.cc-calm .k-qi{ stroke:var(--ti); }
.cc-calm .k-tray--r .k-tile{ grid-template-columns:minmax(0,1fr); }
.cc-calm .k-tray--r .k-lead{ display:none; }

/* 2 · ruled — the price block and Billing Terms between fine lines of the package colour */
.cc-ruled .k-name > span{ color:var(--ti); }
.cc-ruled .k-qual{ color:var(--ti); }
.cc-ruled .k-bill{ position:relative; margin-top:14px; padding-top:13px; }
.cc-ruled .k-bill::before{ content:""; position:absolute; left:var(--A); right:var(--A); top:0; height:1px; background:var(--tl); }
.cc-ruled .k-tray--r .k-tile + .k-tile{ border-top-color:var(--tr, #E6EAF0); }

/* 3 · plates — the figures keep their small icon plates in the package's lightest tint */
.cc-plates .k-name > span, .cc-plates .k-qual{ color:var(--ti); }
.cc-plates .k-tray--r .k-ic{ width:22px; height:22px; padding:4px; background:var(--tw); stroke:var(--ti); }
.cc-plates .k-off{ border-color:var(--te); color:var(--ti); }

/* 4 · accent — one accent only: the qualifier and the offer */
.cc-accent .k-qual{ color:var(--ti); }
.cc-accent .k-off{ border-color:var(--te); color:var(--ti); }

/* 5 · read — larger name, price and figure values, more air before the figures */
.cc-read .k-name > b{ font-size:23px; }
.cc-read .k-qual{ font-size:14px; color:var(--ti); }
.cc-read .k-now b{ font-size:38px; }
.cc-read .k-now.is-c b{ font-size:29px; }
.cc-read .k-bill .k-bv{ font-size:14px; }
.cc-read .k-tray{ margin-top:22px; }
.cc-read .k-tile dt{ font-size:12.5px; }
.cc-read .k-fn{ font-size:23px; }
.cc-read .k-ft{ font-size:14.5px; }

/* ===================================== THE PART BELOW (nb-*) ========= */
/* 1 · plain — spaced names, no lines */
.nb-plain .k-ptb{ min-height:38px; }

/* 2 · lines — one fine grey line between points; faint dotted line under the name */
.nb-lines .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--nr); }
.cue-dots .k-pl{ text-decoration:underline dotted var(--nl); text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-skip-ink:none; }
.cue-dots .k-ptb:hover .k-pl, .cue-dots .k-pt.is-tip .k-pl{ text-decoration-color:var(--nk2); }

/* 3 · panel — the points on one soft grey panel, divided by white lines */
.nb-panel .k-pts{ position:relative; isolation:isolate; padding:12px 0; }
.nb-panel .k-pts::before{ content:""; position:absolute; z-index:-1; inset:8px calc(var(--A) - var(--out)); background:var(--np); }
.nb-panel .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 #fff; }
.nb-panel .k-ptb:hover, .nb-panel .k-pt.is-tip .k-ptb{ background:#fff; }

/* 4 · accent — the open chapter's number and the ticks in the package's deep shade */
.nb-accent .k-ch[aria-expanded="true"] .k-cn{ background:var(--ti); }
.nb-accent .k-ticks .k-tk{ background:#fff; box-shadow:inset 0 0 0 1px var(--tl); stroke:var(--ti); }
.nb-accent .k-every{ color:var(--ti); }
.nb-accent .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--nr); }

/* 5 · read — answers indented under their topic, larger, topics separated by space */
.nb-read .k-a, .nb-read .k-ticks li{ font-size:14.5px; line-height:1.68; }
.nb-read .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:none; padding-top:18px; }
.nb-read .k-tt{ font-size:14.5px; }
.nb-read .k-tbd{ padding-bottom:6px; }
/* ======================================================================
   gads-pkg-p10-x7r · p5 — the package section as one system
   Colour: the package colour lives in the top area only (name → Planning
   documentation) and in the phone switch's chosen key. Everything below
   the top area is ink, greys and white.
   Scale:  space 4 · 8 · 12 · 16 · 22 · 32   type 11 · 12.5 · 14 · 14.5 · 21 · 32
   States: hover = soft grey ground · focus = 2px #0760C6 ring · selected =
           ink fill (chapter plates, tabs) · open = joined to its content
   ====================================================================== */
.p5{ --pk:#0D1A2E; --pk2:#2B3545; --pm:#5B6574; --pl:#C9D1DC; --pr:#E4E9EF; --pg:#F5F7F9; --ph:#F1F4F7; --ring:#0760C6; }
.p5 .kx-in{ --A:22px; }
@container kx (max-width:740px){ .p5 .kx-row, .p5 .k-sw{ --A:16px; } }

/* ------------------------------------------------ the top area ------ */
.p5 .k-id{ padding-top:22px; }
.p5 .k-badge{ width:44px; height:44px; }
.p5 .k-name > b{ font-size:21px; letter-spacing:-.022em; }
.p5 .k-qual{ padding-top:10px; font-size:13.5px; font-weight:650; }
.p5 .k-from{ margin-top:18px; padding-top:16px; font-size:12.5px; }
.p5 .k-was{ padding-top:5px; }
.p5 .k-now{ padding-top:4px; }
.p5 .k-now b{ font-size:32px; letter-spacing:-.034em; }
.p5 .k-now.is-c b{ font-size:26px; }
.p5 .k-bill{ padding-top:14px; }
.p5 .k-bill .k-bv{ font-size:13.5px; font-weight:600; color:var(--pk2); }
.p5 .k-tray{ margin-top:18px; margin-bottom:22px; box-shadow:inset 0 0 0 1px var(--tr); }
.p5 .k-tray--r .k-tile{ padding:11px 0; }
.p5 .k-fn{ font-size:22px; }

/* ------------------------------------------------ the nine points --- */
.p5 .k-pts{ padding:12px 0 10px; }
.p5 .k-ptb{ min-height:40px; padding-top:9px; padding-bottom:9px; transition:background-color .16s ease; }
.p5 .k-pl{ font-size:14px; font-weight:600; letter-spacing:-.003em; line-height:1.4; color:var(--pk); }
.p5 .k-ptb:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; }
.p5 .k-info{ stroke:#A3ACB8; }
.p5 .k-info .k-infd{ fill:#A3ACB8; }
.p5 .k-tip{ padding:11px 13px 12px; border:1px solid var(--pl); border-radius:8px;
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s; }
.p5 .k-pt:hover .k-tip, .p5 .k-pt:focus-within .k-tip, .p5 .k-pt.is-tip .k-tip{
  transition:opacity .16s ease .08s, transform .16s ease .08s, visibility 0s linear .08s; }
.p5 .k-tip::before{ border-left-color:var(--pl); border-top-color:var(--pl); }
.p5 .k-tipt{ font-size:12.5px; font-weight:800; color:var(--pk); }
.p5 .k-tipv{ font-size:13.5px; line-height:1.55; color:var(--pk2); }

/* ------------------------------------------------ the two actions --- */
.p5 .k-acts{ gap:8px; padding-top:16px; padding-bottom:22px; }
.p5 .k-b1, .p5 .k-b2{ min-height:46px; font-size:14.5px; font-weight:750; }
.p5 .k-b2{ background:#fff; color:var(--pk); box-shadow:inset 0 0 0 1px var(--pl); }
.p5 .k-b2:hover{ background:var(--ph); color:var(--pk); box-shadow:inset 0 0 0 1px #9AA4B2; }
.p5 :is(.k-b1, .k-b2):focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* ------------------------------------------------ More details ------ */
.p5 .k-mbar{ min-height:50px; box-shadow:inset 0 1px 0 var(--pr); }
.p5 .k-mbar b{ font-size:14.5px; font-weight:750; color:var(--pk); }
.p5 .k-mbar[aria-expanded="true"]{ box-shadow:inset 0 1px 0 var(--pr), inset 0 -1px 0 var(--pr); }
.p5 .k-mbar:focus-visible, .p5 .k-ch:focus-visible, .p5 .k-tb:focus-visible, .p5 .k-cgo:focus-visible, .p5 .k-ctab:focus-visible{
  outline:2px solid var(--ring); outline-offset:-2px; }
.p5 .k-ch{ min-height:54px; }
.p5 .k-cn{ width:24px; height:24px; border-radius:5px; font-size:11.5px; }
.p5 .k-ct{ font-size:14.5px; font-weight:750; color:var(--pk); }
.p5 .k-cc{ font-size:12px; color:var(--pm); }
.p5 .k-ch:hover .k-key, .p5 .k-tb:hover .k-key{ background:var(--ph); }
.p5 .k-fh{ padding:16px 0 4px; }
.p5 .k-tt{ font-size:14px; font-weight:700; color:var(--pk); }
.p5 .k-tx{ font-size:11px; color:#7A8494; }
.p5 .k-every{ font-size:10.5px; letter-spacing:.09em; color:var(--pm); }
.p5 .k-a, .p5 .k-ticks li{ font-size:14px; line-height:1.62; color:#243041; }
.p5 .k-sl{ font-size:12px; font-weight:650; color:var(--pm); }
.p5 .k-tbd{ padding-bottom:14px; }
.p5 .k-t4 dt{ font-size:12px; color:var(--pm); }
.p5 .k-t4 dd{ font-size:14px; color:var(--pk); }

/* ======================================================================
   REFINED
   ====================================================================== */
/* 1 · Clean White — spacing, not lines, separates the points */
.op-clean .k-pt + .k-pt .k-ptb{ box-shadow:none; }
.op-clean .k-ptb{ min-height:42px; }

/* 2 · Hairline List — the open chapter heading closed by an ink rule */
.op-hair .k-r--ch:has([aria-expanded="true"]) > .k-rc{ box-shadow:inset 0 1px 0 var(--pr), inset 0 -1px 0 var(--pk2); }
.op-hair .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:inset 0 1px 0 var(--pr); }

/* 3 · Grey Panel — the open chapter's text on the same grey panel as the points */
.op-grey .k-more .k-fold.is-open:is(.k-r--fh, .k-r--tb, .k-r--cb) > .k-rc{ background:var(--pg); }
.op-grey .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:inset 0 1px 0 #fff; }
.op-grey .k-more .k-fold.is-open.k-r--tb:last-child > .k-rc, .op-grey .k-more .k-fold.is-open.k-r--cb > .k-rc{ padding-bottom:4px; }

/* 4 · One Accent — the accent stays in the top area; below, alternate points on a faint band */
.nb-zebra .k-pt:nth-child(even) .k-ptb{ background:#F7F9FB; }
.nb-zebra .k-ptb:hover, .nb-zebra .k-pt.is-tip .k-ptb{ background:var(--ph) !important; }
.op-accent .k-now b{ color:var(--pk); }

/* 5 · Reading Focus */
.op-read .k-a, .op-read .k-ticks li{ font-size:14.5px; line-height:1.7; }
.op-read .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:none; padding-top:20px; }
.op-read .k-ptb .k-ic{ stroke:#7A8494; }

/* ======================================================================
   NEW
   ====================================================================== */
/* 6 · Connected Tabs — the chosen chapter tab is joined to its page */
.op-tabs .k-r--tabs > .k-rc{ padding:0 var(--A); }
.op-tabs .k-ctabs{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; margin:14px 0 0; padding:0; background:none; border-radius:0;
  box-shadow:inset 0 -1px 0 var(--pl); }
.op-tabs .k-ctab{ height:40px; border-radius:0; background:var(--pg); font-size:12.5px; font-weight:750; color:var(--pm);
  box-shadow:inset 0 -1px 0 var(--pl), inset -1px 0 0 #fff; }
.op-tabs .k-ctab:hover{ background:var(--ph); color:var(--pk); }
.op-tabs .k-ctab[aria-selected="true"]{ background:#fff; color:var(--pk);
  box-shadow:inset 1px 0 0 var(--pl), inset -1px 0 0 var(--pl), inset 0 2px 0 var(--pk); }
.op-tabs .k-r--cht > .k-rc{ padding:0 var(--A); }
.op-tabs .k-ctt{ padding:16px 0 6px; font-size:15px; font-weight:800; color:var(--pk); }
.op-tabs .k-ctt .k-cn{ background:var(--pk); color:#fff; box-shadow:none; }
.op-tabs .k-r--th:not(.is-first) > .k-rc .k-tb{ box-shadow:inset 0 1px 0 var(--pr); }

/* 7 · Pinned Plan Bar */
.kx .k-stick{ display:none; }
.op-pin .k-stick{ display:block; position:sticky; top:var(--kx-top); z-index:25; height:0; }
.op-pin .k-sti{ position:absolute; left:0; right:0; top:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:var(--gap);
  padding:10px 0 12px; background:#fff; box-shadow:0 1px 0 var(--pr), -40px 0 0 #fff, 40px 0 0 #fff;
  visibility:hidden; transform:translateY(-6px); transition:transform .2s ease, visibility 0s linear .2s; }
.op-pin .k-stick.is-on .k-sti{ visibility:visible; transform:none; transition:transform .2s ease, visibility 0s; }
.op-pin .k-stc{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:10px; row-gap:8px; padding:11px 14px 12px;
  background:#fff; box-shadow:inset 0 0 0 1px var(--pl), inset 0 3px 0 var(--te); }
.op-pin .k-stn{ margin:0; min-width:0; }
.op-pin .k-stn span{ display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pm); }
.op-pin .k-stn b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.015em; color:var(--pk); }
.op-pin .k-stp{ margin:0; text-align:right; white-space:nowrap; }
.op-pin .k-stp b{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--pk); }
.op-pin .k-stp span{ margin-left:3px; font-size:11.5px; font-weight:600; color:var(--pm); }
.op-pin .k-stb{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:32px; background:var(--ring); color:#fff;
  font-size:12.5px; font-weight:750; text-decoration:none; }
.op-pin .k-stb:hover{ background:#054E9F; }
@container kx (max-width:1180px){ .op-pin .k-stick{ display:none; } }

/* 8 · Chapter Stepper — chapters and topics on one vertical path */
.op-step .k-more .k-r > .k-rc{ position:relative; }
.op-step .k-more .k-r > .k-rc::before{ content:""; position:absolute; left:calc(var(--A) + 11px); top:0; bottom:0; width:2px; background:#CDD4DE; }
.op-step .k-r--ch[data-c="1"] > .k-rc::before{ top:50%; }
.op-step .k-r--ch[data-c="5"]:not(:has([aria-expanded="true"])) > .k-rc::before{ bottom:50%; }
.op-step .k-more .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb) > .k-rc::before{ background:var(--pk2); }
.op-step .k-r--ch:has([aria-expanded="true"]) > .k-rc::before{ bottom:50%; }
.op-step .k-r--ch[data-c="1"]:has([aria-expanded="true"]) > .k-rc::before{ display:none; }
.op-step .k-r--ch:has([aria-expanded="true"]) > .k-rc::after{ content:""; position:absolute; left:calc(var(--A) + 11px); top:50%; bottom:0; width:2px;
  background:var(--pk2); }
.op-step .k-cn{ position:relative; z-index:1; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px #AAB4C1; }
.op-step .k-tb .k-lead{ position:relative; }
.op-step .k-tb .k-tx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.op-step .k-tb .k-lead::before{ content:""; position:absolute; z-index:1; left:7px; top:6px; width:10px; height:10px; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 2px #AAB4C1; }
.op-step .k-tb[aria-expanded="true"] .k-lead::before{ background:var(--pk2); box-shadow:none; }
.op-step .k-tb:hover .k-lead::before{ box-shadow:inset 0 0 0 2px var(--pk2); }

/* 9 · Row Focus — the same line lit in all four cards */
.p5-rowf .k-pt.is-row .k-ptb{ background:var(--ph); }
.p5-rowf .k-more > .k-r.is-row > .k-rc{ background:var(--pg); }
.p5-rowf .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--pr); }
.p5-rowf .k-r--th:not(.is-first) > .k-rc .k-tb{ box-shadow:inset 0 1px 0 var(--pr); }

/* 10 · Index & Reader */
.op-index .k-r--ix > .k-rc{ box-shadow:inset 0 1px 0 var(--pr); }
.op-index .k-r--ch:has([aria-expanded="true"]) > .k-rc{ background:var(--pg); box-shadow:inset 0 1px 0 var(--pr), inset 0 -1px 0 var(--pr); }
.op-index .k-r--cnav > .k-rc{ padding:0 var(--A); }
.op-index .k-cnav{ display:flex; justify-content:space-between; gap:10px; padding:12px 0 16px; box-shadow:inset 0 1px 0 var(--pr); }
.op-index .k-cgo{ display:grid; gap:2px; max-width:49%; margin:0; padding:8px 10px; border:0; border-radius:0; background:none; font:inherit;
  text-align:left; cursor:pointer; transition:background-color .16s ease; }
.op-index .k-cgo--p{ margin-left:-10px; }
.op-index .k-cgo--n{ margin-left:auto; margin-right:-10px; text-align:right; }
.op-index .k-cgo span{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pm); }
.op-index .k-cgo b{ font-size:13.5px; font-weight:750; line-height:1.35; color:var(--pk); }
.op-index .k-cgo:hover{ background:var(--ph); }

/* ======================================================================
   PHONE SWITCHES
   ====================================================================== */
@container kx (max-width:740px){
  /* joined tabs (6): the chosen package tab and its terms strip are one object with the card below */
  .p5 .sw-joined{ padding-bottom:0; margin-bottom:0; }
  .p5 .sw-joined::after{ display:none; }
  .p5 .sw-joined .s-keys{ gap:0; padding:0; background:none; }
  .p5 .sw-joined .s-k{ min-height:54px; background:var(--pg); box-shadow:inset 0 -1px 0 var(--te-cur, #C9D1DC), inset -1px 0 0 #fff; }
  .p5 .sw-joined .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 1px 0 0 var(--te), inset -1px 0 0 var(--te), inset 0 1px 0 var(--te); }
  .p5 .sw-joined .s-lines{ padding:9px 8px 10px; background:var(--t); box-shadow:inset 1px 0 0 var(--te), inset -1px 0 0 var(--te); }
  .p5 .sw-joined .s-line > *{ color:var(--pk2); }
  .p5 .sw-joined .s-off{ color:var(--ti); }
  .op-tabs .kx-row > .k .k-crown{ border-top:0; }

  /* one bar + Change (7) */
  .p5 .sw-bar{ padding:8px 0 10px; }
  .p5 .sw-bar .s-bar{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; width:100%; margin:0; padding:10px 12px;
    border:0; border-radius:0; background:var(--t); box-shadow:inset 0 0 0 1px var(--te); font:inherit; color:inherit; text-align:left; cursor:pointer; }
  .p5 .sw-bar .s-bar:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
  .p5 .sw-bar .s-cur{ display:none; grid-template-columns:auto 1fr; align-items:baseline; column-gap:10px; row-gap:3px; min-width:0; }
  .p5 .sw-bar[data-cur="std"] .s-cur[data-h="std"], .p5 .sw-bar[data-cur="adv"] .s-cur[data-h="adv"],
  .p5 .sw-bar[data-cur="pro"] .s-cur[data-h="pro"], .p5 .sw-bar[data-cur="ent"] .s-cur[data-h="ent"]{ display:grid; }
  .p5 .sw-bar .s-n{ font-size:14px; color:var(--pk); }
  .p5 .sw-bar .s-p{ font-size:16px; }
  .p5 .sw-bar .s-meta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
  .p5 .sw-bar .s-meta > *{ display:inline; }
  .p5 .sw-bar .s-chg{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--pk); }
  .p5 .sw-bar .s-chg .k-tri{ width:10px; height:7px; fill:var(--pk); transition:transform .25s ease; }
  .p5 .sw-bar.is-open .s-chg .k-tri{ transform:rotate(180deg); }
  .p5 .sw-bar .s-list{ display:none; gap:4px; margin-top:6px; }
  .p5 .sw-bar.is-open .s-list{ display:grid; }
  .p5 .sw-bar .s-k{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:10px; row-gap:3px; padding:10px 12px;
    background:#fff; box-shadow:inset 0 0 0 1px #D6DEE9; text-align:left; }
  .p5 .sw-bar .s-k:hover{ background:var(--ph); }
  .p5 .sw-bar .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 0 0 0 1.5px var(--te); }
  .p5 .sw-bar .s-k .s-n{ font-size:14px; }

  /* slider (refined 1–5, 10): the chosen card wears its package colour, the rest stay quiet */
  .p5 .sw-slider .s-k{ flex-basis:146px; padding:10px 12px 11px; }
  .p5 :is(.sw-slider, .sw-ledger) .s-k:not([aria-selected="true"]) .s-off{ color:var(--pk2); }
  .p5 .sw-slider .s-k:focus-visible, .p5 .sw-tabs .s-k:focus-visible, .p5 .sw-ledger .s-k:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; }
}
/* ======================================================================
   gads-pkg-wx10-h5n · wx — the UI of /doctor/gads-pkg-funnel-w4x/
   applied to the settled package content and structure.
     floor #F0F4FA · card white, 1px #CCD9EA, square · land zone #EAF1FA
     shared zone #F4F6F9 · divider #E8EEF6 · ink #0E1E35 / #39414E /
     #6B7484 / #9AA3B0 · one blue, the button #0760C6
     kicker 10.5 / 800 / .13em caps · name 24 / 800 · price 32 / 800
   ====================================================================== */
.kx.wx{ --w-floor:#F0F4FA; --w-tint:#EAF1FA; --w-tint-e:#D3E0EF; --w-neu:#F4F6F9; --w-line:#CCD9EA; --w-div:#E8EEF6;
  --w-ink:#0E1E35; --w-ink2:#39414E; --w-ink3:#6B7484; --w-ink4:#9AA3B0; --w-act:#0760C6; --w-act-h:#054E9F; --w-kick:#2B598F;
  background:#fff; color:var(--w-ink); }
.kx.wx.is-floor{ background:var(--w-floor); }
.kx.wx [data-h]{ --t:var(--w-tint); --tw:var(--w-neu); --tr:var(--w-div); --tl:var(--w-line); --te:var(--w-line); --ti:var(--w-ink2); --lv:#0760C6; }

/* ------------------------------------------------ section head ------ */
.kx.wx .kx-hd{ text-align:left; margin-bottom:22px; }
.kx.wx .kx-t{ font-size:clamp(26px, 2.3vw, 34px); font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--w-ink); }
.kx.wx .kx-t::after{ content:none; }
.kx.wx .kx-s{ max-width:none; margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--w-ink3); text-wrap:pretty; }

/* ------------------------------------------------ the card ---------- */
.kx.wx .kx-row{ column-gap:16px; }
.kx.wx :is(.k-crown, .k-pts, .k-acts, .k-more){ border-color:var(--w-line); background:#fff; }
.kx.wx .k-crown{ background:#fff; }

/* identity */
.kx.wx .k-id{ padding-top:20px; gap:12px; }
.kx.wx .k-badge{ width:34px; height:34px; background:#fff; box-shadow:inset 0 0 0 1px var(--w-div); }
.kx.wx .k-gl{ width:20px; height:26px; }
.kx.wx .k-ixn{ display:none; }
.kx.wx .k-name > span{ font-size:11.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--w-ink3); }
.kx.wx .k-name > b{ margin-top:1px; font-size:24px; font-weight:800; letter-spacing:-.034em; line-height:1.06; color:var(--w-ink); }
.kx.wx .k-qual{ padding-top:9px; font-size:14.5px; font-weight:650; line-height:1.4; color:var(--w-ink2); }
.kx.wx .k-qual .k-lead{ display:none; }

/* price */
.kx.wx .k-from{ margin-top:16px; padding-top:14px; font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--w-ink3); }
.kx.wx .k-from::before{ content:""; position:absolute; left:var(--A); right:var(--A); top:0; height:1px; background:var(--w-div); }
.kx.wx .k-was{ padding-top:4px; font-size:12.5px; color:var(--w-ink3); }
.kx.wx .k-off{ padding:2px 8px; border:1px solid var(--w-line); border-radius:0; background:#fff; font-size:11.5px; font-weight:700; color:var(--w-ink2); }
.kx.wx .k-now{ padding-top:3px; gap:0 8px; }
.kx.wx .k-now b{ font-size:32px; font-weight:800; letter-spacing:-.042em; line-height:1.05; color:var(--w-ink); }
.kx.wx .k-now b i{ font-size:.66em; font-weight:700; }
.kx.wx .k-now span{ font-size:13px; font-weight:500; color:var(--w-ink3); }
.kx.wx .k-now.is-c b{ font-size:26px; }
.kx.wx .k-bill{ padding-top:13px; }
.kx.wx .k-bill b{ font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--w-ink4); }
.kx.wx .k-bill .k-bv{ margin-top:4px; font-size:13px; font-weight:600; color:var(--w-ink2); }

/* the four figures */
.kx.wx .k-tray{ margin:16px var(--A) 18px; padding:0; background:none; box-shadow:none; border-radius:0; border-top:1px solid var(--w-div); }
.kx.wx .k-tray--r .k-tile{ padding:10px 0; grid-template-columns:24px minmax(0,1fr); }
.kx.wx .k-tray--r .k-tile + .k-tile{ border-top:1px solid var(--w-div); }
.kx.wx .k-tray--r .k-lead{ width:24px; flex-basis:24px; }
.kx.wx .k-tray--r .k-ic{ width:16px; height:16px; padding:0; background:none; stroke:var(--w-ink4); }
.kx.wx .k-tile dt{ font-size:11.5px; font-weight:600; color:var(--w-ink3); }
.kx.wx .k-tile dd{ margin-top:2px; }
.kx.wx .k-fn{ font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--w-ink); }
.kx.wx .k-fu{ font-size:13px; font-weight:700; color:var(--w-ink); }
.kx.wx .k-ft{ font-size:13.5px; font-weight:700; line-height:1.4; color:var(--w-ink); }
.kx.wx .k-run{ display:none; }

/* the nine points: the reference's quiet list */
.kx.wx .k-pts{ padding:12px 0 10px; box-shadow:inset 0 1px 0 var(--w-div); }
.kx.wx .k-pts::before{ content:none; }
.kx.wx .k-ptb{ grid-template-columns:24px minmax(0,1fr); min-height:0; padding-top:6px; padding-bottom:6px; }
.kx.wx .k-pt + .k-pt .k-ptb{ box-shadow:none; }
.kx.wx .k-ptb .k-lead{ width:24px; flex-basis:24px; }
.kx.wx .k-ptb .k-ic{ width:16px; height:16px; stroke:var(--w-ink4); }
.kx.wx .k-pl{ font-size:13.5px; font-weight:500; line-height:1.4; color:var(--w-ink2);
  text-decoration:underline dotted var(--w-line); text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-skip-ink:none; }
.kx.wx .k-ptb:hover, .kx.wx .k-pt.is-tip .k-ptb{ background:var(--w-neu); }
.kx.wx .k-ptb:hover .k-pl, .kx.wx .k-pt.is-tip .k-pl{ color:var(--w-ink); text-decoration-color:var(--w-ink3); }
.kx.wx .k-ptb:focus-visible{ outline:2px solid var(--w-act); outline-offset:-2px; }
.kx.wx.pt-plain .k-ptb{ grid-template-columns:minmax(0,1fr); }
.kx.wx .k-num{ box-shadow:none !important; width:auto; height:auto; border-radius:0; background:none; font-family:var(--mono); font-size:11px;
  font-weight:600; color:var(--w-ink4); }
.kx.wx .k-tip{ border:1px solid var(--w-line); border-radius:0; box-shadow:0 10px 22px -14px rgba(14,30,53,.3); }
.kx.wx .k-tip::before{ border-left-color:var(--w-line); border-top-color:var(--w-line); }
.kx.wx .k-tipt{ font-size:12.5px; font-weight:800; color:var(--w-ink); }
.kx.wx .k-tipv{ font-size:13px; line-height:1.5; color:var(--w-ink2); }

/* the ask: one blue button, one text link */
.kx.wx .k-acts{ gap:10px; justify-items:start; padding-top:16px; padding-bottom:18px; box-shadow:inset 0 1px 0 var(--w-div); }
.kx.wx .k-b1{ justify-self:stretch; display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; background:var(--w-act); color:#fff;
  font-size:15px; font-weight:750; letter-spacing:-.005em; }
.kx.wx .k-b1::after{ content:""; width:14px; height:14px; background:currentColor; flex:0 0 auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.8 4.2 12.6 8l-3.8 3.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.8 4.2 12.6 8l-3.8 3.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.kx.wx .k-b1:hover{ background:var(--w-act-h); }
.kx.wx .k-b2{ min-height:0; padding:2px 0; background:none; box-shadow:none; color:var(--w-ink2); font-size:13px; font-weight:700;
  text-decoration:underline; text-decoration-color:var(--w-line); text-decoration-thickness:1.5px; text-underline-offset:4px; }
.kx.wx .k-b2:hover{ background:none; box-shadow:none; color:var(--w-ink); text-decoration-color:var(--w-ink2); }

/* More details: the reference's disclosure rows */
.kx.wx .k-mbar{ min-height:52px; background:#fff; box-shadow:inset 0 1px 0 var(--w-div); }
.kx.wx .k-mbar:hover{ background:var(--w-neu); }
.kx.wx .k-mbar b{ font-size:13.5px; font-weight:800; color:var(--w-ink); }
.kx.wx .k-mbar .k-tri{ margin-left:auto; width:11px; height:7px; fill:var(--w-ink4); }
.kx.wx .k-r--ch > .k-rc{ box-shadow:inset 0 1px 0 var(--w-div); }
.kx.wx .k-ch{ min-height:52px; }
.kx.wx .k-cn{ width:auto; height:auto; place-items:start; border-radius:0; background:none !important; box-shadow:none !important;
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--w-ink4) !important; }
.kx.wx .k-ct{ font-size:13.5px; font-weight:800; letter-spacing:-.005em; color:var(--w-ink); }
.kx.wx .k-cc{ font-size:12px; font-weight:500; color:var(--w-ink3); }
.kx.wx .k-key, .kx.wx .k-key--s{ width:12px; height:8px; background:none !important; box-shadow:none !important; transition:transform .25s ease; }
.kx.wx .k-key::before{ left:0; top:0; width:12px; height:8px; margin:0; background:var(--w-ink4);
  clip-path:polygon(0 0, 100% 0, 50% 100%); transform:none; }
.kx.wx .k-key::after{ content:none; }
.kx.wx [aria-expanded="true"] > .k-key{ transform:rotate(180deg); }
.kx.wx .k-ch:hover .k-key::before, .kx.wx .k-tb:hover .k-key::before{ background:var(--w-ink2); }
.kx.wx .k-r--ch:has([aria-expanded="true"]) > .k-rc{ background:#fff; }
.kx.wx .k-tb, .kx.wx .k-fh{ padding:10px 0; }
.kx.wx .k-tx{ font-family:var(--mono); font-size:10.5px; color:var(--w-ink4); }
.kx.wx .k-tt{ font-size:13.5px; font-weight:750; color:var(--w-ink); }
.kx.wx .k-tb:hover .k-tt, .kx.wx .k-tb[aria-expanded="true"] .k-tt{ color:var(--w-ink); }
.kx.wx .k-every{ font-size:10px; font-weight:800; letter-spacing:.13em; color:var(--w-ink4); }
.kx.wx .k-r--th:not(.is-first) > .k-rc .k-tb, .kx.wx .k-r--fh:not(.is-first) > .k-rc .k-fh{ box-shadow:inset 0 1px 0 var(--w-div); }
.kx.wx .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--fh) > .k-rc{ background:#fff; }
.kx.wx .k-a, .kx.wx .k-ticks li{ font-size:13.5px; line-height:1.6; color:var(--w-ink2); }
.kx.wx .k-em{ color:var(--w-ink); }
.kx.wx .k-sl{ font-size:11.5px; font-weight:700; color:var(--w-ink3); }
.kx.wx .k-tk{ background:var(--w-neu); stroke:var(--w-ink2); }
.kx.wx .k-t4 dt{ font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--w-ink4); }
.kx.wx .k-t4 dd{ font-size:13.5px; font-weight:700; color:var(--w-ink); }
.kx.wx .k-entn b{ color:var(--w-ink); }
.kx.wx .k-entn b::before{ background:var(--w-ink3); }
.kx.wx :is(.k-mbar, .k-ch, .k-tb, .k-b1, .k-b2):focus-visible{ outline:2px solid var(--w-act); outline-offset:-2px; }

/* ======================================================================
   THE TEN PLANS
   ====================================================================== */
/* 01 · Band Card — full-width light bands, one after another */
.kx.wx.pl-band :is(.k-id, .k-qual){ background:var(--w-tint); }
.kx.wx.pl-band .k-qual{ padding-bottom:16px; box-shadow:inset 0 -1px 0 var(--w-tint-e); }
.kx.wx.pl-band .k-from{ margin-top:0; padding-top:16px; }
.kx.wx.pl-band .k-from::before{ content:none; }
.kx.wx.pl-band .k-tray{ margin:16px 0 0; padding:4px var(--A) 12px; background:var(--w-neu); border-top:1px solid var(--w-div); border-bottom:1px solid var(--w-div); }
.kx.wx.pl-band .k-tray--r .k-tile + .k-tile{ border-top-color:#fff; }
.kx.wx.pl-band .k-pts{ box-shadow:none; }

/* 02 · Delta Card — a blue rule, an index number, one pale strip */
.kx.wx.pl-delta .k-crown{ border-top:3px solid var(--w-act); }
.kx.wx.pl-delta .k-ixn{ display:block; position:absolute; top:12px; left:var(--A); font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:var(--w-ink4); }
.kx.wx.pl-delta .k-id{ position:relative; padding-top:32px; }
.kx.wx.pl-delta .k-badge{ display:none; }
.kx.wx.pl-delta .k-tray{ margin:16px 0 0; padding:2px var(--A) 10px; background:var(--w-neu); border-top:1px solid var(--w-div); border-bottom:1px solid var(--w-div); }
.kx.wx.pl-delta .k-tray--r .k-tile + .k-tile{ border-top-color:#fff; }
.kx.wx.pl-delta .k-pts{ box-shadow:none; }

/* 03 · Window Card — the nine points in a pale window with its own edge */
.kx.wx.pl-window .k-pts{ position:relative; isolation:isolate; padding:18px 0 16px; box-shadow:none; }
.kx.wx.pl-window .k-pts::before{ content:""; position:absolute; z-index:-1; inset:6px calc(var(--A) - 10px) 4px; background:var(--w-tint);
  box-shadow:inset 0 0 0 1px var(--w-tint-e); }
.kx.wx.pl-window .k-ptb:hover, .kx.wx.pl-window .k-pt.is-tip .k-ptb{ background:#fff; }
.kx.wx.pl-window .k-acts{ box-shadow:none; padding-top:18px; }

/* 04 · Price Head Card — the price block is the pale blue head */
.kx.wx.pl-pricehead :is(.k-from, .k-was, .k-now, .k-bill){ background:var(--w-tint); }
.kx.wx.pl-pricehead .k-from{ margin-top:16px; padding-top:14px; font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--w-kick);
  box-shadow:inset 0 1px 0 var(--w-tint-e); }
.kx.wx.pl-pricehead .k-from::before{ content:none; }
.kx.wx.pl-pricehead .k-bill{ padding-bottom:14px; box-shadow:inset 0 -1px 0 var(--w-tint-e); }
.kx.wx.pl-pricehead .k-bill b{ color:var(--w-kick); }
.kx.wx.pl-pricehead .k-tray{ border-top:0; }

/* 05 · Spec Card — every fact on its own ruled row; the first figure tinted */
.kx.wx.pl-spec .k-tile dt{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--w-ink4); }
.kx.wx.pl-spec .k-tray{ margin:16px 0 0; padding:0 var(--A); border-top:1px solid var(--w-div); border-bottom:1px solid var(--w-div); }
.kx.wx.pl-spec .k-tray--r .k-tile:first-child{ margin:0 calc(0px - var(--A)); padding-left:var(--A); padding-right:var(--A); background:var(--w-tint); }
.kx.wx.pl-spec .k-tray--r .k-tile:first-child dt{ color:var(--w-kick); }
.kx.wx.pl-spec .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--w-div); }
.kx.wx.pl-spec .k-ptb{ padding-top:9px; padding-bottom:9px; }
.kx.wx.pl-spec .k-pts{ box-shadow:none; }

/* 06 · Cap Card — name and qualifier on one pale cap; the caps read across as a bar */
.kx.wx.pl-cap :is(.k-id, .k-qual){ background:var(--w-tint); }
.kx.wx.pl-cap .k-id{ padding-top:16px; }
.kx.wx.pl-cap .k-qual{ padding-bottom:14px; box-shadow:inset 0 -1px 0 var(--w-tint-e); }
.kx.wx.pl-cap .k-name > b{ font-size:21px; }
.kx.wx.pl-cap .k-from{ margin-top:0; padding-top:16px; }
.kx.wx.pl-cap .k-from::before{ content:none; }

/* 07 · Brief + Cards — a pale brief opens the row */
@media (min-width:1300px){
  .kx.wx.pl-brief .kx-in{ display:grid; grid-template-columns:232px minmax(0,1fr); column-gap:16px; align-items:start; }
  .kx.wx.pl-brief .kx-hd{ position:sticky; top:calc(var(--kx-top, 108px) + 16px); margin:0; padding:20px 20px 22px; background:var(--w-tint);
    border:1px solid var(--w-tint-e); }
  .kx.wx.pl-brief .kx-t{ font-size:22px; letter-spacing:-.03em; }
  .kx.wx.pl-brief .kx-t::before{ content:""; display:block; width:28px; height:3px; margin-bottom:14px; background:var(--w-act); }
  .kx.wx.pl-brief .kx-s{ margin-top:10px; font-size:14px; line-height:1.55; color:var(--w-ink2); }
  .kx.wx.pl-brief .k-sw{ grid-column:2; }
  .kx.wx.pl-brief .kx-row{ grid-column:2; column-gap:14px; }
  .kx.wx.pl-brief .kx-row{ --A:18px; }
  .kx.wx.pl-brief .k-b1{ gap:7px; padding:0 8px; font-size:13px; white-space:nowrap; }
  .kx.wx.pl-brief .k-b1::after{ width:12px; height:12px; }
}
@media (max-width:1299.98px){
  .kx.wx.pl-brief .kx-hd{ padding:18px 20px 20px; background:var(--w-tint); border:1px solid var(--w-tint-e); }
}

/* 08 · Card + Open Ledger — every chapter open; chapter headings as bands read across */
.kx.wx.pl-ledger .k-r--ch > .k-rc{ background:var(--w-neu) !important; box-shadow:inset 0 1px 0 var(--w-div), inset 0 -1px 0 var(--w-div); }
.kx.wx.pl-ledger .k-ch{ cursor:default; min-height:46px; }
.kx.wx.pl-ledger .k-ch .k-key{ display:none; }
.kx.wx.pl-ledger .k-cc{ display:none; }
.kx.wx.pl-ledger .k-ct{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--w-ink2); }

/* 09 · Runway Card — the figures on the pale blue zone; preparation drawn to scale */
.kx.wx.pl-runway .k-tray{ margin:16px 0 0; padding:4px var(--A) 12px; background:var(--w-tint); border-top:1px solid var(--w-tint-e); border-bottom:1px solid var(--w-tint-e); }
.kx.wx.pl-runway .k-tray--r .k-tile + .k-tile{ border-top-color:var(--w-tint-e); }
.kx.wx.pl-runway .k-tray--r .k-tile:first-child dt{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--w-kick); }
.kx.wx.pl-runway .k-tray--r .k-tile:first-child .k-fn{ font-size:24px; letter-spacing:-.04em; }
.kx.wx.pl-runway .k-run{ display:block; height:6px; margin:8px 0 2px; background:#D7E3F1; }
.kx.wx.pl-runway .k-run i{ display:block; height:6px; background:var(--w-act); }
.kx.wx.pl-runway .k-pts{ box-shadow:none; }

/* 10 · Sheet Card — the quietest: a faint index number, numbered points, one pale foot */
.kx.wx.pl-sheet .k-id{ position:relative; padding-top:22px; }
.kx.wx.pl-sheet .k-ixn{ display:block; position:absolute; top:10px; right:var(--A); font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1;
  color:#E3EAF3; font-variant-numeric:tabular-nums; }
.kx.wx.pl-sheet .k-badge{ display:none; }
.kx.wx.pl-sheet .k-name > b{ font-size:26px; }
.kx.wx.pl-sheet .k-ptb{ grid-template-columns:26px minmax(0,1fr); }
.kx.wx.pl-sheet :is(.k-acts, .k-more){ background:var(--w-neu); }
.kx.wx.pl-sheet .k-mbar{ background:transparent; }
.kx.wx.pl-sheet .k-mbar:hover{ background:#fff; }
.kx.wx.pl-sheet .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--fh) > .k-rc{ background:transparent; }
.kx.wx.pl-sheet .k-r--ch:has([aria-expanded="true"]) > .k-rc{ background:transparent; }

/* ======================================================================
   PHONE — the pinned package switch in the reference's language
   ====================================================================== */
@container kx (max-width:740px){
  .kx.wx .k-sw{ background:#fff; }
  .kx.wx.is-floor .k-sw{ background:var(--w-floor); box-shadow:-18px 0 0 var(--w-floor), 18px 0 0 var(--w-floor); }
  .kx.wx .k-sw::after{ background:var(--w-line); }
  .kx.wx .s-k{ background:#fff; }
  .kx.wx .s-n{ font-size:11.5px; font-weight:700; color:var(--w-ink3); }
  .kx.wx .s-p{ color:var(--w-ink); }
  .kx.wx .s-off{ color:var(--w-ink2) !important; }
  .kx.wx .s-min{ color:var(--w-ink3); }
  .kx.wx .s-min b{ color:var(--w-ink); }
  .kx.wx .sw-ledger .s-keys{ box-shadow:inset 0 0 0 1px var(--w-line); }
  .kx.wx :is(.sw-ledger, .sw-slider, .sw-tabs) .s-k[aria-selected="true"]{ background:var(--w-tint); box-shadow:inset 0 0 0 1px var(--w-tint-e), inset 0 3px 0 var(--w-act); }
  .kx.wx .s-k[aria-selected="true"] .s-n{ color:var(--w-ink); }
  .kx.wx .sw-slider .s-k{ box-shadow:inset 0 0 0 1px var(--w-line); }
  .kx.wx .sw-tabs .s-keys{ background:var(--w-neu); }
  .kx.wx .sw-bar .s-bar{ background:#fff; box-shadow:inset 0 0 0 1px var(--w-line), inset 3px 0 0 var(--w-act); }
  .kx.wx .sw-bar .s-k{ box-shadow:inset 0 0 0 1px var(--w-line); }
  .kx.wx .sw-bar .s-k[aria-selected="true"]{ background:var(--w-tint); box-shadow:inset 0 0 0 1px var(--w-tint-e), inset 3px 0 0 var(--w-act); }
  /* 06 · the chosen tab joins its pale cap */
  .kx.wx .sw-joined .s-k{ background:var(--w-neu); box-shadow:inset 0 -1px 0 var(--w-line), inset -1px 0 0 #fff; }
  .kx.wx .sw-joined .s-k[aria-selected="true"]{ background:var(--w-tint); box-shadow:inset 1px 0 0 var(--w-line), inset -1px 0 0 var(--w-line), inset 0 3px 0 var(--w-act); }
  .kx.wx .sw-joined .s-lines{ background:var(--w-tint); box-shadow:inset 1px 0 0 var(--w-line), inset -1px 0 0 var(--w-line); }
  .kx.wx.pl-cap .kx-row > .k .k-crown{ border-top:0; }
  .kx.wx .kx-hd{ margin-bottom:16px; }
}
/* ======================================================================
   gads-pkg-wh10-c3v · wh — the shortlisted header colours in the w4x UI
   Each card's header (name → Planning documentation) wears its package
   colour, exactly the shortlisted set; the figures sit on white inside it.
   Below the header: white and soft grey only. The card edge is the
   package's edge colour, top to bottom.
   ====================================================================== */
/*                               header     wash       rule       line       edge       deep       */
.kx.wx.wh [data-h="std"]{ --t:#F5E1C8; --tw:#FBF3EA; --tr:#EBDDC9; --tl:#D6BA95; --te:#BE9E72; --ti:#765311; }   /* sand  */
.kx.wx.wh [data-h="adv"]{ --t:#CAECDA; --tw:#EBF7F1; --tr:#C9E6D8; --tl:#96C9B0; --te:#71B093; --ti:#006843; }   /* green */
.kx.wx.wh [data-h="pro"]{ --t:#D0E6FF; --tw:#EDF5FE; --tr:#CDE0F5; --tl:#9EC2E8; --te:#79A7D4; --ti:#00609D; }   /* blue  */
.kx.wx.wh [data-h="ent"]{ --t:#D9E5F0; --tw:#F0F5F9; --tr:#D5E0EA; --tl:#AEC1D0; --te:#8FA6B8; --ti:#385E76; }   /* slate */

/* ------------------------------------------------ the header -------- */
.kx.wx.wh .k-crown{ background:var(--t); border-color:var(--te); }
.kx.wx.wh :is(.k-pts, .k-acts, .k-more){ border-color:var(--te); }
.kx.wx.wh .k-badge{ width:36px; height:36px; background:#fff; box-shadow:none; }
.kx.wx.wh .k-gl{ width:21px; height:27px; }
.kx.wx.wh .k-name > span{ color:var(--ti); }
.kx.wx.wh .k-qual{ font-weight:700; color:var(--ti); }
.kx.wx.wh .k-from{ color:var(--w-ink2); }
.kx.wx.wh .k-from::before{ background:var(--tl); }
.kx.wx.wh .k-was{ color:var(--w-ink3); }
.kx.wx.wh .k-off{ border-color:var(--te); background:#fff; color:var(--ti); font-weight:800; }
.kx.wx.wh .k-bill b{ color:var(--ti); }
.kx.wx.wh .k-bill .k-bv{ color:var(--w-ink); }
/* the four figures on a white panel inside the header */
.kx.wx.wh .k-tray{ margin:16px calc(var(--A) - 8px) var(--A); padding:2px 8px; background:#fff; border-top:0; box-shadow:none; }
.kx.wx.wh .k-tray--r .k-tile + .k-tile{ border-top:1px solid #EDF0F4; }
.kx.wx.wh .k-tray--r .k-ic{ stroke:var(--ti); }

/* ------------------------------------------ below the header: neutral */
.kx.wx.wh .k-pts{ box-shadow:none; }
.kx.wx.wh .k-ptb .k-ic{ stroke:var(--w-ink4); }
.kx.wx.wh .k-num{ color:var(--w-ink4); }

/* ======================================================================
   THE TEN PLANS, IN THE HEADER'S OWN TONES
   ====================================================================== */
/* 01 · Band — full-width bands inside the header, each closed by a line of the package colour */
.kx.wx.wh.pl-band :is(.k-id, .k-qual){ background:transparent; }
.kx.wx.wh.pl-band .k-qual{ box-shadow:inset 0 -1px 0 var(--tl); }
.kx.wx.wh.pl-band .k-bill{ padding-bottom:16px; box-shadow:inset 0 -1px 0 var(--tl); }
.kx.wx.wh.pl-band .k-tray{ margin:0; padding:4px var(--A) 10px; background:#fff; border:0; }
.kx.wx.wh.pl-band .k-tray--r .k-tile + .k-tile{ border-top-color:#EDF0F4; }

/* 02 · Delta — a deep package rule and an index number open the card */
.kx.wx.wh.pl-delta .k-crown{ border-top:3px solid var(--ti); }
.kx.wx.wh.pl-delta .k-ixn{ color:var(--ti); }
.kx.wx.wh.pl-delta .k-tray{ margin:16px calc(var(--A) - 8px) var(--A); padding:2px 8px; background:#fff; border:0; }

/* 03 · Window — the nine points in a quiet grey window */
.kx.wx.wh.pl-window .k-pts::before{ background:var(--w-neu); box-shadow:inset 0 0 0 1px #E3E8EF; }
.kx.wx.wh.pl-window .k-ptb:hover, .kx.wx.wh.pl-window .k-pt.is-tip .k-ptb{ background:#fff; }

/* 04 · Price Head — the price block as a white plate inside the header */
.kx.wx.wh.pl-pricehead :is(.k-from, .k-was, .k-now, .k-bill){ background:#fff; }
.kx.wx.wh.pl-pricehead .k-from{ color:var(--ti); box-shadow:inset 0 1px 0 var(--tl); }
.kx.wx.wh.pl-pricehead .k-bill{ box-shadow:inset 0 -1px 0 var(--tl); }
.kx.wx.wh.pl-pricehead .k-tray{ margin-top:var(--A); }

/* 05 · Spec — deep-shade small caps, ruled rows, the first figure row tinted */
.kx.wx.wh.pl-spec .k-tile dt{ color:var(--ti); }
.kx.wx.wh.pl-spec .k-tray{ margin:16px 0 0; padding:0 var(--A); background:#fff; border-top:1px solid var(--tl); border-bottom:0; }
.kx.wx.wh.pl-spec .k-tray--r .k-tile:first-child{ background:var(--tw); }
.kx.wx.wh.pl-spec .k-tray--r .k-tile:first-child dt{ color:var(--ti); }

/* 06 · Cap — the name on the package colour; price and figures on its lightest tone */
.kx.wx.wh.pl-cap :is(.k-id, .k-qual){ background:var(--t); }
.kx.wx.wh.pl-cap .k-crown{ background:var(--tw); }
.kx.wx.wh.pl-cap .k-qual{ box-shadow:inset 0 -1px 0 var(--te); }
.kx.wx.wh.pl-cap .k-tray{ box-shadow:inset 0 0 0 1px var(--tr); }

/* 07 · Brief — a quiet grey brief */
@media (min-width:1300px){
  .kx.wx.wh.pl-brief .kx-hd{ background:var(--w-neu); border-color:#E3E8EF; }
  .kx.wx.wh.pl-brief .kx-t::before{ background:var(--w-ink); }
}
@media (max-width:1299.98px){ .kx.wx.wh.pl-brief .kx-hd{ background:var(--w-neu); border-color:#E3E8EF; } }

/* 09 · Runway — preparation drawn to scale in the package's deep shade */
.kx.wx.wh.pl-runway .k-tray{ margin:16px calc(var(--A) - 8px) var(--A); padding:2px 8px 6px; background:#fff; border:0; }
.kx.wx.wh.pl-runway .k-tray--r .k-tile + .k-tile{ border-top-color:#EDF0F4; }
.kx.wx.wh.pl-runway .k-tray--r .k-tile:first-child dt{ color:var(--ti); }
.kx.wx.wh.pl-runway .k-run{ background:var(--tr); }
.kx.wx.wh.pl-runway .k-run i{ background:var(--ti); }

/* 10 · Sheet — the index number in the package's line colour */
.kx.wx.wh.pl-sheet .k-ixn{ color:var(--tl); }

/* ---------------------------------------------- phone switch ------- */
@container kx (max-width:740px){
  .kx.wx.wh :is(.sw-ledger, .sw-slider, .sw-tabs) .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 0 0 0 1.5px var(--te); }
  .kx.wx.wh .s-k[aria-selected="true"] .s-n{ color:var(--ti); }
  .kx.wx.wh .sw-bar .s-bar{ background:var(--t); box-shadow:inset 0 0 0 1px var(--te); }
  .kx.wx.wh .sw-bar .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 0 0 0 1.5px var(--te); }
  .kx.wx.wh .sw-joined .s-k[aria-selected="true"]{ background:var(--t); box-shadow:inset 1px 0 0 var(--te), inset -1px 0 0 var(--te), inset 0 1px 0 var(--te); }
  .kx.wx.wh .sw-joined .s-lines{ background:var(--t); box-shadow:inset 1px 0 0 var(--te), inset -1px 0 0 var(--te); }
}
/* ======================================================================
   gads-pkg-sc10-f8d · st — the starting card as every card's header
   Logo → Planning documentation exactly as the shortlisted starting card
   (/doctor/gads-pkg-msw-k4d/): centred, package colour, white icon-plate
   tray. Below it the reference UI (/doctor/gads-pkg-funnel-w4x/) on its
   light floor, white and its greys only; ten plans (lp-*).
   ====================================================================== */
.kx.wx.wh.st{ --s-ink:#0D1A2E; --s-mute:#8B94A1; --s-sub:#5E6672; --s-unit:#333A45; --s-rule:#E4E8EE; }

/* --------------------------------------------- the starting card --- */
.kx.wx.wh.st .k-crown{ --A:16px; background:var(--t); border-color:var(--te); box-shadow:inset 0 -1px 0 var(--te); text-align:center; }
.kx.wx.wh.st .k-id{ flex-direction:column; justify-content:flex-start; gap:9px; padding-top:16px; padding-bottom:6px; text-align:center; }
.kx.wx.wh.st .k-ixn{ display:none !important; }
.kx.wx.wh.st .k-badge{ display:block !important; width:40px; height:50px; border-radius:0; background:none; box-shadow:none; }
.kx.wx.wh.st .k-gl{ display:block; width:40px; height:50px; }
.kx.wx.wh.st .k-name > span{ margin:0 0 3px; font-size:10.35px; font-weight:750; letter-spacing:.01em; text-transform:none; line-height:1.04; color:var(--ti); }
.kx.wx.wh.st .k-name > b{ margin:0; font-size:23px; font-weight:800; letter-spacing:-.04em; line-height:1.04; color:var(--s-ink); }

.kx.wx.wh.st .k-qual{ justify-content:center; gap:6px; padding-top:0; padding-bottom:12px; font-size:12.5px; font-weight:750; letter-spacing:-.01em; line-height:1.3; color:var(--ti); }
.kx.wx.wh.st .k-qual .k-lead{ display:block !important; width:auto; flex:0 0 auto; margin:0; padding:0; }
.kx.wx.wh.st .k-qi{ display:block; width:15px; height:15px; stroke:var(--ti); }

.kx.wx.wh.st .k-from{ position:relative; margin-top:0; padding-top:11px; padding-bottom:3px; font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.3; color:var(--s-mute); text-align:center; background:none; box-shadow:none; }
.kx.wx.wh.st .k-from::before{ content:""; position:absolute; left:var(--A); right:var(--A); top:0; height:1px; background:var(--tl); }
.kx.wx.wh.st .k-was{ justify-content:center; gap:4px 9px; padding-top:0; font-size:13.5px; font-weight:600; line-height:1.2; color:var(--s-mute); background:none; }
.kx.wx.wh.st .k-off{ padding:4px 10px; border:1px solid var(--te); border-radius:0; background:#fff; font-size:12.5px; font-weight:800; letter-spacing:-.008em;
  line-height:15px; color:var(--ti); }
.kx.wx.wh.st .k-now{ justify-content:center; align-items:baseline; gap:0 4px; padding-top:7px; background:none; }
.kx.wx.wh.st .k-now b{ font-size:28px; font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--s-ink); }
.kx.wx.wh.st .k-now b i{ font-size:.75em; font-weight:750; }
.kx.wx.wh.st .k-now span{ font-size:13.5px; font-weight:650; color:var(--s-sub); }
.kx.wx.wh.st .k-now.is-c b{ font-size:24px; letter-spacing:-.03em; }
.kx.wx.wh.st .k-bill{ padding-top:9px; padding-bottom:0; text-align:center; background:none; box-shadow:none; }
.kx.wx.wh.st .k-bill b{ font-size:11.5px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.4; color:var(--ti); }
.kx.wx.wh.st .k-bill .k-bv{ margin-top:0; font-size:11.5px; font-weight:650; line-height:1.4; color:var(--s-sub); }

/* the white tray: four rows, square icon plates */
.kx.wx.wh.st .k-tray{ margin:23px var(--A) 17px; padding:0; background:#fff; border:0; border-radius:0; box-shadow:none; text-align:left; }
.kx.wx.wh.st .k-tray--r .k-tile{ grid-template-columns:26px minmax(0,1fr); column-gap:11px; row-gap:1px; align-items:start; align-content:start; margin:0; padding:11px 13px; background:none; }
.kx.wx.wh.st .k-tray--r .k-tile + .k-tile{ border-top:1px solid var(--s-rule); }
.kx.wx.wh.st .k-tray--r .k-tile .k-lead{ grid-row:1 / 3; align-self:start; width:26px; flex-basis:26px; padding:0; }
.kx.wx.wh.st .k-tray--r .k-ic{ display:block; width:26px; height:26px; margin-top:2px; padding:5px; background:var(--tw); stroke:var(--ti); }
.kx.wx.wh.st .k-tile dt{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; color:var(--s-mute); }
.kx.wx.wh.st .k-tile dd{ margin-top:0; font-size:13px; font-weight:750; line-height:1.2; color:var(--s-ink); }
.kx.wx.wh.st .k-fn{ font-size:18px; font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--s-ink); }
.kx.wx.wh.st .k-fu{ margin-left:0; font-size:13px; font-weight:750; color:var(--s-unit); }
.kx.wx.wh.st .k-ft{ font-size:13px; font-weight:750; line-height:1.36; color:var(--s-ink); }
.kx.wx.wh.st .k-run{ display:none !important; }

/* the logo's flower in each package's own deep blue-green-sand-slate, as on the starting card */
.kx.wx.wh.st [data-h="std"]{ --lv:#6A4700; }
.kx.wx.wh.st [data-h="adv"]{ --lv:#005D36; }
.kx.wx.wh.st [data-h="pro"]{ --lv:#005596; }
.kx.wx.wh.st [data-h="ent"]{ --lv:#26526C; }

/* the card edge: the package edge colour, top to bottom, square */
.kx.wx.wh.st :is(.k-pts, .k-acts, .k-more){ border-color:var(--te); }

/* ---------------------------------- below the header: the reference -- */
.kx.wx.wh.st .k-pts{ box-shadow:none; }
.kx.wx.wh.st .k-ptb .k-ic{ stroke:var(--w-ink4); }

/* ======================================================================
   THE TEN PLANS — all below the header, white and the reference greys
   ====================================================================== */
/* 01 · Band — points on white, the ask on a grey band, More details on white */
.kx.wx.wh.st.lp-band .k-acts{ background:var(--w-neu); box-shadow:inset 0 1px 0 var(--w-div), inset 0 -1px 0 var(--w-div); padding-top:18px; padding-bottom:20px; }
.kx.wx.wh.st.lp-band .k-b2{ color:var(--w-ink); }
.kx.wx.wh.st.lp-band .k-mbar{ box-shadow:none; }

/* 02 · Delta — a deep package rule on the card's top edge; fine lines between points */
.kx.wx.wh.st.lp-delta .k-crown{ border-top:3px solid var(--ti); }
.kx.wx.wh.st.lp-delta .k-pts{ padding-top:8px; }
.kx.wx.wh.st.lp-delta .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--s-rule); }
.kx.wx.wh.st.lp-delta .k-pl{ text-decoration:none; }
.kx.wx.wh.st.lp-delta .k-ptb:hover .k-pl, .kx.wx.wh.st.lp-delta .k-pt.is-tip .k-pl{ text-decoration:underline dotted var(--w-ink3); text-underline-offset:4px; }
.kx.wx.wh.st.lp-delta .k-acts{ box-shadow:inset 0 1px 0 var(--s-rule); }
.kx.wx.wh.st.lp-delta .k-ptb{ padding-top:8px; padding-bottom:8px; }

/* 03 · Window — the nine points in a grey window with its own edge */
.kx.wx.wh.st.lp-window .k-pts{ position:relative; isolation:isolate; padding:18px 0 16px; box-shadow:none; }
.kx.wx.wh.st.lp-window .k-pts::before{ content:""; position:absolute; z-index:-1; inset:8px calc(var(--A) - 10px) 6px; background:var(--w-neu);
  box-shadow:inset 0 0 0 1px #E3E8EF; }
.kx.wx.wh.st.lp-window .k-ptb:hover, .kx.wx.wh.st.lp-window .k-pt.is-tip .k-ptb{ background:#fff; }
.kx.wx.wh.st.lp-window .k-acts{ box-shadow:none; padding-top:16px; }

/* 04 · Ask Plate — the button and Get Best Price on one grey plate */
.kx.wx.wh.st.lp-askplate .k-acts{ position:relative; isolation:isolate; justify-items:center; padding-top:22px; padding-bottom:24px; box-shadow:none; }
.kx.wx.wh.st.lp-askplate .k-acts::before{ content:""; position:absolute; z-index:-1; inset:8px calc(var(--A) - 10px) 10px; background:var(--w-neu);
  box-shadow:inset 0 0 0 1px #E3E8EF; }
.kx.wx.wh.st.lp-askplate .k-b2{ color:var(--w-ink); text-decoration-color:#AEB8C6; }
.kx.wx.wh.st.lp-askplate .k-pts{ box-shadow:none; padding-bottom:4px; }

/* 05 · Spec — numbered, ruled, one line each */
.kx.wx.wh.st.lp-spec .k-pts{ padding-top:6px; }
.kx.wx.wh.st.lp-spec .k-pt + .k-pt .k-ptb{ box-shadow:inset 0 1px 0 var(--w-div); }
.kx.wx.wh.st.lp-spec .k-ptb{ grid-template-columns:28px minmax(0,1fr); padding-top:9px; padding-bottom:9px; }
.kx.wx.wh.st.lp-spec .k-pl{ text-decoration:none; color:var(--w-ink); font-weight:600; }
.kx.wx.wh.st.lp-spec .k-ptb:hover .k-pl, .kx.wx.wh.st.lp-spec .k-pt.is-tip .k-pl{ text-decoration:underline dotted var(--w-ink3); text-underline-offset:4px; }
.kx.wx.wh.st.lp-spec .k-num{ color:var(--w-ink3); }

/* 06 · Details Cap — More details under a grey cap; each chapter heading on the same grey */
.kx.wx.wh.st.lp-detcap .k-mbar{ background:var(--w-neu); box-shadow:inset 0 1px 0 #E3E8EF, inset 0 -1px 0 #E3E8EF; }
.kx.wx.wh.st.lp-detcap .k-mbar:hover{ background:#EDF1F5; }
.kx.wx.wh.st.lp-detcap .k-mbar b{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.kx.wx.wh.st.lp-detcap .k-r--ch > .k-rc,
.kx.wx.wh.st.lp-detcap .k-r--ch:has([aria-expanded="true"]) > .k-rc{ background:var(--w-neu); box-shadow:inset 0 1px 0 #fff; }
.kx.wx.wh.st.lp-detcap .k-r--ch:first-of-type > .k-rc{ box-shadow:none; }
.kx.wx.wh.st.lp-detcap .k-ch:hover{ background:#EDF1F5; }

/* 07 · Brief + Cards — a grey brief opens the row */
@media (min-width:1300px){
  .kx.wx.wh.st.lp-brief .kx-in{ display:grid; grid-template-columns:232px minmax(0,1fr); column-gap:16px; align-items:start; }
  .kx.wx.wh.st.lp-brief .kx-hd{ position:sticky; top:calc(var(--kx-top, 108px) + 16px); margin:0; padding:20px 20px 22px; background:var(--w-neu);
    border:1px solid #DDE3EB; text-align:left; }
  .kx.wx.wh.st.lp-brief .kx-t{ font-size:22px; letter-spacing:-.03em; }
  .kx.wx.wh.st.lp-brief .kx-t::before{ content:""; display:block; width:28px; height:3px; margin-bottom:14px; background:var(--w-ink); }
  .kx.wx.wh.st.lp-brief .kx-s{ margin-top:10px; font-size:14px; line-height:1.55; color:var(--w-ink2); }
  .kx.wx.wh.st.lp-brief .k-sw{ grid-column:2; }
  .kx.wx.wh.st.lp-brief .kx-row{ grid-column:2; column-gap:14px; --A:18px; }
  .kx.wx.wh.st.lp-brief .k-b1{ gap:7px; padding:0 8px; font-size:13px; white-space:nowrap; }
  .kx.wx.wh.st.lp-brief .k-b1::after{ width:12px; height:12px; }
}
@media (max-width:1299.98px){
  .kx.wx.wh.st.lp-brief .kx-hd{ padding:18px 20px 20px; background:var(--w-neu); border:1px solid #DDE3EB; }
}

/* 08 · Card + Open Ledger — every chapter open; chapter headings as grey bands read across */
.kx.wx.wh.st.lp-ledger .k-r--ch > .k-rc{ background:var(--w-neu) !important; box-shadow:inset 0 1px 0 #E3E8EF, inset 0 -1px 0 #E3E8EF; }
.kx.wx.wh.st.lp-ledger .k-ch{ cursor:default; min-height:46px; }
.kx.wx.wh.st.lp-ledger .k-ch .k-key{ display:none; }
.kx.wx.wh.st.lp-ledger .k-cc{ display:none; }
.kx.wx.wh.st.lp-ledger .k-ct{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--w-ink2); }

/* 09 · Quiet Floor — white bodies held by space; the floor is the only grey */
.kx.wx.wh.st.lp-quiet .k-pts{ padding-top:16px; padding-bottom:14px; }
.kx.wx.wh.st.lp-quiet .k-ptb{ padding-top:8px; padding-bottom:8px; }
.kx.wx.wh.st.lp-quiet .k-pl{ font-size:14px; font-weight:600; color:var(--w-ink); }
.kx.wx.wh.st.lp-quiet .k-pl{ text-decoration:none; }
.kx.wx.wh.st.lp-quiet .k-ptb:hover .k-pl, .kx.wx.wh.st.lp-quiet .k-pt.is-tip .k-pl{ text-decoration:underline dotted var(--w-ink3); text-underline-offset:4px; }
.kx.wx.wh.st.lp-quiet .k-acts{ box-shadow:none; padding-top:12px; padding-bottom:22px; }
.kx.wx.wh.st.lp-quiet .k-mbar{ box-shadow:inset 0 1px 0 var(--w-div); }

/* 10 · Sheet — numbered points; one grey foot holds the ask and More details */
.kx.wx.wh.st.lp-sheet .k-ptb{ grid-template-columns:28px minmax(0,1fr); }
.kx.wx.wh.st.lp-sheet :is(.k-acts, .k-more){ background:var(--w-neu); }
.kx.wx.wh.st.lp-sheet .k-acts{ box-shadow:inset 0 1px 0 #E3E8EF; }
.kx.wx.wh.st.lp-sheet .k-mbar{ background:transparent; box-shadow:inset 0 1px 0 #E3E8EF; }
.kx.wx.wh.st.lp-sheet .k-mbar:hover{ background:#EDF1F5; }
.kx.wx.wh.st.lp-sheet .k-r--ch > .k-rc{ box-shadow:inset 0 1px 0 #E3E8EF; }
.kx.wx.wh.st.lp-sheet .k-fold.is-open:is(.k-r--th, .k-r--tb, .k-r--cb, .k-r--fh, .k-r--cnav) > .k-rc{ background:transparent; }
.kx.wx.wh.st.lp-sheet .k-r--ch:has([aria-expanded="true"]) > .k-rc{ background:transparent; }
.kx.wx.wh.st.lp-sheet .k-b2{ color:var(--w-ink); text-decoration-color:#AEB8C6; }

/* ---------------------------------------------- phone ---------------- */
@container kx (max-width:740px){
  .kx.wx.wh.st .k-crown{ --A:16px; }
  .kx.wx.wh.st.lp-delta .kx-row > .k .k-crown{ border-top:3px solid var(--ti); }
}
/* ======================================================================
   gads-pkg-rt10 · rt — the reference's colour theme and type, everywhere
   (/doctor/gads-pkg-funnel-w4x/, measured): floor #F0F4FA · header zone
   #EAF1FA, edge #CCD9EA, inner rule #D3E0EF · neutral zone #F4F6F9 ·
   divider #E8EEF6 · ink #0E1E35 / #39414E / #6B7484 · one blue #0760C6.
   The starting card's content (logo → Planning documentation) is kept;
   it now wears the reference's colours and type, the same on all four.
   ====================================================================== */
.kx.wx.wh.st.rt [data-h]{ --t:#EAF1FA; --tw:#F0F4FA; --tr:#E8EEF6; --tl:#D3E0EF; --te:#CCD9EA; --ti:#39414E; --lv:#0760C6; }

/* ------------------------------------------------ the header -------- */
.kx.wx.wh.st.rt .k-crown{ background:#EAF1FA; border-color:#CCD9EA; box-shadow:inset 0 -1px 0 #CCD9EA; }
.kx.wx.wh.st.rt .k-name > span{ margin-bottom:2px; font-size:11.5px; font-weight:700; letter-spacing:0; line-height:1.15; color:#6B7484; }
.kx.wx.wh.st.rt .k-name > b{ font-size:24px; font-weight:800; letter-spacing:-.034em; line-height:1.06; color:#0E1E35; }
.kx.wx.wh.st.rt .k-qual{ padding-top:2px; font-size:14px; font-weight:650; letter-spacing:0; line-height:1.4; color:#39414E; }
.kx.wx.wh.st.rt .k-qi{ stroke:#6B7484; }

.kx.wx.wh.st.rt .k-from{ padding-top:12px; padding-bottom:4px; font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:#6B7484; }
.kx.wx.wh.st.rt .k-from::before{ background:#D3E0EF; }
.kx.wx.wh.st.rt .k-was{ font-size:13px; font-weight:500; color:#6B7484; }
.kx.wx.wh.st.rt .k-was s{ text-decoration-color:#6B7484; }
.kx.wx.wh.st.rt .k-off{ padding:3px 9px; border:1px solid #CCD9EA; background:#fff; font-size:12px; font-weight:750; letter-spacing:0; line-height:16px; color:#0E1E35; }
.kx.wx.wh.st.rt .k-now{ padding-top:6px; gap:0 6px; }
.kx.wx.wh.st.rt .k-now b{ font-size:30px; font-weight:800; letter-spacing:-.042em; line-height:1; color:#0E1E35; }
.kx.wx.wh.st.rt .k-now b i{ font-size:.667em; font-weight:700; }
.kx.wx.wh.st.rt .k-now span{ font-size:13px; font-weight:400; color:#6B7484; }
.kx.wx.wh.st.rt .k-now.is-c b{ font-size:25px; letter-spacing:-.034em; }
.kx.wx.wh.st.rt .k-bill{ padding-top:10px; }
.kx.wx.wh.st.rt .k-bill b{ font-size:11.5px; font-weight:700; color:#6B7484; }
.kx.wx.wh.st.rt .k-bill .k-bv{ margin-top:1px; font-size:12.5px; font-weight:650; line-height:1.4; color:#39414E; }

/* the white tray on the pale-blue zone, held by the zone's own rule */
.kx.wx.wh.st.rt .k-tray{ background:#fff; box-shadow:inset 0 0 0 1px #D3E0EF; }
.kx.wx.wh.st.rt .k-tray--r .k-tile + .k-tile{ border-top:1px solid #E8EEF6; }
.kx.wx.wh.st.rt .k-tray--r .k-ic{ background:#F0F4FA; stroke:#39414E; }
.kx.wx.wh.st.rt .k-tile dt{ font-size:9.5px; font-weight:800; letter-spacing:.08em; color:#6B7484; }
.kx.wx.wh.st.rt .k-tile dd{ margin-top:1px; font-size:13.5px; font-weight:700; color:#0E1E35; }
.kx.wx.wh.st.rt .k-fn{ font-size:16px; font-weight:800; letter-spacing:-.024em; color:#0E1E35; }
.kx.wx.wh.st.rt .k-fu{ font-size:13.5px; font-weight:700; color:#0E1E35; }
.kx.wx.wh.st.rt .k-ft{ font-size:13.5px; font-weight:700; line-height:1.36; color:#0E1E35; }

/* ------------------------------------ below the header: the reference */
.kx.wx.wh.st.rt :is(.k-pts, .k-acts, .k-more){ border-color:#CCD9EA; }
.kx.wx.wh.st.rt .k-pl{ font-size:13px; font-weight:400; line-height:1.34; color:#39414E; }
.kx.wx.wh.st.rt .k-ptb .k-ic{ stroke:#9AA3B0; }
.kx.wx.wh.st.rt .k-ptb:hover .k-pl, .kx.wx.wh.st.rt .k-pt.is-tip .k-pl{ color:#0E1E35; }
.kx.wx.wh.st.rt .k-b1{ font-size:15px; font-weight:750; letter-spacing:-.012em; }
.kx.wx.wh.st.rt .k-b2{ padding:0 0 1px; font-size:12.5px; font-weight:650; color:#6B7484; text-decoration:none; box-shadow:inset 0 -1px 0 #9AA3B0; }
.kx.wx.wh.st.rt .k-b2:hover{ color:#0E1E35; box-shadow:inset 0 -1px 0 #39414E; }
.kx.wx.wh.st.rt .k-mbar{ box-shadow:inset 0 1px 0 #CCD9EA; }
.kx.wx.wh.st.rt .k-mbar b{ font-size:13px; font-weight:750; letter-spacing:-.008em; color:#0E1E35; }
.kx.wx.wh.st.rt .k-ct{ font-size:13px; font-weight:750; letter-spacing:-.008em; color:#0E1E35; }
.kx.wx.wh.st.rt .k-cc{ font-size:12px; font-weight:500; color:#6B7484; }
.kx.wx.wh.st.rt .k-tt{ font-size:13px; font-weight:750; color:#0E1E35; }
.kx.wx.wh.st.rt .k-a, .kx.wx.wh.st.rt .k-ticks li{ font-size:13px; line-height:1.5; color:#39414E; }
.kx.wx.wh.st.rt .k-sl{ font-size:11.5px; font-weight:700; color:#6B7484; }
.kx.wx.wh.st.rt .k-mbar .k-tri{ fill:#9AA3B0; }

/* plans that carried a rule take the reference's one blue */
.kx.wx.wh.st.rt.lp-delta .k-crown{ border-top:3px solid #0760C6; }
@media (min-width:1300px){ .kx.wx.wh.st.rt.lp-brief .kx-t::before{ background:#0760C6; } }
/* the plans' secondary action keeps the reference link on its grey zones */
.kx.wx.wh.st.rt:is(.lp-band, .lp-askplate, .lp-sheet) .k-b2{ color:#39414E; }
.kx.wx.wh.st.rt.lp-spec .k-pl{ font-weight:500; color:#0E1E35; }
.kx.wx.wh.st.rt.lp-quiet .k-pl{ font-size:13.5px; font-weight:600; color:#0E1E35; }

/* ---------------------------------------------- phone switch ------- */
@container kx (max-width:740px){
  .kx.wx.wh.st.rt :is(.sw-ledger, .sw-slider, .sw-tabs) .s-k[aria-selected="true"]{ background:#EAF1FA; box-shadow:inset 0 0 0 1px #D3E0EF, inset 0 3px 0 #0760C6; }
  .kx.wx.wh.st.rt .s-k[aria-selected="true"] .s-n{ color:#0E1E35; }
  .kx.wx.wh.st.rt .sw-bar .s-bar{ background:#fff; box-shadow:inset 0 0 0 1px #CCD9EA, inset 3px 0 0 #0760C6; }
  .kx.wx.wh.st.rt .sw-bar .s-k[aria-selected="true"]{ background:#EAF1FA; box-shadow:inset 0 0 0 1px #D3E0EF, inset 3px 0 0 #0760C6; }
  .kx.wx.wh.st.rt .sw-joined .s-k[aria-selected="true"]{ background:#EAF1FA; box-shadow:inset 1px 0 0 #CCD9EA, inset -1px 0 0 #CCD9EA, inset 0 3px 0 #0760C6; }
  .kx.wx.wh.st.rt .sw-joined .s-lines{ background:#EAF1FA; box-shadow:inset 1px 0 0 #CCD9EA, inset -1px 0 0 #CCD9EA; }
  .kx.wx.wh.st.rt.lp-delta .kx-row > .k .k-crown{ border-top:3px solid #0760C6; }
}
/* ======================================================================
   gads-pkg-pm10-v7c · pm — ten premium versions of the reference card
   Content and order fixed. What changes per option:
     where the colour sits (whole header / name cap / price plate / price
     window / two tones / a band outside the card), the floor against it
     (never the same tone as the header), the logo (three options only),
     icons (the figure tray in two options only; never on the points).
   Colour stays in the header; below it white, greys and dark text.
   .kx.wx.wh.st.rt.pm = .kx.wx.wh.st.rt.pm
   ====================================================================== */
.kx.wx.wh.st.rt.pm{ --fl:#fff; --hz:#EEF4FC; --hz2:#E2ECFA; --hze:#CCDCF0; --hzi:#004594; --ce:#D2DCE8; --rule:#E3E9F1; --trl:#E3E9F1;
   --offb:#E4EEFB; --offe:#BCD1EE; --offi:#004594; --ip:#EEF4FC; --sk:var(--hz); --ske:var(--hze); --band:#DDE8F7;
   --ink:#0E1E35; --ink2:#2A3342; --mut:#5B6573; background:var(--fl); }

/* ------------------------------------------------ section head ------ */
.kx.wx.wh.st.rt.pm .kx-t{ font-size:clamp(28px, 2.4vw, 36px); letter-spacing:-.04em; color:var(--ink); }
.kx.wx.wh.st.rt.pm .kx-s{ color:var(--mut); }

/* ------------------------------------------------ the card ---------- */
.kx.wx.wh.st.rt.pm .k-crown{ --A:inherit; background:var(--hz); border-color:var(--ce); box-shadow:inset 0 -1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm :is(.k-pts, .k-acts, .k-more){ border-color:var(--ce); }

/* identity */
.kx.wx.wh.st.rt.pm .k-id{ padding-top:22px; padding-bottom:0; gap:10px; }
.kx.wx.wh.st.rt.pm.pm-lg-off .k-badge{ display:none !important; }
.kx.wx.wh.st.rt.pm .k-name > span{ margin:0 0 5px; font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; line-height:1.2; color:var(--hzi); }
.kx.wx.wh.st.rt.pm .k-name > b{ font-size:26px; font-weight:800; letter-spacing:-.036em; line-height:1.04; color:var(--ink); }
.kx.wx.wh.st.rt.pm .k-qual{ padding-top:6px; padding-bottom:18px; font-size:14px; font-weight:600; letter-spacing:-.003em; line-height:1.4; color:var(--ink2); }
.kx.wx.wh.st.rt.pm .k-qi{ stroke:var(--hzi); }
.kx.wx.wh.st.rt.pm.pm-ck-off .k-qual .k-lead{ display:none !important; }

/* price */
.kx.wx.wh.st.rt.pm .k-from{ padding-top:16px; padding-bottom:6px; font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; line-height:1.3; color:var(--mut); }
.kx.wx.wh.st.rt.pm .k-from::before{ background:var(--hze); }
.kx.wx.wh.st.rt.pm .k-was{ gap:4px 10px; font-size:13px; font-weight:500; line-height:1.25; color:var(--mut); }
.kx.wx.wh.st.rt.pm .k-was s{ text-decoration-thickness:1px; text-decoration-color:var(--mut); }
.kx.wx.wh.st.rt.pm .k-off{ padding:3px 9px; border:1px solid var(--offe); background:var(--offb); font-size:12px; font-weight:800; letter-spacing:.005em; line-height:16px; color:var(--offi); }
.kx.wx.wh.st.rt.pm .k-now{ padding-top:8px; gap:0 6px; }
.kx.wx.wh.st.rt.pm .k-now b{ font-size:36px; font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.kx.wx.wh.st.rt.pm .k-now b i{ font-size:.56em; font-weight:700; letter-spacing:0; }
.kx.wx.wh.st.rt.pm .k-now span{ font-size:13px; font-weight:500; color:var(--mut); }
.kx.wx.wh.st.rt.pm .k-now.is-c b{ font-size:28px; letter-spacing:-.038em; }
.kx.wx.wh.st.rt.pm .k-bill{ padding-top:12px; }
.kx.wx.wh.st.rt.pm .k-bill b{ font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; line-height:1.3; color:var(--mut); }
.kx.wx.wh.st.rt.pm .k-bill .k-bv{ margin-top:4px; font-size:13px; font-weight:650; line-height:1.4; color:var(--ink2); }

/* the four figures: a ruled list by default, a white panel where named */
.kx.wx.wh.st.rt.pm .k-tray{ margin:18px var(--A) 22px; padding:0; background:transparent; border:0; box-shadow:inset 0 1px 0 var(--trl); }
.kx.wx.wh.st.rt.pm .k-tray--r .k-tile{ padding:12px 0; column-gap:12px; }
.kx.wx.wh.st.rt.pm .k-tray--r .k-tile + .k-tile{ border-top:1px solid var(--rule); }
.kx.wx.wh.st.rt.pm.pm-ty-panel .k-tray{ margin:20px calc(var(--A) - 14px) 22px; padding:0 14px; background:#fff; box-shadow:inset 0 0 0 1px var(--hze); }
.kx.wx.wh.st.rt.pm.pm-ti-off .k-tray--r .k-tile{ grid-template-columns:minmax(0,1fr); }
.kx.wx.wh.st.rt.pm.pm-ti-off .k-tray--r .k-lead{ display:none !important; }
.kx.wx.wh.st.rt.pm .k-tray--r .k-ic{ background:var(--ip); stroke:var(--hzi); }
.kx.wx.wh.st.rt.pm .k-tile dt{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; line-height:1.3; color:var(--mut); }
.kx.wx.wh.st.rt.pm .k-tile dd{ margin-top:3px; font-size:14px; font-weight:700; line-height:1.3; color:var(--ink); }
.kx.wx.wh.st.rt.pm .k-fn{ font-size:20px; font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--ink); }
.kx.wx.wh.st.rt.pm .k-fu{ font-size:14px; font-weight:700; color:var(--ink); }
.kx.wx.wh.st.rt.pm .k-ft{ font-size:14px; font-weight:700; line-height:1.38; color:var(--ink); }

/* below the header: neutral, readable */
.kx.wx.wh.st.rt.pm .k-pts{ padding-top:14px; padding-bottom:12px; }
.kx.wx.wh.st.rt.pm .k-pl{ font-size:13.5px; font-weight:500; line-height:1.36; color:#2E3746; }
.kx.wx.wh.st.rt.pm .k-ptb:hover .k-pl, .kx.wx.wh.st.rt.pm .k-pt.is-tip .k-pl{ color:var(--ink); }
.kx.wx.wh.st.rt.pm .k-b1{ min-height:50px; }
.kx.wx.wh.st.rt.pm.pt-plain .k-ptb{ grid-template-columns:minmax(0,1fr); }

/* ------------------------------------------------ alignment --------- */
.kx.wx.wh.st.rt.pm.pm-al-l .k-crown{ text-align:left; }
.kx.wx.wh.st.rt.pm.pm-al-l .k-id{ flex-direction:column; align-items:flex-start; text-align:left; }
.kx.wx.wh.st.rt.pm.pm-al-l .k-qual{ justify-content:flex-start; }
.kx.wx.wh.st.rt.pm.pm-al-l :is(.k-from, .k-bill){ text-align:left; }
.kx.wx.wh.st.rt.pm.pm-al-l :is(.k-was, .k-now){ justify-content:flex-start; }
/* the logo beside the name */
.kx.wx.wh.st.rt.pm.pm-lg-in .k-id{ flex-direction:row; align-items:center; gap:12px; }
.kx.wx.wh.st.rt.pm.pm-lg-in .k-badge{ width:30px; height:38px; }
.kx.wx.wh.st.rt.pm.pm-lg-in .k-gl{ width:30px; height:38px; }

/* ======================================================================
   WHERE THE COLOUR SITS
   ====================================================================== */
/* the name cap: identity on colour, price and figures on white */
.kx.wx.wh.st.rt.pm.pm-hz-cap .k-crown{ background:#fff; box-shadow:inset 0 -1px 0 var(--rule); }
.kx.wx.wh.st.rt.pm.pm-hz-cap :is(.k-id, .k-qual){ background:var(--hz); }
.kx.wx.wh.st.rt.pm.pm-hz-cap .k-qual{ box-shadow:inset 0 -1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm.pm-hz-cap .k-from::before{ content:none; }
.kx.wx.wh.st.rt.pm.pm-hz-cap .k-from{ padding-top:18px; }

/* the price plate: only the price block on colour */
.kx.wx.wh.st.rt.pm.pm-hz-price .k-crown{ background:#fff; box-shadow:inset 0 -1px 0 var(--rule); }
.kx.wx.wh.st.rt.pm.pm-hz-price :is(.k-from, .k-was, .k-now, .k-bill){ background:var(--hz); }
.kx.wx.wh.st.rt.pm.pm-hz-price .k-from{ padding-top:16px; box-shadow:inset 0 1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm.pm-hz-price .k-from::before{ content:none; }
.kx.wx.wh.st.rt.pm.pm-hz-price .k-bill{ padding-bottom:16px; box-shadow:inset 0 -1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm.pm-hz-price .k-tray{ margin-top:6px; box-shadow:none; }

/* two tones: the name on the deeper tone, price and figures on the lighter */
.kx.wx.wh.st.rt.pm.pm-hz-two :is(.k-id, .k-qual){ background:var(--hz2); }
.kx.wx.wh.st.rt.pm.pm-hz-two .k-qual{ box-shadow:inset 0 -1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm.pm-hz-two .k-from::before{ content:none; }
.kx.wx.wh.st.rt.pm.pm-hz-two .k-from{ padding-top:18px; }

/* a white header: colour only in the ink and the offer */
.kx.wx.wh.st.rt.pm.pm-hz-white .k-crown{ background:#fff; box-shadow:inset 0 -1px 0 var(--rule); }
.kx.wx.wh.st.rt.pm.pm-hz-white .k-from::before{ background:var(--rule); }

/* the price window: a white window in the coloured header */
.kx.wx.wh.st.rt.pm.pm-hz-win :is(.k-from, .k-was, .k-now, .k-bill){ margin:0 12px; padding-left:calc(var(--A) - 12px); padding-right:calc(var(--A) - 12px); background:#fff;
  box-shadow:inset 1px 0 0 var(--hze), inset -1px 0 0 var(--hze); }
.kx.wx.wh.st.rt.pm.pm-hz-win .k-from{ padding-top:14px; box-shadow:inset 1px 0 0 var(--hze), inset -1px 0 0 var(--hze), inset 0 1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm.pm-hz-win .k-from::before{ content:none; }
.kx.wx.wh.st.rt.pm.pm-hz-win .k-bill{ padding-bottom:15px; box-shadow:inset 1px 0 0 var(--hze), inset -1px 0 0 var(--hze), inset 0 -1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm.pm-hz-win .k-tray{ margin-top:14px; }

/* a light band outside the cards, behind the heading and the card tops */
.kx.wx.wh.st.rt.pm.pm-fl-band{ position:relative; isolation:isolate; overflow:clip; }
.kx.wx.wh.st.rt.pm.pm-fl-band .kx-row{ position:relative; }
.kx.wx.wh.st.rt.pm.pm-fl-band .kx-row::before{ content:""; position:absolute; z-index:-1; left:-100vw; right:-100vw; top:-720px; height:calc(720px + 111.2px); background:var(--band); }

/* luxury scale: large type, hairlines, a light top edge */
.kx.wx.wh.st.rt.pm.pm-lux .k-crown{ border-top:4px solid #CFE0F5; }
.kx.wx.wh.st.rt.pm.pm-lux .k-id{ padding-top:26px; }
.kx.wx.wh.st.rt.pm.pm-lux .k-name > b{ font-size:28px; letter-spacing:-.04em; }
.kx.wx.wh.st.rt.pm.pm-lux .k-now{ padding-top:10px; }
.kx.wx.wh.st.rt.pm.pm-lux .k-now b{ font-size:42px; letter-spacing:-.055em; }
.kx.wx.wh.st.rt.pm.pm-lux .k-now.is-c b{ font-size:31px; }
.kx.wx.wh.st.rt.pm.pm-lux .k-tray--r .k-tile{ justify-items:center; text-align:center; }
.kx.wx.wh.st.rt.pm.pm-lux .k-tray{ margin-top:22px; margin-bottom:26px; }

/* ======================================================================
   THE TEN
   ====================================================================== */
/* 01 · Clear Header */
.kx.wx.wh.st.rt.pm.pm-o1{ --fl:#FFFFFF; --hz:#EEF4FC; --hze:#CCDCF0; }

/* 02 · Package Caps — each package's own colour on the name cap */
.kx.wx.wh.st.rt.pm.pm-o2{ --fl:#F2F4F7; --ce:#D5DDE7; }
.kx.wx.wh.st.rt.pm.pm-o2 [data-h="std"]{ --hz:#F5E1C8; --hze:#BE9E72; --hzi:#765311; --ip:#FBF3EA; --offb:#FFFFFF; --offe:#D6BA95; --offi:#765311; --sk:#F5E1C8; --ske:#BE9E72; }
.kx.wx.wh.st.rt.pm.pm-o2 [data-h="adv"]{ --hz:#CAECDA; --hze:#71B093; --hzi:#006843; --ip:#EBF7F1; --offb:#FFFFFF; --offe:#96C9B0; --offi:#006843; --sk:#CAECDA; --ske:#71B093; }
.kx.wx.wh.st.rt.pm.pm-o2 [data-h="pro"]{ --hz:#D0E6FF; --hze:#79A7D4; --hzi:#00609D; --ip:#EDF5FE; --offb:#FFFFFF; --offe:#9EC2E8; --offi:#00609D; --sk:#D0E6FF; --ske:#79A7D4; }
.kx.wx.wh.st.rt.pm.pm-o2 [data-h="ent"]{ --hz:#D9E5F0; --hze:#8FA6B8; --hzi:#385E76; --ip:#F0F5F9; --offb:#FFFFFF; --offe:#AEC1D0; --offi:#385E76; --sk:#D9E5F0; --ske:#8FA6B8; }

/* 03 · Price Plate */
.kx.wx.wh.st.rt.pm.pm-o3{ --fl:#F4F5F7; --hz:#E8F1FC; --hze:#C6D8EF; --offb:#FFFFFF; --offe:#BCD1EE; }

/* 04 · Straddle Band */
.kx.wx.wh.st.rt.pm.pm-o4{ --fl:#FFFFFF; --ce:#C9D6E8; --band:#DDE8F7; --sk:#E6EFFB; --ske:#BCD1EE; }

/* 05 · Depth Ramp — one step of blue per level */
.kx.wx.wh.st.rt.pm.pm-o5{ --fl:#FFFFFF; --offb:#FFFFFF; }
.kx.wx.wh.st.rt.pm.pm-o5 [data-h="std"]{ --hz:#F7FAFE; --hze:#D6E3F3; --sk:#F7FAFE; --ske:#D6E3F3; --ip:#EAF1FB; --offe:#D6E3F3; }
.kx.wx.wh.st.rt.pm.pm-o5 [data-h="adv"]{ --hz:#EEF5FD; --hze:#CADCF1; --sk:#EEF5FD; --ske:#CADCF1; --ip:#E1ECFA; --offe:#CADCF1; }
.kx.wx.wh.st.rt.pm.pm-o5 [data-h="pro"]{ --hz:#E5EFFC; --hze:#BED4EF; --sk:#E5EFFC; --ske:#BED4EF; --ip:#D8E6F9; --offe:#BED4EF; }
.kx.wx.wh.st.rt.pm.pm-o5 [data-h="ent"]{ --hz:#DCE9FA; --hze:#B2CBEB; --sk:#DCE9FA; --ske:#B2CBEB; --ip:#CFE0F7; --offe:#B2CBEB; }

/* 06 · Two-Tone Head */
.kx.wx.wh.st.rt.pm.pm-o6{ --fl:#ECEEF1; --hz:#F3F8FE; --hz2:#E2ECFA; --hze:#C8D9EF; --offb:#FFFFFF; --sk:#E2ECFA; --ske:#C8D9EF; }

/* 07 · Ivory Floor */
.kx.wx.wh.st.rt.pm.pm-o7{ --fl:#F7F6F2; --ce:#D9D7CF; --hz:#EDF3FC; --hze:#C9D9EF; }

/* 08 · Hairline Premium */
.kx.wx.wh.st.rt.pm.pm-o8{ --fl:#F0F4FA; --ce:#D3DDEA; --sk:#E6EFFB; --ske:#BCD1EE; }

/* 09 · Price Window */
.kx.wx.wh.st.rt.pm.pm-o9{ --fl:#FFFFFF; --hz:#E8F0FB; --hze:#C4D6EE; --rule:#D3E1F2; --trl:#C4D6EE; --offb:#E8F0FB; }
.kx.wx.wh.st.rt.pm.pm-o9.lp-delta .k-crown{ border-top:1px solid var(--ce); }

/* 10 · Brief + Tints — each package's lightest tint */
.kx.wx.wh.st.rt.pm.pm-o10{ --fl:#FFFFFF; --offb:#FFFFFF; }
.kx.wx.wh.st.rt.pm.pm-o10 [data-h="std"]{ --hz:#FBF3EA; --hze:#E3CFB2; --hzi:#765311; --offe:#D6BA95; --offi:#765311; --sk:#FBF3EA; --ske:#D6BA95; }
.kx.wx.wh.st.rt.pm.pm-o10 [data-h="adv"]{ --hz:#EBF7F1; --hze:#B5DAC7; --hzi:#006843; --offe:#96C9B0; --offi:#006843; --sk:#EBF7F1; --ske:#96C9B0; }
.kx.wx.wh.st.rt.pm.pm-o10 [data-h="pro"]{ --hz:#EDF5FE; --hze:#BCD5F0; --hzi:#00609D; --offe:#9EC2E8; --offi:#00609D; --sk:#EDF5FE; --ske:#9EC2E8; }
.kx.wx.wh.st.rt.pm.pm-o10 [data-h="ent"]{ --hz:#F0F5F9; --hze:#C6D3DE; --hzi:#385E76; --offe:#AEC1D0; --offi:#385E76; --sk:#F0F5F9; --ske:#AEC1D0; }
.kx.wx.wh.st.rt.pm.pm-o10 .kx-hd{ background:#EEF4FC !important; border-color:#CCDCF0 !important; }
.kx.wx.wh.st.rt.pm.pm-o10 .kx-t::before{ content:none !important; }

/* ---------------------------------------------- phone ---------------- */
@container kx (max-width:740px){
  .kx.wx.wh.st.rt.pm .k-sw{ background:var(--fl); box-shadow:-18px 0 0 var(--fl), 18px 0 0 var(--fl); }
  .kx.wx.wh.st.rt.pm :is(.sw-ledger, .sw-slider, .sw-tabs) .s-k[aria-selected="true"]{ background:var(--sk); box-shadow:inset 0 0 0 1.5px var(--ske); }
  .kx.wx.wh.st.rt.pm .sw-bar .s-bar{ background:#fff; box-shadow:inset 0 0 0 1px var(--ce); }
  .kx.wx.wh.st.rt.pm .sw-bar .s-k[aria-selected="true"]{ background:var(--sk); box-shadow:inset 0 0 0 1.5px var(--ske); }
  .kx.wx.wh.st.rt.pm .sw-joined .s-k[aria-selected="true"]{ background:var(--sk); box-shadow:inset 1.5px 0 0 var(--ske), inset -1.5px 0 0 var(--ske), inset 0 1.5px 0 var(--ske); }
  .kx.wx.wh.st.rt.pm .sw-joined .s-lines{ background:var(--sk); box-shadow:inset 1.5px 0 0 var(--ske), inset -1.5px 0 0 var(--ske), inset 0 -1.5px 0 var(--ske); }
  .kx.wx.wh.st.rt.pm.pm-fl-band .kx-row::before{ content:none; }
  .kx.wx.wh.st.rt.pm.pm-o9.lp-delta .kx-row > .k .k-crown{ border-top:1px solid var(--ce); }
  .kx.wx.wh.st.rt.pm .k-now b{ font-size:34px; }
  .kx.wx.wh.st.rt.pm.pm-lux .k-now b{ font-size:38px; }
}
/* ======================================================================
   gads-pkg-hx5-c4m · hx — the header in a light colour one step deeper
   From the start of the card down to Planning documentation. One family
   per package, all at the same lightness (L* 92, so none looks heavier):
     Standard  blue   · Advanced green · Professional lavender
     Enterprise: a different family in each of the five versions.
   Five tones per family — surface, light surface, edge, rule, ink, plate.
   Below Planning documentation: white, greys and dark text.
   .kx.wx.wh.st.rt.pm.hx = .kx.wx.wh.st.rt.pm.hx
   ====================================================================== */
.kx.wx.wh.st.rt.pm.hx{ --mut:#4F5968; --fl:#fff; }
.kx.wx.wh.st.rt.pm.hx.hx-f-white{ --fl:#FFFFFF; }
.kx.wx.wh.st.rt.pm.hx.hx-f-grey{ --fl:#F3F4F6; }
.kx.wx.wh.st.rt.pm.hx.hx-f-ivory{ --fl:#F7F6F2; }
.kx.wx.wh.st.rt.pm.hx [data-h]{ --hz:var(--ht); --hz2:var(--ht); --offb:#FFFFFF; --offe:var(--hze); --offi:var(--hzi);
  --sk:var(--ht); --ske:var(--hze); --rule:#E6EAF0; --trl:var(--hze); --ce:var(--hr); --lv:var(--hzi); }
.kx.wx.wh.st.rt.pm.hx [data-h="std"]{ --ht:#DCE9FA; --hl:#EFF6FF; --hze:#A9C6E9; --hr:#C9DAF0; --hzi:#00538E; --ip:#EBF3FD; }
.kx.wx.wh.st.rt.pm.hx [data-h="adv"]{ --ht:#D7EDE0; --hl:#ECF8F1; --hze:#A0CEB4; --hr:#C3DFCE; --hzi:#005B33; --ip:#E8F5ED; }
.kx.wx.wh.st.rt.pm.hx [data-h="pro"]{ --ht:#E9E5FA; --hl:#F6F4FF; --hze:#C5BFE9; --hr:#DAD5F0; --hzi:#484689; --ip:#F3F1FD; }

/* Enterprise, one family per version */
.kx.wx.wh.st.rt.pm.hx.hx-e-sand [data-h="ent"]{ --ht:#F5E6D4; --hl:#FDF4EA; --hze:#DCBF9B; --hr:#E9D6BF; --hzi:#694703; --ip:#FAF1E6; }
.kx.wx.wh.st.rt.pm.hx.hx-e-slate [data-h="ent"]{ --ht:#DDEAF1; --hl:#EFF6FA; --hze:#ACC8D6; --hr:#CADBE4; --hzi:#00556E; --ip:#ECF3F8; }
.kx.wx.wh.st.rt.pm.hx.hx-e-teal [data-h="ent"]{ --ht:#CEEEEE; --hl:#E7F9F9; --hze:#8AD0D1; --hr:#B7E0E1; --hzi:#005D62; --ip:#E3F6F6; }
.kx.wx.wh.st.rt.pm.hx.hx-e-rose [data-h="ent"]{ --ht:#FEE1E5; --hl:#FFF1F4; --hze:#EEB5BF; --hr:#F4D0D5; --hzi:#892C46; --ip:#FFEEF1; }
.kx.wx.wh.st.rt.pm.hx.hx-e-graphite [data-h="ent"]{ --ht:#E3E8ED; --hl:#F3F6F8; --hze:#BBC5CF; --hr:#D3D9DF; --hzi:#3B5061; --ip:#EFF2F5; }

/* ------------------------------------------------ the header -------- */
.kx.wx.wh.st.rt.pm.hx .k-crown{ background:var(--hz); border-color:var(--hze); box-shadow:inset 0 -1px 0 var(--hze); }
.kx.wx.wh.st.rt.pm.hx :is(.k-pts, .k-acts, .k-more){ border-color:var(--hr); }
.kx.wx.wh.st.rt.pm.hx .k-from::before{ background:var(--hze); }
.kx.wx.wh.st.rt.pm.hx .k-qi{ stroke:var(--hzi); }
.kx.wx.wh.st.rt.pm.hx .k-tray--r .k-ic{ background:var(--ip); stroke:var(--hzi); }
.kx.wx.wh.st.rt.pm.hx.pm-ty-panel .k-tray{ box-shadow:inset 0 0 0 1px var(--hze); }
.kx.wx.wh.st.rt.pm.hx .k-bill .k-bv{ color:#24303F; }
.kx.wx.wh.st.rt.pm.hx .k-tile dd{ color:#0B1626; }

/* one text edge: the tray's text starts where the header's text starts */
.kx.wx.wh.st.rt.pm.hx.pm-ty-panel .k-tray{ margin-left:calc(var(--A) - 13px); margin-right:calc(var(--A) - 13px); padding:0 13px; }

/* the four figures ruled on the colour (version 3) */
.kx.wx.wh.st.rt.pm.hx.hx-ruled [data-h]{ --rule:var(--hr); }

/* two tones of one family (version 4): the name on the surface, the rest on its light tone */
.kx.wx.wh.st.rt.pm.hx.hx-two [data-h]{ --hz:var(--hl); --hz2:var(--ht); --trl:var(--hze); }
.kx.wx.wh.st.rt.pm.hx.hx-two .k-crown{ box-shadow:inset 0 -1px 0 var(--hr); }

/* a signature line of type (version 5) */
.kx.wx.wh.st.rt.pm.hx.hx-sig .k-name > b{ font-size:28px; letter-spacing:-.04em; }
.kx.wx.wh.st.rt.pm.hx.hx-sig .k-now b{ font-size:40px; letter-spacing:-.055em; }
.kx.wx.wh.st.rt.pm.hx.hx-sig .k-now.is-c b{ font-size:30px; }
.kx.wx.wh.st.rt.pm.hx.hx-sig .k-id{ padding-top:24px; }

/* no rule from another palette: the card's top edge stays in its own family */
.kx.wx.wh.st.rt.pm.hx.lp-delta .k-crown{ border-top:1px solid var(--hze); }

/* the button, softened: the site header's own blue rather than a bright one */
.kx.wx.wh.st.rt.pm.hx.sf .k-b1{ background:#004594; }
.kx.wx.wh.st.rt.pm.hx.sf .k-b1:hover{ background:#003C80; }
.kx.wx.wh.st.rt.pm.hx.sf .k-ptb:focus-visible, .kx.wx.wh.st.rt.pm.hx.sf :is(.k-mbar, .k-ch, .k-tb, .k-b1, .k-b2):focus-visible{ outline-color:#004594; }

/* ---------------------------------------------- phone ---------------- */
@container kx (max-width:740px){
  .kx.wx.wh.st.rt.pm.hx.hx-sig .k-now b{ font-size:36px; }
  .kx.wx.wh.st.rt.pm.hx.lp-delta .kx-row > .k .k-crown{ border-top:1px solid var(--hze); }
}


/* ---- this section's colours ---- */
#gads-packages{ --fl:#EDEFF1; --mut:#4F5968; }
#gads-packages [data-h="std"]{ --ht:#C9DCF4; --hl:#DEE7F3; --hze:#94BFEE; --hr:#B5CEED; --hzi:#14547F; --ip:#DBE6F5; --tray:#FFFFFF; --trule:#E6EAF0; }
#gads-packages [data-h="adv"]{ --ht:#C4E1D0; --hl:#DBEAE1; --hze:#8DC8A7; --hr:#AFD5BF; --hzi:#1B5B3D; --ip:#D8EADF; --tray:#FFFFFF; --trule:#E6EAF0; }
#gads-packages [data-h="pro"]{ --ht:#DCD7F1; --hl:#E7E4F2; --hze:#BDB5E9; --hr:#CEC8EA; --hzi:#4F4A7A; --ip:#E6E3F3; --tray:#FFFFFF; --trule:#E6EAF0; }
#gads-packages [data-h="ent"]{ --ht:#EAD7C0; --hl:#EEE4D9; --hze:#D8B689; --hr:#E0C8AB; --hzi:#664B20; --ip:#EFE4D6; --tray:#FFFFFF; --trule:#E6EAF0; }
#gads-packages :is(.k-pts, .k-acts, .k-more, .k-mbar, .k-rc){ background:#FFFFFF; }
#gads-packages .k-fold.is-open > .k-rc, #gads-packages .k-r--ch:has([aria-expanded="true"]) > .k-rc{ background:#FFFFFF; }
#gads-packages .k-tray{ background:var(--tray); }
#gads-packages .k-tray--r .k-tile + .k-tile{ border-top-color:var(--trule); }

/* ==========================================================================
   2026-09-23 · THE PINNED PACKAGE BAR ON PHONES — "One line"
   Picked from /doctor/gads-pkg-bar5-w8n/ (option 2) and applied to every
   service page, which all share this sheet.

   Four plain boxes run flush across the whole window; the package in view is
   shown by its background colour alone — no pointer, no line, no border, no
   underline. Inside each box the facts read in one order:

       Standard · ₹10,000 · 30% off · ₹7,000 / month · Min. 1 month
       (name)     (list)   (offer)   (what you pay)    (term)

   The two faults this fixes, both caused by rules further up this sheet:
     1 "/ month" was set to display:block, so it fell onto a line of its own
       and read as if it belonged to nothing. It is inline again, welded to
       its figure and unable to break away from it.
     2 the line through the list price was the browser default — as heavy and
       as dark as the figure it crossed. It is a 1px hairline in light grey.

   Scoped by #gads-packages, so it beats every class chain above whatever the
   order, and lives inside the same container query as the rest of the bar.
   ========================================================================== */
@container kx (max-width:740px){
  #gads-packages .k-sw{ position:sticky; top:calc(var(--kx-top) - 2px); z-index:30;
    width:100vw; margin:0 0 0 calc(50% - 50vw); padding:0; background:#fff; box-shadow:none !important; }
  /* a cap in the bar's own colour: while the page scrolls, subpixel rounding
     leaves a hairline of the page showing between the header and the bar */
  #gads-packages .k-sw::before{ content:""; position:absolute; left:0; right:0; top:-6px; height:6px; background:inherit; }
  #gads-packages .k-sw::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#D7DDE6; }
  /* the strip carried a negative inline margin from the old scrolling bar;
     without margin:0 the four boxes hang 18px past the window on each side */
  #gads-packages .k-sw .s-keys{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; margin:0; padding:0;
    overflow:visible; scroll-snap-type:none; }
  #gads-packages .k-sw .s-k{ flex:initial; grid-row:auto; display:flex; flex-wrap:wrap; justify-content:center;
    align-items:baseline; align-content:center; gap:1px 4px; padding:4px 5px; text-align:center; border-radius:0;
    background:#fff; box-shadow:inset -1px 0 0 #D7DDE6 !important; transition:background-color .18s ease; }
  #gads-packages .k-sw .s-k:last-child{ box-shadow:none !important; }
  #gads-packages .k-sw .s-k[aria-selected="true"]{ background:var(--sk) !important; }
  #gads-packages .k-sw .s-k[aria-selected="true"] .s-n{ color:var(--hzi); }

  /* the one reading order, on one line of figures */
  #gads-packages .k-sw .s-n{ order:1; flex-basis:100%; padding:0; text-align:center;
    font-size:9px; font-weight:800; line-height:1.05; letter-spacing:0; color:#39414E; }
  #gads-packages .k-sw .s-was{ order:2; flex-basis:auto; padding:0; font-size:11px; font-weight:700; line-height:1.05;
    color:#0E1E35; text-decoration-line:line-through; text-decoration-thickness:1px; text-decoration-color:#B4BDC9; }
  #gads-packages .k-sw .s-off{ order:3; flex-basis:auto; padding:0; font-size:8px; font-weight:700; line-height:1.1; color:#39414E; }
  #gads-packages .k-sw .s-p{ order:4; flex-basis:auto; padding:0; font-size:9.5px; font-weight:600; line-height:1.1;
    color:#5F6875; white-space:nowrap; }
  #gads-packages .k-sw .s-p small{ display:inline; margin:0 0 0 2px; font-size:7px; font-weight:500; line-height:1;
    color:#6B7484; white-space:nowrap; }
  #gads-packages .k-sw .s-min{ order:5; flex-basis:100%; padding:0; text-align:center;
    font-size:7px; font-weight:500; line-height:1.1; color:#6B7484; }
  #gads-packages .k-sw .s-min b{ font-weight:600; color:#6B7484; }
  #gads-packages .k-sw .s-na{ display:none; }

  /* Enterprise carries words where the others carry figures */
  #gads-packages .k-sw .s-k[data-h="ent"] .s-p{ flex-basis:100%; font-size:9.5px; font-weight:700; line-height:1.1;
    white-space:normal; color:#0E1E35; }
  #gads-packages .k-sw .s-k[data-h="ent"] .s-off{ flex-basis:100%; font-size:7.5px; font-weight:600; line-height:1.15; }
  #gads-packages .k-sw .s-k[data-h="ent"] .s-min{ font-size:7px; line-height:1.1; }
}
/* the two narrowest phones: the figures get the room they need */
@container kx (max-width:330px){
  #gads-packages .k-sw .s-was{ font-size:10px; }
  #gads-packages .k-sw .s-p{ font-size:9px; }
  #gads-packages .k-sw .s-k{ padding-inline:3px; gap:1px 3px; }
}

/* 2026-09-24 · REMOVED — #gads-packages{overflow-x:clip} under @media
   (max-width:760px). It contained two things, both since fixed at source:
   the Enterprise .k-off badge (now white-space:normal, so it wraps inside its
   card) and the 4-across grid that could never respond (google-ads closed
   .kx-in one </div> early, so its container queries were dead — the tag was
   moved and all five pages now match). Verified with the rule off: zero page
   overflow on all five service pages at 26 widths, nothing overhanging the
   section, and zero overflow across load / switch / expand / budget / scroll.
   Not kept as a safety mask. */