/* global React, AssessmentDashboard */

/* ============================================================
   AI READINESS ASSESSMENT — Subpage
   Destination for the "Free Assessment" CTA on Transform365.
   Matches the homepage's stacked-section cream/navy/orange system.
   ============================================================ */

function AssessmentPage({ accent, motion }) {
  const cssVars = { "--accent": accent };
  return (
    <div
      className={"araPage " + (motion ? "has-motion" : "no-motion")}
      style={cssVars}
      data-screen-label="AI Readiness Assessment · Subpage"
    >
      <style>{araStyles}</style>
      <ARANav />
      <ARAHero />
      <ARAProblem />
      <ARAPullQuote />
      <ARADomains />
      <ARAProcess />
      <ARADeliverable />
      <ARAWhoFor />
      <ARACost />
      <ARAFAQ />
      <ARAFinalCTA />
      <ARAFooter />
    </div>
  );
}

/* ── NAV ────────────────────────────────────────────────── */
function ARANav() {
  return (
    <nav className="ara-nav">
      <div className="ara-nav-inner">
        <a href="/" className="ara-nav-brand">
          <span>Ideal State</span>
          <span className="ara-nav-divider">/</span>
          <span className="ara-nav-product">Transform365<sup className="ara-tm">™</sup></span>
        </a>
        <div className="ara-nav-links"></div>
        <a href="#book" className="ara-nav-cta">
          Get your free assessment
          <span className="arrow" aria-hidden="true">→</span>
        </a>
      </div>
    </nav>
  );
}

/* ── HERO ───────────────────────────────────────────────── */
function ARAHero() {
  return (
    <section className="ara-hero">
      <div className="ara-hero-grid">
        <div className="ara-hero-l">
          <div className="ara-eyebrow">
            <span className="dot" />
            <span>Free · Five business days · No tenant access required</span>
          </div>

          <h1 className="ara-headline">
            <span>Is your M365 environment</span>
            <span>ready for <em className="ed-italic accent">AI</em>&nbsp;?</span>
          </h1>

          <p className="ara-lede">
            A free, evidence-based assessment that scores your Microsoft 365 environment
            across <strong>five domains</strong>, and tells you exactly what to do next.
          </p>

          <p className="ara-lede ara-lede-2">
            Built for organizations considering, planning, or stalled on a Copilot rollout.
            Run on your <em className="ed-italic">actual</em> tenant data, not a questionnaire.
          </p>

          <div className="ara-cta-row">
            <a href="#book" className="ara-cta primary">
              Get your free assessment
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
            </a>
            <a href="#deliverable" className="ara-cta ghost">See sample dashboard</a>
          </div>

          <div className="ara-hero-stats">
            <div>
              <div className="v">5</div>
              <div className="l">domains scored</div>
            </div>
            <div>
              <div className="v">25</div>
              <div className="l">indicators · evidence</div>
            </div>
            <div>
              <div className="v">3</div>
              <div className="l">quick wins, every time</div>
            </div>
            <div>
              <div className="v">$0</div>
              <div className="l">no strings attached</div>
            </div>
          </div>
        </div>

        <div className="ara-hero-r">
          <AssessmentDashboard />
          <div className="ara-hero-r-cap">
            Sample deliverable &middot; the actual single-page dashboard your leadership receives
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── PROBLEM (compact, no fear) ─────────────────────────── */
function ARAProblem() {
  return (
    <section className="ara-problem">
      <div className="ara-section-inner">
        <div className="ara-problem-grid">
          <div>
            <span className="ara-eyebrow-line">The problem</span>
            <h2 className="ara-h2">
              AI doesn't fix content chaos.<br/>It <em className="ed-italic">amplifies</em> it.
            </h2>
          </div>
          <div>
            <p className="ara-lede sm">
              The health of your SharePoint environment matters more than ever. Oversharing,
              stale content, and a messy architecture will create AI roadblocks you never
              knew existed.
            </p>
            <p className="ara-lede sm ara-lede-2">
              Most organizations don't discover this until after they've invested in AI.
              The assessment surfaces potential issues in days, not months, with steps you
              can take today.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── PULL QUOTE ─────────────────────────────────────────── */
function ARAPullQuote() {
  return (
    <section className="ara-pullquote">
      <div className="ara-pullquote-inner">
        <p className="ara-pq-text">&ldquo;It&rsquo;s like an MRI for your M365 environment.&rdquo;</p>
        <div className="ara-pq-attr">Recent assessment recipient</div>
      </div>
    </section>
  );
}

/* ── FIVE DOMAINS ───────────────────────────────────────── */
function ARADomains() {
  const domains = [
    {
      n: "01",
      h: "Identity &amp; Access",
      q: "Who can sign in, with what proofs",
      b: "MFA coverage, Conditional Access maturity, external collaboration posture, admin role minimization.",
    },
    {
      n: "02",
      h: "Sensitivity &amp; Oversharing",
      q: "What AI is allowed to read",
      b: "Sensitivity labels, container labels, sharing defaults, anonymous link governance, DLP baseline. The single biggest determinant of Copilot value vs. Copilot problems.",
    },
    {
      n: "03",
      h: "Sprawl &amp; Lifecycle",
      q: "What AI will read when you turn it on",
      b: "Site and Team sprawl, lifecycle and retention policies, ownership clarity, naming taxonomy. Stale content is the quiet drag on AI quality.",
    },
    {
      n: "04",
      h: "AI Governance",
      q: "Is AI governed by intent, not accident",
      b: "AI app inventory, Teams app install policy, Copilot in meetings governance, AI policy state, audit log baseline.",
    },
    {
      n: "05",
      h: "Adoption &amp; Readiness",
      q: "Are your people ready",
      b: "Workload adoption, executive sponsorship, AI vision concreteness, change management capacity, and an equity lens on who gets AI tools.",
    },
  ];
  return (
    <section className="ara-domains" id="domains">
      <div className="ara-section-inner">
        <div className="ara-domains-head">
          <span className="ara-eyebrow-line">What gets scored</span>
          <h2 className="ara-h2">
            Five domains.<br/>
            <em className="ed-italic accent">Each</em> answers one question.
          </h2>
          <p className="ara-lede sm">
            The five-domain, 25-indicator assessment covers every key AI prerequisite.
            Each finding is presented in jargon-free language with one goal: establish
            a secure, future-proof AI foundation.
          </p>
        </div>

        <div className="ara-dom-grid">
          {domains.map((d, i) => (
            <article key={i} className={"ara-dom " + (d.featured ? "featured" : "")}>
              <div className="ara-dom-h">
                <span className="num">{d.n}</span>
                <span className="lbl">DOMAIN</span>
              </div>
              <h3 className="ara-dom-title" dangerouslySetInnerHTML={{__html: d.h}} />
              <div className="ara-dom-q">{d.q}</div>
              <p className="ara-dom-b">{d.b}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── PROCESS ────────────────────────────────────────────── */
function ARAProcess() {
  const steps = [
    {
      n: "01",
      t: "Discovery call",
      d: "60 minutes",
      b: "A structured conversation covering AI vision, current environment, governance, use cases, and content landscape. We surface the qualitative signals data alone can't capture.",
    },
    {
      n: "02",
      t: "Data collection",
      d: "Self-service",
      b: "Your IT team runs a scripted data export on your M365 tenant. No changes made. We never need admin access and don't collect any personally identifiable information (PII).",
    },
    {
      n: "03",
      t: "Scoring &amp; analysis",
      d: "Two business days",
      b: "We score 25 indicators across five domains, generate findings ranked by severity, identify three quick wins, and determine the recommended path based on your unique organizational profile and M365 environment.",
    },
    {
      n: "04",
      t: "Dashboard delivery",
      d: "End of week",
      b: "A single-page AI Readiness Dashboard designed for an executive audience. Contains a high-level summary and in-depth details on each finding.",
    },
    {
      n: "05",
      t: "Readout meeting",
      d: "30 to 45 minutes",
      b: "A senior Ideal State consultant walks through the dashboard with you. What's strong, what needs work, and what to do about it. You leave with the report, your questions answered, and three things you can fix immediately.",
    },
  ];
  return (
    <section className="ara-process" id="process">
      <div className="ara-section-inner">
        <div className="ara-process-head">
          <span className="ara-eyebrow-line">How it works</span>
          <h2 className="ara-h2">
            One discovery call.<br/>
            <em className="ed-italic">One</em> week. One dashboard.
          </h2>
        </div>

        <ol className="ara-steps">
          {steps.map((s, i) => (
            <li className="ara-step" key={i}>
              <div className="ara-step-n">{s.n}</div>
              <div className="ara-step-body">
                <h3 className="ara-step-t" dangerouslySetInnerHTML={{__html: s.t}} />
                <div className="ara-step-d">{s.d}</div>
                <p className="ara-step-b" dangerouslySetInnerHTML={{__html: s.b}} />
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ── DELIVERABLE (the showcase) ─────────────────────────── */
function ARADeliverable() {
  return (
    <section className="ara-deliverable" id="deliverable">
      <div className="ara-section-inner">
        <div className="ara-del-head">
          <span className="ara-eyebrow-line dark">The deliverable</span>
          <h2 className="ara-h2 on-dark">
            A dashboard that shows the<br/>whole picture,<br/>in one <em className="ed-italic accent">simple</em> view.
          </h2>
          <p className="ara-body on-dark">
            Composite score, five domain scores with evidence, top findings ranked by
            severity, three quick wins, and a recommended acceleration path tailored to
            your organization.
          </p>
        </div>

        <div className="ara-del-stage">
          <AssessmentDashboard />
        </div>

        {/* callouts removed - dashboard speaks for itself */}
      </div>
    </section>
  );
}

/* ── WHO IT'S FOR ───────────────────────────────────────── */
function ARAWhoFor() {
  const triggers = [
    "You purchased Copilot licenses and adoption stalled.",
    "Your board is asking about AI and you don't have a clear answer.",
    "Staff are using ChatGPT and Claude and you have no visibility.",
    "You've drafted an AI policy three times and never finalized it.",
    "Your IT team is small and carrying the weight of everything.",
    "You want to know if you're ready before you spend.",
  ];
  return (
    <section className="ara-who">
      <div className="ara-section-inner">
        <div className="ara-who-grid">
          <div>
            <span className="ara-eyebrow-line">Who it's for</span>
            <h2 className="ara-h2">
              If any of these<br/>
              sound <em className="ed-italic accent">familiar</em>&hellip;
            </h2>
            <p className="ara-body">
              Built for CXOs at organizations using Microsoft 365 with 100 to 5,000
              employees who are exploring or have stalled on an AI rollout.
            </p>
          </div>
          <ul className="ara-trig">
            {triggers.map((t, i) => (
              <li key={i}>
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <span className="t">{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ── COST ───────────────────────────────────────────────── */
function ARACost() {
  return (
    <section className="ara-cost">
      <div className="ara-section-inner">
        <div className="ara-cost-card">
          <div className="ara-cost-l">
            <span className="ara-eyebrow-line">What it costs</span>
            <div className="ara-cost-price">
              <span className="amt">Free</span>
              <span className="strike">$3,000+</span>
            </div>
            <p className="ara-body">
              No credit card. No commitment to follow-on work. If the findings reveal work you'd like help with, we'll scope it together. If it doesn't, you walk away with a clear picture and three things you can fix today.
            </p>
          </div>
          <div className="ara-cost-r">
            <ul>
              <li><span className="ck">✓</span> One discovery call</li>
              <li><span className="ck">✓</span> Self-service data collection</li>
              <li><span className="ck">✓</span> 25-indicator scoring</li>
              <li><span className="ck">✓</span> Single-page dashboard</li>
              <li><span className="ck">✓</span> Live readout meeting</li>
              <li><span className="ck">✓</span> Three quick wins, every time</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── FAQ ────────────────────────────────────────────────── */
function ARAFAQ() {
  const faqs = [
    {
      q: "Do you need access to our tenant?",
      a: "No. Your IT resource runs a provided PowerShell script on your own systems and shares the export. We never receive admin credentials or access to the tenant itself. A manual export path is available for organizations that can't run scripts.",
    },
    {
      q: "How long does the whole thing take?",
      a: "About one calendar week from kickoff to readout. The discovery call is 60 minutes; data collection is roughly an hour of your IT team's time; scoring takes us two business days; the readout is 30 to 45 minutes.",
    },
    {
      q: "What happens after the assessment?",
      a: "You own the dashboard. You can act on the quick wins yourself as many organizations do. If the findings point to deeper work, we'll walk through how Ideal State could help and you decide if and how to engage.",
    },
    {
      q: "Is this really free? What's the catch?",
      a: "It's really free. The honest answer: most organizations who go through the assessment land in Foundational tier and want help closing the gaps. A handful don't, and walk away with a clear picture. Either outcome is fine with us.",
    },
    {
      q: "How is this different from a Microsoft FastTrack assessment?",
      a: "FastTrack is excellent for technical deployment readiness. Our assessment is calibrated specifically for organizations looking to build AI capability, not just roll out tools. We use a human-centered, value creation lens that sets you up to become a truly AI-powered organization.",
    },
    {
      q: "We're a 60-person organization. Are we too small?",
      a: "Not at all. While we specialize in organizations upwards of 100 people, the assessment can benefit groups as small as 25 people. Smaller organizations often have a less complicated environment, making it easier to become truly AI-capable.",
    },
  ];
  return (
    <section className="ara-faq" id="faq">
      <div className="ara-section-inner">
        <div className="ara-faq-head">
          <span className="ara-eyebrow-line">FAQ</span>
          <h2 className="ara-h2">
            Questions we hear<br/>
            <em className="ed-italic">every</em> week.
          </h2>
        </div>
        <div className="ara-faq-list">
          {faqs.map((f, i) => (
            <details key={i} className="ara-faq-item" {...(i === 0 ? {open: true} : {})}>
              <summary>
                <span>{f.q}</span>
                <span className="plus" aria-hidden="true">+</span>
              </summary>
              <p>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── FINAL CTA ──────────────────────────────────────────── */
function ARAFinalCTA() {
  return (
    <section className="ara-final" id="book">
      <div className="ara-section-inner">
        <div className="ara-final-grid">
          <div>
            <span className="ara-eyebrow-line">Get your score</span>
            <h2 className="ara-h2 huge">
              Get started <em className="ed-italic accent">today</em>.
            </h2>
          </div>
          <div className="ara-final-r">
            <p className="ara-body big">
              One discovery meeting and one data export is all we need. Five business
              days from kickoff to a single-page dashboard your leadership can act on.
              No strings or hidden fees.
            </p>

            <form className="ara-form" onSubmit={(e) => e.preventDefault()}>
              <div className="ara-form-row">
                <label>
                  <span>Name</span>
                  <input type="text" placeholder="Your name" />
                </label>
                <label>
                  <span>Work email</span>
                  <input type="email" placeholder="you@org.org" />
                </label>
              </div>
              <div className="ara-form-row">
                <label>
                  <span>Organization</span>
                  <input type="text" placeholder="Your organization" />
                </label>
                <label>
                  <span>Staff size</span>
                  <select defaultValue="">
                    <option value="" disabled>Select a range</option>
                    <option>Under 50</option>
                    <option>50 to 150</option>
                    <option>150 to 500</option>
                    <option>500+</option>
                  </select>
                </label>
              </div>
              <label className="ara-form-full">
                <span>What's prompting this? (optional)</span>
                <textarea rows="3" placeholder="Stalled Copilot rollout, board pressure, AI policy in draft&hellip;"></textarea>
              </label>
              <div className="ara-form-cta">
                <button type="submit" className="ara-cta primary big">
                  Book my assessment
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                </button>
                <span className="ara-form-note">We respond within one business day.</span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── FOOTER ─────────────────────────────────────────────── */
function ARAFooter() {
  return (
    <footer className="ara-footer">
      <div className="ara-section-inner">
        <div className="ara-footer-top">
          <div className="ara-footer-brand">
            <div className="ara-footer-logo">
              <img src="assets/idealstate-logo-white.png" alt="Ideal State" />
            </div>
            <p>Partners in human-centered digital transformation since 2016.</p>
            <a href="#book" className="ara-cta primary ara-footer-cta">
              Schedule a call
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
            </a>
          </div>
          <div className="ara-footer-cols">
            <div className="ara-footer-col">
              <h4>Ideal State</h4>
              <a href="#about">About</a>
              <a href="#contact">Contact</a>
              <a href="#insights">Insights</a>
            </div>
            <div className="ara-footer-col">
              <h4>Follow</h4>
              <div className="ara-footer-social">
                <a href="#linkedin" aria-label="LinkedIn" className="ara-footer-social-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
                </a>
                <a href="#x" aria-label="X" className="ara-footer-social-icon">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                </a>
              </div>
              <a href="mailto:transform365@idealstate.co" className="ara-footer-email">transform365@idealstate.co</a>
            </div>
          </div>
        </div>
        <div className="ara-footer-meta">
          <span>© 2026 Ideal State LLC. All Rights Reserved.</span>
          <span><a href="#terms">Terms</a> · <a href="#privacy">Privacy</a></span>
        </div>
      </div>
    </footer>
  );
}

window.AssessmentPage = AssessmentPage;

/* ─────────────────── STYLES ─────────────────── */
const araStyles = `
.araPage { background: var(--white); color: var(--navy); font-family: var(--font-body); }
.ara-section-inner { max-width: 1320px; margin: 0 auto; padding: 0 56px; }

.ed-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.ara-eyebrow-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.18em;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.ara-eyebrow-line.dark { color: var(--accent); }
.ara-eyebrow-line::before {
  content: "";
  display: inline-block;
  width: 30px; height: 8px;
  background:
    linear-gradient(currentColor, currentColor) top left / 30px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 16px 1.5px no-repeat;
  flex: 0 0 auto;
}

.ara-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--navy); margin: 0 0 28px;
  text-wrap: balance;
}
.ara-h2.huge { font-size: clamp(2.4rem, 4.8vw, 4.4rem); line-height: 1.02; }
.ara-h2.on-dark { color: var(--cream); }
.ara-h2 em, .ara-h2 .ed-italic, .ara-headline em, .ara-headline .ed-italic { color: var(--accent); }
.ara-h2 em.accent, .ara-h2 .ed-italic.accent { color: var(--accent); }
.ara-body { font-size: 1.13rem; line-height: 1.7; color: var(--gray); text-wrap: pretty; margin: 0 0 16px; }
.ara-body.big { font-size: 1.3rem; line-height: 1.6; color: var(--navy); }
.ara-body.on-dark { color: var(--cream); opacity: 0.86; max-width: 600px; }
.ara-body strong { color: var(--navy); font-weight: 600; }
.ara-lede { font-size: 1.3rem; line-height: 1.6; color: var(--gray); max-width: 600px; text-wrap: pretty; margin: 0; }
.ara-lede.sm { font-size: 1.16rem; max-width: 640px; }
.ara-lede em, .ara-body em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--navy); }
.ara-lede-2 { margin-top: 18px; }

/* NAV */
.ara-nav { background: var(--white); border-bottom: 1px solid var(--light-gray); position: sticky; top: 0; z-index: 50; }
.ara-nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 18px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.ara-nav-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--navy); letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; gap: 8px; text-decoration: none;
}
.ara-nav-divider { color: var(--accent); font-weight: 400; }
.ara-nav-product { color: var(--accent); }
.ara-tm { font-size: 0.55em; vertical-align: super; line-height: 0; margin-left: 1px; font-weight: 500; }
.ara-nav-links { display: flex; gap: 28px; }
.ara-nav-links a { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--navy); text-decoration: none; }
.ara-nav-links a:hover { color: var(--accent); }
.ara-nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 9999px;
  background: var(--accent); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-decoration: none; border: 2px solid var(--accent);
  transition: all 200ms;
}
.ara-nav-cta:hover { background: var(--navy); color: var(--white); border-color: var(--navy); gap: 14px; }

/* CTA */
.ara-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  text-decoration: none;
  padding: 16px 24px; border-radius: 9999px;
  transition: all 220ms cubic-bezier(0.2,0,0,1);
  border: 2px solid transparent; cursor: pointer;
}
.ara-cta.primary { background: var(--accent); color: var(--white); border-color: var(--accent); }
.ara-cta.primary:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-2px); }
.ara-cta.primary.big { padding: 20px 30px; font-size: 1.05rem; }
.ara-cta.ghost { background: transparent; color: var(--navy); border: 2px solid rgba(14,40,65,0.2); }
.ara-cta.ghost:hover { border-color: var(--navy); }

/* HERO */
.ara-hero { background: var(--cream); padding: 72px 0 96px; position: relative; }
.ara-hero-grid {
  max-width: 1320px; margin: 0 auto; padding: 0 56px;
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 64px; align-items: start;
}
.ara-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--navy);
}
.ara-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), white 70%);
}
.ara-headline {
  margin: 28px 0 32px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
  display: flex; flex-direction: column; gap: 4px;
}
.ara-headline em.accent { color: var(--accent); font-style: italic; font-weight: 400; }
.ara-cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ara-hero-stats {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(14,40,65,0.15);
  padding-top: 24px;
}
.ara-hero-stats > div {
  border-right: 1px solid rgba(14,40,65,0.12);
  padding: 0 18px;
}
.ara-hero-stats > div:first-child { padding-left: 0; }
.ara-hero-stats > div:last-child { border-right: none; }
.ara-hero-stats .v {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.2rem; color: var(--accent); line-height: 1;
  letter-spacing: -0.04em;
}
.ara-hero-stats .l {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; color: var(--gray);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-top: 8px;
}
.ara-hero-r { min-width: 0; }
.ara-hero-r-cap {
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.14em;
  text-align: center;
}

/* PROBLEM */
.ara-problem { background: var(--white); padding: 100px 0 80px; border-top: 1px solid var(--light-gray); }
.ara-problem-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.ara-problem-grid > div:first-child .ara-eyebrow-line,
.ara-who-grid > div:first-child .ara-eyebrow-line,
.ara-final-grid > div:first-child .ara-eyebrow-line { margin-bottom: 14px; }
.ara-problem-grid > div:last-child,
.ara-who-grid > div:last-child,
.ara-final-grid .ara-final-r { padding-top: 50px; }

/* PULL QUOTE */
.ara-pullquote { background: var(--cream); padding: 100px 0; border-top: 1px solid var(--light-gray); }
.ara-pullquote-inner { max-width: 1100px; margin: 0 auto; padding: 0 56px; text-align: center; }
.ara-pullquote .ara-pq-text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em;
  color: var(--navy); margin: 0; text-wrap: balance;
}
.ara-pullquote .ara-pq-attr {
  margin-top: 24px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray);
}
.ara-pullquote .ara-pq-attr::before { content: '—  '; color: var(--accent); }


/* DOMAINS */
.ara-domains { background: var(--white); padding: 80px 0 120px; }
.ara-domains-head { max-width: 880px; margin-bottom: 56px; }
.ara-dom-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--light-gray);
}
.ara-dom {
  padding: 32px 30px 36px;
  border-right: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  display: flex; flex-direction: column; gap: 10px;
  background: var(--white);
  transition: background 240ms;
  position: relative;
}
.ara-dom:hover { background: var(--cream); }
.ara-dom.featured { background: transparent; }
.ara-dom.featured::after { content: none; }
.ara-dom-h { display: flex; align-items: baseline; gap: 12px; }
.ara-dom-h .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.4rem; color: var(--accent); line-height: 1;
  letter-spacing: -0.04em;
}
.ara-dom-h .lbl {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.18em;
}
.ara-dom-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.4rem; color: var(--navy); margin: 4px 0 0;
  letter-spacing: -0.015em;
}
.ara-dom-q {
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; color: var(--accent);
}
.ara-dom-b {
  font-size: 1rem; line-height: 1.55; color: var(--gray);
  margin: 4px 0 0; text-wrap: pretty;
}

/* PROCESS */
.ara-process { background: var(--cream); padding: 120px 0; }
.ara-process-head { max-width: 880px; margin-bottom: 56px; }
.ara-steps { list-style: none; padding: 0; margin: 0;
  border-top: 2px solid var(--navy);
}
.ara-step {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(14,40,65,0.14);
  align-items: start;
}
.ara-step-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3rem; color: var(--accent); line-height: 1;
  letter-spacing: -0.04em;
}
.ara-step-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.6rem; color: var(--navy); margin: 0 0 4px;
  letter-spacing: -0.015em;
}
.ara-step-d {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.ara-step-b {
  font-size: 1.1rem; line-height: 1.6; color: var(--gray);
  margin: 0; max-width: 720px; text-wrap: pretty;
}

/* DELIVERABLE */
.ara-deliverable { background: var(--navy); padding: 120px 0; color: var(--cream); }
.ara-del-head { max-width: 700px; margin-bottom: 56px; }
.ara-del-stage {
  background: linear-gradient(180deg, rgba(255,107,53,0.06), transparent 50%);
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
}
.ara-del-callouts {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-left: 1px solid rgba(255,255,255,0.14);
}
.ara-callout {
  padding: 28px 28px 32px;
  border-right: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.ara-callout .lbl {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 10px;
}
.ara-callout p {
  font-size: 1rem; line-height: 1.55; color: var(--cream);
  opacity: 0.86; margin: 0; text-wrap: pretty;
}

/* WHO */
.ara-who { background: var(--white); padding: 120px 0; }
.ara-who-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.ara-trig { list-style: none; padding: 0; margin: 0;
  border-top: 2px solid var(--navy);
}
.ara-trig li {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid rgba(14,40,65,0.14);
  align-items: baseline;
}
.ara-trig .n {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; color: var(--soft-blue);
}
.ara-trig .t {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; color: var(--navy); line-height: 1.4;
}

/* COST */
.ara-cost { background: var(--cream); padding: 100px 0; }
.ara-cost-card {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  padding: 56px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 18px;
  align-items: center;
}
.ara-cost-price {
  display: flex; align-items: baseline; gap: 18px;
  margin: 12px 0 16px;
}
.ara-cost-price .amt {
  font-family: var(--font-display); font-weight: 700;
  font-size: 5.4rem; color: var(--accent); line-height: 1;
  letter-spacing: -0.04em;
}
.ara-cost-price .strike {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.4rem; color: var(--soft-blue);
  text-decoration: line-through;
}
.ara-cost-r ul { list-style: none; padding: 0; margin: 0; }
.ara-cost-r li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.05rem; color: var(--navy);
  border-bottom: 1px solid var(--light-gray);
}
.ara-cost-r li:last-child { border-bottom: none; }
.ara-cost-r .ck {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: var(--white);
  font-size: 12px; flex-shrink: 0;
}

/* FAQ */
.ara-faq { background: var(--white); padding: 120px 0; }
.ara-faq-head { max-width: 700px; margin-bottom: 48px; }
.ara-faq-list {
  border-top: 2px solid var(--navy);
}
.ara-faq-item {
  border-bottom: 1px solid var(--light-gray);
  padding: 0;
}
.ara-faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; color: var(--navy);
  letter-spacing: -0.01em;
}
.ara-faq-item summary::-webkit-details-marker { display: none; }
.ara-faq-item summary:hover { color: var(--accent); }
.ara-faq-item .plus {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.6rem; color: var(--accent);
  transition: transform 200ms;
  flex-shrink: 0;
}
.ara-faq-item[open] .plus { transform: rotate(45deg); }
.ara-faq-item p {
  font-size: 1.1rem; line-height: 1.7; color: var(--gray);
  margin: 0 0 28px; max-width: 820px; text-wrap: pretty;
}

/* FINAL CTA */
.ara-final { background: var(--cream); padding: 120px 0 140px; border-top: 1px solid var(--light-gray); }
.ara-final-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.ara-form {
  margin-top: 32px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  padding: 32px;
}
.ara-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
.ara-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.ara-form-full { margin-bottom: 16px; }
.ara-form input, .ara-form select, .ara-form textarea {
  font-family: var(--font-body); font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  transition: border-color 200ms;
  resize: vertical;
}
.ara-form input:focus, .ara-form select:focus, .ara-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.ara-form-cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 8px;
}
.ara-form-cta button {
  border: 2px solid var(--accent); background: var(--accent); color: var(--white);
  cursor: pointer;
}
.ara-form-note {
  font-family: var(--font-display); font-weight: 500;
  font-size: 12px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* FOOTER */
.ara-footer { background: var(--navy); color: var(--cream); padding: 80px 0 40px; }
.ara-footer-social { display: inline-flex; gap: 10px; margin-bottom: 14px; }
.ara-footer-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; color: var(--cream);
  transition: color 200ms;
}
.ara-footer-social-icon svg { width: 22px; height: 22px; }
.ara-footer-social-icon:hover { color: var(--accent); }
.ara-footer-email { display: block; font-size: 14px; color: var(--cream); text-decoration: none; }
.ara-footer-email:hover { color: var(--accent); }
.ara-footer-top {
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ara-footer-logo img { display: block; height: 96px; width: auto; }
.ara-footer-brand p {
  font-size: 0.96rem; color: var(--soft-blue); margin: 12px 0 0;
  max-width: 320px; line-height: 1.5;
}
.ara-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.ara-footer-col h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em;
  margin: 0 0 14px;
}
.ara-footer-col a {
  display: block; padding: 5px 0;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--cream); text-decoration: none; transition: color 200ms;
}
.ara-footer-col a:hover { color: var(--accent); }
.ara-footer-cta {
  margin-top: 20px;
  background: var(--accent); border-color: var(--accent); color: var(--white);
}
.ara-cta.primary.ara-footer-cta:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.ara-footer-meta {
  margin-top: 32px;
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: 12px;
  color: var(--soft-blue); letter-spacing: 0.04em;
}
.ara-footer-meta a { color: var(--soft-blue); margin: 0 6px; text-decoration: none; }
.ara-footer-meta a:hover { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ara-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ara-problem-grid, .ara-who-grid, .ara-final-grid { grid-template-columns: 1fr; gap: 32px; }
  .ara-dom-grid { grid-template-columns: repeat(2, 1fr); }
  .ara-del-callouts { grid-template-columns: repeat(2, 1fr); }
  .ara-cost-card { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .ara-footer-top { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .ara-section-inner, .ara-nav-inner, .ara-hero-grid { padding-left: 28px; padding-right: 28px; }
  .ara-hero-stats { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .ara-hero-stats > div { padding: 12px 14px; border-bottom: 1px solid rgba(14,40,65,0.12); }
  .ara-dom-grid, .ara-del-callouts { grid-template-columns: 1fr; }
  .ara-step { grid-template-columns: 1fr; gap: 12px; }
  .ara-form-row { grid-template-columns: 1fr; }
  .ara-nav-links { display: none; }
}
`;