/* ============================================================
   LOOMI WEB — shared site stylesheet
   Design language mirrored from the landing page: soft blurred
   nature photography behind crisp white UI, teal-blue brand,
   Newsreader serif headings + Hanken Grotesk body.
   Loaded by every page except the (self-contained) home hero,
   whose bespoke sections keep their own inline styles.
   ============================================================ */

:root{
  --canvas:#F4F3F1;
  --surface:#FFFFFF;
  --surface-2:#ECEAE4;
  --ink:#17150F;
  --ink-soft:#3B3934;
  --body:#55524B;
  --muted:#8B877E;
  --line:#E4E0D8;
  --line-strong:#CFC9BE;

  --accent:#0E9AAB;
  --accent-deep:#0A7E8D;
  --accent-soft:#E3F5F7;
  --violet-200:#22C8DB;
  --stat:#0E9AAB;
  --amber:#F5A623;
  --rose:#FF7A59;

  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap:1200px;
  --radius:18px;
  --pill:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 28px}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:300;margin:0}
h1{font-size:clamp(38px,5vw,66px);line-height:1.06;letter-spacing:-.022em}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:clamp(21px,2.3vw,27px);line-height:1.16;letter-spacing:-.012em}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.lead{font-size:19px;line-height:1.55;color:var(--ink-soft)}
.hl{color:var(--accent);font-style:italic}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--pill);
  font-weight:500;font-size:15px;padding:12px 22px;border:1px solid transparent;transition:.22s ease;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(10,126,141,.7)}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-block{width:100%}
.arrow-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--ink)}
.arrow-link svg{transition:transform .25s}
.arrow-link:hover svg{transform:translateX(4px)}
.arrow-link.accent{color:var(--accent)}
.arrow-link.on-photo{color:#fff}

/* ---------- photo backgrounds ---------- */
.photo{position:absolute;inset:0;overflow:hidden;z-index:0}
.photo img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover}
.photo.blur img{filter:blur(16px) saturate(1.08)}
.photo.blur-sm img{filter:blur(6px) saturate(1.05)}
.scrim{position:absolute;inset:0;z-index:1}
.scrim.dark{background:rgba(18,16,26,.46)}
.scrim.darker{background:rgba(14,12,22,.6)}
.scrim.tint{background:rgba(20,130,146,.30)}
.scrim.light{background:rgba(244,243,241,.18)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ============================================================ NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:76px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav .wrap{display:flex;align-items:center;gap:34px;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;background:transparent;border:1px solid transparent;border-radius:0;box-shadow:none;
  transition:max-width .55s cubic-bezier(.5,.05,.15,1),margin-top .55s,padding .5s,gap .45s,background .5s,border-color .5s,border-radius .55s,box-shadow .5s}
.nav.scrolled .wrap{max-width:940px;margin-top:12px;gap:16px;padding:8px 8px 8px 22px;background:rgba(248,247,244,.6);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);border-color:rgba(255,255,255,.6);border-radius:var(--pill);box-shadow:0 16px 44px -16px rgba(23,21,15,.3),inset 0 1px 0 rgba(255,255,255,.7)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.nav .brand{flex:1 1 0;min-width:0}
.brand .mark{width:30px;height:30px;flex:none}
img.mark{object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:8px;transition:background .5s,padding .5s,border-color .5s,gap .45s,margin-left .5s}
.nav.scrolled .nav-links{background:rgba(255,255,255,.5);border:1px solid rgba(23,21,15,.06);border-radius:var(--pill);padding:9px 18px;margin-left:0;gap:20px}
.nav-links a,.nav-links button{background:none;border:none;color:var(--ink-soft);font-size:15px;font-weight:500;padding:0;display:inline-flex;align-items:center;gap:5px;transition:color .18s;cursor:pointer}
.nav-links a:hover,.nav-links button:hover,.nav-links a.current{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:14px;flex:1 1 0;justify-content:flex-end;min-width:max-content}
.nav-right .login{font-size:15px;font-weight:500;color:var(--ink-soft);white-space:nowrap;flex:none}
.nav-right .login:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:none;color:var(--ink);padding:6px}
.dropdown{position:relative}
.dropdown-panel{position:absolute;top:calc(100% + 14px);left:-16px;width:300px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 24px 60px -24px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.dropdown:hover .dropdown-panel,.dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;transform:none}
.dropdown-panel a{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:11px;align-items:flex-start}
.dropdown-panel a:hover{background:var(--surface-2)}
.dropdown-panel a b{color:var(--ink);font-weight:600;font-size:14px}
.dropdown-panel a span{color:var(--muted);font-size:12.5px;font-weight:400}

/* ---------- mobile menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:200;background:var(--canvas);padding:24px;transform:translateX(100%);transition:.3s;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.mobile-menu.open{transform:none}
.mobile-menu .mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mobile-menu a{padding:15px 8px;font-size:19px;font-family:var(--serif);color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-menu .mcta{margin-top:24px;display:flex;flex-direction:column;gap:12px}

/* ============================================================ PAGE HERO (inner pages) */
.page-hero{position:relative;padding:150px 0 56px}
.page-hero.tight{padding:132px 0 40px}
.page-hero-inner{position:relative;z-index:1;max-width:820px}
.page-hero.center .page-hero-inner{max-width:760px;margin:0 auto;text-align:center}
.page-hero h1{margin:14px 0 0}
.page-hero p.lead{margin:20px 0 0;max-width:60ch}
.page-hero.center p.lead{margin-left:auto;margin-right:auto}
.page-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.page-hero.center .hero-cta{justify-content:center}

/* photo-backed dark hero variant */
.hero-photo{position:relative;overflow:hidden;color:#fff;padding:158px 0 70px}
.hero-photo .page-hero-inner h1{color:#fff}
.hero-photo .eyebrow{color:#fff}.hero-photo .eyebrow::before{background:#fff}
.hero-photo p.lead{color:rgba(255,255,255,.92)}

/* breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{opacity:.6}

/* ============================================================ SECTIONS */
.section{padding:72px 0}
.section.pt0{padding-top:0}
.section.tight{padding:48px 0}
.section.alt{background:var(--surface)}
.section.ink{background:var(--ink);color:#fff}
.section.ink h1,.section.ink h2,.section.ink h3{color:#fff}
.section-head{max-width:640px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{margin-top:16px}
.section-head p{margin-top:14px;font-size:17px;color:var(--body)}
.section.ink .section-head p{color:#c4ccd8}

/* ============================================================ GRIDS + CARDS */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card.pad-lg{padding:34px}
.card h3{font-size:21px}
.card p{font-size:14.5px;margin:10px 0 0;color:var(--body)}
.card.hover{transition:.25s}
.card.hover:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(0,0,0,.32);border-color:var(--line-strong)}

.icon-badge{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:18px;flex:none}
.icon-badge.ink{background:var(--ink);color:#fff}
.section.ink .icon-badge{background:rgba(14,154,171,.22);color:var(--violet-200)}

/* feature row (icon + text list) */
.feature-list{display:flex;flex-direction:column;gap:22px}
.feature-row{display:flex;gap:16px;align-items:flex-start}
.feature-row .fi{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.feature-row b{color:var(--ink);font-weight:600;font-size:16px;display:block;font-family:var(--sans)}
.feature-row p{font-size:14.5px;color:var(--body);margin:6px 0 0}

/* split media block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-media{order:-1}
.split-media{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:360px;background:var(--surface-2)}
.split-copy h2{margin-top:14px}
.split-copy .lead{margin-top:16px}
.split-copy .feature-list{margin-top:26px}

/* numbered steps */
.steps{display:grid;gap:22px}
.step{display:flex;gap:18px;align-items:flex-start}
.step .sn{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:18px;flex:none}
.step b{color:var(--ink);font-family:var(--sans);font-weight:600;font-size:17px;display:block}
.step p{margin:6px 0 0;font-size:14.5px;color:var(--body)}

/* stat / metric row */
.stats-row{display:flex;flex-wrap:wrap;gap:56px}
.stats-row.center{justify-content:center}
.stat .num{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4vw,54px);line-height:1;color:var(--ink);letter-spacing:-.02em}
.section.ink .stat .num{color:#fff}
.stat .lbl{font-size:14px;color:var(--muted);font-weight:500;margin-top:8px}
.section.ink .stat .lbl{color:#aeb7c6}

/* pill / badge */
.pill-tag{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.pill-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pill-tag.green .dot{background:var(--stat)}

/* callout / note */
.callout{background:var(--accent-soft);border:1px solid var(--violet-200);border-radius:14px;padding:18px 20px;font-size:14.5px;color:var(--ink-soft);display:flex;gap:12px;align-items:flex-start}
.callout .ci{color:var(--accent);flex:none;margin-top:1px}
.callout.warn{background:#FFF6E9;border-color:#F3D9A6}
.callout.warn .ci{color:#0E9AAB}

/* ============================================================ PROSE (legal, blog, about) */
.prose{color:var(--body);font-size:16.5px;line-height:1.72;max-width:74ch}
.prose>*+*{margin-top:20px}
.prose h2{font-size:clamp(24px,3vw,32px);margin-top:52px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin-top:34px;scroll-margin-top:100px}
.prose h4{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);margin-top:26px}
.prose p{margin-top:16px}
.prose a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent)}
.prose ul,.prose ol{margin-top:16px;padding-left:24px}
.prose li{margin-top:9px}
.prose li::marker{color:var(--accent)}
.prose strong,.prose b{color:var(--ink-soft);font-weight:600}
.prose blockquote{margin:24px 0;padding:6px 0 6px 22px;border-left:3px solid var(--accent);font-family:var(--serif);font-size:20px;color:var(--ink-soft);font-style:italic}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:2px 6px;border-radius:6px;color:var(--ink-soft)}
.prose table{width:100%;border-collapse:collapse;margin-top:22px;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:11px 14px;border:1px solid var(--line)}
.prose th{background:var(--surface-2);color:var(--ink);font-weight:600}
.legal-updated{font-size:13.5px;color:var(--muted);font-weight:500}

/* two-column legal layout with sticky TOC */
.doc-grid{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:104px}
.toc h4{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 14px}
.toc a{display:block;font-size:13.5px;color:var(--body);padding:6px 0;line-height:1.4;border-left:2px solid var(--line);padding-left:14px;margin-left:-2px;transition:.18s}
.toc a:hover,.toc a.active{color:var(--ink);border-color:var(--accent)}

/* ============================================================ FAQ / accordion */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);cursor:pointer}
.faq-q .fx{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--accent);transition:.25s}
.faq-item.open .fx{transform:rotate(45deg);background:var(--accent);color:#fff;border-color:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq-a-inner{padding:0 4px 24px;font-size:15.5px;line-height:1.65;color:var(--body);max-width:70ch}

/* ============================================================ PRICING */
.pricing-toggle{display:inline-flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:6px;font-size:14px;font-weight:600}
.pricing-toggle button{border:none;background:none;padding:8px 16px;border-radius:var(--pill);color:var(--muted);transition:.2s;font-weight:600}
.pricing-toggle button.active{background:var(--ink);color:#fff}
.pricing-toggle .save{color:var(--stat);font-size:12.5px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column}
.price-card.feat{border-color:var(--accent);box-shadow:0 30px 70px -40px rgba(14,154,171,.6);position:relative}
.price-card.feat::before{content:"Most popular";position:absolute;top:-12px;left:30px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:var(--pill)}
.price-card .pname{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.02em}
.price-card .pdesc{font-size:14px;color:var(--muted);margin:8px 0 20px;min-height:40px}
.price-card .amount{font-family:var(--serif);font-weight:300;font-size:52px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.price-card .amount small{font-family:var(--sans);font-size:15px;color:var(--muted);font-weight:500}
.price-card .setup{font-size:13px;color:var(--muted);margin-top:8px}
.price-card .btn{margin:24px 0 22px}
.price-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.price-card ul li{display:flex;gap:10px;font-size:14px;color:var(--ink-soft);line-height:1.4}
.price-card ul li svg{flex:none;color:var(--accent);margin-top:2px}
.price-card ul li.off{color:var(--muted)}
.price-card ul li.off svg{color:var(--line-strong)}

/* comparison table */
.compare{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.compare thead th{background:var(--surface-2);color:var(--ink);font-weight:700;font-family:var(--sans)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center;width:150px}
.compare tbody tr:last-child td{border-bottom:none}
.compare .yes{color:var(--stat)}
.compare .no{color:var(--line-strong)}
.compare .rowhead{font-weight:600;color:var(--ink-soft)}

/* ============================================================ FORMS */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--canvas);
  border:1px solid var(--line-strong);border-radius:11px;padding:12px 14px;transition:.18s;outline:none}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:6px}
.form-success{display:none;background:#E3F5F7;border:1px solid #B8E6EA;border-radius:14px;padding:20px 22px;color:#0A6E7B;font-size:15px}
.form-success.show{display:block}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--body);line-height:1.5}
.checkbox input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--accent)}

/* auth layout */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-panel{padding:120px 40px 60px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.auth-card{width:100%;max-width:400px}
.auth-card .brand{margin-bottom:28px}
.auth-card h1{font-size:clamp(30px,4vw,40px);margin-bottom:8px}
.auth-card .sub{color:var(--body);margin-bottom:28px}
.auth-aside{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:56px}
.auth-aside .aside-inner{position:relative;z-index:2;max-width:460px}
.auth-aside blockquote{font-family:var(--serif);font-weight:300;font-size:28px;line-height:1.3;color:#fff;margin:0}
.auth-aside .cite{margin-top:20px;font-size:14px;color:rgba(255,255,255,.85)}
.auth-aside .cite b{color:#fff;font-weight:600}
.oauth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-strong);
  background:#fff;border-radius:11px;padding:12px;font-weight:600;font-size:14.5px;color:var(--ink);transition:.18s;margin-bottom:12px}
.oauth-btn:hover{border-color:var(--ink)}
.auth-sep{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12.5px;margin:20px 0}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-alt{text-align:center;margin-top:22px;font-size:14px;color:var(--body)}
.auth-alt a{color:var(--accent);font-weight:600}

/* ============================================================ CTA band (reusable) */
.cta{padding:60px 0}
.cta-inner{position:relative;border-radius:28px;padding:72px 44px;text-align:center;color:#fff;overflow:hidden}
.cta-inner>*{position:relative;z-index:2}
.cta-inner>.photo{position:absolute;z-index:0}.cta-inner>.scrim{position:absolute;z-index:1}
.cta-inner .eyebrow{color:#fff;justify-content:center}.cta-inner .eyebrow::before{background:#fff}
.cta-inner h2{color:#fff;max-width:20ch;margin:16px auto 12px}
.cta-inner p{color:rgba(255,255,255,.92);max-width:54ch;margin:0 auto 28px}
.cta-inner .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================ BLOG */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(0,0,0,.32)}
.post .cover{height:186px;position:relative;overflow:hidden}
.post .cover .tag{position:absolute;left:14px;top:14px;z-index:2;background:rgba(23,21,15,.62);color:#fff;font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--pill);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.post .pb{padding:22px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:20px;line-height:1.2}
.post .meta{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:16px;display:flex;gap:8px;align-items:center}
.post .excerpt{font-size:14px;color:var(--body);margin-top:10px}
.post-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.post-featured .cover{min-height:340px;position:relative;overflow:hidden}
.post-featured .pb{padding:40px;display:flex;flex-direction:column;justify-content:center}
.post-featured h2{margin:14px 0}

/* customers */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.case:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(0,0,0,.32)}
.case .cover{height:170px;position:relative;overflow:hidden}
.case .cb{padding:24px;display:flex;flex-direction:column;flex:1}
.case .metric{font-family:var(--serif);font-weight:300;font-size:44px;line-height:1;color:var(--accent);letter-spacing:-.02em}
.case .metric-l{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-top:4px}
.case p{font-size:14px;color:var(--body);margin:14px 0 0}
.case .who{margin-top:auto;padding-top:18px;font-size:13px;color:var(--muted);font-weight:600}

/* logo row */
.logo-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.logo-chip{display:inline-flex;align-items:center;gap:9px;color:var(--ink-soft);font-weight:700;font-size:15px;opacity:.72;transition:.2s}
.logo-chip:hover{opacity:1}
.logo-chip .lm{width:26px;height:26px;border-radius:7px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent)}

/* status page */
.status-banner{display:flex;align-items:center;gap:14px;background:#E3F5F7;border:1px solid #B8E6EA;border-radius:16px;padding:22px 24px}
.status-banner .sdot{width:14px;height:14px;border-radius:50%;background:var(--stat);box-shadow:0 0 0 4px rgba(14,154,171,.2);flex:none}
.status-banner b{color:#0A6E7B;font-size:18px;font-family:var(--sans);font-weight:700}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;border-bottom:1px solid var(--line)}
.status-row .sname{font-weight:600;color:var(--ink);font-size:15px}
.status-row .sstate{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--stat)}
.status-row .sstate .d{width:9px;height:9px;border-radius:50%;background:var(--stat)}
.status-row .sstate.deg{color:var(--amber)}.status-row .sstate.deg .d{background:var(--amber)}
.uptime-bars{display:flex;gap:3px;align-items:flex-end;height:34px}
.uptime-bars i{width:6px;height:100%;background:var(--stat);border-radius:2px;opacity:.85}
.uptime-bars i.deg{background:var(--amber)}
.uptime-bars i.down{background:var(--rose)}

/* misc utilities */
.center{text-align:center}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}
.muted{color:var(--muted)}
.maxw-60{max-width:60ch}

/* ============================================================ HERO CHAT WIDGET (reusable) */
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero-split .page-hero-inner{max-width:none}
.tv-chat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;
  box-shadow:0 40px 90px -46px rgba(23,21,15,.5);display:flex;flex-direction:column}
.tv-chat-head{display:flex;align-items:center;gap:11px;padding:2px 4px 14px;border-bottom:1px solid var(--line)}
.tv-chat-head .tvc-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface-2)}
.tv-chat-head .tvc-av img{width:100%;height:100%;object-fit:cover}
.tv-chat-head b{font-size:14px;font-weight:700;color:var(--ink);display:block;font-family:var(--sans);line-height:1.2}
.tv-chat-head .tvc-status{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.tv-chat-head .tvc-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--stat)}
.tv-chat-body{display:flex;flex-direction:column;gap:9px;height:clamp(300px,42vh,420px);overflow:hidden;justify-content:flex-end;padding:16px 4px 4px}
.tvc-msg{display:flex;align-items:flex-end;gap:8px;max-width:92%;opacity:0;transform:translateY(12px) scale(.97);animation:tvpop .5s cubic-bezier(.22,.64,.3,1) forwards}
.tvc-msg .av{width:26px;height:26px;border-radius:50%;flex:none;overflow:hidden;background:var(--surface-2)}
.tvc-msg .av img{width:100%;height:100%;object-fit:cover}
.tvc-msg .txt{padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45}
.tvc-msg.bot{align-self:flex-start}
.tvc-msg.bot .txt{background:var(--ink);color:#fff;border-bottom-left-radius:5px}
.tvc-msg.me{align-self:flex-end;flex-direction:row-reverse}
.tvc-msg.me .txt{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong);border-bottom-right-radius:5px}
@keyframes tvpop{to{opacity:1;transform:none}}
.tvc-typing{align-self:flex-start;display:flex;align-items:center;gap:8px}
.tvc-typing .av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface-2)}
.tvc-typing .av img{width:100%;height:100%;object-fit:cover}
.tvc-typing .dots{background:var(--ink);border-radius:14px;border-bottom-left-radius:5px;padding:11px 13px;display:inline-flex;gap:4px}
.tvc-typing .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);animation:tvblink 1.2s infinite}
.tvc-typing .dots i:nth-child(2){animation-delay:.2s}.tvc-typing .dots i:nth-child(3){animation-delay:.4s}
@keyframes tvblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.tv-chat-input{display:flex;align-items:center;gap:8px;margin-top:12px;background:var(--canvas);border:1px solid var(--line);border-radius:var(--pill);padding:8px 8px 8px 16px}
.tv-chat-input .tvc-box{flex:1;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-chat-input .tvc-box.typing{color:var(--ink)}
.tv-chat-input .tvc-box.typing::after{content:'';display:inline-block;width:1.5px;height:1em;background:var(--accent);margin-left:1px;vertical-align:-2px;animation:tvcaret 1s step-end infinite}
@keyframes tvcaret{50%{opacity:0}}
.tv-chat-input .tvc-send{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;transition:transform .1s}
.tv-chat-input .tvc-send.pulse{animation:tvsnd .32s ease}
@keyframes tvsnd{0%{transform:scale(1)}45%{transform:scale(.82)}100%{transform:scale(1)}}
.tvc-data{display:none}
@media (max-width:960px){
  .hero-split{grid-template-columns:1fr;gap:36px}
  .tv-chat-body{height:300px}
}

/* ============================================================ FOOTER */
.footer{padding:70px 0 40px;border-top:1px solid var(--line);background:var(--canvas)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{font-size:14px;max-width:30ch;color:var(--muted)}
.foot-col h4{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 16px}
.foot-col a{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:11px}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:50px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.foot-bottom .legal{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.foot-bottom .legal a:hover{color:var(--ink)}
.foot-social{display:flex;gap:12px}
.foot-social a{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft)}
.foot-social a:hover{border-color:var(--accent);color:var(--accent)}
.copyright{font-size:13px;color:var(--muted)}

/* ============================================================ RESPONSIVE */
@media (max-width:960px){
  .nav-links{display:none}.nav-right .desk{display:none}.menu-btn{display:block}
  .nav.scrolled{background:rgba(244,243,241,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav.scrolled .wrap{max-width:var(--wrap);margin-top:0;padding:0 18px;gap:20px;background:transparent;border-color:transparent;border-radius:0;box-shadow:none}
  .grid-3,.grid-4,.price-grid,.post-grid,.case-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:34px}.split.rev .split-media{order:0}
  .doc-grid{grid-template-columns:1fr;gap:0}
  .toc{position:static;margin-bottom:36px;display:none}
  .post-featured{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .auth-wrap{grid-template-columns:1fr}
  .auth-aside{display:none}
}
@media (max-width:640px){
  .wrap,.wrap-narrow{padding:0 18px}
  .grid-2,.grid-3,.grid-4,.price-grid,.post-grid,.case-grid,.field-row{grid-template-columns:1fr}
  .page-hero{padding:120px 0 40px}
  .stats-row{gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-bottom{justify-content:flex-start}
  .cta-inner{padding:52px 24px}
  .section{padding:52px 0}
}
@media (max-width:440px){
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================ LOOMI WEB CREDIT
   Backlink block for CLIENT sites we build ("Website by Loomi Web").
   Fallback values are baked in so it renders correctly even on client
   sites that don't load these tokens. See CREDIT-PROTOCOL.md. */
.tv-credit{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans,system-ui,-apple-system,'Segoe UI',Arial,sans-serif);
  font-size:13px;line-height:1;color:var(--muted,#8B877E);font-weight:500;letter-spacing:.01em}
.tv-credit a{color:inherit;text-decoration:none;transition:color .18s ease}
.tv-credit a strong{font-weight:600}
.tv-credit a:hover{color:var(--accent,#0E9AAB)}

/* ============================================================ PILLAR ANIMATIONS
   Looping, CSS-only product mockups for the "What we automate" pillars.
   Shared by automations.html (split media) and index.html (services grid).
   Purely decorative; every loop settles under prefers-reduced-motion. */
.pa-media{background:linear-gradient(150deg,var(--accent-soft),#fff 72%)}
.pa-hold{position:absolute;inset:0;display:grid;place-items:center;padding:26px}
.pa-stage{position:relative;width:100%;max-width:340px}
.pa-card{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 30px 64px -40px rgba(23,21,15,.5);overflow:hidden}
.pa-hd{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--sans);font-weight:600;font-size:12px;color:var(--ink)}
.pa-hd .pdot{width:8px;height:8px;border-radius:50%;background:var(--stat);flex:none}
.pa-hd>svg{color:var(--accent);flex:none}
.pa-hd .pa-live{margin-left:auto;font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.pa-bd{position:relative;height:192px;padding:14px;overflow:hidden}

/* shared building blocks */
.pa-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.pa-row .pa-ic{width:26px;height:26px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.pa-row b{display:block;font-size:12px;color:var(--ink);font-weight:600;line-height:1.25;font-family:var(--sans)}
.pa-row small{font-size:10.5px;color:var(--muted)}
.pa-row .pa-chk{margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.pa-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);border:1px solid #bfe7ec;border-radius:var(--pill);padding:5px 11px}

/* synced sequence reveals — stagger baked into %, no per-item delay so a
   built-then-cleared loop stays perfectly in sync across every item */
.pa-seq{opacity:0;animation-duration:8.5s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.22,.7,.25,1)}
.pa-seq.s1{animation-name:paSeq1}.pa-seq.s2{animation-name:paSeq2}.pa-seq.s3{animation-name:paSeq3}.pa-seq.s4{animation-name:paSeq4}.pa-seq.s5{animation-name:paSeq5}
@keyframes paSeq1{0%,4%{opacity:0;transform:translateY(9px)}10%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes paSeq2{0%,18%{opacity:0;transform:translateY(9px)}24%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes paSeq3{0%,32%{opacity:0;transform:translateY(9px)}38%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes paSeq4{0%,46%{opacity:0;transform:translateY(9px)}52%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes paSeq5{0%,60%{opacity:0;transform:translateY(9px)}66%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-5px)}}

/* 1 · conversations — channel chips + mini chat */
.pa-chan{display:flex;gap:6px;margin-bottom:12px}
.pa-chan i{flex:1;display:grid;place-items:center;height:30px;border-radius:8px;background:var(--surface-2);color:var(--muted);animation:paChip 6s infinite}
.pa-chan i:nth-child(2){animation-delay:1.5s}.pa-chan i:nth-child(3){animation-delay:3s}.pa-chan i:nth-child(4){animation-delay:4.5s}
@keyframes paChip{0%,100%{background:var(--surface-2);color:var(--muted)}6%,19%{background:var(--accent);color:#fff}}
.pa-bub{max-width:80%;padding:8px 11px;border-radius:13px;font-size:11.5px;line-height:1.35;margin-bottom:7px}
.pa-bub.bot{background:var(--ink);color:#fff;border-bottom-left-radius:4px}
.pa-bub.me{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-strong);border-bottom-right-radius:4px;margin-left:auto}
.pa-bub.ok{background:var(--accent-soft);color:var(--accent-deep);font-weight:600;border:1px solid #bfe7ec}

/* 2 · documents — scan sweep + extracted fields */
.pa-doc{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow:hidden;background:#fff}
.pa-doc .pa-scan{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(var(--accent-soft),transparent);border-top:2px solid var(--accent);animation:paScan 8.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes paScan{0%{transform:translateY(-26px);opacity:0}5%{opacity:1}55%{transform:translateY(120px);opacity:1}62%,100%{transform:translateY(120px);opacity:0}}
.pa-field{display:flex;justify-content:space-between;font-size:11.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.pa-field:last-child{border-bottom:none}
.pa-field span:first-child{color:var(--muted)}.pa-field span:last-child{color:var(--ink);font-weight:600}

/* 3 · sales & crm — score ring + pipeline pills */
.pa-crm{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pa-ring{position:relative;width:64px;height:64px;flex:none}
.pa-ring svg{transform:rotate(-90deg)}
.pa-ring circle{fill:none;stroke-width:7}
.pa-ring .bg{stroke:var(--surface-2)}
.pa-ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:163;stroke-dashoffset:21;animation:paRing 6s ease-in-out infinite}
@keyframes paRing{0%,10%{stroke-dashoffset:163}55%,88%{stroke-dashoffset:21}98%,100%{stroke-dashoffset:163}}
.pa-ring .pa-score{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:20px;color:var(--ink)}
.pa-stage-pills{display:flex;gap:6px}
.pa-pill{position:relative;flex:1;text-align:center;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface-2);border-radius:var(--pill);padding:6px 4px;overflow:hidden}
.pa-pill .fillp{position:absolute;inset:0;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:var(--pill)}

/* 4 · finance & ops — growing bars + KPI tiles */
.pa-bars{display:flex;align-items:flex-end;gap:7px;height:82px;margin-bottom:12px}
.pa-bars i{flex:1;background:var(--accent);border-radius:5px 5px 0 0;transform-origin:bottom;animation:paGrow 8.5s ease-in-out infinite}
.pa-bars i:nth-child(1){height:46%;animation-delay:0s}
.pa-bars i:nth-child(2){height:68%;animation-delay:.06s}
.pa-bars i:nth-child(3){height:54%;animation-delay:.12s}
.pa-bars i:nth-child(4){height:83%;animation-delay:.18s}
.pa-bars i:nth-child(5){height:62%;animation-delay:.24s}
.pa-bars i:nth-child(6){height:96%;animation-delay:.30s}
.pa-bars i:nth-child(7){height:74%;animation-delay:.36s}
@keyframes paGrow{0%,3%{transform:scaleY(0)}16%,90%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.pa-kpi{display:flex;gap:8px}
.pa-kpi>div{flex:1;background:var(--surface-2);border-radius:9px;padding:8px 9px}
.pa-kpi .n{font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1}
.pa-kpi .l{font-size:9px;color:var(--muted);margin-top:3px;line-height:1.2}

/* 5 · marketing — weekly calendar posts dropping in */
.pa-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:150px}
.pa-cal .day{background:var(--surface-2);border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:5px}
.pa-cal .dl{font-size:8.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.pa-cal .post{height:15px;border-radius:4px;background:var(--accent);animation-duration:5s}
.pa-cal .post.b{background:var(--violet-200)}

/* 6 · internal ops — checklist ticks + progress fill */
.pa-prog{height:7px;border-radius:var(--pill);background:var(--surface-2);overflow:hidden;margin-top:8px}
.pa-prog i{display:block;height:100%;width:8%;border-radius:var(--pill);background:var(--accent);animation:paFill 8.5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes paFill{0%,5%{width:8%}88%,94%{width:100%}100%{width:8%}}

/* custom-workflow builder — a pulse travels down the steps */
.pa-flow{position:relative}
.pa-flow .fn{display:flex;align-items:center;gap:10px;padding:5px 11px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:#fff;line-height:1.2;animation:paFlow 6s ease-in-out infinite}
.pa-flow .fn:last-child{margin-bottom:0}
.pa-flow .fn:nth-child(2){animation-delay:1.5s}.pa-flow .fn:nth-child(3){animation-delay:3s}.pa-flow .fn:nth-child(4){animation-delay:4.5s}
@keyframes paFlow{0%,100%{border-color:var(--line);box-shadow:none}7%,20%{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}}
.pa-flow .fi2{width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none;font-weight:700;font-size:11px;font-family:var(--sans)}
.pa-flow .fn b{font-size:12px;color:var(--ink);font-weight:600;font-family:var(--sans)}
.pa-flow .fn .fnt{margin-left:auto;font-size:10.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .pa-seq,.pa-chan i,.pa-doc .pa-scan,.pa-ring .fg,.pa-bars i,.pa-prog i,.pa-flow .fn{animation:none!important}
  .pa-seq{opacity:1!important;transform:none!important}
  .pa-doc .pa-scan{display:none}
  .pa-bars i{transform:none!important}
  .pa-prog i{width:78%!important}
}