/* The landing pages at /digital-notice-board, /employee-communication and the rest.

   One sheet for all eight: the same palette, type and 1120px width as the home page, the blog and
   the policies, so a visitor who arrives on one of these from a search and then clicks through to
   the product is never handed a different-looking site.

   These pages exist for search. Each is about one thing somebody types into Google, answers that
   question properly, and offers the demo at the end rather than at the top. */
:root{--ink:#16120F;--ink2:#4A4340;--muted:#7A716C;--hint:#A29993;--line:#E8E2DD;--wash:#F7F4F1;--paper:#FFF;
  --orange:#F26522;--orange-deep:#C2410C;--orange-wash:#FFF1E9;
  --disp:'Archivo',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:var(--orange-deep)}
a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
img{max-width:100%}

.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;height:74px;gap:18px}
.brand{display:block;width:168px;height:44px;flex-shrink:0;background:no-repeat center/contain
  url("/_content/IRISBOARD.Shared.Ui/img/irisboard-logo-black.png")}
.sp{flex:1}
.hd-link{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none}
.hd-link:hover{color:var(--orange-deep)}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:13.5px;font-weight:600;
  padding:11px 20px;border-radius:9px;border:1px solid transparent;background:var(--orange);color:#fff;
  text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--orange-deep)}
.btn-line{background:none;border-color:var(--line);color:var(--ink)}
.btn-line:hover{background:none;border-color:var(--orange);color:var(--orange-deep)}

main{padding-bottom:10px}
.crumbs{font-size:13px;color:var(--muted);padding-top:22px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--orange-deep)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)}

/* The opening: the answer on the left, the photograph on the right. Under 900px the photograph
   drops below the words — on a phone it is context, not the headline. */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:30px 0 20px}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.2vw,44px);letter-spacing:-.03em;
  line-height:1.1;margin:10px 0 16px;text-wrap:balance}
.hero .lede{font-size:18.5px;color:var(--ink2);margin-bottom:22px}
.hero-img img{display:block;width:100%;height:auto;border-radius:16px;background:var(--wash)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:18px}
  .hero-img{order:-1}
}

section{padding:34px 0}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(23px,2.6vw,29px);letter-spacing:-.02em;
  line-height:1.2;margin-bottom:14px;text-wrap:balance;max-width:24ch}
h3{font-family:var(--disp);font-weight:600;font-size:18px;margin-bottom:6px}
p{margin-bottom:16px;color:var(--ink2);max-width:72ch}
ul,ol{margin:0 0 18px 22px;color:var(--ink2);max-width:72ch}
li{margin-bottom:8px}
strong{color:var(--ink);font-weight:600}
.sec-line{border-top:1px solid var(--line)}

/* Three or four short pieces side by side: what the thing does, who it is for, what it replaces. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{border:1px solid var(--line);border-radius:14px;padding:20px}
.card p{font-size:15px;margin:0;line-height:1.6}
.card-ic{width:34px;height:34px;border-radius:8px;background:var(--orange-wash);color:var(--orange-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
@media (max-width:900px){.cards,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards,.cards.four{grid-template-columns:1fr}}

/* A picture with the point beside it, alternating sides down the page. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{display:block;width:100%;height:auto;border-radius:16px;background:var(--wash)}
.split.rev .split-text{order:2}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:26px}
  .split.rev .split-text{order:0}
}

.callout{background:var(--wash);border-left:3px solid var(--orange);padding:18px 20px;
  border-radius:0 10px 10px 0;margin:6px 0 20px;max-width:72ch}
.callout p:last-child{margin-bottom:0}

table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px;max-width:72ch}
th,td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
td{color:var(--ink2)}

/* The questions people actually type. Open by default: a crawler reads what is in the HTML, and a
   reader should not have to click to find out whether the page answers them. */
.faq{display:grid;gap:14px;margin-top:18px;max-width:80ch}
.faq-item{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.faq-item h3{margin-bottom:6px;font-size:17px}
.faq-item p{margin:0;font-size:15.5px}

.cta{background:var(--ink);color:#fff;border-radius:18px;padding:36px 38px;margin:20px 0 40px;
  display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center}
.cta h2{color:#fff;margin-bottom:8px;max-width:20ch}
.cta p{color:#C9BFB8;margin:0;max-width:56ch}
@media (max-width:760px){.cta{grid-template-columns:1fr;padding:28px 24px}}

.more-reading{border-top:1px solid var(--line);padding-top:24px;margin-bottom:10px}
.more-reading h2{font-size:15px;font-family:var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.more-reading ul{list-style:none;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.more-reading li{margin:0}
.more-reading a{font-size:15px;text-decoration:none;color:var(--ink2)}
.more-reading a:hover{color:var(--orange-deep)}
@media (max-width:640px){.more-reading ul{grid-template-columns:1fr}}

/* ── footer ── the site's own, so these pages are not a separate island. */
.ft{border-top:1px solid var(--line);padding:40px 0 22px;margin-top:40px;color:var(--muted);font-size:13.5px}
.ft-cols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:40px;align-items:start}
.brand-ft{display:block;width:150px;height:40px;margin-bottom:14px;background:no-repeat center/contain
  url("/_content/IRISBOARD.Shared.Ui/img/irisboard-logo-black.png")}
.ft-brand p{font-size:13px;color:var(--muted);line-height:1.6;max-width:32ch;margin-bottom:12px}
.ft-by{font-size:12.5px;color:var(--muted)}
.ft-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.ft-col ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:9px}
.ft-col li{margin:0}
.ft-col a{font-size:13.5px;color:var(--ink2);text-decoration:none}
.ft-col a:hover{color:var(--orange-deep)}
.ft-base{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ft-base a{color:var(--muted);text-decoration:none}
.ft-base a:hover{color:var(--orange-deep)}
.ft-sp{flex:1}
.app-menu{position:relative}
.ft-btn{display:inline-flex;align-items:center;gap:6px;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;padding:8px 14px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink)}
.ft-btn:hover{border-color:var(--orange);color:var(--orange-deep)}
.app-pop{position:absolute;right:0;bottom:100%;padding-bottom:8px;display:none;z-index:20}
.app-pop-in{display:flex;flex-direction:column;gap:6px;min-width:250px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(22,18,15,.12)}
.app-menu:hover .app-pop,.app-menu:focus-within .app-pop{display:block}
.app-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;
  color:var(--ink);font-weight:600;font-size:13px;text-decoration:none}
.app-pop a:hover,.app-pop a:focus-visible{background:var(--wash);color:var(--orange-deep);outline:none}
.app-pop small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
@media (max-width:860px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:32px}
  .ft-brand{grid-column:1 / -1}
}
@media (max-width:480px){.ft-cols{grid-template-columns:1fr;gap:28px}}

@media (max-width:560px){
  body{font-size:16px}
  .brand{width:130px}
  .hd-in{gap:12px}
  .hero .lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}