/* Linkcrest — StarHub plans reference page.
   Built on the site's own tokens (--bg, --panel, --ivory, --muted, --green,
   --line) and card surfaces, so it reads as part of the site rather than a
   bolt-on. One colour is added: --amber, used only for things a customer must
   not miss — a price that changes, a delivery delay, an offer that ends. It is
   semantic, not decorative, and never appears anywhere else. */

.plans-page{
  --amber:#f2b650;
  --card-line:#343a31;
  --card-bg:linear-gradient(145deg,#1b1e1a,#131513);
  --stick:97px;                 /* site header height; plans.js refines this */
  --bar:52px;
}
@media(max-width:1000px){ .plans-page{ --stick:77px; --bar:48px } }

.nowrap{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Anchored sections land exactly under the sticky header and category bar.
   The site sets html{scroll-padding-top:104px} for its header alone; on this
   page the offset is header + bar instead (plans.js measures the real value).
   Using scroll-margin on the sections as well would add the two together. */
html:has(.plans-page){scroll-padding-top:149px}
@media(max-width:1000px){ html:has(.plans-page){scroll-padding-top:125px} }

/* The site styles the bare `nav` element for its header menu — including
   display:none and absolute positioning under 1000px, where the menu becomes a
   drop-down. The two navs on this page are content, so undo all of that. */
.plans-page nav.chooser,.plans-page nav.category-bar{
  left:auto;right:auto;padding:0;box-shadow:none;flex-direction:row;align-items:stretch;
}
.plans-page nav.chooser{display:grid;position:static;top:auto;background:none;border-bottom:0}
.plans-page nav.category-bar{display:block}
.plans-page .chooser a::after,.plans-page .category-bar a::after{content:none;display:none}

/* ── Stale-price notice ────────────────────────────────────────────────────── */
.stale-notice{background:#2a2214;border-bottom:1px solid #5a4520;position:relative;z-index:2}
.stale-notice p{padding-block:14px;color:#f3e2bf;font-size:14px;line-height:1.6}
.stale-notice strong{color:var(--amber)}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.plans-hero{position:relative;padding-block:clamp(48px,6vw,84px) clamp(36px,4vw,56px);border-bottom:1px solid var(--line)}
.plans-hero h1{font-size:clamp(40px,5vw,68px);margin:22px 0 0;text-wrap:balance}
.plans-lead{max-width:600px;margin-top:22px;font-size:17px;line-height:1.75}
.plans-hero .eyebrow{display:flex;align-items:flex-start;gap:10px}
.plans-hero .eyebrow .short-rule{flex:none;margin-top:.82em}
.plans-hero .eyebrow time{font-variant-numeric:tabular-nums}
/* Emphasis follows the site's rule: serif italic in green on dark grounds. */
.plans-hero h1 em,.plans-section:not(.routers) .section-head h2 em,.next h2 em{color:var(--green)}

/* Three doors: the first question is always "what are you after?" */
.chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(32px,4vw,48px)}
.door{
  position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:6px;
  min-height:190px;padding:22px 22px 20px;border:1px solid var(--card-line);background:var(--card-bg);
  color:var(--ivory);transition:border-color .35s var(--soft,ease),transform .4s var(--out,ease),background-color .35s;
}
.door:hover,.door:focus-visible{border-color:#1ed76066;transform:translateY(-2px);color:var(--ivory)}
.door-index{font:italic 400 15px/1 var(--serif);color:var(--green)}
.door-title{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:10px}
.door-desc{color:var(--muted);font-size:14px;line-height:1.55}
.door-price{font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:14px;padding-right:34px}
.door-price small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
.door-price small:first-child{margin-right:3px}
.door-arrow{position:absolute;right:20px;bottom:24px;width:20px;height:20px;color:var(--green);transition:transform .4s var(--out,ease)}
.door:hover .door-arrow{transform:translateX(4px)}

.hero-aside{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:22px}
.hero-aside .text-link{margin-top:0}

/* ── Share button ──────────────────────────────────────────────────────────── */
.share-button{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;
  border:1px solid #3d4339;background:transparent;color:var(--ivory);font-size:13px;font-weight:600;
  transition:border-color .3s,background-color .3s,color .3s;
}
.share-button svg{width:17px;height:17px;flex:none}
.share-button:hover{border-color:var(--green);color:var(--green)}
.share-button.is-done{border-color:var(--green);color:var(--green)}

/* ── Category bar ──────────────────────────────────────────────────────────── */
.category-bar{
  position:sticky;top:var(--stick);z-index:25;
  background:#101111ee;border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.category-bar .shell{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:8px;-webkit-overflow-scrolling:touch;
  position:relative;width:100%;padding-inline:max(56px,calc((100% - 1280px) / 2));
}
.category-bar::before,.category-bar::after{
  content:"";position:absolute;top:0;bottom:1px;width:44px;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s;
}
.category-bar::before{left:0;background:linear-gradient(90deg,#101111 20%,#10111100)}
.category-bar::after{right:0;background:linear-gradient(270deg,#101111 20%,#10111100)}
.category-bar.more-left::before,.category-bar.more-right::after{opacity:1}
.category-bar .shell::-webkit-scrollbar{display:none}
.category-bar a{
  flex:none;display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;
  font-size:13px;font-weight:600;color:var(--muted);border:1px solid transparent;
  transition:color .25s,border-color .25s,background-color .25s;
}
.category-bar a:hover{color:var(--ivory)}
.category-bar a[aria-current="true"]{color:#101111;background:var(--green);border-color:var(--green)}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.plans-section{padding-block:clamp(56px,7vw,96px);position:relative}
.plans-section + .plans-section{border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:28px 60px;align-items:end;margin-bottom:clamp(28px,3.5vw,44px)}
.section-head h2{font-size:clamp(30px,3.4vw,48px);margin-top:14px;text-wrap:balance}
.section-head-side{display:grid;gap:18px;justify-items:start}
.section-head-side p{max-width:520px;font-size:16px;line-height:1.7}

/* Dark sections sit on the moving field: same legibility guard as the rest of the site. */
.plans-hero h1,.plans-lead,.plans-hero .eyebrow,
.plans-section:not(.routers) .section-head h2,
.plans-section:not(.routers) .section-head-side p,
.group-title,.every-title,.next-lead,.next h2{
  text-shadow:0 0 22px rgba(16,17,17,.92),0 0 6px rgba(16,17,17,.6);
}

/* ── Plan cards ────────────────────────────────────────────────────────────── */
.plan-grid{display:grid;gap:14px}
.plan-grid.three{grid-template-columns:repeat(3,1fr)}
.plan-grid.two{grid-template-columns:repeat(2,1fr)}
.plan-grid + .plan-wide{margin-top:14px}

.plan{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,30px);border:1px solid var(--card-line);background:var(--card-bg);
}
.plan-head :is(h3,h4){font-size:clamp(21px,1.9vw,25px);font-weight:600;letter-spacing:-.025em;line-height:1.25;margin-top:10px;text-wrap:balance}
.plan-fit{margin-top:10px;font-size:14.5px;line-height:1.6}

.plan-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--green)}
.plan-tag.muted{color:#8f9489}
.plan-tag.attention{color:var(--amber)}

/* The price is the answer to the customer's first question, so it gets the
   biggest type on the card — with the unit kept quiet beside it. */
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:22px;color:var(--ivory)}
.price-amount{font-size:clamp(40px,3.8vw,50px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.price-amount small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted);margin-right:4px;vertical-align:.55em}
.price-unit{font-size:13.5px;line-height:1.35;color:var(--muted)}
.term{margin-top:10px;font-size:13px;font-weight:600;color:#c9c8bf}
.price-after{margin-top:10px;font-size:15px;color:#e9dcc0}
.price-after strong{color:var(--amber);font-weight:700}

.included{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid #2c3029;display:grid;gap:11px;align-content:start}
.included li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.5;color:#dcdbd3}
/* A check drawn with borders — no image request, nothing for the CSP to weigh. */
.included li::before{
  content:"";position:absolute;left:3px;top:.34em;width:6px;height:11px;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.included strong{color:var(--ivory);font-weight:600}
.worth{color:#8f9489;white-space:nowrap}
.deadline{display:inline-block;margin-left:2px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--amber);white-space:nowrap}

/* An offer past its end date is struck through and relabelled rather than
   silently left up. */
.included li.is-expired{color:#8f9489;text-decoration:line-through;text-decoration-color:#8f9489}
.included li.is-expired::before{border-color:#55584f}
.included li.is-expired .deadline{text-decoration:none;color:#b9a27a}

/* Device photos: StarHub's product shots, cut out of their white backgrounds
   so they sit on the card, with a soft pool of light behind them. */
.plan-shot{
  display:flex;align-items:center;justify-content:center;height:clamp(168px,15vw,206px);margin:0 0 20px;
  background:radial-gradient(58% 64% at 50% 56%,rgba(245,242,236,.075),rgba(245,242,236,0) 72%);
}
.plan-shot img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}

/* Studio photos (these come with their own backdrop, so they sit in a frame). */
.plan-photo{width:min(100%,380px);margin:0 auto 20px;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:#dfe3e6}
.plan-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* One device, two speeds: both monthly prices side by side in the card. */
.speed-prices{display:grid;gap:8px;margin-top:22px}
.speed-prices p{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border:1px solid #2f342c;background:#151714;color:var(--ivory)}
.speed-prices span{flex:1;font-size:14px;color:#c9c8bf}
.speed-prices strong{font-size:clamp(24px,2.2vw,28px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.speed-prices small{font-size:13px;color:var(--muted)}
.device-delivery{margin-top:14px}
#devices .group-title{margin-top:clamp(34px,4vw,48px)}

/* Wide card: the TV bundle carries a size table. The photo sits top right on
   wide screens and first on narrow ones. */
.plan-wide{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px);align-items:start;
  grid-template-areas:"main shot" "main side";grid-template-rows:auto 1fr;
}
.plan-wide > .plan-shot{grid-area:shot;margin:0}
.plan-wide-main{grid-area:main}
.plan-wide-side{grid-area:side}
.plan-wide-note{margin-top:18px}
.plan-wide-side .included{margin-top:0;padding-top:0;border-top:0}
.plan-wide-side .note{margin-top:14px}

.table-wrap{overflow-x:auto;margin-top:22px}
.size-table{width:100%;border-collapse:collapse;font-size:15px}
.size-table th,.size-table td{padding:13px 10px;text-align:left;border-bottom:1px solid #2c3029;vertical-align:baseline}
.size-table thead th{white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8f9489;padding-top:0}
.size-table tbody th{font-size:20px;font-weight:600;color:var(--ivory);font-variant-numeric:tabular-nums;width:4.2em}
.size-table td{color:#dcdbd3}
.size-table .num{font-size:20px;font-weight:600;color:var(--ivory);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.size-table thead th:last-child{text-align:right}
.size-table tbody tr:last-child th,.size-table tbody tr:last-child td{border-bottom:0}

/* ── Notes ─────────────────────────────────────────────────────────────────── */
.note{padding:16px 18px;border:1px solid #2f342c;background:#151714;font-size:14px;line-height:1.65;color:#c9c8bf}
.note strong{color:var(--ivory)}
.note.attention{border-color:#5a4520;background:#1d1911}
.note.attention strong{color:var(--amber)}
.aside-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.inline-link{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.inline-link:hover{color:var(--ivory)}

/* ── TV+ bundles ───────────────────────────────────────────────────────────── */
.group-title{
  display:flex;align-items:center;gap:14px;margin:clamp(34px,4vw,48px) 0 14px;
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);
}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.section-head + .group-title{margin-top:0}

.plan-bundle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(20px,3vw,40px);align-items:start}
.plan-bundle .price{margin-top:4px}
.plan-grid .plan-bundle{grid-template-columns:1fr;gap:0;align-content:start}
/* Cards side by side share row lines, so the prices and the "included" lists
   start at the same height across a row even when one card has an extra line
   (a "then $86" price, a longer description). Browsers without subgrid simply
   stack each card's content from the top. */
@supports (grid-template-rows:subgrid){
  .plan-grid > .plan:not(.plan-bundle){display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .plan-grid > .plan-bundle{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}
.plan-grid .plan-bundle .price-block{margin-top:18px}
.bundle-lists{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bundle-lists.stacked{grid-template-columns:1fr;gap:0}
.plan-grid .bundle-lists .included{margin-top:10px}
.list-label{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8f9489}
.bundle-lists .included{margin-top:10px;padding-top:12px}
.plan-grid .bundle-lists > div + div{margin-top:18px}
.plan-grid .plan-bundle .bundle-lists{margin-top:26px}

/* ── Add-ons: price lists rather than cards of prose ───────────────────────── */
.addon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.addon-list{padding:clamp(20px,2.2vw,28px);border:1px solid var(--card-line);background:var(--card-bg)}
.addon-title{font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ivory);line-height:1.4}
.addon-list dl{margin:12px 0 0;display:grid}
.addon-list dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid #2c3029}
.addon-list dl > div:first-child{border-top:0;padding-top:6px}
.addon-list dt{font-size:15px;font-weight:600;line-height:1.4;color:var(--ivory)}
.addon-list dt span{display:block;margin-top:3px;font-size:13px;font-weight:400;line-height:1.5;color:#8f9489}
.addon-list dd{flex:none;margin:0;text-align:right;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap}
.addon-list dd small{margin-left:2px;font-size:12.5px;font-weight:500;letter-spacing:0;color:#8f9489}
.addon-foot{margin-top:6px;padding-top:13px;border-top:1px solid #2c3029;font-size:13.5px;line-height:1.6;color:#b3b2aa}
.addon-note{margin-top:14px}

/* ── Router guide (ivory: the drawings are made for a light ground) ─────────── */
.routers{background:var(--ivory);color:#232520;border-top:0!important}
.routers + .plans-section{border-top:0}
.routers .eyebrow{color:#0e7a41}
.routers h2{color:#1b1d19}
.routers h2 em{color:#0e7a41}
.routers .section-head-side p{color:#4a4c45}
.routers .share-button{border-color:#c8c3b6;color:#232520}
.routers .share-button:hover,.routers .share-button.is-done{border-color:#0e7a41;color:#0e7a41}
.home-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.home{padding:14px 14px 18px;border:1px solid #ddd8cc;background:#faf8f3}
.home img{width:100%;height:auto;aspect-ratio:440/470;max-width:100%}
.home-type{margin-top:6px;font-size:14px;font-weight:600;color:#3b3d37}
.home-count{margin-top:2px;font-size:15px;color:#4a4c45}
.home-count strong{font-size:28px;font-weight:600;letter-spacing:-.03em;color:#1b1d19;font-variant-numeric:tabular-nums;margin-right:3px}
.routers-note{max-width:760px;margin-top:22px;font-size:14.5px;line-height:1.7;color:#4a4c45}
.routers .inline-link{color:#0e7a41}
.routers .inline-link:hover{color:#1b1d19}

/* ── Every plan ────────────────────────────────────────────────────────────── */
.every{padding-block:clamp(44px,5vw,70px)}
.every-title{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.every-grid{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.every-grid li{display:grid;gap:8px;padding:20px 22px;border:1px solid #2f342c;background:#151714}
.every-grid strong{font-size:16px;font-weight:600;color:var(--ivory)}
.every-grid span{font-size:14px;line-height:1.6;color:#b3b2aa}

/* ── Next step ─────────────────────────────────────────────────────────────── */
.next-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px 70px;align-items:end}
.next h2{font-size:clamp(34px,4vw,56px);margin-top:14px}
.next-lead{max-width:560px;margin-top:18px;font-size:16px;line-height:1.75}
.next-actions{display:grid;gap:8px;justify-items:start}
.next-actions .button{margin-top:0}
.next-actions .text-link{margin-top:0}

/* ── Fine print ────────────────────────────────────────────────────────────── */
.fine-print{padding-block:34px 44px;border-top:1px solid var(--line);position:relative}
.fine-print p{max-width:900px;font-size:13px;line-height:1.75;color:#8f9489}
.fine-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.fine-links a{color:#c9c8bf;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fine-links a:hover{color:var(--green)}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:12px 18px;background:var(--ivory);color:#161512;font-size:14px;font-weight:600;
  box-shadow:0 12px 34px #00000055;transition:opacity .3s,transform .35s var(--out,ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast:empty{display:none}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .category-bar .shell{padding-inline:32px}
  .plan-bundle{grid-template-columns:1fr 1fr}
  .plan-bundle .bundle-lists{grid-column:1 / -1}
}
@media(max-width:1000px){
  .chooser{grid-template-columns:1fr}
  .door{min-height:0;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;padding:18px 18px 18px}
  .door-index{grid-row:1 / span 3;padding-top:5px}
  .door-title{margin-top:0}
  .door-price{margin-top:6px}
  .door-arrow{top:50%;bottom:auto;transform:translateY(-50%)}
  .door:hover .door-arrow{transform:translate(4px,-50%)}
  .section-head{grid-template-columns:1fr;gap:18px}
  .plan-grid.three,.plan-grid.two{grid-template-columns:1fr}
  .plan-wide{grid-template-columns:1fr;grid-template-areas:"shot" "main" "side";grid-template-rows:auto;row-gap:22px}
  .aside-row{grid-template-columns:1fr}
  .home-grid{grid-template-columns:repeat(2,1fr)}
  .every-grid{grid-template-columns:1fr}
  .addon-grid{grid-template-columns:1fr}
  .next-grid{grid-template-columns:1fr}
}
/* Tablets: pairs sit side by side again; three-plan rows stay stacked so
   nothing gets squeezed. */
@media(min-width:700px) and (max-width:1000px){
  .plan-grid.two,.aside-row{grid-template-columns:repeat(2,1fr)}
  .every-grid{grid-template-columns:repeat(2,1fr)}
  .addon-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .addon-list dd{font-size:16.5px}
  .addon-list dl > div{gap:12px}
  .category-bar .shell{padding-inline:20px}
  .category-bar a{padding-inline:12px}
  .plans-lead{font-size:16px}
  .plan-bundle{grid-template-columns:1fr;gap:0}
  .plan-bundle .price-block{margin-top:18px}
  .bundle-lists{grid-template-columns:1fr;gap:0}
  .plan-bundle .bundle-lists{margin-top:26px}
  .bundle-lists > div + div{margin-top:18px}
  .size-table th,.size-table td{padding:12px 6px}
  .size-table tbody th,.size-table .num{font-size:18px}
  .home{padding:10px 10px 14px}
  .home-count strong{font-size:24px}
  .hero-aside{flex-direction:column;align-items:flex-start}
}
@media(max-width:380px){
  .category-bar a{padding-inline:10px}
  .price-amount{font-size:36px}
  .size-table td .worth{display:block}
}
@media(max-width:360px){
  .category-bar .shell{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){
  .door,.door-arrow,.share-button,.toast,.category-bar a{transition:none}
  .door:hover{transform:none}
}