/* ==========================================================================
Flat Out Automations — interior page components
Loads AFTER main.css. Extends the same token set.
========================================================================== */
@layer components {
/* ---------- BOOKING CALENDAR ---------- */
/* The Calendly widget is the primary action on /booking.html, so it gets the
full reading width rather than sharing a two-column grid with a form. */
.bk-head {
text-align: center; max-width: 60ch; margin-inline: auto;
}
.bk-head h1 {
font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -.032em; line-height: 1.05;
}
.bk-head p {
font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted);
margin-top: 1.2rem; line-height: 1.6;
}
.bk-chips {
display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
margin-top: 1.8rem;
}
.bk-chips span {
display: inline-flex; align-items: center; gap: .4rem;
background: var(--surface); border: 1px solid var(--line);
border-radius: 100px; padding: .45rem .85rem;
font-size: var(--t-sm); color: var(--ink-2); font-weight: 500;
}
.bk-chips svg { color: var(--live); flex: none; }
.cal-shell {
margin-top: clamp(2rem, 4vw, 3rem);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: .4rem;
overflow: hidden;
box-shadow: 0 1px 2px rgb(11 11 12 / .04), 0 12px 32px rgb(11 11 12 / .05);
}
/* Flat Out CRM booking frame. The height here is only the starting value:
the app posts its real height and the script on booking.html applies it,
so this is what shows for the split second before the first message. */
.flatout-booking { min-width: 320px; }
.flatout-booking iframe { min-height: 720px; border-radius: calc(var(--r-lg) - .4rem); }
@media (max-width: 720px) { .flatout-booking iframe { min-height: 1020px; } }
/* Shown only if JavaScript is off or the booking frame fails to load. */
.cal-noscript {
display: grid; place-items: center; gap: .9rem;
padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; text-align: center;
}
.cal-noscript p { color: var(--muted); font-size: var(--t-sm); max-width: 40ch; }
.cal-alt {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: .9rem 1.6rem; margin-top: 1.6rem;
font-size: var(--t-sm); color: var(--muted);
}
.cal-alt a {
color: var(--accent); font-weight: 600;
display: inline-flex; align-items: center; min-height: 44px;
}
/* Two-field fallback for visitors who will not commit to a time yet. */
.bk-fallback {
max-width: 46rem; margin-inline: auto;
background: var(--paper-2); border: 1px solid var(--line-2);
border-radius: var(--r-md); padding: clamp(1.6rem, 3vw, 2.2rem);
}
.bk-fallback h2 { font-size: var(--t-lg); letter-spacing: -.02em; }
.bk-fallback > p { color: var(--muted); font-size: var(--t-sm); margin-top: .5rem; }
.bk-fallback form {
display: grid; grid-template-columns: 1fr 1fr auto; gap: .7rem;
align-items: end; margin-top: 1.4rem;
}
@media (max-width: 640px) { .bk-fallback form { grid-template-columns: 1fr; } }
.bk-fallback .field { margin: 0; }
/* light card: undo the dark-section cta-form colours */
.bk-fallback .cta-form .field label { color: var(--muted-2); }
.bk-fallback .cta-form .field input, .bk-fallback .cta-form .field select {
background: var(--surface); border-color: var(--line); color: var(--ink);
}
.bk-fallback .cta-form .field input::placeholder { color: var(--muted-2); }
.bk-fallback .form-note { margin-top: 1rem; }
/* Replaces the form in place when no endpoint is wired. Deliberately not
styled as a success state — nothing was sent, so no green tick theatre. */
.form-sent {
margin-top: 1.4rem; display: grid; justify-items: start; gap: .7rem;
}
.form-sent .fs-head {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg);
letter-spacing: -.02em;
}
.form-sent .fs-head svg { color: var(--accent); width: 20px; height: 20px; flex: none; }
.form-sent .fs-body { color: var(--muted); font-size: var(--t-sm); max-width: 52ch; line-height: 1.6; }
.form-sent .btn { margin-top: .3rem; }
.form-sent .fs-note { color: var(--muted-2); font-size: var(--t-xs); }
/* ---------- REDUCED CHROME (booking.html) ----------
The booking page has one job. Full chrome gave it 22 navigation links
against 7 body links, so most of the clickable surface led away from the
calendar. Brand and phone stay: a page with no header at all reads as a
phishing form, and the number is the trust cue that matters most here. */
.navbar--min .nav-pill { justify-content: space-between; }
.navbar--min .nav-phone { font-size: var(--t-sm); }
/* The label is hidden globally below 980px to make room for nav items that
no longer exist on this page, so put it back. */
@media (max-width: 980px) {
.navbar--min .nav-phone span { display: inline; }
.navbar--min .nav-phone { padding-inline: .9rem; }
}
.footer--min { padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; }
.footer-contact--row {
flex-direction: row; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 0;
}
.footer--min .footer-bottom { margin-top: 2rem; }
/* ---------- BREADCRUMB ---------- */
.crumbs {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
font-size: var(--t-sm); color: var(--muted); margin-bottom: 1.6rem;
}
.crumbs a {
color: var(--muted); transition: color .2s;
display: inline-flex; align-items: center; min-height: 44px;
}
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); font-weight: 550; }
.crumbs .sep { opacity: .4; }
/* ---------- PAGE HERO (interior) ---------- */
.phero { padding-block: clamp(6.5rem, 11vw, 9rem) clamp(2rem, 4vw, 3.5rem); }
.phero h1 { font-size: var(--t-3xl); max-width: 18ch; }
.phero .lede { font-size: var(--t-lg); color: var(--muted); max-width: 60ch; margin-top: 1.5rem; }
.phero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 940px) { .phero-grid { grid-template-columns: 1fr; } }
/* ---------- ARTICLE META (E-E-A-T signals) ---------- */
.meta-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
padding-block: 1rem; border-block: 1px solid var(--line-2);
font-size: var(--t-sm); color: var(--muted);
}
.meta-bar .who { display: flex; align-items: center; gap: .6rem; }
.meta-bar .who .pic {
width: 30px; height: 30px; border-radius: 50%; background: var(--ink);
color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 700;
}
.meta-bar b { color: var(--ink); font-weight: 600; }
.meta-bar time { font-family: var(--f-mono); font-size: var(--t-xs); }
/* ---------- KEY TAKEAWAYS (AI extraction block) ---------- */
.takeaways {
background: var(--surface); border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--r-md); padding: clamp(1.4rem, 3vw, 2rem);
box-shadow: var(--sh-sm);
}
.takeaways h2 {
font-size: var(--t-base); font-family: var(--f-mono); font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.takeaways ul { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
/* The must NOT be a flex container.
A flex container turns every child into a flex item, and that includes
bare text nodes. These items are written as
Lead-in. Sentence of detail.[1]
so flex laid the , the sentence and the citation out as three side-by-side
columns. On a phone each column was ~100px wide and the bold lead-in wrapped
one word per line, while the citation was pushed outside the list item
entirely — measured at x=305 inside a 282px box, with a single bullet
274px tall.
The bullet is absolutely positioned instead, so the content stays as one
normal run of inline text. */
.takeaways li {
position: relative; padding-left: 1.35rem;
font-size: var(--t-base); line-height: 1.55;
}
.takeaways li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
}
.takeaways li b { font-weight: 650; }
/* ---------- ANSWER BLOCK (definition / direct answer) ---------- */
.answer {
background: var(--paper-2); border-radius: var(--r-md);
padding: clamp(1.2rem, 2.6vw, 1.7rem);
font-size: var(--t-lg); line-height: 1.55; color: var(--ink);
border: 1px solid var(--line-2); margin-block: 1.4rem;
}
.answer strong { font-weight: 650; }
/* ---------- PROSE ---------- */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--t-2xl); margin-top: 3.2rem; }
.prose h3 { font-size: var(--t-xl); margin-top: 2.2rem; }
.prose p { color: var(--ink-2); }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: .7rem; padding-left: 0; }
/* Same reason as .takeaways li above — any , or bare text inside a
flex becomes its own column. Marker is positioned, text flows. */
.prose ul li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.prose ul li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent); }
.prose ol { counter-reset: p; }
.prose ol li { position: relative; padding-left: 2.3rem; counter-increment: p; color: var(--ink-2); }
.prose ol li::before {
content: counter(p); position: absolute; left: 0; top: .1em;
display: grid; place-items: center;
font-family: var(--f-mono); font-size: .78rem;
width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent-ink);
color: var(--accent); display: grid; place-items: center; font-weight: 600; margin-top: .15rem;
}
.prose a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
border-left: 3px solid var(--accent); padding-left: 1.3rem;
font-size: var(--t-lg); line-height: 1.5; color: var(--ink);
}
.prose blockquote cite { display: block; font-size: var(--t-sm); color: var(--muted); font-style: normal; margin-top: .7rem; }
/* ---------- PEAK SEASON COUNTDOWN ---------- */
.season {
background: var(--ink); color: #fff; border-radius: var(--r-xl);
padding: clamp(1.8rem, 3.5vw, 2.6rem); box-shadow: var(--sh-lg);
position: relative; overflow: hidden;
}
.season::after {
content: ""; position: absolute; top: -50%; right: -20%;
width: 420px; height: 420px; border-radius: 50%;
background: radial-gradient(circle, rgb(255 77 15 / .28), transparent 70%);
}
.season > * { position: relative; z-index: 1; }
.season .lbl {
font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em;
text-transform: uppercase; color: rgb(255 255 255 / .5);
}
.season .big {
font-family: var(--f-display); font-size: clamp(3rem, 9vw, 5rem); line-height: 1;
letter-spacing: -.05em; color: var(--accent); margin-block: .6rem .2rem;
font-variant-numeric: tabular-nums;
}
.season .cap { font-size: var(--t-base); color: rgb(255 255 255 / .68); }
.season .bar { height: 6px; border-radius: var(--r-full); background: rgb(255 255 255 / .12); margin-top: 1.6rem; overflow: hidden; }
.season .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #FF8A3D); border-radius: var(--r-full); transition: width 1s var(--ease); }
.season .scale { display: flex; justify-content: space-between; margin-top: .6rem; font-family: var(--f-mono); font-size: var(--t-xs); color: rgb(255 255 255 / .4); }
/* ==================================================================
LANDING HERO — dark, loud, sales-first.
The visual opposite of the guide masthead so the two page types are
never mistaken for each other.
================================================================== */
.phero--dark {
background: var(--ink);
color: #fff;
padding-block: clamp(7rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem);
position: relative; overflow: hidden;
border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.phero--dark::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(to right, rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 64px 64px,
linear-gradient(to bottom, rgb(255 255 255 / .04) 1px, transparent 1px) 0 0 / 64px 64px;
mask-image: radial-gradient(ellipse at 30% 0%, #000, transparent 75%);
}
.phero--dark::after {
content: ""; position: absolute; top: -35%; right: -12%;
width: 620px; height: 620px; border-radius: 50%;
background: radial-gradient(circle, rgb(255 77 15 / .20), transparent 68%);
pointer-events: none;
}
.phero--dark > * { position: relative; z-index: 1; }
.phero--dark h1 {
color: #fff;
font-size: clamp(2.6rem, 6.4vw, 5.2rem);
letter-spacing: -.045em; line-height: .99; max-width: 15ch;
}
/* Interior heroes carry their own hard-coded clamps rather than the type
tokens, so the token fix did not reach them. Same failure as the tokens
had: at 390px the fluid term is 25px but the floor is 41.6px, so the
floor binds and the heading never scales down. Combined with a 112px
top padding floor, the first card on /blog/ started at y=674 — a whole
screen below the fold on a 680px phone.
Only the small end changes; 761px and up is untouched. */
@media (max-width: 760px) {
.phero { padding-block: clamp(5.5rem, 4rem + 9vw, 6.5rem) 2rem; }
.phero--dark { padding-block: clamp(5.75rem, 4rem + 10vw, 7rem) 2.25rem; }
.phero--dark h1 { font-size: clamp(1.95rem, 1rem + 5.4vw, 2.6rem); line-height: 1.03; }
.phero h1 { max-width: none; }
.phero--dark h1 { max-width: none; }
.phero .lede, .phero--dark .lede { font-size: var(--t-base); margin-top: 1.1rem; }
}
.phero--dark h1 em { font-style: normal; color: var(--accent); }
.phero--dark .lede { color: rgb(255 255 255 / .62); font-size: var(--t-lg); max-width: 54ch; }
.phero--dark .eyebrow { color: rgb(255 255 255 / .5); }
.phero--dark .hero-note { color: rgb(255 255 255 / .38); }
.phero--dark .crumbs { color: rgb(255 255 255 / .4); }
.phero--dark .crumbs a { color: rgb(255 255 255 / .55); }
.phero--dark .crumbs a:hover { color: var(--accent); }
.phero--dark .crumbs [aria-current] { color: rgb(255 255 255 / .85); }
.phero--dark .btn-ghost { border-color: rgb(255 255 255 / .22); color: #fff; }
.phero--dark .btn-ghost:hover { border-color: #fff; background: rgb(255 255 255 / .07); }
/* proof chips under the hero CTA */
.hero-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.hero-chips span {
display: inline-flex; align-items: center; gap: .45rem;
font-size: var(--t-xs); font-family: var(--f-mono); letter-spacing: .02em;
padding: .45rem .85rem; border-radius: var(--r-full);
background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .11);
color: rgb(255 255 255 / .72);
}
.hero-chips span svg { color: var(--live); }
/* widgets sitting inside the dark hero need a lighter shell */
.phero--dark .season,
.phero--dark .afterhours {
background: rgb(255 255 255 / .055);
border: 1px solid rgb(255 255 255 / .12);
box-shadow: none;
}
.phero--dark .season::after { opacity: .55; }
/* ---------- AFTER-HOURS LIVE DIAL ---------- */
.afterhours {
background: var(--ink); color: #fff; border-radius: var(--r-xl);
padding: clamp(1.8rem, 3.5vw, 2.6rem); box-shadow: var(--sh-lg);
position: relative; overflow: hidden;
}
.afterhours::after {
content: ""; position: absolute; top: -40%; right: -15%;
width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgb(255 77 15 / .26), transparent 70%);
opacity: 0; transition: opacity .8s var(--ease);
}
.afterhours.is-after::after { opacity: 1; }
.afterhours > * { position: relative; z-index: 1; }
.ah-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ah-badge {
font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em;
text-transform: uppercase; font-weight: 600;
padding: .4rem .9rem; border-radius: var(--r-full);
background: rgb(0 168 98 / .16); color: #34D399; border: 1px solid rgb(0 168 98 / .3);
transition: all .5s var(--ease);
}
.afterhours.is-after .ah-badge { background: rgb(255 77 15 / .16); color: #FF8A5C; border-color: rgb(255 77 15 / .34); }
.ah-clock {
font-family: var(--f-mono); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 500;
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ah-clock::after { content: " AWST"; font-size: .45em; opacity: .45; letter-spacing: .1em; }
.dial { display: flex; gap: 2px; margin-block: 1.6rem 1rem; height: 46px; align-items: flex-end; }
.dial .seg {
flex: 1; border-radius: 3px; transition: all .5s var(--ease);
background: rgb(255 255 255 / .10); height: 60%;
}
.dial .seg.shut { background: rgb(255 77 15 / .30); height: 100%; }
.dial .seg.open { background: rgb(255 255 255 / .13); height: 55%; }
.dial .seg.now {
background: var(--accent) !important; height: 100% !important;
box-shadow: 0 0 14px rgb(255 77 15 / .7);
}
.dial-key {
display: flex; gap: 1.4rem; flex-wrap: wrap;
font-family: var(--f-mono); font-size: var(--t-xs); color: rgb(255 255 255 / .42);
}
.dial-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .45rem; vertical-align: baseline; }
.ah-state { font-family: var(--f-display); font-size: var(--t-xl); letter-spacing: -.03em; margin-top: 1.6rem; }
.ah-cap { font-size: var(--t-sm); color: rgb(255 255 255 / .6); margin-top: .8rem; line-height: 1.6; }
.ah-cap b { color: #fff; font-weight: 600; }
/* ---------- ENGAGEMENT PANEL (replaces SaaS pricing tiers) ---------- */
.engage {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md);
}
.engage-top {
padding: clamp(1.8rem, 3.5vw, 2.6rem);
border-bottom: 1px solid var(--line);
display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
@media (max-width: 780px) { .engage-top { grid-template-columns: 1fr; } }
.engage-top h3 { font-size: var(--t-xl); letter-spacing: -.03em; }
.engage-top p { color: var(--muted); margin-top: .7rem; max-width: 52ch; }
.engage-figs { display: flex; gap: clamp(1.5rem, 4vw, 3rem); }
.engage-fig .n {
font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.1rem);
letter-spacing: -.04em; color: var(--ink); line-height: 1;
}
.engage-fig .n small { font-size: .5em; color: var(--muted); font-family: var(--f-body); letter-spacing: 0; }
.engage-fig .l {
font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-top: .6rem;
}
.engage-body { padding: clamp(1.8rem, 3.5vw, 2.6rem); }
.engage-body ul { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 2rem; }
@media (max-width: 700px) { .engage-body ul { grid-template-columns: 1fr; } }
.engage-body li { display: flex; gap: .7rem; font-size: var(--t-sm); color: var(--ink-2); }
.engage-body li svg { color: var(--live); flex: none; margin-top: .25rem; }
.engage-foot {
padding: 1.3rem clamp(1.8rem, 3.5vw, 2.6rem);
background: var(--paper-2); font-size: var(--t-sm); color: var(--muted);
display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
/* ---------- PHASES (the relationship over time) ---------- */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 860px) { .phases { grid-template-columns: 1fr; } }
.phase {
background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-lg); padding: clamp(1.5rem, 2.8vw, 2rem);
box-shadow: var(--sh-sm); position: relative;
}
.phase .when {
font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em;
text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.phase h3 { font-size: var(--t-lg); margin-top: .8rem; letter-spacing: -.03em; }
.phase p { font-size: var(--t-sm); color: var(--muted); margin-top: .7rem; }
.phase ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.phase li { display: flex; gap: .6rem; font-size: var(--t-sm); color: var(--ink-2); }
.phase li::before { content: "·"; color: var(--accent); font-weight: 700; }
/* ---------- FIT / NOT FIT ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }
.fit-col { border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.1rem); border: 1px solid var(--line-2); }
.fit-col.yes { background: var(--surface); box-shadow: var(--sh-sm); }
.fit-col.no { background: var(--paper-2); }
.fit-col h3 { font-size: var(--t-lg); display: flex; align-items: center; gap: .6rem; }
.fit-col.yes h3 svg { color: var(--live); }
.fit-col.no h3 svg { color: var(--muted-2); }
.fit-col ul { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.fit-col li { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.fit-col.yes li { color: var(--ink-2); }
/* ---------- GO-LIVE DATE BAND ---------- */
.liveby {
display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-xl); padding: clamp(1.8rem, 3.5vw, 2.6rem);
box-shadow: var(--sh-md);
}
@media (max-width: 900px) {
.liveby { grid-template-columns: 1fr; text-align: left; }
/* Grid items default to min-width:auto, which refuses to shrink below the
widest unbreakable thing inside them. One long word or a nowrap child is
then enough to push the whole card past the screen. */
.liveby > * { min-width: 0; }
}
.liveby .lb-lead {
font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em;
text-transform: uppercase; color: var(--muted);
}
.liveby .lb-date {
font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 3rem);
letter-spacing: -.04em; line-height: 1.05; color: var(--accent);
margin-top: .5rem;
/* white-space: nowrap was here and it clipped the date on every phone.
"Monday 14 September" needs 287px; inside this card at a 360px viewport
it has 262px. nowrap cannot shrink, and because .liveby is a grid whose
items default to min-width:auto, the whole card was dragged out to the
date's width — taking the note and the button with it. body has
overflow-x:hidden, so instead of a scrollbar the text was simply sliced
off at the card edge: "Monday 14 Septembe".
Nothing is needed to keep it on one line on desktop. The desktop grid is
`auto 1fr auto`, and an auto track already sizes to max-content, so the
date sits on one line there without being told to. Below 900px the grid
collapses to a single column and the date is free to wrap, which is what
it should have done all along. */
min-width: 0;
}
.liveby .lb-note { font-size: var(--t-base); color: var(--muted); line-height: 1.6; max-width: 46ch; }
.liveby .lb-note b { color: var(--ink); font-weight: 650; }
.liveby .lb-rule { width: 1px; align-self: stretch; background: var(--line); }
@media (max-width: 900px) { .liveby .lb-rule { display: none; } }
/* ---------- BOTTLENECK MATRIX ---------- */
.neck {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; background: var(--surface); box-shadow: var(--sh-sm);
}
.neck + .neck { margin-top: 1rem; }
@media (max-width: 800px) { .neck { grid-template-columns: 1fr; } }
.neck-problem { padding: clamp(1.4rem, 2.6vw, 1.9rem); background: var(--paper-2); }
.neck-fix { padding: clamp(1.4rem, 2.6vw, 1.9rem); border-left: 1px solid var(--line); }
@media (max-width: 800px) { .neck-fix { border-left: 0; border-top: 1px solid var(--line); } }
.neck .tagline {
font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em;
text-transform: uppercase; margin-bottom: .8rem; display: block;
}
.neck-problem .tagline { color: var(--muted); }
.neck-fix .tagline { color: var(--accent); }
.neck b { display: block; font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: -.03em; }
.neck p { font-size: var(--t-sm); color: var(--muted); margin-top: .6rem; }
.neck .worth {
display: inline-block; margin-top: .9rem; font-family: var(--f-mono); font-size: var(--t-xs);
background: var(--accent-ink); color: var(--accent); padding: .35rem .8rem; border-radius: var(--r-full);
font-weight: 600;
}
/* ---------- COMPARISON TABLE ---------- */
.cmp-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-sm); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 700px; font-size: var(--t-sm); }
table.cmp th, table.cmp td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.cmp thead th {
font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); font-weight: 500;
background: var(--paper-2); white-space: nowrap;
}
table.cmp tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.cmp td { color: var(--muted); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
table.cmp .col-us { background: rgb(255 77 15 / .045); }
table.cmp thead .col-us { background: rgb(255 77 15 / .11); color: var(--accent); font-weight: 700; }
.yes-i { color: var(--live); font-weight: 600; }
.no-i { color: var(--muted-2); }
/* ---------- DATA TABLE (costs, stats) ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data caption {
text-align: left; font-family: var(--f-mono); font-size: var(--t-xs);
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
padding-bottom: .9rem;
}
table.data th, table.data td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line-2); text-align: left; }
table.data thead th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line); }
table.data td { color: var(--muted); }
table.data td:first-child, table.data th:first-child { color: var(--ink); font-weight: 550; }
table.data .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
/* ---------- TIMELINE ---------- */
.tl { position: relative; padding-left: 2.4rem; }
.tl::before { content: ""; position: absolute; left: .58rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 2rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
content: ""; position: absolute; left: -2.4rem; top: .35rem;
width: 14px; height: 14px; border-radius: 50%; background: var(--paper);
border: 3px solid var(--line);
}
.tl-item.hot::before { border-color: var(--accent); background: var(--accent); }
.tl-item .t { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.tl-item b { display: block; font-size: var(--t-base); margin-top: .35rem; }
.tl-item p { font-size: var(--t-sm); color: var(--muted); margin-top: .35rem; }
/* ---------- HOWTO STEPS ---------- */
.howto { display: grid; gap: 1rem; }
.howto-step {
display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem;
background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-md); padding: 1.4rem; box-shadow: var(--sh-sm);
}
.howto-step .n {
width: 3rem; height: 3rem; border-radius: var(--r-sm); background: var(--ink); color: #fff;
display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: var(--t-base);
}
.howto-step b { font-size: var(--t-base); }
.howto-step p { font-size: var(--t-sm); color: var(--muted); margin-top: .4rem; }
.howto-step .dur { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); margin-top: .6rem; display: block; }
/* ---------- SUBURB GRID ---------- */
.burbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.burb {
font-size: var(--t-sm); padding: .5rem 1rem; border-radius: var(--r-full);
background: var(--surface); border: 1px solid var(--line-2); color: var(--muted);
transition: all .25s var(--ease);
}
a.burb:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- STAT STRIP ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 860px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-box {
background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-md); padding: 1.5rem; box-shadow: var(--sh-sm);
}
.stat-box .v {
font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1;
letter-spacing: -.05em; color: var(--accent);
}
.stat-box .k { font-size: var(--t-sm); color: var(--muted); margin-top: .6rem; line-height: 1.4; }
.stat-box .src { font-family: var(--f-mono); font-size: .66rem; color: var(--muted-2); margin-top: .7rem; display: block; }
/* ---------- SOURCES ---------- */
.sources { background: var(--paper-2); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.2rem); }
.sources h2 { font-size: var(--t-lg); }
.sources ol { counter-reset: s2; margin-top: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
/* Source entries are a title, a publisher and a link, so the same flex
column-splitting applies here. Positioned marker, text flows. */
.sources li {
counter-increment: s2; position: relative; padding-left: 2.2rem;
font-size: var(--t-sm); color: var(--muted);
}
.sources li::before {
content: "[" counter(s2) "]"; position: absolute; left: 0; top: .15rem;
font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent);
}
.sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sources a:hover { color: var(--accent); }
/* ---------- INLINE CITATION ---------- */
.cite {
font-family: var(--f-mono); font-size: .7em; vertical-align: super;
color: var(--accent); text-decoration: none; padding: 0 .1em;
}
.cite:hover { text-decoration: underline; }
/* ---------- CTA BAND ---------- */
.band {
background: var(--accent); color: #fff; border-radius: var(--r-xl);
padding: clamp(2rem, 4.5vw, 3.2rem);
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
}
.band h2 { color: #fff; font-size: var(--t-2xl); max-width: 20ch; }
.band p { color: rgb(255 255 255 / .85); margin-top: .8rem; max-width: 46ch; }
.band .btn-white { background: #fff; color: var(--accent); }
.band .btn-white:hover { box-shadow: 0 10px 30px rgb(0 0 0 / .18); }
/* ---------- RELATED ---------- */
.rel-card {
display: block; background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--sh-sm);
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rel-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.rel-card .k { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.rel-card b { display: block; font-size: var(--t-lg); font-family: var(--f-display); letter-spacing: -.03em; margin-top: .7rem; }
.rel-card p { font-size: var(--t-sm); color: var(--muted); margin-top: .5rem; }
}