/* =========================================================
   PRACTICAL AI SORTED
   Unified AFR stylesheet
   Stage 1: cleaned shared stylesheet
   ========================================================= */

/* 1. DESIGN TOKENS
   --------------------------------------------------------- */
:root{
  --bg:#f7f6f3;
  --bg2:#ffffff;
  --bg3:#f0ede8;
  --bg4:#e8e4dd;

  --border:#e2ddd6;
  --border2:#ccc8c0;

  --text:#1a1916;
  --text2:#5a5750;
  --text3:#9e9a92;

  --accent:#c47d14;
  --accent-light:#fef3e2;
  --accent-mid:#fde4b0;
  --accent-dark:#a36510;

  --green:#1a7a4a;
  --green-bg:#eaf5ef;
  --green-mid:#b8e4cc;

  --purple:#5b4ec7;
  --purple-bg:#f0eefb;
  --purple-mid:#c9c3f0;

  --coral:#c44e2e;
  --coral-bg:#fdf0ec;
  --coral-mid:#f5c4b3;

  --teal:#1a7a6e;
  --teal-bg:#e8f7f5;
  --teal-mid:#a8ddd8;

  --site-width:1120px;
  --content-width:860px;

  --r:14px;
  --rs:8px;

  --shadow:0 8px 28px rgba(0,0,0,.08);
  --shadow-soft:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
}


/* 2. RESET AND TYPOGRAPHY
   --------------------------------------------------------- */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
}

a{
  color:inherit;
}

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

button,
input,
textarea,
select{
  font:inherit;
}

h1,
h2,
h3{
  color:var(--text);
}


/* 3. SITE SHELL
   --------------------------------------------------------- */
.site-page,
.page{
  max-width:var(--site-width);
  margin:0 auto;
  background:var(--bg2);
  min-height:100vh;
  box-shadow:var(--shadow);
}

main{
  width:100%;
}


/* 4. SHARED NAVIGATION
   --------------------------------------------------------- */
.nav,
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.nav-inner,
.topbar{
  max-width:var(--site-width);
  margin:0 auto;
}

.nav-inner{
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.5rem;
}

.nav-brand,
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.nav-mark,
.brand-mark{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--accent);
  color:#fff;
  font-family:'DM Serif Display',serif;
  font-size:17px;
  line-height:1;
}

.nav-name,
.brand-name{
  display:block;
  font-family:'DM Serif Display',serif;
  font-size:20px;
  line-height:1.1;
  color:var(--text);
}

.nav-name em,
.brand-name em{
  color:var(--accent);
  font-style:italic;
}

.brand-sub{
  display:block;
  font-size:11px;
  color:var(--text3);
  margin-top:2px;
}

.nav-links,
.nav-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links a,
.nav-link{
  font-size:13px;
  color:var(--text2);
  text-decoration:none;
}

.nav-link{
  padding:.55rem .7rem;
  border-radius:var(--rs);
}

.nav-links a:hover,
.nav-link:hover{
  color:var(--text);
}

.nav-link:hover{
  background:var(--bg3);
}

.nav-cta,
.top-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1rem;
  border-radius:var(--rs);
  background:var(--accent);
  color:#fff !important;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

.nav-cta:hover,
.top-cta:hover{
  background:var(--accent-dark);
}


/* 5. SHARED HERO
   --------------------------------------------------------- */
.hero{
  padding:4.7rem 2rem 3.7rem;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
}

.hero-grid,
.hero.two-column{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:2.5rem;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--accent-dark);
  background:var(--accent-light);
  border:1px solid var(--accent-mid);
  border-radius:999px;
  padding:5px 14px;
  margin-bottom:1.35rem;
}

.hero h1{
  font-family:'DM Serif Display',serif;
  font-weight:400;
  font-size:clamp(42px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:1.1rem;
}

.hero h1 em{
  font-style:italic;
  color:var(--accent);
}

.hero-sub{
  font-size:18px;
  color:var(--text2);
  font-weight:300;
  max-width:660px;
  margin:0 0 1.25rem;
  line-height:1.7;
}

.hero-proof,
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.hero-proof{
  margin:1.3rem 0 0;
}

.pills{
  margin-bottom:2rem;
}

.pill{
  font-size:12px;
  color:var(--text2);
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.35rem .8rem;
}


/* 6. BUTTONS AND LINKS
   --------------------------------------------------------- */
.cta-row,
.fbtns,
.cta-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}

.cta-row{
  margin-top:1.45rem;
}

.fbtns{
  margin-top:2rem;
}

.cta-actions{
  justify-content:flex-end;
}

.bta,
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius:var(--rs);
  padding:.85rem 1.15rem;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}

.bta:hover,
.btn-primary:hover{
  background:var(--accent-dark);
}

.btg,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bg2);
  color:var(--text2);
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:var(--rs);
  padding:.82rem 1.1rem;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s;
}

.btg:hover,
.btn-secondary:hover{
  background:var(--bg3);
  color:var(--text);
}

.text-link,
.try-first{
  font-size:13px;
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.try-first{
  display:block;
  margin-top:.9rem;
}

.micro{
  font-size:12px;
  color:var(--text3);
  margin-top:.75rem;
}


/* 7. SHARED SECTIONS
   --------------------------------------------------------- */
.section,
.ds{
  padding:3.4rem 2rem;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
}

.section.alt,
.ds:nth-of-type(even){
  background:var(--bg);
}

.section-label{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:600;
  color:var(--accent-dark);
  margin-bottom:.65rem;
}

.section h2,
.ds h2{
  font-family:'DM Serif Display',serif;
  font-size:clamp(30px,4vw,44px);
  font-weight:400;
  line-height:1.12;
  margin-bottom:.75rem;
}

.section h2 em,
.ds h2 em{
  font-style:italic;
  color:var(--accent);
}

.section-intro,
.ddesc{
  font-size:16px;
  color:var(--text2);
  font-weight:300;
  max-width:760px;
  margin:0;
  line-height:1.75;
}

.dh{
  margin-bottom:2rem;
}

.deb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:.75rem;
}

.dbadge{
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text3);
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px 12px;
}

.ddot{
  width:6px;
  height:6px;
  border-radius:50%;
}

.aline{
  width:28px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  margin:1.5rem 0;
}

.divider{
  border:none;
  border-top:1px solid var(--border);
  margin:2rem 0;
}


/* 8. SHARED GRIDS
   --------------------------------------------------------- */
.g2,
.g3,
.cards,
.steps{
  display:grid;
  align-items:stretch;
}

.g2{
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:1.5rem;
}

.g3,
.cards{
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.g3{
  margin-bottom:1.5rem;
}

.cards,
.steps{
  margin-top:1.6rem;
}

.steps{
  grid-template-columns:repeat(4,1fr);
  gap:.85rem;
}


/* 9. SHARED CARDS
   --------------------------------------------------------- */
.card,
.step,
.signup-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-soft);
}

.card{
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  height:100%;
}

.card small,
.clabel{
  display:block;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text3);
  font-size:10px;
  font-weight:600;
  margin-bottom:.45rem;
}

.card h3,
.ctitle{
  font-size:17px;
  font-weight:500;
  margin-bottom:.35rem;
}

.card p,
.cdesc{
  font-size:13px;
  color:var(--text2);
  line-height:1.55;
}

.card p{
  margin:0;
}

.g2 .card .fbtns,
.card .fbtns{
  margin-top:auto;
  padding-top:18px;
}

.cprice{
  font-size:22px;
  font-weight:500;
  color:var(--text);
  margin-bottom:2px;
}

.ctag{
  display:inline-block;
  align-self:flex-start;
  margin-top:8px;
  font-size:11px;
  padding:2px 9px;
  border-radius:999px;
}

.tg{background:var(--green-bg);color:var(--green);}
.tt{background:var(--teal-bg);color:var(--teal);}
.ta{background:var(--accent-light);color:var(--accent-dark);}
.tp{background:var(--purple-bg);color:var(--purple);}
.tc{background:var(--coral-bg);color:var(--coral);}


/* 10. SIGNUP CARD AND FORMS
   --------------------------------------------------------- */
.signup-card{
  background:var(--bg);
  padding:1.5rem;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}

.signup-card h2{
  font-family:'DM Serif Display',serif;
  font-size:30px;
  font-weight:400;
  line-height:1.15;
  margin-bottom:.55rem;
}

.signup-card p{
  font-size:14px;
  color:var(--text2);
  margin:.35rem 0 1rem;
}

.form-row{
  display:flex;
  gap:.65rem;
  align-items:stretch;
  margin-top:1rem;
}

.form-row input{
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--rs);
  padding:.85rem .9rem;
  background:#fff;
  color:var(--text);
}

.form-row button{
  border:none;
  background:var(--accent);
  color:#fff;
  border-radius:var(--rs);
  padding:.85rem 1.1rem;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.form-row button:hover{
  background:var(--accent-dark);
}


/* 11. STEPS AND WORKFLOW COMPONENTS
   --------------------------------------------------------- */
.step{
  padding:1.05rem;
}

.step-num{
  display:inline-flex;
  width:26px;
  height:26px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  background:var(--accent-light);
  color:var(--accent-dark);
  font-size:12px;
  font-weight:700;
  margin-bottom:.65rem;
}

.step h3{
  font-size:15px;
  margin-bottom:.3rem;
}

.step p{
  font-size:12.5px;
  color:var(--text2);
  margin:0;
}

.wf{
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow-soft);
}

.wr{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--border);
}

.wr:last-child{
  border-bottom:none;
}

.wn{
  width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-light);
  font-size:12px;
  font-weight:500;
  color:var(--accent-dark);
  flex-shrink:0;
  border-right:1px solid var(--border);
}

.wc{
  padding:11px 14px;
  flex:1;
  background:var(--bg2);
}

.wt{
  font-size:13px;
  font-weight:500;
  color:var(--text);
  margin-bottom:2px;
}

.wd{
  font-size:12px;
  color:var(--text2);
  line-height:1.5;
}

.wb{
  padding:11px 14px;
  display:flex;
  align-items:center;
  flex-shrink:0;
  background:var(--bg2);
}

.wb span{
  font-size:10px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--bg3);
  color:var(--text3);
  border:1px solid var(--border);
  white-space:nowrap;
}


/* 12. LISTS AND CHECK ITEMS
   --------------------------------------------------------- */
.cl{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ci{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--text2);
  line-height:1.6;
}

.dot{
  width:16px;
  height:16px;
  border:1px solid var(--accent-mid);
  border-radius:50%;
  flex-shrink:0;
  margin-top:2px;
  background:var(--accent-light);
}


/* 13. STATS
   --------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  max-width:620px;
  box-shadow:var(--shadow-soft);
}

.sc{
  background:var(--bg2);
  padding:1rem;
  text-align:center;
}

.sn{
  font-family:'DM Serif Display',serif;
  font-size:20px;
  color:var(--accent);
  display:block;
  margin-bottom:2px;
}

.sl2{
  font-size:10px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.08em;
}


/* 14. COMPARISON COMPONENTS
   --------------------------------------------------------- */
.cmpg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:1.5rem;
}

.cmpc{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:1rem;
  background:var(--bg2);
  box-shadow:var(--shadow-soft);
}

.cmpc.feat{
  border-color:var(--green-mid);
  background:var(--green-bg);
}

.cmpb{
  font-size:10px;
  font-weight:500;
  padding:3px 10px;
  border-radius:999px;
  display:inline-block;
  margin-bottom:8px;
}

.cmpt{
  font-size:14px;
  font-weight:500;
  color:var(--text);
  margin-bottom:4px;
}

.cmpp{
  font-size:23px;
  font-weight:500;
  color:var(--text);
  margin-bottom:8px;
}

.cmpp span{
  font-size:13px;
  font-weight:400;
  color:var(--text2);
}

.cmpli{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.cmpli li{
  font-size:12px;
  color:var(--text2);
  padding-left:14px;
  position:relative;
  line-height:1.5;
}

.cmpli li::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--text3);
}

.cmpli li.pro::before{
  color:var(--green);
}

.cmpli li.pro{
  color:var(--text);
}


/* 15. PANELS AND FINAL CTA
   --------------------------------------------------------- */
.cta-panel,
.green-panel,
.fin{
  border-radius:var(--r);
}

.cta-panel{
  background:var(--accent-light);
  border:1px solid var(--accent-mid);
  padding:1.5rem;
  margin-top:1.7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.cta-panel h3,
.green-panel h3,
.fin h3{
  font-family:'DM Serif Display',serif;
  font-weight:400;
}

.cta-panel h3{
  font-size:27px;
  margin-bottom:.25rem;
}

.cta-panel p{
  margin:0;
  color:var(--text2);
  font-size:14px;
  max-width:650px;
}

.green-panel{
  background:var(--green-bg);
  border:1px solid var(--green-mid);
  padding:1.5rem;
  margin-top:1.7rem;
}

.green-panel h3{
  font-size:28px;
  margin-bottom:.35rem;
}

.green-panel p{
  color:var(--text2);
  margin:.25rem 0 1rem;
}

.fin{
  border:1px solid var(--accent-mid);
  padding:2.2rem;
  text-align:center;
  background:var(--accent-light);
  margin-top:1rem;
  box-shadow:var(--shadow-md);
}

.fin h3{
  font-size:26px;
  margin-bottom:.75rem;
}

.fin h3 em{
  font-style:italic;
  color:var(--accent);
}

.fin p{
  font-size:14px;
  color:var(--text2);
  line-height:1.7;
  max-width:620px;
  margin:0 auto 1rem;
}


/* 16. SHARED FOOTER
   --------------------------------------------------------- */
.site-footer,
.footer{
  background:var(--bg2);
  border-top:1px solid var(--border);
}

.footer-top{
  max-width:var(--site-width);
  margin:0 auto;
  padding:18px 22px 12px;
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:22px;
  align-items:start;
}

.footer-brand-name{
  font-family:'DM Serif Display',serif;
  font-size:22px;
  line-height:1;
  color:var(--text);
  margin-bottom:8px;
}

.footer-brand-name em{
  color:var(--accent);
  font-style:italic;
}

.footer-brand-desc{
  font-size:13px;
  line-height:1.5;
  color:var(--text2);
  max-width:360px;
}

.footer-col-label{
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text3);
  margin-bottom:8px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.footer-links a{
  font-size:13px;
  line-height:1.4;
  color:var(--text2);
  text-decoration:none;
}

.footer-links a:hover{
  color:var(--text);
}

.footer-bottom{
  max-width:var(--site-width);
  margin:0 auto;
  padding:0 22px 14px;
  font-size:11px;
  line-height:1.4;
  color:var(--text3);
}

.footer{
  padding:2rem;
  color:var(--text3);
  font-size:12px;
  text-align:center;
}


/* 17. SUCCESS PAGE
   Scoped so it cannot override shared site components
   --------------------------------------------------------- */
.success-page .main{
  max-width:var(--content-width);
  margin:0 auto;
  padding:4rem 1.5rem;
  background:var(--bg2);
  min-height:calc(100vh - 140px);
  box-shadow:var(--shadow-md);
}

.success-page .box{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}

.success-page .tick-wrap{
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--green-bg);
  border:1px solid var(--green-mid);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
}

.success-page .tick{
  width:26px;
  height:14px;
  border-left:3px solid var(--green);
  border-bottom:3px solid var(--green);
  transform:rotate(-45deg);
  margin-top:-4px;
}

.success-page .box h1{
  font-family:'DM Serif Display',serif;
  font-size:clamp(34px,5vw,58px);
  font-weight:400;
  line-height:1.08;
  color:var(--text);
  margin-bottom:1.25rem;
}

.success-page .box h1 em{
  color:var(--accent);
  font-style:italic;
}

.success-page .intro{
  font-size:16px;
  font-weight:300;
  color:var(--text2);
  line-height:1.75;
  max-width:620px;
  margin:0 auto 2rem;
}

.success-page .next-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-soft);
  text-align:left;
  margin:0 auto 2rem;
  overflow:hidden;
}

.success-page .next-header{
  background:var(--accent-light);
  border-bottom:1px solid var(--accent-mid);
  padding:12px 16px;
}

.success-page .next-header-label{
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent-dark);
}

.success-page .next-steps{
  display:flex;
  flex-direction:column;
}

.success-page .step-row{
  display:flex;
  gap:14px;
  padding:16px;
  border-bottom:1px solid var(--border);
}

.success-page .step-row:last-child{
  border-bottom:none;
}

.success-page .step-title{
  font-size:14px;
  font-weight:500;
  color:var(--text);
  margin-bottom:3px;
}

.success-page .step-desc{
  font-size:13px;
  color:var(--text2);
  line-height:1.55;
}

.success-page .btn-access,
.success-page .btn-secondary{
  display:block;
  width:100%;
  max-width:420px;
  margin:0 auto 10px;
  padding:13px 22px;
  border-radius:var(--rs);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  text-align:center;
  transition:all .15s;
}

.success-page .btn-access{
  background:var(--accent);
  color:#fff;
}

.success-page .btn-access:hover{
  background:var(--accent-dark);
}

.success-page .inbox-note{
  margin:1.75rem auto 1rem;
  padding:14px 16px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r);
  font-size:13px;
  color:var(--text2);
  line-height:1.6;
  max-width:620px;
}

.success-page .inbox-note a,
.success-page .contact-line a{
  color:var(--accent-dark);
}

.success-page .contact-line{
  font-size:13px;
  color:var(--text3);
}


/* 18. SMALL ANIMATIONS
   --------------------------------------------------------- */
.fade{
  animation:fadeUp .55s ease both;
}

.d1{animation-delay:.05s;}
.d2{animation-delay:.12s;}
.d3{animation-delay:.2s;}
.d4{animation-delay:.28s;}
.d5{animation-delay:.36s;}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* 19. LEGACY FINAL CTA LINK FIX
   Uses valid shared variables only
   --------------------------------------------------------- */
.pas-link-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:28px auto 8px;
  width:100%;
  text-align:center;
}

.pas-panel-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:130px;
  min-width:130px;
  height:54px;
  padding:0 14px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--rs);
  font-size:16px;
  line-height:1;
  color:var(--text);
  text-decoration:none;
}

.pas-panel-link:hover{
  background:var(--accent-light);
  border-color:var(--accent-mid);
  color:var(--accent-dark);
}

.pas-company-line{
  margin:8px auto 0;
  text-align:center;
  font-size:16px;
  line-height:1.5;
  color:var(--text);
}


/* 20. RESPONSIVE
   --------------------------------------------------------- */
@media(max-width:820px){
  .hero-grid,
  .hero.two-column{
    grid-template-columns:1fr;
  }

  .hero{
    padding:3.4rem 1.25rem 2.6rem;
  }

  .section,
  .ds{
    padding:2.6rem 1.25rem;
  }

  .g2,
  .g3,
  .cards,
  .steps,
  .cmpg{
    grid-template-columns:1fr;
  }

  .cta-panel{
    align-items:flex-start;
    flex-direction:column;
  }

  .cta-actions{
    justify-content:flex-start;
  }

  .form-row{
    flex-direction:column;
  }

  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .nav-actions{
    justify-content:flex-start;
  }
}

@media(max-width:768px){
  .nav-inner{
    padding:12px 16px;
    align-items:flex-start;
  }

  .nav-links{
    gap:10px;
    justify-content:flex-end;
  }

  .nav-links a{
    font-size:11px;
  }

  .footer-top{
    grid-template-columns:1fr;
    gap:16px;
    padding:18px 16px 12px;
    text-align:center;
  }

  .footer-brand-desc{
    max-width:none;
  }

  .footer-bottom{
    padding:0 16px 14px;
    text-align:center;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .wr{
    flex-wrap:wrap;
  }

  .wb{
    width:100%;
    border-top:1px solid var(--border);
    justify-content:flex-start;
    padding-left:58px;
  }

  .success-page .main{
    padding:3rem 1.25rem;
  }

  .success-page .step-row{
    padding:14px;
  }
}

@media(max-width:560px){
  .nav-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-links{
    justify-content:flex-start;
  }

  .topbar{
    padding:1rem;
  }

  .hero h1{
    font-size:clamp(38px,12vw,52px);
  }

  .section h2,
  .ds h2{
    font-size:clamp(28px,10vw,38px);
  }
}