/* ==================================================================
   Tessira — shared stylesheet for the PUBLIC marketing pages.

   landing.html keeps its own inline <style> (it has a lot of bespoke
   hero choreography); everything else on the public site loads this.
   The nav, footer, type scale and colour tokens are deliberately the
   same values as the landing page so the site reads as one thing.
   ================================================================== */

@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.ttf');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.ttf');font-weight:600;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Medium.ttf');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Bold.ttf');font-weight:700;font-display:swap}

:root{
  --ink:#101826;
  --body:#1A2421;
  --body-2:#3C4A45;
  --muted:#5D6B66;
  --soft:#7B8884;
  --faint:#9AA6B2;
  --line:#E7EDEB;
  --line-2:#F1F4F3;
  --page:#fff;
  --tint:#F5F9F8;
  --mint:#DFF4EF;
  --mint-2:#EDF6F3;
  --primary:#0F8A76;
  --primary-h:#0E7263;
  --deep:#0E4B44;
  --link:#128470;
  --dark:#0B211D;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 15px/1.6 'Inter',system-ui,sans-serif;color:var(--body);background:var(--page);
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:#0C6B59}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
.wrap{max-width:1320px;margin:0 auto;padding:0 48px}
.narrow{max-width:820px;margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- nav (matches landing.html) ---------------- */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:22px 0}
.lockup{display:flex;align-items:center;gap:11px}
.lockup img{height:38px;width:auto}
.wm-name{font:600 21px/1 'Inter';letter-spacing:-.015em;color:var(--ink);display:block}
.wm-sub{font:600 6.5px/1 'Inter';letter-spacing:.3em;text-transform:uppercase;color:var(--faint);
  margin-top:4px;display:block}
.nav-links{display:flex;gap:34px}
.nav-links a{font:500 14.5px 'Inter';color:var(--body-2)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--deep)}
.nav-right{display:flex;align-items:center;gap:22px}
.login{font:500 14.5px 'Inter';color:var(--body-2)}
.login:hover{color:var(--deep)}
.btn-nav{background:var(--primary);color:#fff;font:600 14.5px 'Inter';padding:12px 22px;
  border-radius:12px;box-shadow:0 2px 6px rgba(14,75,68,.28);transition:background .15s}
.btn-nav:hover{background:var(--primary-h);color:#fff}

/* ---------------- page head ---------------- */
.phead{position:relative;overflow:hidden;background:linear-gradient(180deg,#F3F9F7 0%,#fff 100%);
  border-bottom:1px solid var(--line-2)}
.phead .wrap{position:relative;z-index:2}
.phead-in{padding:56px 0 66px;max-width:860px}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);margin-bottom:20px}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--muted)}
.crumb svg{width:14px;height:14px;color:#C3D2CD;flex:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--mint-2);color:var(--primary-h);
  font:600 11px/1 'Inter';letter-spacing:.22em;text-transform:uppercase;padding:11px 18px;border-radius:99px}
h1{font:600 clamp(34px,4.2vw,54px)/1.08 'Inter';letter-spacing:-.03em;color:var(--ink);
  margin:22px 0 0;text-wrap:balance}
h1 .grad{background:linear-gradient(100deg,#0E7263 10%,#17A08C 60%,#2FB48C 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:18px;line-height:1.65;color:var(--muted);margin-top:20px;max-width:62ch}
.phead-blob{position:absolute;right:-160px;top:-120px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#DCF3EC 0%,#ECF7F3 46%,transparent 68%);
  pointer-events:none;z-index:1}

/* ---------------- sections ---------------- */
/* Decorative layers (offset backdrops, blobs) use negative insets and would
   otherwise widen the page on narrow screens. `clip` not `hidden`: hidden
   makes the section a scroll container, which breaks the sticky .toc
   inside it; clip does not. */
.sec{padding:76px 0;overflow-x:clip}
.sec.tinted{background:var(--tint)}
.sec.tight{padding:52px 0}
.sec-head{max-width:720px;margin-bottom:44px}
.kicker{font:600 11px/1 'Space Grotesk';letter-spacing:.24em;text-transform:uppercase;
  color:var(--primary);margin-bottom:14px}
h2{font:600 clamp(26px,3vw,36px)/1.18 'Inter';letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
h3{font:600 19px/1.35 'Inter';letter-spacing:-.012em;color:var(--ink)}
.sec-sub{font-size:16.5px;line-height:1.7;color:var(--muted);margin-top:14px}

/* ---------------- cards & grids ---------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px}
.card.plain{border:none;box-shadow:0 1px 2px rgba(23,33,30,.05),0 12px 30px -22px rgba(14,75,68,.25)}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:14.8px;line-height:1.7}
.ico{width:46px;height:46px;border-radius:14px;background:var(--mint);display:grid;place-items:center;
  margin-bottom:18px}
.ico svg{width:22px;height:22px;color:var(--deep)}

/* ---------------- steps ---------------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:18px;overflow:hidden}
.step{background:#fff;padding:30px 28px;position:relative}
.step-n{font:700 46px/1 'Space Grotesk';color:#EAF2EF;position:absolute;right:22px;top:18px;
  pointer-events:none}
.step h3{margin-bottom:8px;position:relative}
.step p{color:var(--muted);font-size:14.8px;line-height:1.7;position:relative}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden}
.stat{background:#fff;padding:26px 24px}
.stat b{display:block;font:600 30px/1 'Inter';color:var(--deep);letter-spacing:-.02em}
.stat span{display:block;font-size:13.5px;color:var(--soft);margin-top:9px}

/* ---------------- prose (guides, legal) ---------------- */
.prose{font-size:16px;line-height:1.78;color:var(--body-2);max-width:70ch}
.prose > * + *{margin-top:18px}
.prose h2{font-size:26px;margin-top:52px;scroll-margin-top:24px}
.prose h3{font-size:18.5px;margin-top:34px}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:9px}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font:400 .88em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--tint);
  padding:2px 6px;border-radius:5px;color:var(--deep)}
.prose blockquote{border-left:3px solid var(--mint);padding:4px 0 4px 20px;color:var(--muted);font-style:italic}
.prose hr{border:none;border-top:1px solid var(--line);margin:44px 0}
/* Every prose table scrolls inside itself rather than widening the page.
   display:block is what makes the element a scroll container at all - a
   real <table> box sizes to its content and ignores overflow-x - and it
   means no page has to remember to add a wrapper by hand. */
.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;border-collapse:collapse;font-size:14.5px}
/* Wide content scrolls inside itself; never widen the page. */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;color:var(--ink);background:var(--tint)}
.updated{font-size:13.5px;color:var(--faint);margin-bottom:6px}

/* table of contents */
.withtoc{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:start}
.toc{position:sticky;top:24px;border-left:1px solid var(--line);padding-left:20px}
.toc b{display:block;font:600 11px/1 'Space Grotesk';letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px}
.toc a{display:block;font-size:14px;color:var(--muted);padding:6px 0;line-height:1.45}
.toc a:hover{color:var(--deep)}

/* ---------------- callouts ---------------- */
.note{background:var(--mint-2);border:1px solid #D6EAE4;border-radius:14px;padding:18px 20px;
  font-size:14.8px;line-height:1.7;color:var(--body-2)}
.note b{color:var(--deep)}
.note.warn{background:#FDF7EA;border-color:#F0E2C2}
.note.warn b{color:#8A6410}

/* ---------------- faq ---------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font:600 16px 'Inter';color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid #A8B5B0;border-bottom:2px solid #A8B5B0;transform:rotate(45deg);
  transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .fa{padding:0 40px 22px 0;color:var(--muted);font-size:15px;line-height:1.75}

/* ---------------- template showcase ---------------- */
.tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.tpl{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column}
.tpl-shot{background:var(--tint);padding:26px 26px 0;overflow:hidden}
.tpl-shot img{width:100%;height:auto;border-radius:10px 10px 0 0;
  box-shadow:0 -1px 0 rgba(23,33,30,.06),0 18px 40px -24px rgba(14,75,68,.45)}
.tpl-body{padding:24px 26px 26px}
.tpl-body h3{margin-bottom:8px}
.tpl-body p{color:var(--muted);font-size:14.8px;line-height:1.7}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{font:600 11.5px 'Inter';background:var(--tint);color:var(--muted);padding:5px 11px;border-radius:99px}
.swatches{display:flex;gap:7px;margin-top:18px;align-items:center}
.sw{width:19px;height:19px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.swatches span.lbl{font:600 10.5px 'Space Grotesk';letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-right:5px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 15px 'Inter';
  padding:14px 26px;border-radius:13px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(20,163,142,.24)}
.btn-primary:hover{background:var(--primary-h);color:#fff}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--body-2)}
.btn-ghost:hover{border-color:var(--primary);color:var(--deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---------------- cta band ---------------- */
.cta{background:var(--dark);color:#fff;border-radius:24px;padding:58px 48px;text-align:center;
  position:relative;overflow:hidden}
.cta h2{color:#fff}
.cta p{color:#9DB5AE;font-size:16.5px;line-height:1.7;margin:14px auto 0;max-width:52ch}
.cta .btn-row{justify-content:center}
.cta .btn-ghost{background:transparent;border-color:#2A4640;color:#DFF4EF}
.cta .btn-ghost:hover{border-color:#4E7C72;color:#fff}

/* ---------------- footer (matches landing.html) ---------------- */
footer{background:var(--dark);color:#C7D6D1;padding:60px 0 28px;margin-top:0}
.f-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,3fr);gap:56px;
  padding-bottom:40px}
.f-brand .f-lock{display:flex;align-items:center;gap:11px}
.f-brand .f-lock img{height:34px;width:auto}
.f-brand .wm-name{color:#fff}
.f-brand .wm-sub{color:#7E9A93}
.f-brand p{color:#8FA7A1;font-size:14.5px;line-height:1.7;margin-top:18px;max-width:34ch}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.f-col{display:flex;flex-direction:column;gap:13px}
.f-col b{font:600 11px/1 'Space Grotesk';letter-spacing:.2em;text-transform:uppercase;
  color:#7E9A93;margin-bottom:4px}
.f-col a{color:#C7D6D1;font-size:14.5px}
.f-col a:hover{color:#fff}
.f-bottom{border-top:1px solid #1B3A34;padding-top:24px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:13.5px;color:#7E9A93}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  .wrap{padding:0 28px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* minmax(0,...) not a bare 1fr: a bare track's automatic minimum is
     min-content, so a table too wide to wrap pushes the whole page
     sideways instead of scrolling inside its own wrapper. */
  .withtoc{grid-template-columns:minmax(0,1fr);gap:34px}
  .toc{position:static;border-left:none;border-top:1px solid var(--line);
    padding-left:0;padding-top:20px}
}
@media (max-width:860px){
  .nav-links{display:none}
  .g2,.g3,.tpl-grid{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr;gap:38px}
  .f-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
@media (max-width:620px){
  .wrap{padding:0 18px}
  .sec{padding:52px 0}
  .phead-in{padding:38px 0 46px}
  .cta{padding:40px 24px;border-radius:18px}
  .stats,.g4{grid-template-columns:1fr}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}