/* ====== Simplisyt — style.css: page styles, loaded after common.css. ====== */

/* ##########################################################################
   Home — index.html (.page-home)
   ########################################################################## */

/* --- kept: flat-card alternative for the hero art, swap back by restoring .methods markup --- */
.page-home .methods{position:relative; width:100%; max-width:520px; aspect-ratio:100/89; container-type:inline-size;}
/* every offset and size is in cqw, so the cascade holds its geometry at any width */
.page-home .mcard{
  position:absolute; width:36cqw; aspect-ratio:1; border-radius:var(--r-md);
  padding:4.5cqw; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform var(--t);
}
.page-home .mcard:hover{transform:translateY(-5px)}
.page-home .mcard-top{display:flex; align-items:flex-start; justify-content:space-between}
.page-home .mcard-icon{width:6.5cqw; height:6.5cqw}
.page-home .mcard-mark{width:5cqw; height:auto; opacity:.45}
.page-home .mcard-label{font-size:4.4cqw; font-weight:700; line-height:1.15; letter-spacing:-.02em}
.page-home .mcard-lead{display:block; font-size:3.1cqw; font-weight:500; opacity:.66; letter-spacing:0}

.page-home .methods-thread{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.page-home .mcard--a{left:62cqw; top:0;     background:var(--ink); color:#fff}
.page-home .mcard--b{left:0;     top:30cqw; background:#fff;      color:var(--navy); box-shadow:inset 0 0 0 1px rgba(22,32,58,.1)}
.page-home .mcard--c{left:56cqw; top:53cqw; background:#06B6E4;   color:var(--navy)}

@media (max-width:980px){
  .page-home .methods{max-width:430px}
  .page-home .hero-grid .hero-art {order: -1;justify-content: flex-start;}
}
@media (max-width:420px){
  .page-home .methods{max-width:330px}
}
@media (max-width:980px){
  .page-home .hero{padding:118px 0 56px; background-position: center left, center;}
  .page-home .hero-grid{grid-template-columns:1fr; gap:40px}
}

/* ---------- stages ---------- */
.page-home .how-grid{display:grid; grid-template-columns:0.4fr 0.6fr; gap:88px; align-items:start}
.page-home .how-intro{margin-bottom:0; max-width:none}
.page-home .how-intro h2{max-width:400px}

/* a horizontal track: three nodes on one line, with a return arrow that closes the cycle */
.page-home .track{position:relative}
.page-home .track-nodes{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:0; padding:0; list-style:none}
.page-home .track-nodes::before{
  content:''; position:absolute; top:21px; left:12%; right:12%; height:2px; z-index:0;
  background:linear-gradient(90deg,#06B6E4,#01E8B9); opacity:.5;
}
.page-home .step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center}
.page-home .step-n{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; margin-bottom:18px;
  background:linear-gradient(135deg,#06B6E4,#01E8B9); color:var(--navy);
  font-weight:700; font-size:1rem;
  box-shadow:0 0 0 7px #fff;
}
.page-home .step h3{font-size:1.08rem; line-height:1.3; margin-bottom:8px}
.page-home .step p{font-size:.94rem; max-width:26ch}
.page-home .track-return{margin-top:28px}
.page-home .track-return svg{display:block; width:100%; height:56px}
@media (max-width:920px){
  .page-home .how-grid{grid-template-columns:1fr; gap:36px}
  .page-home .track-nodes{grid-template-columns:1fr; gap:28px}
  /* the rail runs disc to disc and stops at the last one, instead of trailing past its text */
  .page-home .track-nodes::before{display:none}
  .page-home .step:not(:last-child)::after{
    content:''; position:absolute; z-index:-1; left:20px; top:42px; bottom:-28px; width:2px;
    background:linear-gradient(180deg,#06B6E4,#01E8B9);
  }
  .page-home .step h3{padding-top:10px}
  /* badge on the left spanning both rows, title and copy stacked beside it */
  .page-home .step{display:grid; grid-template-columns:42px 1fr; column-gap:18px; align-items:start; text-align:left}
  .page-home .step-n{grid-row:1 / span 2; margin-bottom:0}
  .page-home .step h3{grid-column:2; margin-bottom:5px}
  .page-home .step p{grid-column:2; max-width:none}
  .page-home .track-return{display:none}
}

/* ---------- platform modules: four cells on solid brand cyan ---------- */
.page-home .brand-wash{background:linear-gradient(180deg,#FFFFFF 0,#A8E4F5 660px,#DFF3FB 1120px,#FFFFFF 1720px)}
.page-home .section--brand{background:#0B3B8C; color:rgba(255,255,255,.82)}
.page-home .section--brand h2{color:#fff}
.page-home .section--brand .eyebrow{color:rgba(255,255,255,.85)}
.page-home .section--brand .section-head p{color:rgba(255,255,255,.8)}
/* four separate cards in one row */
.page-home .modules-grid{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  grid-template-rows:auto 1fr auto auto;   /* title · copy · link · art */
}
.page-home .module{
  position:relative; text-decoration:none;
  /* subgrid: every card reads off the same four row tracks, so the copy starts on the
     same line in all of them however long the title or the description runs */
  display:grid; grid-row:span 4; grid-template-rows:subgrid;
  min-height:330px;
  background:#fff; border:1px solid transparent; border-radius:var(--r-lg);
  padding:34px 26px 30px;
  transition:border-color .25s ease;
}
/* hover draws a brand gradient that travels round the edge; the card fill never changes.
   The ring is a conic gradient masked down to a 1px frame (xor of padding box and border box). */
@property --ring{syntax:'<angle>'; inherits:false; initial-value:0deg}
.page-home .module::before{
  content:''; position:absolute; inset:-2px; border-radius:calc(var(--r-lg) + 2px);
  padding:2px; opacity:0; pointer-events:none;
  background:conic-gradient(from var(--ring), #06B6E4, #01E8B9, #0B3B8C, #06B6E4);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .25s ease;
}
.page-home .module:hover::before,.page-home .module:focus-visible::before{opacity:1; animation:ringSpin 3s linear infinite}
@keyframes ringSpin{to{--ring:360deg}}
.page-home .module h3{color:var(--navy); font-size:1.37rem; line-height:1.25; margin-bottom:0}

/* the title sits at the top, the copy drops to the bottom — air in between */
.page-home .module-swap{padding-top:14px}
.page-home .module p{font-size:.93rem; color:var(--body); max-width:none}

.page-home .module-art{margin:0 -8px -6px; line-height:0}
.page-home .module-art img{width:auto; max-width:100%; max-height:240px; height:auto; display:block; margin:0 auto}
.page-home .module-more{
  margin-top:8px; display:inline-flex; align-items:center; gap:7px;
  font-size:.95rem; font-weight:600; color:var(--accent);   /* 5.0:1 on white */
}
.page-home .module-more svg{transition:transform .2s ease}
.page-home .module:hover .module-more,.page-home .module:focus-visible .module-more{color:var(--navy)}
.page-home .module:hover .module-more svg{transform:translateX(4px)}

@media (max-width:1180px){
  .page-home .modules-grid{grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,auto 1fr auto auto)}
  .page-home .module{min-height:290px; padding:32px 26px 30px}
}
@media (max-width:720px){
  .page-home .modules-grid{grid-template-columns:1fr; grid-template-rows:repeat(4,auto 1fr auto auto)}
  .page-home .module{min-height:0; padding:30px 24px 28px}
  .page-home .module-swap{padding-top:14px}
}

/* ---------- what teams use it for: three framed cards (Dynata: 1px rule, no shadow) ---------- */
.page-home .uses{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.page-home .use{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid #06B6E4;
  border-radius:var(--r-lg);
  padding:14px 14px 30px;
}
.page-home .use-media img{
  width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; display:block;
  border-radius:9px;
  /* the source files are muted (mean saturation ~0.23), which reads as black and white;
     this lifts the grade back to colour without re-shooting */
  filter:saturate(1.45) brightness(1.06) contrast(1.04);
}
.page-home .use-body{margin-top:22px; padding:0 14px}
/* a Sago-style colour tag, so the copy sits on something and the row carries colour */
.page-home .use-media{position:relative}
.page-home .use-tag{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:5px 12px; border-radius:var(--r-pill);
  /* a white hairline round a dark fill: whatever the photo does underneath at any
     breakpoint, one of the two always has an edge against it */
  border:1px solid rgba(255,255,255,.95);
  font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
/* solid fills: a pale pill on a pale photo has no edge (measured 1.6:1 on the third image) */
.page-home .use-tag{color:#fff}
.page-home .use:nth-child(1) .use-tag{background:#06B6E4; color:var(--navy)}   /* brand cyan needs dark type: white on it is 2.38:1 */
.page-home .use:nth-child(2) .use-tag{background:#0A6455}
.page-home .use:nth-child(3) .use-tag{background:#1A2D6B}
.page-home .use-body h3{font-size:1.28rem; line-height:1.25; margin-bottom:10px; min-height:2.5em}
.page-home .use-body p{font-size:.99rem}
@media (max-width:860px){
  .page-home .uses{grid-template-columns:1fr; gap:22px}
  .page-home .use-body h3{min-height:0}
}

/* ---------- customer proof: centred, logo above the quote ---------- */
.page-home .quote{max-width:760px; margin:0 auto; text-align:center; display:block}
.page-home .quote-logo{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14px 22px; font-size:.92rem; font-weight:600; color:var(--muted); margin-bottom:38px;
}
.page-home .quote-logo span{display:block; margin-top:4px; font-weight:400; font-size:.8rem}
.page-home .quote-logo img{max-width:170px; height:auto}
.page-home .quote-body{margin:0}
.page-home .quote-body p{
  font-size:clamp(1.45rem,2.7vw,2.05rem); line-height:1.3; letter-spacing:-.02em;
  color:var(--ink); font-weight:600;
}
.page-home .quote-body strong{font-weight:700}
.page-home .quote-rule{border:0; border-top:1px solid var(--border); width:62%; margin:40px auto 32px}
.page-home .quote-meta{display:flex; flex-direction:column; align-items:center; gap:3px}
.page-home .quote-name{font-weight:700; color:var(--ink); font-size:1.08rem}
.page-home .quote-role{color:var(--muted); font-size:.98rem}
.page-home .quote-avatar{display:block; width:58px; height:58px; border-radius:50%; margin-top:20px; background:var(--surface-alt)}
.page-home .quote-avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
/* the empty state marks itself rather than pretending to be a testimonial */
.page-home .quote--empty .quote-logo{border:1px dashed rgba(0,116,158,.38); border-radius:var(--r-md)}
.page-home .quote--empty .quote-body p,.page-home .quote--empty .quote-name{color:var(--muted)}
.page-home .quote--empty .quote-avatar{background:transparent; border:1px dashed rgba(0,116,158,.38)}
@media (max-width:600px){
  .page-home .quote-rule{width:80%; margin:30px auto 24px}
}

/* ---------- faq ---------- */
.page-home .faq{max-width:780px; margin:0 auto}
.page-home .acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 2px; background:none; border:0; border-bottom:1px solid var(--border);
  font:inherit; font-size:1.05rem; font-weight:600; color:var(--ink); text-align:left; cursor:pointer;
}
.page-home .acc-head svg{flex:none; color:var(--muted); transition:transform var(--t)}
.page-home .acc-head[aria-expanded="true"] svg{transform:rotate(45deg)}
.page-home .acc-body{padding:20px 2px 26px; border-bottom:1px solid var(--border)}
/* an open question should not be fenced off from its own answer */
.page-home .acc-head[aria-expanded="true"]{border-bottom-color:transparent}
/* and the list should not close with a stray rule */
.page-home #faqList .acc-head:nth-last-of-type(1),.page-home #faqList .acc-body:nth-last-of-type(1){border-bottom-color:transparent}
/* ---------- phones: modules and use cards become swipe rows (one card and half the next) ---------- */
@media (max-width:640px){
  .page-home .modules-grid,.page-home .uses{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-right:-24px; padding-right:24px; padding-bottom:4px;
    scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .page-home .modules-grid::-webkit-scrollbar,.page-home .uses::-webkit-scrollbar{display:none}
  .page-home .modules-grid{grid-template-rows:none}
  .page-home .module,.page-home .use{flex:0 0 calc((100vw - 24px - 12px) / 1.5); scroll-snap-align:start}
  .page-home .module{display:flex; flex-direction:column; grid-row:auto; min-height:0; padding:26px 20px 22px}
  .page-home .module h3{font-size:1.2rem}
  .page-home .module-art{margin-top:auto; padding-top:14px}
  .page-home .use{padding:12px 12px 24px}
  .page-home .use-body{margin-top:18px; padding:0 8px}
  .page-home .use-body h3{font-size:1.14rem; min-height:0}
  .page-home .use-body p{font-size:.93rem}
}
@media (max-width:600px){
  .page-home .modules-grid,.page-home .uses{margin-right:-16px; padding-right:16px}
  .page-home .module,.page-home .use{flex-basis:calc((100vw - 16px - 12px) / 1.5)}
}

/* ---------- slider pagination: only shown where a row becomes a swipe row ---------- */
.page-home .slider-dots{display:none; justify-content:center; gap:2px; margin-top:18px}
.page-home .slider-dots button{
  width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.page-home .slider-dots button::before{
  content:''; display:block; width:8px; height:8px; border-radius:999px;
  background:rgba(26,45,107,.22); transition:width .25s ease, background-color .25s ease;
}
.page-home .slider-dots button[aria-current="true"]::before{width:22px; background:var(--accent)}
.page-home .slider-dots--on-dark button::before{background:rgba(255,255,255,.35)}
.page-home .slider-dots--on-dark button[aria-current="true"]::before{background:#fff}
.page-home .slider-dots button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:999px}
@media (max-width:640px){.page-home .slider-dots{display:flex}}

@media (max-width:980px){}

/* ##########################################################################
   Product Suite — product-suite.html (.page-product-suite)
   ########################################################################## */
/* ---------- product suite: hero is centred, no artwork column ---------- */
/* a centred hero puts the headline over the pale right-hand side of the artwork,
   where mint-on-cyan is unreadable — a scrim keeps white type legible across the whole band */
.page-product-suite .hero--suite{
  padding:150px 0 96px;
  background-image:
    linear-gradient(180deg, rgba(11,59,140,.70) 0%, rgba(11,59,140,.66) 62%, rgba(11,59,140,.44) 100%),
    url("../img/hero-bg.png"),
    linear-gradient(225deg,#9FEFDD 0%,#06B6E4 30%,#17538F 66%,#192E6B 100%);
  background-size:auto, cover, auto;
  background-position:center, center right, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
.page-product-suite .hero--suite h1{color:#fff}
/* the brand gradient cannot carry a word on this ground; white does */
.page-product-suite .hero--suite h1 .grad-word{
  background:none; -webkit-text-fill-color:#fff; color:#fff;
}
.page-product-suite .hero--suite .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px}
.page-product-suite .hero--suite p.lede{max-width:30em}
/* the four products, drawn in code so it stays sharp and uses the exact brand values */
.page-product-suite .suite-art{width:100%; max-width:440px; height:auto; display:block; filter:drop-shadow(0 24px 40px rgba(5,16,48,.35))}
@media (max-width:980px){
  .page-product-suite .hero--suite .hero-grid{grid-template-columns:1fr; gap:44px}
  .page-product-suite .hero--suite .hero-art{justify-content:flex-start}
}
@media (max-width:820px){.page-product-suite .hero--suite{padding:120px 0 72px; background-position: center, center left, center;}}

/* ---------- alternating product rows ---------- */
.page-product-suite .suite{display:flex; flex-direction:column; gap:104px}
.page-product-suite .suite-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center}
/* every second product leads with the artwork, so the page never reads as a list */
.page-product-suite .suite-row:nth-child(even) .suite-media{order:-1}
.page-product-suite .suite-media{
  border-radius:var(--r-lg); background:var(--surface-alt);
  border:1px solid var(--border); padding:38px;
  display:flex; align-items:center; justify-content:center;
}
.page-product-suite .suite-media img{width:100%; max-width:400px; height:auto; display:block}
.page-product-suite .suite-body h2{margin-bottom:16px}
.page-product-suite .suite-body > p{font-size:1.06rem}
.page-product-suite .suite-more{margin-top:28px}
@media (max-width:900px){
  .page-product-suite .suite{gap:64px}
  .page-product-suite .suite-row{grid-template-columns:1fr; gap:28px}
  .page-product-suite .suite-row:nth-child(even) .suite-media{order:0}
  .page-product-suite .suite-media{padding:26px}
}

/* ---------- why: the claim on the left, the proof on the right, on a pale band
   (light, so it does not sit dark-against-dark with the CTA card below) ---------- */
.page-product-suite .why-band{background:var(--accent-wash-2)}
.page-product-suite .why-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:center}
.page-product-suite .why-intro p{font-size:1.08rem; line-height:1.65; margin-top:18px; color:var(--body)}
.page-product-suite .why-cards{position:relative; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr}
/* two hairlines cross at the centre and fade out toward the edges */
.page-product-suite .why-cards::before,.page-product-suite .why-cards::after{content:''; position:absolute; pointer-events:none}
.page-product-suite .why-cards::before{
  left:calc(50% - 1px); top:0; bottom:0; width:2px; border-radius:2px;
  background:linear-gradient(180deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 100% 200% repeat;
  -webkit-mask:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  animation:divFlowY 6s linear infinite;
}
.page-product-suite .why-cards::after{
  top:calc(50% - 1px); left:0; right:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 200% 100% repeat;
  -webkit-mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation:divFlowX 6s linear infinite;
}
@keyframes divFlowY{to{background-position:0 -200%}}
@keyframes divFlowX{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.page-product-suite .why-cards::before,.page-product-suite .why-cards::after{animation:none}}
.page-product-suite .why-card{padding:34px 38px}
.page-product-suite .why-card-icon{display:block; line-height:0; margin-bottom:16px}
.page-product-suite .why-card-icon svg{width:30px; height:30px}
.page-product-suite .why-card h3{color:var(--navy); font-size:1.1rem; margin-bottom:8px}
.page-product-suite .why-card p{font-size:.94rem; line-height:1.55; color:var(--body)}
@media (max-width:980px){.page-product-suite .why-grid{grid-template-columns:1fr; gap:36px}}
@media (max-width:600px){
  .page-product-suite .why-cards{grid-template-columns:1fr; grid-auto-rows:auto}
  .page-product-suite .why-cards::before,.page-product-suite .why-cards::after{display:none}
  .page-product-suite .why-card{padding:26px 0}
  .page-product-suite .why-card + .why-card{border-top:1px solid var(--border-strong)}
}

/* ---------- photo composition: one scene, the community around it, a label card ----------
   positions are percentages of one box, so the whole arrangement scales as a unit */
.page-product-suite .suite-media--photo{background:none; border:0; padding:0; display:block; border-radius:0}
.page-product-suite .comp{position:relative; width:100%; aspect-ratio:736/440; container-type:inline-size}
.page-product-suite .suite-media .comp img{max-width:none; display:block}
.page-product-suite .comp .comp-photo{
  position:absolute; left:23.5%; top:11.8%; width:68%; height:75.5%;
  object-fit:cover; object-position:50% 38%; border-radius:18px;
}
.page-product-suite .comp .comp-thumb{
  position:absolute; aspect-ratio:1; height:auto; object-fit:cover;
  border-radius:14px; border:4px solid #fff; background:#fff;
  box-shadow:0 0 0 1px var(--border);          /* a hairline ring, not a drop shadow */
}
.page-product-suite .comp .comp-thumb--1{left:19%;  top:10%; width:13.6%}
.page-product-suite .comp .comp-thumb--2{left:6.8%; top:30%; width:11%}
.page-product-suite .comp .comp-thumb--3{left:19%;  top:45%; width:13.6%}
/* the thread that ties this row to the next one */
.page-product-suite .comp-link{
  position:absolute; left:91.5%; top:43%; width:6%; height:2px;
  background:linear-gradient(90deg,#06B6E4,#01E8B9);
}
.page-product-suite .comp-link::after{
  content:''; position:absolute; right:-5px; top:-4px; width:10px; height:10px; border-radius:50%;
  background:#01E8B9; box-shadow:0 0 0 2.5px #fff;
}
.page-product-suite .comp-card{
  position:absolute; left:54.6%; bottom:4%; width:43%;
  display:flex; align-items:center; gap:3.2cqw;
  padding:3.6cqw 3.8cqw; background:#fff; border-radius:16px;
  box-shadow:0 0 0 1px var(--border);
}
.page-product-suite .comp-icon{
  flex:none; width:clamp(34px,7.4cqw,50px); aspect-ratio:1; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#E1F5FC,#DAF7F0);
}
.page-product-suite .comp-icon svg{width:58%; height:58%}
.page-product-suite .comp-text strong{display:block; color:var(--ink); font-weight:600; font-size:clamp(13px,3.1cqw,20px); line-height:1.2}
.page-product-suite .comp-text span{display:block; margin-top:4px; color:var(--muted); font-size:clamp(11px,2.35cqw,15px); line-height:1.4}
@container (max-width:460px){
  .page-product-suite .comp-card{left:38%; width:60%}
}

/* ---------- qualitative: wide scene, themes surfacing top-right, label card bottom-left ---------- */
.page-product-suite .comp--qual .comp-photo{left:7%; top:6%; width:90%; height:84%; object-position:50% 50%}
.page-product-suite .comp--qual .comp-card{left:1%; width:42%}
/* the thread arrives from the row above */
.page-product-suite .comp--qual .comp-link{left:1.2%; top:57%; width:5.8%}
.page-product-suite .comp--qual .comp-link::after{left:-5px; right:auto}
.page-product-suite .comp-quote{
  position:absolute; left:71%; top:14%; width:26%;
  padding:2.6cqw 2.8cqw; background:#fff; border-radius:14px;
  box-shadow:0 0 0 1px var(--border);
}
.page-product-suite .comp-qmark{display:block; font-weight:700; color:var(--accent); font-size:clamp(24px,6.4cqw,44px); line-height:.72; height:.5em}
.page-product-suite .comp-line{display:block; height:clamp(5px,1.1cqw,8px); border-radius:4px; background:#DDE4EE; margin-top:1.4cqw}
.page-product-suite .comp-line--short{width:62%; background:#E8EDF4}
/* example themes from thematic analysis; the row runs off the frame edge like a live feed */
.page-product-suite .comp-tags{position:absolute; left:71%; right:0; top:44%; display:flex; gap:1.3cqw; overflow:hidden; white-space:nowrap}
.page-product-suite .comp-tag{
  flex:none; padding:.9cqw 2.1cqw; border-radius:var(--r-sm);
  font-size:clamp(10px,2.1cqw,14px); font-weight:600; line-height:1.3;
}
.page-product-suite .comp-tag--mint{background:#D4F5EC; color:#0A6455}
.page-product-suite .comp-tag--cyan{background:#D7F2FC; color:#00567A}
.page-product-suite .comp-tag--navy{background:#E3EEFA; color:#1A2D6B}
@container (max-width:460px){
  .page-product-suite .comp--qual .comp-card{left:0; width:62%}
}

/* ---------- project management: markets panel on the left edge, label card bottom-right ---------- */
.page-product-suite .comp--pm .comp-photo{left:12%; top:11%; width:69%; height:79%; object-position:50% 50%}
.page-product-suite .comp--pm .comp-card{left:52%; bottom:2%; width:46%}
.page-product-suite .comp--pm .comp-link{left:81%; top:48%; width:16%}
.page-product-suite .comp-markets{
  position:absolute; left:0; top:14%; width:30%;
  display:flex; flex-direction:column; gap:2.2cqw;
  padding:2.6cqw 2.4cqw; background:#fff; border-radius:16px;
  box-shadow:0 0 0 1px var(--border);
}
.page-product-suite .comp-mkt{display:flex; align-items:center; gap:1.6cqw}
.page-product-suite .comp-flag{flex:none; width:clamp(16px,3.6cqw,28px); aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--border)}
.page-product-suite .comp-flag svg{display:block; width:100%; height:100%}
.page-product-suite .comp-dot{flex:none; width:clamp(6px,1.3cqw,10px); aspect-ratio:1; border-radius:50%}
.page-product-suite .comp-bar{flex:1; height:clamp(5px,1.1cqw,9px); border-radius:6px; background:#EDF1F7; overflow:hidden}
.page-product-suite .comp-bar span{display:block; height:100%; border-radius:6px}
.page-product-suite .comp-check{
  flex:none; width:clamp(14px,3cqw,24px); aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#B8C3D3; box-shadow:inset 0 0 0 1.5px #DDE4EE;
}
.page-product-suite .comp-check svg{width:66%; height:66%}
/* a finished market shown as a state, never as a percentage */
.page-product-suite .comp-check--done{background:#D4F5EC; color:#0A6455; box-shadow:none}
@container (max-width:460px){
  .page-product-suite .comp--pm .comp-card{left:34%; width:66%}
  .page-product-suite .comp-markets{width:36%; top:5%}   /* lifted so it clears the label card on a phone */
}

/* ---------- survey: question and language switch top-right, label card bottom-left ---------- */
.page-product-suite .comp--survey .comp-photo{left:11%; top:14%; width:63%; height:77%; object-position:50% 50%}
.page-product-suite .comp--survey .comp-card{left:5.5%; bottom:5%; width:39%}
.page-product-suite .comp--survey .comp-link{left:0; top:41%; width:10%}
.page-product-suite .comp-question{
  position:absolute; right:12%; top:21%; width:27%;
  display:flex; flex-direction:column; gap:2.3cqw;
  padding:3cqw 3cqw; background:#fff; border-radius:16px;
  box-shadow:0 0 0 1px var(--border);
}
.page-product-suite .comp-opt{display:flex; align-items:center; gap:2cqw}
.page-product-suite .comp-radio{
  flex:none; width:clamp(11px,2.7cqw,20px); aspect-ratio:1; border-radius:50%;
  box-shadow:inset 0 0 0 1.6px #CBD5E4; background:#fff;
}
.page-product-suite .comp-optbar{display:block; height:clamp(5px,1.2cqw,9px); border-radius:6px; background:#E8EDF4; flex:none; width:60%}
/* the chosen answer */
.page-product-suite .comp-opt--on .comp-radio{box-shadow:inset 0 0 0 1.6px #01E8B9, inset 0 0 0 clamp(3px,.75cqw,5px) #fff; background:#01E8B9}
.page-product-suite .comp-opt--on .comp-optbar{flex:1; width:auto; background:#EDF1F7; overflow:hidden}
.page-product-suite .comp-opt--on .comp-optbar span{display:block; width:62%; height:100%; border-radius:6px; background:#5EEBCB}
.page-product-suite .comp-lang{
  position:absolute; right:6%; top:57%;
  display:flex; align-items:center; gap:2.2cqw;
  padding:1.8cqw 2.8cqw; background:#fff; border-radius:14px;
  box-shadow:0 0 0 1px var(--border);
  font-size:clamp(10px,2.2cqw,15px); font-weight:500; color:var(--muted); line-height:1;
}
.page-product-suite .comp-lang b{color:var(--ink); font-weight:700}
.page-product-suite .comp-globe{display:flex; width:clamp(14px,3.4cqw,24px); color:var(--accent)}
.page-product-suite .comp-globe svg{width:100%; height:auto}
@container (max-width:460px){
  /* tighter card on a phone so the line breaks in two and stays below her chin */
  .page-product-suite .comp--survey .comp-card{left:0; width:55%; padding:2.6cqw 3cqw; gap:2.2cqw}
  .page-product-suite .comp--survey .comp-icon{width:28px}
}

/* ============================================================
   MOTION — inner pages. Everything here is decoration: content is
   readable with it off, and reduced-motion users get the end state.
   ============================================================ */
/* hero: copy rises line by line on load, the artwork follows and then floats */
.page-product-suite .hero-inner > *{animation:heroIn .8s cubic-bezier(.2,.8,.2,1) both}
.page-product-suite .hero-inner > :nth-child(1){animation-delay:.05s}
.page-product-suite .hero-inner > :nth-child(2){animation-delay:.15s}
.page-product-suite .hero-inner > :nth-child(3){animation-delay:.27s}
.page-product-suite .hero-inner > :nth-child(4){animation-delay:.39s}
@keyframes heroIn{from{opacity:0; transform:translateY(18px)}}
.page-product-suite .hero-art{animation:heroArt 1s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes heroArt{from{opacity:0; transform:translateY(26px) scale(.97)}}
.page-product-suite .hero-art .suite-art{animation:tileFloat 7s ease-in-out 1.6s infinite}
@keyframes tileFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
/* the cards inside the hero tile slide in from the bottom-left corner, one after another */
.page-product-suite .suite-art .tile-card{animation:tileCard .75s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.45s + var(--i) * .13s)}
@keyframes tileCard{from{opacity:0; transform:translate(-22px,22px)}}

/* grids and lists: the container stays put, its items arrive one by one */
.page-product-suite .reveal[data-stagger]{opacity:1; transform:none}
.page-product-suite .reveal[data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.page-product-suite .reveal[data-stagger].is-in > *{opacity:1; transform:none}

/* photo compositions: the scene first, then the people and cards pop in around it */
.page-product-suite .reveal .comp > :not(.comp-photo){
  opacity:0; transform:translateY(12px) scale(.94);
  transition:opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.page-product-suite .reveal.is-in .comp > :not(.comp-photo){opacity:1; transform:none}
.page-product-suite .reveal .comp > :nth-child(2){transition-delay:.25s}
.page-product-suite .reveal .comp > :nth-child(3){transition-delay:.35s}
.page-product-suite .reveal .comp > :nth-child(4){transition-delay:.45s}
.page-product-suite .reveal .comp > :nth-child(5){transition-delay:.6s}
.page-product-suite .reveal .comp > :nth-child(6){transition-delay:.72s}
.page-product-suite .reveal .comp > :nth-child(7){transition-delay:.84s}
.page-product-suite .reveal .comp > :nth-child(8){transition-delay:.96s}
.page-product-suite .reveal .comp .comp-photo{opacity:0; transform:scale(1.03); transition:opacity .7s ease, transform 1.2s cubic-bezier(.2,.8,.2,1)}
.page-product-suite .reveal.is-in .comp .comp-photo{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .page-product-suite .hero-inner > *,.page-product-suite .hero-art,.page-product-suite .hero-art .suite-art,.page-product-suite .suite-art .tile-card{animation:none}
  .page-product-suite .reveal[data-stagger] > *,.page-product-suite .reveal .comp > *,.page-product-suite .reveal .comp .comp-photo{opacity:1; transform:none; transition:none}
}

/* ---------- synced from Figma (mobile screens): a small hero tile above the eyebrow ---------- */
@media (max-width:600px){
  .page-product-suite .hero-grid{gap:24px}
  .page-product-suite .hero-grid .hero-art{order:-1; justify-content:flex-start}
  .page-product-suite .hero-grid .suite-art{max-width:100%; filter:drop-shadow(0 10px 18px rgba(5,16,48,.32))}
}

/* ---------- synced from Figma ---------- */
/* hero: scrim over flat brand navy, no artwork image */

/* why: points without icons (the animated gradient hairlines are kept) */
/* .page-product-suite .why-card-icon{display:none} */


/* ##########################################################################
   Community — community.html (.page-community)
   ########################################################################## */
/* ---------- faq ---------- */
.page-community .faq{max-width:780px; margin:0 auto}
.page-community .acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 2px; background:none; border:0; border-bottom:1px solid var(--border);
  font:inherit; font-size:1.05rem; font-weight:600; color:var(--ink); text-align:left; cursor:pointer;
}
.page-community .acc-head svg{flex:none; color:var(--muted); transition:transform var(--t)}
.page-community .acc-head[aria-expanded="true"] svg{transform:rotate(45deg)}
.page-community .acc-body{padding:20px 2px 26px; border-bottom:1px solid var(--border)}
/* an open question should not be fenced off from its own answer */
.page-community .acc-head[aria-expanded="true"]{border-bottom-color:transparent}
/* and the list should not close with a stray rule */
.page-community #faqList .acc-head:nth-last-of-type(1),.page-community #faqList .acc-body:nth-last-of-type(1){border-bottom-color:transparent}

/* ---------- product suite: hero is centred, no artwork column ---------- */
/* a centred hero puts the headline over the pale right-hand side of the artwork,
   where mint-on-cyan is unreadable — a scrim keeps white type legible across the whole band */
.page-community .hero--suite{
  padding:150px 0 96px; text-align:center;
  background-image:
    linear-gradient(180deg, rgba(11,59,140,.70) 0%, rgba(11,59,140,.66) 62%, rgba(11,59,140,.44) 100%),
    url("../img/hero-bg.png"),
    linear-gradient(225deg,#9FEFDD 0%,#06B6E4 30%,#17538F 66%,#192E6B 100%);
  background-size:auto, cover, auto;
  background-position:center, center right, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
.page-community .hero--suite h1{color:#fff}
/* the brand gradient cannot carry a word on this ground; white does */
.page-community .hero--suite h1 .grad-word{
  background:none; -webkit-text-fill-color:#fff; color:#fff;
}
.page-community .hero--suite .hero-inner{max-width:900px; margin:0 auto}
.page-community .hero--suite p.lede{margin-left:auto; margin-right:auto; max-width:34em}
.page-community .hero--suite .btn-row{justify-content:center}
@media (max-width:820px){.page-community .hero--suite{padding:120px 0 72px;background-position: center, center left, center;}}

/* ---------- intro: their own positioning, set wide and quiet ---------- */
.page-community .intro{max-width:820px; margin:0 auto; text-align:center}
.page-community .intro p{font-size:1.12rem; line-height:1.65}
.page-community .intro p + p{margin-top:20px}

/* ---------- alternating product rows ---------- */
.page-community .suite{display:flex; flex-direction:column; gap:104px}
.page-community .suite-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center}
/* every second product leads with the artwork, so the page never reads as a list */
.page-community .suite-row:nth-child(even) .suite-media{order:-1}
.page-community .suite-media{
  border-radius:var(--r-lg); background:var(--surface-alt);
  border:1px solid var(--border); padding:38px;
  display:flex; align-items:center; justify-content:center;
}
.page-community .suite-media img{width:100%; max-width:400px; height:auto; display:block}
.page-community .suite-body h2{margin-bottom:16px}
.page-community .suite-body > p{font-size:1.06rem}
/* what is inside each product — the confirmed detail, set as a quiet list
   rather than pills, which at eight or nine items read as tag soup */
.page-community .caps{
  margin-top:26px; display:grid; grid-template-columns:1fr 1fr;
  gap:11px 28px; border-top:1px solid var(--border); padding-top:24px;
}
.page-community .caps li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.95rem; line-height:1.45; color:var(--body);
}
.page-community .caps li::before{
  content:''; flex:none; width:6px; height:6px; margin-top:.52em;
  border-radius:50%; background:linear-gradient(135deg,#06B6E4,#01E8B9);
}
@media (max-width:900px){.page-community .caps{grid-template-columns:1fr; gap:9px}}
.page-community .suite-more{margin-top:28px}
@media (max-width:900px){
  .page-community .suite{gap:64px}
  .page-community .suite-row{grid-template-columns:1fr; gap:28px}
  .page-community .suite-row:nth-child(even) .suite-media{order:0}
  .page-community .suite-media{padding:26px}
}

/* ---------- data security band ---------- */
.page-community .security{background:var(--navy); color:rgba(255,255,255,.82)}
.page-community .security h2{color:#fff}
.page-community .security .eyebrow{color:rgba(255,255,255,.85)}
.page-community .security .section-head p{color:rgba(255,255,255,.8)}
.page-community .sec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:8px}
.page-community .sec-grid li{
  padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  font-size:.92rem; color:#fff;
}
@media (max-width:900px){.page-community .sec-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.page-community .sec-grid{grid-template-columns:1fr}}

/* ---------- why ---------- */
.page-community .why{max-width:780px; margin:0 auto; text-align:center}
.page-community .why p{font-size:1.12rem; line-height:1.65; margin-top:18px}

/* ---------- benefit cards on the navy band ---------- */
.page-community .band{background:var(--navy-deep); color:rgba(255,255,255,.82)}
.page-community .band h2{color:#fff}
.page-community .band .eyebrow{color:rgba(255,255,255,.85)}
.page-community .band .section-head p{color:rgba(255,255,255,.8)}
.page-community .bcards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.page-community .bcard{
  background:#fff; border-radius:var(--r-lg); padding:32px 28px;
  display:flex; flex-direction:column;
}
.page-community .bcard-icon{display:block; line-height:0; margin-bottom:18px}
.page-community .bcard-icon svg{width:34px; height:34px}
.page-community .bcard h3{color:var(--navy); font-size:1.14rem; margin-bottom:10px}
.page-community .bcard p{font-size:.95rem; color:var(--body)}
@media (max-width:980px){.page-community .bcards{grid-template-columns:1fr 1fr}}
/* phones: a swipeable row — one card and half of the next, so the row reads as scrollable */
@media (max-width:640px){
  .page-community .bcards{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-right:-24px; padding-right:24px; padding-bottom:4px;
    scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .page-community .bcards::-webkit-scrollbar{display:none}
  .page-community .bcard{flex:0 0 calc((100vw - 24px - 12px) / 1.5); scroll-snap-align:start; padding:24px 20px}
  .page-community .bcard-art{margin-bottom:18px}
}
@media (max-width:600px){
  .page-community .bcards{margin-right:-16px; padding-right:16px}
  .page-community .bcard{flex-basis:calc((100vw - 16px - 12px) / 1.5)}
}

/* ---------- feature list: labels only, so it is set as a list and not as cards ---------- */
.page-community .featlist{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px 32px;
  max-width:1000px; margin:0 auto;
}
.page-community .featlist li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:1rem; line-height:1.45; color:var(--ink); font-weight:500;
}
.page-community .featlist li::before{
  content:''; flex:none; width:7px; height:7px; margin-top:.5em;
  border-radius:50%; background:linear-gradient(135deg,#06B6E4,#01E8B9);
}
@media (max-width:860px){.page-community .featlist{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.page-community .featlist{grid-template-columns:1fr}}

/* ---------- split row: copy beside artwork ---------- */
.page-community .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center}
.page-community .split-media{
  border-radius:var(--r-lg); background:var(--surface-alt);
  border:1px solid var(--border); padding:38px;
  display:flex; align-items:center; justify-content:center;
}
.page-community .split-media img{width:100%; max-width:400px; height:auto; display:block}
.page-community .split-body p{font-size:1.06rem}
.page-community .split-body h2{margin-bottom:16px}
@media (max-width:900px){
  .page-community .split{grid-template-columns:1fr; gap:28px}
  .page-community .split-media{padding:26px}
}

/* ---------- photo in a split row: full-bleed inside the frame ---------- */
.page-community .split-media--photo{padding:0; overflow:hidden; background:none}
.page-community .split-media--photo img{max-width:none; width:100%; aspect-ratio:4/3; object-fit:cover}
.page-community .split--flip .split-media{order:-1}
@media (max-width:900px){.page-community .split--flip .split-media{order:0}}

/* ---------- three ways to engage: a photo each, with a small product cue on top ---------- */
.page-community .ways{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:1180px; margin:0 auto}
.page-community .way-media{position:relative; margin:0 0 22px; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--surface-alt)}
.page-community .way-media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.12)}
.page-community .way-chip{
  position:absolute; left:14px; bottom:14px; line-height:0;
  background:#fff; border-radius:12px; padding:9px 11px;
  box-shadow:0 10px 24px rgba(19,34,80,.18);
}
.page-community .way-chip svg{height:34px; width:auto; display:block}
.page-community .way h3{color:var(--navy); font-size:1.14rem; margin-bottom:10px}
.page-community .way p{font-size:.98rem}
.page-community .ways-foot{margin:40px auto 0; max-width:640px; text-align:center; font-size:1.02rem}
@media (max-width:900px){.page-community .ways{grid-template-columns:1fr; gap:40px; max-width:520px}}

/* ---------- advantage cards: a small product vignette instead of an icon ---------- */
.page-community .bcard-art{
  display:block; line-height:0; margin-bottom:22px; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,#EAF6FC 0%,#E8FBF5 100%);
}
.page-community .bcard-art svg{width:100%; height:auto; display:block}

/* ---------- hero with artwork: copy left, community tile right ---------- */
.page-community .hero--split{text-align:left}
.page-community .hero--split .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px}
.page-community .hero--split .hero-inner{max-width:none; margin:0}
.page-community .hero--split p.lede{margin-left:0; margin-right:0; max-width:30em}
.page-community .hero--split .btn-row{justify-content:flex-start}
.page-community .suite-art{width:100%; max-width:440px; height:auto; display:block; filter:drop-shadow(0 24px 40px rgba(5,16,48,.35))}
@media (max-width:980px){
  .page-community .hero--split .hero-grid{grid-template-columns:1fr; gap:44px}
  .page-community .hero--split .hero-art{justify-content:flex-start}
}

/* ---------- intro composition: one scene, the community around it, a label card ---------- */
.page-community .split-media--comp{background:none; border:0; padding:0; display:block; border-radius:0}
.page-community .comp{position:relative; width:100%; aspect-ratio:736/460; container-type:inline-size}
.page-community .split-media .comp img{max-width:none; display:block}
.page-community .comp .comp-photo{
  position:absolute; left:23.5%; top:13%; width:74%; height:72%;
  object-fit:cover; object-position:50% 40%; border-radius:18px;
}
.page-community .comp .comp-thumb{
  position:absolute; aspect-ratio:1; height:auto; object-fit:cover;
  border-radius:14px; border:4px solid #fff; background:#fff;
  box-shadow:0 0 0 1px var(--border);
}
.page-community .comp .comp-thumb--1{left:14%;  top:10%; width:13.6%}
.page-community .comp .comp-thumb--2{left:2%;   top:31%; width:11%}
.page-community .comp .comp-thumb--3{left:14%;  top:47%; width:13.6%}
.page-community .comp-auto{
  position:absolute; right:3%; top:3%;
  display:flex; align-items:center; gap:2cqw;
  padding:1.6cqw 1.8cqw 1.6cqw 2.6cqw; background:#fff; border-radius:999px;
  box-shadow:0 0 0 1px var(--border);
  font-size:clamp(10px,2.1cqw,14px); font-weight:600; color:var(--ink); line-height:1;
}
.page-community .comp-auto i{
  position:relative; flex:none; width:clamp(26px,6cqw,40px); height:clamp(15px,3.4cqw,22px);
  border-radius:999px; background:#01E8B9;
}
.page-community .comp-auto i::after{
  content:''; position:absolute; right:2px; transition:transform .45s cubic-bezier(.3,1.4,.5,1) 1.3s; top:2px; bottom:2px; aspect-ratio:1;
  border-radius:50%; background:#fff;
}
.page-community .comp-card{
  position:absolute; right:0; bottom:2%; width:60%;
  display:flex; align-items:center; gap:3.2cqw;
  padding:3.4cqw 3.6cqw; background:#fff; border-radius:16px;
  box-shadow:0 0 0 1px var(--border);
}
.page-community .comp-icon{
  flex:none; width:clamp(34px,7.4cqw,50px); aspect-ratio:1; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#E1F5FC,#DAF7F0);
}
.page-community .comp-icon svg{width:58%; height:58%}
.page-community .comp-text strong{display:block; color:var(--ink); font-weight:600; font-size:clamp(13px,3.1cqw,20px); line-height:1.2}
.page-community .comp-text span{display:block; margin-top:4px; color:var(--muted); font-size:clamp(11px,2.35cqw,15px); line-height:1.4}
@container (max-width:460px){
  .page-community .comp-card{width:72%}
}

/* ---------- slider pagination: only shown where a row becomes a swipe row ---------- */
.page-community .slider-dots{display:none; justify-content:center; gap:2px; margin-top:18px}
.page-community .slider-dots button{
  width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.page-community .slider-dots button::before{
  content:''; display:block; width:8px; height:8px; border-radius:999px;
  background:rgba(26,45,107,.22); transition:width .25s ease, background-color .25s ease;
}
.page-community .slider-dots button[aria-current="true"]::before{width:22px; background:var(--accent)}
.page-community .slider-dots--on-dark button::before{background:rgba(255,255,255,.35)}
.page-community .slider-dots--on-dark button[aria-current="true"]::before{background:#fff}
.page-community .slider-dots button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:999px}
@media (max-width:640px){.page-community .slider-dots{display:flex}}

/* ---------- why: the claim on the left, four benefits on the right in a 2×2,
   split by two hairlines that cross like a + and fade toward the edges (as on Product Suite) ---------- */
.page-community .why-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:center}
.page-community .perks{position:relative; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; margin:0; padding:0; list-style:none}
.page-community .perks::before,.page-community .perks::after{content:''; position:absolute; pointer-events:none}
/* the brand gradient flows along each line; a mask fades the ends so the + still dissolves at the edges.
   The gradient tile is twice the line's length and moves exactly one tile per loop, so there is no seam. */
.page-community .perks::before{
  left:calc(50% - 1px); top:0; bottom:0; width:2px; border-radius:2px;
  background:linear-gradient(180deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 100% 200% repeat;
  -webkit-mask:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  animation:perkFlowY 6s linear infinite;
}
.page-community .perks::after{
  top:calc(50% - 1px); left:0; right:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 200% 100% repeat;
  -webkit-mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation:perkFlowX 6s linear infinite;
}
@keyframes perkFlowY{to{background-position:0 -200%}}
@keyframes perkFlowX{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.page-community .perks::before,.page-community .perks::after,.page-community .perks li + li::before{animation:none}}
.page-community .perks li{padding:34px 38px}
.page-community .perks h3{color:var(--navy); font-size:1.1rem; margin-bottom:8px}
.page-community .perks p{font-size:.94rem; line-height:1.55}
@media (max-width:980px){.page-community .why-grid{grid-template-columns:1fr; gap:36px}}
@media (max-width:600px){
  .page-community .perks{grid-template-columns:1fr; grid-auto-rows:auto}
  .page-community .perks::before,.page-community .perks::after{display:none}
  .page-community .perks li{position:relative; padding:24px 0}
  .page-community .perks li + li::before{
    content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px;
    background:linear-gradient(90deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 200% 100% repeat;
    -webkit-mask:linear-gradient(90deg, #000 70%, transparent);
            mask:linear-gradient(90deg, #000 70%, transparent);
    animation:perkFlowX 6s linear infinite;
  }
}

/* ============================================================
   MOTION — inner pages. Everything here is decoration: content is
   readable with it off, and reduced-motion users get the end state.
   ============================================================ */
/* hero: copy rises line by line on load, the artwork follows and then floats */
.page-community .hero-inner > *{animation:heroIn .8s cubic-bezier(.2,.8,.2,1) both}
.page-community .hero-inner > :nth-child(1){animation-delay:.05s}
.page-community .hero-inner > :nth-child(2){animation-delay:.15s}
.page-community .hero-inner > :nth-child(3){animation-delay:.27s}
.page-community .hero-inner > :nth-child(4){animation-delay:.39s}
@keyframes heroIn{from{opacity:0; transform:translateY(18px)}}
.page-community .hero-art{animation:heroArt 1s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes heroArt{from{opacity:0; transform:translateY(26px) scale(.97)}}
.page-community .hero-art .suite-art{animation:tileFloat 7s ease-in-out 1.6s infinite}
@keyframes tileFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
/* the cards inside the hero tile slide in from the bottom-left corner, one after another */
.page-community .suite-art .tile-card{animation:tileCard .75s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.45s + var(--i) * .13s)}
@keyframes tileCard{from{opacity:0; transform:translate(-22px,22px)}}

/* grids and lists: the container stays put, its items arrive one by one */
.page-community .reveal[data-stagger]{opacity:1; transform:none}
.page-community .reveal[data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.page-community .reveal[data-stagger].is-in > *{opacity:1; transform:none}

/* photo compositions: the scene first, then the people and cards pop in around it */
.page-community .reveal .comp > :not(.comp-photo){
  opacity:0; transform:translateY(12px) scale(.94);
  transition:opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.page-community .reveal.is-in .comp > :not(.comp-photo){opacity:1; transform:none}
.page-community .reveal .comp > :nth-child(2){transition-delay:.25s}
.page-community .reveal .comp > :nth-child(3){transition-delay:.35s}
.page-community .reveal .comp > :nth-child(4){transition-delay:.45s}
.page-community .reveal .comp > :nth-child(5){transition-delay:.6s}
.page-community .reveal .comp > :nth-child(6){transition-delay:.72s}
.page-community .reveal .comp > :nth-child(7){transition-delay:.84s}
.page-community .reveal .comp > :nth-child(8){transition-delay:.96s}
.page-community .reveal .comp .comp-photo{opacity:0; transform:scale(1.03); transition:opacity .7s ease, transform 1.2s cubic-bezier(.2,.8,.2,1)}
.page-community .reveal.is-in .comp .comp-photo{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .page-community .hero-inner > *,.page-community .hero-art,.page-community .hero-art .suite-art,.page-community .suite-art .tile-card{animation:none}
  .page-community .reveal[data-stagger] > *,.page-community .reveal .comp > *,.page-community .reveal .comp .comp-photo{opacity:1; transform:none; transition:none}
}

/* feature mock-ups come alive once the cards are on screen */
.page-community .bcard-art .va-grow,.page-community .bcard-art .va-rise,.page-community .bcard-art .va-pop,.page-community .bcard-art .va-knob{transform-box:fill-box}
.page-community .bcard-art .va-grow{transform-origin:left center; transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.8,.2,1) calc(.6s + var(--d, 0) * 120ms)}
.page-community .bcard-art .va-rise{transform-origin:center bottom; transform:scaleY(0); transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(.6s + var(--d, 0) * 90ms)}
.page-community .bcard-art .va-pop{transform-origin:center; transform:scale(0); transition:transform .5s cubic-bezier(.3,1.5,.5,1) calc(.6s + var(--d, 0) * 60ms)}
.page-community .bcard-art .va-knob{transform:translateX(-13px); transition:transform .45s cubic-bezier(.3,1.4,.5,1) 1s}
.page-community .bcard-art .va-draw{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s ease .6s}
.page-community .bcard-art .va-fade{opacity:0; transition:opacity 1s ease 1.4s}
.page-community .is-in .bcard-art .va-grow,.page-community .is-in .bcard-art .va-rise,.page-community .is-in .bcard-art .va-pop,.page-community .is-in .bcard-art .va-knob{transform:none}
.page-community .is-in .bcard-art .va-draw{stroke-dashoffset:0}
.page-community .is-in .bcard-art .va-fade{opacity:1}
/* the "someone is typing" dots keep going */
.page-community .bcard-art .va-blink{animation:vaBlink 1.2s ease-in-out infinite; animation-delay:calc(var(--d, 0) * .2s)}
@keyframes vaBlink{0%,100%{opacity:.25} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .page-community .bcard-art .va-grow,.page-community .bcard-art .va-rise,.page-community .bcard-art .va-pop,.page-community .bcard-art .va-knob{transform:none; transition:none}
  .page-community .bcard-art .va-draw{stroke-dashoffset:0; transition:none}
  .page-community .bcard-art .va-fade{opacity:1; transition:none}
  .page-community .bcard-art .va-blink{animation:none}
}

.page-community .reveal .comp-auto i{background:#CBD5E4; transition:background-color .3s ease 1.3s}
.page-community .reveal .comp-auto i::after{transform:translateX(calc(-1 * (clamp(26px,6cqw,40px) - clamp(15px,3.4cqw,22px))))}
.page-community .reveal.is-in .comp-auto i{background:#01E8B9}
.page-community .reveal.is-in .comp-auto i::after{transform:none}
@media (prefers-reduced-motion:reduce){.page-community .reveal .comp-auto i{background:#01E8B9; transition:none} .page-community .reveal .comp-auto i::after{transform:none; transition:none}}

/* ---------- synced from Figma (mobile screens): a small hero tile above the eyebrow ---------- */
@media (max-width:600px){
  .page-community .hero-grid{gap:24px}
  .page-community .hero-grid .hero-art{order:-1; justify-content:flex-start}
  .page-community .hero-grid .suite-art{max-width:100%; filter:drop-shadow(0 10px 18px rgba(5,16,48,.32))}
}

/* ---------- synced from Figma: member portraits framed in the brand colours ---------- */
.page-community .comp .comp-thumb--1{border-color:#06B6E4}
.page-community .comp .comp-thumb--2{border-color:#00749E}
.page-community .comp .comp-thumb--3{border-color:#01E8B9}

/* ---------- synced from Figma ---------- */
/* hero: cyan-to-accent ramp, no artwork image */

/* advantage band in action cyan */

/* ##########################################################################
   Feature pages — audience-targeting.html, discussion.html, administration.html
   (.page-feature + .page-audience-targeting / .page-discussion / .page-administration) 
   ########################################################################## */

/* ---------- hero: split, scrim over the brand artwork ---------- */
.page-feature .hero--suite{
  padding:150px 0 96px; text-align:left;
  background-image:
    linear-gradient(180deg, rgba(11,59,140,.70) 0%, rgba(11,59,140,.66) 62%, rgba(11,59,140,.44) 100%),
    url("../img/hero-bg.png"),
    linear-gradient(225deg,#9FEFDD 0%,#06B6E4 30%,#17538F 66%,#192E6B 100%);
  background-size:auto, cover, auto;
  background-position:center, center right, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
.page-feature .hero--suite h1{color:#fff}
.page-feature .hero--split .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px}
.page-feature .hero--split .hero-inner{max-width:none; margin:0}
.page-feature .hero--split p.lede{margin-left:0; margin-right:0; max-width:30em}
.page-feature .hero--split .btn-row{justify-content:flex-start}
.page-feature .suite-art{width:100%; max-width:440px; height:auto; display:block; filter:drop-shadow(0 24px 40px rgba(5,16,48,.35))}
@media (max-width:980px){
  .page-feature .hero--split .hero-grid{grid-template-columns:1fr; gap:44px}
  .page-feature .hero--split .hero-art{justify-content:flex-start}
}
@media (max-width:820px){.page-feature .hero--suite{padding:120px 0 72px; background-position:center, center left, center}}
@media (max-width:600px){
  .page-feature .hero-grid{gap:24px}
  .page-feature .hero-grid .hero-art{order:-1; justify-content:flex-start}
  .page-feature .hero-grid .suite-art{max-width:100%; filter:drop-shadow(0 10px 18px rgba(5,16,48,.32))}
}

/* ---------- split row: copy beside artwork ---------- */
.page-feature .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center}
.page-feature .split-body h2{margin-bottom:16px}
.page-feature .split-body p{font-size:1.06rem}
.page-feature .split-body p + p{margin-top:16px}
.page-feature .split-media{
  border-radius:var(--r-lg); background:var(--surface-alt); border:1px solid var(--border);
  padding:38px; display:flex; align-items:center; justify-content:center;
}
.page-feature .split-media--photo{padding:0; overflow:hidden; background:none}
.page-feature .split-media--photo img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.page-feature .split-media--comp{background:none; border:0; padding:0; display:block; border-radius:0}
.page-feature .split--flip .split-media{order:-1}
.page-feature .section--tint{background:var(--accent-wash-2)}
@media (max-width:900px){
  .page-feature .split{grid-template-columns:1fr; gap:28px}
  .page-feature .split--flip .split-media{order:0}
}

/* ---------- composition: one scene with floating cards (offsets in % / cqw so it scales as a unit) ---------- */
.page-feature .comp{position:relative; width:100%; aspect-ratio:736/460; container-type:inline-size}
.page-feature .comp img{max-width:none; display:block}
.page-feature .comp .comp-photo{
  position:absolute; left:14%; top:13%; width:84%; height:72%;
  object-fit:cover; object-position:50% 40%; border-radius:18px;
}
.page-feature .comp-card,.page-feature .comp-panel,.page-feature .comp-chip{
  background:#fff; box-shadow:0 0 0 1px var(--border);
}
.page-feature .comp-card{
  position:absolute; right:0; bottom:2%; width:56%;
  display:flex; align-items:center; gap:3.2cqw;
  padding:3.4cqw 3.6cqw; border-radius:16px;
}
.page-feature .comp-card--narrow{width:40%}
.page-feature .comp-icon{
  flex:none; width:clamp(34px,7.4cqw,50px); aspect-ratio:1; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#E1F5FC,#DAF7F0);
}
.page-feature .comp-icon svg{width:58%; height:58%}
.page-feature .comp-icon-dot{display:block; width:42%; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#06B6E4,#01E8B9)}
.page-feature .comp-text{min-width:0}
.page-feature .comp-text strong{display:block; color:var(--ink); font-weight:600; font-size:clamp(13px,3.1cqw,20px); line-height:1.2}
.page-feature .comp-text span{display:block; margin-top:4px; color:var(--muted); font-size:clamp(11px,2.35cqw,15px); line-height:1.4}
.page-feature .comp-meter{height:clamp(5px,1.1cqw,8px); border-radius:6px; background:#EDF1F7; overflow:hidden}
.page-feature .comp-meter i{display:block; width:92%; height:100%; border-radius:6px; background:linear-gradient(90deg,#06B6E4,#01E8B9)}

/* pill that sits top-right */
.page-feature .comp-chip{
  position:absolute; right:3%; top:3%;
  display:flex; align-items:center; gap:2cqw;
  padding:1.6cqw 2.6cqw; border-radius:999px;
  font-size:clamp(10px,2.1cqw,14px); font-weight:600; color:var(--ink); line-height:1; white-space:nowrap;
}
.page-feature .comp-chip-dot{flex:none; width:clamp(7px,1.5cqw,10px); aspect-ratio:1; border-radius:50%; background:#01E8B9}
.page-feature .comp-chip-toggle{position:relative; flex:none; width:clamp(26px,6cqw,40px); height:clamp(15px,3.4cqw,22px); border-radius:999px; background:#01E8B9}
.page-feature .comp-chip-toggle::after{content:''; position:absolute; right:2px; top:2px; bottom:2px; aspect-ratio:1; border-radius:50%; background:#fff}

/* floating panel (filters / members) */
.page-feature .comp-panel{
  position:absolute; left:0; top:20%; width:42%;
  display:flex; flex-direction:column; gap:2cqw;
  padding:2.6cqw 2.8cqw; border-radius:16px;
}
.page-feature .comp-panel-title{
  display:block; padding-bottom:1.6cqw; border-bottom:1px solid var(--border);
  font-size:clamp(11px,2.3cqw,15px); font-weight:700; color:var(--ink); line-height:1.2;
}
.page-feature .comp-tags{display:flex; flex-wrap:wrap; gap:1.2cqw}
.page-feature .comp-tag{
  padding:.8cqw 1.9cqw; border-radius:var(--r-sm);
  font-size:clamp(9px,1.9cqw,13px); font-weight:600; line-height:1.3; white-space:nowrap;
}
.page-feature .comp-tag--blue{background:#E3EEFA; color:#1A2D6B}
.page-feature .comp-tag--amber{background:#FFF1CC; color:#6B4C00}
.page-feature .comp-tag--green{background:#D4F5EC; color:#0A6455}
.page-feature .comp-tag--pink{background:#FCE4EC; color:#8A1F45}
.page-feature .comp-tag--mint{background:#D7F2FC; color:#00567A}

/* member rows */
.page-feature .comp-rows{display:flex; flex-direction:column; gap:1.8cqw}
.page-feature .comp-row{display:flex; align-items:center; gap:1.6cqw}
.page-feature .comp-row-dot{flex:none; width:clamp(12px,3cqw,22px); aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#06B6E4,#01E8B9)}
.page-feature .comp-row-line{flex:1; min-width:0; height:clamp(5px,1.1cqw,8px); border-radius:4px; background:#DDE4EE}
.page-feature .comp-row-pill{flex:none; width:clamp(14px,3.6cqw,26px); height:clamp(7px,1.5cqw,11px); border-radius:6px; background:#D4F5EC}
.page-feature .comp-row-sw{position:relative; flex:none; width:clamp(18px,4cqw,28px); height:clamp(10px,2.2cqw,16px); border-radius:999px; background:#01E8B9}
.page-feature .comp-row-sw::after{content:''; position:absolute; right:2px; top:2px; bottom:2px; aspect-ratio:1; border-radius:50%; background:#fff}
.page-feature .comp-row-sw--off{background:#CBD5E4}
.page-feature .comp-row-sw--off::after{right:auto; left:2px}

/* chat bubbles (discussion) */
.page-feature .comp-bubbles{position:absolute; left:0; top:12%; width:38%; height:auto; filter:drop-shadow(0 6px 14px rgba(19,34,80,.12))}

/* per-page placement */
.page-audience-targeting .comp .comp-photo{left:12%; top:10%; width:86%; height:76%}
.page-audience-targeting .comp-panel{top:20%; width:46%}
.page-discussion .comp .comp-photo{left:32%; top:4%; width:56%; height:84%; object-position:50% 25%}
.page-discussion .comp-card{left:0; right:auto; bottom:4%; width:56%}
.page-discussion .comp-chip{right:2%; top:6%}
.page-administration .comp .comp-photo{left:12%; top:13%; width:86%; height:72%; object-position:50% 50%}
.page-administration .comp-panel{top:30%; width:38%}
.page-administration .comp-card--narrow{right:3%; bottom:0}
.page-audience-targeting .split-media--photo img{object-position:50% 99.4%}
.page-administration .comp-text > span:nth-of-type(1){font-weight:700; color:var(--ink); font-size:clamp(14px,3.4cqw,22px)}

@container (max-width:460px){
  .page-feature .comp-card{width:72%}
  .page-feature .comp-card--narrow{width:52%}
  .page-feature .comp-panel{width:58%; top:14%}
  .page-feature .comp-tags .comp-tag:nth-child(n+4){display:none}
  .page-discussion .comp-card{width:66%}
  .page-discussion .comp-bubbles{width:46%}
  .page-administration .comp-panel{top:22%; width:56%}
  .page-administration .comp-rows .comp-row:nth-child(n+2){display:none}
}

/* ---------- navy band: four cards ---------- */
.page-feature .band{background:var(--navy-deep); color:rgba(255,255,255,.82)}
.page-feature .band h2{color:#fff}
.page-feature .band .eyebrow{color:rgba(255,255,255,.85)}
.page-feature .fcards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.page-feature .fcard{
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--r-lg); padding:32px 26px 26px;
}
.page-feature .fcard h3{color:var(--navy); font-size:1.14rem; margin-bottom:10px}
.page-feature .fcard p{font-size:.95rem; color:var(--body); margin-bottom:24px}
.page-feature .fcard img{
  margin-top:auto; width:100%; height:auto; aspect-ratio:544/340; object-fit:cover;
  border-radius:12px; background:linear-gradient(135deg,#EAF6FC 0%,#E8FBF5 100%);
}
@media (max-width:1180px){.page-feature .fcards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .page-feature .fcards{grid-template-columns:1fr; gap:14px}
  .page-feature .fcard{padding:26px 22px 22px}
}

/* ---------- cta card on phones ---------- */
@media (max-width:600px){.page-feature .cta-card{padding:40px 22px}}


/* ---------- motion: same as Community — decoration only ---------- */
.page-feature .hero-inner > *{animation:heroIn .8s cubic-bezier(.2,.8,.2,1) both}
.page-feature .hero-inner > :nth-child(1){animation-delay:.05s}
.page-feature .hero-inner > :nth-child(2){animation-delay:.15s}
.page-feature .hero-inner > :nth-child(3){animation-delay:.27s}
.page-feature .hero-inner > :nth-child(4){animation-delay:.39s}
.page-feature .hero-art{animation:heroArt 1s cubic-bezier(.2,.8,.2,1) .2s both}
.page-feature .hero-art .suite-art{animation:tileFloat 7s ease-in-out 1.6s infinite}
.page-feature .suite-art .tile-card{animation:tileCard .75s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.45s + var(--i) * .13s)}

.page-feature .reveal[data-stagger]{opacity:1; transform:none}
.page-feature .reveal[data-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.page-feature .reveal[data-stagger].is-in > *{opacity:1; transform:none}

.page-feature .reveal .comp > :not(.comp-photo){
  opacity:0; transform:translateY(12px) scale(.94);
  transition:opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.page-feature .reveal.is-in .comp > :not(.comp-photo){opacity:1; transform:none}
.page-feature .reveal .comp > :nth-child(2){transition-delay:.25s}
.page-feature .reveal .comp > :nth-child(3){transition-delay:.4s}
.page-feature .reveal .comp > :nth-child(4){transition-delay:.55s}
.page-feature .reveal .comp > :nth-child(5){transition-delay:.7s}
.page-feature .reveal .comp .comp-photo{opacity:0; transform:scale(1.03); transition:opacity .7s ease, transform 1.2s cubic-bezier(.2,.8,.2,1)}
.page-feature .reveal.is-in .comp .comp-photo{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .page-feature .hero-inner > *,.page-feature .hero-art,.page-feature .hero-art .suite-art,.page-feature .suite-art .tile-card{animation:none}
  .page-feature .reveal[data-stagger] > *,.page-feature .reveal .comp > *,.page-feature .reveal .comp .comp-photo{opacity:1; transform:none; transition:none}
}



/* ##########################################################################
   Survey pages — survey.html, survey-create-host.html, survey-analytics-reports.html
   <main> carries .page-feature (hero, split rows, navy card band, CTA — shared
   with the Community feature pages) + .page-survey (rules below, shared by the
   three survey pages) + its own class: .page-survey-main / .page-create-host /
   .page-analytics.
   ########################################################################## */

/* ---------- rows: two split rows in one section ---------- */
.page-survey .split + .split{margin-top:120px}
@media (max-width:900px){.page-survey .split + .split{margin-top:72px}}

/* ---------- scene: photo + floating cards, laid out on the Figma 640×400 frame ---------- */
.page-survey .scene{position:relative; width:100%; aspect-ratio:640/400; container-type:inline-size}
.page-survey .scene--wide{aspect-ratio:640/383}
.page-survey .scene-photo{
  position:absolute; left:23.5%; top:13%; width:74%; height:72%;
  display:block; max-width:none; object-fit:cover; border-radius:18px;
}
.page-survey .scene--wide .scene-photo{left:10.94%; top:14.1%; width:62.97%; height:77.02%}
.page-survey .scene-chip,.page-survey .scene-card,.page-survey .scene-lang,.page-survey .scene-q{
  position:absolute; background:#fff; box-shadow:0 0 0 1px #E2E8F1;
}
/* pill with a toggle (top-right) */
.page-survey .scene-chip{
  left:70%; top:6%;
  display:flex; align-items:center; gap:2cqw;
  padding:1.6cqw 1.8cqw 1.6cqw 2.6cqw; border-radius:999px;
  font-size:clamp(10px,1.875cqw,12px); font-weight:600; color:var(--ink); line-height:1; white-space:nowrap;
}
.page-survey .scene-toggle{position:relative; flex:none; width:clamp(26px,6cqw,38.4px); height:clamp(15px,3.4cqw,21.76px); border-radius:999px; background:#01E8B9; transition:background-color .3s ease 1s}
.page-survey .scene-toggle::after{content:''; position:absolute; right:2px; top:2px; bottom:2px; aspect-ratio:1; border-radius:50%; background:#fff; transition:transform .45s cubic-bezier(.3,1.4,.5,1) 1s}
.page-survey .reveal .scene-toggle{background:#CBD5E4}
.page-survey .reveal .scene-toggle::after{transform:translateX(calc(-1 * (clamp(26px,6cqw,38.4px) - clamp(15px,3.4cqw,21.76px))))}
.page-survey .reveal.is-in .scene-toggle{background:#01E8B9}
.page-survey .reveal.is-in .scene-toggle::after{transform:none}
/* label card */
.page-survey .scene-card{
  left:40%; top:74.75%; width:38.3%;
  display:flex; align-items:center; gap:3.2cqw;
  padding:3.4cqw 3.6cqw; border-radius:16px;
}
.page-survey .scene-icon{
  flex:none; width:clamp(30px,7.34cqw,47px); aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#E6F1FB;
}
.page-survey .scene-icon--sq{border-radius:12px; background:linear-gradient(135deg,#E1F5FC 14.64%,#DAF7F0 85.36%)}
.page-survey .scene-icon svg{width:52%; height:52%}
.page-survey .scene-text{min-width:0; flex:1}
.page-survey .scene-text strong{display:block; color:var(--ink); font-weight:600; font-size:clamp(11px,1.875cqw,12px); line-height:1.2}
.page-survey .scene-text span{display:block; margin-top:.6cqw; color:#5F6C85; font-size:clamp(9px,1.5625cqw,10px); line-height:1.4}
.page-survey .scene-bar{display:flex; gap:0; height:4px; margin-top:1.4cqw; border-radius:99px; overflow:hidden; max-width:17.5cqw}
.page-survey .scene-bar i{flex:1}
.page-survey .scene-bar i:nth-child(1){background:#01E8B9; flex:1.6}
.page-survey .scene-bar i:nth-child(2){background:#FBC02D}
.page-survey .scene-bar i:nth-child(3){background:#E8483C}
/* language switch */
.page-survey .scene-lang{
  display:flex; align-items:center; gap:2.2cqw;
  padding:1.7cqw 2.8cqw; border-radius:14px;
  font-size:clamp(9px,1.72cqw,11px); font-weight:500; color:#5F6C85; line-height:1;
}
.page-survey .scene-lang svg{flex:none; width:clamp(14px,3.44cqw,22px); height:auto}
.page-survey .scene-lang b{font-weight:700; color:var(--ink)}
/* question card */
.page-survey .scene-q{
  left:60.94%; top:20.9%; width:27%;
  display:flex; flex-direction:column; gap:2.34cqw;
  padding:2.97cqw; border-radius:16px;
}
.page-survey .scene-opt{display:flex; align-items:center; gap:2cqw}
.page-survey .scene-opt i{flex:none; width:clamp(10px,2.66cqw,17px); aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 0 1.6px #CBD5E4}
.page-survey .scene-opt b{height:clamp(5px,1.25cqw,8px); border-radius:4px; background:#E8EDF4}
.page-survey .scene-opt--on i{background:#01E8B9; box-shadow:inset 0 0 0 1.6px #01E8B9, inset 0 0 0 4.5px #fff}
.page-survey .scene-opt--on b{flex:1; position:relative; background:#EDF1F7; overflow:hidden}
.page-survey .scene-opt--on b::after{content:''; position:absolute; inset:0 auto 0 0; width:56%; border-radius:4px; background:#5EEBCB; transform-origin:left; transition:transform .9s cubic-bezier(.2,.8,.2,1) .9s}
.page-survey .reveal .scene-opt--on b::after{transform:scaleX(0)}
.page-survey .reveal.is-in .scene-opt--on b::after{transform:none}
/* connector line + dot on the left edge */
.page-survey .scene-link{position:absolute; left:0; top:41%; width:10%; height:2px; background:linear-gradient(90deg,#06B6E4,#01E8B9)}
.page-survey .scene-link::after{content:''; position:absolute; right:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:#01E8B9; box-shadow:0 0 0 2.5px #fff}
/* floating pieces drift in one after another once the row is revealed */
.page-survey .reveal .scene-float{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.page-survey .reveal.is-in .scene-float{opacity:1; transform:none}
.page-survey .reveal.is-in .scene-float:nth-of-type(2){transition-delay:.15s}
.page-survey .reveal.is-in .scene-float:nth-of-type(3){transition-delay:.3s}
.page-survey .reveal.is-in .scene-float:nth-of-type(4){transition-delay:.45s}
.page-survey .reveal.is-in .scene-float:nth-of-type(5){transition-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .page-survey .reveal .scene-float,.page-survey .reveal .scene-toggle,.page-survey .reveal .scene-toggle::after,.page-survey .reveal .scene-opt--on b::after{transition:none; opacity:1; transform:none}
  .page-survey .reveal .scene-toggle{background:#01E8B9}
}
@container (max-width:420px){
  .page-survey .scene-chip{left:auto; right:0}
  .page-survey .scene-card{left:auto; right:0; width:56%}
  .page-survey .scene--wide .scene-card{left:0; right:auto; width:60%}
}

/* ---------- card image slots (files still to be added) ---------- */
.page-survey .fcard img.asset-missing{aspect-ratio:544/340; min-height:0; padding:12px; display:flex; font-size:.8rem}

/* ---------- why: claim on the left, four points in a 2×2 (as on Community) ---------- */
/* ---------- why: the claim on the left, four benefits on the right in a 2×2,
   split by two hairlines that cross like a + and fade toward the edges (as on Product Suite) ---------- */
.page-survey .why-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:center}
.page-survey .perks{position:relative; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; margin:0; padding:0; list-style:none}
.page-survey .perks::before,.page-survey .perks::after{content:''; position:absolute; pointer-events:none}
/* the brand gradient flows along each line; a mask fades the ends so the + still dissolves at the edges.
   The gradient tile is twice the line's length and moves exactly one tile per loop, so there is no seam. */
.page-survey .perks::before{
  left:calc(50% - 1px); top:0; bottom:0; width:2px; border-radius:2px;
  background:linear-gradient(180deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 100% 200% repeat;
  -webkit-mask:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  animation:perkFlowY 6s linear infinite;
}
.page-survey .perks::after{
  top:calc(50% - 1px); left:0; right:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 200% 100% repeat;
  -webkit-mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation:perkFlowX 6s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .page-survey .perks::before,.page-survey .perks::after,.page-survey .perks li + li::before{animation:none}
}
.page-survey .perks li{padding:34px 38px}
.page-survey .perks h3{color:var(--navy); font-size:1.1rem; margin-bottom:8px}
.page-survey .perks p{font-size:.94rem; line-height:1.55}
@media (max-width:980px){
  .page-survey .why-grid{grid-template-columns:1fr; gap:36px}
}
@media (max-width:600px){
  .page-survey .perks{grid-template-columns:1fr; grid-auto-rows:auto}
  .page-survey .perks::before,.page-survey .perks::after{display:none}
  .page-survey .perks li{position:relative; padding:24px 0}
  .page-survey .perks li + li::before{
    content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px;
    background:linear-gradient(90deg, #06B6E4, #01E8B9, #0B3B8C, #06B6E4) 0 0 / 200% 100% repeat;
    -webkit-mask:linear-gradient(90deg, #000 70%, transparent);
            mask:linear-gradient(90deg, #000 70%, transparent);
    animation:perkFlowX 6s linear infinite;
  }
}

/* ---------- per-page ---------- */
.page-survey-main .scene-photo{object-position:50% 50%}
.page-create-host .scene-photo{object-position:50% 50%}
.page-analytics .scene:not(.scene--wide) .scene-photo{object-position:66.66% 50%}
.page-analytics .scene--wide .scene-lang{left:61.7%; top:25%}
.page-analytics .scene--wide .scene-card{left:0; top:59.3%; width:45%}
.page-analytics .scene--wide .scene-chip{left:56.4%; top:9.9%; padding:1.4cqw 1.6cqw 1.4cqw 2.5cqw; font-weight:400; color:var(--body)}
.page-create-host .scene--wide .scene-lang{left:50.3%; top:50.1%}
.page-create-host .scene--wide .scene-card{left:5.47%; top:59.3%; width:39%}
.page-create-host .scene--wide .scene-text strong{font-size:clamp(12px,2.5cqw,16px)}
.page-create-host .scene--wide .scene-text span{font-size:clamp(10px,1.9cqw,12px)}

/* ---------- survey hero: Figma cyan scrim (rgb 15,169,232) over the brand artwork ---------- */
.page-survey .hero--suite{
  background-image:
    linear-gradient(180deg, rgba(15,169,232,.7) 0%, rgba(15,169,232,.66) 62%, rgba(15,169,232,.44) 100%),
    url("../img/hero-bg1.png"),
    linear-gradient(rgb(15,169,232), rgb(15,169,232));
  background-size:auto, cover, auto;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
.page-survey-main .hero--suite{
  background-image:
    linear-gradient(180deg, rgba(15,169,232,.7) 0%, rgba(15,169,232,.44) 34.87%),
    url("../img/hero-bg1.png"),
    linear-gradient(rgb(15,169,232), rgb(15,169,232));
}
@media (max-width:820px){.page-survey .hero--suite{background-position:center, center left, center}}


/* ##########################################################################
   Project Management + Qualitative Research — project-management.html, qualitative-research.html
   <main> carries .page-feature (hero, split rows, CTA) + .page-survey (scene
   compositions and the 2×2 "why" grid, shared with the survey pages) + its own
   class: .page-pm / .page-qual.
   ########################################################################## */

/* ---------- hero: Figma navy scrim (rgb 11,59,140) over the brand artwork ---------- */
.page-pm .hero--suite,.page-qual .hero--suite{
  background-image:
    linear-gradient(180deg, rgba(11,59,140,.7) 0%, rgba(11,59,140,.66) 62%, rgba(11,59,140,.44) 100%),
    url("../img/hero-bg1.png"),
    linear-gradient(rgb(11,59,140), rgb(11,59,140));
  background-size:auto, cover, auto;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}

/* ---------- shared scene pieces ---------- */
.page-survey .scene-box{position:absolute; background:#fff; box-shadow:0 0 0 1px #E2E8F1; border-radius:16px}
.page-survey .scene-chip--plain{font-weight:400; color:var(--body); padding:1.4cqw 1.6cqw 1.4cqw 2.6cqw}
.page-survey .scene-card--sm{padding:2.4cqw 2.8cqw; gap:2cqw}
.page-survey .scene-card--sm .scene-icon{width:clamp(26px,6cqw,38px)}
/* avatar stack */
.page-survey .scene-avatars{display:flex; align-items:center; margin-top:1.2cqw}
.page-survey .scene-avatars i{width:clamp(14px,3.3cqw,21px); aspect-ratio:1; border-radius:50%; border:2px solid #fff; margin-left:-.9cqw; display:flex; align-items:center; justify-content:center; background:#00749E}
.page-survey .scene-avatars i:first-child{margin-left:0}
.page-survey .scene-avatars i:nth-child(2){background:#FBC02D}
.page-survey .scene-avatars i:nth-child(3){background:#E8483C}
.page-survey .scene-avatars i:nth-child(4){background:#12C2B0}
.page-survey .scene-avatars i svg{width:60%; height:60%}
.page-survey .scene-avatars em{font-style:normal; margin-left:.6cqw; font-size:clamp(9px,1.72cqw,11px); font-weight:600; color:#5F6C85}

/* ---------- project management: progress panel ---------- */
.page-pm .scene-progress{left:4.22%; top:27.25%; width:45.8%; display:flex; flex-direction:column; gap:3.4cqw; padding:3cqw 3.4cqw}
.page-pm .scene-progress span{display:flex; align-items:center; gap:1.4cqw; font-size:clamp(9px,1.875cqw,12px); font-weight:700; color:#1B2342; line-height:1}
.page-pm .scene-progress span::before{content:''; flex:none; width:8.75cqw; height:clamp(5px,1.25cqw,8px); border-radius:4px; background:#DCE1EC}
.page-pm .scene-progress b{flex:1; height:clamp(5px,1.25cqw,8px); border-radius:4px; background:#EDF1F7; overflow:hidden; position:relative}
.page-pm .scene-progress b::after{content:''; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:4px; background:var(--c); transform-origin:left; transition:transform 1s cubic-bezier(.2,.8,.2,1) .8s}
.page-pm .reveal .scene-progress b::after{transform:scaleX(0)}
.page-pm .reveal.is-in .scene-progress b::after{transform:none}
.page-pm .scene:not(.scene--wide) .scene-card{width:45.8%}
.page-pm .scene:not(.scene--wide) .scene-photo{object-position:50% 50%}
/* security scene */
.page-pm .scene--wide .scene-photo{object-position:50% 70%}
.page-pm .scene--wide .scene-chip{left:56.4%; top:9.9%}
.page-pm .scene--wide .scene-lang{left:61.7%; top:25.07%; gap:2.4cqw}
.page-pm .scene--wide .scene-lang svg{width:clamp(11px,2.5cqw,16px)}
.page-pm .scene--wide .scene-card{left:0; top:59.3%; width:31.7%}
.page-pm .scene-status{left:57.8%; top:44.4%; width:42%; display:flex; flex-direction:column; gap:2.2cqw; padding:3.2cqw}
.page-pm .scene-status span{display:flex; align-items:center; gap:1.8cqw}
.page-pm .scene-status span::before{content:''; flex:none; width:clamp(16px,4.7cqw,30px); aspect-ratio:1; border-radius:50%; background:#E8ECF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='11' r='6' fill='%239AA4BF'/%3E%3Cpath d='M4 25c0-5 5-8 11-8s11 3 11 8z' fill='%239AA4BF'/%3E%3C/svg%3E") center/100% no-repeat}
.page-pm .scene-status span i{flex:1; height:clamp(4px,.95cqw,6px); border-radius:3px; background:#DCE1EC; max-width:11cqw}
.page-pm .scene-status em{margin-left:auto; font-style:normal; padding:.5cqw 1.6cqw; border-radius:99px; font-size:clamp(8px,1.4cqw,9px); font-weight:600; line-height:1.3}
.page-pm .scene-status .ok{background:#D4F5EC; color:#0A6455}
.page-pm .scene-status .flag{background:#FFF1CC; color:#6B4C00}
.page-pm .scene-status .block{background:#FCE4EC; color:#8A1F45}

/* ---------- project management: six advantage cards, image on top ---------- */
.page-pm .acards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.page-pm .acard{display:flex; flex-direction:column; background:#fff; border-radius:var(--r-lg); padding:32px 28px 36px}
.page-pm .acard img{display:block; width:100%; height:auto; aspect-ratio:384/150; object-fit:cover; border-radius:10px; margin-bottom:28px; background:linear-gradient(135deg,#E1F5FC,#DAF7F0)}
.page-pm .acard img.asset-missing{min-height:0; padding:12px; font-size:.8rem}
.page-pm .acard h3{color:var(--navy); font-size:1.14rem; margin-bottom:10px}
.page-pm .acard p{font-size:.95rem; color:var(--body)}
@media (max-width:980px){.page-pm .acards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.page-pm .acards{grid-template-columns:1fr} .page-pm .acard{padding:26px 22px 28px}}

/* ---------- qualitative research ---------- */
.page-qual .scene-chip{left:63.3%}
.page-qual .scene-photo{object-position:50% 72%}
.page-qual .scene-focus{left:5.8%; top:25%; width:35.2%}
.page-qual .scene-focus .scene-join{flex:none; margin-left:auto; padding:.8cqw 2.2cqw; border-radius:99px; background:#D4F5EC; color:#0A6455; font-size:clamp(9px,1.72cqw,11px); font-weight:700; line-height:1.2}
.page-qual .scene-modes{left:39.5%; top:66.75%; width:36%}
.page-qual .scene--quant .scene-photo{object-position:50% 50%}
.page-qual .scene--quant .scene-q2{left:0; top:25%; width:29.5%}
.page-qual .scene--quant .scene-panel{left:0; top:47.75%; display:flex; align-items:center; gap:1.6cqw; padding:1.6cqw 2.2cqw; font-size:clamp(9px,1.72cqw,11px); font-weight:600; color:var(--ink)}
.page-qual .scene--quant .scene-panel .scene-avatars{margin-top:0}
.page-qual .scene--quant .scene-shape{left:70.5%; top:60.25%; width:29.5%}
@container (max-width:420px){
  .page-pm .scene-progress{width:56%}
  .page-pm .scene-status{width:50%; left:auto; right:0}
  .page-qual .scene-focus{width:48%}
  .page-qual .scene-modes{left:auto; right:0; width:52%}
  .page-qual .scene--quant .scene-shape{left:auto; right:0; width:40%}
}

/* ---------- home hero: longer headline, marginally smaller so it keeps the original placement ---------- */
.page-home .hero h1{font-size:clamp(2.2rem,4.3vw,3.1rem)}

/* ##########################################################################
   Figma artwork — hero tiles (.fig-art) and photo compositions (.fig-comp)
   are built 1:1 from the Figma frames and scale with their box (cqw units).
   ########################################################################## */
.fig-art,.fig-comp{font-family:var(--font, 'Manrope', sans-serif)}
.hero-art .fig-art{max-width:440px; margin-left:auto}
.fig-art{animation:figArtIn .9s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes figArtIn{from{opacity:0; transform:translateY(18px) scale(.97)}to{opacity:1; transform:none}}
.reveal .fig-comp .fig-float{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in .fig-comp .fig-float{opacity:1; transform:none}
.reveal.is-in .fig-comp .fig-float:nth-child(2){transition-delay:.15s}
.reveal.is-in .fig-comp .fig-float:nth-child(3){transition-delay:.3s}
.reveal.is-in .fig-comp .fig-float:nth-child(4){transition-delay:.45s}
.reveal.is-in .fig-comp .fig-float:nth-child(n+5){transition-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .fig-art{animation:none}
  .reveal .fig-comp .fig-float{opacity:1; transform:none; transition:none}
}

/* ---------- hero illustration as an image file ---------- */
.hero-art .hero-art-img{display:block; width:100%; max-width:440px; height:auto; aspect-ratio:1; margin-left:auto}
@media (max-width:900px){.hero-art .hero-art-img{margin:0 auto; max-width:360px}}


/* ##########################################################################
   About Us — about-us.html  (<main class="page-feature page-about">)
   ########################################################################## */
.page-about .hero{background:url("../img/hero-bg1.png") center/cover no-repeat, rgb(11,59,140)}
.page-about .hero-grid{grid-template-columns:minmax(0,606fr) minmax(0,690fr); gap:56px}
.page-about .hero-art{max-width:none}

/* hero composition, laid out on the Figma 690×469 frame */
.page-about .about-art{position:relative; width:100%; aspect-ratio:690/469; container-type:inline-size}
.page-about .about-art-photo{
  position:absolute; left:21.13%; top:0; width:78.87%; height:100%; max-width:none; object-fit:cover; object-position:74% 50%;
  border-radius:4.17cqw 4.17cqw 17.9cqw 4.17cqw;
}
.page-about .about-art-frame{position:absolute; overflow:hidden; border-radius:2cqw; box-shadow:0 0 0 1.5px #fff; background:#fff}
.page-about .about-art-frame img{display:block; width:100%; height:100%; max-width:none; object-fit:cover}
.page-about .about-art-frame--1{left:.3%; top:28.1%; width:29.2%; height:27.9%}
.page-about .about-art-frame--2{left:5.2%; top:64.4%; width:28.5%; height:30%}
.page-about .about-art-rate{position:absolute; left:6%; right:6%; bottom:7%; display:flex; flex-direction:column; gap:1cqw; padding:1.4cqw 2cqw; border-radius:1.4cqw; background:rgba(19,34,80,.72)}
.page-about .about-art-rate i{display:block; width:46%; height:.7cqw; border-radius:99px; background:#fff}
.page-about .about-art-stars{display:flex; gap:.9cqw; color:#01E8B9}
.page-about .about-art-stars svg{width:1.79cqw; height:auto}
.page-about .about-art-insight{
  position:absolute; left:2%; top:4.7%; width:29.9%;
  display:flex; align-items:center; gap:1.6cqw; padding:1.5cqw 2cqw; border-radius:1.6cqw; background:#fff; box-shadow:0 0 0 .5px #E3EAF3;
}
.page-about .about-art-spark{flex:none; width:4.6cqw; aspect-ratio:1; border-radius:50%; background:#E1F5EE; display:flex; align-items:center; justify-content:center}
.page-about .about-art-spark svg{width:62%; height:62%}
.page-about .about-art-insight strong{display:block; font-size:clamp(9px,1.74cqw,12px); font-weight:400; color:rgb(25,46,107); line-height:1.2}
.page-about .about-art-insight small{display:block; margin-top:.4cqw; font-size:clamp(8px,1.45cqw,10px); color:rgb(83,99,144); line-height:1.2}
.page-about .about-art-chip{
  position:absolute; left:76.2%; top:6.5%; width:19.35%; height:6.5%;
  display:flex; align-items:center; justify-content:space-between; padding:0 1.4cqw 0 2.1cqw; border-radius:99px; background:#fff; box-shadow:0 0 0 .5px #E3EAF3;
  font-family:Inter, Manrope, sans-serif; font-size:clamp(8px,1.6cqw,11px); color:rgb(25,46,107); line-height:1; white-space:nowrap;
}
.page-about .about-art-toggle{position:relative; flex:none; width:4.2cqw; height:2.4cqw; border-radius:99px; background:#01E8B9}
.page-about .about-art-toggle::after{content:''; position:absolute; right:.3cqw; top:.3cqw; bottom:.3cqw; aspect-ratio:1; border-radius:50%; background:#fff}
.page-about .about-art-quote{
  position:absolute; left:66.7%; top:69.5%; width:31.9%; height:27.5%;
  display:flex; flex-direction:column; justify-content:space-between; padding:2cqw 2.4cqw; border-radius:1.6cqw;
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.page-about .about-art-quote b{font-size:3.6cqw; line-height:1; color:#12B5A5; font-weight:700}
.page-about .about-art-quote span{font-size:clamp(8px,1.6cqw,11px); line-height:1.35; color:rgb(25,46,107)}
.page-about .about-float{animation:aboutRise .7s cubic-bezier(.2,.8,.2,1) both}
.page-about .about-art-frame--1{animation-delay:.15s}
.page-about .about-art-frame--2{animation-delay:.3s}
.page-about .about-art-insight{animation-delay:.45s}
.page-about .about-art-chip{animation-delay:.6s}
.page-about .about-art-quote{animation-delay:.75s}
@keyframes aboutRise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.page-about .about-float{animation:none}}
@media (max-width:900px){
  .page-about .hero-grid{grid-template-columns:1fr; gap:40px}
}

/* who we are: photo sits in the right part of the 640×400 frame */
.page-about .about-who{border-radius:18px; aspect-ratio:473.6/288}
.page-about .about-who img{width:100%; height:100%; object-fit:cover}

/* core values: six cards, 3 × 2, on the navy band (Figma rgb 19,34,80) */
.page-about .band{background:rgb(19,34,80)}
.page-about .band .section-head{max-width:760px}
.page-about .vcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.page-about .vcard{display:flex; flex-direction:column; gap:22px; padding:32px 28px; border-radius:14px; background:#fff}
.page-about .vcard-art{height:150px; border-radius:14px; background:linear-gradient(90deg, rgb(234,246,252) 0%, rgb(232,251,245) 100%); display:flex; align-items:center; justify-content:center; overflow:hidden}
.page-about .vcard-art img{display:block; width:340px; max-width:92%; height:auto; aspect-ratio:340/134; object-fit:contain}
.page-about .vcard h3{font-size:1.37rem; font-weight:600; line-height:1.25; letter-spacing:-.015em; color:rgb(26,45,107); margin:0}
.page-about .vcard p{margin:-12px 0 0; font-size:.93rem; line-height:1.65; color:rgb(74,85,104)}
@media (max-width:980px){.page-about .vcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.page-about .vcards{grid-template-columns:1fr} .page-about .vcard{padding:26px 22px}}

/* work with us */
.page-about .section--tint .split-media--photo{border-radius:14px; aspect-ratio:640/480}
.page-about .section--tint .split-media--photo img{width:100%; height:100%; object-fit:cover}


/* ##########################################################################
   Pricing — pricing.html  (<main class="page-feature page-pricing">)
   ########################################################################## */
.page-pricing .hero{background:url("../img/hero-bg1.png") center/cover no-repeat, rgb(11,59,140); min-height:560px; display:flex; align-items:center}
.page-pricing .hero .container{width:100%}
.page-pricing .hero-inner{max-width:640px}
.page-pricing .hero-grid{grid-template-columns:minmax(0,606fr) minmax(0,690fr); gap:56px}
.page-pricing .hero-art{max-width:none}
.page-pricing .pricing-art{display:block; width:100%; height:auto; aspect-ratio:691/469; animation:aboutRise .8s cubic-bezier(.2,.8,.2,1) .15s both}
@media (prefers-reduced-motion:reduce){.page-pricing .pricing-art{animation:none}}
@media (max-width:900px){.page-pricing .hero-grid{grid-template-columns:1fr; gap:40px}}
.page-pricing .hero .lede{max-width:540px}

/* plans: 3 columns, Basic Monthly highlighted */
.page-pricing .plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:48px}
.page-pricing .plan{display:flex; flex-direction:column; min-height:542px; padding:33px 29px; border-radius:14px; background:rgb(244,250,253)}
.page-pricing .plan--featured{background:#fff; box-shadow:inset 0 0 0 1px rgb(6,182,228)}
.page-pricing .plan-head{display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding-bottom:24px; border-bottom:1px solid rgba(0,0,0,.1)}
.page-pricing .plan-head h3{font-family:Roboto, Manrope, sans-serif; font-weight:500; font-size:28px; line-height:36px; letter-spacing:0; color:rgb(26,45,107); margin:0}
.page-pricing .plan-head .btn{min-width:160px}
.page-pricing .plan-list{list-style:none; margin:28px 0 0; padding:0 0 0 0; display:grid; gap:15px}
.page-pricing .plan-list li{display:flex; align-items:center; gap:10px; font-size:16.83px; line-height:1.65; color:rgb(74,85,104)}
.page-pricing .plan-check{flex:none; width:20px; height:20px}
@media (max-width:1100px){.page-pricing .plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .page-pricing .plans{grid-template-columns:1fr}
  .page-pricing .plan{min-height:0; padding:28px 22px 30px}
  .page-pricing .plan-head h3{font-size:24px; line-height:32px}
  .page-pricing .plan-list li{font-size:15.5px}
}

/* comparison table on the navy band */
.page-pricing .band{background:rgb(19,34,80)}
.page-pricing .band .section-head{max-width:760px}
.page-pricing .compare{border-radius:14px; background:#fff; overflow:hidden}
.page-pricing .compare-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.page-pricing .compare-table{width:100%; min-width:860px; border-collapse:collapse}
.page-pricing .compare-table th,.page-pricing .compare-table td{padding:13px 16px; border-bottom:1px solid rgba(0,0,0,.1); font-size:.86rem; line-height:1.4; color:rgb(74,85,104); text-align:center; font-weight:400}
.page-pricing .compare-table th + th,.page-pricing .compare-table td,.page-pricing .compare-table thead th + th{border-left:1px solid rgba(0,0,0,.1)}
.page-pricing .compare-table tbody th{text-align:left; padding-left:26px; white-space:nowrap}
.page-pricing .compare-table thead th{padding:22px 16px 18px; font-size:21.92px; font-weight:600; line-height:1.25; letter-spacing:-.015em; color:rgb(26,45,107); white-space:nowrap; border-bottom:1px solid rgba(0,0,0,.1)}
.page-pricing .compare-table thead th small{font-size:.5em; font-weight:500; letter-spacing:0; color:rgb(74,85,104)}
.page-pricing .compare-table tbody tr:last-child th,.page-pricing .compare-table tbody tr:last-child td{border-bottom:0}
.page-pricing .compare-table tbody tr:hover th,.page-pricing .compare-table tbody tr:hover td{background:rgb(244,250,253)}
.page-pricing .compare-table th:first-child{position:sticky; left:0; background:#fff; z-index:1}
@media (max-width:640px){.page-pricing .compare-table thead th{font-size:18px}}