:root{
  --ink:#1B1310;
  --ink-soft:#3a2a23;
  --cream:#F4EEE1;
  --paper:#FBF7EF;
  --wine:#7C3141;
  --wine-deep:#54202B;
  --wine-tint:#F1E0DF;
  --gold:#C7A15C;
  --gold-soft:#E9D9AF;
  --line: rgba(27,19,16,0.13);
  --line-soft: rgba(251,247,239,0.16);
  --text: #211712;
  --text-muted: rgba(33,23,18,0.62);
  --text-inverse: #F4EEE1;
  --text-inverse-muted: rgba(244,238,225,0.68);
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --maxw: 1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,.serif{
  font-family:'Fraunces',serif;
  font-weight:560;
  letter-spacing:-0.012em;
  margin:0;
  color:inherit;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
section{position:relative;}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:15px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{
  background:var(--wine);
  color:var(--paper);
  box-shadow:0 8px 20px -8px rgba(124,49,65,0.55);
}
.btn-primary:hover{background:var(--wine-deep);}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--ink);}
.btn-inverse{
  background:var(--gold-soft);
  color:var(--ink);
}
.btn-inverse:hover{background:var(--gold);}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(244,238,225,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;
  max-width:var(--maxw);margin:0 auto;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;font-weight:560;font-size:19px;
}
.logo-mark{width:26px;height:26px;flex-shrink:0;}
nav.mainnav{display:flex;gap:32px;font-size:14.5px;color:var(--text-muted);}
nav.mainnav a:hover{color:var(--ink);}
.header-cta{display:flex;align-items:center;gap:20px;}
.header-cta-icon{display:none;}
.tabbar{display:none;}
.principle-icon{display:none;}
@media (max-width:860px){
  nav.mainnav{display:none;}
}

/* ---------- hero ---------- */
.hero{padding:88px 0 96px;overflow:hidden;}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Fraunces',serif;font-style:italic;font-weight:440;
  font-size:15px;color:var(--wine);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:20px;height:1px;background:var(--wine);display:inline-block;
}
.hero h1{
  font-size:clamp(38px,4.6vw,58px);
  line-height:1.06;
  max-width:600px;
}
.hero-sub{
  margin-top:24px;
  font-size:18px;
  line-height:1.6;
  color:var(--text-muted);
  max-width:480px;
}
.hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero-proof{
  margin-top:30px;
  display:flex;gap:26px;flex-wrap:wrap;
  font-size:13.5px;color:var(--text-muted);
}
.hero-proof span{display:flex;align-items:center;gap:8px;}
.dot{width:5px;height:5px;border-radius:50%;background:var(--wine);flex-shrink:0;}

/* mosaic visual */
.mosaic{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:96px;
  gap:12px;
}
.mtile{
  border-radius:var(--radius-m);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  opacity:0;
  transform:translateY(14px) scale(.97);
  animation:tileIn .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.mtile svg{width:40%;height:40%;}
.mtile.t1{grid-column:1/2;grid-row:1/3;background:var(--wine-tint);}
.mtile.t2{grid-column:2/4;grid-row:1/2;background:var(--ink);}
.mtile.t2 svg{stroke:var(--gold-soft);}
.mtile.t3{grid-column:2/3;grid-row:2/4;background:var(--paper);border:1px solid var(--line);}
.mtile.t4{grid-column:3/4;grid-row:2/3;background:var(--wine);}
.mtile.t4 svg{stroke:var(--paper);}
.mtile.t5{grid-column:1/2;grid-row:3/4;background:var(--gold-soft);}
.mtile.t6{grid-column:3/4;grid-row:3/4;background:var(--ink);color:var(--paper);
  flex-direction:column;gap:2px;font-family:'Manrope';font-weight:700;font-size:12px;text-align:center;padding:8px;}
.mtile.t6 small{font-weight:500;color:var(--text-inverse-muted);font-size:10px;}
.mtile:nth-child(1){animation-delay:.05s;}
.mtile:nth-child(2){animation-delay:.15s;}
.mtile:nth-child(3){animation-delay:.25s;}
.mtile:nth-child(4){animation-delay:.35s;}
.mtile:nth-child(5){animation-delay:.45s;}
.mtile:nth-child(6){animation-delay:.55s;}
@keyframes tileIn{to{opacity:1;transform:translateY(0) scale(1);}}
.mosaic-caption{
  margin-top:16px;font-size:13px;color:var(--text-muted);
  display:flex;align-items:center;gap:8px;
}
.mosaic-caption .dot{background:var(--gold);}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero h1,.hero-sub{max-width:none;}
}

/* ---------- section heading pattern ---------- */
.sec-head{max-width:620px;margin-bottom:56px;}
.sec-head h2{font-size:clamp(28px,3vw,38px);line-height:1.15;}
.sec-head p{margin-top:16px;font-size:16.5px;color:var(--text-muted);line-height:1.6;}

/* ---------- principles ---------- */
.principles{padding:100px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.principles-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.principle{
  background:var(--paper);
  padding:34px 30px;
}
.principle .pnum{
  font-family:'Fraunces',serif;font-style:italic;font-weight:440;
  font-size:14px;color:var(--wine);margin-bottom:16px;display:block;
}
.principle h3{font-size:19px;margin-bottom:10px;line-height:1.3;}
.principle p{font-size:14.5px;color:var(--text-muted);line-height:1.6;}
@media (max-width:900px){
  .principles-grid{grid-template-columns:1fr;}
}

/* ---------- process ---------- */
.process{padding:100px 0;}
.process-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
}
.step{position:relative;padding-top:28px;}
.step::before{
  content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--wine);
}
.step-label{font-family:'Fraunces',serif;font-style:italic;color:var(--text-muted);font-size:14px;display:block;margin-bottom:8px;}
.step h3{font-size:20px;margin-bottom:12px;}
.step p{font-size:15px;color:var(--text-muted);line-height:1.65;}
@media (max-width:820px){.process-steps{grid-template-columns:1fr;gap:40px;}}

/* ---------- included ---------- */
.included{padding:0 0 100px;}
.included-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:22px;
}
.card{
  border-radius:var(--radius-l);
  padding:36px;
  background:var(--paper);
  border:1px solid var(--line);
}
.card.dark{
  background:var(--ink);
  color:var(--text-inverse);
  border-color:var(--ink);
}
.card h3{font-size:21px;margin-bottom:10px;}
.card p{font-size:15px;color:var(--text-muted);line-height:1.65;max-width:420px;}
.card.dark p{color:var(--text-inverse-muted);}

.admin-features{margin-top:20px;display:flex;flex-direction:column;gap:13px;}
.admin-features div{
  display:flex;gap:12px;align-items:flex-start;
  font-size:14px;color:var(--text-muted);line-height:1.5;
}
.admin-features svg{width:18px;height:18px;stroke:var(--wine);flex-shrink:0;margin-top:1px;}
.site-preview{
  margin-top:26px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.site-preview .tile{
  aspect-ratio:1/1.05;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.site-preview .tile svg{width:38%;height:38%;}
.sp1{background:var(--wine-tint);}
.sp2{background:var(--ink);}
.sp2 svg{stroke:var(--gold-soft);}
.sp3{background:var(--gold-soft);}
.sp4{background:var(--wine);}
.sp4 svg{stroke:var(--paper);}

.bot-visual{
  margin-top:26px;
  border-radius:12px;
  border:1px solid var(--line-soft);
  background:rgba(244,238,225,0.05);
  padding:16px 18px;
}
.bot-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.bot-row:last-child{margin-bottom:0;}
.bot-bubble{
  background:rgba(244,238,225,0.08);
  border:1px solid var(--line-soft);
  border-radius:10px;padding:9px 12px;font-size:13px;color:var(--text-inverse-muted);
  max-width:78%;
}
.bot-bubble.me{background:var(--wine);color:var(--paper);border-color:var(--wine);margin-left:auto;}

.included-row2{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;
}
@media (max-width:900px){
  .included-grid{grid-template-columns:1fr;}
  .included-row2{grid-template-columns:1fr;}
}

/* ---------- referral ---------- */
.referral{
  padding:100px 0;
  background:var(--wine);
  color:var(--paper);
}
.referral-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.referral .eyebrow{color:var(--gold-soft);}
.referral .eyebrow::before{background:var(--gold-soft);}
.referral h2{font-size:clamp(28px,3.2vw,40px);color:var(--paper);line-height:1.15;}
.referral p.lead{margin-top:18px;font-size:16.5px;color:rgba(244,238,225,0.82);line-height:1.65;max-width:460px;}
.referral-chain{
  display:flex;flex-direction:column;gap:0;
}
.rc-item{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid rgba(244,238,225,0.18);
}
.rc-item:first-child{padding-top:0;}
.rc-item:last-child{border-bottom:none;}
.rc-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(244,238,225,0.1);
  border:1px solid rgba(244,238,225,0.25);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rc-icon svg{width:18px;height:18px;stroke:var(--gold-soft);}
.rc-text h4{font-family:'Manrope';font-weight:700;font-size:15.5px;margin-bottom:4px;}
.rc-text p{font-size:14px;color:rgba(244,238,225,0.72);line-height:1.55;}
@media (max-width:900px){.referral-grid{grid-template-columns:1fr;gap:40px;}}

/* ---------- trial stat ---------- */
.trial{padding:110px 0;text-align:left;}
.trial-grid{
  display:grid;grid-template-columns:0.62fr 1fr;gap:60px;align-items:center;
}
.trial-num{
  font-family:'Fraunces',serif;font-weight:340;font-size:clamp(120px,14vw,190px);
  line-height:0.85;color:var(--wine);
}
.trial-num-label{font-size:15px;color:var(--text-muted);margin-top:6px;}
.trial-copy h2{font-size:clamp(26px,2.8vw,34px);line-height:1.2;max-width:520px;}
.trial-copy p{margin-top:18px;font-size:16px;color:var(--text-muted);line-height:1.65;max-width:520px;}
.trial-list{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
.trial-list div{display:flex;gap:10px;font-size:14.5px;align-items:flex-start;}
.trial-list svg{width:16px;height:16px;stroke:var(--wine);flex-shrink:0;margin-top:3px;}
.trial-ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
@media (max-width:900px){.trial-grid{grid-template-columns:1fr;gap:30px;}}

/* ---------- examples ---------- */
.examples{padding:0 0 110px;}
.examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.example-card{
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;
}
.ex-top{padding:18px 20px 0;display:flex;justify-content:space-between;align-items:flex-start;}
.ex-top h4{font-size:15.5px;font-weight:700;font-family:'Manrope';}
.ex-top span{font-size:12.5px;color:var(--text-muted);}
.ex-grid{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ex-grid .t{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.ex-grid .t svg{width:42%;height:42%;}
.ex-foot{padding:0 20px 20px;font-size:12.5px;color:var(--text-muted);display:flex;justify-content:space-between;}
.ex-foot a,.ex-foot .slug{color:var(--wine);font-weight:600;}
@media (max-width:900px){.examples-grid{grid-template-columns:1fr;}}

/* ---------- testimonial ---------- */
.testimonial{padding:0 0 110px;}
.t-card{
  border-radius:var(--radius-l);
  background:var(--ink);
  color:var(--paper);
  padding:56px;
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:flex-start;
}
.t-avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--wine-tint);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-size:18px;color:var(--wine-deep);font-weight:560;
}
.t-quote{font-family:'Fraunces',serif;font-weight:440;font-style:italic;font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--paper);}
.t-name{margin-top:20px;font-size:14px;color:var(--text-inverse-muted);}
.t-name b{color:var(--paper);font-weight:700;}
@media (max-width:700px){.t-card{padding:34px;grid-template-columns:1fr;}}

/* ---------- final cta ---------- */
.finalcta{padding:0 0 110px;}
.fc-inner{
  border-radius:var(--radius-l);
  background:var(--gold-soft);
  padding:64px;
  display:grid;grid-template-columns:1.2fr auto;gap:30px;align-items:center;
}
.fc-inner h2{font-size:clamp(26px,3vw,36px);max-width:480px;line-height:1.2;}
.fc-inner p{margin-top:12px;color:var(--text-muted);font-size:15.5px;max-width:440px;}
.fc-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.fc-cta small{font-size:12.5px;color:var(--text-muted);}
@media (max-width:760px){
  .fc-inner{grid-template-columns:1fr;padding:40px;}
  .fc-cta{align-items:flex-start;}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0;}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-row .logo{font-size:16px;}
.footer-links{display:flex;gap:26px;font-size:13.5px;color:var(--text-muted);}
.footer-links a:hover{color:var(--ink);}

/* =========================================================
   MOBILE APP MODE — desktop layout above is left untouched.
   Turns the page into stacked, rounded "screens" with a
   native-style top bar and a fixed bottom tab bar.
========================================================== */
@media (max-width:860px){
  body{
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
  }

  /* --- app bar --- */
  header{padding-top:env(safe-area-inset-top);}
  .header-row{padding:14px 18px;}
  .logo{font-size:16.5px;gap:8px;}
  .logo-mark{width:22px;height:22px;}
  .header-cta-text{display:none;}
  .header-cta-icon{
    display:flex;width:38px;height:38px;border-radius:50%;
    background:var(--wine);align-items:center;justify-content:center;flex-shrink:0;
  }
  .header-cta-icon svg{width:16px;height:16px;stroke:var(--paper);}

  /* --- stacked card "screens" --- */
  main{display:flex;flex-direction:column;gap:12px;padding:12px 12px 4px;}
  main > section{margin:0;border-radius:24px;overflow:hidden;}
  .wrap{padding:0 20px;max-width:none;}

  .hero{background:var(--paper);padding:28px 0 30px;}
  .principles{background:var(--paper);border:none;padding:30px 0;}
  .process{background:var(--paper);padding:30px 0;}
  .included{padding:0 0 2px;}
  .referral{padding:30px 0;border-radius:24px;}
  .trial{background:var(--paper);padding:30px 0;}
  .examples{padding:0 0 2px;}
  .examples .wrap{padding:0 0 0 20px;}
  .testimonial{padding:0 0 2px;}
  .finalcta{padding:0;}
  footer{display:none;}

  .sec-head{margin-bottom:30px;}
  .sec-head h2{font-size:24px;}
  .sec-head p{font-size:15px;}

  .hero h1{font-size:30px;}
  .hero-sub{font-size:15.5px;}
  .hero-ctas .btn{width:100%;justify-content:center;}
  .hero-proof{gap:12px 18px;}

  /* mosaic scales down but keeps its composition */
  .mosaic{grid-auto-rows:78px;gap:9px;margin-top:28px;}

  /* --- principles become an icon list, not a grid --- */
  .principles-grid{
    display:flex;flex-direction:column;
    background:transparent;border:none;border-radius:0;
  }
  .principle{
    display:flex;gap:14px;align-items:flex-start;
    background:transparent;padding:18px 0;border-bottom:1px solid var(--line);
  }
  .principle:last-child{border-bottom:none;padding-bottom:0;}
  .principle:first-child{padding-top:0;}
  .principle .pnum{display:none;}
  .principle-icon{
    display:flex;width:38px;height:38px;border-radius:50%;
    background:var(--wine-tint);align-items:center;justify-content:center;flex-shrink:0;
  }
  .principle-icon svg{width:17px;height:17px;}
  .principle h3{font-size:16px;margin-bottom:4px;}
  .principle p{font-size:13.5px;}

  .process-steps{gap:26px;}

  .card{padding:26px;border-radius:20px;}
  .site-preview{grid-template-columns:repeat(4,1fr);}

  .referral-grid{gap:32px;}
  .rc-item{padding:16px 0;}

  .trial-grid{gap:22px;text-align:left;}
  .trial-num{font-size:96px;}

  /* --- examples become a swipeable carousel --- */
  .examples-grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-right:20px;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .examples-grid::-webkit-scrollbar{display:none;}
  .example-card{flex:0 0 78%;scroll-snap-align:start;}

  .t-card{padding:28px;border-radius:20px;gap:18px;}
  .fc-inner{padding:32px 26px;border-radius:20px;}
  .fc-cta{width:100%;align-items:stretch;}
  .fc-cta .btn{width:100%;justify-content:center;}

  /* --- fixed bottom tab bar --- */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(251,247,239,0.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:10.5px;font-weight:600;color:var(--text-muted);
    padding:4px 12px;border-radius:12px;
  }
  .tab svg{width:20px;height:20px;stroke:var(--text-muted);}
  .tab.active{color:var(--wine);}
  .tab.active svg{stroke:var(--wine);}
}

.last-visit{margin:-20px 0 28px;font-size:14.5px;color:var(--text-muted);}
.last-visit a{color:var(--wine);font-weight:600;}
.empty{color:var(--text-muted);font-size:14.5px;padding:8px 0;}
a.example-card{color:inherit;}
#leadForm{min-width:260px;width:100%;}
#leadForm .field{margin-bottom:14px;}
#leadForm label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--text-muted);}
#leadForm input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);font-family:'Manrope',sans-serif;font-size:15px;outline:none;
}
#leadForm input:focus{border-color:var(--wine);}
.form-note{margin-top:10px;font-size:13.5px;color:var(--wine);}

.referral .hero-ctas{margin-top:32px;}