/* ==========================================================================
   Shared INFO PAGE component  (.iws-ip)
   Used by /term-dates/ and /computer-requirements/. One hero family, not one
   per page (R1). Page-specific blocks are appended at the end of this file.
   Lives in the child theme, NOT inline in post_content: wpautop injects
   </p><p> into a <style> block at every blank line, which silently kills the
   first rule after each break. Measured on staging 31 Jul 2026 (.ip-ey,
   .ip-hero, .ip-ribbon and .ip-end all vanished that way).
   Tokens only. Radius 8/14/22/999 (R4). Container 1180px (R7).
   Gradients between named tokens (R5). transform+opacity only (R6).
   ========================================================================== */
.iws-ip{
  --r:#0A1776;--s:#0067E0;--ink:#1C1917;--nbg:#F8FAFC;--nbd:#E2E8F0;--ntx:#475569;
  --navy:#070D2E;--glow:#13266B;--peri:#CFE0FF;--perilt:#EAF1FF;--bodylt:#C7CEEA;
  --amber:#D97706;--amberink:#B45309;--amberdeep:#7C2D12;
  font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);
}
.iws-ip .in{max-width:1180px;margin:0 auto;padding:0 24px;}
.iws-ip h1,.iws-ip h2,.iws-ip h3{font-family:Sora,Inter,system-ui,sans-serif;color:var(--r);margin:0;letter-spacing:-.01em;}
.iws-ip p{margin:0;}
/* one eyebrow, one size (R3) */
.iws-ip .ip-ey{font-family:Sora,Inter,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s);margin:0 0 14px;}
.iws-ip .ip-ey--dark{color:var(--peri);}
/* hero */
.iws-ip .ip-hero{background-image:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);padding:76px 0 60px;}
.iws-ip .ip-hero h1{font-size:clamp(34px,5vw,54px);line-height:1.12;}
.iws-ip .ip-lede{max-width:720px;margin:18px 0 0;font-size:1.06rem;line-height:1.7;color:var(--ntx);}
.iws-ip .ip-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.iws-ip .ip-cta--c{justify-content:center;}
.iws-ip .ip-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-family:Sora,Inter,sans-serif;font-weight:600;font-size:1rem;text-decoration:none;transition:transform .25s cubic-bezier(.22,.61,.36,1);}
.iws-ip .ip-btn--primary{background-image:linear-gradient(120deg,#B45309 0%,#7C2D12 100%);color:#FFFFFF;box-shadow:0 6px 18px rgba(124,45,18,.22);}
.iws-ip .ip-btn--ghost{border:1px solid #0A1776;color:#0A1776;background-image:none;}
.iws-ip .ip-btn--ondark{border-color:#CFE0FF;color:#EAF1FF;}
.iws-ip .ip-btn:hover{transform:translateY(-2px);}
/* citable answer */
.iws-ip .ip-answer{padding:64px 0;background-color:#FFFFFF;}
.iws-ip .ip-answer h2{font-size:clamp(24px,3vw,32px);line-height:1.25;max-width:720px;}
.iws-ip .ip-answer p{max-width:720px;margin:16px 0 0;font-size:1.05rem;line-height:1.78;}
/* the ribbon, dark */
.iws-ip .ip-ribbon{background-image:linear-gradient(160deg,#070D2E 0%,#13266B 100%);padding:76px 0 68px;color:var(--bodylt);}
.iws-ip .ip-ribbon h2{color:#FFFFFF;font-size:clamp(26px,3.4vw,38px);line-height:1.35;}
/* ⚠️ THE DEFAULT WAS THE DARK-GROUND INK, AND IT MEASURED 1.56:1 (1 Aug 2026).
   `.ip-sub` used to resolve to var(--bodylt) = #C7CEEA, which is the body ink
   for the DARK .ip-ribbon band below. On the white sections every page actually
   uses, that is 1.56:1 against a 4.5:1 AA bar: effectively invisible, and it
   had shipped that way since the component was written.
   `.ip-ribbon` is used on ZERO pages, and the only bare `.ip-sub` on the site
   was on /term-dates/, so the light ground is not the exception here, it is the
   only case. The default now serves it and the dark ground opts IN.
   `.ip-sub--light` is kept as a no-op alias because /computer-requirements/
   already carries it; that page is unchanged by this, verified by measurement.
   Same shape of bug as `.ip-btn` having no fill without `--primary`: a shared
   component whose default is the rare case. Found by scanning every computed
   colour for its contrast, not by looking at the page. */
.iws-ip .ip-sub{margin:14px 0 0;color:var(--ntx);font-size:1rem;line-height:1.7;max-width:720px;}
.iws-ip .ip-sub--light{color:var(--ntx);}
.iws-ip .ip-ribbon .ip-sub{color:var(--bodylt);}
/* grid, not flex: fr units divide the free space after gaps, so the bars stay
   exactly proportional to the week counts no matter how wide the labels are.
   minmax(0,Nfr) stops long words forcing a track wider than its share. */
.iws-ip .ip-band{display:grid;grid-template-columns:minmax(0,14fr) minmax(0,2fr) minmax(0,12fr) minmax(0,1fr) minmax(0,8fr);gap:8px;margin:36px 0 0;align-items:stretch;}
.iws-ip .ip-seg{min-width:0;border-radius:14px;padding:18px 14px;display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;opacity:0;transform:translateY(10px);animation:tdIn .5s cubic-bezier(.22,.61,.36,1) forwards;}
.iws-ip .ip-seg--term{background-image:linear-gradient(180deg,#13266B 0%,#0A1776 100%);border:1px solid rgba(207,224,255,.22);}
.iws-ip .ip-seg--break{background-image:linear-gradient(180deg,rgba(207,224,255,.10) 0%,rgba(207,224,255,.04) 100%);border:1px dashed rgba(207,224,255,.34);padding:18px 8px;}
.iws-ip .ip-seg-t{font-family:Sora,Inter,sans-serif;font-weight:700;color:#FFFFFF;font-size:1rem;overflow-wrap:anywhere;}
.iws-ip .ip-seg--break{justify-content:center;align-items:center;}
.iws-ip .ip-seg-w{font-size:.86rem;color:var(--bodylt);margin-top:4px;}
/* screen-reader-only: a 1/37 column is about 30px wide, so no label can fit
   inside a break bar. The bars stay silent and proportional; the legend and the
   table below carry the names and dates. */
.iws-ip .ip-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.iws-ip .ip-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:18px 0 0;font-size:.9rem;color:var(--bodylt);}
.iws-ip .ip-legend span{display:inline-flex;align-items:center;gap:8px;}
.iws-ip .ip-key{width:26px;height:12px;border-radius:8px;flex:0 0 auto;}
.iws-ip .ip-key--term{background-image:linear-gradient(180deg,#13266B 0%,#0A1776 100%);border:1px solid rgba(207,224,255,.22);}
.iws-ip .ip-key--break{background-image:linear-gradient(180deg,rgba(207,224,255,.10) 0%,rgba(207,224,255,.04) 100%);border:1px dashed rgba(207,224,255,.34);}
/* the theme prints its own H1 in .top_heading; this page supplies its own hero
   H1, and two visible H1s is a duplicate-heading defect. Page-scoped file, so
   this only ever affects /term-dates/. */
.top_heading{display:none;}
.iws-ip .ip-foot{margin:22px 0 0;font-size:.95rem;color:var(--peri);font-family:Sora,Inter,sans-serif;}
@keyframes tdIn{to{opacity:1;transform:none;}}
/* table */
.iws-ip .ip-table-wrap{padding:72px 0;background-color:#F8FAFC;}
.iws-ip .ip-table-wrap h2{font-size:clamp(24px,3vw,34px);margin-bottom:26px;}
.iws-ip .ip-scroll{overflow-x:auto;border-radius:22px;border:1px solid var(--nbd);background-color:#FFFFFF;}
.iws-ip .ip-table{width:100%;border-collapse:collapse;min-width:640px;}
.iws-ip .ip-cap{text-align:left;padding:18px 22px 0;font-size:.9rem;color:var(--ntx);caption-side:top;}
.iws-ip .ip-table th,.iws-ip .ip-table td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--nbd);font-size:1rem;}
.iws-ip .ip-table thead th{font-family:Sora,Inter,sans-serif;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ntx);background-color:#F8FAFC;}
.iws-ip .ip-table tbody th{font-family:Sora,Inter,sans-serif;font-weight:700;color:var(--r);}
.iws-ip .ip-table tbody tr.is-break th{color:var(--amberink);font-weight:600;}
.iws-ip .ip-table tbody tr.is-break td{color:var(--ntx);}
.iws-ip .ip-table tfoot th{font-family:Sora,Inter,sans-serif;color:var(--r);}
.iws-ip .ip-table tfoot td{font-family:Sora,Inter,sans-serif;font-weight:700;color:var(--r);}
.iws-ip .ip-table tfoot tr:first-child th,.iws-ip .ip-table tfoot tr:first-child td{border-top:2px solid var(--nbd);}
/* what happens when */
.iws-ip .ip-when{padding:76px 0;background-color:#FFFFFF;}
.iws-ip .ip-when h2{font-size:clamp(24px,3vw,34px);}
.iws-ip .ip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px;}
.iws-ip .ip-card{border:1px solid var(--nbd);border-radius:14px;padding:26px 24px;background-image:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);}
.iws-ip .ip-card h3{font-size:1.1rem;margin-bottom:14px;}
.iws-ip .ip-card ul{list-style:none;margin:0;padding:0;}
.iws-ip .ip-card li{padding:11px 0;border-top:1px solid var(--nbd);display:flex;flex-direction:column;gap:2px;}
.iws-ip .ip-card li:first-child{border-top:0;padding-top:0;}
.iws-ip .ip-card b{font-family:Sora,Inter,sans-serif;font-size:.88rem;font-weight:700;color:var(--ink);}
.iws-ip .ip-card span{font-size:.92rem;color:var(--ntx);}
/* note */
.iws-ip .ip-note{padding:72px 0;background-color:#F8FAFC;}
.iws-ip .ip-note h2{font-size:clamp(24px,3vw,32px);max-width:720px;}
.iws-ip .ip-note p{max-width:720px;margin:16px 0 0;font-size:1.03rem;line-height:1.76;}
.iws-ip .ip-meta{font-size:.9rem;color:var(--ntx);margin-top:22px;}
/* end cta */
.iws-ip .ip-end{padding:76px 0 84px;background-image:linear-gradient(160deg,#070D2E 0%,#13266B 100%);text-align:center;}
.iws-ip .ip-end h2{color:#FFFFFF;font-size:clamp(24px,3vw,34px);}
.iws-ip .ip-end p{color:#EAF1FF;margin:14px auto 0;max-width:620px;font-size:1.04rem;line-height:1.7;}
@media (max-width:900px){
  /* 4.3b: a marked phrase must never wrap, and where the headline runs to more
     than one line the mark starts its own line at the width of its own text.
     Inline, "Three terms, 34 teaching weeks" broke after "34" at 390px. */
  /* h1 joined h2 on 31 Jul: /welcome/ is the first page in this component to
     carry the marker on its H1, and the h2-only selector left "IWS Online
     School" wrapping mid-mark at 390px — the exact fault this rule exists to
     stop. Third time this has been scoped too narrowly; the lesson stands. */
  .iws-ip h1 .hl,
  .iws-ip h2 .hl{display:block;width:-webkit-max-content;width:max-content;max-width:100%;margin-top:.18em;}
  .iws-ip .ip-ribbon h2{font-size:clamp(23px,6vw,30px);}
  .iws-ip .ip-when h2{font-size:clamp(23px,6vw,30px);}
  .iws-ip .ip-grid{grid-template-columns:minmax(0,1fr);}
  .iws-ip .ip-band{grid-template-columns:minmax(0,1fr);}
  .iws-ip .ip-seg{min-height:0;padding:16px;}
  .iws-ip .ip-seg--break{min-height:44px;}
  .iws-ip .ip-hero{padding:56px 0 44px;}
}
@media (prefers-reduced-motion:reduce){
  .iws-ip .ip-seg{animation:none;opacity:1;transform:none;}
  .iws-ip .ip-btn{transition:none;}
  .iws-ip .ip-btn:hover{transform:none;}
}

/* ==========================================================================
   /computer-requirements/  —  the Three-Tick Test
   ========================================================================== */
.iws-ip .cr-ticks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px;}
.iws-ip .cr-tick{border:1px solid var(--nbd);border-radius:14px;padding:28px 24px;background-image:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);}
.iws-ip .cr-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background-image:linear-gradient(135deg,#B45309 0%,#7C2D12 100%);color:#FFFFFF;font-family:Sora,Inter,sans-serif;font-weight:700;font-size:1rem;margin-bottom:16px;}
.iws-ip .cr-tick h3{font-size:1.08rem;margin-bottom:10px;}
.iws-ip .cr-tick p{font-size:.97rem;line-height:1.68;color:var(--ntx);}
.iws-ip .cr-note{margin-top:12px;font-size:.9rem;color:var(--amberink);font-family:Sora,Inter,sans-serif;font-weight:600;}
.iws-ip .cr-truths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px;}
.iws-ip .cr-truth{border-left:3px solid var(--amber);border-radius:0 14px 14px 0;padding:4px 0 4px 20px;}
.iws-ip .cr-truth h3{font-size:1.02rem;margin-bottom:8px;}
.iws-ip .cr-truth p{font-size:.96rem;line-height:1.68;color:var(--ntx);}
.iws-ip .cr-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:30px;}
.iws-ip .cr-tab{border:1px solid var(--nbd);border-radius:14px;padding:26px 24px;background-color:#FFFFFF;}
.iws-ip .cr-tab h3{font-size:1.06rem;margin-bottom:12px;}
.iws-ip .cr-tab ul{margin:0;padding-left:20px;}
.iws-ip .cr-tab li{margin:0 0 9px;font-size:.97rem;line-height:1.62;color:var(--ntx);}
.iws-ip .cr-tab li:last-child{margin-bottom:0;}
.iws-ip .cr-yes{color:var(--r);font-weight:700;}
.iws-ip .cr-no{color:var(--amberink);font-weight:700;}
@media (max-width:900px){
  .iws-ip .cr-ticks,.iws-ip .cr-truths,.iws-ip .cr-tabs{grid-template-columns:minmax(0,1fr);}
}

/* ==========================================================================
   /welcome/  —  the letter block. Added 31 Jul 2026.
   The welcome is Matt Vickery's, not Cigdem's (Burak, 31 Jul), and the text is
   the one already written and signed off in the prospectus, reproduced verbatim.
   Radii 14/22/999 only (R4). Gradients between named tokens (R5). transform and
   opacity only (R6). Container 1180px inherited from .iws-ip .in (R7).
   ========================================================================== */
.iws-ip .ip-letter{padding:76px 0 80px;background-color:#FFFFFF;}
.iws-ip .lt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;}

/* The portrait sits in a rounded, tinted well rather than floating on white:
   the source is shot on a near-white studio ground, so on a white page the
   shoulders simply dissolve into nothing and the figure reads as a cut-out
   accident. A 22px well gives the photograph an edge to end on. */
/* display:flex, and it is load-bearing. The <figure> holds the <img> plus the
   newlines around it, and in normal flow that whitespace forms an anonymous
   line box: measured 29px of pale gradient showing BELOW the photograph, which
   read as the image failing to fill its well. A flex container ignores
   whitespace between items. Same cause as the signature gap below. */
.iws-ip .lt-fig{margin:0;border-radius:22px;overflow:hidden;display:flex;
  background-image:linear-gradient(165deg,#EAF1FF 0%,#CFE0FF 100%);
  border:1px solid var(--nbd);}
.iws-ip .lt-fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 12%;}

.iws-ip .lt-body p{margin:0 0 20px;font-size:1.07rem;line-height:1.78;color:var(--ink);}
.iws-ip .lt-body p:first-child{font-size:1.16rem;line-height:1.7;color:var(--r);}
.iws-ip .lt-body p:last-of-type{margin-bottom:0;}

/* The signature is a rule plus two lines, the same device the prospectus uses,
   so print and web sign off identically. */
/* flex column for the same reason: two display:block spans with a newline
   between them measured 31px apart against the 4px asked for. */
.iws-ip .lt-sig{margin-top:30px;padding-top:22px;border-top:1px solid var(--nbd);
  display:flex;flex-direction:column;}
.iws-ip .lt-name{display:block;font-family:Sora,Inter,sans-serif;font-weight:700;font-size:1.06rem;color:var(--r);}
.iws-ip .lt-role{display:block;margin-top:4px;font-size:.94rem;color:var(--ntx);}

@media (max-width:900px){
  .iws-ip .ip-letter{padding:52px 0 56px;}
  .iws-ip .lt-grid{grid-template-columns:minmax(0,1fr);gap:30px;}
  .iws-ip .lt-fig{max-width:340px;}
}

/* ==========================================================================
   TERM DATES, rebuilt 1 Aug 2026 to the page bar Burak set the same day:
   "make sure to use svg or graphics for some stuff and make the pages
   sectioned and organised... plan how the page needs to look so its
   interactive and readable".

   The old page was 647 words with 0 images, 0 SVG and 0 interactive elements,
   and its opening paragraph restated in prose what the table below it already
   showed. Facts now carry themselves: the year is a to-scale ribbon, the terms
   are cards, assessment is a repeating timeline, and the wellbeing programme
   reuses .iwsq__year from iws-sections.css rather than a second component (R1).

   R4 radii 8 / 14 / 22 / 999. R5 every gradient stop a named token.
   R6 transform and opacity only. R7 container 1180px.
   ========================================================================== */

/* ---- hero stat chips ---- */
.ip-stats{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0}
.ip-stats li{display:flex;flex-direction:column;gap:3px;flex:1 1 150px;
  background:linear-gradient(180deg,#FFFFFF 0%,#EAF1FF 100%);
  border:1px solid #E2E8F0;border-radius:14px;padding:13px 16px}
.ip-stats b{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;color:#0A1776;line-height:1.1;font-feature-settings:"tnum"}
.ip-stats span{font-size:12.5px;color:#475569;line-height:1.35}

/* ---- THE RIBBON. The centrepiece: one horizontal scale, four stacked tracks.
   Bar geometry is computed in gen_td.py from the real dates as left/width
   percentages, so a band's width IS the length of the thing it describes.
   Below 1000px it scrolls inside its own box rather than squashing, which is
   the site rule for wide content: the page body never scrolls sideways. ---- */
.tdr{margin:26px 0 0}
.tdr__scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px}
.tdr__inner{min-width:860px;position:relative}
.tdr__months{list-style:none;position:relative;height:26px;margin:0 0 10px;padding:0}
.tdr__months li{position:absolute;top:0;font-family:'Sora',sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#475569;
  border-left:1px solid #E2E8F0;padding:3px 0 0 7px;height:22px}
.tdr__months i{font-style:normal;opacity:.55;margin-left:3px}
.tdr__tname{margin:0 0 5px;font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#0A1776}
.tdr__track{list-style:none;position:relative;height:38px;margin:0 0 16px;padding:0;
  background:linear-gradient(180deg,#F8FAFC 0%,#EAF1FF 100%);border-radius:8px}
.tdr__bar{position:absolute;top:5px;height:28px;border-radius:8px;display:flex;
  align-items:center;padding:0 8px;overflow:visible;
  transition:transform 160ms cubic-bezier(.22,.61,.36,1),filter 160ms cubic-bezier(.22,.61,.36,1)}
.tdr__bar:hover,.tdr__bar:focus-within{transform:translateY(-2px);filter:saturate(1.15);z-index:4}
.tdr__lab{font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Only the three term bands are wide enough to hold a label. On every other
   band the text ellipsised to "A..." / "W...", which reads as a rendering
   fault. The label stays in the DOM for crawlers and screen readers, and the
   tooltip carries it visually. */
.tdr__bar:not(.tdr__bar--term) .tdr__lab{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* white on Royal is about 15:1, and on the amber pair the LIGHTEST stop
   (#B45309, 5.02:1) sets the limit, which is the test in IWS_DESIGN.md 3.5 */
.tdr__bar--term{background-image:linear-gradient(90deg,#0A1776 0%,#0067E0 100%)}
.tdr__bar--break{background-image:linear-gradient(90deg,#CFE0FF 0%,#EAF1FF 100%);border:1px solid #CFE0FF}
.tdr__bar--boot{background-image:linear-gradient(90deg,#D97706 0%,#B45309 100%);top:9px;height:20px}
.tdr__bar--assess{background-image:linear-gradient(90deg,#B45309 0%,#7C2D12 100%);top:9px;height:20px}
.tdr__bar--mock{background-image:linear-gradient(90deg,#7C2D12 0%,#B45309 100%);top:9px;height:20px}
.tdr__bar--meet{background-image:linear-gradient(90deg,#0067E0 0%,rgba(0,103,224,.55) 100%);top:9px;height:20px}
.tdr__bar--well{background-image:linear-gradient(90deg,#CFE0FF 0%,rgba(0,103,224,.45) 100%);top:11px;height:16px;border-radius:999px}
/* the tooltip carries the full label and dates, so a band that is too narrow
   to hold text is still readable; it is real DOM text, not a title attribute,
   so it is crawlable and works on touch via :focus-within */
.tdr__tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:6;
  display:flex;flex-direction:column;gap:2px;min-width:150px;
  padding:9px 12px;border-radius:8px;
  background-image:linear-gradient(180deg,#0A1776 0%,#070D2E 100%);
  color:#fff;font-size:12.5px;line-height:1.35;font-weight:600;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 140ms cubic-bezier(.22,.61,.36,1),visibility 140ms}
.tdr__tip em{font-style:normal;font-weight:400;color:#C7CEEA;font-feature-settings:"tnum"}
.tdr__bar:hover .tdr__tip,.tdr__bar:focus-within .tdr__tip{opacity:1;visibility:visible}
.tdr__key{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 0;padding:0}
.tdr__key li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#475569}
.tdr .ip-note{margin-top:12px}
.tdr__key .k{width:16px;height:10px;border-radius:999px;flex:none}
.k--term{background-image:linear-gradient(90deg,#0A1776 0%,#0067E0 100%)}
.k--break{background-image:linear-gradient(90deg,#CFE0FF 0%,#EAF1FF 100%);border:1px solid #CFE0FF}
.k--boot{background-image:linear-gradient(90deg,#D97706 0%,#B45309 100%)}
.k--assess{background-image:linear-gradient(90deg,#B45309 0%,#7C2D12 100%)}
.k--mock{background-image:linear-gradient(90deg,#7C2D12 0%,#B45309 100%)}
.k--meet{background-image:linear-gradient(90deg,#0067E0 0%,rgba(0,103,224,.55) 100%)}
.k--well{background-image:linear-gradient(90deg,#CFE0FF 0%,rgba(0,103,224,.45) 100%)}

/* ---- the calendar file, and the ribbon's footnote sitting beside it.
   A term-dates page's actual job is planning (page-design.md:514 asked for
   "a planning tool rather than a date list"), and the first rebuild shipped
   without the one thing that serves it. ---- */
.ip-util{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:14px 0 0}
.ip-dl{display:inline-flex;align-items:center;gap:9px;flex:none;
  font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#0A1776;text-decoration:none;
  padding:11px 18px;border-radius:999px;border:1px solid #CFE0FF;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#EAF1FF 100%);
  transition:transform 160ms cubic-bezier(.22,.61,.36,1),border-color 160ms cubic-bezier(.22,.61,.36,1)}
.ip-dl:hover,.ip-dl:focus-visible{transform:translateY(-2px);border-color:#0067E0;color:#0A1776}
.ip-dl:focus-visible{outline:2px solid #0067E0;outline-offset:2px}
.ip-dl svg{width:15px;height:15px;flex:none;color:#0067E0}
.ip-util__n{font-size:12.5px;line-height:1.45;color:#475569;flex:1 1 260px}

/* ---- TERM CARDS. One card per term carrying EVERYTHING that happens inside
   it, in date order. This ONE section replaced THREE (term dates + assessment
   rhythm + parent meeting weeks), which is what fixed the fault Burak rejected
   on 1 Aug: the ribbon drew the year, then four consecutive 3-column grids
   drew it again, 2,213px of a 4,017px page on the same visual beat.
   The dot colours are the ribbon's own key colours, so a card reads the
   ribbon BACK rather than repeating it. ---- */
.tdt__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 0;padding:0}
.tdt{display:flex;flex-direction:column;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
  border:1px solid #E2E8F0;border-radius:22px;padding:24px}
.tdt__hd{padding:0 0 16px;border-bottom:1px solid #E2E8F0;margin:0 0 18px}
.tdt__n{margin:0 0 7px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-family:'Sora',sans-serif;font-size:20px;font-weight:800;color:#0A1776}
.tdt__n em{font-style:normal;font-weight:700;font-size:11.5px;color:#B45309;
  letter-spacing:.1em;text-transform:uppercase}
.tdt__d{margin:0 0 4px;font-size:15.5px;color:#0A1776;font-weight:600;font-feature-settings:"tnum"}
.tdt__w{margin:0;font-size:13.5px;color:#475569}
.tdt__w b{font-family:'Sora',sans-serif;font-size:16px;color:#0A1776;font-weight:800}
.tdt__line{list-style:none;margin:0;padding:0;flex:1 1 auto}
.tdt__ev{position:relative;padding:0 0 15px 21px;border-left:2px solid #CFE0FF}
.tdt__ev:last-child{padding-bottom:0;border-left-color:transparent}
.tdt__ev::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;
  border-radius:999px;background-image:linear-gradient(160deg,#CFE0FF 0%,rgba(0,103,224,.45) 100%)}
.tdt__ev--boot::before{background-image:linear-gradient(160deg,#D97706 0%,#B45309 100%)}
.tdt__ev--assess::before{background-image:linear-gradient(160deg,#B45309 0%,#7C2D12 100%)}
.tdt__ev--mock::before{background-image:linear-gradient(160deg,#7C2D12 0%,#B45309 100%)}
.tdt__ev--meet::before{background-image:linear-gradient(160deg,#0067E0 0%,rgba(0,103,224,.55) 100%)}
.tdt__ev--mark::before{background-image:linear-gradient(160deg,#0A1776 0%,#0067E0 100%)}
.tdt__k{display:block;font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;color:#0A1776}
.tdt__v{display:block;font-size:13px;color:#475569;margin-top:2px;font-feature-settings:"tnum"}
/* the break that follows the term, pinned to the foot of the card so all
   three land on one line however tall the timelines above them run */
.tdt__brk{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:18px 0 0;padding:13px 16px;border-radius:14px;
  background-image:linear-gradient(180deg,#EAF1FF 0%,#CFE0FF 100%)}
.tdt__brk b{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:800;color:#0A1776}
.tdt__brk span{font-size:13px;color:#0A1776;font-feature-settings:"tnum"}
.tdt__brk--end{background-image:linear-gradient(180deg,#F8FAFC 0%,#EAF1FF 100%)}

/* ---- WELLBEING, grouped chip bands. Was a 3-column grid of dated lists at
   713px, the fourth identical grid in a row. Bands read horizontally, which
   is a different shape from everything above them, and the section now fits
   in roughly a third of the height for the same 16 fortnights. ---- */
.tdw{margin:24px 0 0}
.tdw__t{margin:0 0 11px;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#0A1776}
.tdw__t em{font-style:normal;font-weight:600;color:#475569;letter-spacing:.06em}
.tdw__row{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px;padding:0}
.tdw__row:last-child{margin-bottom:0}
.tdw__chip{display:flex;align-items:baseline;gap:9px;padding:9px 16px;border-radius:999px;
  border:1px solid #CFE0FF;background-image:linear-gradient(180deg,#FFFFFF 0%,#EAF1FF 100%)}
.tdw__chip b{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;color:#0A1776}
.tdw__chip span{font-size:12.5px;color:#475569;font-feature-settings:"tnum";white-space:nowrap}

/* ---- questions. <details> so every answer is in the DOM for crawlers even
   when the panel is shut: nothing here is injected by JavaScript. ---- */
.ip-qs{display:grid;gap:10px;margin:22px 0 0}
.ip-q{background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);border:1px solid #E2E8F0;
  border-radius:14px;overflow:hidden}
.ip-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 18px;font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:#0A1776}
.ip-q summary::-webkit-details-marker{display:none}
.ip-q summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid #0067E0;
  border-bottom:2px solid #0067E0;transform:rotate(45deg) translateY(-2px);
  transition:transform 200ms cubic-bezier(.22,.61,.36,1)}
.ip-q[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.ip-q summary:focus-visible{outline:2px solid #0067E0;outline-offset:-2px}
.ip-q > div{padding:0 18px 18px}
.ip-q p{margin:0;font-size:15px;line-height:1.62;color:#475569}

@media(max-width:900px){
  .tdt__grid{grid-template-columns:1fr}
  .ip-stats li{flex:1 1 100%}
}
@media(max-width:560px){
  .tdr__inner{min-width:700px}
  .ip-q summary{font-size:15px}
  .tdw__chip{flex:1 1 100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .tdr__bar,.tdr__tip,.ip-q summary::after,.ip-dl{transition:none}
  .tdr__bar:hover,.tdr__bar:focus-within,.ip-dl:hover,.ip-dl:focus-visible{transform:none}
}

/* ⚠️ .ip-block, NOT .ip-seg. `.ip-seg` was ALREADY TAKEN in this component: it
   is the term BAND inside the old year-bands widget, and it carries
   min-height:132px, justify-content:flex-end, border-radius:14px and
   `opacity:0` with a `tdIn` entrance animation. Reusing it as a page-section
   wrapper on 1 Aug 2026 silently gave six full-width sections all of that,
   including shipping them at opacity 0 — the exact bug class cleared off this
   site the day before. Measured on the rendered page, not guessed.
   Same lesson as `.ph` meaning "page hero" and being reused for "photo".
   CHECK A CLASS NAME IS FREE BEFORE REUSING IT INSIDE A SHARED COMPONENT. */
.iws-ip .ip-block{padding:62px 0;}
.iws-ip .ip-block--tint{background-image:linear-gradient(180deg,#FFFFFF 0%,#EAF1FF 100%);}
.iws-ip .ip-block > .in{max-width:1180px;margin:0 auto;padding:0 24px;}
@media(max-width:760px){.iws-ip .ip-block{padding:44px 0;}}

/* ==========================================================================
   THE LIVE DEVICE CHECK  (/computer-requirements/, 1 Aug 2026)

   Replaces the old "three checks, about two minutes" section rather than
   sitting next to it: that section asked the parent to go and check three
   things the browser can simply report. Same structural move as the
   /term-dates/ rebuild, where one section absorbed three.

   Every row is server-rendered with its manual instruction already in place,
   so with JavaScript off this is still a complete checklist. iws-infopage.js
   only replaces text and sets data-state.

   THREE STATES, NO RED. ok / watch / unknown. And each badge carries a WORD
   as well as a colour, because a status told by colour alone is not a status.
   ========================================================================== */
.crx{margin:26px 0 0;border:1px solid #E2E8F0;border-radius:22px;overflow:hidden;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%)}
.crx__head{padding:22px 24px 18px;border-bottom:1px solid #E2E8F0;
  background-image:linear-gradient(180deg,#EAF1FF 0%,#FFFFFF 100%)}
.crx__t{margin:0;display:flex;align-items:center;gap:10px;
  font-family:'Sora',sans-serif;font-size:17px;font-weight:800;color:#0A1776}
.crx__t svg{width:18px;height:18px;flex:none;color:#0067E0}
.crx__p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#475569}

.crx__rows{list-style:none;margin:0;padding:0}
.crx__row{display:grid;grid-template-columns:170px minmax(0,1fr) auto;align-items:baseline;
  gap:8px 18px;padding:15px 24px;border-bottom:1px solid #E2E8F0}
.crx__k{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#0A1776}
.crx__v{font-size:13.5px;line-height:1.55;color:#475569}
.crx__badge{justify-self:end;white-space:nowrap;padding:5px 12px;border-radius:999px;
  font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  border:1px solid #E2E8F0;color:#475569;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%)}
/* Royal for ready, amber-ink for worth-checking, slate for not-reported.
   #B45309 is 5.02:1 on white and is the TEXT amber; #D97706 would be 3.19:1
   and is objects-only, per IWS_DESIGN.md 3.5. */
.crx__row[data-state="ok"] .crx__badge{color:#0A1776;border-color:#CFE0FF;
  background-image:linear-gradient(180deg,#EAF1FF 0%,#CFE0FF 100%)}
.crx__row[data-state="watch"] .crx__badge{color:#B45309;border-color:rgba(217,119,6,.35);
  background-image:linear-gradient(180deg,#FFFFFF 0%,rgba(217,119,6,.12) 100%)}
.crx__row[data-state="unknown"] .crx__badge{color:#475569}

.crx__sum{margin:0;padding:18px 24px;font-size:14.5px;line-height:1.6;color:#0A1776;
  font-weight:600;border-bottom:1px solid #E2E8F0;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#EAF1FF 100%)}
.crx__self{list-style:none;margin:0;padding:18px 24px 22px}
.crx__self > p{margin:0 0 12px;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#475569}
.crx__self li{position:relative;padding:0 0 12px 24px}
.crx__self li:last-child{padding-bottom:0}
.crx__self li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;
  border-radius:999px;border:2px solid #CFE0FF}
.crx__self b{display:block;font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;color:#0A1776}
.crx__self span{display:block;font-size:13px;line-height:1.55;color:#475569;margin-top:2px}

@media(max-width:700px){
  .crx__row{grid-template-columns:minmax(0,1fr) auto}
  .crx__k{grid-column:1}
  .crx__badge{grid-row:1;grid-column:2}
  .crx__v{grid-column:1 / -1}
}

/* ==========================================================================
   REDESIGN, 1 Aug 2026: colour, owned imagery, calm motion.
   Burak: the pages read "super white", no owned assets, no wow. Recon backed
   it with numbers (99% / 92% / 84% white) and three sources agreed on the fix:
   King's InterHigh (colour as rounded cards inset on white; hero = one card
   with a dark statement zone and a pale trust strip), Minerva (one gradient
   family opening and closing a page makes it one canvas), and the IWS
   homepage itself, whose hero is real students on Deep Navy -> Navy Glow.
   Everything here extends the existing .iws-ip component family (R1), radius
   22/14/999 (R4), every stop a named token or a token at alpha (R5, homepage
   dome precedent), transform+opacity only (R6), container 1180 (R7).
   ========================================================================== */

/* ---- THE HERO CARD. A 22px card inside the container: navy statement zone
   with a real student photograph, then a pale strip carrying the stats or
   trust marks, all one object. The photo is owned (the school's own shoot),
   single student, never one already used elsewhere on the site. ---- */
.iws-ip .ip-hero--card{background:none;padding:34px 0 8px}
.ip-hc{border-radius:22px;overflow:hidden;
  background-image:linear-gradient(160deg,#070D2E 0%,#13266B 100%);
  animation:iphcIn .48s cubic-bezier(.22,.61,.36,1) both}
@keyframes iphcIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.ip-hc{animation:none}}
.ip-hc__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.ip-hc__body{padding:54px 52px 44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
/* .iws-ip prefix is LOAD-BEARING: .iws-ip .ip-hero h1 is (0,2,1) and the card
   keeps the base .ip-hero class, so an unprefixed rule here silently loses and
   the card renders at 34-54px instead. Caught by QA measuring computed size. */
.iws-ip .ip-hc__body h1{color:#fff;font-size:clamp(30px,3.6vw,44px)}
/* Sora 800 runs wide: "Online School" needs ~265px at 30px against a 260px
   column at 360px viewport, so the mark wraps, which 4.3b forbids. A 27px
   floor under 400px clears it on every common phone width without touching
   the wording. Measured, not estimated. */
@media(max-width:400px){.iws-ip .ip-hc__body h1{font-size:27px}}
/* the marked phrase in a hero-card h1 takes its own line, flush left, hung by
   its own padding (4.3b): the card body is narrow enough that an inline mark
   wraps mid-phrase at desktop widths, which 4.3b forbids outright */
.ip-hc__body h1 .hl{display:block;width:fit-content;margin-left:-.26em}
.ip-hc__body .ip-lede{color:#C7CEEA}
.ip-hc__media{position:relative;min-height:430px}
.ip-hc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ip-hc__media::before{content:"";position:absolute;top:0;bottom:0;left:0;width:90px;z-index:1;
  background-image:linear-gradient(90deg,rgba(7,13,46,.5) 0%,rgba(7,13,46,0) 100%)}
.ip-hc__logos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:30px 0 0}
.ip-hc__logos img{height:38px;width:auto;opacity:.92}
.ip-hc__strip{border-top:1px solid rgba(207,224,255,.35);
  background-image:linear-gradient(90deg,#EAF1FF 0%,#F8FAFC 100%)}
.ip-hc__strip .ip-stats{margin:0;padding:16px 26px;gap:0}
.ip-hc__strip .ip-stats li{background:none;border:none;border-radius:0;padding:6px 26px;
  border-left:1px solid rgba(10,23,118,.12)}
.ip-hc__strip .ip-stats li:first-child{border-left:none}
@media(max-width:920px){
  .ip-hc__grid{grid-template-columns:1fr}
  .ip-hc__body{padding:40px 26px 34px}
  .ip-hc__media{min-height:0;aspect-ratio:16/10}
  .ip-hc__media img{object-position:50% 22%}
  .ip-hc__media::before{display:none}
  .ip-hc__strip .ip-stats li{flex:1 1 100%;border-left:none;border-top:1px solid rgba(10,23,118,.1);padding:10px 4px}
  .ip-hc__strip .ip-stats li:first-child{border-top:none}
}

/* ---- THE NAVY BAND. One per page, mid or late, never adjacent to another
   dark section (IWS_DESIGN 9: "occasional dark or Royal Blue moments"). The
   markup also carries .on-dark so the marker and eyebrow invert themselves. */
.iws-ip .ip-block--navy{background-image:linear-gradient(160deg,#070D2E 0%,#13266B 100%)}
.iws-ip .ip-block--navy h2{color:#fff}
.iws-ip .ip-block--navy .ip-sub{color:var(--bodylt)}
.ip-block--navy .tdw__t{color:#CFE0FF}
.ip-block--navy .tdw__t em{color:#CFE0FF}
.ip-block--navy .tdw__chip{border-color:rgba(207,224,255,.32);
  background-image:linear-gradient(180deg,rgba(207,224,255,.16) 0%,rgba(207,224,255,.05) 100%)}
.ip-block--navy .tdw__chip b{color:#fff}
.ip-block--navy .tdw__chip span{color:#C7CEEA}
/* the CR truths, inverted on navy: same amber spine, light text */
.iws-ip .ip-when.ip-block--navy{background-image:linear-gradient(160deg,#070D2E 0%,#13266B 100%)}
.ip-block--navy .cr-truth h3{color:#fff}
.ip-block--navy .cr-truth p{color:#C7CEEA}

/* ---- THE FIGURE. Rounded image with a periwinkle offset frame behind it,
   for owned in-page imagery (the LMS screenshot, secondary photos). ---- */
.ip-fig{position:relative;margin:0}
.ip-fig img{display:block;width:100%;height:auto;border-radius:14px;position:relative;z-index:1;
  border:1px solid #E2E8F0}
.ip-fig::before{content:"";position:absolute;left:18px;top:18px;right:-14px;bottom:-14px;
  border-radius:14px;background-image:linear-gradient(160deg,#CFE0FF 0%,#EAF1FF 100%)}
.ip-fig figcaption{position:relative;z-index:1;margin:24px 0 0;font-size:13px;line-height:1.5;color:#475569}
/* two-column answer layout that carries the figure */
.ip-ans2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;margin:8px 0 0}
@media(max-width:920px){.ip-ans2{grid-template-columns:1fr;gap:34px}.ip-fig{margin-right:14px}}

/* ---- LIGHT CLOSING BAND: for a page whose rhythm already spent its navy. */
.iws-ip .ip-end--light{background-image:linear-gradient(160deg,#CFE0FF 0%,#EAF1FF 100%)}
.iws-ip .ip-end--light h2{color:#0A1776}
.iws-ip .ip-end--light p{color:#475569}
.iws-ip .ip-end--light .ip-btn--ghost{border-color:#0A1776;color:#0A1776}

/* ---- THE PILLARS (welcome): Clarity, Structure, Growth on the navy band. */
.ip-pill{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 0}
.ip-pill__it{border-radius:14px;padding:24px;border:1px solid rgba(207,224,255,.3);
  background-image:linear-gradient(180deg,rgba(207,224,255,.14) 0%,rgba(207,224,255,.05) 100%)}
.ip-pill__it b{display:block;font-family:'Sora',sans-serif;font-size:17px;font-weight:800;color:#fff;margin:0 0 8px}
.ip-pill__it p{margin:0;font-size:14px;line-height:1.62;color:#C7CEEA}
@media(max-width:900px){.ip-pill{grid-template-columns:1fr}}

/* ---- SECTION SETTLE. The hiding selector needs BOTH the html flag (JS only)
   AND the data attribute (JS only, below-fold only), so with JavaScript off,
   with RUCSS stripping, or with reduced motion, everything is simply visible.
   The section settles as ONE unit: R6 bans per-card stagger. ---- */
html.iwsip-motion .iws-ip [data-ipm]{opacity:0;transform:translateY(14px)}
html.iwsip-motion .iws-ip [data-ipm][data-ipm-in]{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){
  html.iwsip-motion .iws-ip [data-ipm]{opacity:1;transform:none;transition:none}
}


/* ── /term-dates/ third build, 3 Aug 2026. Ribbon removed. ────────────────── */

/* A band as a rounded inset panel rather than a full-bleed stripe.
   Reusable modifier, not a page-specific rule: this is the shape Burak asked
   for across the site ("round cornered sections not full sharp cornered"). */
.iws-ip .ip-block--round{padding:0;background:none}
.iws-ip .ip-block--round>.in{max-width:1180px;padding:0 24px}
.iws-ip .ip-block--round>.in>*{position:relative;z-index:1}
.iws-ip .ip-block--round>.in{
  --pad:56px;
}
.iws-ip .ip-block--round>.in::before{
  content:"";position:absolute;inset:0 24px;z-index:0;border-radius:22px;
  background-image:linear-gradient(160deg,var(--perilt) 0%,var(--nbg) 100%);
}
.iws-ip .ip-block--round>.in{padding:var(--pad) 48px;position:relative}
.iws-ip .ip-block--round>.in::before{inset:0}

/* ── the three term cards: the ribbon's replacement ───────────────────────── */
.iws-ip .ipy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.iws-ip .ipy__card{
  border:1px solid var(--nbd);border-radius:14px;padding:28px 26px 24px;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
  display:flex;flex-direction:column;
}
.iws-ip .ipy__season{
  font-family:Sora,Inter,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--s);margin:0 0 6px;
}
.iws-ip .ipy__name{font-size:1.5rem;margin:0}
.iws-ip .ipy__when{
  font-family:Sora,Inter,sans-serif;font-size:1.06rem;font-weight:600;
  color:var(--r);margin:12px 0 0;font-variant-numeric:tabular-nums;
}
.iws-ip .ipy__weeks{font-size:.94rem;color:var(--ntx);margin:4px 0 0}
.iws-ip .ipy__list{margin:20px 0 0;padding:0}
.iws-ip .ipy__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-top:1px solid var(--nbd);
}
.iws-ip .ipy__row dt{font-size:.95rem;color:var(--ink)}
.iws-ip .ipy__row dd{
  margin:0;flex:none;font-size:.9rem;color:var(--ntx);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.iws-ip .ipy__brk{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:2px 14px;
  margin:18px 0 0;padding:12px 16px;border-radius:8px;
  background-image:linear-gradient(160deg,var(--perilt) 0%,#FFFFFF 100%);
  font-size:.92rem;color:var(--r);font-weight:600;
}
.iws-ip .ipy__brk>span{white-space:nowrap}
.iws-ip .ipy__brk time{color:var(--ntx);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.iws-ip .ipy__card>.ipy__brk{margin-top:auto}

/* "you are here": the one thing the ribbon did that a list cannot */
.iws-ip .ipy__now{
  margin:16px 0 0;padding:10px 14px;border-radius:8px;
  border:1px solid var(--amber);color:var(--amberink);
  font-family:Sora,Inter,sans-serif;font-size:.86rem;font-weight:600;
}
.iws-ip .ipy__open{color:var(--bodylt);margin:18px 0 0;font-size:1rem;line-height:1.7}
.iws-ip .ipy__live{
  display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;padding:8px 15px;
  border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(207,224,255,.34);
  font-family:Sora,Inter,sans-serif;font-size:.85rem;font-weight:600;color:#FFF;
}
.iws-ip .ipy__live::before{
  content:"";width:7px;height:7px;border-radius:999px;flex:none;
  background-image:linear-gradient(160deg,var(--amber) 0%,var(--amberink) 100%);
}

/* ── the wellbeing year: quiet columns, no chips ──────────────────────────── */
.iws-ip .ipw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.iws-ip .ipw__col h3{font-size:1rem;margin:0 0 10px;color:var(--r)}
.iws-ip .ipw__col ul{list-style:none;margin:0;padding:0}
.iws-ip .ipw__col li{
  display:flex;gap:12px;align-items:baseline;padding:9px 0;
  border-top:1px solid var(--nbd);font-size:.93rem;color:var(--ink);
}
.iws-ip .ipw__d{
  flex:none;width:56px;color:var(--ntx);font-size:.84rem;
  font-variant-numeric:tabular-nums;
}

@media (max-width:900px){
  .iws-ip .ipy,.iws-ip .ipw{grid-template-columns:minmax(0,1fr)}
  /* keep a gutter so the 22px radius still reads against the page ground */
  .iws-ip .ip-block--round{padding:0 12px}
  .iws-ip .ip-block--round>.in{padding:38px 20px}
  .iws-ip .ip-block--round>.in::before{inset:0}
}
@media (prefers-reduced-motion:reduce){
  .iws-ip .ipy__card{animation:none}
}