/* Sub-pages built by build/pages.py: how it works, for agencies, FAQ, about, pricing, case studies.
   Patch Studio's own look (Georgia headings, DM Sans text, IBM Plex Mono labels, ivory and lime on dark). */
.sub-intro{padding:48px 0 0}
.sub-outro{padding:8px 0 24px}
.sub-page .story-section:first-of-type{margin-top:34px}
.doc-page ul{margin:8px 0 0}.doc-page li{margin:9px 0;line-height:1.65}.doc-page li b,.doc-page p b{color:#e6e8dc;font-weight:500}
.doc-page h1{line-height:1.1}

/* the sub-pages keep their navigation on a phone, wrapped under the logo (the homepage hides its own there) */
@media(max-width:1000px){
  .site-nav.sub-nav{width:100%;margin-left:0;flex-wrap:wrap;gap:10px 18px}
  .site-nav.sub-nav>a:not(.nav-score){display:block}
}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:34px 0 8px}
.cta-row .primary-link{margin-top:0;width:auto;color:#182012!important}
.cta-row .quiet-link{color:#c9d8b4;font-size:.95rem}

.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:30px 0 8px}
.stat{border-top:2px solid #8aab78;padding-top:14px;margin:0!important}
.stat b{display:block;font:400 2.5rem/1.05 Georgia,serif;letter-spacing:-.03em;color:#d9edbb}
.stat span{display:block;margin-top:8px;font-size:.88rem;line-height:1.45;color:#aeb4a5}

.cmp{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:.95rem}
.cmp th{font:500 .7rem 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:#858d7d;padding:8px 14px 8px 0;border-bottom:1px solid #ffffff22}
.cmp td{padding:10px 14px 10px 0;border-bottom:1px solid #ffffff12;color:#c9cebf}
.cmp tr.me td{color:#e9b08f}
.note{border-left:2px solid #667251;padding:2px 0 2px 16px;margin-top:26px;font-size:.92rem!important;color:#aeb4a5!important}

.page-list{display:grid;gap:16px;margin:26px 0 6px}
.page-list article{position:relative;padding:22px 24px;border:1px solid #4b5740;border-radius:6px;background:linear-gradient(120deg,#273023,#1a2019)}
.page-list article:hover{border-color:#8aab78}
.page-list .mono{display:block;font:500 .7rem 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#a7b09a}
.page-list h2{margin:10px 0 8px;font:400 1.5rem/1.2 Georgia,serif;letter-spacing:-.02em}
.page-list h2 a{color:#eee9db!important;text-decoration:none}
.page-list h2 a::after{content:"";position:absolute;inset:0}   /* the whole card is the link */
.page-list p{color:#aeb4a5!important;font-size:.95rem;line-height:1.6;margin:0}

@media(max-width:650px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat b{font-size:2rem}
  .cmp{font-size:.86rem}.cmp th,.cmp td{padding-right:8px}
  .cta-row .primary-link{width:100%}
}

/* bright theme: page background bright, text dark; cards keep their dark panel */
:root[data-theme="bright"] .doc-page li b,:root[data-theme="bright"] .doc-page p b{color:#1f2219}
:root[data-theme="bright"] .cta-row .quiet-link{color:#3f6119}
:root[data-theme="bright"] .stat{border-top-color:#5d7f3c}
:root[data-theme="bright"] .stat b{color:#3f6119}
:root[data-theme="bright"] .stat span,:root[data-theme="bright"] .note{color:#55594c!important}
:root[data-theme="bright"] .cmp th{color:#6d7164;border-bottom-color:#0000002a}
:root[data-theme="bright"] .cmp td{color:#3f4237;border-bottom-color:#00000014}
:root[data-theme="bright"] .cmp tr.me td{color:#a24a1c}
:root[data-theme="bright"] .note{border-left-color:#8aa867}

/* right to left (the Hebrew sub-pages) */
html[dir="rtl"] .privacy-page h1{text-align:right}
html[dir="rtl"] .privacy-page ul{padding-left:0;padding-right:20px}
html[dir="rtl"] .cmp th,html[dir="rtl"] .cmp td{text-align:right;padding:10px 0 10px 14px}
html[dir="rtl"] .note{border-left:0;border-right:2px solid #667251;padding:2px 16px 2px 0}
html[dir="rtl"] .site-nav.sub-nav{margin-left:0;margin-right:auto}
html[lang="he"] .doc-page h2,html[lang="he"] .sub-intro h1,html[lang="he"] .doc-page h1{font-family:'Heebo',Arial,sans-serif;font-weight:800;letter-spacing:-.02em}

/* the comparison table (draft page /compare/) */
.wide-doc{max-width:1000px}
.vs-wrap{overflow-x:auto;margin:26px 0 6px}
.vs{width:100%;min-width:720px;border-collapse:collapse;font-size:.93rem}
.vs th{padding:0 12px 14px;text-align:left}.vs th:first-child{width:34%}
.vs td{padding:11px 12px;border-bottom:1px solid #ffffff12;color:#c9cebf;vertical-align:top;line-height:1.4}
.vs td:first-child{color:#e6e8dc;padding-left:0}
.vs tr.grp td{font:500 .7rem 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#858d7d;padding-top:26px;border-bottom:1px solid #ffffff22}
.vs td:nth-child(2){background:#c3e6920d}
.chip{display:inline-block;min-width:54px;padding:6px 12px;border-radius:4px;font:600 .82rem 'IBM Plex Mono',monospace;letter-spacing:.06em;text-align:center}
.chip.nur{background:#c3e692;color:#182012}
.chip.r1{background:#E40072;color:#fff}
.chip.r2{background:#FDFDFD;color:#171717}
.chip.r3{background:#376CFF;color:#fff}
.vs td i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;vertical-align:1px}
.vs .c-y i{background:#9fd86b}.vs .c-p i{background:linear-gradient(90deg,#9fd86b 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px #9fd86b}
.vs .c-n i{box-shadow:inset 0 0 0 1.5px #6f7867}.vs .c-x i{box-shadow:inset 0 0 0 1.5px #e9b08f}
.vs .c-n{color:#8f9685}
:root[data-theme="bright"] .vs td{color:#3f4237;border-bottom-color:#00000014}
:root[data-theme="bright"] .vs td:first-child{color:#1f2219}
:root[data-theme="bright"] .vs tr.grp td{color:#6d7164;border-bottom-color:#0000002a}
:root[data-theme="bright"] .vs .c-y i{background:#5d8a2a}
:root[data-theme="bright"] .vs .c-p i{background:linear-gradient(90deg,#5d8a2a 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px #5d8a2a}
:root[data-theme="bright"] .chip.r2{background:#171717;color:#FDFDFD}

/* Why NUR: two perspectives joined by NUR */
.doc-page h1 em{font-style:normal;color:#bed891}
.persp{display:grid;grid-template-columns:1fr 92px 1fr;align-items:stretch;gap:0;margin:34px 0 14px}
.persp article{padding:26px 28px;border:1px solid #4b5740;border-radius:8px;background:linear-gradient(140deg,#273023,#1a2019)}
.persp .mono{display:block;font:500 .7rem 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#a7b09a}
.persp h2{margin:14px 0 6px;font:500 2rem/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:#d9edbb}
.persp h2 span{color:#eee9db;font-weight:400}
.persp .tags{color:#eee9db!important;font-size:1rem!important;margin:0 0 14px!important}
.persp p,.persp li{color:#c9cebf;font-size:.95rem;line-height:1.65}
.persp ul{padding-left:18px;margin:0}
.persp .node{position:relative;display:flex;align-items:center;justify-content:center}
.persp .node::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid #9fd86b}
.persp .node span{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;border:1.5px solid #9fd86b;background:#141514;font:700 1rem 'DM Sans',Arial,sans-serif;letter-spacing:.04em;color:#eee9db}
@media(max-width:800px){
  .persp{grid-template-columns:1fr}
  .persp .node{height:64px}.persp .node::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:1.5px solid #9fd86b}
  .persp .node span{width:58px;height:58px;font-size:.85rem}
}
:root[data-theme="bright"] .doc-page h1 em{color:#3f6119}
:root[data-theme="bright"] .persp .node span{background:#f4f1e8;color:#1f2219;border-color:#5d8a2a}
:root[data-theme="bright"] .persp .node::before{border-color:#5d8a2a}