/* ==========================================================================
   AI Search Optimisation - page styles for umarranks.com

   Everything is scoped to .uro-aio, so this file can be loaded site-wide
   without touching the theme header, footer or any other page.
   Fonts (Manrope + Inter) are already loaded by the theme.
   ========================================================================== */

/* ==========================================================================
   All styles are scoped to .uro-aio so nothing leaks into the theme
   header, footer or any other page. Tokens match umarranks.com.
   ========================================================================== */
.uro-aio{
  /* palette pulled from /ai-search-optimisation/ */
  --u-ink:#1D1A17;
  --u-ink-2:#3B342E;
  --u-muted:#645E58;
  --u-accent:#E85D3A;
  --u-accent-dark:#D24E2C;
  --u-accent-soft:#FBEAE4;
  --u-line:#E4E1DD;
  --u-white:#FFFFFF;
  --u-tint:#FBFAF7;
  --u-tint-2:#F6F3EF;
  --u-dark:#1D1A17;
  --u-green:#1FA463;
  --u-green-soft:#E7F5EE;
  --u-r-card:16px;
  --u-r-sm:16px;
  --u-in:1152px;

  /* break out of the theme's 700px constrained layout */
  max-width:none !important;
  width:auto;
  font-family:Inter,sans-serif;
  font-size:18px;
  line-height:1.6;
  color:var(--u-ink);
  -webkit-font-smoothing:antialiased;
}
/* full-bleed: cancel the theme's global root padding (same as .alignfull) */
.entry-content > .uro-aio{
  margin-left:calc(var(--wp--style--root--padding-left, 24px) * -1);
  margin-right:calc(var(--wp--style--root--padding-right, 24px) * -1);
}

/* ---- scoped reset ---- */
.uro-aio *,.uro-aio *::before,.uro-aio *::after{box-sizing:border-box}
.uro-aio h1,.uro-aio h2,.uro-aio h3,.uro-aio h4{
  font-family:Manrope,sans-serif;
  margin:0;font-weight:700;line-height:1.12;color:var(--u-ink);
}
.uro-aio p{margin:0}
.uro-aio ul{margin:0;padding:0;list-style:none}
.uro-aio li{margin:0}
.uro-aio a{color:inherit;text-decoration:none}
.uro-aio img,.uro-aio svg{display:block;max-width:100%}

/* ---- layout ---- */
.uro-sec{padding:clamp(48px,5.6vw,76px) 24px}
.uro-sec--tint{background:var(--u-tint)}
.uro-sec--white{background:var(--u-white)}
.uro-sec--soft{background:var(--u-tint-2)}
.uro-sec--dark{background:var(--u-dark)}
.uro-in{max-width:var(--u-in);margin:0 auto}

/* ---- type ---- */
.uro-aio h1{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.03em;line-height:1.12;margin:0 0 20px}
.uro-h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.015em}
.uro-aio .uro-eyebrow{
  font-family:Manrope,sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--u-accent);margin:0 0 14px;
}
.uro-aio .uro-lead{margin:0 0 28px;max-width:520px;color:var(--u-muted);font-size:18px;line-height:1.6}
.uro-rule{width:40px;height:3px;background:var(--u-accent);border-radius:2px;margin-top:16px}
.uro-head{margin-bottom:clamp(28px,3vw,44px)}

/* ---- buttons (pill, like the rest of the site) ---- */
.uro-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;
  font-family:Inter,sans-serif;font-size:16px;font-weight:600;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.uro-btn svg{width:16px;height:16px;flex:none}
.uro-cta .uro-btn,.uro-hero-cta .uro-btn{white-space:nowrap;flex:none}
.uro-btn--primary{background:var(--u-accent);color:#fff}
.uro-aio .uro-hero-cta .uro-btn--primary{background:#E85D3A;color:#FFFFFF}
.uro-btn--primary:hover{background:var(--u-accent-dark);color:#fff;transform:translateY(-1px)}
.uro-aio .uro-hero-cta .uro-btn--primary:hover{background:#D24E2C;color:#FFFFFF}
.uro-btn--ghost{background:var(--u-white);color:var(--u-ink);border-color:var(--u-line)}
.uro-btn--ghost:hover{border-color:var(--u-accent);color:var(--u-accent)}

/* ---- cards ---- */
.uro-card{background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-r-card)}
.uro-sec--white .uro-card{background:var(--u-tint)}
.uro-ic{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--u-accent-soft);color:var(--u-accent);
}
.uro-ic svg{width:23px;height:23px}
.uro-ic--sm{width:42px;height:42px}
.uro-ic--sm svg{width:19px;height:19px}

/* ==========================================================================
   HERO
   ========================================================================== */
.uro-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.uro-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:0}
.uro-aio .uro-hero-cta .uro-btn{padding:15px 30px;font-family:Manrope,sans-serif;font-size:16px;font-weight:700;gap:0}
.uro-aio .uro-hero-cta .uro-btn svg{display:none}
.uro-aio .uro-hero-cta .uro-btn--primary{background:#E85D3A;color:#FFFFFF}
.uro-aio .uro-hero-cta .uro-btn--ghost{background:transparent;color:#1D1A17;border-color:#E4E1DD}

.uro-diagram{position:relative;width:106%;max-width:590px;margin-left:auto;aspect-ratio:1.48/1;min-height:350px}
.uro-diagram .uro-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.uro-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:11px;
  background:var(--u-white);border:1px solid var(--u-line);border-radius:14px;
  padding:11px 16px;min-height:52px;white-space:nowrap;
  font-family:Inter,sans-serif;font-size:13px;font-weight:600;line-height:1.2;
}
.uro-node .uro-glyph{width:24px;height:24px;flex:none;object-fit:contain}
.uro-node .uro-brand-logo{display:block}
.uro-node .uro-google-ai-mark{width:23px;height:23px}
.uro-node .uro-tick{
  position:absolute;right:-8px;bottom:-8px;width:18px;height:18px;border-radius:50%;
  background:var(--u-green);color:#fff;display:grid;place-items:center;border:2px solid var(--u-white);
}
.uro-node .uro-tick svg{width:9px;height:9px}
.uro-node--c{
  width:116px;height:104px;justify-content:center;flex-direction:column;gap:1px;text-align:center;padding:0;
  border-radius:16px;border-color:var(--u-accent);
  font-family:Manrope,sans-serif;font-size:24px;font-weight:700;line-height:1.05;
}
.uro-node--c span{display:block;font-family:Inter,sans-serif;font-size:15px;font-weight:500;color:var(--u-ink-2);margin-top:5px}
.uro-n-center{left:50%;top:51%}
.uro-n-google{left:50%;top:9%;min-width:136px}
.uro-n-google span:not(.uro-tick){font-size:11.5px;line-height:1.15}
.uro-n-chatgpt{left:15%;top:43%;min-width:126px}
.uro-n-gemini{left:85%;top:44%;min-width:126px}
.uro-n-plex{left:25%;top:82%;min-width:132px}
.uro-n-copilot{left:75%;top:82%;min-width:132px}

/* ==========================================================================
   STATS + FEATURES
   ========================================================================== */
.uro-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:8px}
.uro-stat{display:flex;align-items:center;gap:18px;padding:30px 32px}
.uro-stat+.uro-stat{border-left:1px solid var(--u-line)}
.uro-stat .uro-num{font-family:Manrope,sans-serif;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1}
.uro-stat .uro-lbl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--u-ink-2);margin-left:10px}
.uro-stat .uro-desc{font-size:15px;color:var(--u-muted);margin-top:6px}

.uro-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uro-head--center{text-align:center}
.uro-head--center .uro-rule{margin-left:auto;margin-right:auto}
.uro-imp{display:flex;gap:16px;padding:24px}
.uro-imp h3{font-size:16px;line-height:1.3}
.uro-imp p{margin-top:9px;font-size:14px;color:var(--u-muted)}
.uro-feat{display:flex;gap:18px;padding:28px}
.uro-feat h3{font-size:18px}
.uro-feat p{margin-top:9px;font-size:15px;color:var(--u-muted)}

/* ==========================================================================
   WHY IT MATTERS
   ========================================================================== */
.uro-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.uro-why-top{display:flex;gap:16px;align-items:flex-start}
.uro-why h3{font-size:17px;line-height:1.3}
.uro-why p{margin-top:16px;margin-left:58px;padding-left:18px;border-left:2px solid var(--u-line);font-size:15px;color:var(--u-muted)}

/* ==========================================================================
   WHAT I IMPROVE
   ========================================================================== */
.uro-improve{display:grid;grid-template-columns:.85fr 2fr;gap:52px;align-items:start}
.uro-improve-intro p{margin-top:22px;color:var(--u-muted);font-size:17px;max-width:340px}
.uro-tailored{display:flex;gap:16px;align-items:center;margin-top:36px;padding-top:30px;border-top:1px solid var(--u-line)}
.uro-tailored p{font-size:15px;color:var(--u-muted)}
.uro-panel{
  border:1px solid var(--u-line);border-radius:var(--u-r-card);overflow:hidden;background:var(--u-line);
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
}
.uro-panel-item{background:var(--u-white);display:flex;gap:16px;padding:28px}
.uro-panel-item:last-child{grid-column:1/-1}
.uro-panel-item h3{font-size:17px}
.uro-panel-item p{margin-top:9px;font-size:15px;color:var(--u-muted)}

/* ==========================================================================
   PROCESS (dark)
   ========================================================================== */
.uro-sec--dark .uro-h2{color:#fff}
.uro-sec--dark{padding:clamp(44px,5.2vw,72px) 24px}
.uro-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;align-items:start}
.uro-process-intro{padding-right:28px;border-right:1px solid rgba(255,255,255,.14)}
.uro-process-intro h2{color:#fff;font-size:clamp(22px,2.3vw,28px);line-height:1.15;letter-spacing:-.02em}
.uro-process-intro p{margin-top:14px;font-size:14.5px;line-height:1.6;color:#A9A29B}
.uro-step{display:block}
.uro-step .uro-n{font-family:Manrope,sans-serif;font-size:34px;font-weight:700;color:var(--u-accent);letter-spacing:-.03em;line-height:1}
.uro-step h3{margin-top:14px;font-size:16px;color:#fff}
.uro-step p{margin-top:9px;font-size:14px;color:#A9A29B;max-width:290px}
.uro-arrow{display:none}

/* ==========================================================================
   PROOF
   ========================================================================== */
.uro-proof-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.uro-proof-head h2{font-size:clamp(24px,2.7vw,34px)}
.uro-proof-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uro-pcard{display:flex;gap:18px;padding:26px}
.uro-pcard .big{font-family:Manrope,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.uro-pcard .cap{margin-top:7px;font-size:14.5px;font-weight:600;color:var(--u-ink-2);line-height:1.35}
.uro-pcard p{margin-top:8px;font-size:13.5px;color:var(--u-muted)}

/* ==========================================================================
   FIT / NOT A FIT
   ========================================================================== */
.uro-g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.uro-fit{padding:32px 34px}
.uro-fit-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.uro-fit-head h3{font-size:21px}
.uro-badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.uro-badge--g{background:var(--u-green)}
.uro-badge--r{background:var(--u-accent)}
.uro-badge svg{width:15px;height:15px}
.uro-fit li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--u-ink-2);padding:9px 0}
.uro-fit li svg{width:18px;height:18px;flex:none;margin-top:3px}
.uro-fit--yes li svg{color:var(--u-green)}
.uro-fit--no li svg{color:var(--u-accent)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.uro-faq{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start}
.uro-q{background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-r-sm);overflow:hidden}
.uro-sec--white .uro-q{background:var(--u-tint)}
.uro-q summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 22px;font-family:Manrope,sans-serif;font-size:17px;font-weight:600;
}
.uro-q summary::-webkit-details-marker{display:none}
.uro-q summary svg{width:16px;height:16px;color:var(--u-muted);flex:none;transition:transform .25s ease}
.uro-q[open] summary{color:var(--u-accent)}
.uro-q[open] summary svg{transform:rotate(180deg);color:var(--u-accent)}
.uro-q .uro-a{padding:0 22px 22px;font-size:15px;color:var(--u-muted)}

/* ==========================================================================
   CTA
   ========================================================================== */
.uro-cta-section{padding:clamp(44px,5.2vw,72px) 24px}
.uro-cta{
  display:flex;align-items:center;gap:26px;max-width:var(--u-in);margin:0 auto;
  background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-r-card);
  padding:28px 32px;
}
.uro-cta .uro-ic{width:66px;height:66px}
.uro-cta .uro-ic svg{width:29px;height:29px}
.uro-cta h2{font-size:clamp(20px,2.3vw,27px);letter-spacing:-.015em}
.uro-cta p{margin-top:8px;font-size:15px;color:var(--u-muted)}
.uro-cta .uro-sp{flex:1}
.uro-aio .uro-cta .uro-btn--primary{
  padding:14px 26px;font-size:15.5px;font-weight:600;background:#E85D3A;color:#FFFFFF
}
.uro-aio .uro-cta .uro-btn--primary:hover{background:#E85D3A;color:#FFFFFF}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .uro-g3{grid-template-columns:1fr 1fr}
  .uro-hero-grid{grid-template-columns:1fr;gap:44px}
  .uro-steps{grid-template-columns:1fr 1fr;gap:30px}
  .uro-process-intro{grid-column:1/-1;border-right:0;padding-right:0;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
  .uro-diagram{width:100%;margin:0 auto}
  .uro-improve{grid-template-columns:1fr;gap:36px}
  .uro-g4{grid-template-columns:repeat(2,1fr);gap:28px 32px}
}
@media (max-width:860px){
  .uro-g3,.uro-g2,.uro-faq,.uro-proof-cards{grid-template-columns:1fr}
  .uro-proof-head{flex-direction:column;align-items:flex-start;gap:16px}
  .uro-stats{grid-template-columns:1fr}
  .uro-stat+.uro-stat{border-left:0;border-top:1px solid var(--u-line)}
  .uro-panel{grid-template-columns:1fr}
  .uro-panel-item:last-child{grid-column:auto}
  .uro-arrow{display:none}
  .uro-step p{max-width:none}
  .uro-cta{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .uro-sec{padding:44px 20px}
  .uro-cta-section{padding:40px 20px}
  .uro-steps{grid-template-columns:1fr}
  .uro-g4{grid-template-columns:1fr}
  .uro-hero-cta .uro-btn{width:100%;justify-content:center}
  .uro-fit{padding:26px 24px}
}

/* --------------------------------------------------------------------------
   OPTIONAL: hides the theme's page-title heading on this page only, so the
   hero H1 is the single H1. Delete this rule if you switch the page to the
   "No title" template instead (recommended, see notes).
   -------------------------------------------------------------------------- */
.page-id-212 .hostinger-ai-page-title{display:none}