/* Pastel Startup Aesthetic variables */
:root{
  --bg:#FAFAFD;
  --surface:#FFFFFF;
  --surface-alt:#F6F7FB;
  --text:#0F172A;
  --text-sub:#475569;
  --p-blue:#CDE6FF;
  --p-mint:#D9F5EE;
  --p-lav:#E3DDFF;
  --p-peach:#FFE7D8;
  --p-sand:#F3EEDC;
  --primary:#1E8AF7;
  --primary-pressed:#1667D8;
  --primary-soft:#EAF3FF;
  --accent:#27C3A8;

  /*
    Additional brand palette variables from the updated design spec.  These
    values unify all new components – plan cards, badges and focus rings – under
    a consistent palette. They do not override the existing p‑colors but may be
    referenced by new classes added below.
  */
  --mint:#27C3A8;
  --mint-soft:#E9FBF7;
  --lav:#8C79F8;
  --lav-soft:#F3F0FF;
  /* focus ring colour used for accessibility focus states */
  --ring:#93C5FD;
  /* neutral border colour for cards and accents */
  --border:#E2E8F0;
  /* soft shadow for card elevations */
  --shadow:0 10px 30px rgba(30,138,247,0.08);
}
html{box-sizing:border-box;scroll-behavior:smooth;}
*,*::before,*::after{box-sizing:inherit;}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 24px;}
.site-header{position:sticky;top:0;width:100%;background:rgba(250,250,253,0.8);backdrop-filter:saturate(180%) blur(10px);z-index:100;border-bottom:1px solid rgba(221,225,230,0.5);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 24px;}
.logo{font-family:'DM Serif Display', serif;font-size:1.5rem;color:var(--text);white-space:nowrap;}
.main-nav ul{list-style:none;padding:0;margin:0;display:flex;gap:1.5rem;}
.main-nav a{color:var(--text);font-weight:500;}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:0;cursor:pointer;}
.nav-toggle span{width:20px;height:2px;background:var(--text);border-radius:1px;}
.cta-buttons{display:flex;gap:0.75rem;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.25rem;border-radius:999px;font-weight:600;font-size:0.9rem;transition:background 0.2s;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-pressed);}
.btn-ghost{background:var(--primary-soft);color:var(--primary);}
.btn-ghost:hover{background:var(--primary);color:#fff;}
.hero{background:var(--p-sand);padding:6rem 0 3rem;position:relative;overflow:hidden;}
.hero .wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
.hero .eyebrow{letter-spacing:0.12em;font-size:0.8rem;color:var(--text-sub);text-transform:uppercase;margin-bottom:0.5rem;}
.hero h1{font-family:'DM Serif Display', serif;font-size:clamp(2.5rem,6vw,4rem);line-height:1.1;margin:0;}
.hero .sub{font-size:1.1rem;color:var(--text-sub);margin:0.75rem 0 1.5rem;}
.device-mock{margin-top:2rem;text-align:center;}
.device-mock img{width:100%;max-width:900px;height:auto;border-radius:24px;box-shadow:0 20px 60px rgba(15,23,42,0.15);}
.trusted{background:var(--surface);padding:3rem 0;text-align:center;}
.trusted h2{margin-bottom:1.5rem;font-family:'DM Serif Display', serif;font-size:2rem;}
.trusted .logos{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;}
.trusted .logos img{width:120px;height:auto;opacity:0.7;}
.agents{padding:4rem 0;}
.agents h2{text-align:center;font-family:'DM Serif Display', serif;font-size:2.2rem;margin-bottom:2rem;}
.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.agent-card{background:var(--surface);border-radius:1rem;box-shadow:0 8px 24px rgba(15,23,42,0.07);padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;}
.agent-card h3{font-family:'DM Serif Display', serif;font-size:1.5rem;margin-top:0;}
.agent-card p{color:var(--text-sub);flex-grow:1;}
.agent-card a.btn{align-self:flex-start;margin-top:1rem;}
.workflow{background:var(--p-blue);padding:4rem 0;}
.workflow .wrap{display:flex;flex-direction:column;align-items:center;}
.workflow h2{font-family:'DM Serif Display', serif;font-size:2rem;margin-bottom:1rem;}
.workflow p{max-width:600px;text-align:center;color:var(--text-sub);}
.workflow img{width:100%;max-width:800px;margin-top:2rem;border-radius:1rem;box-shadow:0 12px 32px rgba(15,23,42,0.1);}
.tiers{padding:4rem 0;background:var(--surface);}
.tiers h2{text-align:center;font-family:'DM Serif Display', serif;font-size:2rem;margin-bottom:2rem;}
.tier-table{overflow-x:auto;}
.tier-table table{width:100%;border-collapse:collapse;min-width:800px;}
.tier-table th, .tier-table td{padding:0.75rem 1rem;border:1px solid var(--surface-alt);text-align:left;font-size:0.9rem;}
.tier-table th{background:var(--surface-alt);font-weight:600;}
.tier-table td{background:var(--surface);}
.tier-table td:first-child{font-weight:600;}
.tier-table tr:nth-child(even) td{background:var(--surface-alt);}
.faq{padding:4rem 0;background:var(--p-lav);}
.faq h2{text-align:center;font-family:'DM Serif Display', serif;margin-bottom:2rem;}
.faq-item{background:var(--surface);border-radius:0.75rem;margin-bottom:1rem;box-shadow:0 4px 12px rgba(15,23,42,0.05);}
.faq-item summary{cursor:pointer;padding:1rem 1.25rem;font-weight:600;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:after{content:'+';float:right;}
.faq-item[open] summary:after{content:'–';}
.faq-item div{padding:0 1.25rem 1rem;color:var(--text-sub);}
.site-footer{background:var(--surface-alt);padding:2rem 0;}
.site-footer .container{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;}
.site-footer nav ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1rem;}
.site-footer small{color:var(--text-sub);}
@media (max-width:768px){
  .main-nav ul{display:none;position:absolute;top:100%;right:1rem;background:var(--surface);border-radius:0.75rem;box-shadow:0 8px 20px rgba(0,0,0,0.1);flex-direction:column;padding:1rem;z-index:200;}
  .main-nav.open ul{display:flex;}
  .nav-toggle{display:flex;}
  .cta-buttons{display:none;}
}

/*
  ---------------------------------------------------------------------
  New utility classes and component styles
  These definitions support the simplified plan grid, FAQ cards and
  colour accents requested in the site refresh.  They mirror the
  variables defined at the top of this file and avoid affecting
  existing components unless explicitly applied via class names.
*/

/* Unified primary button style.  Applies to both <button> and <a> when
   given the btn‑primary class.  Uses a 10px radius rather than the
   pill‑shaped 999px radius defined earlier, making calls to action
   feel consistent across the site. */
.button-primary,
.btn-primary,
a.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow);
}
.button-primary:hover,
.btn-primary:hover,
a.btn-primary:hover {
  background: var(--primary-pressed);
}
.button-primary:focus-visible,
.btn-primary:focus-visible,
a.btn-primary:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Responsive grid for service tiers.  Cards will wrap nicely on small
   screens while maintaining minimum widths to prevent crowding. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 2rem;
}

/* Individual plan cards with a soft border and shadow.  The heading uses
   the serif display typeface already loaded by the site. */
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.plan-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  font-family: 'DM Serif Display', serif;
}
.plan-meta {
  color: var(--text-sub);
  font-size: .95rem;
  margin-bottom: 12px;
}
.plan-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 12px;
}
.plan-bullets {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.plan-bullets li {
  list-style: none;
  padding-left: 0;
}
.plan-cta {
  margin-top: 16px;
}

/* Filled FAQ card styling used to add subtle colour behind answers. */
.faq-card {
  background: var(--primary-soft);
  border: 1px solid #D7E6FF;
  border-radius: 12px;
  padding: 20px;
}

/* Section background alternative.  When applied to a <section>, this
   adds a very light tone to break up large white sections without
   overwhelming the design. */
.section-alt {
  background: var(--surface-alt);
}

/* Pill‑style accent badge for highlighting small bits of information. */
.accent-badge {
  background: var(--mint-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 600;
  display: inline-block;
}