/* OfficialService marketing site — built on top of app.css's tokens
   (--bg/--panel/--ink/--mut/--line/--primary/--accent/--danger), adding
   only what the marketing pages need. Deliberately no web-font import:
   the system font stack keeps this page fast (see homepage performance
   requirements) — hierarchy comes from weight/size/spacing instead. */

:root{
  --mkt-ink-2:#33365c;
  --mkt-hero-a:#4338ca; --mkt-hero-b:#6d28d9; --mkt-hero-c:#0ea5e9;
  --mkt-section-y:96px;
  --mkt-radius-lg:20px;
  --mkt-shadow:0 1px 2px rgba(23,25,60,.04), 0 16px 40px -20px rgba(23,25,60,.18);
  --mkt-shadow-sm:0 1px 2px rgba(23,25,60,.05), 0 6px 16px -8px rgba(23,25,60,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --mkt-ink-2:#c7c9e8; }
}
:root[data-theme="dark"]{ --mkt-ink-2:#c7c9e8; }

.mkt{overflow-x:hidden}
.mkt .wrap{max-width:1180px}
.mkt section{padding:var(--mkt-section-y) 0}
.mkt section.tight{padding:56px 0}
.mkt h2.section-h{
  font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.02em;
  margin:0 0 10px; text-wrap:balance;
}
.mkt p.section-sub{color:var(--mut); font-size:1.05rem; max-width:60ch; margin:0 0 44px}
.mkt .eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--primary); margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.mkt .eyebrow::before{content:"";width:16px;height:2px;background:var(--primary);display:inline-block;border-radius:2px}

/* ---------- Header ---------- */
.mkt-header{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.mkt-header .bar{display:flex; align-items:center; gap:28px; padding:14px 0}
.mkt-header .brand{font-weight:800; font-size:1.2rem; color:var(--ink); flex:none; display:flex; align-items:center; gap:9px}
.mkt-header .brand img{width:26px;height:26px;border-radius:7px}
.mkt-header .brand span{color:var(--primary)}
.mkt-nav{display:flex; align-items:center; gap:22px; font-size:.92rem; font-weight:600; flex:1}
.mkt-nav a{color:var(--ink)}
.mkt-nav a:hover{color:var(--primary); text-decoration:none}
.mkt-drop{position:relative}
.mkt-drop > button{
  font:inherit; font-weight:600; color:var(--ink); background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:5px; padding:8px 0;
}
.mkt-drop > button::after{content:"";width:7px;height:7px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.mkt-drop:hover > button::after, .mkt-drop.open > button::after{transform:rotate(-135deg);margin-top:2px}
.mkt-drop-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--mkt-shadow);
  padding:10px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2px; width:420px;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(4px); transition:opacity .15s, transform .15s;
}
.mkt-drop:hover .mkt-drop-panel, .mkt-drop.open .mkt-drop-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.mkt-drop-panel a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:9px; font-weight:600;
}
.mkt-drop-panel a:hover{background:var(--bg); text-decoration:none}
.mkt-drop-panel a small{color:var(--mut); font-weight:500; font-size:.78rem}
.mkt-header .actions{display:flex; align-items:center; gap:10px; flex:none}
.mkt-hamburger{display:none; background:none; border:none; cursor:pointer; padding:6px; flex:none}
.mkt-hamburger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform .2s, opacity .2s}
.mkt-mobile-panel{display:none}

/* ---------- Hero ---------- */
.mkt-hero{
  position:relative; padding:76px 0 40px; overflow:hidden;
}
.mkt-hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:640px; z-index:0;
  background:
    radial-gradient(560px 360px at 12% 10%, color-mix(in srgb, var(--mkt-hero-c) 22%, transparent), transparent 70%),
    radial-gradient(680px 420px at 88% 0%, color-mix(in srgb, var(--mkt-hero-b) 26%, transparent), transparent 70%),
    radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--mkt-hero-a) 16%, transparent), transparent 70%);
  filter:blur(2px);
}
.mkt-hero .wrap{position:relative; z-index:1}
.mkt-hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center}
.mkt-hero h1{
  font-size:clamp(2.6rem,5.6vw,4rem); font-weight:800; letter-spacing:-.03em; line-height:1.04;
  margin:0 0 22px; text-wrap:balance;
}
.mkt-hero h1 .accent{color:var(--primary)}
.mkt-hero .dek{font-size:1.15rem; color:var(--mut); max-width:52ch; margin:0 0 32px; line-height:1.6}
.mkt-hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px}
.mkt-btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:11px; padding:14px 26px;
  font-weight:700; font-size:1rem; cursor:pointer; border:1px solid transparent; font-family:inherit;
  text-decoration:none;
}
/* Smaller variant for the header's Login/Get Started — was previously
   inline `style="padding:..."`, which silently defeats any later media-
   query override since inline styles win the cascade regardless of
   specificity; moved to a real class so the mobile breakpoint below can
   actually resize it. */
.mkt-btn-compact{padding:9px 18px; font-size:.9rem}
.mkt-btn-primary{background:var(--primary); color:#fff; box-shadow:0 10px 24px -10px color-mix(in srgb, var(--primary) 60%, transparent)}
.mkt-btn-primary:hover{filter:brightness(1.07); text-decoration:none}
.mkt-btn-ghost{background:var(--panel); border-color:var(--line); color:var(--ink)}
.mkt-btn-ghost:hover{border-color:var(--line-strong,var(--mut)); text-decoration:none}
.mkt-hero .microcopy{font-size:.85rem; color:var(--mut)}

/* product preview card */
.mkt-preview{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--mkt-radius-lg);
  box-shadow:var(--mkt-shadow); overflow:hidden;
}
.mkt-preview .pv-bar{display:flex; gap:6px; padding:14px 16px; border-bottom:1px solid var(--line)}
.mkt-preview .pv-bar span{width:9px;height:9px;border-radius:50%;background:var(--line)}
.mkt-preview .pv-body{padding:20px; display:grid; gap:12px}
.pv-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.pv-tile{
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px;
}
.pv-tile .lbl{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); font-weight:700; margin-bottom:6px}
.pv-tile .val{font-size:1.3rem; font-weight:800}
.pv-tile .sub{font-size:.72rem; color:var(--mut); margin-top:2px}
.pv-bars{display:flex; align-items:flex-end; gap:5px; height:42px; margin-top:8px}
.pv-bars i{flex:1; background:var(--primary); opacity:.75; border-radius:3px 3px 0 0}

/* ---------- Trust / value strip ---------- */
.mkt-strip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.mkt-strip .item{background:var(--panel); padding:22px 18px; text-align:center; font-weight:700; font-size:.92rem}

/* ---------- How it works ---------- */
.mkt-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; counter-reset:mkstep}
.mkt-step{position:relative; padding-top:8px}
.mkt-step .num{
  counter-increment:mkstep; font-weight:800; font-size:1.6rem; color:var(--primary);
  display:flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:14px; background:color-mix(in srgb, var(--primary) 10%, var(--panel)); margin-bottom:16px;
}
.mkt-step .num::before{content:counter(mkstep)}
.mkt-step h3{margin:0 0 6px; font-size:1.05rem}
.mkt-step p{margin:0; color:var(--mut); font-size:.92rem}

/* ---------- Feature cards ---------- */
.mkt-feature-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.mkt-feature-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px;
  box-shadow:var(--mkt-shadow-sm); transition:transform .15s, box-shadow .15s;
}
.mkt-feature-card:hover{transform:translateY(-3px); box-shadow:var(--mkt-shadow)}
.mkt-feature-card .ico{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--primary) 11%, var(--panel)); color:var(--primary); margin-bottom:16px;
  font-size:1.2rem;
}
.mkt-feature-card h3{margin:0 0 8px; font-size:1.08rem}
.mkt-feature-card ul{margin:10px 0 0; padding:0 0 0 18px; color:var(--mut); font-size:.88rem; line-height:1.7}

/* ---------- AI section ---------- */
.mkt-ai{
  background:linear-gradient(135deg, color-mix(in srgb, var(--mkt-hero-a) 96%, black), color-mix(in srgb, var(--mkt-hero-b) 90%, black));
  border-radius:var(--mkt-radius-lg); color:#fff; padding:64px 56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center;
}
.mkt-ai .eyebrow{color:#c7c2ff}
.mkt-ai .eyebrow::before{background:#c7c2ff}
.mkt-ai h2{color:#fff}
.mkt-ai p{color:#d9d6ff}
.mkt-ai ul{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.mkt-ai ul li{display:flex; gap:10px; font-size:.94rem; color:#ece9ff}
.mkt-ai ul li::before{content:"✓"; color:#a5f3c8; font-weight:800; flex:none}
.mkt-ai-flow{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:22px; backdrop-filter:blur(4px)}
.mkt-ai-flow .flow-row{display:flex; align-items:center; gap:10px; font-size:.86rem; font-weight:700; color:#fff; flex-wrap:wrap}
.mkt-ai-flow .flow-row span.step{background:rgba(255,255,255,.14); padding:7px 12px; border-radius:99px}
.mkt-ai-flow .flow-row span.arrow{color:#c7c2ff; opacity:.7}
.mkt-ai-flow p{color:#c7c2ff; font-size:.82rem; margin:14px 0 0}

/* ---------- Dashboard section ---------- */
.mkt-dash-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.mkt-dash-tile{
  background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:18px 14px; text-align:center;
}
.mkt-dash-tile .ico{font-size:1.4rem; margin-bottom:8px}
.mkt-dash-tile .lbl{font-weight:700; font-size:.85rem}

/* ---------- Hosting/marketing entitlement ---------- */
.mkt-entitlement{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px}
.mkt-entitlement .box{
  border-radius:16px; padding:28px; border:1px solid var(--line); background:var(--panel);
}
.mkt-entitlement .box.highlight{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 5%, var(--panel))}
.mkt-entitlement .box h3{margin:0 0 10px; font-size:1.15rem}
.mkt-entitlement .box p{color:var(--mut); margin:0 0 6px; font-size:.94rem}
.mkt-entitlement .box .tag{
  display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 10px; border-radius:99px; margin-bottom:14px;
}
.mkt-entitlement .box.highlight .tag{background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary)}
.mkt-entitlement .box:not(.highlight) .tag{background:var(--bg); color:var(--mut)}

/* ---------- Pricing ---------- */
.mkt-toggle{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:44px}
.mkt-toggle button{
  font:inherit; font-weight:700; font-size:.9rem; background:var(--panel); border:1px solid var(--line);
  padding:9px 18px; border-radius:99px; cursor:pointer; color:var(--mut);
}
.mkt-toggle button.active{background:var(--primary); color:#fff; border-color:var(--primary)}
/* Exactly 5 real plans (Free + 4 hosting tiers) — explicit column count
   rather than auto-fit, which packed 4-per-row and orphaned the 5th
   (Enterprise) onto its own mostly-empty row at this container width;
   confirmed live before landing on this fix. */
.mkt-price-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; align-items:stretch}
.mkt-price-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px 24px;
  display:flex; flex-direction:column; box-shadow:var(--mkt-shadow-sm);
}
.mkt-price-card.popular{border-color:var(--primary); box-shadow:var(--mkt-shadow); position:relative}
.mkt-price-card.popular::before{
  content:"Most popular"; position:absolute; top:-12px; left:24px; background:var(--primary); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:99px;
}
.mkt-price-card h3{margin:0 0 6px; font-size:1.1rem}
.mkt-price-card .price{font-size:2rem; font-weight:800; margin:10px 0 2px}
.mkt-price-card .price small{font-size:.9rem; font-weight:600; color:var(--mut)}
.mkt-price-card .price.contact{font-size:1.3rem}
.mkt-price-card ul{list-style:none; margin:20px 0; padding:0; display:grid; gap:10px; flex:1}
.mkt-price-card ul li{font-size:.87rem; color:var(--mut); display:flex; gap:8px}
.mkt-price-card ul li::before{content:"✓"; color:var(--primary); font-weight:800; flex:none}

/* ---------- Agency ---------- */
.mkt-agency{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
.mkt-agency-visual{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--mkt-shadow-sm);
}
.mkt-agency-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.mkt-agency-row:last-child{border-bottom:none}
.mkt-agency-row .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none}
.mkt-agency-row .perm{margin-left:auto; font-size:.72rem; font-weight:700; color:var(--mut); background:var(--bg); padding:3px 9px; border-radius:99px}

/* ---------- FAQ ---------- */
.mkt-faq{max-width:820px; margin:0 auto}
.mkt-faq-item{border-bottom:1px solid var(--line)}
.mkt-faq-item summary{
  padding:20px 4px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px;
}
.mkt-faq-item summary::-webkit-details-marker{display:none}
.mkt-faq-item summary::after{content:"+"; font-size:1.3rem; color:var(--primary); font-weight:400; flex:none}
.mkt-faq-item[open] summary::after{content:"–"}
.mkt-faq-item p{margin:0 0 20px; color:var(--mut); font-size:.92rem; padding:0 4px}

/* ---------- Final CTA ---------- */
.mkt-final{
  text-align:center; background:var(--ink); color:var(--bg); border-radius:var(--mkt-radius-lg);
  padding:64px 32px;
}
.mkt-final h2{color:inherit; font-size:clamp(1.8rem,4vw,2.6rem)}
.mkt-final .cta-row{justify-content:center; margin-top:28px}
.mkt-final .mkt-btn-ghost{background:transparent; border-color:rgba(255,255,255,.28); color:inherit}

/* ---------- Footer ---------- */
.mkt-foot{border-top:1px solid var(--line); padding:56px 0 28px; margin-top:40px}
.mkt-foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:32px}
.mkt-foot h4{font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); margin:0 0 14px}
.mkt-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.88rem}
.mkt-foot ul a{color:var(--ink)}
.mkt-foot-brand{font-weight:800; font-size:1.1rem; margin-bottom:10px; display:block}
.mkt-foot-brand span{color:var(--primary)}
.mkt-foot .about{color:var(--mut); font-size:.85rem; max-width:36ch; margin:0 0 14px}
.mkt-foot-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:22px;
  border-top:1px solid var(--line); font-size:.78rem; color:var(--mut);
}

/* ---------- Simple legal/info pages ---------- */
.mkt-doc{max-width:760px; margin:0 auto; padding:64px 0 100px}
.mkt-doc h1{font-size:2rem; font-weight:800; margin:0 0 6px}
.mkt-doc .updated{color:var(--mut); font-size:.85rem; margin:0 0 32px}
.mkt-doc h2{font-size:1.2rem; margin:32px 0 10px}
.mkt-doc p, .mkt-doc li{color:var(--mut); font-size:.95rem; line-height:1.75}
.mkt-doc ul{padding-left:20px}

/* ---------- Focus / a11y ---------- */
.mkt a:focus-visible, .mkt button:focus-visible, .mkt input:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  .mkt *{transition:none !important; animation:none !important}
}

/* ================= Responsive ================= */
@media (max-width:1024px){
  .mkt-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkt-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkt-dash-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mkt-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkt-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .mkt-hero-grid{grid-template-columns:minmax(0,1fr)}
  .mkt-ai{grid-template-columns:minmax(0,1fr); padding:40px 28px}
  .mkt-entitlement{grid-template-columns:minmax(0,1fr)}
  .mkt-agency{grid-template-columns:minmax(0,1fr)}
  .mkt-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:720px){
  .mkt-nav{display:none}
  .mkt-hamburger{display:block}
  /* Login+Get Started+hamburger together overflowed the header on real
     mobile widths (confirmed via a same-origin iframe test at 375px,
     scrollWidth 448 vs clientWidth 357) — Login already exists in the
     mobile panel below, so it's redundant in the bar itself on mobile. */
  .mkt-header .actions .mkt-btn-ghost{display:none}
  .mkt-header .actions{gap:6px}
  .mkt-header .actions .mkt-btn-compact{padding:7px 10px; font-size:.8rem}
  .mkt-header .brand{font-size:.95rem; gap:5px}
  .mkt-header .bar{gap:8px}
  .mkt-hamburger{padding:4px}
  .mkt-header.mobile-open .mkt-mobile-panel{
    display:flex; flex-direction:column; gap:2px; padding:14px 0 18px; border-top:1px solid var(--line);
  }
  .mkt-mobile-panel a{padding:12px 4px; font-weight:600; color:var(--ink); border-radius:8px}
  .mkt-mobile-panel a:hover{background:var(--bg); text-decoration:none}
  .mkt-mobile-panel .grp{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin:10px 4px 2px; font-weight:700}
  .mkt-header.mobile-open .mkt-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mkt-header.mobile-open .mkt-hamburger span:nth-child(2){opacity:0}
  .mkt-header.mobile-open .mkt-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:640px){
  .mkt :root{--mkt-section-y:64px}
  .mkt section{padding:64px 0}
  .mkt section.tight{padding:40px 0}
  .mkt-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mkt-steps{grid-template-columns:minmax(0,1fr)}
  .mkt-feature-grid{grid-template-columns:minmax(0,1fr)}
  .mkt-price-grid{grid-template-columns:minmax(0,1fr)}
  .mkt-dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkt-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mkt-hero{padding:44px 0 28px}
  .mkt-hero .cta-row{flex-direction:column}
  .mkt-hero .cta-row .mkt-btn{width:100%; justify-content:center}
  .mkt-final .cta-row{flex-direction:column}
  .mkt-final .cta-row .mkt-btn{width:100%; justify-content:center}
  .pv-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:400px){
  .mkt-foot-grid{grid-template-columns:minmax(0,1fr)}
  .mkt-dash-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}