/* ============================================================
AlphaPods — Figma: "FINAL Alphapods Landing Page" (641:980)
File QZzsgyQVbzexHu5It59Jlu · desktop artboard 1920 x 8870
VALUE PROVENANCE — every value below is tagged:
[F] read from Figma (metadata geometry or bound variable)
[S] sampled from the Figma render (large flat areas only)
[M] measured from the 1:1 vector PDF render of the design
[R] read from a Figma screenshot supplied by the user
[D] derived — NOT a Figma value, see note
============================================================ */
/* ---------- WEBFONTS (self-hosted, latin + latin-ext) ---------- */
/* [F] Figma variables bind exactly two families: SUSE + TikTok Sans */
@font-face{font-family:'SUSE';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../fonts/suse-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'SUSE';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../fonts/suse-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'TikTok Sans';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../fonts/tiktok-sans-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'TikTok Sans';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../fonts/tiktok-sans-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
:root{
/* ---- type families [F] ---- */
--font-display:'SUSE',system-ui,sans-serif; /* [F] variable-bound */
--font-body:'TikTok Sans',system-ui,sans-serif; /* [F] variable-bound */
--font-mono:'Roboto Mono',ui-monospace,monospace; /* [R] pod roles and tags are
monospace -- this is what the
Roboto Mono webfont is for */
/* ---- type scale ---- */
--h2-size:80px; --h2-lh:86px; --h2-ls:-3px; /* [F] var "H2 Section Header" SUSE Medium 500 */
--cta-size:20px; --cta-lh:20px; --cta-ls:0px; /* [F] var "CTA" SUSE Medium 500 */
--b2-size:20px; --b2-lh:20px; --b2-ls:0px; /* [F] var "B2 Reg" TikTok Sans Regular 400 */
--body-lh:26px; /* [F] every 20px text node measures 26px tall */
--h1-lh:94px; --h1-ls:-3px; /* [F] lh: 282px box / 3 lines exactly */
--h1-size:94px; /* [D] SOLVED by measurement, not guessed: the Figma
render breaks as "AI Agents that / handle real
work for / your business" inside the 800px box
[F]. Only 91-94px reproduce that break, and 94
is the one where line-height is exactly 100% of
the size -- matching how the Figma type
variables define line height. */
/* ---- color ---- */
--bg:#0E0E0E; /* [S] dominant flat fill, 101694px of the render */
--token-elements:#D6DBDC; /* [F] variable "elements" */
--token-back:#F2F2F2; /* [F] variable "back" */
/* PROVISIONAL [S] — sampled from a 0.124x render, small elements are
antialiased so these are approximations, not Figma fill values.
Replace all of these once design context is readable. */
--text:#F2F2F2; /* [D] assumed = token "back" */
--text-muted:#9E9E9E; /* [M] measured: lede and pill text are
the same neutral grey, zero saturation */
/* Display headings are filled with a white -> lavender gradient (hue 259,
sat .23 throughout). The hero and the section headings differ:
the hero's runs HORIZONTALLY (measured y-drop 0.004 across its 3 lines)
while section H2s run DIAGONALLY at ~152deg (y-drop 0.09 over 85px). [M] */
--title-from:#FFFFFF;
--title-to:#8979AB; /* [M] hero end: lum .572 at x=800 */
--h2-grad-to:#483D61; /* [M] H2 end: lum .310 at its bottom-right */
--accent-warm:#E47D70; /* [S] header CTA */
/* [M] The primary button gradient is DIAGONAL, not horizontal: measured
top-left #E25C26 orange -> #D53020 red -> bottom-right #891958 magenta. */
--grad-from:#E25C26;
--grad-mid:#D53020;
--grad-to:#891958;
--warm-line:#BD5726; /* [M] pill border, measured hue 19 */
--ghost-line:#8B421F; /* [M] ghost button border */
--card-line:rgba(226,83,47,.30); /* [S] card border, peak hue 14deg */
--quote-violet:#8F7FD0; /* [R] pull-quote text, from the Figma screenshot */
--accent-violet:#A063E6; /* [S] kickers + card numerals, peak hue 272deg
(render peak #512C74 is the blend against
#0E0E0E; this is the unblended estimate) */
--hl-from:#F04A28; --hl-mid:#E33512; --hl-to:#D0273A; /* [S] highlighted word runs, peak hue 10deg */
--glow-warm:rgba(150,40,32,.46); /* [M] ellipse 641:1030. Strength tuned so the
glow centre measures #230F0E, matching the
1:1 Figma render (was .22 -> #18100F) */
--accent-deep:#923D1C; /* [S] hero primary button */
--surface-warm:#17120E; /* [S] Two Ways left card */
--surface-cool:#141017; /* [S] Two Ways right card */
--surface-card:#242327; /* [S] problem card */
--line:rgba(214,219,220,.18); /* [D] from --token-elements */
/* ---- layout [F] ---- */
--canvas:1920px; /* [F] artboard width */
--content:1520px; /* [F] every boxed section is 1520 wide */
--gutter:200px; /* [F] (1920-1520)/2 */
--header-h:104px; /* [F] 641:998 */
--section-gap:160px; /* [F] identical between all 9 body sections */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:var(--b2-size);
line-height:var(--body-lh);
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
/* screen-reader-only text (pod search label, article link context) */
.visually-hidden{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Content column: 1520px centred inside 1920 [F] */
.container{
width:var(--content);
max-width:calc(100% - (var(--gutter) * 2));
margin-inline:auto;
}
/* Asset slot — reserves the EXACT Figma box for an asset that could not be
exported yet (MCP monthly quota). Never draw the icon by hand: the real
vector data is in Figma. Drop the exported file in and delete .asset-slot. */
.asset-slot{display:block;flex:none;background:transparent}
/* ============================================================
HEADER — 641:998 · 1920 x 104 [F]
============================================================ */
.header{
position:relative;z-index:30;
height:var(--header-h); /* [F] 104 */
display:flex;align-items:center;
}
.header__inner{
position:relative;
width:100%;height:100%;
padding-inline:60px; /* [F] logo group starts x=60 */
display:flex;align-items:center;
}
/* logo group 641:999 — x=60 y=45.5, 248 x 33 [F] */
.logo{display:block}
/* Logo lockup — real Figma artwork extracted from the vector PDF export at
720dpi. The wordmark is UPPERCASE in a geometric face that is neither SUSE
nor TikTok Sans, with a diagonal orange->purple gradient, so it ships as
artwork rather than as text in a guessed font. Box 248x33 [F]. */
.logo img{ width:248px;height:auto;display:block; }
/* nav 641:1002 — x=680.5 y=49, 559 x 26 [F] */
.nav{
/* Centred on the header, not pinned to a page-width x. The Figma frame
641:1002 sits at x=680.5, and the group measures ~559 wide — which is
exactly centred in 1920. Hard-coding the 680.5 reproduced that at one
width only and drifted left on every narrower screen. */
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:flex;align-items:center;
gap:80px; /* [F] 147+80=227, 133+80=440 — exact, twice */
}
.nav a{
font-size:var(--b2-size); /* [F] 20px — "Meet Alphapods" measures 147px, matches */
line-height:26px; /* [F] text box height */
color:var(--text);
transition:opacity .2s ease;
}
.nav a:hover{opacity:.7} /* [D] no hover state defined in Figma */
/* active nav item — violet on the Pod Catalogue and Resources references [R] */
.nav a[aria-current="page"]{ color:var(--accent-violet); }
/* header CTA 641:1007 — 174 x 46 [F] */
.btn{
display:inline-flex;align-items:center;
font-family:var(--font-body);
cursor:pointer;
white-space:nowrap;
}
/* ============================================================
BUTTON GEOMETRY — one component for every button on the page.
Measured 1:1 off the button export (button.png, 172x47):
box 172 x 47 (172 is a MINIMUM — a longer label grows the
button, it is never compressed), radius 13, padding 18,
12 between the label and the icon, icon 13x13.
Only the FILL varies from button to button; the box does not.
This replaces the per-button geometry each rule used to carry
(45/46/47 heights, 10px gaps, stadium radii, 18.5-21px pads).
============================================================ */
.btn--header,
.btn--primary,
.btn--ghost,
.way__cta,
.pod__cta,
.cta__btn{
min-width:172px;
height:47px;
padding:0 18px;
gap:12px;
justify-content:flex-start;
font-size:18px;line-height:25px;
border-radius:13px;
}
.btn--header .btn__icon,
.btn--primary .btn__icon,
.btn--ghost .btn__icon,
.way__cta .btn__icon,
.pod__cta .btn__icon{ width:13px;height:13px; }
/* Button icon — a four-pointed sparkle, NOT an arrow. Extracted from the
vector PDF at 1440dpi and used as a mask so each button can tint it:
white in the filled buttons, orange #E43C16 in the outlined one [M]. */
.btn__icon{
width:16px;height:16px; /* [F] the vector box is 16x16 */
flex:none;
background-color:var(--icon-color,currentColor);
/* Inlined as a data URI on purpose: a mask-image loaded from a separate file
is blocked when the page is opened over file://, which silently hides the
icon. Inlining makes it work whether the page is served or double-clicked.
Source of truth remains assets/icons/star.png. */
-webkit-mask:url("data:image/png;base64,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") center/contain no-repeat;
mask:url("data:image/png;base64,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") center/contain no-repeat;
}
/* header CTA is pushed right by the absolutely-positioned nav */
.btn--header{
--icon-color:#FFFFFF; /* [M] */
margin-left:auto;
background:linear-gradient(135deg,var(--grad-from) 0%,var(--grad-mid) 50%,var(--grad-to) 100%); /* [M] */
color:#FFFFFF;
}
.btn--header:hover{ filter:brightness(1.08); }
.btn--header:hover{filter:brightness(1.08)} /* [D] */
.menu{display:none}
.nav__cta{display:none} /* phone drawer only — see responsive.css */
/* ============================================================
HERO — 641:1022 · 1920 x 900 [F]
============================================================ */
.hero{
position:relative;
height:900px; /* [F] */
overflow:hidden;
}
/* copy block 641:1031 — x=200 y=135, 957 x 617 [F] */
.hero__copy{
position:absolute;
left:var(--gutter); /* [F] x=200 */
top:135px; /* [F] */
width:957px; /* [F] */
height:617px; /* [F] */
z-index:2;
}
.hero__title{
margin:0;
width:800px; /* [F] 641:1034 */
font-family:var(--font-display);
font-size:var(--h1-size); /* [D] 88 */
line-height:var(--h1-lh); /* [F] 94 (282 / 3 lines) */
letter-spacing:var(--h1-ls); /* [D] copied from the H2 token */
font-weight:500; /* [F] both type variables are Medium */
/* [M] Horizontal: every line starts white at x=0 and reaches #8979AB at x=800. */
background:linear-gradient(90deg,var(--title-from) 0%,var(--title-to) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{
position:absolute;top:306px; /* [F] 641:1035 */
margin:0;
width:757px; /* [F] */
font-size:19px; /* [F=20 / D=19] The Figma variable "B2 Reg" is 20px, but the
node is 757x52 [F] = exactly 2 lines. At 20px this text
needs 3 lines in the self-hosted Google Fonts build of
TikTok Sans, which measures ~3% wider than the font Figma
renders with. 19px reproduces the 2-line Figma layout.
Revert to 20px if exact values become readable. */
line-height:var(--body-lh);
color:var(--text-muted); /* [D] */
}
/* pill marquee 641:1036 — y=440, mask 1370 x 48 [F]
The track holds the 8 pills TWICE (641:1040 + 641:1057, 1576.6 each,
3153.2 total) — that duplication is how the Figma file expresses an
infinite scroll, so the animation is [F] in intent, [D] in speed. */
.hero__pills{
position:absolute;top:440px; /* [F] */
width:1370px; /* [F] mask width */
height:48px; /* [F] */
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent);
}
.pill-track{
display:flex;width:max-content;
animation:pill-scroll 40s linear infinite; /* [D] duration not in Figma */
}
.pill-set{display:flex;gap:14px;padding-right:14px} /* [F] 138.2+14=152.2, holds for all 8 */
.pill{
height:47.2px; /* [F] */
padding:10.6px 20.6px; /* [F] text offset x=20.6 y=10.6 */
display:inline-flex;align-items:center;
font-size:var(--b2-size); /* [F] 20px, 26px box */
line-height:26px;
color:var(--text-muted); /* [M] pill text is the same grey as the lede */
white-space:nowrap;
border:1px solid var(--warm-line); /* [M] #BD5726 */
border-radius:999px; /* [D] stadium */
color:var(--text);
}
@keyframes pill-scroll{from{transform:translateX(0)}to{transform:translateX(-1576.6px)}} /* [F] one set = 1576.6 */
.hero__pills:hover .pill-track{animation-play-state:paused} /* [D] */
/* hero buttons 641:1074 — y=570, 480 x 47 [F] */
.hero__actions{
position:absolute;top:570px; /* [F] */
display:flex;align-items:flex-start;
gap:20px; /* [F] 277 + 20 = 297 */
}
.btn--primary{
--icon-color:#FFFFFF; /* [M] measured #F5E7E9 */
background:linear-gradient(135deg,var(--grad-from) 0%,var(--grad-mid) 50%,var(--grad-to) 100%); /* [M] */
color:#FFFFFF;
}
.btn--ghost{
--icon-color:#FFFFFF;
align-self:flex-start;
background:#0D0D0D; /* [F-equiv] the outlined fill */
border:1px solid #E1692D;
}
.btn--primary:hover,.btn--ghost:hover{ filter:brightness(1.12); }
/* Highlighted word runs. These are NOT one shared treatment -- scanning each
run across its width in the 1:1 render gives two distinct gradients [M]:
hero "real work" #E03316 (hue 9) -> #C22A2D (hue 359) warm, stays red
problem "pile of tools" #E53E16 (hue 12) -> #D6301D (hue 6) warm, stays red
meet "Alphapods" #DB3219 (hue 7) -> #44058D (hue 268) swings to violet
So .hl is the warm default and .hl--violet is the Meet variant. */
.hl{
/* the measured pair (#E53E16 -> #D6301D) is barely a ramp at all — two
neighbouring reds, so the word read as flat. Same warm start, carried
through to the crimson the Meet heading ends on, so the gradient is
actually legible across the words it sits on. */
background:linear-gradient(90deg,#F4552B 0%,#E23A19 42%,#C92C2F 74%,#B92A55 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
/* The gradient is clipped to the span's INLINE BOX, but glyph ink overhangs
that box — the "k" diagonal in particular. Ink outside the box gets no
paint and, with color:transparent, the hero's pale light streak showed
through it as white wedges. Padding widens the painted box past the ink;
the negative margin keeps the text metrics unchanged, and `clone` gives
a wrapped span the same treatment on every line. */
padding:0 .08em;margin:0 -.08em;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* "Alphapods" in the Meet heading. This USED to ramp red -> magenta ->
#44058D violet, taken [M] from the 1:1 vector PDF — but that PDF is of
the EARLIER frame 634:244. The Figma frame the user is working from
shows the word warm end to end, orange-red into crimson with no violet
at all, so the violet tail is dropped. The class name is kept so the
markup does not churn. */
.hl--violet{
background:linear-gradient(90deg,#E2532F 0%,#D6301D 45%,#C02F52 100%); /* [R] */
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Background layers reproducing Figma vector fills (geometry [F], color [S]):
641:1030 ellipse 1049x810 @ (746,698) — warm glow, bottom right
641:1026 group 1483x1446 @ (664,-240) — two diagonal light streaks */
.hero__bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 1049px 810px at 1270px 1103px, var(--glow-warm), transparent 68%);
}
/* Grid overlay — real Figma artwork (641:1023 "Mask group", 1174.23 x 900,
exported at exactly 1175x900). Its metadata x of 1920 is the RIGHT edge:
1920 - 1174 = 746, and the render shows the grid occupying the hero's right
side, so it is right-aligned. [F] size, [M] placement. */
.hero__grid{
position:absolute;top:0;right:0;z-index:0;
width:1174.23px;height:900px;
pointer-events:none;
}
.hero__grid img{ width:100%;height:100%;display:block; }
.hero__bg:after{
content:"";position:absolute;
left:664px;top:-240px;width:1483px;height:1446px; /* [F] 641:1026 */
background:repeating-linear-gradient(118deg,
transparent 0 46px, rgba(255,214,196,.05) 46px 47px,
transparent 47px 132px, rgba(255,176,150,.032) 132px 133px,
transparent 133px 260px);
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 70%,#000,transparent 72%);
mask-image:radial-gradient(ellipse 70% 60% at 60% 70%,#000,transparent 72%);
}
/* Hero lattice — real Figma artwork (641:1029, box 798x798 @ 1049,146 [F]).
The PNG is the "Vector" export at 799x755, so height follows the file's own
aspect rather than being stretched to the 798 box. Source is the earlier
frame 634:244; the FINAL node is 798x798, so the crop may differ slightly. */
.hero__art{
position:absolute;left:1049px;top:146px; /* [F] */
width:798px;height:auto; /* [F] width; height from the asset */
z-index:1;pointer-events:none;
}
.hero__art img{ width:100%;height:auto;display:block; }
/* ============================================================
SHARED SECTION RHYTHM
============================================================ */
.section{
width:var(--content); /* [F] 1520 */
max-width:calc(100% - (var(--gutter) * 2));
margin-inline:auto;
margin-top:var(--section-gap); /* [F] exactly 160 between all 9 sections */
position:relative;
}
/* section kicker: 39px rule + label [F] 641:1082 = 196x25 */
.kicker{
display:flex;align-items:center;
gap:12px; /* [F] rule 39 wide, text starts x=51 */
height:25px; /* [F] */
}
.kicker__rule{
width:39px;height:1px;flex:none; /* [F] 641:1083 */
background:var(--line); /* [D] */
}
.kicker__label{
font-size:15px; /* [D] 25px box; text measures 145 wide [F] */
line-height:25px; /* [F] */
letter-spacing:1.9px; /* [D] */
text-transform:uppercase; /* [F] stored uppercase in the layer name */
color:var(--accent-violet); /* [S] violet in the render, not grey */
}
/* H2 — the one fully-specified display style [F] var "H2 Section Header" */
.h2{
margin:0;
font-family:var(--font-display);
font-size:var(--h2-size); /* [F] 80 */
line-height:var(--h2-lh); /* [F] 86 — every H2 box is a multiple of 86 */
letter-spacing:var(--h2-ls); /* [F] -3 */
font-weight:500; /* [F] Medium */
/* [M] Section headings are NOT flat white either. Unlike the hero this
gradient is diagonal: measured rate_x 5.7e-4 and rate_y 1.06e-3 per px,
which resolves to 152deg, ending at #483D61 in the bottom-right. */
background:linear-gradient(152deg,var(--title-from) 0%,var(--h2-grad-to) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Card / feature heading. Line-height 36 is [F] for both, but the two groups
are NOT the same size:
- Problem cards 28px [R] the supplied screenshot breaks card 3 after
"nothing"; only 26.5-28px reproduces all three titles' breaks.
- Meet features 26px [F-constrained] their boxes are 36 tall = one line,
and above 26px "Grows With Your Business" wraps to two.
So .card-title carries the Meet value and .pcard overrides it. */
.card-title{
margin:0;
font-family:var(--font-display);
font-size:26px;
line-height:36px; /* [F] */
font-weight:500;
letter-spacing:-.3px; /* [D] */
}
/* body2 — the small paragraph style. Boxes are [F] (69px = 3 x 23 line-height),
but the COPY IS NOT RECOVERABLE: all 19 of these nodes are named "body2" in
Figma, so the metadata carries no text. Marked with [data-figma-copy] so the
gaps are greppable. */
.body2{
margin:0;
font-size:16px; /* [D] from the 23px line-height */
line-height:23px; /* [F] 69 / 3 lines */
color:var(--text-muted); /* [D] */
}
[data-figma-copy]:empty{
display:block;
border-left:2px solid rgba(229,91,51,.5); /* visible marker, remove when filled */
opacity:.5;
}
/* ============================================================
B · THE PROBLEM — 641:1081 · 1520 x 769 [F]
============================================================ */
.problem__title{
width:953px; /* [F] 641:1085 */
margin:52px 0 0; /* [F] kicker 25 + gap -> title y=77 */
}
.problem__cards{
margin-top:52px; /* [F] title ends y=249, cards y=301 */
display:grid;
grid-template-columns:repeat(3,1fr); /* [F] 506.6 / 506.6 / 505.6 of 1520 */
/* Three shared rows — number, title, body — so every card's body starts on
the same line even when one title wraps to an extra line. Below 1920 the
column is narrow enough that "An endless configuration marathon" takes
three lines against the others' two, which pushed card 2's copy a line
down and left the three bodies ending at different heights. */
grid-template-rows:auto auto auto;
height:320px; /* [F] 641:1087 */
position:relative;
border-radius:20px; /* [D] clearly rounded in the render */
}
/* The outline is a GRADIENT, not a flat colour: warm orange at the left edge
easing to neutral grey by the right. Drawn as a 1px ring via mask-composite
so it follows the radius. [R] read from the Figma screenshot. */
.problem__cards:before{
content:"";position:absolute;inset:0;pointer-events:none;
border-radius:inherit;padding:1px;
background:linear-gradient(100deg,
#C05A2A 0%, rgba(197,90,42,.55) 22%,
rgba(214,219,220,.26) 55%, rgba(214,219,220,.20) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
.pcard{
padding:50px 60px; /* [F] "01." at x=60 y=50 */
position:relative;
/* the card adopts the row grid above rather than stacking its own children,
so the title row is as tall as the tallest title across all three cards */
display:grid;
grid-template-rows:subgrid;
grid-row:span 3;
align-content:start;
}
.pcard + .pcard{ border-left:.6px solid rgba(214,219,220,.20); } /* [F] 0.6 gap; [R] dividers are neutral, not warm */
.pcard__num{
display:block;
font-family:var(--font-display);
font-size:15px; /* [D] 29x25 box [F] */
line-height:25px; /* [F] */
color:var(--accent-violet); /* [S] violet in the render, matching the kicker */
}
.pcard__body{
margin-top:40.8px; /* [F] num y=50+25=75 -> body y=115.8 */
width:385.6px; /* [F] */
/* carries the title and copy into rows 2 and 3 of the shared grid */
display:grid;
grid-template-rows:subgrid;
grid-row:span 2;
align-content:start;
}
.pcard__body .card-title{
width:300px; /* [F] title box is 300 wide inside 385.6 */
font-size:28px; /* [R] see note on .card-title */
}
.pcard__body .body2{ margin-top:12px;width:385.6px; } /* [F] title 72 -> body y=84 */
/* quote row 641:1106 — y=653, rule 916 then quote at x=940 [F] */
.problem__quote{
margin-top:52px; /* [F] cards end y=621, row y=653 */
height:116px; /* [F] */
display:grid;
grid-template-columns:916px 1fr; /* [F] rule 916, quote block starts x=940 */
gap:24px; /* [F] 940 - 916 */
align-items:start;
}
.problem__rule{
height:1px;margin-top:14px; /* [F] line sits at y=14 in its 14px frame */
background:linear-gradient(90deg,rgba(123,107,196,.25),var(--quote-violet)); /* [R] violet rule */
}
.problem__quote blockquote{
margin:0;width:580px; /* [F] 641:1110 */
font-size:var(--b2-size); /* [D] 78 / 3 lines = 26 line-height [F] */
line-height:26px; /* [F] */
font-style:italic; /* [R] */
color:var(--quote-violet); /* [R] */
}
.problem__cite{
display:block;margin-top:20px; /* [F] quote 78 -> cite y=98 */
font-size:14px; /* [D] 18px box [F] */
line-height:18px; /* [F] */
font-style:normal; /* [R] attribution is upright, not italic */
color:var(--text-muted); /* [R] neutral grey */
}
/* ============================================================
C · MEET ALPHAPODS — 641:1112 · 1520 x 648 [F]
============================================================ */
/* Section background. Sampled against the #0E0E0E page base, the Meet band
carries a glow anchored to the LEFT edge that shifts hue top-to-bottom:
top-left #1C0E0F (+14 red) mid-left #200E13 (+18 red)
bottom-left #180D16 (purple, +8 blue) right edge back to base
plus the pod-lattice motif over it.
STRENGTH: the glow below is the measured value -- it matches the 1:1 vector
PDF to within ~4 per channel at every sampled point, so it is left alone.
The lattice opacity is raised above the measured .16 for visibility, at the
ORIGINAL 'contain' scale -- scaling the motif up is what produced oversized
blobs previously, so only the opacity is changed. */
.meet:before{
content:"";position:absolute;z-index:-2;pointer-events:none;
/* Extends 170 ABOVE the section: the frame has the bloom already at
full strength on the section's top edge, so the fade has to happen
further up, over the dark gap, rather than inside the band. */
left:-200px;right:0;top:-330px;bottom:-260px;
/* [R] Re-read off the Figma frame. This was a vertical BAND — a
top-to-bottom hue ramp held flat across the height, then cut down by a
horizontal falloff mask. The frame shows something different: a single
diagonal bloom anchored in the TOP-LEFT corner that spreads down and
right and is gone well before the bottom edge, leaving the lower band
flat. A radial reproduces that directly and needs no falloff mask,
because it dies away on every side by itself.
The hue still warms red -> crimson -> a trace of violet as it spreads,
which is the ramp measured off the frame. */
background:radial-gradient(1420px 620px at 30px 430px,
rgba(198,56,40,.19) 0%,
rgba(188,52,58,.145) 22%,
rgba(176,48,78,.10) 42%,
rgba(162,48,104,.055) 64%,
rgba(152,48,120,.02) 84%,
rgba(150,48,124,0) 100%);
/* only a short top feather, so the bloom rises out of the section edge
instead of starting on a line; the radial handles every other side */
/* short feathers top and bottom: the bloom must rise out of the section
edge, and the element's own bottom must not clip it while it is still
tinted — which showed as a hard line across the page */
/* The top feather now runs out ABOVE the section edge, so the glow is
already at full strength where the band begins — the fade lands in the
dark gap above it instead of inside the band. */
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 74%,transparent 96%);
mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 74%,transparent 96%);
}
.meet:after{
content:"";position:absolute;z-index:-1;pointer-events:none;
/* Anchored to the PAGE's left edge (the section starts at x=200, so -200
reaches x=0) with the motif bleeding off it, as in the Figma reference. */
/* [R] the frame shows the lattice BLEEDING past the band: circles are cut
off above the section's top edge and the pattern carries on below it,
running right far enough to pass under the lede. The box is therefore
taller than the section on both sides and wider than it was. */
left:-280px;top:-100px;height:calc(100% + 200px);width:900px;
background:url(../images/hero-lattice.png) left center/contain no-repeat;
/* The motif is the hero's asset and its own strokes are violet-blue
(sampled rgb(88,56,155)) — that is what tinted the left of this band
purple, where the Figma frame keeps it warm. Recoloured with a filter
rather than a mask: masking the PNG and painting a gradient through it
renders nothing on this pseudo-element in Chrome (verified — the same
mask works on an ordinary span), so the filter chain is the reliable
route. grayscale+sepia collapses every hue in the asset to one warm
base, then saturate/hue-rotate tunes it. [R] */
/* [R] the frame's arcs are a muted mauve, not the hot orange the earlier
saturate(4.2) produced — the warm base is kept but pulled well back. */
filter:grayscale(1) sepia(1) saturate(2.1) hue-rotate(-6deg) brightness(1.02);
opacity:.72;
/* feathered on all four sides so the motif dissolves instead of being cut */
/* the vertical feather now lands in the bleed ABOVE and BELOW the band, so
the motif is at full strength across the section itself; the right-hand
fade runs out under the lede rather than before the heading */
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%),
linear-gradient(to right,#000 70%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%),
linear-gradient(to right,#000 70%,transparent 100%);
-webkit-mask-composite:source-in;
mask-composite:intersect;
}
.meet{
isolation:isolate;
display:grid;
grid-template-columns:507px 601px; /* [F] 641:1113 w=507, 641:1120 w=601 */
gap:52px; /* [F] left col ends 687, right starts 739 */
padding-inline:180px; /* [F] symmetric: 180+507+52+601+180 = 1520 exactly */
min-height:648px; /* [F] */
}
.meet__left{ display:flex;flex-direction:column; }
.meet__lede{
margin:16px 0 0; /* [F] h2 ends y=172, lede y=188 */
width:403px; /* [F] 641:1116, box is 403x78 = 3 lines of 26 */
font-size:17.5px; /* [M] SOLVED: 17.5px is the only size that reproduces
Figma's exact 3 line breaks. 20px (the B2 Reg
variable) overflows to 4 lines. Matches the 17.4px
fitted for the Two Ways list items -- this design
has a "small body" size distinct from B2. */
line-height:26px; /* [F] 78 / 3 */
color:var(--text-muted); /* [D] */
}
.meet__stat{
margin-top:auto; /* [F] stat frame pinned at y=568 of 648 */
display:flex;align-items:flex-end;
gap:32px; /* [F] "50+" 179 wide, label at x=211 */
height:80px; /* [F] */
}
.meet__figure{
width:176px;height:65px; /* [F-equiv] the export's ink box */
flex:none;display:block;
overflow:visible;
}
.meet__stat-label{
width:124px; /* [F] */
font-size:var(--b2-size);
line-height:26px; /* [F] 52 / 2 lines */
color:var(--text-muted); /* [D] */
}
.meet__feature{
display:grid;
grid-template-columns:60px 517px; /* [F] icon 60, text at x=84 */
gap:24px; /* [F] 84 - 60 */
min-height:117px; /* [F] */
}
.meet__feature + .meet__feature{ margin-top:60px; } /* [F] 177 pitch - 117 height */
/* Feature icons — gradient ribbon artwork, extracted from the vector PDF at
288dpi and keyed to alpha. SOURCE CAVEAT: the PDF is the earlier frame
634:244, whose Meet section had three features to FINAL's four, so these
are the right family and scale but not verified identical to FINAL's
641:1122 / 1128 / 1134 / 1140. Replace if those get exported. */
/* Rendered as an so each icon is editable in ACF (meet-icon-N.png is
the fallback). */
.meet__icon{
width:60px;height:60px; /* [F] */
flex:none;
display:block;
object-fit:contain;
}
.meet__feature .body2{ margin-top:12px; } /* [F] title 36 -> body y=48 */
/* Scattered background dots. These belong to the page-wide background group
641:982 ("Group 318"), not to the section -- Figma places this pair just
ABOVE the Meet band, at page (1748,2021) d=12 and (1787,2068) d=16.1 [F].
Positioned against .meet, so the offsets are page coords minus the
section origin: x-200, and y minus the section's rendered top of 2114. */
.meet__dot{
position:absolute;border-radius:50%;pointer-events:none;
}
.meet__dot--sm{ left:1548px;top:-93px;width:12px;height:12px;background:#8E2B1C; } /* [F] pos/size, [D] colour */
.meet__dot--lg{ left:1587px;top:-46px;width:16.1px;height:16.1px;background:#E2532F; } /* [F] pos/size, [D] colour */
/* ============================================================
D · TWO WAYS IN — 641:1145 · full-bleed 1920 x 837 [F]
This section does NOT use the 1520 column: its card row is
1360 wide at x=280, and its header block is 934 centred. [F]
============================================================ */
.ways{
width:100%;
margin-top:var(--section-gap); /* [F] 160 */
height:837px; /* [F] */
position:relative;
}
.ways__head{
width:934px; /* [F] 641:1146, centred: (1920-934)/2 = 493 */
margin:40px auto 0; /* [F] y=40 */
text-align:center; /* [F] kicker and lede are both centred in the 934 box */
}
.ways__head .kicker{ justify-content:center; }
.ways__title{
margin:24px 0 0; /* [F] kicker 25 -> title block y=49 */
width:934px; /* [F] 641:1149, one line of 86 */
}
.ways__lede{
width:521px; /* [F] 641:1150, centred: (934-521)/2 = 206.5 */
margin:16px auto 0; /* [F] title 86 -> lede y=102 */
font-size:var(--b2-size);
line-height:26px; /* [F] single 26px line */
color:var(--text-muted); /* [D] */
}
.ways__grid{
width:1360px; /* [F] 641:1151 */
max-width:calc(100% - 80px);
margin:60px auto 0; /* [F] head ends y=217 -> grid y=277 */
display:grid;
grid-template-columns:repeat(2,660px); /* [F] */
gap:40px; /* [F] card2 at x=700, card width 660 */
justify-content:center;
}
.way{
position:relative;
/* a stacking context, so the grid pseudo below can sit at z-index:-1 —
above the card's own fill but behind its content */
isolation:isolate;
height:560px; /* [F] */
padding:52px 60px; /* [F] content frame at (60,52) */
border-radius:24px; /* [D] rounded in the render */
overflow:hidden; /* [F] both cards carry a 660x580.7 mask group */
display:flex;flex-direction:column;
}
/* Each card runs one accent hue through its border, icon, title and button.
Sampled peaks: card 1 hue 11deg, card 2 hue 273deg -- consistent across all
four elements, so one variable per card drives them all. [S] */
.way--single{
background:var(--surface-warm); /* [S] #17120E */
--way-from:#F04A28; --way-to:#D0273A; /* [S] hue 11 */
--way-line:rgba(226,83,47,.38);
--way-line-soft:rgba(226,83,47,.10);
}
.way--pod{
background:var(--surface-cool); /* [S] #141017 */
--way-from:#A063E6; --way-to:#7548D8; /* [S] hue 273 */
--way-line:rgba(160,99,230,.38);
--way-line-soft:rgba(160,99,230,.10);
}
.way{ border:1px solid var(--way-line); } /* [S] each card is outlined in its own hue */
/* [F] the fine rule grid inside each card. Drawn from the CARD's own origin,
not the page's: a single page-level grid would run straight through the gap
and make the two boxes read as one sheet with a slice cut out of it. Each
card starts its own lines at its own top-left corner instead. */
.way:before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
border-radius:inherit;
background-image:
repeating-linear-gradient(90deg, rgba(214,219,220,.03) 0 1px, transparent 1px 40px),
repeating-linear-gradient(0deg, rgba(214,219,220,.03) 0 1px, transparent 1px 40px);
}
/* HOVER EDGE. A masked ring over the card's own border: at rest it paints
nothing, and on hover the TOP edge burns at the card's full accent — 2px
there against 1px down the sides — with the colour falling away toward the
bottom, so the crown of the box reads hottest. Drawn as a ring rather than
a border-color swap because a border cannot carry a gradient. */
.way:after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
border-radius:inherit;padding:2px 1px 1px;
background:transparent;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
transition:background .25s ease;
}
.way:hover:after{
background:linear-gradient(180deg,
var(--way-from) 0%,
var(--way-from) 2px,
var(--way-line) 12%,
var(--way-line-soft) 45%,
var(--way-line-soft) 100%);
}
.way__icon{
width:56px;height:56px; /* [F] 641:1158 / 641:1182 */
display:grid;place-items:center;
border-radius:14px; /* [D] */
border:1px solid var(--way-line); /* [S] each card's own accent */
background:rgba(255,255,255,.035); /* [R] tile is slightly lifted off the card */
color:#F3E7E0; /* [R] the diamond reads cream, not orange */
font-size:29px;line-height:34px; /* [F] the card-1 glyph box is 29x34 */
}
/* Full Pod uses the alphapods node mark (641:1183, 32x32 [F]) -- the same
vector as the header logo, extracted from the PDF at 1440dpi. */
.way__icon--mark{
background:rgba(255,255,255,.035) url(../icons/node-mark.png) center/32px 32px no-repeat;
}
/* Background dot inside the Single Agent card -- Group 318 node 641:993,
page (648, 3544) d=16.1 [F]. Offsets are page coords minus the section
origin, measured from the render. */
/* The scattered pair above-left of the Single Agent card. Measured off the
supplied crop against the section's own origin: .ways starts at page
y=2922 (derived by rendering a probe), and the card's top-left corner is
page (280,3183). [R]
REMOVED: a third dot at left:648/top:626, carried over from an earlier
pass and commented "sits ON the card, as in the design". It rendered at
page (648,3548) — floating inside the card beside "Upgrade to a full pod
anytime", which is not what the frame shows. Its position was [D] guesswork,
never a measured value. */
.ways__dot{
position:absolute;border-radius:50%;pointer-events:none;
z-index:3;
}
/* Pushed well clear of the card: the frame scatters these out in the empty
band to its left, not tucked against the corner. The card's left edge is
page x=280, so these sit ~200 and ~130 clear of it. Their vertical
relationship is kept from the crop — the small one above the card's top
edge, the large one just below it. */
.ways__dot--a{ left:80px;top:270px;width:10px;height:10px;background:#D14A2A; }
.ways__dot--b{ left:150px;top:243px;width:7px;height:7px;background:#C04024; }
.way__title{
margin:16px 0 0; /* [F] icon 56 -> title block y=72 */
font-family:var(--font-display);
font-size:58px; /* [D] SOLVED: SUSE 500 at 58px/-1 reproduces both
hug-widths (303 and 201) to within 0.7px RMS */
line-height:76px; /* [F] */
letter-spacing:-1px; /* [D] from the same fit */
font-weight:500;
/* [S] the title carries the card's accent, not plain white */
background:linear-gradient(90deg,var(--way-from),var(--way-to));
-webkit-background-clip:text;background-clip:text;color:transparent;
width:max-content;max-width:100%;
}
.way__body{
margin-top:11px; /* [F] title 76 -> body y=87 */
width:540px;max-width:100%; /* [F] */
}
.way__list{
margin:16px 0 0;padding:0;list-style:none; /* [F] body ends y=228 -> list y=244 */
}
.way__list li{
height:26px; /* [F] each List Item is 540x26 */
display:flex;align-items:center;
gap:6px; /* [F] bullet 12 wide at x=0, text at x=18 */
font-size:17.5px; /* [D] SOLVED: all six labels fit at 17.4px with only
1.4% spread. Figma's own value is probably 18px --
this build renders ~5% wide -- but 17.5 matches the
measured Figma widths. */
line-height:26px; /* [F] */
}
.way__list li + li{ margin-top:6px; } /* [F] items at y=0/32/64, each 26 tall */
.way__bullet{
width:12px;flex:none; /* [F] 12x15 glyph box */
font-size:11px;line-height:15px; /* [D] */
color:var(--way-from); /* [S] bullets take the card accent */
}
.way__cta{
--icon-color:#FFFFFF; /* [D] */
margin-top:auto; /* [F] button pinned at y=465 of 560 */
align-self:flex-start;
background:linear-gradient(90deg,var(--way-from),var(--way-to)); /* [S] the card's own accent */
color:#FFFFFF;
}
.way__cta:hover{ filter:brightness(1.1); }
/* ============================================================
E · PURPOSE-BUILT PODS — 641:1200 · 1520 x 1246.8 [F]
Content is inset 120 either side (120 + 1280 + 120 = 1520).
Rows of three 401-wide cards, 38.5 gap; rows 60 apart.
============================================================ */
.pods{ padding-inline:120px; } /* [F] header and rows both start at x=120 */
.pods__head{ width:797px;max-width:100%; } /* [F] 641:1201 */
.pods__sub{
margin:12px 0 0; /* [F] title 172 tall -> sub at y=184 */
width:797px;max-width:100%;
font-size:17.5px; /* [D] the "small body" size used elsewhere */
line-height:26px;
color:var(--text-muted);
}
.pods__row{
display:grid;
grid-template-columns:repeat(3,1fr); /* [F] 401 x3 within 1280 */
gap:38.5px; /* [F] 439-401 */
}
.pods__row--1{ margin-top:60px; } /* [F] head ends y=236 -> row at 296 */
.pods__row--2{ margin-top:60px; }
/* Scattered pair left of the second row, measured off the supplied crop.
The crop is 493 wide with the card spanning 205px against its true 401,
so scale 0.511; the card's top-left corner is the row's origin.
upper dot 47 left of the card, 80 down -> 16px
lower dot 29 left, 125 down -> 14px
Positioned against .pods__row--2, so they travel with the row rather
than being pinned to page coordinates. [R] */
.pods__row{ position:relative; }
.pods__dot{
position:absolute;border-radius:50%;pointer-events:none;z-index:2;
}
.pods__dot--a{ left:-92px;top:80px;width:16px;height:16px;background:#D14A2A; }
.pods__dot--b{ left:-57px;top:125px;width:14px;height:14px;background:#B33A20; }
/* Single dot off the RIGHT edge of the first row, beside Lead Qualification.
Crop is 299 wide with the card spanning 222 against its true 401, so
scale 0.554; the dot sits 81 clear of the card's right edge and 163 down
from the row's top. Anchored with `right` so it tracks the row's end. [R] */
.pods__dot--c{ right:-81px;top:163px;width:8px;height:8px;background:#9E3A24; } /* [F] row1 ends 746 -> row2 at 806 */
.pod{
position:relative;
min-height:450px; /* [F] */
display:flex;flex-direction:column;
border-radius:16px; /* [F-equiv] all four outer corners */
/* [F-equiv] the card's own fill: a ~6% diagonal wash sampled off the 1:1
Subtract.png export — orange-red at the top-left, magenta through the
middle, violet at the bottom-right. */
background:linear-gradient(135deg,
rgba(221,51,0,.06) 0%, rgba(170,17,51,.06) 50%, rgba(51,0,153,.06) 100%);
transition:background .25s ease;
}
/* the 1px edge is the SAME ramp at ~14.5%, not a flat grey — drawn as a
ring so it follows the radius [F-equiv] */
.pod:before{
content:"";position:absolute;inset:0;pointer-events:none;
border-radius:inherit;padding:1px;
background:linear-gradient(135deg,
rgba(221,51,0,.145) 0%, rgba(170,17,51,.145) 50%, rgba(51,0,153,.145) 100%);
transition:background .25s ease;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
}
/* THE NOTCH. Measured off Subtract.png (402x452): the cut runs x 218->401,
y 397->451, its inner corner is FILLETED r14 (not square), and the lower
block keeps a normal convex r16 bottom-right.
It is drawn at a FIXED 200x55 anchored to the corner, deliberately: the
"See in action" button is a fixed 172x47, so a notch that scaled with the
card would fall narrower than the button in the 1024-1439 band, where the
cards are three-up at ~345 wide. Fixed px keeps the button seated at
every width.
The cut paints the page base over the corner and re-draws the card's edge
along the new boundary, so it relies on the flat #0E0E0E behind the
section — which is what the pods sit on. */
.pod:after{
content:"";position:absolute;z-index:1;pointer-events:none;
right:-1px;bottom:-1px;width:200px;height:71px;
/* Local origin is card (201,381). Boundary, all measured off the export:
(401,381)->(385,397) the upper block's convex r16 bottom-right
(385,397)->(231,397) the cut's top edge
(231,397)->(218,411) the INNER FILLET, r14
(218,411)->(218,435) the lower block's right edge
(218,435)->(202,451) the lower block's convex r16 corner
The box is 16 taller than the cut itself so it can carry that first
corner, which sits above the cut's top edge. */
background:url("data:image/svg+xml;utf8,") right bottom/200px 71px no-repeat;
}
/* HOVER. At rest every pod sits on the faint 6% wash with its hairline ring;
pointing at one brings the colour up — a stronger wash, a warm edge, and
the CTA filled. The notch edge is baked into the SVG stroke, so the hover
state carries its own copy of the artwork with the warm stroke. */
.pod:hover{
background:linear-gradient(135deg,
rgba(221,51,0,.13) 0%, rgba(170,17,51,.13) 50%, rgba(51,0,153,.13) 100%);
}
.pod:hover:before{
background:linear-gradient(135deg,
rgba(226,83,47,.42) 0%, rgba(170,17,51,.34) 50%, rgba(80,30,190,.30) 100%);
}
.pod:hover:after{
background:url("data:image/svg+xml;utf8,") right bottom/200px 71px no-repeat;
}
.pod__media{
position:relative;
/* The artwork is 400x144 and its hole is part of the alpha, so the box
must keep that ratio — stretching it to a fixed 144 height squashed
the hole horizontally on any card that was not 401 wide, which is
what pulled the badge off it. With the ratio locked, 100% 100% is a
uniform scale and everything in the artwork stays in proportion. */
aspect-ratio:400 / 144;
height:auto;
flex:none;
background:center/100% 100% no-repeat;
}
/* 52x52 badge at (291,108) [F] 641:1216. It is a child of .pod, NOT of
.pod__media -- the media carries a mask and a mask clips its children,
which made the badge disappear. */
.pod__badge{
/* Sized and placed as a FRACTION of the artwork, measured off the hole
in pod-media-*.png: its centre is 316.5/400 = 79.125% across and its
top 108/144 = 75% down; the badge is 52/400 = 13% wide and its 14px
radius is 26.9% of that. Percentages resolve against .pod__media,
which is why the badge now lives inside it. Fixed px only lined up
on a 401px card. */
position:absolute;
left:79.125%;top:75%;
transform:translateX(-50%);
width:13%;aspect-ratio:1;
z-index:2;
border-radius:26.9%;
background:#141317; /* [D] */
border:1px solid #C7401B; /* [M] measured from the render */
display:grid;place-items:center;
}
/* Figma notches the image around the badge rather than just overlapping it.
This is a SEPARATE element ordered before the badge, not a pseudo on it:
inside a stacking context a z-index:-1 pseudo paints above its own
element's background and border, which hid the badge's orange outline. */
.pod__badge:after{
content:"";width:30.8%;height:30.8%; /* 16/52, so the glyph scales too */
background:#FFFFFF; /* [R] the glyph is white */
/* inlined: a mask loaded from a separate file is blocked over file://,
which silently hides the glyph (same issue as the button star) */
-webkit-mask:url("data:image/png;base64,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") center/contain no-repeat;
mask:url("data:image/png;base64,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") center/contain no-repeat;
}
.pod__body{
padding:30px 22px 47px; /* [F] text block at x=22, y=174; room for the button */
display:flex;flex-direction:column;flex:1;
}
.pod__title{
margin:0;
font-family:var(--font-display);
font-size:26px;line-height:36px; /* [F] 360x36 box */
font-weight:500;letter-spacing:-.3px;
}
.pod__role{
margin:2px 0 0; /* [F] title 36 -> role at y=38 */
font-family:var(--font-mono); /* [R] the role line is monospace, uppercase */
text-transform:uppercase;
letter-spacing:0;
font-size:13.3px;line-height:18px; /* [M] solved: Figma's role widths (143/154/184/115px)
divided by char count x 0.6em advance give 13.3 */
color:var(--accent-violet); /* [R] violet */
}
.pod__desc{
margin:12px 0 0; /* [F] role ends 56 -> body at 68 */
font-size:14px;line-height:21px; /* [F] 63 / 3 lines */
color:var(--text-muted);
}
.pod__tags{
display:flex;flex-wrap:wrap;gap:8px;
/* 207px, not the full 360: the button starts at x=229 and the text block at
x=22, so the tag row only has 207 to run in. That width reproduces Figma's
wrapping on all three sampled cards exactly. [F-derived] */
width:207px;
margin-top:24px; /* [F] body ends 131 -> tags at 155 */
padding-top:18px;
border-top:1px solid rgba(214,219,220,.10); /* [R] a rule separates body from tags */
}
.pod__tag{
padding:4.6px 10.6px; /* [F] tag text sits at (10.6,4.6) */
font-family:var(--font-mono); /* [R] tags are monospace too */
font-size:14.1px;line-height:18px; /* [M] solved the same way across 8 tag labels
(76/9/51/68/110/84px) -> 14.1, not 12 */
color:var(--text-muted);
border:1px solid rgba(214,219,220,.16); /* [D] */
border-radius:8px; /* [D] */
white-space:nowrap;
}
.pod__cta{
position:absolute; /* [F] (229,403) in the 401x450 card: 229+172=401
and 403+47=450, so it fills the corner exactly. */
right:0;bottom:0;z-index:2;
--icon-color:#FFFFFF;
background:#0D0D0D; /* [F-equiv] */
border:1px solid #E1692D; /* [F-equiv] */
transition:background .25s ease,border-color .25s ease;
}
/* Card 3 is the highlighted one in the design: warm outline, tinted panel,
and a filled button instead of an outlined one. [R] */
/* The card outline is notched around the CTA as well [R] */
/* every pod's CTA fills on card hover, not just the featured one */
.pod:hover .pod__cta{
background:linear-gradient(135deg,var(--grad-from),var(--grad-mid) 50%,var(--grad-to));
border-color:transparent;color:#fff;
--icon-color:#FFFFFF;
}
/* [D] card 3 no longer wears the warm treatment permanently — at rest it
matches every other pod, and the shared .pod:hover rules light it up. */
/* ============================================================
F · THE JOURNEY + STATS — 641:1399
PROVENANCE: [R] throughout — measured from the screenshot of the
frame supplied by the user, scaled to the 1920 artboard (the shot
is 948px wide, so x2.025). The MCP read of this node is still
blocked by the account's Figma tool-call quota, so no value here
is [F]. Re-read the node when the quota clears and promote the
numbers that match.
Layout measured: heading centred, 2 lines at the H2 80/86 [R];
4 cards spanning the 1520 column, descending left-to-right in
equal steps with a SHARED BOTTOM EDGE, joined by hairline
connectors; stats on a 120px inset in 4 columns, alternating
high / low.
============================================================ */
.journey{ --jstep-w:356px; --jstep-gap:32px; --jstep-step:33px; }
.journey__title{
width:min(100%,780px); /* [R] line 1 measures ~719 wide */
margin:0 auto;
text-align:center;
}
/* [R] dot at artboard (1484,213); section starts x=200, heading top y=81 */
.journey__dot{
position:absolute;
left:1284px;top:132px;
width:14px;height:14px;border-radius:50%;
background:var(--accent-warm);
}
/* ---- the four steps ---- */
.journey__steps{
list-style:none;
margin:60px 0 0;padding:0; /* [R] heading ends y=253 -> cards y=314 */
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--jstep-gap); /* [R] 30-32 between cards */
align-items:end; /* [R] all four share one bottom edge */
}
.jstep{
position:relative;
height:451px; /* [R] card 1: top 314 -> bottom 765 */
padding:77px 36px 0; /* [R] icon box starts 77 down, 36 in */
border-radius:16px; /* [R] */
/* [R] NEUTRAL light grey, not warm. The earlier rgba(226,83,47,.16) was
read off a low-res screenshot where the border picked up the card's own
maroon wash; the 2x crop shows it plainly as a pale grey hairline,
the same on every card. */
border:1px solid rgba(214,219,220,.30);
/* [R] warm maroon wash in the top-left corner easing to the page base.
Toned down from the first pass: the wash sat too bright against the
#0E0E0E page base, so both stops and the card base are darker. */
background:
radial-gradient(120% 100% at 0% 0%, rgba(104,32,38,.30) 0%, rgba(24,15,18,.45) 45%, rgba(14,14,16,0) 100%),
#0F0E11;
}
/* Each card starts one step lower than the last; because the row is
bottom-aligned, the extra drop comes off the height. [R] */
.jstep--1{ height:451px; }
.jstep--2{ height:calc(451px - var(--jstep-step)); }
.jstep--3{ height:calc(451px - (var(--jstep-step) * 2)); }
.jstep--4{ height:calc(451px - (var(--jstep-step) * 3)); }
/* card 2 reads violet rather than maroon in the render [R] */
.jstep--2{
background:
radial-gradient(120% 100% at 0% 0%, rgba(78,34,94,.28) 0%, rgba(21,15,25,.45) 45%, rgba(14,14,16,0) 100%),
#0F0E11;
/* the border does NOT change per card — same grey hairline throughout */
}
/* The connector joining each card to the next. Pinned to a constant
artboard y (486), so each card offsets it by its own drop.
[R] It is a DOTTED WARM line, not the solid grey hairline this used to
draw — the 2x crop shows short orange dashes with even gaps, the same
orange as the step icons. */
.jstep:not(:last-child):after{
content:"";position:absolute;
left:100%;width:var(--jstep-gap);height:1px;
background:repeating-linear-gradient(90deg,
#E2532F 0 2px, transparent 2px 4px);
}
.jstep--1:after{ top:172px; }
.jstep--2:after{ top:calc(172px - var(--jstep-step)); }
.jstep--3:after{ top:calc(172px - (var(--jstep-step) * 2)); }
/* Numbered badge straddling the card's top edge. Geometry re-measured
from the zoomed crop of step 03 [R]: 40x40 at left 30, sitting mostly
ABOVE the edge — ~26 above, ~14 below. */
.jstep__badge{
position:absolute;left:30px;top:-26px;
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
font-family:var(--font-display);
font-size:15px;line-height:1;font-weight:600;
color:#FFFFFF;
/* [R] one gradient for all four badges: red-orange in the top-left
through magenta to indigo-violet in the bottom-right. Only step 03
was supplied at a legible size; at 19px tall in the full-frame shot
the other three are consistent with the same ramp, so the component
is treated as shared rather than per-step. */
background:linear-gradient(135deg,#F04A28 0%,#C22C8C 52%,#5B2FD6 100%);
}
/* Icon plate [R] 54x54, radius 14. Neutral grey — measurably lighter than
the card and NOT warm-tinted; the earlier warm fill was wrong. */
.jstep__icon{
display:flex;align-items:center;justify-content:center;
/* [R] re-measured off the 2x crop: the plate is 59 square on a 16 radius
and reads a lighter warm grey than the card, not near-black */
width:59px;height:59px;
border-radius:16px;
background:#3A3432;
}
/* [D] The magnifier is hand-drawn, against this file's usual rule, because
the Figma vector cannot be exported while the MCP quota is blocked and
the glyph was explicitly asked for. It is a plain circle + handle at the
measured 26px / 2.2 stroke in #F2762A. Replace with the real export. */
.jstep__icon svg{ width:26px;height:26px;display:block; }
.jstep__title{
margin:34px 0 0; /* [R] icon ends y=445 -> title y=535 */
font-family:var(--font-display);
font-size:26px;line-height:34px; /* [R] card 2 wraps to two lines */
font-weight:500;
letter-spacing:-.3px;
color:var(--text);
}
.jstep .body2{ margin-top:12px; } /* [R] */
/* ---- stats ---- */
/* [F-equiv] These are no longer estimates. The user exported this block
from Figma at its true 1520 width (Frame 427319834.png), so every
number below is measured 1:1 off that export, not off a screenshot.
columns start x=118, pitch 323.3 (so 118 left / 110 right inset)
even columns drop exactly 100
figure digits are 56 tall -> SUSE 80, the H2 size, letter-spacing 0
label ink 26 tall, "Specialist pods" 173 wide -> 24
body line pitch 23 -> the shared .body2, unchanged
avatar circle 44 outer, 3px #F2F2F2 ring, 30.5 pitch
hairline y = the cluster's centre, #D6DBDC at 75%
*/
.stats{
margin-top:120px;
padding-left:118px;padding-right:110px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
align-items:start;
}
.stat{ display:flex;flex-direction:column;padding-right:12px; } /* rule ends x=429 */
.stat:nth-child(even){ margin-top:100px; }
.stat__figure{
font-family:var(--font-display);
font-size:80px;line-height:86px;
font-weight:500;
letter-spacing:0; /* "2026" measures 178 = 4 x 44.5 */
/* A 135deg ramp spreads itself along the box DIAGONAL, and the inline box
is 86 tall against ~56 of cap height — so most of the ramp fell in the
empty leading above and below the digits and the figures read flat white.
Run it across the box instead, with the stops pulled in so both ends land
on ink no matter how many digits the figure has. */
/* 90deg, not a tilt: any angled ramp is measured along the box DIAGONAL, so
on a short figure like "6+" the tall inline box eats most of the range and
the "+" never reaches the far stop. A pure horizontal ramp maps each
glyph's x-position straight onto the stops, whatever the figure's width. */
background:linear-gradient(90deg,
var(--title-from) 0%, #DCD6EA 34%, #A79CC7 66%, var(--title-to) 90%);
-webkit-background-clip:text;background-clip:text;color:transparent;
/* Hug the digits, so "6+" gets the same full ramp that "2026" does. .stat is
a flex column, which blockifies inline-block and stretches the item to the
full ~323px track — the ramp then spread across the whole column and the
two glyphs sat entirely in its white end. align-self + max-content shrink
the box back to the ink. */
display:inline-block;
width:max-content;
align-self:flex-start;
}
.stat__label{
margin:25px 0 0; /* figure ink ends 56, label ink 102 */
font-family:var(--font-display);
font-size:26px;line-height:32px;
font-weight:500;
color:#FFFFFF; /* sampled: pure white, not the #F2F2F2 token */
}
/* The stats copy is pure white in the export, not the muted grey .body2
carries elsewhere. Each column's text box is a DIFFERENT width in Figma
— measured line 1 runs 225 / 325 / 288 / 243 — and column 2's even
overflows the 323 pitch, so no single max-width reproduces the wrapping.
These four caps are set to land each break where the export puts it. */
.stat .body2{ margin-top:9px;font-size:19px;line-height:23px;color:#FFFFFF; }
.stat:nth-child(1) .body2{ max-width:295px; }
.stat:nth-child(2) .body2{ max-width:340px; }
.stat:nth-child(3) .body2{ max-width:325px; }
.stat:nth-child(4) .body2{ max-width:302px; } /* wraps after "One" / "achieve" */
/* Avatar cluster, then the measured hairline, arrow and tick. */
.stat__foot{
margin-top:30px; /* body ink ends ~180, cluster top 245 */
display:flex;align-items:center;
position:relative;
}
/* the short opposing arrowhead sitting just past the tick */
.stat__foot:after{
content:"";position:absolute;
right:0;top:calc(50% - 3.5px);
border:3.5px solid transparent;
border-right:6px solid rgba(214,219,220,.75);
}
.stat__faces{ display:flex;flex:none;align-items:center; }
.stat__faces i{
width:44px;height:44px;flex:none; /* border-box, so the photo is 38 */
border-radius:50%;
border:3px solid var(--token-back); /* #F2F2F2, sampled off the export */
background-size:cover;background-position:center;
}
.stat__faces i + i{ margin-left:-13.5px; } /* 44 - 30.5 pitch */
/* Cut from the Figma export at 1:1 and upscaled 2x. Each is the 38px inner
disc: where a neighbour overlaps a crop, the next circle covers exactly
that region, so the seam never shows. */
.stat__faces i:nth-child(1){ background-image:url(../images/stat-face-1.png); }
.stat__faces i:nth-child(2){ background-image:url(../images/stat-face-2.png); }
.stat__faces i:nth-child(3){ background-image:url(../images/stat-face-3.png); }
/* The rule runs from the cluster to a 91px vertical tick, with a right
arrowhead meeting the tick and a short opposing one just past it. */
.stat__rule{
flex:1;height:1px;min-width:60px;
background:rgba(214,219,220,.75);
position:relative;
}
.stat__rule:before{ /* arrowhead into the tick */
content:"";position:absolute;right:23px;top:-3px;
border:3.5px solid transparent;
border-left:6px solid rgba(214,219,220,.75);
}
.stat__rule:after{ /* the tick: 64 above, 27 below */
content:"";position:absolute;right:23px;top:-64px;
width:1px;height:91px;
background:rgba(214,219,220,.75);
}
/* ============================================================
G · YOUR DATA STAYS YOURS — 641:1564
H · TESTIMONIAL — 641:1597
PROVENANCE: [R] measured off the user's screenshot (931px against the
1920 artboard, x2.062). Unlike the stats block there is no 1:1 export
yet, so these are NOT exact. See the note in index.html: the measured
column pitch (422.8) does not divide the 1520 column, so either this
section is wider than 1520 or the scale is out by ~11%.
The four glyphs are hand-drawn [D] — the MCP export is still blocked.
============================================================ */
/* violet wash bottom-left, warm wash top-left [R] */
.security{ position:relative; }
.security:before{
content:"";position:absolute;pointer-events:none;
left:-320px;top:-120px;width:760px;height:620px;
background:radial-gradient(50% 50% at 50% 50%, rgba(104,54,142,.16) 0%, rgba(14,14,16,0) 70%);
z-index:-1;
}
/* "Your data" carries its OWN gradient rather than inheriting the shared
.h2 ramp. The shared one is diagonal across the whole heading box, so
with "stays yours" taking the right half in .hl, "Your data" landed on
the ramp's near-white start and read white. [R] the supplied close-up
shows it as a clear lavender: pale lilac on the ascenders down to a
mid purple at the baseline, with "data" deeper than "Your". Scoping
the gradient to just these two words makes it independent of how wide
the warm run happens to be. */
.security__title{ margin:0; }
.hl--lavender{
/* The stops are placed against the VISIBLE window, not the whole ramp:
an inline background box is far taller than the glyphs, so only
~28%-70% of the gradient ever lands on the letterforms. Those two
stops are the measured pale lilac and mid purple from the close-up. */
background:linear-gradient(180deg,#F2F0F8 0%,#D9D3E8 28%,#9A8FC2 70%,#8A7DB4 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.security__lede{
margin:26px 0 0;
max-width:640px; /* [R] the lede breaks after "control—" */
font-size:16px;line-height:23px;
color:var(--text);
}
/* Four columns divided by hairlines. The dividers run the full height of
the row, from the icon plate down past the copy. [R] */
.security__grid{
margin-top:64px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.sfeat{ padding-right:56px; }
.sfeat + .sfeat{
padding-left:56px; /* [R] copy sits ~57 past the rule */
border-left:1px solid rgba(214,219,220,.16);
}
/* Icon plate [R] 48x48, violet tint. The glyph inside is hand-drawn [D]:
lock / lock+keyhole / shield / key, matching the screenshot. */
.sfeat__icon{
display:flex;align-items:center;justify-content:center;
width:48px;height:48px;
border-radius:12px;
background:rgba(160,99,230,.12);
border:1px solid rgba(160,99,230,.26);
color:var(--accent-violet);
}
.sfeat__icon svg{ width:22px;height:22px;display:block; }
.sfeat__title{
margin:44px 0 0; /* [R] plate ends y=414, title y=496 */
font-family:var(--font-display);
font-size:20px;line-height:28px;
font-weight:500;
color:var(--text);
}
.sfeat .body2{ margin-top:12px;font-size:15px;line-height:22px; }
/* ---- H · testimonial ---- */
/* The block is inset from the 1520 column's left edge [R] */
.testimonial{ position:relative;padding-left:284px; }
.testimonial__kicker{
display:block;
font-size:15px;line-height:25px;
letter-spacing:1.9px;
text-transform:uppercase;
color:var(--accent-violet);
}
/* The opening quote: two rounded bars, not a typographic glyph [R] */
.testimonial__mark{
display:block;margin-top:38px;
width:49px;height:35px;
background:
linear-gradient(#6B6B6B,#6B6B6B) left top / 21px 35px no-repeat,
linear-gradient(#6B6B6B,#6B6B6B) right top / 21px 35px no-repeat;
border-radius:4px;
}
.testimonial__quote{
margin:28px 0 0;
max-width:920px; /* [R] breaks into 3 lines */
font-family:var(--font-display);
font-size:38px;line-height:50px;
font-weight:500;
letter-spacing:-.4px;
color:var(--text);
}
.tq-alt{ color:#A99BC7; } /* [R] the lavender runs */
/* The CTA's first line is near-white with only a slight cool drift by its
end — not the lavender the Security heading uses. [R] */
.hl--soft{
background:linear-gradient(180deg,#FFFFFF 0%,#FCFBFD 30%,#C9C5D4 72%,#B7B2C6 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.testimonial__by{
margin-top:42px;
display:flex;align-items:center;gap:14px;
}
.testimonial__avatar{
width:40px;height:40px;flex:none;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,var(--grad-from) 0%,var(--grad-mid) 100%);
font-family:var(--font-display);
font-size:13px;font-weight:600;
color:#FFFFFF;
}
.testimonial__name{
display:block;
font-size:15px;line-height:21px;
color:var(--text);
}
.testimonial__role{
display:block;
font-size:14px;line-height:20px;
color:var(--text-muted);
}
.testimonial__rule{
display:block;margin-top:46px;
width:1011px;max-width:100%;height:1px;
background:rgba(214,219,220,.16);
}
.testimonial__dot{
position:absolute;border-radius:50%;
background:var(--accent-warm);
}
.testimonial__dot--a{ right:56px;top:214px;width:7px;height:7px; }
.testimonial__dot--b{ right:87px;top:301px;width:9px;height:9px; }
/* ============================================================
I · CTA — 641:1610 FOOTER — 641:1010
PROVENANCE: [R] measured off the user's screenshot (965px against the
1920 artboard, x1.99). No 1:1 export for these two, so they are not
exact the way the stats block is. The lattice is a reserved slot.
============================================================ */
.cta__card{
position:relative;
height:436px; /* [F-equiv] the 1:1 export is 1520x436 */
border-radius:32px; /* [F-equiv] from the export's alpha corner */
overflow:hidden;
/* The bloom is no longer approximated in CSS. It is reconstructed from
the 1:1 export: the copy and the lattice were masked out and the
remaining wash interpolated and smoothed, which is exact because the
wash is low-frequency. The lattice is cut from the same export. */
background:
url(../images/cta-bloom.png) left top / 100% 100% no-repeat,
#131114;
}
/* the card's rules — measured pitch 79 off the export, drawn rather than
baked in so they stay crisp at any card width */
.cta__grid{
position:absolute;inset:0;
background-image:
repeating-linear-gradient(90deg, rgba(214,219,220,.05) 0 1px, transparent 1px 79px),
repeating-linear-gradient(0deg, rgba(214,219,220,.05) 0 1px, transparent 1px 79px);
}
/* Node lattice, cut from the export at 1:1 (x856 rightward, strokes
isolated from the grid by alpha: grid ~30, strokes ~180-225). */
.cta__art{
position:absolute;right:0;top:0;
width:664px;height:436px;
background:url(../images/cta-lattice.png) right top / auto 100% no-repeat;
}
.cta__copy{
position:relative;
padding:0 0 0 120px; /* [F-equiv] copy left edge x=120 */
max-width:900px;
}
.cta__title{
margin:0;
padding-top:54px; /* cap of line 1 lands at y=67 */
font-family:var(--font-display);
font-size:80px;line-height:88px; /* [F-equiv] cap height 57 -> 80; pitch 88 */
font-weight:500;
letter-spacing:-2px;
}
.cta__lede{
margin:18px 0 0;
max-width:718px; /* [F-equiv] line 1 measures 710 */
font-size:20px;line-height:29px; /* [F-equiv] ink 19 tall, line pitch 29 */
color:#FFFFFF;
}
.cta__btn{
margin-top:33px; /* [F-equiv] pill top y=340 in the card export */
background:linear-gradient(135deg,var(--grad-from) 0%,var(--grad-mid) 50%,var(--grad-to) 100%);
color:#FFFFFF;
}
.cta__btn:hover{ filter:brightness(1.08); }
.cta__arrow{ width:18px;height:18px;flex:none;display:block; }
/* ---- footer ---- */
.footer{
margin-top:var(--section-gap);
position:relative;
border-top:1px solid rgba(214,219,220,.10);
/* [R] a soft magenta bloom low and right of centre */
background:
radial-gradient(60% 150% at 62% 130%, rgba(140,48,120,.28) 0%, rgba(14,14,16,0) 100%),
var(--bg);
}
.footer__inner{
padding:56px 76px 60px; /* [R] content inset 76 */
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:32px;
}
.footer__brand img{ width:248px;height:auto;display:block; }
.footer__tag{
display:block;margin-top:12px;
font-size:15px;line-height:22px;
color:var(--text-muted);
}
.footer__links{
display:flex;align-items:center;gap:14px;
font-size:16px;
color:var(--text-muted);
}
.footer__links a:hover{ color:var(--text); }
.footer__sep{ color:rgba(214,219,220,.28); }
.footer__copy{
justify-self:end;
font-size:16px;
color:var(--text-muted);
}
/* ---- footer bloom (Pod Catalogue, Resources) [R] — measured off the
1850px Pod Catalogue footer shot -------------------------------------
Standard footer type and spacing (style.css). Only the fill changes:
a warm bloom below the bottom edge peaking ~22% across (delta R+47),
swinging to violet by ~57% (delta R+19 B+20), gone by ~88%; and a 1px
top rule running warm -> violet -> neutral grey. Same bloom family as
the Get Started footer. */
.page-pods .footer,
.page-resources .footer{
border-top:0;
background:
radial-gradient(66% 135% at 23% 134%, rgba(240,60,32,.34), transparent 74%),
radial-gradient(54% 120% at 60% 128%, rgba(122,26,160,.26), transparent 72%),
var(--bg);
}
.page-pods .footer:before,
.page-resources .footer:before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,
rgba(200,86,70,.32) 0%, rgba(214,92,78,.40) 22%,
rgba(170,88,120,.36) 45%, rgba(140,96,140,.28) 62%,
rgba(214,219,220,.12) 100%);
}