/* Generated by tools/build_pages.py. Edit PAGE_CSS there. */

/* ---------------- hero ---------------- */
.p-hero { padding: 84px 0 104px; position: relative; overflow: hidden; }
.p-hero .wrap { position: relative; z-index: 2; }
.p-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--smoke); margin-bottom: 24px; transition: color .15s ease; }
.p-back:hover { color: var(--pine-deep); }
.p-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.03; letter-spacing: -.036em; }
.p-hero h1 .dot { color: var(--pine); }
.line-mask { display: block; overflow: hidden; }
.line-mask.done { overflow: visible; }
.line-mask > span { display: block; opacity: 0; transform: translateY(105%); animation: lineUp .95s var(--e-out) forwards; }
.line-mask:nth-of-type(2) > span { animation-delay: .1s; }
@keyframes lineUp { to { opacity: 1; transform: none; } }
.p-hero .lede { margin-top: 22px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--t-ink-2); max-width: 52ch; opacity: 0; animation: prise .9s var(--e-out) .3s forwards; }
.p-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; animation: prise .9s var(--e-out) .42s forwards; }
@keyframes prise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.p-rep { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; opacity: 0; animation: prise .9s var(--e-out) .55s forwards; }
.p-rep .l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--smoke); }
.p-rep .v { font-size: 15px; font-weight: 600; letter-spacing: -.012em; }

/* ---------------- the window ---------------- */
.win-wrap { margin-top: 44px; opacity: 0; animation: prise 1s var(--e-out) .68s forwards; }
.win { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 1px rgba(0,0,0,.02), 0 60px 100px -46px rgba(26,23,20,.48); }
.win-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); background: var(--paper-2); }
.win-bar .u { font-family: var(--mono); font-size: 10.5px; color: var(--smoke); background: var(--cream); padding: 4px 12px; border-radius: 6px; }
.win-bar .w { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--t-ink-2); letter-spacing: -.01em; }
.win-bar .w i { width: 9px; height: 9px; border-radius: 3px; background: var(--pine); }
.win-head { display: flex; align-items: center; gap: 14px; padding: 20px 26px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.win-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -.028em; line-height: 1; }
.win-head .tag { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--cream); background: var(--pine); padding: 5px 9px; border-radius: 5px; }
.win-head .meta { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--smoke); }
.win-body { padding: 22px 26px 24px; }
.win-foot { padding: 13px 26px; border-top: 1px solid var(--line-soft); background: var(--paper-2); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--t-ink-2); }
.win-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mono-l { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }

/* primitives shared by every mock */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.kpis div { background: var(--paper); padding: 14px 16px; }
.kpis .l { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--smoke); }
.kpis .v { margin-top: 7px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 27px); letter-spacing: -.03em; line-height: 1; }
.kpis .d { margin-top: 5px; font-size: 11px; color: var(--pine); }
.kpis.k3 { grid-template-columns: repeat(3, 1fr); }

.spark { margin-top: 18px; height: 108px; }
.spark svg { width: 100%; height: 100%; display: block; }
.spark .ln { fill: none; stroke: var(--pine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.1s var(--e-out) .9s forwards; }
.spark .fill { fill: rgba(44,74,60,.08); opacity: 0; animation: fadein .9s ease 2.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* dashboards hero: a grid of report cards, not a wall of numbers */
.dbg { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dbc { border: 1px solid var(--line-soft); border-radius: 11px; padding: 13px 15px 14px; min-width: 0; }
.dbc.wide { grid-column: 1 / -1; }
.dbc-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dbc-t span { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--smoke); }
.dbc-t .sub { text-transform: none; letter-spacing: .02em; }
.dbc .spark { margin-top: 10px; height: 84px; }
.dbc .hbars { margin-top: 13px; }
.dbc.ghost { grid-column: 1 / -1; border-style: dashed; border-color: var(--line); display: flex; align-items: center; justify-content: center; padding: 13px; font-size: 13px; color: var(--smoke); }
.dba { margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 11px; padding: 12px 15px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; min-width: 0; }
.dba .sp { color: var(--pine); font-size: 11px; }
.dba .a { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--pine); background: rgba(44,74,60,.07); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.spark .ln2 { fill: none; stroke: var(--smoke); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .5; }

/* attribution hero: the journey rail, as the CRM draws it */
.jy-intro { font-size: 13px; color: var(--t-ink-2); margin-bottom: 16px; }
.jy { display: flex; flex-direction: column; gap: 16px; }
.jy-day { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.jy-day::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.jy-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 7px 2px; }
.jy-g .jy-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 36px; bottom: -7px; width: 1px; background: var(--line); }
.mkt { position: relative; z-index: 1; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; }
.mkt svg { width: 13px; height: 13px; }
.mkt.mut { color: var(--smoke); }
.mkt.won { border-color: transparent; background: var(--pine); color: var(--cream); }
.jy-bd { flex: 1; min-width: 0; display: grid; gap: 1px; padding-top: 2px; }
.jy-kind { font-size: 13.5px; font-weight: 500; letter-spacing: -.012em; }
.jy-sub { font-size: 12px; color: var(--smoke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jy-when { flex: none; padding-top: 4px; font-family: var(--mono); font-size: 10px; color: var(--smoke); }
.jy-more { margin-top: 14px; display: inline-block; font-size: 12.5px; color: var(--t-ink-2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; }

.rows { display: flex; flex-direction: column; }
.rows .r { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rows .r:last-child { border-bottom: none; }
.rows .r b { font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; }
.rows .r .s { font-size: 12px; color: var(--smoke); margin-top: 2px; display: block; line-height: 1.4; }
.rows .r .rt { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--smoke); flex-shrink: 0; padding-left: 10px; }
.rows .r .rv { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--pine-deep); flex-shrink: 0; padding-left: 10px; }
.rows .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--pine); }
.rows .ic svg { width: 14px; height: 14px; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--smoke); font-weight: 400; text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--line-soft); }
.tbl th.num { text-align: right; }
.tbl td { padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-family: var(--mono); font-size: 12px; }
.tbl .kw { font-family: var(--mono); font-size: 11.5px; color: var(--t-ink); }
.tbl .good { color: var(--pine-deep); font-weight: 600; }

.hbars { display: flex; flex-direction: column; gap: 13px; }
.hbars .b { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; }
.hbars .b .nm { font-size: 12.5px; }
.hbars .b .vl { font-family: var(--mono); font-size: 11.5px; color: var(--smoke); }
.hbars .b .tr { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--cream); overflow: hidden; }
.hbars .b .tr i { display: block; height: 100%; border-radius: 4px; background: var(--pine); width: 0; animation: grow 1.1s var(--e-out) forwards; }
.hbars .b:nth-child(2) .tr i { animation-delay: .12s; }
.hbars .b:nth-child(3) .tr i { animation-delay: .24s; }
@keyframes grow { to { width: var(--w); } }

/* bookings hero: the public booking page, three panes like the real one */
.bkg { display: grid; grid-template-columns: 1.05fr 1.2fr .8fr; margin: -22px -26px -24px; }
.bks { padding: 22px 24px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.bk-co { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); }
.bk-who { display: flex; align-items: center; gap: 10px; }
.bk-who i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pine); color: var(--cream); font-style: normal; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.bk-who b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.012em; }
.bk-who .rl { font-size: 11.5px; color: var(--smoke); }
.bk-h { font-family: var(--serif); font-weight: 400; font-size: 23px; letter-spacing: -.02em; line-height: 1.1; }
.bk-facts { display: flex; flex-direction: column; gap: 7px; }
.bk-facts span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t-ink-2); }
.bk-facts svg { width: 14px; height: 14px; color: var(--smoke); flex: none; }
.bk-d { font-size: 12.5px; color: var(--smoke); line-height: 1.55; }
.bk-tz { margin-top: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 12px; color: var(--t-ink-2); }
.bk-tz svg { width: 13px; height: 13px; color: var(--smoke); flex: none; }
.bk-tz i { margin-left: auto; font-style: normal; color: var(--smoke); font-size: 11px; line-height: 0; transform: translateY(-2px); }
.bkm { padding: 22px 24px; border-right: 1px solid var(--line-soft); min-width: 0; }
.bk-mh { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: -.012em; }
.bk-mh .nv { display: flex; gap: 4px; }
.bk-mh .nv i { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 7px; font-style: normal; font-size: 12px; color: var(--smoke); display: inline-flex; align-items: center; justify-content: center; }
.bk-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 14px; font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; color: var(--smoke); text-align: center; }
.bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; margin-top: 7px; }
.bk-days span { width: 30px; height: 30px; justify-self: center; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 50%; font-variant-numeric: tabular-nums; }
.bk-days .ok { color: var(--pine); font-weight: 600; background: rgba(44,74,60,.06); }
.bk-days .off { color: var(--smoke); opacity: .35; }
.bk-days .sel { background: var(--pine); color: var(--cream); font-weight: 600; box-shadow: 0 0 0 4px rgba(44,74,60,.14); }
.bkt { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bk-th { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.bk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
.bk-seg i { font-style: normal; font-family: var(--mono); font-size: 8.5px; padding: 3px 7px; border-radius: 5px; color: var(--smoke); }
.bk-seg i.a { background: var(--cream); color: var(--ink); }
.bkt .sl { border: 1px solid var(--line); border-radius: 10px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--pine); background: var(--paper); }
.sl-pair { display: flex; gap: 6px; }
.sl-pair span { flex: 1; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.sl-pair .tsel { background: var(--ink); color: var(--cream); }
.sl-pair .tcf { background: var(--pine); color: var(--cream); }

.thread { display: flex; flex-direction: column; gap: 10px; }
.thread .m { max-width: 80%; padding: 11px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
.thread .m.them { background: var(--cream); border-bottom-left-radius: 5px; }
.thread .m.us { align-self: flex-end; background: var(--pine); color: var(--cream); border-bottom-right-radius: 5px; }
.thread .st { font-family: var(--mono); font-size: 9.5px; color: var(--smoke); align-self: flex-end; }

.flowc { display: flex; flex-direction: column; }
.flowc .st { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; background: var(--paper); }
.flowc .st.trig { border-color: var(--pine); background: rgba(44,74,60,.05); }
.flowc .st .k { display: block; font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); margin-bottom: 5px; }
.flowc .st .t { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; }
.flowc .st .t span { display: block; font-weight: 400; font-size: 11.5px; color: var(--smoke); margin-top: 3px; letter-spacing: 0; line-height: 1.4; }
.flowc .cn { width: 1px; height: 16px; background: var(--line); margin-left: 26px; }

.docm { border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; padding: 20px 22px; }
.docm .dt { font-family: var(--serif); font-size: 17px; letter-spacing: -.02em; }
.docm .dl { height: 5px; border-radius: 3px; background: var(--cream); margin-top: 11px; }
.docm .dl.s { width: 62%; }
.docm .sigline { margin-top: 22px; border-bottom: 1px solid var(--line); padding-bottom: 4px; font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--t-ink); }
.docm .sigcap { margin-top: 7px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke); }

/* task-board hero: the real Tasks page — rail, tabs, the list's own board */
.tbg { display: grid; grid-template-columns: 176px 1fr; margin: -22px -26px -24px; }
.tbr { padding: 18px 12px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbr span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; color: var(--t-ink-2); white-space: nowrap; }
.tbr span i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--smoke); }
.tbr span.on { background: var(--cream); font-weight: 600; color: var(--t-ink); }
.tbr .lbl { margin: 10px 0 2px; padding: 0 10px; font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--smoke); }
.tbr .new { color: var(--smoke); font-size: 11.5px; }
.tbm { padding: 18px 20px 20px; min-width: 0; }
.tbh { display: flex; align-items: center; gap: 12px; }
.tbh b { font-size: 14.5px; font-weight: 600; letter-spacing: -.014em; }
.tbtabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; margin-left: auto; }
.tbtabs i { font-style: normal; font-size: 11px; padding: 4px 10px; border-radius: 6px; color: var(--smoke); }
.tbtabs i.a { background: var(--cream); color: var(--ink); font-weight: 600; }
.tbh .nt { background: var(--pine); color: var(--cream); font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 7px 11px; white-space: nowrap; }
.tbcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.tbc .ch { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--smoke); margin-bottom: 8px; }
.tbc .ch i { font-style: normal; }
.tbcard { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--paper); padding: 11px 12px; font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: -.008em; }
.tbcard + .tbcard { margin-top: 8px; }
.tbmeta { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-family: var(--mono); font-size: 9px; color: var(--smoke); }
.tbmeta svg { width: 11px; height: 11px; flex: none; }
.tbav { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); font-size: 7.5px; font-weight: 600; color: var(--t-ink-2); display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.tbpill { display: inline-block; font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; color: var(--smoke); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.tbcard.dn { opacity: .62; }
.tbcard.dn .tt { text-decoration: line-through; }
.tbcall { display: inline-flex; align-items: center; gap: 6px; background: var(--pine); color: var(--cream); border-radius: 7px; padding: 6px 10px; font-size: 10.5px; font-weight: 600; }
.tbcall svg { width: 11px; height: 11px; }

.pog { display: grid; grid-template-columns: 168px 1fr; margin: -22px -26px -24px; }
.por { padding: 16px 12px 14px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.por > span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; color: var(--t-ink-2); white-space: nowrap; }
.por > span i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--smoke); }
.por > span i.n1 { background: var(--pine); color: var(--cream); border-radius: 5px; padding: 1px 5px; font-size: 8.5px; }
.por > span.on { background: var(--cream); font-weight: 600; color: var(--t-ink); }
.po-user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 10px 0; border-top: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 600; color: var(--t-ink-2); white-space: nowrap; }
.po-av { width: 22px; height: 22px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); font-size: 8px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pom { padding: 18px 20px 20px; min-width: 0; }
.po-hi { display: flex; align-items: baseline; gap: 10px; }
.po-hi b { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: -.02em; }
.po-hi span { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--smoke); }
.po-status { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--paper); padding: 14px 15px; }
.po-st { display: flex; align-items: center; gap: 10px; }
.po-st b { font-size: 13.5px; font-weight: 600; letter-spacing: -.014em; }
.po-bar { margin-top: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.po-bar i { height: 5px; border-radius: 3px; background: var(--cream); border: 1px solid var(--line-soft); }
.po-bar i.f { background: var(--pine); border-color: var(--pine); }
.po-sm { margin-top: 9px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--smoke); }
.po-row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--paper); padding: 12px 14px; margin-top: 9px; }
.po-row > svg { width: 15px; height: 15px; color: var(--smoke); flex: none; }
.po-tx { min-width: 0; }
.po-tx b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.012em; }
.po-tx span { display: block; margin-top: 2px; font-size: 11px; color: var(--smoke); }
.po-tag { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.po-tag.ok { background: rgba(44,74,60,.12); color: var(--pine-deep); }
.po-tag.wait { background: rgba(201,154,91,.18); color: #8A6427; }
.po-pay { margin-left: auto; flex-shrink: 0; background: var(--pine); color: var(--cream); font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 6px 14px; }

.rcard { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px; }
.rcard .rt2 { margin-top: 9px; font-size: 14px; font-weight: 600; letter-spacing: -.015em; }

/* ---------------- what's in it (ink) ---------------- */
.inv { margin-top: 44px; max-width: 560px; }
.iv { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line-ink); font-size: 15.5px; font-weight: 500; letter-spacing: -.014em; color: var(--t-cream);
  opacity: 0; transform: translateY(10px); transition: opacity .55s var(--e-out), transform .55s var(--e-out); }
.iv:first-child { border-top: 1px solid var(--line-ink); }
.iv svg { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }
.inv.in .iv { opacity: 1; transform: none; }
.inv-foot { margin-top: 34px; font-size: 16.5px; line-height: 1.6; color: var(--t-cream); max-width: 60ch; }

/* ---------------- spotlights ---------------- */
.mods { margin-top: 62px; display: flex; flex-direction: column; gap: 88px; }
.mod { display: grid; grid-template-columns: 1fr 1.08fr; gap: 60px; align-items: center; }
.mod:nth-child(even) .mod-copy { order: 2; }
.mod .n { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--pine); }
.mod h3 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; line-height: 1.06; }
.mod p { margin-top: 16px; font-size: 16px; line-height: 1.62; color: var(--t-ink-2); max-width: 46ch; }
.mod-vis { background: var(--paper); border: 1px solid var(--line); border-radius: 15px; padding: 20px; box-shadow: 0 30px 60px -40px rgba(26,23,20,.4);
  opacity: 0; transform: translateY(18px); transition: opacity .7s var(--e-out), transform .7s var(--e-out); }
.mod-vis.in { opacity: 1; transform: none; }
.mv-cap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--smoke); }

/* ---------------- siblings ---------------- */
.sibs { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sibs a { border: 1px solid var(--line-ink); border-radius: 13px; padding: 20px; transition: border-color .18s ease, transform .18s ease; }
.sibs a:hover { border-color: rgba(134,173,149,.5); transform: translateY(-2px); }
.sibs a b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--t-cream); }
.sibs a span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--t-cream-2); }

/* ---------------- faq ---------------- */
.faq { margin-top: 42px; max-width: 800px; }
.faq-item { border-top: 1px solid var(--line); cursor: pointer; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; gap: 20px; padding: 24px 0; font-size: 18px; font-weight: 600; letter-spacing: -.018em; }
.faq-q .pm { margin-left: auto; width: 15px; height: 15px; position: relative; flex-shrink: 0; }
.faq-q .pm::before, .faq-q .pm::after { content: ''; position: absolute; background: var(--pine); border-radius: 1px; transition: transform .28s var(--e-out); }
.faq-q .pm::before { top: 7px; left: 0; width: 15px; height: 1.5px; }
.faq-q .pm::after { left: 6.75px; top: 0; width: 1.5px; height: 15px; }
.faq-item.open .pm::after { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; font-size: 16px; line-height: 1.65; color: var(--t-ink-2); max-width: 62ch; transition: max-height .34s var(--e-out), padding .34s var(--e-out); }
.faq-item.open .faq-a { max-height: 460px; padding-bottom: 26px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1040px) {
  .mod { grid-template-columns: 1fr; gap: 32px; }
  .mod:nth-child(even) .mod-copy { order: 0; }
  .mod p { max-width: none; }
  .sibs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .p-hero { padding: 62px 0 74px; }
  .win-wrap { margin-top: 34px; }
  .win-head { padding: 16px 16px 14px; gap: 10px; }
  .win-body { padding: 16px; }
  .win-foot { padding: 11px 16px; font-size: 11.5px; }
  .win-bar .u { display: none; }
  .win-split { grid-template-columns: 1fr; gap: 20px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis.k3 { grid-template-columns: 1fr; }
  .tbg { grid-template-columns: 1fr; margin: -16px; }
  .tbr { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 12px; align-items: center; scrollbar-width: none; }
  .tbr::-webkit-scrollbar { display: none; }
  .tbr span { white-space: nowrap; flex: none; }
  .tbr span i { margin-left: 6px; }
  .tbr .lbl { display: none; }
  .tbh { flex-wrap: wrap; gap: 8px; }
  .tbtabs { margin-left: 0; }
  .tbcols { grid-template-columns: 1fr; }
  .tbl th:nth-child(3), .tbl td:nth-child(3) { display: none; }
  .inv { margin-top: 34px; }
  .iv { font-size: 15px; }
  .dbg { grid-template-columns: 1fr; }
  .dba { flex-wrap: wrap; }
  .dba .a { margin-left: 0; white-space: normal; }
  .jy-sub { white-space: normal; }
  .pog { grid-template-columns: 1fr; margin: -16px; }
  .por { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 12px; align-items: center; scrollbar-width: none; }
  .por::-webkit-scrollbar { display: none; }
  .por > span { flex: none; }
  .por > span i { margin-left: 6px; }
  .po-user { display: none; }
  .pom { padding: 16px; }
  .po-hi span { display: none; }
  .bkg { grid-template-columns: 1fr; margin: -16px; }
  .bks, .bkm { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .bks, .bkm, .bkt { padding: 18px 16px; }
  .bk-days span { width: 36px; height: 36px; }
  .bkt { display: grid; grid-template-columns: repeat(3, 1fr); }
  .bk-th, .sl-pair { grid-column: 1 / -1; }
  .inv-foot { margin-top: 30px; font-size: 15.5px; }
  .mods { gap: 58px; margin-top: 42px; }
  .mod-vis { padding: 15px; }
  .sibs { grid-template-columns: 1fr; gap: 12px; }
  .faq-q { font-size: 16.5px; padding: 20px 0; gap: 14px; }
  .faq-a { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .line-mask > span { opacity: 1; transform: none; animation: none; }
  .p-hero .lede, .p-cta, .p-rep, .win-wrap { opacity: 1; animation: none; }
  .spark .ln { stroke-dashoffset: 0; animation: none; }
  .spark .fill { opacity: 1; animation: none; }
  .hbars .b .tr i { width: var(--w); animation: none; }
}