@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --background:#FFFFFF;
  --panel:#F2F7FA;
  --line:#D7E3EB;
  --text:#0E263D;
  --faded:#4F6475;
  --accent:#18789B;
  --accent-deep:#105E7C;
  --link:#176E91;
  --sans:'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --w: 1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--background);
  color:var(--text);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--background)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}

/* ---------- section labels ---------- */
.stamp{
  font-family:var(--sans);font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:12px;
  margin-bottom:22px;
}
.stamp::before{content:'';width:26px;height:1px;background:var(--accent)}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--w);margin:0 auto;padding:0 28px;height:88px;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:800;font-size:24px;letter-spacing:.06em;color:var(--text)}
.wordmark .mark{width:48px;height:48px;display:block}
.wordmark .wm{line-height:1.15}
.wordmark small{display:block;margin-top:5px;font-size:9px;font-weight:600;letter-spacing:.22em;color:var(--faded)}
footer .wordmark .mark{width:40px;height:40px}
.wordmark:hover{text-decoration:none}
.wordmark .ai{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text)}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.btn-solid,.nav-links a.btn-solid:hover{color:#FFFFFF}
.btn{
  display:inline-block;
  font-family:var(--sans);font-weight:600;font-size:14.5px;
  padding:13px 24px;border-radius:3px;
  border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn-solid{background:var(--accent);color:#FFFFFF}
.btn-solid:hover{background:var(--accent-deep);color:#FFFFFF}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-sm{padding:8px 16px;font-size:13px}

/* ---------- hero ---------- */
header.hero{
  position:relative;
  min-height:760px;
  min-height:min(880px, 100svh);
  color:#FFFFFF;
  --text:#FFFFFF;
  --line:rgba(255,255,255,.3);
  --accent:#75D2EC;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    url('assets/hero.jpg') center 45%/cover no-repeat,
    radial-gradient(120% 90% at 70% 10%, #176E91 0%, #0E263D 60%, #0E263D 100%);
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(14,38,61,.76) 0%, rgba(14,38,61,.62) 50%, #0E263D 100%);
}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;padding:158px 28px 0;text-align:center}
.hero h1{
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(2.6rem, 5.5vw, 4.6rem);
  line-height:1.1;
  letter-spacing:-.045em;
  max-width:20ch;margin:0 auto;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{
  margin:26px auto 0;max-width:720px;
  font-size:18px;line-height:1.65;color:#E2EDF4;
}
.hero .cta-row{margin-top:32px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hero .btn{padding:14px 28px;font-size:15.5px}
.reveal-hero{animation:rise .8s ease both}
.reveal-hero.d1{animation-delay:.08s}.reveal-hero.d2{animation-delay:.18s}.reveal-hero.d3{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-foot{
  position:relative;z-index:2;
  margin-top:54px;
  border-top:1px solid rgba(255,255,255,.18);
  background:#0E263D;
}
.hero-foot-in{
  max-width:var(--w);margin:0 auto;padding:24px 28px;
  display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.hero-foot-in .lbl{color:var(--accent)}
.hero-foot-in .client-logo{
  display:flex;align-items:center;gap:9px;
  color:#FFFFFF;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;text-transform:none;
}
.hero-foot-in .client-logo svg{flex:none;display:block}

/* ---------- sections ---------- */
section{padding:110px 0;border-top:1px solid var(--line)}
section.no-rule{border-top:none}
h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.18;letter-spacing:-.035em;
  max-width:22ch;
}
.section-lede{margin-top:20px;max-width:640px;color:var(--faded);font-size:17px}
.section-lede strong{color:var(--text);font-weight:600}

/* problem cards */
.cards3{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pcard{background:var(--background);padding:36px 30px}
.pcard .big{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.1;
}
.pcard .big .u{color:var(--accent)}
.pcard p{margin-top:14px;color:var(--faded);font-size:15px}
.pcard .src{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faded)}

/* comparison */
.compare{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cmp{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:34px 32px}
.cmp.win{border-color:var(--accent)}
.cmp .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded)}
.cmp.win .tag{color:var(--accent)}
.cmp h3{font-family:var(--sans);font-weight:700;font-size:22px;margin-top:14px;line-height:1.3}
.cmp p{margin-top:12px;color:var(--faded);font-size:15px}
.cmp p b{color:var(--text);font-weight:600}
.cmp .hits{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.cmp .hit{
  font-family:var(--mono);font-size:12.5px;line-height:1.5;
  color:var(--link);
  border-left:2px solid var(--line);padding:6px 0 6px 14px;
}
.cmp.win .hit{border-left-color:var(--accent)}
.compare-note{margin-top:26px;font-size:15px;color:var(--faded);max-width:640px}
.compare-note b{color:var(--text)}

/* How it works diagram and captions */
.how-figure{margin-top:42px}
.how-figure img{width:100%;height:auto;border-radius:6px}
.how-captions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px}
.how-captions .lname{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.how-captions h3{font-size:19px;line-height:1.35}
.how-captions p{margin-top:10px;color:var(--faded);font-size:15px}

/* demo */
.demo-frame{
  margin-top:56px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(14,38,61,.12);
}
.demo-frame img{width:100%;height:auto}
.demo-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--line);
}
.demo-bar i{width:10px;height:10px;border-radius:50%;background:#ADC4D2;display:block}
.demo-bar .t{margin-left:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faded)}
.demo-cap{
  margin-top:26px;max-width:720px;
}
.demo-cap .lead{font-family:var(--sans);font-size:20px;font-weight:500;line-height:1.4}
.demo-cap .lead span{color:var(--accent)}
.demo-cap p{margin-top:12px;color:var(--faded);font-size:15.5px}

/* use cases */
.uses{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.use{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:32px}
.use h3{font-family:var(--sans);font-weight:700;font-size:21px}
.use .who{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded);margin-bottom:12px}
.use .q{
  margin-top:18px;
  font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--link);
  background:var(--background);border:1px solid var(--line);border-radius:5px;
  padding:14px 16px;
}
.use .q::before{content:'❯ ';color:var(--accent)}

/* coverage */
.coverage{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
.cov-line{font-family:var(--sans);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.3}
.cov-line span{color:var(--accent)}
.cov-sub{margin-top:18px;color:var(--faded);font-size:16px;max-width:480px}
.modes{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.mode{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text);border:1px solid var(--line);border-radius:99px;padding:7px 16px}
.endpoint{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:28px;
}
.endpoint .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded)}
.endpoint code{
  display:block;margin-top:14px;
  font-family:var(--mono);font-size:13.5px;color:var(--link);
  word-break:break-all;line-height:1.5;
}
.endpoint .gate{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;color:var(--faded);
}
.endpoint .gate b{color:var(--text)}
.trust{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
}
.trust .seal{flex:none;width:40px;height:40px}
.trust-txt{font-size:13px;line-height:1.55;color:var(--faded)}
.permeta-line{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);color:var(--faded);font-size:15px;max-width:640px}
.permeta-line b{color:var(--text);font-weight:600}

/* closing */
.closing{text-align:center;padding:130px 0}
.closing .stamp{justify-content:center}
.closing .stamp::before{display:none}
.closing h2{margin:0 auto;max-width:16ch}
.closing p{margin:22px auto 0;max-width:520px;color:var(--faded)}
.closing .cta-row{margin-top:40px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.closing .btn{padding:15px 32px;font-size:15.5px}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 56px}
.foot-in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-in .wordmark{font-size:15px}
.foot-meta{font-size:13px;color:var(--faded);max-width:560px;line-height:1.7}
.foot-meta a{color:var(--faded)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}

/* responsive */
@media (max-width: 920px){
  .cards3{grid-template-columns:1fr}
  .compare,.uses{grid-template-columns:1fr}
  .coverage{grid-template-columns:1fr;gap:44px}
}
@media (max-width: 720px){
  .nav-links a.link{display:none}
  section{padding:80px 0}
  .hero-in{padding-top:120px}
  .hero-foot{margin-top:60px}
}

/* ---------- from/to chart ---------- */
.fromto{margin-top:56px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ft-head,.ft-row{display:grid;grid-template-columns:1fr 56px 1fr}
.ft-head{background:var(--panel);border-bottom:1px solid var(--line)}
.ft-head div{padding:14px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faded)}
.ft-head div:last-child{color:var(--accent)}
.ft-row{border-bottom:1px solid var(--line)}
.ft-row:last-child{border-bottom:none}
.ft-row > div{padding:24px 26px;font-size:15.5px;line-height:1.55}
.ft-from{color:var(--faded)}
.ft-to{color:var(--text)}
.ft-to b{color:var(--text);font-weight:600}
.ft-from b{font-weight:600;color:var(--text)}
.ft-arrow{display:flex;align-items:center;justify-content:center;padding:0!important;color:var(--accent);font-family:var(--mono);font-size:16px}
.ft-note{margin-top:22px;font-size:15.5px;color:var(--faded);max-width:640px}
.ft-note b{color:var(--text)}

/* ---------- trust rows ---------- */
.trust-inline{
  margin-top:34px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:center;font-size:12px;color:#D6E6EF;
}
.trust-inline .seal{flex:none;width:34px;height:34px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.badge{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);border:1px solid var(--line);border-radius:4px;padding:9px 14px;
  display:inline-flex;align-items:center;gap:9px;background:var(--panel);
}
.badge-nvidia,.badge-aws{min-height:84px;justify-content:center}
.badge-nvidia{background:#FFFFFF}
.badge-nvidia img{width:170px;height:auto}
.badge-aws{background:#232F3E;color:#FFFFFF;gap:14px}
.badge-aws img{width:59px;height:35px;flex:none}
.badge.dim{color:var(--faded)}

/* ---------- persona cards ---------- */
.use{position:relative}
.use .who{display:flex;align-items:center;gap:10px}
.use .ico{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:6px;background:var(--background);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.use .ico svg{width:20px;height:20px}
.use .qlbl{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded)}
.use .q{margin-top:8px}

/* ---------- short band ---------- */
section.band{padding:90px 0}
.band-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}

@media (max-width: 920px){
  .band-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width: 720px){
  .ft-head{display:none}
  .ft-row{grid-template-columns:1fr}
  .ft-arrow{display:none}
  .ft-from{padding-bottom:6px!important}
  .ft-from::before{content:'From';display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded);margin-bottom:8px}
  .ft-to{padding-top:6px!important}
  .ft-to::before{content:'To';display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
}

/* Permeta's navy bands and light content surfaces. */
#retrieval,.closing{
  --background:#0E263D;--panel:#183A54;--text:#FFFFFF;
  --faded:#D3E2ED;--line:#365269;--accent:#75D2EC;--link:#75D2EC;
  background:var(--background);color:var(--text);
}
#examples,#coverage{background:var(--panel)}
.hero .btn-solid,.closing .btn-solid{background:#FFFFFF;color:#0E263D}
.hero .btn-solid:hover,.closing .btn-solid:hover{background:#DFF3FA;color:#0E263D}
.hero .btn-ghost:hover,.closing .btn-ghost:hover{background:rgba(255,255,255,.1)}
.ft-to{background:#F2F8FB}
.seal{color:var(--text)}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;padding:12px 20px;background:#FFFFFF;color:#0E263D;transform:translateY(-160%)}
.skip-link:focus{transform:none}
@media (max-width:720px){
  .nav-in{height:76px;padding:0 20px}
  .nav-links{gap:0}
  .wordmark{font-size:20px;gap:8px}
  .wordmark .mark{width:38px;height:38px}
  .hero-in{padding:130px 24px 0}
  .hero .lede{font-size:16px}
  .hero-foot{margin-top:40px}
  .hero-foot-in{gap:18px;padding:22px 24px}
  .hero-foot-in .lbl{width:100%;text-align:center}
  .trust-inline{gap:8px}
  .trust-inline span{max-width:290px}
  .wrap{padding:0 24px}
  .use{padding:26px 24px}
  .btn-sm{padding:10px 12px;font-size:12px}
}

#retrieval .trust{margin-top:0;padding-top:0;border-top:none}
.coverage .badges{margin-top:16px}
.endpoint .gate{margin-top:14px;padding-top:0;border-top:none}
.endpoint .cta-row{margin-top:20px}
.closing.no-rule{border-top:1px solid var(--line)}
.foot-in .wordmark + .foot-meta{margin-top:10px}

/* Connection guide shares the site's typography, colors, and controls. */
.guide-header{padding:150px 0 56px;background:var(--panel);border-bottom:1px solid var(--line)}
.guide-header .wrap,.guide{max-width:960px}
.guide-header h1{font-size:clamp(2.3rem,5vw,3.8rem);font-weight:800;line-height:1.12;letter-spacing:-.04em}
.guide-header .section-lede{max-width:760px}
.guide-help{margin-top:24px}
.guide-date{margin-top:20px;color:var(--faded);font-size:12px}
.guide section{padding:56px 0}
.guide section:first-child{border-top:0}
.guide h2{max-width:none}
.guide h3{font-size:19px;line-height:1.4}
.guide p{margin-top:16px}
.guide a:not(.btn),.guide-help a{text-decoration:underline;text-underline-offset:3px}
.guide code{font-family:var(--mono);font-size:.9em;overflow-wrap:anywhere}
.guide-server{margin:28px 0;padding:28px;background:var(--text);color:#FFFFFF;border-radius:6px}
.guide-server dl{display:grid;grid-template-columns:135px 1fr;gap:12px;margin-top:20px}
.guide-server dt{font-size:13px;color:#D3E2ED}
.guide-server dd{min-width:0}
.guide-server dd code{color:#75D2EC;user-select:all}
.guide-server p{font-size:14px;color:#D3E2ED}
.guide-choose{margin-top:32px}
.guide-platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
.guide-platforms a{display:block;padding:16px;border:1px solid var(--line);border-radius:6px;text-decoration:none!important;color:var(--text)}
.guide-platforms a:hover{background:var(--panel);border-color:var(--accent)}
.guide-platforms svg{display:block;margin-bottom:12px}
.guide-platforms strong{display:flex;justify-content:space-between;gap:6px;font-size:14px}
.guide-platforms a > span{display:block;color:var(--faded);font-size:13px;margin-top:6px}
.guide-notice{margin:24px 0;padding:20px 24px;border-left:4px solid var(--accent);background:var(--panel)}
.guide-notice p{margin-top:8px;font-size:15px}
.guide-steps{padding-left:26px;margin:28px 0}
.guide-steps li{padding-left:8px;margin:18px 0}
.guide-steps li::marker{color:var(--accent);font-weight:700}
.guide-source{font-size:13px;color:var(--faded)}
.guide-details{margin-top:24px;padding:20px 24px;border:1px solid var(--line);border-radius:6px;font-size:15px}
.guide-details summary{cursor:pointer;font-weight:600}
.guide-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.guide-prompt{margin:24px 0;padding:24px;border-left:4px solid var(--accent);background:var(--panel);font-size:18px}
.guide-troubleshooting dt{margin-top:24px;font-weight:700}
.guide-troubleshooting dd{margin-top:6px;color:var(--faded)}
.guide-support{margin-top:32px;padding:28px;background:var(--panel);border-radius:6px}
.guide-support .btn{margin-top:20px}
.setup-link{margin-top:20px;font-size:14px}
@media (max-width:960px){
  .nav-links{gap:18px}
}
@media (max-width:720px){
  .guide-header{padding:116px 0 40px}
  .guide section{padding:40px 0}
  .guide-platforms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-server,.guide-support{padding:22px}
  .guide-server dl{grid-template-columns:1fr;gap:6px}
  .guide-server dt:not(:first-child){margin-top:10px}
  .guide-notice,.guide-details{padding:18px}
}

/* Beta identity, testimonials, and examples. */
.beta-badge{display:inline-block;margin-left:8px;padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.04em;vertical-align:middle}
.testimonials{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:48px}
.testimonial{padding:28px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.testimonial blockquote{font-size:17px;line-height:1.65}
.testimonial figcaption{margin-top:22px;font-size:13px;line-height:1.6;color:var(--faded)}
.testimonial figcaption strong,.testimonial figcaption span{display:block}
.testimonial figcaption strong{color:var(--accent)}
.examples-heading{margin-top:64px;font-size:26px;line-height:1.3;letter-spacing:-.02em}
#examples .uses{margin-top:28px}
.example-results{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:22px;font-size:14px;font-weight:600}
.example-results a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.beta-benefits{margin-top:22px;padding-left:20px;color:var(--faded);font-size:15px}
.beta-benefits li{margin:10px 0;padding-left:3px}
.beta-benefits li::marker{color:var(--accent)}
.account-link{margin-top:22px;font-size:13px;color:var(--faded)}
.account-link a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* FAQ stays a single compact row until opened; answers need no JavaScript. */
.feedback{padding:56px 0}
.feedback .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px}
.feedback h2{font-size:26px;max-width:none}
.feedback p{margin-top:12px;color:var(--faded);font-size:15px}
.feedback .btn{flex:none}
.faq{padding:40px 0 56px;background:var(--panel)}
.faq-panel{border:1px solid var(--line);border-radius:6px;background:var(--background)}
.faq summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;flex:none;color:var(--accent);font-size:24px;font-weight:400}
.faq details[open]>summary::after{content:'−'}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.faq-panel>summary{padding:24px 28px}
.faq-panel h2{font-size:24px;max-width:none}
.faq-count{color:var(--faded);font-size:13px;white-space:nowrap}
.faq-items{padding:0 28px 10px}
.faq-items>details{border-top:1px solid var(--line)}
.faq-items summary{padding:16px 0;font-size:16px;font-weight:600;line-height:1.5}
.faq-answer{padding:0 38px 22px 0;max-width:900px;color:var(--faded);font-size:15px;line-height:1.7}
.faq-answer p+p,.faq-answer ul{margin-top:12px}
.faq-answer ul{padding-left:20px}
.faq-answer li+li{margin-top:8px}
.faq-answer a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){
  .testimonials,.how-captions{grid-template-columns:1fr;gap:24px}
  .testimonial{padding:24px}
  .feedback .wrap{align-items:flex-start;flex-direction:column}
  .faq-panel>summary{padding:20px;flex-wrap:wrap;gap:8px}
  .faq-panel h2{font-size:20px;max-width:16ch}
  .faq-count{display:none}
  .faq-items{padding:0 20px 4px}
  .faq-answer{padding-right:0}
}