/* /start-small — standalone modules page. Builds on landing.css tokens. */

.tp-shell .tp-ss-h1 { font-size: clamp(38px, 4.4vw, 64px); }
.tp-ss-row { margin-top: 96px; }
.tp-ss-h3 { font-size: 22px; letter-spacing: -0.01em; font-weight: 600; margin: 0 0 14px; }
.tp-ss-p { color: var(--ink-3); margin: 0 0 14px; }
.tp-ss-fine { color: var(--ink-3); font-size: 14.5px; margin: 14px 0 0; }

/* Hero stack */
.tp-ss-stack { display: grid; gap: 14px; align-content: center; }
.tp-ss-stack-k { display: block; font: 11px var(--f-mono); letter-spacing: .08em; color: var(--ink-4); margin-bottom: 8px; }
.tp-ss-stack-keep { background: var(--paper-2); border: 1px solid rgba(15,23,42,.1); border-radius: var(--radius-lg); padding: 20px 22px; }
.tp-ss-stack-keep b { font-size: 19px; font-weight: 600; }
.tp-ss-stack-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tp-ss-stack-items i { font-style: normal; font-size: 13px; color: var(--ink-3); background: var(--white); border-radius: 999px; padding: 4px 10px; border: 1px solid rgba(15,23,42,.08); }
.tp-ss-stack-plus { justify-self: center; font-size: 28px; font-weight: 600; color: var(--accent); line-height: 1; }
.tp-ss-stack-add { background: var(--white); border: 2px solid var(--accent); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-lg); }
.tp-ss-stack-add .tp-ss-stack-k { color: #047857; }
.tp-ss-stack-mods { display: grid; gap: 8px; }
.tp-ss-stack-mods a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #ECFDF5; color: var(--ink); text-decoration: none; }
.tp-ss-stack-mods a:hover { background: #D1FAE5; }
.tp-ss-stack-mods b { font-weight: 600; }
.tp-ss-stack-mods small { font: 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #047857; }
.tp-ss-stack-later { font: 13px var(--f-mono); color: var(--ink-3); padding-left: 8px; }
.tp-ss-stack-later b { font-family: var(--f-sans); font-weight: 500; color: var(--ink); border: 1px dashed rgba(15,23,42,.25); border-radius: 8px; padding: 3px 8px; }

/* Website import */
.tp-ss-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tp-ss-steps li { background: var(--paper); border-radius: var(--radius); padding: 20px; display: grid; gap: 6px; align-content: start; }
.tp-ss-steps b { font-size: 17px; font-weight: 600; }
.tp-ss-steps span:not(.tp-ss-step-n) { color: var(--ink-3); font-size: 15px; }
.tp-ss-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 600 13px var(--f-mono); margin-bottom: 6px; }

.tp-ss-import { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin: 48px 0 64px; }
.tp-ss-import-arrow { font-size: 32px; color: var(--accent); }
.tp-ss-browser { background: var(--white); border: 1px solid rgba(15,23,42,.1); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); }
.tp-ss-browser.is-after { box-shadow: var(--shadow-lg); border-color: rgba(5,150,105,.4); }
.tp-ss-oldsite, .tp-ss-newsite { padding: 16px; display: grid; gap: 12px; min-height: 210px; }
.tp-ss-oldsite { background: #F3E9DC; filter: saturate(.7); }
.tp-ss-oldsite-nav, .tp-ss-newsite-nav { display: flex; align-items: center; gap: 8px; }
.tp-ss-oldsite-nav i { width: 36px; height: 6px; background: rgba(31,58,95,.35); border-radius: 3px; }
.tp-ss-logo-dot { width: 20px; height: 20px; border-radius: 50%; background: #E4572E; flex: none; }
.tp-ss-oldsite-hero { background: #1F3A5F; border-radius: 6px; height: 74px; padding: 14px; display: grid; gap: 8px; align-content: center; }
.tp-ss-oldsite-hero span { height: 8px; width: 60%; background: rgba(255,255,255,.6); border-radius: 4px; }
.tp-ss-oldsite-hero span + span { width: 35%; background: #E4572E; }
.tp-ss-oldsite-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-ss-oldsite-cols i { height: 40px; background: rgba(31,58,95,.12); border-radius: 4px; }
.tp-ss-palette { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid rgba(15,23,42,.08); }
.tp-ss-palette span { width: 16px; height: 16px; border-radius: 4px; }
.tp-ss-palette em { font: normal 11.5px var(--f-mono); color: var(--ink-3); margin-left: 6px; }
.tp-ss-newsite { background: #FBF6EE; }
.tp-ss-newsite-nav b { color: #1F3A5F; font-weight: 700; }
.tp-ss-newsite-nav em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #047857; background: #ECFDF5; padding: 3px 8px; border-radius: 999px; }
.tp-ss-newsite-hero { background: #1F3A5F; border-radius: 10px; padding: 18px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.tp-ss-newsite-hero b { font-size: 18px; }
.tp-ss-newsite-hero span { background: #E4572E; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tp-ss-newsite-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-ss-newsite-blocks span { background: var(--white); border: 1px solid rgba(31,58,95,.15); border-radius: 8px; padding: 10px; font-size: 12.5px; color: #1F3A5F; font-weight: 500; }

.tp-ss-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.tp-ss-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tp-ss-list li { color: var(--ink-3); }
.tp-ss-list b { display: block; color: var(--ink); font-weight: 600; }
.tp-ss-chips span { background: var(--paper); }

/* Link page phone */
.tp-ss-vis-center { display: flex; justify-content: center; }
.tp-ss-phone { width: 300px; padding: 10px; border-radius: 40px; background: var(--ink); box-shadow: var(--shadow-lg); }
.tp-ss-lp { background: #FBF6EE; border-radius: 31px; padding: 28px 18px 22px; display: grid; gap: 9px; justify-items: center; text-align: center; }
.tp-ss-lp-logo { width: 56px; height: 56px; border-radius: 50%; background: #1F3A5F; color: #fff; display: grid; place-items: center; font-weight: 700; }
.tp-ss-lp-name { font-size: 18px; color: #1F3A5F; }
.tp-ss-lp-tag { font-size: 12.5px; color: var(--ink-3); margin-top: -6px; }
.tp-ss-open { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #047857; background: #ECFDF5; padding: 4px 10px; border-radius: 999px; }
.tp-ss-open i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tp-ss-lp-alert { width: 100%; background: #FEF3C7; color: #92400E; font-size: 12px; padding: 7px 10px; border-radius: 10px; }
.tp-ss-lp-set { width: 100%; background: var(--white); border: 1px solid rgba(31,58,95,.12); border-radius: 14px; padding: 10px 12px; text-align: left; display: grid; gap: 5px; font-size: 12.5px; }
.tp-ss-lp-set b { display: inline-block; width: 34px; color: #1F3A5F; }
.tp-ss-lp-k { font: 10px var(--f-mono); letter-spacing: .08em; color: #047857; }
.tp-ss-lp-btn { width: 100%; padding: 11px; border-radius: 12px; background: var(--white); border: 1px solid rgba(31,58,95,.18); font-size: 13.5px; font-weight: 600; color: #1F3A5F; }
.tp-ss-lp-btn.is-primary { background: #E4572E; border-color: #E4572E; color: #fff; }
.tp-ss-lp-sub { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 12px; background: var(--white); border-radius: 12px; padding: 5px 5px 5px 12px; border: 1px solid rgba(31,58,95,.12); color: var(--ink-4); }
.tp-ss-lp-sub b { background: #1F3A5F; color: #fff; padding: 6px 10px; border-radius: 9px; }

.tp-ss-also, .tp-ss-more { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(15,23,42,.1); color: var(--ink-3); font-size: 15px; }
.tp-ss-also b, .tp-ss-more b { color: var(--ink); font-weight: 600; }
.tp-ss-also-k { font: 11px var(--f-mono); letter-spacing: .08em; color: var(--ink-4); }
.tp-ss-more { margin-top: 40px; }

/* Hours */
.tp-ss-dark { background: var(--ink); color: #fff; }
.tp-ss-dark .tp-h2 { color: #fff; }
.tp-ss-dark .tp-accent { color: #34D399; }
.tp-ss-hours { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.tp-ss-hours-sub { color: #CBD5E1; font-size: 18px; max-width: 54ch; }
.tp-ss-hours-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; color: #CBD5E1; }
.tp-ss-hours-list li { padding-left: 22px; position: relative; }
.tp-ss-hours-list li::before { content: '✓'; position: absolute; left: 0; color: #34D399; font-weight: 700; }
.tp-ss-hours-list b { color: #fff; font-weight: 600; }
.tp-ss-hours-vis { display: grid; gap: 14px; }
.tp-ss-closure { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 4px; box-shadow: 0 0 0 4px rgba(52,211,153,.25); }
.tp-ss-closure b { font-size: 20px; }
.tp-ss-closure span { color: var(--ink-3); font-size: 14.5px; }
.tp-ss-closure-k { font: 11px var(--f-mono) !important; letter-spacing: .08em; color: #047857 !important; }
.tp-ss-closure-scope { justify-self: start; margin-top: 6px; background: var(--paper-2); padding: 3px 10px; border-radius: 999px; font-size: 12.5px !important; }
.tp-ss-fan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; padding-top: 14px; }
.tp-ss-fan::before { content: ''; position: absolute; top: 0; left: 50%; height: 14px; border-left: 2px dashed rgba(52,211,153,.6); }
.tp-ss-fan div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; display: grid; gap: 3px; }
.tp-ss-fan-k { font: 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.tp-ss-fan b { font-weight: 500; font-size: 14.5px; }

/* Operations */
.tp-ss-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tp-ss-op { background: var(--white); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 22px; align-content: start; box-shadow: var(--shadow-sm); }
.tp-ss-op.is-wide { grid-column: 1 / -1; grid-template-columns: 1fr 1.4fr; align-items: center; }
.tp-ss-op h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; margin: 10px 0 8px; }
.tp-ss-op p { color: var(--ink-3); margin: 0; }
.tp-ss-op .tp-shot { box-shadow: var(--shadow-md); }
.tp-ss-check { border: 1px solid rgba(15,23,42,.1); border-radius: 12px; overflow: hidden; font-size: 14.5px; }
.tp-ss-check > div { padding: 10px 14px 10px 40px; border-top: 1px solid rgba(15,23,42,.06); position: relative; }
.tp-ss-check > div::before { content: ''; position: absolute; left: 14px; top: 12px; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ink-4); }
.tp-ss-check > .is-done { color: var(--ink-4); text-decoration: line-through; }
.tp-ss-check > .is-done::before { background: var(--accent); border-color: var(--accent); }
.tp-ss-check .tp-ss-check-head { display: flex; justify-content: space-between; background: var(--paper); border-top: 0; padding-left: 14px; }
.tp-ss-check .tp-ss-check-head::before { display: none; }
.tp-ss-check-head span { font: 12px var(--f-mono); color: #047857; }

/* Climbing */
.tp-ss-climb { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.tp-ss-climb-phone { position: sticky; top: 96px; }
.tp-ss-climb-phone .tp-phone { width: 270px; }
.tp-ss-micro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tp-ss-micro article { background: var(--paper); border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; align-content: start; }
.tp-ss-micro b { font-weight: 600; font-size: 15.5px; }
.tp-ss-micro span:not([class]) { color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.tp-ss-mock { background: var(--white); border: 1px solid rgba(15,23,42,.08); border-radius: 10px; height: 64px; padding: 0 12px; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; overflow: hidden; }
.tp-ss-mock-t { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.tp-ss-mock-t u { color: #047857; }
.tp-ss-send { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.tp-ss-pill { font-size: 12px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(15,23,42,.15); color: var(--ink-3); white-space: nowrap; }
.tp-ss-pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tp-ss-thumb { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(15,23,42,.12); font-size: 14px; }
.tp-ss-thumb.is-on { background: #ECFDF5; border-color: var(--accent); }
.tp-ss-wall { position: relative; width: 100%; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #CBD5E1, #94A3B8); }
.tp-ss-wall i { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: var(--accent); transform: translate(-50%, -50%); }
.tp-ss-wall i.is-top { background: #F59E0B; }
.tp-ss-badge { font: 600 10.5px var(--f-mono); letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; background: #ECFDF5; color: #047857; }
.tp-ss-badge.is-down { background: #FEF3C7; color: #92400E; }
.tp-ss-badge.is-fa { background: var(--ink); color: #FCD34D; }
.tp-ss-play { width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; }
.tp-ss-pyr { flex-direction: column; justify-content: center; gap: 3px; }
.tp-ss-pyr i { display: block; height: 8px; border-radius: 3px; background: var(--accent); opacity: .85; }
.tp-ss-score { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; }
.tp-ss-score div { background: var(--paper); border-radius: 12px; padding: 12px; display: grid; }
.tp-ss-score b { font-size: 22px; font-weight: 600; }
.tp-ss-score span { font: 11px var(--f-mono); color: var(--ink-3); }

/* Better together */
.tp-ss-loops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tp-ss-loops article { background: var(--white); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.tp-ss-loops h3 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.tp-ss-loops ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.tp-ss-loops li { position: relative; padding: 0 0 16px 22px; color: var(--ink-2); font-size: 15px; }
.tp-ss-loops li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tp-ss-loops li:not(:last-child)::after { content: ''; position: absolute; left: 7.5px; top: 17px; bottom: 2px; border-left: 1px solid rgba(5,150,105,.35); }
.tp-ss-loops em { display: block; font: normal 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #047857; }

/* First week */
.tp-ss-week { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tp-ss-week li { border-top: 3px solid var(--accent); background: var(--paper); border-radius: 0 0 var(--radius) var(--radius); padding: 16px; color: var(--ink-3); font-size: 14.5px; }
.tp-ss-week span { display: block; font: 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #047857; }
.tp-ss-week b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; margin: 4px 0 6px; }
.tp-ss-later { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; border: 1px dashed rgba(15,23,42,.25); border-radius: var(--radius-lg); padding: 28px; }
.tp-ss-later h3 { font-size: 22px; font-weight: 600; margin: 10px 0 6px; }
.tp-ss-later p { color: var(--ink-3); margin: 0; max-width: 70ch; }

@media (max-width: 980px) {
  .tp-ss-steps { grid-template-columns: 1fr 1fr; }
  .tp-ss-import, .tp-ss-cols, .tp-ss-hours, .tp-ss-ops, .tp-ss-op.is-wide, .tp-ss-climb, .tp-ss-loops { grid-template-columns: 1fr; }
  .tp-ss-import-arrow { transform: rotate(90deg); justify-self: center; }
  .tp-ss-climb-phone { position: static; justify-self: center; }
  .tp-ss-micro { grid-template-columns: 1fr 1fr; }
  .tp-ss-week { grid-template-columns: 1fr; }
  .tp-ss-later { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .tp-ss-steps, .tp-ss-micro, .tp-ss-fan { grid-template-columns: 1fr; }
  .tp-ss-score { grid-template-columns: 1fr 1fr; }
  .tp-ss-row { margin-top: 64px; }
  .tp-ss-phone { width: 270px; }
}