/* ============================================================
   AskBnB — redesign
   Concept: an editorial hospitality wrapper around a real
   messaging interface. Deep slate-blue night surfaces make the
   brand blue read as light from a phone screen; brass is the
   only ornament. Serif for voice, Inter for anything a guest
   would actually tap.
   ============================================================ */

/* Self-hosted static fonts: fixed weights render identically in Safari, Chrome and Firefox */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:300; font-display:swap; src:url("/assets/fonts/fraunces-300.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/fraunces-400.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/inter-500.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/inter-600.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/inter-700.woff2") format("woff2"); }

:root{
  --ink:        #0E1721;
  --ink-2:      #17232F;
  --ink-3:      #22323F;
  --paper:      #FBFAF8;
  --paper-2:    #F1F0EC;
  --brand:      #1CA6FD;
  --brand-deep: #0B7FCB;
  --brass:      #C8A46B;
  --slate:      #55636F;
  --mist:       #E2E5E8;
  --white:      #FFFFFF;

  --shell: min(1180px, 100% - 3rem);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bubble: 1.25rem;
  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- type ---------- */

h1,h2,h3,h4{ margin:0; font-weight:600; }

.display{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.08;
  font-size:clamp(2rem, 4.2vw, 3.1rem);
  max-width:20ch;
}

.display--lead{ margin-bottom:2.4rem; max-width:24ch; }

.lede{
  font-size:clamp(1.05rem, 1.5vw, 1.2rem);
  line-height:1.62;
  max-width:52ch;
  color:#C9D4DE;
}

.lead-p{ max-width:62ch; font-size:1.1rem; color:var(--slate); }

.link{
  display:inline-block;
  font-weight:600;
  font-size:.97rem;
  color:var(--brand-deep);
  text-decoration-color:rgba(28,166,253,.35);
  text-underline-offset:4px;
}
.link:hover{ text-decoration-color:var(--brand); }

/* ---------- layout ---------- */

.wrap{ width:var(--shell); margin-inline:auto; }
.wrap--narrow{ width:min(720px, 100% - 3rem); }

.band{ padding:7rem 0; }
.band--tight{ padding-top:0; }
.band--paper{ background:var(--paper); }
.band--ink{ background:var(--ink); color:var(--paper); }
.band--ink .display{ color:var(--white); }
.band--ink p{ color:#AFBECB; }

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.split--rev .split__text{ order:2; }
.split--rev .split__aside{ display:flex; justify-content:center; }
.split__text > p{ max-width:46ch; color:var(--slate); }
.band--ink .split__text > p{ color:#AFBECB; }
.split__text .display{ margin-bottom:1.1rem; }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--sans);
  font-size:.97rem;
  font-weight:600;
  letter-spacing:-0.01em;
  padding:.85rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }

.btn--brand{
  background:var(--brand);
  color:#04263B;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.btn--brand:hover{ background:#3FB6FF; }

.btn--line{
  background:transparent;
  border-color:rgba(14,23,33,.22);
  color:var(--ink);
}
.btn--line:hover{ border-color:var(--ink); background:rgba(14,23,33,.04); }

.btn--ghost{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
}
.btn--ghost:hover{ background:rgba(255,255,255,.14); }

.btn--lg{ padding:1.05rem 1.9rem; font-size:1.02rem; }
.btn--sm{ padding:.6rem 1.1rem; font-size:.88rem; }
.btn--full{ width:100%; }

/* ---------- nav ---------- */

.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:2rem;
  width:100%;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(14,23,33,.95);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background-color .25s var(--ease);
}
.nav__brand{ display:block; line-height:0; }
.nav__brand img{ height:44px; width:auto; }
.nav__links{ display:flex; gap:1.6rem; margin-right:auto; }
.nav__links a{
  font-size:.92rem; font-weight:500; color:#B9C6D2; text-decoration:none;
  padding:.3rem 0; border-bottom:1px solid transparent;
}
.nav__links a:hover{ color:#fff; border-bottom-color:var(--brand); }
.nav__actions{ display:flex; align-items:center; gap:1.1rem; }
.nav__login{ font-size:.92rem; font-weight:500; color:#B9C6D2; text-decoration:none; }
.nav__login:hover{ color:#fff; }
.nav__toggle{ display:none; }

/* ---------- hero ---------- */

.hero{
  background:
    radial-gradient(90rem 40rem at 78% -10%, rgba(28,166,253,.22), transparent 62%),
    radial-gradient(50rem 30rem at 8% 110%, rgba(200,164,107,.10), transparent 60%),
    var(--ink);
  color:var(--paper);
  padding:clamp(3.5rem,7vw,6rem) 0 0;
}
.hero__grid{
  width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__eyebrow{
  font-family:var(--sans); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin:0 0 1.1rem;
}
.hero__hook{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.35rem, 5.2vw, 4.05rem);
  line-height:1.03;
  letter-spacing:-0.025em;
  max-width:15ch;
  color:var(--white);
  margin:0 0 1.5rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin:2.2rem 0 1rem; }
.hero__fine{ font-size:.9rem; color:#7E8FA0; margin:0; }
.hero__phone{ display:flex; justify-content:center; }

.rail{
  width:var(--shell); margin:clamp(3rem,6vw,5rem) auto 0;
  list-style:none; padding:1.4rem 0 1.5rem; margin-bottom:0;
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid rgba(255,255,255,.1);
}
.rail li{
  font-size:.86rem; color:#8FA0B0; padding:0 1.6rem;
  border-left:1px solid rgba(255,255,255,.1);
}
.rail li:first-child{ border-left:0; padding-left:0; }

/* ---------- phone + thread ---------- */

.phone{
  position:relative;
  width:min(340px, 100%);
  background:linear-gradient(180deg,#F7F9FB,#EEF2F6);
  border-radius:2.4rem;
  padding:.55rem;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 2px 4px rgba(4,12,20,.30),
    0 30px 70px -20px rgba(4,12,20,.75);
}
.phone::after{
  content:""; position:absolute; inset:.55rem;
  border-radius:1.95rem; pointer-events:none;
  box-shadow:0 0 0 1px rgba(14,23,33,.07) inset;
}
.phone__notch{
  position:absolute; top:.95rem; left:50%; transform:translateX(-50%);
  width:82px; height:5px; border-radius:99px; background:rgba(14,23,33,.14); z-index:3;
}
.phone__bar{
  display:flex; align-items:center; gap:.65rem;
  padding:1.9rem .95rem .7rem;
  border-bottom:1px solid rgba(14,23,33,.08);
  background:rgba(255,255,255,.7);
  border-radius:1.95rem 1.95rem 0 0;
}
.phone__avatar{
  width:34px; height:34px; border-radius:50%;
  object-fit:contain; object-position:center;
  background:var(--white); padding:3px;
  border:1px solid rgba(14,23,33,.08);
}
.phone__who{ display:flex; flex-direction:column; line-height:1.25; }
.phone__who strong{ font-size:.92rem; color:var(--ink); }
.phone__who span{ font-size:.74rem; color:#8A97A3; }

.thread{
  display:flex; flex-direction:column; gap:.55rem;
  padding:1.1rem .85rem;
  min-height:330px;
  justify-content:flex-end;
}
.thread--scroll{ min-height:300px; max-height:300px; overflow-y:auto; justify-content:flex-start; }
.phone__input{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 .85rem .95rem; padding:.6rem .9rem;
  background:var(--white); border:1px solid rgba(14,23,33,.1);
  border-radius:999px; font-size:.84rem; color:#9AA6B1;
}
.phone__input i{ width:22px; height:22px; border-radius:50%; background:var(--brand); }

.bubble{
  max-width:82%;
  padding:.62rem .9rem;
  border-radius:var(--bubble);
  font-size:.91rem;
  line-height:1.45;
  animation:pop .28s var(--ease) both;
}
.bubble--guest{
  align-self:flex-end;
  background:var(--brand);
  color:#032235;
  border-bottom-right-radius:.4rem;
  font-weight:500;
}
.bubble--ai{
  align-self:flex-start;
  background:var(--white);
  color:var(--ink);
  border:1px solid rgba(14,23,33,.08);
  border-bottom-left-radius:.4rem;
  box-shadow:0 1px 2px rgba(14,23,33,.05);
}
.bubble--source{
  align-self:flex-start;
  background:transparent; border:0; box-shadow:none;
  font-size:.72rem; color:#8A97A3; padding:0 .35rem;
}
.bubble strong{ font-weight:600; }
.bubble__img{ display:block; width:110px; margin-top:.6rem; border-radius:.5rem; background:#fff; }
.bubble__img--wide{ width:100%; max-width:150px; aspect-ratio:4/3; object-fit:cover; }

.typing{
  align-self:flex-start;
  display:inline-flex; gap:4px;
  background:var(--white); border:1px solid rgba(14,23,33,.08);
  padding:.7rem .85rem; border-radius:var(--bubble);
  border-bottom-left-radius:.4rem;
  animation:pop .2s var(--ease) both;
}
.typing span{
  width:6px; height:6px; border-radius:50%; background:#B4BFC9;
  animation:blink 1.1s infinite;
}
.typing span:nth-child(2){ animation-delay:.18s; }
.typing span:nth-child(3){ animation-delay:.36s; }

@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.97);} to{ opacity:1; transform:none;} }
@keyframes blink{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

/* flat thread (no phone shell) */
.thread--flat{
  min-height:320px; padding:0; gap:.7rem;
  background:transparent;
}
.thread--flat .bubble{ max-width:74%; font-size:.97rem; padding:.75rem 1.05rem; }
.thread--flat .bubble--ai{ box-shadow:0 2px 10px rgba(14,23,33,.05); }

/* ---------- chips ---------- */

.chips{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:.7rem .85rem 1rem;
  border-top:1px solid rgba(14,23,33,.07);
}
.chip{
  font-family:var(--sans); font-size:.79rem; font-weight:500;
  padding:.42rem .8rem; border-radius:999px;
  background:var(--white); color:var(--brand-deep);
  border:1px solid rgba(28,166,253,.35);
  cursor:pointer;
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover{ background:var(--brand); color:#032235; border-color:var(--brand); }
.chip[disabled]{ opacity:.35; cursor:default; }

.demo__note{ font-size:.88rem; margin-top:1.4rem; max-width:40ch; }
.demo__video{ margin-top:1.8rem; max-width:30rem; box-shadow:0 20px 50px -20px rgba(0,0,0,.7); }

/* ---------- ticks ---------- */

.ticks{ list-style:none; padding:0; margin:1.6rem 0 1.8rem; }
.ticks li{
  position:relative; padding-left:1.6rem; margin-bottom:.7rem;
  color:var(--ink); font-size:1rem;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:2px;
  background:var(--brass);
}
.ticks--dark li{ color:#D3DDE6; }

/* ---------- steps ---------- */

.steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.6rem);
}
.step{
  padding-top:1.2rem;
  border-top:2px solid var(--ink);
}
.step__no{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.95rem; color:var(--brass); margin:0 0 .4rem;
}
.step h3{
  font-family:var(--serif); font-weight:400; font-size:1.45rem;
  letter-spacing:-0.015em; line-height:1.18; margin-bottom:.7rem;
}
.step p{ color:var(--slate); font-size:.96rem; margin:0 0 1.1rem; }
.step__meta{ font-size:.78rem; color:#94A0AB; margin:.6rem 0 0 !important; }

.video{
  position:relative; padding-top:56.25%;
  border-radius:.9rem; overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 10px 30px -14px rgba(14,23,33,.5);
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* YouTube thumbnail; app.js swaps in the player on tap */
.yt{ position:absolute; inset:0; display:block; }
.yt img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt__play{
  position:absolute; left:50%; top:50%; width:68px; height:48px; transform:translate(-50%,-50%);
  border-radius:14px; background:rgba(14,23,33,.82); transition:background .18s var(--ease);
}
.yt__play::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent var(--white);
}
.yt:hover .yt__play, .yt:focus-visible .yt__play{ background:var(--brand); }

.qr-preview{
  background:var(--white); border:1px solid var(--mist);
  border-radius:.9rem; padding:1.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.qr-preview img{ width:150px; }
.qr-preview p{ font-size:.82rem !important; text-align:center; margin:0 !important; }

/* ---------- products ---------- */

.products{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.4rem; margin-top:4rem;
}
.product{
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:1rem;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.product > img{ aspect-ratio:4/3; object-fit:cover; background:var(--paper-2); }
.product__body{ padding:1.3rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.product h4{
  font-family:var(--serif); font-weight:400; font-size:1.2rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.price{ font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--brand-deep); }
.product ul{ list-style:none; padding:0; margin:0; }
.product li{ font-size:.89rem; color:var(--slate); padding:.3rem 0; border-bottom:1px solid var(--paper-2); }
.product li:last-child{ border-bottom:0; }
.product p{ font-size:.89rem; color:var(--slate); margin:0; }
.product .btn, .product .link{ margin-top:auto; align-self:flex-start; }
.product--note{ grid-column:1 / -1; background:var(--paper-2); border-style:dashed; }
.product--note .product__body{ flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:1.5rem; }
.product--note .product__body p{ flex:1 1 22rem; }
.product--note .link{ margin-top:0; }

/* ---------- reviews ---------- */

.reviews{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.review{
  margin:0;
  background:var(--white); border:1px solid var(--mist);
  border-radius:1rem; padding:1.6rem;
  display:flex; flex-direction:column; gap:1rem;
}
.review__stars{ color:var(--brass); font-size:.9rem; letter-spacing:.18em; }
.review__body{
  font-family:var(--serif); font-weight:400; font-size:1.12rem;
  line-height:1.45; letter-spacing:-0.01em; margin:0; flex:1;
}
.review__who{ display:flex; align-items:center; gap:.7rem; }
.review__mono{
  width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--white);
  display:grid; place-items:center;
  font-size:.82rem; font-weight:600;
}
.review__who div{ line-height:1.3; }
.review__name{ font-size:.92rem; font-weight:600; }
.review__meta{ font-size:.79rem; color:#8A97A3; }

.social{ margin-top:4.5rem; }
.social__head{
  font-family:var(--serif); font-weight:400; font-size:1.6rem;
  letter-spacing:-0.015em; margin-bottom:1.6rem;
}
.comments{ columns:3; column-gap:1.1rem; }
.comment{
  break-inside:avoid; margin:0 0 1.1rem;
  background:var(--white); border:1px solid var(--mist);
  border-radius:.85rem; padding:.95rem 1.05rem;
}
.comment__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.35rem; }
.comment__user{ font-size:.82rem; font-weight:600; color:var(--ink); }
.comment__likes{ font-size:.76rem; color:#8A97A3; }
.comment{ display:block; text-decoration:none; color:inherit; transition:border-color .15s var(--ease); }
.comment:hover{ border-color:rgba(28,166,253,.5); }
.social__follow{ margin-top:.6rem; }
.comment__text{ font-size:.92rem; line-height:1.45; margin:0; color:var(--ink); }
.comment__src{
  display:block; margin-top:.55rem; font-size:.7rem; color:#9AA6B1;
}

/* ---------- pipeline ---------- */

.pipeline{
  list-style:none; counter-reset:p; padding:0;
  margin:3rem 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.pipeline li{
  counter-increment:p; position:relative;
  padding-top:2.6rem; border-top:1px solid var(--mist);
}
.pipeline li::before{
  content:counter(p);
  position:absolute; top:.9rem; left:0;
  font-family:var(--serif); font-size:1.05rem; color:var(--brass);
}
.pipeline h4{ font-size:1rem; margin-bottom:.4rem; letter-spacing:-0.01em; }
.pipeline p{ font-size:.89rem; color:var(--slate); margin:0; }

.rag__sub{ font-size:1rem; font-weight:600; letter-spacing:-0.01em; margin:2.6rem 0 0; color:var(--ink); }
.rag__sub + .pipeline{ margin-top:1.2rem; }
.rag__sub + .assure{ margin-top:1.2rem; }
.quote{
  margin:3.5rem 0; padding:2.2rem 0;
  border-top:1px solid var(--mist); border-bottom:1px solid var(--mist);
}
.quote blockquote{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.2rem,2.2vw,1.65rem); line-height:1.4;
  letter-spacing:-0.015em; margin:0; max-width:40ch;
}
.quote figcaption{ margin-top:1rem; font-size:.86rem; color:var(--slate); }

.assure{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 2.2rem; }
.assure article{ border-left:2px solid var(--brass); padding-left:1.1rem; }
.assure h4{ font-size:1rem; margin-bottom:.35rem; }
.assure p{ font-size:.9rem; color:var(--slate); margin:0; }

/* ---------- case ---------- */

.case{
  margin:0; padding:2rem;
  background:var(--ink-2); border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
}
.case h4{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  color:var(--white); margin-bottom:.9rem;
}
.case p{ font-size:.97rem; color:#B7C4CF; margin:0 0 1.1rem; }
.case cite{ font-style:normal; font-size:.85rem; color:var(--brass); }

/* ---------- pricing ---------- */

.pricing{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.pricing__card{
  background:var(--ink); color:var(--white);
  border-radius:1.25rem; padding:2.2rem;
  box-shadow:0 30px 60px -30px rgba(14,23,33,.6);
}
.pricing__fig{
  font-family:var(--serif); font-weight:400; font-size:4.6rem;
  line-height:1; letter-spacing:-0.03em; margin:0 0 1.5rem;
  display:flex; align-items:baseline;
}
.pricing__cur{ font-size:2.2rem; margin-right:.12em; color:var(--brass); }
.pricing__per{ font-family:var(--sans); font-size:.95rem; font-weight:500; color:#8FA0B0; margin-left:.7rem; letter-spacing:0; }
.pricing__card ul{ list-style:none; padding:0; margin:0 0 1.8rem; }
.pricing__card li{
  padding:.65rem 0; font-size:.95rem; color:#D3DDE6;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pricing__fine{ font-size:.83rem; color:#7E8FA0; margin:.9rem 0 0; text-align:center; }
.pricing__aside h3{ font-family:var(--serif); font-weight:400; font-size:1.25rem; margin-bottom:.5rem; }
.pricing__aside h3 + p{ margin-top:0; }
.pricing__aside p{ color:var(--slate); font-size:.97rem; margin-bottom:1.8rem; max-width:46ch; }

/* ---------- faq ---------- */

.faq{ border-top:1px solid var(--mist); }
.faq__item{ border-bottom:1px solid var(--mist); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:1.35rem 0;
  font-family:var(--sans); font-size:1.03rem; font-weight:500; color:var(--ink);
  line-height:1.4;
}
.faq__q:hover{ color:var(--brand-deep); }
.faq__sign{
  flex:none; width:22px; height:22px; margin-top:2px;
  position:relative;
}
.faq__sign::before,.faq__sign::after{
  content:""; position:absolute; top:50%; left:50%;
  width:13px; height:1.5px; background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .22s var(--ease);
}
.faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[data-open="true"] .faq__sign::after{ transform:translate(-50%,-50%) rotate(0); }
.faq__a{
  display:none;
  padding:0 0 1.6rem;
  max-width:62ch;
}
.faq__item[data-open="true"] .faq__a{ display:block; }
.faq__a p{ margin:0 0 .85rem; color:var(--slate); font-size:.97rem; }
.faq__a p:last-child{ margin-bottom:0; }
.faq__a strong{ color:var(--ink); font-weight:600; }
.faq__a ul{ margin:0 0 .85rem; padding-left:1.1rem; }
.faq__a li{ color:var(--slate); font-size:.97rem; margin-bottom:.35rem; }

.faq__foot{
  margin-top:3rem; padding:2rem; text-align:center;
  background:var(--paper-2); border-radius:1rem;
}
.faq__foot p{ margin:0 0 1.1rem; color:var(--slate); }

/* ---------- story ---------- */

.story__pull{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.35;
  letter-spacing:-0.02em;
  margin:0; padding-left:1.4rem;
  border-left:2px solid var(--brass);
}
.story__cite{ display:block; font-style:normal; font-size:.86rem; color:var(--slate); margin:.9rem 0 2.2rem 1.4rem; }
.story p{ color:var(--slate); max-width:62ch; margin-bottom:1.2rem; }
.story .btn{ margin-top:1rem; }

/* ---------- closer ---------- */

.closer{ text-align:center; padding:7rem 0; }
.closer .display{ margin-inline:auto; max-width:18ch; }
.closer > .wrap > p{ margin:1.1rem auto 0; max-width:40ch; }
.closer__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin:2.3rem 0 1.3rem; }
.closer__fine{ font-size:.86rem; color:#7E8FA0 !important; }

/* ---------- footer ---------- */

.foot{ background:var(--ink); color:#93A2B0; padding:4rem 0 2rem; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.foot__logo{ height:44px; width:auto; margin-bottom:.9rem; }
.foot p{ font-size:.88rem; margin:0; }
.foot nav{ display:flex; flex-direction:column; gap:.65rem; }
.foot nav a{ font-size:.88rem; text-decoration:none; color:#93A2B0; }
.foot nav a:hover{ color:var(--white); }
.foot .foot__legal{
  width:var(--shell); margin:3rem auto 0; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.79rem; color:#61717F;
}

/* ============================================================
   INTRO SLIDESHOW — first visit, click through or skip
   ============================================================ */

.intro{
  position:fixed; inset:0; z-index:200;
  height:100vh; height:100dvh;   /* dvh = the part Safari's toolbars don't cover */
  display:flex; flex-direction:column;
  background:
    radial-gradient(70rem 50rem at 70% -10%, rgba(28,166,253,.20), transparent 60%),
    var(--ink);
  color:var(--white);
  animation:fade .35s var(--ease) both;
}
.intro[hidden],.intro [hidden]{ display:none !important; }
.intro:focus{ outline:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes slideIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* progress: one segment per slide, tappable */
.intro__top{ flex:none; padding:.9rem clamp(1rem,4vw,2.5rem) 0; }
.intro__progress{ display:flex; gap:.35rem; width:min(1120px,100%); margin:0 auto; }
.intro__dot{ flex:1; height:20px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; }
.intro__dot i{ display:block; width:100%; height:3px; border-radius:99px; background:rgba(255,255,255,.18); transition:background-color .25s var(--ease); }
.intro__dot[data-state="done"] i,.intro__dot[data-state="current"] i{ background:var(--brand); }

.intro__scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.intro__grid{
  width:min(1120px, 100% - 3rem); margin:0 auto; min-height:100%;
  padding:clamp(1.5rem,5vh,3.5rem) 0 2rem;
  display:grid; grid-template-columns:1fr 1fr; /* empty rows above and below keep the text centred as one block beside the visual */
  grid-template-areas:". demo" "copy demo" "extra demo" ". demo";
  grid-template-rows:1fr auto auto 1fr;
  column-gap:clamp(2.5rem,6vw,5.5rem); row-gap:0; align-items:center;
}
.intro__grid.is-in{ animation:slideIn .35s var(--ease) both; }
.intro__copy{ grid-area:copy; }
.intro__extra{ grid-area:extra; align-self:start; }
.intro__extra:empty{ display:none; }
.intro__visual{ grid-area:demo; align-self:center; display:flex; justify-content:center; }
.intro__demo{ display:flex; flex-direction:column; align-items:center; gap:.8rem; }

.intro__step{ font-family:var(--serif); font-style:italic; color:var(--brass); margin:0 0 .7rem; font-size:1rem; }
.intro__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.06; letter-spacing:-0.025em;
  color:var(--white); max-width:18ch;
}
.intro__explain{ color:#B8C6D3; font-size:1.08rem; line-height:1.6; margin:1rem 0 0; max-width:46ch; }

.intro__points{ list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.5rem; }
.intro__points li{ position:relative; padding-left:1.5rem; color:#E3EAF0; font-size:.98rem; }
.intro__points li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:2px; background:var(--brass); }

.intro__homes{ margin-top:1.4rem; }
.homes{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem .9rem .9rem 1.1rem; border-radius:1rem; max-width:30rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.homes__label{ font-weight:600; font-size:.98rem; }
.stepper{ display:flex; align-items:center; gap:.35rem; background:rgba(255,255,255,.08); border-radius:999px; padding:.25rem; flex:none; }
.stepper button{
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--white); color:var(--ink); font:600 1.25rem/1 var(--sans);
  display:grid; place-items:center;
}
.stepper button:hover{ background:var(--brand); }
.stepper button[disabled]{ opacity:.3; cursor:default; background:var(--white); }
.stepper output{ min-width:2.4ch; text-align:center; font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.homes__result{ margin:.8rem 0 0; color:#C9D4DE; font-size:.97rem; line-height:1.55; max-width:30rem; }
.homes__result strong{ color:var(--white); }
.homes__fine{ display:block; color:#7E8FA0; font-size:.84rem; margin-top:.2rem; }
.intro__managers{
  margin:1.2rem 0 0; max-width:30rem; padding:.85rem 1rem; font-size:.92rem; line-height:1.5; color:#AFBECB;
  border-left:2px solid var(--brass); background:rgba(255,255,255,.04); border-radius:0 .6rem .6rem 0;
}
.intro__managers a{ color:var(--brand); font-weight:600; }

/* the phone */
.intro .phone{ width:min(340px,86vw); }
.intro .thread{ position:relative; height:300px; min-height:0; max-height:none; scrollbar-width:none; text-align:left; }
.intro .thread::-webkit-scrollbar{ display:none; }
.thread__spacer{ flex:none; pointer-events:none; }
.home-tabs{ display:flex; flex-wrap:wrap; gap:.35rem; padding:.6rem .75rem .1rem; }
.home-tab{
  flex:none; font:500 .78rem/1 var(--sans); padding:.5rem .75rem; border-radius:999px; cursor:pointer;
  border:1px solid rgba(14,23,33,.14); background:var(--white); color:var(--slate);
}
.home-tab[aria-pressed="true"]{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.home-tab--more{ cursor:default; background:transparent; border-style:dashed; }
.intro__hint{ margin:0; font-size:.86rem; color:#8FA0B0; text-align:center; max-width:30ch; transition:opacity .3s var(--ease); }
.intro__hint.is-done{ opacity:0; }

/* other slide visuals */
.vis{ width:min(420px,100%); display:grid; gap:.75rem; }
.vis-steps{ list-style:none; counter-reset:vs; padding:0; margin:0; display:grid; gap:.6rem; }
.vis-steps li{
  counter-increment:vs; position:relative; padding:.9rem 1rem .9rem 3.3rem; border-radius:.9rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.vis-steps li::before{
  content:counter(vs); position:absolute; left:1rem; top:.9rem;
  width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center;
  background:var(--brand); color:#032235; font:700 .85rem/1 var(--sans);
}
.vis-steps h4{ font-size:.98rem; color:var(--white); }
.vis-steps p{ margin:.2rem 0 0; font-size:.88rem; line-height:1.45; color:#AFBECB; }
.vis-steps__photo{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:.9rem; }

.vis-review{ margin:0; background:var(--white); color:var(--ink); border-radius:1rem; padding:1rem 1.15rem; }
.vis-review__stars{ color:var(--brass); letter-spacing:.15em; font-size:.8rem; }
.vis-review blockquote{ margin:.4rem 0 .5rem; font-family:var(--serif); font-size:1.05rem; line-height:1.4; }
.vis-review figcaption{ font-size:.8rem; color:var(--slate); }
.vis-comment{
  justify-self:start; max-width:92%; display:flex; flex-direction:column; gap:.15rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
  border-radius:1rem 1rem 1rem .35rem; padding:.6rem .85rem; font-size:.92rem; color:#E3EAF0;
}
.vis-comment__user{ font-size:.74rem; color:var(--brand); font-weight:600; }

.vis-price{ background:var(--white); color:var(--ink); border-radius:1.25rem; padding:1.7rem; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.vis-price__fig{ margin:0 0 1rem; font-family:var(--serif); font-size:4rem; line-height:1; letter-spacing:-0.03em; display:flex; align-items:baseline; }
.vis-price__fig span{ font-size:2rem; color:var(--brass); margin-right:.1em; }
.vis-price__fig small{ font-family:var(--sans); font-size:.95rem; color:var(--slate); margin-left:.6rem; letter-spacing:0; }
.vis-price ul{ list-style:none; margin:0; padding:0; }
.vis-price li{ padding:.6rem 0; border-top:1px solid var(--mist); font-size:.95rem; }

/* actions: always visible, above Safari's toolbar */
.intro__bar{
  flex:none; padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08); background:rgba(14,23,33,.94);
}
.intro__bar-in{ width:min(1120px,100%); margin:0 auto; display:flex; align-items:center; gap:.6rem; }
.intro__spacer{ flex:1; }
.intro__skip{
  background:none; border:1px solid rgba(255,255,255,.22); color:var(--white); cursor:pointer;
  border-radius:999px; padding:.8rem 1.2rem; font:600 .92rem/1 var(--sans);
}
.intro__skip:hover{ background:rgba(255,255,255,.08); }
.intro__back{
  width:46px; height:46px; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:var(--white);
  font-size:1.4rem; line-height:1;
}
.intro__back:hover{ background:rgba(255,255,255,.14); }
.intro__next{ min-width:8rem; }
.intro__bar-in .btn,.intro__skip{ white-space:nowrap; }
.intro[data-slide="price"] .intro__back{ order:-1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1040px){
  .steps{ grid-template-columns:1fr; gap:2.6rem; }
  .pipeline{ grid-template-columns:1fr 1fr; }
  .assure{ grid-template-columns:1fr 1fr; }
  .reviews{ grid-template-columns:1fr; }
  .comments{ columns:2; }
}

@media (max-width:880px){
  :root{ --shell:min(1180px, 100% - 2.25rem); }
  body{ font-size:16px; }

  .nav{ gap:1rem; flex-wrap:wrap; }
  .nav__links{
    display:none; order:4; width:100%;
    flex-direction:column; gap:0;
    border-top:1px solid rgba(255,255,255,.1); margin-top:.6rem;
  }
  .nav__links[data-open="true"]{ display:flex; }
  .nav__links a{ padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav__actions{ margin-left:auto; }
  .nav__login{ display:none; }
  .nav__toggle{
    display:block; width:40px; height:40px; flex:none;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
    border-radius:10px; cursor:pointer; position:relative;
  }
  .nav__toggle span,
  .nav__toggle::before,
  .nav__toggle::after{
    content:""; position:absolute; left:50%; width:16px; height:1.5px;
    background:#fff; transform:translateX(-50%);
  }
  .nav__toggle::before{ top:14px; }
  .nav__toggle span{ top:19.5px; }
  .nav__toggle::after{ top:25px; }

  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__hook{ max-width:100%; }
  .split{ grid-template-columns:1fr; }
  .split--rev .split__text{ order:0; }
  .pricing{ grid-template-columns:1fr; }

  .rail{ gap:.6rem 0; }
  .rail li{ padding:.25rem 1rem; font-size:.8rem; }
  .rail li:first-child{ padding-left:0; }

}

@media (max-width:640px){
  .products{ grid-template-columns:1fr; }
  .pipeline{ grid-template-columns:1fr; }
  .assure{ grid-template-columns:1fr; }
  .comments{ columns:1; }
  .thread--flat .bubble{ max-width:88%; }
  .display{ max-width:100%; }
}

/* ============================================================
   PHONES — same layout ideas as desktop, sized for one hand
   ============================================================ */
@media (max-width:880px){

  /* ---- intro slideshow on phones: copy, then the visual; actions pinned ---- */
  .nav__brand img{ height:38px; }
  .intro__grid{
    grid-template-columns:1fr; grid-template-areas:"copy" "demo" "extra"; grid-template-rows:auto; align-items:start;
    width:min(560px, 100% - 2.25rem); padding:1.2rem 0 1.6rem; row-gap:1.3rem;
  }
  .intro__step{ margin-bottom:.4rem; font-size:.92rem; }
  .intro__title{ font-size:clamp(1.65rem,7.2vw,2.2rem); }
  .intro__explain{ font-size:.98rem; margin-top:.7rem; }
  .intro__points{ margin-top:.9rem; gap:.4rem; }
  .intro__points li{ font-size:.93rem; }
  .intro__homes{ margin-top:1rem; }
  .homes{ max-width:none; }
  .homes__label{ font-size:.94rem; }
  .intro__managers{ font-size:.88rem; margin-top:.9rem; }
  .intro .phone{ width:min(280px, 76vw); }
  .intro .thread{ height:215px; }
  .vis{ width:100%; }
  .vis-steps{ gap:.45rem; }
  .vis-steps li{ padding:.7rem .85rem .7rem 2.9rem; }
  .vis-steps li::before{ left:.8rem; top:.72rem; width:1.4rem; height:1.4rem; font-size:.78rem; }
  .vis-steps h4{ font-size:.93rem; }
  .vis-steps p{ font-size:.84rem; }
  .vis-steps__photo{ aspect-ratio:2/1; }
  .intro__homes{ margin-top:0; }
  .vis-price{ padding:1.4rem; }
  .vis-price__fig{ font-size:3.4rem; }
  .intro__skip{ padding:.8rem 1rem; font-size:.9rem; }
  .intro__next{ min-width:6.5rem; }
  /* last slide: the two buttons share the row instead of fighting the spacer */
  .intro[data-slide="price"] .intro__spacer{ display:none; }
  .intro__bar [id="introBrowse"],.intro__bar [id="introStart"]{ flex:1 1 auto; min-width:0; padding:.95rem .7rem; font-size:.92rem; }

  /* ---- phone mockups: smaller on phones, no fake text box ---- */
  .phone{ width:min(280px, 76vw); border-radius:2rem; padding:.45rem; }
  .phone::after{ inset:.45rem; border-radius:1.6rem; }
  .phone__bar{ padding:1.35rem .75rem .5rem; gap:.55rem; border-radius:1.6rem 1.6rem 0 0; }
  .phone__notch{ top:.7rem; width:64px; }
  .phone__avatar{ width:28px; height:28px; }
  .phone__who strong{ font-size:.86rem; }
  .phone__who span{ font-size:.7rem; }
  .phone__input{ display:none; }
  .phone .bubble{ font-size:.82rem; line-height:1.4; padding:.48rem .72rem; }
  .phone .bubble--source{ font-size:.68rem; padding:0 .3rem; }
  .phone .thread{ gap:.4rem; padding:.75rem .65rem; }
  .phone .chips{ gap:.3rem; padding:.55rem .6rem .75rem; }
  .phone .chip{ font-size:.72rem; padding:.36rem .62rem; }
  /* hero: no phone mockup on phones; the headline and buttons carry it */
  .hero__phone{ display:none; }
  #demo .thread--scroll{ min-height:190px; max-height:190px; }
  .rag__sub{ margin-top:1.8rem; }

  /* ---- hero: buttons side by side like desktop, trust badges in a tidy grid ---- */
  .hero__cta{ flex-wrap:nowrap; gap:.6rem; }
  .hero__cta .btn{ flex:1 1 0; padding:1rem .6rem; font-size:.95rem; white-space:nowrap; }
  .rail{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; }
  .rail li,.rail li:first-child{ border:0; padding:0 0 0 .9rem; position:relative; font-size:.8rem; line-height:1.4; }
  .rail li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:1px; background:var(--brass); }

  /* ---- live demo: the phone right under the heading, so you can tap first ---- */
  #demo .split{ display:flex; flex-direction:column; gap:1.4rem; }
  #demo .split__text{ display:contents; }
  #demo .split__text .display{ order:1; margin:0; }
  #demo .split__text > p:first-of-type{ order:2; margin:0; }
  #demo .split__aside{ order:3; }
  #demo .split__text .btn{ order:4; align-self:flex-start; }
  #demo .demo__video{ display:none; }
  #demo .demo__note{ order:6; margin:0; }
}

/* ============================================================
   PHONE SPACING — tighter rhythm between and inside sections
   ============================================================ */
@media (max-width:880px){
  .band{ padding:3rem 0; }
  .band--tight{ padding-top:0; }
  .closer,.closer--compact{ padding:3.4rem 0; }
  .closer__cta{ margin:1.6rem 0 1rem; }
  .hero{ padding-top:2.4rem; }
  .hero__cta{ margin:1.6rem 0 .8rem; }
  .rail{ margin-top:2.2rem; padding:1rem 0 1.1rem; }
  .split{ gap:1.6rem; }
  .split__text .display{ margin-bottom:.8rem; }
  .display--lead{ margin-bottom:1.2rem; }
  .ticks{ margin:1rem 0 1.1rem; }
  .ticks li{ margin-bottom:.5rem; }
  /* the 11 PM chat only needs room for its four messages */
  .thread--flat{ min-height:230px; }
  .step{ padding-top:1rem; }
  .step p{ margin-bottom:.9rem; }
  .products{ margin-top:1.6rem; }
  .social{ margin-top:2.2rem; }
  .social__head{ margin-bottom:1rem; }
  .lead-p{ font-size:1rem; margin:0; }
  .pipeline{ margin:1.6rem 0; }
  .pipeline li{ padding-top:2.2rem; }
  .quote{ margin:1.6rem 0; padding:1.3rem 0; }
  .case{ padding:1.4rem; }
  .pricing{ gap:1.5rem; }
  .pricing__card{ padding:1.6rem; }
  .pricing__fig{ font-size:3.8rem; margin-bottom:1rem; }
  .pricing__aside p{ margin-bottom:1.2rem; }
  .faq__q{ padding:1.05rem 0; }
  .faq__foot{ margin-top:1.8rem; padding:1.4rem; }
  .story__cite{ margin-bottom:1.4rem; }
  #demo .split{ gap:1.1rem; }
  /* footer: the two link lists side by side instead of one long column */
  .foot{ padding:2.6rem 0 1.4rem; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem; }
  .foot__grid > div:first-child{ grid-column:1 / -1; }
  .foot nav{ gap:.55rem; }
  .foot__legal{ margin-top:1.8rem; padding-top:1.1rem; }
  /* subpages */
  .page-head{ padding:2.4rem 0 2.2rem; }
  .page-head p{ font-size:1rem; margin-top:.8rem; }
  .band--flush{ padding-top:1.8rem; }
  .post__head{ padding:2.2rem 0 1.4rem; margin-bottom:1.6rem; }
  .post{ padding-bottom:2.6rem; }
  .prose h2{ margin:2rem 0 .8rem; font-size:1.5rem; }
  .prose h3{ margin:1.5rem 0 .5rem; }
  .post-grid{ gap:1rem; }
  .post-card{ padding:1.3rem; }
  .contact{ gap:1.8rem; }
}

/* short laptop screens */
@media (min-width:881px) and (max-height:820px){
  .intro__grid{ padding-top:1.2rem; }
  .intro__title{ font-size:clamp(1.9rem,3.2vw,2.5rem); }
}
/* most iPhones once Safari's bars show: on the first slide, get the phone on screen */
@media (max-width:880px) and (max-height:760px){
  .intro[data-slide="chat"] .intro__points{ display:none; }
}
/* small phones (iPhone SE and similar) */
@media (max-width:880px) and (max-height:600px){
  .intro__grid{ padding-top:.8rem; row-gap:1rem; }
  .intro__title{ font-size:1.5rem; }
  .intro__explain{ font-size:.9rem; line-height:1.5; margin-top:.5rem; }
  .intro .phone__bar{ padding-top:1.5rem; padding-bottom:.55rem; }
}

@media (max-width:760px){
  /* ---- rows you swipe, like the desktop rows, instead of one long column ---- */
  .steps,.products,.reviews,.comments,.pipeline,.assure{
    display:flex; gap:.9rem;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:1.125rem;
    margin-inline:-1.125rem; padding:0 1.125rem .4rem;
    scrollbar-width:none; columns:auto;
  }
  .steps::-webkit-scrollbar,.products::-webkit-scrollbar,.reviews::-webkit-scrollbar,
  .comments::-webkit-scrollbar,.pipeline::-webkit-scrollbar,.assure::-webkit-scrollbar{ display:none; }
  .steps > *,.products > *,.reviews > *,.comments > *,.pipeline > *,.assure > *{
    flex:0 0 84%; scroll-snap-align:start; margin:0;
  }
  .comments > *,.assure > *,.pipeline > *{ flex-basis:72%; }
  .product--note{ grid-column:auto; }
  .product--note .product__body{ flex-direction:column; align-items:flex-start; }
  .products{ margin-top:2.5rem; }
  .assure{ gap:1.4rem; }

  /* a quiet cue that these rows scroll sideways */
  .swipe-hint{ display:block; font-size:.8rem; color:#8A97A3; margin:-.6rem 0 1rem; }

  .display--lead{ margin-bottom:1.6rem; }
  .social{ margin-top:3rem; }
  .quote{ margin:2.5rem 0; padding:1.6rem 0; }
}
.swipe-hint{ display:none; }

/* ============================================================
   SUBPAGES: blog, articles, legal, contact, RAG
   ============================================================ */

.page-head{
  background:
    radial-gradient(70rem 30rem at 85% -20%, rgba(28,166,253,.18), transparent 60%),
    var(--ink);
  color:var(--white);
  padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);
}
.page-head h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.05; letter-spacing:-0.025em;
  max-width:18ch;
}
.page-head p{ color:#AFBECB; font-size:1.1rem; max-width:56ch; margin:1.1rem 0 0; }
.page-head--tall{ min-height:62vh; display:flex; align-items:center; }
.band--flush{ padding-top:clamp(2.5rem,5vw,4rem); }

.closer--compact{ padding:5rem 0; }
.closer__cta--left{ justify-content:flex-start; }

/* article */
.post__head{ padding:clamp(3rem,6vw,4.5rem) 0 2.2rem; border-bottom:1px solid var(--mist); margin-bottom:2.6rem; }
.crumbs{ font-size:.88rem; color:var(--slate); margin:0 0 1.2rem; }
.crumbs a{ color:var(--brand-deep); text-decoration:none; font-weight:600; }
.crumbs span{ margin:0 .35rem; color:#A5B0BA; }
.post__head h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,4.4vw,3rem); line-height:1.1; letter-spacing:-0.02em;
}
.post__dek{ font-size:1.15rem; color:var(--slate); margin:1.1rem 0 1.2rem; max-width:58ch; }
.post__meta{ font-size:.86rem; color:#8A97A3; margin:0; }
.post{ padding-bottom:5rem; }

.prose{ font-size:1.06rem; line-height:1.75; color:#26323D; overflow-wrap:break-word; }
.prose a{ overflow-wrap:anywhere; }
.prose p{ margin:0 0 1.25rem; }
.prose h2{
  font-family:var(--serif); font-weight:400; font-size:1.75rem;
  line-height:1.2; letter-spacing:-0.015em; color:var(--ink);
  margin:2.8rem 0 1rem;
}
.prose h3{ font-size:1.12rem; font-weight:600; color:var(--ink); margin:2rem 0 .6rem; letter-spacing:-0.01em; }
.prose h4{ font-size:1rem; font-weight:600; margin:1.6rem 0 .5rem; }
.prose ul,.prose ol{ margin:0 0 1.4rem; padding-left:1.3rem; }
.prose li{ margin-bottom:.5rem; }
.prose li::marker{ color:var(--brass); }
.prose a{ color:var(--brand-deep); text-underline-offset:3px; text-decoration-color:rgba(11,127,203,.35); }
.prose a:hover{ text-decoration-color:var(--brand-deep); }
.prose strong{ color:var(--ink); }
.prose blockquote{
  margin:2rem 0; padding:.2rem 0 .2rem 1.3rem; border-left:2px solid var(--brass);
  font-family:var(--serif); font-size:1.25rem; line-height:1.5; color:var(--ink);
}
.prose table{ width:100%; border-collapse:collapse; margin:1.5rem 0 2rem; font-size:.95rem; display:block; overflow-x:auto; }
.prose th,.prose td{ text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--mist); vertical-align:top; }
.prose th{ font-weight:600; color:var(--ink); background:var(--paper-2); }
.prose .video{ margin:0 0 2.5rem; }
.prose--legal{ font-size:.98rem; }
.prose--legal h2{ font-family:var(--sans); font-weight:600; font-size:1.2rem; letter-spacing:-0.01em; margin-top:2.4rem; }
.prose--legal h3{ font-size:1rem; }

/* blog cards */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.post-card{
  display:flex; flex-direction:column; gap:.7rem;
  padding:1.6rem; border-radius:1rem;
  background:var(--white); border:1px solid var(--mist);
  text-decoration:none; color:var(--ink);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.post-card:hover{ border-color:rgba(28,166,253,.5); box-shadow:0 12px 30px -18px rgba(14,23,33,.35); }
.post-card__meta{ margin:0; font-size:.8rem; color:var(--brass); font-weight:500; }
.post-card h3{ font-family:var(--serif); font-weight:400; font-size:1.3rem; line-height:1.25; letter-spacing:-0.01em; }
.post-card__dek{ margin:0; font-size:.93rem; color:var(--slate); flex:1; }
.post-card__more{ font-size:.9rem; font-weight:600; color:var(--brand-deep); }
.post-card--big{ grid-column:1 / -1; padding:2.4rem; background:var(--ink); border-color:var(--ink); color:var(--white); }
.post-card--big h3{ font-size:clamp(1.6rem,3vw,2.2rem); max-width:26ch; color:var(--white); }
.post-card--big .post-card__dek{ color:#AFBECB; font-size:1.02rem; max-width:60ch; }
.post-card--big .post-card__more{ color:var(--brand); }
.guides__all{ margin:1.6rem 0 0; }

/* contact */
.contact{ display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; width:min(1000px,100% - 3rem); align-items:start; }
.form{ display:flex; flex-direction:column; gap:1.2rem; }
.form__field{ display:flex; flex-direction:column; gap:.45rem; font-size:.92rem; font-weight:600; color:var(--ink); }
.form__field input,.form__field textarea{
  font:inherit; font-weight:400; font-size:1rem; color:var(--ink);
  padding:.85rem 1rem; border-radius:.75rem;
  border:1px solid #CBD2D8; background:var(--white);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form__field input:focus,.form__field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(28,166,253,.2); }
.form__field textarea{ resize:vertical; min-height:9rem; }
.form .btn{ align-self:flex-start; margin-top:.4rem; }
.form__trap{ position:absolute; left:-9999px; }
.contact__aside{ padding:1.8rem; background:var(--paper-2); border-radius:1rem; }
.contact__aside h2{ font-size:1rem; margin:0 0 .35rem; }
.contact__aside p{ margin:0 0 1.4rem; font-size:.94rem; color:var(--slate); }
.contact__aside p:last-child{ margin-bottom:0; }
.contact__aside a{ color:var(--brand-deep); font-weight:600; }

.foot__mail{ margin-top:.5rem !important; }
.foot__mail a{ color:#C9D4DE; text-decoration:none; }
.foot__mail a:hover{ color:var(--white); }

@media (max-width:1040px){
  .post-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .post-grid{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; width:min(1000px,100% - 2.25rem); }
  .post-card--big{ padding:1.8rem; }
}

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