/* SS Support System -- POC landing page v2. Warm-editorial (SSS_moodboard.png).
   Palette: Ivory/Cream/Sand/Taupe/Clay/Sage/Mocha/Ink. */
:root {
  --ivory:#faf6ef; --cream:#f1e9dc; --sand:#e6d7c2; --taupe:#c9b59c;
  --clay:#b08968; --sage:#8a9a7b; --mocha:#6f5a45; --ink:#2e2620;
  --wa:#25d366; --wa-dk:#1da851;
  --line:rgba(46,38,32,.12);
  --shadow:0 18px 50px -24px rgba(46,38,32,.4);
  --shadow-lg:0 40px 80px -40px rgba(46,38,32,.55);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;}
em{font-style:italic;color:var(--clay);}
img{max-width:100%;display:block;}
a{color:inherit;}

/* nav */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:.8rem clamp(1.2rem,4vw,3.5rem);background:rgba(250,246,239,.85);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
.monogram{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--ivory);background:var(--mocha);
  width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;}
.monogram.sm{width:2.4rem;height:2.4rem;font-size:1.1rem;}
.brand-name{font-family:var(--serif);font-weight:600;font-size:1.05rem;}
.nav-links{display:flex;align-items:center;gap:clamp(.7rem,2.2vw,1.7rem);}
.nav-links a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--mocha);}
.nav-links a:hover{color:var(--ink);}
.nav-cta.wa{display:inline-flex;align-items:center;gap:.4rem;background:var(--wa);color:#fff !important;
  padding:.5rem 1rem;border-radius:999px;}
.nav-cta.wa:hover{background:var(--wa-dk);}
.wa-ic{width:1.05em;height:1.05em;flex:none;}
@media (max-width:760px){.nav-links a:not(.nav-cta){display:none;}}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  max-width:1180px;margin:0 auto;padding:clamp(2.8rem,7vw,5.5rem) clamp(1.2rem,5vw,2rem) clamp(2.5rem,5vw,4rem);
  background:radial-gradient(110% 80% at 12% 0%,var(--cream) 0%,transparent 55%),
             radial-gradient(90% 70% at 100% 0%,rgba(176,137,104,.14) 0%,transparent 55%);}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:600;color:var(--clay);margin:0 0 1.1rem;}
.hero h1{margin:0 0 1.2rem;display:flex;flex-direction:column;}
.h1-lead{font-size:clamp(2.1rem,4.6vw,3.5rem);color:var(--ink);}
.h1-pay{font-size:clamp(2.1rem,4.6vw,3.5rem);font-style:italic;color:var(--clay);}
.lede{font-size:clamp(1.02rem,1.6vw,1.22rem);max-width:30rem;margin:0 0 1.8rem;color:var(--mocha);}
.lede strong{color:var(--ink);}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;}
.hero-cta.center{justify-content:center;}
.hero-note{margin-top:1.4rem;font-size:.85rem;color:var(--mocha);}
.hero-note strong{color:var(--ink);}

.cta{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;font-size:.98rem;
  padding:.85rem 1.6rem;border-radius:999px;transition:transform .12s ease,background .2s ease,box-shadow .2s ease;}
.cta:hover{transform:translateY(-2px);}
.cta.primary.wa{background:var(--wa);color:#fff;box-shadow:0 14px 30px -12px rgba(37,211,102,.6);}
.cta.primary.wa:hover{background:var(--wa-dk);}
.cta.ghost{background:transparent;color:var(--mocha);border:1.5px solid var(--taupe);}
.cta.ghost:hover{border-color:var(--mocha);background:rgba(176,137,104,.08);}

/* device frame */
.device{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-lg);}
.hero-visual .device{transform:rotate(1.4deg);transition:transform .3s ease;}
.hero-visual .device:hover{transform:rotate(0);}
.device-bar{display:flex;gap:.4rem;padding:.6rem .8rem;background:var(--cream);border-bottom:1px solid var(--line);}
.device-bar span{width:.6rem;height:.6rem;border-radius:50%;background:var(--taupe);}
.device-bar span:first-child{background:var(--clay);}
.device img{width:100%;height:auto;}
.device.sm{box-shadow:var(--shadow);}

/* bands */
.band{max-width:1100px;margin:0 auto;padding:clamp(3rem,6.5vw,5.5rem) clamp(1.2rem,5vw,2rem);}
.section-title{font-size:clamp(1.7rem,4vw,2.6rem);text-align:center;margin:0 0 .6rem;}
.section-sub{text-align:center;color:var(--mocha);max-width:34rem;margin:0 auto 2.6rem;}
.section-title + .compare-grid,.section-title + .feature-grid,.section-title + .steps,
.section-title + .testi-wrap,.section-title + .faq-list{margin-top:2.6rem;}

/* stat strip */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-radius:18px;overflow:hidden;max-width:1040px;margin-top:-.5rem;}
.stat{background:var(--sand);padding:1.8rem 1.2rem;text-align:center;}
.stat:nth-child(even){background:var(--cream);}
.stat-num{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.1rem,2vw,1.45rem);color:var(--mocha);}
.stat-label{display:block;margin-top:.35rem;font-size:.85rem;color:var(--mocha);opacity:.85;}
@media (max-width:720px){.stat-band{grid-template-columns:1fr 1fr;}}

/* compare */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.compare-col{padding:2rem 1.8rem;border-radius:18px;}
.compare-col h3{margin:0 0 1.2rem;font-size:1.25rem;}
.compare-col ul{margin:0;padding:0;list-style:none;}
.compare-col li{position:relative;padding:.45rem 0 .45rem 1.9rem;font-size:.96rem;}
.compare-col li::before{position:absolute;left:0;top:.4rem;font-weight:700;width:1.2rem;}
.compare-col.manual{background:#efe7da;color:#7a6f63;border:1px solid var(--line);}
.compare-col.manual h3{color:var(--mocha);}
.compare-col.manual li::before{content:"\2717";color:#c2553f;}
.compare-col.system{background:var(--sage);color:var(--ivory);}
.compare-col.system h3{color:var(--ivory);}
.compare-col.system li::before{content:"\2713";color:var(--ivory);}
@media (max-width:680px){.compare-grid{grid-template-columns:1fr;}}

/* features (banded bg) */
.features{max-width:none;background:var(--cream);}
.features .feature-grid,.features .section-title{max-width:1100px;margin-left:auto;margin-right:auto;}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.feature{padding:1.9rem 1.6rem;background:#fff;border:1px solid var(--line);border-radius:18px;transition:transform .15s ease,box-shadow .2s ease;}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.feature-ic{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:12px;background:var(--cream);color:var(--clay);font-size:1.4rem;margin-bottom:1rem;}
.feature h3{margin:0 0 .5rem;font-size:1.2rem;}
.feature p{margin:0;font-size:.95rem;color:var(--mocha);}
@media (max-width:880px){.feature-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}

/* gallery */
.shot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.shot{margin:0;}
.shot .device.sm img{height:230px;object-fit:cover;object-position:top;width:100%;}
.shot figcaption{margin-top:1rem;font-size:.95rem;color:var(--mocha);}
.shot figcaption strong{color:var(--ink);display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.15rem;}
@media (max-width:820px){.shot-row{grid-template-columns:1fr;max-width:480px;margin:0 auto;}.shot .device.sm img{height:auto;}}

/* how (banded) */
.how{max-width:none;background:var(--sand);}
.how .section-title{color:var(--ink);}
.steps{list-style:none;margin:0 auto;padding:0;max-width:720px;display:grid;gap:1rem;}
.steps li{display:flex;gap:1.2rem;align-items:flex-start;padding:1.3rem 1.6rem;background:var(--ivory);border-radius:16px;}
.step-n{flex:none;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;background:var(--clay);color:var(--ivory);font-family:var(--serif);font-weight:700;}
.steps h3{margin:0 0 .2rem;font-size:1.15rem;}
.steps p{margin:0;font-size:.95rem;color:var(--mocha);}

/* testimonials */
.testi-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:center;max-width:1000px;margin:0 auto;}
.testi-visual{margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);}
.quote-stack{display:grid;gap:1.2rem;}
.quote{margin:0;padding:1.8rem 1.8rem 1.4rem;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);}
.quote blockquote{margin:0 0 1.1rem;font-family:var(--serif);font-size:1.06rem;font-style:italic;line-height:1.5;color:var(--ink);}
.quote figcaption{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--mocha);}
.avatar{width:2.3rem;height:2.3rem;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--clay);color:var(--ivory);font-family:var(--serif);font-weight:700;}
.quote figcaption>span:last-child{display:flex;flex-direction:column;}
.stars{color:var(--clay);letter-spacing:.1em;font-size:.85rem;}
@media (max-width:760px){.testi-wrap{grid-template-columns:1fr;}.testi-visual{max-width:380px;margin:0 auto;}}

/* faq */
.faq-list{max-width:720px;margin:0 auto;display:grid;gap:.8rem;}
.faq-list details{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:.4rem 1.3rem;}
.faq-list summary{cursor:pointer;font-family:var(--serif);font-weight:600;font-size:1.08rem;padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";color:var(--clay);font-size:1.4rem;font-family:var(--sans);}
.faq-list details[open] summary::after{content:"\2013";}
.faq-list p{margin:0 0 1rem;color:var(--mocha);font-size:.96rem;}

/* final cta */
.cta-band{text-align:center;background:var(--mocha);color:var(--ivory);border-radius:26px;max-width:1000px;margin-bottom:3rem;}
.cta-band h2{font-size:clamp(1.8rem,4.5vw,2.8rem);margin:0 0 1rem;}
.cta-band p{max-width:560px;margin:0 auto 2rem;color:var(--sand);}
.cta-band p.reassure{margin:1.4rem auto 0;font-size:.85rem;color:var(--taupe);}
.cta-band strong{color:#fff;}
.cta-band .cta.ghost{color:var(--ivory);border-color:rgba(250,246,239,.45);}
.cta-band .cta.ghost:hover{border-color:var(--ivory);background:rgba(250,246,239,.1);}

/* footer */
.footer{text-align:center;padding:3rem 1.5rem 2.5rem;border-top:1px solid var(--line);}
.footer-brand{display:inline-flex;align-items:center;gap:.7rem;text-align:left;font-family:var(--serif);font-weight:600;}
.footer-brand small{font-weight:400;color:var(--taupe);font-family:var(--sans);font-size:.8rem;}
.footer-contact{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin:1.4rem 0;}
.footer-contact a{color:var(--mocha);text-decoration:none;font-size:.92rem;font-weight:500;}
.footer-contact a:hover{color:var(--clay);}
.footer-fine{font-size:.82rem;color:var(--taupe);margin:0;}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;text-align:center;}
  .hero-copy{order:1;}
  .hero-visual{order:2;}
  .lede{margin-left:auto;margin-right:auto;}
  .hero-cta{justify-content:center;}
  .hero h1{align-items:center;}
  .hero-visual .device{transform:none;}
}