/* Inner pages (features, pricing, UGC CRM): the home page's palette and faces, set as a reading page.
   One question per section, the answer right under it, tables for anything tabular. */


.doc{padding:28px 0 96px;background:linear-gradient(180deg,var(--cream) 0,var(--cream-2) 520px,var(--cream) 1100px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--border)}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}

.doc-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center;padding:44px 0 56px;border-bottom:1px solid var(--border)}
.doc-hero.has-visual{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.doc-hero h1{font-size:clamp(44px,5.6vw,76px);line-height:1.02;max-width:14ch}
.doc-lead{margin-top:22px;font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--ink-2);max-width:58ch}
.doc-intro .store-row{margin-top:30px}
.doc-updated{margin-top:22px;font-size:13px;color:var(--ink-3)}
.doc-visual{display:flex;justify-content:center}
.doc-visual .iphone{--w:clamp(240px,23vw,300px)}

.doc-body{max-width:780px;padding-top:24px}
.doc-sec{padding:44px 0 8px}
.doc-sec h2{font-size:clamp(30px,3.2vw,42px);line-height:1.1;max-width:22ch}
.doc-sec p{margin-top:16px;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:66ch}
.doc-sec p a,.doc-sec li a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,138,85,.45)}
.doc-list{margin:18px 0 0;padding-left:22px;display:grid;gap:10px}
.doc-list li{font-size:16.5px;line-height:1.6;color:var(--ink-2);padding-left:4px}
.doc-list li::marker{color:var(--gold-deep);font-weight:600}

.doc-table{margin-top:22px;overflow-x:auto;border:1px solid var(--border);border-radius:18px;background:#fff}
.doc-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.doc-table caption{text-align:left;padding:14px 18px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.doc-table th,.doc-table td{padding:13px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--border)}
.doc-table thead th{border-top:0;font-size:13px;color:var(--ink-3);font-weight:600;padding-top:12px}
.doc-table tbody th{font-weight:600;color:var(--ink)}
.doc-table td{color:var(--ink-2)}
.doc-table tbody tr:nth-child(even){background:rgba(248,242,236,.55)}

.doc-figure{margin:26px 0 0}
.doc-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.doc-figs img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 24px 40px -26px rgba(42,37,32,.45),0 0 0 1px var(--border)}

.doc-faq .qa{padding:20px 0 0}
.doc-faq .qa h3{font-size:18.5px;line-height:1.35}
.doc-faq .qa p{margin-top:8px;font-size:16px}

.rel-grid{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.doc-sec .rel-grid a{text-decoration:none;color:inherit}
.rel-grid a{display:block;height:100%;padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--border);transition:border-color .3s ease,translate .3s ease}
.rel-grid a:hover{border-color:rgba(176,138,85,.55);translate:0 -2px}
.rel-grid b{display:block;font-family:var(--display);font-weight:400;font-size:25px;line-height:1.15;color:var(--ink)}
.rel-grid span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.rel-grid.big{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:900px){
  .doc-hero.has-visual{grid-template-columns:1fr}
  .doc-visual .iphone{--w:min(64vw,270px)}
}
@media (max-width:640px){
  .doc-hero{padding:28px 0 40px}
  .doc-figs{gap:8px}
  .rel-grid,.rel-grid.big{grid-template-columns:1fr}
  .doc-table th,.doc-table td{padding:11px 13px}
}