/* ============================================================ Marketing OS — Broadsheet system (DESIGN-4) Swiss broadsheet behind a highlighter pen. One typeface · ruled 1px ink frames · zero radius (pill only) · no shadows · no gradients · one fluorescent marker. Tweaks: data-marker / data-scale / data-density on . ============================================================ */ :root{ --yellow:#fff824; --ink:#151515; --canvas:#f3f3f3; --paper:#e5e5e5; --black:#000000; --font:'Inter Tight','Helvetica Neue',Helvetica,ui-sans-serif,system-ui,Arial,sans-serif; /* type scale (extreme default) */ --t-display:clamp(52px,8.6vw,108px); --t-heading:clamp(42px,6.4vw,84px); --t-hsm:clamp(30px,4.1vw,54px); --t-sub:clamp(21px,2.4vw,30px); --tr-display:-0.040em; --tr-heading:-0.040em; --tr-hsm:-0.030em; --tr-sub:-0.020em; --tr-body:-0.01em; --pagepad:20px; --gap:20px; --sgap:48px; /* between framed sections */ --pad:20px; /* inside frames */ } /* marker color — curated pens */ [data-marker="lime"]{ --yellow:#d9ff3d; } [data-marker="pink"]{ --yellow:#ffb3e3; } /* type scale */ [data-scale="moderate"]{ --t-display:clamp(44px,6.2vw,84px); --t-heading:clamp(36px,5vw,64px); --t-hsm:clamp(27px,3.4vw,44px); } /* density */ [data-density="loose"]{ --sgap:84px; --pad:28px; --pagepad:28px; } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--canvas);color:var(--ink); font-family:var(--font);font-weight:400; font-size:18px;line-height:1.17;letter-spacing:var(--tr-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} a:hover{color:inherit} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:inherit} img{max-width:100%;display:block} ::selection{background:var(--yellow);color:var(--ink)} .shell{padding-left:var(--pagepad);padding-right:var(--pagepad);max-width:1560px;margin:0 auto} section{margin-top:var(--sgap)} /* ---------- micro-labels, marker, arrows ---------- */ .mlabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.2} .ylabel{display:inline-block;background:var(--yellow);color:var(--ink);padding:3px 8px 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.2} .hl{background:var(--yellow);padding:0 0.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .arrow{white-space:nowrap} .arrow::before{content:"↳ "} /* ---------- display type ---------- */ .t-display{font-size:var(--t-display);font-weight:400;line-height:0.96;letter-spacing:var(--tr-display);text-transform:uppercase} .t-heading{font-size:var(--t-heading);font-weight:400;line-height:0.96;letter-spacing:var(--tr-heading);text-transform:uppercase} .t-hsm{font-size:var(--t-hsm);font-weight:400;line-height:0.93;letter-spacing:var(--tr-hsm);text-transform:uppercase} .t-sub{font-size:var(--t-sub);font-weight:400;line-height:1.05;letter-spacing:var(--tr-sub)} /* ---------- pills — the only rounded element ---------- */ .pill{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border-radius:9999px;border:1px solid var(--ink); padding:11px 24px 12px;background:transparent;color:var(--ink); font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em; transition:background .12s ease,color .12s ease;white-space:nowrap; } .pill:hover{background:var(--ink);color:var(--canvas)} .pill.fill{background:var(--yellow);border-color:var(--yellow)} .pill.fill:hover{background:var(--ink);border-color:var(--ink);color:var(--canvas)} .pill.onink{border-color:var(--canvas);color:var(--canvas)} .pill.onink:hover{background:var(--canvas);color:var(--ink)} .pill.fill.onink{background:var(--yellow);border-color:var(--yellow);color:var(--ink)} .pill.fill.onink:hover{background:var(--canvas);border-color:var(--canvas);color:var(--ink)} .pill.big{padding:15px 32px 16px;font-size:13px} /* ---------- frames & ruled grids ---------- */ .frame{border:1px solid var(--ink)} .fpad{padding:var(--pad)} /* shared hairline grid: gap:1px over ink */ .ruled{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink)} .ruled>*{background:var(--canvas)} .inkband{background:var(--ink);color:var(--canvas)} .inkband ::selection{background:var(--yellow);color:var(--ink)} /* ============================================================ TOP BAR (non-sticky, text-only identity) ============================================================ */ .topbar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px var(--pagepad);max-width:1560px;margin:0 auto} .topbar .brand{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em} .topbar nav{display:flex;gap:20px;flex-wrap:wrap} .topbar nav a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em} .topbar nav a:hover{background:var(--yellow)} /* ticker — black compliance-style bar */ .ticker{background:var(--ink);color:var(--canvas);display:flex;align-items:center;gap:14px;padding:10px var(--pagepad);flex-wrap:wrap} .ticker .ylabel{flex-shrink:0} .ticker span{font-size:12px;font-weight:400;letter-spacing:0} .ticker a{font-size:12px;font-weight:700;text-transform:uppercase;margin-left:auto} .ticker a:hover{background:var(--yellow);color:var(--ink)} /* ============================================================ HERO ============================================================ */ .hero-frame{position:relative;margin-top:8px} .hero-frame .fpad{padding-bottom:calc(var(--pad) + 8px)} .hero-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:clamp(34px,6vh,84px)} .hero-meta .right{display:flex;gap:20px;flex-wrap:wrap} .hero h1{max-width:none} .hero h1 .row{display:block} .chevrons{position:absolute;right:var(--pad);bottom:6px;font-size:54px;line-height:.8;letter-spacing:-0.04em;user-select:none} .hero-lower{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:clamp(28px,4vh,56px);align-items:end} .hero-lead{columns:2;column-gap:40px;font-size:18px;line-height:1.17;letter-spacing:var(--tr-body)} .hero-lead p{break-inside:avoid;margin-bottom:12px} .hero-lead b{font-weight:400;background:var(--yellow);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center} /* stats rule-row */ .statrow{grid-template-columns:repeat(4,1fr)} .statrow>div{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px} .statrow .n{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm);text-transform:uppercase} .statrow .l{font-size:12px;font-weight:700;text-transform:uppercase} /* logos — plain-set specimen row */ .logorow{display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 0 0;align-items:baseline} .logorow .lg{font-size:12px;font-weight:700;text-transform:uppercase;opacity:.55} .logorow .lg:hover{opacity:1;background:var(--yellow)} .logorow .cap{font-size:12px;font-weight:400;text-transform:uppercase;opacity:1;margin-right:8px} /* ============================================================ SECTION HEADERS — letter index + marker label + display line ============================================================ */ .sechead{display:flex;flex-direction:column;gap:18px;margin-bottom:26px} .sechead .tag{display:flex;align-items:baseline;gap:10px} .sechead h2{font-size:var(--t-heading);font-weight:400;line-height:.96;letter-spacing:var(--tr-heading);text-transform:uppercase;max-width:24ch;text-wrap:balance} .sechead h2 .hl{padding:0 .04em} .sechead .note{font-size:18px;line-height:1.17;max-width:58ch;letter-spacing:var(--tr-body)} /* ============================================================ PAINS — numbered ruled entries ============================================================ */ .pains{grid-template-columns:repeat(3,1fr)} .pains>div{padding:16px;display:flex;flex-direction:column;gap:26px;min-height:170px} .pains .no{font-size:12px;font-weight:700} .pains h3{font-size:var(--t-sub);font-weight:400;line-height:1.02;letter-spacing:var(--tr-sub);text-transform:uppercase;margin-top:auto} .pains p{font-size:14px;line-height:1.25;letter-spacing:-0.01em} .pains-close{margin-top:1px} .pains-close .fpad{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap} .pains-close .t-hsm{max-width:none} /* ============================================================ PORTRAITS ============================================================ */ .ports{grid-template-columns:repeat(3,1fr)} .ports>div{padding:16px;display:flex;flex-direction:column;gap:16px} .ports h3{font-size:var(--t-sub);font-weight:400;line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase;min-height:2em} .ports .row{border-top:1px solid var(--ink);padding-top:10px} .ports .k{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:6px} .ports .v{font-size:14px;line-height:1.3;letter-spacing:-0.01em} .notfor{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;padding:14px 16px} .notfor li{list-style:none;font-size:14px} .notfor li::before{content:"✕ ";font-weight:700} /* ============================================================ MANIFEST ============================================================ */ .manifest p.big{font-size:var(--t-hsm);line-height:1.02;letter-spacing:var(--tr-hsm);text-transform:uppercase;max-width:30ch;text-wrap:balance} .manifest-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;margin-top:26px} .msteps{grid-template-columns:1fr} .msteps>div{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:12px 16px 14px;align-items:baseline} .msteps .no{font-size:12px;font-weight:700} .msteps .t{font-size:16px;line-height:1.2;letter-spacing:-0.01em} .formula{border:1px solid var(--ink);padding:16px;display:flex;flex-direction:column;gap:14px} .formula .eq{font-size:var(--t-sub);line-height:1.02;letter-spacing:var(--tr-sub);text-transform:uppercase} .formula p{font-size:14px;line-height:1.3} /* ============================================================ PROGRAM — specimen table ============================================================ */ .progmeta{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;margin-bottom:14px} .progmeta .m{font-size:12px;font-weight:700;text-transform:uppercase} .week{grid-template-columns:minmax(120px,.55fr) 1.6fr 1fr;align-items:stretch} .week>div{padding:16px} .wk-no{display:flex;flex-direction:column;gap:14px} .wk-no .n{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm)} .wk-no .nm{font-size:12px;font-weight:700;text-transform:uppercase;max-width:16ch} .wk-body h3{font-size:var(--t-sub);font-weight:400;line-height:1.02;letter-spacing:var(--tr-sub);text-transform:uppercase;margin-bottom:10px} .wk-body>p{font-size:14px;line-height:1.3;letter-spacing:-0.01em;max-width:64ch} .wk-body ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:5px} .wk-body li{font-size:14px;line-height:1.25;padding-left:22px;text-indent:-22px} .wk-body li::before{content:"↳ "} .wk-body .callout{margin-top:12px;font-size:14px;line-height:1.35;max-width:60ch} .wk-out{display:flex;flex-direction:column;gap:12px;border-left:none} .wk-out .k{font-size:12px;font-weight:700;text-transform:uppercase} .wk-out .v{font-size:16px;line-height:1.15;letter-spacing:-0.01em} .wk-out .tools{margin-top:auto;font-size:12px;font-weight:700;text-transform:uppercase;line-height:1.5} .wk-out .live{font-size:12px;font-weight:700;text-transform:uppercase} .wk-out .live .ylabel{margin-right:6px} .prog-extra{padding:16px;display:grid;grid-template-columns:200px 1fr;gap:20px} .prog-extra ul{list-style:none;columns:2;column-gap:40px} .prog-extra li{font-size:14px;line-height:1.3;padding-left:22px;text-indent:-22px;margin-bottom:6px;break-inside:avoid} .prog-extra li::before{content:"+ ";font-weight:700} .prog-note{font-size:12px;margin-top:10px;max-width:80ch;line-height:1.4} /* ============================================================ FERMA — inverted band ============================================================ */ .ferma{padding:var(--sgap) 0} .ferma .ruled{background:var(--canvas);border-color:var(--canvas)} .ferma .ruled>*{background:var(--ink)} .ferma-cols{grid-template-columns:1fr 1fr;margin-top:26px} .ferma-cols>div{padding:16px} .ferma-cols .k{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:14px} .ferma-cols .k .ylabel{margin-right:8px} .ferma-cols ul{list-style:none;display:flex;flex-direction:column;gap:6px} .ferma-cols li{font-size:15px;line-height:1.25;padding-left:22px;text-indent:-22px} .ferma-cols li::before{content:"↳ "} .ferma-foot{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:20px} .ferma-foot p{font-size:14px;line-height:1.35;max-width:64ch} /* ============================================================ FORMAT — schedule ruled table ============================================================ */ .sched{grid-template-columns:150px 1fr} .sched>div{padding:12px 16px 14px} .sched .d{font-size:12px;font-weight:700;text-transform:uppercase} .sched .t{font-size:16px;line-height:1.25;letter-spacing:-0.01em} .sched .t span{opacity:.6;font-size:14px} .fmt-side{display:flex;flex-direction:column;gap:1px} .fmt-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start;margin-top:26px} .fmt-stats{grid-template-columns:repeat(2,1fr)} .fmt-stats>div{padding:14px 16px 16px} .fmt-stats .n{font-size:var(--t-sub);line-height:.95;letter-spacing:var(--tr-sub);text-transform:uppercase} .fmt-stats .l{font-size:12px;font-weight:700;text-transform:uppercase;margin-top:8px} .fmt-each{padding:16px} .fmt-each .k{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:12px} .fmt-each ul{list-style:none;display:flex;flex-direction:column;gap:5px} .fmt-each li{font-size:15px;line-height:1.25;padding-left:22px;text-indent:-22px} .fmt-each li::before{content:"↳ "} .fmt-each p{margin-top:14px;font-size:14px;line-height:1.35} /* ============================================================ QUOTES (changes) ============================================================ */ .quotes{columns:3;column-gap:40px;margin-top:26px} .quotes blockquote{break-inside:avoid;margin-bottom:22px;font-size:16px;line-height:1.25;letter-spacing:-0.01em;padding-left:22px;text-indent:-22px} .quotes blockquote::before{content:"↳ "} .quotes-close{margin-top:8px;font-size:var(--t-sub);line-height:1.05;letter-spacing:var(--tr-sub);text-transform:uppercase;max-width:44ch} /* ============================================================ PRICING ============================================================ */ .prices{grid-template-columns:repeat(3,1fr);align-items:stretch} .prices>div{padding:16px;display:flex;flex-direction:column;gap:0} .pr-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:20px} .pr-tier{font-size:12px;font-weight:700;text-transform:uppercase} .pr-name{font-size:var(--t-sub);font-weight:400;line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase;margin-bottom:8px} .pr-desc{font-size:14px;line-height:1.3;margin-bottom:22px;max-width:34ch} .pr-amount{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm);margin-bottom:6px} .pr-amount .old{font-size:18px;letter-spacing:-0.01em;text-decoration:line-through;opacity:.5;margin-left:10px} .pr-note{font-size:12px;margin-bottom:20px;min-height:15px} .pr-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:24px;flex:1} .pr-list li{font-size:14px;line-height:1.3;padding-left:22px;text-indent:-22px} .pr-list li::before{content:"↳ "} .pr-list li.dim{opacity:.45} .pr-list li.dim::before{content:"— "} .pr-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px} .pr-cta .pill{width:100%} .pr-foot{font-size:12px;text-align:left} .seatline{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:14px} .seatline .bar{flex:0 0 72px;height:8px;border:1px solid var(--ink);position:relative} .seatline .bar i{position:absolute;inset:1px;right:auto;background:var(--yellow);width:70%} .accel{grid-template-columns:1.5fr 1fr;margin-top:1px} .accel>div{padding:16px} .accel h3{font-size:var(--t-sub);font-weight:400;line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase;margin:8px 0 12px} .accel p{font-size:14px;line-height:1.35;max-width:60ch} .accel ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:6px} .accel li{font-size:14px;line-height:1.3;padding-left:22px;text-indent:-22px} .accel li::before{content:"↳ "} .accel .a-right{display:flex;flex-direction:column;gap:12px} .accel .a-right .num{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm)} .accel .a-right .meta{font-size:12px;font-weight:700;text-transform:uppercase} .price-extras{grid-template-columns:repeat(3,1fr);margin-top:1px} .price-extras>div{padding:14px 16px 16px} .price-extras h5{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:8px} .price-extras p{font-size:14px;line-height:1.35} .price-extras a{text-decoration:underline;text-underline-offset:2px} .price-extras a:hover{background:var(--yellow)} .promo-line{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap} .promo-line span{font-size:14px} /* ============================================================ AGENTS ============================================================ */ .agents{grid-template-columns:repeat(2,1fr)} .agents>div{padding:16px;display:flex;flex-direction:column;gap:22px;min-height:180px} .agents .k{font-size:12px;font-weight:700;text-transform:uppercase} .agents h3{font-size:var(--t-sub);font-weight:400;line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase;margin-top:auto} .agents p{font-size:14px;line-height:1.3;max-width:52ch} .agent-deliv{margin-top:1px} .agent-deliv .fpad{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline} .agent-deliv p{font-size:var(--t-sub);line-height:1.05;letter-spacing:var(--tr-sub);text-transform:uppercase;max-width:44ch} /* ============================================================ DIFFS + compare table ============================================================ */ .diffs{grid-template-columns:1fr} .diffs>div{padding:16px;display:grid;grid-template-columns:minmax(110px,.4fr) 1.1fr 1.2fr;gap:20px;align-items:start} .diffs .no{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm)} .diffs h3{font-size:var(--t-sub);font-weight:400;line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase} .diffs p{font-size:14px;line-height:1.35} .diffs .pillrow{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px} .diffs .pillrow span{font-size:12px;font-weight:700;text-transform:uppercase;border:1px solid var(--ink);padding:2px 8px 3px} table.compare{width:100%;border-collapse:collapse;margin-top:1px} table.compare th,table.compare td{border:1px solid var(--ink);padding:12px 16px;text-align:left;font-size:15px;line-height:1.25} table.compare th{font-size:12px;font-weight:700;text-transform:uppercase} table.compare tr.us td{background:var(--yellow)} /* ============================================================ SUPPORT ============================================================ */ .support{grid-template-columns:repeat(3,1fr)} .support>div{padding:16px;display:flex;flex-direction:column;gap:20px;min-height:150px} .support .k{font-size:12px;font-weight:700;text-transform:uppercase} .support h4{font-size:var(--t-sub);font-weight:400;line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase;margin-top:auto} .support p{font-size:14px;line-height:1.3} /* ============================================================ AUTHOR ============================================================ */ .author-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;margin-top:26px} .author-photo{position:relative;aspect-ratio:4/5;border:1px solid var(--ink); background:repeating-linear-gradient(135deg,var(--paper) 0 12px,var(--canvas) 12px 24px); filter:grayscale(1)} .author-photo .cap{position:absolute;top:12px;left:12px} .author-name{font-size:var(--t-heading);line-height:.96;letter-spacing:var(--tr-heading);text-transform:uppercase;margin-bottom:14px} .author-bio{font-size:16px;line-height:1.3;max-width:60ch;margin-bottom:20px} .author-stats{grid-template-columns:repeat(3,1fr);margin-bottom:20px} .author-stats>div{padding:12px 16px 14px} .author-stats .n{font-size:var(--t-sub);line-height:.95;letter-spacing:var(--tr-sub)} .author-stats .l{font-size:12px;font-weight:700;text-transform:uppercase;margin-top:6px} .author-jobs{margin-bottom:20px} .author-jobs>div{padding:12px 16px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 20px} .author-jobs h4{font-size:16px;font-weight:400;letter-spacing:-0.01em;text-transform:uppercase} .author-jobs .yrs{font-size:12px;font-weight:700;text-transform:uppercase} .author-jobs p{grid-column:1/-1;font-size:14px;line-height:1.3} .author-misc{font-size:14px;line-height:1.4;display:flex;flex-direction:column;gap:8px} .author-misc .k{font-weight:700;font-size:12px;text-transform:uppercase;margin-right:8px} .author-quote{margin-top:20px;font-size:var(--t-sub);line-height:1.05;letter-spacing:var(--tr-sub);text-transform:uppercase;max-width:40ch} /* ============================================================ TESTIMONIALS ============================================================ */ .tstats{grid-template-columns:repeat(3,1fr);margin-top:26px} .tstats>div{padding:14px 16px 16px} .tstats .n{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm)} .tstats .l{font-size:12px;font-weight:700;text-transform:uppercase;margin-top:8px} .tcards{grid-template-columns:repeat(3,1fr);margin-top:1px} .tcards>div{padding:16px;display:flex;flex-direction:column;gap:20px} .tcards blockquote{font-size:16px;line-height:1.25;letter-spacing:-0.01em;flex:1} .tcards .who{font-size:12px;line-height:1.4} .tcards .who b{display:block;font-weight:700;text-transform:uppercase} .tnote{font-size:12px;margin-top:10px} /* ============================================================ TELEGRAM ============================================================ */ .tg-grid{grid-template-columns:repeat(2,1fr)} .tg-grid>a{padding:16px;display:flex;flex-direction:column;gap:18px;min-height:160px;transition:background .12s ease} .tg-grid>a:hover{background:var(--yellow)} .tg-grid .k{font-size:12px;font-weight:700;text-transform:uppercase} .tg-grid h4{font-size:var(--t-sub);font-weight:400;line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase;margin-top:auto} .tg-grid p{font-size:14px;line-height:1.3;max-width:48ch} .tg-grid .go{font-size:12px;font-weight:700;text-transform:uppercase} .tg-foot{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:20px} .tg-foot .stats{display:flex;gap:28px;font-size:12px;font-weight:700;text-transform:uppercase} .tg-foot .stats b{font-size:var(--t-sub);font-weight:400;letter-spacing:var(--tr-sub);display:block;text-transform:none} /* ============================================================ FAQ ============================================================ */ .faq{margin-top:26px;border-top:1px solid var(--ink)} .faq details{border-bottom:1px solid var(--ink)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;font-size:var(--t-sub);line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:30px;line-height:.8;flex-shrink:0} .faq details[open] summary::after{content:"−"} .faq details[open] summary{background:var(--yellow);padding-left:10px;padding-right:10px} .faq .ans{padding:4px 0 20px;font-size:16px;line-height:1.3;max-width:70ch} .faq .ans p+p{margin-top:10px} /* ============================================================ FINAL — typographic asymmetry ============================================================ */ .final{margin-top:var(--sgap)} .final .fpad{padding-top:clamp(40px,7vh,80px);padding-bottom:clamp(40px,7vh,80px)} .final .l1{display:flex;justify-content:flex-start} .final .l2{display:flex;justify-content:flex-end} .final .t-display{display:block} .final-meta{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:clamp(28px,5vh,56px)} .final-meta .note{font-size:14px;line-height:1.35;max-width:44ch} .final-meta .acts{display:flex;gap:10px;flex-wrap:wrap} /* ============================================================ FOOTER — ink band ============================================================ */ .foot{background:var(--ink);color:var(--canvas);margin-top:var(--sgap)} .foot-in{max-width:1560px;margin:0 auto;padding:34px var(--pagepad) 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px} .foot .brand{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:12px} .foot .tag{font-size:14px;line-height:1.35;max-width:34ch;opacity:.75} .foot h5{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:12px} .foot h5 .ylabel{color:var(--ink)} .foot ul{list-style:none;display:flex;flex-direction:column;gap:7px} .foot ul a{font-size:12px;font-weight:700;text-transform:uppercase} .foot ul a::before{content:"↳ "} .foot ul a:hover{background:var(--yellow);color:var(--ink)} .foot-bottom{max-width:1560px;margin:0 auto;padding:16px var(--pagepad) 22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(243,243,243,.25);font-size:12px;font-weight:700;text-transform:uppercase;opacity:.8} /* ============================================================ JTBD protocol frame (hero demo) ============================================================ */ .proto{margin-top:clamp(28px,4vh,48px);border:1px solid var(--ink);text-align:left} .proto-bar{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ink);padding:10px 14px;flex-wrap:wrap} .proto-bar .st{font-size:12px;font-weight:700;text-transform:uppercase} .proto-bar .live{margin-left:auto;font-size:12px;font-weight:700;text-transform:uppercase} .proto-bar .live i{display:inline-block;width:8px;height:8px;background:var(--yellow);border:1px solid var(--ink);margin-right:6px} .promptline{display:flex;gap:0;border-bottom:1px solid var(--ink)} .promptline input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font);font-size:16px;letter-spacing:-0.01em;color:var(--ink);padding:14px} .promptline input::placeholder{color:rgba(21,21,21,.45)} .promptline button{border-left:1px solid var(--ink);padding:0 22px;font-size:12px;font-weight:700;text-transform:uppercase;transition:background .12s ease} .promptline button:hover{background:var(--yellow)} .promptline button.busy{background:var(--yellow)} .nicherow{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--ink)} .nicherow button{flex:1;padding:10px 12px;font-size:12px;font-weight:700;text-transform:uppercase;border-right:1px solid var(--ink);transition:background .12s ease} .nicherow button:last-child{border-right:none} .nicherow button:hover{background:var(--paper)} .nicherow button[aria-pressed="true"]{background:var(--yellow)} .proto-body{padding:14px} .proto-load{display:none;flex-direction:column;gap:8px;font-size:14px;min-height:110px} .proto-load .ln{opacity:.25;transition:opacity .3s ease} .proto-load .ln.on{opacity:1} .proto-load .ln.done{opacity:.5} .proto-load .ln.done::before{content:"✓ "} .proto-ready{display:none} .proto-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .proto-meta span{font-size:12px;font-weight:700;text-transform:uppercase;border:1px solid var(--ink);padding:2px 8px 3px} .proto-q{font-size:var(--t-sub);line-height:1.05;letter-spacing:var(--tr-sub)} .proto-q b{font-weight:400;background:var(--yellow);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .forces{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:14px} .forces>div{background:var(--canvas);padding:10px 12px} .forces .k{font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:5px} .forces .v{font-size:13px;line-height:1.25} .insight{margin-top:14px;border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:6px} .insight .k{font-size:12px;font-weight:700;text-transform:uppercase} .insight .v{font-size:16px;line-height:1.25} .insight .v b{font-weight:400;background:var(--yellow);padding:0 .06em} .proto-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;border-top:1px solid var(--ink);padding-top:14px;flex-wrap:wrap} .proto-cta .t{font-size:13px;line-height:1.3;max-width:48ch} /* ============================================================ CHECKOUT ============================================================ */ .co-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start;margin-top:26px} .co-col{display:flex;flex-direction:column;gap:20px} .co-sec{border:1px solid var(--ink)} .co-sec .head{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--ink);padding:10px 14px} .co-sec .head .no{font-size:12px;font-weight:700} .co-sec .body{padding:16px} .field{margin-bottom:14px} .field:last-child{margin-bottom:0} .field label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:6px} .field label span{font-weight:400;text-transform:none;opacity:.6} .field input{width:100%;font-family:var(--font);font-size:16px;letter-spacing:-0.01em;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;padding:12px 14px;outline:none} .field input:focus{background:#fff} .field input::placeholder{color:rgba(21,21,21,.4)} .paylist{display:flex;flex-direction:column;gap:1px;background:var(--ink);border:1px solid var(--ink)} .pay-opt{display:flex;align-items:baseline;gap:14px;padding:13px 14px;background:var(--canvas);cursor:pointer;transition:background .12s ease} .pay-opt:hover{background:var(--paper)} .pay-opt.on{background:var(--yellow)} .pay-opt .mk{font-size:12px;font-weight:700;width:18px;flex-shrink:0} .pay-opt .mk::before{content:"○"} .pay-opt.on .mk::before{content:"●"} .pay-opt .pm-name{font-size:16px;letter-spacing:-0.01em;text-transform:uppercase} .pay-opt .pm-desc{font-size:12px;opacity:.65;margin-top:2px} .pay-opt .pm-badge{margin-left:auto;font-size:12px;font-weight:700;border:1px solid var(--ink);padding:2px 8px 3px;text-transform:uppercase} .promo-row{display:flex;gap:0;border:1px solid var(--ink)} .promo-row input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font);font-size:16px;padding:12px 14px;color:var(--ink)} .promo-row button{border-left:1px solid var(--ink);padding:0 20px;font-size:12px;font-weight:700;text-transform:uppercase} .promo-row button:hover{background:var(--yellow)} .promo-msg{margin-top:10px;font-size:12px;font-weight:700;text-transform:uppercase;display:none} .promo-hint{margin-top:10px;font-size:12px;opacity:.7} .consent{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:13px;line-height:1.35} .consent:last-child{margin-bottom:0} .consent input{margin-top:2px;accent-color:var(--ink);width:15px;height:15px;flex-shrink:0} .consent a{text-decoration:underline;text-underline-offset:2px} .consent a:hover{background:var(--yellow)} .co-sum{border:1px solid var(--ink);position:sticky;top:20px} .co-sum .head{border-bottom:1px solid var(--ink);padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline} .co-sum .body{padding:16px} .co-sum .pn{font-size:var(--t-sub);line-height:1;letter-spacing:var(--tr-sub);text-transform:uppercase;margin-bottom:8px} .co-sum .pd{font-size:14px;line-height:1.3;margin-bottom:12px} .co-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .co-badges span{font-size:12px;font-weight:700;text-transform:uppercase;border:1px solid var(--ink);padding:2px 8px 3px} .co-feats{list-style:none;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:16px} .co-feats li{font-size:14px;line-height:1.3;padding-left:22px;text-indent:-22px} .co-feats li::before{content:"↳ "} .co-line{display:flex;justify-content:space-between;font-size:14px;padding:5px 0} .co-line.discount{font-weight:700} .co-line.discount span:last-child{background:var(--yellow);padding:0 6px} .co-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);margin-top:10px;padding-top:14px;margin-bottom:18px} .co-total .tl{font-size:12px;font-weight:700;text-transform:uppercase} .co-total .tv{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm)} .co-trust{margin-top:12px;font-size:12px;line-height:1.4} .co-back{font-size:12px;font-weight:700;text-transform:uppercase} .co-back:hover{background:var(--yellow)} /* ============================================================ DEMO (Старт) page bits ============================================================ */ .demo-stats{grid-template-columns:repeat(4,1fr)} .demo-stats>div{padding:14px 16px 16px} .demo-stats .n{font-size:var(--t-hsm);line-height:.93;letter-spacing:var(--tr-hsm);text-transform:uppercase} .demo-stats .l{font-size:12px;font-weight:700;text-transform:uppercase;margin-top:8px} .demo-incl{grid-template-columns:1.1fr .9fr} .demo-incl>div{padding:16px} .demo-incl .k{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:14px} .demo-incl ul{list-style:none;display:flex;flex-direction:column;gap:8px} .demo-incl li{font-size:15px;line-height:1.3;padding-left:22px;text-indent:-22px} .demo-incl li::before{content:"↳ "} .dayrow{grid-template-columns:110px 1fr} .dayrow>div{padding:11px 14px 12px} .dayrow .d{font-size:12px;font-weight:700;text-transform:uppercase} .dayrow .t{font-size:15px;line-height:1.3} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1100px){ .pains,.ports,.support,.tcards,.tstats{grid-template-columns:repeat(2,1fr)} .prices{grid-template-columns:1fr 1fr} /* 3-child ruled grids at 2 cols: let the odd last cell span full width (empty cells would otherwise render as solid ink rectangles) */ .ports>*:last-child:nth-child(odd), .support>*:last-child:nth-child(odd), .tcards>*:last-child:nth-child(odd), .tstats>*:last-child:nth-child(odd), .prices>*:last-child:nth-child(odd){grid-column:1/-1} .author-photo{max-width:520px} .week{grid-template-columns:minmax(100px,.5fr) 1.6fr} .week .wk-out{grid-column:1/-1} .quotes{columns:2} .diffs>div{grid-template-columns:80px 1fr} .diffs>div>p,.diffs .body2{grid-column:2} .manifest-grid,.fmt-grid,.author-grid,.co-wrap,.hero-lower{grid-template-columns:1fr} .hero-actions{justify-content:flex-start} .co-sum{position:static} .accel{grid-template-columns:1fr} .agent-deliv .fpad{grid-template-columns:1fr} .prog-extra{grid-template-columns:1fr} .foot-in{grid-template-columns:1fr 1fr} .demo-incl{grid-template-columns:1fr} } @media(max-width:680px){ .pains,.ports,.support,.tcards,.tstats,.prices,.agents,.tg-grid,.statrow,.fmt-stats,.demo-stats,.price-extras{grid-template-columns:1fr} .quotes{columns:1} .hero-lead{columns:1} .week{grid-template-columns:1fr} .forces{grid-template-columns:1fr 1fr} .topbar nav{gap:12px} .foot-in{grid-template-columns:1fr} .sched{grid-template-columns:110px 1fr} .faq summary{font-size:20px} }