/* SweetHive design system — shared across all marketing pages.
   Tokens + components extracted from docs/sweethive_landing.html.
   Rules: sentence case; violet only on AI elements. */
:root{
  --paper:#FAF9F5; --ink:#17161F; --muted:#6D6B78; --line:#E5E3DA;
  --violet:#534AB7; --violet-deep:#3C3489; --violet-wash:#EEEDFE; --violet-line:#CECBF6;
  --amber:#EF9F27; --amber-ink:#412402; --card:#FFFFFF;
  --disp:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'IBM Plex Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#141319; --ink:#EDECF2; --muted:#9C9AA8; --line:#2B2A33;
    --violet:#8B83E3; --violet-deep:#CECBF6; --violet-wash:#221F3A; --violet-line:#3C3489; --card:#1C1B24; }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:14px}
p.lead{color:var(--muted);max-width:640px}
section{padding:88px 0}
.btn{display:inline-block;font-family:var(--disp);font-weight:500;font-size:16px;padding:13px 26px;border-radius:999px;transition:transform .15s ease, box-shadow .15s ease;cursor:pointer;border:none}
.btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.btn-amber{background:var(--amber);color:var(--amber-ink)}
.btn-amber:hover{transform:translateY(-1px)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--violet)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:500;font-size:21px}
.logo .hv{color:var(--violet)}
.navlinks{display:flex;gap:30px;align-items:center;font-size:15px}
.navlinks a:not(.btn){color:var(--muted)}
.navlinks a:not(.btn):hover{color:var(--ink)}
.navlinks .btn{padding:9px 20px;font-size:14px}
/* language dropdown (pure CSS: opens on hover / keyboard focus / tap) */
.lang{position:relative;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);cursor:pointer;outline:none}
.lang:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.langcur{color:var(--ink)}
.langchev{transition:transform .2s ease;flex:none}
.lang:hover .langchev,.lang:focus-within .langchev{transform:rotate(180deg)}
.langmenu{position:absolute;top:calc(100% + 10px);right:0;min-width:154px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;display:none;flex-direction:column;gap:2px;box-shadow:0 16px 40px -16px rgba(23,22,31,.4);z-index:60}
.lang:hover .langmenu,.lang:focus-within .langmenu{display:flex}
.langmenu a{padding:8px 12px;border-radius:8px;color:var(--muted);white-space:nowrap;font-size:12.5px;letter-spacing:.02em}
.langmenu a:hover{background:var(--violet-wash);color:var(--violet-deep)}
.langmenu a[aria-current="true"]{color:var(--ink);background:color-mix(in srgb,var(--line) 45%,transparent)}
@media(max-width:760px){.navlinks a.hidesm{display:none}}

/* ---------- hero ---------- */
.hero{padding:84px 0 72px;position:relative;overflow:hidden}
.hexbg{position:absolute;inset:0;opacity:.05;pointer-events:none}
.herogrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
@media(max-width:920px){.herogrid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(38px,5.2vw,58px);margin:18px 0 20px}
.hero h1 em{font-style:normal;color:var(--violet)}
.hero .sub{font-size:19px;color:var(--muted);max-width:480px;margin-bottom:32px}
.ctarow{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- demo card (signature) ---------- */
.demo{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 24px 60px -30px rgba(23,22,31,.25)}
.personas{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.pbtn{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.pbtn[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-wash);color:var(--violet-deep)}
.pbtn:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.tree{width:100%;height:auto;display:block}
.node rect{fill:var(--card);stroke:var(--line);stroke-width:1.2;transition:fill .35s,stroke .35s,opacity .35s}
.node text{font-family:var(--disp);font-size:13px;fill:var(--ink);transition:opacity .35s}
.node .sub{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.node.on rect{fill:var(--violet-wash);stroke:var(--violet)}
.node.off{opacity:.28}
.edge{stroke:var(--line);stroke-width:1.4;transition:stroke .35s,opacity .35s}
.edge.on{stroke:var(--violet)}
.edge.off{opacity:.25}
.aibadge{opacity:0;transition:opacity .35s}
.aibadge.on{opacity:1}
.aibadge circle{fill:var(--amber)}
.aibadge text{font-family:var(--mono);font-size:8.5px;fill:var(--amber-ink);font-weight:500}
.askrow{display:flex;gap:10px;align-items:center;margin-top:16px;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font-size:14px;color:var(--muted)}
.askrow .q{color:var(--ink)}
.answer{margin-top:12px;background:var(--violet-wash);border:1px solid var(--violet-line);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.55;min-height:96px}
.answer .who{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);display:block;margin-bottom:6px}
.answer.fade{animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .answer.fade{animation:none}
  .node rect,.node text,.edge,.aibadge{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- problem ---------- */
.problem{border-top:1px solid var(--line)}
.probgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px}
@media(max-width:760px){.probgrid{grid-template-columns:1fr}}
.prob .k{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-bottom:10px}
.prob p{font-size:16.5px}
.prob strong{font-weight:500;color:var(--violet)}

/* ---------- how it works ---------- */
.how{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.terms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.terms{grid-template-columns:1fr}}
.term{border:1px solid var(--line);border-radius:16px;padding:22px}
.term h3{font-size:18px;margin-bottom:8px}
.term h3 .hex{color:var(--violet);margin-right:6px}
.term p{font-size:15px;color:var(--muted)}
.lawn{margin-top:40px;text-align:center;font-family:var(--disp);font-size:clamp(19px,2.6vw,25px);color:var(--violet-deep)}

/* ---------- pillars ---------- */
.pillars .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:44px}
.pillar{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card);grid-column:span 2}
.pillar:nth-child(4),.pillar:nth-child(5){grid-column:span 3}
@media(max-width:900px){.pillar,.pillar:nth-child(4),.pillar:nth-child(5){grid-column:span 6}}
.pillar .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber);border-radius:999px;padding:3px 10px;display:inline-block;margin-bottom:14px}
.pillar h3{font-size:19px;margin-bottom:8px}
.pillar p{font-size:15px;color:var(--muted)}

/* ---------- solutions ---------- */
.sol .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.sol .grid{grid-template-columns:1fr}}
.scard{border:1px solid var(--violet-line);border-radius:16px;padding:26px;background:var(--card)}
.scard .mono{display:block;margin-bottom:10px}
.scard h3{font-size:20px;margin-bottom:10px}
.scard p{font-size:15px;color:var(--muted);margin-bottom:14px}
.scard a{font-family:var(--disp);font-size:14.5px;color:var(--violet)}

/* ---------- quote ---------- */
.quote{background:var(--violet);color:#fff;text-align:center}
.quote blockquote{font-family:var(--disp);font-size:clamp(22px,3.4vw,32px);line-height:1.35;max-width:880px;margin:0 auto}
.quote .att{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-line);margin-top:22px}
@media (prefers-color-scheme: dark){ .quote{background:#3C3489} }

/* ---------- security ---------- */
.sec .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;margin-top:8px;align-items:start}
@media(max-width:860px){.sec .grid{grid-template-columns:1fr}}
.sec ul{list-style:none;margin-top:26px}
.sec li{padding:14px 0;border-top:1px solid var(--line);font-size:16px;display:flex;gap:14px}
.sec li .hex{color:var(--violet);flex:none;font-family:var(--disp)}

/* ---------- pricing ---------- */
.pricing{background:var(--card);border-top:1px solid var(--line)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--line);border-radius:16px;padding:26px}
.tier.hot{border-color:var(--violet);position:relative}
.tier.hot::before{content:attr(data-flag);position:absolute;top:-11px;left:22px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;background:var(--violet);color:#fff;padding:3px 10px;border-radius:999px}
.tier h3{font-size:19px;margin-bottom:4px}
.tier .price{font-family:var(--disp);font-size:30px;margin:10px 0 4px}
.tier .per{font-size:13px;color:var(--muted);margin-bottom:16px}
.tier ul{list-style:none;font-size:14.5px;color:var(--muted)}
.tier li{padding:6px 0;border-top:1px solid var(--line)}
.tbd{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:26px;display:block}

/* ---------- footer ---------- */
.final{text-align:center}
.final h2{font-size:clamp(28px,4.4vw,44px);max-width:820px;margin:0 auto 16px}
.final h2 em{font-style:normal;color:var(--violet)}
footer{border-top:1px solid var(--line);padding:34px 0;font-size:13.5px;color:var(--muted)}
.footrow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ================= sub-page additions ================= */
/* page hero (compact, single column) for vertical & legal pages */
.pagehero{padding:64px 0 40px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.pagehero h1{font-size:clamp(32px,4.6vw,50px);margin:16px 0 18px;max-width:820px}
.pagehero h1 em{font-style:normal;color:var(--violet)}
.pagehero .sub{font-size:19px;color:var(--muted);max-width:640px}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}

/* mapping rows (context -> group) for vertical pages */
.maprows{display:grid;grid-template-columns:1fr;gap:14px;margin-top:40px}
.maprow{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--card)}
@media(max-width:640px){.maprow{grid-template-columns:1fr;gap:8px}}
.maprow .m-k{font-family:var(--disp);font-size:16px;color:var(--violet-deep)}
.maprow .m-v{font-size:15.5px;color:var(--muted)}

/* comparison table (e.g. personal agent vs SweetHive agent) */
.cmp{width:100%;border-collapse:collapse;margin-top:36px;font-size:15px;overflow:hidden;border:1px solid var(--line);border-radius:16px}
.cmp th,.cmp td{text-align:left;padding:14px 18px;border-top:1px solid var(--line);vertical-align:top}
.cmp thead th{border-top:none;font-family:var(--disp);font-weight:500;font-size:15px;color:var(--ink);background:var(--card)}
.cmp thead th:last-child{color:var(--violet-deep)}
.cmp tbody th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;white-space:nowrap;width:180px}
.cmp td{color:var(--muted)}
.cmp td:last-child{color:var(--ink)}
.cmp-wrap{overflow-x:auto}
.footnote{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:20px;display:block}

/* generic feature grid */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr}}
.fcard{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card)}
.fcard h3{font-size:18px;margin-bottom:8px}
.fcard p{font-size:15px;color:var(--muted)}

/* ---------- contact: routing cards + form ---------- */
.rcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
@media(max-width:640px){.rcards{grid-template-columns:1fr}}
.rcard{display:block;border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--card);cursor:pointer;transition:border-color .15s,transform .15s}
.rcard:hover{border-color:var(--violet);transform:translateY(-1px)}
.rcard h3{font-size:17px;margin-bottom:6px}
.rcard p{font-size:14.5px;color:var(--muted)}
.rcard .arw{color:var(--violet);font-family:var(--disp);font-size:14px;display:inline-block;margin-top:10px}
.form{max-width:640px;margin-top:8px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:15px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet)}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin-bottom:12px}
.consent input{margin-top:3px;flex:none}
.consent a{color:var(--violet);text-decoration:underline}
.formok{display:none;background:var(--violet-wash);border:1px solid var(--violet-line);border-radius:12px;padding:16px 18px;font-size:15px;color:var(--violet-deep)}
.form.sent .formfields{display:none}
.form.sent .formok{display:block}
.channels{display:flex;gap:28px;flex-wrap:wrap;margin-top:10px;font-size:15px}
.channels a{color:var(--violet)}
.legalblock{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:44px;padding-top:20px;line-height:1.7}

/* footer nav links */
.footlinks{display:flex;gap:22px;flex-wrap:wrap}
.footlinks a:hover{color:var(--ink)}

/* code / quickstart block (fixed dark in both themes) */
.code{font-family:var(--mono);font-size:13px;line-height:1.7;background:#17161F;color:#EDECF2;border:1px solid #2B2A33;border-radius:14px;padding:20px 22px;overflow-x:auto;margin-top:22px;white-space:pre}
.code .c{color:#8B8A97}
.code .k{color:#A79DF5}
.code .s{color:#F0B45F}
.pathpick{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:760px){.pathpick{grid-template-columns:1fr}}
.pathcard{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--card)}
.pathcard.accent{border-color:var(--violet-line)}
.pathcard h3{font-size:20px;margin-bottom:8px}
.pathcard p{font-size:15px;color:var(--muted);margin-bottom:16px}
.steps{counter-reset:step;margin-top:36px;display:grid;gap:14px}
.step{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--card)}
.step::before{counter-increment:step;content:counter(step);font-family:var(--disp);font-weight:500;color:var(--violet);background:var(--violet-wash);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px}
.step h3{font-size:16px;margin-bottom:4px}
.step p{font-size:14.5px;color:var(--muted)}

/* ---------- legal / prose ---------- */
.legal{padding:56px 0 88px}
.legal .doc{max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(28px,4vw,40px);margin-bottom:8px}
.legal .updated{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:32px;display:block}
.legal h2{font-size:23px;margin:38px 0 12px}
.legal h3{font-size:18px;margin:26px 0 10px}
.legal h4{font-family:var(--disp);font-weight:500;font-size:16px;margin:20px 0 8px}
.legal p,.legal li{font-size:16px;color:var(--ink);line-height:1.7}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{margin:0 0 16px 22px}
.legal li{margin:0 0 6px}
.legal a{color:var(--violet);text-decoration:underline}
.legal strong{font-weight:600}
.legal hr{border:none;border-top:1px solid var(--line);margin:32px 0}
.legal .muted{color:var(--muted)}
.legal .box{border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:var(--card);margin:0 0 20px}

/* The registered hexagon-chain mark (same asset + mask technique as the app
   shell) — painted in currentColor so it follows the header text color. */
.logo-mark{display:inline-block;width:44px;height:22px;flex:0 0 auto;background:currentColor;mask:url('sh-logo-mark.png') center/contain no-repeat;-webkit-mask:url('sh-logo-mark.png') center/contain no-repeat}

/* Full registered wordmark (mark + Sweet<->ive + R), masked so it follows the
   header text color. Ratio of the source PNG is ~7.74:1. */
.logo-full{display:inline-block;width:163px;height:21px;flex:0 0 auto;background:currentColor;mask:url('sh-logo-full.png') center/contain no-repeat;-webkit-mask:url('sh-logo-full.png') center/contain no-repeat}

/* Header auth buttons (Register / Log in) — compact, visible on mobile. */
.authbtn{padding:9px 16px;font-size:14px;white-space:nowrap}
@media(max-width:460px){
  .authbtn{padding:8px 11px;font-size:13px}
  .logo-full{width:124px;height:16px}
  .navlinks{gap:8px}
}

/* EU AI Act trust strip — full-width band below the homepage hero, links to /ai-act/. */
.aiact-strip{background:var(--violet-wash);border-top:1px solid var(--violet-line);border-bottom:1px solid var(--violet-line)}
.aiact-strip .wrap{padding:15px 0;display:flex;justify-content:center}
.aiact-badge{display:inline-flex;align-items:center;gap:10px;max-width:820px;
  font-family:var(--disp);font-size:15px;line-height:1.35;color:var(--violet-deep);text-decoration:none}
.aiact-badge .hex{color:var(--violet);flex:none;font-size:15px}
.aiact-badge .arw{color:var(--violet);flex:none;transition:transform .15s ease}
.aiact-badge:hover .aiact-txt{text-decoration:underline;text-underline-offset:3px}
.aiact-badge:hover .arw{transform:translateX(3px)}
@media(max-width:560px){.aiact-strip .wrap{padding:13px 16px;text-align:center}}