/* ============================================================
pawetta — page & section components
============================================================ */
/* ── Hero (index) ───────────────────────────────────────── */
.hero { padding-block: clamp(40px, 6vw, 64px) clamp(48px, 7vw, 76px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(32px, 5.5vw, 58px); line-height: 1.08; letter-spacing: -0.02em; margin: 22px 0 24px; }
.hero h1 em { font-style: normal; color: var(--terracotta); font-weight: 600; }
.hero .lead { max-width: 30em; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-proof { display: flex; gap: clamp(20px, 4vw, 34px); margin-top: 44px; flex-wrap: wrap; }
.hero-proof .metric .num { font-size: clamp(28px, 4vw, 36px); }
.hero-proof .metric .lbl { margin-top: 4px; font-size: 13px; }
.hero-proof .num .cu { font-variant-numeric: tabular-nums; }
.portrait-wrap { position: relative; max-width: 420px; margin: 0 auto; width: 100%; }
.portrait-wrap::before {
content: ""; position: absolute; inset: 0; border-radius: var(--r-2xl);
border: 1.5px solid var(--terracotta); transform: translate(16px, 16px);
opacity: 0.55; z-index: 0; pointer-events: none;
transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.portrait-wrap:hover::before { transform: translate(10px, 10px); opacity: 0.85; }
.portrait {
position: relative; z-index: 1;
border-radius: var(--r-2xl); overflow: hidden;
box-shadow: var(--shadow-ring), var(--shadow-lift);
background: var(--warm-sand); aspect-ratio: 4/5;
transition: transform 0.4s var(--ease);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter 0.5s var(--ease); }
.portrait::after {
content: ""; position: absolute; inset: 0; background: var(--terracotta);
mix-blend-mode: color; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
}
.portrait-wrap:hover .portrait img { filter: grayscale(0.35) contrast(1.05); }
.portrait-wrap:hover .portrait::after { opacity: 0.20; }
.rotator { position: relative; display: inline-block; color: var(--terracotta); }
.rotator .w { display: inline-block; transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.rotator.swap .w { opacity: 0; transform: translateY(-0.32em); }
.rotator::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 2px;
background: var(--terracotta); opacity: 0.32; border-radius: 2px;
}
/* ── Clients marquee ────────────────────────────────────── */
.clients { padding: clamp(20px, 3vw, 30px) 0; }
.marquee { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.marquee .lbl { font-size: 13px; color: var(--stone); white-space: nowrap; flex-shrink: 0; }
.mq-viewport {
flex: 1; overflow: hidden; min-width: 0;
-webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mq-track { display: flex; width: max-content; animation: mqscroll 110s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-row { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
.client {
font-size: clamp(16px, 2.5vw, 21px); font-weight: 600; color: var(--charcoal);
opacity: 0.58; transition: opacity var(--t), color var(--t);
white-space: nowrap; letter-spacing: -0.01em;
}
.client:hover { opacity: 1; color: var(--near-black); }
.clients .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ring-deep); flex-shrink: 0; }
@keyframes mqscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── Services cards ─────────────────────────────────────── */
.svc { display: flex; flex-direction: column; gap: 14px; min-height: 200px; }
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.svc-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--tint-sand); display: grid; place-items: center; color: var(--terracotta); flex-shrink: 0; }
.svc-ico svg { width: 21px; height: 21px; }
.svc h3 { font-size: 21px; line-height: 1.2; }
.svc p { font-size: 15px; color: var(--olive); line-height: 1.55; flex: 1; }
.svc .price { font-family: var(--mono); font-size: 13px; color: var(--charcoal); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc .price .arrow { color: var(--terracotta); opacity: 0; transform: translateX(-4px); transition: all var(--t); margin-left: auto; }
.card--link.svc:hover .price .arrow,
.card--link:hover .svc .price .arrow { opacity: 1; transform: none; }
/* ── Cases ──────────────────────────────────────────────── */
.case-feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.case-proof {
display: flex; gap: clamp(16px, 3vw, 52px); flex-wrap: wrap;
padding: 24px 0 26px; margin-bottom: 30px;
border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep);
}
.case-proof .metric .num { font-size: clamp(28px, 4.5vw, 40px); }
.case-proof .metric .lbl { margin-top: 6px; }
.case-card { display: flex; flex-direction: column; gap: 18px; padding: 0; overflow: hidden; }
.case-thumb { aspect-ratio: 16/8; background: var(--near-black); position: relative; overflow: hidden; display: grid; place-items: center; }
.case-thumb .glyph { position: absolute; inset: 0; opacity: 0.5; width: 100%; height: 100%; }
.case-thumb .big { position: relative; font-family: var(--serif); font-size: clamp(32px, 5vw, 52px); font-weight: 500; color: var(--ivory); letter-spacing: -0.02em; text-align: center; padding: 0 12px; }
.case-thumb .big .unit { color: var(--coral); font-size: clamp(20px, 3vw, 32px); }
.case-body { padding: 0 clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.case-body .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.case-body h3 { font-size: clamp(19px, 2.5vw, 23px); line-height: 1.2; }
.case-body p { font-size: 15px; color: var(--olive); }
.case-stats { display: flex; gap: clamp(16px, 3vw, 26px); margin-top: 4px; flex-wrap: wrap; }
.case-stats .s .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--near-black); }
.case-stats .s .k { font-size: 12px; color: var(--stone); }
.case-thumb .glyph path:first-child { stroke-dasharray: 620; stroke-dashoffset: 620; }
html.js .reveal.in .case-thumb .glyph path:first-child { animation: chartDraw 1.5s var(--ease) 0.15s forwards; }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }
.section-cases .sec-head--hero h2 { font-size: clamp(28px, 5vw, 46px); letter-spacing: -0.025em; }
/* ── Tools ──────────────────────────────────────────────── */
.tool { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.tool-head { display: flex; align-items: center; gap: 11px; }
.tool-head .ico { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--near-black); color: var(--coral); display: grid; place-items: center; flex-shrink: 0; }
.tool-head .ico svg { width: 18px; height: 18px; }
.tool-head h3 { font-size: 18px; }
.tool-screen { background: var(--parchment); border-radius: var(--r-md); padding: 16px; box-shadow: inset 0 0 0 1px var(--border-deep); }
.rng { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--warm-sand); margin: 9px 0; outline: none; cursor: pointer; }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ivory); box-shadow: var(--shadow-ring), 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; border: none; }
.rng::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ivory); box-shadow: var(--shadow-ring); cursor: pointer; border: none; }
.tool-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding: 6px 0; }
.tool-row + .tool-row { border-top: 1px dashed var(--border-deep); }
.tool-row .k { color: var(--stone); }
.tool-row .v { font-family: var(--mono); color: var(--charcoal); text-align: right; }
.tool-result { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-deep); flex-wrap: wrap; }
.tool-result .big { font-family: var(--serif); font-size: clamp(24px, 3.5vw, 30px); color: var(--near-black); }
.tool-result .big.pos { color: var(--green); }
.slider { height: 5px; background: var(--warm-sand); border-radius: 3px; position: relative; margin: 9px 0; }
.slider .fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--terracotta); border-radius: 3px; }
.slider .knob { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: var(--ivory); box-shadow: var(--shadow-ring), 0 1px 3px rgba(0,0,0,0.18); transform: translate(-50%,-50%); }
/* ── Blog rows (index) ──────────────────────────────────── */
.post-row {
display: grid; grid-template-columns: 64px 1fr auto; gap: clamp(12px, 2vw, 20px);
align-items: center; padding: clamp(16px, 2.5vw, 20px) 8px;
border-bottom: 1px solid var(--border-deep); transition: background var(--t);
cursor: pointer; border-radius: var(--r-md);
}
.post-row:hover { background: var(--ivory); }
.post-date { font-family: var(--mono); font-size: 12px; color: var(--stone); text-align: center; line-height: 1.3; }
.post-date b { display: block; font-size: 22px; color: var(--charcoal); font-weight: 500; }
.post-main { min-width: 0; }
.post-main h3 { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.25; transition: color var(--t); }
.post-row:hover .post-main h3 { color: var(--terracotta); }
.post-main .ex { font-size: 14px; color: var(--olive); margin-top: 4px; }
.post-side { text-align: right; flex-shrink: 0; }
.post-tags { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.post-read { font-size: 13px; color: var(--stone); font-family: var(--mono); white-space: nowrap; margin-top: 8px; }
/* ── Courses ────────────────────────────────────────────── */
.course { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.course-top { padding: 22px 24px 0; }
.course-cover {
height: 118px; margin: 0; border-radius: 0;
background: var(--tint-terra); position: relative; overflow: hidden;
display: grid; place-items: center;
border-bottom: 1px solid var(--border-deep);
}
.course-cover.g2 { background: var(--tint-green); }
.course-cover.g3 { background: var(--warm-sand); }
.course-cover .n {
font-family: var(--serif); font-size: clamp(52px, 8vw, 72px);
color: rgba(20,20,19,0.11); font-weight: 600; line-height: 1;
}
.course-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.course-badge {
position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px;
background: var(--terracotta); color: var(--ivory); font-family: var(--mono);
font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
padding: 5px 10px; border-radius: 999px; box-shadow: var(--shadow-whisper);
}
.course-badge svg { width: 12px; height: 12px; }
.course-badge--free { background: var(--near-black); }
.course--pro:hover { box-shadow: var(--shadow-lift), 0 0 0 1.5px var(--terracotta); }
.course-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-deep);
flex-wrap: wrap;
}
.course-progress {
display: flex; flex-direction: column; gap: 8px;
margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-deep);
}
.course-progress .muted { font-size: 12px; line-height: 1.35; }
.course-price { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--terracotta-d); }
.course-result { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--green); font-weight: 500; text-align: right; }
.course-result svg { width: 14px; height: 14px; flex-shrink: 0; }
.course-body h3 { font-size: 20px; line-height: 1.22; margin: 0; }
.course-body p { font-size: 14px; color: var(--olive); line-height: 1.55; margin: 0; flex: 1; }
.course-meta { display: flex; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--stone); flex-wrap: wrap; }
.course-meta .d { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); flex-shrink: 0; }
.progress { height: 5px; background: var(--warm-sand); border-radius: 3px; overflow: hidden; }
.progress .bar { height: 100%; background: var(--terracotta); border-radius: 3px; }
.courses-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: stretch; }
.courses-catalog.is-free { grid-template-columns: minmax(0, 420px); justify-content: center; margin-inline: auto; }
.courses-catalog.is-pro { grid-template-columns: repeat(2, 1fr); max-width: calc(2 * var(--card-max, 360px) + var(--grid-gap)); margin-inline: auto; }
.card--link.course:hover .course-foot .course-cta,
.card--link.course:hover .course-price { color: var(--terracotta); }
.course-cta {
font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--charcoal);
display: inline-flex; align-items: center; gap: 6px; transition: color var(--t);
}
/* ── About ──────────────────────────────────────────────── */
.about-band { background: var(--near-black); }
.about-band .eyebrow { color: var(--warm-silver); }
.about-band .eyebrow::before { background: var(--coral); }
.about-band h2 { color: var(--ivory); }
.about-band p { color: var(--warm-silver); }
.about-band .about-grid p { color: var(--warm-silver); }
.about-band .about-photo { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), var(--shadow-lift); background: var(--dark-surface); }
.about-band .about-photo img { filter: grayscale(1) contrast(1.06); }
.about-band .chip { background: var(--dark-surface); color: var(--warm-silver); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
.about-band .chip--dot::before { background: var(--coral); }
.about-band .sec-head .tlink { color: var(--warm-silver); }
.about-band .sec-head .tlink:hover { color: var(--ivory); }
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.about-photo { border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-ring); background: var(--warm-sand); max-width: 360px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.about-grid h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 18px; }
.about-grid p { font-size: 17px; color: var(--olive); margin-bottom: 14px; }
.about-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
/* ── Contact ────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
.contact-l h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.1; letter-spacing: -0.02em; margin: 18px 0 16px; }
.contact-l h2 .accent { color: var(--terracotta); }
.contact-l p { font-size: 17px; color: var(--olive); max-width: 32em; }
.contact-l .eyebrow .av-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; }
.contact-l .eyebrow .av-dot::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%;
border: 1px solid var(--green); opacity: 0.5; animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0%{transform:scale(0.6);opacity:0.6} 80%,100%{transform:scale(1.5);opacity:0} }
.contact-l .eyebrow::before { display: none; }
.contact-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.contact-meta span { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--charcoal); }
.contact-meta svg { width: 17px; height: 17px; color: var(--stone); flex-shrink: 0; }
.contact-r { display: flex; flex-direction: column; gap: 12px; }
.ccard { display: flex; align-items: center; gap: 15px; padding: 18px 20px; background: var(--ivory); border-radius: var(--r-lg); box-shadow: var(--shadow-ring); transition: box-shadow var(--t), transform var(--t); }
.ccard:hover { box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); transform: translateY(-2px); }
.ccard .ci { width: 46px; height: 46px; border-radius: 12px; background: var(--terracotta); color: var(--ivory); display: grid; place-items: center; flex-shrink: 0; }
.ccard .ci svg { width: 23px; height: 23px; }
.ccard .ci--mail { background: var(--near-black); }
.ccard .ci--ch { background: var(--warm-sand); color: var(--terracotta); }
.ccard .ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ccard .cn { font-size: 16px; font-weight: 600; color: var(--near-black); }
.ccard .cd { font-size: 13.5px; color: var(--stone); }
.ccard .carr { width: 18px; height: 18px; color: var(--stone); margin-left: auto; flex-shrink: 0; transition: transform var(--t), color var(--t); }
.ccard:hover .carr { color: var(--terracotta); transform: translate(2px, -2px); }
/* ── Uslugi page ────────────────────────────────────────── */
.svc-page { display: flex; flex-direction: column; gap: 18px; }
.svc-row { display: grid; grid-template-columns: 1fr auto; gap: clamp(16px, 3vw, 28px); align-items: start; padding: clamp(22px, 3vw, 30px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.svc-row .sl h3 { font-size: clamp(20px, 2.5vw, 24px); margin-bottom: 8px; }
.svc-row .sl > p { font-size: 16px; color: var(--olive); max-width: 42em; margin-bottom: 16px; }
.svc-incl { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.svc-incl span { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--charcoal); }
.svc-incl span::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.svc-row .sr { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 140px; flex-shrink: 0; }
.svc-row .price { font-family: var(--mono); font-size: clamp(18px, 2.5vw, 22px); font-weight: 500; color: var(--near-black); white-space: nowrap; }
.svc-row .price small { display: block; font-size: 12px; color: var(--stone); font-weight: 400; margin-top: 2px; }
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); counter-reset: p; }
.proc .step {
counter-increment: p;
display: flex;
flex-direction: column;
padding: clamp(22px, 3vw, 28px);
border-radius: var(--r-xl);
background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
height: 100%;
}
.proc .step .n { width: 44px; height: 44px; border-radius: 50%; background: var(--tint-terra); color: var(--terracotta); display: grid; place-items: center; font-family: var(--mono); font-size: 17px; font-weight: 500; margin-bottom: 14px; flex-shrink: 0; }
.proc .step .n::before { content: counter(p); }
.proc .step h3 { font-size: 19px; margin-bottom: 8px; line-height: 1.2; }
.proc .step p { font-size: 15px; color: var(--olive); line-height: 1.55; margin: 0; flex: 1; }
/* ── Blog page ──────────────────────────────────────────── */
.feat { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; overflow: hidden; padding: 0; }
.feat .cover { background: var(--near-black); position: relative; min-height: 280px; display: grid; place-items: center; overflow: hidden; }
.feat .cover .big { font-family: var(--mono); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); position: relative; z-index: 1; padding: 0 16px; text-align: center; }
.feat .cover svg { position: absolute; inset: 0; opacity: 0.5; width: 100%; height: 100%; }
.feat .fb { padding: clamp(24px, 4vw, 38px) clamp(24px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.feat .fb h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.feat .fb p { font-size: 16px; color: var(--olive); }
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.post { display: flex; flex-direction: column; gap: 13px; padding: 26px; }
.post .meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--stone); font-family: var(--mono); flex-wrap: wrap; }
.post h3 { font-size: 20px; line-height: 1.25; transition: color var(--t); }
.post:hover h3 { color: var(--terracotta); }
.post p { font-size: 14.5px; color: var(--olive); flex: 1; }
.post .more { font-size: 13.5px; color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.post .more svg { width: 14px; height: 14px; transition: transform var(--t); }
.post:hover .more svg { transform: translateX(3px); }
.callout--dark { background: var(--near-black); }
.callout--dark .ico { color: var(--coral); }
.callout--dark p { color: var(--warm-silver); }
.callout--dark a { color: var(--coral); }
/* ── Video-cards (blog with видео) ──────────────────────── */
.vcard {
display: flex; flex-direction: column;
padding: 0; overflow: hidden;
transition: transform var(--t), box-shadow var(--t);
}
.vcard--feat {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
margin: 0 0 28px;
}
.vthumb {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: linear-gradient(135deg, #1f1f1d, #30302e);
--vthumb-fade-1: rgba(0,0,0,0.05);
--vthumb-fade-2: rgba(0,0,0,0.45);
}
.vcard--feat .vthumb { aspect-ratio: auto; height: 100%; min-height: 280px; }
.vthumb img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease), filter var(--t);
filter: saturate(1.05);
}
.vthumb::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, var(--vthumb-fade-1) 0%, var(--vthumb-fade-1) 40%, var(--vthumb-fade-2) 100%);
pointer-events: none;
}
.vcard:hover .vthumb img { transform: scale(1.04); filter: saturate(1.15); }
.vplay {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: clamp(56px, 8vw, 78px); height: clamp(56px, 8vw, 78px);
border-radius: 50%;
background: rgba(255,255,255,0.96);
color: var(--terracotta);
display: grid; place-items: center;
box-shadow: 0 10px 36px rgba(0,0,0,0.32), 0 0 0 0 rgba(201,100,66,0.4);
z-index: 2;
transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.vplay svg { width: 36%; height: 36%; transform: translateX(6%); }
.vcard:hover .vplay {
transform: translate(-50%, -50%) scale(1.06);
background: var(--ivory);
box-shadow: 0 14px 44px rgba(0,0,0,0.36), 0 0 0 8px rgba(201,100,66,0.18);
}
.vbadge {
position: absolute; top: 14px; left: 14px; z-index: 2;
font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px;
background: rgba(20,20,19,0.72); color: var(--ivory);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.vbadge--solid { background: var(--terracotta); }
/* Theme tints for thumbs (extra fallback color if image fails) */
.vthumb--ai { background: linear-gradient(135deg, #1c2530, #2c3848); }
.vthumb--seo { background: linear-gradient(135deg, #2a2826, #3d3a35); }
.vthumb--marketing { background: linear-gradient(135deg, #322a23, #46402f); }
.vthumb--career { background: linear-gradient(135deg, #243029, #34453a); }
.vbody {
padding: clamp(18px, 2.6vw, 24px) clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px);
display: flex; flex-direction: column; gap: 10px;
}
.vcard--feat .vbody { padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px); justify-content: center; gap: 14px; }
.vmeta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--stone); font-family: var(--mono); flex-wrap: wrap; }
.vmeta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); }
.vbody h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.18; letter-spacing: -0.02em; transition: color var(--t); }
.vbody h3 { font-size: 19px; line-height: 1.25; transition: color var(--t); }
.vcard:hover h2, .vcard:hover h3 { color: var(--terracotta); }
.vbody p { font-size: 15px; color: var(--olive); line-height: 1.55; flex: 1; }
.vcard--feat .vbody p { font-size: 16px; }
.vcard .tlink { font-size: 14px; color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.vcard .tlink .arrow { width: 14px; height: 14px; transition: transform var(--t); }
.vcard:hover .tlink .arrow { transform: translateX(3px); }
/* ── Keysy page ─────────────────────────────────────────── */
.kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.kgrid .kcard[hidden] { display: none !important; }
.kgrid-empty { margin: 32px 0; text-align: center; color: var(--stone); font-size: 15px; }
.kcard { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
.kthumb {
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
display: grid;
place-items: center;
--kthumb-bg-1: #1f1f1d;
--kthumb-bg-2: #30302e;
--kthumb-fg: var(--ivory);
--kthumb-unit: var(--coral);
--kthumb-stroke: var(--coral);
background:
radial-gradient(140% 100% at 100% 0%, rgba(255,255,255,0.10), transparent 55%),
radial-gradient(120% 80% at 0% 100%, rgba(0,0,0,0.30), transparent 60%),
linear-gradient(135deg, var(--kthumb-bg-1), var(--kthumb-bg-2));
}
.kthumb::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 24px 24px, 12px 12px;
background-position: 0 0, 12px 12px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 100%);
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.kthumb::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.22) 100%),
radial-gradient(80% 60% at 50% 110%, var(--kthumb-stroke, var(--coral)), transparent 70%);
opacity: 0.35;
pointer-events: none;
z-index: 0;
mix-blend-mode: screen;
}
.kthumb svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
opacity: 0.7;
filter: drop-shadow(0 0 8px var(--kthumb-stroke, var(--coral)));
transition: opacity var(--t), filter var(--t);
z-index: 1;
}
.kthumb svg path[fill="none"] { stroke: var(--kthumb-stroke); stroke-width: 2.4; }
.kthumb .big {
position: relative; z-index: 2;
font-family: var(--serif); font-size: clamp(30px, 5vw, 54px); font-weight: 600;
color: var(--kthumb-fg); letter-spacing: -0.025em; text-align: center; padding: 0 12px;
text-shadow: 0 2px 16px rgba(0,0,0,0.35);
line-height: 1;
}
.kthumb .big .unit {
color: var(--kthumb-unit); font-size: clamp(15px, 2.2vw, 22px);
font-weight: 500; letter-spacing: 0.02em;
text-shadow: none;
display: block; margin-top: 6px;
text-transform: uppercase;
opacity: 0.9;
}
.kthumb-tag {
position: absolute; top: 14px; left: 14px; z-index: 3;
font-family: var(--mono); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 6px 11px; border-radius: 8px;
background: rgba(250, 249, 245, 0.96); color: var(--charcoal);
box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.6);
min-width: 32px; text-align: center;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform var(--t), background var(--t);
}
.kcard:hover .kthumb svg { opacity: 0.95; filter: drop-shadow(0 0 14px var(--kthumb-stroke, var(--coral))); }
.kcard:hover .kthumb-tag { transform: translateY(-1px); background: var(--ivory); }
/* Thumb themes — different gradient + chart stroke per niche */
.kthumb--edtech { --kthumb-bg-1: #2a2826; --kthumb-bg-2: #3d3a35; --kthumb-stroke: #d9c293; --kthumb-unit: #d9c293; }
.kthumb--travel { --kthumb-bg-1: #3a2e2a; --kthumb-bg-2: #5a4138; --kthumb-stroke: #e89a78; --kthumb-unit: #e89a78; }
.kthumb--medicine { --kthumb-bg-1: #3a2528; --kthumb-bg-2: #5a3537; --kthumb-stroke: #ee9a82; --kthumb-unit: #ee9a82; }
.kthumb--ecommerce { --kthumb-bg-1: #243029; --kthumb-bg-2: #34453a; --kthumb-stroke: #8fb592; --kthumb-unit: #8fb592; }
.kthumb--b2b { --kthumb-bg-1: #1c2530; --kthumb-bg-2: #2c3848; --kthumb-stroke: #9ec0e0; --kthumb-unit: #9ec0e0; }
.kthumb--cro { --kthumb-bg-1: #322a23; --kthumb-bg-2: #46402f; --kthumb-stroke: #e0c478; --kthumb-unit: #e0c478; }
.kthumb--services { --kthumb-bg-1: #3a2724; --kthumb-bg-2: #5a3a30; --kthumb-stroke: #d97757; --kthumb-unit: #d97757; }
.kthumb--olive { --kthumb-bg-1: #2a2e25; --kthumb-bg-2: #3d4332; --kthumb-stroke: #b9c08a; --kthumb-unit: #b9c08a; }
.kcard:hover .kthumb-tag { background: var(--ivory); }
.kbody { padding: clamp(20px, 3vw, 24px) clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.kbody .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kbody h3 { font-size: clamp(18px, 2.5vw, 22px); line-height: 1.2; }
.kbody p { font-size: 15px; color: var(--olive); }
.kstats { display: flex; gap: clamp(16px, 3vw, 26px); margin-top: 4px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border-cream); }
.kstats .s .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--near-black); }
.kstats .s .k { font-size: 12px; color: var(--stone); }
/* Top stats summary on /cases/ */
.cases-summary {
display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 44px);
margin: 0 0 24px; padding: 18px clamp(20px, 3vw, 28px);
background: var(--ivory); border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.cs-item { display: flex; flex-direction: column; gap: 4px; }
.cs-item .v { font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); font-weight: 600; color: var(--near-black); line-height: 1; letter-spacing: -0.01em; }
.cs-item .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); }
/* ── Case study pages ───────────────────────────────────── */
.case-page .case-layout,
.case-page .case-content,
.case-page .case-figure,
.case-page .case-table-block,
.case-page .case-table-wrap,
.case-page .case-code {
min-width: 0;
}
.case-page .case-content {
max-width: none;
width: 100%;
}
.case-page .case-table-block {
max-width: 100%;
}
.case-page .case-table-wrap,
.case-page .case-code {
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.case-page .case-code pre {
max-width: 100%;
overflow-x: auto;
}
.case-page .section--after-case {
padding-top: clamp(28px, 5vw, 44px);
padding-bottom: clamp(28px, 5vw, 44px);
}
.case-page .section--after-case + .section--after-case {
padding-top: clamp(16px, 4vw, 24px);
}
.case-page .sec-head { margin-bottom: 22px; }
/* ── Case page ──────────────────────────────────────────── */
.case-head { padding-block: clamp(28px, 5vw, 40px) 0; }
.case-head h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.024em; max-width: 16em; margin: 0 0 18px; }
.case-head .sub { font-size: clamp(17px, 2.2vw, 19px); color: var(--olive); max-width: 38em; line-height: 1.62; margin: 0; }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 22px; }
.case-facts {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border-deep);
}
.case-fact {
padding: 16px 18px; border-radius: var(--r-lg); background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-fact .k {
display: block; font-size: 11px; font-family: var(--mono); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--stone); margin-bottom: 6px;
}
.case-fact .v { font-size: 15px; color: var(--near-black); font-weight: 500; line-height: 1.35; }
.case-metrics-section { padding-block: 28px 0; }
.case-metrics {
background: var(--ivory); border-radius: var(--r-2xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
padding: clamp(22px, 3.5vw, 32px) clamp(20px, 4vw, 36px);
}
.case-metrics-label {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--stone); margin-bottom: 18px;
}
.case-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 28px); }
.case-metric .v {
font-family: var(--serif); font-size: clamp(28px, 4.5vw, 40px); font-weight: 600;
letter-spacing: -0.02em; color: var(--near-black); line-height: 1;
}
.case-metric .v .u { color: var(--terracotta); font-size: 0.72em; }
.case-metric .k { font-size: 13px; color: var(--stone); margin-top: 8px; line-height: 1.35; }
.case-visual { padding-block: 28px 0; }
.case-visual-inner {
position: relative; overflow: hidden; border-radius: var(--r-2xl);
background: var(--near-black); min-height: 200px;
display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center;
box-shadow: var(--shadow-ring), var(--shadow-lift);
}
.case-visual-chart { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.case-visual-copy { position: relative; z-index: 1; padding: clamp(28px, 5vw, 44px); color: var(--ivory); }
.case-visual-kicker {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--warm-silver); display: block; margin-bottom: 10px;
}
.case-visual-num {
font-family: var(--serif); font-size: clamp(36px, 6vw, 56px); font-weight: 600;
letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px;
}
.case-visual-num .unit { color: var(--coral); font-size: 0.55em; font-weight: 500; }
.case-visual-copy p { font-size: 15px; color: var(--warm-silver); max-width: 22em; margin: 0; }
.case-layout { display: block; padding-block: clamp(28px, 4vw, 40px) clamp(48px, 7vw, 64px); min-width: 0; }
.case-page .case-head .case-toc {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--border-deep);
}
.case-page .toc { position: static; margin: 0; }
.case-page .toc-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 0;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
.case-page .toc a {
display: inline;
padding: 0;
border-radius: 0;
border: none;
background: none;
box-shadow: none;
font-size: 14px;
line-height: 1.45;
color: var(--stone);
white-space: nowrap;
}
.case-page .toc a + a::before {
content: '·';
margin: 0 10px;
color: var(--ring-warm);
font-weight: 400;
pointer-events: none;
}
.case-page .toc a:hover { color: var(--near-black); }
.case-page .toc a.active {
color: var(--terracotta);
font-weight: 500;
background: none;
box-shadow: none;
}
.toc { position: sticky; top: calc(var(--nav-h) + 16px); }
.toc-inner {
padding: 18px 16px 16px; border-radius: var(--r-xl); background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.toc .tt { font-size: 11px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 12px; padding-left: 14px; }
.toc a { display: block; font-size: 14px; color: var(--olive); padding: 8px 0 8px 14px; border-left: 2px solid transparent; transition: all var(--t); line-height: 1.35; }
.toc a:hover { color: var(--near-black); border-left-color: var(--border-deep); }
.toc a.active { color: var(--terracotta); border-left-color: var(--terracotta); font-weight: 500; }
.case-content { max-width: none; min-width: 0; width: 100%; }
.case-content section { margin-bottom: 52px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.case-content section:last-child { margin-bottom: 0; }
.case-content h2 { font-size: clamp(24px, 3.5vw, 30px); margin-bottom: 16px; letter-spacing: -0.02em; }
.case-content h3 { font-size: 20px; margin: 28px 0 12px; letter-spacing: -0.015em; line-height: 1.25; }
.case-content h3:first-child { margin-top: 0; }
.case-content p { font-size: clamp(16px, 2vw, 17px); line-height: 1.72; color: var(--charcoal); margin-bottom: 16px; }
.case-content p:last-child { margin-bottom: 0; }
.case-content .callout { margin: 22px 0; }
.case-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 4px; padding: 0; }
.case-list li { position: relative; padding-left: 26px; font-size: 16px; color: var(--charcoal); line-height: 1.6; }
.case-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.case-content strong { color: var(--near-black); font-weight: 600; }
.case-steps { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 0; counter-reset: cstep; }
.case-step {
counter-increment: cstep; display: grid; grid-template-columns: 44px 1fr; gap: 16px;
padding: 20px 22px; border-radius: var(--r-xl); background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
align-items: start;
}
.case-step .sn {
width: 44px; height: 44px; border-radius: 50%; background: var(--tint-sand);
color: var(--terracotta); display: grid; place-items: center;
font-family: var(--mono); font-size: 16px; font-weight: 600; flex-shrink: 0;
}
.case-step .sn::before { content: counter(cstep); }
.case-step .sb h3 { margin: 2px 0 8px; font-size: 18px; line-height: 1.25; }
.case-step .sb p { font-size: 15px; color: var(--olive); line-height: 1.58; margin: 0; }
.case-results {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0;
}
.case-result-item {
padding: 16px 18px; border-radius: var(--r-lg); background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-result-item .v { display: block; font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--near-black); margin-bottom: 4px; }
.case-result-item .k { font-size: 13px; color: var(--stone); line-height: 1.35; }
.case-quote {
margin: 8px 0 0; padding: clamp(24px, 4vw, 32px); border: none;
border-radius: var(--r-2xl); background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
border-left: 4px solid var(--terracotta);
}
.case-quote p {
font-size: clamp(18px, 2.5vw, 21px); line-height: 1.58; color: var(--near-black);
font-weight: 500; margin: 0 0 20px; font-style: normal;
}
.case-quote-who { display: flex; align-items: center; gap: 12px; }
.case-quote-who .av {
width: 44px; height: 44px; border-radius: 50%; background: var(--tint-sand);
display: grid; place-items: center; font-weight: 600; color: var(--terracotta); flex-shrink: 0;
}
.case-quote-who .nm { display: block; font-size: 14px; font-weight: 600; color: var(--near-black); }
.case-quote-who .ro { display: block; font-size: 13px; color: var(--stone); margin-top: 2px; }
.case-more { align-items: stretch; }
.case-more-card {
display: flex; flex-direction: column; gap: 12px; padding: 22px 24px;
color: inherit; text-decoration: none; height: 100%;
}
.case-more-card h3 { font-size: 19px; line-height: 1.25; margin: 0; transition: color var(--t); }
.case-more-card p { font-size: 14px; color: var(--olive); line-height: 1.5; margin: 0; flex: 1; }
.case-more-card:hover h3 { color: var(--terracotta); }
.case-more-tag {
align-self: flex-start; font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: 0.04em; color: var(--charcoal); background: var(--parchment);
padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-more-tag--dot { display: inline-flex; align-items: center; gap: 6px; }
.case-more-tag--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
/* === Case-page tables (revamped) === */
.case-table-block {
margin: 32px 0 28px;
border-radius: var(--r-xl);
background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
overflow: hidden;
position: relative;
}
.case-table-block .case-table-caption,
.case-content .case-table-caption,
.case-table-caption {
margin: 0 !important;
padding: 16px 22px 14px;
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
line-height: 1.45;
color: var(--near-black);
background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
border-bottom: 1px solid var(--border-deep);
border-left: 3px solid var(--terracotta);
letter-spacing: -0.005em;
}
.case-table-wrap {
overflow-x: auto;
margin: 0;
border-radius: 0;
box-shadow: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* Fade hint that there's more content to scroll */
background-image:
linear-gradient(to right, var(--ivory), var(--ivory)),
linear-gradient(to right, var(--ivory), var(--ivory)),
linear-gradient(to right, rgba(20,20,19,0.06), rgba(20,20,19,0)),
linear-gradient(to left, rgba(20,20,19,0.06), rgba(20,20,19,0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-color: var(--ivory);
background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
.case-table {
width: 100%;
min-width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14.5px;
background: var(--ivory);
table-layout: auto;
}
.case-table th,
.case-table td {
padding: 14px 20px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--border-cream);
}
.case-table th {
position: sticky;
top: 0;
z-index: 1;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--charcoal);
background: var(--parchment);
white-space: nowrap;
box-shadow: 0 1px 0 var(--border-deep);
padding-top: 12px;
padding-bottom: 12px;
}
.case-table tbody tr { transition: background var(--t); }
.case-table tbody tr:nth-child(even) td { background: rgba(245, 244, 237, 0.7); }
.case-table tbody tr:hover td { background: var(--tint-sand); }
.case-table tbody tr:last-child td { border-bottom: none; }
.case-table td {
color: var(--charcoal);
line-height: 1.55;
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
background: var(--ivory);
}
.case-table td:first-child {
font-weight: 500;
color: var(--near-black);
}
.case-table .vol,
.case-table td.num,
.case-table .num {
font-family: var(--mono);
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
color: var(--near-black);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* Auto-color volume cells by their content via attribute selectors */
.case-table .vol[data-trend="up"],
.case-table .vol.is-up,
.case-table td.num.is-up { color: var(--green); }
.case-table .vol[data-trend="down"],
.case-table .vol.is-down,
.case-table td.num.is-down { color: var(--terracotta-d); }
/* Lightweight content-based color: cells containing '+' get up, '−'/'-' get down */
.case-table .vol { position: relative; }
.case-col-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 0; }
.case-col-item {
padding: 14px 16px; background: var(--parchment); border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-col-item dt { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--near-black); margin-bottom: 4px; }
.case-col-item dd { font-size: 13px; color: var(--olive); line-height: 1.45; margin: 0; }
.case-code {
margin: 18px 0 0; border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep); background: var(--near-black);
}
.case-code-label {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--warm-silver); padding: 10px 16px; background: rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.case-code pre {
margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px;
line-height: 1.55; color: #e8e6dc; -webkit-overflow-scrolling: touch; tab-size: 2;
}
.case-code + .case-code { margin-top: 14px; }
.case-sample {
margin: 22px 0;
padding: 20px 22px;
border-radius: var(--r-xl);
background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
border-left: 3px solid var(--terracotta);
}
.case-sample-label {
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 12px;
color: var(--near-black);
}
.case-sample p {
font-size: 16px;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
}
.case-sample p + p {
margin-top: 12px;
}
.case-sample-next {
margin-top: 16px !important;
font-size: 15px;
font-weight: 600;
color: var(--green);
}
.case-sample--bad { border-left-color: var(--terracotta); }
.case-sample--bad .case-sample-label { color: var(--terracotta); }
.case-sample--good { border-left-color: var(--green); }
.case-sample--good .case-sample-label { color: var(--green); }
.case-sample + .case-sample { margin-top: 14px; }
/* Problem → Solution paired block */
.case-ps {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 22px 0;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-ps + .case-ps { margin-top: 14px; }
.case-ps-col { padding: 24px 26px; }
.case-ps-col--problem { border-right: 1px solid var(--border-deep); }
.case-ps-head {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 11px 4px 9px;
border-radius: 999px;
margin-bottom: 14px;
}
.case-ps-col--problem .case-ps-head { color: var(--terracotta); background: var(--tint-terra); }
.case-ps-col--solution .case-ps-head { color: var(--green); background: var(--tint-green); }
.case-ps-head .ico { width: 14px; height: 14px; flex-shrink: 0; }
.case-ps p {
font-size: 15.5px;
line-height: 1.62;
color: var(--charcoal);
margin: 0;
}
.case-ps p strong { color: var(--near-black); }
.case-ps-list {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.case-ps-list li {
position: relative;
padding-left: 18px;
font-size: 14.5px;
line-height: 1.5;
color: var(--charcoal);
}
.case-ps-list li::before {
content: "";
position: absolute;
left: 2px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
}
.case-ps p + .case-ps-list { margin-top: 12px; }
@media (max-width: 720px) {
.case-ps { grid-template-columns: 1fr; }
.case-ps-col { padding: 18px 20px; }
.case-ps-col--problem { border-right: none; border-bottom: 1px solid var(--border-deep); }
}
/* Refinement-query cells inside case tables — pill style */
.case-table .case-q-list {
display: flex;
flex-wrap: wrap;
gap: 5px 6px;
}
.case-table .case-q {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
line-height: 1;
color: var(--charcoal);
white-space: nowrap;
padding: 5px 9px 5px 7px;
background: var(--parchment);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-table .case-q::before {
content: "+";
color: var(--terracotta);
font-weight: 700;
margin-right: 4px;
}
.case-table td .badge {
white-space: nowrap;
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
border-radius: 999px;
background: var(--tint-sand);
color: var(--charcoal);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-flow {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin: 22px 0 0;
padding: 0;
}
.case-flow li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 10px;
padding: 14px 16px;
border-radius: var(--r-lg);
background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
font-size: 15px;
line-height: 1.55;
color: var(--charcoal);
}
.case-flow-from { font-weight: 600; color: var(--near-black); }
.case-flow-arrow { color: var(--terracotta); font-weight: 600; flex-shrink: 0; }
.case-flow-to { color: var(--olive); }
.case-figure {
margin: 28px 0 22px;
max-width: 100%;
}
.case-figure img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
background: var(--parchment);
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-figure figcaption {
margin-top: 12px;
font-size: 13px;
color: var(--stone);
line-height: 1.55;
text-align: center;
max-width: 56em;
margin-left: auto;
margin-right: auto;
}
.case-figures {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 22px;
margin: 28px 0 22px;
align-items: start;
}
.case-figures .case-figure {
margin: 0;
}
.case-figures .case-figure img {
height: 100%;
max-height: 360px;
object-fit: cover;
object-position: top;
}
.case-figures--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.case-figures--3 .case-figure img {
max-height: 300px;
}
.case-audience-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--grid-gap);
margin: 22px 0 8px;
}
.case-audience-grid .case-chart-card--wide { grid-column: 1 / -1; }
.case-chart-card {
background: var(--ivory);
border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
padding: clamp(18px, 3vw, 24px);
}
.case-chart-card h4 {
margin: 0 0 16px;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stone);
}
.case-bar-chart { display: flex; flex-direction: column; gap: 12px; }
.case-bar {
display: grid;
grid-template-columns: minmax(72px, 92px) 1fr auto;
gap: 8px 14px;
align-items: center;
}
.case-bar-label {
font-size: 13px;
line-height: 1.35;
color: var(--charcoal);
}
.case-bar-label strong { color: var(--near-black); font-weight: 600; }
.case-bar-track {
position: relative;
height: 10px;
background: var(--warm-sand);
border-radius: 999px;
overflow: hidden;
}
.case-bar-fill {
height: 100%;
border-radius: 999px;
background: var(--terracotta);
}
.case-bar-fill--mid { background: #8a8f7a; }
.case-bar-fill--low { background: var(--ring-deep); }
.case-bar-track--affinity .case-bar-baseline {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--charcoal);
opacity: 0.35;
}
.case-bar-val {
min-width: 3.2em;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
color: var(--near-black);
text-align: right;
white-space: nowrap;
}
.case-bar-val em {
font-style: normal;
font-size: 11px;
color: var(--stone);
font-weight: 400;
}
.case-chart-foot {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-deep);
font-size: 13px;
line-height: 1.55;
color: var(--olive);
}
.case-chart-foot strong { color: var(--near-black); font-weight: 600; }
.case-gender-chart {
display: grid;
grid-template-columns: 120px 1fr;
gap: 18px;
align-items: center;
}
.case-gender-donut {
width: 120px;
height: 120px;
transform: rotate(-90deg);
}
.case-gender-donut circle { fill: none; stroke-width: 18; }
.case-gender-donut .seg-m { stroke: var(--terracotta); }
.case-gender-donut .seg-f { stroke: #d4d0c4; }
.case-gender-legend { display: flex; flex-direction: column; gap: 10px; }
.case-gender-item {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 10px;
align-items: center;
font-size: 14px;
color: var(--charcoal);
}
.case-gender-item .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--terracotta);
}
.case-gender-item.is-secondary .dot { background: var(--warm-sand); box-shadow: inset 0 0 0 1px var(--border-deep); }
.case-gender-item .pct {
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
color: var(--near-black);
}
.case-funnel-chart {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin-top: 4px;
}
.case-funnel-stage {
width: 100%;
padding: 18px 20px;
border-radius: var(--r-lg);
background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-funnel-stage--top { border-left: 4px solid var(--terracotta); }
.case-funnel-stage--mid {
width: 92%;
border-left: 4px solid #8a8f7a;
}
.case-funnel-stage--bot {
width: 84%;
border-left: 4px solid var(--near-black);
}
.case-funnel-connector {
width: 2px;
height: 16px;
background: var(--border-deep);
position: relative;
flex-shrink: 0;
}
.case-funnel-connector::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--border-deep);
}
.case-funnel-stage-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 12px;
}
.case-funnel-num {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
color: var(--terracotta);
background: var(--tint-terra);
}
.case-funnel-stage--mid .case-funnel-num {
color: #6b705c;
background: rgba(138, 143, 122, 0.14);
}
.case-funnel-stage--bot .case-funnel-num {
color: var(--near-black);
background: rgba(20, 20, 19, 0.08);
}
.case-funnel-name {
font-size: 15px;
font-weight: 600;
color: var(--near-black);
}
.case-funnel-queries {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.case-funnel-queries li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: var(--r-md);
background: var(--parchment);
font-size: 14px;
line-height: 1.5;
color: var(--charcoal);
}
.case-funnel-queries li::before {
content: "";
width: 6px;
height: 6px;
margin-top: 7px;
border-radius: 50%;
background: var(--terracotta);
flex-shrink: 0;
}
.case-funnel-stage--mid .case-funnel-queries li::before { background: #8a8f7a; }
.case-funnel-stage--bot .case-funnel-queries li::before { background: var(--near-black); }
.case-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--grid-gap);
margin: 22px 0 8px;
}
.case-meta-grid .case-chart-card--wide { grid-column: 1 / -1; }
.case-chart-lead {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.55;
color: var(--olive);
}
.case-serp-samples {
display: flex;
flex-direction: column;
gap: 12px;
}
.case-serp {
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-serp-url {
display: block;
margin-bottom: 5px;
font-size: 12px;
line-height: 1.4;
color: #2d6a4f;
}
.case-serp-title {
display: block;
font-size: clamp(16px, 2.2vw, 18px);
line-height: 1.35;
color: #1a4fd6;
letter-spacing: -0.01em;
}
.case-serp-title strong { font-weight: 600; color: #153ea8; }
.case-meta-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.case-meta-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 12px;
border-radius: 999px;
background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
font-size: 13px;
line-height: 1.35;
color: var(--charcoal);
}
.case-meta-pill strong { color: var(--near-black); font-weight: 600; }
.case-meta-splits {
display: flex;
flex-direction: column;
gap: 10px;
}
.case-meta-split {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
padding: 12px 14px;
border-radius: var(--r-md);
background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
font-size: 13px;
line-height: 1.4;
color: var(--charcoal);
}
.case-meta-split-a,
.case-meta-split-b {
padding: 8px 10px;
border-radius: var(--r-sm);
background: var(--ivory);
box-shadow: inset 0 0 0 1px var(--border-deep);
text-align: center;
}
.case-meta-split-a { font-weight: 600; color: var(--near-black); }
.case-meta-split-sep {
font-family: var(--mono);
font-size: 15px;
font-weight: 600;
color: var(--terracotta);
}
.case-figure--zoom {
cursor: zoom-in;
}
.case-figure--zoom img {
border-radius: var(--r-md);
transition: box-shadow var(--t);
}
.case-figure--zoom:hover img {
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-figure--zoom:focus-visible {
outline: none;
}
.case-figure--zoom:focus-visible img {
outline: 2px solid var(--terracotta);
outline-offset: 3px;
}
.case-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 32px);
background: rgba(20, 20, 19, 0.92);
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease, visibility 0.22s ease;
}
.case-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.case-lightbox-close {
position: absolute;
top: max(16px, env(safe-area-inset-top, 0px));
right: max(16px, env(safe-area-inset-right, 0px));
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: var(--ivory);
display: grid;
place-items: center;
cursor: pointer;
transition: background 0.2s ease;
}
.case-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.case-lightbox-close:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 2px;
}
.case-lightbox-inner {
margin: 0;
max-width: min(96vw, 1280px);
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.case-lightbox-img {
display: block;
max-width: 100%;
max-height: calc(100vh - 120px);
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--r-md);
box-shadow: var(--shadow-lift);
background: var(--parchment);
}
.case-lightbox-cap {
margin: 0;
max-width: min(680px, 96vw);
font-size: 14px;
line-height: 1.55;
color: var(--warm-silver);
text-align: center;
}
body.case-lightbox-open { overflow: hidden; }
.chartcard { background: var(--ivory); border-radius: var(--r-xl); box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep); padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 28px); margin: 22px 0 0; }
.chartcard .ch-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.chartcard .ch-top .lbl { font-size: 13px; color: var(--stone); }
.chartcard .ch-top .big { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--near-black); }
.chartcard .ch-top .big .u { color: var(--terracotta); }
.xaxis { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--mono); color: var(--stone); margin-top: 8px; }
/* legacy aliases (case cards on index) */
.case-facts .f .k { font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); }
.case-facts .f .v { font-size: 16px; color: var(--near-black); font-weight: 500; margin-top: 5px; }
.result-band { background: var(--near-black); border-radius: var(--r-2xl); padding: clamp(24px, 4vw, 38px) clamp(20px, 4vw, 44px); margin: 34px 0 8px; }
.result-band .rb-h { font-size: 12px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-silver); margin-bottom: 22px; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 28px); }
.result-grid .r .v { font-size: clamp(28px, 4.5vw, 44px); font-weight: 600; letter-spacing: -0.02em; color: var(--ivory); line-height: 1; }
.result-grid .r .v .u { color: var(--coral); }
.result-grid .r .k { font-size: 13.5px; color: var(--warm-silver); margin-top: 10px; }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 18px; margin: 18px 0; }
.steps .step { display: grid; grid-template-columns: 38px 1fr; gap: 16px; }
.steps .step .sn { counter-increment: step; width: 38px; height: 38px; border-radius: 50%; background: var(--tint-terra); color: var(--terracotta); display: grid; place-items: center; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.steps .step .sn::before { content: counter(step); }
.steps .step .sb h3 { margin: 6px 0 6px; font-size: 18px; }
.steps .step .sb p { font-size: 15.5px; margin-bottom: 0; }
.quote { border-left: 3px solid var(--terracotta); padding: 6px 0 6px 24px; margin: 8px 0; }
.quote p { font-size: clamp(18px, 2.5vw, 20px); line-height: 1.55; color: var(--near-black); font-weight: 500; margin-bottom: 14px; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--warm-sand); display: grid; place-items: center; font-weight: 600; color: var(--charcoal); flex-shrink: 0; }
.quote .who .nm { font-size: 14px; font-weight: 600; color: var(--near-black); }
.quote .who .ro { font-size: 13px; color: var(--stone); }
.footer--compact { padding: clamp(32px, 5vw, 48px) 0 clamp(24px, 4vw, 36px); }
/* ── Article page ───────────────────────────────────────── */
.art-head { padding-block: clamp(24px, 4vw, 36px) 0; }
.art-head h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.026em; max-width: 17em; margin: 18px 0 18px; }
.art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep); }
.art-author { display: flex; align-items: center; gap: 12px; }
.art-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(1); flex-shrink: 0; }
.art-author .nm { font-size: 15px; font-weight: 600; color: var(--near-black); }
.art-author .ro { font-size: 13px; color: var(--stone); }
.art-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); }
.art-meta .mi { font-size: 13.5px; color: var(--stone); font-family: var(--mono); }
.art-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; padding-block: clamp(28px, 4vw, 40px) clamp(48px, 7vw, 70px); }
.art-toc { position: sticky; top: calc(var(--nav-h) + 16px); }
.art-toc .tt { font-size: 12px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.art-toc a { display: block; font-size: 14px; color: var(--olive); padding: 7px 0 7px 14px; border-left: 2px solid var(--border-deep); transition: all var(--t); }
.art-toc a:hover { color: var(--near-black); }
.art-toc a.active { color: var(--terracotta); border-left-color: var(--terracotta); font-weight: 500; }
.art-body { max-width: 680px; }
.art-body .dek { font-size: clamp(18px, 2.5vw, 21px); line-height: 1.6; color: var(--olive); margin-bottom: 28px; }
.art-body section { margin-bottom: 36px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.art-body h2 { font-size: clamp(24px, 3.5vw, 28px); margin-bottom: 14px; letter-spacing: -0.02em; }
.art-body p { font-size: clamp(16px, 2vw, 18px); line-height: 1.78; color: var(--charcoal); margin-bottom: 18px; }
.art-body ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0 0 18px; }
.art-body ul li { position: relative; padding-left: 28px; font-size: 17px; color: var(--charcoal); line-height: 1.6; }
.art-body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.art-body strong { color: var(--near-black); font-weight: 600; }
.art-body .callout { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 20px 22px; margin: 26px 0; background: var(--tint-terra); }
.art-body .callout .ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--terracotta); margin-top: 1px; }
.art-body .callout p { font-size: 16.5px; margin: 0; }
.art-share { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 26px; border-top: 1px solid var(--border-deep); flex-wrap: wrap; }
.art-share span { font-size: 14px; color: var(--stone); }
.art-share .btn { margin-left: auto; width: auto; }
/* ── Article hero with video (bright/visual blog post) ───── */
.art-hero-tags {
display: flex; align-items: center;
gap: 14px; flex-wrap: wrap;
margin: 0 0 18px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--stone);
}
.art-hero-tag {
display: inline-flex; align-items: center; gap: 6px;
color: var(--terracotta);
font-weight: 500;
}
.art-hero-tag svg { width: 14px; height: 14px; }
.art-hero-tag--ink,
.art-hero-tag--green,
.art-hero-tag--sand { color: var(--charcoal); font-weight: 400; }
.art-hero-tags > * + *::before {
content: "·";
margin-right: 14px;
color: var(--ring-deep);
}
.art-video {
position: relative;
margin: 8px 0 28px;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--r-2xl);
background: linear-gradient(135deg, #1f1f1d, #30302e);
box-shadow: 0 12px 40px rgba(20,20,19,0.18), 0 0 0 1px var(--border-deep);
}
.art-video iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
border: 0;
}
.art-video-cap {
margin: -20px 0 28px;
font-size: 13.5px;
color: var(--stone);
text-align: center;
font-family: var(--mono);
letter-spacing: 0.02em;
}
.art-tldr {
display: grid; grid-template-columns: 46px 1fr; gap: 14px;
margin: 28px 0 28px;
padding: 22px 24px;
background: linear-gradient(135deg, var(--tint-terra), #f5e7df);
border-radius: var(--r-xl);
box-shadow: 0 8px 30px rgba(201,100,66,0.10), inset 0 0 0 1px rgba(201,100,66,0.18);
}
.art-tldr .ico {
width: 46px; height: 46px; border-radius: 50%;
background: var(--terracotta); color: var(--ivory);
display: grid; place-items: center; flex-shrink: 0;
box-shadow: 0 6px 18px rgba(201,100,66,0.32);
}
.art-tldr .ico svg { width: 24px; height: 24px; }
.art-tldr .ttl {
display: block;
font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--terracotta); margin-bottom: 8px;
}
.art-tldr p { font-size: 17px; line-height: 1.6; color: var(--near-black); margin: 0; font-weight: 500; }
.art-tldr ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.art-tldr ul li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--near-black); }
.art-tldr ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 2px; background: var(--terracotta); border-radius: 2px; }
.art-body .callout--green {
background: var(--tint-green);
box-shadow: inset 0 0 0 1px rgba(58,107,74,0.16);
}
.art-body .callout--green .ico { color: var(--green); }
.art-body .callout--sand {
background: var(--tint-sand);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.art-body .callout--sand .ico { color: var(--charcoal); }
.art-body figure {
margin: 26px 0;
}
.art-body figure img {
display: block; width: 100%; height: auto;
border-radius: var(--r-lg);
box-shadow: 0 8px 28px rgba(20,20,19,0.10), inset 0 0 0 1px var(--border-deep);
background: var(--parchment);
}
.art-body figure figcaption {
margin-top: 10px;
font-size: 13px;
color: var(--stone);
text-align: center;
line-height: 1.5;
}
.art-takeaway {
margin: 32px 0 24px;
padding: 26px 28px;
background: var(--near-black);
color: var(--ivory);
border-radius: var(--r-xl);
box-shadow: 0 14px 40px rgba(20,20,19,0.22);
position: relative;
overflow: hidden;
}
.art-takeaway::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 60% at 100% 0%, rgba(217,119,87,0.20), transparent 60%);
pointer-events: none;
}
.art-takeaway .ttl {
display: block;
font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--coral); margin-bottom: 10px;
position: relative; z-index: 1;
}
.art-takeaway p { font-size: 17.5px; line-height: 1.6; color: var(--ivory); margin: 0; position: relative; z-index: 1; }
.art-takeaway p + p { margin-top: 10px; }
.art-takeaway strong { color: var(--coral); font-weight: 600; }
/* Bright article meta chip row */
.art-meta .badge--bright {
background: var(--terracotta); color: var(--ivory);
box-shadow: 0 3px 10px rgba(201,100,66,0.24);
}
/* ── KP (Коммерческие предложения) ───────────────────────── */
.kp-head { padding-block: clamp(24px, 4vw, 36px) 0; }
.kp-head h1 {
font-size: clamp(28px, 5vw, 44px);
line-height: 1.08;
letter-spacing: -0.024em;
margin: 18px 0 18px;
max-width: 22em;
}
.kp-meta {
display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
padding: 18px 0;
border-top: 1px solid var(--border-deep);
border-bottom: 1px solid var(--border-deep);
}
.kp-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); }
.kp-meta .mi { font-size: 13.5px; color: var(--stone); font-family: var(--mono); }
.kp-intro {
font-size: clamp(17px, 2.2vw, 20px);
line-height: 1.6;
color: var(--charcoal);
max-width: 38em;
margin: 26px 0 0;
}
.kp-body { max-width: 820px; }
.kp-body .case-table-block { margin-left: -8px; margin-right: -8px; }
.kp-body section { margin-bottom: 40px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.kp-body h2 {
font-size: clamp(24px, 3.5vw, 30px);
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.kp-body h3 {
font-size: 19px;
margin: 24px 0 10px;
letter-spacing: -0.015em;
}
.kp-body p {
font-size: clamp(16px, 2vw, 17.5px);
line-height: 1.72;
color: var(--charcoal);
margin-bottom: 16px;
}
.kp-body ul {
list-style: none; display: flex; flex-direction: column; gap: 10px;
margin: 0 0 18px; padding: 0;
}
.kp-body ul li {
position: relative;
padding-left: 24px;
font-size: 16px;
color: var(--charcoal);
line-height: 1.6;
}
.kp-body ul li::before {
content: "";
position: absolute; left: 4px; top: 10px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--terracotta);
}
.kp-body strong { color: var(--near-black); font-weight: 600; }
/* Highlighted pricing block */
.kp-price {
margin: 28px 0;
padding: clamp(22px, 3vw, 28px);
background: linear-gradient(135deg, var(--tint-terra), #f4e0d3);
border-radius: var(--r-xl);
box-shadow: 0 8px 28px rgba(201,100,66,0.10), inset 0 0 0 1px rgba(201,100,66,0.18);
}
.kp-price .kp-price-label {
font-family: var(--mono); font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--terracotta); display: block; margin-bottom: 10px;
}
.kp-price .kp-price-amount {
font-family: var(--serif); font-size: clamp(28px, 4vw, 36px);
font-weight: 600; color: var(--near-black);
line-height: 1.1; letter-spacing: -0.02em;
margin: 0 0 10px;
}
.kp-price p { font-size: 15.5px; color: var(--charcoal); margin: 0; }
.kp-price ul { margin-top: 14px; }
/* ============================================================
KP SEO MATRIX — card-grid вместо широкой таблицы
============================================================ */
.kp-matrix {
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px; margin: 24px 0;
}
.kp-matrix-card {
display: flex; flex-direction: column;
background: var(--ivory); border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
overflow: hidden;
transition: box-shadow var(--t), transform var(--t);
}
.kp-matrix-card:hover {
box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--ring-deep);
transform: translateY(-1px);
}
/* Header: URL + type badge */
.kp-matrix-h {
display: flex; justify-content: space-between; align-items: center;
gap: 10px; padding: 12px 16px;
background: var(--parchment);
border-bottom: 1px solid var(--border-deep);
}
.kp-matrix-h .url {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 12.5px;
color: var(--terracotta-d); font-weight: 500;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-matrix-h .url svg { flex-shrink: 0; color: var(--stone); }
.kp-matrix-type {
font-family: var(--mono); font-size: 10.5px;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px;
background: var(--warm-sand); color: var(--charcoal);
flex-shrink: 0; font-weight: 500;
}
.kp-matrix-type--commerce {
background: rgba(201,100,66,0.14); color: var(--terracotta-d);
}
.kp-matrix-type--info {
background: rgba(94, 134, 98, 0.16); color: #5e8662;
}
.kp-matrix-type--barrier {
background: rgba(120, 130, 145, 0.16); color: #586176;
}
/* Meta dl (H1 / Title / Description) */
.kp-matrix-meta {
display: grid; grid-template-columns: auto 1fr;
gap: 6px 14px; padding: 14px 16px;
margin: 0; border-bottom: 1px solid var(--border-deep);
}
.kp-matrix-meta dt {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--stone); font-weight: 500;
padding-top: 2px;
}
.kp-matrix-meta dd {
margin: 0; font-size: 13.5px; color: var(--near-black); line-height: 1.45;
}
.kp-matrix-meta dt:first-of-type + dd { font-weight: 600; }
/* Footer: keywords chips + why */
.kp-matrix-f {
padding: 14px 16px;
display: flex; flex-direction: column; gap: 14px;
}
.kp-matrix-keys .lbl,
.kp-matrix-why .lbl {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--stone); font-weight: 500;
display: block; margin-bottom: 6px;
}
.kp-matrix-keys .chips {
display: flex; flex-wrap: wrap; gap: 5px;
}
.kp-matrix-keys .chip {
font-family: var(--mono); font-size: 11.5px;
color: var(--charcoal); background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
padding: 3px 9px; border-radius: 999px;
}
.kp-matrix-why p {
margin: 0; font-size: 13px; color: var(--charcoal);
line-height: 1.5; font-style: italic;
}
@media (max-width: 820px) {
.kp-matrix { grid-template-columns: 1fr; gap: 12px; }
}
/* ============================================================
KP RECEIPT — paper-check / счёт-стиль для итогового блока
============================================================ */
.kp-receipt {
margin: 36px 0;
display: flex; justify-content: center;
position: relative;
}
.kp-receipt-paper {
width: 100%;
max-width: 640px;
background: #fefcf7;
padding: clamp(26px, 4vw, 38px) clamp(24px, 4vw, 44px);
position: relative;
box-shadow:
0 1px 0 rgba(0,0,0,0.04),
0 14px 30px -10px rgba(20,20,19,0.18),
inset 0 0 0 1px rgba(0,0,0,0.04);
font-family: var(--mono);
color: var(--near-black);
}
/* Perforated top + bottom edges */
.kp-receipt-paper::before,
.kp-receipt-paper::after {
content: "";
position: absolute; left: 0; right: 0; height: 12px;
background-image:
radial-gradient(circle at 8px 8px, transparent 5px, #fefcf7 5.5px),
radial-gradient(circle at 8px 8px, transparent 5px, transparent 5.5px);
background-size: 16px 12px;
background-repeat: repeat-x;
pointer-events: none;
}
.kp-receipt-paper::before {
top: -10px;
background: radial-gradient(circle at 8px 0, transparent 5px, #fefcf7 5.5px) repeat-x 0 0/16px 12px;
filter: drop-shadow(0 -2px 1px rgba(0,0,0,0.04));
}
.kp-receipt-paper::after {
bottom: -10px;
background: radial-gradient(circle at 8px 12px, transparent 5px, #fefcf7 5.5px) repeat-x 0 0/16px 12px;
filter: drop-shadow(0 2px 1px rgba(0,0,0,0.04));
}
/* Header */
.kp-receipt-head {
display: flex; justify-content: space-between;
align-items: flex-start; gap: 24px;
padding-bottom: 18px;
border-bottom: 2px dashed var(--border-deep);
margin-bottom: 22px;
}
.kp-receipt-head--meta-only { justify-content: flex-end; }
.kp-receipt-logo .mark {
display: block;
font-family: var(--serif); font-size: 18px; font-weight: 600;
color: var(--near-black); letter-spacing: -0.014em;
}
.kp-receipt-logo .sub {
display: block; font-size: 11.5px; letter-spacing: 0.04em;
color: var(--stone); margin-top: 3px;
}
.kp-receipt-meta {
display: flex; flex-direction: column; gap: 4px;
font-size: 11.5px; text-align: right;
}
.kp-receipt-meta > div {
display: flex; justify-content: flex-end; gap: 8px;
align-items: baseline;
}
.kp-receipt-meta .lbl {
color: var(--stone); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px;
}
.kp-receipt-meta .val { color: var(--near-black); font-weight: 500; }
/* Title */
.kp-receipt-title { margin-bottom: 22px; }
.kp-receipt-title .lbl {
display: block;
font-size: 10.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--terracotta);
margin-bottom: 4px;
}
.kp-receipt-title .nm {
display: block;
font-family: var(--serif); font-size: clamp(20px, 2.5vw, 24px);
font-weight: 600; color: var(--near-black); letter-spacing: -0.014em;
line-height: 1.18;
}
/* Items */
.kp-receipt-items {
display: flex; flex-direction: column; gap: 18px;
padding: 18px 0;
border-top: 1px solid var(--border-deep);
border-bottom: 1px solid var(--border-deep);
}
.kp-receipt-item {
display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
align-items: end;
}
.kp-receipt-item .desc {
display: flex; flex-direction: column; gap: 3px;
min-width: 0;
}
.kp-receipt-item .desc .nm {
font-family: var(--sans); font-size: 15px;
font-weight: 600; color: var(--near-black);
line-height: 1.25;
}
.kp-receipt-item .desc .sub {
font-family: var(--sans); font-size: 12.5px;
color: var(--stone); line-height: 1.4;
}
.kp-receipt-item .leader {
flex: 1; min-width: 20px;
border-bottom: 1.5px dotted var(--ring-deep);
margin: 0 4px 7px;
align-self: end; min-height: 8px;
}
.kp-receipt-item .amount {
font-family: var(--mono); font-size: 15.5px; font-weight: 500;
color: var(--near-black); letter-spacing: 0.01em;
white-space: nowrap;
}
/* Totals (descriptive rows) */
.kp-receipt-totals {
display: flex; flex-direction: column; gap: 9px;
padding: 18px 0 20px;
border-bottom: 1px solid var(--border-deep);
}
.kp-receipt-totals .row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 16px;
font-family: var(--sans);
}
.kp-receipt-totals .k {
font-size: 12px; letter-spacing: 0.04em;
color: var(--olive); text-transform: uppercase;
font-weight: 500;
}
.kp-receipt-totals .v {
font-size: 14px; color: var(--near-black);
text-align: right; font-weight: 500;
}
/* Grand total */
.kp-receipt-grand {
display: flex; justify-content: space-between; align-items: baseline;
padding: 20px 0;
margin-top: 4px;
border-top: 4px double var(--near-black);
border-bottom: 4px double var(--near-black);
}
.kp-receipt-grand .lbl {
font-family: var(--sans); font-size: 15px; font-weight: 600;
color: var(--near-black); text-transform: uppercase;
letter-spacing: 0.06em;
}
.kp-receipt-grand .val {
font-family: var(--mono); font-size: clamp(26px, 4vw, 32px);
font-weight: 600; color: var(--terracotta-d);
letter-spacing: 0.01em; line-height: 1;
}
/* Footer: signature + stamp */
.kp-receipt-foot {
display: flex; justify-content: space-between; gap: 24px;
padding-top: 24px; margin-top: 4px;
align-items: flex-end;
}
.kp-receipt-sign { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-receipt-sign .lbl {
font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--stone);
}
.kp-receipt-sign .signature {
font-family: 'Segoe Script', 'Brush Script MT', cursive;
font-size: 26px; color: var(--terracotta-d);
line-height: 1; letter-spacing: 0.02em;
margin-top: 2px;
transform: rotate(-2deg);
transform-origin: left center;
display: inline-block;
}
.kp-receipt-sign .sub {
font-size: 11px; color: var(--stone);
font-family: var(--sans); margin-top: 8px;
}
/* Round stamp */
.kp-receipt-stamp {
position: relative;
width: 96px; height: 96px;
border-radius: 50%;
border: 2.5px solid var(--terracotta);
display: grid; place-items: center;
color: var(--terracotta);
flex-shrink: 0;
transform: rotate(-8deg);
opacity: 0.75;
filter: contrast(0.95);
}
.kp-receipt-stamp::before {
content: "";
position: absolute; inset: 6px;
border: 1.5px solid var(--terracotta);
border-radius: 50%;
}
.kp-receipt-stamp .ring {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--mono); font-size: 9px;
letter-spacing: 0.14em; font-weight: 600;
}
/* Curve "PAWETTA · SEO · 2026" around the top of the stamp via clip */
.kp-receipt-stamp .ring {
background: conic-gradient(transparent 0deg, transparent 360deg);
}
.kp-receipt-stamp .middle {
font-family: var(--serif);
font-size: 22px; font-weight: 700;
letter-spacing: 0.03em; line-height: 1;
color: var(--terracotta);
}
@media (max-width: 640px) {
.kp-receipt-head { flex-direction: column; gap: 12px; }
.kp-receipt-meta > div { justify-content: flex-start; }
.kp-receipt-item { grid-template-columns: 1fr; }
.kp-receipt-item .leader { display: none; }
.kp-receipt-item .amount {
font-size: 16px; padding-top: 2px;
border-top: 1px dashed var(--border-deep);
}
.kp-receipt-foot { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
.kp-receipt-stamp { margin-left: auto; }
}
/* Source-link badge near title */
.kp-source {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 12px;
color: var(--stone);
padding: 6px 10px;
border-radius: 999px;
background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.kp-source svg { width: 12px; height: 12px; }
/* Inline tag list at top of KP card/page */
.kp-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 14px;
}
/* KP figures inside body */
.kp-body figure {
margin: 24px 0;
}
.kp-body figure img {
display: block; width: 100%; height: auto;
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
background: var(--parchment);
}
.kp-body figure figcaption {
margin-top: 10px;
font-size: 13px; color: var(--stone);
text-align: center;
line-height: 1.5;
}
/* Final CTA card on KP page */
.kp-cta {
margin: 36px 0 0;
padding: clamp(24px, 3vw, 32px);
background: var(--near-black);
color: var(--ivory);
border-radius: var(--r-xl);
box-shadow: 0 14px 40px rgba(20,20,19,0.22);
position: relative; overflow: hidden;
}
.kp-cta::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(80% 60% at 100% 0%, rgba(217,119,87,0.22), transparent 60%);
pointer-events: none;
}
.kp-cta h3 {
position: relative; z-index: 1;
font-size: clamp(20px, 3vw, 24px);
font-weight: 600;
margin: 0 0 10px;
color: var(--ivory);
}
.kp-cta p {
position: relative; z-index: 1;
font-size: 16px;
color: var(--warm-silver);
margin: 0 0 20px;
}
.kp-cta .cta-actions {
position: relative; z-index: 1;
display: flex; gap: 12px; flex-wrap: wrap;
}
/* KP listing on /kp/ */
.kp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--grid-gap);
}
.kp-card {
display: flex; flex-direction: column;
padding: 24px 26px;
background: var(--ivory);
border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
text-decoration: none;
color: inherit;
transition: transform var(--t), box-shadow var(--t);
position: relative;
overflow: hidden;
}
.kp-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--terracotta), var(--coral));
opacity: 0.85;
}
.kp-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--ring-deep);
}
.kp-card-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 14px;
}
.kp-card h3 {
font-size: 18px;
line-height: 1.3;
margin: 0 0 10px;
color: var(--near-black);
transition: color var(--t);
}
.kp-card:hover h3 { color: var(--terracotta); }
.kp-card p {
font-size: 14.5px;
color: var(--olive);
line-height: 1.55;
margin: 0;
flex: 1;
}
.kp-card-foot {
display: flex; gap: 16px; flex-wrap: wrap;
margin-top: 16px; padding-top: 14px;
border-top: 1px solid var(--border-cream);
font-family: var(--mono); font-size: 12px;
color: var(--stone);
align-items: center;
}
.kp-card-foot .v { color: var(--near-black); font-weight: 500; }
.kp-card-arrow {
margin-left: auto;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--tint-sand);
display: grid; place-items: center;
transition: background var(--t), transform var(--t);
}
.kp-card:hover .kp-card-arrow { background: var(--terracotta); }
.kp-card:hover .kp-card-arrow svg { color: var(--ivory); transform: translateX(2px); }
.kp-card-arrow svg { width: 12px; height: 12px; color: var(--charcoal); transition: color var(--t), transform var(--t); }
/* ── Utility bands ──────────────────────────────────────── */
.band-ivory { background: var(--ivory); border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep); }
/* ══ Responsive (pages) ═══════════════════════════════════ */
@media (max-width: 1100px) {
.bgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-grid > .portrait-wrap { display: none; }
.hero-cta .btn { width: auto; }
.case-feat, .about-grid, .contact, .kgrid { grid-template-columns: 1fr; }
.cases-summary { gap: 18px 28px; padding: 16px 18px; }
.kthumb-tag { top: 10px; left: 10px; font-size: 10px; padding: 4px 8px; }
.about-photo { max-width: 280px; }
.about-grid .about-photo { margin: 0 auto; }
.post-row { grid-template-columns: 56px 1fr; }
.post-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; margin-top: 4px; padding-left: 56px; }
.post-read { margin-top: 0; }
.proc { grid-template-columns: 1fr 1fr; }
.svc-row { grid-template-columns: 1fr; }
.svc-row .sr { text-align: left; align-items: flex-start; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: space-between; }
.feat { grid-template-columns: 1fr; }
.vcard--feat { grid-template-columns: 1fr; }
.vcard--feat .vthumb { aspect-ratio: 16/9; min-height: 0; }
.feat .cover { min-height: 200px; }
.feat .fb { padding: 28px 24px; }
.case-layout, .art-layout { grid-template-columns: 1fr; gap: 24px; }
.art-toc { display: none; }
.case-facts, .case-metrics-grid { grid-template-columns: repeat(2, 1fr); }
.case-visual-inner { grid-template-columns: 1fr; min-height: 180px; }
.case-results { grid-template-columns: 1fr; }
.result-grid { grid-template-columns: 1fr 1fr; }
.marquee { flex-direction: column; align-items: flex-start; gap: 12px; }
.mq-viewport { width: 100%; }
.courses-catalog { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
.courses-catalog.is-pro { max-width: none; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.hero h1 { font-size: clamp(28px, 8vw, 36px); }
.hero-proof { gap: 16px 24px; }
.hero-proof .metric { flex: 1 1 calc(50% - 12px); min-width: 120px; }
.hero-cta { flex-direction: column; }
.hero-cta .btn { width: 100%; }
.case-proof { gap: 16px 24px; }
.case-proof .metric { flex: 1 1 calc(50% - 12px); }
.case-stats, .kstats { gap: 16px; }
.proc { grid-template-columns: 1fr; }
.bgrid { grid-template-columns: 1fr; }
.post-row { grid-template-columns: 1fr; padding: 16px 12px; }
.post-date { display: flex; align-items: center; gap: 10px; text-align: left; }
.post-date b { font-size: 18px; display: inline; }
.post-side { padding-left: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
.result-grid { grid-template-columns: 1fr; gap: 20px; }
.result-band { border-radius: var(--r-xl); }
.case-facts, .case-metrics-grid { grid-template-columns: 1fr; }
.case-more { grid-template-columns: 1fr; }
.case-col-grid { grid-template-columns: 1fr; }
.ccard { padding: 16px; gap: 12px; }
.ccard .cn { font-size: 15px; }
.art-share .btn { margin-left: 0; width: 100%; }
.sec-head--hero { flex-direction: column; align-items: flex-start; }
.sec-head--hero .tlink { align-self: flex-start; }
/* Case page — mobile spacing */
.case-page .wrap {
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.case-head { padding-top: 22px; }
.case-head h1 { font-size: clamp(26px, 7.5vw, 34px); }
.case-facts { margin-top: 22px; padding-top: 22px; gap: 10px; }
.case-fact { padding: 14px 16px; }
.case-metrics-section { padding-top: 22px; }
.case-metrics { padding: 20px 18px; border-radius: var(--r-xl); }
.case-metrics-grid { gap: 18px; }
.case-visual { padding-top: 22px; }
.case-visual-inner { border-radius: var(--r-xl); min-height: 0; }
.case-visual-copy { padding: 24px 20px; }
.case-visual-num { font-size: clamp(36px, 10vw, 48px); }
.case-layout { padding: 20px 0 36px; }
.case-content { min-width: 0; max-width: none; width: 100%; }
.case-content section { margin-bottom: 36px; }
.case-content h2 { font-size: clamp(22px, 6vw, 28px); }
.case-content h3 { font-size: 18px; margin-top: 28px; }
.case-content p { font-size: 16px; line-height: 1.65; }
.case-content .callout { padding: 16px; margin: 18px 0; gap: 12px; }
.case-list li { font-size: 15px; padding-left: 22px; }
.case-step { padding: 16px; gap: 12px; grid-template-columns: 40px 1fr; }
.case-step .sn { width: 40px; height: 40px; font-size: 15px; }
.case-results { gap: 10px; margin: 18px 0; }
.case-result-item { padding: 14px 16px; }
.case-figure { margin: 18px 0 18px; }
.case-figure figcaption { margin-top: 8px; font-size: 12px; }
.case-figures { grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
.case-figures--3 { grid-template-columns: 1fr; }
.case-figures .case-figure img,
.case-figures--3 .case-figure img { max-height: none; object-fit: contain; }
.case-audience-grid { grid-template-columns: 1fr; gap: 14px; margin: 18px 0 6px; }
.case-gender-chart { grid-template-columns: 96px 1fr; gap: 14px; }
.case-gender-donut { width: 96px; height: 96px; }
.case-bar { grid-template-columns: minmax(64px, 76px) 1fr auto; gap: 8px 10px; }
.case-funnel-stage--mid,
.case-funnel-stage--bot { width: 100%; }
.case-meta-grid { grid-template-columns: 1fr; gap: 14px; }
.case-meta-split { grid-template-columns: 1fr; gap: 8px; text-align: center; }
.case-meta-split-sep { justify-self: center; }
.case-code { max-width: 100%; border-radius: var(--r-md); }
.case-code-label { padding: 9px 14px; font-size: 10px; }
.case-code pre { padding: 14px; font-size: 11px; line-height: 1.5; }
.case-sample { padding: 16px 18px; margin: 18px 0; }
.case-flow li { padding: 12px 14px; font-size: 14px; gap: 6px 8px; }
.case-col-item { padding: 12px 14px; }
.case-table-block { margin: 22px 0 20px; border-radius: var(--r-lg); }
.case-table-wrap { max-width: 100%; }
.case-table { min-width: 560px; font-size: 13px; }
.case-table th,
.case-table td { padding: 11px 14px; }
.case-table th { font-size: 11.5px; }
.case-table .vol,
.case-table td.num,
.case-table .num { font-size: 12.5px; }
.case-table-caption { padding: 13px 16px; font-size: 13.5px; line-height: 1.45; border-left-width: 3px; }
.case-table .case-q { font-size: 11px; padding: 4px 8px; }
.case-quote { padding: 20px 18px; border-radius: var(--r-xl); }
#verstka > section { margin-top: 8px; }
.case-page .inline-code { word-break: break-word; overflow-wrap: anywhere; }
.case-page .case-table { min-width: 520px; }
.case-page .section--after-case { padding-top: 32px; padding-bottom: 32px; }
.case-page .case-more-card { padding: 18px 16px; }
.case-page .crumb { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 480px) {
.course-cover { height: 100px; }
.course-cover .n { font-size: 48px; }
.course-body { padding: 18px 18px 20px; }
.about-links .chip { font-size: 12px; }
}
.courses-group { margin-bottom: 36px; }
.courses-group-title {
font-size: clamp(18px, 2.5vw, 22px); font-weight: 600;
margin-bottom: 18px; color: var(--charcoal);
font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.courses-grid { align-items: stretch; }
.course-landing { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: start; padding-block: clamp(32px, 5vw, 48px) clamp(56px, 8vw, 80px); }
.course-landing-cover {
position: relative; border-radius: var(--r-2xl); overflow: hidden;
background: var(--tint-terra); aspect-ratio: 4/5; max-height: 560px;
box-shadow: var(--shadow-ring), var(--shadow-lift);
display: grid; place-items: center;
}
.course-landing-cover svg.deco { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; }
.course-landing-cover .n {
position: relative; z-index: 1;
font-family: var(--serif); font-size: clamp(80px, 14vw, 120px);
font-weight: 600; color: rgba(20,20,19,0.12); line-height: 1;
}
.course-landing-cover .badge-free {
position: absolute; top: 18px; right: 18px; z-index: 2;
background: var(--near-black); color: var(--ivory);
font-family: var(--mono); font-size: 12px; font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 8px 14px; border-radius: 999px;
}
.course-landing-main { display: flex; flex-direction: column; gap: 18px; }
.course-landing-main h1 { font-size: clamp(30px, 4.5vw, 44px); line-height: 1.08; letter-spacing: -0.026em; }
.course-landing-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; color: var(--stone); }
.course-landing-meta span { display: inline-flex; align-items: center; gap: 7px; }
.course-landing-meta svg { width: 16px; height: 16px; color: var(--terracotta); flex-shrink: 0; }
.course-landing-price {
display: inline-flex; align-items: baseline; gap: 10px; margin-top: 4px;
}
.course-landing-price .val {
font-family: var(--serif); font-size: clamp(32px, 4vw, 40px);
font-weight: 600; color: var(--near-black); letter-spacing: -0.02em;
}
.course-landing-price .val.is-free { color: var(--green); }
.course-landing-price .note { font-size: 14px; color: var(--stone); }
.course-landing-lead { font-size: clamp(17px, 2vw, 19px); line-height: 1.62; color: var(--olive); max-width: 36em; }
.course-landing-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 8px 0 4px; }
.course-landing-list li {
position: relative; padding-left: 28px; font-size: 16px; color: var(--charcoal); line-height: 1.5;
}
.course-landing-list li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
border-radius: 50%; background: var(--terracotta);
}
.course-landing-modules { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.course-landing-mod {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 16px; background: var(--ivory); border-radius: var(--r-lg);
box-shadow: var(--shadow-ring); font-size: 15px;
}
.course-landing-mod .nm { font-weight: 500; color: var(--near-black); }
.course-landing-mod .cnt { font-family: var(--mono); font-size: 12px; color: var(--stone); white-space: nowrap; }
.course-landing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.course-landing-actions .btn { padding: 14px 24px; font-size: 16px; }
@media (max-width: 900px) {
.course-landing { grid-template-columns: 1fr; }
.course-landing-cover { aspect-ratio: 16/10; max-height: none; order: -1; }
.course-landing-actions .btn { width: 100%; justify-content: center; }
.course-landing-actions .btn--sand { width: auto; flex: 1; min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
.mq-track { animation: none; }
.case-thumb .glyph path:first-child { stroke-dashoffset: 0; }
.ccard:hover { transform: none; }
}
/* ── Tools page ─────────────────────────────────────────── */
.page-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.tools-proof {
display: flex; gap: clamp(16px, 3vw, 52px); flex-wrap: wrap;
padding: 22px 0 26px; margin-bottom: 24px;
border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep);
}
.tools-proof .metric .num { font-size: clamp(28px, 4.5vw, 40px); }
.tools-proof .metric .lbl { margin-top: 6px; }
.tool-desc { font-size: 14px; color: var(--olive); line-height: 1.5; margin: -4px 0 0; }
.tool-head { position: relative; flex-wrap: wrap; }
.tool-head h3 { flex: 1; min-width: 120px; }
.tool-status {
font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
text-transform: uppercase; padding: 4px 8px; border-radius: 999px; margin-left: auto;
}
.tool-status--live { background: rgba(45,106,79,0.12); color: var(--green); }
.tool-status--soon { background: var(--warm-sand); color: var(--stone); }
.tool--soon { opacity: 0.92; }
.tool-screen--ghost { opacity: 0.72; pointer-events: none; }
/* ── Blog page extras ───────────────────────────────────── */
.blog-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
margin-bottom: 32px; padding-bottom: 28px;
border-bottom: 1px solid var(--border-deep);
}
.blog-stat { text-align: center; padding: 16px 8px; }
.blog-stat .num { font-family: var(--serif); font-size: clamp(28px, 4vw, 36px); color: var(--near-black); }
.blog-stat .lbl { font-size: 13px; color: var(--stone); margin-top: 6px; }
.blog-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 8px; }
.blog-list-head h2 { font-size: clamp(22px, 3vw, 28px); }
.blog-rows > a { display: block; color: inherit; text-decoration: none; }
/* ── About page ─────────────────────────────────────────── */
.about-hero {
position: relative;
padding: clamp(28px, 5vw, 40px) 0 clamp(48px, 7vw, 72px);
}
.about-hero-grid {
display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 64px);
align-items: center; margin-top: 22px;
}
.about-hero-copy h1 {
font-size: clamp(32px, 5.5vw, 52px); line-height: 1.08; letter-spacing: -0.022em;
margin-bottom: 20px;
}
.about-hero-copy h1 em { font-style: normal; color: var(--terracotta); }
.about-hero-copy .lead { max-width: 32em; margin-bottom: 0; }
.about-hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.about-hero .portrait-wrap { max-width: 400px; margin: 0 auto; width: 100%; }
.about-clients { padding-block: clamp(24px, 4vw, 36px); border-bottom: 1px solid var(--border-deep); }
.about-clients .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.about-client-row { display: flex; flex-wrap: wrap; gap: clamp(12px, 2.5vw, 28px); align-items: center; }
.about-client-row span { font-family: var(--serif); font-size: clamp(17px, 2.5vw, 22px); color: var(--charcoal); opacity: 0.55; transition: opacity var(--t); }
.about-client-row span:hover { opacity: 1; }
.about-timeline { position: relative; padding-left: 28px; max-width: 640px; }
.about-timeline::before {
content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px;
background: linear-gradient(var(--terracotta), var(--border-deep));
}
.about-tl-item { position: relative; padding: 0 0 32px 24px; }
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-item::before {
content: ""; position: absolute; left: -26px; top: 6px; width: 11px; height: 11px;
border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 2px var(--terracotta);
}
.about-tl-item .yr { font-family: var(--mono); font-size: 13px; color: var(--terracotta); margin-bottom: 4px; }
.about-tl-item h3 { font-size: 20px; margin-bottom: 6px; }
.about-tl-item p { font-size: 15px; color: var(--olive); }
.about-beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.about-belief {
padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl);
background: var(--ivory); box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
display: flex; flex-direction: column; gap: 12px;
}
.about-belief .ico {
width: 44px; height: 44px; border-radius: var(--r-md); background: var(--tint-sand);
color: var(--terracotta); display: grid; place-items: center;
}
.about-belief .ico svg { width: 22px; height: 22px; }
.about-belief h3 { font-size: 19px; }
.about-belief p { font-size: 15px; color: var(--olive); }
.about-stats-band {
background: var(--near-black); border-radius: var(--r-3xl);
padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 48px);
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); text-align: center;
}
.about-stats-band .num { font-family: var(--serif); font-size: clamp(32px, 5vw, 48px); color: var(--ivory); }
.about-stats-band .num .cu { font-variant-numeric: tabular-nums; }
.about-stats-band .lbl { font-size: 14px; color: var(--warm-silver); margin-top: 8px; }
.about-press { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.about-press-item {
padding: 22px; border-radius: var(--r-lg); background: var(--parchment);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.about-press-item .src { font-family: var(--mono); font-size: 12px; color: var(--stone); margin-bottom: 8px; }
.about-press-item p { font-size: 15px; color: var(--charcoal); line-height: 1.45; }
.about-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.about-link-card {
padding: 22px; border-radius: var(--r-lg); background: var(--ivory);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
transition: box-shadow var(--t), transform var(--t); color: inherit; text-decoration: none;
display: flex; flex-direction: column; gap: 8px;
}
.about-link-card:hover { box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); transform: translateY(-3px); }
.about-link-card .tag { font-family: var(--mono); font-size: 11px; color: var(--terracotta); text-transform: uppercase; letter-spacing: 0.06em; }
.about-link-card h3 { font-size: 18px; }
.about-link-card p { font-size: 14px; color: var(--olive); }
@media (max-width: 900px) {
.blog-stats { grid-template-columns: repeat(2, 1fr); }
.about-hero-grid { grid-template-columns: 1fr; }
.about-hero .portrait-wrap { max-width: 320px; order: -1; }
.about-beliefs, .about-press, .about-links-grid { grid-template-columns: 1fr; }
.about-stats-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.blog-stats { grid-template-columns: 1fr 1fr; }
.about-stats-band { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
Calculators — hub & individual pages
============================================================ */
/* Hub catalog */
.calc-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.calc-card {
display: flex; flex-direction: column; gap: 14px; padding: 24px;
color: inherit; text-decoration: none;
transition: box-shadow var(--t), transform var(--t);
}
.calc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); }
.calc-card .head { display: flex; align-items: center; gap: 11px; }
.calc-card .ico {
width: 38px; height: 38px; border-radius: var(--r-md);
background: var(--near-black); color: var(--coral);
display: grid; place-items: center; flex-shrink: 0;
}
.calc-card .ico svg { width: 19px; height: 19px; }
.calc-card h3 { font-size: 19px; line-height: 1.22; }
.calc-card .tag {
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta);
}
.calc-card p { font-size: 14.5px; color: var(--olive); line-height: 1.55; flex: 1; margin: 0; }
.calc-card .foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 14px; border-top: 1px solid var(--border-deep);
font-family: var(--mono); font-size: 12.5px; color: var(--stone);
}
.calc-card .foot .open {
color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
transition: gap var(--t);
}
.calc-card .foot .open svg { width: 13px; height: 13px; transition: transform var(--t); }
.calc-card:hover .foot .open svg { transform: translateX(3px); }
/* Calculator page layout */
.calc-head { padding-block: clamp(28px, 5vw, 40px) clamp(16px, 3vw, 28px); }
.calc-head h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.024em; max-width: 18em; margin: 18px 0 16px; }
.calc-head .lead { max-width: 42em; }
.calc-head .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.calc-section { padding-block: clamp(18px, 3vw, 28px); }
.calc-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 24px);
align-items: start;
}
.calc-grid--wide { grid-template-columns: 1.05fr 0.95fr; }
.calc-panel {
background: var(--ivory); border-radius: var(--r-2xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
padding: clamp(22px, 3vw, 30px);
}
.calc-panel + .calc-panel { margin-top: var(--grid-gap); }
.calc-panel .ph {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.calc-panel .ph h2 { font-size: clamp(18px, 2.5vw, 22px); letter-spacing: -0.014em; }
.calc-panel .ph .lbl {
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone);
}
/* Fields */
.calc-fields { display: grid; gap: 14px; }
.calc-fields--2 { grid-template-columns: 1fr 1fr; }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label {
font-size: 13px; color: var(--charcoal); font-weight: 500;
display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.calc-field label .h { font-size: 11.5px; font-family: var(--mono); color: var(--stone); font-weight: 400; }
.calc-input, .calc-select {
font-family: var(--mono); font-size: 15px; color: var(--near-black);
background: var(--parchment); border: 1px solid var(--border-deep);
border-radius: var(--r-md); padding: 11px 13px; width: 100%;
transition: border-color var(--t), box-shadow var(--t), background var(--t);
appearance: none; -webkit-appearance: none;
}
.calc-input:focus, .calc-select:focus {
outline: none; border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(201,100,66,0.15); background: var(--ivory);
}
.calc-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
padding-right: 36px; cursor: pointer;
}
.calc-input::placeholder { color: var(--warm-silver); }
.calc-input[type="number"]::-webkit-outer-spin-button,
.calc-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input[type="number"] { -moz-appearance: textfield; }
.calc-field .hint { font-size: 12.5px; color: var(--stone); line-height: 1.4; }
/* Segmented (presets / radios) */
.calc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-seg button, .calc-seg .opt {
font-family: var(--mono); font-size: 12.5px; font-weight: 500;
background: var(--parchment); color: var(--charcoal);
border: 1px solid var(--border-deep); border-radius: 999px;
padding: 7px 14px; cursor: pointer; transition: all var(--t);
}
.calc-seg button:hover, .calc-seg .opt:hover { color: var(--near-black); }
.calc-seg button.active, .calc-seg .opt.active {
background: var(--near-black); color: var(--ivory); border-color: var(--near-black);
}
/* Action row */
.calc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.calc-actions .btn { font-size: 14.5px; padding: 10px 16px; }
/* Result panel */
.calc-result-panel {
background: var(--near-black); color: var(--ivory);
border-radius: var(--r-2xl); padding: clamp(22px, 3vw, 30px);
position: sticky; top: calc(var(--nav-h) + 16px);
}
.calc-result-panel .lbl {
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-silver);
margin-bottom: 14px;
}
.calc-kpi {
font-family: var(--serif); font-size: clamp(38px, 6vw, 56px); font-weight: 600;
letter-spacing: -0.025em; line-height: 1; color: var(--ivory);
font-variant-numeric: tabular-nums;
}
.calc-kpi .u { color: var(--coral); font-size: 0.5em; font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.calc-kpi.pos { color: #b9e3a8; }
.calc-kpi.neg { color: #f3a08c; }
.calc-result-panel .sub { margin-top: 10px; font-size: 14px; color: var(--warm-silver); max-width: 30em; }
.calc-meters {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--dark-warm);
}
.calc-meter { display: flex; flex-direction: column; gap: 4px; }
.calc-meter .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--ivory); font-variant-numeric: tabular-nums; }
.calc-meter .v .u { color: var(--coral); font-size: 13px; }
.calc-meter .k { font-size: 12px; color: var(--warm-silver); }
.calc-bar {
height: 6px; background: var(--dark-warm); border-radius: 4px; overflow: hidden;
margin-top: 6px;
}
.calc-bar .fill { height: 100%; background: var(--coral); border-radius: 4px; transition: width 0.3s var(--ease); }
.calc-verdict {
margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--dark-warm);
display: flex; gap: 12px; align-items: flex-start;
font-size: 14.5px; color: var(--warm-silver); line-height: 1.55;
}
.calc-verdict .ico {
width: 22px; height: 22px; flex-shrink: 0; color: var(--coral);
display: grid; place-items: center; margin-top: 2px;
}
.calc-verdict .ico svg { width: 18px; height: 18px; }
.calc-verdict.ok .ico { color: #b9e3a8; }
.calc-verdict.warn .ico { color: #e6c067; }
.calc-verdict.bad .ico { color: #f3a08c; }
.calc-verdict strong { color: var(--ivory); font-weight: 600; }
/* Formula box */
.calc-formula {
background: var(--parchment); border-radius: var(--r-md);
padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--border-deep);
font-family: var(--mono); font-size: 13.5px; color: var(--charcoal);
line-height: 1.6; margin-top: 8px;
}
.calc-formula b { color: var(--near-black); font-weight: 600; }
.calc-formula .op { color: var(--terracotta); }
/* Scenario table */
.calc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.calc-table th, .calc-table td {
text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-deep);
font-family: var(--mono); color: var(--charcoal); white-space: nowrap;
}
.calc-table th {
background: var(--parchment); color: var(--stone);
font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
position: sticky; top: 0;
}
.calc-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--near-black); }
.calc-table td input, .calc-table td select {
font-family: var(--mono); font-size: 13px; color: var(--near-black);
background: transparent; border: 1px solid transparent;
border-radius: 6px; padding: 6px 8px; width: 100%;
transition: all var(--t);
}
.calc-table td input:hover, .calc-table td select:hover { border-color: var(--border-deep); background: var(--parchment); }
.calc-table td input:focus, .calc-table td select:focus { outline: none; border-color: var(--terracotta); background: var(--ivory); box-shadow: 0 0 0 2px rgba(201,100,66,0.15); }
.calc-table td.num input { text-align: right; }
.calc-table tr.is-optimal { background: rgba(201,100,66,0.07); }
.calc-table tr.is-optimal td { color: var(--terracotta-d); font-weight: 600; }
.calc-table tr.is-optimal td .badge {
display: inline-block; background: var(--terracotta); color: var(--ivory);
font-size: 10px; padding: 2px 7px; border-radius: 999px; margin-right: 6px;
letter-spacing: 0.04em; text-transform: uppercase;
}
.calc-table td.delta-pos { color: var(--green); }
.calc-table td.delta-neg { color: var(--error); }
.calc-table .row-act { width: 28px; }
.calc-table .row-act button {
width: 24px; height: 24px; border-radius: 6px; background: transparent;
border: 1px solid var(--border-deep); color: var(--stone); cursor: pointer;
display: grid; place-items: center; transition: all var(--t);
}
.calc-table .row-act button:hover { color: var(--error); border-color: var(--error); }
.calc-table .row-act button svg { width: 13px; height: 13px; }
/* Funnel stages */
.calc-funnel { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.calc-funnel .stage {
background: var(--parchment); border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--border-deep);
padding: 14px 16px; position: relative; overflow: hidden;
}
.calc-funnel .stage .fillbar {
position: absolute; left: 0; top: 0; bottom: 0;
background: var(--tint-terra); transition: width 0.35s var(--ease);
z-index: 0;
}
.calc-funnel .stage .row {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap;
}
.calc-funnel .stage .nm { font-size: 14px; font-weight: 600; color: var(--near-black); }
.calc-funnel .stage .nm small { display: block; font-weight: 400; color: var(--stone); font-size: 12px; margin-top: 2px; }
.calc-funnel .stage .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--near-black); font-variant-numeric: tabular-nums; }
.calc-funnel .stage.is-drop .fillbar { background: rgba(229,160,140,0.25); }
/* Forecast / multi-month table — wider, sticky first col */
.calc-table--forecast { min-width: 760px; }
.calc-table--forecast th:first-child, .calc-table--forecast td:first-child {
position: sticky; left: 0; background: var(--ivory);
border-right: 1px solid var(--border-deep);
}
.calc-table--forecast tr.is-target td { color: var(--green); font-weight: 600; }
/* Explainer (the "why" section under the calculator) */
.calc-why {
display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 3vw, 32px);
align-items: start; padding-top: clamp(20px, 3vw, 32px);
border-top: 1px solid var(--border-deep);
}
.calc-why h2 { font-size: clamp(24px, 3.5vw, 30px); letter-spacing: -0.02em; margin-bottom: 14px; }
.calc-why p { font-size: 16px; color: var(--charcoal); line-height: 1.72; margin-bottom: 14px; }
.calc-why ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.calc-why ul li { position: relative; padding-left: 24px; font-size: 15.5px; color: var(--charcoal); line-height: 1.6; }
.calc-why ul li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
/* Other calculators teaser at the bottom */
.calc-more {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap);
margin-top: 22px;
}
/* Link-style calculator card in tools-grid */
.tool--link { color: inherit; text-decoration: none; transition: box-shadow var(--t), transform var(--t); }
.tool--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); }
.tool--link .tool-desc { flex: 1; }
.tool-status--calc { background: var(--tint-terra); color: var(--terracotta-d); }
.tool-cta {
display: flex; align-items: center; justify-content: space-between;
margin-top: auto; padding-top: 14px;
border-top: 1px solid var(--border-deep);
font-family: var(--mono); font-size: 13px; color: var(--charcoal);
}
.tool-cta .open { color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.tool-cta .open svg { width: 13px; height: 13px; transition: transform var(--t); }
.tool--link:hover .tool-cta .open svg { transform: translateX(3px); }
/* Responsive */
@media (max-width: 960px) {
.calc-catalog { grid-template-columns: 1fr 1fr; }
.calc-more { grid-template-columns: 1fr 1fr; }
.calc-grid, .calc-grid--wide { grid-template-columns: 1fr; }
.calc-result-panel { position: static; }
.calc-why { grid-template-columns: 1fr; }
.calc-promo { flex-direction: column; align-items: flex-start; text-align: left; }
.calc-promo .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
.calc-catalog { grid-template-columns: 1fr; }
.calc-more { grid-template-columns: 1fr; }
.calc-fields--2 { grid-template-columns: 1fr; }
.calc-meters { grid-template-columns: 1fr; }
}
/* ============================================================
Brief form (/brief.html) + brief CTA on index/uslugi
============================================================ */
.brief-section {
display: grid; grid-template-columns: 1fr 320px;
gap: clamp(24px, 4vw, 40px);
padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 72px);
align-items: start;
max-width: min(var(--maxw), 100%);
margin: 0 auto;
width: 100%;
padding-inline: var(--gutter);
}
.brief-form { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); }
.brief-step {
background: var(--ivory); border-radius: var(--r-2xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
padding: clamp(22px, 3vw, 30px);
}
.brief-step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brief-step-n {
width: 34px; height: 34px; border-radius: 50%;
background: var(--tint-sand); color: var(--terracotta);
font-family: var(--mono); font-size: 15px; font-weight: 600;
display: grid; place-items: center; flex-shrink: 0;
}
.brief-step-h h2 { font-size: clamp(18px, 2.5vw, 22px); letter-spacing: -0.014em; margin: 0; }
/* Collapsible step 3 — opt-in details */
.brief-step--collapsible { padding: 0; }
.brief-step--collapsible > summary {
list-style: none; cursor: pointer; user-select: none;
padding: clamp(22px, 3vw, 30px);
margin-bottom: 0;
border-radius: var(--r-2xl);
transition: background var(--t);
}
.brief-step--collapsible > summary::-webkit-details-marker { display: none; }
.brief-step--collapsible > summary:hover { background: var(--parchment); }
.brief-step--collapsible[open] > summary {
border-radius: var(--r-2xl) var(--r-2xl) 0 0;
border-bottom: 1px solid var(--border-deep);
margin-bottom: 0;
}
.brief-step-toggle {
margin-left: auto;
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--stone); font-weight: 500;
display: inline-flex; align-items: center; gap: 7px;
visibility: visible;
}
.brief-step-toggle::after {
content: ""; width: 7px; height: 7px;
border-right: 1.6px solid var(--stone);
border-bottom: 1.6px solid var(--stone);
transform: rotate(45deg);
transition: transform var(--t);
}
.brief-step--collapsible[open] .brief-step-toggle::after {
transform: rotate(-135deg) translate(-1.5px, -1.5px);
}
.brief-step--collapsible > .brief-fields {
padding: clamp(22px, 3vw, 30px);
padding-top: clamp(18px, 2.5vw, 24px);
}
.brief-fields { display: grid; gap: 14px; }
.brief-fields--2 { grid-template-columns: 1fr 1fr; }
.brief-field { display: flex; flex-direction: column; gap: 6px; }
.brief-field label { font-size: 13px; color: var(--charcoal); font-weight: 500; }
.brief-field .req { color: var(--terracotta); }
.brief-field .hint { font-size: 12.5px; color: var(--stone); line-height: 1.4; }
.brief-input, .brief-textarea, .brief-select {
font-family: var(--sans); font-size: 15px; color: var(--near-black);
background: var(--parchment); border: 1px solid var(--border-deep);
border-radius: var(--r-md); padding: 11px 13px; width: 100%;
transition: border-color var(--t), box-shadow var(--t), background var(--t);
appearance: none; -webkit-appearance: none;
}
.brief-input:focus, .brief-textarea:focus, .brief-select:focus {
outline: none; border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(201,100,66,0.15); background: var(--ivory);
}
.brief-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.brief-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
padding-right: 36px; cursor: pointer;
}
.brief-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.brief-check {
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--charcoal); cursor: pointer;
background: var(--parchment); border: 1px solid var(--border-deep);
border-radius: var(--r-md); padding: 10px 13px;
transition: border-color var(--t), background var(--t);
}
.brief-check:hover { border-color: var(--ring-deep); background: var(--ivory); }
.brief-check input { width: 16px; height: 16px; accent-color: var(--terracotta); cursor: pointer; flex-shrink: 0; }
.brief-check input:checked + span { color: var(--near-black); font-weight: 500; }
.brief-check:has(input:checked) { border-color: var(--terracotta); background: var(--tint-terra); }
.brief-actions {
background: var(--near-black); color: var(--ivory);
border-radius: var(--r-2xl); padding: clamp(22px, 3vw, 28px);
}
.brief-privacy { font-size: 13px; color: var(--warm-silver); margin-bottom: 18px; }
.brief-privacy a { color: var(--coral); }
.brief-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.brief-buttons .btn { font-size: 15px; padding: 12px 18px; }
.brief-buttons .btn--ghost { color: var(--warm-silver); background: transparent; }
.brief-buttons .btn--ghost:hover { background: var(--dark-warm); color: var(--ivory); }
.brief-aside { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
.brief-aside-card {
background: var(--ivory); border-radius: var(--r-2xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
padding: 22px 24px;
}
.brief-aside-card h3 { font-size: 17px; margin-bottom: 12px; }
.brief-aside-card ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.brief-aside-card li { font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }
.brief-aside-card--dark { background: var(--near-black); color: var(--ivory); box-shadow: none; }
.brief-aside-card--dark h3 { color: var(--ivory); }
.brief-aside-card--dark p { color: var(--warm-silver); font-size: 14.5px; margin-bottom: 14px; }
.brief-aside-links { display: flex; gap: 8px; flex-wrap: wrap; }
.brief-aside-links .btn { font-size: 14px; padding: 9px 14px; }
/* Compact brief CTA — for embedding in index.html / uslugi.html */
.brief-cta {
background: var(--near-black); color: var(--ivory);
border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 40px);
display: grid; grid-template-columns: 1.2fr 0.8fr;
gap: clamp(24px, 4vw, 40px); align-items: center;
}
.brief-cta-h h2 { color: var(--ivory); font-size: clamp(24px, 3.5vw, 32px); letter-spacing: -0.02em; margin-bottom: 12px; }
.brief-cta-h p { color: var(--warm-silver); font-size: 16px; margin-bottom: 22px; max-width: 32em; }
.brief-cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.brief-cta-list { background: var(--dark-warm); border-radius: var(--r-xl); padding: 22px 24px; }
.brief-cta-list h4 { color: var(--ivory); font-size: 14px; margin-bottom: 12px; }
.brief-cta-list ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.brief-cta-list li { font-size: 14px; color: var(--warm-silver); line-height: 1.5; }
@media (max-width: 960px) {
.brief-section { grid-template-columns: 1fr; }
.brief-aside { position: static; }
.brief-fields--2 { grid-template-columns: 1fr; }
.brief-checks { grid-template-columns: 1fr; }
.brief-cta { grid-template-columns: 1fr; }
}
/* ============================================================
Thanks page (/thanks.html)
============================================================ */
.thanks-wrap {
min-height: 60vh; display: grid; place-items: center;
padding-block: clamp(48px, 8vw, 96px); text-align: center;
}
.thanks-ico {
width: 84px; height: 84px; border-radius: 50%;
background: var(--tint-green); color: var(--green);
display: grid; place-items: center; margin: 0 auto 24px;
}
.thanks-ico svg { width: 40px; height: 40px; }
.thanks-h1 { font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 14px; }
.thanks-sub { font-size: 17px; color: var(--olive); max-width: 36em; margin: 0 auto 24px; line-height: 1.6; }
.thanks-card {
max-width: 540px; margin: 32px auto 0; text-align: left;
background: var(--ivory); border-radius: var(--r-2xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
padding: 22px 26px;
}
.thanks-card h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.thanks-card pre {
font-family: var(--mono); font-size: 13px; color: var(--charcoal);
background: var(--parchment); padding: 14px 16px; border-radius: var(--r-md);
white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow: auto;
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
/* SEO-cost calculator extras */
.calc-fixed {
display: flex; flex-wrap: wrap; gap: 6px;
font-family: var(--mono); font-size: 12.5px; color: var(--charcoal);
}
.calc-fixed span {
background: var(--parchment); padding: 6px 11px; border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.calc-checks {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-top: 4px;
}
.calc-check {
display: flex; align-items: center; gap: 12px;
background: var(--parchment); border: 1px solid var(--border-deep);
border-radius: var(--r-md); padding: 13px 14px;
cursor: pointer; transition: border-color var(--t), background var(--t);
min-height: 64px;
}
.calc-check:hover { border-color: var(--ring-deep); background: var(--ivory); }
.calc-check:has(input:checked) { border-color: var(--terracotta); background: var(--tint-terra); }
.calc-check:has(input:checked) .calc-check-pct {
background: var(--terracotta); color: var(--ivory); box-shadow: none;
}
.calc-check input { width: 17px; height: 17px; accent-color: var(--terracotta); cursor: pointer; flex-shrink: 0; }
/* Legacy span fallback (covers cached HTML without .calc-check-body) */
.calc-check > span:not([class]),
.calc-check-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.calc-check b { display: block; font-weight: 600; font-size: 14px; color: var(--near-black); line-height: 1.25; }
.calc-check small { display: block; font-size: 12.5px; color: var(--stone); line-height: 1.4; }
.calc-check-pct {
flex-shrink: 0;
font-family: var(--mono); font-size: 11.5px; font-weight: 500;
color: var(--terracotta-d);
background: var(--ivory);
padding: 4px 9px; border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--ring-warm);
transition: background var(--t), color var(--t);
letter-spacing: 0.01em;
}
@media (max-width: 720px) {
.calc-checks { grid-template-columns: 1fr; }
}
.calc-scope ul {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
list-style: none; padding: 0; margin: 0;
}
.calc-scope li {
position: relative; padding-left: 22px; font-size: 14.5px;
color: var(--charcoal); line-height: 1.5;
}
.calc-scope li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 14px; height: 8px;
border-left: 2px solid var(--terracotta); border-bottom: 2px solid var(--terracotta);
transform: rotate(-45deg);
}
@media (max-width: 640px) { .calc-scope ul { grid-template-columns: 1fr; } }
/* ============================================================
Ratings hub & topic pages (/ratings/)
============================================================ */
.rt-hero { padding-block: clamp(32px, 5vw, 48px) clamp(20px, 3vw, 28px); }
.rt-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.024em; margin: 18px 0 16px; max-width: 18em; }
.rt-hero .lead { max-width: 42em; }
.rt-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.rt-banner {
display: flex; gap: 14px; align-items: flex-start;
margin: 18px 0 0; padding: 16px 18px;
background: var(--tint-sand); border-radius: var(--r-lg);
box-shadow: inset 0 0 0 1px var(--border-deep);
font-size: 14px; color: var(--charcoal); line-height: 1.5;
}
.rt-banner .ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--terracotta); margin-top: 1px; }
.rt-banner strong { color: var(--near-black); }
/* Hub grid */
.rt-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.rt-card {
display: flex; flex-direction: column; gap: 12px; padding: 22px;
color: inherit; text-decoration: none;
transition: box-shadow var(--t), transform var(--t);
}
.rt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); }
.rt-card .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rt-card .cat {
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta);
}
.rt-card .region {
font-family: var(--mono); font-size: 11px; color: var(--stone);
}
.rt-card h3 { font-size: 19px; line-height: 1.2; }
.rt-card .key {
font-family: var(--mono); font-size: 12.5px; color: var(--olive);
background: var(--parchment); padding: 6px 10px; border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--border-deep);
align-self: flex-start;
}
.rt-card .stats {
display: flex; gap: 14px; margin-top: auto; padding-top: 14px;
border-top: 1px solid var(--border-deep);
font-family: var(--mono); font-size: 12px; color: var(--stone);
}
.rt-card .stats .v { color: var(--near-black); font-weight: 500; }
.rt-card .stats .up { color: var(--green); }
.rt-card .stats .down { color: var(--terracotta-d); }
/* Topic page summary */
.rt-summary {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
margin: 24px 0;
}
.rt-sum-card {
padding: 18px 20px; background: var(--ivory); border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-sum-card .k {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 8px;
}
.rt-sum-card .v {
font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); font-weight: 600;
color: var(--near-black); line-height: 1.1; letter-spacing: -0.01em;
}
.rt-sum-card .v.pos { color: var(--green); }
.rt-sum-card .v.neg { color: var(--terracotta-d); }
.rt-sum-card .sub { display: block; font-size: 12.5px; color: var(--olive); margin-top: 6px; }
/* Top-N table */
.rt-table-wrap {
background: var(--ivory); border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
overflow: hidden; margin: 24px 0;
}
.rt-table-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 22px; gap: 14px;
background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
border-bottom: 1px solid var(--border-deep);
border-left: 3px solid var(--terracotta);
flex-wrap: wrap;
}
.rt-table-head h2 { font-size: 17px; letter-spacing: -0.01em; margin: 0; }
.rt-table-head .updated { font-family: var(--mono); font-size: 12px; color: var(--stone); }
.rt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rt-table {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 14px; background: var(--ivory);
}
.rt-table th, .rt-table td {
text-align: left; padding: 12px 18px;
border-bottom: 1px solid var(--border-cream); vertical-align: middle;
}
.rt-table th {
font-family: var(--sans); font-weight: 600; font-size: 12.5px;
color: var(--charcoal); background: var(--parchment); white-space: nowrap;
}
.rt-table td.pos {
width: 50px; font-family: var(--serif); font-size: 18px; font-weight: 600;
color: var(--near-black); font-variant-numeric: tabular-nums;
}
.rt-table tr.top-3 td.pos { color: var(--terracotta); }
.rt-table .brand {
display: flex !important; align-items: center; gap: 12px;
}
.rt-table .brand > img.av,
.rt-table .brand > .av-letter {
width: 32px; height: 32px; border-radius: 8px;
flex-shrink: 0; box-sizing: border-box;
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.rt-table .brand > img.av {
object-fit: contain;
padding: 5px;
background: var(--ivory);
}
.rt-table .brand > .av-letter {
background: var(--tint-sand); color: var(--terracotta-d);
display: grid; place-items: center;
font-family: var(--serif); font-size: 14px; font-weight: 600;
}
.rt-table .brand > .info {
display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto;
}
.rt-table .brand > .info > .nm {
display: block; font-weight: 500; color: var(--near-black);
line-height: 1.25; word-break: break-word;
}
.rt-table .brand > .info > .dom {
display: block; font-family: var(--mono); font-size: 11.5px; color: var(--stone);
line-height: 1.2; word-break: break-all;
}
.rt-table td.delta {
font-family: var(--mono); font-size: 13px; font-weight: 500;
white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}
.rt-table td.delta.up { color: var(--green); }
.rt-table td.delta.down { color: var(--terracotta-d); }
.rt-table td.delta.flat { color: var(--stone); }
.rt-table td.delta .arr { display: inline-block; margin-right: 3px; font-size: 11px; }
.rt-table td.share {
font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
text-align: right; color: var(--charcoal);
}
.rt-table .bar {
display: block; height: 4px; background: var(--warm-sand); border-radius: 2px;
margin-top: 5px; overflow: hidden; width: 80px; margin-left: auto;
}
.rt-table .bar .fill { display: block; height: 100%; background: var(--terracotta); border-radius: 2px; }
.rt-table tr:hover td:not(.pos) { background: rgba(245, 244, 237, 0.7); }
.rt-table .new-badge {
display: inline-block; font-family: var(--mono); font-size: 10px;
background: var(--green); color: var(--ivory); padding: 2px 6px;
border-radius: 4px; letter-spacing: 0.05em; margin-left: 8px;
vertical-align: middle; font-weight: 500;
}
/* Movers */
.rt-movers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin: 24px 0; }
.rt-mover-block {
background: var(--ivory); border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
padding: 20px 22px;
}
.rt-mover-block h3 {
font-size: 15px; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.rt-mover-block h3 .ico {
width: 22px; height: 22px; border-radius: 6px;
display: grid; place-items: center; flex-shrink: 0;
}
.rt-mover-block--up h3 .ico { background: var(--tint-green); color: var(--green); }
.rt-mover-block--down h3 .ico { background: var(--tint-terra); color: var(--terracotta-d); }
.rt-mover-list { display: flex; flex-direction: column; gap: 10px; }
.rt-mover-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; background: var(--parchment); border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--border-deep);
font-size: 14px; gap: 12px;
}
.rt-mover-item .nm { color: var(--near-black); font-weight: 500; }
.rt-mover-item .dom { display: block; font-family: var(--mono); font-size: 11px; color: var(--stone); margin-top: 2px; }
.rt-mover-item .change {
font-family: var(--mono); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.rt-mover-item .change.up { color: var(--green); }
.rt-mover-item .change.down { color: var(--terracotta-d); }
/* History strip */
.rt-history {
margin: 24px 0; padding: 22px;
background: var(--ivory); border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-history h3 { font-size: 16px; margin-bottom: 14px; }
.rt-history-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.rt-history-day {
flex-shrink: 0; min-width: 140px;
padding: 12px 14px; background: var(--parchment); border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--border-deep);
}
.rt-history-day .d { font-family: var(--mono); font-size: 11px; color: var(--stone); }
.rt-history-day ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rt-history-day li { font-size: 12.5px; color: var(--charcoal); }
.rt-history-day li b { font-family: var(--mono); font-weight: 600; color: var(--near-black); }
.rt-history-day li.up b { color: var(--green); }
.rt-history-day li.down b { color: var(--terracotta-d); }
/* Movers — short interpretation note under the riser/dropper blocks */
.rt-mover-note {
margin-top: 14px; padding: 16px 18px;
background: var(--ivory); border-radius: var(--r-lg);
box-shadow: inset 0 0 0 1px var(--border-deep);
border-left: 3px solid var(--terracotta);
display: flex; gap: 12px; align-items: flex-start;
font-size: 14.5px; line-height: 1.55; color: var(--charcoal);
}
.rt-mover-note .ico { font-size: 16px; line-height: 1.1; flex-shrink: 0; margin-top: 1px; }
.rt-mover-note strong { color: var(--near-black); font-weight: 600; }
/* Methodology — "Как мы считаем" */
.rt-method {
margin-top: 28px; padding: 24px 26px;
background: var(--ivory); border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-method h3 {
font-size: 18px; font-family: var(--serif); font-weight: 600;
color: var(--near-black); margin-bottom: 18px; letter-spacing: -0.015em;
}
.rt-method-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px;
}
.rt-method-item {
display: flex; flex-direction: column; gap: 6px;
padding-top: 14px;
border-top: 1px solid var(--border-deep);
}
.rt-method-item .lbl {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--stone); font-weight: 500;
}
.rt-method-item strong {
font-size: 15px; color: var(--near-black); font-weight: 600;
line-height: 1.3;
}
.rt-method-item p {
font-size: 13px; color: var(--charcoal); line-height: 1.5; margin: 2px 0 0;
}
/* Buyer-bridge — "Кому какой сайт подойдёт" */
.rt-bridge {
margin-top: 22px; padding: 24px 26px;
background: linear-gradient(180deg, var(--tint-terra) 0%, var(--ivory) 60%);
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-bridge h3 {
font-size: 18px; font-family: var(--serif); font-weight: 600;
color: var(--near-black); margin-bottom: 6px; letter-spacing: -0.015em;
}
.rt-bridge-sub {
font-size: 14px; color: var(--olive); margin-bottom: 18px; max-width: 50em; line-height: 1.5;
}
.rt-bridge-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.rt-bridge-card {
padding: 16px 18px; background: var(--ivory); border-radius: var(--r-md);
box-shadow: inset 0 0 0 1px var(--border-deep);
display: flex; flex-direction: column; gap: 10px;
}
.rt-bridge-head {
display: flex; align-items: center; gap: 12px;
}
.rt-bridge-head .av {
width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
box-shadow: 0 0 0 1px var(--border-deep);
}
.rt-bridge-head .av-letter {
width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
display: grid; place-items: center; background: var(--parchment);
font-family: var(--serif); font-weight: 600; font-size: 14px;
color: var(--near-black);
}
.rt-bridge-head .nm {
display: block; font-size: 15px; font-weight: 600; color: var(--near-black);
font-family: var(--serif); line-height: 1.2;
}
.rt-bridge-head .dom {
display: block; font-family: var(--mono); font-size: 11.5px;
color: var(--stone); margin-top: 2px;
}
.rt-bridge-card p {
font-size: 13.5px; color: var(--charcoal); line-height: 1.5; margin: 0;
}
/* Author signals strip */
.rt-author {
margin-top: 22px; padding: 22px 26px;
background: var(--near-black); color: var(--warm-silver);
border-radius: var(--r-lg);
}
.rt-author-card {
display: flex; gap: 16px; align-items: flex-start;
}
.rt-author-ava {
width: 56px; height: 56px; border-radius: 12px;
object-fit: cover; flex-shrink: 0;
filter: grayscale(1) contrast(1.05);
box-shadow: 0 0 0 2px rgba(255,255,255,0.07);
}
.rt-author-body { flex: 1 1 auto; }
.rt-author-name {
font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ivory);
letter-spacing: -0.012em;
}
.rt-author-role {
font-size: 13px; color: var(--stone); margin-top: 2px;
}
.rt-author-note {
font-size: 13.5px; color: var(--warm-silver); line-height: 1.55;
margin-top: 10px; max-width: 50em;
}
.rt-author-note a { color: var(--coral); border-bottom: 1px dotted var(--coral); }
.rt-author-note a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }
.rt-author-meta {
display: flex; flex-wrap: wrap; gap: 10px 14px;
align-items: center;
padding-top: 16px; margin-top: 16px;
border-top: 1px solid rgba(255,255,255,0.07);
}
.rt-author-chip {
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
color: var(--warm-silver);
padding: 5px 10px; border-radius: 999px;
background: rgba(255,255,255,0.06);
}
.rt-author-link {
margin-left: auto; color: var(--coral); font-size: 14px; font-weight: 500;
transition: color var(--t);
}
.rt-author-link:hover { color: var(--ivory); }
@media (max-width: 720px) {
.rt-method { padding: 18px 18px; }
.rt-method-grid { grid-template-columns: 1fr; gap: 14px; }
.rt-bridge { padding: 18px 18px; }
.rt-bridge-grid { grid-template-columns: 1fr; }
.rt-author { padding: 18px; }
.rt-author-card { flex-direction: column; gap: 12px; }
.rt-author-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
.rt-author-link { margin-left: 0; }
}
/* Related */
.rt-related {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: 22px;
}
@media (max-width: 960px) {
.rt-catalog { grid-template-columns: 1fr 1fr; }
.rt-summary { grid-template-columns: 1fr 1fr; }
.rt-movers { grid-template-columns: 1fr; }
.rt-related { grid-template-columns: 1fr 1fr; }
.rt-table th, .rt-table td { padding: 11px 12px; font-size: 13px; }
.rt-table .brand > img.av,
.rt-table .brand > .av-letter { width: 30px; height: 30px; font-size: 13px; }
}
/* ===== Mobile: ratings page deep refit ===== */
@media (max-width: 640px) {
.rt-catalog { grid-template-columns: 1fr; }
.rt-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-sum-card { padding: 14px 16px; }
.rt-sum-card .v { font-size: 22px; }
.rt-related { grid-template-columns: 1fr; }
.rt-hero h1 { font-size: clamp(26px, 7vw, 32px); }
.rt-hero .lead { font-size: 16px; }
.rt-hero-meta { gap: 6px; }
.rt-hero-meta .chip { font-size: 12px; padding: 4px 10px; }
.rt-table-head { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 6px; }
.rt-table-head h2 { font-size: 15px; }
.rt-table-head .updated { font-size: 11px; }
/* Convert table rows to stacked cards */
.rt-table-scroll { overflow-x: visible; }
.rt-table { font-size: 14px; }
.rt-table thead { display: none; }
.rt-table, .rt-table tbody { display: block; width: 100%; }
.rt-table tr {
display: grid;
grid-template-columns: 28px 1fr auto;
grid-template-areas:
"pos brand delta"
"pos brand share";
column-gap: 12px; row-gap: 4px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-cream);
align-items: center;
}
.rt-table tr:last-child { border-bottom: none; }
.rt-table tr:hover td,
.rt-table tr:nth-child(even) td { background: transparent; }
.rt-table td {
display: block;
padding: 0; border: none;
background: transparent !important;
vertical-align: baseline;
}
.rt-table td.pos {
grid-area: pos;
width: auto; font-size: 17px;
align-self: center;
}
.rt-table tr > td:nth-child(2) { grid-area: brand; min-width: 0; }
.rt-table .brand {
gap: 10px;
min-width: 0;
}
.rt-table .brand > img.av,
.rt-table .brand > .av-letter { width: 30px; height: 30px; font-size: 13px; }
.rt-table .brand > .info { min-width: 0; }
.rt-table .brand > .info > .nm { font-size: 14px; }
.rt-table .brand > .info > .dom { font-size: 11px; }
.rt-table td.delta {
grid-area: delta;
text-align: right; align-self: start;
font-size: 12.5px;
}
.rt-table td.share {
grid-area: share;
text-align: right; align-self: end;
font-size: 11.5px; color: var(--stone);
display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.rt-table .bar { width: 90px; margin: 0; height: 3px; }
.rt-table .new-badge { font-size: 9px; padding: 1px 5px; margin-left: 5px; }
/* History compact */
.rt-history { padding: 16px; }
.rt-history h3 { font-size: 14.5px; margin-bottom: 10px; }
.rt-history-day { min-width: 130px; padding: 10px 12px; }
.rt-history-day .d { font-size: 10.5px; }
.rt-history-day li { font-size: 12px; }
/* Movers compact */
.rt-mover-block { padding: 16px 18px; }
.rt-mover-block h3 { font-size: 14px; margin-bottom: 10px; }
.rt-mover-item { padding: 8px 10px; font-size: 13px; }
.rt-mover-item .dom { font-size: 10.5px; }
.rt-mover-item .change { font-size: 12px; }
/* Banner tighter */
.rt-banner { padding: 14px 14px; font-size: 13.5px; gap: 10px; }
.rt-banner .ico { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
.rt-summary { grid-template-columns: 1fr; }
.rt-table tr { grid-template-columns: 24px 1fr auto; column-gap: 10px; padding: 12px 14px; }
.rt-table .brand > img.av,
.rt-table .brand > .av-letter { width: 28px; height: 28px; }
.rt-table td.pos { font-size: 15px; }
}
/* Source chip with favicon (used on /ratings//) */
.chip--src { padding-left: 8px; }
.chip--src img { display: inline-block; vertical-align: -2px; margin-right: 4px; border-radius: 3px; }
/* ============================================================
Glossary hub & term pages (/glossary/)
============================================================ */
.gl-hero { padding-block: clamp(32px, 5vw, 48px) clamp(16px, 2.5vw, 24px); }
.gl-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.024em; margin: 18px 0 16px; max-width: 18em; }
.gl-hero .lead { max-width: 42em; }
.gl-toolbar {
display: flex; flex-direction: column; gap: 14px;
margin: 22px 0 18px;
padding: 18px 22px;
background: var(--ivory); border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-search {
display: flex; gap: 10px; align-items: center;
}
.gl-search input {
flex: 1; padding: 11px 14px; font-size: 15px;
font-family: inherit; color: var(--near-black);
border: 1px solid var(--border-deep); border-radius: var(--r-md);
background: var(--parchment);
transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.gl-search input:focus {
outline: none; border-color: var(--terracotta);
box-shadow: 0 0 0 3px rgba(201,100,66,0.15); background: var(--ivory);
}
.gl-search .count {
font-family: var(--mono); font-size: 12.5px; color: var(--stone);
flex-shrink: 0;
}
.gl-alpha {
display: flex; flex-wrap: wrap; gap: 4px;
}
.gl-alpha button {
background: transparent; border: 1px solid transparent;
font-family: var(--mono); font-size: 12.5px; font-weight: 500;
color: var(--charcoal);
padding: 5px 9px; border-radius: var(--r-md);
cursor: pointer; transition: all var(--t);
}
.gl-alpha button:hover { background: var(--warm-sand); }
.gl-alpha button.active {
background: var(--near-black); color: var(--ivory);
}
.gl-alpha button:disabled {
color: var(--ring-warm); cursor: default; background: transparent;
}
.gl-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-cat {
font-family: var(--mono); font-size: 12px; font-weight: 500;
letter-spacing: 0.04em; color: var(--charcoal);
background: var(--parchment); border: 1px solid var(--border-deep);
border-radius: 999px; padding: 5px 11px; cursor: pointer;
transition: all var(--t);
}
.gl-cat:hover { color: var(--near-black); }
.gl-cat.active {
background: var(--near-black); color: var(--ivory); border-color: var(--near-black);
}
.gl-section { margin-top: 24px; }
.gl-section-letter {
display: flex; align-items: baseline; gap: 14px;
margin: 24px 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-deep);
}
.gl-section-letter .l {
font-family: var(--serif); font-size: 28px; font-weight: 600;
color: var(--terracotta); letter-spacing: -0.02em;
}
.gl-section-letter .c {
font-family: var(--mono); font-size: 12px; color: var(--stone);
}
.gl-catalog {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.gl-card {
display: flex; flex-direction: column; gap: 8px;
padding: 16px 18px;
background: var(--ivory); border-radius: var(--r-lg);
box-shadow: inset 0 0 0 1px var(--border-deep);
color: inherit; text-decoration: none;
transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.gl-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-whisper), 0 0 0 1px var(--ring-deep);
}
.gl-card .gl-card-h {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.gl-card .gl-card-h h3 {
font-size: 17px; line-height: 1.2; margin: 0;
}
.gl-card .cat {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--stone); flex-shrink: 0;
}
.gl-card .sub {
font-size: 12.5px; color: var(--olive); font-family: var(--mono);
}
.gl-card p {
font-size: 13.5px; color: var(--olive); line-height: 1.5; margin: 0;
}
.gl-empty {
padding: 32px; text-align: center; color: var(--stone); font-size: 14px;
}
/* Single term page */
.gl-page-head { padding-block: clamp(32px, 5vw, 48px) clamp(16px, 2.5vw, 24px); }
.gl-page-cat {
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--terracotta);
display: inline-block; margin-bottom: 12px;
}
.gl-page-head h1 {
font-size: clamp(34px, 6vw, 54px); line-height: 1.05; letter-spacing: -0.026em;
margin: 6px 0 8px;
}
.gl-page-head .sub {
font-family: var(--mono); font-size: clamp(14px, 1.8vw, 17px); color: var(--olive);
letter-spacing: 0.01em;
}
.gl-page-head .lead {
font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6;
color: var(--charcoal); margin-top: 18px; max-width: 38em;
}
.gl-layout {
display: grid; grid-template-columns: 1fr 280px;
gap: clamp(24px, 4vw, 40px);
padding-block: clamp(24px, 4vw, 36px) clamp(40px, 6vw, 56px);
align-items: start;
}
.gl-body p {
font-size: 17px; line-height: 1.72; color: var(--charcoal);
margin-bottom: 16px;
}
.gl-body p:last-child { margin-bottom: 0; }
.gl-body strong { color: var(--near-black); font-weight: 600; }
.gl-body ul {
list-style: none; display: flex; flex-direction: column; gap: 10px;
margin: 0 0 18px; padding: 0;
}
.gl-body ul li {
position: relative; padding-left: 24px; font-size: 16px;
color: var(--charcoal); line-height: 1.6;
}
.gl-body ul li::before {
content: ""; position: absolute; left: 4px; top: 10px;
width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta);
}
.gl-body h2 {
font-size: clamp(20px, 2.8vw, 24px); margin: 28px 0 12px;
letter-spacing: -0.015em;
}
.gl-body h2:first-child { margin-top: 0; }
.gl-formula {
background: var(--ivory); border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
border-left: 3px solid var(--terracotta);
padding: 16px 22px;
margin: 20px 0;
}
.gl-formula .lbl {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--stone); margin-bottom: 8px;
}
.gl-formula .val {
font-family: var(--mono); font-size: 15px; color: var(--near-black);
line-height: 1.6;
}
.gl-formula .val b { color: var(--terracotta-d); font-weight: 600; }
.gl-formula .val .op { color: var(--stone); }
.gl-example {
background: var(--parchment); border-radius: var(--r-lg);
box-shadow: inset 0 0 0 1px var(--border-deep);
padding: 16px 22px; margin: 20px 0;
}
.gl-example .lbl {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--terracotta); margin-bottom: 8px;
}
.gl-example p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--charcoal); }
.gl-aside {
position: sticky; top: calc(var(--nav-h) + 16px);
display: flex; flex-direction: column; gap: 14px;
}
.gl-aside-card {
padding: 18px 20px;
background: var(--ivory); border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-aside-card h3 {
font-size: 13px;
font-family: var(--mono); font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--stone); margin-bottom: 12px;
}
.gl-aside-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.gl-aside-card li { font-size: 14px; }
.gl-aside-card a {
color: var(--charcoal); transition: color var(--t);
display: inline-flex; align-items: center; gap: 6px;
}
.gl-aside-card a:hover { color: var(--terracotta); }
.gl-aside-card a::before {
content: "→"; color: var(--terracotta); font-weight: 600;
}
.gl-aside-card--dark { background: var(--near-black); }
.gl-aside-card--dark h3 { color: var(--warm-silver); }
.gl-aside-card--dark p { font-size: 14px; color: var(--warm-silver); line-height: 1.55; margin-bottom: 12px; }
.gl-aside-card--dark .btn { width: 100%; justify-content: center; }
.gl-prev-next {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--grid-gap); margin-top: 28px;
}
.gl-prev-next a {
padding: 16px 20px; background: var(--ivory); border-radius: var(--r-lg);
box-shadow: inset 0 0 0 1px var(--border-deep);
color: inherit; text-decoration: none;
transition: box-shadow var(--t), transform var(--t);
}
.gl-prev-next a:hover { box-shadow: var(--shadow-whisper), 0 0 0 1px var(--ring-deep); transform: translateY(-2px); }
.gl-prev-next .lbl {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 6px;
}
.gl-prev-next .nm {
font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--near-black);
}
.gl-prev-next .gl-pn-next { text-align: right; }
@media (max-width: 960px) {
.gl-catalog { grid-template-columns: 1fr 1fr; }
.gl-layout { grid-template-columns: 1fr; }
.gl-aside { position: static; }
}
@media (max-width: 640px) {
.gl-catalog { grid-template-columns: 1fr; }
.gl-toolbar { padding: 14px 16px; }
.gl-alpha button { padding: 4px 7px; font-size: 12px; }
.gl-cats { gap: 5px; }
.gl-cat { font-size: 11.5px; padding: 4px 9px; }
.gl-page-head h1 { font-size: clamp(28px, 8vw, 38px); }
.gl-prev-next { grid-template-columns: 1fr; }
.gl-prev-next .gl-pn-next { text-align: left; }
}
/* Inline code in glossary body and examples */
.gl-body code,
.gl-example code,
.gl-formula code {
font-family: var(--mono); font-size: 0.9em;
background: var(--warm-sand); color: var(--near-black);
padding: 2px 6px; border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--border-deep);
white-space: nowrap;
}
.gl-example {
padding: 18px 22px;
}
.gl-example p { line-height: 1.65; }
.gl-example pre {
margin: 10px 0 0; padding: 12px 14px;
background: var(--near-black); color: var(--ivory);
border-radius: var(--r-md); overflow-x: auto;
font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
}
.gl-example .lbl::before {
content: ""; display: inline-block; width: 8px; height: 8px;
border-radius: 50%; background: var(--terracotta);
margin-right: 7px; vertical-align: 1px;
}
/* ============================================================
Glossary — creative example & formula cards (final override)
Example block looks like an IDE doc window.
Formula block looks like a terminal pane.
============================================================ */
.gl-example {
position: relative;
margin: 28px 0 32px;
padding: 0;
background: var(--ivory);
border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
overflow: hidden;
border-left: none;
transition: box-shadow var(--t), transform var(--t);
}
.gl-example:hover {
box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--ring-deep);
transform: translateY(-1px);
}
/* "Window" header bar with macOS-style dots */
.gl-example .lbl {
margin: 0;
padding: 11px 18px;
background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
border-bottom: 1px solid var(--border-deep);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--terracotta-d);
display: flex;
align-items: center;
gap: 12px;
}
.gl-example .lbl::before {
content: "";
display: inline-block;
width: 36px; height: 10px;
background:
radial-gradient(circle at 5px 5px, #e8736a 4px, transparent 4.5px),
radial-gradient(circle at 18px 5px, #e6c067 4px, transparent 4.5px),
radial-gradient(circle at 31px 5px, #8fb592 4px, transparent 4.5px);
background-repeat: no-repeat;
flex-shrink: 0;
opacity: 0.7;
margin-right: 0;
border-radius: 0;
}
.gl-example .lbl::after {
content: "";
margin-left: auto;
width: 14px; height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c96442' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v3M12 19v3M5 12H2M22 12h-3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.gl-example p {
margin: 0;
padding: 20px 22px 22px;
font-size: 15.5px;
line-height: 1.72;
color: var(--charcoal);
}
.gl-example p:not(:last-child) { padding-bottom: 4px; }
.gl-example p + p { padding-top: 0; padding-bottom: 22px; }
.gl-example code {
font-family: var(--mono);
font-size: 0.88em;
background: var(--parchment);
color: var(--terracotta-d);
padding: 2px 7px;
border-radius: 5px;
box-shadow: inset 0 0 0 1px var(--ring-warm);
font-weight: 500;
white-space: nowrap;
}
/* ============================================================
──── GLOSSARY · RICH VISUAL BLOCKS ────
Stat hero · triage cards · vs-panel · timeline · checklist
============================================================ */
.gl-h2 {
font-size: clamp(20px, 2.5vw, 24px);
font-family: var(--serif); font-weight: 600;
color: var(--near-black); letter-spacing: -0.014em;
margin: 36px 0 16px;
}
/* Hero stat row — 3 big numbers */
.gl-hero-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
margin: 24px 0 8px;
}
.gl-stat {
padding: 18px 20px;
background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
border-top: 3px solid var(--terracotta);
}
.gl-stat-v {
font-family: var(--serif); font-size: clamp(28px, 4vw, 38px);
font-weight: 600; color: var(--near-black); line-height: 1.05;
letter-spacing: -0.022em;
}
.gl-stat-v span { font-size: 0.55em; color: var(--terracotta); font-weight: 500; margin-left: 2px; }
.gl-stat-k {
font-size: 12.5px; color: var(--olive); margin-top: 6px; line-height: 1.4;
}
/* Triage 3-card layout (symptom / cure / prevent) — polished */
.gl-triage {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
margin: 14px 0 28px;
counter-reset: triage;
}
.gl-triage-card {
--tri-accent: var(--stone);
--tri-bg-tint: rgba(135, 134, 127, 0.04);
position: relative;
padding: 26px 22px 22px;
background: linear-gradient(180deg, var(--tri-bg-tint) 0%, var(--ivory) 70%);
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
overflow: hidden;
transition: box-shadow var(--t), transform var(--t);
counter-increment: triage;
}
.gl-triage-card:hover {
box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--tri-accent);
transform: translateY(-2px);
}
/* Big accent stripe on top */
.gl-triage-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--tri-accent);
}
/* Watermark number in background */
.gl-triage-card::after {
content: "0" counter(triage);
position: absolute; top: 14px; right: 18px;
font-family: var(--serif); font-size: 56px; font-weight: 700;
color: var(--tri-accent); opacity: 0.07; line-height: 1;
letter-spacing: -0.04em; pointer-events: none;
}
.gl-triage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gl-triage-ico {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 12px;
background: color-mix(in srgb, var(--tri-accent) 14%, var(--ivory));
color: var(--tri-accent);
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(0,0,0,0.02), inset 0 0 0 1px color-mix(in srgb, var(--tri-accent) 18%, transparent);
}
.gl-triage-ico svg { width: 22px; height: 22px; }
.gl-triage-lbl {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; font-weight: 500; color: var(--tri-accent);
display: block;
}
.gl-triage-lbl-sub {
display: block; margin-top: 3px;
font-family: var(--sans); font-size: 13px; font-weight: 500;
color: var(--charcoal); letter-spacing: 0; text-transform: none;
}
.gl-triage-card ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 10px;
}
.gl-triage-card li {
position: relative; padding-left: 24px;
font-size: 14.5px; line-height: 1.5; color: var(--charcoal);
}
.gl-triage-card li::before {
content: ""; position: absolute; left: 0; top: 6px;
width: 14px; height: 14px; border-radius: 50%;
background: color-mix(in srgb, var(--tri-accent) 18%, var(--ivory));
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tri-accent) 50%, transparent);
}
/* Variants — set accent via CSS var */
.gl-triage-card--symptom { --tri-accent: #c96442; --tri-bg-tint: rgba(201, 100, 66, 0.07); }
.gl-triage-card--cure { --tri-accent: #5e8662; --tri-bg-tint: rgba(143, 181, 146, 0.10); }
.gl-triage-card--prevent { --tri-accent: #586176; --tri-bg-tint: rgba(88, 97, 118, 0.07); }
/* Cure cards: check icon instead of dot for list items */
.gl-triage-card--cure li::before {
background: #5e8662;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
background-size: 9px;
background-repeat: no-repeat;
background-position: center;
box-shadow: none;
}
/* Prevent cards: shield-like square */
.gl-triage-card--prevent li::before {
border-radius: 3px;
}
/* VS panel — bad vs good comparison */
.gl-vs {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin: 14px 0 24px;
}
.gl-vs-card {
padding: 20px 22px;
background: var(--ivory);
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
border-top: 3px solid var(--ring-warm);
}
.gl-vs-card--bad { border-top-color: var(--terracotta); background: linear-gradient(180deg, rgba(201,100,66,0.04) 0%, var(--ivory) 60%); }
.gl-vs-card--good { border-top-color: #8fb592; background: linear-gradient(180deg, rgba(143,181,146,0.06) 0%, var(--ivory) 60%); }
.gl-vs-h {
font-family: var(--serif); font-size: 16px; font-weight: 600;
color: var(--near-black); margin-bottom: 14px;
display: flex; align-items: center; gap: 10px;
}
.gl-vs-mark {
display: inline-grid; place-items: center;
width: 22px; height: 22px; border-radius: 50%;
font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1;
}
.gl-vs-card--bad .gl-vs-mark { background: var(--terracotta); color: var(--ivory); }
.gl-vs-card--good .gl-vs-mark { background: #8fb592; color: var(--ivory); }
.gl-vs-card ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 9px;
}
.gl-vs-card li {
position: relative; padding-left: 18px;
font-size: 14.5px; line-height: 1.55; color: var(--charcoal);
}
.gl-vs-card li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 10px; height: 2px; border-radius: 1px;
}
.gl-vs-card--bad li::before { background: var(--terracotta); }
.gl-vs-card--good li::before { background: #8fb592; }
/* Timeline */
.gl-timeline {
position: relative;
margin: 14px 0 24px;
padding: 22px 24px 8px;
background: var(--ivory);
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-timeline::before {
content: ""; position: absolute;
left: 84px; top: 30px; bottom: 22px;
width: 2px;
background: linear-gradient(180deg, var(--terracotta) 0%, var(--ring-deep) 100%);
opacity: 0.4;
}
.gl-tl-row {
display: grid; grid-template-columns: 70px 1fr; gap: 14px;
padding: 12px 0; position: relative;
align-items: start;
}
.gl-tl-yr {
font-family: var(--mono); font-size: 13px; font-weight: 500;
color: var(--terracotta-d); padding-top: 1px;
}
.gl-tl-dot {
position: absolute; left: 79px; top: 18px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--terracotta); box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4px rgba(201,100,66,0.2);
z-index: 1;
}
.gl-tl-body {
font-size: 14.5px; line-height: 1.6; color: var(--charcoal);
padding-left: 18px;
}
.gl-tl-body strong { color: var(--near-black); font-weight: 600; }
/* Benchmark scale — for metric terms */
.gl-scale {
margin: 14px 0 24px;
padding: 22px 24px 24px;
background: var(--ivory);
border-radius: var(--r-lg);
box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-scale-h {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--stone); margin-bottom: 14px;
}
.gl-scale-bar {
display: grid; grid-template-columns: repeat(var(--zones, 4), 1fr);
gap: 3px; margin-bottom: 10px;
}
.gl-scale-zone {
height: 10px; border-radius: 3px; position: relative;
}
.gl-scale-zone--bad { background: #e8736a; }
.gl-scale-zone--meh { background: #e6c067; }
.gl-scale-zone--ok { background: #a2c8a7; }
.gl-scale-zone--good { background: #6ea676; }
.gl-scale-zone--great { background: #4d8a58; }
.gl-scale-labels {
display: grid; grid-template-columns: repeat(var(--zones, 4), 1fr);
gap: 3px;
}
.gl-scale-label {
font-family: var(--mono); font-size: 11px;
color: var(--charcoal); line-height: 1.3;
text-align: center;
}
.gl-scale-label b {
display: block; font-family: var(--sans);
font-size: 13px; font-weight: 600;
color: var(--near-black); margin-bottom: 2px;
}
/* Responsive */
@media (max-width: 720px) {
.gl-hero-stats { grid-template-columns: 1fr; gap: 10px; }
.gl-triage { grid-template-columns: 1fr; gap: 12px; }
.gl-vs { grid-template-columns: 1fr; gap: 12px; }
.gl-timeline::before { left: 60px; }
.gl-tl-row { grid-template-columns: 50px 1fr; }
.gl-tl-dot { left: 56px; }
.gl-scale-label { font-size: 10px; }
.gl-scale-label b { font-size: 11.5px; }
}
/* Formula block — looks like a terminal pane */
.gl-formula {
position: relative;
margin: 28px 0;
padding: 0;
background: var(--near-black);
border-radius: var(--r-xl);
box-shadow: var(--shadow-whisper);
border: none;
border-left: none;
overflow: hidden;
}
.gl-formula .lbl {
margin: 0;
padding: 11px 18px;
background: rgba(255,255,255,0.035);
border-bottom: 1px solid var(--dark-warm);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--coral);
display: flex;
align-items: center;
gap: 10px;
}
.gl-formula .lbl::before {
content: "ƒ(x)";
font-family: var(--mono);
font-size: 10.5px;
font-style: normal;
color: var(--coral);
background: rgba(217,119,87,0.12);
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0;
text-transform: none;
}
.gl-formula .lbl::after {
content: "";
margin-left: auto;
width: 14px; height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.gl-formula .val {
margin: 0;
padding: 18px 22px 20px;
font-family: var(--mono);
font-size: 15.5px;
color: var(--ivory);
line-height: 1.75;
font-variant-numeric: tabular-nums;
}
.gl-formula .val b {
color: var(--coral);
font-weight: 600;
}
.gl-formula .val .op {
color: var(--warm-silver);
font-weight: 400;
}
.gl-formula .val code {
background: rgba(255,255,255,0.06);
color: var(--coral);
padding: 2px 6px;
border-radius: 4px;
border: none;
box-shadow: none;
}
/* Mobile tweaks */
@media (max-width: 640px) {
.gl-example .lbl, .gl-formula .lbl { padding: 10px 14px; font-size: 10px; }
.gl-example p { padding: 16px 16px 18px; font-size: 14.5px; }
.gl-formula .val { padding: 16px 16px 18px; font-size: 14px; }
}
/* Centered 3-button CTA at end of main page */
.hero-cta-end {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
align-items: center;
padding-block: clamp(40px, 6vw, 64px);
}
.hero-cta-end .btn {
padding: 14px 26px;
font-size: 15.5px;
}
@media (max-width: 640px) {
.hero-cta-end { flex-direction: column; padding-block: 32px; }
.hero-cta-end .btn { width: 100%; max-width: 320px; justify-content: center; }
}