/*!
 * Solorai Web System v1.0
 * Brand: Solorai
 * Every rule derives from the logo: full radius from the circle,
 * 22° chevron for indicators, 11% stroke for icons, grotesk type from the wordmark.
 */

/* 1. Fonts ---------------------------------------------------------------
   Neue Haas Grotesk requires a Monotype web licence. Place the licensed
   .woff2 files in /assets/fonts/ and uncomment. Until then the stack falls
   back to Helvetica Neue (Apple devices) and Arial (Windows, Android).
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../fonts/NHaasGroteskDSPro-55Rg.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../fonts/NHaasGroteskDSPro-65Md.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../fonts/NHaasGroteskDSPro-75Bd.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Text Pro";src:url("../fonts/NHaasGroteskTXPro-55Rg.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Text Pro";src:url("../fonts/NHaasGroteskTXPro-65Md.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
*/

/* 2. Tokens -------------------------------------------------------------- */
:root{
  /* Color */
  --sl-black:#000000;
  --sl-ink:#1D1D1F;
  --sl-graphite:#6E6E73;
  --sl-silver:#86868B;
  --sl-fog:#D2D2D7;
  --sl-cloud:#F5F5F7;
  --sl-snow:#FBFBFD;
  --sl-white:#FFFFFF;
  --sl-blue:#0071E3;          /* action only */
  --sl-blue-hover:#0077ED;
  --sl-blue-active:#006EDB;
  --sl-link:#0066CC;
  --sl-link-on-dark:#2997FF;
  --sl-focus:rgba(0,113,227,.45);
  --sl-error:#E30000;

  /* Type */
  --sl-font-display:"Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sl-font-text:"Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sl-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sl-fs-display:clamp(3rem,1.6rem + 5.6vw,6rem);      /* 48 → 96 */
  --sl-fs-h1:clamp(2.5rem,1.6rem + 3.6vw,5rem);         /* 40 → 80 */
  --sl-fs-h2:clamp(2rem,1.4rem + 2.4vw,3.5rem);         /* 32 → 56 */
  --sl-fs-h3:clamp(1.5rem,1.2rem + 1.2vw,2.5rem);       /* 24 → 40 */
  --sl-fs-h4:clamp(1.25rem,1.1rem + .6vw,1.75rem);      /* 20 → 28 */
  --sl-fs-lead:clamp(1.1875rem,1.1rem + .4vw,1.5rem);   /* 19 → 24 */
  --sl-fs-body:1.0625rem;                               /* 17 */
  --sl-fs-small:.875rem;                                /* 14 */
  --sl-fs-caption:.75rem;                               /* 12 */
  --sl-lh-tight:1.05;
  --sl-lh-snug:1.15;
  --sl-lh-body:1.47;
  --sl-ls-display:-.02em;
  --sl-ls-h1:-.015em;
  --sl-ls-h2:-.01em;
  --sl-ls-h3:-.005em;

  /* Space (multiples of 4) */
  --sl-space-1:4px;  --sl-space-2:8px;  --sl-space-3:12px; --sl-space-4:16px;
  --sl-space-5:24px; --sl-space-6:32px; --sl-space-7:48px; --sl-space-8:64px;
  --sl-space-9:96px; --sl-space-10:128px; --sl-space-11:160px;
  --sl-section-y:clamp(80px,10vw,160px);
  --sl-gutter:clamp(20px,4vw,48px);

  /* Layout */
  --sl-text:680px;
  --sl-content:980px;
  --sl-wide:1280px;
  --sl-nav-h:48px;

  /* Shape (from the logo circle) */
  --sl-radius-pill:999px;
  --sl-radius-card:28px;
  --sl-radius-card-sm:18px;
  --sl-radius-field:12px;
  --sl-radius-icon:22.5%;
  --sl-stroke:2px;  /* 11% of 20px icon area, like the mark */

  /* Elevation */
  --sl-shadow-card:0 1px 2px rgba(0,0,0,.06),0 16px 48px rgba(0,0,0,.10);
  --sl-shadow-float:0 4px 14px rgba(0,0,0,.16);

  /* Motion */
  --sl-ease:cubic-bezier(.28,.11,.32,1);
  --sl-ease-out:cubic-bezier(.16,1,.3,1);
  --sl-dur-fast:200ms;
  --sl-dur:400ms;
  --sl-dur-slow:700ms;
}

/* 3. Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--sl-nav-h) + 16px)}
body{margin:0;font-family:var(--sl-font-text);font-size:var(--sl-fs-body);line-height:var(--sl-lh-body);color:var(--sl-ink);background:var(--sl-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--sl-font-display);font-weight:500;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--sl-link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--sl-white),0 0 0 6px var(--sl-focus);border-radius:4px}
::selection{background:rgba(0,113,227,.18)}
.sl-num{font-variant-numeric:tabular-nums}

/* 4. Typography ---------------------------------------------------------- */
.sl-display{font-size:var(--sl-fs-display);line-height:var(--sl-lh-tight);letter-spacing:var(--sl-ls-display)}
.sl-h1,h1{font-size:var(--sl-fs-h1);line-height:var(--sl-lh-tight);letter-spacing:var(--sl-ls-h1)}
.sl-h2,h2{font-size:var(--sl-fs-h2);line-height:1.07;letter-spacing:var(--sl-ls-h2)}
.sl-h3,h3{font-size:var(--sl-fs-h3);line-height:1.1;letter-spacing:var(--sl-ls-h3)}
.sl-h4,h4{font-size:var(--sl-fs-h4);line-height:var(--sl-lh-snug)}
.sl-eyebrow{font-family:var(--sl-font-display);font-size:var(--sl-fs-h4);font-weight:500;line-height:1.2;color:var(--sl-graphite)}
.sl-lead{font-size:var(--sl-fs-lead);line-height:1.4;color:var(--sl-graphite);max-width:var(--sl-text)}
.sl-small{font-size:var(--sl-fs-small)}
.sl-caption{font-size:var(--sl-fs-caption);line-height:1.33;letter-spacing:.01em;color:var(--sl-graphite)}
.sl-center{text-align:center;margin-inline:auto}

/* 5. Layout -------------------------------------------------------------- */
.sl-container{width:100%;max-width:calc(var(--sl-content) + var(--sl-gutter) * 2);margin-inline:auto;padding-inline:var(--sl-gutter)}
.sl-container--wide{max-width:calc(var(--sl-wide) + var(--sl-gutter) * 2)}
.sl-container--text{max-width:calc(var(--sl-text) + var(--sl-gutter) * 2)}
.sl-section{padding-block:var(--sl-section-y)}
.sl-section--cloud{background:var(--sl-cloud)}
.sl-section--dark,.sl-dark{background:var(--sl-black);color:var(--sl-cloud)}
.sl-dark .sl-lead,.sl-dark .sl-eyebrow,.sl-dark .sl-caption{color:var(--sl-silver)}
.sl-dark a{color:var(--sl-link-on-dark)}
.sl-stack{display:flex;flex-direction:column;gap:var(--sl-space-5)}
.sl-stack--lg{gap:var(--sl-space-8)}
.sl-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sl-space-5)}
.sl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sl-space-5)}
.sl-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sl-space-5)}
.sl-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sl-space-5)}
.sl-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sl-space-5)}

/* 6. Buttons (radius = height / 2, from the logo circle) ----------------- */
.sl-btn{--h:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;height:var(--h);padding:0 22px;border:0;border-radius:var(--sl-radius-pill);font:500 var(--sl-fs-body)/1 var(--sl-font-text);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--sl-dur-fast) var(--sl-ease),color var(--sl-dur-fast) var(--sl-ease),transform var(--sl-dur-fast) var(--sl-ease)}
.sl-btn:hover{text-decoration:none}
.sl-btn:active{transform:scale(.98)}
.sl-btn--primary{background:var(--sl-blue);color:var(--sl-white)}
.sl-btn--primary:hover{background:var(--sl-blue-hover);color:var(--sl-white)}
.sl-btn--primary:active{background:var(--sl-blue-active)}
.sl-btn--secondary{background:var(--sl-ink);color:var(--sl-white)}
.sl-dark .sl-btn--secondary{background:var(--sl-white);color:var(--sl-ink)}
.sl-btn--outline{background:transparent;color:var(--sl-link);box-shadow:inset 0 0 0 1px var(--sl-blue)}
.sl-dark .sl-btn--outline{color:var(--sl-link-on-dark);box-shadow:inset 0 0 0 1px var(--sl-link-on-dark)}
.sl-btn--link{background:none;height:auto;min-width:0;padding:0;color:var(--sl-link);font-weight:400}
.sl-btn--link::after{content:"\203A";margin-left:2px}
.sl-btn--link:hover{text-decoration:underline}
.sl-dark .sl-btn--link{color:var(--sl-link-on-dark)}
.sl-btn--lg{--h:56px;padding:0 28px;font-size:1.1875rem}
.sl-btn--sm{--h:32px;padding:0 16px;font-size:var(--sl-fs-small);min-width:64px}
.sl-btn[disabled],.sl-btn[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* 7. Global navigation --------------------------------------------------- */
.sl-nav{position:sticky;top:0;z-index:100;height:var(--sl-nav-h);background:rgba(251,251,253,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.sl-nav__inner{height:100%;max-width:calc(var(--sl-wide) + var(--sl-gutter) * 2);margin-inline:auto;padding-inline:var(--sl-gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--sl-space-6)}
.sl-nav__logo img{height:20px;width:auto}
.sl-nav__links{display:flex;gap:var(--sl-space-6);list-style:none;margin:0;padding:0;font-size:var(--sl-fs-small)}
.sl-nav__links a{color:var(--sl-ink);opacity:.85}
.sl-nav__links a:hover{opacity:1;text-decoration:none}
.sl-nav--dark{background:rgba(0,0,0,.72);border-bottom-color:rgba(255,255,255,.08)}
.sl-nav--dark .sl-nav__links a{color:var(--sl-cloud)}
.sl-nav--dark .sl-nav__logo img{filter:invert(1)}
.sl-nav__toggle{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer}

/* 8. Hero ---------------------------------------------------------------- */
.sl-hero{padding-block:clamp(64px,9vw,140px) clamp(48px,6vw,96px);text-align:center}
.sl-hero .sl-lead{margin-inline:auto}
.sl-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sl-space-5);margin-top:var(--sl-space-6)}
.sl-hero__media{margin-top:clamp(48px,6vw,80px);border-radius:var(--sl-radius-card);overflow:hidden;background:var(--sl-black)}

/* 9. Tiles and cards ----------------------------------------------------- */
.sl-tile{background:var(--sl-cloud);border-radius:var(--sl-radius-card);padding:clamp(40px,5vw,64px) clamp(24px,4vw,48px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sl-space-3);overflow:hidden}
.sl-tile--dark{background:var(--sl-black);color:var(--sl-cloud)}
.sl-tile__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sl-space-5);margin-top:var(--sl-space-3)}
.sl-card{background:var(--sl-white);border-radius:var(--sl-radius-card);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:var(--sl-space-3)}
.sl-section--cloud .sl-card{background:var(--sl-white)}
.sl-section:not(.sl-section--cloud) .sl-card{background:var(--sl-cloud)}
.sl-feature{display:flex;flex-direction:column;gap:var(--sl-space-3)}
.sl-feature__title{font-family:var(--sl-font-display);font-size:var(--sl-fs-h4);font-weight:500}
.sl-feature__text{color:var(--sl-graphite)}
.sl-icon{width:28px;height:28px;stroke:currentColor;stroke-width:var(--sl-stroke);stroke-linecap:butt;stroke-linejoin:miter;fill:none}

/* 10. Stats, quote ------------------------------------------------------- */
.sl-stat{display:flex;flex-direction:column;gap:var(--sl-space-2);border-top:1px solid currentColor;padding-top:var(--sl-space-5)}
.sl-stat__value{font-family:var(--sl-font-display);font-size:var(--sl-fs-h1);font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.sl-stat__label{color:var(--sl-graphite)}
.sl-dark .sl-stat__label{color:var(--sl-silver)}
.sl-quote{margin:0;max-width:var(--sl-content);display:flex;flex-direction:column;gap:var(--sl-space-5)}
.sl-quote p{font-family:var(--sl-font-display);font-size:var(--sl-fs-h3);font-weight:500;line-height:1.15;letter-spacing:-.01em}
.sl-quote cite{font-style:normal;color:var(--sl-graphite)}

/* 11. Pricing ------------------------------------------------------------ */
.sl-price{background:var(--sl-cloud);border-radius:var(--sl-radius-card);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:var(--sl-space-4)}
.sl-price--featured{background:var(--sl-black);color:var(--sl-cloud)}
.sl-price__value{font-family:var(--sl-font-display);font-size:var(--sl-fs-h2);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sl-price__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--sl-fog)}
.sl-price__list li{padding:12px 0;border-bottom:1px solid var(--sl-fog);font-size:var(--sl-fs-small)}
.sl-price--featured .sl-price__list,.sl-price--featured .sl-price__list li{border-color:rgba(255,255,255,.16)}

/* 12. FAQ (flat 22° chevron from the logo) ------------------------------- */
.sl-faq{border-top:1px solid var(--sl-fog)}
.sl-faq details{border-bottom:1px solid var(--sl-fog)}
.sl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sl-space-5);padding:var(--sl-space-5) 0;font-family:var(--sl-font-display);font-size:var(--sl-fs-h4);font-weight:500}
.sl-faq summary::-webkit-details-marker{display:none}
.sl-faq summary::after{content:"";flex:0 0 24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9.5l8 3.2 8-3.2' fill='none' stroke='%231D1D1F' stroke-width='2'/%3E%3C/svg%3E") center/24px no-repeat;transition:transform var(--sl-dur) var(--sl-ease)}
.sl-faq details[open] summary::after{transform:rotate(180deg)}
.sl-faq details > :not(summary){padding-bottom:var(--sl-space-5);color:var(--sl-graphite);max-width:var(--sl-text)}

/* 13. Forms -------------------------------------------------------------- */
.sl-form{display:flex;flex-direction:column;gap:var(--sl-space-4)}
.sl-field{display:flex;flex-direction:column;gap:6px}
.sl-label{font-size:var(--sl-fs-small);color:var(--sl-graphite)}
.sl-input,.sl-select,.sl-textarea{width:100%;height:52px;padding:0 16px;border:0;border-radius:var(--sl-radius-field);background:var(--sl-white);box-shadow:inset 0 0 0 1px var(--sl-fog);font:400 var(--sl-fs-body) var(--sl-font-text);color:var(--sl-ink);transition:box-shadow var(--sl-dur-fast) var(--sl-ease);-webkit-appearance:none;appearance:none}
.sl-textarea{height:auto;min-height:128px;padding:14px 16px;resize:vertical}
.sl-input::placeholder,.sl-textarea::placeholder{color:var(--sl-silver)}
.sl-input:focus,.sl-select:focus,.sl-textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--sl-blue)}
.sl-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--sl-error)}
.sl-help{font-size:var(--sl-fs-caption);color:var(--sl-graphite)}
.sl-help--error{color:var(--sl-error)}
.sl-search{height:44px;border-radius:var(--sl-radius-pill);padding-left:44px;background:var(--sl-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM15.3 15.3L20.5 20.5' fill='none' stroke='%2386868B' stroke-width='2'/%3E%3C/svg%3E") 16px center/18px no-repeat}

/* 14. CTA band, footer --------------------------------------------------- */
.sl-cta-band{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sl-space-5)}
.sl-footer{background:var(--sl-cloud);color:var(--sl-graphite);font-size:var(--sl-fs-caption);line-height:1.6;padding-block:var(--sl-space-8) var(--sl-space-6)}
.sl-footer a{color:var(--sl-graphite)}
.sl-footer a:hover{color:var(--sl-ink)}
.sl-footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sl-space-5);padding-bottom:var(--sl-space-6);border-bottom:1px solid var(--sl-fog)}
.sl-footer__title{color:var(--sl-ink);font-weight:500;margin-bottom:var(--sl-space-2)}
.sl-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sl-space-4);padding-top:var(--sl-space-5)}

/* 15. Motion ------------------------------------------------------------- */
.sl-reveal{opacity:0;transform:translateY(24px);transition:opacity var(--sl-dur-slow) var(--sl-ease-out),transform var(--sl-dur-slow) var(--sl-ease-out)}
.sl-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .sl-reveal{opacity:1;transform:none}
}

/* 16. Utilities ---------------------------------------------------------- */
.sl-visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sl-divider{height:1px;background:var(--sl-fog);border:0;margin:0}

/* 17. Breakpoints: 1068 / 734 -------------------------------------------- */
@media (max-width:1068px){
  .sl-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:734px){
  :root{--sl-radius-card:18px}
  .sl-grid-2,.sl-grid-3,.sl-grid-4{grid-template-columns:minmax(0,1fr)}
  .sl-nav__links{display:none}
  .sl-nav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .sl-footer__cols{grid-template-columns:minmax(0,1fr)}
  .sl-hero__actions{flex-direction:column}
}

/* 18. WordPress block bridges (child theme) ------------------------------ */
.wp-block-button.is-style-secondary .wp-block-button__link{background:var(--sl-ink);color:var(--sl-white)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--sl-link);border:0;box-shadow:inset 0 0 0 1px var(--sl-blue)}
.wp-block-button.is-style-link .wp-block-button__link{background:none;padding:0;color:var(--sl-link);font-weight:400}
.sl-dark .wp-block-button.is-style-link .wp-block-button__link,.has-black-background-color .wp-block-button.is-style-link .wp-block-button__link{color:var(--sl-link-on-dark)}
.has-black-background-color .wp-block-button.is-style-secondary .wp-block-button__link{background:var(--sl-white);color:var(--sl-ink)}
.wp-block-group.is-style-tile{background:var(--sl-cloud);border-radius:var(--sl-radius-card);padding:clamp(40px,5vw,64px) clamp(24px,4vw,48px)}
.wp-block-details.sl-faq-item{border-bottom:1px solid var(--sl-fog);padding:var(--sl-space-5) 0}
.wp-block-details.sl-faq-item summary{font-family:var(--sl-font-display);font-size:var(--sl-fs-h4);font-weight:500}