/* ==========================================================================
   Recall Systems — site.css
   Mobile-first. Breakpoints:
     xs ≤480  → base styles (phones)
     sm ≤768  → @media (min-width:481px) upgrades
     md ≤992  → @media (min-width:769px) upgrades
     lg+      → @media (min-width:993px) upgrades (desktop layout)
   Light theme only. Accent #1E8FFF.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --white:#FFFFFF; --gray:#EEF2F7; --surface-soft:#F7F9FC; --navy:#0B1120; --navy-2:#1B2540;
  --ink:#0B1120; --ink-2:#475467; --ink-3:#667085; --text-on-dark:#AEB6C4;
  --line:#DDE3EC; --line-soft:#EDF1F6; --line-dark:#243049;
  --accent:#1E8FFF; --accent-hover:#3D9EFF; --accent-ink:#0B6FD6;
  --ph-border:#B8C4D6; --ph-fill:#F7F9FC; --ph-text:#667085;

  --font-head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* type scale (mobile values; upgraded below) */
  --hero:28px; --title:28px; --subtitle:26px; --cta-title:28px; --blog-hero:34px;
  --lede:18px; --faq-q:19px;

  --space-40:40px; --gutter:16px;
  --r-btn:4px; --r-sm:5px; --r-faq:8px; --r-md:10px; --r-price:11.2px; --r-pill:9999px;
  --btn-xl:60px; --btn-md:42px;
  --container-lg:1140px; --container-xl:1320px;
  --header-h:100px;
  --band-pad-bottom:75px; --title-pad:40px;
  --t:.3s;
  --shadow-header:0 2px 5px rgba(0,0,0,.1);
  --shadow-card:0 2px 12px rgba(0,0,0,.08); --shadow-card-hover:0 8px 28px rgba(0,0,0,.14);
  --shadow-price:0 30px 50px -7px rgba(0,0,0,.1);
  --shadow-md:0 1px 3px rgba(0,0,0,.05),0 20px 25px -5px rgba(0,0,0,.05),0 10px 10px -5px rgba(0,0,0,.04);

  /* V-notch dividers: --v-<this band>-<next band> */
  --v-white-gray:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1742' height='287' viewBox='0 0 1742 287' preserveAspectRatio='none'%3E%3Crect width='1742' height='287' fill='%23EEF2F7'/%3E%3Cpath d='M0 130L636.046 278.379C660.464 284.076 685.736 285.13 710.544 281.486L1742 130V-126H0V130Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --v-white-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1742' height='287' viewBox='0 0 1742 287' preserveAspectRatio='none'%3E%3Crect width='1742' height='287' fill='%230B1120'/%3E%3Cpath d='M0 130L636.046 278.379C660.464 284.076 685.736 285.13 710.544 281.486L1742 130V-126H0V130Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --v-gray-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1742' height='287' viewBox='0 0 1742 287' preserveAspectRatio='none'%3E%3Crect width='1742' height='287' fill='%23FFFFFF'/%3E%3Cpath d='M0 130L636.046 278.379C660.464 284.076 685.736 285.13 710.544 281.486L1742 130V-126H0V130Z' fill='%23EEF2F7'/%3E%3C/svg%3E");
  --v-gray-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1742' height='287' viewBox='0 0 1742 287' preserveAspectRatio='none'%3E%3Crect width='1742' height='287' fill='%230B1120'/%3E%3Cpath d='M0 130L636.046 278.379C660.464 284.076 685.736 285.13 710.544 281.486L1742 130V-126H0V130Z' fill='%23EEF2F7'/%3E%3C/svg%3E");
  --v-navy-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1742' height='287' viewBox='0 0 1742 287' preserveAspectRatio='none'%3E%3Crect width='1742' height='287' fill='%23FFFFFF'/%3E%3Cpath d='M0 130L636.046 278.379C660.464 284.076 685.736 285.13 710.544 281.486L1742 130V-126H0V130Z' fill='%230B1120'/%3E%3C/svg%3E");
  --v-navy-gray:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1742' height='287' viewBox='0 0 1742 287' preserveAspectRatio='none'%3E%3Crect width='1742' height='287' fill='%23EEF2F7'/%3E%3Cpath d='M0 130L636.046 278.379C660.464 284.076 685.736 285.13 710.544 281.486L1742 130V-126H0V130Z' fill='%230B1120'/%3E%3C/svg%3E");
}
@media (min-width:481px){
  :root{ --hero:48px; --title:40px; --subtitle:32px; --cta-title:34px; --blog-hero:44px;
         --lede:20px; --faq-q:22px; --band-pad-bottom:110px; --title-pad:60px; }
}
@media (min-width:993px){
  :root{ --hero:4.8rem; --title:50px; --subtitle:40px; --cta-title:40px; --blog-hero:52px;
         --faq-q:26px; --band-pad-bottom:148px; --title-pad:80px; }
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;margin:0;color:inherit;line-height:1.2;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
.carousel__track,.marquee__track,.press-grid,.nav__list,.drawer__list{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:1000;background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r-btn);font-weight:700}
.skip-link:focus{top:12px}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 3. Layout primitives ---------- */
.container{width:100%;max-width:var(--container-lg);margin-inline:auto;padding-inline:var(--gutter)}
.container--xl{max-width:var(--container-xl)}
.container--narrow{max-width:832px}

.band{position:relative;background:var(--white)}
.band--white{background:var(--white)}
.band--gray{background:var(--gray)}
.band--navy{background:var(--navy);color:#fff}
.band--pb{padding-bottom:80px}
/* V-notch: painted at the bottom of the UPPER band */
.v{background-repeat:no-repeat;background-position:50% 100%;background-size:100% auto;padding-bottom:var(--band-pad-bottom);margin-bottom:-1px}
.v--white-gray{background-image:var(--v-white-gray)}
.v--white-navy{background-image:var(--v-white-navy)}
.v--gray-white{background-image:var(--v-gray-white)}
.v--gray-navy{background-image:var(--v-gray-navy)}
.v--navy-white{background-image:var(--v-navy-white)}
.v--navy-gray{background-image:var(--v-navy-gray)}

/* Section title (50/1.2, centered, padding 80 0) */
.section-title{font-size:var(--title);line-height:1.2;letter-spacing:-.02em;text-align:center;padding:var(--title-pad) 0}
.section-title span{display:block}
.band--navy .section-title{color:#fff}
.section-title--compact{font-size:clamp(28px,4vw,36px);line-height:1.3}
.section-title--flush-bottom{padding-bottom:calc(var(--title-pad) / 2)}
.eyebrow{display:block;font-family:var(--font-body);font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent-ink)}
.band--navy .eyebrow{color:var(--accent)}
.lead-copy{font-size:16px;line-height:1.55;color:var(--ink-2);text-align:center;max-width:760px;margin:0 auto}

/* ---------- 4. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-xl);padding:0 32px;border-radius:var(--r-btn);
  font-family:var(--font-body);font-size:20px;font-weight:700;line-height:1;white-space:nowrap;text-align:center;
  background:var(--accent);color:#fff;border:1px solid transparent;transition:all var(--t);cursor:pointer}
.btn:hover{background:var(--accent-hover)}
.btn--md{height:var(--btn-md);padding:0 22px;font-size:16px}
.btn--nav{font-size:17px;padding:0 30px}
.btn--hero{border-radius:var(--r-sm)}
.btn--cta{font-size:23px}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink);border-radius:2px;font-weight:600}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--white{background:#fff;color:var(--ink);border-radius:2px;height:54px;width:100%;max-width:318px;font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.btn--white:hover{background:var(--navy);color:#fff}
.btn--block{display:flex;width:100%}
.btn .icon{width:20px;height:20px}
.link-arrow{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--accent-ink);transition:color var(--t)}
.link-arrow:hover{color:var(--accent)}
.link-arrow .icon{width:16px;height:16px;transition:transform var(--t)}
.link-arrow:hover .icon{transform:translateX(3px)}

/* ---------- 5. Placeholder box (.ph) — the ONE placeholder component ---------- */
.ph{position:relative;display:grid;place-items:center;border:1px dashed var(--ph-border);background:var(--ph-fill);color:var(--ph-text);
  padding:12px;text-align:center;font-family:var(--font-body);font-size:13px;font-weight:600;line-height:1.35;
  font-variant-caps:all-small-caps;letter-spacing:.06em;overflow:hidden;min-width:0}
.ph > span{max-width:28ch}
.ph--dark,.hero .ph,.band--navy .ph:not(.ph--light),.cta-box .ph{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:var(--text-on-dark)}
.ph--light{border-color:var(--ph-border);background:var(--ph-fill);color:var(--ph-text)}
.ph--round{border-radius:50%}
.ph--r{border-radius:var(--r-md)}
.ph--inline{display:inline-grid;padding:6px 10px;font-size:12px}
/* text-only placeholder line (quotes, names, dates, outlets) */
.ph-text{display:inline-block;color:var(--ph-text);font-size:13px;font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.06em;
  border:1px dashed var(--ph-border);background:var(--ph-fill);padding:2px 8px;border-radius:3px;line-height:1.5}
/* demo slot: a placeholder box that carries a live CSS demo + a pinned tag */
.ph--demo{padding:0;container-type:inline-size;font-variant-caps:normal;letter-spacing:0;background:var(--surface-soft)}
.ph__tag{position:absolute;top:12px;right:12px;z-index:5;max-width:calc(100% - 24px);background:#fff;border:1px dashed var(--ph-border);border-radius:var(--r-pill);
  padding:4px 10px;font-size:11px;font-weight:700;color:var(--ph-text);font-variant-caps:all-small-caps;letter-spacing:.06em;line-height:1.3}

/* ---------- 6. Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;height:var(--header-h);border-bottom:1px solid var(--line);box-shadow:var(--shadow-header)}
.site-header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:16px;max-width:1336px;margin-inline:auto}
.brand{display:flex;align-items:center;gap:12px;flex:none;min-height:80px}
.brand__mark{width:56px;height:56px;border-radius:12px;flex:none}
.brand__word{font-family:var(--font-head);font-weight:700;font-size:28px;line-height:.95;letter-spacing:-.01em;color:var(--ink);display:flex;flex-direction:column}
.brand__word b{font-weight:700;color:var(--accent)}
.nav{display:none}
.nav__list{list-style:none;display:flex;align-items:center;height:100%;gap:5px}
.nav__item{position:relative;height:100%;display:flex;align-items:center}
.nav__link{display:inline-flex;align-items:center;gap:4px;padding:10px 0 10px 16px;font-size:17px;font-weight:600;line-height:1;color:var(--ink);transition:color var(--t)}
.nav__link:hover,.nav__link[aria-current="page"],.nav__item.is-current > .nav__link{color:var(--accent-ink)}
.nav__link .icon{width:14px;height:14px;color:var(--accent);transition:transform .15s ease}
.nav-dd.is-open > .nav__link .icon{transform:rotate(180deg)}
.nav-dd__panel{position:absolute;top:100%;left:-16px;width:600px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;overflow:hidden}
.nav-dd__panel--narrow{width:340px}
.nav-dd.is-open > .nav-dd__panel{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}
@media (hover:hover){
  .nav-dd:hover > .nav-dd__panel{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}
  .nav-dd:hover > .nav__link .icon{transform:rotate(180deg)}
}
.nav-dd__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 16px 12px;margin:0 16px;border-bottom:1px solid var(--line)}
.nav-dd__head strong{font-family:var(--font-head);font-size:16px}
.nav-dd__head span{font-size:13px;color:var(--ink-3)}
.nav-dd__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px 16px 16px}
.nav-dd__panel--narrow .nav-dd__grid{grid-template-columns:1fr}
.sublink{display:flex;align-items:flex-start;gap:12px;padding:10px 16px;border-radius:8px;transition:background var(--t)}
.sublink:hover,.sublink[aria-current="page"]{background:var(--surface-soft)}
.sublink__icon{width:34px;height:34px;border-radius:8px;background:rgba(30,143,255,.1);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.sublink__icon .icon{width:19px;height:19px}
.sublink__title{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.sublink__desc{display:block;font-size:14px;line-height:1.4;color:var(--ink-3);margin-top:2px}
.nav-dd__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;background:var(--surface-soft);border-top:1px solid var(--line)}
.nav-dd__foot p{font-size:14px;font-weight:600;color:var(--ink-2)}
.header-cta{display:none}
.burger{width:44px;height:44px;display:grid;place-items:center;margin-right:-6px}
.burger__bars{position:relative;width:32px;height:2px;background:var(--ink);transition:background .2s}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;width:32px;height:2px;background:var(--ink);transition:transform .2s}
.burger__bars::before{top:-9px}.burger__bars::after{top:9px}
.burger[aria-expanded="true"] .burger__bars{background:transparent}
.burger[aria-expanded="true"] .burger__bars::before{transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars::after{transform:translateY(-9px) rotate(-45deg)}
.drawer{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:99;background:#fff;overflow-y:auto;padding:8px 16px 24px;display:flex;flex-direction:column}
.drawer[hidden]{display:none}
.drawer__list{list-style:none;flex:1}
.drawer__list > li{border-bottom:1px solid var(--line)}
.drawer__link,.drawer summary{display:flex;align-items:center;justify-content:space-between;min-height:60px;font-size:22px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary .icon{width:20px;height:20px;color:var(--accent);transition:transform .2s}
.drawer details[open] summary .icon{transform:rotate(180deg)}
.drawer__sub{list-style:none;padding:0 0 12px 4px}
.drawer__sub a{display:block;padding:10px 0;font-size:17px;font-weight:500;color:var(--ink-2)}
.drawer__sub a[aria-current="page"],.drawer__link[aria-current="page"]{color:var(--accent-ink)}
.drawer__cta{margin-top:24px}
body.drawer-open{overflow:hidden}
@media (min-width:993px){
  .nav{display:block;height:100%;margin-right:auto;margin-left:8px}
  .header-cta{display:inline-flex;width:165px}
  .burger,.drawer{display:none!important}
}

/* ---------- 7. Hero (navy) ---------- */
.hero{background:var(--navy);color:#fff;padding:40px 0}
.hero__inner{display:flex;align-items:flex-start;gap:32px}
.hero__content{flex:1 1 auto;min-width:0}
.hero__media{display:none}
.hero__title-wrap{border-left:2px solid var(--line-dark);padding-left:18px;margin-bottom:15px}
.hero__title{font-size:var(--hero);line-height:1.2;letter-spacing:-.025em;color:#fff;font-weight:700}
.hero__row{display:flex;flex-direction:column;gap:24px}
.hero__sub{font-size:18px;line-height:1.55;font-weight:600;color:var(--text-on-dark);max-width:560px}
.hero__sub span{display:block}
.hero__sub span + span{margin-top:4px}
.hero__action{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero__action .btn{width:100%}
.avatars{display:flex;padding-left:8px}
.avatar{width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-8px;display:grid;place-items:center;
  font-family:var(--font-body);font-size:13px;font-weight:800;line-height:1;color:#fff;background:var(--accent)}
.avatar:nth-child(even){background:var(--navy-2)}
.avatar--more{background:#fff!important;color:var(--navy)}
.avatar--img{object-fit:cover;padding:0;background:#fff}
.avatar--ph{background:var(--navy)!important;border-style:dashed;border-color:rgba(255,255,255,.55);color:var(--text-on-dark);font-size:11px}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px}
.badges .ph{height:auto;min-height:48px;padding:6px 10px;line-height:1.25}
.badge-rule{display:none}
/* review badges (Google / Facebook / Trustpilot) */
.rbadge{display:inline-flex;align-items:center;gap:14px;color:#fff}
.rbadge__logo{width:64px;height:64px;flex:none}
.rbadge__text{display:flex;flex-direction:column;gap:4px}
.rbadge__name{font-family:var(--font-heading,inherit);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:-.01em}
.rbadge__stars{display:inline-flex;gap:2px;color:#F5C042}
.rbadge__star{width:24px;height:24px}
@media (min-width:481px){
  .badge-rule{display:block;width:1px;height:64px;background:rgba(255,255,255,.28)}
  .badges{gap:16px 28px}
  .hero__action .btn{width:auto}
}
@media (min-width:769px){
  .hero__row{flex-direction:row;align-items:flex-start;justify-content:space-between}
  .hero__action{padding-left:64px;flex:none}
  .hero__title-wrap{padding-left:43px;margin-bottom:50px}
  .badges{display:flex;align-items:center;gap:0;margin-top:75px}
  .badges .ph{width:170px;flex:none}
  .badge-rule{display:block;width:1px;height:48px;background:var(--line-dark);margin:0 24px}
}
@media (min-width:993px){
  .hero{padding:120px 0}
  .hero__content{flex:0 1 65%;max-width:65%}
  .hero__media{display:block;flex:0 1 35%;max-width:35%;margin-top:-96px}
  .hero__media .ph{width:305px;max-width:100%;height:710px;margin-left:auto}
  .hero__media .hero__img{display:block;width:305px;max-width:100%;height:710px;object-fit:contain;object-position:bottom;margin-left:auto}
  .hero__sub{font-size:20px}
}

/* ---------- 8. Carousels (testimonials, trades) + marquee (partners) ---------- */
.carousel{position:relative;margin:0 30px}
.carousel__track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.carousel__slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.carousel__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:60px;display:grid;place-items:center;color:var(--accent);transition:color var(--t)}
.carousel__btn:hover{color:var(--accent-hover)}
.carousel__btn .icon{width:30px;height:50px;stroke-width:3}
.carousel__btn--prev{left:-32px}.carousel__btn--next{right:-32px}
@media (min-width:769px){
  .carousel{margin:0 56px}
  .carousel__btn{width:48px;height:80px}
  .carousel__btn .icon{width:40px;height:66px;stroke-width:2.5}
  .carousel__btn--prev{left:-60px}.carousel__btn--next{right:-60px}
  .carousel--2up .carousel__slide{flex-basis:calc((100% - 32px) / 2)}
  .carousel--3up .carousel__slide{flex-basis:calc((100% - 32px) / 2)}
}
@media (min-width:993px){
  .carousel--3up .carousel__slide{flex-basis:calc((100% - 64px) / 3)}
  .carousel__btn--prev{left:-72px}.carousel__btn--next{right:-72px}
}

/* testimonial card */
.testimonials{padding-bottom:40px}
/* a testimonials band that ends in a V needs the full V padding, or the cards run into the divider */
.band.testimonials.v{padding-bottom:var(--band-pad-bottom)}
.t-card{display:flex;flex-direction:column;gap:12px;background:#fff;padding:10px;margin-bottom:40px;height:100%}
.t-card__media{width:100%;height:210px;border-radius:var(--r-md);flex:none}
.t-card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:4px 6px 6px}
.t-card__quote{font-size:16px;line-height:1.55;font-weight:500;margin-top:8px}
.t-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:auto;padding-top:16px}
.t-card__name{font-weight:800;font-size:16px;line-height:1.2}
.t-card__see{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:16px;font-weight:800;color:var(--accent-ink);white-space:nowrap}
.t-card__see:hover{color:var(--accent)}
.t-card__see .icon{width:20px;height:20px}
@media (min-width:481px){
  .t-card{flex-direction:row;padding:20px;height:250px;max-height:250px;overflow:hidden;gap:0}
  .t-card__media{width:250px;height:210px}
  .t-card__body{padding:0 0 0 16px}
  .t-card__quote{font-size:18px;margin-top:0}
}
/* two-up testimonial cards are too narrow for side-by-side media + quote below ~1280px: stack them */
@media (min-width:769px) and (max-width:1279px){
  .carousel--2up .t-card{flex-direction:column;height:100%;max-height:none;gap:12px;padding:16px}
  .carousel--2up .t-card__media{width:100%}
  .carousel--2up .t-card__body{padding:0}
}

/* trade tiles */
.trades{padding-bottom:var(--band-pad-bottom)}
.trade-slide{display:flex;flex-direction:column;gap:40px}
.trade-tile{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-md);height:265px;overflow:hidden}
.trade-tile__media{flex:1;border-radius:var(--r-md) var(--r-md) 0 0;border-width:0 0 1px 0!important}
.trade-tile__label{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--ink);text-align:center;padding:14px 12px 16px;line-height:1.2}
.trade-tile__label .ph-text{font-size:14px}
.trades__cta{display:flex;justify-content:center;margin-top:40px}
.trades__cta .btn{min-width:min(360px,100%)}

/* partner marquee */
.marquee{overflow:hidden;padding:8px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:24px;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__tile{width:180px;height:72px;border-radius:var(--r-md);flex:none}
@keyframes marquee{to{transform:translateX(calc(-50% - 12px))}}
@media (min-width:993px){.marquee__tile{width:200px;height:80px}.marquee__track{gap:32px}@keyframes marquee{to{transform:translateX(calc(-50% - 16px))}}}

/* ---------- 9. Feature rows (home) ---------- */
.features{padding-bottom:var(--band-pad-bottom)}
.feature{display:flex;flex-direction:column;gap:32px}
.feature + .feature{margin-top:64px}
.feature__media{width:100%}
.feature__media .ph{width:100%;aspect-ratio:560/690;border-radius:var(--r-md)}
.feature__title{font-size:var(--subtitle);line-height:1.2;letter-spacing:-.02em}
.feature__lede{font-size:var(--lede);font-style:italic;font-weight:500;line-height:1.55;margin-top:16px}
.checks{list-style:none;margin-top:20px}
.checks li{margin-bottom:10px}
.checks__title{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:700;line-height:1.4;color:var(--accent-ink)}
.checks__title .badge-check{width:20px;height:20px;flex:none}
.checks__desc{display:block;font-size:15px;line-height:1.625;margin-top:5px}
.checks__desc a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.feature__cta{margin-top:40px;display:flex}
.feature__cta .btn{flex:1}
.badge-check{color:var(--accent);width:20px;height:20px;flex:none}
@media (min-width:481px){
  .checks__title{font-size:18px;color:var(--accent)}
  .checks__desc{font-size:16px}
  .feature__cta .btn{flex:0 0 auto}
}
@media (min-width:993px){
  .feature{flex-direction:row;align-items:center;justify-content:space-between;gap:96px}
  .feature--reverse{flex-direction:row-reverse}
  .feature + .feature{margin-top:80px}
  .feature__media{flex:0 0 calc(45% - 48px)}
  .feature__content{flex:0 0 calc(55% - 48px)}
}

/* ---------- 10. Demo animations (inside .ph--demo, sized in cqw) ---------- */
.demo{position:absolute;inset:0;overflow:hidden;font-family:var(--font-body);font-variant-caps:normal;letter-spacing:0;color:var(--ink)}
.demo *{box-sizing:border-box}
.demo__phone{position:absolute;left:50%;top:50%;width:52cqw;aspect-ratio:9/18.5;transform:translate(-50%,-50%);border:2px solid var(--navy);border-radius:7cqw;
  background:#fff;box-shadow:0 20px 40px -12px rgba(11,17,32,.25);padding:9cqw 3.2cqw 4cqw;display:flex;flex-direction:column;gap:2.4cqw;font-size:2.9cqw;line-height:1.35;overflow:hidden}
.demo__phone::before{content:"";position:absolute;top:2.6cqw;left:50%;transform:translateX(-50%);width:15cqw;height:3.2cqw;border-radius:9cqw;background:var(--navy)}
.demo__status{display:flex;justify-content:space-between;font-size:2.4cqw;font-weight:700;color:var(--ink-3);margin-bottom:1cqw}
.demo__bubble{max-width:82%;padding:2cqw 2.8cqw;border-radius:3.2cqw;background:var(--gray);color:var(--ink);font-weight:500}
.demo__bubble--out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:.8cqw}
.demo__bubble--in{align-self:flex-start;border-bottom-left-radius:.8cqw}
.demo__chip{align-self:center;padding:1.2cqw 2.8cqw;border-radius:9cqw;background:var(--surface-soft);border:1px solid var(--line);font-size:2.5cqw;font-weight:700;color:var(--ink-2)}
.demo__chip--ok{background:rgba(30,143,255,.1);border-color:rgba(30,143,255,.35);color:var(--accent-ink)}
.demo__card{background:#fff;border:1px solid var(--line);border-radius:2.4cqw;padding:2.4cqw;box-shadow:0 6px 16px -8px rgba(11,17,32,.2)}
.demo__bar{height:2.2cqw;border-radius:1cqw;background:var(--gray)}
.demo__muted{color:var(--ink-3);font-size:2.4cqw;font-weight:600}
.demo__row{display:flex;align-items:center;gap:1.6cqw;margin-bottom:1.6cqw}
.demo__avatar{width:5cqw;height:5cqw;border-radius:50%;background:var(--navy);flex:none}
.demo__input{height:5.6cqw;border:1px solid var(--line);border-radius:1cqw;background:var(--surface-soft)}
.demo__btn{height:6cqw;border-radius:1cqw;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}
.demo__lines{display:flex;flex-direction:column;gap:1cqw;flex:1}
.demo__lines b{display:block;height:1.8cqw;border-radius:1cqw;background:var(--gray)}
.demo__lines b + b{width:60%}
.demo__overlay{position:absolute;left:3.2cqw;right:3.2cqw;top:16cqw;display:flex;flex-direction:column;align-items:center;gap:2cqw;background:#fff}
.demo__w70{width:70%}
.demo__strong{font-weight:800}

/* shared keyframes: elements start hidden and appear at their own delay, loop 8s */
/* step classes: .s1–.s6 appear in sequence across an 8s loop */
.demo .s1{animation:s1 8s ease infinite both}.demo .s2{animation:s2 8s ease infinite both}.demo .s3{animation:s3 8s ease infinite both}
.demo .s4{animation:s4 8s ease infinite both}.demo .s5{animation:s5 8s ease infinite both}.demo .s6{animation:s6 8s ease infinite both}
@keyframes s1{0%,6%{opacity:0;transform:translateY(8px)}12%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s2{0%,18%{opacity:0;transform:translateY(8px)}24%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s3{0%,32%{opacity:0;transform:translateY(8px)}38%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4{0%,46%{opacity:0;transform:translateY(8px)}52%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s5{0%,60%{opacity:0;transform:translateY(8px)}66%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s6{0%,72%{opacity:0;transform:translateY(8px)}78%,92%{opacity:1;transform:none}100%{opacity:0}}
/* transient layers: visible early, gone later */
.demo .t-early{animation:t-early 8s ease infinite both}
@keyframes t-early{0%,4%{opacity:0}8%,34%{opacity:1}40%,100%{opacity:0}}

/* Demo: website that books */
.demo--web .demo__browser{position:absolute;left:7cqw;top:14cqw;width:62cqw;border:2px solid var(--navy);border-radius:2.4cqw;background:#fff;overflow:hidden;box-shadow:0 20px 40px -16px rgba(11,17,32,.25)}
.demo--web .demo__chrome{display:flex;gap:1.2cqw;padding:2cqw;border-bottom:1px solid var(--line);background:var(--surface-soft)}
.demo--web .demo__chrome i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--accent);opacity:.8}
.demo--web .demo__page{padding:3.4cqw;display:flex;flex-direction:column;gap:2.2cqw;font-size:2.6cqw}
.demo--web .demo__hero{height:12cqw;border-radius:1.6cqw;background:linear-gradient(135deg,var(--navy),var(--navy-2))}
.demo--web .demo__field{height:5.6cqw;border:1px solid var(--line);border-radius:1cqw;background:var(--surface-soft);display:flex;align-items:center;padding:0 1.6cqw;font-weight:600;overflow:hidden;white-space:nowrap}
.demo--web .demo__field span{display:inline-block;overflow:hidden;width:100%;animation:type-in 8s steps(12,end) infinite}
.demo--web .demo__field--2 span{animation-name:type-in-2}
@keyframes type-in{0%,6%{width:0}18%,100%{width:100%}}
@keyframes type-in-2{0%,18%{width:0}30%,100%{width:100%}}
.demo--web .demo__send{height:6cqw;border-radius:1cqw;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;animation:pulse-send 8s ease infinite}
@keyframes pulse-send{0%,32%{transform:none;box-shadow:none}36%{transform:scale(.95);box-shadow:0 0 0 1.6cqw rgba(30,143,255,.25)}40%,100%{transform:none;box-shadow:none}}
.demo--web .demo__phone{left:auto;right:5cqw;top:auto;bottom:6cqw;transform:none;width:40cqw;animation:slide-phone 8s cubic-bezier(.2,.8,.2,1) infinite both}
@keyframes slide-phone{0%,40%{transform:translateX(60cqw)}50%,94%{transform:none}100%{transform:translateX(60cqw)}}

/* Demo: review funnel */
.demo--reviews .demo__stars{display:flex;gap:1.2cqw;justify-content:center;padding:1cqw 0}
.demo--reviews .demo__stars svg{width:6.4cqw;height:6.4cqw;stroke:var(--accent);stroke-width:1.6;fill:transparent;animation:star-fill 8s ease infinite}
.demo--reviews .demo__stars svg:nth-child(2){animation-delay:.12s}.demo--reviews .demo__stars svg:nth-child(3){animation-delay:.24s}
.demo--reviews .demo__stars svg:nth-child(4){animation-delay:.36s}.demo--reviews .demo__stars svg:nth-child(5){animation-delay:.48s}
@keyframes star-fill{0%,50%{fill:transparent;transform:scale(1)}54%{fill:var(--accent);transform:scale(1.2)}58%,94%{fill:var(--accent);transform:scale(1)}100%{fill:transparent}}
.demo--reviews .demo__split{display:grid;grid-template-columns:1fr 1fr;gap:2cqw}
.demo--reviews .demo__split .demo__card{font-size:2.3cqw;font-weight:700;text-align:center;padding:2cqw 1.4cqw}

/* Demo: missed call */
.demo--call .demo__ring{align-self:center;position:relative;width:14cqw;height:14cqw;margin:3cqw 0 1cqw}
.demo--call .demo__ring i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:ring 1.6s ease-out infinite}
.demo--call .demo__ring i:nth-child(2){animation-delay:.5s}.demo--call .demo__ring i:nth-child(3){animation-delay:1s}
.demo--call .demo__ring b{position:absolute;inset:3cqw;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff}
.demo--call .demo__ring b svg{width:4.4cqw;height:4.4cqw}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.demo--call .demo__caller{text-align:center;font-weight:800;font-size:3.2cqw}
.demo--call .demo__timer{font-variant-numeric:tabular-nums}

/* Demo: meta ads */
.demo--ads .demo__ad-media{height:26cqw;border-radius:1.6cqw;background:linear-gradient(160deg,#dfe7f1,#c8d4e3);position:relative;overflow:hidden}
.demo--ads .demo__ad-media::after{content:"";position:absolute;left:10%;right:10%;bottom:14%;height:36%;border-radius:1cqw;border:.6cqw solid rgba(255,255,255,.9);background:rgba(255,255,255,.35)}
.demo--ads .demo__ad-cta{display:flex;justify-content:space-between;align-items:center;margin-top:2cqw;font-weight:700;font-size:2.5cqw}
.demo--ads .demo__ad-cta span:last-child{background:var(--gray);padding:1cqw 2.4cqw;border-radius:1cqw;animation:tap 8s ease infinite}
@keyframes tap{0%,24%{background:var(--gray);color:var(--ink)}27%,40%{background:var(--accent);color:#fff}44%,100%{background:var(--gray);color:var(--ink)}}
.demo--ads .demo__sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);border-radius:4cqw 4cqw 0 0;padding:4cqw 3.6cqw 5cqw;display:flex;flex-direction:column;gap:2cqw;
  box-shadow:0 -10px 30px -10px rgba(11,17,32,.2);animation:sheet 8s cubic-bezier(.2,.8,.2,1) infinite both}
@keyframes sheet{0%,30%{transform:translateY(105%)}38%,92%{transform:none}100%{transform:translateY(105%)}}
.demo--ads .demo__toast{position:absolute;left:3cqw;right:3cqw;padding:2cqw 2.4cqw;border-radius:2cqw;background:var(--navy);color:#fff;font-size:2.4cqw;font-weight:700;display:flex;gap:1.6cqw;align-items:center}
.demo--ads .demo__toast--1{top:9cqw}.demo--ads .demo__toast--2{top:18cqw}
.demo--ads .demo__toast i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--accent);flex:none}

/* Demo: local seo */
.demo--seo .demo__search{display:flex;align-items:center;gap:1.6cqw;border:1px solid var(--line);border-radius:9cqw;padding:2cqw 2.6cqw;font-weight:600;white-space:nowrap;overflow:hidden}
.demo--seo .demo__search svg{width:3.4cqw;height:3.4cqw;flex:none;color:var(--ink-3)}
.demo--seo .demo__search span{display:inline-block;overflow:hidden;width:100%;animation:type-seo 8s steps(24,end) infinite}
@keyframes type-seo{0%,4%{width:0}26%,100%{width:100%}}
.demo--seo .demo__map{position:relative;height:22cqw;border-radius:2cqw;background:
  linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 58%,#fff 58% 62%,transparent 62%),linear-gradient(135deg,#e3eaf3,#d4deea);overflow:hidden}
.demo--seo .demo__pin{position:absolute;left:44%;top:18%;width:7cqw;height:7cqw;color:var(--accent);animation:pin 1.4s ease-in-out infinite}
@keyframes pin{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6cqw)}}
.demo--seo .demo__results{position:relative;display:flex;flex-direction:column;gap:1.6cqw}
.demo--seo .demo__result{display:flex;gap:2cqw;align-items:center;padding:1.8cqw;border-radius:1.6cqw;border:1px solid var(--line);background:#fff;font-size:2.5cqw;font-weight:700}
.demo--seo .demo__result i{width:5cqw;height:5cqw;border-radius:1cqw;background:var(--gray);flex:none}
.demo--seo .demo__result--you{border-color:var(--accent);background:rgba(30,143,255,.06);animation:rise 8s cubic-bezier(.2,.8,.2,1) infinite both}
.demo--seo .demo__result--you i{background:var(--accent)}
.demo--seo .demo__result--first{animation:drop 8s cubic-bezier(.2,.8,.2,1) infinite both}
@keyframes rise{0%,62%{transform:translateY(calc(100% + 1.6cqw))}72%,100%{transform:none}}
@keyframes drop{0%,62%{transform:translateY(calc(-100% - 1.6cqw))}72%,100%{transform:none}}

/* Demo: one-click marketing campaigns */
.demo--campaign .demo__title{font-family:var(--font-head);font-weight:700;font-size:3.6cqw;margin-bottom:.6cqw}
.demo--campaign .demo__camp{display:flex;align-items:center;gap:2cqw;padding:2.2cqw 2.4cqw}
.demo--campaign .demo__camp-icon{width:6cqw;height:6cqw;border-radius:1.6cqw;background:rgba(30,143,255,.12);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.demo--campaign .demo__camp-icon svg{width:3.6cqw;height:3.6cqw}
.demo--campaign .demo__camp-text{flex:1;min-width:0;font-size:2.5cqw;line-height:1.3}
.demo--campaign .demo__switch{position:relative;width:8cqw;height:4.4cqw;border-radius:9cqw;background:var(--line);flex:none;animation:sw-track 8s ease infinite}
.demo--campaign .demo__switch::after{content:"";position:absolute;top:.6cqw;left:.6cqw;width:3.2cqw;height:3.2cqw;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);animation:sw-knob 8s ease infinite}
.demo--campaign .demo__camp--2 .demo__switch,.demo--campaign .demo__camp--2 .demo__switch::after{animation-delay:.9s}
@keyframes sw-track{0%,20%{background:var(--line)}24%,94%{background:var(--accent)}100%{background:var(--line)}}
@keyframes sw-knob{0%,20%{transform:none}24%,94%{transform:translateX(3.6cqw)}100%{transform:none}}
.demo--campaign .demo__tapdot{position:absolute;width:5cqw;height:5cqw;border-radius:50%;background:rgba(30,143,255,.28);pointer-events:none;animation:tapdot 8s ease infinite}
@keyframes tapdot{0%,14%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1)}24%,100%{opacity:0;transform:scale(1.6)}}

/* ---------- 11. Process steps ---------- */
.process{padding-bottom:var(--band-pad-bottom)}
.steps{list-style:none;display:grid;grid-template-columns:1fr;gap:40px;max-width:1108px;margin:0 auto}
.step{text-align:center;display:flex;flex-direction:column;align-items:center}
.step__num{width:85px;height:85px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.step__num svg{width:42px;height:42px;stroke-width:1.25}
.step__title{font-size:21px;line-height:1.5;font-weight:700;margin:32px 0 16px}
.step__title span{display:block}
.step__body{font-size:16px;line-height:1.55;max-width:300px}
@media (min-width:769px){.steps{grid-template-columns:repeat(3,1fr);gap:32px}.step__title{margin:56px 0 20px}}

/* our-process zigzag variant */
.zz{max-width:1108px;margin:0 auto}
.zz-step{display:flex;flex-direction:column;align-items:center;gap:32px;padding:48px 0;text-align:center;position:relative}
.zz-step__num{width:150px;height:150px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.zz-step__num svg{width:70px;height:70px;stroke-width:1}
.zz-step__body{max-width:480px}
.zz-step__title{font-size:24px;line-height:1.25;letter-spacing:-.02em}
.zz-step__text{font-size:18px;font-weight:500;line-height:1.55;margin-top:16px;color:var(--ink-2)}
.zz-connector{display:none}
@media (min-width:769px){
  .zz-step{flex-direction:row;justify-content:space-around;text-align:left;padding:128px 0}
  .zz-step:nth-child(even of .zz-step){flex-direction:row-reverse}
  .zz-step__num{width:200px;height:200px}
  .zz-step__num svg{width:92px;height:92px}
  .zz-step__title{font-size:40px}
  .zz-step__text{font-size:20px}
  .zz-connector{display:block;position:absolute;left:50%;bottom:-40px;width:550px;height:80px;transform:translateX(-50%) rotate(-8deg);pointer-events:none}
  .zz-connector path{fill:none;stroke:var(--accent);stroke-opacity:.6;stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round}
}

/* ---------- 12. Why-us cards ---------- */
.why{padding-bottom:var(--band-pad-bottom)}
.why-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:16px;max-width:1076px;margin:0 auto;position:relative;z-index:1}
.why-card{background:var(--navy);color:#fff;border-radius:8px;padding:16px;min-height:204px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;box-shadow:var(--shadow-md);transition:transform var(--t),box-shadow var(--t)}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.why-card__icon{width:44px;height:44px;stroke-width:1.75;color:#fff}
.why-card__title{font-size:22px;line-height:1.3;font-weight:700}
.why-card__body{font-size:16px;line-height:1.55;color:#fff;margin-top:6px}
.why-card__body a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.why-card__body a:hover{color:var(--accent-hover)}
@media (min-width:769px){.why-grid{grid-template-columns:repeat(2,1fr)}.why-card__title{font-size:24px}}
@media (min-width:993px){.why-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- 13. Press + blog cards ---------- */
.press{padding:60px 0 80px}
.press__head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:40px}
.press__title{font-size:var(--title);line-height:1.2;letter-spacing:-.02em;margin-top:6px}
.press-grid{display:grid;grid-template-columns:1fr;gap:24px}
.press-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .25s ease,box-shadow .25s ease}
.press-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.press-card__media{height:180px;flex:none;border-width:0 0 1px 0!important}
.press-card__body{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1;min-width:0}
.press-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);line-height:1.4}
.meta{font-size:13px;line-height:1.4;color:var(--ink-3);font-weight:500}
.card-title{font-family:var(--font-head);font-size:18px;line-height:1.35;font-weight:700;color:var(--ink)}
.card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.byline{display:flex;align-items:center;gap:5px;font-size:12px;font-style:italic;font-weight:500;color:var(--ink-3)}
.byline .icon{width:14px;height:14px}
.excerpt{font-size:14px;line-height:1.6;color:var(--ink-2)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft)}
.card-source{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card-source .icon{width:14px;height:14px}
.card-foot .link-arrow{font-size:14px;position:relative;z-index:2;white-space:nowrap}
@media (min-width:601px){
  .press-card{flex-direction:row;height:268px}
  .press-card__media{width:44%;max-width:260px;height:100%;border-width:0 1px 0 0!important}
}
@media (min-width:769px){.press__head{flex-direction:row;justify-content:space-between;align-items:flex-end}}
@media (min-width:993px){.press-grid{grid-template-columns:1fr 1fr}}

/* blog/press index */
.page-hero{background:var(--navy);color:#fff;text-align:center;padding:80px 0 60px}
.page-hero .eyebrow{font-size:12px;color:var(--accent)}
.page-hero__title{font-size:var(--blog-hero);line-height:1.1;letter-spacing:-.02em;margin-top:12px}
.page-hero__sub{font-size:18px;line-height:1.6;color:rgba(255,255,255,.8);max-width:620px;margin:16px auto 0}
.search{position:relative;max-width:480px;margin:0 auto 40px}
.search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
.search input{width:100%;height:36px;border:1px solid var(--line);border-radius:4px;padding:0 12px 0 36px;background:#fff;font-size:14px}
.post-grid{display:grid;grid-template-columns:1fr;gap:24px}
.post-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.post-card__media{height:220px;border-width:0 0 1px 0!important}
.post-card__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
@media (min-width:601px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:993px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pagination__num{width:36px;height:36px;display:grid;place-items:center;border:1px solid #ddd;border-radius:5px;font-size:14px;font-weight:600;background:#fff}
.pagination__num[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination .btn--outline{height:36px;font-size:14px;padding:0 14px}
.pagination .btn--outline:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--ink)}
/* article (press/blog single) */
.article{background:#fff;border-radius:8px;padding:24px;max-width:800px;margin:0 auto}
.article__media{height:320px;border-radius:var(--r-md);margin-bottom:24px}
@media (min-width:769px){.article{padding:40px}}

/* ---------- 14. FAQ / generic accordion ---------- */
.faq{padding-bottom:40px}
.acc{list-style:none;max-width:1108px;margin:0 auto}
.acc__item{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-faq);margin-bottom:20px;transition:background .2s ease,border-color .2s ease}
.acc__q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-size:var(--faq-q);font-weight:800;line-height:1.4;color:var(--ink)}
.acc__q::-webkit-details-marker{display:none}
.acc__q .icon{width:30px;height:30px;flex:none;transition:transform .2s ease}
.acc__item[open]{background:var(--accent);border-color:var(--accent)}
.acc__item[open] .acc__q{color:#fff}
.acc__item[open] .acc__q .icon{transform:rotate(180deg)}
.acc__a{padding:0 16px 18px;font-size:16px;line-height:1.55;color:#fff}
.acc__item[open] .acc__a{animation:acc-in .2s ease}
@keyframes acc-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc__a p + p,.acc__a p + ol,.acc__a ol + p{margin-top:12px}
.acc__a ol{padding-left:22px}
.acc__a li{margin-top:4px}
.acc__a a{color:#fff;text-decoration:underline}
@media (min-width:481px){.acc__q{font-weight:600}.acc__a{font-size:18px}}
/* light-open variant (job accordions, pricing rows) */
.acc--light .acc__item[open]{background:#fff;border-color:var(--line)}
.acc--light .acc__item[open] .acc__q{color:var(--ink)}
.acc--light .acc__a{color:var(--ink)}
.acc--light .acc__a a{color:var(--accent-ink)}

/* ---------- 15. CTA box ---------- */
.cta-wrap{padding:40px 0 80px}
.cta-box{display:flex;align-items:center;background:var(--navy);color:#fff;border-radius:var(--r-md);padding:32px;margin:0 10px;min-height:0}
.cta-box__body{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-box__title{font-size:var(--cta-title);line-height:1.3;color:#fff;max-width:520px}
.cta-box__desc{font-size:16px;line-height:1.55;color:var(--text-on-dark);max-width:520px;margin:12px 0 30px}
.cta-box__media{display:none}
@media (min-width:769px){
  .cta-box{margin:0;padding:16px;min-height:475px}
  .cta-box__body{padding:0 128px 0 16px}
  .cta-box__desc{font-size:18px}
  .cta-box__media{display:block;flex:0 1 40%;max-width:40%;align-self:stretch;padding:16px}
  .cta-box__media .ph{width:100%;max-width:290px;height:100%;min-height:420px;margin-left:auto}
  .cta-box__media .cta-box__img{display:block;width:100%;max-width:290px;height:100%;min-height:420px;object-fit:contain;object-position:bottom;margin-left:auto}
}
@media (min-width:769px) and (max-width:992px){.cta-box__body{padding:0 32px 0 16px}}

/* ---------- 16. Footer ---------- */
.site-footer{background:var(--navy);color:var(--text-on-dark);padding-top:48px;border-top:1px solid var(--line)}
.footer-top{display:none}
.footer-main{display:grid;grid-template-columns:1fr 1fr;gap:32px 16px;padding:0 0 32px;text-align:center}
.footer-lead{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:20px}
.footer-lead p{font-family:var(--font-head);font-size:22px;line-height:1.35;font-weight:700;color:#fff;max-width:260px}
.footer-col__title{font-family:var(--font-body);font-size:18px;line-height:1.3;font-weight:700;color:#fff;margin-bottom:12px}
.footer-col ul{list-style:none}
.footer-col a{display:inline-block;padding:6px 0;font-size:15px;line-height:1.55;color:var(--text-on-dark);transition:color var(--t)}
.footer-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-col--products{grid-column:1/-1}
.footer-col--products .footer-col__lists{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.footer-after{border-top:1px solid var(--line-dark);padding:20px 0 32px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.legal-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}
.legal-links a,.legal-links button{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-on-dark);transition:color var(--t)}
.legal-links a:hover,.legal-links button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.privacy-toggle{width:30px;height:14px;flex:none}
.copyright{font-size:13px;color:var(--text-on-dark)}
.site-footer .brand__word{color:#fff}
@media (min-width:769px){
  .site-footer{padding-top:64px}
  .footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--line-dark)}
  .footer-top__right{display:flex;align-items:center;gap:16px}
  .footer-top__right p{font-size:18px;color:#fff}
  .footer-main{display:flex;flex-wrap:wrap;gap:32px 48px;text-align:left}
  .footer-lead{grid-column:auto;align-items:flex-start;max-width:200px;flex:none}
  .footer-lead p{font-size:24px;max-width:none}
  .footer-col a{font-size:16px;padding:0;line-height:41px}
  .footer-col__title{margin-bottom:8px}
  .footer-col--products .footer-col__lists{grid-template-columns:auto auto;justify-content:start;gap:0 48px}
  .footer-col a{white-space:nowrap}
  .footer-after{flex-direction:row;flex-wrap:wrap;justify-content:space-between;text-align:left}
  .legal-links{justify-content:flex-start}
  .legal-links a,.legal-links button{font-size:16px}
  .copyright{width:100%;font-size:16px}
}
@media (min-width:993px){.footer-main{flex-wrap:nowrap}.footer-lead{margin-right:24px}}

/* ---------- 18. Cookie consent ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-card-hover);padding:16px}
.consent[hidden]{display:none}
.consent__title{font-family:var(--font-body);font-size:15px;font-weight:800}
.consent__text{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:4px}
.consent__text a{color:var(--accent-ink);text-decoration:underline}
.consent__prefs{margin-top:12px;display:grid;gap:8px;font-size:14px}
.consent__prefs[hidden]{display:none}
.consent__prefs label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft)}
.consent__prefs input{width:18px;height:18px;accent-color:var(--accent)}
.consent__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.consent__actions .btn{height:36px;font-size:13px;padding:0 14px;border-radius:6px}
.consent__actions .btn--dark{background:var(--navy);color:#fff}
.consent__actions .btn--dark:hover{background:var(--navy-2)}
@media (max-width:768px){.consent{bottom:84px}}

/* ==========================================================================
   INNER-PAGE COMPONENTS (used by the other page builders)
   ========================================================================== */

/* Page title band (gray, title 50, padding 80/40) */
.page-title{background:var(--gray)}
.page-title .section-title{padding-bottom:calc(var(--title-pad) / 2)}
.page-intro{font-size:16px;line-height:1.55;text-align:center;max-width:760px;margin:-8px auto 40px;color:var(--ink-2)}

/* Pricing */
.pricing{padding-bottom:80px}
.tier-switch{display:flex;justify-content:center;margin:0 auto 40px;max-width:100%}
.tier-switch__track{display:inline-flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);max-width:100%;overflow-x:auto}
.tier-switch button{height:48px;padding:0 22px;border-radius:var(--r-pill);font-size:16px;font-weight:700;color:var(--ink-2);white-space:nowrap;transition:background var(--t),color var(--t)}
.tier-switch button:hover{color:var(--ink)}
.tier-switch button[aria-selected="true"]{background:var(--accent);color:#fff}
.price-card{position:relative;width:100%;max-width:512px;margin:0 auto;background:var(--accent);color:#fff;border-radius:var(--r-price);box-shadow:var(--shadow-price);
  padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.price-card[hidden]{display:none}
.price-card.is-entering{animation:price-in .25s ease}
@keyframes price-in{from{opacity:0}to{opacity:1}}
.price-card__badge{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;padding-bottom:4px;border-bottom:3px solid var(--navy)}
.price-card__name{font-size:32px;line-height:1.2;margin-top:20px}
.price-card__price{font-family:var(--font-head);font-size:36px;font-weight:700;line-height:1.1;margin-top:10px}
.price-card__note{font-size:15px;font-weight:600;color:rgba(255,255,255,.9);margin-top:8px}
.price-card__promo{display:inline-block;font-size:.6em;font-weight:700;color:var(--navy);margin-left:6px;vertical-align:.22em;white-space:nowrap}
.price-card__list{list-style:none;width:100%;max-width:405px;margin:24px 0 32px}
.price-card__list li{padding:16px 4px;border-top:1px solid rgba(255,255,255,.35);font-size:17px;font-weight:700;line-height:1.35}
.price-card__list li:last-child{border-bottom:1px solid rgba(255,255,255,.35)}
.price-card__guarantee{font-size:14px;line-height:1.5;margin:-12px 0 24px;max-width:405px;color:#fff}
@media (min-width:481px){.price-card{padding:48px 40px;min-height:720px}.price-card__badge{font-size:24px}.price-card__price{font-size:44px}.price-card__list li{font-size:18px}}
.plan-cols{display:grid;grid-template-columns:1fr;gap:16px;margin-top:80px}
.plan-col__head{height:72px;display:grid;place-items:center;background:var(--navy);color:#fff;border-radius:var(--r-md);font-family:var(--font-head);font-size:21px;font-weight:700;margin-bottom:16px;padding:0 16px;text-align:center}
.plan-acc{list-style:none}
.plan-acc .acc__item{background:#fff;border-radius:4px;margin-bottom:16px}
.plan-acc .acc__q{font-size:17px;font-weight:600;min-height:50px;padding:10px 16px}
.plan-acc .acc__q .icon{width:16px;height:16px}
.plan-acc .acc__a{font-size:16px;color:var(--ink)}
.plan-acc .acc__item[open]{background:#fff;border-color:var(--accent)}
.plan-acc .acc__item[open] .acc__q{color:var(--ink)}
.plan-acc ul{padding-left:20px;margin-top:8px}
.plan-acc li{margin-top:6px}
@media (min-width:769px){.plan-cols{grid-template-columns:1fr 1fr}}

/* Feature detail page */
.feat-intro{padding-bottom:var(--band-pad-bottom)}
.feat-intro__row{display:flex;flex-direction:column;gap:26px}
.stat-cards{display:flex;flex-direction:column;gap:26px}
.stat-card{background:#fff;border-radius:8px;padding:16px;min-height:149px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.stat-card__num{font-family:var(--font-head);font-size:40px;font-weight:700;line-height:1.2;color:var(--accent)}
.stat-card__cap{font-size:16px;line-height:1.55;margin-top:6px}
.demo-panel{background:#fff;border-radius:8px;padding:20px 16px;flex:1;min-width:0}
.demo-panel__title{font-size:26px;text-align:center;margin-bottom:20px}
.demo-frame{border:10px solid var(--navy);border-radius:var(--r-md);padding:0;overflow:hidden}
.demo-frame .ph{width:100%;aspect-ratio:16/9;border:0}
@media (min-width:993px){
  .feat-intro__row{flex-direction:row;align-items:stretch}
  .stat-cards{flex:0 0 359px}
  .stat-card__num{font-size:46px}.stat-card__cap{font-size:18px}
  .demo-panel{padding:15px 20px}
  .demo-panel__title{font-size:40px}
}
.info-band{padding-bottom:var(--band-pad-bottom)}
.info-grid{display:grid;grid-template-columns:1fr;gap:26px 21px}
.info-card{background:#fff;color:var(--ink);border-radius:8px;padding:24px}
.info-card__head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.info-card__icon{width:60px;height:60px;color:var(--ink);stroke-width:1.5}
.info-card__title{font-size:24px;line-height:1.3;color:var(--accent-ink)}
.info-card__body{font-size:16px;line-height:1.55}
@media (min-width:769px){.info-grid{grid-template-columns:1fr 1fr}.info-card{padding:40px}.info-card__icon{width:80px;height:80px}.info-card__title{font-size:28px;color:var(--accent)}.info-card__body{font-size:18px}}

/* Testimonials page grid */
.t-grid{display:grid;grid-template-columns:1fr;gap:16px;padding-bottom:80px}
.t-grid-card{background:#fff;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px}
.t-grid-card .ph{width:100%;aspect-ratio:16/9;border-radius:var(--r-md)}
/* Client video testimonials: testimonials-page grid + "Seeing is believing" carousels (keep original card frame; letterbox vertical video) */
.t-video{border-radius:var(--r-md);overflow:hidden;background:#000}
.t-video video{display:block;width:100%;height:100%;object-fit:contain;background:#000;-webkit-user-select:none;user-select:none}
.t-grid-card .t-video{width:100%;aspect-ratio:16/9}
.vt-card__media.t-video{border-radius:0}
@media (min-width:601px){.t-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:993px){.t-grid{grid-template-columns:repeat(3,1fr)}}

/* Our work grid */
.work-grid{display:grid;grid-template-columns:1fr;gap:12px;padding-bottom:80px}
.work-grid .ph{width:100%;aspect-ratio:618/352}
.work-shot{display:block;width:100%;height:auto;aspect-ratio:618/352;object-fit:cover}
@media (min-width:769px){.work-grid{grid-template-columns:1fr 1fr}}
/* real portfolio tile: same 618×352 footprint, caption bar inside the tile */
.work-tile{display:flex;flex-direction:column;margin:0;aspect-ratio:618/352;min-width:0;overflow:hidden}
.work-grid .work-tile .ph{flex:1;aspect-ratio:auto;min-height:0}
.work-tile__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:12px 16px;background:var(--navy);color:#fff;font-size:14px;line-height:1.4}
.work-tile__cap strong{font-family:var(--font-head);font-size:16px;font-weight:700}
.work-tile__site{color:var(--text-on-dark);font-weight:700}

/* About */
.about-intro{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;padding-bottom:60px}
.about-intro p{font-size:16px;line-height:1.55}
.about-intro p + p{margin-top:16px}
.about-intro .ph{width:100%;aspect-ratio:380/250;border-radius:8px}
.about-intro__photo{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
.legal-note{font-size:14px;color:var(--ink-3);margin-top:16px}
@media (min-width:769px){.about-intro{grid-template-columns:1fr 380px;gap:48px}}
.culture{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:80px}
.culture__list{list-style:none}
.culture__row{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.culture__row:first-child{border-top:1px solid var(--line)}
.culture__num{font-family:var(--font-head);font-size:48px;font-weight:700;line-height:1;color:rgba(11,17,32,.12);flex:none;width:64px}
.culture__title{font-size:20px;font-weight:700;color:var(--accent-ink);font-family:var(--font-head)}
.culture__body{font-size:15px;color:var(--ink-3);margin-top:4px}
.culture .ph{width:100%;min-height:360px;border-radius:var(--r-md)}
.culture__img{display:block;width:100%;max-width:380px;height:auto;margin:0 auto;align-self:center}
@media (min-width:993px){.culture{grid-template-columns:1fr 380px;gap:64px}}
.team-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:8px;padding-bottom:80px}
.team-card{background:#fff;border-radius:8px;overflow:hidden;min-height:215px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center}
.avatar--lg{width:96px;height:96px;border:0;margin:0 0 14px;font-size:38px;font-family:var(--font-head)}
.team-card__name{font-family:var(--font-head);font-size:18px;font-weight:700}
.team-card__role{font-size:13px;color:var(--ink-3);margin-top:2px}
@media (min-width:601px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:993px){.team-grid{grid-template-columns:repeat(3,1fr)}}

/* Careers */
.accent-bar{background:var(--accent);color:#fff;border-radius:var(--r-md);padding:20px;text-align:center;font-family:var(--font-head);font-size:var(--title);font-weight:700;line-height:1.2;margin-bottom:24px}
.job-panel{display:grid;grid-template-columns:1fr;gap:24px;padding:8px 0 8px}
.job-panel h4{font-family:var(--font-body);font-size:18px;font-weight:700;color:var(--accent-ink);margin-bottom:8px}
.job-list{list-style:none}
.job-list li{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:700;padding:6px 0}
.job-list .icon{width:24px;height:24px;color:var(--accent);flex:none}
@media (min-width:769px){.job-panel{grid-template-columns:1fr 1fr;padding:24px}.job-list li{font-size:18px}}

/* Partners grid */
.partner-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding-bottom:80px}
.partner-grid .ph{width:100%;height:160px;border-radius:var(--r-md);background:#fff}
.partner-tile{display:grid;place-items:center;width:100%;height:160px;padding:24px;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-card)}
.partner-tile img{max-width:80%;max-height:56%;width:auto;height:auto;object-fit:contain}
.partner-tile--text{grid-auto-flow:column;gap:12px}
.partner-tile--text img{width:40px;height:40px}
.partner-tile--text span{font-family:var(--font-head);font-size:30px;font-weight:700;color:#1f1f1f;letter-spacing:-.01em}
@media (min-width:769px){.partner-grid{grid-template-columns:repeat(4,1fr);gap:24px}.partner-grid .ph,.partner-tile{height:200px}}

/* Trades page */
.trade-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:2px;padding-bottom:60px}
.trade-grid__tile{background:#fff;display:flex;flex-direction:column;height:250px}
.trade-grid__tile .ph{flex:1;border-width:0 0 1px 0}
.trade-grid__img{flex:1;min-height:0;width:100%;object-fit:cover;border-bottom:1px solid var(--line)}
.trade-grid__tile span.label{font-family:var(--font-head);font-size:22px;font-weight:700;text-align:center;padding:14px 12px}
@media (min-width:601px){.trade-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:993px){.trade-grid{grid-template-columns:repeat(3,1fr)}}
.check-list{list-style:none;display:grid;grid-template-columns:1fr;gap:0 24px;padding-bottom:80px}
.check-list li{display:flex;align-items:center;gap:8px;min-height:46px;font-size:17px;font-weight:600;color:var(--ink-2)}
.check-list .icon{width:26px;height:26px;flex:none;color:var(--accent)}
@media (min-width:601px){.check-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:993px){.check-list{grid-template-columns:repeat(4,1fr)}}

/* Forms (contact, privacy request) */
.form-card{background:#fff;border-radius:var(--r-md);padding:24px;max-width:640px;margin:0 auto 80px;box-shadow:var(--shadow-card)}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field legend{font-size:14px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:4px;background:var(--surface-soft);padding:10px 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,143,255,.2);background:#fff}
.field--full{grid-column:1/-1}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.field-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex:none}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{font-size:15px;font-weight:600;margin-top:12px;min-height:1.5em}
.form-status.is-ok{color:#067647}
.form-status.is-err{color:#B42318}
form.is-sending button[type="submit"]{opacity:.7;pointer-events:none}
@media (min-width:601px){.form-grid{grid-template-columns:1fr 1fr}.form-card{padding:40px}}
.page-intro a,.form-card .legal-note a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Book page embed */
.book-embed{background:#fff;border-radius:var(--r-md);padding:12px;max-width:900px;margin:0 auto 80px;box-shadow:var(--shadow-card);min-height:720px}
.book-embed iframe{width:100%;min-height:700px;border:0}

/* Legal prose */
.prose{background:#fff;border-radius:8px;padding:24px;max-width:800px;margin:0 auto 80px;font-size:16px;line-height:1.7;color:var(--ink)}
.prose > * + *{margin-top:16px}
.prose h2{font-size:24px;line-height:1.3;margin-top:40px}
.prose h3{font-size:19px;line-height:1.35;margin-top:28px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:20px}
.prose li + li{margin-top:6px}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:700}
.prose .updated{font-size:14px;color:var(--ink-3)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{background:var(--surface-soft);font-weight:700}
.table-scroll{overflow-x:auto}
@media (min-width:769px){.prose{padding:40px}}

/* ---------- 20. Utilities ---------- */
.center{text-align:center}
.mt-40{margin-top:40px}
.stack-16 > * + *{margin-top:16px}
.nowrap{white-space:nowrap}

/* ---------- 21. Reduced motion: everything static ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .marquee__track{flex-wrap:wrap;justify-content:center;width:auto}
  .marquee__track [aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .demo .t-early{display:none}
}

/* ---------- blog (/blog/ index + /blog/post-N/ pages) ---------- */
/* gray band under the navy page-hero: 60px to the search, ~153px from pagination to the CTA box */
.blog-band{padding:40px 0}
@media (min-width:769px){.blog-band{padding:60px 0 112px}}
/* search sits flush-left above the grid, not centered */
.search--start{margin:0 0 32px}
/* live filter (site.js [data-filter]) sets [hidden]; .post-card's display:flex would otherwise win */
.post-card[hidden]{display:none}
.post-card .card-foot{justify-content:flex-end}
/* empty state shows only when the filter has hidden every card (no JS change needed) */
.filter-empty{display:none;text-align:center;font-size:16px;line-height:1.55;color:var(--ink-2);padding:40px 0 0}
.post-grid:not(:has(.post-card:not([hidden]))) + .filter-status .filter-empty{display:block}
/* post page: tall body placeholder */
.article__body{min-height:280px}
@media (min-width:769px){.article__body{min-height:480px}}
/* cta-wave variant: CTA band that ends in a V-notch (blog, press, features, legal) needs the full V padding */
.cta-wrap.v{padding-bottom:var(--band-pad-bottom)}

/* ---------- features/* pages (feature detail template) ---------- */
/* (cta-wave .cta-wrap.v rule already defined above; reused here) */
/* navy "What is X?" band: title padded 40/40, not the full 80/80 */
.info-band .section-title{padding:var(--space-40) 0}

/* ==========================================================================
   LEGAL PAGES — /terms/ /privacy-policy/ /dpa/ /do-not-sell/ /privacy-request/ /subprocessors/
   Legal layout: white band, centered H1, prose across the full lg
   container, numbered H2s, bordered zebra tables. Extends .prose (Legal prose).
   ========================================================================== */
.prose--doc{max-width:none;background:transparent;border-radius:0;padding:0;margin:0}
.prose--doc h2{font-size:clamp(22px,2.6vw,28px);line-height:1.25;letter-spacing:-.01em;margin-top:40px}
.prose--doc h3{font-size:clamp(18px,2vw,22px);margin-top:28px}
.prose--doc table{min-width:640px;border:1px solid var(--line)}
.prose--doc th,.prose--doc td{border:1px solid var(--line)}
.prose--doc thead th{background:var(--gray)}
.prose--doc tbody tr:nth-child(even){background:var(--surface-soft)}
.prose--doc tbody td:first-child{font-weight:700}
.prose .callout{border-left:4px solid var(--accent);background:var(--surface-soft);border-radius:0 8px 8px 0;padding:14px 18px;font-weight:700}
.prose a.btn{color:#fff;text-decoration:none}
.prose--doc .form-card{margin:32px auto 48px}
.field__opt{font-weight:500;color:var(--ink-3)}
.field__help{font-size:13px;line-height:1.45;color:var(--ink-3)}
/* cta-wave variant: CTA band that ends in a V (legal, pricing, feature pages) */
.cta-wrap.v{padding-bottom:var(--band-pad-bottom)}

/* ==========================================================================
   PROOF / COMPANY PAGES — /testimonials/ /our-work/ /trades-we-serve/ /partners/
   /careers/ /contact/ /book/ /press/ /press/article-N/
   Only what the shared components don't already cover.
   ========================================================================== */
/* trades-we-serve: tiles sit on 16px gutters with 10px corners */
.trade-grid{gap:16px}
.trade-grid__tile{border-radius:var(--r-md);overflow:hidden}
/* trades-we-serve: the checklist sits tight under the grid, footnote tucked under the list */
.trades-all .section-title{padding-top:0}
.trades-all .check-list{padding-bottom:0}
.trades-all__note{max-width:760px;margin:24px auto 0;padding-bottom:40px;text-align:center}

/* careers: placeholder job rows are not expandable */
.acc__item--static .acc__q{cursor:default;min-height:calc(var(--faq-q) * 1.4 + 28px)}
.careers .acc{padding-bottom:40px}
.job-panel p + p,.job-panel p + ul,.job-panel h4 + p{margin-top:12px}

/* press: hero ends in a V into the gray grid band; live-filter empty state */
.page-hero.v{background-repeat:no-repeat;background-position:50% 100%;background-size:100% auto;padding-bottom:var(--band-pad-bottom)}
.page-hero.v--navy-gray{background-image:var(--v-navy-gray)} /* .page-hero's background shorthand would otherwise wipe the V */
.press-band .press-card[hidden]{display:none}
.press-grid:not(:has(.press-card:not([hidden]))) + .filter-status .filter-empty{display:block}

/* book: booking-funnel body (centered VSL hero, calendar, vertical video testimonials) */
.vsl{padding:48px 0 56px;text-align:center}
.vsl__title{font-size:clamp(26px,3.6vw,44px);line-height:1.22;letter-spacing:-.02em;color:var(--accent-ink);max-width:1108px;margin:0 auto}
.vsl__price{font-family:var(--font-head);font-size:clamp(26px,3.2vw,40px);font-weight:700;font-style:italic;line-height:1.2;margin-top:10px}
.vsl__note{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:640px;margin:10px auto 0}
.vsl__guarantee{font-size:15px;line-height:1.55;font-weight:600;max-width:640px;margin:16px auto 0;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:var(--surface-soft);text-align:left}
.vsl__video{width:100%;max-width:770px;aspect-ratio:16/9;margin:32px auto 0}
.vsl__step{font-size:17px;line-height:1.55;font-weight:700;margin-top:20px}
.vsl__step u{text-underline-offset:3px}
.vsl__cta{display:flex;justify-content:center;margin-top:24px}
.vsl__cta .btn{min-width:min(360px,100%)}
.book-cal .book-embed{margin-bottom:24px}
.book-email{text-align:center;font-size:16px;line-height:1.55;color:var(--ink-2);padding-bottom:80px}
.book-email a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.vt{padding:64px 0 80px}
.vt-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:24px;justify-items:center}
.vt-card{width:100%;max-width:433px;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card)}
.vt-card--lead{max-width:672px}
.vt-card__media{width:100%;aspect-ratio:9/16;border-width:0 0 1px 0!important}
.vt-card__cap{padding:12px 14px 16px}
@media (min-width:769px){
  .vt-grid{grid-template-columns:repeat(2,minmax(0,433px));justify-content:center;gap:48px 30px}
  .vt-card--lead{grid-column:1/-1}
}

/* ---------- our-process: dashed zig-zag connectors run UNDER the step circles + text ---------- */
.zz-step__num,.zz-step__body{position:relative;z-index:1}
/* ---------- about-us: 4 team cards on a 3-col grid → center the lone last card (3 + 1) ---------- */
@media (min-width:993px){.team-grid > .team-card:last-child:nth-child(3n+1){grid-column:2}}

/* ---------- features/* (v2): info cards with more than one paragraph (features/seo) ---------- */
.info-card__body + .info-card__body{margin-top:12px}
/* ---------- pricing: "Monthly [switch] Annually" toggle.
   Same [data-switch] tabs, plus a real switch button between the labels: clicking a label selects
   that side; clicking the switch flips to the other side. ---------- */
.tier-switch--toggle .tier-switch__track{background:none;border:0;padding:0;gap:14px;align-items:center;overflow:visible}
.tier-switch--toggle button[role=tab]{height:auto;padding:4px 0;border-radius:0;font-size:18px;font-weight:500;color:var(--ink-2)}
.tier-switch--toggle button[role=tab][aria-selected="true"]{background:none;color:var(--ink)}
.tier-switch--toggle .tier-switch__knob{position:relative;flex:none;width:48px;height:26px;padding:0;border-radius:var(--r-pill);background:var(--accent);cursor:pointer;transition:background var(--t)}
.tier-switch--toggle .tier-switch__knob:hover{background:var(--accent-hover)}
.tier-switch--toggle .tier-switch__knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--t)}
.tier-switch--toggle .tier-switch__track:has([role=tab]:last-of-type[aria-selected="true"]) .tier-switch__knob::after{transform:translateX(22px)}
/* ---------- about-us: placeholder photo circle on the placeholder team slots ---------- */
.team-card .ph--round{width:96px;height:96px;margin:0 0 14px;padding:8px;font-size:10px;line-height:1.2}

/* ---------- trades-we-serve (v2): 22 tiles on a 3-col grid → center the lone last tile (7 rows + 1) ---------- */
@media (min-width:993px){.trade-grid > .trade-grid__tile:last-child:nth-child(3n+1){grid-column:2}}
/* ---------- book + contact (v2): funnel CTA is a glowing pill in the Recall accent ---------- */
.btn--pill{border-radius:var(--r-pill);box-shadow:0 0 0 4px rgba(30,143,255,.16),0 8px 26px rgba(30,143,255,.45)}
.btn--pill:hover{box-shadow:0 0 0 6px rgba(30,143,255,.2),0 10px 30px rgba(61,158,255,.5)}
/* hero review badges on phones: shrink all three onto one row instead of stacking */
@media (max-width:600px){
  .badges{flex-wrap:nowrap;justify-content:space-between;gap:8px;margin-top:32px}
  .badge-rule{display:none}
  .rbadge{gap:7px;min-width:0}
  .rbadge__logo{width:30px;height:30px}
  .rbadge__text{gap:2px;min-width:0}
  .rbadge__name{font-size:14px;white-space:nowrap}
  .rbadge__stars{gap:1px}
  .rbadge__star{width:11px;height:11px}
}
@media (max-width:359px){
  .badges{gap:4px}
  .rbadge{gap:5px}
  .rbadge__logo{width:24px;height:24px}
  .rbadge__name{font-size:12px}
  .rbadge__star{width:9px;height:9px}
}
/* hero review badges: dividers only when all three fit on one row */
@media (max-width:1099px){.badge-rule{display:none}}
/* partner logo tiles (home marquee) */
.logo-tile{width:auto;display:flex;align-items:center;gap:12px;padding:0 22px;background:#fff;box-shadow:0 8px 24px -12px rgba(0,0,0,.45)}
.logo-tile img{width:34px;height:34px;object-fit:contain;flex:none}
.logo-tile span{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
@media (min-width:993px){.logo-tile{width:auto;padding:0 26px}.logo-tile img{width:38px;height:38px}.logo-tile span{font-size:18px}}
/* trade tile photos */
.trade-tile__img{display:block;flex:1 1 0;min-height:0;width:100%;height:100%;object-fit:cover;background:var(--gray)}
/* team headshots: square crops shown as borderless circles */
.team-card__photo{display:block;width:96px;height:96px;margin:0 0 14px;border-radius:50%;object-fit:cover;border:0}
/* team grid: center a lone last card in the 2-column (tablet) layout */
@media (min-width:601px) and (max-width:992px){.team-grid > .team-card:last-child:nth-child(2n+1){grid-column:1 / -1;justify-self:center;width:calc(50% - 4px)}}

/* ---------- "Under maintenance" panel: blog, sales video slot, product demo slots ---------- */
.maint{position:relative;display:flex;align-items:center;gap:24px;background:var(--navy);color:#fff;border-radius:var(--r-md);padding:28px 32px;text-align:left;overflow:hidden}
.maint::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 50%,rgba(30,143,255,.22),transparent 70%);pointer-events:none}
.maint__body{position:relative;flex:1;min-width:0}
.maint__eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-left:12px;border-left:3px solid var(--accent);margin-bottom:10px}
.maint__title{font-family:var(--font-head);font-size:clamp(20px,2.4vw,28px);font-weight:700;line-height:1.2;margin:0}
.maint__text{margin-top:8px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.8);max-width:40ch}
.maint .btn{margin-top:18px}
.maint__bot{position:relative;flex:none;width:auto;height:auto;max-height:260px;align-self:flex-end;margin-bottom:-28px}
.maint--fill{width:100%;aspect-ratio:16/9;padding:24px 28px;container-type:inline-size}
.demo-frame .maint--fill{border-radius:0}
.maint--fill .maint__bot{max-height:86%;margin-bottom:-24px}
.maint--fill .maint__title{font-size:clamp(16px,4.2cqw,28px)}
.maint--fill .maint__text{font-size:clamp(12px,2.4cqw,15px)}
.maint--page{max-width:900px;margin:0 auto;padding:40px 44px;min-height:340px}
.maint--page .maint__title{font-size:clamp(26px,3.2vw,38px)}
.maint--page .maint__bot{max-height:320px;margin-bottom:-40px}
@media (max-width:600px){.maint,.maint--fill{flex-direction:column;align-items:flex-start;aspect-ratio:auto;padding:22px}.maint__bot,.maint--fill .maint__bot,.maint--page .maint__bot{max-height:170px;margin:8px auto -22px}}

/* plain-language "what is Recall Systems" lead (home systems section) */
.section-lead{max-width:760px;margin:-8px auto 40px;text-align:center;font-size:17px;line-height:1.6;color:var(--ink-2)}
.about-intro__lead strong{font-weight:600}
.vsl__title .vsl__price{display:block;color:var(--ink)}
.acc__more{margin-top:10px}.acc__more a{color:var(--accent-ink);font-weight:700}
.features__more{text-align:center;margin:48px auto 0;max-width:820px;font-size:16px;color:var(--ink-2)}.features__more a{color:var(--accent-ink);font-weight:700}

/* ---------- mobile: compact header CTA, slim cookie bar, bigger tap targets ---------- */
@media (max-width:992px){
  .header-cta{display:inline-flex;width:auto;height:40px;padding:0 14px;font-size:15px;margin-left:auto;margin-right:10px;border-radius:var(--r-sm)}
}
@media (max-width:400px){
  .site-header .brand{gap:8px}
  .site-header .brand__mark{width:44px;height:44px;border-radius:10px}
  .site-header .brand__word{font-size:22px}
  .header-cta{height:38px;padding:0 10px;font-size:14px;margin-right:6px}
}
@media (max-width:339px){
  .header-cta{display:none}
}
@media (max-width:600px){
  .consent{left:0;right:0;bottom:0;max-width:none;border-radius:0;border-width:1px 0 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
  .consent__title{display:none}
  .consent__text{font-size:12px;line-height:1.4;margin:0;flex:1;min-width:0}
  .consent__actions{margin:0;flex:none}
  .consent__actions .btn{height:44px;min-width:72px}
}
.consent__actions .btn{min-height:40px}
.tier-switch--toggle button[role=tab]{min-height:44px}
.tier-switch--toggle .tier-switch__knob::before{content:"";position:absolute;inset:-9px -6px}

/* 404 page */
.notfound{text-align:center;padding-bottom:96px}
.notfound__code{font-family:var(--font-head);font-size:clamp(72px,14vw,140px);font-weight:700;line-height:1;color:var(--accent);padding-top:48px}
.notfound .page-intro{margin:0 auto}
.notfound__links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0 32px}
.notfound__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-weight:700;color:var(--ink)}
.notfound__links a:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ---------- trade landing pages (/trades-we-serve/<trade>/) ---------- */
.trade-hero{padding-top:28px}
.crumbs{font-size:14px;color:var(--ink-3);margin-bottom:22px}
.crumbs a{color:var(--accent-ink);font-weight:600}
.crumbs [aria-current]{color:var(--ink-2)}
.trade-hero__row{display:flex;flex-direction:column;gap:32px}
.trade-hero__title{font-size:clamp(32px,4.4vw,52px);line-height:1.12;letter-spacing:-.02em;margin-bottom:18px}
.trade-hero__copy p{font-size:17px;line-height:1.6;color:var(--ink-2)}
.trade-hero__copy p + p{margin-top:14px}
.trade-hero__price{margin-top:20px!important;color:var(--ink)!important}
.trade-hero__price a{color:var(--accent-ink);font-weight:700;margin-left:4px}
.trade-hero__cta{margin-top:24px}
.trade-hero__media{margin:0}
.trade-hero__media img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.trade-hero__media figcaption{font-size:14px;color:var(--ink-3);margin-top:10px;text-align:center}
.trade-hero__media figcaption a{color:var(--accent-ink);font-weight:600}
.info-card__more{margin-top:14px}
.info-card__more a{color:var(--accent-ink);font-weight:700}
@media (min-width:993px){
  .trade-hero__row{flex-direction:row;align-items:center;gap:56px}
  .trade-hero__copy{flex:1 1 46%}
  .trade-hero__media{flex:1 1 54%}
  .info-grid--3{grid-template-columns:repeat(3,1fr)}
  .info-grid--3 .info-card{padding:32px}
  .info-grid--3 .info-card__icon{width:56px;height:56px}
  .info-grid--3 .info-card__title{font-size:22px}
  .info-grid--3 .info-card__body{font-size:16px}
}
.trade-grid__link{display:flex;flex-direction:column;height:100%;color:inherit}
.trade-grid__link .label{color:var(--accent-ink)}
.trade-grid__link:hover .label{text-decoration:underline}
a.trade-tile{color:inherit}

/* testimonial transcripts (testimonials page) */
.t-transcript{margin-top:4px;font-size:14px}
.t-transcript summary{cursor:pointer;color:var(--accent-ink);font-weight:700;min-height:44px;display:flex;align-items:center}
.t-transcript p{margin-top:6px;line-height:1.6;color:var(--ink-2)}