/* Papos site: shared nav with dropdowns, footer columns, and the inner pages (pricing, free trial, how it works,
   businesses, resources). Loaded after site.css and reuses its tokens; nothing in site.css is changed. */

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--orange);color:var(--ink);font-weight:700;padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:10px}

/* nav: dropdowns (desktop) and accordion groups (phone menu) */
.nav .nav-main{align-items:center}
.nav .nav-main > li{display:flex;align-items:center}
.nav .dd{position:relative}
.nav .dd-btn{background:none;border:0;color:inherit;font:500 15px var(--sans);opacity:.86;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0}
.nav .dd-btn:hover,.nav .dd.open .dd-btn{opacity:1;color:var(--orange)}
.nav .dd-btn:after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.nav .dd.open .dd-btn:after{transform:translateY(1px) rotate(225deg)}
.nav .nav-main a[aria-current="page"]{opacity:1;color:var(--orange)}
.nav .dd-panel{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--paper);color:var(--text);border-radius:18px;box-shadow:0 26px 60px -22px rgba(0,0,0,.55),0 0 0 1px rgba(19,36,26,.08);padding:12px;min-width:340px;z-index:60}
.nav .dd-panel:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .dd.open .dd-panel{display:block}
.nav .dd-panel ul{display:grid;position:static;gap:2px;margin:0;padding:0;background:none;border:0;flex-direction:row;font-size:15px}
.nav .dd-panel li{display:block}
.nav .dd-panel a{display:block;padding:10px 12px;border-radius:12px;opacity:1;text-decoration:none;color:var(--text)}
.nav .dd-panel a:hover,.nav .dd-panel a:focus-visible{background:var(--sand);color:var(--text)}
.nav .dd-panel a b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.nav .dd-panel a span{display:block;font-size:13px;color:var(--muted);margin-top:2px;font-weight:500;line-height:1.35}
.nav .dd-panel .dd-all{margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.nav .dd-panel .dd-all a{font-weight:700;font-size:14px;color:var(--rim-dark)}
.nav .dd.open .dd-wide{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;min-width:600px}
.nav .dd-side{display:grid;gap:10px;align-content:start}
.nav .dd-panel a.dd-feature{background:var(--orange);color:var(--ink);font-weight:800;text-align:center;padding:14px 12px;border-radius:14px}
.nav .dd-panel a.dd-feature span{color:var(--ink);opacity:.8;font-weight:600}
.nav .dd-panel a.dd-feature:hover{background:#f5b35f;color:var(--ink)}
.nav .dd-panel a.dd-promo{background:var(--ink);color:var(--cream);padding:16px;border-radius:14px}
.nav .dd-panel a.dd-promo:hover{background:var(--ink-3);color:var(--cream)}
.nav .dd-panel a.dd-promo small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--peach)}
.nav .dd-panel a.dd-promo b{font-size:16px;margin-top:6px}
.nav .dd-panel a.dd-promo span{color:var(--muted-d)}
.nav .dd-panel a.dd-promo em{display:inline-block;margin-top:10px;font-style:normal;font-weight:700;font-size:13px;color:var(--orange)}
.nav .nav-main > li.nav-m-ctas{display:none}
.nav ul .nav-m-ctas a.btn{opacity:1}
.nav .cta-demo{margin-left:0}
.nav .cta + .cta{margin-left:0}
@media(max-width:1120px){.nav .cta-demo{display:none}.nav .wrap{gap:22px}.nav ul.nav-main{gap:20px}}
@media(max-width:940px){
  .nav .nav-main{max-height:calc(100vh - 68px);overflow-y:auto;align-items:stretch}
  .nav .nav-main > li{display:block}
  .nav .dd-btn{width:100%;justify-content:space-between;font-size:17px;height:auto;padding:12px 0;opacity:1}
  .nav .dd-panel,.nav .dd.open .dd-wide{position:static;transform:none;box-shadow:none;background:transparent;color:var(--cream);padding:0 0 10px 14px;min-width:0;border-radius:0;border-left:1px solid var(--line-d)}
  .nav .dd.open .dd-wide{display:block}
  .nav .dd-panel:before{display:none}
  .nav .dd-panel a,.nav ul .dd-panel li a{color:var(--cream);padding:9px 10px;font-size:16px}
  .nav .dd-panel a span{color:var(--muted-d)}
  .nav .dd-panel a:hover,.nav .dd-panel a:focus-visible{background:rgba(245,233,221,.07);color:var(--cream)}
  .nav .dd-panel .dd-all{border-top-color:var(--line-d)}
  .nav .dd-panel .dd-all a{color:var(--orange)}
  .nav .dd-side{margin-top:8px}
  .nav .dd-panel a.dd-promo{border:1px solid var(--line-d)}
  .nav .nav-main > li.nav-m-ctas{display:flex;gap:10px;flex-wrap:wrap;padding:14px 0 4px}
  .nav ul .nav-m-ctas a.btn{display:inline-flex;padding:0 18px;font-size:15px;height:44px}
}

/* footer with more columns */
.foot .grid.g6{grid-template-columns:1.25fr repeat(5,1fr);gap:32px}
.foot .grid.g6 address .btn{margin-top:18px}
@media(max-width:1080px){.foot .grid.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.foot .grid.g6{grid-template-columns:1fr 1fr;gap:28px}.foot .grid.g6 > div:first-child{grid-column:1 / -1}}

/* inner page building blocks */
.page-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.page-hero .lang-alt{display:inline-block;margin-top:22px;font-size:14px;font-weight:600;color:var(--peach)}
.page-hero .crumb{font-size:14px;color:var(--muted-d)}
.page-hero .crumb a{color:inherit;text-decoration:none}
.page-hero .crumb a:hover{color:var(--orange)}
.hero-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:var(--muted-d)}
.hero-note span{display:inline-flex;align-items:center;gap:8px}
.hero-note span:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(67,156,102,.22)}
.lede-l{font-size:19px;color:var(--muted);max-width:760px}
.dark .lede-l{color:var(--muted-d)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cardx{background:#fff;border-radius:var(--r-lg);padding:26px 24px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.cardx h3{font-size:20px;letter-spacing:-.015em;line-height:1.2}
.cardx p{font-size:15.5px;color:var(--muted)}
.cardx .bul{margin-top:6px}
.cardx .bul li{font-size:15px}
.cardx a.more{margin-top:auto;font-weight:700;font-size:15px;color:var(--rim-dark);text-decoration:none}
.cardx a.more:hover{text-decoration:underline}
.dark .cardx{background:var(--ink-2);box-shadow:0 0 0 1px var(--line-d);color:var(--cream)}
.dark .cardx p{color:var(--muted-d)}
a.cardx{text-decoration:none;color:inherit;transition:box-shadow .15s ease,transform .15s ease}
a.cardx:hover{box-shadow:0 0 0 2px var(--ink);transform:translateY(-1px)}
.cardx .ic{width:40px;height:40px;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.cardx .ic img{width:26px}
@media(max-width:980px){.cards,.cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards,.cards.c2,.cards.c4{grid-template-columns:1fr}}

.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;vertical-align:2px;margin-left:6px;white-space:nowrap}
.tag.live{background:#e3f1e8;color:#1f5a37}
.tag.soon{background:#fbe9d6;color:#8a3e10}
.dark .tag.live{background:rgba(67,156,102,.22);color:#a9e2bd}
.dark .tag.soon{background:rgba(240,160,65,.2);color:var(--orange)}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fit > div{border-radius:var(--r-lg);padding:26px 24px}
.fit .yes{background:#fff;box-shadow:0 0 0 1px var(--line)}
.fit .not{background:var(--sand)}
.fit h3{font-size:19px;margin-bottom:6px}
.fit .not .bul li:before{background:var(--muted)}
@media(max-width:760px){.fit{grid-template-columns:1fr}}

.band{background:var(--orange);color:var(--ink);border-radius:var(--r-lg);padding:34px 36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2,.band h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.025em}
.band p{margin-top:8px;font-size:17px;max-width:620px}
.band .ctas{display:flex;gap:12px;flex-wrap:wrap}
.band .btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(19,36,26,.4)}
.band .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

.cta-sec{padding:0 0 110px}
.sec + .cta-sec{padding-top:0}
@media(max-width:700px){.cta-sec{padding-bottom:76px}.band{padding:26px 22px}}

/* steps on a light background */
.steps.light .step{background:#fff;border-color:var(--line);color:var(--text)}
.steps.light .step p{color:var(--muted)}
.steps.light .step:before{color:var(--rim)}
.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps.s6{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.steps.s3,.steps.s6{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps.s3,.steps.s6{grid-template-columns:1fr}}
.step .when{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--peach);margin:-14px 0 10px}
.steps.light .step .when{color:var(--green-dark)}

/* pricing */
.pr-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.pr-tools .note{font-size:15px;color:var(--muted)}
.bill-toggle{display:inline-flex;align-items:center;background:var(--sand);border-radius:999px;padding:4px}
.bill-toggle button{border:0;background:none;font:600 14px var(--sans);padding:9px 16px;border-radius:999px;cursor:pointer;color:var(--text);min-height:40px}
.bill-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.bill-toggle .save{font-size:12px;font-weight:800;color:var(--green-dark);margin-left:6px}
.bill-toggle button[aria-pressed="true"] .save{color:#a9e2bd}
.plan .pos{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rim-dark);margin-top:4px}
.plan.hot .pos{color:var(--orange)}
.plan .price s{font-size:20px;color:var(--muted);font-weight:600;margin-right:4px}
.plan.hot .price s{color:var(--muted-d)}
.plan .trial-line{font-size:14px;font-weight:600;color:var(--green-dark);margin-top:6px}
.plan.hot .trial-line{color:#a9e2bd}
.plan .rates{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--muted)}
.plan.hot .rates{border-top-color:var(--line-d);color:var(--muted-d)}
.plan .rates b{color:var(--text);font-weight:700}
.plan.hot .rates b{color:var(--cream)}
.plan .rates dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:6px 0 0}
.plan .rates dt,.plan .rates dd{margin:0}
.plan .rates dd{font-weight:700;color:var(--text)}
.plan.hot .rates dd{color:var(--cream)}
.plan .tiers{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font-size:14px}
.plan .btn + .sub{margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}
.plan.hot .btn + .sub{color:var(--muted-d)}

.trial-band{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:var(--ink);color:var(--cream);border-radius:var(--r-lg);padding:28px 32px;margin-top:26px}
.trial-band .big{font-size:56px;font-weight:800;letter-spacing:-.04em;color:var(--orange);line-height:1}
.trial-band .big small{display:block;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--peach);font-weight:800;margin-top:6px}
.trial-band p{color:var(--muted-d);font-size:16px}
.trial-band p b{color:var(--cream)}
@media(max-width:820px){.trial-band{grid-template-columns:1fr;gap:16px;padding:24px}}

.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:#fff;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.calc .in{padding:30px 30px 32px}
.calc .out{background:var(--ink);color:var(--cream);padding:30px 30px 32px;display:flex;flex-direction:column;gap:10px}
.calc fieldset{border:0;margin:0 0 24px;padding:0;min-width:0}
.calc legend,.calc .lbl{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0}
.calc .pick{display:flex;gap:8px;flex-wrap:wrap}
.calc .pick label{position:relative;cursor:pointer}
.calc .pick input{position:absolute;opacity:0;width:1px;height:1px}
.calc .pick span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:700;font-size:15px;background:#fff}
.calc .pick span small{font-weight:600;color:var(--muted)}
.calc .pick input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.calc .pick input:checked + span small{color:var(--muted-d)}
.calc .pick input:focus-visible + span{box-shadow:0 0 0 3px rgba(240,160,65,.5)}
.calc .loc-row{display:flex;align-items:center;gap:16px}
.calc input[type=range]{flex:1;accent-color:var(--rim);height:44px;min-width:0}
.calc .loc-num{width:84px;height:48px;border-radius:12px;border:1.5px solid #d9c8b4;font:700 18px var(--sans);text-align:center;color:var(--text)}
.calc .loc-num:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(240,160,65,.35)}
.calc .hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.calc .out .k{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--peach)}
.calc .out .total{font-size:54px;font-weight:800;letter-spacing:-.04em;line-height:1}
.calc .out .total small{font-size:16px;font-weight:600;color:var(--muted-d);letter-spacing:0}
.calc .out .lines{display:grid;gap:6px;font-size:15px;color:var(--muted-d);margin:6px 0 10px}
.calc .out .lines div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line-d);padding-bottom:6px}
.calc .out .lines b{color:var(--cream)}
.calc .out .btn{margin-top:auto}
.calc .out .ent{font-size:16px;color:var(--muted-d)}
.calc .out .ent b{color:var(--cream)}
@media(max-width:860px){.calc{grid-template-columns:1fr}.calc .in,.calc .out{padding:24px}}

.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.addon{background:#fff;border-radius:var(--r);padding:22px;box-shadow:0 0 0 1px var(--line)}
.addon .p{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:8px 0 6px}
.addon .p small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
.addon h3{font-size:18px}
.addon p{font-size:15px;color:var(--muted)}
@media(max-width:940px){.addons{grid-template-columns:1fr}}

.always{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-d)}
.always > div{padding:24px 24px 24px 0;border-bottom:1px solid var(--line-d)}
.always > div + div{padding-left:24px;border-left:1px solid var(--line-d)}
.always > div:nth-child(3n+1){padding-left:0;border-left:0}
.always h3{font-size:19px;color:var(--cream)}
.always p{font-size:15px;color:var(--muted-d);margin-top:6px}
@media(max-width:860px){.always{grid-template-columns:1fr}.always > div,.always > div + div{padding-left:0;border-left:0}}

/* feature table across plans */
.ft-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line);background:#fff}
.ft{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:680px}
.ft th,.ft td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.ft thead th{position:sticky;top:0;background:var(--ink);color:var(--cream);font-size:15px;z-index:2}
.ft thead th small{display:block;font-weight:600;color:var(--muted-d);font-size:13px}
.ft thead th.hot{background:var(--rim);color:#fff}
.ft thead th.hot small{color:#ffe7d6}
.ft tbody th{text-align:left;font-weight:600;width:40%;background:#fff;position:sticky;left:0;z-index:1}
.ft tbody tr.grp th{background:var(--sand);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.ft td.c-hot{background:#fff7ec}
.ft .yes{display:inline-block;width:16px;height:10px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg) translateY(-2px)}
.ft .no{display:inline-block;width:14px;height:2px;background:#c9b8a4;vertical-align:middle}
.ft .tag{font-size:10px;margin-left:6px}
.ft td.txt{font-size:13.5px;font-weight:600}
.ft-note{font-size:13.5px;color:var(--muted);margin-top:14px}
@media(max-width:700px){.ft th,.ft td{padding:11px 10px}.ft tbody th{width:auto;min-width:170px;font-size:14px}}

/* timeline (free trial) */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:t;max-width:860px}
.tl li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.tl li:first-child{border-top:1px solid var(--line)}
.tl .when{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rim-dark);padding-top:4px}
.tl .when b{display:block;font-size:30px;letter-spacing:-.03em;color:var(--text);text-transform:none;margin-top:2px}
.tl h3{font-size:21px;letter-spacing:-.015em}
.tl p{color:var(--muted);font-size:16px;margin-top:6px}
.tl .amt{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;padding:4px 10px;border-radius:999px;background:#e3f1e8;color:#1f5a37}
.tl .amt.due{background:#fbe9d6;color:#8a3e10}
@media(max-width:620px){.tl li{grid-template-columns:1fr;gap:6px}}

/* blog + articles */
.posts{display:grid;gap:18px;max-width:900px}
.post-card{display:grid;grid-template-columns:150px 1fr;gap:24px;background:#fff;border-radius:var(--r-lg);padding:26px;box-shadow:0 0 0 1px var(--line);text-decoration:none;color:inherit}
.post-card:hover{box-shadow:0 0 0 2px var(--ink)}
.post-card time{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.post-card h2{font-size:24px;letter-spacing:-.02em;line-height:1.2}
.post-card p{color:var(--muted);margin-top:8px;font-size:16px}
.post-card .rd{display:inline-block;margin-top:12px;font-weight:700;color:var(--rim-dark);font-size:15px}
@media(max-width:620px){.post-card{grid-template-columns:1fr;gap:8px;padding:22px}}
.article{max-width:740px}
.article .meta{font-size:14px;color:var(--muted-d);margin-top:16px}
.article h2{font-size:28px;margin:44px 0 12px;letter-spacing:-.02em;line-height:1.15}
.article h3{font-size:20px;margin:28px 0 8px}
.article p,.article li{color:var(--muted);font-size:17px;line-height:1.65}
.article p{margin-bottom:14px}
.article ul,.article ol{padding-left:22px;margin:0 0 16px}
.article li{margin-bottom:8px}
.article a{color:var(--rim-dark);font-weight:600}
.article .callout{background:var(--sand);border-radius:var(--r);padding:20px 22px;margin:26px 0}
.article .callout p{margin:0;color:var(--text)}

/* small forms on resource pages */
.form.light{background:#fff;box-shadow:0 0 0 1px var(--line)}
.search-help{display:flex;gap:10px;max-width:620px;margin-top:26px}
.search-help input{flex:1;height:52px;border-radius:999px;border:1.5px solid var(--line-d);background:rgba(245,233,221,.06);color:var(--cream);padding:0 20px;font:500 16px var(--sans);min-width:0}
.search-help input::placeholder{color:var(--muted-d)}
.search-help input:focus{outline:0;border-color:var(--orange)}
@media(max-width:520px){.search-help{flex-direction:column}.search-help .btn{width:100%}}

/* link lists */
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px;list-style:none;padding:0;margin:0}
.linkgrid a{font-weight:600;color:var(--rim-dark);text-decoration:none}
.linkgrid a:hover{text-decoration:underline}
@media(max-width:760px){.linkgrid{grid-template-columns:1fr 1fr}}

/* hidden wins over component display rules (calculator lines, billing toggle, notes) */
[hidden]{display:none!important}
.plan .price em{font-style:normal;color:inherit;display:inline-flex;align-items:baseline;gap:6px}
.plan .rates .rates-line{margin-top:8px;font-size:13px}
.bill-toggle button small{font-weight:700;color:var(--green-dark);margin-left:4px}
.bill-toggle button[aria-pressed="true"] small{color:#a9e2bd}