/*
 * The only styling this copy adds.
 *
 * Everything else is the site's own CSS, inlined in the page exactly as the
 * server sent it. One rule has to be re-stated here because the Wix runtime
 * applied it as an inline style rather than through the stylesheet.
 */

/* A background <video> ships at opacity 0 and was faded in by the runtime once
 * it had attached a source and the file had buffered. The source is attached at
 * build time instead, so nothing is left to do the fade and the video would sit
 * invisible over its poster for ever. This is the runtime's end state, written
 * as a rule so it needs no script and no animation frame to take effect. */
video.X9nqm0 {
  opacity: 1;
}

/* The overlay's own CSS sizes it against --wix-ads-height, a variable the
 * runtime defined. Undefined, calc() invalidates the whole declaration and the
 * dialog loses its height. This restores the value the live site computes for a
 * site without the Wix ad banner. */
:root {
  --wix-ads-height: 0px;
}

/* Note: the navigation overlay's opacity is deliberately NOT forced here.
 * It starts at 0 and the stylesheet already raises it for
 * [data-animation-name="fadeIn"][data-animation-state="enterActive"|"enterDone"],
 * which is what the runtime set while opening. site.js sets those same
 * attributes, so the site's own fade runs. Forcing opacity from here would win
 * on specificity and snap the panel open with no animation. */

/* The five pillar headings on the home page are links into /services. They keep
 * the heading's own colour and weight, so the section reads exactly as before
 * until the pointer is on one. */
.ia-pillar-link{ color:inherit; text-decoration:none; }
.ia-pillar-link:hover{ text-decoration:underline; text-underline-offset:5px; }

/* ------------------------------------------------- extended top nav
 * The site's menu sits in a header grid cell that starts near the right edge
 * and was sized for two entries. With eight, the list needs more room than the
 * cell gives it.
 *
 * Absolute positioning alone was not enough: an ancestor inside the header is
 * itself positioned, so the menu resolved against that 307px cell rather than
 * the header, its max-width computed to about 67px, and every entry wrapped
 * onto its own line. The ancestors between the header and the menu are made
 * static so the header becomes the containing block, and the header is then
 * re-asserted as relative.
 */
/* The drawer is excluded. It also contains a menu-root nav, so without the
 * exclusion this rule strips the fixed positioning the site's own
 * stylesheet gives it, and the drawer's dim backdrop - inset:0 inside it -
 * then resolves against the 59px header instead of the viewport. The
 * restoration further down cannot win this on specificity: (0,2,2) here
 * against (0,1,1) there, both !important. */
header[id^="comp-"] *:has(nav[data-hook="menu-root"]):not([data-hook="hamburger-overlay-root"], [data-hook="hamburger-overlay-root"] *){ position:static !important; }
header[id^="comp-"]{ position:relative !important; }

header nav[data-hook="menu-root"]{
  position:absolute;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  width:max-content !important;
  max-width:calc(100% - 240px);   /* never run under the logo */
  z-index:5;
  /* The cloned nav ships overflow:auto, and its transform makes it the
   * containing block of every hover panel, so each panel was clipped to the
   * nav's own 30px strip: a white sliver under the menu, the rest cut off. */
  overflow:visible !important;
}
/* Unclipped, the panels then drew behind the page hero, whose content sits
 * at its own z-index. The header gets a level above the page. It is 104px of
 * its own box and every closed panel is pointer-events:none, so this covers
 * nothing a reader can click. */
#SITE_CONTAINER header[id^="comp-"]{ position:relative; z-index:100 }
header nav[data-hook="menu-root"] > ul{
  display:flex;
  flex-wrap:nowrap;               /* one row: wrapping is what broke it before */
  justify-content:flex-end;
  white-space:nowrap;
}

/* The hamburger panel's copy is a vertical list in a narrow drawer, so it must
 * keep the panel's own layout rather than the header's placement. */
[data-hook="hamburger-overlay-root"] nav[data-hook="menu-root"]{
  position:static;
  transform:none;
  max-width:none;
}
[data-hook="hamburger-overlay-root"] nav[data-hook="menu-root"] > ul{
  display:block;
  white-space:normal;
}

/* ---------------------------------------------------- hover panels
 * Each new top-level entry opens a panel listing what is inside it, which is
 * the navigation model the architecture asks for: Services as a mega menu of
 * pillar columns, the rest as dropdowns. Every entry in a panel is a link.
 *
 * The panel is positioned against the header, not the menu item, so a wide
 * Services panel is not trapped inside a narrow cell. It opens on hover and on
 * keyboard focus, so it is reachable without a pointer.
 */
header .ifmt-has-mega{ position:static !important; }

.ifmt-mega{
  position:absolute;
  top:100%;
  right:0;
  min-width:260px;
  background:#fff;
  border:1px solid #e2e9f0;
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,37,64,.16);
  padding:18px 20px;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none;            /* an invisible panel must not eat clicks */
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:60;
  text-align:left;
}
.ifmt-mega--wide{ left:24px; right:24px; min-width:0; }

header .ifmt-has-mega:hover > .ifmt-mega,
header .ifmt-has-mega:focus-within > .ifmt-mega{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
  transform:translateY(0);
}

.ifmt-mega-inner{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; }
.ifmt-mega--wide .ifmt-mega-inner > .ifmt-mega-col{ flex:1 1 180px; min-width:170px; }
.ifmt-mega-col{ display:flex; flex-direction:column; gap:2px; min-width:220px; }

.ifmt-mega-head{
  font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif;
  font-size:16px; color:#0a2540; text-decoration:none; font-weight:600;
  padding:4px 0 7px; margin-bottom:3px; border-bottom:1px solid #eef2f6;
  white-space:normal;
}
.ifmt-mega-head:hover{ color:#527b95; }

.ifmt-mega-col a:not(.ifmt-mega-head){
  display:block; padding:6px 8px; margin:0 -8px; border-radius:8px;
  font-size:16px; line-height:1.4; color:#443f4c; text-decoration:none;
  white-space:normal;
}
.ifmt-mega-col a:not(.ifmt-mega-head):hover{ background:#f2f7fb; color:#0a2540; }
.ifmt-mega-col a em{ display:block; font-style:normal; font-size:13px; color:#757575; }

.ifmt-mega-all{
  display:block; width:100%; margin-top:14px; padding-top:12px;
  border-top:1px solid #eef2f6; font-size:16px; color:#527b95; text-decoration:none;
}
.ifmt-mega-all:hover{ color:#0a2540; }

/* The list panels (everything but Services): as wide as their entries, each
 * entry a row with its page's mark, two columns past four entries. */
header .ifmt-mega--list{ min-width:0; width:max-content; max-width:calc(100vw - 32px); padding:10px 10px 8px }
.ifmt-mega--list .ifmt-mega-inner{ display:block }
.ifmt-mega-list{ display:grid !important; grid-template-columns:minmax(210px,max-content); gap:2px 6px; min-width:0 }
.ifmt-mega-list--2{ grid-template-columns:repeat(2,minmax(200px,max-content)) }
.ifmt-mega-col.ifmt-mega-list a{
  display:flex !important; align-items:center; gap:11px; margin:0 !important;
  padding:7px 12px 7px 7px !important; border-radius:8px !important; font-size:16px !important;
  color:#0a2540 !important; transition:background-color .12s ease;
}
.ifmt-mega-col.ifmt-mega-list a:hover,.ifmt-mega-col.ifmt-mega-list a:focus-visible{ background:#f2f7fb !important }
.ifmt-mega-col.ifmt-mega-list a:focus-visible{ outline:2px solid #0a2540; outline-offset:0 }
.ifmt-mega-thumb{
  flex:0 0 44px; width:44px; height:30px; border-radius:8px; object-fit:cover;
  background:#f2f7fb; border:1px solid #e2e9f0;
}
.ifmt-mega-thumb--tile{
  display:inline-flex; align-items:center; justify-content:center; font-style:normal;
  font:600 14px/1 Arial,sans-serif; color:#527b95;
}
.ifmt-mega--list .ifmt-mega-all{
  margin:8px 0 0; padding:9px 12px 4px; font-size:16px; color:#527b95; font-weight:600;
}
.ifmt-mega-all span{ display:inline-block; transition:transform .15s ease }
.ifmt-mega-all:hover span{ transform:translateX(3px) }
[data-hook="hamburger-overlay-root"] .ifmt-mega-thumb{ display:none }
[data-hook="hamburger-overlay-root"] .ifmt-mega-list{ display:block !important }
[data-hook="hamburger-overlay-root"] .ifmt-mega-col.ifmt-mega-list a{ padding:6px 8px !important; font-size:16px !important }

/* Inside the hamburger drawer the panel is not a hover affordance: it is the
   list itself, always open and indented under its section. */
[data-hook="hamburger-overlay-root"] .ifmt-mega{
  position:static; opacity:1 !important; visibility:visible !important;
  pointer-events:auto; transform:none;
  box-shadow:none; border:0; border-left:1px solid #e2e9f0; border-radius:0;
  padding:2px 0 10px 14px; margin:0 0 0 6px; min-width:0;
}
[data-hook="hamburger-overlay-root"] .ifmt-mega-inner{ display:block; }
[data-hook="hamburger-overlay-root"] .ifmt-mega-col{ min-width:0; }
[data-hook="hamburger-overlay-root"] .ifmt-mega-all{ display:none; }

@media (max-width:1000px){
  header .ifmt-mega{ display:none; }   /* the drawer takes over */
}

/* ------------------------------------------------ focus visibility
 * Measured on the deployed site: navigation links, hover-panel links, the
 * scorer's options and the primary button all computed `outline: none` when
 * focused, so a keyboard user could not see where they were. The site's own
 * stylesheet clears outlines broadly, which is why this has to win.
 *
 * :focus-visible rather than :focus, so a pointer click does not leave a ring
 * behind. The colour is the site's teal against both the white body and the
 * navy header, and the offset keeps it clear of the text.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #0a2540 !important;
  outline-offset:2px !important;
  border-radius:3px;
}

/* Colour by ground (design audit 2026-09-24). The teal ring measured 2.4:1 on
 * white and WCAG 2.2 AA asks 3:1 for a focus indicator, so the default is
 * navy (15.9:1 on white, 14.8:1 on the pale blue). The header is white too,
 * so it takes the default; the old pale ring there measured 1.2:1. Only the
 * navy grounds - the home hero and the closing band - keep a light ring (#c8edf5
 * on #0a2540 is 13.2:1). The footer went light on 2026-09-28 and takes the default. */
.hm-hero a:focus-visible,
.hm-cta a:focus-visible{
  outline-color:#c8edf5 !important;
}

/* A radio's ring should surround the whole option row, not the dot. */
.sc-opt:focus-within{
  outline:3px solid #0a2540;
  outline-offset:2px;
  border-radius:6px;
}
.sc-opt input:focus-visible{ outline:none !important; }

/* A stray "}" stood here until 2026-09-24. At top level the parser read it as
 * the start of the next rule's selector, so the drawer rule below was dropped
 * from the live stylesheet and the phone menu opened in normal page flow. */

/* The blanket "ancestors of the menu go static" rule above is aimed at the
 * DESKTOP menu's grid cell. The hamburger drawer also contains a menu-root
 * nav, so that rule stripped the drawer of its fixed positioning too, and a
 * full-height drawer in normal flow made the header 887px tall on a phone:
 * every page rendered as an empty screen with the content pushed below the
 * fold. The drawer's own positioning is restored here.
 */
header [data-hook="hamburger-overlay-root"]{
  position:fixed !important;
}
header #portal-comp-mbkgi2rg_r_comp-mbjosg2g1,
header [id^="portal-comp-"]{
  position:static !important;
  height:0 !important;      /* the portal must take no space in the header */
}

/* Visible to a screen reader, absent from the page. Used for a heading the
 * design never marked, so the clone keeps its exact appearance. Not
 * display:none and not visibility:hidden: both remove it from the
 * accessibility tree as well, which is the opposite of the point. */
.ifmt-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ------------------------------------------- the header between 1001 and 1150
 * The cloned header right-aligns its menu and lets it flex, but only down to
 * its natural width. With nine entries that floor is about 935px, and the
 * menu starts 212px in, so below roughly 1150 the last entry runs off the
 * right edge: measured 123px of it gone at 1024. The hamburger does not take
 * over until 1000, so there is no drawer to fall back on in that window and
 * the clipped entries are simply unreachable.
 *
 * The site's own CSS never hits this because it shipped with two entries.
 * Nine is ours, so the window is ours to close.
 *
 * Tightening the spacing rather than hiding anything, because every entry in
 * that list is a section of the site and dropping one silently is worse than
 * a slightly denser bar. The type size is left alone: shrinking nav text is
 * how a header becomes unreadable before it becomes narrow.
 */
@media (min-width:1001px) and (max-width:1150px){
  header ul.OD_PyT{ gap:0 !important }
  header ul.OD_PyT > li [data-part="menu-item-content"]{
    padding-left:5px !important; padding-right:5px !important;
  }
}

/* ---------------------------------------------- editorial (the /tools page)
 * Borrowed as a manner, not a look: numbered sections with a small mono
 * label, calm 32px headings, hairline tables, and a numbered index in the
 * hero. The site's own colours and fonts stay; the mono is the reader's
 * system face, so nothing new is downloaded. */
.ed-label{ font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ia-steel); margin:0 0 10px }
.ed-sec{ margin:0 0 44px }
.ed-sec h2{ font-size:32px; line-height:1.2; font-weight:500; color:var(--ia-navy); margin:0 0 18px }
.ed-sec--cards{ margin-bottom:18px }
.ed-index{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 26px }
.ia-hero .ed-index a{ color:rgba(255,255,255,.72) !important; text-decoration:none; font-size:14.5px; display:inline-flex; gap:8px;
  padding:4px 0; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease }
.ia-hero .ed-index a span{ font:500 12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:rgba(255,255,255,.45) }
.ia-hero .ed-index a:hover{ color:#fff !important; border-bottom-color:rgba(255,255,255,.4) }
.ed-index a:focus-visible{ outline:2px solid #c8edf5; outline-offset:3px }
.ed-tablebox{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.ed-table{ width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; line-height:1.5 }
.ed-table thead th{ text-align:left; font:500 11.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ia-steel); padding:0 16px 12px 0;
  border-bottom:1px solid var(--ia-navy) }
.ed-table tbody th,.ed-table td{ text-align:left; vertical-align:top; padding:16px 16px 16px 0;
  border-bottom:1px solid rgba(10,37,64,.14); color:var(--ia-ink) }
.ed-table tbody th{ font-weight:600; white-space:nowrap }
.ed-table tbody th a{ color:var(--ia-navy); text-decoration:none; border-bottom:1px solid rgba(10,37,64,.25) }
.ed-table tbody th a:hover{ border-bottom-color:var(--ia-navy) }
.ed-table .ed-num{ text-align:right; white-space:nowrap; padding-right:0; color:var(--ia-steel) }
.ed-table tbody tr{ transition:background-color .15s ease }
.ed-table tbody tr:hover{ background:#f7fafc }
.ia-grid .ia-card h3{ font-size:17px; color:var(--ia-navy); margin:0 0 6px }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
@media (max-width:760px){ .ed-sec h2{ font-size:26px } .ed-index{ gap:4px 18px } }

/* ---------------------------------------------- home: where to start
 * Placed by build.py in the home grid's empty row 3. The Wix stylesheet
 * resets most elements, so every property the band needs is set here. */
.ifmt-start{ grid-area:3/1/4/2; position:relative; background:#f6f9fc;
  border-top:1px solid #e2e9f0; border-bottom:1px solid #e2e9f0 }
.ifmt-start-in{ max-width:1180px; margin:0 auto; padding:56px 24px;
  font-family:"madefor-text","helveticaneuew10-45ligh",Arial,sans-serif; color:#443f4c }
.ifmt-start-head h2{ font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif;
  font-size:30px; line-height:1.2; color:#0a2540; margin:0 0 6px; font-weight:700 }
.ifmt-start-head p{ font-size:16px; line-height:1.5; color:#757575; margin:0 0 26px }
.ifmt-start-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media (max-width:860px){ .ifmt-start-cards{ grid-template-columns:minmax(0,1fr) }
  .ifmt-start-in{ padding:40px 16px } .ifmt-start-head h2{ font-size:24px } }
.ifmt-start-card{ display:flex; gap:14px; align-items:center; text-decoration:none; background:#fff;
  border:1px solid #e2e9f0; border-radius:12px; padding:14px 16px;
  transition:border-color .15s ease, box-shadow .2s ease, transform .2s ease }
.ifmt-start-card:hover{ border-color:#6db4b8; box-shadow:0 10px 24px rgba(10,37,64,.08); transform:translateY(-2px) }
.ifmt-start-card:focus-visible{ outline:3px solid #0a2540; outline-offset:2px }
.ifmt-start-card img{ flex:0 0 96px; width:96px; height:auto; border-radius:8px; background:#f2f7fb }
.ifmt-start-card b{ display:block; font-size:16px; color:#0a2540; margin:0 0 3px }
.ifmt-start-card em{ display:block; font-style:normal; font-size:14px; line-height:1.45; color:#757575 }
.ifmt-start-all{ display:inline-block; margin-top:20px; font-size:15px; color:#527b95; text-decoration:none; font-weight:600 }
.ifmt-start-all:hover{ color:#0a2540 }
.ifmt-start-all span{ display:inline-block; transition:transform .15s ease }
.ifmt-start-all:hover span{ transform:translateX(3px) }
@media (prefers-reduced-motion:reduce){ .ifmt-start-card{ transition:none } .ifmt-start-card:hover{ transform:none } }

/* ================================================================ tools
 * One interaction layer for the five tools under /tools. Each tool builds
 * its own markup with its own class prefix (cf, sc, nv, cc, bm), but every
 * one renders a question as <fieldset> and an answer as
 *   <label class="xx-opt"><input><span>...</span></label>
 * so the layer targets that shape, not any one tool. This file loads after
 * each tool's inline <style>, so it wins at equal specificity.
 *
 * Answers were plain radio rows with a pale hover. A reader on a phone could
 * not see what they had picked without finding the small dot. They are now
 * tiles: the whole row is the target, and the chosen one is marked by its
 * border and fill as well as by the control. The chosen state is a class set
 * by site.js (tk-on), not :has(), so an older browser still shows it.
 */
.cf-opts,.sc-opts,.nv-opts,.cc-opts,.bm-opts{ gap:7px !important }
.cf-opt,.sc-opt,.nv-opt,.cc-opt,.bm-opt{
  margin:0 !important; padding:11px 14px !important; border-radius:9px !important;
  border:1px solid var(--ia-line) !important; background:#fff;
  align-items:flex-start; gap:12px !important;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cf-opt:hover,.sc-opt:hover,.nv-opt:hover,.cc-opt:hover,.bm-opt:hover{
  border-color:#b9cad8 !important; background:#fafcfd !important;
}
.cf-opt.tk-on,.sc-opt.tk-on,.nv-opt.tk-on,.cc-opt.tk-on,.bm-opt.tk-on{
  border-color:var(--ia-navy) !important; background:#f3f8fb !important;
  box-shadow:inset 0 0 0 1px var(--ia-navy);
}
.cf-opt:focus-within,.sc-opt:focus-within,.nv-opt:focus-within,
.cc-opt:focus-within,.bm-opt:focus-within{ outline:none !important }
.cf-opt.tk-focus,.sc-opt.tk-focus,.nv-opt.tk-focus,.cc-opt.tk-focus,.bm-opt.tk-focus{
  outline:3px solid var(--ia-teal) !important; outline-offset:2px;
}
/* The "not sure" answer is a real answer, so it keeps a tile, but a dashed
 * one: it should never look like the best option on the list. */
.sc-opt--skip,.nv-opt--skip,.cc-opt--skip{
  border-style:dashed !important; margin-top:4px !important; color:var(--ia-grey);
}

/* The control itself, drawn so it reads at a glance. */
.cf-opt input,.sc-opt input,.nv-opt input,.cc-opt input,.bm-opt input{
  -webkit-appearance:none; appearance:none; flex:0 0 18px; width:18px; height:18px;
  margin:2px 0 0 !important; border:2px solid #9fb3c3; background:#fff; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cf-opt input[type=radio],.sc-opt input[type=radio],.nv-opt input[type=radio],
.cc-opt input[type=radio],.bm-opt input[type=radio]{ border-radius:50% }
.cf-opt input[type=checkbox],.sc-opt input[type=checkbox],.nv-opt input[type=checkbox],
.cc-opt input[type=checkbox],.bm-opt input[type=checkbox]{ border-radius:5px }
.cf-opt input:checked,.sc-opt input:checked,.nv-opt input:checked,
.cc-opt input:checked,.bm-opt input:checked{ border-color:var(--ia-navy) }
.cf-opt input[type=radio]:checked,.sc-opt input[type=radio]:checked,.nv-opt input[type=radio]:checked,
.cc-opt input[type=radio]:checked,.bm-opt input[type=radio]:checked{
  background:var(--ia-navy); box-shadow:inset 0 0 0 3px #fff;
}
.cf-opt input[type=checkbox]:checked,.sc-opt input[type=checkbox]:checked,.nv-opt input[type=checkbox]:checked,
.cc-opt input[type=checkbox]:checked,.bm-opt input[type=checkbox]:checked{
  background:var(--ia-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* The grey line under an option shows under the chosen one only (and as a
 * tooltip on hover, set by site.js). Every option carrying one doubled the
 * length of the list. Not in the checker: its lines define terms the rules
 * turn on ("an orifice is..."), so a reader needs them before choosing. */
.cf-opt em,.nv-opt em,.bm-opt em{ display:none !important }
.cf-opt.tk-on em,.nv-opt.tk-on em,.bm-opt.tk-on em{ display:block !important }

/* Question cards: numbered, and the number turns teal once answered, so a
 * reader scanning back up the page sees what is still open. */
.cf-q,.sc-dim,.nv-q,.cc-q,.bm-q{ border-radius:12px !important; transition:border-color .2s ease }
.cf-q.tk-done,.sc-dim.tk-done,.nv-q.tk-done,.cc-q.tk-done,.bm-q.tk-done{ border-color:#cfe3e4 !important }
.tk-num{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:1px;
  min-width:22px; height:22px; padding:0 6px; margin-right:9px; border-radius:11px;
  font:600 12px/1 Arial,sans-serif; color:var(--ia-steel); background:#eef3f7;
  transition:background-color .2s ease, color .2s ease;
}
.tk-done .tk-num{ background:var(--ia-teal); color:#fff }

/* Progress, and the two actions every tool needs: share this, start again. */
.tk-bar{
  position:sticky; top:0; z-index:5; margin:0 0 16px; padding:11px 14px 12px;
  background:rgba(255,255,255,.96); border:1px solid var(--ia-line); border-radius:11px;
  box-shadow:0 6px 18px rgba(10,37,64,.05);
}
.tk-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.tk-count{ font-size:14px; color:var(--ia-grey) }
.tk-count b{ color:var(--ia-navy); font-size:15px }
.tk-acts{ display:flex; gap:6px; flex-wrap:wrap }
.tk-acts button{
  font:inherit; font-size:13px; padding:6px 13px; border-radius:16px; cursor:pointer;
  border:1px solid var(--ia-line); background:#fff; color:var(--ia-navy);
  transition:border-color .15s ease, background-color .15s ease;
}
.tk-acts button:hover{ border-color:var(--ia-steel) }
.tk-acts button:focus-visible{ outline:3px solid var(--ia-navy); outline-offset:2px }
.tk-acts button[data-armed]{ border-color:var(--ia-coral); color:#b3403a; background:#fff6f5 }
.tk-track{ height:5px; border-radius:3px; background:#eef2f6; margin-top:9px; overflow:hidden }
.tk-track i{ display:block; height:100%; width:0; border-radius:3px; background:var(--ia-teal);
  transition:width .3s ease }
/* Sticky, so on a phone every pixel of it is a pixel of question hidden:
 * one line, smaller buttons. */
@media (max-width:520px){
  .tk-bar{ padding:8px 10px 9px; margin-bottom:12px }
  .tk-row{ flex-wrap:nowrap; gap:6px }
  .tk-count{ font-size:13px; white-space:nowrap }
  .tk-acts{ flex-wrap:nowrap; gap:4px }
  .tk-acts button{ font-size:12.5px; padding:5px 10px; white-space:nowrap }
  .tk-track{ margin-top:7px }
}
.tk-bar--lite .tk-track,.tk-bar--lite .tk-count{ display:none }
.tk-bar--lite .tk-row{ justify-content:flex-end }

/* On a phone the reading sits below every question. This button takes the
 * reader to it, and only shows once there is a reading to see. */
.tk-jump{
  position:fixed; left:50%; bottom:18px; z-index:40; transform:translate(-50%,160%);
  font:inherit; font-size:14.5px; padding:12px 22px; border-radius:26px; border:0;
  background:var(--ia-navy); color:#fff; cursor:pointer; white-space:nowrap;
  box-shadow:0 10px 26px rgba(10,37,64,.28); opacity:0; pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}
.tk-jump.tk-show{ transform:translate(-50%,0); opacity:1; pointer-events:auto }
.tk-jump:focus-visible{ outline:3px solid var(--ia-navy); outline-offset:3px }

/* Continue with your answers: the next tool, pre-filled. */
.tk-carry{ margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--ia-line) }
.tk-carry h3, .ia-body .tk-carry h3{ font-size:15px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ia-navy); margin:0 0 8px }   /* sentence case, 2026-09-28 */
.tk-carry a{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 6px;
  padding:10px 12px; border-radius:9px; text-decoration:none; background:#f2f7fb;
  border:1px solid transparent; transition:border-color .15s ease, background-color .15s ease;
}
.tk-carry a::after{ content:"\2192"; color:var(--ia-steel); font-size:15px; transition:transform .15s ease }
.tk-carry a:hover{ border-color:var(--ia-teal); background:#fff }
.tk-carry a:hover::after{ transform:translateX(3px) }
.tk-carry a:focus-visible{ outline:3px solid var(--ia-navy); outline-offset:2px }
.tk-carry b{ display:block; color:var(--ia-navy); font-size:14px }
.tk-carry span{ display:block; color:var(--ia-grey); font-size:12.5px; margin-top:1px }
.tk-carry a > :first-child{ flex:1 }
@media print{ .tk-carry{ display:none !important } }

/* Other tools, at the foot of each tool. */
.tk-rail{ margin:52px 0 0; padding-top:28px; border-top:1px solid var(--ia-line) }
.tk-rail h2{ font-size:20px; color:var(--ia-navy); margin:0 0 4px }
/* In its own section after the tool, the rail needs no top margin: the
   section above already ends with 72px. ia.css gives every body h2 a top
   margin, which added another 36px. */
.ia-body + .ia-body > .ia-wrap > .tk-rail{ margin-top:0 }
.ia-body .tk-rail > h2{ margin:0 0 4px }
.tk-rail > p{ margin:0 0 18px; color:var(--ia-grey); font-size:14.5px }
.tk-rail-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:14px }
.tk-tool{
  display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--ia-line); border-radius:12px; overflow:hidden;
  transition:border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.tk-tool:hover{ border-color:var(--ia-teal); box-shadow:0 10px 24px rgba(10,37,64,.08);
  transform:translateY(-2px) }
.tk-tool:focus-visible{ outline:3px solid var(--ia-navy); outline-offset:2px }
/* contain, not cover: the marks are drawn edge to edge and a crop cuts them.
 * The letterbox matches the mark's own ground, so it does not show. */
.tk-tool img{ display:block; width:100%; height:auto; aspect-ratio:16/7; object-fit:contain;
  background:#f2f7fb; border-bottom:1px solid var(--ia-line) }
.tk-tool div{ padding:13px 15px 15px }
.tk-tool b{ display:block; color:var(--ia-navy); font-size:15.5px; margin:0 0 4px }
.tk-tool span{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; font-size:13.2px; line-height:1.5; color:var(--ia-grey) }

/* The /tools index: say what a card opens, and how much it asks. */
.tk-meta{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px }
.tk-meta i{ font-style:normal; font-size:12px; padding:3px 9px; border-radius:11px;
  background:#eef4f8; color:var(--ia-steel) }
.tk-start .ia-card-media{ position:relative }
.tk-start .ia-card-media::before{
  content:"Start here"; position:absolute; top:12px; left:12px; z-index:2;
  font:600 11.5px/1 Arial,sans-serif; letter-spacing:.04em; padding:6px 10px; border-radius:12px;
  background:var(--ia-navy); color:#fff;
}

/* "How this works": the reasoning behind a tool, one click away instead of
 * three paragraphs between the reader and the first question. */
.tk-more{ margin:2px 0 4px }
.tk-more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--ia-steel); padding:2px 0;
}
.tk-more > summary::-webkit-details-marker{ display:none }
.tk-more > summary::before{
  content:""; width:7px; height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-right:2px;
  transition:transform .15s ease;
}
.tk-more[open] > summary::before{ transform:rotate(45deg) }
.tk-more > summary:hover{ color:var(--ia-navy) }
.tk-more > summary:focus-visible{ outline:3px solid var(--ia-navy); outline-offset:2px; border-radius:4px }
.tk-more[open] > summary{ margin-bottom:8px }
/* Printing opens every folded section (site.js, beforeprint); the toggle
 * itself is not printed. */
@media print{ .tk-more > summary{ display:none !important } }

@media (prefers-reduced-motion:reduce){
  .tk-jump,.tk-tool,.tk-track i,.cf-opt,.sc-opt,.nv-opt,.cc-opt,.bm-opt{ transition:none !important }
  .tk-tool:hover{ transform:none }
}
@media print{ .tk-bar,.tk-jump,.tk-rail{ display:none !important } }

/* 8. the comparison table shows that it scrolls, with a shadow at the edge
 * that has more to show */
.ed-tablebox{background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,
  linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(10,37,64,.16),transparent) left/14px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(10,37,64,.16),transparent) right/14px 100% no-repeat scroll}

/* home: the proof strip over "Not sure where to start?" */
.ifmt-proof{list-style:none;margin:0 0 34px;padding:0 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px 24px;border-bottom:1px solid #d7e1e9}
.ifmt-proof li{font-size:14.5px;line-height:1.45;color:#52606d}
.ifmt-proof b{display:block;font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif;
  font-size:19px;color:#0a2540;font-weight:600;margin-bottom:2px}
@media (max-width:860px){.ifmt-proof{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------------------ site footer
 * Our own footer inside the cloned <footer> element (build.py site_footer).
 * The cloned element keeps its grid placement; everything inside is ours. */
/* Light ground (operator 2026-09-28: "use the same logo change the colour of the footer").
 * The logo is drawn in teal, steel and coral for a light ground; on navy it needed a white
 * filter, which flattened the brand colours. Ground is the site's card blue, #f2f7fb. */
footer .sf{background:#f2f7fb;border-top:1px solid #e2e9f0;color:#3f4650;font-family:madefor-text,Arial,sans-serif;
  font-size:16px;line-height:1.6;padding:60px 24px 0;box-sizing:border-box;width:100%}
.sf a{color:#0a2540;text-decoration:none}
.sf a:hover{color:#0a2540;text-decoration:underline;text-underline-offset:4px}
.sf a:focus-visible{outline:3px solid #0a2540;outline-offset:3px;border-radius:3px}
.sf-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,3fr);gap:48px}
.sf-logo img{display:block;width:60px;height:auto}
.sf-line{margin:18px 0 16px;max-width:340px;color:#3f4650}
.sf-badges{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sf-badges li{font-size:13px;line-height:1;padding:7px 11px;border-radius:999px;
  border:1px solid rgba(10,37,64,.2);color:#0a2540;white-space:nowrap}
.sf-contact{font-style:normal;display:flex;flex-direction:column;gap:4px;max-width:340px}
.sf-contact span{color:#3f4650}
.sf-contact a{overflow-wrap:anywhere}
.sf-cta{display:inline-flex;gap:6px;align-items:center;margin-top:18px;padding:10px 18px;border-radius:999px;
  background:#0a2540;color:#fff !important;font-weight:500;font-size:16px}
.sf-cta:hover{background:#1d3a5c;text-decoration:none !important}
.sf-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.sf-h{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#1d5559;margin:4px 0 16px}
.sf-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sf-base{max-width:1200px;margin:48px auto 0;padding:20px 0 26px;border-top:1px solid rgba(10,37,64,.12);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px;color:#56606b}
.sf-base p{margin:0}
.sf-legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.sf-legal a{color:#3f4650}
@media (max-width:1000px){
  .sf-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .sf-line,.sf-contact{max-width:none}
}
@media (max-width:640px){
  footer .sf{padding:44px 16px 0}
  .sf-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .sf-base{flex-direction:column}
}
@media print{footer .sf{display:none}}
/* The footer is plain paper (operator, 2026-10-16: the halftone heartbeat
 * scene removed). */
footer .sf-top{position:relative;margin:-60px -24px 0;padding:60px 24px 56px;background:#f2f7fb}
footer .sf-top>.sf-in{position:relative;z-index:1}
@media (max-width:640px){footer .sf-top{margin:-44px -16px 0;padding:44px 16px 44px}}
footer .sf-base{margin:0 -24px;max-width:none;padding:18px max(24px,calc((100% - 1200px) / 2 + 24px)) 24px;
  background:#0a2540;border-top:0;color:rgba(255,255,255,.82)}
footer .sf-base a{color:#fff}
@media (max-width:640px){footer .sf-base{margin:0 -16px;padding:18px 16px 24px}}



/* The home page "Get Started" button scrolls to the start band. The margin
 * keeps the band's heading clear of the header when it arrives. */
#ifmt-start{scroll-margin-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* The certification item leads the home page facts row. */
.ifmt-proof{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr))}
.ifmt-proof li.ifmt-cert{display:flex;gap:14px;align-items:center}
.ifmt-cert img{flex:0 0 68px;width:68px;height:auto}
.ifmt-cert a{color:#527b95;text-decoration:underline;text-underline-offset:3px}
.ifmt-cert a:hover{color:#0a2540}
@media (max-width:860px){.ifmt-proof li.ifmt-cert{grid-column:1/-1}}

/* The device-type row that replaced the card grid on the home page. */
.ifmt-dt-host{display:none !important}
.ifmt-dt{background:#fff}
.ifmt-dt-in{max-width:1180px;margin:0 auto;padding:56px 24px}
.ifmt-dt h2{font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif;
  font-size:28px;line-height:1.25;color:#0a2540;margin:0 0 20px}
.ifmt-dt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ifmt-dt li a{display:inline-block;padding:10px 16px;border-radius:22px;border:1px solid #d4dee7;
  color:#0a2540;font-size:15px;font-family:madefor-text,Arial,sans-serif;text-decoration:none;background:#fff;transition:border-color .15s ease,background .15s ease}
.ifmt-dt li a:hover{border-color:#6db4b8;background:#f2f7fb}
.ifmt-dt li a:focus-visible{outline:3px solid #0a2540;outline-offset:2px}
@media (max-width:860px){.ifmt-dt-in{padding:40px 16px}.ifmt-dt h2{font-size:24px}}

/* The mark in the footer sits on a white tile, as the mark is drawn for one. */
.sf-cert{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;text-decoration:none !important}
.sf-cert img{width:46px;height:auto;background:#fff;border-radius:8px;padding:5px;border:1px solid #e2e9f0}
.sf-cert span{font-size:13px;line-height:1.4;color:#3f4650}
.sf-cert b{display:block;color:#0a2540;font-weight:600;font-size:16px}

/* The certification strip that leads the start band. */
.ifmt-proof{grid-template-columns:repeat(3,minmax(0,1fr))}
.ifmt-certstrip{text-align:center;margin:0 0 44px;padding:0 0 40px;border-bottom:1px solid #e3e9ef}
.ifmt-certstrip-h{font:500 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#0a2540;margin:0 0 22px}
.ifmt-certstrip-row{display:flex;align-items:center;justify-content:center;gap:22px}
.ifmt-laurel{width:40px;height:96px;color:#c5d2dd;flex:0 0 auto}
.ifmt-laurel--r{transform:scaleX(-1)}
.ifmt-pill{display:inline-flex;align-items:center;gap:14px;padding:8px 22px 8px 10px;border:1.5px solid #0a2540;
  border-radius:999px;background:#fff;text-decoration:none;text-align:left;transition:box-shadow .2s ease}
.ifmt-pill:hover{box-shadow:0 8px 22px rgba(10,37,64,.12)}
.ifmt-pill:focus-visible{outline:3px solid #0a2540;outline-offset:3px}
.ifmt-pill img{width:60px;height:auto;display:block}
.ifmt-pill span{display:block;font-size:13px;line-height:1.35;color:#3f4650;max-width:190px}
.ifmt-pill b{display:block;font-size:16px;color:#0a2540}
.ifmt-pill em{display:block;font-style:normal;font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:#0a2540;margin-top:2px}
.ifmt-certstrip-note{margin:18px auto 0;max-width:620px;font-size:13.5px;line-height:1.5;color:#6b7785}
@media (max-width:640px){.ifmt-laurel{display:none}.ifmt-certstrip-h{font-size:12.5px}}

/* ------------------------------------------------ home page order
 * The cloned home page places each section in its layout grid by id and row
 * number, so order is set here, not in the markup. The order follows how a
 * buyer reads (operator, 2026-09-23: "home page sections are not in flow"):
 * who we are, proof we follow a process, what we do, why us, how we work,
 * the facilities and disciplines behind it, and then where to start. */
.ifmt-trust{grid-area:2/1/3/2 !important;position:relative;background:#f6f9fc}
.ifmt-trust .ifmt-start-in{padding-bottom:8px}
.ifmt-trust .ifmt-certstrip{margin:0;padding:0 0 48px;border-bottom:0}
#comp-mbmol2dy{grid-area:3/1/4/2 !important}
#comp-mbnhezzi{grid-area:4/1/5/2 !important}
#comp-m28o2bbb{grid-area:5/1/6/2 !important}
#comp-mbjnf2tu{grid-area:6/1/7/2 !important}
#comp-mbjnghq9{grid-area:7/1/8/2 !important}
.ifmt-start{grid-area:8/1/9/2 !important}
#comp-mbnnbcwh{grid-area:9/1/10/2 !important}
#comp-mbm1mq5y{grid-area:10/1/11/2 !important}

/* ------------------------------------------------ one typeface
 * The cloned sections carried five uploaded Wix faces, Arial and Helvetica
 * beside the Madefor pair the rest of the site uses. Everything is set in
 * Madefor Text; page titles take Madefor Display. The ID in :not() lends one
 * ID of specificity, because the cloned rules are (1,0,1) and carry
 * !important inside their mobile media queries. */
body :not(#ifmt-nonexistent):not(svg):not(svg *):not(code):not(pre){
  font-family:madefor-text,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
html body h1:not(#ifmt-nonexistent):not(#ifmt-nonexistent-2),html body h1:not(#ifmt-nonexistent):not(#ifmt-nonexistent-2) *{
  font-family:madefor-display-bold,madefor-text,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

/* ---------------------------------------------------- tap targets
 * Design audit 2026-09-24, measured at 375px: the menu button was 54x30, 37
 * of 56 visible links were under 44px tall, and footer links were 18px.
 * WCAG 2.2 AA (2.5.8) asks 24px everywhere; 44px is the touch guideline.
 *
 * Desktop: the header links grow their hit area with padding and cancel it
 * with an equal negative margin, so the bar does not move by a pixel.
 * Touch or narrow screens: every menu, footer and home text link becomes a
 * full 44px row or box. */
header nav[data-hook="menu-root"] a{ padding-top:8px; padding-bottom:8px; margin-top:-8px; margin-bottom:-8px; }
.sf a{ display:inline-block; padding-top:3px; padding-bottom:3px; }

@media (pointer:coarse), (max-width:1000px){
  header .wixui-hamburger-open-button{ min-height:44px !important; min-width:44px !important; }
  [data-hook="hamburger-overlay-root"] nav a,
  [data-hook="hamburger-overlay-root"] .ifmt-mega-col.ifmt-mega-list a{
    display:flex !important; align-items:center; min-height:44px; box-sizing:border-box;
  }
  .sf a{ display:inline-flex; align-items:center; min-height:44px; padding-top:0; padding-bottom:0; }
  .sf-col ul{ gap:0 !important; }   /* the 44px rows are the spacing now */
  .hm-link{ display:inline-flex !important; align-items:center; min-height:44px; margin-top:12px !important; }
}

/* The menu's first entry is "IF MedTech", a link to "/". In the desktop bar it
 * sits beside the logo, which is the same link, so it is hidden there (design
 * audit 2026-09-24). The phone drawer keeps it: the drawer covers the logo. */
header nav[data-hook="menu-root"] > ul > li:first-child{ display:none !important; }
[data-hook="hamburger-overlay-root"] nav[data-hook="menu-root"] > ul > li:first-child{ display:block !important; }

/* The header logo links home (finish_pages.link_logo, 2026-09-28): a transparent link over the logo box. */
:has(> a.ifmt-home){position:relative}
a.ifmt-home{position:absolute;inset:-8px;z-index:5;display:block;border-radius:6px}   /* 28x36 logo -> a 44x52 target */
a.ifmt-home:focus-visible{outline:3px solid #0a2540;outline-offset:3px}

/* ---------------------------------------------- /tools: hero picker (2026-10-07)
 * The call to action: three equal choices by stage, each opening its tool. */
.tk-pick{ margin:30px 0 0; max-width:760px }
.tk-pick-q{ margin:0 0 12px; font-size:15px; font-weight:600; color:#fff }
.tk-pick-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.tk-pick-a{ display:flex; flex-direction:column; gap:6px; height:100%; box-sizing:border-box; padding:16px 18px 14px;
  border-radius:12px; background:#fff; color:var(--ia-navy) !important; text-decoration:none !important;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.45); transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease }
.tk-pick-a:hover{ transform:translateY(-2px); background:#eaf7fa; box-shadow:0 14px 30px -12px rgba(0,0,0,.55) }
.tk-pick-a:focus-visible{ outline:2px solid #c8edf5; outline-offset:3px }
.tk-pick-stage{ font:500 11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ia-steel) }
.tk-pick-a b{ font-size:18px; font-weight:600; line-height:1.25 }
.tk-pick-go{ margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:var(--ia-steel) }
.tk-pick-a:hover .tk-pick-go{ color:var(--ia-navy) }
.tk-pick-note{ margin:12px 0 0; font-size:13.5px; color:rgba(255,255,255,.7) }
.tk-sub{ margin:-8px 0 0; font-size:15px; color:var(--ia-grey) }
@media (max-width:760px){ .tk-pick-list{ grid-template-columns:1fr } .tk-pick-a{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:12px }
  .tk-pick-stage{ flex-basis:100% } .tk-pick-go{ margin-left:auto; padding-top:0 } }
/* Card footers on /tools read as buttons, not as a small label. */
.ia-card:has(.tk-meta) .ia-more{ display:inline-block; width:fit-content; align-self:flex-start; margin-top:auto; padding:10px 16px; border:0 !important;
  border-radius:999px; background:var(--ia-navy); color:#fff !important; font:600 13px/1 Arial,sans-serif;
  letter-spacing:.02em; text-transform:none }
.ia-card:has(.tk-meta):hover .ia-more{ background:var(--ia-steel) }
.tk-meta i:first-child{ background:var(--ia-navy); color:#fff }
.ia-hero--img .ia-wrap > .tk-pick{ max-width:min(760px,56vw) } @media (max-width:760px){ .ia-hero--img .ia-wrap > .tk-pick{ max-width:none } }
.ia-card:has(.tk-meta) .tk-meta{ margin-bottom:16px }