/* ============================================================
   ezee - shared styles, built from the Figma file
   "Ezee-VPN-Website" (wNU5JlD7zga6CfoVzFkmQi), page "Final Website UI".
   Token names mirror the Figma variables (Brand/Default -> --brand, etc.).
   Page-specific layout lives in assets/css/pages/<page>.css.
   ============================================================ */

:root{
  /* ---- Primary ---- */
  --primary-50:#e7f3f0;
  --primary-100:#b5d9d1;
  --primary-200:#91c7bb;
  --primary-300:#5eae9d;
  --primary-500:#0f866c;
  --primary-600:#0e7a62;
  --primary-700:#0b5f4d;
  --primary-800:#084a3b;
  --primary-900:#06382d;

  /* ---- Gray ---- */
  --gray-50:#f0f1f3;
  --gray-100:#d0d3d9;
  --gray-200:#b9bdc7;
  --gray-300:#989fad;
  --gray-400:#858d9d;
  --gray-500:#667085;
  --gray-600:#5d6679;
  --gray-700:#48505e;
  --gray-800:#383e49;
  --gray-900:#2b2f38;
  --white:#ffffff;
  --black:#202020;

  /* ---- Feedback ---- */
  --success-50:#e7f8f0;
  --success-100:#b6e9d1;
  --success-500:#12b76a;
  --success-700:#0d824b;
  --warning-50:#fef4e6;
  --warning-700:#af6606;
  --error-50:#feeceb;
  --error-500:#f04438;

  /* ---- Semantic (Figma: Brand/*, Text/*, Surface/*, Border/*) ---- */
  --brand:var(--primary-500);          /* Brand/Default */
  --brand-hover:var(--primary-600);
  --brand-active:var(--primary-700);   /* Brand/Active */
  --brand-subtle:var(--primary-50);    /* Brand/Subtle */
  --text-primary:var(--gray-900);
  --text-secondary:var(--gray-500);
  --text-muted:var(--gray-400);
  --text-on-brand:var(--white);
  --surface:var(--white);
  --surface-subtle:var(--gray-50);
  --surface-inverse:var(--gray-900);
  --border:var(--gray-100);
  --border-strong:var(--gray-200);
  --icon-neutral:var(--gray-500);

  /* ---- Type ---- */
  --font-head:"Barlow",system-ui,sans-serif;
  --font-body:"Roboto",system-ui,sans-serif;

  /* ---- Spacing (Figma Spacing/1..9) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  /* ---- Radius (Figma Radius/*) ---- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-2xl:28px;
  --radius-pill:999px;

  /* ---- Elevation (Figma Web/Elevation/*) ---- */
  --shadow-button:0 2px 6px -1px rgba(8,82,64,.18);
  --shadow-card:0 1px 2px 0 rgba(18,33,28,.06);
  --shadow-raised:0 12px 32px -12px rgba(18,33,28,.10);

  /* ---- Layout ---- */
  --content:1200px;        /* 1440 frame - 2 x Grid/page-padding (120) */
  --gutter:24px;
  --section-y:var(--space-9);
  --header-h:72px;
  --ease:cubic-bezier(.32,.72,0,1);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:26px;
  color:var(--text-secondary);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,h5,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--text-primary);font-weight:700}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.container{width:min(var(--content),100% - 2 * var(--gutter));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--space-3);top:-80px;z-index:200;background:var(--brand);color:var(--white);padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);font-weight:700;font-size:14px}
.skip-link:focus{top:var(--space-3)}

/* ============================================================
   Type roles (Figma text styles)
   ============================================================ */
.t-display{font-family:var(--font-head);font-weight:700;font-size:60px;line-height:62px;letter-spacing:-1.2px;color:var(--text-primary)}
.t-h2{font-family:var(--font-head);font-weight:700;font-size:48px;line-height:52px;letter-spacing:-.96px;color:var(--text-primary)}
.t-h2-sm{font-family:var(--font-head);font-weight:700;font-size:36px;line-height:40px;letter-spacing:-.72px;color:var(--text-primary)}
.t-h3{font-family:var(--font-head);font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.2px;color:var(--text-primary)}
.t-h4{font-family:var(--font-head);font-weight:600;font-size:18px;line-height:28px;letter-spacing:-.18px;color:var(--text-primary)}
.t-h5{font-family:var(--font-head);font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.16px;color:var(--text-primary)}
.t-lead{font-size:18px;line-height:28px;color:var(--text-secondary)}
.t-base{font-size:16px;line-height:26px;color:var(--text-secondary)}
.t-base-md{font-size:16px;line-height:24px;font-weight:500}
.t-sm{font-size:14px;line-height:20px}
.t-sm-md{font-size:14px;line-height:20px;font-weight:500}
.t-caption{font-size:12px;line-height:16px}
.t-eyebrow{font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.2px}
.t-num{font-family:var(--font-head);font-weight:600;font-size:14px;line-height:20px;letter-spacing:.8px}
.t-num-lg{font-family:var(--font-head);font-weight:600;font-size:32px;line-height:34px;letter-spacing:-.5px}

/* ============================================================
   Sections
   ============================================================ */
.section{padding-block:var(--section-y);background:var(--surface)}
.section--subtle{background:var(--surface-subtle)}

/* Web/Section Head - eyebrow, H2, lead. Capped at 680px. */
.section-head{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;max-width:680px}
.section-head--center{align-items:center;text-align:center;margin-inline:auto}
.section-head--wide{max-width:none}
.section-head__body{font-size:18px;line-height:28px;color:var(--gray-600)}

/* ============================================================
   Web/Chip/Eyebrow - icon + label pill above hero titles
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:7px 11px; /* Figma draws the stroke outside the layout box: 8/12 padding minus the 1px border keeps the chip 32px tall and the same width */
  background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius-pill);
  color:var(--primary-700);font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.2px;
  white-space:nowrap;
}
.eyebrow img{width:16px;height:16px;flex:none;object-fit:none} /* glyph at its natural size inside the 16px icon frame */

/* Plain uppercase label above a section title ("SIDE BY SIDE") */
.label-eyebrow{font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--brand)}

/* ============================================================
   Web/Button - Primary · Ghost · On Brand · Ghost Inverse; Default 52 / Small 40
   Hover colours are the Figma "State=Hover" variants.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:52px;padding:0 var(--space-6);
  border-radius:var(--radius-sm);border:0; /* strokes are drawn inside (inset shadow), as in Figma, so widths match */
  font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:700;white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}
.btn--sm{height:40px;padding:0 var(--space-5);font-size:14px;line-height:20px}
.btn--block{width:100%}

.btn--primary{background:var(--brand);color:var(--text-on-brand);box-shadow:var(--shadow-button)}
.btn--primary:hover{background:var(--brand-hover);box-shadow:0 6px 16px -6px rgba(8,82,64,.35)}
.btn--primary:active{background:var(--brand-active)}

.btn--ghost{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text-primary)}
.btn--ghost:hover{background:var(--gray-50)}

.btn--on-brand{background:var(--white);color:var(--brand)}
.btn--on-brand:hover{background:var(--primary-50)}

.btn--ghost-inverse{background:transparent;box-shadow:inset 0 0 0 1px var(--gray-700);color:var(--white)}
.btn--ghost-inverse:hover{background:var(--gray-800)}

.btn[disabled],.btn[aria-disabled="true"]{background:var(--gray-100);color:var(--gray-400);box-shadow:none;cursor:not-allowed}
.btn--on-brand:focus-visible,.btn--ghost-inverse:focus-visible{outline-color:var(--white)}

/* Web/Link Arrow - inline text link + chevron */
/* Hover = Figma "State=Hover": label + chevron go Brand/Active (#0b5f4d).
   The chevron SVG is used as a mask filled with currentColor, so the exact Figma
   glyph is kept and simply follows the link colour (img content box is 0 wide). */
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:14px;line-height:20px;font-weight:700;color:var(--brand);transition:color .15s var(--ease)}
.link-arrow:hover{color:var(--brand-active)}
.link-arrow img{box-sizing:content-box;flex:none;width:0;height:16px;padding-left:16px;background:currentColor;
  -webkit-mask:url(../icons/chevron-right-brand.svg) center/5.5px 9.5px no-repeat;mask:url(../icons/chevron-right-brand.svg) center/5.5px 9.5px no-repeat}

/* Icon tile (brand-subtle square behind an icon) */
.icon-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--brand-subtle)} /* Web/Icon Tile */
.menu__row .icon-tile{border-radius:10px} /* dropdown tiles are 10px in the overlays */
.icon-tile img{width:auto;height:auto;max-width:22px;max-height:22px}

/* ============================================================
   Web/Site Header
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);box-shadow:inset 0 -1px 0 var(--border)} /* Figma stroke sits inside the 72px bar */
.site-header__bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.site-header__logo img{width:120px;height:auto}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:var(--space-1);font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary);padding-block:var(--space-2)}
.nav__link{position:relative;transition:color .15s var(--ease)}
/* Web/Nav Item: Hover and Current turn label + chevron Brand/Default; Current adds a 2px bar 4px under the label */
.nav__link:hover,.nav__link[aria-current="page"],.nav__item[data-open="true"] .nav__link{color:var(--brand)}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--brand)}
.nav__chev{width:14px;height:14px;display:inline-flex;color:var(--icon-neutral);transition:color .15s var(--ease)}
.nav__link:hover .nav__chev,.nav__link[aria-current="page"] .nav__chev,.nav__item[data-open="true"] .nav__chev{color:var(--brand)}
.nav__chev img{box-sizing:content-box;width:0;height:14px;padding-left:14px;background:currentColor;
  -webkit-mask:url(../icons/chevron-down.svg) center/8.5px 5px no-repeat;mask:url(../icons/chevron-down.svg) center/8.5px 5px no-repeat}
.site-header__actions{display:flex;align-items:center;gap:var(--space-5)}
.site-header__login{font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary)}
.site-header__login:hover{color:var(--brand)}

/* Products / Resources overlays */
.menu{
  position:absolute;top:calc(100% + 26px);left:0;width:360px; /* Figma overlay: x 0, y 54 from the nav item -> 8px under the header */
  display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);
  opacity:0;transform:translateY(-4px);visibility:hidden;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s;
}
.nav__item[data-open="true"] .menu{opacity:1;transform:none;visibility:visible;transition:opacity .16s var(--ease),transform .16s var(--ease)}
.menu__label{padding:var(--space-2) 0 2px 10px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.2px;color:var(--text-muted)}
.menu__divider{height:1px;margin:var(--space-2) 10px;background:var(--border)}
.menu__row{display:flex;align-items:center;gap:var(--space-3);padding:10px;border-radius:var(--radius-md);transition:background-color .15s var(--ease)}
.menu__row:hover{background:var(--surface-subtle)}
.menu__name{display:block;font-size:16px;line-height:24px;font-weight:500;color:var(--text-primary)}
.menu__desc{display:block;font-size:14px;line-height:20px;color:var(--text-muted)}

/* Products Panel (overlay) - Figma 6472:5987, 760 x 526 */
.menu--products{width:760px;gap:var(--space-5);padding:var(--space-5)}
.pp__top{display:flex;align-items:flex-end;gap:var(--space-5)}
.pp__rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.pp__row{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-3);border-top:1px solid var(--gray-50)}
.pp__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.pp__name-row{display:flex;align-items:center;gap:var(--space-3)}
.pp__desc{font-size:14px;line-height:20px;font-weight:500;color:var(--text-secondary)}
.pp__link{display:flex;padding-top:var(--space-1)}
.pp__badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:12px;line-height:16px;white-space:nowrap}
.pp__badge--new{background:var(--brand-subtle);color:var(--brand)}
.pp__badge--soon{background:var(--surface-subtle);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-muted)}
.pp__aside{display:flex;flex-direction:column;gap:var(--space-3);width:252px;height:415px;flex:none}
.pp__promo{flex:1;min-height:0;border-radius:var(--radius-md);overflow:hidden}
.pp__promo img{width:100%;height:100%;object-fit:cover}
.pp__feature{flex:1;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5);background:var(--brand-subtle);border-radius:var(--radius-md);overflow:hidden}
.pp__chip{display:inline-flex;align-items:center;height:28px;padding:0 var(--space-3);background:var(--white);border-radius:var(--radius-pill);font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.2px;color:var(--brand)}
.pp__caption{font-size:12px;line-height:16px;color:var(--text-secondary)}
.pp__foot{display:flex;gap:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--border)}

/* Mobile menu toggle + drawer (same links as the desktop nav) */
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-primary)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s var(--ease),background-color .2s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none}

/* ============================================================
   Web/Accordion Item + FAQ section layout
   ============================================================ */
.faq{display:flex;gap:var(--space-8);align-items:flex-start}
.faq__head{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;width:380px;flex:none}
.faq__list{display:flex;flex-direction:column;gap:var(--space-3);flex:1;min-width:0}
.acc{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);transition:background-color .18s var(--ease),border-color .18s var(--ease)}
.acc[data-open="true"]{background:var(--surface-subtle);border-color:var(--brand-active)}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;padding:var(--space-4) var(--space-5);text-align:left;
  font-family:var(--font-head);font-weight:600;font-size:18px;line-height:28px;letter-spacing:-.18px;color:var(--text-primary);border-radius:var(--radius-md)}
.acc__icon{position:relative;width:20px;height:20px;flex:none}
.acc__icon img{position:absolute;inset:0;margin:auto;transition:opacity .15s var(--ease)}
.acc__icon .acc__minus{opacity:0}
.acc[data-open="true"] .acc__plus{opacity:0}
.acc[data-open="true"] .acc__minus{opacity:1}
.acc__panel{padding:0 var(--space-5) var(--space-4);margin-top:calc(var(--space-3) - var(--space-4))}
.acc__panel[hidden]{display:none}

/* ============================================================
   Web/Step Card - "Get it running in a minute"
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-8)}
.step{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl)}
.step__art{height:168px;border-radius:var(--radius-lg)}
.step__art img{width:100%;height:auto}
.step__body{display:flex;flex-direction:column;gap:var(--space-2)}
.step__num{display:flex;align-items:center;height:56px;color:var(--brand)}

/* ============================================================
   Brand panel - "Ezee, everywhere you go" + Platform Tiles
   ============================================================ */
.brand-panel{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-7);background:var(--primary-800);border-radius:var(--radius-xl)}
.brand-panel__copy{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;max-width:460px}
.brand-panel__copy h2{color:var(--white)}
.brand-panel__copy p{color:var(--primary-100)}
.brand-panel__tiles{display:flex;gap:var(--space-4)}
.platform-tile{display:flex;flex-direction:column;justify-content:center;gap:var(--space-5);width:300px;height:220px;padding:var(--space-5);background:var(--primary-700);border-radius:var(--radius-lg);transition:background-color .3s ease-out,box-shadow .3s ease-out}
/* Figma Platform Tile -> Variant2 on hover (Smart Animate, ease-out 300ms): primary-600 fill + 1px white inside stroke */
.platform-tile:hover{background:var(--primary-600);box-shadow:inset 0 0 0 1px var(--white)}
.platform-tile__icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.platform-tile h3{color:var(--white)}
.platform-tile p{color:var(--primary-50)}

/* ============================================================
   Web/CTA/Split Card - closing CTA above the footer
   ============================================================ */
.cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding:var(--space-7) var(--space-8);background:var(--brand-subtle);border-radius:var(--radius-2xl)}
.cta__shape{position:absolute;right:-60px;top:50%;width:620px;height:620px;transform:translateY(-50%);pointer-events:none}
.cta__copy{position:relative;display:flex;flex-direction:column;gap:var(--space-6);padding-top:var(--space-2);max-width:486px}
.cta__text{display:flex;flex-direction:column;gap:var(--space-3)}
.cta__text p{max-width:440px}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.cta__art{position:relative;flex:none;width:499px}
.cta__art img{width:100%;height:auto}

/* ============================================================
   Web/Site Footer
   ============================================================ */
.site-footer{border-top:1px solid var(--border);padding:var(--space-8) 0 var(--space-7);background:var(--surface)}
.site-footer__cols{display:flex;gap:var(--space-8);align-items:flex-start}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--space-4);width:380px;flex:none;font-size:14px;line-height:20px}
.site-footer__brand img{width:120px;height:auto}
.site-footer__address{color:var(--text-muted)}
.site-footer__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.site-footer__h{font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.2px;color:var(--text-primary)}
.site-footer__links{display:flex;flex-direction:column;gap:var(--space-3);font-size:14px;line-height:20px}
.site-footer__links a:hover,.site-footer__legal a:hover{color:var(--brand)}
.site-footer__divider{height:1px;background:var(--border);margin-block:var(--space-7)}
.site-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:12px;line-height:16px;color:var(--text-muted)}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-5)}

/* ============================================================
   Forms (Contact, Sign in, Cloud Storage notify)
   ============================================================ */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary)}
.input{width:100%;height:52px;padding:0 var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);
  font-size:16px;line-height:24px;color:var(--text-primary);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.input::placeholder{color:var(--text-muted)}
.input:hover{border-color:var(--gray-300)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--primary-50)}
textarea.input{height:auto;min-height:132px;padding:var(--space-3) var(--space-4);resize:vertical}

/* ============================================================
   Responsive - the Figma frames are desktop 1440; below that the same
   content re-flows, nothing is added or removed.
   ============================================================ */
@media (max-width:1100px){
  .nav,.site-header__actions .site-header__login{display:none}
  .nav-toggle{display:inline-flex}
  .site-header__actions .btn{display:none}
  .drawer{display:block;position:fixed;inset:var(--header-h) 0 0;z-index:49;background:var(--surface);overflow-y:auto;padding:var(--space-5) var(--gutter) var(--space-7);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
  .drawer[data-open="true"]{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .drawer__group{display:flex;flex-direction:column;gap:var(--space-1);padding-block:var(--space-3);border-bottom:1px solid var(--border)}
  .drawer__link{display:flex;align-items:center;min-height:44px;font-size:16px;line-height:24px;font-weight:500;color:var(--text-primary)}
  .drawer__actions{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-5)}

  .faq{flex-direction:column;gap:var(--space-6)}
  .faq__head{width:auto}
  .brand-panel{flex-direction:column;align-items:flex-start}
  .brand-panel__tiles{width:100%}
  .platform-tile{flex:1;width:auto}
  .cta{flex-direction:column;align-items:flex-start}
  .cta__art{width:min(499px,100%)}
  .site-footer__cols{flex-wrap:wrap}
  .site-footer__brand{width:100%}
}

@media (max-width:900px){
  .steps{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}

@media (max-width:640px){
  :root{--gutter:16px;--section-y:64px}
  .t-display{font-size:40px;line-height:44px;letter-spacing:-.8px}
  .t-h2{font-size:34px;line-height:38px;letter-spacing:-.68px}
  .t-h2-sm{font-size:28px;line-height:32px;letter-spacing:-.56px}
  .btn{min-height:44px}
  .btn--sm{height:44px}
  .brand-panel{padding:var(--space-5)}
  .brand-panel__tiles{flex-direction:column}
  .platform-tile{height:auto;padding:var(--space-5)}
  .cta{padding:var(--space-6) var(--space-5)}
  .cta__actions .btn{flex:1}
  .site-footer__col{flex:1 1 40%}
  .site-footer__links a,.site-footer__legal a{display:inline-flex;align-items:center;min-height:44px}
  .site-footer__links{gap:0}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
  .acc__btn{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ============================================================
   Scroll reveal
   - Figma motion (Home tagline 6066:577): words rise 18px from below, opacity 0 -> 1,
     blur 6px -> 0; 445ms per word, 53.4ms stagger, 200ms delay, cubic-bezier(.23,1,.32,1).
   - Every other reveal reuses that language (same curve, rise + fade, blur on headings),
     shorter and calmer for blocks. Plays once. Off under prefers-reduced-motion.
   - Hero copy/media animate on load in pure CSS (markers are in the HTML, so nothing
     flashes). Everything below the fold is tagged by ezee.js only while still off-screen.
   ============================================================ */
:root{--ease-reveal:cubic-bezier(.23,1,.32,1)}

@media (prefers-reduced-motion:no-preference){
  /* Hero load-in */
  [data-reveal="hero"] > *{animation:reveal-rise .7s var(--ease-reveal) both}
  [data-reveal="hero"] > :nth-child(2){animation-delay:70ms}
  [data-reveal="hero"] > :nth-child(3){animation-delay:140ms}
  [data-reveal="hero"] > :nth-child(4){animation-delay:210ms}
  [data-reveal="hero"] > :nth-child(n+5){animation-delay:280ms}
  [data-reveal="hero-media"]{animation:reveal-media .9s var(--ease-reveal) .18s both}
  @keyframes reveal-rise{from{opacity:0;transform:translateY(16px);filter:blur(4px)}}
  @keyframes reveal-media{from{opacity:0;transform:translateY(24px)}}

  /* Scroll reveals (state is added/removed by ezee.js) */
  [data-reveal="block"],[data-reveal="text"],[data-reveal="stagger"] > *{
    transition:opacity .6s var(--ease-reveal),transform .8s var(--ease-reveal),filter .6s var(--ease-reveal);
    transition-delay:var(--reveal-delay,0ms);
  }
  [data-reveal="block"]:not(.is-in),[data-reveal="stagger"]:not(.is-in) > *{opacity:0;transform:translateY(24px)}
  [data-reveal="text"]:not(.is-in){opacity:0;transform:translateY(18px);filter:blur(6px)}
  [data-reveal="stagger"] > :nth-child(2){--reveal-delay:60ms}
  [data-reveal="stagger"] > :nth-child(3){--reveal-delay:120ms}
  [data-reveal="stagger"] > :nth-child(4){--reveal-delay:180ms}
  [data-reveal="stagger"] > :nth-child(5){--reveal-delay:240ms}
  [data-reveal="stagger"] > :nth-child(6){--reveal-delay:300ms}
  [data-reveal="stagger"] > :nth-child(n+7){--reveal-delay:360ms} /* cap: long lists never feel slow */

  /* Figma word-by-word text reveal */
  .reveal-word{display:inline-block;opacity:0;transform:translateY(18px);filter:blur(6px);
    transition:opacity .445s var(--ease-reveal),transform .445s var(--ease-reveal),filter .445s var(--ease-reveal);
    transition-delay:calc(200ms + var(--i) * 53.42ms)}
  [data-reveal="words"].is-in .reveal-word{opacity:1;transform:none;filter:none}
}