/* =========================================================
   The Devente Group — site stylesheet
   Brand: warm cream / espresso ink / sage accent, DG crest mark
   ========================================================= */

:root{
  --cream:#F7F0E4; --card:#FFFDF8; --line:rgba(42,35,24,0.10);
  --ink:#2A2318; --ink2:#5B5342; --muted:#8a7d63;
  --sage:#5B6B4C; --sage-d:#455038; --sage-bg:rgba(91,107,76,0.14);
  --terracotta:#B5502E; --terracotta-bg:rgba(181,80,46,0.10);
  --gold:#A8791E; --gold-bg:rgba(201,162,75,0.16);
  --radius-card:22px;
  --ticker-h:52px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2258.89%22%20height%3D%22102.0%22%3E%0A%20%20%3Cpath%20d%3D%22M%2029.45%2C0.00%20L%2058.89%2C17.00%20L%2058.89%2C51.00%20L%2029.45%2C68.00%20L%200.00%2C51.00%20L%200.00%2C17.00%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232A2318%22%20stroke-opacity%3D%220.055%22%20stroke-width%3D%221.15%22/%3E%0A%20%20%3Cpath%20d%3D%22M%200.00%2C51.00%20L%2029.44%2C68.00%20L%2029.44%2C102.00%20L%200.00%2C119.00%20L%20-29.44%2C102.00%20L%20-29.44%2C68.00%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232A2318%22%20stroke-opacity%3D%220.055%22%20stroke-width%3D%221.15%22/%3E%0A%20%20%3Cpath%20d%3D%22M%2058.89%2C51.00%20L%2088.33%2C68.00%20L%2088.33%2C102.00%20L%2058.89%2C119.00%20L%2029.45%2C102.00%20L%2029.45%2C68.00%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232A2318%22%20stroke-opacity%3D%220.055%22%20stroke-width%3D%221.15%22/%3E%0A%20%20%3Cpath%20d%3D%22M%200.00%2C-51.00%20L%2029.44%2C-34.00%20L%2029.44%2C0.00%20L%200.00%2C17.00%20L%20-29.44%2C0.00%20L%20-29.44%2C-34.00%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232A2318%22%20stroke-opacity%3D%220.055%22%20stroke-width%3D%221.15%22/%3E%0A%20%20%3Cpath%20d%3D%22M%2058.89%2C-51.00%20L%2088.33%2C-34.00%20L%2088.33%2C0.00%20L%2058.89%2C17.00%20L%2029.45%2C0.00%20L%2029.45%2C-34.00%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232A2318%22%20stroke-opacity%3D%220.055%22%20stroke-width%3D%221.15%22/%3E%0A%3C/svg%3E");
  background-repeat:repeat;
  line-height:1.5;
}
a{ color:var(--sage-d); text-decoration:none; }
a:hover{ color:var(--ink); }
.container{ max-width:1160px; margin:0 auto; padding:0 24px; }
.crest{ font-family:'Playfair Display', Georgia, 'Times New Roman', serif; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; }
.reveal-stagger.is-visible > *{ animation:reveal-up 0.6s ease both; }
.reveal-stagger.is-visible > *:nth-child(1){ animation-delay:0.02s; }
.reveal-stagger.is-visible > *:nth-child(2){ animation-delay:0.09s; }
.reveal-stagger.is-visible > *:nth-child(3){ animation-delay:0.16s; }
.reveal-stagger.is-visible > *:nth-child(4){ animation-delay:0.23s; }
@keyframes reveal-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
}

/* ---------- review ticker ---------- */
.review-ticker{
  position:sticky; top:0; z-index:56; overflow:hidden;
  height:var(--ticker-h); background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:height 0.25s ease; display:flex; align-items:center;
}
.ticker-track{
  display:flex; align-items:center; gap:44px; white-space:nowrap;
  animation:ticker-scroll 34s linear infinite; padding-left:44px; will-change:transform;
}
.review-ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{
  display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600;
  color:#EFE7D6; transition:font-size 0.25s ease, gap 0.25s ease;
}
.ticker-item svg{ flex-shrink:0; opacity:0.85; transition:width 0.25s ease, height 0.25s ease; }
.review-ticker.minimized .ticker-item{ font-size:11px; gap:6px; }
.review-ticker.minimized .ticker-item svg{ width:11px; height:11px; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- nav ---------- */
header.site-nav{
  position:sticky; top:var(--ticker-h); z-index:50;
  background:rgba(247,240,228,0.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:top 0.25s ease;
}
header.site-nav .container{
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); }
.brand svg{ flex-shrink:0; }
.brand-name{ font-size:17.5px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; }
.navlinks{ display:flex; align-items:center; gap:32px; }
.navlinks a{ font-size:14px; font-weight:600; color:var(--ink2); white-space:nowrap; }
.navlinks a:hover, .navlinks a.active{ color:var(--ink); }
.nav-cta{ flex-shrink:0; }

.nav-dropdown{ position:relative; }
.dropdown-trigger{
  display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:600;
  color:var(--ink2); white-space:nowrap; background:none; border:none; cursor:pointer; padding:0; font-family:inherit;
}
.dropdown-trigger:hover, .nav-dropdown:hover .dropdown-trigger, .nav-dropdown:focus-within .dropdown-trigger{ color:var(--ink); }
.dropdown-trigger svg{ transition:transform 0.15s ease; }
.nav-dropdown:hover .dropdown-trigger svg, .nav-dropdown:focus-within .dropdown-trigger svg{ transform:rotate(180deg); }
.dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px; display:none; z-index:60;
}
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu{ display:block; }
.dropdown-menu-inner{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 1px 2px rgba(42,35,24,0.05), 0 14px 30px rgba(42,35,24,0.12);
  padding:8px; display:flex; flex-direction:column; min-width:210px;
}
.dropdown-menu a{
  padding:10px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink2); white-space:nowrap;
}
.dropdown-menu a:hover, .dropdown-menu a.active{ background:var(--sage-bg); color:var(--sage-d); }

/* ---------- buttons / tags ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:100px; font-size:14.5px; font-weight:700;
  cursor:pointer; border:none; font-family:inherit;
  transition:background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.pill:active{ transform:scale(0.96); }
.pill-primary{ background:var(--sage); color:#FBF7ED; }
.pill-primary:hover{ background:var(--sage-d); color:#FBF7ED; box-shadow:0 0 0 6px var(--sage-bg); }
.pill-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.pill-ghost:hover{ box-shadow:0 0 0 5px rgba(42,35,24,0.06); }
.pill-sm{ padding:9px 20px; font-size:13px; }
.pill-light{ background:#FBF7ED; color:var(--ink); }
.pill-light:hover{ box-shadow:0 0 0 6px rgba(251,247,237,0.18); }

.tag{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:800;
  letter-spacing:0.04em; text-transform:uppercase; padding:4px 11px; border-radius:100px;
}
.tag-beta{ background:var(--gold-bg); color:var(--gold); }
.tag-live{ background:var(--sage-bg); color:var(--sage-d); }
.tag-soon{ background:rgba(42,35,24,0.06); color:var(--muted); }
.tag-neutral{ background:rgba(42,35,24,0.06); color:var(--ink2); }
.tag-needs{ background:var(--terracotta-bg); color:var(--terracotta); }
.tag-good{ background:var(--sage-bg); color:var(--sage-d); }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:0 1px 2px rgba(42,35,24,0.04), 0 12px 28px rgba(42,35,24,0.05);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.service-big.card:hover, .service-mid.card:hover{
  transform:translateY(-4px); box-shadow:0 1px 2px rgba(42,35,24,0.05), 0 20px 40px rgba(42,35,24,0.10);
}

/* ---------- hero (shared pattern) ---------- */
.hero{
  position:relative; padding:96px 0 64px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px; overflow:hidden;
}
.hero-glow{
  position:absolute; width:900px; height:900px; border-radius:100%;
  background:radial-gradient(circle, rgba(91,107,76,0.14), rgba(91,107,76,0) 70%);
  top:-380px; left:50%; transform:translateX(-50%); pointer-events:none;
  animation:glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:1; } 50%{ transform:translateX(-50%) scale(1.06); opacity:0.85; } }

.hero-highlights{ display:flex; flex-wrap:wrap; gap:20px; margin-top:2px; }
.hero-highlight{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink2); }
.hero-highlight strong{ color:var(--ink); font-weight:800; }
.hero-highlight svg{ flex-shrink:0; }
.hero-logo{ position:relative; }
.hero-logo::before{
  content:""; position:absolute; inset:-14px; border-radius:32px; border:2px solid var(--sage);
  opacity:0; animation:logo-ring-pulse 3.5s ease-out infinite; pointer-events:none;
}
@keyframes logo-ring-pulse{ 0%{ opacity:0.45; transform:scale(0.97); } 100%{ opacity:0; transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce){
  .hero-glow, .hero-logo::before{ animation:none !important; }
}
.hero h1{
  position:relative; font-size:56px; font-weight:700; letter-spacing:-0.025em; line-height:1.08;
  margin:0; max-width:820px;
}
.hero p.lead{
  position:relative; font-size:18px; color:var(--ink2); max-width:600px; line-height:1.6; margin:0;
}
.hero-actions{ position:relative; display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center; }
.see-action{ font-size:14.5px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }

/* homepage split hero: text left, logo right */
.hero.hero-split{ display:block; text-align:left; padding:72px 0 84px; }
.hero-grid{
  position:relative; max-width:1160px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.1fr 0.9fr; align-items:center; gap:48px;
}
.hero-split .hero-text{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.hero-split .hero-actions{ justify-content:flex-start; }
.hero-split h1{ max-width:none; }
.hero-logo{ display:flex; justify-content:center; align-items:center; }
.hero-logo img{ width:100%; max-width:400px; height:auto; border-radius:28px; box-shadow:0 20px 50px rgba(42,35,24,0.14); }

section{ padding:64px 0; }
.section-head{ text-align:center; display:flex; flex-direction:column; gap:10px; margin-bottom:44px; }
.section-head h2{ font-size:34px; font-weight:700; letter-spacing:-0.02em; margin:0; }
.section-head .tag{ align-self:center; }

/* ---------- services grid (homepage) ---------- */
.services-grid{
  display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:20px;
}
.service-big{ grid-row:span 2; padding:36px; display:flex; flex-direction:column; gap:18px; }
.service-big .head-row, .service-mid .head-row{ display:flex; align-items:center; justify-content:space-between; }
.service-big h3{ font-size:23px; font-weight:700; margin:0; display:flex; flex-direction:column; gap:5px; }
.service-big p, .service-mid p{ font-size:14.5px; color:var(--ink2); line-height:1.6; margin:0; }
.service-mid{ padding:30px; display:flex; flex-direction:column; gap:14px; }
.service-mid h3{ font-size:20px; font-weight:700; margin:0; display:flex; flex-direction:column; gap:5px; }
.product-kicker{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.service-link{
  font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:7px; margin-top:4px;
  align-self:flex-start; padding:11px 20px; border-radius:100px; border:1.5px solid var(--sage);
  color:var(--sage-d); background:transparent; transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.service-link:hover{ background:var(--sage); color:#FBF7ED; border-color:var(--sage); }
.service-link svg{ transition:transform 0.2s ease; }
.service-link:hover svg{ transform:translateX(3px); }
.head-row svg{ transition:transform 0.3s ease; }
.card:hover .head-row svg{ transform:scale(1.12) rotate(-6deg); }

.preview-box{
  margin-top:6px; background:var(--cream); border:1px solid var(--line); border-radius:16px;
  padding:16px; display:flex; flex-direction:column; gap:9px;
}
.preview-avatar{
  width:22px; height:22px; border-radius:100px; background:#e7e0d0; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; color:var(--ink2); flex-shrink:0;
}
.preview-reply{
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 11px;
  font-size:11px; color:var(--ink);
}
.preview-reply .label{ font-size:9px; font-weight:800; color:var(--sage-d); letter-spacing:0.03em; text-transform:uppercase; margin-bottom:4px; }

.call-block{
  margin-top:2px; background:var(--ink); border-radius:16px; padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  text-decoration:none; cursor:pointer; transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.call-block:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(42,35,24,0.28); }
.call-block .label{
  font-size:9.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#cfc6b3;
  display:flex; align-items:center; margin-bottom:4px;
}
.call-block .number{ font-size:30px; font-weight:800; letter-spacing:-0.01em; color:#FBF7ED; white-space:nowrap; }
.call-note{ font-size:12px; color:var(--muted); margin:0; }
.live-dot{
  display:inline-block; width:6px; height:6px; border-radius:100%; background:#6FD6C2; margin-right:6px;
  animation:live-blink 1.4s ease-in-out infinite;
}
@keyframes live-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.call-icon-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.call-icon-wrap::before{
  content:""; position:absolute; inset:-9px; border-radius:100%; border:2px solid rgba(255,255,255,0.45);
  animation:call-ring 1.8s ease-out infinite;
}
@keyframes call-ring{ 0%{ opacity:0.7; transform:scale(0.75); } 100%{ opacity:0; transform:scale(1.35); } }
@media (prefers-reduced-motion: reduce){
  .live-dot, .call-icon-wrap::before{ animation:none !important; }
}

.coming-soon-row{ grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card-soon{ padding:24px; display:flex; flex-direction:column; gap:8px; background:rgba(255,253,248,0.5); }
.card-soon h3{ font-size:15.5px; font-weight:700; margin:0; }
.card-soon p{ font-size:12px; color:var(--muted); line-height:1.5; margin:0; }

/* ---------- about ---------- */
.about{ text-align:left; }
.about .container{ max-width:1160px; }
.about-grid{ display:grid; grid-template-columns:1fr 0.86fr; align-items:center; gap:56px; }
.about-text{ display:flex; flex-direction:column; gap:16px; }
.about-text .tag{ align-self:flex-start; }
.about-text h2{ font-size:28px; font-weight:700; letter-spacing:-0.01em; margin:0; }
.about-text p{ font-size:15.5px; color:var(--ink2); line-height:1.7; margin:0; }
.about-art{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.about-art svg{ width:100%; max-width:380px; height:auto; }
.about-art-caption{ font-size:12.5px; font-weight:700; color:var(--muted); text-align:center; max-width:280px; }

/* ---------- about illustration animation ---------- */
.about-art .float-group{ animation:art-float 4.5s ease-in-out infinite; transform-origin:220px 220px; }
@keyframes art-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.about-art .type-cursor{ animation:cursor-blink 1s step-end infinite; }
@keyframes cursor-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
.about-art .pulse-ring{ animation:pulse-ring 2.4s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes pulse-ring{ 0%{ opacity:0.55; transform:scale(0.82); } 100%{ opacity:0; transform:scale(1.4); } }
.about-art .bubble-1{ animation:art-float-slow 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.about-art .bubble-2{ animation:art-float-slow 3.6s ease-in-out infinite 0.5s; transform-box:fill-box; transform-origin:center; }
@keyframes art-float-slow{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.about-art .steam-wisp{ animation:steam-rise 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.about-art .steam-wisp:nth-child(2){ animation-delay:0.7s; }
@keyframes steam-rise{ 0%{ opacity:0; transform:translateY(0); } 35%{ opacity:0.7; } 100%{ opacity:0; transform:translateY(-10px); } }
@media (prefers-reduced-motion: reduce){
  .about-art .float-group, .about-art .type-cursor, .about-art .pulse-ring, .about-art .bubble-1, .about-art .bubble-2, .about-art .steam-wisp{
    animation:none !important;
  }
}

/* ---------- homepage founder strip ---------- */
.founder-strip{ padding:20px 0 56px; }
.founder-strip-inner{
  display:flex; align-items:center; gap:26px; max-width:760px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:28px 34px; box-shadow:0 1px 2px rgba(42,35,24,0.04), 0 12px 28px rgba(42,35,24,0.05);
}
.founder-strip-photo{ width:88px; height:88px; border-radius:100%; object-fit:cover; flex-shrink:0; border:3px solid var(--cream); }
.founder-strip-text{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.founder-strip-name{ font-size:15px; font-weight:800; letter-spacing:-0.005em; }
.founder-strip-text p{ font-size:13.5px; color:var(--ink2); line-height:1.6; margin:0; }

/* ---------- dark contact / CTA sections ---------- */
.dark-section{ background:var(--ink); padding:90px 0; }
.dark-section .container{ max-width:640px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.dark-section h2{ font-size:32px; font-weight:700; color:#FBF7ED; letter-spacing:-0.01em; margin:0; }
.dark-section p{ font-size:15.5px; color:#cfc6b3; line-height:1.6; margin:0; }
.dark-section .phone-note{ font-size:14px; color:#cfc6b3; margin:0; }

/* ---------- footer ---------- */
footer.site-footer{ padding:34px 0; }
footer.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:8px; }
.footer-brand span{ font-size:12px; color:var(--muted); }
.footer-links{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-link{ font-size:12px; color:var(--muted); text-decoration:underline; }

/* ---------- our story page ---------- */
.story-hero{ text-align:center; padding:88px 24px 48px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.manifesto{ padding:12px 24px 56px; }
.manifesto p{
  max-width:720px; margin:0 auto; text-align:center; font-size:24px; font-weight:600; font-style:italic;
  color:var(--ink); line-height:1.5; letter-spacing:-0.005em;
}
.story-copy{ max-width:720px; margin:0 auto; padding:16px 24px 64px; display:flex; flex-direction:column; gap:16px; }
.story-copy h2{ font-size:26px; font-weight:700; letter-spacing:-0.01em; margin:0 0 4px; }
.story-copy p{ font-size:15.5px; color:var(--ink2); line-height:1.75; margin:0; }
.founder-section{ background:var(--cream); }
.founder-grid{
  display:grid; grid-template-columns:0.8fr 1.2fr; align-items:center; gap:52px;
  max-width:1000px; margin:0 auto; padding:0 24px;
}
.founder-photo img{ width:100%; height:auto; border-radius:20px; box-shadow:0 20px 50px rgba(42,35,24,0.14); display:block; }
.founder-text{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.founder-name{ font-size:13px; font-weight:800; letter-spacing:0.03em; color:var(--sage-d); text-transform:uppercase; }
.founder-text h2{ font-size:26px; font-weight:700; letter-spacing:-0.01em; margin:0; }
.founder-text p{ font-size:15px; color:var(--ink2); line-height:1.7; margin:0; }

/* =========================================================
   Reviews demo page
   ========================================================= */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.stat-card{ padding:18px 20px; }
.stat-card .stat-label{ font-size:11px; color:var(--muted); font-weight:600; }
.stat-card .stat-value{ display:flex; align-items:baseline; gap:7px; margin-top:5px; font-size:25px; font-weight:700; }
.stat-card .stat-delta{ font-size:12px; font-weight:700; color:var(--sage-d); }
.stat-card .stat-value.warn{ color:var(--terracotta); }

.review-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
.review-card{ padding:22px 24px; display:flex; gap:16px; }
.review-body{ flex:1; display:flex; flex-direction:column; gap:9px; min-width:0; }
.review-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.review-who{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.review-who .name{ font-size:14px; font-weight:700; }
.review-who .meta{ font-size:11.5px; color:var(--muted); }
.review-text{ font-size:13.5px; color:var(--ink2); }
.ai-reply{
  background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:13px; color:var(--ink); display:flex; flex-direction:column; gap:9px;
}
.ai-reply .label{ font-size:10.5px; font-weight:800; color:var(--sage-d); letter-spacing:0.03em; text-transform:uppercase; }
.ai-reply .actions{ display:flex; gap:9px; }
.ai-reply .actions .pill{ padding:8px 16px; font-size:12px; }

.insights-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; margin-bottom:26px; }
.chart-card{ padding:24px 26px; }
.chart-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; gap:10px; flex-wrap:wrap; }
.chart-head .title{ font-size:14px; font-weight:700; }
.chart-head .delta{ font-size:12.5px; font-weight:700; color:var(--sage-d); }
.chart-card svg{ width:100%; height:auto; }

.sentiment-card{ padding:24px 26px; display:flex; flex-direction:column; gap:13px; }
.sentiment-bar{ display:flex; height:14px; border-radius:8px; overflow:hidden; }
.sentiment-legend{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
.sentiment-legend .row{ display:flex; justify-content:space-between; }
.sentiment-legend .swatch{ display:flex; align-items:center; gap:7px; }
.sentiment-legend .dot{ width:8px; height:8px; border-radius:100px; }
.sentiment-note{ margin-top:auto; font-size:11px; color:var(--muted); }

.priority-card{ padding:26px 28px; display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
.priority-card > .title{ font-size:14px; font-weight:700; }
.priority-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.priority-item{ border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:7px; }
.priority-item .tag{ align-self:flex-start; }
.priority-item h4{ font-size:14px; font-weight:700; margin:0; }
.priority-item p{ font-size:12px; color:var(--ink2); line-height:1.5; margin:0; }

.section-title-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; gap:12px; flex-wrap:wrap; }
.section-title-row .title{ font-size:24px; font-weight:700; }
.section-title-row .sub{ font-size:13.5px; color:var(--muted); }

.compare-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.compare-card{ padding:22px 24px; display:flex; flex-direction:column; gap:10px; }
.compare-card.you{ border:1.5px solid var(--sage); }
.compare-card .top-row{ display:flex; align-items:center; justify-content:space-between; }
.compare-card .score{ display:flex; align-items:baseline; gap:5px; }
.compare-card .score b{ font-size:20px; font-weight:700; }
.compare-card .score span{ font-size:11px; color:var(--muted); }
.compare-card .biz-name{ font-size:15px; font-weight:700; }
.compare-card .biz-meta{ font-size:12px; color:var(--ink2); line-height:1.5; }

.doing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px; }
.doing-card{ padding:24px 26px; display:flex; flex-direction:column; gap:14px; }
.doing-card > .title{ font-size:14px; font-weight:700; }
.doing-row{ display:flex; gap:10px; align-items:flex-start; }
.doing-row .tag{ flex-shrink:0; }
.doing-row p{ font-size:12.5px; color:var(--ink2); line-height:1.5; margin:0; }

.beat-card{ padding:26px 28px; display:flex; flex-direction:column; gap:14px; background:var(--ink); border:none; }
.beat-card > .title{ font-size:14px; font-weight:700; color:#FBF7ED; }
.beat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.beat-item{ border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:7px; }
.beat-item h4{ font-size:13.5px; font-weight:700; color:#FBF7ED; margin:0; }
.beat-item p{ font-size:12px; color:#cfc6b3; line-height:1.5; margin:0; }

/* ---------- interactive review reply demo ---------- */
.reset-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; font-family:inherit;
  color:var(--ink2); background:var(--card); border:1px solid var(--line); border-radius:100px;
  padding:8px 14px; cursor:pointer; transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.reset-btn:hover{ background:var(--ink); color:#FBF7ED; border-color:var(--ink); }
.reset-btn:active{ transform:scale(0.96); }
.reset-btn svg{ transition:transform 0.4s ease; }
.reset-btn.spin svg{ transform:rotate(-360deg); }

.tone-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tone-row .tone-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-right:2px; }
.tone-chip{
  font-size:12px; font-weight:700; font-family:inherit; padding:6px 13px; border-radius:100px; border:1px solid var(--line);
  background:var(--cream); color:var(--ink2); cursor:pointer; transition:all 0.15s ease;
}
.tone-chip:hover{ border-color:var(--sage); color:var(--sage-d); }
.tone-chip.active{ background:var(--sage); border-color:var(--sage); color:#FBF7ED; }

.reply-editable{
  width:100%; resize:vertical; min-height:64px; font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  line-height:1.5; transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.reply-editable:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-bg); }

.replied-badge{
  display:none; align-items:center; gap:8px; background:var(--sage-bg); color:var(--sage-d);
  font-size:13px; font-weight:700; padding:10px 14px; border-radius:10px;
}
.replied-badge.show{ display:flex; animation:pop-in 0.35s cubic-bezier(.34,1.56,.64,1); }
.replied-badge svg{ flex-shrink:0; }
@keyframes pop-in{ from{ opacity:0; transform:scale(0.7); } to{ opacity:1; transform:scale(1); } }
.review-card.is-replied .ai-reply .live-controls{ display:none; }
.review-card.is-replied .tag-needs{ background:var(--sage-bg); color:var(--sage-d); }

/* =========================================================
   Call answering revenue calculator demo page
   ========================================================= */
.roi-card{ padding:32px 34px; display:flex; flex-direction:column; gap:26px; }
.roi-presets{ display:flex; flex-wrap:wrap; gap:8px; }
.roi-fields{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field-group{ display:flex; flex-direction:column; gap:8px; }
.field-group label{ font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.field-input-wrap{ position:relative; }
.field-input-wrap .prefix{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--ink2); font-size:18px; pointer-events:none;
}
.field-input{
  width:100%; font-family:inherit; font-size:19px; font-weight:700; color:var(--ink); background:var(--cream);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px 12px 30px; transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input.no-prefix{ padding-left:14px; }
.field-input:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-bg); }

.slider-row{ display:flex; flex-direction:column; gap:9px; }
.slider-row .slider-top{ display:flex; align-items:baseline; justify-content:space-between; }
.slider-row input[type="range"]{ width:100%; accent-color:var(--sage); height:6px; }
.slider-note{ font-size:11.5px; color:var(--muted); }

.roi-outputs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.roi-stat{ padding:20px 22px; border-radius:14px; display:flex; flex-direction:column; gap:5px; }
.roi-stat.at-risk{ background:var(--terracotta-bg); }
.roi-stat.recovered{ background:var(--sage-bg); }
.roi-stat .roi-label{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; }
.roi-stat.at-risk .roi-label{ color:var(--terracotta); }
.roi-stat.recovered .roi-label{ color:var(--sage-d); }
.roi-stat .roi-value{ font-size:32px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); line-height:1.2; }
.roi-stat .roi-sub{ font-size:12px; color:var(--muted); }

.compare-bars{ display:flex; flex-direction:column; gap:14px; }
.compare-bar-row{ display:flex; align-items:center; gap:14px; }
.compare-bar-label{ width:130px; flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--ink2); }
.compare-bar-track{ flex:1; height:28px; background:rgba(42,35,24,0.06); border-radius:8px; overflow:hidden; }
.compare-bar-fill{
  height:100%; border-radius:8px; display:flex; align-items:center; justify-content:flex-end; padding-right:10px;
  transition:width 0.7s cubic-bezier(.22,1,.36,1);
}
.compare-bar-fill.risk{ background:var(--terracotta); }
.compare-bar-fill.recovered{ background:var(--sage); }
.compare-bar-fill span{ font-size:11.5px; font-weight:800; color:#FBF7ED; white-space:nowrap; }

.roi-disclaimer{ font-size:11.5px; color:var(--muted); line-height:1.5; }

.growth-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--sage-bg); color:var(--sage-d);
  font-size:12.5px; font-weight:800; padding:7px 13px; border-radius:100px;
}
.growth-badge svg{ animation:arrow-bounce 1.6s ease-in-out infinite; flex-shrink:0; }
@keyframes arrow-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .growth-badge svg{ animation:none !important; } }

.chart-card .proj-bar{ transition:height 0.7s cubic-bezier(.22,1,.36,1), y 0.7s cubic-bezier(.22,1,.36,1); }
.chart-card .proj-label{ transition:opacity 0.3s ease; }

.nova-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.nova-feature-card{ padding:22px 24px; display:flex; flex-direction:column; gap:9px; }
.nova-feature-card svg{ color:var(--sage-d); }
.nova-feature-card h4{ font-size:14.5px; font-weight:700; margin:0; }
.nova-feature-card p{ font-size:12.5px; color:var(--ink2); line-height:1.55; margin:0; }

/* =========================================================
   Website builder demo page — magnifying glass field
   ========================================================= */
.lens-field{ position:relative; height:1180px; max-width:1440px; margin:0 auto; }
.lens-unit{ position:absolute; width:0; height:0; }
.lens{
  position:absolute; border-radius:100%; overflow:hidden;
  box-shadow:0 18px 40px rgba(42,35,24,0.22), inset 0 0 0 1px rgba(255,255,255,0.25);
  border:7px solid #DED2B2;
}
.lens-inner{ width:100%; height:100%; position:relative; overflow:hidden; display:flex; }
.lens-content{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  justify-content:center; gap:10px; height:100%; width:100%; box-sizing:border-box; padding:0 40px;
}
.handle{
  position:absolute; background:linear-gradient(135deg,#DED2B2,#A8916A); border-radius:6px;
  box-shadow:0 4px 10px rgba(42,35,24,0.25);
}
.caption{
  position:absolute; display:flex; flex-direction:column; gap:5px; width:200px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  box-shadow:0 1px 2px rgba(42,35,24,0.05), 0 10px 24px rgba(42,35,24,0.08); box-sizing:border-box;
}
.caption .k{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--sage-d); }
.caption .v{ font-size:12.5px; font-weight:600; color:var(--ink2); line-height:1.4; }
.caption.align-right{ text-align:right; align-items:flex-end; }

.lens-unit-1{ top:20px; left:60px; }
.lens-unit-1 .lens{ top:0; left:0; width:300px; height:300px; }
.lens-unit-1 .handle{ top:270px; left:195px; width:18px; height:150px; transform:rotate(45deg); transform-origin:top left; }
.lens-unit-1 .caption{ top:320px; left:-30px; }

.lens-unit-2{ top:70px; left:610px; }
.lens-unit-2 .lens{ top:0; left:0; width:270px; height:270px; }
.lens-unit-2 .handle{ top:250px; left:180px; width:16px; height:130px; transform:rotate(35deg); transform-origin:top left; }
.lens-unit-2 .caption{ top:290px; left:90px; }

.lens-unit-3{ top:0; left:1080px; }
.lens-unit-3 .lens{ top:0; left:0; width:320px; height:320px; }
.lens-unit-3 .handle{ top:300px; left:210px; width:18px; height:150px; transform:rotate(48deg); transform-origin:top left; }
.lens-unit-3 .caption{ top:355px; left:70px; }

.lens-unit-4{ top:560px; left:220px; }
.lens-unit-4 .lens{ top:0; left:0; width:280px; height:280px; }
.lens-unit-4 .handle{ top:240px; left:175px; width:16px; height:130px; transform:rotate(40deg); transform-origin:top left; }
.lens-unit-4 .caption{ top:280px; left:-30px; }

.lens-unit-5{ top:600px; left:850px; }
.lens-unit-5 .lens{ top:0; left:0; width:290px; height:290px; }
.lens-unit-5 .handle{ top:270px; left:180px; width:17px; height:140px; transform:rotate(42deg); transform-origin:top left; }
.lens-unit-5 .caption{ top:320px; left:80px; }

/* ---------- interactive "build yours" preview ---------- */
.builder-app{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:32px; align-items:start; }
.builder-controls{
  display:flex; flex-direction:column; gap:18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:28px;
  box-shadow:0 1px 2px rgba(42,35,24,0.04), 0 12px 28px rgba(42,35,24,0.05);
}
.builder-controls label{ font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
.builder-field + label{ margin-top:6px; }
.builder-input{
  width:100%; font-family:inherit; font-size:15px; padding:11px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--cream); color:var(--ink); box-sizing:border-box;
}
.builder-input:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-bg); }
.style-swatches{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.style-swatch{
  position:relative; border-radius:12px; padding:11px 8px; border:1.5px solid var(--line); cursor:pointer;
  display:flex; flex-direction:column; gap:7px; align-items:center; background:var(--cream);
  transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  width:100%; font-family:inherit; appearance:none; -webkit-appearance:none;
}
.style-swatch:hover{ transform:translateY(-2px); }
.style-swatch.active{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(42,35,24,0.08); }
.style-swatch .chip{ width:100%; height:26px; border-radius:6px; }
.style-swatch .chip-name{ font-size:10px; font-weight:700; color:var(--ink2); text-align:center; }
.builder-style-note{ font-size:11.5px; color:var(--muted); line-height:1.5; margin:-6px 0 0; }
.builder-style-note a{ font-weight:700; text-decoration:underline; }
.builder-generate{ width:100%; justify-content:center; margin-top:4px; }

/* custom target tabs (background / text / details) */
.custom-tabs{ display:flex; gap:4px; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:4px; }
.custom-tab{
  flex:1; font-size:11.5px; font-weight:700; font-family:inherit; padding:8px 6px; border-radius:7px;
  border:none; background:none; color:var(--ink2); cursor:pointer; transition:background 0.15s ease, color 0.15s ease;
}
.custom-tab:hover{ color:var(--ink); }
.custom-tab.active{ background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(42,35,24,0.08); }

/* color wheel */
.color-picker-row{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.color-wheel{
  position:relative; width:104px; height:104px; border-radius:100%; flex-shrink:0; cursor:crosshair;
  background:
    radial-gradient(circle at center, #fff 0%, rgba(255,255,255,0) 62%),
    conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(42,35,24,0.06), inset 0 0 0 1px rgba(255,255,255,0.4);
  touch-action:none;
}
.color-wheel-marker{
  position:absolute; width:14px; height:14px; border-radius:100%; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(42,35,24,0.35), 0 1px 4px rgba(0,0,0,0.3);
  transform:translate(-50%,-50%); pointer-events:none; top:50%; left:50%;
}
.color-picker-side{ flex:1; min-width:130px; display:flex; flex-direction:column; gap:11px; padding-top:2px; }
.brightness-row{ display:flex; flex-direction:column; gap:6px; }
.brightness-label{ font-size:10px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); }
.brightness-row input[type="range"]{ width:100%; accent-color:var(--sage); }
.color-readout{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ink2); font-family:'JetBrains Mono', monospace; }
.color-swatch-preview{ width:20px; height:20px; border-radius:6px; border:1px solid var(--line); flex-shrink:0; }
.color-reset-btn{
  margin-left:auto; font-size:11px; font-weight:700; color:var(--muted); background:none; border:none;
  text-decoration:underline; cursor:pointer; padding:0; font-family:inherit;
}
.color-reset-btn:hover{ color:var(--ink); }

.builder-preview-frame{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:0 1px 2px rgba(42,35,24,0.04), 0 20px 44px rgba(42,35,24,0.10);
  overflow:hidden; position:relative;
}
.builder-topbar{
  height:38px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:rgba(42,35,24,0.07); border-bottom:1px solid var(--line);
}
.traffic-dot{ width:10px; height:10px; border-radius:100%; flex-shrink:0; opacity:0.9; }
.builder-url-bar{
  flex:1; max-width:280px; display:flex; align-items:center; gap:6px; background:var(--card);
  border-radius:6px; padding:5px 10px; font-size:11px; color:var(--muted); font-weight:600;
  margin-left:8px; overflow:hidden;
}
.builder-url-bar svg{ flex-shrink:0; opacity:0.7; }
.builder-url-bar span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.builder-chrome{ height:46px; display:flex; align-items:center; gap:4px; padding:0 10px; background:rgba(42,35,24,0.04); border-bottom:1px solid var(--line); }
.builder-tab{
  font-size:12.5px; font-weight:700; font-family:inherit; color:var(--muted); background:none; border:none;
  cursor:pointer; padding:8px 15px; border-radius:8px; transition:background 0.15s ease, color 0.15s ease;
}
.builder-tab:hover{ color:var(--ink); }
.builder-tab.active{ background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(42,35,24,0.06); }

.builder-preview{
  position:relative; min-height:420px; overflow:hidden; display:flex; flex-direction:column;
  transition:background 0.5s ease, color 0.5s ease; background:var(--bp-bg,#fff); color:var(--bp-text,#222);
  font-family:var(--bp-font, inherit);
}
.bp-page{ flex:1; padding:36px 38px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; }
.bp-nav{ display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:14.5px; position:relative; z-index:2; }
.bp-nav .bp-dot{ width:8px; height:8px; border-radius:100%; background:var(--bp-accent,#5B6B4C); flex-shrink:0; }
.bp-headline{ font-size:28px; font-weight:800; line-height:1.15; max-width:420px; transition:color 0.4s ease; margin:0; }
.bp-sub{ font-size:13.5px; opacity:0.78; max-width:360px; line-height:1.55; margin:0; }
.bp-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; opacity:0.65; }
.bp-cta{
  display:inline-flex; align-self:flex-start; padding:10px 22px; border-radius:100px; font-size:12.5px;
  font-weight:800; background:var(--bp-accent,#5B6B4C); color:var(--bp-accent-text,#fff); transition:background 0.4s ease;
  border:none; position:relative; z-index:2; white-space:nowrap;
}
.bp-body{ flex:1; display:flex; flex-direction:column; position:relative; z-index:1; }

/* layout: Modern Minimal - centered */
.bp-body.layout-centered{ align-items:center; justify-content:center; text-align:center; gap:14px; }
.bp-body.layout-centered .bp-cta{ align-self:center; background:transparent; border:2px solid var(--bp-accent,#5B6B4C); color:var(--bp-text); }

/* layout: Bold & Bright - split with diagonal stat block */
.bp-body.layout-split{ display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:18px; flex:1; }
.bp-body.layout-split .bp-copy{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.bp-body.layout-split .bp-stat-block{
  position:relative; height:100%; min-height:150px; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:var(--bp-accent,#5B6B4C);
}
.bp-body.layout-split .bp-stat-block::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-35deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 10px, transparent 10px, transparent 20px);
}
.bp-body.layout-split .bp-stat-num{ font-size:34px; font-weight:900; color:var(--bp-accent-text,#fff); position:relative; z-index:1; }
.bp-body.layout-split .bp-stat-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--bp-accent-text,#fff); opacity:0.85; position:relative; z-index:1; }

/* layout: Soft & Warm - blobs behind text */
.bp-body.layout-blob{ justify-content:center; gap:10px; }
.bp-body.layout-blob .bp-blob{ position:absolute; border-radius:50%; opacity:0.35; background:var(--bp-accent,#5B6B4C); z-index:0; }
.bp-body.layout-blob .bp-blob-1{ width:130px; height:130px; top:-40px; right:-30px; }
.bp-body.layout-blob .bp-blob-2{ width:90px; height:90px; bottom:-20px; left:10%; }
.bp-body.layout-blob .bp-headline{ font-style:italic; }

/* layout: Sleek Dark - terminal feature list */
.bp-body.layout-terminal{ justify-content:center; gap:14px; }
.bp-body.layout-terminal .bp-features{ display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.bp-body.layout-terminal .bp-feature-row{ display:flex; align-items:center; gap:8px; font-size:12px; opacity:0.85; }
.bp-body.layout-terminal .bp-feature-row .chevron{ color:var(--bp-accent,#5B6B4C); font-weight:800; }
.bp-body.layout-terminal .bp-cta{ border-radius:5px; }

/* layout: Elegant Gold - editorial wordmark */
.bp-body.layout-editorial{ align-items:center; justify-content:center; text-align:center; gap:12px; }
.bp-body.layout-editorial .bp-eyebrow{ opacity:0.75; }
.bp-body.layout-editorial .bp-headline{ font-size:24px; letter-spacing:0.06em; text-transform:uppercase; max-width:none; }
.bp-body.layout-editorial .bp-divider{ width:36px; height:1px; background:var(--bp-accent,#5B6B4C); }
.bp-body.layout-editorial .bp-cta{
  background:none; color:var(--bp-text); padding:0; border-radius:0; text-decoration:underline;
  text-underline-offset:4px; font-weight:700;
}

/* layout: Playful Pastel - feature cards */
.bp-body.layout-cards{ gap:16px; }
.bp-body.layout-cards .bp-card-row{ display:flex; gap:10px; margin-top:auto; flex-wrap:wrap; }
.bp-body.layout-cards .bp-feature-card{
  flex:1; min-width:96px; background:rgba(255,255,255,0.5); border-radius:12px; padding:12px 10px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.bp-body.layout-cards .bp-feature-card .emoji{ font-size:18px; }
.bp-body.layout-cards .bp-feature-card .label{ font-size:10.5px; font-weight:800; }

/* about / contact page (shared simple layout) */
.bp-body.layout-simple{ justify-content:center; gap:12px; }
.bp-body.layout-simple .bp-divider{ width:36px; height:3px; border-radius:3px; background:var(--bp-accent,#5B6B4C); }

.builder-reachout{
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px;
  background:var(--card); border-top:1px solid var(--line); flex-wrap:wrap;
}
.builder-reachout span{ font-size:13px; font-weight:700; color:var(--ink2); }
.builder-reachout .pill{ padding:9px 18px; font-size:12.5px; }

.builder-loading{
  position:absolute; inset:0; background:var(--card); display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; z-index:5;
}
.builder-loading.show{ display:flex; }
.builder-loading .spinner{ width:34px; height:34px; border-radius:100%; border:3px solid var(--line); border-top-color:var(--sage); animation:bspin 0.8s linear infinite; }
.builder-loading span{ font-size:12.5px; font-weight:700; color:var(--muted); }
@keyframes bspin{ to{ transform:rotate(360deg); } }

/* =========================================================
   Privacy page
   ========================================================= */
.policy-wrap{ max-width:700px; margin:0 auto; padding:70px 24px 100px; display:flex; flex-direction:column; }
.policy-wrap h1{ font-size:38px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; }
.policy-updated{ font-size:13px; color:var(--muted); margin-bottom:20px; }
.policy-wrap h2{ font-size:16.5px; font-weight:700; margin:30px 0 10px; }
.policy-wrap p, .policy-wrap li{ font-size:14.5px; color:var(--ink2); line-height:1.7; margin:0 0 10px; }
.policy-wrap ul{ padding-left:20px; margin:0 0 10px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-split .hero-text{ align-items:center; }
  .hero-split .hero-actions{ justify-content:center; }
  .hero-logo{ order:-1; margin-bottom:8px; }
  .hero-logo img{ max-width:240px; }
  .about-grid{ grid-template-columns:1fr; text-align:center; }
  .about-text{ align-items:center; }
  .about-art{ order:-1; }
  .founder-grid{ grid-template-columns:1fr; text-align:center; gap:28px; }
  .founder-text{ align-items:center; }
  .founder-photo img{ max-width:320px; margin:0 auto; }
  .founder-strip-inner{ flex-direction:column; text-align:center; padding:26px 22px; }
  .founder-strip-text{ align-items:center; }
  .services-grid{ grid-template-columns:1fr; grid-template-rows:none; }
  .service-big{ grid-row:auto; }
  .coming-soon-row{ grid-column:auto; grid-template-columns:1fr 1fr; }
  .insights-grid{ grid-template-columns:1fr; }
  .compare-grid{ grid-template-columns:1fr; }
  .doing-grid{ grid-template-columns:1fr; }
  .beat-grid{ grid-template-columns:1fr; }
  .priority-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .builder-app{ grid-template-columns:1fr; }
  .bp-body.layout-split{ grid-template-columns:1fr; }
  .bp-body.layout-split .bp-stat-block{ min-height:100px; }
  .roi-fields{ grid-template-columns:1fr; }
  .roi-outputs{ grid-template-columns:1fr; }
  .nova-feature-grid{ grid-template-columns:1fr; }
  .compare-bar-label{ width:100px; font-size:11.5px; }
}

@media (max-width: 720px){
  .navlinks{ display:none; }
  .hero h1{ font-size:38px; }
  .hero p.lead{ font-size:16px; }
  .section-head h2{ font-size:26px; }
  .call-block .number{ font-size:24px; }
  .coming-soon-row{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .dark-section h2{ font-size:26px; }
  .ticker-item{ font-size:12px; }
}

@media (max-width: 860px){
  .lens-field{ height:auto; padding:20px 16px 40px; display:flex; flex-direction:column; align-items:center; gap:44px; }
  .lens-unit{ position:static !important; width:auto; height:auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .lens-unit .lens{ position:static; top:auto; left:auto; width:240px !important; height:240px !important; }
  .lens-unit .handle{ display:none; }
  .lens-unit .caption{ position:static; top:auto; left:auto; text-align:center !important; align-items:center !important; max-width:280px; }
}