/* Clarvela – shared styles for clarvela.com and the product pages */
:root{
  --bg:#EEF2F6; --surface:#FFFFFF; --ink:#13202E; --muted:#4A5B6C; --faint:#6A7B8C; --line:#D6DEE7; --line-2:#C3CFDB;
  --navy:#0E1824; --on-navy:#EAF0F6; --on-navy-2:#A3B3C4; --navy-line:#2C4560; --brand:#1F3A57; --focus:#2F7FC1;
  /* Accents are the same as inside each product */
  --reg:#0E5A6B; --reg-h:#0A4654; --reg-t:#6BC2D4; --reg-s:#DCEDF0;
  --ai:#4B3B8F;  --ai-h:#3C2F75;  --ai-t:#B3A6F2; --ai-s:#ECE8F7;
  --priv:#862E5C; --priv-h:#6E244B; --priv-t:#F0A5C8; --priv-s:#F6E6EE;
  --serif:Charter,"Bitstream Charter","Iowan Old Style","Sitka Text",Cambria,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.6 var(--sans);background-color:var(--bg);background:
  radial-gradient(900px 520px at 92% 0%, rgba(14,90,107,.10), transparent 62%),
  radial-gradient(800px 560px at 0% 30%, rgba(75,59,143,.07), transparent 62%),
  radial-gradient(900px 600px at 80% 100%, rgba(134,46,92,.05), transparent 60%),
  linear-gradient(175deg,#DCE6F0 0,#E9EFF5 30%,#F3F6F9 70%,#EEF2F6 100%);background-attachment:fixed}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}
.reg{--c:var(--reg);--ch:var(--reg-h);--ct:var(--reg-t);--cs:var(--reg-s)}
.ai{--c:var(--ai);--ch:var(--ai-h);--ct:var(--ai-t);--cs:var(--ai-s)}
.priv{--c:var(--priv);--ch:var(--priv-h);--ct:var(--priv-t);--cs:var(--priv-s)}

/* Product mark: same tile as inside each product */
.pm{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 70%,#0E1824));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pm svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pm.sm{width:22px;height:22px;border-radius:6px}.pm.sm svg{width:16px;height:16px;stroke-width:2.6}
.pm.lg{width:56px;height:56px;border-radius:14px}.pm.lg svg{width:36px;height:36px}
.ai-l{letter-spacing:.06em;margin-right:-.06em}

/* Header: navy band, clearly set apart from the light page */
.top{background:linear-gradient(180deg,#132338,var(--navy));border-bottom:1px solid #0A121C;box-shadow:0 6px 22px rgba(14,24,36,.22);position:sticky;top:0;z-index:10;color:var(--on-navy)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--on-navy)}
.mark svg{width:44px;height:44px;flex:none}
.mark .word{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:16px;font-weight:600;color:var(--on-navy);padding:8px 16px 8px 9px;border-radius:999px;border:1px solid var(--navy-line);background:rgba(255,255,255,.05)}
.nav a:hover{background:rgba(255,255,255,.12);border-color:var(--ct)}
.nav a[aria-current="page"]{background:var(--c);border-color:color-mix(in srgb,var(--c) 70%,#fff)}
@media (max-width:640px){.nav a{font-size:15px;padding:6px 12px 6px 7px}.top{position:static}}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.lead{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--muted);max-width:60ch;margin:24px 0 0}
section{padding:64px 0}
.sec-h{font-size:clamp(28px,3.4vw,38px);line-height:1.15;margin:0 0 10px}
.sec-sub{color:var(--muted);margin:0 0 32px;max-width:62ch}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:9px;text-decoration:none;font-weight:700;font-size:15.5px;white-space:nowrap}
.btn.solid{background:var(--c);color:#fff;border:1px solid var(--c)}
.btn.solid:hover{background:var(--ch);border-color:var(--ch)}
.btn.ghost{color:var(--ink);border:1px solid var(--line-2);background:#fff}
.btn.ghost:hover{border-color:var(--c,#13202E);background:#F7F9FB}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Home hero */
.hero{padding-top:88px;padding-bottom:32px}
.hero h1{font-size:clamp(44px,7.6vw,92px);line-height:1.02;letter-spacing:-.02em;max-width:12ch}
.untangle{display:block;width:100%;height:auto;margin:48px 0 0;color:var(--brand)}
.untangle path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.untangle .knot{stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.4s cubic-bezier(.6,.05,.25,1) .2s forwards}
.untangle .end{fill:currentColor;stroke:none;opacity:0;animation:show .4s ease 2.4s forwards}
@keyframes draw{to{stroke-dashoffset:0}} @keyframes show{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.untangle .knot{animation:none;stroke-dashoffset:0}.untangle .end{animation:none;opacity:1}}

/* Product cards on the home page */
.products{display:flex;flex-direction:column;gap:16px}
.product{display:grid;grid-template-columns:230px 1fr;gap:16px 40px;padding:30px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 1px 2px rgba(19,32,46,.05),0 10px 30px rgba(19,32,46,.06)}
.product:hover{border-color:var(--line-2)}
.pid{display:flex;gap:14px;align-items:flex-start}
.pname{font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0;line-height:1.2;color:var(--ink)}
.ptag{font-size:14px;color:var(--faint);margin:3px 0 0}
.pq{font-family:var(--serif);font-size:24px;line-height:1.25;margin:0 0 10px}
.pd{margin:0;color:var(--muted);max-width:64ch}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px}
.pfor{margin:0;font-size:14px;color:var(--faint)} .pfor b{color:var(--ink);font-weight:600}
.pbtns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:820px){.product{grid-template-columns:1fr;padding:24px 20px}}

/* Editorial block */
.editorial{display:grid;grid-template-columns:300px 1fr;gap:24px 56px;border-top:1px solid var(--line-2);padding-top:40px}
.editorial p{margin:0 0 16px;color:var(--muted);max-width:64ch}
.editorial p:last-child{margin-bottom:0}
@media (max-width:820px){.editorial{grid-template-columns:1fr}}

/* Product page */
.crumb{font-size:14px;color:var(--faint);margin:0 0 28px}
.crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{text-decoration:underline}
.phero{padding-top:56px;padding-bottom:24px;position:relative}
.phero::before{content:"";position:absolute;inset:-80px 0 auto 0;height:520px;background:radial-gradient(700px 360px at 12% 30%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);pointer-events:none;z-index:-1}
.phead{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.phead .pname{font-size:26px}
.phero h1{font-size:clamp(36px,5.4vw,60px);line-height:1.08;max-width:22ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 10px 30px rgba(19,32,46,.05)}
.steps li{padding:22px 22px 26px;border-left:1px solid var(--line)}
.steps li:first-child{border-left:0}
.steps .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-weight:700;font-size:14px;margin-bottom:14px}
.steps h3{font-family:var(--sans);font-size:17px;font-weight:700;margin:0 0 6px;letter-spacing:0}
.steps p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps li:nth-child(3){border-left:0}.steps li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li{border-left:0}.steps li+li{border-top:1px solid var(--line)}}

/* Small illustrations in the steps */
.mini{background:#F1F4F3;color:#15201E;border:1px solid #D5DCDA;border-radius:10px;padding:12px;margin:0 0 18px;font:12px/1.4 var(--sans);min-height:190px;display:grid;gap:7px;align-content:start}
.mini .f{display:grid;gap:2px}
.mini .f span{font-size:10.5px;color:#56625F;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.mini .f b{background:#fff;border:1px solid #D5DCDA;border-radius:6px;padding:4px 8px;font-weight:600}
.mini .mq{font-weight:700;font-size:12.5px}
.mini .r{color:#56625F;font-size:11.5px}
.mini .res{background:var(--cs);color:var(--c);font-weight:700;border-radius:6px;padding:4px 8px}
.mini .tgs{display:flex;flex-wrap:wrap;gap:4px}
.mini .tgs span{border:1px solid #D5DCDA;background:#fff;border-radius:6px;padding:3px 7px;color:#56625F}
.mini .tgs .on{background:var(--c);border-color:var(--c);color:#fff;font-weight:700}
.mini .row2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mini .pill2{justify-self:start}

/* Coverage table */
.cover{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cover th,.cover td{text-align:left;padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.cover tr:last-child td{border-bottom:0}
.cover th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;background:#F7F9FB}
.cover td:first-child{font-weight:600;width:34%}
.cover td:last-child,.cover th:last-child{text-align:right;color:var(--muted);white-space:nowrap}
.cover td.d{color:var(--muted)}
@media (max-width:640px){.cover td.d,.cover th.d{display:none}.cover td:first-child{width:auto}.cover th,.cover td{padding:12px 14px}}

.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.two h3{font-size:22px;margin:0 0 10px}
.two p{margin:0 0 12px;color:var(--muted)}
@media (max-width:820px){.two{grid-template-columns:1fr}}

/* Preview window (like the products themselves) */
.window{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(19,32,46,.16);background:#F1F4F3;color:#15201E;font:14px/1.5 var(--sans)}
.wbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#E3E8E6;border-bottom:1px solid #D5DCDA}
.wbar i{width:11px;height:11px;border-radius:50%;background:#C5CDCA;display:block}
.wbar span{margin-left:12px;font-size:12.5px;color:#56625F;background:#F7F9F8;border-radius:6px;padding:2px 12px;flex:0 1 280px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wapp{display:flex;align-items:center;gap:10px;padding:12px 18px;background:#fff;border-bottom:1px solid #D5DCDA;flex-wrap:wrap}
.wapp b{font-size:15px}
.wapp .tabs{display:flex;gap:4px;margin-left:18px;font-size:13px;color:#56625F;flex-wrap:wrap}
.wapp .tabs span{padding:4px 10px;border-radius:6px} .wapp .tabs .on{background:#EEF1F0;color:#15201E;font-weight:600}
.wapp .pm{width:26px;height:26px;border-radius:7px}.wapp .pm svg{width:18px;height:18px}
.wbody{padding:20px 18px 22px;display:grid;gap:14px}
.wcard{background:#fff;border:1px solid #D5DCDA;border-radius:10px}
.wcard .h{padding:12px 16px;border-bottom:1px solid #E6EBE9;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wcard .h strong{font-size:15px}
.wq{display:grid;grid-template-columns:52px 1fr auto;gap:12px;padding:12px 16px;border-top:1px solid #E6EBE9;align-items:start}
.wq:first-of-type{border-top:0}
.wq .id{font:600 12.5px var(--sans);color:#56625F;padding-top:2px}
.wq .t{font-weight:600;font-size:14px;line-height:1.4}
.wq .r{font-size:12px;color:#56625F;margin-top:3px}
.seg{display:inline-flex;border:1px solid #D5DCDA;border-radius:7px;overflow:hidden;font-size:12px}
.seg span{padding:3px 8px;border-left:1px solid #D5DCDA;color:#56625F;background:#fff}
.seg span:first-child{border-left:0}
.seg .y{background:#DDF1E5;color:#1E6E46;font-weight:700}.seg .p{background:#FAEDD6;color:#8A5200;font-weight:700}
.chip2{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:5px;border:1px solid #D5DCDA;background:#F7F9F8;margin:2px 4px 2px 0;white-space:nowrap}
.chip2 em{font-style:normal;font-weight:500;color:#56625F}
.pill2{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;white-space:nowrap}
.pill2::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill2.warn{background:#FAEDD6;color:#8A5200}.pill2.bad{background:#FBE3E0;color:#A8231A}.pill2.ok{background:#DDF1E5;color:#1E6E46}.pill2.acc{background:var(--cs);color:var(--c)}
.bar{height:7px;border-radius:99px;background:#E6EBE9;overflow:hidden}.bar i{display:block;height:100%;background:var(--c)}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wrow{display:grid;grid-template-columns:1fr 140px 44px;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid #E6EBE9;font-size:13.5px}
.wrow:first-of-type{border-top:0}
.wrow .num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.small{font-size:12.5px;color:#56625F}
@media (max-width:700px){.wgrid{grid-template-columns:1fr}.wapp .tabs{display:none}.wq{grid-template-columns:40px 1fr}.wq .seg{grid-column:2}.wrow{grid-template-columns:1fr 80px 36px}}
.caption{font-size:13.5px;color:var(--faint);margin:14px 0 0}

/* Footer: navy, like the header */
.foot{background:var(--navy);border-top:1px solid #0A121C;margin-top:40px;padding:52px 0 36px;color:var(--on-navy-2);font-size:15px}
.foot .cols{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.foot .fmark{display:flex;align-items:center;gap:12px;color:var(--on-navy);text-decoration:none}
.foot .fmark svg{width:36px;height:36px}
.foot .fmark span{font-family:var(--serif);font-weight:600;font-size:22px}
.foot p{margin:12px 0 0;max-width:36ch}
.foot h4{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#7A8DA0;margin:6px 0 12px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot ul a{text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.foot ul a:hover{color:var(--on-navy);text-decoration:underline}
.foot .base{border-top:1px solid var(--navy-line);margin-top:40px;padding-top:20px;font-size:14px;color:#7A8DA0}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr}}