/* ==========================================================================
   PAGE LAYER — Home Internet Check
   --------------------------------------------------------------------------
   The previous version shipped its own design language: ~40 --hic-* tokens
   (navy #083b5c, blue #0069ff, Arial) that duplicated and contradicted the DS.
   All of that is gone. Colour, type, radii, buttons, cards, accordion, header
   and footer now come from ds.css.

   What remains here is only what the DS has no component for: the banner
   shell, the wizard chrome (progress, stepper, option cards) and the report
   cards. Every value is a DS token.

   BANNER — matches /mobile/18-25
     Photo runs the full viewport width; the diagonal-cut blue panel is held
     inside the DS container so it lines up with the header. Below 760px the
     panel comes first and the photo follows as a real <img>, so the order is
     document order rather than padding arithmetic.
     Art paths live on the markup: --hero-art on the section, src on the img.
     internet-tv-bannerv3.jpg is 1850x850 (2.18:1) — same ratio as the
     18-25 banner art, so it drops into this layout without adjustment.
   ========================================================================== */

.hic-wrap{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.hic-page-head{ padding-top: 20px; }
.hic-sec{ padding: 76px 0; }
.hic-band{ background: var(--od-grey-50); }
.hic-band--lav{ background: #f3f4fd; }
.hic-note01 {background-color: #ccc; padding: 10px; color:#000; font-size: 16px;}

/* ---------- Banner (18-25 layout) ---------- */

.hic-note01 {
    background-color: #ededed;
    padding: 10px;
    color: #000;
    font-size: 15px;
    border-radius: 15px;
    text-align: center;
    margin-top: 20px;
  }

.hic-hero__inner{ display: flex; align-items: center; min-height: clamp(460px, 40vw, 600px); }
.hic-hero__art{ display: none; }

.hic-hero__panel{
  background: var(--myt-blue);
  color: var(--od-white);
  border-radius: 0 var(--r-xl) 0 var(--r-xl);
  padding: clamp(34px, 3.2vw, 54px) clamp(28px, 2.8vw, 50px);
  width: min(52%, 580px);
}
.hic-hero__panel h1{
  color: var(--myt-aqua);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0 0 22px;
}
.hic-hero__q{
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--od-white);
  margin: 0 0 20px;
}
.hic-hero__body{
  font-size: var(--fs-bodysmall);
  line-height: var(--lh-body);
  color: rgba(255,255,255,.9);
  margin: 0 0 26px;
  max-width: 38ch;
}
.hic-hero__time{
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: var(--fw-medium);
  color: rgba(255,255,255,.78);
  margin: 16px 0 0;
}
.hic-hero__time .material-symbols-rounded{ font-size: 16px; }
.hic-hero .btn-dark:hover{ background: var(--od-white); color: var(--od-black); }

/* ---------- Section headings ---------- */
.hic-h2{ font-size: clamp(26px,3vw,38px); font-weight: var(--fw-bold); letter-spacing: -.8px; line-height: 1.12; margin: 0 0 12px; }
.hic-h3{ fletter-spacing: -.5px; margin: 0 0 8px; }
.hic-lead{ font-size: var(--fs-bodysmall); line-height: 1.62; color: var(--od-grey-700); margin: 0; }


/* ---------- Wizard chrome ---------- */
.hic-wizard{
  background: var(--od-white);
  border: 1px solid var(--od-grey-200);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.hic-wizard__head{
  padding: 24px 30px 20px;
  border-bottom: 1px solid var(--od-grey-200);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.hic-progress-label{  margin-bottom: 8px; }
.hic-progress-track{ width: min(320px, 44vw); height: 7px; background: var(--od-grey-100); border-radius: var(--r-pill); overflow: hidden; }
.hic-progress-track > span{ display: block; height: 100%; width: 25%; background: var(--grad-connectivity); border-radius: var(--r-pill); transition: width .25s ease; }
.hic-stepper{ display: flex; gap: 8px; }
.hic-dot{
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--od-grey-200); background: var(--od-white);
  color: var(--od-grey-400); font-size: 12px; font-weight: var(--fw-bold);
}
.hic-dot.is-active{ border-color: var(--myt-blue); background: var(--myt-blue); color: var(--od-white); }
.hic-dot.is-done {
    border-color: #e0e0e0;
    background: #eeeeee;
    color: #949494;
}

.hic-step{ padding: 32px 30px 10px; display: none; }
.hic-step.is-active{ display: block; }
.hic-step__intro{ margin-bottom: 24px; }
.hic-step__intro p{ margin: 8px 0 0; line-height: 1.6; color: var(--od-grey-700); }
.hic-question{ font-size: 15.5px; font-weight: var(--fw-bold); margin: 24px 0 12px; }
.hic-question span{ font-weight: var(--fw-regular); color: var(--od-grey-600); }

/* Radio option cards */
.hic-opts{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.hic-opts--speed{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.hic-opt{ position: relative; }
.hic-opt input{ position: absolute; opacity: 0; pointer-events: none; }
.hic-opt label{
  display: block; height: 100%;
  border: 2px solid var(--od-grey-200); border-radius: 14px;
  padding: 16px; min-height: 92px; cursor: pointer;
  background: var(--od-white);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.hic-opt label:hover{ border-color: var(--od-grey-400); transform: translateY(-1px); }
.hic-opt input:focus-visible + label{ outline: 3px solid var(--myt-aqua); outline-offset: 2px; }
.hic-opt input:checked + label{ border-color: var(--myt-blue); background: var(--od-paleblue); }
.hic-opt strong{ display: block; font-size: 15px; font-weight: var(--fw-bold); margin-bottom: 4px; }
.hic-opt small{ display: block; font-size: 15px; line-height: 1.45; color: var(--od-grey-700); }
.hic-opts--speed label{ min-height: 76px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.hic-opts--speed strong{ font-size: 22px; letter-spacing: -.6px; margin: 0; }

/* Checkbox chips */
.hic-checks{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.hic-chk{ position: relative; }
.hic-chk input{ position: absolute; opacity: 0; pointer-events: none; }
.hic-chk label{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--od-grey-200); border-radius: 12px;
  cursor: pointer; font-size: 15px; font-weight: var(--fw-medium);}
.hic-chk label::before{ content: ""; width: 18px; height: 18px; border: 2px solid var(--od-grey-400); border-radius: 5px; flex-shrink: 0;  font-weight: 700;}
.hic-chk input:checked + label{ border-color: var(--myt-blue); background: var(--od-paleblue); color: var(--od-ink);}
.hic-chk input:checked + label::before{
  content: "✓"; display: grid; place-items: center;
  background: var(--myt-blue); border-color: var(--myt-blue); color: var(--od-white); font-size: 11px;
}
.hic-chk input:focus-visible + label{ outline: 3px solid var(--myt-aqua); outline-offset: 2px; }

.hic-visualcard{ margin: 20px 0 22px; border-radius: 16px; overflow: hidden; border: 1px solid var(--od-grey-200); }
.hic-visualcard img {width: 56%;
    height: auto;
    display: block;
    margin: 0 auto;}
.hic-note{/*
  border-radius: 12px;margin-top: 16px;
  font-size: 12.5px; line-height: 1.5;
  background: #153ed9; color: var(--od-grey-700); border: 1px solid var(--od-grey-200); */
}
.hic-validation{ color: var(--myt-coral); font-size: 12.5px; font-weight: var(--fw-semibold); min-height: 20px; margin-top: 12px; }
.hic-step__actions{ display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--od-grey-200); }

/* ---------- Report ---------- */
.hic-report{ display: none; }
.hic-report.is-visible{ display: block; }
.hic-report__hero{ padding: 34px 30px 28px; background: var(--od-blue); border-bottom: 1px solid var(--od-grey-200); border-radius: 12px; }
.hic-tag{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: var(--fw-bold);
}
.hic-tag::before{ content: "●"; }
.hic-tag.good { background: var(--od-mint);     color: #14754d; }
.hic-tag.watch{ background: #fff4df;            color: #8a5b00; }
.hic-tag.act  { background: var(--od-white);    color: #a93737; }
.hic-report__summary{ font-size: clamp(24px,3.2vw,36px);  letter-spacing: -.8px; line-height: 1.12; margin: 14px 0 8px; color: white; }
.hic-report__body{ padding: 28px 30px 32px; }

.hic-statcard{ border: 1px solid var(--od-grey-200); border-radius: 16px; padding: 20px; height: 100%; background: var(--od-white); }
.hic-statcard__top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hic-statcard__top strong{ font-size: 14px; font-weight: var(--fw-bold); }
.hic-statbadge{ border-radius: var(--r-pill); padding: 5px 10px; font-size: 10.5px; font-weight: var(--fw-bold); white-space: nowrap; }
.hic-statbadge.good { background: var(--od-mint);  color: #14754d; }
.hic-statbadge.watch{ background: #fff4df;         color: #8a5b00; }
.hic-statbadge.action{ background: var(--od-peach); color: #a93737; }
.hic-statvalue{ font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -.6px; margin-bottom: 8px; }
.hic-statcard p{ font-size: 15px; line-height: 1.55; color: var(--od-grey-700); margin: 0; }
.hic-report__hero p.hic-lead {color: #fff;}
.hic-reco{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--od-grey-200); border-radius: 16px;
  padding: 20px 22px; margin-bottom: 12px; background: var(--od-white);
}
.hic-reco.is-primary{ border-color: var(--myt-blue); background: var(--od-paleblue); }
.hic-reco__n{
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--od-white); border: 1px solid var(--od-grey-200);
  display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); color: var(--myt-blue);
}
.hic-reco h4{ font-size: 17px; font-weight: var(--fw-semibold); margin: 0 0 4px;    padding-bottom: 7px; }
.hic-reco p{ font-size: 15px; line-height: 1.55; color: var(--od-grey-700); margin: 0; }
.hic-reco > div{ flex: 1 1 300px; min-width: 0; }
.hic-report__actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--od-grey-200); }

/* ---------- Extras ---------- */
.hic-extra{ border: 1px solid var(--od-grey-200); border-radius: var(--r-sm); overflow: hidden; height: 100%; display: flex; flex-direction: column; background: var(--od-white); }
.hic-extra img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hic-extra__b{ padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.hic-extra__b p{ line-height: 1.55; color: var(--od-grey-700); margin: 0 0 18px; }
.hic-extra__b .btn{ margin-top: auto; align-self: flex-start; }

/* ---------- Footer extras ---------- */
.myt-logo--white{ background-color: var(--od-white); }
.footer__bar{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; margin-top: 26px; font-size: 12px; color: rgba(255,255,255,.7); }
.footer__bar a{ color: rgba(255,255,255,.7); margin-left: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .hic-hero__panel{ width: min(66%, 520px); }
  .hic-opts--speed{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .hic-opts{ grid-template-columns: 1fr; }
  .hic-opts--speed{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hic-checks{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px){
  :root .p-6{ padding: 1.9rem !important; }
  .hic-wrap{ padding: 0 12px; }
  .hic-page-head{ padding-top: 12px; }
  .hic-sec{ padding: 52px 0; }

  /* Banner stacks: panel first, photo after — real document order. */
  .hic-hero{ background-image: none; background-color: var(--od-white); margin-top: 14px; }
  .hic-hero__inner{ display: block; min-height: 0; }
  .hic-hero__panel{ width: auto; border-radius: 0 var(--r-sm) 0 var(--r-sm); padding: 30px 24px; }
  .hic-hero__art{ display: block; width: 100%; height: auto; margin-top: 18px; }
  .hic-hero .btn{ width: 100%; justify-content: center; }

  .hic-wizard__head, .hic-step, .hic-report__hero, .hic-report__body{ padding-left: 20px; padding-right: 20px; }
  .hic-step__actions{ flex-direction: column-reverse; }
  .hic-step__actions .btn{ width: 100%; justify-content: center; }
  .hic-checks{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .001ms !important; }
  html{ scroll-behavior: auto; }
}

/* banner */

body{ background: var(--od-white); }

/* Shared container geometry — header and banner content sit on one left edge. */
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.page-head{ padding-top: 20px; }

/* ---------- Banner ---------- */
.databanner{
  /*background-color: var(--od-black); */
  background-image: var(--hero-art);   /* path is set on the section tag */
	background-repeat: no-repeat;
	background-position: center left;
	background-size: 110%;
	margin-top: 72px;
	padding-bottom: 60px;
}

.databanner__inner{
  display: flex;
  align-items: center;
  min-height: clamp(480px, 42vw, 640px);
}

/* Mobile-only art. Hidden on desktop, where the photo is the section
   background instead. */
.databanner__art{ display: none; }

/* Diagonal-cut panel: square on one diagonal, --r-xl on the other. */
.databanner__panel{
  background: var(--myt-blue);
  color: var(--od-white);
  border-radius: 0 var(--r-xl) 0 var(--r-xl);
  padding: clamp(36px, 3.4vw, 56px) clamp(30px, 3vw, 52px);
  /*width: min(52%, 580px); */
}

.databanner__panel h1{
  color: var(--myt-aqua);
  font-weight: var(--fw-bold);
  margin: 0 0 30px;
}

.databanner__q{
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  color: var(--od-white);
  margin: 0 0 22px;
}

.databanner__body{
  font-size: 15px;
  line-height: var(--lh-body);
  color: rgba(255,255,255,.9);
  margin: 0 0 30px;
  /*max-width: 36ch;*/
}

.databanner .btn-dark{ font-weight: var(--fw-semibold); }
.databanner .btn-dark:hover{ background: var(--od-white); color: var(--od-black); }

/* ---------- Tablet + Mobile (stacked layout) ---------- */
@media (max-width: 1100px){
  :root .p-6{ padding: 1.9rem !important; }
  .wrap{ padding: 0 12px; }
  .page-head{ padding-top: 12px; }

  .databanner{
    background-image: none;             /* photo-as-bg off */
    background-color: var(--od-white);
    margin-top: 104px;
    padding-bottom: 0;                  /* kill extra space below image */
  }

  .databanner__inner{
    display: block;
    min-height: 0;
  }

  .databanner__panel{
    width: auto;                        /* full width */
    border-radius: 0 var(--r-sm) 0 var(--r-sm);
    padding: 32px 24px;
  }

  .databanner__panel h1{ margin-bottom: 24px; }
  .databanner__q{ margin-bottom: 18px; }
  .databanner .btn{ width: 100%; justify-content: center; }

  /* Photo, full-bleed, directly beneath the panel */
  .databanner__art{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 90px;
    padding: 30px 30px 0 30px;          /* no bottom padding */
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px){
  :root .p-6{ padding: 1.9rem !important; }

  .wrap{ padding: 0 12px; }
  .page-head{ padding-top: 12px; }

  .databanner{
    background-image: none;             /* desktop art off */
    background-color: var(--od-white);
    margin-top: 104px;
  }

  .databanner__inner{
    display: block;
    min-height: 0;
  }

  .databanner__panel{
    width: auto;
    border-radius: 0 var(--r-sm) 0 var(--r-sm);
    padding: 32px 24px;
  }
  .databanner__panel h1{ margin-bottom: 24px; }
  .databanner__q{ margin-bottom: 18px; }
  .databanner .btn{ width: 100%; justify-content: center; }

  /* Photo, full-bleed, directly beneath the panel. */
	.databanner__art {
	        display: block;
	        width: 100%;
	        height: auto;
	        /* margin-top: 18px; */
	        border-radius: 50px;
	        padding: 30px;
	    }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .001ms !important; }
}

.prodfeat { background: none !important;}

/* banner */


/* MOBILE — no grid, nothing to reserve space */
.hic-reco{
  display: block;
  padding: 1.25rem;
}

.hic-reco__n{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin-bottom: .75rem;
  font-size: .875rem;
  line-height: 1;
  border-radius: .375rem;
}

.hic-reco h4{ margin-bottom: .25rem; }
.hic-reco p { margin-bottom: 0; }

.hic-reco > .btn{
  display: block;
  width: 100%;
  margin-top: 1rem;
  white-space: normal;
}

/* DESKTOP */
@media (min-width: 768px){
  .hic-reco{
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 15rem;
    align-items: center;
    column-gap: 1.25rem;
    padding: 1.25rem 1.5rem;
  }
  .hic-reco__n{
    margin-bottom: 0;
    justify-self: start;
    align-self: center;
  }
  .hic-reco > .btn{
    grid-column: 4;
    display: inline-flex;
    width: 100%;
    margin-top: 0;
    white-space: nowrap;
  }
}

.hic-formula{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .75rem;
}

.hic-formula__pill{
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: #eef4f8;          /* swap for your paleblue token */
  color: #17405f;               /* swap for your deep-blue token */
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: normal;          /* wrap instead of overflowing */
}

.hic-formula__op{
  font-weight: 700;
  color: #7a8895;
  padding-inline: .25rem;
}

@media (max-width: 575.98px){
  .hic-formula{ flex-direction: column; gap: .5rem; }
  .hic-formula__pill{ width: 100%; }
  .hic-formula__op{ padding: 0; }
}

.hic-pillar__n{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  margin-bottom: 1rem;
  border-radius: 1rem;        /* 50% for a circle */
  background: #fff;
  color: var(--myt-blue, #1a4dff);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}