:root{
  --bg:#fbf4e6;
  --paper:#fffdf7;
  --ink:#071226;
  --muted:#42536d;
  --green:#0f3b30;
  --line:#d8e1ec;
  --soft:#f3eadb;
  --blue:#eaf4f7;
  --pink:#ffe6eb;
  --yellow:#fff3c7;
  --shadow:0 18px 50px rgba(15,59,48,.10);
  --radius:34px;
}
*{box-sizing:border-box}
html{min-height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  min-width:0;
  min-height:100%;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.85), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(209,231,213,.55), transparent 26%),
    linear-gradient(180deg, #fbf4e6 0%, #fffaf0 52%, #fbf4e6 100%);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background-image:
    repeating-linear-gradient(0deg, rgba(15,59,48,.05) 0, rgba(15,59,48,.05) 1px, transparent 1px, transparent 5px);
  mix-blend-mode:multiply;
}
a{color:var(--green); text-decoration:none; overflow-wrap:anywhere}
a:hover{text-decoration:underline}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto}
main,section,article,aside,header,footer,nav{min-width:0}
img,svg{max-width:100%; height:auto}
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  background:rgba(251,244,230,.82);
  border-bottom:1px solid rgba(216,225,236,.75);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; color:var(--green); flex-shrink:0; min-width:0}
.brand img{width:46px; height:46px; border-radius:14px}
.brand > span{display:inline-block}
.brand-title{display:block; font-family:Georgia, serif; font-size:30px; line-height:1}
.brand-sub{display:block; font-family:ui-sans-serif, system-ui; font-size:11px; letter-spacing:.08em; margin-top:2px; text-align:right}
.links{display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap; min-width:0}
.links a{font-weight:750; color:#27354a}
.hero{padding:72px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center}
.kicker{color:var(--green); font-weight:850; letter-spacing:.08em; text-transform:uppercase; font-size:13px}
h1,h2,h3{line-height:1.12; margin:0 0 16px; overflow-wrap:anywhere; text-wrap:balance}
h1{font-size:clamp(46px, 7vw, 86px); font-family:Georgia, serif; color:var(--green)}
.hero-brand{display:inline-block}
.hero-brand-main{display:block}
.hero-brand-sub{display:block; margin-top:4px; font-family:ui-sans-serif, system-ui; font-size:clamp(18px, 2vw, 28px); font-weight:850; letter-spacing:.08em; line-height:1.2; text-align:right}
h2{font-size:clamp(32px, 4vw, 54px); font-family:Georgia, serif; color:var(--green)}
h3{font-size:26px; color:#0b1528}
.lead{font-size:clamp(19px, 2vw, 25px); color:var(--muted); max-width:760px}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:2px solid var(--ink); border-radius:999px;
  padding:14px 22px; font-weight:850; background:#fffdf7; color:var(--ink);
  box-shadow:0 10px 24px rgba(7,18,38,.08);
  max-width:100%; min-height:48px; text-align:center; white-space:normal; touch-action:manipulation;
}
.btn.primary{background:var(--green); color:#fff; border-color:var(--green)}
.btn.soft{border-color:var(--line); color:var(--muted)}
.store-badges{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.store{
  min-width:190px; border-radius:18px; padding:12px 16px; color:#fff;
  background:#101827; display:flex; align-items:center; gap:12px; font-weight:800;
  box-shadow:0 14px 32px rgba(7,18,38,.12);
  max-width:100%; min-height:56px;
}
.store span{display:block; font-size:12px; opacity:.86; font-weight:700}
.store strong{display:block; font-size:20px; line-height:1}
.store.disabled{background:#dfe6ee; color:#6b7483}
.phone-card{
  background:var(--paper); border:1px solid var(--line); border-radius:42px;
  padding:34px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  text-align:center;
}
.phone-card:after{content:none}
.mock-icon{width:96px; height:96px; border-radius:24px; display:block; margin:0 auto}
.mock-brand{display:inline-block; margin-top:16px}
.mock-logo{display:block; font-family:Georgia, serif; color:var(--green); font-size:54px; font-weight:800; line-height:1}
.mock-small{display:block; color:var(--green); font-weight:850; text-align:right}
.signal{
  margin:36px 0 20px; background:#fff; border:1px solid var(--line); border-radius:28px;
  padding:26px; color:#071226; font-weight:850; font-size:24px; text-align:left;
  overflow-wrap:anywhere;
}
.signal small{display:block; color:var(--muted); font-size:15px; margin-bottom:12px}
.section{padding:58px 0}
.section-lead-single-line{max-width:none; font-size:clamp(16px, 1.6vw, 20px); white-space:nowrap}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cards .card h3{font-size:clamp(20px, 2vw, 23px); white-space:nowrap}
.card{
  background:rgba(255,253,247,.92); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:0 10px 34px rgba(15,59,48,.06);
  min-width:0;
}
.card.icon:before{font-size:34px; display:block; margin-bottom:12px}
.card p{color:var(--muted); margin:0}
.grid-two{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.grid-two .card h2{font-size:clamp(24px, 3vw, 36px); white-space:nowrap}
.article-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.article-tile{background:#fffdf7; border:1px solid var(--line); border-radius:26px; padding:22px; min-width:0}
.article-tile p{color:var(--muted); margin-bottom:0}
.article-page{padding:52px 0}
.article-wrap{display:grid; grid-template-columns:minmax(0, 760px) 290px; gap:36px; align-items:start}
.article{
  background:rgba(255,253,247,.96); border:1px solid var(--line); border-radius:36px; padding:42px;
  box-shadow:var(--shadow);
  min-width:0;
}
.article h1{font-size:clamp(38px,5vw,64px)}
.article p{font-size:18px; color:#26354a}
.article li{margin-bottom:10px; color:#26354a; font-size:18px}
.article blockquote{
  margin:28px 0; padding:24px; background:#f5fbf7; border-left:6px solid var(--green);
  border-radius:20px; font-weight:800; color:#0f3b30;
}
.legal-article h2{
  margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line);
  font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:clamp(22px, 2.4vw, 28px); color:var(--green);
}
.legal-article p{margin:.75rem 0}
.legal-article ul{margin:.75rem 0 1rem 1.25rem; padding:0}
.sidebar{position:sticky; top:95px}
.cta{
  background:#fffdf7; border:1px solid var(--line); border-radius:32px; padding:26px; box-shadow:var(--shadow);
}
.cta-brand{display:inline-block; margin:14px 0 16px}
.cta-brand-main{display:block; font-family:Georgia, serif; font-size:30px; line-height:1; color:var(--green)}
.cta-brand-sub{display:block; margin-top:2px; font-family:ui-sans-serif, system-ui; font-size:11px; font-weight:850; letter-spacing:.08em; line-height:1.2; text-align:right; color:var(--green)}
.footer{padding:48px 0; border-top:1px solid var(--line); color:var(--muted)}
.footer-grid{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer-grid > div{min-width:0}
.badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.pill{border:1px solid var(--line); background:#fffdf7; border-radius:999px; padding:8px 12px; color:var(--muted); font-weight:750}
.faq-item{background:#fffdf7; border:1px solid var(--line); border-radius:24px; padding:22px; margin-bottom:14px; min-width:0}
.breadcrumbs{font-weight:750; color:var(--muted); margin-bottom:18px}
p,li,blockquote,.kicker,.pill,.signal,.article-tile{overflow-wrap:anywhere}
@media(max-width:900px){
  .nav-inner{align-items:flex-start; flex-direction:column}
  .links{justify-content:flex-start; width:100%}
  .hero-grid,.grid-two,.article-wrap{grid-template-columns:1fr}
  .cards,.article-list{grid-template-columns:1fr 1fr}
  .sidebar{position:static}
  .section-lead-single-line{white-space:normal}
  .grid-two .card h2{white-space:normal}
}
@media(max-width:640px){
  :root{--radius:24px}
  .container{width:min(100% - 28px, 1120px)}
  .nav{position:static}
  .nav-inner{gap:12px; padding:12px 0}
  .brand{gap:10px}
  .brand img{width:40px; height:40px; border-radius:12px}
  .brand-title{font-size:26px}
  .brand-sub{font-size:10px}
  .links{gap:8px; font-size:14px}
  .links a{display:inline-flex; align-items:center; min-height:40px; padding:6px 10px; border:1px solid rgba(216,225,236,.85); border-radius:999px; background:rgba(255,253,247,.62)}
  .hero{padding:36px 0 28px}
  h1{font-size:clamp(38px, 13vw, 58px)}
  h2{font-size:clamp(28px, 10vw, 42px)}
  h3{font-size:22px}
  .kicker{font-size:12px}
  .lead{font-size:18px}
  .section{padding:42px 0}
  .cards,.article-list{grid-template-columns:1fr}
  .card,.article-tile,.faq-item{padding:22px; border-radius:22px}
  .cards .card h3{font-size:20px; white-space:normal}
  .grid-two .card h2{font-size:clamp(24px, 8vw, 32px)}
  .actions,.store-badges{align-items:stretch; flex-direction:column}
  .btn,.store{width:100%}
  .phone-card{padding:24px; border-radius:30px}
  .signal{margin:28px 0 8px; padding:20px; border-radius:22px; font-size:20px}
  .article-page{padding:36px 0}
  .article{padding:24px; border-radius:26px}
  .article h1{font-size:clamp(32px, 11vw, 44px)}
  .article p,.article li{font-size:17px}
  .article blockquote{margin:24px 0; padding:20px; border-radius:18px}
  .breadcrumbs{font-size:14px}
  .cta{padding:22px; border-radius:24px}
  .footer{padding:36px 0}
  .footer-grid{flex-direction:column}
  .footer .links{align-items:flex-start; flex-direction:column; gap:8px}
  .footer .links a{width:100%}
  .mock-logo{font-size:46px}
}
@media(max-width:380px){
  .container{width:min(100% - 20px, 1120px)}
  .brand-title{font-size:23px}
  .links{gap:6px}
  .links a{font-size:13px; padding:5px 8px}
  .card,.article-tile,.faq-item,.cta{padding:18px}
  .article{padding:20px}
  .phone-card{padding:20px}
}