/* /docs/ : hand-ported from "Tinwell Docs.dc.html" (14 Oct 2026). Loads on top of landing.css (fonts, nav, footer,
 * .tw-b buttons, .tw-faq, .tw-cta) and shop.css (.tw-crumbs). The design is desktop-only, so the breakpoints are ours. */

/* Page header: dark band with breadcrumb, kicker, H1, lede and the four-step plan card */
.tw-docs-head{padding-block:clamp(36px,3.5vw,56px) clamp(64px,6.5vw,104px)}
.tw-docs-head .tw-crumbs{margin:0;color:rgba(245,242,234,.6)}
.tw-docs-head .tw-crumbs a{color:rgba(245,242,234,.6)}
.tw-docs-head .tw-crumbs a:hover{color:#f5f2ea}
.tw-docs-head .tw-crumbs li+li::before{color:rgba(245,242,234,.35)}
.tw-docs-head .tw-crumbs [aria-current]{color:#f5f2ea}
.tw-docs-head-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,80px);row-gap:40px;align-items:center;margin-top:clamp(32px,3.5vw,56px)}
.tw-docs-head h1{margin-top:24px;font-family:var(--tw-display);font-weight:700;font-size:clamp(48px,4.375vw,84px);line-height:.94;letter-spacing:-.04em}
.tw-docs-lede{margin-top:28px;max-width:540px;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:rgba(245,242,234,.72);text-wrap:pretty}
.tw-docs-plan{justify-self:end;width:100%;max-width:520px;border:1px solid rgba(245,242,234,.18);border-radius:16px;padding:28px clamp(20px,3vw,36px) 12px}
.tw-docs-plan-h{margin:0;padding-bottom:16px;font-size:14px;font-weight:600;color:#b8c0bb}
.tw-docs-plan a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:60px;padding:16px 0;border-top:1px solid rgba(245,242,234,.12);color:#f5f2ea}
.tw-docs-plan a:hover,.tw-docs-plan a:hover .tw-docs-plan-l{color:#2ca58d}
.tw-docs-plan-n{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#2ca58d;color:#141a17;font-size:13px;font-weight:700}
.tw-docs-plan-l{font-size:16px;font-weight:500}
.tw-docs-plan-t{font-size:14px;color:#b8c0bb;white-space:nowrap}

/* Article: sticky table of contents | 760px reading column | spare column */
.tw-docs-body{background:#f7f7f7}
.tw-docs-grid{padding-block:clamp(56px,6vw,96px) clamp(72px,7.5vw,120px);display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,760px) minmax(0,1fr);column-gap:clamp(32px,3.5vw,56px);align-items:start}
.tw-docs-side{position:sticky;top:24px;align-self:start;max-width:280px;max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
.tw-docs-toc-h,.tw-docs-stuck-h,.tw-docs-stuck-p,.tw-docs-check-foot,.tw-docs-steplab,.tw-docs-outro{margin:0}
.tw-docs-toc-h{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5f6f67}
.tw-docs-toc-list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.tw-docs-toc-list a{display:block;min-height:44px;padding:11px 0 11px 16px;border-left:2px solid #dddddd;font-size:14px;line-height:1.4;font-weight:500;color:#5f6f67;transition:color .15s,border-color .15s}
.tw-docs-toc-list a:hover{color:#1c2b26}
.tw-docs-toc-list a.is-active{color:#1c2b26;border-color:#1f7d6a}
.tw-docs-stuck{margin-top:36px;background:#f7f7f7;border:1px solid #dddddd;border-radius:16px;padding:20px 22px}
.tw-docs-stuck-h{font-size:14px;font-weight:600;color:#1c2b26}
.tw-docs-stuck-p{margin-top:8px;font-size:14px;line-height:1.55;color:#52615a}
.tw-docs-stuck-b{height:48px;margin-top:18px;font-size:15px}
.tw-docs-stuck-more{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:4px;text-align:center;font-size:13px;font-weight:600}

.tw-docs-article{min-width:0;font-size:17px;line-height:28px;color:#3a4842;text-wrap:pretty}
.tw-docs-article a{text-decoration:underline;text-underline-offset:3px}
.tw-docs-intro{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:#1c2b26}
.tw-docs-sec{scroll-margin-top:32px;margin-top:clamp(40px,5vw,64px);padding-top:clamp(36px,4.5vw,56px);border-top:1px solid #dddddd}
.tw-docs-sec h2{font-size:clamp(28px,3vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.025em;color:#1c2b26;text-wrap:balance}
.tw-docs-sec>p{margin-top:20px}
.tw-docs-sec>p.tw-docs-steplab{margin-top:0}
.tw-docs-sec>p.tw-docs-outro{margin-top:32px}
.tw-docs-steplab{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px}
.tw-docs-stepn{font-size:14px;font-weight:600;color:#1f7d6a}
.tw-docs-time{font-size:13px;font-weight:500;line-height:1;color:#1a6357;background:#e6f3ec;border-radius:999px;padding:6px 10px}

/* "Before you start" checklist: real checkboxes, state kept in localStorage by docs.js */
.tw-docs-check{margin-top:24px;padding:8px clamp(18px,2.5vw,28px) 20px;background:#fff;border:1px solid #dddddd;border-radius:16px}
.tw-docs-check-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid #eee}
.tw-docs-check-row input{flex:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:3px 0 0;border:1.5px solid #c9cfcc;border-radius:6px;background:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.tw-docs-check-row input::before{content:"";width:12px;height:12px;background:#fff;clip-path:polygon(14% 44%,0 62%,38% 100%,100% 22%,86% 8%,38% 70%);transform:scale(0);transition:transform .15s}
.tw-docs-check-row input:checked{background:#1f7d6a;border-color:#1f7d6a}
.tw-docs-check-row input:checked::before{transform:scale(1)}
.tw-docs-check-row label{flex:1;min-height:28px;font-size:16px;line-height:28px;color:#1c2b26;cursor:pointer}
.tw-docs-check-row input:checked+label{color:#5f6f67}
.tw-docs-check-foot{margin-top:16px;font-size:13px;font-weight:500;color:#5f6f67}
.tw-docs-check-foot.is-done{color:#1a6357}

/* Numbered sub-steps in a white card */
.tw-docs-steps{margin:24px 0 0;padding:0;list-style:none;counter-reset:tw-docs;background:#fff;border:1px solid #dddddd;border-radius:16px}
.tw-docs-steps>li{counter-increment:tw-docs;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:18px;padding:24px clamp(18px,2.5vw,28px)}
.tw-docs-steps>li+li{border-top:1px solid #eee}
.tw-docs-steps>li::before{content:counter(tw-docs);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#141a17;color:#f5f2ea;font-size:14px;font-weight:700}
.tw-docs-steps h3{grid-column:2;font-size:18px;font-weight:600;line-height:32px;color:#1c2b26}
.tw-docs-steps p{grid-column:2;margin-top:4px}

/* Troubleshooting: the shared .tw-faq accordion (landing.css); the sign and padding as the design's rows */
.tw-docs-faqs{margin-top:24px}
.tw-docs-faqs .tw-faq>button{font-size:17px;min-height:44px}
.tw-docs-faqs .tw-faq-a p{max-width:none;padding:0 48px 24px 0;font-size:16px;line-height:1.65}


@media (max-width:1099px){
  .tw-docs-head-row{grid-template-columns:minmax(0,1fr)}
  .tw-docs-plan{justify-self:start;max-width:600px}
  .tw-docs-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .tw-docs-side{position:static;max-width:none;max-height:none;overflow:visible;padding-right:0}
  .tw-docs-toc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .tw-docs-stuck{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;max-width:760px}
  .tw-docs-stuck-h{grid-column:1}
  .tw-docs-stuck-p{grid-column:1;margin-top:0}
  .tw-docs-stuck-b{grid-column:2;grid-row:1/3;margin-top:0;padding:0 22px}
  .tw-docs-stuck-more{grid-column:1/3;justify-content:flex-start}
  .tw-docs-article{max-width:760px}
}
@media (max-width:759px){
  .tw-docs-plan a{grid-template-columns:28px minmax(0,1fr);min-height:0}
  .tw-docs-plan-t{grid-column:2;margin-top:-10px;white-space:normal}
  .tw-docs-toc-list{grid-template-columns:minmax(0,1fr)}
  .tw-docs-stuck{grid-template-columns:minmax(0,1fr)}
  .tw-docs-stuck-b{grid-column:1;grid-row:auto;margin-top:12px}
  .tw-docs-stuck-more{grid-column:1}
  .tw-docs-article{font-size:16px;line-height:26px}
  .tw-docs-steps>li{grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding-inline:16px}
  .tw-docs-steps>li::before{width:28px;height:28px;font-size:13px}
  .tw-docs-faqs .tw-faq-a p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){.tw-docs-toc-list a,.tw-docs-check-row input,.tw-docs-check-row input::before{transition:none}}