/* =============================================================
   Client Forms & Portal — product theme.

   Loads on top of /css/house.css (the house system), the way
   time-tracking.css does. Steel blue from the power-up's own mark
   (#2F6690 → #0E1E2A) carries the action; the mark's ink carries the
   dark bands.
   ============================================================= */
:root {
  --primary:       #2F6690;
  --primary-2:     #3D85B8;
  --primary-ink:   #1D4868;
  --grad-brand:    linear-gradient(135deg, #1D4868 0%, #2F6690 50%, #3D85B8 100%);
  --shadow-glow:   0 18px 44px -16px rgba(47, 102, 144, 0.42);
  --border-active: #A9C4D9;

  --page:      #F6F8FA;
  --surface-2: #E9F0F6;
  --border:    #D9E2EA;

  --ok:     #16A34A;

  --band-1: #13212D;
  --band-2: #0F1B25;
  --band-3: #0B141C;
  --band-accent: #8CC3EA;
  --band-muted:  #8FA2B3;

}

body::before { background: linear-gradient(180deg, #E2EAF1 0%, #EDF2F6 42%, var(--page) 100%); }
.btn-primary:hover { box-shadow: 0 24px 50px -14px rgba(47, 102, 144, 0.48); }
.flow-points li svg { background: rgba(47, 102, 144, 0.12); }

/* ---- dark band, same surface as the closing CTA ---- */
.showcase-band {
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(61, 133, 184, 0.28), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(140, 195, 234, 0.12), transparent 55%),
    linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%);
}
.showcase-band .kicker { color: var(--band-accent); }
.showcase-band .section-sub { color: var(--band-muted); }
.showcase-band .flow-n { color: var(--band-muted); }
.showcase-band .flow-item.is-active .flow-n { color: var(--band-accent); }
.showcase-band .flow-step:focus-visible { outline-color: var(--band-accent); }
.showcase-band .flow-item.is-active .flow-step { border-color: rgba(140, 195, 234, 0.5); }
.showcase-band .flow-ic { color: var(--band-muted); }
.showcase-band .flow-label { color: #D3DCE5; }
.showcase-band .flow-copy p { color: var(--band-muted); }
.showcase-band .flow-copy em { color: #B5D8F2; }
.showcase-band .flow-points li { color: #DCE3EA; }
.showcase-band .flow-points li svg { background: rgba(140, 195, 234, 0.2); color: #A7D1F0; }
.flow-arrow { color: var(--band-muted); }
.flow-arrow:hover { background: rgba(140, 195, 234, 0.16); border-color: rgba(140, 195, 234, 0.45); }
.flow-arrow:focus-visible { outline: 2px solid var(--band-accent); }
@media (min-width: 768px) {
  .showcase-band .flow-label { color: var(--band-muted); }
  .showcase-band .flow-item.is-active .flow-step { border-top-color: var(--band-accent); }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-n { font-size: 10.5px; }
}
.flow-n { font-variant-numeric: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 767px) {
  .flow-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: center; }
  .flow-ic { grid-row: 1 / 3; }
  .flow-n { grid-column: 2; grid-row: 1; margin-left: 0; }
  .flow-label { grid-column: 2; grid-row: 2; }
}

.pricing { background: linear-gradient(180deg, #EDF1F4 0%, #E2E8EE 100%); }
.final-cta { background: linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%); }
.final-cta::before {
  background:
    radial-gradient(ellipse 70% 110% at 50% -12%, rgba(61, 133, 184, 0.28), transparent 60%),
    radial-gradient(ellipse 45% 90% at 92% 105%, rgba(140, 195, 234, 0.12), transparent 55%);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- hero: copy left, the composition right (as Time Tracking) ---- */
.hero-copy { align-items: flex-start; text-align: left; }
.hero-cta, .hero-trust { justify-content: flex-start; }
@media (min-width: 1000px) {
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 40px; }
  .hero h1 { font-size: 46px; max-width: 100%; }
  .hero-sub { max-width: 46ch; }
  .hero-visual { max-width: none; width: 100%; margin-top: 0; }
}
/* From 1100px the copy takes a fixed column and the composition everything
   else, the way Time Tracking gives its drawing the room: the three numbered
   notes in it are small type, and every pixel goes to them. */
@media (min-width: 1100px) {
  .hero-inner { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 36px; }
  .hero h1 { font-size: 44px; }
}
@media (min-width: 1280px) {
  .hero-inner { grid-template-columns: minmax(0, 490px) minmax(0, 1fr); }
  .hero h1 { font-size: 46px; }
}

/* ---- the stage clips ----
   Zooms baked in, so each is shown whole at its own shape (1852 × 1080,
   1968 × 1080 …): any crop to the system's 1.93:1 would cut the camera's
   moves. The video's width and height set the frame. The halo takes the steel blue. */
.shot { aspect-ratio: auto; box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.8), 0 0 110px -26px rgba(61, 133, 184, 0.35); }
.shot video { height: auto; }

/* =============================================================
   What the client sees — and what stays on the board.
   ============================================================= */
/* A soft blue band of its own, between the dark showcase and the toolkit
   (which sits on the page ground), with the toolkit's gutters. The two windows
   (one drawing), then how it goes, numbered top to bottom; wide, side by side. */
.showcase-band { margin-bottom: 0; }   /* the band meets it edge to edge, no strip of page between */
.seen { padding: 64px 20px; background: linear-gradient(180deg, #E4EDF5 0%, #EEF3F8 100%); border-bottom: 1px solid var(--border); }
.seen .section-head { max-width: 620px; margin: 0 0 32px; text-align: left; }

.seen-body { display: grid; gap: 36px; }
.seen-pic img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 34px rgba(15, 40, 90, 0.18)); }
/* Phone: the whole drawing, uncropped, runs edge to edge past the gutters so it's as large as the screen allows. */
@media (max-width: 639px) {
  .seen-pic { margin: 0 -12px; }
}

.seen-steps { list-style: none; counter-reset: seen; display: grid; gap: 24px; }
.seen-steps li { position: relative; counter-increment: seen; padding-left: 48px; }
.seen-steps li::before { content: counter(seen); position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #FFFFFF; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; }
.seen-steps li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 34px; bottom: -22px; border-left: 2px dashed #8FB3CF; }
.seen-steps h3 { margin-bottom: 4px; font-size: 16px; line-height: 1.3; }
.seen-steps p { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.seen-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 32px; padding-left: 48px; }
.seen-cta small { font-size: 13px; color: var(--muted); }

@media (min-width: 768px) { .seen { padding: 92px 40px; } }

@media (min-width: 1000px) {
  .seen .section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
  .seen-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
  .seen-steps { gap: 30px; }
  .seen-steps li:not(:last-child)::after { bottom: -28px; }
}

/* ---- toolkit, pricing: Time Tracking's components ---- */
.tk-grid { display: grid; grid-template-columns: 1fr; gap: 2px; list-style: none; }
.tk-row { cursor: default; }
.tk-row:hover { background: none; }
@media (min-width: 620px) { .tk-grid { grid-template-columns: 1fr 1fr; gap: 2px 16px; } }
@media (min-width: 1100px) { .tk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; } }

.tt-trial { max-width: 860px; margin: 0 auto 40px; padding-bottom: 30px; border-bottom: 1px solid #D3D9E0; display: grid; gap: 14px; }
.tt-trial-title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.tt-span { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "s1 s2" "n1 n1" "n2 n2"; column-gap: 4px; row-gap: 10px; }
.tt-seg { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-width: 0; }
.tt-seg small { display: none; font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; opacity: 0.8; }
.tt-seg span { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; }
.tt-seg.is-trial { grid-area: s1; background: var(--grad-brand); color: #fff; border-radius: var(--r-pill) 6px 6px var(--r-pill); }
.tt-seg.is-after { grid-area: s2; color: var(--ink); border: 1px solid #C9D1DA; border-radius: 6px var(--r-pill) var(--r-pill) 6px; background: repeating-linear-gradient(135deg, #FFFFFF 0 7px, #F1F4F6 7px 14px); }
.tt-seg.is-after small { color: #475467; opacity: 1; }
.tt-note { font-size: 13.5px; line-height: 1.5; color: var(--body); }
.tt-note.is-trial { grid-area: n1; }
.tt-note.is-after { grid-area: n2; }
.tt-note-label { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.tt-keeps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tt-keeps li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); }
.tt-keeps svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--ok); }
.tt-keeps .no { color: #475467; font-weight: 600; }
.tt-keeps .no svg { color: #475467; }
@media (min-width: 560px) {
  .tt-span { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "s1 s2" "n1 n2"; }
  .tt-seg { min-height: 42px; padding: 0 14px; white-space: nowrap; }
  .tt-seg small { display: inline; }
  .tt-note.is-after { padding-left: 10px; }
  .tt-note-label { display: none; }
}
.tt-tiles { display: grid; gap: 18px; max-width: 860px; margin: 0 auto; }
/* The two tiles stand as tall as each other (grid rows stretch); the spare
   height goes to the copy row, so both buttons sit on one line. */
.tt-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
.tt-tile.is-best { border-color: var(--primary-2); box-shadow: var(--shadow-md); }
.tt-save { position: absolute; top: -13px; left: 28px; background: var(--grad-brand); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 5px 12px; border-radius: var(--r-pill); }
.tt-plan { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tt-amount { font-family: 'Space Grotesk', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.tt-amount span { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tt-tile p { font-size: 14.5px; color: var(--body); }
.tt-tile p b { color: var(--primary-ink); }
.tt-tile .btn { width: 100%; }
.tt-includes { max-width: 860px; margin: 24px auto 0; text-align: center; }
.tt-includes summary { list-style: none; cursor: pointer; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; padding: 6px 4px; border-radius: 6px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--primary); }
.tt-includes summary::-webkit-details-marker { display: none; }
.tt-includes summary:hover { color: var(--primary-ink); }
.tt-includes summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tt-includes summary > span { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--body); }
.tt-includes summary svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.tt-includes details[open] summary svg { transform: rotate(180deg); }
.tt-includes ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 20px; max-width: 660px; margin: 12px auto 0; }
.tt-includes li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); }
.tt-includes li svg { flex-shrink: 0; width: 13px; height: 13px; color: var(--primary); }
@media (min-width: 768px) { .tt-tiles { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .tt-includes summary svg { transition: none; } }