/* Pieces only the security and freelancer pages use. The rest comes from site.css, the main page's own styles. */
.top-nav { display: flex; gap: 18px; font-size: 0.93rem; }
.top-nav a { text-decoration: none; color: var(--ink-2); }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--ink); }
.top-nav a[aria-current="page"] { font-weight: 650; }
@media (max-width: 700px) { .top-nav { display: none; } }

.page-hero { padding-block: 40px 72px; display: flex; flex-direction: column; gap: 22px; max-width: 46em; }
.page-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); }
.page-hero .lede { font-size: clamp(1.08rem, 1.8vw, 1.25rem); color: var(--ink-2); max-width: 34em; }
.eyebrow { font-size: 0.85rem; font-weight: 650; color: var(--muted); letter-spacing: 0.01em; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 650; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-2); background: var(--raised); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--used); }
.chip.now::before { background: var(--sage); }
.more { display: inline-flex; gap: 6px; margin-top: 22px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.more:hover { border-color: var(--ink); }

/* The data flow: what Plenty reads, what it keeps, what leaves */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.15fr) 56px minmax(0, 1fr); align-items: stretch; }
.flow-card { border: 1px solid var(--rule); border-radius: 16px; background: var(--raised); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.flow-card.home { background: var(--page); border-color: var(--ink-2); }
.flow-card h3 { display: flex; align-items: center; gap: 8px; }
.flow-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.93rem; color: var(--ink-2); }
.flow-card li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.flow-card li::before { content: "·"; color: var(--muted); font-weight: 700; text-align: center; }
.flow-card li.no { color: var(--muted); }
.flow-card li.no::before { content: "×"; }
.flow-card .mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
.flow-card .foot-note { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.82rem; color: var(--muted); }
.pipe { position: relative; align-self: center; height: 2px; margin-inline: 8px; background: var(--rule); overflow: hidden; }
.pipe::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: var(--sage); }
.pipe.thin::after { background: var(--used); }
@media (prefers-reduced-motion: no-preference) {
  .pipe::after { animation: pipe 2.8s cubic-bezier(.45,0,.25,1) infinite; }
  .pipe.thin::after { animation-duration: 5.6s; }
  @keyframes pipe { to { left: 100%; } }
}
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .pipe { width: 2px; height: 32px; justify-self: center; margin: 0; }
  .pipe::after { width: 100%; height: 30%; left: 0; top: -30%; }
  @media (prefers-reduced-motion: no-preference) { @keyframes pipe { to { left: 0; top: 100%; } } }
}

/* "Never" list */
.nevers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.never { padding: 22px 26px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.never + .never { padding-left: 26px; border-left: 1px solid var(--rule); }
.never p { color: var(--ink-2); font-size: 0.97rem; }
.never .big { font-size: 1.45rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
@media (max-width: 900px) {
  .nevers { grid-template-columns: minmax(0, 1fr); }
  .never, .never + .never { padding: 18px 0; border-left: 0; }
  .never + .never { border-top: 1px solid var(--rule); }
}

/* A Plenty Settings window with real-looking switches (try them; they only change this picture) */
.settings-win { background: var(--raised); max-width: 640px; }
.settings-win .win-bar { border-bottom: 1px solid var(--rule); }
.settings-win .win-bar span { color: var(--muted); font-weight: 600; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.setting:last-child { border-bottom: 0; }
.setting b { font-weight: 650; font-size: 0.97rem; }
.setting p { grid-column: 1; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.setting .state { grid-column: 1; font-size: 0.82rem; color: var(--ink-2); min-height: 1.3em; }
.switch { grid-column: 2; grid-row: 1 / span 3; position: relative; width: 42px; height: 25px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--track); box-shadow: inset 0 0 0 1px var(--rule); transition: background 0.2s ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s ease; }
.switch[aria-checked="true"] { background: var(--sage); box-shadow: none; }
.switch[aria-checked="true"]::after { transform: translateX(17px); }
.settings-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .settings-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* The review: findings as a plain table */
.review td { white-space: normal; vertical-align: top; }
.review td:first-child { color: var(--muted); font-variant-numeric: tabular-nums; width: 3.2em; }
.review td.fixed { color: var(--sage); font-weight: 650; white-space: nowrap; }
.sheet .review th:first-child { width: 3.2em; }

/* Roadmap rows */
.roadmap { display: flex; flex-direction: column; }
.road { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px 36px; padding-block: 22px; border-top: 1px solid var(--rule); }
.road:last-child { border-bottom: 1px solid var(--rule); }
.road .when { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-weight: 650; }
.road p { color: var(--ink-2); font-size: 0.97rem; max-width: 42em; }
@media (max-width: 700px) { .road { grid-template-columns: minmax(0, 1fr); } }

/* Freelancers: features with a small picture each */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fcard { border: 1px solid var(--rule); border-radius: 16px; background: var(--raised); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.fcard .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fcard p { color: var(--ink-2); font-size: 0.96rem; }
.fvis { border-radius: 12px; border: 1px solid var(--rule); background: var(--page); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 0.86rem; }
@media (max-width: 900px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }

.entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.entry:last-child { border-bottom: 0; }
.entry .t { font-variant-numeric: tabular-nums; color: var(--ink-2); overflow: visible; display: flex; flex-direction: column; line-height: 1.25; }
.entry .t s { font-size: 0.72rem; }
.entry .t s { color: var(--muted); text-decoration-thickness: 1px; }
.entry span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src { font-size: 0.72rem; font-weight: 650; padding: 1px 7px; border-radius: 6px; background: var(--sunk); color: var(--ink-2); }
.src.edited { background: transparent; box-shadow: inset 0 0 0 1px var(--sage); color: var(--sage); }

/* Plan split: one bar, 2px gaps between parts, values on their own line below (never over the bar) */
.stack { display: flex; gap: 2px; height: 14px; }
.stack span { display: block; height: 100%; }
.stack span:first-child { border-radius: 4px 0 0 4px; }
.stack span:last-child { border-radius: 0 4px 4px 0; }
.stack-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 0.8rem; color: var(--ink-2); }
.stack-legend div { display: flex; flex-direction: column; gap: 1px; }
.stack-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.stack-legend b { font-variant-numeric: tabular-nums; color: var(--ink); }
.c-a { background: var(--sage); } .c-b { background: var(--ink-2); } .c-c { background: var(--used); }
.pair { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--rule); }
.pair b { color: var(--ink); font-variant-numeric: tabular-nums; }

.paper { align-self: center; width: min(100%, 250px); aspect-ratio: 1 / 1.25; background: #fff; color: #18181a; border-radius: 4px; padding: 16px;
  box-shadow: 0 18px 36px -20px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 6px; font-size: 0.62rem; }
.paper .ph { display: flex; justify-content: space-between; color: #6e6e72; }
.paper .pt { font-size: 0.85rem; font-weight: 700; margin: 6px 0 4px; }
.paper .pl { display: flex; justify-content: space-between; border-bottom: 1px solid #ebebe8; padding-bottom: 4px; font-variant-numeric: tabular-nums; }
.paper .pl.sum { font-weight: 700; border-bottom: 0; margin-top: auto; border-top: 1.5px solid #18181a; padding-top: 5px; }
.quote-line { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; padding: 10px 12px; border-radius: 8px;
  background: var(--raised); border: 1px solid var(--rule); }
.vs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 0.84rem; align-items: center; }
.vs .r { position: relative; height: 8px; border-radius: 4px; background: var(--track); }
.vs .r span { position: absolute; top: 0; bottom: 0; border-radius: 4px; }

/* Charging for AI: pick an option, the sample month updates */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px; background: var(--sunk); }
.seg button { font: inherit; font-size: 0.9rem; padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.charge-note { min-height: 3em; color: var(--muted); font-size: 0.9rem; margin-top: 14px; max-width: 34em; }
.money { font-variant-numeric: tabular-nums; }
tr.ai td { color: var(--ink-2); }
tr.ai td.r { transition: color 0.3s ease; }

.screen { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.45); }
.today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.today-list li { display: flex; flex-direction: column; gap: 3px; }
.today-list b { font-weight: 650; }
.today-list span { color: var(--ink-2); font-size: 0.96rem; }

/* ---------- v2: richer pages ---------- */
.hero2 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-block: 36px 96px; }
.hero2-copy { display: flex; flex-direction: column; gap: 22px; }
.hero2 h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
.hero2 .lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 32em; }
.hero-cta.left { justify-content: flex-start; }
@media (max-width: 960px) { .hero2 { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 64px; } }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); padding-top: 18px; gap: 16px; }
.stats div { display: flex; flex-direction: column; gap: 2px; }
.stats b { font-size: 2rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats div:last-child b { color: var(--sage); }
.stats span { font-size: 0.85rem; color: var(--muted); }
.reveal-up { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal-up.pending { opacity: 0; transform: translateY(22px); }
.eyebrow { text-transform: none; }

/* Security hero: a guest's terminal, Plenty's lock in front */
.scene2 { position: relative; padding-bottom: 130px; isolation: isolate; }
.scene2::before { content: ""; position: absolute; inset: 10% 0 0 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,95,87,0.16), rgba(207,122,82,0.05) 60%, transparent); filter: blur(30px); }
.scene2 .term { width: 100%; }
.scene2 .term-body { min-height: 330px; font-size: 0.82rem; }
.t-err { color: #ff8a80; }
.t-ok { color: #a7c1aa; }
.lockcard { position: absolute; right: -12px; bottom: 0; width: 250px; background: var(--raised); transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0); }
.lockcard .win-bar { border-bottom: 1px solid var(--rule); }
.lockcard .win-bar span { color: var(--muted); font-weight: 600; }
.lock-body { padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.lock-body b { font-size: 0.98rem; }
.finger { width: 48px; height: 48px; color: #ff5f6d; margin-bottom: 4px; }
.finger .scan { fill: #ff5f6d; opacity: 0.55; }
.lockcard.ok .finger { color: var(--sage); }
@media (prefers-reduced-motion: no-preference) {
  .finger .scan { animation: scan 2.2s ease-in-out infinite; }
  @keyframes scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(30px); } }
}
@media (max-width: 560px) { .lockcard { position: relative; right: auto; width: 100%; margin-top: 14px; } .scene2 { padding-bottom: 0; } }

/* The lens: a raw log line next to what Plenty keeps */
.lens { display: grid; grid-template-columns: minmax(0, 1.35fr) 48px minmax(0, 1fr); align-items: center; }
.code-win { background: #161618; border-color: #2a2a2d; color: #d9d6cf; }
.code-win .win-bar { background: #1e1e21; border-bottom: 1px solid #2a2a2d; }
.code-win .win-bar span { color: #8d8a84; }
.code { margin: 0; padding: 16px 18px; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; color: #b9b6af; min-height: 220px; }
.code .k { color: #e3a07f; }
.code .keep { color: #e8e4dc; background: rgba(167,193,170,0.16); border-radius: 3px; box-shadow: 0 0 0 1px rgba(167,193,170,0.35); transition: background 0.6s ease, box-shadow 0.6s ease; }
.code .drop { transition: opacity 0.8s ease, color 0.8s ease; text-decoration-color: rgba(255,138,128,0.7); }
.lens.cut .code .drop { opacity: 0.32; text-decoration-line: line-through; }
.lens:not(.cut) .code .keep { background: transparent; box-shadow: none; color: inherit; }
.lens-arrow { position: relative; height: 2px; margin-inline: 8px; background: var(--rule); overflow: hidden; }
.lens-arrow span { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--sage); }
.lens.cut .lens-arrow span { animation: pipe 1.6s ease-out 1 both; }
@keyframes pipe { to { left: 100%; } }
.kept-win { background: var(--raised); }
.kept-win .win-bar { border-bottom: 1px solid var(--rule); }
.kept-win .win-bar span { color: var(--muted); font-weight: 600; }
.kept { padding: 6px 18px 10px; }
.kept-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem;
  transition: opacity 0.5s ease, transform 0.5s ease; }
.kept-row:last-child { border-bottom: 0; }
.kept-row span { color: var(--muted); }
.kept-row b { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.kept-row b.clip { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink-2); }
.kept-row.gone b { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--used); }
.lens:not(.cut) .kept-row { opacity: 0; transform: translateX(10px); }
.lens.cut .kept-row:nth-child(2) { transition-delay: 0.15s; } .lens.cut .kept-row:nth-child(3) { transition-delay: 0.3s; }
.lens.cut .kept-row:nth-child(4) { transition-delay: 0.45s; } .lens.cut .kept-row:nth-child(5) { transition-delay: 0.7s; } .lens.cut .kept-row:nth-child(6) { transition-delay: 0.85s; }
@media (max-width: 900px) { .lens { grid-template-columns: minmax(0, 1fr); gap: 0; } .lens-arrow { width: 2px; height: 28px; justify-self: center; margin: 0; } }

/* Four locks: colour surfaces, like the main page */
.s-folder::before { background: radial-gradient(closest-side, rgba(52,199,123,0.45), transparent); }
.s-touch::before { background: radial-gradient(closest-side, rgba(255,95,109,0.5), transparent); }
.s-apple::before { background: radial-gradient(closest-side, rgba(59,130,246,0.55), transparent); }
.s-update::before { background: radial-gradient(closest-side at 40% 50%, rgba(124,92,255,0.55), transparent); }
.s-demo.center { align-items: center; }
.perm b { color: #8ee0ae; }
.perm .dim { color: #7d7b76; }
.touch-ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #ff7b86; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(255,123,134,0.5); }
.touch-ring svg { width: 46px; height: 46px; }
.touch-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(255,123,134,0.6); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .touch-ring::after { animation: ripple 2.4s ease-out infinite; }
  @keyframes ripple { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
}
.checks { display: flex; flex-direction: column; gap: 9px; font-size: 0.84rem; color: #d9d6cf; }
.checks > span { display: flex; align-items: center; gap: 9px; transition: opacity 0.4s ease; }
.checks i { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.3); position: relative; transition: background 0.3s ease, box-shadow 0.3s ease; }
.checks > span.on i { background: #34c77b; box-shadow: none; }
.checks > span.on i::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 8px; border: solid #0b1a10; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chip.dark { align-self: flex-start; margin-top: 4px; background: rgba(255,255,255,0.08); color: #d9d6cf; border-color: rgba(255,255,255,0.14); }

/* Network window */
.netwin { background: var(--raised); }
.netwin .win-bar { border-bottom: 1px solid var(--rule); }
.netwin .win-bar span { color: var(--muted); font-weight: 600; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500 !important; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #28c840; box-shadow: none !important; }
@media (prefers-reduced-motion: no-preference) { .live i { animation: livep 2s ease-in-out infinite; } @keyframes livep { 50% { opacity: 0.3; } } }
.net { overflow-x: auto; }
.net-row { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(9rem, 1fr) minmax(12rem, 1.3fr) minmax(9rem, 0.8fr); gap: 16px; align-items: center;
  padding: 13px 18px; border-bottom: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-2); min-width: 760px; position: relative; }
.net-row:last-child { border-bottom: 0; }
.net-row.head { font-size: 0.8rem; color: var(--muted); padding-block: 10px; }
.host { display: flex; align-items: center; gap: 9px; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; color: var(--ink); }
.net-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--used); flex: none; }
.net-row .dot.on { background: var(--sage); }
.net-row .dot.no { background: transparent; box-shadow: inset 0 0 0 1.5px var(--used); }
.net-row.flash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(127,160,135,0.16), transparent); animation: sweep 1.4s ease-out both; pointer-events: none; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pill { justify-self: start; font-size: 0.78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.pill.on { background: transparent; box-shadow: inset 0 0 0 1px var(--sage); color: var(--sage); }
.pill.no { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); }
.net-row.never s { color: var(--muted); text-decoration-color: var(--used); }
.note-line { margin-top: 18px; color: var(--muted); font-size: 0.9rem; max-width: 50em; }

/* Switch lab */
.switch-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.switch-lab .settings-win { max-width: none; }
.payload .code { min-height: 100%; }
.payload { display: flex; flex-direction: column; }
.payload .code .c { color: #7d7b76; }
.payload .code .s { color: #a7c1aa; }
.payload .code .n { color: #e3a07f; }
.payload .code .add { color: #8ee0ae; }
@media (max-width: 900px) { .switch-lab { grid-template-columns: minmax(0, 1fr); } }
.setting { grid-template-columns: minmax(0, 1fr) auto; }
.setting .switch { grid-row: 1 / span 2; }

/* Review */
.review-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 28px; }
.review-head .intro { margin-bottom: 0; }
.meter { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--page); }
.meter-top { display: flex; align-items: baseline; gap: 8px; }
.meter-top b { font-size: 2.2rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1; }
.meter-top span { color: var(--muted); }
.meter-bar { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; display: flex; gap: 2px; }
.meter-bar span { display: block; height: 100%; width: 0; background: var(--sage); border-radius: 5px; transition: width 1.8s cubic-bezier(.25,.7,.25,1); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); }
.meter-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sev { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sev.med { background: var(--ink-2); } .sev.low { background: var(--used); } .sev.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
.sevtag { font-size: 0.75rem; font-weight: 650; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.sevtag.med { background: var(--ink-2); color: var(--page); }
.sevtag.low { background: var(--sunk); color: var(--ink-2); }
.review td:first-child { width: 7em; color: inherit; }
.fine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.fine-label { font-size: 0.85rem; font-weight: 650; color: var(--muted); margin-right: 6px; }
.fine code { font-size: 0.8em; }
@media (max-width: 900px) { .review-head { grid-template-columns: minmax(0, 1fr); } }

/* Encrypted sync */
.sync-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sync { display: flex; flex-direction: column; align-items: stretch; }
.sync-node { border: 1px solid var(--rule); border-radius: 14px; background: var(--raised); padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.sync-node.server { background: var(--page); border-style: dashed; }
.sync-dev { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.sync-node code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; color: var(--ink); min-height: 1.5em; }
.sync-node.server code { color: var(--muted); letter-spacing: 0.04em; }
.sync-line { position: relative; width: 2px; height: 34px; margin-left: 30px; background: var(--rule); overflow: hidden; }
.sync-line span { position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--sage); }
@media (prefers-reduced-motion: no-preference) { .sync-line span { animation: drop 2.4s ease-in infinite; } .sync-line + .sync-node + .sync-line span { animation-delay: 1.2s; } @keyframes drop { to { top: 100%; } } }
@media (max-width: 900px) { .sync-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Freelancer hero: a day filling in */
.dayscene { background: var(--raised); position: relative; }
.dayscene::after { content: ""; position: absolute; inset: 20% -10% -14% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127,160,135,0.28), transparent); filter: blur(30px); }
.dayscene .win-bar { border-bottom: 1px solid var(--rule); }
.dayscene .win-bar span { color: var(--muted); font-weight: 600; }
.dayscene .win-bar .small { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.day-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.day-feed { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; padding: 9px 12px; border-radius: 8px;
  background: #161618; color: #d9d6cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 2.4em; }
.day-feed .dim { color: #a7c1aa; }
.day-track { position: relative; height: 64px; border-radius: 10px; background: var(--page); border: 1px solid var(--rule); overflow: hidden;
  background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 11.111%); }
.day-block { position: absolute; top: 12px; bottom: 12px; border-radius: 5px; width: 0; transition: width 0.25s linear; }
.day-break { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.day-now { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--ink); left: 0; z-index: 2; }
.day-axis { display: grid; grid-template-columns: repeat(10, 1fr); font-size: 0.7rem; color: var(--muted); margin-top: -6px; }
.day-axis span { transform: translateX(-50%); }
.day-axis span:first-child { transform: none; }
.day-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.day-tot div { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; align-items: center; font-size: 0.82rem; color: var(--ink-2); }
.day-tot i { width: 10px; height: 10px; border-radius: 3px; }
.day-tot b { grid-column: 2; font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* How hours count */
.how3 .step-vis { justify-content: center; }
.mini-tl { position: relative; height: 70px; margin: 0 18px; }
.mini-tl .span-a { position: absolute; top: 26px; height: 18px; border-radius: 4px; background: var(--sage); opacity: 0.85; }
.mini-tl .req { position: absolute; top: 18px; width: 2px; height: 34px; background: var(--ink); border-radius: 1px; }
.mini-tl .gap { position: absolute; top: 50px; font-size: 0.7rem; color: var(--muted); text-align: center; border-top: 1px dashed var(--used); padding-top: 3px; }
.tag { font-size: 0.72rem; padding: 1px 7px; border-radius: 5px; color: #fff; font-weight: 650; }
.tag.c-c { color: var(--ink); }
.budget { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.budget-note { font-size: 0.82rem; color: var(--muted); }
.shotwrap { margin-top: 40px; }

/* Pro features as alternating rows */
.feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding-block: 48px; border-top: 1px solid var(--rule); }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.feature-copy h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.feature-copy p { color: var(--ink-2); }
.feature-sub { font-size: 0.92rem; color: var(--muted) !important; }
.feature-n { font-size: 0.8rem; font-weight: 700; color: var(--sage); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; } .feature.flip .feature-copy { order: 0; } }

.tswin, .splitwin, .quotewin { background: var(--raised); }
.tswin .win-bar, .splitwin .win-bar, .quotewin .win-bar { border-bottom: 1px solid var(--rule); }
.tswin .win-bar span, .splitwin .win-bar span, .quotewin .win-bar span { color: var(--muted); font-weight: 600; }
.tswin .win-bar .small, .splitwin .win-bar .small { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.ts-body { padding: 8px 18px 14px; }
.ts-body .entry { padding: 12px 0; font-size: 0.92rem; transition: background 0.4s ease; }
.ts-body .entry.hl { background: linear-gradient(90deg, transparent, rgba(127,160,135,0.12), transparent); }
.ts-new { overflow: hidden; max-height: 0; opacity: 0; padding-block: 0 !important; border-bottom-width: 0 !important; transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease; }
.ts-new.in { max-height: 60px; opacity: 1; padding-block: 12px !important; border-bottom-width: 1px !important; }
.ts-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; }
.fake-btn { font-size: 0.85rem; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--rule); color: var(--ink); white-space: nowrap; transition: all 0.3s ease; }
.fake-btn.press { transform: scale(0.96); }
.fake-btn.billed { background: var(--sage); border-color: var(--sage); color: var(--page); }
.tswin.locked .entry .t { color: var(--muted); }
.split-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.stack.big { height: 22px; gap: 3px; }
.stack.big span { transition: width 0.9s cubic-bezier(.25,.7,.25,1); }
.stack.big span:first-child { border-radius: 6px 0 0 6px; } .stack.big span:last-child { border-radius: 0 6px 6px 0; }
.stack-legend small { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.stack-legend b { font-size: 1.15rem; }
.feature .seg { margin-top: 6px; }

.report-vis { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.paper.big { width: min(100%, 360px); aspect-ratio: auto; padding: 24px; font-size: 0.74rem; gap: 8px; }
.paper.big .pt { font-size: 1rem; }
.paper .pd { color: #6e6e72; font-size: 0.68rem; margin-top: -4px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.4s ease; }
.report-vis.desc .paper .pd { max-height: 2em; opacity: 1; }
.exports { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.small-btn { padding: 7px 13px; font-size: 0.85rem; }
.lines-out { width: min(100%, 420px); min-height: 0; border-radius: 10px; background: #161618; color: #d9d6cf; padding: 12px 14px; font-size: 0.76rem; display: none; }
.lines-out.show { display: block; }
.inline-switch { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.95rem; }
.inline-switch .switch { grid-row: auto; flex: none; }

.quote-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.q-input { font-size: 1rem; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--page); min-height: 3em; }
.q-result { display: flex; flex-direction: column; gap: 12px; transition: opacity 0.5s ease; }
.q-result.wait-q { opacity: 0.15; }
.q-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.q-big b { font-size: 2rem; font-weight: 750; letter-spacing: -0.03em; }
.q-big span { color: var(--muted); font-size: 0.9rem; }
.vs { row-gap: 8px; }
.vs .r { height: 10px; }
.vs .r span { transition: left 0.8s ease, width 1.4s cubic-bezier(.25,.7,.25,1); }
.vs .scale { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--muted); }

.controls { display: flex; flex-direction: column; gap: 18px; }
.control { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.control-label { font-size: 0.88rem; font-weight: 650; color: var(--ink-2); }
.control-label b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 6px; }
input[type="range"] { width: min(100%, 340px); accent-color: var(--sage); }
tbody#c-rows td, tfoot td { font-variant-numeric: tabular-nums; }
tfoot tr.ai td { border-top: 1px solid var(--rule); }
.cta-band { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: center; }
.cta-band p { color: var(--ink-2); margin-top: 12px; max-width: 38em; }
@media (max-width: 800px) { .cta-band { grid-template-columns: minmax(0, 1fr); } }
.tag { color: var(--page); }
.tag.c-c { color: var(--ink); }
.road-title { font-size: 0.85rem; color: var(--muted); font-weight: 650; margin-bottom: 8px; }
.intro .chip, .feature-copy .chip { align-self: flex-start; }
.entry .t { display: block !important; white-space: nowrap; }
.entry .t s { display: block; }
.day-axis { position: relative; display: block; height: 1.2em; }
.day-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.day-axis span:first-child { transform: none; }
.day-axis span:last-child { transform: translateX(-100%); }
.pair b { white-space: nowrap; }