/* ============================================================
   IRISWEBX ALMS — landing page
   ============================================================ */

:root{
  --purple:#5b16e8;
  --purple-deep:#4a0fd0;
  --header:#5b16e8;             /* top bar — brand purple */
  --magenta:#cc00e8;
  /* the red on the LIVE wordmark, sampled from the product screen itself
     and pulled down a shade so it clears AA contrast on white */
  --live-red:#ef1a4c;
  --ink:#10121a;
  --ink-soft:#2b2f3a;
  --paper:#ffffff;
  --line:#e6e8ef;
  --wrap:1180px;
}

*{box-sizing:border-box}

/* any class that sets `display` would otherwise beat the browser's
   [hidden] rule, leaving "hidden" elements on screen */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  color-scheme:light;
  font-family:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}

img{max-width:100%}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- Top bar ---------- */
.topbar{
  position:relative;
  width:100%;
  height:142px;
  background:var(--header);
}

/* logo-mark.png is pre-cropped to the artwork, so `top` positions the
   visible mark directly — no transparent padding to compensate for. */
.logo-plate{
  position:absolute;
  left:32px;
  top:9px;
  display:grid;
  place-items:center;
  padding:20px 34px;
  background:#fff;
  border-radius:50%;            /* oval, since the box is wider than tall */
  box-shadow:0 6px 18px rgba(30,0,70,.28);
}

.logo-mark{
  height:84px;
  width:auto;
  max-width:none;
  display:block;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}

/* tagline on the right of the gradient bar */
.topbar-tag{
  position:absolute;
  right:40px;
  top:50%;
  transform:translateY(-50%);
  max-width:46%;
  margin:0;
  text-align:right;
  color:#fff;
  font-size:clamp(.92rem,1.45vw,1.28rem);
  font-weight:600;
  letter-spacing:.4px;
  line-height:1.35;
  text-shadow:0 1px 6px rgba(40,0,80,.35);
  animation:tag-in .9s .45s cubic-bezier(.16,1,.3,1) both;
}

/* keeps the -50% centring while it rises in */
@keyframes tag-in{
  from{opacity:0;transform:translateY(calc(-50% + 14px))}
  to  {opacity:1;transform:translateY(-50%)}
}

.logo-plate{transition:box-shadow .35s ease}
.logo-plate:hover{box-shadow:0 10px 28px rgba(30,0,70,.38)}
.logo-plate:hover .logo-mark{transform:scale(1.06)}

/* ---------- Navigation ---------- */
.mainnav{
  border-bottom:1px solid transparent;
  background:#fff;
}

.mainnav ul{
  max-width:var(--wrap);
  margin:0 auto;
  padding:18px 24px 16px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 34px;
  font-family:"Quicksand","Poppins",sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.2px;
}

.mainnav a{
  position:relative;
  color:var(--ink);
  padding-bottom:4px;
  transition:color .22s ease;
}

/* underline wipes in from the left, out to the right */
.mainnav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--purple);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .3s cubic-bezier(.65,0,.35,1);
}

.mainnav a:hover{color:var(--purple);text-decoration:none}
.mainnav a:hover::after{transform:scaleX(1);transform-origin:left center}

/* the page you are already on */
.mainnav a.is-current{color:var(--purple)}
.mainnav a.is-current::after{transform:scaleX(1);transform-origin:left center}

/* ---------- Hero ---------- */
.hero{padding-top:44px}

.hero-title{
  margin:0 0 34px;
  font-size:clamp(1.8rem,5.2vw,3rem);
  font-weight:700;
  line-height:1.12;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

.hero-title .slab{
  background:var(--purple);
  color:#fff;
  padding:.28em 1.05em .3em;
  /* max() keeps this valid below 1132px, where the calc goes negative and
     would otherwise drop the whole shorthand and lose the vertical padding */
  padding-left:max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  border-radius:0 26px 26px 0;
  animation:slab-in 1s cubic-bezier(.16,1,.3,1) both;
}

@keyframes slab-in{
  from{opacity:0;transform:translateX(-100%)}
  to  {opacity:1;transform:none}
}

.hero-title .rest{
  padding-left:.45em;
  color:var(--ink);
  animation:rise-in .8s .3s cubic-bezier(.16,1,.3,1) both;
}

@keyframes rise-in{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:none}
}

.hero-sub{
  margin:0 auto 40px;
  max-width:900px;
  padding-inline:24px;
  text-align:center;
  font-size:clamp(1.05rem,2.4vw,1.45rem);
  font-weight:700;
  line-height:1.35;
}

/* the intro runs wider than the 1180px text column so each sentence fits on
   as few lines as possible — the same allowance .roles .wrap gets */
.intro-wrap{max-width:1560px}

.intro{
  margin:0 0 14px;
  text-align:justify;
  font-size:.93rem;
  font-weight:400;
  color:var(--ink-soft);
  letter-spacing:.1px;
}

/* ---------- Mockup stages ---------- */
.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:46px 16px 10px;
}

.stage-desktop{padding-top:60px}

/* ---------- Desktop mockup image ---------- */
.mockup-desktop{
  width:min(500px,100%);
  height:auto;
  display:block;
}

/* ---------- Home page pull quote ---------- */
.promise{padding:40px 0 4px}

/* sitting inside the hero, it already has the sub-heading's 40px above it */
.hero .promise{padding:0 0 28px}

/* the same purple-bar language as .doc-callout, with a quote mark added */
.promise-quote{
  position:relative;
  max-width:880px;
  margin:0 auto;
  padding:28px 34px 26px 62px;
  border-left:4px solid var(--purple);
  border-radius:0 18px 18px 0;
  /* opaque rather than a 6% wash, so it reads as a solid panel */
  background:#e8ddfc;
}

.promise-mark{
  position:absolute;
  left:20px; top:10px;
  /* deepened to stay legible against the solid background */
  color:rgba(91,22,232,.5);
  font-family:Georgia,"Times New Roman",serif;
  font-size:4.2rem;
  line-height:1;
  pointer-events:none;
}

.promise-lead{
  margin:0 0 9px;
  font-size:clamp(1.08rem,2.3vw,1.42rem);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--ink);
}

.promise-sub{
  margin:0;
  font-size:clamp(.95rem,1.5vw,1.05rem);
  font-weight:600;
  line-height:1.7;
  color:#5d6270;
}

@media (max-width:620px){
  .promise{padding:26px 0 2px}
  .hero .promise{padding:0 0 22px}
  .promise-quote{padding:22px 20px 20px 44px;border-radius:0 14px 14px 0}
  .promise-mark{left:13px;top:6px;font-size:3.2rem}
}

/* ---------- Roles ---------- */
.roles{padding:52px 0 10px}

/* the chain needs more room than the 1180px text column to stay on one line */
.roles .wrap{max-width:1500px}

.role-line{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 8px;
  /* scales with the viewport so all nine roles stay on one line */
  font-size:clamp(.78rem,1.22vw,1.15rem);
  font-weight:700;
}

/* each label carries the arrow that follows it, so a wrapped line
   always begins with a role name and never with a stray arrow */
.role-line span{white-space:nowrap}

.role-line b{
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.05em;
  margin-left:8px;
  animation:arrow-blink 1.6s ease-in-out infinite;
}

/* the pulse travels down the chain instead of firing all at once */
.role-line span:nth-child(1) b{animation-delay:0s}
.role-line span:nth-child(2) b{animation-delay:.09s}
.role-line span:nth-child(3) b{animation-delay:.18s}
.role-line span:nth-child(4) b{animation-delay:.27s}
.role-line span:nth-child(5) b{animation-delay:.36s}
.role-line span:nth-child(6) b{animation-delay:.45s}
.role-line span:nth-child(7) b{animation-delay:.54s}
.role-line span:nth-child(8) b{animation-delay:.63s}

.role-line span{transition:color .25s ease,transform .25s ease}
.role-line span:hover{color:var(--purple);transform:translateY(-2px)}

.rl-pair b{margin-right:8px}

@keyframes arrow-blink{
  0%, 100%{opacity:1}
  50%     {opacity:.12}
}


/* ---------- Mobile mockup image ---------- */
.mockup-mobile{
  width:min(550px,100%);
  height:auto;
  display:block;
}

/* ---------- AI features ---------- */
.features{
  text-align:center;
  padding:66px 24px 10px;
}

.features h2{
  margin:0 0 10px;
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  font-weight:700;
}

.features p{
  margin:0 0 6px;
  font-size:clamp(.95rem,2.1vw,1.28rem);
  font-weight:400;
  color:var(--ink);
}

/* ---------- Testimonials ---------- */
.testimonials{
  padding:70px 0 20px;
  text-align:center;
}

.testimonials h2{
  margin:0 0 40px;
  font-size:clamp(1.35rem,3vw,1.95rem);
  font-weight:700;
  letter-spacing:-.01em;
}

.t-grid{
  display:grid;
  /* capped track so one lone card stays card-sized instead of stretching wide */
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),362px));
  justify-content:center;
  gap:20px;
  text-align:left;
}

.t-card{
  position:relative;
  margin:0;
  padding:30px 26px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 40px -30px rgba(40,12,110,.6);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,border-color .3s ease;
}

.t-card:hover{
  transform:translateY(-5px);
  border-color:rgba(91,22,232,.3);
  box-shadow:0 26px 52px -28px rgba(40,12,110,.7);
}

.t-mark{
  position:absolute;
  top:6px;
  right:22px;
  font-size:4.6rem;
  line-height:1;
  font-weight:700;
  color:rgba(91,22,232,.12);
  pointer-events:none;
}

.t-card .fb-stars{margin-bottom:14px}

/* video testimonial card */
.t-card.has-video{padding-top:14px}

.t-video{
  width:100%;
  aspect-ratio:16/9;
  margin-bottom:16px;
  border-radius:12px;
  background:#0d0b1a;
  object-fit:cover;
  display:block;
}

/* both grids sit in the same section, so keep them spaced apart */
#tReal + #tSample{margin-top:20px}

.t-card blockquote{
  margin:0 0 22px;
  font-size:.97rem;
  line-height:1.68;
  color:#3a3f50;
}

.t-card figcaption{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.t-avatar{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.5px;
  flex:none;
}

.t-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.t-who strong{font-size:.93rem;font-weight:700}
.t-who small{font-size:.8rem;color:#8b90a0}

.t-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:34px;
  padding:12px 26px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--purple);
  font-size:.94rem;
  font-weight:600;
  box-shadow:0 10px 24px -18px rgba(91,22,232,.6);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.t-cta svg{width:17px;height:17px;transition:transform .25s ease}
.t-cta:hover{
  border-color:var(--purple);
  transform:translateY(-2px);
  text-decoration:none;
  box-shadow:0 16px 30px -18px rgba(91,22,232,.8);
}
.t-cta:hover svg{transform:translateX(3px)}

/* ---------- Institution showcase ---------- */
.showcase{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 24px 70px;
}

.trust-line{
  margin:0 0 26px;
  text-align:center;
  font-size:clamp(.95rem,2vw,1.12rem);
  font-weight:600;
  letter-spacing:.3px;
  color:#5d6270;
}

.college-box{
  display:inline-flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  padding:11px 26px 11px 12px;
  border-radius:12px;
  background:#fff;
  border:2px solid rgba(91,22,232,.28);
  box-shadow:0 10px 26px -16px rgba(91,22,232,.5);
  font-size:clamp(.92rem,2vw,1.12rem);
  font-weight:700;
  color:var(--ink);
  text-align:center;
  line-height:1.3;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),
             box-shadow .3s ease,
             border-color .3s ease,
             color .3s ease;
}

.college-box:hover,
.college-box:focus-visible{
  transform:translateY(-3px);
  border-color:var(--purple);
  color:var(--purple);
  box-shadow:0 16px 32px -16px rgba(91,22,232,.65);
  text-decoration:none;
}

.college-box:focus-visible{outline:3px solid rgba(91,22,232,.4);outline-offset:3px}

/* crest in front of the college name */
.cb-logo{
  width:40px;height:40px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(91,22,232,.10);
  color:var(--purple);
  overflow:hidden;
  transition:background .3s ease;
}

.cb-logo svg{width:22px;height:22px}

img.cb-logo{
  object-fit:contain;
  padding:3px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(91,22,232,.14);
}
.college-box:hover .cb-logo{background:rgba(91,22,232,.18)}

/* ---------- Documentation page ---------- */
.doc{padding:16px 0 78px}

.doc-body{
  max-width:820px;
  margin-inline:auto;
  padding:40px 44px 36px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 24px 58px -42px rgba(40,12,110,.55);
}

.doc-h{
  margin:0 0 20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.15rem,2.4vw,1.4rem);
  font-weight:700;
  letter-spacing:-.01em;
}

.doc-body p{
  margin:0 0 20px;
  font-size:1rem;
  line-height:1.9;
  color:#3f4454;
}

.doc-lead{
  font-size:1.08rem !important;
  font-weight:500;
  color:var(--ink) !important;
}

/* closing statement */
.doc-callout{
  display:flex;
  gap:16px;
  margin:28px 0 30px;
  padding:22px 24px;
  border-left:4px solid var(--purple);
  border-radius:0 14px 14px 0;
  background:rgba(91,22,232,.07);
}

.doc-callout p{
  margin:0;
  font-size:1rem;
  font-weight:600;
  line-height:1.8;
  color:var(--ink);
}

.doc-callout-ico{
  width:34px;height:34px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
}
.doc-callout-ico svg{width:18px;height:18px}

.doc-next{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding-top:8px;
}

/* headings sit clear of the top when jumped to */
.doc-body h2[id]{scroll-margin-top:28px}

.doc-body p strong{color:var(--ink);font-weight:700}

/* ---- policy page: sticky section sidebar beside the document ---- */
.pol-layout{
  display:grid;
  grid-template-columns:242px minmax(0,1fr);
  gap:48px;
  align-items:start;
}

/* Grid items default to min-width:auto, so they refuse to shrink below their
   own min-content. On the pages carrying a role table that floor is the
   table's 520px min-width, which pushed the whole article off a phone screen
   even though the table sits in its own scrolling box. */
.pol-layout > *{min-width:0}
.sec-table-wrap{max-width:100%}

.pol-side{
  position:sticky;
  top:28px;
}

.pol-side ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
  border-left:2px solid var(--line);
}

.pol-side a{
  display:block;
  margin-left:-2px;
  padding:10px 14px;
  border-left:2px solid transparent;
  color:#5d6270;
  font-size:.95rem;
  font-weight:600;
  line-height:1.4;
  transition:color .22s ease,border-color .22s ease;
}

.pol-side a:hover{color:var(--purple);border-left-color:rgba(91,22,232,.45);text-decoration:none}
.pol-side a.is-active{color:var(--purple);border-left-color:var(--purple)}

/* The sidebar stacks above the text on narrower screens, and its links
   become pills. This block MUST stay below the .pol-layout rules above —
   it carries no extra specificity, so declaring it earlier let the
   two-column rule win at every width and pushed the article off-screen. */
@media (max-width:940px){
  /* minmax(0,…) rather than a bare 1fr: a plain fr track refuses to shrink
     below its content's min-content width, and the longest sidebar pill
     ("Technology that belongs to the institution") then dragged the whole
     column past the edge of the screen */
  .pol-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .pol-side{position:static;top:auto;min-width:0}
  .pol-side ul{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    border-left:0;
    min-width:0;
  }
  .pol-side a{
    display:block;
    max-width:100%;
    margin-left:0;
    padding:10px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:.88rem;
  }
  .pol-side a:hover,
  .pol-side a.is-active{border-color:var(--purple)}
}

/* ---- policy page reads as a plain document, with no panels ---- */
#policy .doc-body{
  max-width:none;
  margin:0;
}

#policy .doc-body{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
}

#policy .doc-callout{
  background:none;
  border-radius:0;
  padding:0 0 0 18px;
  margin:26px 0 24px;
}

/* larger body text for long-form reading */
#policy .doc-body p{
  font-size:1.12rem;
  line-height:1.95;
  margin-bottom:24px;
}

/* ---- the documentation page reads as a plain document too, with no panel,
        and no reading cap — the text runs the full width of the page column
        so a sentence fits on as few lines as possible ---- */
#documentation .doc-body{
  max-width:none;
  margin-inline:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

#policy .doc-lead{font-size:1.22rem !important}
#policy .doc-callout p{font-size:1.12rem;line-height:1.9}
#policy .doc-h{font-size:clamp(1.3rem,2.6vw,1.6rem)}

/* ---------- Features page ---------- */
.ft{padding:26px 0 10px}

.ft-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:42px 30px;
}

.ft-card{
  position:relative;
  padding-left:20px;
}

/* the soft vertical bar sitting behind each card */
.ft-card::before{
  content:"";
  position:absolute;
  left:0; top:-16px;
  width:12px;
  height:calc(100% + 40px);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(91,22,232,.16),rgba(91,22,232,0));
  pointer-events:none;
}

/* the folded flag */
.ft-flag{
  position:relative;
  min-height:118px;
  padding:16px 18px 20px;
  background:var(--purple);
  color:#fff;
  /* large bottom-right radius makes the quarter-round sweep */
  border-radius:0 0 118px 0;
  box-shadow:0 18px 34px -24px rgba(60,10,140,.85);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
}

/* the small ribbon tail under the left edge */
.ft-flag::after{
  content:"";
  position:absolute;
  left:0; bottom:-18px;
  width:38px; height:18px;
  background:#4610c4;
  clip-path:polygon(0 0,100% 0,0 100%);
}

.ft-card:hover .ft-flag{
  transform:translateY(-4px);
  box-shadow:0 26px 44px -24px rgba(60,10,140,1);
}

.ft-chip{
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  margin-bottom:12px;
  border-radius:8px;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}
.ft-chip svg{width:17px;height:17px}

.ft-flag h3{
  margin:0;
  max-width:78%;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
}

.ft-card > p{
  margin:30px 0 0;
  padding-right:10px;
  font-size:.94rem;
  line-height:1.85;
  color:#3f4454;
}

/* stagger the columns, as in the reference layout */
@media (min-width:940px){
  .ft-grid > :nth-child(even){margin-top:52px}
}

/* ---- closing call to action ---- */
.ft-cta{padding:58px 0 76px}

.ft-cta-box{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 28px;
  padding:30px 32px;
  background:var(--bg-tint,#f7f5ff);
  border:1px solid var(--line);
  border-radius:20px;
}

.ft-cta-box h2{margin:0 0 5px;font-size:1.35rem;font-weight:700}
.ft-cta-box p{margin:0;color:#5d6270;font-size:.96rem}

.ft-cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Support page ---------- */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.sup-search{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:0 auto 8px;
  padding-inline:24px;
  max-width:760px;
}

.sup-search input{
  flex:1 1 340px;
  min-width:0;
  padding:14px 18px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-family:inherit;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}

.sup-search input::placeholder{color:#a7abba}

.sup-search input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(91,22,232,.13);
}

.sup-search button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 28px;
  border:0;
  border-radius:12px;
  background:var(--purple);
  color:#fff;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 14px 30px -16px rgba(91,22,232,.85);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease;
}

.sup-search button svg{width:18px;height:18px}
.sup-search button:hover{transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(91,22,232,.95)}

/* ---- category cards ---- */
.sup-cards{padding:54px 0 10px}

/* four abreast, for the same reason as .sec-grid — auto-fit fits only three
   at this width and strands the fourth card, stretched, on a row of its own */
.sup-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

@media (max-width:1000px){
  .sup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .sup-grid{grid-template-columns:1fr}
}

.sup-card{
  padding:28px 26px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 38px -32px rgba(40,12,110,.6);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,border-color .3s ease;
}

.sup-card:hover{
  transform:translateY(-5px);
  border-color:rgba(91,22,232,.3);
  box-shadow:0 24px 48px -28px rgba(40,12,110,.7);
}

.sup-ico{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(91,22,232,.10);
  color:var(--purple);
  margin-bottom:18px;
}
.sup-ico svg{width:26px;height:26px}

.sup-card h3{
  margin:0 0 9px;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.01em;
}

.sup-card p{
  margin:0 0 16px;
  font-size:.94rem;
  line-height:1.62;
  color:#5d6270;
}

.sup-card > a{
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  border-bottom:1.5px solid var(--ink);
  padding-bottom:1px;
  transition:color .22s ease,border-color .22s ease;
}
.sup-card > a:hover{color:var(--purple);border-color:var(--purple);text-decoration:none}

/* ---- FAQ ---- */
.faq{padding:34px 0 10px}

.faq-box{
  display:grid;
  grid-template-columns:1fr 1.9fr;
  gap:40px;
  padding:38px 36px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 22px 56px -40px rgba(40,12,110,.55);
}

.faq-intro h2{
  margin:0 0 14px;
  font-size:clamp(1.4rem,3vw,1.9rem);
  font-weight:700;
  letter-spacing:-.01em;
}

.faq-intro p{
  margin:0 0 14px;
  font-size:.95rem;
  line-height:1.65;
  color:#5d6270;
}

.faq-say a{color:var(--purple);font-weight:600;border-bottom:1px solid rgba(91,22,232,.4)}
.faq-say a:hover{text-decoration:none;border-color:var(--purple)}

.faq-list details{
  border-top:1px solid var(--line);
  padding:4px 0;
}
.faq-list details:first-child{border-top:0}

.faq-list summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:16px 52px 16px 0;
  font-size:1rem;
  font-weight:600;
  line-height:1.45;
  transition:color .2s ease;
}

.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--purple)}

/* the round +/- control on the right — two bars drawn as background layers */
.faq-list summary::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  width:30px;height:30px;
  margin-top:-15px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background-color:#fff;
  background-image:
    linear-gradient(currentColor,currentColor),   /* horizontal bar */
    linear-gradient(currentColor,currentColor);   /* vertical bar   */
  background-size:12px 1.8px, 1.8px 12px;
  background-position:center, center;
  background-repeat:no-repeat;
  color:#6a6f80;
  transition:border-color .25s ease,color .25s ease,transform .25s ease;
}

.faq-list summary:hover::after{border-color:rgba(91,22,232,.45);color:var(--purple)}

/* open: solid purple fill with only the horizontal bar, giving a minus */
.faq-list details[open] summary::after{
  background-color:var(--purple);
  background-image:linear-gradient(#fff,#fff);
  background-size:12px 1.8px;
  border-color:transparent;
  transform:rotate(180deg);
}

.faq-body{
  padding:0 52px 20px 0;
  font-size:.95rem;
  line-height:1.7;
  color:#5d6270;
}
.faq-body p{margin:0}
.faq-body a{color:var(--purple);font-weight:600}

.faq-empty{
  grid-column:1 / -1;
  margin:0;
  padding:18px 0 4px;
  font-size:.95rem;
  color:#5d6270;
}
.faq-empty a{color:var(--purple);font-weight:600}

/* ---- search results drawn from the guide pages ---- */
.sup-results{padding:38px 0 4px}

.sup-res-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:16px;
}

.sup-res-head h2{
  margin:0;
  font-size:1.16rem;
  font-weight:700;
  letter-spacing:-.01em;
}

.sup-res-head p{
  margin:0;
  color:#8b90a0;
  font-size:.86rem;
  font-weight:500;
}

.sup-res-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.sup-res a{
  display:block;
  padding:15px 18px;
  border:1px solid var(--line);
  border-left:3px solid transparent;
  border-radius:12px;
  background:#fff;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.sup-res a:hover{
  border-color:rgba(91,22,232,.35);
  border-left-color:var(--purple);
  transform:translateX(3px);
  text-decoration:none;
  box-shadow:0 16px 34px -28px rgba(40,12,110,.8);
}

.sup-res-page{
  display:block;
  margin-bottom:3px;
  color:var(--purple);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.sup-res strong{
  display:block;
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
}

.sup-res p{
  margin:5px 0 0;
  color:#5d6270;
  font-size:.9rem;
  line-height:1.65;
}

/* the matched words, in both the heading and the snippet */
.sup-res mark{
  padding:0 2px;
  border-radius:3px;
  background:rgba(204,0,232,.14);
  color:inherit;
  font-weight:600;
}

/* ---- contact strip ---- */
.sup-contact{padding:46px 0 76px}

.sup-contact-box{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 28px;
}

.sup-contact-box h2{
  margin:0 0 4px;
  font-size:1.3rem;
  font-weight:700;
}

.sup-contact-box p{margin:0;color:#5d6270;font-size:.96rem}

.sup-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 28px;
  border-radius:999px;
  background:var(--purple);
  color:#fff;
  font-size:.97rem;
  font-weight:600;
  box-shadow:0 14px 30px -16px rgba(91,22,232,.85);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease;
}
.sup-btn svg{width:18px;height:18px}
.sup-btn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 20px 36px -16px rgba(91,22,232,.95)}

/* ---------- Getting started page ---------- */

/* trail back up to Support, since this page sits under it */
.gs-crumb{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 auto 18px;
  max-width:var(--wrap);
  padding-inline:24px;
  color:#8b90a0;
  font-size:.88rem;
  font-weight:600;
}
.gs-crumb a{color:#5d6270;transition:color .22s ease}
.gs-crumb a:hover{color:var(--purple);text-decoration:none}
.gs-crumb svg{width:14px;height:14px;flex:none}

/* the steps carry their own numbering, so the marker is dropped */
.gs-steps{
  list-style:none;
  counter-reset:gs;
  margin:0 0 8px;
  padding:0;
}

.gs-step{
  position:relative;
  counter-increment:gs;
  padding:0 0 30px 62px;
}

.gs-step::before{
  content:counter(gs);
  position:absolute;
  left:0; top:0;
  width:38px; height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  box-shadow:0 10px 22px -12px rgba(91,22,232,.9);
}

/* the rail joining one step to the next — not after the last */
.gs-step::after{
  content:"";
  position:absolute;
  left:18px; top:46px; bottom:10px;
  width:2px;
  background:linear-gradient(var(--line),rgba(230,232,239,.25));
}
.gs-step:last-child{padding-bottom:4px}
.gs-step:last-child::after{display:none}

.gs-step h3{
  margin:6px 0 10px;
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:-.01em;
  scroll-margin-top:28px;
}

.gs-step p{margin:0 0 14px}
.gs-step p:last-child{margin-bottom:0}

/* what to have ready before the first call */
.gs-check{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:11px;
}

.gs-check li{
  position:relative;
  padding-left:30px;
  font-size:1rem;
  line-height:1.7;
  color:#3f4454;
}

.gs-check li::before{
  content:"";
  position:absolute;
  left:0; top:.5em;
  width:16px; height:16px;
  border-radius:50%;
  background:rgba(91,22,232,.12) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b16e8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px 10px no-repeat;
}

/* the roles a new institution assigns during setup */
.gs-roles{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
}

.gs-roles li{
  padding:7px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#4a4f60;
  font-size:.88rem;
  font-weight:600;
  transition:border-color .22s ease,color .22s ease,transform .22s ease;
}
.gs-roles li:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px)}

/* ---------- Security page ---------- */

/* four abreast on one line — auto-fit would drop the fourth card onto a
   row of its own and stretch it full width */
.sec-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 30px;
}

/* two up once four no longer fit, then stacked on small handsets */
@media (max-width:860px){
  .sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sec-grid{grid-template-columns:1fr}
}

.sec-card{
  padding:18px 16px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  transition:border-color .24s ease,transform .24s ease,box-shadow .24s ease;
}
.sec-card:hover{
  border-color:rgba(91,22,232,.4);
  transform:translateY(-3px);
  box-shadow:0 20px 40px -30px rgba(40,12,110,.7);
}

.sec-ico{
  width:34px;height:34px;
  display:grid;place-items:center;
  margin-bottom:11px;
  border-radius:11px;
  background:rgba(91,22,232,.1);
  color:var(--purple);
}
.sec-ico svg{width:18px;height:18px}

/* the narrow track leaves long words nowhere to break */
.sec-card h3{
  margin:0 0 6px;
  font-size:.94rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
  hyphens:auto;
}

.sec-card p{
  margin:0 !important;
  font-size:.87rem !important;
  line-height:1.62 !important;
  color:#5d6270 !important;
  hyphens:auto;
}

/* the access table is the one thing here that may need to scroll */
.sec-table-wrap{
  margin:0 0 28px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:16px;
}

.sec-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:.92rem;
}

.sec-table th,
.sec-table td{
  padding:13px 18px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  line-height:1.6;
}

.sec-table thead th{
  background:rgba(91,22,232,.06);
  color:var(--ink);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  white-space:nowrap;
}

.sec-table tbody th{
  color:var(--ink);
  font-weight:700;
  white-space:nowrap;
}

.sec-table td{color:#5d6270}
.sec-table tbody tr:last-child th,
.sec-table tbody tr:last-child td{border-bottom:0}
.sec-table tbody tr:hover th,
.sec-table tbody tr:hover td{background:rgba(91,22,232,.03)}

/* who is responsible for what — the platform, and the institution */
.sec-split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:18px;
  margin:0 0 28px;
}

.sec-col{
  padding:22px 22px 20px;
  border-radius:16px;
  background:#faf8ff;
  border:1px solid var(--line);
}

.sec-col h3{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 14px;
  font-size:.96rem;
  font-weight:700;
}
.sec-col h3 svg{width:18px;height:18px;flex:none;color:var(--purple)}

.sec-col .gs-check li{font-size:.94rem;line-height:1.65}

/* ---------- About page ---------- */
/* the story reads as a plain document: no sidebar, and no panel behind it —
   just a centred column on the page's own white */
#about .doc-body{
  /* no reading cap — the text runs the full width of the page column so a
     sentence fits on as few lines as possible */
  max-width:none;
  margin-inline:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* the callouts and the closing line run the full width with it */
#about .doc-callout{max-width:none}

/* a narrative rather than a reference document, so the text runs a size
   larger than a guide's, closer to the policy page's reading treatment */
#about .doc-body p{font-size:1.06rem;line-height:1.95}
#about .doc-lead{font-size:1.18rem !important}
#about .doc-callout p{font-size:1.1rem;line-height:1.8}
#about .doc-callout{margin:26px 0 28px}

/* the closing line, set apart from the story above it */
#about .doc-body .about-sign{
  margin:34px 0 26px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--purple);
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:-.01em;
}

@media (max-width:620px){
  /* the phone block further down pads .doc-body for the panel this page
     does not have, so it is overridden here at matching specificity */
  #about .doc-body{padding:0}
  #about .doc-body p{font-size:1rem;line-height:1.85}
  #about .doc-lead{font-size:1.08rem !important}
  #about .doc-callout p{font-size:1.02rem}
  #about .doc-body .about-sign{font-size:1rem}
}

/* ---------- IRISWEBX Live landing page ---------- */
.live-feat{padding:46px 0 12px}

.live-feat h2{
  margin:0 0 6px;
  text-align:center;
  font-size:clamp(1.3rem,3vw,1.7rem);
  font-weight:700;
  letter-spacing:-.02em;
}

.live-feat-sub{
  margin:0 auto 30px;
  max-width:620px;
  text-align:center;
  color:#5d6270;
  font-size:1rem;
  line-height:1.65;
}

/* Ten features, two rows of five. The container runs wider than the 1180px
   text column so five cards still get a usable width, and the column gap is
   tightened from the features page's 30px for the same reason.
   The backing bar and ribbon tail overhang the grid, hence the bottom room. */
#live-home .live-feat > .wrap{max-width:1340px}

#live-home .ft-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:40px 20px;
  padding-bottom:34px;
}

/* a little more of the flag for the longer titles at this width */
#live-home .ft-flag h3{max-width:90%}

/* five is only comfortable on a wide screen */
@media (max-width:1200px){
  #live-home .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 26px}
}
@media (max-width:820px){
  #live-home .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  #live-home .ft-grid{grid-template-columns:1fr}
}

/* the closing statement reuses the home page's centred band */
#live-home .features{padding:40px 20px 10px}
#live-home .features h2{margin-bottom:10px}

/* the phone shot is 433px natively — the shared 550px would upscale it */
#live-home .stage-mobile{padding-top:34px}
#live-home .mockup-mobile{width:min(350px,100%)}

/* "LIVE" carries the wordmark's red rather than the ink used on the ALMS hero */
#live-home .hero-title .rest{color:var(--live-red)}

@media (max-width:620px){
  .live-feat{padding:30px 0 8px}
  .live-feat-sub{margin-bottom:22px;font-size:.95rem}
}

/* ---------- The support guides run wider than the policy doc ----------
   They carry tables and card grids rather than continuous prose, so the white
   panel is given more room than the 820px reading column it inherits. */
#get-started .doc .wrap,
#security   .doc .wrap,
#account    .doc .wrap,
#live-support .doc .wrap,
#get-started .gs-crumb,
#security   .gs-crumb,
#account    .gs-crumb,
#live-support .gs-crumb{max-width:1340px}

#get-started .doc-body,
#security   .doc-body,
#account    .doc-body,
#live-support .doc-body{
  max-width:none;
  /* auto side margins switch a grid item from "stretch" to "fit-content",
     and fit-content bottoms out at min-content — which the role table's
     520px min-width then dictated, overflowing the phone screen */
  margin-inline:0;
  padding:44px 52px 40px;
}

/* a 900px line of body text is unreadable, so the prose keeps its measure
   inside the wider panel — tables, card grids and chips take the full width */
#get-started .doc-body > p,
#security   .doc-body > p,
#account    .doc-body > p,
#live-support .doc-body > p,
#get-started .doc-body > .gs-check,
#security   .doc-body > .gs-check,
#account    .doc-body > .gs-check,
#live-support .doc-body > .gs-check,
#get-started .doc-body > .gs-steps,
#security   .doc-body > .gs-steps,
#account    .doc-body > .gs-steps,
#get-started .doc-body > .doc-callout,
#security   .doc-body > .doc-callout,
#account    .doc-body > .doc-callout,
#live-support .doc-body > .doc-callout{max-width:780px}

/* the panel no longer needs the cramped card type introduced to fit four up */
#get-started .sec-card,
#security   .sec-card,
#account    .sec-card{padding:20px 18px 18px}

#get-started .sec-card h3,
#security   .sec-card h3,
#account    .sec-card h3{font-size:1rem}

#get-started .sec-card p,
#security   .sec-card p,
#account    .sec-card p{font-size:.9rem !important}

/* Below the sidebar breakpoint the panel is already full width. These carry
   the id, because the padding above would otherwise outrank the plain
   .doc-body rules in the phone blocks at the foot of this file. */
@media (max-width:940px){
  #get-started .doc-body,
  #security   .doc-body,
  #account    .doc-body,
  #live-support .doc-body{padding:40px 44px 36px}
}

@media (max-width:620px){
  #get-started .doc-body,
  #security   .doc-body,
  #account    .doc-body,
  #live-support .doc-body{padding:24px 20px 22px}
}

/* ---------- Assistant ---------- */
.chat-fab{
  position:fixed;
  right:24px; bottom:24px;
  z-index:60;
  width:60px;height:60px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(91,22,232,.9);
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease;
}

.chat-fab span{
  /* label kept for the accessible name only */
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* both icons share the grid cell; only one is shown at a time */
.chat-fab .fab-ico{
  grid-area:1/1;
  width:26px;height:26px;
  transition:transform .25s ease,opacity .2s ease;
}

.chat-fab .fab-shut{opacity:0;transform:rotate(-90deg) scale(.7)}
.chat-fab.is-open .fab-chat{opacity:0;transform:rotate(90deg) scale(.7)}
.chat-fab.is-open .fab-shut{opacity:1;transform:none}
.chat-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 22px 42px -14px rgba(91,22,232,1)}
.chat-fab:active{transform:translateY(-1px) scale(.98)}

.chat-fab:focus-visible{outline:3px solid rgba(91,22,232,.45);outline-offset:4px}

.chat-panel{
  position:fixed;
  right:24px; bottom:92px;
  z-index:61;
  width:min(380px,calc(100vw - 32px));
  max-height:min(560px,calc(100vh - 130px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 34px 70px -30px rgba(30,8,80,.5);
  animation:chat-in .28s cubic-bezier(.16,1,.3,1) both;
}

@keyframes chat-in{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to  {opacity:1;transform:none}
}

.chat-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 14px 14px 16px;
  background:var(--purple);
  color:#fff;
}

.chat-avatar{
  width:36px;height:36px;
  flex:none;
  border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  overflow:hidden;
}
.chat-avatar img{width:30px;height:30px;object-fit:contain}

.chat-id{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.chat-id strong{font-size:.95rem;font-weight:700}
.chat-id small{font-size:.74rem;opacity:.85}

.chat-close{
  width:30px;height:30px;
  flex:none;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease;
}
.chat-close svg{width:15px;height:15px}
.chat-close:hover{background:rgba(255,255,255,.32)}

.chat-log{
  flex:1;
  overflow-y:auto;
  /* the page-wide smooth scrolling must not apply here — new messages
     should appear immediately, not glide into view */
  scroll-behavior:auto;
  overscroll-behavior:contain;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#fbfaff;
}

.msg{
  max-width:86%;
  padding:11px 14px;
  border-radius:14px;
  font-size:.9rem;
  line-height:1.55;
  overflow-wrap:anywhere;
  animation:msg-in .25s ease both;
}

@keyframes msg-in{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:none}
}

.msg-bot{
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--line);
  color:#3a3f50;
  border-bottom-left-radius:5px;
}

.msg-bot strong{color:var(--ink)}
.msg-bot a{color:var(--purple);font-weight:600}

.msg-me{
  align-self:flex-end;
  background:var(--purple);
  color:#fff;
  border-bottom-right-radius:5px;
}

.dots{display:inline-flex;gap:4px;padding:2px 0}
.dots i{
  width:6px;height:6px;
  border-radius:50%;
  background:#b9bccd;
  animation:dot 1.1s ease-in-out infinite;
}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}

@keyframes dot{
  0%,60%,100%{opacity:.35;transform:translateY(0)}
  30%        {opacity:1;transform:translateY(-3px)}
}

.chat-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:0 14px 10px;
  background:#fbfaff;
}

.chip{
  padding:7px 13px;
  border:1px solid rgba(91,22,232,.3);
  border-radius:999px;
  background:#fff;
  color:var(--purple);
  font-family:inherit;
  font-size:.79rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.chip:hover{background:#f4efff;transform:translateY(-1px)}

.chat-input{
  display:flex;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:#fff;
}

.chat-input input{
  flex:1;
  min-width:0;
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fdfdff;
  font-family:inherit;
  font-size:.9rem;
  color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.chat-input input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(91,22,232,.13);
}

.chat-input button{
  width:42px;height:42px;
  flex:none;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.chat-input button svg{width:18px;height:18px}
.chat-input button:hover{transform:scale(1.07)}

@media (max-width:620px){
  .chat-fab{right:14px;bottom:14px;width:54px;height:54px}
  .chat-fab .fab-ico{width:24px;height:24px}
  /* the pages carry viewport-fit=cover, so the gesture bar and the address
     bar both need accounting for — dvh tracks the address bar as it hides,
     and the vh line above it is the fallback for browsers without dvh */
  .chat-fab{
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .chat-panel{
    right:10px; left:10px;
    bottom:calc(78px + env(safe-area-inset-bottom, 0px));
    width:auto;
    max-height:calc(100vh - 150px);
    max-height:calc(100dvh - 150px);
  }
}

/* the star row, shared by the feedback form and the testimonial cards on the
   home and IRISWEBX Live pages */
.fb-stars{display:inline-flex;gap:2px;flex:none}
.fb-stars svg{width:16px;height:16px;fill:#dfe1ec}
.fb-stars svg.on{fill:#f5a623}

/* ---------- Feedback form ---------- */
.feedback{
  padding:20px 0 76px;
}

.fb-card{
  max-width:820px;
  margin-inline:auto;
  padding:40px 40px 36px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 30px 70px -40px rgba(40,12,110,.42);
}

.fb-head{text-align:center;margin-bottom:32px}

.fb-head h2{
  margin:0 0 10px;
  font-size:clamp(1.35rem,3vw,1.9rem);
  font-weight:700;
  letter-spacing:-.01em;
}

.fb-head p{
  margin:0 auto;
  max-width:520px;
  font-size:.97rem;
  color:#5d6270;
  line-height:1.6;
}

.fb-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:18px;
  min-width:0;
}

.field label,
.rating-field legend{
  font-size:.88rem;
  font-weight:600;
  color:var(--ink);
  padding:0;
}

.req{color:var(--magenta)}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:11px;
  background:#fdfdff;
  font-family:inherit;
  font-size:.95rem;
  color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.field textarea{resize:vertical;min-height:120px;line-height:1.6}

.field input::placeholder,
.field textarea::placeholder{color:#a7abba}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(91,22,232,.13);
}

.field input.is-bad,
.field textarea.is-bad{
  border-color:#e03b6a;
  box-shadow:0 0 0 4px rgba(224,59,106,.12);
}

.err{
  color:#d62e5e;
  font-size:.8rem;
  min-height:1em;
}

.err:empty{display:none}

.field-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.counter{color:#9aa0b0;font-size:.78rem;margin-left:auto}

/* ---- video upload ---- */
.opt{
  margin-left:4px;
  padding:2px 7px;
  border-radius:999px;
  background:#f2effb;
  color:#7b7f92;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.3px;
}

.file-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:22px 18px;
  border:1.5px dashed #d3cdf0;
  border-radius:14px;
  background:#fcfbff;
  color:var(--purple);
  text-align:center;
  cursor:pointer;
  transition:border-color .22s ease,background .22s ease,transform .22s ease;
}

.file-drop:hover,
.file-drop.is-over{
  border-color:var(--purple);
  background:#f7f3ff;
  transform:translateY(-1px);
}

.file-drop svg{width:24px;height:24px}
.fd-text{font-size:.92rem;font-weight:500;color:#4a4f60}
.fd-text strong{color:var(--purple);font-weight:600}
.fd-hint{font-size:.78rem;color:#9aa0b0}

.fd-picked{
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:#fcfbff;
}

.fd-picked video{
  width:100%;
  max-height:240px;
  border-radius:9px;
  background:#0d0b1a;
  display:block;
}

.fd-picked-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 4px 2px;
  font-size:.82rem;
  color:#7b7f92;
}

.fd-remove{
  border:0;
  background:none;
  padding:2px;
  color:#d62e5e;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
}
.fd-remove:hover{text-decoration:underline}

/* ---- star rating ---- */
.rating-field{
  border:0;
  margin:0 0 20px;
  padding:0;
}

.stars{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:2px;
}

.stars input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

.stars label{
  cursor:pointer;
  color:#dfe1ec;
  line-height:0;
  padding:3px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}

.stars label svg{width:31px;height:31px;fill:currentColor}

/* filled state is driven by script (see the feedback block in index.html),
   which paints every star up to the hovered or selected one */
.stars label.on{color:#f5a623}
.stars label.hot{transform:scale(1.12)}

.stars input:focus-visible + label{
  outline:3px solid rgba(91,22,232,.45);
  outline-offset:2px;
  border-radius:6px;
}

.rating-text{
  margin-left:12px;
  font-size:.85rem;
  font-weight:600;
  color:#6a6f80;
}

/* ---- actions ---- */
.fb-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  margin-top:6px;
}

/* white by default, purple while it is being pressed */
.btn-submit{
  padding:14px 34px;
  border:2px solid var(--purple);
  border-radius:999px;
  background:#fff;
  color:var(--purple);
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 10px 24px -16px rgba(91,22,232,.6);
  transition:background .18s ease,color .18s ease,border-color .18s ease,
             transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease;
}

.btn-submit:hover:not(:disabled){
  transform:translateY(-2px);
  background:#faf7ff;
  box-shadow:0 18px 32px -16px rgba(91,22,232,.75);
}

/* the click itself — and the uploading state — turn it purple */
.btn-submit:active:not(:disabled),
.btn-submit.is-sending{
  background:var(--purple);
  border-color:transparent;
  color:#fff;
  transform:translateY(0);
  box-shadow:0 14px 30px -14px rgba(91,22,232,.85);
}

.btn-submit:focus-visible{
  outline:3px solid rgba(91,22,232,.4);
  outline-offset:3px;
}

.btn-submit:disabled{cursor:default}
.btn-submit:disabled:not(.is-sending){opacity:.62}

.fb-note{
  margin:0;
  font-size:.8rem;
  color:#9aa0b0;
  flex:1 1 220px;
}

.fb-status{margin:16px 0 0;font-size:.9rem}
.fb-status.is-bad-status{color:#d62e5e}

/* ---- success panel ---- */
.fb-done{text-align:center;padding:16px 0 6px}

.fb-tick{
  width:64px;height:64px;
  margin:0 auto 18px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  box-shadow:0 16px 34px -16px rgba(91,22,232,.9);
  animation:tick-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.fb-tick svg{width:30px;height:30px}

@keyframes tick-pop{
  from{transform:scale(.5);opacity:0}
  to  {transform:scale(1);opacity:1}
}

.fb-done h3{margin:0 0 8px;font-size:1.3rem;font-weight:700}
.fb-done p{margin:0 auto 22px;max-width:430px;color:#5d6270;font-size:.95rem;line-height:1.6}

.fb-done-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.btn-reset{
  display:inline-block;
  padding:11px 24px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--purple);
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .22s ease,transform .22s ease;
}
.btn-reset:hover{border-color:var(--purple);transform:translateY(-2px);text-decoration:none}

/* the address makes this one longer than the others */
.btn-reset.is-mail{
  max-width:100%;
  font-size:.86rem;
  overflow-wrap:anywhere;
}

/* ---------- Footer ---------- */
footer{padding-top:26px}

.foot-grid{
  display:flex;
  justify-content:flex-start;
  /* sits one gutter (24px) left of the copyright row below */
  padding-left:0;
  padding-bottom:44px;
  font-size:clamp(.95rem,2.2vw,1.15rem);
  color:var(--ink);
}

.foot-info{text-align:left}

.foot-tag{margin:0 0 16px;line-height:1.45}

.foot-grid address{
  font-style:normal;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

/* one contact line: icon badge + text, kept flush left */
.fi-row{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.96rem;
  color:var(--ink);
  transition:color .22s ease;
}

.fi-row span:last-child{text-align:left}

a.fi-row:hover{color:var(--purple);text-decoration:none}
a.fi-row:hover .fi-ico{
  border-color:var(--purple);
  background:var(--purple);
  color:#fff;
}

.fi-ico{
  width:34px;height:34px;
  display:grid;place-items:center;
  flex:none;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:#faf8ff;
  color:var(--purple);
  transition:background .22s ease,border-color .22s ease,color .22s ease;
}

.fi-ico svg{width:17px;height:17px}

.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 28px;
  padding-top:22px;
  padding-bottom:34px;
  border-top:1px solid var(--line);
  font-size:.98rem;
}

/* plain text, not links — nothing here is clickable */
.foot-links{display:flex;flex-wrap:wrap;gap:12px 34px}

/* ---------- Scroll reveal ----------
   The .reveal class is applied by script, so with JS disabled
   every element simply renders visible and unanimated. */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1),
             transform .75s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ---------- Reduced motion ----------
   One switch that disables every animation on the page. */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .mainnav ul{font-size:.94rem;gap:8px 22px}
  .topbar-tag{right:24px;max-width:52%}
  /* too narrow for one line at a readable size — let it wrap again */
  .role-line{font-size:.9rem;gap:8px 10px}
  .role-line b{margin-left:10px}
  .rl-pair b{margin-right:10px}
}

@media (max-width:620px){
  .topbar{height:96px}
  .logo-plate{left:16px;top:8px;padding:13px 22px}
  .logo-mark{height:54px}
  .topbar-tag{right:14px;max-width:50%;font-size:.74rem;letter-spacing:.2px}
  .mainnav ul{font-size:.88rem;gap:2px 16px;padding:10px 16px 12px}
  .wrap{padding-inline:16px}
  .hero-title{font-size:1.6rem}
  .hero-title .slab{padding-left:16px;border-radius:0 18px 18px 0}
  .hero-title .rest{padding-left:16px;padding-top:6px}
  .stage{padding:30px 8px 6px}
  .stage-desktop{padding-top:36px}
  .roles{padding:32px 0 6px}
  .features{padding:40px 20px 8px}
  .testimonials{padding:44px 0 10px}
  .testimonials h2{margin-bottom:26px}
  .t-card{padding:24px 20px 20px}
  .t-mark{font-size:3.6rem;right:16px}
  .showcase{padding:40px 20px 46px}
  .college-box{padding:11px 20px}
  .foot-bottom{justify-content:flex-start}

  /* documentation page on phones */
  .doc{padding:6px 0 52px}
  .doc-body{padding:24px 20px 22px;border-radius:16px}
  .doc-body p{font-size:.96rem;line-height:1.8}
  .doc-lead{font-size:1rem !important}
  .doc-callout{flex-direction:column;gap:12px;padding:18px 18px}
  #policy .doc-callout{padding-left:14px}
  #policy .doc-body p{font-size:1.04rem;line-height:1.85}
  #policy .doc-lead{font-size:1.12rem !important}
  #policy .doc-callout p{font-size:1.04rem}
  .doc-next .sup-btn,
  .doc-next .btn-reset{width:100%;justify-content:center;text-align:center}

  /* features page on phones */
  .ft-grid{gap:34px 20px}
  .ft-flag{min-height:104px;border-radius:0 0 96px 0}
  .ft-flag h3{font-size:1rem;max-width:82%}
  .ft-card > p{margin-top:26px;line-height:1.75}
  .ft-cta{padding:34px 0 54px}
  .ft-cta-box{padding:22px 20px;flex-direction:column;align-items:flex-start}
  .ft-cta-actions{width:100%}
  .ft-cta-actions .sup-btn,
  .ft-cta-actions .btn-reset{width:100%;justify-content:center;text-align:center}

  /* support page stacks on phones */
  .sup-search{padding-inline:16px}
  .sup-search button{width:100%;justify-content:center}
  .sup-cards{padding:34px 0 6px}
  .sup-results{padding:26px 0 2px}
  .sup-res-head{flex-direction:column;gap:2px}
  .sup-res a{padding:13px 15px}
  .faq-box{grid-template-columns:1fr;gap:24px;padding:24px 20px}
  .faq-list summary{padding-right:44px;font-size:.95rem}
  .faq-body{padding-right:44px}
  .sup-contact{padding:30px 0 50px}
  .sup-contact-box{flex-direction:column;align-items:flex-start}
  .sup-btn{width:100%;justify-content:center}

  /* getting-started steps on phones: smaller badge, tighter indent */
  .gs-crumb{padding-inline:16px;font-size:.84rem}
  .gs-step{padding-left:48px;padding-bottom:26px}
  .gs-step::before{width:32px;height:32px;font-size:.88rem}
  .gs-step::after{left:15px;top:40px}
  .gs-step h3{font-size:1rem}
  .gs-check li{font-size:.96rem}

  /* security page on phones — one card per row, so the text can breathe again */
  .sec-grid{gap:12px}
  .sec-card{padding:18px 18px 16px}
  .sec-card h3{font-size:1rem}
  .sec-card p{font-size:.92rem !important}
  .sec-col{padding:18px 18px 16px}
  .sec-table th,
  .sec-table td{padding:11px 14px}

  /* feedback form stacks to one column on phones */
  .feedback{padding:6px 0 54px}
  .fb-card{padding:26px 20px 24px;border-radius:18px}
  .fb-row{grid-template-columns:1fr;gap:0}
  .stars label svg{width:30px;height:30px}
  .rating-text{margin-left:9px;font-size:.78rem}
  .fb-actions{flex-direction:column;align-items:stretch}
  .btn-submit{width:100%}
  .fb-note{text-align:center}

  /* justified text opens ugly rivers of whitespace in a narrow column */
  .intro{text-align:left;hyphens:auto}

  /* comfortable thumb targets (~44px tall) for every tapped link */
  .mainnav a{padding-block:13px}
  .foot-links{gap:2px 26px}
  .foot-links span{display:inline-block;padding-block:7px}

  /* the footer's email and phone rows were 34px — under the thumb minimum */
  .fi-row{padding-block:5px}

  /* the support cards' "Learn More" and the FAQ rows likewise */
  .sup-card > a{padding-block:11px}
  .faq-list summary{padding-block:18px}

  /* the sidebar pills and the breadcrumb back to Support */
  .pol-side a{padding-block:12px}
  .gs-crumb a{display:inline-block;padding-block:10px}

  /* the topbar strapline was under 11px on a 360px screen */
  .topbar-tag{font-size:.8rem}

  /* small print that had dropped below comfortable reading */
  .t-who small{font-size:.84rem}
  .chat-id small{font-size:.78rem}
  .counter{font-size:.82rem}
  .opt{font-size:.76rem}
  .fd-hint{font-size:.82rem}
}

/* very small handsets (iPhone SE and similar) */
@media (max-width:380px){
  .mainnav ul{font-size:.82rem;gap:2px 13px}
  .hero-title{font-size:1.42rem}
  /* the strapline shrank below 11px here; give it the room to stay legible
     by letting it take more of the bar rather than shrinking further */
  .topbar-tag{font-size:.78rem;max-width:54%}
}