/* /features/ : hand-ported from "Tinwell Features.dc.html" (14 Oct 2026, claude.ai/design project db42214a…), on top of
 * landing.css (fonts, nav, footer, buttons, .tw-cta) and shop.css (.tw-crumbs, the .tw-sw screen window). The design is
 * desktop-only; the breakpoints are ours: two-column hero to one under 1100px, the sticky "On this page" column becomes a
 * plain list above the article under 1024px. The figures are the live app screens (screens.js), not images. */

/* Page header */
.tw-ft-head{padding-block:clamp(36px,3.5vw,56px) clamp(64px,6.5vw,104px)}
.tw-ft-head .tw-crumbs{margin:0;color:rgba(245,242,234,.6)}
.tw-ft-head .tw-crumbs a{color:rgba(245,242,234,.6)}
.tw-ft-head .tw-crumbs a:hover{color:#f5f2ea}
.tw-ft-head .tw-crumbs li+li::before{color:rgba(245,242,234,.35)}
.tw-ft-head .tw-crumbs [aria-current]{color:#f5f2ea}
.tw-ft-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(40px,5vw,80px);row-gap:40px;align-items:center;margin-top:clamp(32px,3.5vw,56px)}
.tw-ft-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;text-wrap:balance}
.tw-ft-head .tw-lede{margin:28px 0 0;max-width:540px;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#fff;text-wrap:pretty} /* scoped: shop.css (loaded after) has its own .tw-lede */
@media (max-width:1099px){.tw-ft-hero{grid-template-columns:minmax(0,1fr)}.tw-ft-shot.is-hero{max-width:760px}}

/* App screens in a frame: shop.css draws the window (.tw-sw), this is the shadow and the space it takes before it mounts */
.tw-ft-shot{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 48px -32px rgba(20,26,23,.35)}
.tw-ft-shot>[data-screen-mount]{display:block;min-width:0}
.tw-ft-shot>[data-screen-mount]:not(.tw-scr){border-radius:0} /* the space before it mounts: shop.css */
.tw-ft-shot .tw-sw{border-radius:0;box-shadow:none}
.tw-ft-shot.is-hero{background:#0e1613;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.tw-ft-shot.is-hero>[data-screen-mount]:not(.tw-scr){background:#1c2522}
.tw-ft-shot.is-hero .tw-scr-nojs{color:rgba(245,242,234,.72)}

/* Body: sticky contents column, 760px article, empty balancing column */
.tw-ft-body{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,760px) minmax(0,1fr);column-gap:clamp(32px,3.5vw,56px);align-items:start;padding-block:clamp(56px,6.5vw,96px) clamp(64px,7.5vw,120px)}
.tw-ft-side{position:sticky;top:24px;max-width:280px;max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
.tw-toc-l,.tw-ft-card-t{margin:0}
.tw-toc-l{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5f6f67}
.tw-toc-links{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.tw-toc-links a{display:block;padding:6px 0 6px 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-toc-links a:hover{color:#1c2b26}
.tw-toc-links a[aria-current="true"]{color:#1c2b26;border-left-color:#1f7d6a}

/* Licence card under the contents */
.tw-ft-card{margin-top:36px;padding:20px 22px;border:1px solid #dddddd;border-radius:16px;background:#f7f7f7}
.tw-ft-card-t{font-size:14px;font-weight:600;color:#1c2b26}
.tw-ft-card-price{display:flex;align-items:baseline;gap:8px;margin:10px 0 0}
.tw-ft-card-price strong{font-family:var(--tw-display);font-weight:700;font-size:36px;line-height:1;letter-spacing:-.04em;color:#1c2b26}
.tw-ft-card-price span,.tw-ft-card-p{font-size:13px;line-height:1.5;color:#5f6f67}
.tw-ft-card-p{margin:8px 0 0}
.tw-ft-card .tw-ft-card-b{height:48px;margin-top:20px;padding:0 16px;font-size:15px}
.tw-ft-card-note{margin:12px 0 0;text-align:center;font-size:12.5px;color:#5f6f67}

/* Article */
.tw-ft-article{min-width:0;font-size:17px;line-height:28px;color:#3a4842;text-wrap:pretty}
.tw-ft-article a{text-decoration:underline;text-underline-offset:3px}
.tw-ft-intro{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#1c2b26}
.tw-ft-intro a{text-underline-offset:4px}
.tw-ft-sec{scroll-margin-top:32px;margin-top:64px;padding-top:56px;border-top:1px solid #dddddd}
.tw-ft-n{font-size:14px;font-weight:600;color:#1f7d6a}
.tw-ft-sec h2{margin-top:10px;font-family:var(--tw-display);font-size:clamp(28px,2.8vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.025em;color:#1c2b26;text-wrap:balance}
.tw-ft-sec p{margin-top:20px}
.tw-ft-sec .tw-ft-n{margin-top:0}
.tw-ft-fig{margin:32px 0 0}
.tw-ft-fig figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:#5f6f67}

/* "What you will need" */
.tw-ft-needs{margin:24px 0 0;padding:8px 28px;list-style:none;background:#fff;border:1px solid #dddddd;border-radius:16px}
.tw-ft-needs li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #eeeeee}
.tw-ft-needs li:last-child{border-bottom:0}
.tw-ft-tick{flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;background:#e6f3ec;color:#1a6357;font-size:13px;font-weight:700;line-height:22px;text-align:center}
.tw-ft-tick.is-plus{background:#f0f0f0;color:#5f6f67}

/* Under 1024px: contents as a plain list above the article, the licence card after it */
@media (max-width:1023px){
.tw-ft-body{grid-template-columns:minmax(0,1fr);row-gap:48px}
.tw-ft-side{display:contents}
.tw-toc{order:0;max-width:760px}
.tw-toc-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.tw-ft-article{order:1;max-width:760px}
.tw-ft-card{order:2;max-width:360px;margin-top:0}
}
@media (max-width:599px){
.tw-toc-links{grid-template-columns:minmax(0,1fr)}
.tw-ft-article{font-size:16px;line-height:1.65}
.tw-ft-sec{margin-top:48px;padding-top:40px}
.tw-ft-needs{padding:4px 18px}
}