// — tone them down so they
sit inside the surrounding sections without visual noise. */
.ps-desc :first-child { margin-top: 0; }
.ps-desc :last-child { margin-bottom: 0; }
.ps-desc p { margin: 0 0 12px; }
.ps-desc a { color: var(--laterite); text-decoration: underline; }
.ps-loop-md, .ps-features-md {
color: #222;
font-size: 15px;
line-height: 1.55;
max-width: 720px;
}
.ps-loop-md ol, .ps-loop-md ul,
.ps-features-md ol, .ps-features-md ul {
margin: 6px 0 0;
padding-left: 22px;
}
.ps-loop-md li, .ps-features-md li { margin: 4px 0; }
.ps-loop-md p, .ps-features-md p { margin: 0 0 10px; }
.ps-loop-md a, .ps-features-md a { color: var(--laterite); text-decoration: underline; }
.ps-with {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 12.5px;
}
.ps-with span { color: var(--mute); font-weight: 500; }
.ps-with a {
padding: 4px 10px;
border-radius: 999px;
background: #f3f3f3;
font-weight: 600 !important;
font-size: 12.5px;
text-decoration: none !important;
}
.ps-with a:hover { background: var(--royal-blue); color: #fff; opacity: 1; }
.ps-flag-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
padding-top: 12px;
}
/* --- Compact app cards --- */
.ps-apps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.ps-app {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
text-decoration: none !important;
font-weight: 400 !important;
color: inherit;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.ps-app:hover {
border-color: var(--royal-blue);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 66, 186, 0.12);
}
.ps-app-shot { background: #ececec; }
.ps-app-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px 18px;
flex: 1;
}
.ps-app-who {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--laterite);
}
.ps-app-name {
margin: 0;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
}
.ps-app-tag {
margin: 0;
color: var(--mute);
font-size: 13.5px;
line-height: 1.4;
}
.ps-app-go {
margin-top: auto;
padding-top: 10px;
font-size: 13px;
font-weight: 600;
color: var(--royal-blue);
}
.ps-ind {
padding-top: 28px;
padding-bottom: 12px;
}
.ps-ind-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.ps-ind-all {
flex-shrink: 0;
font-size: 14px;
color: var(--royal-blue) !important;
text-decoration: none !important;
font-weight: 600 !important;
}
.ps-ind-all:hover {
color: var(--brand-navy-2) !important;
}
.ps-more { margin-top: 28px; }
.ps-more h3 {
margin: 0 0 14px;
font-size: 16px;
font-weight: 600;
}
.ps-hero-buyer {
margin: 0;
color: var(--mute);
font-size: 14px;
}
.ps-section-lede {
margin: -8px 0 18px;
color: var(--mute);
}
.ps-day .ps-desc { margin-top: 20px; }
.ps-hero-detail .ps-hero-media {
background: #ececec;
display: flex;
align-items: stretch;
aspect-ratio: auto;
min-height: 280px;
}
.ps-hero-detail .ps-win { width: 100%; height: 100%; }
/* --- Product window --- */
.ps-win {
height: 100%;
min-height: 220px;
padding: 16px;
background:
linear-gradient(180deg, #dcdcdc 0%, #cfcfcf 100%);
}
.ps-win.is-compact { min-height: 150px; padding: 12px; }
.ps-win-bezel {
height: 100%;
background: var(--bezel);
border-radius: 12px;
padding: 8px 8px 10px;
display: flex;
flex-direction: column;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.ps-win-chrome {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 6px 8px;
}
.ps-win-dots { display: flex; gap: 4px; }
.ps-win-dots i {
display: block;
width: 7px;
height: 7px;
border-radius: 999px;
background: #3a3a3a;
}
.ps-win-dots i:first-child { background: var(--laterite); }
.ps-win-label {
color: #bdbdbd;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ps-win-screen {
flex: 1;
background: var(--screen);
border-radius: 6px;
overflow: hidden;
min-height: 0;
}
.ps-win-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sc {
height: 100%;
padding: 10px;
font-size: 11px;
color: #111;
}
.sc-floor {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 8px;
}
.sc-floor-map {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
align-content: center;
}
.sc-floor-map i {
display: block;
aspect-ratio: 1;
border-radius: 999px;
border: 2px solid #ccc;
background: #fff;
}
.sc-floor-map i.on {
background: var(--laterite);
border-color: var(--laterite);
}
.sc-slip {
display: flex;
flex-direction: column;
gap: 4px;
background: #fff;
border: 1px dashed #ccc;
border-radius: 6px;
padding: 8px;
font-size: 10.5px;
}
.sc-slip b { font-size: 12px; }
.sc-kds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-tix {
background: #fff;
border-radius: 6px;
padding: 8px 6px;
border-top: 4px solid #16a34a;
display: flex;
flex-direction: column;
gap: 4px;
}
.sc-tix.age-warn { border-top-color: #ca8a04; }
.sc-tix.age-hot { border-top-color: var(--laterite); }
.sc-tix em { color: var(--mute); font-style: normal; font-size: 10px; }
.sc-host { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 8px; }
.sc-plan {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
align-content: center;
}
.sc-plan i {
display: block;
height: 28px;
border-radius: 4px;
background: #fff;
border: 1px solid #ddd;
}
.sc-plan i.booked { background: rgba(10, 66, 186, 0.16); border-color: var(--laterite); }
.sc-plan i.seated { background: var(--laterite); }
.sc-book { display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; }
.sc-retail, .sc-ledger, .sc-paye, .sc-tax, .sc-garage, .sc-factory,
.sc-recipe, .sc-proj, .sc-prop, .sc-campus, .sc-fleet, .sc-school {
display: flex;
flex-direction: column;
gap: 8px;
}
.sc-lines, .sc-rows {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 10px;
font-size: 11px;
}
.sc-pay, .sc-kpi, .sc-form, .sc-job, .sc-att, .sc-wo {
display: flex;
justify-content: space-between;
align-items: baseline;
background: #fff;
border-radius: 6px;
padding: 8px 10px;
}
.sc-kpi strong, .sc-pay strong { font-size: 18px; letter-spacing: -0.03em; }
.sc-pay em {
font-style: normal;
font-weight: 700;
color: var(--laterite);
letter-spacing: 0.04em;
}
.sc-crm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-col {
background: #fff;
border-radius: 6px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sc-col em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--mute); }
.sc-col i { display: block; height: 18px; border-radius: 3px; background: #eee; }
.sc-col.on i { background: rgba(10, 66, 186, 0.16); }
.sc-shop {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
height: 100%;
}
.sc-shop i {
display: block;
border-radius: 6px;
background: #fff;
border: 1px solid #e6e6e6;
}
.sc-shop i.on { border-color: var(--laterite); box-shadow: inset 0 0 0 2px var(--laterite); }
.sc-hotel { height: 100%; }
.sc-chart {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
height: 100%;
align-content: center;
}
.sc-chart i { display: block; height: 22px; border-radius: 3px; background: #fff; border: 1px solid #e6e6e6; }
.sc-chart i.in { background: var(--laterite); border-color: var(--laterite); }
.sc-chart i.arr { background: rgba(10, 66, 186, 0.16); }
.sc-chart i.dep { background: #ddd; }
.sc-kids {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.sc-kids i { display: block; height: 22px; border-radius: 4px; background: #dcfce7; }
.sc-kids i.no { background: #fecaca; }
.sc-kids i.late { background: #fde68a; }
.sc-bar {
height: 6px;
background: #e5e5e5;
border-radius: 99px;
overflow: hidden;
margin-top: 6px;
}
.sc-bar i { display: block; height: 100%; background: var(--laterite); }
.sc-salon, .sc-cowork { display: flex; flex-direction: column; gap: 6px; }
.sc-slot {
display: flex;
justify-content: space-between;
background: #fff;
border-radius: 6px;
padding: 7px 8px;
font-size: 11px;
}
.sc-slot.on { border-left: 3px solid var(--laterite); }
.sc-clinic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-q {
background: #fff;
border-radius: 6px;
padding: 10px 6px;
text-align: center;
}
.sc-q.now { background: rgba(10, 66, 186, 0.16); }
.sc-q b { display: block; font-size: 16px; }
.sc-phone {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
.sc-msg {
align-self: flex-start;
background: #fff;
border-radius: 10px 10px 10px 2px;
padding: 8px 10px;
max-width: 80%;
}
.sc-msg.me {
align-self: flex-end;
background: rgba(10, 66, 186, 0.16);
border-radius: 10px 10px 2px 10px;
}
.sc-wh {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
height: 100%;
align-content: center;
}
.sc-wh i {
display: grid;
place-items: center;
height: 44px;
border-radius: 6px;
background: #fff;
border: 1px solid #e6e6e6;
font-size: 12px;
font-weight: 700;
}
.sc-wh i::after { content: attr(data-n); }
.sc-wh i.low { background: #fde68a; }
.sc-wh i.out { background: #fecaca; }
.os-catalog .os-cambodia-band { margin-top: 8px; }
@media (max-width: 980px) {
.ps-trades-grid,
.ps-top-grid,
.ps-flag-grid,
.ps-flag-grid.is-single,
.ps-apps,
.ps-steps {
grid-template-columns: 1fr 1fr;
}
.ps-flag.is-lead { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.ps-show-hero { padding-top: 36px; }
.ps-show-hero h1 { max-width: none; }
.ps-trades-grid,
.ps-top-grid,
.ps-flag-grid,
.ps-apps,
.ps-steps {
grid-template-columns: 1fr;
}
.ps-ind-head { align-items: flex-start; flex-direction: column; }
.ps-win { min-height: 180px; }
.os-catalog .ps-chip-band { top: auto; }
}
@media (prefers-reduced-motion: reduce) {
.ps-trade,
.ps-flag,
.ps-app,
.ps-feat-card,
.ps-card-biz {
transition: none;
}
.ps-trade:hover,
.ps-flag:hover,
.ps-app:hover {
transform: none;
}
}
/* -----------------------------------------------------------------
Hero platform-name rotator
Cycles the highlighted brand in "Sell on ______." through Telegram
→ Messenger → WhatsApp → Line every 2s (8s total loop). The ghost
span reserves the width of the longest word so the h1 doesn't
reflow between swaps; the sr-only span carries the whole list for
assistive tech so screen readers hear the full multi-platform
message instead of just the currently-visible word.
----------------------------------------------------------------- */
.os-rotator {
position: relative;
display: inline-block;
vertical-align: baseline;
overflow: hidden;
line-height: inherit;
}
.os-rotator__sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.os-rotator__ghost {
visibility: hidden;
white-space: nowrap;
}
.os-rotator__word {
position: absolute;
inset: 0 auto auto 0;
white-space: nowrap;
opacity: 0;
transform: translateY(100%);
animation: os-rotator-cycle 8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
will-change: transform, opacity;
}
/* Colored from the KustomAI palette: one Cobalt anchor from the 30%
tier + the three 10% accents. Skipping the platforms' own brand
hues (Telegram cyan-blue, WhatsApp green, etc.) is a deliberate
palette-purity choice — the rotator here is a KustomAI moment, not
a logo strip. */
/* Two-colour palette: rotator words on the Royal Blue hero cycle
through White at 100 / 82 / 60 / 40% opacity so each frame reads
as a distinct tempo without introducing a third hue. */
.os-rotator__word--tg { animation-delay: 0s; color: rgba(255, 255, 255, 1.00); }
.os-rotator__word--mg { animation-delay: 2s; color: rgba(255, 255, 255, 0.82); }
.os-rotator__word--wa { animation-delay: 4s; color: rgba(255, 255, 255, 0.60); }
.os-rotator__word--ln { animation-delay: 6s; color: rgba(255, 255, 255, 0.40); }
@keyframes os-rotator-cycle {
/* Each word owns 25% of the 8s cycle: brief entry, ~1.6s hold,
brief exit, then parks off-screen until the next turn. */
0% { opacity: 0; transform: translateY(100%); }
3% { opacity: 1; transform: translateY(0); }
22% { opacity: 1; transform: translateY(0); }
25% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 0; transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.os-rotator__word {
animation: none;
}
/* Freeze the first brand in place — no motion, no cycling. */
.os-rotator__word--tg {
opacity: 1;
transform: translateY(0);
}
}
/* -----------------------------------------------------------------
Compact social row for marketing footers. Muted gray by default,
nudges toward brand ink on hover. Icons only (14px SVG). See
`KustomaiWeb.MarketingComponents.os_socials/1` for markup.
----------------------------------------------------------------- */
.os-socials {
display: inline-flex;
align-items: center;
gap: 10px;
}
.os-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #9ca3af; /* zinc-400: muted enough to sit quietly next to text links */
transition: color 0.15s ease;
border-radius: 4px;
/* Undo the `.os-foot a { margin-left: 16px }` default so our own
`.os-socials { gap }` controls spacing between the icons. */
margin-left: 0;
}
/* Small nudge so the icon row sits away from the last text link. */
.os-foot .os-socials {
margin-left: 16px;
}
.os-socials a:hover,
.os-socials a:focus-visible {
color: var(--ka-navy, #0f172a);
}
/* When the socials live inside the Navy footer, invert the resting
and hover colours so they read as light icons that brighten on
hover instead of trying to darken to Navy on Navy. */
.os-foot .os-socials a {
color: rgba(255, 255, 255, 0.55);
}
.os-foot .os-socials a:hover,
.os-foot .os-socials a:focus-visible {
color: #ffffff;
}
/* -----------------------------------------------------------------
Auth / demo form fields — inputs across sign-in, register, and the
demo request page. Palette-aligned focus rings + Cobalt border on
hover; inline HEEx styles set the base geometry. This overrides the
`#111` focus that used to live per-page.
----------------------------------------------------------------- */
.auth-input,
.os-form input:not([type="checkbox"]):not([type="radio"]),
.os-form textarea,
.os-form select {
border: 1px solid var(--line);
background: #ffffff;
color: var(--ink);
border-radius: 10px;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.auth-input:hover,
.os-form input:not([type="checkbox"]):not([type="radio"]):hover,
.os-form textarea:hover,
.os-form select:hover {
border-color: #94a3b8; /* slate-400 */
}
.auth-input:focus,
.auth-input:focus-visible,
.os-form input:focus,
.os-form textarea:focus,
.os-form select:focus {
outline: none;
border-color: var(--royal-blue);
box-shadow: 0 0 0 3px rgba(10, 66, 186, 0.22);
}
.auth-field-label a {
color: var(--ink-body);
}
.auth-alt a {
color: var(--ink-body);
font-weight: 600;
}
/* -----------------------------------------------------------------
Auth plate — /sign-in, /register.
Black-text-on-white per the palette rule (Royal Blue is reserved
for the top nav bar + the primary CTA button below the form).
The old `.os-hero .auth-*` overrides that painted labels white for
the Royal Blue plate are removed — auth pages no longer sit inside
the hero.
----------------------------------------------------------------- */
.auth-plate {
padding: 88px 0 80px;
background: var(--paper);
color: var(--ink);
}
.auth-plate h1 {
margin: 0 0 16px;
font-family: var(--font-serif);
font-size: clamp(40px, 5vw, 64px);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.02;
color: var(--ink);
}
.auth-plate h1 em,
.auth-plate .os-serif-em {
font-style: italic;
color: rgba(0, 0, 0, 0.55);
}
.auth-plate .os-lead {
margin: 0 0 24px;
color: var(--ink-body);
font-size: 18px;
line-height: 1.55;
max-width: 34rem;
}
/* Body links on the auth plate — black underlined (affordance from
underline, not from a chrome hue). */
.auth-plate a:not(.os-btn):not(.os-brand):not(.bot-cta) {
color: var(--ink);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.35);
text-underline-offset: 3px;
}
.auth-plate a:not(.os-btn):not(.os-brand):not(.bot-cta):hover {
text-decoration-color: var(--ink);
}
/* Focus rings — Royal Blue tinted, same anchor as the primary CTA. */
.os-btn:focus-visible,
.os a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(10, 66, 186, 0.40);
}
.os-socials svg {
display: block;
}
/* ============================================================
Team grid — four portraits, grayscale by default, full colour
on hover. Portraits are square SVGs (1:1) inside a rounded
frame; the desaturation lives on the , not the wrapper,
so the name / role label stays fully readable at rest.
============================================================ */
.os-team {
list-style: none;
margin: 36px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
}
.os-team-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.os-team-card img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 999px;
background: var(--surface-tint);
filter: grayscale(100%);
transition: filter 300ms ease, transform 300ms ease;
}
.os-team-card:hover img,
.os-team-card:focus-within img {
filter: grayscale(0);
transform: translateY(-2px);
}
.os-team-name {
font-weight: 600;
color: var(--ink);
}
.os-team-role {
color: var(--mute);
font-size: 14px;
}
@media (max-width: 800px) {
.os-team {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* ================================================================
─────── REDESIGN 2026-08-29 ───────
Landing repaint: Deep Navy + Gold primary palette, with the four
tagline hues (Blue / Orange / Purple / Emerald) doing double-duty
as section accents. New tokens live in :root as `--brand-*`. This
block adds:
· gold underline behind the hero rotator word
· per-section eyebrows in the tagline palette
· tinted pillar cards for the "Three things" list
· numbered process chips for the "Flow" list
Everything below is additive — earlier rules keep their layout
contract, this section paints the accent hues on top.
================================================================ */
/* --- Hero rotator: Gold underline behind the current word --------
Anchors the eye on the rotating platform name; the underline
doesn't rotate with the word so the strip feels stable. */
.os-hero .os-rotator {
position: relative;
display: inline-block;
padding: 0 4px;
}
.os-hero .os-rotator::after {
content: "";
position: absolute;
left: 4px;
right: 4px;
bottom: 0.10em;
height: 0.14em;
background: var(--brand-gold);
border-radius: 999px;
opacity: 0.85;
z-index: -1;
}
/* --- Section eyebrows -------------------------------------------
Small uppercase kicker above the section h2. Each home section
carries one tagline hue so scrolling walks Dream → Persistent →
Discipline → Embrace. Add via `
Word
` right before the section's h2. */
.os-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-slate);
}
.os-eyebrow::before {
content: "";
width: 24px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
/* Doubled class chain bumps specificity above `.os-end p` and other
section-scoped `p` rules that would otherwise repaint the eyebrow
to `--mute`. */
.os-eyebrow.os-eyebrow-blue { color: var(--brand-blue); }
.os-eyebrow.os-eyebrow-orange { color: var(--brand-orange); }
.os-eyebrow.os-eyebrow-purple { color: var(--brand-purple); }
.os-eyebrow.os-eyebrow-emerald { color: var(--brand-emerald); }
.os-eyebrow.os-eyebrow-gold { color: var(--brand-gold-2); }
.os-eyebrow.os-eyebrow-navy { color: var(--brand-navy); }
/* --- Pillar cards ------------------------------------------------
Replaces the 2-column dt/dd row for the "Three things" section
with three color-tinted cards. Each card carries a left border in
its assigned hue plus a tinted number badge, so the three
pillars read as distinct capabilities rather than a bulleted list.
Markup:
1
...
...
...
*/
.os-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 36px 0 0;
padding: 0;
}
.os-pillar {
display: block;
padding: 24px 22px;
background: var(--pure-white);
border: 1px solid var(--line);
border-left: 4px solid currentColor;
border-radius: 14px;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02), 0 8px 24px rgba(17, 24, 39, 0.04);
color: var(--brand-charcoal);
transition: transform 140ms ease, box-shadow 140ms ease;
}
.os-pillar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(17, 24, 39, 0.03), 0 18px 40px rgba(17, 24, 39, 0.08);
}
.os-pillar-blue { color: var(--brand-blue); }
.os-pillar-orange { color: var(--brand-orange); }
.os-pillar-purple { color: var(--brand-purple); }
.os-pillar-emerald { color: var(--brand-emerald); }
.os-pillar-gold { color: var(--brand-gold-2); }
.os-pillar-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: 14px;
border-radius: 10px;
background: color-mix(in srgb, currentColor 14%, transparent);
color: currentColor;
font-weight: 700;
font-size: 14px;
}
.os-pillar dt {
margin: 0 0 8px;
font-family: var(--font);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--brand-charcoal);
}
.os-pillar dd {
margin: 0;
color: var(--mute);
font-size: 15px;
line-height: 1.55;
}
@media (max-width: 900px) {
.os-pillars {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* --- Process flow (`.os-bullets` variant) ------------------------
`.os-flow-bullets` gives each numbered step a gradient chip in the
tagline palette so the five-step sequence reads as a journey. Use
in place of `.os-bullets` when the list represents a process. */
.os-flow-bullets {
counter-reset: os-flow;
list-style: none;
padding: 0;
margin: 36px 0 0;
display: grid;
gap: 14px;
}
.os-flow-bullets li {
counter-increment: os-flow;
display: grid;
grid-template-columns: 42px 1fr;
gap: 16px;
align-items: start;
padding: 16px 18px;
background: var(--pure-white);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 16px;
color: var(--ink-body);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.os-flow-bullets li:hover {
transform: translateX(2px);
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
}
.os-flow-bullets li::before {
content: counter(os-flow);
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: var(--pure-white);
font-weight: 700;
font-size: 14px;
background: var(--brand-slate);
}
.os-flow-bullets li:nth-child(1)::before { background: var(--brand-blue); }
.os-flow-bullets li:nth-child(2)::before { background: var(--brand-orange); }
.os-flow-bullets li:nth-child(3)::before { background: var(--brand-purple); }
.os-flow-bullets li:nth-child(4)::before { background: var(--brand-emerald); }
.os-flow-bullets li:nth-child(5)::before { background: var(--brand-gold-2); }
/* --- Section separator: color rhythm strip ----------------------
A thin strip of the four tagline hues can go between sections to
punctuate the palette rhythm. Optional — use where the layout
feels flat. ``. */
.os-color-rule {
height: 3px;
background: linear-gradient(
to right,
var(--brand-blue) 0 25%,
var(--brand-orange) 25% 50%,
var(--brand-purple) 50% 75%,
var(--brand-emerald) 75% 100%
);
border-radius: 999px;
margin: 0 auto;
max-width: 220px;
opacity: 0.85;
}
/* --- Closing CTA plate: soft Navy → Purple gradient -------------
The final `.os-end` section previously used the plain body plate.
Replace with a rich brand gradient that echoes the hero without
repeating it. */
.os-end {
background:
radial-gradient(600px 300px at 100% 0%, rgba(245, 158, 11, 0.14) 0%, transparent 60%),
radial-gradient(600px 300px at 0% 100%, rgba(16, 185, 129, 0.12) 0%, transparent 60%),
linear-gradient(160deg, #F8FAFC 0%, #EEF2FF 100%);
border-top: 1px solid var(--line);
}
.os-end h2 {
color: var(--brand-navy);
}
/* Gold accent under the closing h2 for the "action" pulse. */
.os-end h2::after {
content: "";
display: block;
width: 64px;
height: 3px;
margin-top: 14px;
background: var(--brand-gold);
border-radius: 999px;
}