/* Two brands share one stylesheet. Every component reads the variables below;
   body.kram and body.regnita set them from each brand's guidelines.
   KRAM:    KRAM Brand Guidelines v1.0 (Oct 2026) §05 colour, §07 type
   Regnita: Regnita Brand Guidelines v1.0 §03 colour, §04 type            */

/* ---------- KRAM tokens (light mode) ---------- */
body.kram{
  --ground:#FFFFFF;      /* paper */
  --panel:#F2F4F3;       /* mist */
  --surface:#FFFFFF;
  --ink:#141A17;         /* ink — all running text */
  --heading:#141A17;
  --muted:#5E6B64;       /* slate — secondary text */
  --accent:#113A2F;      /* bottle green */
  --accent-hover:#0C2A22;
  --on-accent:#FFFFFF;
  --line:#DCE1DE;
  --field-line:#C3CBC7;
  --display:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --display-weight:800; --heading-weight:600; --display-track:-.02em; --display-line:1.03;
  --button-font:600 15px/1 Inter,system-ui,sans-serif; --button-track:0;
  --ok:#1F6B4A; --ok-bg:#E6F2EC; --warn:#8A3A18; --warn-bg:#FBEDE7;
}
/* KRAM dark mode — night / chalk / sage. Bottle green never appears here. */
body.kram .dark{
  --ground:#0E1311;      /* night */
  --panel:#141C19;       /* panel */
  --surface:#141C19;
  --ink:#E7EBE9;         /* chalk */
  --heading:#E7EBE9;
  --muted:#9AA8A1;       /* slate light */
  --accent:#8FBFAE;      /* sage */
  --accent-hover:#A6CDBF;
  --on-accent:#0E1311;
  --line:#24302B;
}

/* ---------- Regnita tokens ---------- */
body.regnita{
  --ground:#FFFFFF;
  --panel:#F3E3D8;       /* cream — backgrounds */
  --surface:#FFFFFF;
  --ink:#2A211D;         /* espresso — body text */
  --heading:#7A4E3F;     /* clay brown — headings */
  --muted:#7A4E3F;       /* clay passes contrast on white and cream */
  --accent:#7A4E3F;      /* clay — buttons, links */
  --accent-hover:#2A211D;
  --on-accent:#FFFFFF;
  --line:#E8C9B8;        /* blush sand — rules, borders */
  --field-line:#C99A84;
  --display:"Josefin Sans",Inter,system-ui,sans-serif;
  --display-weight:500; --heading-weight:500; --display-track:.02em; --display-line:1.08;
  --button-font:500 15px/1 "Josefin Sans",Inter,sans-serif; --button-track:.04em;
  --ok:#2A211D; --ok-bg:#F3E3D8; --warn:#7A4E3F; --warn-bg:#F3E3D8;
}
/* Regnita dark — espresso ground, cream text, terracotta for large accents only */
body.regnita .dark{
  --ground:#2A211D; --panel:#2A211D; --surface:#2A211D;
  --ink:#F3E3D8; --heading:#F3E3D8; --muted:#F3E3D8;
  --accent:#C99A84; --accent-hover:#E8C9B8; --on-accent:#2A211D;
  --line:#4A3A32;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.dark{background:var(--ground);color:var(--ink)}
h1,h2,h3{font-family:var(--display);color:var(--heading);margin:0}
h1{font-weight:var(--display-weight);font-size:clamp(34px,5vw,54px);line-height:var(--display-line);letter-spacing:var(--display-track)}
h2{font-weight:var(--heading-weight);font-size:clamp(24px,3vw,30px);line-height:1.15;letter-spacing:calc(var(--display-track) * .75)}
h3{font-weight:var(--heading-weight);font-size:20px;line-height:1.2}
body.regnita h1{font-size:clamp(36px,5.4vw,60px)}
body.regnita h2{font-size:clamp(28px,3.4vw,38px)}
p{margin:0}
.eyebrow{font:600 13px/1.3 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
body.regnita .eyebrow{font:500 13px/1.3 "Josefin Sans",Inter,sans-serif;letter-spacing:.14em;color:var(--heading)}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.mono{font:400 12.5px/1.5 "IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.stack>*+*{margin-top:18px}
section{padding:96px 0}
.hero{padding:96px 0 80px}
.band{background:var(--panel)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:block;flex:none}
.logo img{height:auto}
.nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:15px;color:var(--muted)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
body.regnita .nav a:not(.btn){font:500 15px/1 "Josefin Sans",Inter,sans-serif;letter-spacing:.04em;color:var(--ink)}
body.regnita .nav a:not(.btn):hover{color:var(--heading)}
@media (max-width:720px){.nav a:not(.btn){display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;border:1px solid transparent;background:var(--accent);color:var(--on-accent);font:var(--button-font);letter-spacing:var(--button-track);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent-hover)}
.nav .btn{color:var(--on-accent)}
.btn.small{height:38px;padding:0 16px;font-size:14px}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:wait}
body.regnita .btn{border-radius:6px}

/* ---------- Regnita home ---------- */
.r-hero{background:var(--panel)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:48px}
.principles>div{background:var(--surface);padding:28px}
.principles h3{margin:14px 0 8px}
.num{font:500 14px/1 "Josefin Sans",Inter,sans-serif;letter-spacing:.1em;color:var(--heading)}
.rule{width:56px;height:4px;border-radius:2px;background:#C99A84;margin-top:22px} /* terracotta: large shape only */
.product-card{display:grid;grid-template-columns:1.1fr 1fr;border-radius:14px;overflow:hidden;background:#0E1311;color:#E7EBE9;margin-top:40px;text-decoration:none}
.product-card>div{padding:44px}
.product-card .side{background:#141C19;border-left:1px solid #24302B}
.product-card p{color:#9AA8A1}
.product-card .lead{color:#E7EBE9;font-size:19px;margin-top:28px}
.product-card .arrow{margin-top:28px;display:inline-flex;gap:8px;color:#8FBFAE;font-weight:600}
.product-card:hover .arrow{text-decoration:underline}
.product-card .label{font:600 13px/1.3 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8FBFAE}
.soon{border:1px dashed var(--field-line);border-radius:10px;padding:22px 24px;margin-top:16px;display:flex;justify-content:space-between;gap:16px;align-items:center}
@media (max-width:860px){.principles,.product-card{grid-template-columns:1fr}.product-card .side{border-left:0;border-top:1px solid #24302B}}

/* ---------- KRAM hero + product preview ---------- */
.k-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.k-hero h1 span{color:var(--accent)}
@media (max-width:960px){.k-hero{grid-template-columns:1fr}}
.mock{background:#141C19;border:1px solid #24302B;border-radius:14px;overflow:hidden;font-size:13px}
.mock-top{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #24302B}
.mock-top i{width:9px;height:9px;border-radius:50%;background:#24302B}
.mock-body{display:grid;grid-template-columns:130px 1fr;min-height:330px}
.mock-side{border-right:1px solid #24302B;padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.mock-side b{font:600 10px/1 Inter,sans-serif;letter-spacing:.09em;color:#9AA8A1;margin:4px 6px 8px}
.mock-side span{padding:7px 8px;border-radius:6px;color:#9AA8A1}
.mock-side span.on{background:#1C2723;color:#E7EBE9;box-shadow:inset 2px 0 #8FBFAE}
.mock-main{padding:16px;display:flex;flex-direction:column;gap:10px}
.mock-head{display:flex;justify-content:space-between;align-items:center}
.mock-head strong{font:600 16px/1 "Bricolage Grotesque",sans-serif;color:#E7EBE9}
.pill{font:400 11px/1 "IBM Plex Mono",monospace;padding:5px 8px;border-radius:99px;background:#1C2723;color:#9AA8A1}
.row{display:grid;grid-template-columns:1fr 70px 70px;gap:10px;align-items:center;padding:10px 12px;border:1px solid #24302B;border-radius:8px;background:#0E1311}
.row span{color:#E7EBE9}
.row small{color:#9AA8A1;font:400 11px/1 "IBM Plex Mono",monospace}
.bar{height:5px;border-radius:5px;background:#24302B;overflow:hidden}.bar i{display:block;height:100%;background:#8FBFAE}
.tag{font:600 10px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:5px 0;border-radius:5px;background:#1C2723;color:#9AA8A1}
.tag.ok{background:#15281F;color:#7CCB9F}   /* status: success */
.tag.wait{background:#2A2414;color:#E2B65C} /* status: warning */
@media (max-width:600px){.mock-body{grid-template-columns:1fr}.mock-side{display:none}.row{grid-template-columns:1fr 66px}.row small{display:none}}

/* ---------- features / steps ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px}
.feature .ico{width:38px;height:38px;border-radius:9px;background:var(--panel);color:var(--accent);display:grid;place-items:center;margin-bottom:18px}
.feature .ico svg{width:20px;height:20px}
.feature h3{margin-bottom:8px}
.feature p{color:var(--muted);font-size:15px}
@media (max-width:900px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.features{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px;counter-reset:s}
.steps>div{border-top:2px solid var(--line);padding-top:20px}
.steps>div::before{counter-increment:s;content:"0" counter(s);font:400 12.5px/1 "IBM Plex Mono",monospace;color:var(--accent);display:block;margin-bottom:14px}
.steps h3{margin-bottom:8px}
.steps p{font-size:15px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.checklist li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E");opacity:.12;position:relative}
.checklist li{position:relative}
.checklist li::after{content:"";position:absolute;left:4px;top:8px;width:10px;height:10px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px;display:flex;flex-direction:column}
.plan.hl{border:2px solid var(--accent);position:relative}
.plan.hl::before{content:"Most teams";position:absolute;top:-12px;left:28px;background:var(--accent);color:var(--on-accent);font:600 11.5px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;padding:6px 10px;border-radius:99px}
.plan .price{font:800 34px/1.03 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;margin:18px 0 4px;color:var(--heading)}
.plan .users{font:400 12.5px/1.5 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--accent);margin-top:8px}
.plan .checklist{margin:22px 0 28px;font-size:15px}
.plan .btn{margin-top:auto}
.early{margin-top:28px;background:var(--panel);border-radius:10px;padding:20px 24px;display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.faq{max-width:760px;margin-top:56px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 Inter,sans-serif;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted)}

/* ---------- forms ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600}
.field small{color:var(--muted);font-size:13px}
input,select,textarea{font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--field-line);border-radius:8px;background:#fff;color:#141A17;width:100%}
body.regnita input,body.regnita select,body.regnita textarea{color:#2A211D}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.code-input{font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.msg{border-radius:8px;padding:12px 14px;font-size:14px;margin-bottom:16px;display:none}
.msg.err{display:block;background:var(--warn-bg);color:var(--warn)}
.msg.ok{display:block;background:var(--ok-bg);color:var(--ok)}
.coupon-ok{color:var(--ok);font-size:14px;min-height:20px}
.coupon-bad{color:var(--warn);font-size:14px}
.done{text-align:center;padding:12px 0}
.done h2{margin:10px 0 12px}

/* ---------- legal ---------- */
.legal{max-width:720px}
.legal h2{font-size:24px;margin:32px 0 10px}

/* ---------- footer ---------- */
.site-foot{padding:56px 0 40px;font-size:14px}
.site-foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.site-foot h4{font:600 11.5px/1.3 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
body.regnita .site-foot h4{font:500 13px/1.3 "Josefin Sans",Inter,sans-serif;letter-spacing:.14em}
.site-foot a{display:block;text-decoration:none;margin-bottom:8px;color:var(--muted)}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot p{color:var(--muted)}
.site-foot .base{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;margin-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted)}
@media (max-width:700px){.site-foot .wrap{grid-template-columns:1fr 1fr}.site-foot .wrap>div:first-child{grid-column:1/-1}}

/* ---------- admin ---------- */
.admin table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border:1px solid var(--line)}
.admin th,.admin td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.admin th{font:600 11.5px/1.3 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
.admin code{font:400 13px "IBM Plex Mono",monospace;background:var(--panel);padding:3px 6px;border-radius:4px}
.admin .off{opacity:.5}
.admin input.inline{padding:6px 8px;font-size:13px;width:140px}
.admin .tabs{display:flex;gap:8px;margin:28px 0 16px}
.admin .tabs button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 16px;cursor:pointer;font:500 14px "Josefin Sans",Inter,sans-serif;letter-spacing:.04em;color:var(--ink)}
.admin .tabs button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.linkbtn{border:0;background:none;color:var(--accent);font:600 13px Inter,sans-serif;cursor:pointer;padding:0;text-decoration:underline}

/* Gold-edge mark (KRAM guidelines §01): print/cover use only, never below 160px wide.
   Gold appears only as the mark's edge — never as type, fills or backgrounds. */
.cover-mark{width:240px;max-width:100%;height:auto}
@media (max-width:600px){.cover-mark{width:180px}}