/* =========================================================
   Wits Tech — common.css
   Shared design system for every page of the site.
   Color tokens sampled from the brand mark + theme board.
   ========================================================= */

:root{
  /* ---- color ---- */
  --ink:        #201a4c;   /* primary text, dark surfaces   */
  --ink-deep:   #130f30;   /* footer — darker than --ink    */
  --ink-soft:   #423a72;   /* secondary text on light bg    */
  --violet:     #7d70d9;   /* primary accent                */
  --violet-deep:#5748b8;   /* hover / gradient partner       */
  --teal:       #2f9d94;   /* secondary accent               */
  --linen:      #f8f6f1;   /* page background                */
  --linen-dim:  #e9e5dc;   /* recessed panels on linen       */
  --paper:      #ffffff;   /* card / surface background      */
  --line:       rgba(32,26,76,0.14);   /* hairline borders   */
  --line-soft:  rgba(32,26,76,0.08);
  --ink-06:     rgba(32,26,76,0.06);

  /* ---- type ---- */
  --font-head: "Space Grotesk", "Tajawal", "Segoe UI", sans-serif;
  --font-body: "Inter", "Tajawal", "Segoe UI", sans-serif;

  /* ---- scale ---- */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.6rem, 2rem + 2.6vw, 3.5rem);

  --maxw: 1280px;
  --radius: 3px;
}

/* html[dir="rtl"] gets the Arabic-first stack as primary */
html[dir="rtl"]{
  --font-head: "Tajawal", "Segoe UI", sans-serif;
  --font-body: "Tajawal", "Segoe UI", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--step-4); font-weight: 700; }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }

p{ margin: 0 0 1em; max-width: 62ch; }
p.lede{ color: var(--ink-soft); max-width: 54ch; }

a{ color: inherit; }
img{ max-width: 100%; display: block; }

.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

section{ padding-block: 40px; }
@media (max-width: 720px){ section{ padding-block: 56px; } }

.bg-paper{ background: var(--paper); }
.bg-linen{ background: var(--linen); }
.bg-ink{ background: var(--ink); color: var(--linen); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4{ color: #fff; }
.bg-ink p{ color: rgba(242,239,233,0.82); }

.text-center{ text-align: center; }
.eyebrow-none{ display:none; } /* placeholder guard, unused by design */

/* ---------- visually hidden (skip link target labels etc) --------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--violet-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   Skip link
   ========================================================= */
.skip-link{
  position:absolute; inset-inline-start:12px; top:-48px;
  background: var(--ink); color:#fff; padding:10px 16px;
  border-radius: 2px; z-index: 200; transition: top .15s ease;
}
.skip-link:focus{ top:12px; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--line-soft);
}
.site-header.is-scrolled{ box-shadow: 0 8px 24px rgba(32,26,76,0.08); }

.header-row{
  display:flex; align-items:center; gap:20px;
  padding-block: 12px;
}
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-decoration:none; }
.brand img{ height: 55px; width:auto; }
.brand-tagline{
  margin-top:-13px; margin-left: 75px; font-size: 0.72rem; color: var(--ink-soft);
  white-space: nowrap; line-height:1;
}
@media (max-width: 900px){ .brand-tagline{ display:none; } }

.main-nav{
  margin-inline-start: auto;
  display:flex; align-items:center; gap: 28px;
}
.main-nav a{
  text-decoration:none; color: var(--ink); font-size: 0.96rem;
  padding-block: 6px; position:relative;
}
.main-nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:0; height:2px; background: var(--violet); transition: width .18s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ width:100%; }
.main-nav a[aria-current="page"]{ color: var(--violet-deep); font-weight:600; }

.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-cta{
  display:inline-flex; align-items:center; gap:9px;
  padding: 9px 18px;
  background: var(--ink);
  color:#fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 7px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s ease;
}
.nav-cta:hover{ background: var(--violet-deep); }
.nav-cta .cta-arrow{ display:inline-block; }
html[dir="rtl"] .nav-cta .cta-arrow{ transform: scaleX(-1); }

/* language selector — list-of-values style so more locales can be
   added later without redesigning the control */
.lang-select{
  position:relative; display:flex; align-items:center; gap:7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 30px 7px 14px; background: var(--paper);
}
html[dir="rtl"] .lang-select{ padding: 7px 14px 7px 30px; }
.lang-select svg{ width:16px; height:16px; color: var(--ink-soft); flex:0 0 auto; }
.lang-select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:0; background:transparent; cursor:pointer;
  font-family: var(--font-body); font-size: 0.85rem; color: var(--ink);
  padding-inline-end: 4px;
}
.lang-select select:focus-visible{ outline:0; }
.lang-select::after{
  content:""; position:absolute; inset-inline-end:14px; top:50%;
  width:6px; height:6px; margin-top:-4px;
  border-inline-end:1.6px solid var(--ink-soft); border-block-end:1.6px solid var(--ink-soft);
  transform: rotate(45deg); pointer-events:none;
}

.nav-toggle{
  display:none; border:0; background:transparent; cursor:pointer;
  width:40px; height:40px; padding:8px;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--ink); margin:6px 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:absolute; inset-inline: 0; top:100%; margin:0;
    background: var(--paper); border-top:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 8px 24px 20px;
    max-height:calc(100dvh - var(--mobile-header-height, 150px)); overflow-y:auto;
    transform: translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .main-nav.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .main-nav a{ width:100%; padding-block:12px; border-bottom:1px solid var(--line-soft); }
  .header-row{ flex-wrap:wrap; }
  .header-actions{ flex-wrap:wrap; }
  .nav-toggle{ flex-shrink:0; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 26px; font-family: var(--font-body); font-weight:600;
  font-size: 0.95rem; text-decoration:none; border-radius: 2px;
  border: 1px solid transparent; cursor:pointer; line-height:1;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--ink); color:#fff; }
.btn-primary:hover{ background: var(--violet-deep); }
.bg-ink .btn-primary{ background:#fff; color: var(--ink); }
.bg-ink .btn-primary:hover{ background: var(--violet); color:#fff; }

.btn-secondary{ background:transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover{ background: var(--ink); color:#fff; }
.bg-ink .btn-secondary{ color:#fff; border-color: rgba(255,255,255,0.5); }
.bg-ink .btn-secondary:hover{ background:#fff; color: var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 8px; }

.text-link{
  display:inline-flex; align-items:center; gap:7px;
  color: var(--violet-deep); text-decoration: none;
  text-underline-offset: 3px; font-weight:600;
}
.text-link > span:not(.link-arrow){ text-decoration:underline; }
.text-link .link-arrow{ display:inline-block; text-decoration:none; }
html[dir="rtl"] .text-link .link-arrow{ transform: scaleX(-1); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding-block: 50px 25px;
  position: relative; overflow: hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  column-gap: 40px;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; }
}
.hero h1{ margin-bottom: 0.4em; }
.hero .lede{ margin-bottom: 1.6em; }

.stat-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap:0;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
}
.stat{
  padding-inline: 22px; border-inline-start: 1px solid var(--line);
}
.stat:first-child{ border-inline-start:0; padding-inline-start:0; }
.stat b{
  display:block; font-family: var(--font-head); font-size: 1.5rem; color: var(--ink); margin-bottom: 4px;
}
.stat span{ font-size: 0.82rem; color: var(--ink-soft); line-height:1.35; }
@media (max-width: 640px){
  .stat-row{ grid-template-columns: 1fr; gap: 18px; }
  .stat{ border-inline-start:0; padding-inline-start:0; }
}

.hero-art{ display:flex; justify-content:right; }
.hero-art svg, .hero-art img{ width:100%; height:380px; max-width: 520px; }

/* =========================================================
   Category strip (Custom Software / Products & Platforms /
   GRC & Compliance / Cloud Solutions)
   ========================================================= */
.category-strip{
  border-block: 1px solid var(--line);
  background: var(--paper);
}
.category-strip .container{
  display:flex; flex-wrap:wrap; padding-block: 26px;
}
.cat-item{
  display:flex; align-items:center; gap:14px;
  padding-inline: 26px; flex: 1 1 220px;
  border-inline-start: 1px solid var(--line);
}
.cat-item:first-child{ border-inline-start: 0; padding-inline-start: 0; }
.cat-item .cat-icon{
  width:40px; height:40px; flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
}
.cat-item .cat-icon svg{ width:64px; height:64px; }
.cat-item h4{ margin:0; font-size: 0.98rem; font-weight:600; line-height:1.25; }
.cat-item span{ display:block; font-size: 0.82rem; color: var(--ink-soft); margin-top:2px; }
@media (max-width: 860px){
  .cat-item{ border-inline-start:0; flex: 1 1 45%; padding-inline-start:0; padding-block: 10px; }
}

/* =========================================================
   Diagonal section divider (echoes the logo's angled cut)
   ========================================================= */
.diagonal-top{
  clip-path: polygon(0 3.6vw, 100% 0, 100% 100%, 0 100%);
}
.diagonal-bottom{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.6vw), 0 100%);
}
html[dir="rtl"] .diagonal-top{ clip-path: polygon(0 0, 100% 3.6vw, 100% 100%, 0 100%); }
html[dir="rtl"] .diagonal-bottom{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3.6vw)); }

/* =========================================================
   Section headers
   ========================================================= */
.section-head{ max-width: 62ch; margin-bottom: 44px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.kicker{
  display:inline-block; color: var(--violet-deep); font-weight:600;
  font-size: 0.86rem; margin-bottom: 10px;
}

/* =========================================================
   Cards — flat, hairline border, colored edge instead of shadow
   ========================================================= */
.card-grid{
  display:grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .card-grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--paper); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--violet);
  padding: 28px 26px; border-radius: var(--radius);
}
.card.accent-teal{ border-inline-start-color: var(--teal); }
.card h3{ font-size: 1.18rem; margin-bottom: 10px; }
.card p{ font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0; max-width: none; }
.card ul{ margin: 12px 0 0; padding-inline-start: 18px; font-size: 0.93rem; color: var(--ink-soft); }
.card ul li{ margin-bottom: 5px; }
.card .card-link{ display:inline-block; margin-top:16px; font-size:0.9rem; }
.home-service-card{ display:flex; align-items:flex-start; gap:22px; }
.home-service-icon{ width:44px; height:44px; flex:0 0 44px; margin-top:4px; color:var(--violet-deep); }
.home-service-copy{ min-width:0; }

/* two-track / feature panels */
.panel-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 780px){ .panel-grid{ grid-template-columns: 1fr; } }
.panel{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 25px 32px;
}
.panel .num{ font-family: var(--font-head); font-size: 0.85rem; color: var(--teal); font-weight:700; }
.panel-icon{ width:36px; height:36px; margin-bottom:18px; color: var(--ink); }
.panel-icon svg{ width:100%; height:100%; }
.panel-heading{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.panel-heading .panel-icon{ flex:0 0 36px; margin-bottom:0; }
.panel-heading h3{ margin:0; min-width:0; }
.panel-title{ min-width:0; }
.panel-title .service-index{ display:block; margin-bottom:6px; }

/* section head with a "view all" link inline on the right */
.section-head-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 28px; margin-bottom: 44px;
}
.section-head-row .section-head{ margin-bottom:0; }
.section-head-row .text-link{ white-space:nowrap; flex:0 0 auto; padding-bottom: 4px; }
@media (max-width: 760px){
  .section-head-row{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* =========================================================
   Chips / tag lists
   ========================================================= */
.chip-list{ display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 0; padding:0; list-style:none; }
.chip-list li{
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 0.85rem; color: var(--ink-soft); background: var(--paper);
}

/* quick anchor nav used on Services page */
.quicknav{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 10px; padding: 18px 0 0; margin: 0 auto;
  list-style:none; position: sticky; top: 74px; z-index: 40;
  background: var(--linen); padding-block: 14px; border-bottom:1px solid var(--line);
}
.quicknav a{
  text-decoration:none; font-size: 0.85rem; color: var(--ink-soft);
  border:1px solid var(--line); padding:7px 14px; border-radius: 999px; background:var(--paper);
}
.quicknav a:hover{ color: var(--ink); border-color: var(--ink); }
.quicknav a[aria-current="location"]{
  background: var(--violet); color: var(--linen); border-color: var(--violet);
}

/* =========================================================
   Service detail rows (Services page)
   ========================================================= */
.service-block{ padding-block: 64px; border-bottom: 1px solid var(--line); scroll-margin-top: 150px; }
.service-block:last-of-type{ border-bottom:0; }
.service-head{
  display:flex; align-items:baseline; gap:16px; margin-bottom: 18px;
}
.service-head > div{ display:flex; flex-direction:column; gap:2px; }
.service-index{ font-family: var(--font-head); color: var(--teal); font-weight:700; font-size:1rem; }
.service-block.accent-violet .service-index{ color: var(--violet-deep); }
.service-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px){ .service-layout{ grid-template-columns: 1fr; } }
.service-layout ul{ margin:0; padding-inline-start: 18px; columns: 2; column-gap: 28px; }
@media (max-width: 560px){ .service-layout ul{ columns: 1; } }
.service-layout li{ margin-bottom: 8px; break-inside: avoid; font-size: 0.95rem; }

/* highlighted sub-block, e.g. Microsoft Cloud Security */
.subblock{
  margin-top: 20px; padding: 22px 24px; background: var(--linen);
  border-radius: var(--radius); border: 1px solid var(--line);
}
.subblock h4{ margin-bottom: 8px; font-size: 1.02rem; }
.service-block .subblock{ background: var(--violet); color: var(--linen); }
.service-block .subblock h4, .service-block .subblock p{ color: var(--linen); }

/* =========================================================
   Process stepper (Approach page — genuine sequence)
   ========================================================= */
.stepper{ display:grid; grid-template-columns: repeat(7,1fr); gap: 0; margin-top: 20px; }
@media (max-width: 980px){ .stepper{ grid-template-columns: repeat(4,1fr); } }
@media (max-width: 620px){ .stepper{ grid-template-columns: repeat(2,1fr); } }
.step{ position:relative; padding: 26px 14px 0; border-top: 3px solid var(--line); }
.step.is-active{ border-top-color: var(--violet); }
.step .step-no{
  font-family: var(--font-head); font-weight:700; color: var(--ink);
  font-size: 1.3rem; display:block; margin-bottom: 6px;
}
.step p{ font-size: 0.86rem; color: var(--ink-soft); max-width: none; }

/* tech expertise list */
.tech-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px 40px; }
@media (max-width: 700px){ .tech-grid{ grid-template-columns:1fr; } }
.tech-row{ padding-block: 16px; border-bottom: 1px solid var(--line); }
.tech-row h4{ margin-bottom: 4px; font-size: 1rem; color: var(--violet-deep); }
.tech-row p{ margin:0; font-size: 0.92rem; color: var(--ink-soft); }

/* =========================================================
   CTA band
   ========================================================= */
.tools-resources{ background:var(--violet-deep); }
.tools-resources-grid{ display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:64px; }
.tools-resources-intro h2,.tools-resources-intro p{ color:var(--linen); }
.tools-resources-intro .btn-secondary{ color:var(--linen); border-color:var(--linen); }
.tools-resource-card{ position:relative; display:flex; align-items:flex-start; gap:20px; padding:28px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.tools-resource-card::before{ content:""; position:absolute; inset-inline-start:-40px; top:30px; bottom:30px; width:32px; background:radial-gradient(circle,var(--linen) 1.5px,transparent 2px) 0 0/16px 16px; opacity:.65; }
.tools-resource-icon{ display:flex; align-items:center; justify-content:center; flex:0 0 54px; height:54px; border-radius:8px; background:var(--linen); color:var(--violet); }
.tools-resource-icon svg{ width:30px; height:30px; }
.tools-resource-label{ color:var(--teal); text-transform:uppercase; font-size:.75rem; font-weight:700; letter-spacing:.06em; }
.tools-resource-card h3{ font-size:1.05rem; margin:8px 0; color:var(--ink); }
.tools-resource-card p{ font-size:.9rem; color:var(--ink-soft); }
.tools-resource-link{ border:0; padding:0; background:none; font:inherit; }
@media(max-width:860px){ .tools-resources-grid{ grid-template-columns:1fr; gap:28px; } .tools-resource-card::before{ display:none; } }

.cta-band{
  background: var(--violet-deep); color:#fff; padding-block: 40px;
  position: relative;
}
.cta-band h2{ color:#fff; margin-bottom: 0.35em; }
.cta-band p{ color: rgba(255,255,255,0.85); }
.cta-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap: 32px; flex-wrap:wrap; }
.cta-band .btn-primary{ background:#fff; color: var(--ink); }
.cta-band .btn-primary:hover{ background: var(--linen); }
.cta-band .btn-secondary{ color:#fff; border-color: rgba(255,255,255,0.6); }
.cta-band .btn-secondary:hover{ background:#fff; color: var(--ink); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: var(--ink-deep); color: rgba(242,239,233,0.86);
  padding-block: 56px 28px;
  position: relative; overflow:hidden;
}
.site-footer::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height: 230px;
  background-image: url('../img/footer-wave.svg');
  background-repeat:no-repeat; background-size:100% 100%; background-position:bottom;
  pointer-events:none;
}
.site-footer .container{ position:relative; z-index:1; }

.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 190px; gap: 36px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .footer-grid{ grid-template-columns: 1fr; } }

.site-footer .brand img{ height: 30px; width:auto; }
.footer-col h5{ font-family: var(--font-head); font-size: 0.92rem; color:#fff; margin: 0 0 14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom: 10px; }
.footer-col a{ color: rgba(242,239,233,0.82); text-decoration:none; font-size: 0.92rem; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }

.footer-connect{
  border-inline-start: 1px solid rgba(255,255,255,0.16);
  padding-inline-start: 28px;
}
@media (max-width: 980px){
  .footer-connect{ border-inline-start:0; border-top:1px solid rgba(255,255,255,0.16); padding-inline-start:0; padding-top:24px; grid-column: 1 / -1; }
}
.footer-social{ display:flex; gap:10px; margin-bottom: 20px; }
.footer-social a{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); border-radius:7px; color:#fff;
  transition: background .15s ease;
}
.footer-social a:hover{ background: rgba(255,255,255,0.2); }
.footer-social svg{ width:16px; height:16px; }
.footer-tagline{
  color:#fff; font-family: var(--font-head); font-weight:600;
  font-size: 0.95rem; line-height:1.4; margin:0;
}

.footer-tagline span{ display:block; white-space:nowrap; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 22px; font-size: 0.82rem; color: rgba(242,239,233,0.6);
  flex-wrap:wrap; gap:14px;
}
.footer-legal{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.footer-legal a{ color:inherit; text-decoration:none; }
.footer-legal a:hover{ color:#fff; text-decoration:underline; }

/* =========================================================
   Forms (Contact page)
   ========================================================= */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: 0.86rem; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size: 0.98rem; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 130px; }
.form-note{ font-size: 0.82rem; color: var(--ink-soft); margin-top: 14px; }

.contact-layout{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items:start; }
@media (max-width: 860px){ .contact-layout{ grid-template-columns: 1fr; } }

.contact-info{ display:grid; gap: 22px; }
.contact-info .item{ padding: 20px 22px; background: var(--violet-deep); border:1px solid var(--ink-soft); border-radius: var(--radius); color:var(--linen); }
.contact-info .item h4{ margin-bottom: 4px; font-size: 0.98rem; color:var(--linen); }
.contact-info .item p{ margin:0; font-size: 0.92rem; color: var(--linen); }
.contact-info .item a{ color:var(--linen); }

/* =========================================================
   Error pages (400 / 403 / 404 / 500 / 502 / 503)
   ========================================================= */
.error-page{
  min-height: 56vh;
  display:flex; align-items:center; justify-content:center;
  padding-block: 90px;
}
.error-inner{ max-width: 560px; margin-inline:auto; text-align:center; }
.error-art{ width: 132px; margin: 0 auto 30px; }
.error-code{
  font-family: var(--font-head); font-weight:700;
  font-size: clamp(4rem, 3rem + 6vw, 7.2rem);
  line-height:1; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--ink), var(--violet-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.error-inner p.lede{ margin-inline:auto; }
.error-inner .btn-row{ justify-content:center; margin-top: 26px; }

/* =========================================================
   Misc utility
   ========================================================= */
.mt-0{ margin-top:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: 48px; align-items:center; }
@media (max-width: 860px){ .grid-2{ grid-template-columns:1fr; } }
.pull-quote{
  font-family: var(--font-head); font-size: var(--step-2); line-height:1.3;
  color: var(--ink); border-inline-start: 3px solid var(--violet);
  padding-inline-start: 22px; margin: 28px 0; max-width: 40ch;
}
.watermark{
  position:absolute; inset-inline-end: -60px; top: -40px; opacity:0.06;
  width: 360px; pointer-events:none;
}

/* Shared template text widths and footer introduction. */
.cta-description { max-width: 52ch; }
.footer-description { margin-top: 14px; max-width: 32ch; color: rgba(242,239,233,0.75); font-size: 0.92rem; }

/* About page template layout. */
.about-intro { max-width: 900px; }
.about-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.about-gear{ display:block; width:100%; max-width:520px; height:auto; justify-self:center; }
.about-values{ display:grid; gap:20px; border-inline-start:1px solid var(--line); padding-inline-start:48px; }
.about-value{ display:flex; align-items:center; gap:22px; }
.about-value-icon{ display:flex; align-items:center; justify-content:center; flex:0 0 52px; height:52px; border-radius:10px; background:var(--linen); color:var(--violet-deep); }
.about-value-icon svg{ width:30px; height:30px; }
.about-value-teal{ color:var(--teal); }
.about-value h4{ margin:0 0 4px; }
.about-value p{ margin:0; }
@media(max-width:860px){
  .about-hero-grid{ grid-template-columns:1fr; gap:24px; }
  .about-values{ border-inline-start:0; padding-inline-start:0; }
}
.about-areas-heading { margin-top: 40px; font-size: 1.1rem; }
.about-philosophy { max-width: 820px; }
.about-philosophy-row{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:center; gap:64px; }
.about-outlook{ display:flex; align-items:center; justify-content:center; gap:28px; }
.about-outlook-dots{ width:140px; height:140px; flex:0 0 140px; }
.about-outlook-tagline{ margin:0; max-width:9ch; }
.about-outlook-tagline::before{ content:""; display:block; width:38px; height:2px; background:var(--teal); margin-bottom:14px; }
@media(max-width:860px){
  .about-philosophy-row{ grid-template-columns:1fr; gap:28px; }
  .about-outlook{ justify-content:flex-start; }
}

/* Contact page and form feedback. */
.contact-intro { max-width: 820px; }
.contact-hero-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; }
.contact-hero-image{ display:block; width:100%; max-height:220px; object-fit:contain; }
@media(max-width:860px){ .contact-hero-grid{ grid-template-columns:1fr; gap:20px; } }
.contact-section { padding-top: 20; }
.contact-form { border-inline-start: 3px solid var(--violet); }
.contact-form-heading { font-size: 1.3rem; margin-bottom: 20px; }
.contact-submit { margin-top: 18px; }
.contact-info-heading { font-size: 1.05rem; margin-bottom: 16px; }
.contact-steps { grid-template-columns: repeat(3, 1fr); }
.contact-error, .contact-field-error { color: #a02232; }
.contact-error, .contact-success { padding: 12px; border: 1px solid currentColor; }
.contact-form .contact-error { color:#991b1b; background:#f5eeee; border-color:#e6bcbc; }
.contact-form .contact-success { color:#186b48; background:#edf7f0; border-color:#b8dcc6; }
.contact-field-error { font-size: .85rem; }
.field [aria-invalid="true"] { border-color: #a02232; }
@media (max-width: 620px) { .contact-steps { grid-template-columns: 1fr; } }

/* Services page template layout. */
.services-intro { max-width: 900px; }
.services-tagline { font-weight: 600; color: var(--violet-deep); }
.service-strap { font-weight: 600; }
.service-subbody { margin: 0; }
.services-cta { margin-top: 40px; }

/* Products page template layout. */
.products-intro { max-width: 900px; }
.product-name { margin-bottom: 2px; }
.product-tagline { margin: 0; font-weight: 600; color: var(--ink-soft); }
.product-walkthrough { margin-top: 20px; }
.products-cta { margin-top: 40px; }

/* Approach page template layout. */
.approach-intro { max-width: 900px; }
.approach-process { padding-top: 0; }
.approach-chips { align-self: start; }
.approach-cta-line { font-weight: 600; color: #fff; margin-top: 14px; }

/* =========================================================
   Legal pages (privacy / terms / cookies)
   ========================================================= */
.legal-hero{ padding-block: 56px 32px; }
.legal-hero h1{ margin-bottom: 12px; }
.legal-updated{
  display:inline-block; font-size: 0.85rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; background: var(--paper);
}

.legal-layout{
  display:grid; grid-template-columns: 240px 1fr; gap: 56px;
  align-items:start; padding-bottom: 90px;
}
@media (max-width: 900px){
  .legal-layout{ grid-template-columns: 1fr; gap: 28px; }
}

/* in-page contents list */
.legal-toc{
  position: sticky; top: 100px;
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 20px;
}
@media (max-width: 900px){
  .legal-toc{
    position: static; border-inline-start: 0; padding-inline-start: 0;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); padding: 22px 24px;
  }
}
.legal-toc h2{
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 14px;
}
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset: toc; }
.legal-toc li{ margin-bottom: 9px; counter-increment: toc; }
.legal-toc a{
  text-decoration:none; color: var(--ink-soft); font-size: 0.89rem; line-height:1.35;
  display:block;
}
.legal-toc a::before{
  content: counter(toc) ". "; color: var(--violet-deep); font-weight:600;
}
.legal-toc a:hover{ color: var(--violet-deep); }

/* the document body itself */
.legal-body{ max-width: 68ch; }
.legal-body > p:first-of-type{ font-size: var(--step-1); color: var(--ink-soft); }
.legal-section{
  padding-top: 36px; margin-top: 36px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.legal-section:first-of-type{ border-top:0; margin-top: 28px; padding-top:0; }
.legal-section h2{
  font-size: var(--step-2); margin-bottom: 14px;
  display:flex; align-items:baseline; gap: 12px;
}
.legal-section h2 .sec-no{
  font-family: var(--font-head); font-size: 0.95rem; color: var(--violet-deep);
  font-weight:700; flex:0 0 auto;
}
.legal-section h3{ font-size: 1.05rem; margin-top: 24px; margin-bottom: 8px; }
.legal-body p{ color: var(--ink-soft); }
.legal-body ul{ margin: 0 0 16px; padding-inline-start: 20px; color: var(--ink-soft); }
.legal-body li{ margin-bottom: 8px; }
.legal-body a{ color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }

/* highlighted note / placeholder callout */
.legal-note{
  background: var(--paper); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--radius); padding: 20px 22px; margin: 22px 0;
}
.legal-note p{ margin:0; font-size: 0.93rem; }
.legal-note strong{ color: var(--ink); }

/* simple data table used for cookie categories */
.legal-table-wrap{ overflow-x:auto; margin: 18px 0 22px; }
.legal-table{
  width:100%; border-collapse: collapse; font-size: 0.9rem;
  background: var(--paper); border: 1px solid var(--line);
}
.legal-table th, .legal-table td{
  text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table th{
  font-family: var(--font-head); font-weight:600; color: var(--ink);
  background: var(--linen); font-size: 0.85rem; white-space: nowrap;
}
.legal-table td{ color: var(--ink-soft); }
.legal-table tr:last-child td{ border-bottom: 0; }


/* =========================================================
   Cookie consent banner + preferences panel
   ========================================================= */
.cookie-consent{
  position: fixed; inset-inline: 0; bottom: 0; z-index: 300;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 40px rgba(32,26,76,0.14);
  transform: translateY(102%);
  transition: transform .28s ease;
  max-height: 88vh; overflow-y: auto;
}
.cookie-consent.is-visible{ transform: none; }

.cc-inner{
  display:flex; align-items:flex-start; gap: 34px;
  padding-block: 22px;
}
@media (max-width: 860px){
  .cc-inner{ flex-direction: column; gap: 18px; }
}

.cc-main{ flex: 1 1 auto; }
.cc-title{
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600;
  margin: 0 0 6px; color: var(--ink);
}
.cc-text{
  margin: 0 0 8px; font-size: 0.92rem; color: var(--ink-soft);
  max-width: 78ch; line-height: 1.55;
}
.cc-policy-link{
  font-size: 0.88rem; color: var(--violet-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

.cc-actions{
  display:flex; align-items:center; gap: 10px; flex: 0 0 auto;
  flex-wrap: wrap; padding-top: 4px;
}
@media (max-width: 860px){ .cc-actions{ width:100%; } }

.btn-cc{
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  padding: 11px 20px; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; line-height: 1; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-cc-solid{ background: var(--ink); color:#fff; }
.btn-cc-solid:hover{ background: var(--violet-deep); }
.btn-cc-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-cc-outline:hover{ background: var(--ink); color:#fff; }
.btn-cc-ghost{
  background: transparent; color: var(--violet-deep);
  border-color: var(--line); margin-inline-end: auto;
}
.btn-cc-ghost:hover{ border-color: var(--violet-deep); background: var(--linen); }
@media (max-width: 860px){ .btn-cc-ghost{ margin-inline-end: 0; } }

/* ---- preferences panel ---- */
.cc-prefs{
  border-top: 1px solid var(--line);
  background: var(--linen);
  padding-block: 22px 26px;
}
.cc-option{
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.cc-option:first-child{ padding-top: 0; }
.cc-option-head{ display:flex; align-items:center; gap: 12px; }
.cc-option-title{ font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.cc-always{
  font-size: 0.75rem; color: var(--teal); font-weight: 600;
  border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px;
}
.cc-option-body{
  margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-soft);
  max-width: 82ch; padding-inline-start: 56px;
}
@media (max-width: 560px){ .cc-option-body{ padding-inline-start: 0; } }
.cc-save{ margin-top: 22px; }

/* toggle switch */
.cc-switch{ position: relative; flex: 0 0 auto; width: 44px; height: 24px; }
.cc-switch input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.cc-slider{
  position:absolute; inset:0; border-radius: 999px;
  background: #cfcadf; transition: background .18s ease;
}
.cc-slider::before{
  content:""; position:absolute; top:3px; inset-inline-start:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(32,26,76,0.3);
}
.cc-switch input:checked + .cc-slider{ background: var(--violet-deep); }
.cc-switch input:checked + .cc-slider::before{ transform: translateX(20px); }
html[dir="rtl"] .cc-switch input:checked + .cc-slider::before{ transform: translateX(-20px); }
.cc-switch input:disabled + .cc-slider{ background: var(--teal); opacity: 0.55; }
.cc-switch input:disabled{ cursor: not-allowed; }
.cc-switch input:focus-visible + .cc-slider{
  outline: 2px solid var(--violet-deep); outline-offset: 3px;
}

/* ---- floating re-open button ---- */
.cookie-reopen{
  position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 290;
  display: none; align-items: center; gap: 0;
  background: var(--teal); color:#fff; border: 0; cursor: pointer;
  width: 46px; height: 46px; padding: 0 14px;
  border-radius: 999px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(32,26,76,0.28);
  transition: width .22s ease, background .15s ease;
}
.cookie-reopen.is-visible{ display: flex; }
.cookie-reopen svg{ width: 20px; height: 20px; flex: 0 0 auto; }
.cc-reopen-label{
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  white-space: nowrap; opacity: 0; margin-inline-start: 0;
  transition: opacity .18s ease, margin .22s ease;
}
.cookie-reopen:hover{ background: var(--teal); width: 190px; }
.cookie-reopen:hover .cc-reopen-label{ opacity: 1; margin-inline-start: 10px; }
.cookie-reopen:focus-visible{ background: var(--teal); width: 190px; }
.cookie-reopen:focus-visible .cc-reopen-label{ opacity:1; margin-inline-start:10px; }
@media (max-width: 560px){
  .cookie-reopen{ inset-inline-start: 14px; bottom: 14px; }
  .cookie-reopen:hover, .cookie-reopen:focus-visible{ width: 46px; }
  .cookie-reopen .cc-reopen-label{ display: none; }
}


.cookie-consent[hidden], .cookie-reopen[hidden], .cc-prefs[hidden]{ display:none; }
.cc-slider{ pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .cookie-consent, .cookie-reopen, .cc-reopen-label, .cc-slider, .cc-slider::before{ transition:none; }
}

/* =========================================================
   Cosmo chat widget
   ========================================================= */
.chat-launcher{
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 280;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 8px 26px rgba(32,26,76,0.32);
  transition: background .15s ease, transform .15s ease;
}
.chat-launcher:hover{ background: var(--teal); transform: translateY(-2px); }
.chat-launcher svg{ width: 24px; height: 24px; }
.chat-launcher-dot{
  position:absolute; top:0; right:0;
  width:12px; height:12px; box-sizing:border-box;
  border:2px solid #fff; border-radius:50%; background:var(--violet);
  pointer-events:none;
}
.chat-launcher-icon{ display: flex; position: absolute; transition: opacity .16s ease; }
.chat-launcher .chat-icon-close{ opacity: 0; }
.chat-launcher.is-open .chat-icon-open{ opacity: 0; }
.chat-launcher.is-open .chat-icon-close{ opacity: 1; }
.chat-launcher.is-open{ background: var(--teal); }

.chat-panel{
  position: fixed; inset-inline-end: 20px; bottom: 88px; z-index: 279;
  width: 380px; max-width: calc(100vw - 40px);
  height: 560px; max-height: calc(100vh - 130px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(32,26,76,0.26);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.chat-panel.is-open{ opacity: 1; transform: none; }
@media (max-width: 480px){
  .chat-panel{
    inset-inline: 10px; width: auto; bottom: 84px;
    height: calc(100vh - 110px);
  }
}

.chat-head{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--ink-deep), var(--ink));
  color: #fff; flex: 0 0 auto;
}
.chat-avatar{
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: #fff;
}
.chat-avatar svg{ width: 21px; height: 21px; }
.chat-id{ flex: 1 1 auto; min-width: 0; }
.chat-name{
  display: block; font-family: var(--font-head);
  font-size: 1rem; font-weight: 600; color: #fff; line-height: 1.2;
}
.chat-role{
  display: flex; align-items: center; gap: 6px;
  font-size: 0.76rem; color: rgba(242,239,233,0.72);
}
.chat-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #3ddc97; flex: 0 0 auto;
}
.chat-close{
  border: 0; background: transparent; color: rgba(255,255,255,0.75);
  cursor: pointer; padding: 6px; border-radius: 6px; flex: 0 0 auto;
  display: flex; transition: background .15s ease, color .15s ease;
}
.chat-close svg{ width: 18px; height: 18px; }
.chat-close:hover{ background: rgba(255,255,255,0.14); color: #fff; }

.chat-disclaimer{
  margin: 0; flex: 0 0 auto;
  padding: 9px 16px;
  background: var(--linen-dim);
  border-bottom: 1px solid var(--line);
  font-size: 0.74rem; color: var(--ink-soft); line-height: 1.4;
  max-width: none;
}

.chat-log{
  flex: 1 1 auto; overflow-y: auto;
  padding: 18px 16px; background: var(--linen);
  display: flex; flex-direction: column; gap: 12px;
}

.chat-msg{ display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chat-msg-user{ justify-content: flex-end; }
.chat-msg-avatar{
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
}
.chat-msg-avatar svg{ width: 16px; height: 16px; }
.chat-bubble{
  padding: 11px 14px; border-radius: 12px;
  font-size: 0.9rem; line-height: 1.5; max-width: 78%;
  white-space: pre-wrap; word-wrap: break-word;
}
.chat-msg-bot .chat-bubble{
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  border-start-start-radius: 4px;
}
.chat-msg-user .chat-bubble{
  background: var(--violet-deep); color: #fff;
  border-end-end-radius: 4px;
}

/* typing indicator */
.chat-typing .chat-bubble{ display: flex; gap: 4px; padding: 14px; }
.chat-typing .chat-bubble span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-soft); opacity: .4;
  animation: chatBlink 1.2s infinite;
}
.chat-typing .chat-bubble span:nth-child(2){ animation-delay: .2s; }
.chat-typing .chat-bubble span:nth-child(3){ animation-delay: .4s; }
@keyframes chatBlink{
  0%, 60%, 100%{ opacity: .25; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-3px); }
}

.chat-chips{
  display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto;
  padding: 0 16px 4px; background: var(--linen);
}
.chat-chips:empty{ padding: 0; }
.chat-chip{
  font-family: var(--font-body); font-size: 0.82rem;
  background: var(--paper); color: var(--violet-deep);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.chat-chip:hover{ border-color: var(--violet-deep); background: #fff; }

.chat-form{
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 12px 14px; background: var(--paper);
  border-top: 1px solid var(--line);
}
.chat-input{
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-body); font-size: 0.9rem;
  padding: 11px 14px; color: var(--ink);
  background: var(--linen);
  border: 1px solid var(--line); border-radius: 999px;
}
.chat-input:focus{ outline: none; border-color: var(--violet); background: #fff; }
.chat-send{
  width: 40px; height: 40px; flex: 0 0 auto; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.chat-send svg{ width: 18px; height: 18px; }
html[dir="rtl"] .chat-send svg{ transform: scaleX(-1); }
.chat-send:hover{ background: var(--violet-deep); }


.chat-panel[hidden]{display:none;}
.chat-log{min-height:0;}
.chat-contact{padding:8px 16px;font-size:.82rem;background:var(--paper);color:var(--violet-deep);text-decoration:underline;}
.chat-send:disabled{opacity:.5;cursor:wait;}
@media(prefers-reduced-motion:reduce){.chat-panel,.chat-launcher,.chat-launcher-icon{transition:none;}.chat-typing .chat-bubble span{animation:none;}}

/* =========================================================
   Tools section (Tools landing + individual tool pages)
   Reuses the existing design tokens only (--ink, --violet,
   --violet-deep, --teal, --linen, --paper, --line) - no new
   hues are introduced anywhere below.
   ========================================================= */

/* ---------- breadcrumb ---------- */
.tool-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size: 0.85rem; color: var(--ink-soft); padding-top: 22px;
}
.tool-breadcrumb a{ color: var(--ink-soft); text-decoration:none; }
.tool-breadcrumb a:hover{ color: var(--violet-deep); text-decoration:underline; }
.tool-breadcrumb span[aria-hidden]{ color: var(--line); }
.tool-breadcrumb .current{ color: var(--ink); font-weight:600; }

/* ---------- Tools index: search ---------- */
.tools-index-page .hero-grid > *,
.tools-index-page .tools-resources-grid > *,
.tools-index-page .tools-resource-card > div,
.uuid-generator-page .tool-layout > *,
.uuid-generator-page .tool-hero-grid > *{ min-width:0; }
.tools-index-page .tools-resource-card{ overflow-wrap:anywhere; }
.uuid-generator-page .tool-code-wrap{ min-width:0; max-width:100%; }
.uuid-generator-page #uuid-namespace-row > *{ min-width:0; }
@media(max-width:640px){
  .uuid-generator-page #uuid-namespace-row{ grid-template-columns:minmax(0,1fr) !important; }
  .tools-index-page .tools-resource-card{ flex-direction:column; }
  .uuid-generator-page .uuid-cta-benefits{ min-width:0; max-width:100%; }
  .uuid-generator-page .uuid-cta-benefit{ min-width:0; overflow-wrap:anywhere; }
}
.tool-search{ position:relative; max-width: 480px; margin-top: 22px; }
.tool-search svg{
  position:absolute; inset-inline-start:16px; top:50%; margin-top:-9px;
  width:18px; height:18px; color: var(--ink-soft); pointer-events:none;
}
.tool-search input{
  width:100%; font-family: var(--font-body); font-size: 0.98rem;
  padding: 13px 16px 13px 46px; border:1px solid var(--line);
  border-radius: 999px; background: var(--paper); color: var(--ink);
}
html[dir="rtl"] .tool-search svg{ inset-inline-start:auto; inset-inline-end:16px; }
html[dir="rtl"] .tool-search input{ padding: 13px 46px 13px 16px; }
.tool-search-tip{ font-size: 0.82rem; color: var(--ink-soft); margin-top: 12px; }

/* ---------- Tools index: category + popular tool cards ---------- */
.tool-grid{ display:grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .tool-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .tool-grid{ grid-template-columns: 1fr; } }
@media (max-width:640px){
  #popular-tools .tool-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #popular-tools .tool-tile{ min-width:0; flex-direction:column; align-items:flex-start; padding:16px; gap:12px; }
  #popular-tools .tool-tile-body{ width:100%; overflow-wrap:anywhere; }
}

.tool-tile{
  display:flex; align-items:flex-start; gap:16px;
  background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius); padding: 22px; text-decoration:none; color: inherit;
  transition: border-color .15s ease, transform .1s ease;
}
.tool-tile:hover{ border-color: var(--violet); transform: translateY(-2px); }
.tool-tile .tool-tile-icon{
  flex: 0 0 auto; width:44px; height:44px; border-radius: var(--radius);
  background: rgba(125,112,217,0.12); color: var(--violet-deep);
  display:flex; align-items:center; justify-content:center;
}
.tool-tile .tool-tile-icon svg{ width:22px; height:22px; }
.tool-tile-body{ min-width:0; flex:1 1 auto; }
.tool-category-arrow{ display:flex; align-items:center; justify-content:center; align-self:center; flex:0 0 28px; height:28px; border:1px solid var(--line); border-radius:50%; color:var(--violet-deep); }
.tool-category-arrow svg{ width:16px; height:16px; }
html[dir="rtl"] .tool-category-arrow svg{ transform:scaleX(-1); }
.tool-tile-body h4{ margin:0 0 3px; font-size: 1rem; }
.tool-tile-body span{ display:block; font-size: 0.86rem; color: var(--ink-soft); }
.tool-tile-arrow{ flex:0 0 auto; color: var(--ink-soft); margin-top:10px; }
html[dir="rtl"] .tool-tile-arrow svg{ transform: scaleX(-1); }

.tool-section-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 20px; margin-bottom: 26px; flex-wrap:wrap;
}
.tool-section-row .section-head{ margin-bottom:0; }

/* ---------- individual tool page: hero ---------- */
.tool-hero{ padding-block: 44px 20px; }
.tool-hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; column-gap: 40px; align-items:start; }
@media (max-width: 900px){ .tool-hero-grid{ grid-template-columns:1fr; } }
.tool-hero-icon{
  width:56px; height:56px; border-radius: var(--radius); margin-bottom: 18px;
  background: rgba(125,112,217,0.12); color: var(--violet-deep);
  display:flex; align-items:center; justify-content:center;
}
.tool-hero-icon svg{ width:28px; height:28px; }
.tool-hero h1{ margin-bottom: 0.3em; }
.uuid-hero-heading{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.uuid-hero-heading .tool-hero-icon{ flex:0 0 56px; margin-bottom:0; }
.uuid-hero-heading h1{ margin:0; min-width:0; }
.uuid-hero-image{ display:block; width:100%; max-width:497px; height:auto; }
.json-hero-heading{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.json-hero-heading .tool-hero-icon{ flex:0 0 56px; margin-bottom:0; }
.json-hero-heading h1{ margin:0; min-width:0; }
.json-hero-image{ display:block; width:100%; max-width:520px; height:auto; }
.password-hero-heading{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.password-hero-heading .tool-hero-icon{ flex:0 0 56px; margin-bottom:0; }
.password-hero-heading h1{ margin:0; min-width:0; }
.password-hero-image{ display:block; width:100%; max-width:520px; height:auto; }
.hash-hero-heading{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.hash-hero-heading .tool-hero-icon{ flex:0 0 56px; margin-bottom:0; }
.hash-hero-heading h1{ margin:0; min-width:0; }
.hash-hero-image{ display:block; width:100%; max-width:520px; height:auto; }
.jwt-hero-heading{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.jwt-hero-heading .tool-hero-icon{ flex:0 0 56px; margin-bottom:0; }
.jwt-hero-heading h1{ margin:0; min-width:0; }
.jwt-hero-image{ display:block; width:100%; max-width:520px; height:auto; }
.ssl-hero-heading{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.ssl-hero-heading .tool-hero-icon{ flex:0 0 56px; margin-bottom:0; }
.ssl-hero-heading h1{ margin:0; min-width:0; }
.ssl-hero-image{ display:block; width:100%; max-width:520px; height:auto; }
.jwt-decoded-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-block:18px; }
.jwt-decoded-grid > .tool-panel,
.jwt-decoded-grid > .tool-panel + .tool-panel{ margin-top:0; min-width:0; }
#jwt-input, #jwt-header-output, #jwt-payload-output, #jwt-signature-output{ display:block; box-sizing:border-box; width:100%; resize:vertical; }
#jwt-input{ min-height:64px; }
#jwt-header-output, #jwt-payload-output{ min-height:110px; }
#jwt-signature-output{ min-height:48px; }
@media(max-width:640px){ .jwt-decoded-grid{ grid-template-columns:1fr; } }
.password-tips{ margin-block:22px; }
.password-usecases{ border-inline-start:1px solid var(--line); padding-inline-start:36px; }
.password-usecases > h3{ font-size:var(--step-1); }
.password-usecase{ display:flex; align-items:flex-start; gap:22px; margin-top:20px; }
.password-usecase > svg{ width:32px; height:32px; flex:0 0 32px; color:var(--violet-deep); }
.password-usecase h4{ margin:0 0 4px; font-size:1rem; }
.password-usecase p{ margin:0; font-size:.9rem; }
@media(max-width:980px){ .password-usecases{ border:0; padding-inline-start:0; } }
.json-information-grid{ display:grid; grid-template-columns:1.3fr 1fr 1.1fr; gap:32px; align-items:start; }
.json-information-grid > div:nth-child(2){ border-inline-start:1px solid var(--line); padding-inline-start:28px; }
.json-info-cards{ display:grid; gap:18px; }
.json-info-card{ display:flex; align-items:flex-start; gap:18px; padding:24px; background:rgba(125,112,217,.08); border-radius:var(--radius); }
.json-info-card > svg{ width:36px; height:40px; flex:0 0 36px; color:var(--violet-deep); }
.json-info-card h4{ margin:0 0 8px; }
.json-info-card p{ font-size:.9rem; margin:0 0 10px; }
.json-load-sample{ background:none; border:0; padding:0; font:inherit; cursor:pointer; }
@media(max-width:980px){ .json-information-grid{ grid-template-columns:1fr; } .json-information-grid > div:nth-child(2){ border:0; padding-inline-start:0; } }
.tool-hero .lede{ font-weight:600; color: var(--ink-soft); margin-bottom: 0.5em; }
.tool-hero-note{ font-size: 0.9rem; color: var(--ink-soft); max-width: 46ch; }

.tool-hero-art{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height: 220px;
}
.tool-hero-art .art-box{
  width:150px; height:150px; border-radius: 18px;
  background: var(--paper); border:1px solid var(--line);
  box-shadow: 0 18px 40px rgba(32,26,76,0.10);
  display:flex; align-items:center; justify-content:center;
  color: var(--violet-deep);
}
.tool-hero-art .art-box svg{ width:56px; height:56px; }
.tool-hero-art .art-badge{
  position:absolute; top:8px; inset-inline-end: 22%;
  width:40px; height:40px; border-radius:50%;
  background: var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(47,157,148,0.35);
}
.tool-hero-art .art-badge svg{ width:20px; height:20px; }
.tool-hero-art .art-note{
  position:absolute; bottom:6px; inset-inline-start: 4%;
  font-family: var(--font-head); font-size: 0.85rem; color: var(--ink-soft);
  transform: rotate(-3deg); max-width: 150px; line-height:1.3;
}
html[dir="rtl"] .tool-hero-art .art-note{ transform: rotate(3deg); }

/* ---------- tool workspace layout: main + sidebar ---------- */
.tool-layout{ display:grid; grid-template-columns: 2.1fr 1fr; gap: 26px; align-items:start; }
@media (max-width: 980px){ .tool-layout{ grid-template-columns: 1fr; } }

.tool-panel{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px;
}
.tool-panel + .tool-panel{ margin-top: 18px; }
.tool-panel h3{ font-size: 1.05rem; margin-bottom: 16px; }

.tool-aside{ display:flex; flex-direction:column; gap: 18px; position: sticky; top: 90px; }
.related-tools h3{ font-size: 1rem; margin-bottom: 14px; }
.related-tools-list{ list-style:none; margin:0; padding:0; }
.related-tools-list li + li{ border-top:1px solid var(--line); }
.related-tools-list a{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
  padding-block: 13px;
}
.related-tools-list .icon{
  flex:0 0 auto; width:34px; height:34px; border-radius: var(--radius);
  background: rgba(125,112,217,0.12); color: var(--violet-deep);
  display:flex; align-items:center; justify-content:center;
}
.related-tools-list .icon svg{ width:17px; height:17px; }
.related-tools-list .copy{ min-width:0; flex:1 1 auto; }
.related-tools-list .copy b{ display:block; font-size: 0.92rem; font-weight:600; }
.related-tools-list .copy span{ display:block; font-size: 0.8rem; color: var(--ink-soft); }
.related-tools-list .chev{ flex:0 0 auto; color: var(--ink-soft); }

.ad-slot{
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--linen);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--ink-soft); font-size: 0.82rem; padding: 18px;
}
.ad-slot .ad-slot-inner b{ display:block; color: var(--ink); font-size:0.86rem; margin-bottom:3px; }
.ad-slot.leaderboard{ min-height: 90px; }
.ad-slot.rectangle{ min-height: 250px; }

.tool-callout{
  border:1px solid var(--line); border-inline-start: 3px solid var(--violet);
  border-radius: var(--radius); background: var(--paper);
  padding: 18px 20px; display:flex; gap:14px;
}
.tool-callout.accent-teal{ border-inline-start-color: var(--teal); }
.tool-callout svg{ flex:0 0 auto; width:22px; height:22px; color: var(--violet-deep); margin-top:2px; }
.tool-callout.accent-teal svg{ color: var(--teal); }
.tool-callout h4{ margin:0 0 4px; font-size: 0.96rem; }
.tool-callout p{ margin:0; font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- form controls used inside tool panels ---------- */
.tool-field{ margin-bottom: 18px; }
.tool-field:last-child{ margin-bottom:0; }
.tool-field label{ display:block; font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 8px; }
.tool-field textarea, .tool-field input[type="text"], .tool-field select{
  width:100%; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.92rem;
  padding: 13px 14px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--linen); color: var(--ink);
}
.tool-field select, .tool-field input[type="text"].plain{ font-family: var(--font-body); }
.tool-field textarea{ resize: vertical; min-height: 150px; }
.tool-field .char-count{ display:block; text-align:end; font-size:0.78rem; color: var(--ink-soft); margin-top:6px; }

.tool-checkbox-row{ display:flex; align-items:center; gap:10px; margin-bottom: 10px; font-size: 0.92rem; }
.tool-checkbox-row input{ width:17px; height:17px; accent-color: var(--violet-deep); }
.tool-checkbox-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap: 10px 14px; margin-bottom: 18px; }
@media (max-width: 700px){ .tool-checkbox-grid{ grid-template-columns: repeat(2,1fr); } }

.tool-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 18px; }
.tool-tab{
  font-family: var(--font-body); font-size: 0.88rem; font-weight:600;
  padding: 10px 16px; border-radius: var(--radius); border:1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor:pointer;
}
.tool-tab.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.tool-tab:not(.is-active):hover{ border-color: var(--violet); }

.tool-range-row{ display:flex; align-items:center; gap: 16px; }
.tool-range-row input[type="range"]{ flex:1 1 auto; accent-color: var(--violet-deep); }
.tool-range-row input[type="number"]{
  width: 68px; text-align:center; font-family: var(--font-body);
  padding: 8px; border:1px solid var(--line); border-radius: var(--radius);
}

.tool-output-row{ position:relative; }
.json-output-toolbar{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.json-output-toolbar .tool-copy-btn{ position:static; }
#json-output{ display:block; box-sizing:border-box; width:100%; min-height:156px; resize:vertical; }
#uuid-output, #pwd-output{ display:block; box-sizing:border-box; width:100%; min-height:54px; padding-inline-end:100px; resize:vertical; }
.tool-copy-btn{
  position:absolute; top:10px; inset-inline-end:10px;
  display:inline-flex; align-items:center; gap:6px;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 7px 12px; font-size: 0.8rem; font-weight:600; color: var(--ink);
  cursor:pointer;
}
.tool-copy-btn:hover{ border-color: var(--violet); color: var(--violet-deep); }
.tool-copy-btn svg{ width:14px; height:14px; }
.tool-copy-btn.is-copied{ color: var(--teal); border-color: var(--teal); }

.tool-strength{ margin-top: 14px; }
.tool-strength .label-row{ display:flex; justify-content:space-between; font-size:0.88rem; margin-bottom:8px; }
.tool-strength .bars{ display:grid; grid-template-columns: repeat(5,1fr); gap:6px; }
.tool-strength .bars span{ height:6px; border-radius:3px; background: var(--line); }
.tool-strength .bars span.filled{ background: var(--violet); }
.tool-strength[data-level="strong"] .bars span.filled{ background: var(--teal); }

/* ---------- status banners (valid / info / error) ---------- */
.tool-status{
  display:flex; align-items:flex-start; gap:14px;
  border-radius: var(--radius); border:1px solid var(--line);
  padding: 16px 18px; background: var(--paper); margin-bottom: 18px;
}
.tool-status svg{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; }
.tool-status b{ display:block; font-size:0.96rem; margin-bottom:2px; }
.tool-status p{ margin:0; font-size:0.86rem; color: var(--ink-soft); }
.tool-status.is-success{ border-color: rgba(47,157,148,0.4); background: rgba(47,157,148,0.07); }
.tool-status.is-success svg{ color: var(--teal); }
.tool-status.is-error{ border-inline-start: 3px solid var(--ink); }
.tool-status.is-error svg{ color: var(--ink); }
#json-status.is-error, #jwt-status.is-error, #dns-status.is-error{ background:#f8eeee; border:1px solid #e3b8bf; color:#8b2034; }
#json-status.is-error svg, #json-status.is-error b, #json-status.is-error p,
#jwt-status.is-error svg, #jwt-status.is-error b, #jwt-status.is-error p,
#dns-status.is-error svg, #dns-status.is-error b, #dns-status.is-error p{ color:#8b2034; }
#jwt-status, #ssl-status, #headers-status{ margin-top:18px; }
#dns-status, #dns-result-wrap{ margin-top:18px; }
#status-status{ margin-top:18px; }
.website-status-codes{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.website-status-codes li{ display:flex; align-items:center; gap:10px; font-size:.85rem; }
.website-status-codes .status-code-success{ --status-accent:#087d6b; --status-tint:#e4f5ee; }
.website-status-codes .status-code-redirect{ --status-accent:#3264c8; --status-tint:#eaf0ff; }
.website-status-codes .status-code-warning{ --status-accent:#986000; --status-tint:#fff2d5; }
.website-status-codes .status-code-error{ --status-accent:#ad263b; --status-tint:#fce8ec; }
.status-code-marker{ display:grid; place-items:center; flex:0 0 16px; height:16px; border-radius:50%; background:var(--status-accent); color:white; font-size:11px; }
.status-code-badge{ padding:2px 6px; border-radius:var(--radius); color:var(--status-accent); background:var(--status-tint); font-weight:600; }
#dns-status:not([hidden]) + #dns-result-wrap{ margin-top:0; }
.dns-record-types{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.dns-record-types li{ display:flex; align-items:center; gap:16px; font-size:.9rem; }
.dns-record-badge{ flex:0 0 64px; text-align:center; padding:3px 6px; border-radius:var(--radius); background:rgba(125,112,217,.08); color:var(--violet-deep); font-weight:600; font-size:.85rem; }
.tool-status.is-neutral svg{ color: var(--violet-deep); }
.tool-status[hidden]{ display:none; }

/* ---------- key/value result table (reuses .legal-table look) ---------- */
.tool-kv-table{ width:100%; border-collapse:collapse; font-size:0.9rem; background:var(--paper); border:1px solid var(--line); }
.tool-kv-table th, .tool-kv-table td{ text-align:start; padding: 11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.tool-kv-table th{ width: 34%; font-weight:600; color: var(--ink); background: var(--linen); white-space:nowrap; }
.tool-kv-table td{ color: var(--ink-soft); word-break: break-word; }
.tool-kv-table tr:last-child th, .tool-kv-table tr:last-child td{ border-bottom:0; }
.tool-kv-table .pill{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.8rem; font-weight:600;
  background: rgba(47,157,148,0.12); color: var(--teal);
}
.tool-kv-table .pill.is-warn{ background: rgba(32,26,76,0.08); color: var(--ink); }

.tool-records-table-wrap{ overflow-x:auto; }
.tool-records-table{ width:100%; border-collapse:collapse; font-size:0.88rem; background:var(--paper); border:1px solid var(--line); }
.tool-records-table th, .tool-records-table td{ text-align:start; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tool-records-table td:nth-child(3){ white-space:normal; word-break:break-all; }
.tool-records-table th{ background:var(--linen); font-weight:600; color:var(--ink); }
.tool-records-table td{ color: var(--ink-soft); }
.tool-records-table tr:last-child td{ border-bottom:0; }

/* ---------- accordion (native details/summary, no JS needed) ---------- */
.tool-accordion{ border-top:1px solid var(--line); }
.tool-accordion details{ border-bottom:1px solid var(--line); }
.tool-accordion summary{
  cursor:pointer; list-style:none; padding: 16px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-family: var(--font-head); font-weight:600; font-size:0.98rem; color: var(--ink);
}
.tool-accordion summary::-webkit-details-marker{ display:none; }
.tool-accordion summary::after{
  content:""; flex:0 0 auto; width:9px; height:9px;
  border-inline-end:2px solid var(--ink-soft); border-block-end:2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s ease;
}
.tool-accordion details[open] summary::after{ transform: rotate(-135deg); }
.tool-accordion .accordion-body{ padding: 0 4px 18px; color: var(--ink-soft); font-size:0.93rem; }
.uuid-information .product-name{ margin-bottom:16px; }
.uuid-code-row{ margin-top:32px; }
.hash-examples .product-name{ margin-bottom:8px; }
.hash-guidance-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.hash-guidance-card{ display:flex; align-items:flex-start; gap:20px; padding:26px; border:1px solid rgba(125,112,217,.18); border-radius:var(--radius); background:rgba(125,112,217,.06); }
.hash-guidance-icon{ width:38px; height:42px; flex:0 0 38px; color:var(--violet); }
.hash-guidance-card h4{ font-size:1rem; margin:0 0 10px; }
.hash-guidance-card p{ margin:0; font-size:.93rem; }
.hash-guidance-uses{ background:rgba(47,157,148,.06); border-color:rgba(47,157,148,.18); }
.hash-guidance-uses > svg{ color:var(--teal); }
.jwt-auth-contact{ margin-top:14px; }
.ssl-information{ background:var(--linen-dim); }
.ssl-information-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; }
.ssl-information-grid > div + div{ border-inline-start:1px solid var(--line); padding-inline-start:28px; }
.ssl-information-grid h3, .ssl-information-grid h4{ font-size:var(--step-1); margin:0 0 16px; }
.ssl-usecases{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.ssl-usecases li{ display:flex; align-items:flex-start; gap:16px; }
.ssl-usecases svg{ width:28px; height:28px; flex:0 0 28px; color:var(--violet-deep); }
.ssl-usecases h5{ margin:0 0 3px; font-size:.95rem; }
.ssl-usecases p{ margin:0; font-size:.85rem; }
@media(max-width:980px){
  .ssl-information-grid{ grid-template-columns:1fr; }
  .ssl-information-grid > div + div{ border-inline-start:0; border-top:1px solid var(--line); padding-inline-start:0; padding-top:24px; }
}
.jwt-information{ background:var(--linen-dim); }
.jwt-information-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:36px; }
.jwt-usecases{ border-inline-start:1px solid var(--line); padding-inline-start:36px; }
@media(max-width:780px){
  .jwt-information-grid{ grid-template-columns:1fr; gap:24px; }
  .jwt-usecases{ border-inline-start:0; border-top:1px solid var(--line); padding-inline-start:0; padding-top:24px; }
}
@media(max-width:860px){ .hash-guidance-grid{ grid-template-columns:1fr; } }
.hash-examples-main{ min-width:0; }
.hash-examples .tool-tabs{ display:flex; }
.hash-examples .tool-tab{ flex:1; }
.hash-examples .tool-code-block{ padding-top:58px; }
.hash-example-output{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; min-width:0; }
.hash-example-output h3{ font-size:1rem; margin:0 0 16px; }
.hash-example-output dl{ margin:0; font-family:"SFMono-Regular",Consolas,monospace; font-size:.85rem; color:var(--ink-soft); }
.hash-example-output dt{ font-weight:700; color:var(--ink); }
.hash-example-output dd{ margin:0 0 16px; overflow-wrap:anywhere; }
.hash-example-output dd:last-child{ margin-bottom:0; }
.uuid-leaderboard{ margin-top:32px; }
.uuid-cta-inner{ align-items:center; }
.dns-cta-inner{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; }
@media(max-width:780px){ .dns-cta-inner{ grid-template-columns:1fr; } }
.uuid-cta-benefits{ display:grid; grid-template-columns:repeat(3,1fr); flex:0 1 440px; }
.uuid-cta-benefit{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding-inline:20px; color:var(--linen); }
.uuid-cta-benefit + .uuid-cta-benefit{ border-inline-start:1px solid rgba(255,255,255,.3); }
.uuid-cta-benefit svg{ width:32px; height:32px; }
.uuid-cta-benefit span{ font-family:var(--font-head); font-size:.85rem; font-weight:600; max-width:14ch; }
@media(max-width:480px){ .uuid-cta-benefit{ padding-inline:10px; } }
.uuid-code-examples .tool-code-block{ padding-top:58px; }
.uuid-information .tool-accordion{ border:0; display:grid; gap:8px; }
.uuid-information .tool-accordion details{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); }
.uuid-information .tool-accordion summary{ padding:16px 22px; }
.uuid-information .tool-accordion .accordion-body{ padding:0 22px 18px; }
.uuid-information-aside{ display:grid; gap:26px; }
.uuid-info-card{ padding:26px; background:rgba(125,112,217,.08); border-radius:var(--radius); }
.uuid-info-card h3{ font-size:1.1rem; margin:0 0 16px; }
.uuid-info-card p{ margin:0; font-size:.93rem; }
.uuid-good-to-know{ display:flex; align-items:flex-start; gap:18px; }
.uuid-good-to-know > svg{ width:38px; height:44px; flex:0 0 38px; color:var(--violet-deep); }
.uuid-good-to-know h3{ margin-bottom:8px; }

/* ---------- code examples ---------- */
.tool-code-wrap{ position:relative; }
.tool-code-block{
  background: var(--ink-deep); color:#e7e4f7; border-radius: var(--radius);
  padding: 20px 22px; font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.86rem; line-height:1.6; overflow-x:auto; white-space:pre;
}
.tool-code-panel[hidden]{ display:none; }

/* ---------- use case / why-use grid ---------- */
.tool-usecase-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 18px 28px; }
@media (max-width: 640px){ .tool-usecase-grid{ grid-template-columns:1fr; } }
.tool-usecase{ display:flex; gap:14px; align-items:flex-start; }
.tool-usecase .icon{ flex:0 0 auto; width:34px; height:34px; color: var(--violet-deep); }
.tool-usecase .icon svg{ width:100%; height:100%; }
.tool-usecase h4{ margin:0 0 3px; font-size:0.96rem; }
.tool-usecase p{ margin:0; font-size:0.86rem; color: var(--ink-soft); }

.tool-check-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.tool-check-list li{ display:flex; gap:10px; align-items:flex-start; font-size:0.93rem; color: var(--ink-soft); }
.tool-check-list svg{ flex:0 0 auto; width:18px; height:18px; color: var(--teal); margin-top:2px; }

/* ---------- trust / resources strips reused from the Tools index ---------- */
.tools-trust-strip{ background: var(--linen-dim); padding-block: 44px; }
.tools-trust-grid{ display:grid; grid-template-columns: 1.3fr repeat(4, auto); gap: 28px; align-items:center; }
@media (max-width: 900px){ .tools-trust-grid{ grid-template-columns: 1fr; } }
.tools-trust-stat{ position:relative; text-align:center; }
.tools-trust-stat + .tools-trust-stat::before{ content:""; position:absolute; inset-inline-start:-14px; top:0; bottom:0; width:1px; background:var(--line); }
@media(max-width:900px){ .tools-trust-stat + .tools-trust-stat::before{ inset-inline:25%; top:-14px; bottom:auto; width:auto; height:1px; } }
.tools-trust-stat .icon{ width:34px; height:34px; margin:0 auto 8px; color: var(--violet-deep); }
.tools-trust-stat .icon svg{ width:100%; height:100%; }
.tools-trust-stat span{ display:block; font-size:0.85rem; color: var(--ink-soft); line-height:1.3; }