is shown.
Default state hides every block until JS adds .active to the matching one. */
.brief-issue[data-lang]{ display: none; }
.brief-issue[data-lang].active{ display: block; }
/* Issue page tab nav. Underline tabs (gradient on active, mono caps).
Lives above [data-role="brief-issue-content"] in the static template.
Single horizontal row; horizontal scroll on narrow viewports rather than
wrapping to multiple lines. Padding-based centering keeps the bar
full-bleed on the dark background while content centers within ~1200px. */
.brief-tabs{
display:flex;
flex-wrap:nowrap;
gap:32px;
padding:8px max(24px, calc(50vw - 600px));
margin:0;
max-width:none;
border-bottom:1px solid #1e1e1e;
background:#0a0a0a;
overflow-x:auto;
scrollbar-width:none;
-ms-overflow-style:none;
}
/* Flush variant on the issue page: blends into the page background. The
back-link above (.brief-issue-backbar) owns the fixed-nav clearance, so
tabs only need a small top gap. Horizontal padding still uses the tab
band's centering pattern so tab labels align with the issue body's
~1200px content frame. */
.brief-tabs--flush{
background:transparent;
border-bottom:none;
margin-top:8px;
padding:8px max(24px, calc(50vw - 600px));
}
/* Back-link strip: sits directly under the fixed nav, left-aligned to the
exact same gutter as the DATAVERA logo (nav padding-left = 28px). This
places "View previous newsletters" vertically beneath the brand mark,
which is the spot readers instinctively look for a back affordance. */
.brief-issue-backbar{
padding:96px 28px 0;
}
@media (max-width:760px){
.brief-issue-backbar{ padding:80px 16px 0; }
}
.brief-tabs::-webkit-scrollbar{ height:0; display:none; }
.brief-tab{
appearance:none;
background:transparent;
border:0;
border-bottom:2px solid transparent;
padding:18px 0;
font-family:'JetBrains Mono', monospace;
font-size:13px;
letter-spacing:.15em;
text-transform:uppercase;
color:#888;
cursor:pointer;
transition:color .15s ease, border-color .15s ease;
}
.brief-tab:hover{ color:#fff; }
.brief-tab.active{
color:#fff;
border-bottom-width:2px;
border-image:linear-gradient(90deg, #0D59F2, #8B5CF6) 1;
}
.brief-tab:focus-visible{ outline:2px solid #8B5CF6; outline-offset:4px; }
/* Section gating: each is
hidden by default and only the .active one is shown. JS sets .active on
tab click; default tab is launches_moves. */
.brief-issue__section{ display:none; }
.brief-issue__section.active{ display:block; }
@media (max-width:760px){
.brief-tabs{ gap:16px; overflow-x:auto; padding:0 16px; }
.brief-tab{ font-size:11px; padding:14px 0; white-space:nowrap; }
}
/* Issue header polish: bigger week eyebrow with mono caps + accent dot. */
.brief-issue__head{ padding:18px 0 22px; }
.brief-issue__week{ position:relative; padding-left:14px; }
.brief-issue__week::before{
content:"";
position:absolute;
left:0; top:50%;
width:6px; height:6px;
border-radius:50%;
background:linear-gradient(135deg, #0D59F2, #8B5CF6);
transform:translateY(-50%);
box-shadow:0 0 12px rgba(139,92,246,.6);
}
/* Per-item polish: gradient left bar, hover lift, read-time pill,
publisher hover underline. */
.brief-issue__item{
position:relative;
padding:18px 0 18px 18px;
border-bottom:1px solid #1a1a1a;
transition:background .15s ease, transform .15s ease;
}
.brief-issue__item::before{
content:"";
position:absolute;
left:0; top:18px; bottom:18px;
width:2px;
background:linear-gradient(180deg, #0D59F2, #8B5CF6);
border-radius:2px;
opacity:.5;
transition:opacity .15s ease;
}
.brief-issue__item:hover{ background:rgba(255,255,255,0.02); transform:translateY(-1px); }
.brief-issue__item:hover::before{ opacity:1; }
/* Read-time becomes a pill instead of a plain inline span. Override the
original inline-span rule from earlier work by using higher specificity. */
.brief-issue__item-h .brief-issue__read{
display:inline-block;
padding:1px 8px;
margin-left:8px;
background:rgba(255,255,255,0.06);
border-radius:999px;
font-family:'JetBrains Mono', monospace;
font-size:10px;
font-weight:400;
color:#cfcfcf;
letter-spacing:.05em;
vertical-align:middle;
}
/* Publisher: gradient underline on hover. */
.brief-issue__publisher{
display:inline-block;
position:relative;
padding-bottom:1px;
}
.brief-issue__item:hover .brief-issue__publisher{
color:#fff;
background-image:linear-gradient(90deg, #0D59F2, #8B5CF6);
background-position:0 100%;
background-size:100% 1px;
background-repeat:no-repeat;
}
/* Quick link rows: lighter hover treatment (no left bar). */
.brief-issue__quick li{ transition:background .15s ease; }
.brief-issue__quick li:hover{ background:rgba(255,255,255,0.02); }
/* /brief landing — subscribe card centered + max-width, with eyebrow,
trust dots, and a gradient top edge. Sits prominently above the
archive list. */
.brief-subscribe{
position:relative;
max-width:680px;
margin:0 auto;
padding:44px 40px;
background:rgba(18,18,18,0.92);
border:1px solid #1e1e1e;
border-radius:18px;
overflow:hidden;
text-align:center;
}
.brief-subscribe::before{
content:"";
position:absolute;
top:0; left:0; right:0;
height:2px;
background:linear-gradient(90deg, #0D59F2, #8B5CF6);
}
.brief-subscribe-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
margin:0 0 18px;
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:#888;
}
.brief-subscribe-eyebrow i{
display:inline-block;
width:6px; height:6px;
border-radius:50%;
background:linear-gradient(135deg, #0D59F2, #8B5CF6);
box-shadow:0 0 10px rgba(139,92,246,.55);
}
.brief-subscribe h2{ margin:0 0 10px; color:#fff; font-size:28px; line-height:1.2; }
.brief-subscribe > p{ color:#a8a8a8; margin:0 0 24px; font-size:15px; line-height:1.55; }
.brief-form{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;
max-width:520px;
margin:0 auto;
}
.brief-form input[type="email"]{
flex:1 1 260px;
padding:14px 16px;
background:rgba(0,0,0,0.4);
border:1px solid #2a2a2a;
border-radius:10px;
color:#fff;
font-size:15px;
font-family:inherit;
text-align:left;
}
.brief-form input[type="email"]:focus{ border-color:#8B5CF6; outline:none; }
.brief-form button{ flex:0 0 auto; }
.brief-form-status{ margin-top:16px; color:#cfcfcf; font-size:14px; }
.brief-subscribe-trust{
list-style:none;
padding:0;
margin:24px 0 0;
display:flex;
flex-wrap:wrap;
gap:8px 22px;
justify-content:center;
color:#888;
font-size:12.5px;
}
.brief-subscribe-trust li{ display:inline-flex; align-items:center; gap:8px; }
.brief-trust-dot{
display:inline-block;
width:5px; height:5px;
border-radius:50%;
background:linear-gradient(135deg, #22c55e, #8B5CF6);
}
/* Archive: section header with count chip, then a clean list of cards. */
.brief-archive{ margin-top:80px; }
.brief-archive-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:16px;
margin:0 0 20px;
padding-bottom:14px;
border-bottom:1px solid #1e1e1e;
}
.brief-archive-head h2{ color:#fff; margin:0; font-size:22px; letter-spacing:-0.01em; }
.brief-archive-count{
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
color:#777;
}
.brief-archive [data-role="archive-list"]{
display:flex;
flex-direction:column;
gap:12px;
margin-top:0;
}
.brief-archive-item{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:18px;
padding:18px 22px;
background:rgba(18,18,18,0.92);
border:1px solid #1e1e1e;
border-radius:12px;
color:#fff;
text-decoration:none;
transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.brief-archive-item::after{
content:"→";
color:#666;
font-size:18px;
transition:color .15s ease, transform .15s ease;
}
.brief-archive-item:hover{
transform:translateY(-2px);
border-color:#8B5CF6;
background:rgba(24,18,28,0.92);
box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
.brief-archive-item:hover::after{
color:#fff;
transform:translateX(4px);
}
.brief-archive-item-week{
color:#888;
font-family:'JetBrains Mono', monospace;
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase;
}
.brief-archive-item-title{
color:#fff;
font-size:16px;
line-height:1.4;
font-weight:500;
}
@media (max-width:560px){
.brief-subscribe{ padding:32px 22px; }
.brief-subscribe h2{ font-size:24px; }
.brief-archive-item{ grid-template-columns:1fr auto; padding:16px 18px; }
.brief-archive-item-week{ grid-column:1 / -1; }
}
/* Demoted dev controls: kept until launch but visually small + dim. */
.brief-dev{
margin-top:64px;
padding:18px 20px;
border:1px dashed #333;
border-radius:10px;
background:rgba(255,255,255,0.015);
}
.brief-dev-label{
color:#666;
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
margin:0 0 10px;
}
.brief-dev-row{ display:flex; gap:10px; flex-wrap:wrap; }
.brief-dev .btn{ font-size:12px; padding:8px 14px; }
.brief-dev p[data-role="dev-status"]{
color:#666;
font-size:11px;
margin:12px 0 0;
font-family:'JetBrains Mono', monospace;
}
/* ===== /brief landing — one-screen layout (2026-05-03) =====
Compressed hero + 2-column action band (subscribe left, latest issues right)
so the full conversion unit is visible without scrolling. Cards use the
kgcard visual language: subtle top-fade gradient bg, mono-caps terminal
head strip with a pulsing accent dot, layered shadow with inset highlight.
Reverses the v3.1 subscribe-at-bottom decision; revisit at issue >=10. */
.p-hero--brief h1{ font-size:clamp(32px,4.6vw,56px); margin-bottom:18px; }
.p-hero--brief .lede{ font-size:17px; margin-bottom:0; max-width:760px; }
.brief-action-section{ padding:48px 0 64px; }
@media (max-width:760px){ .brief-action-section{ padding:36px 0 56px; } }
.brief-action-band{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
align-items:stretch;
}
@media (max-width:880px){
.brief-action-band{ grid-template-columns:1fr; gap:20px; }
}
/* Brief landing card: shared chrome for subscribe + archive. */
.brief-card{
position:relative;
display:flex;
flex-direction:column;
background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
box-shadow:0 30px 60px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.brief-card__head{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:14px 22px;
border-bottom:1px solid var(--line);
font-family:var(--mono);
font-size:11px;
letter-spacing:.14em;
color:var(--muted);
text-transform:uppercase;
}
.brief-card__head-l{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.brief-card__head-r{
font-family:var(--mono);
font-size:10px;
letter-spacing:.16em;
color:var(--dim);
text-transform:uppercase;
}
.brief-card__dot{
width:6px; height:6px;
border-radius:50%;
flex:0 0 auto;
animation:dvBriefPulse 2.4s ease-in-out infinite;
}
.brief-card__dot--mint{ background:var(--mint); box-shadow:0 0 12px var(--mint); }
.brief-card__dot--cyan{ background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
/* ── CMO 2026-06-02: remove glowing/pulsing accent dots site-wide ──
Cards, eyebrows, trust lists, live tags, demo blips/packets/satellites. */
.eyebrow .dot,
.btn.btn-live .live-dot,
.stage .src .s-blink,
.xtract-header .rhs .live,
.arrow .pkt,
.viz.pulse::before,
.orbit .sat,
.form-tag .dot,
.p-eyebrow i,
.v-head .dot,
.dblip,
.orr-chip i.pulse,
.orr-core-header .dot,
.orr-particles span,
.sc-header .rhs .live,
.ph-brand .dot,
.kg-blip,
.la-blip,
.kgmodal__lead-tag .dot,
.kgcard .v-head .dot,
.kg-status__dot,
.brief-card__dot,
.brief-card__trust-dot,
.brief-trust-dot,
.home-brief__bullet-dot{ display:none !important; }
/* De-glow functional indicators and demo graph nodes (keep the element, kill glow + pulse). */
.stage .stage-rotator i.on,
.orr-core .sc-dots a.active span,
.sc-dots a.active span,
.ph-tab span.on,
.viz-sched .vs-cal-g i.on,
.viz-graph svg .kg-node,
.viz.pulse::after{ box-shadow:none !important; animation:none !important; }
@keyframes dvBriefPulse{
0%,100%{ opacity:1; transform:scale(1); }
50%{ opacity:.5; transform:scale(.82); }
}
.brief-card__body{ padding:28px 28px 26px; flex:1; display:flex; flex-direction:column; }
/* Body typography (shared across subscribe / book / archive variants). */
.brief-card__h{
margin:0 0 12px;
font-family:var(--display);
font-size:26px;
letter-spacing:-.02em;
color:var(--text);
font-weight:600;
line-height:1.18;
text-wrap:balance;
}
.brief-card__p{
margin:0 0 18px;
color:var(--muted);
font-size:15px;
line-height:1.55;
font-weight:300;
max-width:48ch;
}
.brief-card__cta{ align-self:flex-start; }
.brief-card__form{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-start;
max-width:none;
margin:0;
}
.brief-card__form input[type="email"]{
flex:1 1 220px;
padding:14px 16px;
background:rgba(0,0,0,.35);
border:1px solid var(--line-2);
border-radius:10px;
color:var(--text);
font-size:15px;
font-family:inherit;
text-align:left;
transition:border-color .15s ease, box-shadow .15s ease;
}
.brief-card__form input[type="email"]::placeholder{ color:var(--dim); }
.brief-card__form input[type="email"]:focus{
border-color:var(--cyan);
outline:none;
box-shadow:0 0 0 3px rgba(124,200,255,.12);
}
.brief-card__form button{ flex:0 0 auto; }
.brief-card .brief-form-status{ margin-top:14px; color:var(--muted); font-size:13px; }
.brief-card__trust{
list-style:none;
padding:0;
margin:18px 0 0;
display:flex;
flex-wrap:wrap;
gap:8px 18px;
font-family:var(--mono);
font-size:10.5px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
}
.brief-card__trust li{ display:inline-flex; align-items:center; gap:8px; }
.brief-card__trust-dot{
width:5px; height:5px;
border-radius:50%;
background:var(--grad);
flex:0 0 auto;
}
/* Archive card body */
.brief-card__body--archive{ padding:8px 22px 14px; }
.brief-card__list{ display:flex; flex-direction:column; }
.brief-card__empty{
margin:auto 0;
padding:48px 0;
text-align:center;
font-family:var(--mono);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--dim);
}
/* Override the default standalone .brief-archive-item card chrome
(used elsewhere) when items live inside the archive card. */
.brief-card--archive .brief-archive-item{
background:transparent;
border:none;
border-bottom:1px solid var(--line);
border-radius:0;
padding:14px 6px;
box-shadow:none;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:baseline;
gap:14px;
color:var(--text);
text-decoration:none;
transition:color .15s ease, padding .15s ease;
}
.brief-card--archive .brief-archive-item:last-child{ border-bottom:none; }
.brief-card--archive .brief-archive-item::after{
content:"→";
color:var(--dim);
font-size:14px;
transition:color .15s ease, transform .15s ease;
}
.brief-card--archive .brief-archive-item:hover{
background:transparent;
border-color:var(--line);
transform:none;
box-shadow:none;
color:var(--cyan);
padding-left:10px;
}
.brief-card--archive .brief-archive-item:hover::after{
color:var(--cyan);
transform:translateX(3px);
}
.brief-card--archive .brief-archive-item-week{
color:var(--dim);
font-family:var(--mono);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
}
.brief-card--archive .brief-archive-item-title{
color:var(--text);
font-size:14.5px;
line-height:1.4;
font-weight:400;
transition:color .15s ease;
}
.brief-card--archive .brief-archive-item:hover .brief-archive-item-title{
color:var(--cyan);
}
/* Tighter dev-controls top margin since the new layout removed the long
archive section that justified the original 64px gap. */
.brief-action-section .brief-dev{ margin-top:48px; }
@media (max-width:560px){
.brief-card__head{ padding:12px 18px; }
.brief-card__body{ padding:22px 22px 20px; }
.brief-card__body--archive{ padding:6px 18px 12px; }
.brief-card--subscribe .brief-card__h{ font-size:22px; }
}
/* /brief/ issue page section: tighter top padding than .sect default
(120px) so the tabs nudge up against the issue body, and no .dark-section
slab so the page reads as one continuous color. */
.brief-issue-section{ padding-top:24px; padding-bottom:80px; }
/* Bottom CTA on the issue page: thin wrapper around a .brief-action-band
that holds two .brief-card--quiet columns (Book left, Subscribe right). */
.brief-issue-cta-wrap{ margin-top:80px; margin-bottom:56px; }
@media (max-width:760px){ .brief-issue-cta-wrap{ margin-top:56px; margin-bottom:40px; } }
/* Quiet variant: subtler than the landing cards. No terminal head strip
rendered (HTML omits it), softer chrome, smaller heading, less padding.
Reader has just finished an issue; the cards are sign-offs, not loud
conversion blocks. */
.brief-card--quiet{
background:rgba(255,255,255,.018);
box-shadow:none;
border-color:rgba(255,255,255,.06);
}
.brief-card--quiet .brief-card__body{ padding:24px 26px 22px; }
.brief-card--quiet .brief-card__h{
font-size:18px;
margin:0 0 8px;
letter-spacing:-.01em;
line-height:1.25;
}
.brief-card--quiet .brief-card__p{
font-size:14px;
margin:0 0 14px;
line-height:1.55;
}
.brief-card--quiet .brief-card__cta{ font-size:13px; padding:10px 16px; }
.brief-card--quiet .brief-card__form input[type="email"]{
font-size:14px;
padding:11px 14px;
}
.brief-card--quiet .brief-card__form button{ font-size:13px; padding:10px 16px; }
@media (max-width:560px){
.brief-card--quiet .brief-card__body{ padding:20px 20px 18px; }
}
/* ===== Homepage Brief band (2026-05-03) =====
Discovery surface for the weekly brief. Sits between the customer story
and pricing sections. Two columns: pitch + CTAs left, top-2 latest
issues right (rendered via JS from /api/brief/index). No subscribe form
here — that surface stays only on /brief per the strategic rule. */
.home-brief{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:start;
}
@media (max-width:880px){
.home-brief{ grid-template-columns:1fr; gap:32px; }
}
.home-brief__pitch{
display:flex;
flex-direction:column;
gap:28px;
}
.home-brief__bullets{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:14px;
}
.home-brief__bullets li{
display:flex;
align-items:flex-start;
gap:14px;
color:var(--text);
font-size:16px;
line-height:1.5;
}
.home-brief__bullet-dot{
width:6px; height:6px;
border-radius:50%;
background:var(--grad);
flex:0 0 auto;
margin-top:8px;
box-shadow:0 0 10px rgba(139,92,246,.35);
}
.home-brief__cta-row{
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:center;
}
/* ===== /cost · AI cost calculator (2026-05-05) =====
Live calculator for CFO buyers. Mirrors the .brief-card visual system so
the whole site reads as one product. Two-column band on desktop (inputs
left, output right), stacks on narrow viewports. */
.cost-band{
display:grid;
grid-template-columns:1fr 1fr;
gap:32px;
align-items:start;
}
@media (max-width:880px){
.cost-band{ grid-template-columns:1fr; gap:24px; }
}
.cost-card{
position:relative;
background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
border:1px solid var(--line, #1e1e1e);
border-radius:16px;
box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px rgba(0,0,0,.45);
overflow:hidden;
}
.cost-card__head{
display:flex; align-items:center; justify-content:space-between;
padding:14px 18px;
border-bottom:1px solid rgba(255,255,255,.06);
background:rgba(0,0,0,.3);
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:.18em;
color:#aaa;
text-transform:uppercase;
}
.cost-card__head-l{ display:inline-flex; align-items:center; gap:10px; }
.cost-card__dot{
width:8px; height:8px; border-radius:50%;
background:#8B5CF6;
box-shadow:0 0 10px currentColor;
animation:cost-pulse 2.4s ease-in-out infinite;
}
.cost-card__dot--mint{ background:#22c55e; }
.cost-card__dot--cyan{ background:#7df9ff; }
@keyframes cost-pulse {
0%,100%{ opacity:1; transform:scale(1); }
50%{ opacity:.55; transform:scale(.85); }
}
.cost-card__body{
padding:24px 22px;
display:flex; flex-direction:column; gap:18px;
}
/* ----- Inputs ----- */
.cost-field{
display:flex; flex-direction:column; gap:6px;
}
.cost-field__label{
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:.16em;
color:#bbb;
text-transform:uppercase;
}
.cost-field input,
.cost-field select{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-color:#0e0e10;
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
color:#fff;
font-family:'Inter', sans-serif;
font-size:18px;
font-weight:500;
padding:12px 14px;
outline:none;
transition:border-color .15s ease, background-color .15s ease;
}
.cost-field input:focus,
.cost-field select:focus{
border-color:#8B5CF6;
background-color:#15101e;
}
.cost-field select{
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
background-size:16px;
padding-right:42px;
cursor:pointer;
/* Hint to the OS that the open dropdown should use a dark color scheme.
Chrome 81+ and Firefox 96+ honour this for the popup. */
color-scheme:dark;
}
/* The opened dropdown menu (the popup with the options) is rendered by the
browser/OS and ignores most parent CSS. Explicit background + color on