/* /free-vs-pro/ (Free vs Pro): hand-ported from "Tinwell Free vs Pro.dc.html" (claude.ai/design project db42214a…,
 * 14 Oct 2026) on top of landing.css (fonts, nav, footer, .tw-b buttons, .tw-kick, .tw-cta) and shop.css (.tw-crumbs).
 * The design is desktop-only, so the breakpoints are ours. The feature table is a real <table>: one <tbody> per group,
 * a sticky header from 760px up, horizontal scroll below that. */

/* Page header: dark band with breadcrumb, kicker, H1, lede and the two edition cards */
.tw-fvp-head{padding-block:clamp(36px,3.5vw,56px) clamp(64px,6.5vw,104px)}
.tw-fvp-head .tw-crumbs{margin:0;color:rgba(245,242,234,.6)}
.tw-fvp-head .tw-crumbs a{color:rgba(245,242,234,.6)}
.tw-fvp-head .tw-crumbs a:hover{color:#f5f2ea}
.tw-fvp-head .tw-crumbs li+li::before{color:rgba(245,242,234,.35)}
.tw-fvp-head .tw-crumbs [aria-current]{color:#f5f2ea}
.tw-fvp-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-fvp-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-fvp-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-fvp-plans{justify-self:end;width:100%;max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.tw-fvp-plan{display:flex;flex-direction:column;border-radius:16px;padding:clamp(22px,2.2vw,28px)}
.tw-fvp-plan-free{border:1px solid rgba(245,242,234,.18)}
.tw-fvp-plan-pro{background:#f7f7f7;color:#1c2b26;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.tw-fvp-plan-name{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;font-weight:600}
.tw-fvp-badge{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#1a6357;background:#e6f3ec;border-radius:999px;padding:4px 9px}
.tw-fvp-plan-big{margin-top:14px;font-weight:700;font-size:clamp(44px,3.6vw,56px);line-height:.9;letter-spacing:-.045em}
.tw-fvp-plan-note{margin-top:10px;font-size:13px;color:#b8c0bb}
.tw-fvp-plan-pro .tw-fvp-plan-note{color:#5f6f67}
.tw-fvp-plan .tw-b{margin-top:auto;height:48px;padding:0 18px;font-size:15px}
.tw-fvp-plan .tw-fvp-plan-note{margin-bottom:24px}

/* Body: light 1600px band, 1100px column */
.tw-fvp-body{background:#f7f7f7}
.tw-fvp-body-wrap{padding-block:clamp(56px,6.5vw,96px) clamp(64px,7.5vw,120px)}
.tw-fvp-in{max-width:1100px;margin:0 auto}
.tw-fvp-intro{max-width:820px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#1c2b26;text-wrap:pretty}
.tw-fvp-eds{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tw-fvp-ed{background:#fff;border:1px solid #ddd;border-radius:16px;padding:clamp(24px,2.6vw,36px)}
.tw-fvp-ed-k{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5f6f67}
.tw-fvp-ed p+p{margin-top:14px;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#1c2b26;text-wrap:pretty}
.tw-fvp-ed-pro{background:#141a17;border-color:#141a17}
.tw-fvp-ed-pro .tw-fvp-ed-k{color:#2ca58d}
.tw-fvp-ed-pro p+p{color:#f5f2ea}
.tw-fvp-note{margin-top:20px;display:flex;gap:16px;align-items:flex-start;background:#e6f3ec;border:1px solid #bfe3d5;border-radius:14px;padding:22px clamp(18px,2vw,26px)}
.tw-fvp-note p{font-size:16px;line-height:1.6;color:#1a6357;text-wrap:pretty}
.tw-fvp-more{margin-top:24px;max-width:820px;font-size:16px;line-height:1.6;color:#52615a;text-wrap:pretty}
.tw-fvp-more a,.tw-fvp-card a{text-decoration:underline;text-underline-offset:3px}

/* Sections */
.tw-fvp-sec{margin-top:clamp(64px,6.5vw,96px);scroll-margin-top:24px}
.tw-fvp-sec h2{font-family:var(--tw-display);font-size:clamp(32px,3vw,44px);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:#1c2b26;text-wrap:balance}
.tw-fvp-glance-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}

/* "Every feature / Only in Pro" (shown by free-vs-pro.js) */
.tw-fvp-toggle{display:flex;gap:4px;padding:4px;background:#ebebeb;border-radius:12px}
.tw-fvp-toggle[hidden]{display:none}
.tw-fvp-toggle button{height:44px;padding:0 18px;border:0;border-radius:8px;background:transparent;color:#52615a;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.tw-fvp-toggle button:hover{color:#1c2b26}
.tw-fvp-toggle button[aria-pressed="true"]{background:#fff;color:#1c2b26;box-shadow:0 1px 2px rgba(20,26,23,.08)}

/* Ticks and dashes */
.tw-tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#e6f3ec;color:#1f7d6a;font-size:13px;font-weight:700;line-height:1}
.tw-tick-pro{flex:none;background:#2ca58d;color:#fff}
.tw-dash{font-size:18px;line-height:1;color:#a4afa8}

/* The feature table */
.tw-fvp-tbl-wrap{margin-top:28px;background:#fff;border:1px solid #ddd;border-radius:16px;overflow:clip}
.tw-fvp-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px;color:#1c2b26}
.tw-fvp-col-ed{width:172px}
/* Tinwell Tables design, feature matrix (15 Oct 2026): product names at 17px with the price under them, 1.5px ink rule */
.tw-fvp-tbl thead th{position:sticky;top:0;z-index:2;padding:22px 16px 18px;background:#fff;box-shadow:inset 0 -1.5px 0 #1c2b26;text-align:center;vertical-align:bottom;font-size:17px;font-weight:600;line-height:1.35;color:#1c2b26}
.tw-fvp-tbl thead th:first-child{padding:22px 28px 18px;text-align:left;font-size:13px;color:#5f6f67}
.tw-fvp-tbl thead th:last-child{background:#f3faf6;color:#1a6357}
.tw-fvp-sub{display:block;margin-top:2px;font-size:13px;font-weight:400;color:#5f6f67}
.tw-fvp-tbl thead th:last-child .tw-fvp-sub{color:#3f6f63}
.tw-fvp-tbl tbody th,.tw-fvp-tbl tbody td{border-top:1px solid #eee}
.tw-fvp-tbl tbody th[scope="row"]{padding:16px 28px;text-align:left;font-weight:400;line-height:1.5;text-wrap:pretty}
.tw-fvp-tbl tbody td{padding:16px 0;text-align:center;vertical-align:middle}
.tw-fvp-tbl tbody td:last-child{background:#f3faf6}
.tw-fvp-grp th{padding:14px 28px;border-top-color:#ddd!important;background:linear-gradient(to left,#eaf5ef 172px,#f7f7f7 172px);text-align:left;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#52615a}
.tw-fvp-tbl thead+tbody .tw-fvp-grp th{border-top:0}
.tw-fvp-tbl [hidden]{display:none}
.tw-fvp-act td{padding:20px 14px 22px;border-top:1.5px solid #1c2b26;text-align:center}
.tw-fvp-act td:last-child{background:#f3faf6}
.tw-fvp-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border:1px solid #c9d1cc;border-radius:10px;font-size:14px;font-weight:600;color:#1c2b26;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.tw-fvp-btn:hover{border-color:#1c2b26;color:#1c2b26}
.tw-fvp-btn-ink{padding:0 22px;border:0;background:#141a17;color:#f5f2ea}
.tw-fvp-btn-ink:hover{background:#1f7d6a;color:#f5f2ea}
.tw-fvp-tbl-note{border-top:1px solid #ddd;padding:18px 28px;font-size:14px;line-height:1.55;color:#52615a}
.tw-fvp-tbl-note[hidden]{display:none}

/* What Pro adds */
.tw-fvp-cards{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tw-fvp-card{background:#fff;border:1px solid #ddd;border-radius:16px;padding:clamp(24px,2.4vw,32px) clamp(22px,2.4vw,32px) clamp(22px,2.2vw,30px)}
.tw-fvp-card h3{font-family:var(--tw-display);font-size:clamp(19px,1.5vw,21px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:#1c2b26}
.tw-fvp-card h3+p{margin-top:10px;font-size:15px;line-height:1.6;color:#52615a;text-wrap:pretty}
.tw-fvp-card ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.55;color:#3a4842}
.tw-fvp-card li{position:relative;padding-left:18px;text-wrap:pretty}
.tw-fvp-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#2ca58d}
.tw-fvp-know{margin-top:32px}
.tw-fvp-know ul{margin-top:0;max-width:860px;font-size:16px;gap:14px}
.tw-fvp-know li::before{top:10px}

/* Responsive */
@media (max-width:1099px){
  .tw-fvp-head-row{grid-template-columns:minmax(0,1fr)}
  .tw-fvp-plans{justify-self:start}
}
@media (max-width:859px){.tw-fvp-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:759px){
  .tw-fvp-eds{grid-template-columns:minmax(0,1fr)}
  .tw-fvp-tbl-wrap{overflow:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tw-fvp-tbl{min-width:520px}
  .tw-fvp-col-ed{width:92px}
  .tw-fvp-tbl thead th{position:static}
  .tw-fvp-tbl thead th:first-child,.tw-fvp-tbl tbody th[scope="row"],.tw-fvp-grp th,.tw-fvp-tbl-note{padding-left:18px;padding-right:18px}
  .tw-fvp-grp th{background:linear-gradient(to left,#eaf5ef 92px,#f7f7f7 92px)}
  .tw-fvp-tbl thead th:not(:first-child){padding-left:8px;padding-right:8px;font-size:15px}
  .tw-fvp-act td{padding:16px 6px}
  .tw-fvp-btn{height:38px;padding:0 10px;font-size:13px}
  .tw-fvp-toggle{width:100%}
  .tw-fvp-toggle button{flex:1 1 0;padding:0 10px}
}
@media (max-width:479px){.tw-fvp-plans{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.tw-fvp-toggle button{transition:none}}