/* ==========================================================================
Silk sales page — styles
Palette and type follow Logo/README.md (light-ground values).
========================================================================== */
@font-face {
font-family: "Silk Fraunces";
/* Static wordmark instance: wght 500, opsz 112, WONK 1. Roman only; the
14° slant is a synthetic oblique via font-style: italic (on purpose). */
src: url("fonts/silk-fraunces.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root {
/* grounds */
--ground: #F8F6F1; /* ivory lifted a step toward white for long reading */
--ivory: #F3EFE7; /* brand ivory: sunk panels, bars */
--ink: #171523; /* brand ink: text, the video frame */
--panel-dark: #141220;
/* text */
--text: #171523;
--text-2: #5A5468; /* ink pulled toward lilac */
--text-3: #8A8499;
--line: rgba(23, 21, 35, 0.12);
/* light-ground accents from the brand guide */
--amethyst: #6A55E8; /* primary action */
--amethyst-deep: #5B48D6; /* hover / live */
--raw: #B4653A; /* raw silk on light */
--cyan: #12968A; /* logo only */
--lilac-soft: rgba(106, 85, 232, 0.10);
--sheen: linear-gradient(100deg, #6A55E8 0%, #12968A 38%, #B4653A 58%, #6A55E8 100%);
--edge: linear-gradient(135deg, rgba(106,85,232,.55) 0%, rgba(106,85,232,.25) 40%, rgba(180,101,58,.30) 65%, rgba(106,85,232,.30) 100%);
/* type */
--display: Fraunces, Georgia, "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* layout */
--max: 1040px;
--gutter: clamp(16px, 4vw, 40px);
}
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ground);
color: var(--text);
font-family: var(--sans);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
padding-inline: var(--gutter);
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amethyst); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin-inline: auto; }
section[id], footer[id] { scroll-margin-top: 12px; }
/* --------------------------------------------------------------------------
Menu bar — the page opens like the desktop Silk runs on. Sticky, translucent,
hairline underneath, live clock on the right. No real navigation.
-------------------------------------------------------------------------- */
.menubar {
position: static; /* sits at the top of the page and scrolls away with it */
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: #F6F4EF;
border-bottom: 1px solid var(--line);
font-size: 13.5px;
color: var(--ink);
user-select: none;
}
.mb-left, .mb-right { display: flex; align-items: center; min-width: 0; }
.mb-left { overflow: hidden; }
.mb-left { gap: 6px; }
.mb-left .brand { margin-right: 10px; }
.mb-right { gap: 13px; flex-shrink: 0; }
.mb-item { color: var(--text-2); text-decoration: none; padding: 3px 8px; border-radius: 5px; white-space: nowrap; transition: background .12s, color .12s; }
.mb-item:hover { background: var(--amethyst); color: #fff; }
.mb-item:focus-visible { outline-offset: 0; }
.brand {
display: inline-flex;
align-items: center;
gap: 6px; /* 18 mark units at F=18px */
text-decoration: none;
line-height: 1;
margin-right: 4px;
}
.brand .thread { height: 15.5px; width: auto; display: block; }
.mb-ic { height: 14px; width: auto; display: block; color: var(--ink); }
.mb-tray { height: 13px; opacity: .85; }
.mb-batt { height: 12px; }
.mb-clock { display: inline-flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.silk-word {
font-family: "Silk Fraunces", Fraunces, Georgia, "Times New Roman", serif;
font-style: italic; /* synthetic oblique of the roman */
font-weight: 500;
font-size: 18px;
letter-spacing: -0.02em;
line-height: 1;
}
.silk-sheen {
background: var(--sheen);
background-size: 280% 100%;
background-position: 8% 50%;
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
animation: silk-travel 9s ease-in-out infinite;
}
.silk-stop { color: var(--ink); -webkit-text-fill-color: var(--ink); font-style: normal; }
@keyframes silk-travel { 0%, 100% { background-position: 8% 50%; } 50% { background-position: 92% 50%; } }
/* Thread mark draw-on (brand): rests fully drawn, redraws on hover */
.thread path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.brand:hover .thread path { animation: draw-thread 1.4s cubic-bezier(.65, 0, .25, 1); }
@keyframes draw-thread { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* --------------------------------------------------------------------------
Hero — blocks 01–04: headline stack, VSL, first CTA + proof strip
-------------------------------------------------------------------------- */
.hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(84px, 9vw, 100px) clamp(56px, 8vw, 96px);
}
.hero::before { /* a faint amethyst glow behind the headline */
content: "";
position: absolute;
top: -80px; left: 50%;
width: min(900px, 100vw); height: 520px;
transform: translateX(-50%);
background: radial-gradient(closest-side, var(--lilac-soft), transparent 72%);
pointer-events: none;
z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
max-width: 880px;
}
.eyebrow {
margin: 0;
font-size: .82rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--amethyst);
}
h1 {
margin: 0;
font-family: var(--display);
font-optical-sizing: auto;
font-weight: 600;
/* Sized so the full headline always fits in two balanced lines:
~30 characters per line at ~0.52em average glyph width. */
font-size: clamp(2.1rem, 5.9vw, 3.5rem); /* ≥640px this stays two lines; phones get three */
line-height: 1.06;
letter-spacing: -0.025em;
max-width: 100%;
text-wrap: balance;
color: var(--ink);
}
.sub {
margin: 4px 0 0;
font-size: clamp(1rem, 1.95vw, 1.3rem);
font-weight: 600;
line-height: 1.35;
white-space: nowrap; /* one line on desktop; wraps under 640px */
color: var(--text-2);
}
/* The input bar: shaped like Silk's own message field. Not a real input. */
.ask {
margin-top: 10px;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 14px;
padding: 13px 24px;
border-radius: 999px;
border: 1px solid transparent;
background:
linear-gradient(var(--ivory), var(--ivory)) padding-box,
var(--edge) border-box;
font-size: .98rem;
font-weight: 500;
color: var(--text-2);
}
.ask span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ask svg.ic { width: 17px; height: 17px; stroke: var(--amethyst); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ask i { color: var(--text-3); font-style: normal; }
/* VSL inside a desktop window: light title bar with traffic lights, dark body */
.win {
margin-top: clamp(32px, 5vw, 52px);
width: 100%;
max-width: 960px;
border-radius: 12px;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(var(--ivory), var(--ivory)) padding-box,
var(--edge) border-box;
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 34px 70px -28px rgba(23, 21, 35, .45), 0 4px 14px -6px rgba(23,21,35,.25);
}
.win-bar {
height: 38px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding-inline: 14px;
background: linear-gradient(#F7F4EE, #ECE8E1);
border-bottom: 1px solid var(--line);
}
.dots { display: flex; gap: 8px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #E0443E; box-shadow: 0 0 0 .5px rgba(0,0,0,.12) inset; }
.dots i:nth-child(2) { background: #DEA123; }
.dots i:nth-child(3) { background: #1AAB29; }
.win-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
/* The VTurb player. It paints its own poster, play button and controls in here.
The 16/9 box is held from the first paint by the vendor's own placeholder div
inside the element, so nothing shifts when the player script lands. */
.tvp { display: block; width: 100%; background: #000; overflow: hidden; }
/* First CTA */
.cta {
margin-top: clamp(32px, 5vw, 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.btn {
display: inline-block;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -.01em;
padding: 19px 48px;
border-radius: 12px;
background: var(--amethyst);
color: #fff;
text-decoration: none;
box-shadow: 0 14px 34px -12px rgba(106, 85, 232, .75);
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--amethyst-deep); transform: translateY(-1px); box-shadow: 0 18px 40px -12px rgba(106, 85, 232, .85); }
.btn:active { transform: translateY(0); }
.reassure { margin: 0; color: var(--text-2); font-size: 1rem; }
.guarantee { margin: 0; color: var(--ink); font-weight: 600; font-size: 1.05rem; max-width: 40ch; text-wrap: balance; }
/* Social proof strip */
.proof {
list-style: none;
margin: clamp(36px, 5vw, 52px) 0 0;
padding: 28px 0 0;
width: 100%;
max-width: 960px;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px 40px;
text-align: left;
}
.proof li {
display: flex; flex-direction: column; gap: 10px;
padding: 18px 20px 16px;
border-radius: 12px;
background: var(--ivory);
border: 1px solid rgba(23, 21, 35, .06);
}
.proof blockquote {
margin: 0;
font-size: 1rem;
line-height: 1.5;
color: var(--text);
flex: 1;
}
.proof blockquote::before { content: "\201C"; color: var(--raw); font-family: var(--display); font-size: 1.5em; line-height: 0; margin-right: 2px; vertical-align: -0.35em; }
.proof cite {
font-style: normal;
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--amethyst);
}
/* The handwritten note: hand-drawn arrow up to the tray icon, pen in raw silk */
.note {
position: absolute;
top: 6px;
right: 100px; /* fallback; script sets left to the icon's real spot */
width: 270px;
height: 66px;
pointer-events: none;
z-index: 2;
}
.note-arrow { position: absolute; top: 0; left: 168px; overflow: visible; }
.note-arrow path {
fill: none;
stroke: var(--raw);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: draw-note .9s cubic-bezier(.65, 0, .25, 1) .35s backwards;
}
.note-arrow path.head { animation-delay: 1.05s; animation-duration: .35s; }
.note-text {
position: absolute;
left: 0;
top: 30px;
font-family: Caveat, "Segoe Print", "Bradley Hand", cursive;
font-weight: 600;
font-size: 28px;
line-height: 1;
color: var(--raw);
white-space: nowrap;
transform: rotate(-4deg);
transform-origin: right center;
animation: fade-note .5s ease-out .2s backwards;
}
@keyframes draw-note { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes fade-note { from { opacity: 0; transform: rotate(-4deg) translateY(4px); } to { opacity: 1; transform: rotate(-4deg) translateY(0); } }
/* Five stars on each testimonial: brand amber, edged in raw silk so they hold on ivory */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; fill: #E9C46A; stroke: #B4653A; stroke-width: .8; stroke-linejoin: round; }
/* The pointer is Silk's own: the app's amethyst triangle at its resting -35° tilt.
White edge so it reads on the light page. Only where there is a real mouse. */
@media (pointer: fine) {
body {
cursor: url("data:image/svg+xml;utf8,") 5 3, auto;
}
a, button, [role="button"] {
cursor: url("data:image/svg+xml;utf8,") 6 3, pointer;
}
}
/* --------------------------------------------------------------------------
Block 05 — the deliverable wall. Each row acts out the headline:
the message they sent (a bubble) → what was waiting (a ticked result).
-------------------------------------------------------------------------- */
.wall-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(56px, 8vw, 96px);
border-top: 1px solid var(--line);
}
.sec-h {
margin: 0;
font-family: var(--display);
font-optical-sizing: auto;
font-weight: 600;
font-size: clamp(1.9rem, 4.2vw, 2.9rem);
line-height: 1.08;
letter-spacing: -0.02em;
max-width: 22ch;
text-wrap: balance;
color: var(--ink);
}
.lead {
margin: 16px 0 0;
color: var(--text-2);
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
max-width: 56ch;
text-wrap: pretty;
}
.wall { width: 100%; max-width: 960px; margin-top: clamp(36px, 5vw, 52px); text-align: left; }
.wall-head {
display: grid;
grid-template-columns: 1fr 56px 1fr;
gap: 20px;
padding-bottom: 12px;
font-size: .74rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-3);
}
.wall-head span:last-child { color: var(--raw); }
.grp {
margin: 30px 0 6px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--amethyst);
}
.wall-head + .grp { margin-top: 6px; }
/* A row: sent message → dashed line → the file that appeared */
.row {
display: grid;
grid-template-columns: 1fr 56px 1fr;
gap: 20px;
align-items: center;
padding: 14px 0;
border-top: 1px solid var(--line);
}
.msg {
margin: 0;
justify-self: end;
max-width: 34ch;
background: var(--amethyst);
color: #fff;
border-radius: 18px 18px 4px 18px;
padding: 11px 16px;
font-size: 1rem;
line-height: 1.4;
box-shadow: 0 6px 16px -8px rgba(106, 85, 232, .6);
}
.link { display: block; height: 12px; }
.link svg { width: 100%; height: 100%; overflow: visible; }
.link .ln { fill: none; stroke: var(--amethyst); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .55; }
.link .hd { fill: none; stroke: var(--amethyst); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.file {
margin: 0;
display: flex;
align-items: center;
gap: 14px;
font-size: 1rem;
line-height: 1.45;
color: var(--text-2);
}
.file b { color: var(--ink); }
.fico {
position: relative;
flex: none;
width: 52px; height: 52px;
display: grid; place-items: center;
}
.fico svg { width: 44px; height: 44px; filter: drop-shadow(0 3px 6px rgba(23, 21, 35, .18)); }
.fico .ext {
position: absolute;
left: 50%; bottom: 7px;
transform: translateX(-50%);
padding: 1px 5px;
border-radius: 3px;
background: #fff;
color: var(--ink);
font-size: .56rem;
font-weight: 800;
letter-spacing: .06em;
box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.fico .cnt {
position: absolute;
top: -2px; right: -4px;
min-width: 22px; height: 22px;
padding: 0 6px;
border-radius: 11px;
background: var(--raw);
color: #fff;
font-size: .72rem;
font-weight: 700;
display: grid; place-items: center;
box-shadow: 0 0 0 2px var(--ground);
font-variant-numeric: tabular-nums;
}
/* file colours: familiar desktop tones, kept slightly muted */
.fico.sheet { color: #2F8F5B; }
.fico.pdf { color: #D2493F; }
.fico.doc { color: #3D6FD8; }
.fico.code { color: #6A55E8; }
.fico.web { color: #12968A; }
.fico.app { color: #6A55E8; }
.fico.mail { color: #4B8BE0; }
.fico.folder { color: #E0B44C; }
.fico.web .ext, .fico.app .ext { bottom: 4px; }
/* A screenshot that carries its own window chrome: edge, shadow, nothing else */
.shot {
margin: clamp(32px, 5vw, 52px) 0 0;
width: 100%;
max-width: 960px;
border-radius: 12px;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(var(--ivory), var(--ivory)) padding-box,
var(--edge) border-box;
box-shadow: 0 34px 70px -28px rgba(23, 21, 35, .45), 0 4px 14px -6px rgba(23, 21, 35, .25);
}
.shot img { display: block; width: 100%; height: auto; }
/* Image placeholder inside a window: visibly a slot, for swapping before launch */
.ph {
aspect-ratio: 16 / 9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
margin: 10px;
border: 1.5px dashed rgba(23, 21, 35, .22);
border-radius: 8px;
background: var(--ground);
text-align: center;
}
.ph-k { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ph-d { font-size: .95rem; color: var(--text-2); max-width: 44ch; }
.closer {
margin: clamp(36px, 5vw, 52px) 0 0;
font-family: var(--display);
font-optical-sizing: auto;
font-weight: 600;
font-size: clamp(1.4rem, 3vw, 2rem);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
text-wrap: balance;
}
/* --------------------------------------------------------------------------
Block 06 — problem & agitation. Reading type; the two enemies get a mock
window each: a chat full of drafts, and a workflow broken on step four.
-------------------------------------------------------------------------- */
.prose-sec {
display: flex;
flex-direction: column;
align-items: center;
padding-block: clamp(56px, 8vw, 96px);
border-top: 1px solid var(--line);
}
.prose-sec .sec-h { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.prose {
width: 100%;
max-width: 62ch;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.6;
color: var(--ink);
}
.prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.knife {
font-weight: 700;
font-size: 1.08em;
line-height: 1.45;
color: var(--ink);
}
.rule {
width: 34px;
height: 3px;
border: 0;
border-radius: 2px;
background: var(--raw);
margin: 2.2em auto;
}
.landing {
font-family: var(--display);
font-optical-sizing: auto;
font-weight: 600;
font-size: clamp(1.5rem, 3vw, 2.1rem);
line-height: 1.2;
letter-spacing: -0.015em;
text-align: center;
text-wrap: balance;
margin-top: .4em;
}
.enemies {
width: 100%;
max-width: 960px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 48px);
margin-block: clamp(8px, 2vw, 20px) clamp(8px, 2vw, 16px);
}
.enemy {
font-size: clamp(1.02rem, 1.4vw, 1.12rem);
line-height: 1.6;
color: var(--ink);
}
.enemy p { margin: 0 0 1em; text-wrap: pretty; }
.enemy .knife { margin-bottom: 0; }
/* mock windows */
.mock {
margin-bottom: 22px;
border-radius: 12px;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(var(--ivory), var(--ivory)) padding-box,
var(--edge) border-box;
box-shadow: 0 24px 50px -28px rgba(23, 21, 35, .4), 0 3px 10px -6px rgba(23, 21, 35, .2);
}
.mock-bar {
height: 32px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding-inline: 12px;
background: linear-gradient(#F7F4EE, #ECE8E1);
border-bottom: 1px solid var(--line);
}
.mock-bar .dots i { width: 10px; height: 10px; }
.mock-title { font-size: 12px; font-weight: 600; color: var(--text-2); }
.mock-body { position: relative; background: #FDFCFA; aspect-ratio: 400 / 190; }
/* chat: three assistant replies as grey text bars, and a Copy button */
.mock-chat .mock-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.cb {
align-self: flex-start;
width: 78%;
background: var(--ivory);
border-radius: 12px 12px 12px 4px;
padding: 8px 10px 9px;
display: flex;
flex-direction: column;
gap: 5px;
}
.cb-k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1px; }
.cb i { display: block; height: 5px; border-radius: 3px; background: rgba(23, 21, 35, .14); }
.cb-copy {
position: absolute;
right: 14px; bottom: 12px;
font-size: 11px; font-weight: 600;
padding: 4px 9px;
border-radius: 6px;
border: 1px solid var(--line);
background: #fff;
color: var(--text-2);
}
/* workflow: nodes and wires, one broken */
.mock-nodes .mock-body svg { display: block; width: 100%; height: 100%; font-family: var(--sans); }
.mock-nodes .wire path { fill: none; stroke: rgba(106, 85, 232, .45); stroke-width: 2; }
.mock-nodes .node rect { fill: #fff; stroke: rgba(23, 21, 35, .18); stroke-width: 1.2; }
.mock-nodes .node text { font-size: 12px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.mock-nodes .node.dim rect { stroke-dasharray: 4 3; }
.mock-nodes .node.dim text { fill: var(--text-3); }
.mock-nodes .node.err rect { stroke: #D2493F; stroke-width: 1.6; fill: #FFF3F2; }
.mock-nodes .node.err circle { fill: #D2493F; }
.mock-nodes .node.err .bang { fill: #fff; font-size: 12px; font-weight: 800; }
.mock-nodes .errmsg { font-size: 10.5px; font-weight: 700; fill: #D2493F; }
/* --------------------------------------------------------------------------
Dark band. Full-bleed, brand ground. Components re-resolve their tokens
inside it, so most styles need no dark-specific rule.
-------------------------------------------------------------------------- */
.dark {
--ground: #0B0A10;
--ivory: #1D1923;
--ink: #F3EFE7;
--text-2: #CFC7D4;
--text-3: #9C93A6;
--line: rgba(243, 239, 231, .12);
--amethyst: #8B7BFF;
--raw: #E9A97E;
--edge: linear-gradient(135deg, rgba(139,123,255,.75) 0%, rgba(185,174,255,.4) 40%, rgba(233,169,126,.35) 65%, rgba(139,123,255,.35) 100%);
background: var(--ground);
color: var(--ink);
border-top: 0;
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50%);
}
.dark .prose { color: #E6E1EA; }
.dark .knife, .dark .sec-h { color: var(--ink); }
.dark .mock-bar { background: linear-gradient(#241F2B, #1D1923); }
.dark .mock-body { background: #141220; color: #F3EFE7; }
.dark .cb i { background: rgba(243, 239, 231, .16); }
.dark .cb-copy { background: #241F2B; color: var(--text-2); }
.dark .mock-nodes .node rect { fill: #1D1923; stroke: rgba(243, 239, 231, .2); }
.dark .mock-nodes .node.err rect { fill: #2A1A20; stroke: #F07A8A; }
.dark .mock-nodes .node.err circle { fill: #F07A8A; }
.dark .mock-nodes .errmsg { fill: #F07A8A; }
.dark .mock-nodes .wire path { stroke: rgba(139, 123, 255, .6); }
.dark .mock { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8); }
.pivot { border-top: 0; padding-top: clamp(48px, 7vw, 80px); }
.mock-body { color: var(--ink); }
/* --------------------------------------------------------------------------
Block 07 — old way vs new way. Two paths side by side, then the table.
-------------------------------------------------------------------------- */
.vs-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(56px, 8vw, 96px);
border-top: 1px solid var(--line);
}
.vs-sec .lead.knife { color: var(--ink); margin-top: 12px; font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
.setup {
margin: clamp(32px, 4vw, 44px) 0 0;
font-family: var(--display);
font-optical-sizing: auto;
font-weight: 600;
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
letter-spacing: -0.01em;
color: var(--ink);
text-wrap: balance;
}
.paths {
width: 100%;
max-width: 960px;
margin-top: clamp(24px, 3vw, 36px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 48px);
text-align: left;
}
.path { font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.55; color: var(--ink); }
.path p { margin: 0 0 .9em; text-wrap: pretty; }
.path .knife { margin-bottom: 0; font-size: 1.04em; }
.path-k {
font-size: .78rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 12px !important;
}
.path.new .path-k { color: var(--amethyst); }
.path .shot { margin: 0 0 18px; }
.path.old .shot { filter: saturate(.85); }
.shot-43 img { aspect-ratio: 4 / 3; object-fit: cover; }
/* the comparison table: Silk column lifted */
.vs {
width: 100%;
max-width: 760px;
margin-top: clamp(36px, 5vw, 56px);
text-align: left;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--line);
background: #fff;
}
.vs-row {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--line);
}
.vs-row:first-child { border-top: 0; }
.vs-row span { padding: 14px 18px; font-size: 1rem; line-height: 1.4; }
.vs-row span:first-child { color: var(--text-2); }
.vs-row span:last-child {
color: var(--ink);
font-weight: 600;
background: rgba(106, 85, 232, .07);
border-left: 1px solid var(--line);
display: flex; align-items: center; gap: 10px;
}
.vs-row:not(.vs-head) span:last-child::before {
content: "";
flex: none;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--amethyst);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.vs-head span { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding-block: 12px; }
.vs-head span:first-child { color: var(--text-3); }
.vs-head span:last-child { color: var(--amethyst); background: rgba(106, 85, 232, .12); }
.vs-sec > .shot { margin-top: clamp(36px, 5vw, 52px); }
.vs-sec .landing { margin-top: clamp(32px, 4vw, 44px); max-width: 26ch; }
/* Handwritten note on a figure: text below the frame, arrow rising into it */
.annot { position: relative; margin-bottom: 18px; }
.annot .shot { margin-bottom: 0; }
.hand {
position: absolute;
right: 6px;
bottom: -40px;
width: 300px;
height: 80px;
pointer-events: none;
}
.hand .note-text { top: 44px; left: 0; font-size: 26px; transform: rotate(-3deg); animation: none; }
.hand .note-arrow { position: absolute; left: 206px; top: 0; overflow: visible; }
.hand .note-arrow path { animation: none; stroke-dashoffset: 0; }
/* --------------------------------------------------------------------------
Silk agent dock, replicated from the app's overlay: an orb on the right, a
card to its left. One 20-second CSS timeline runs the job then rests on Done.
With reduced motion, the dock sits in its finished state.
-------------------------------------------------------------------------- */
.dock {
position: absolute;
right: 10px;
top: 14%;
display: flex;
align-items: flex-start;
gap: 12px;
transform: scale(.78);
transform-origin: top right;
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
.dock-orb {
position: relative;
flex: none;
width: 44px; height: 44px;
border-radius: 14px;
background: radial-gradient(circle at 30% 30%, #221E33, #141220 72%);
box-shadow: 0 0 0 1px rgba(139,123,255,.6) inset, 0 0 0 2px rgba(233,169,126,.12) inset, 0 10px 24px -8px rgba(0,0,0,.6);
display: grid; place-items: center;
}
.dock-orb .thread { width: 28px; height: auto; }
.dock-orb .thread path { stroke-dasharray: 100; animation: draw-thread 1.4s cubic-bezier(.65,0,.25,1) infinite; }
.dock-pip {
position: absolute; right: 1px; bottom: 1px;
width: 11px; height: 11px; border-radius: 50%;
border: 2px solid rgba(12,14,16,.95);
background: currentColor;
}
.dock-pip.run { color: #8B7BFF; opacity: 0; animation: dock-run 20s linear infinite, orb-pulse .82s ease-in-out infinite; }
.dock-pip.done { color: #E9A97E; opacity: 1; animation: dock-done 20s linear infinite; }
@keyframes orb-pulse { 0%,100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 4px transparent; } }
.dock-card {
width: 300px;
background: #141220;
color: #F3EFE7;
border-radius: 16px;
padding: 12px 14px 12px;
box-shadow: 0 0 0 1px rgba(139,123,255,.28) inset, 0 24px 50px -20px rgba(0,0,0,.7);
text-align: left;
}
.dock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; position: relative; }
.dock-title { flex: 1; font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: rgba(255,255,255,.94); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px; font-weight: 600; letter-spacing: .03em;
padding: 2px 9px 2px 8px; border-radius: 20px; border: 1px solid transparent;
}
.dock-badges { position: relative; flex: none; width: 70px; height: 18px; }
.dock-badges .dock-badge { position: absolute; right: 0; top: 0; }
.dock-badge.run { color: #8B7BFF; background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.4); opacity: 0; animation: dock-run 20s linear infinite; }
.dock-badge.run i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: orb-pulse .82s ease-in-out infinite; }
.dock-badge.done { color: #E9A97E; background: rgba(233,169,126,.12); border-color: rgba(233,169,126,.35); animation: dock-done 20s linear infinite; }
.dock-slot { position: relative; height: 17px; margin-bottom: 8px; }
.dock-action { position: absolute; inset: 0; display: flex; align-items: flex-start; gap: 7px; opacity: 0; animation: dock-run 20s linear infinite; }
.dock-play { font-size: 9px; color: #8B7BFF; margin-top: 3px; }
.dock-acts { position: relative; flex: 1; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.6); }
.dock-acts span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: 20s linear infinite; }
.dock-result { position: absolute; inset: 0; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.7); white-space: nowrap; animation: dock-done 20s linear infinite; }
.dock-files {
margin: 0 0 8px; padding: 6px 8px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 8px;
height: 92px; overflow: hidden;
}
.dock-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; transform: translateY(-120px); animation: dock-scroll 20s linear infinite; }
.dock-files li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; height: 16px; opacity: 1; }
.dock-files li b { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.45); }
.dock-files li span { color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.dock-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8B7BFF, #E9A97E); animation: dock-fill 20s linear infinite; }
@keyframes dock-run { 0%, 74.5% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes dock-done { 0%, 74.5% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes dock-fill { 0% { width: 0; } 74% { width: 100%; } 100% { width: 100%; } }
.dock-files li:nth-child(1) { animation: dock-row1 20s linear infinite; }
@keyframes dock-row1 { 0%, 7.0% { opacity: 0; } 7.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(2) { animation: dock-row2 20s linear infinite; }
@keyframes dock-row2 { 0%, 14.0% { opacity: 0; } 14.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(3) { animation: dock-row3 20s linear infinite; }
@keyframes dock-row3 { 0%, 21.0% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(4) { animation: dock-row4 20s linear infinite; }
@keyframes dock-row4 { 0%, 28.0% { opacity: 0; } 28.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(5) { animation: dock-row5 20s linear infinite; }
@keyframes dock-row5 { 0%, 35.0% { opacity: 0; } 35.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(6) { animation: dock-row6 20s linear infinite; }
@keyframes dock-row6 { 0%, 42.0% { opacity: 0; } 42.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(7) { animation: dock-row7 20s linear infinite; }
@keyframes dock-row7 { 0%, 49.0% { opacity: 0; } 49.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(8) { animation: dock-row8 20s linear infinite; }
@keyframes dock-row8 { 0%, 56.0% { opacity: 0; } 56.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(9) { animation: dock-row9 20s linear infinite; }
@keyframes dock-row9 { 0%, 63.0% { opacity: 0; } 63.5%, 100% { opacity: 1; } }
.dock-files li:nth-child(10) { animation: dock-row10 20s linear infinite; }
@keyframes dock-row10 { 0%, 70.0% { opacity: 0; } 70.5%, 100% { opacity: 1; } }
@keyframes dock-scroll { 0%, 35.0% { transform: translateY(0); } 35.5%, 42.0% { transform: translateY(-20px); } 42.5%, 49.0% { transform: translateY(-40px); } 49.5%, 56.0% { transform: translateY(-60px); } 56.5%, 63.0% { transform: translateY(-80px); } 63.5%, 70.0% { transform: translateY(-100px); } 70.5%, 100% { transform: translateY(-120px); } }
.dock-acts span:nth-child(1) { animation-name: dock-act1; }
@keyframes dock-act1 { 0%, 0% { opacity: 0; } 0%, 7.4% { opacity: 1; } 7.5%, 100% { opacity: 0; } }
.dock-acts span:nth-child(2) { animation-name: dock-act2; }
@keyframes dock-act2 { 0%, 7.4% { opacity: 0; } 7.5%, 21.4% { opacity: 1; } 21.5%, 100% { opacity: 0; } }
.dock-acts span:nth-child(3) { animation-name: dock-act3; }
@keyframes dock-act3 { 0%, 21.4% { opacity: 0; } 21.5%, 35.4% { opacity: 1; } 35.5%, 100% { opacity: 0; } }
.dock-acts span:nth-child(4) { animation-name: dock-act4; }
@keyframes dock-act4 { 0%, 35.4% { opacity: 0; } 35.5%, 49.4% { opacity: 1; } 49.5%, 100% { opacity: 0; } }
.dock-acts span:nth-child(5) { animation-name: dock-act5; }
@keyframes dock-act5 { 0%, 49.4% { opacity: 0; } 49.5%, 63.4% { opacity: 1; } 63.5%, 100% { opacity: 0; } }
.dock-acts span:nth-child(6) { animation-name: dock-act6; }
@keyframes dock-act6 { 0%, 63.4% { opacity: 0; } 63.5%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.dock *, .dock-orb .thread path { animation: none !important; }
}
/* --------------------------------------------------------------------------
Block 08 — how it works. Three numbered steps down a thread; each step has
text on the left and its 16:9 visual on the right.
-------------------------------------------------------------------------- */
.how-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(56px, 8vw, 96px);
border-top: 1px solid var(--line);
}
.steps {
list-style: none;
margin: clamp(36px, 5vw, 56px) 0 0;
padding: 0;
width: 100%;
max-width: 960px;
display: flex;
flex-direction: column;
gap: clamp(40px, 6vw, 72px);
text-align: left;
position: relative;
}
.steps::before { /* the thread down the number column */
content: "";
position: absolute;
left: 15px; top: 34px; bottom: 34px;
border-left: 2px dashed rgba(106, 85, 232, .35);
}
.step {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(24px, 4vw, 48px);
align-items: center;
position: relative;
}
.step-txt { padding-left: 48px; position: relative; font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.55; color: var(--ink); }
.step-txt p { margin: 0 0 .9em; text-wrap: pretty; }
.step-txt p:last-child { margin-bottom: 0; }
.step-n {
position: absolute; left: 0; top: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--amethyst);
color: #fff;
font-size: .78rem; font-weight: 700; letter-spacing: .04em;
display: grid; place-items: center;
margin: 0 !important;
box-shadow: 0 0 0 4px var(--ground);
}
.step-h {
margin: 0 0 .5em;
font-family: var(--display);
font-optical-sizing: auto;
font-weight: 600;
font-size: clamp(1.35rem, 2.2vw, 1.7rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
}
.step-msg { max-width: none !important; justify-self: start; font-size: .95rem !important; }
.step .shot, .step .annot .shot { margin: 0; }
.step .annot { margin: 0; }
.dock-2 { top: 12%; right: 10px; }
/* Image 04: a stage with the menu bar and the Silk panel dropped under the tray icon.
Sized in container units so it scales with its column. */
.stage {
container-type: inline-size;
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 12px;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(160deg, #EEE9F6 0%, #F6F2EA 55%, #EADFE8 100%) padding-box,
var(--edge) border-box;
box-shadow: 0 34px 70px -28px rgba(23, 21, 35, .45), 0 4px 14px -6px rgba(23, 21, 35, .25);
}
.stage > * { font-size: 1cqw; }
.stage-bar {
position: absolute; top: 0; left: 0; right: 0;
height: 5.2em;
background: rgba(248, 246, 241, .85);
border-bottom: 1px solid rgba(23, 21, 35, .1);
display: flex; align-items: center; justify-content: flex-end; gap: 2.4em;
padding-inline: 2.6em;
color: var(--ink);
}
.stage-tray { display: grid; place-items: center; height: 3.6em; padding-inline: .9em; border-radius: .7em; background: rgba(106, 85, 232, .16); }
.stage-tray svg { height: 2.1em; width: auto; color: var(--ink); }
.stage-clock { font-size: 2.1em; font-variant-numeric: tabular-nums; width: 10.5em; text-align: right; white-space: nowrap; }
.spanel {
position: absolute;
top: 6.2em; right: 2.6em;
width: 62em;
background: #141220;
color: #F3EFE7;
border-radius: 2.4em;
padding: 2.6em 2.8em 2.4em;
box-shadow: 0 0 0 1px rgba(139,123,255,.28) inset, 0 4em 8em -3em rgba(0,0,0,.7);
font-family: var(--sans);
}
.spanel::before { /* the notch under the tray icon */
content: ""; position: absolute; top: -1em; right: 29.2em;
width: 2em; height: 2em; background: #141220; transform: rotate(45deg);
box-shadow: -1px -1px 0 rgba(139,123,255,.28);
}
.spanel-head { display: flex; align-items: center; gap: 1.4em; margin-bottom: 2.2em; }
.spanel-head .thread { height: 2.6em; width: auto; }
.spanel-head .silk-word { font-size: 3.2em; }
.spanel-head .silk-stop { color: #F3EFE7; -webkit-text-fill-color: #F3EFE7; }
.spanel-status { margin-left: auto; display: inline-flex; align-items: center; gap: .9em; font-size: 2em; color: rgba(255,255,255,.55); }
.spanel-status i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #E9A97E; }
.spanel-input {
position: relative;
background: rgba(255,255,255,.06);
border: 1px solid rgba(139,123,255,.7);
border-radius: 1.4em;
box-shadow: 0 0 0 .6em rgba(139,123,255,.14);
padding: 2em 2.4em 2.2em;
}
.spanel-input p { margin: 0; font-size: 2.35em; line-height: 1.45; color: #F3EFE7; }
.caret { display: inline-block; width: .08em; height: 1em; background: #F3EFE7; vertical-align: -0.15em; margin-left: .1em; animation: caret-blink 1s steps(2) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.strand {
position: absolute; left: 2.4em; right: 2.4em; bottom: .9em;
height: .4em; border-radius: .2em;
background: linear-gradient(90deg, rgba(139,123,255,.5), #8B7BFF 60%, #E9A97E);
}
.strand::after {
content: ""; position: absolute; right: -.5em; top: -.4em;
width: 1.2em; height: 1.2em; border-radius: 50%;
background: #E9A97E; box-shadow: 0 0 1.4em rgba(233,169,126,.8);
}
.spanel-row { display: flex; align-items: center; gap: 1.6em; margin-top: 2em; }
.spanel-mic { width: 5.4em; height: 5.4em; border-radius: 50%; background: #8B7BFF; display: grid; place-items: center; box-shadow: 0 0 0 .8em rgba(139,123,255,.18); }
.spanel-mic svg { width: 2.8em; height: 2.8em; fill: none; stroke: #0B0A10; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spanel-hint { flex: 1; font-size: 1.9em; color: rgba(255,255,255,.45); }
.spanel-send { font-size: 2em; font-weight: 600; color: #0B0A10; background: #E9A97E; padding: .5em 1.3em; border-radius: .6em; }
.how-close { margin-top: clamp(40px, 6vw, 64px); color: var(--ink); }
.how-landing { margin-top: 18px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); max-width: 30ch; }
/* --------------------------------------------------------------------------
Block 08b — guide mode. Dark band. The stage replays the real overlay:
the pointer listens (five-bar waveform) while the question types in, thinks
(comet ring), answers (breathing ring, streamed text), then the pointer
flies to the button trailing the thread stitch, and the highlight lands.
One 13-second loop. Target box is in % of the screenshot.
-------------------------------------------------------------------------- */
.guide-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(56px, 8vw, 96px);
}
.guide-sec .sec-h { max-width: 24ch; }
.guide-prose { margin-top: clamp(20px, 3vw, 32px); text-align: left; max-width: 60ch; }
.guide-prose b { color: var(--ink); }
.asks {
list-style: none;
margin: clamp(24px, 3vw, 36px) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 12px;
max-width: 900px;
}
.asks .msg { justify-self: auto; max-width: none; font-size: .98rem; padding: 10px 16px; border-radius: 18px 18px 4px 18px; }
.guide-stage {
position: relative;
width: 100%;
max-width: 960px;
margin-top: clamp(32px, 5vw, 48px);
--tx: 76.6%; --ty: 56.8%; --tw: 16.3%; --th: 7.6%;
--ax: 57%; --ay: 86%; /* where the pointer sits while it listens */
--u: clamp(.6px, .1vw, 1px); /* bubble scale unit: 1px at desktop */
--cu: clamp(1px, .16vw, 1.6px); /* pointer scale unit: bigger, so the states read */
font-family: var(--sans);
}
.guide-stage .shot { margin: 0; }
/* pointer anchor and its state layers (all mounted, crossfaded by opacity, like the app) */
.g-anchor { position: absolute; left: var(--ax); top: var(--ay); width: 0; height: 0; }
.g-anchor > * { position: absolute; opacity: 0; }
.c-tri { width: calc(20 * var(--cu)); height: calc(20 * var(--cu)); top: calc(-10 * var(--cu)); left: calc(-10 * var(--cu)); transform: rotate(-35deg); transform-origin: 50% 58%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); animation: g-tri 13.0s linear infinite; }
.c-bars { top: calc(-10 * var(--cu)); left: calc(-9 * var(--cu)); width: calc(18 * var(--cu)); height: calc(20 * var(--cu)); display: flex; align-items: center; justify-content: space-between; animation: g-bars 13.0s linear infinite; }
.c-bars i { display: block; width: calc(2 * var(--cu)); border-radius: calc(1.5 * var(--cu)); background: #B9AEFF; height: calc(4 * var(--cu)); animation: g-bar .9s ease-in-out infinite; }
.c-bars i:nth-child(1) { --h: 8; animation-delay: -.00s; }
.c-bars i:nth-child(2) { --h: 12; animation-delay: -.12s; }
.c-bars i:nth-child(3) { --h: 16; animation-delay: -.24s; }
.c-bars i:nth-child(4) { --h: 12; animation-delay: -.36s; }
.c-bars i:nth-child(5) { --h: 8; animation-delay: -.48s; }
@keyframes g-bar { 0%, 100% { height: calc(4 * var(--cu)); } 35% { height: calc(var(--h) * var(--cu)); } 70% { height: calc(var(--h) * .55 * var(--cu)); } }
.c-comet {
top: calc(-10 * var(--cu)); left: calc(-10 * var(--cu)); width: calc(20 * var(--cu)); height: calc(20 * var(--cu)); border-radius: 50%;
background: conic-gradient(from 0deg, rgba(185,174,255,0) 0deg, rgba(185,174,255,0) 54deg, rgba(185,174,255,1) 306deg, rgba(185,174,255,0) 360deg);
-webkit-mask: radial-gradient(closest-side, transparent calc(50% - 2px), #000 calc(50% - 1.5px), #000 calc(50% - .25px), transparent 50%);
mask: radial-gradient(closest-side, transparent calc(50% - 2px), #000 calc(50% - 1.5px), #000 calc(50% - .25px), transparent 50%);
animation: g-comet 13.0s linear infinite, spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.c-ring { top: calc(-18 * var(--cu)); left: calc(-18 * var(--cu)); width: calc(36 * var(--cu)); height: calc(36 * var(--cu)); border-radius: 50%; background: rgba(185,174,255,.15); border: 1.5px solid rgba(185,174,255,.45); animation: g-ring 13.0s linear infinite, responding-breathe 1.4s ease-in-out infinite; }
@keyframes responding-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.55); } }
@keyframes g-tri { 0%, 0% { opacity: 0; } 0.0%, 4.62% { opacity: 1; } 5.77%, 100% { opacity: 0; } }
@keyframes g-bars { 0%, 3.47% { opacity: 0; } 4.62%, 27.69% { opacity: 1; } 28.84%, 100% { opacity: 0; } }
@keyframes g-comet { 0%, 26.540000000000003% { opacity: 0; } 27.69%, 35.38% { opacity: 1; } 36.53%, 100% { opacity: 0; } }
@keyframes g-ring { 0%, 34.230000000000004% { opacity: 0; } 35.38%, 60.0% { opacity: 1; } 61.15%, 100% { opacity: 0; } }
/* the triangle also shows through the responding phase */
@keyframes g-tri { 0%, 4.62% { opacity: 1; } 5.12%, 35.38% { opacity: 0; } 35.88%, 60.0% { opacity: 1; } 60.1%, 100% { opacity: 0; } }
/* response bubble, offset from the pointer like the app (28px right, 8px up) */
.g-bubble {
position: absolute;
left: calc(var(--ax) + 28 * var(--cu)); bottom: calc(100% - var(--ay) + 8 * var(--cu));
max-width: min(340px, 54%);
background: #141220; border-radius: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u));
box-shadow: 0 0 0 1px rgba(139,123,255,.3) inset, 0 8px 24px -8px rgba(0,0,0,.6);
text-align: left;
opacity: 0;
animation: g-bubble 13.0s linear infinite;
}
@keyframes g-bubble { 0%, 6.42% { opacity: 0; transform: scale(.95); } 6.92%, 92.31% { opacity: 1; transform: none; } 95.38%, 100% { opacity: 0; } }
.g-transcript { margin: 0 0 calc(6 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.3; color: rgba(243,239,231,.45); font-style: italic; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.g-transcript span { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; width: 0; animation: g-type 13.0s steps(49, end) infinite; }
@keyframes g-type { 0%, 6.92% { width: 0; } 25.38%, 100% { width: 100%; } }
.g-text { margin: 0; font-size: calc(13 * var(--u)); line-height: 1.4; color: rgba(243,239,231,.88); letter-spacing: -.01em; overflow: hidden; width: auto; max-height: 6em; animation: g-textw 13.0s linear infinite; }
@keyframes g-textw { 0%, 35.28% { width: 0; max-height: 0; margin-top: 0; } 35.38%, 100% { width: auto; max-height: 6em; } }
.g-text .w { white-space: nowrap; }
.g-text i { font-style: normal; opacity: 0; position: relative; animation: g-char 13.0s linear infinite; animation-delay: var(--d); }
.g-text i::after { content: ""; position: absolute; left: 100%; top: .12em; width: 2px; height: 1em; margin-left: 2px; background: rgba(185,174,255,.8); opacity: 0; animation: g-caret 13.0s linear infinite; animation-delay: var(--d); }
@keyframes g-caret { 0%, 0.4% { opacity: 1; } 0.41%, 100% { opacity: 0; } } }
.g-text::before { content: ""; display: inline-block; width: 2px; height: 1em; margin-right: 1px; vertical-align: -.12em; background: rgba(185,174,255,.8); opacity: 0; animation: g-lead 13.0s linear infinite; }
@keyframes g-lead { 0%, 35.330000000000005% { opacity: 0; } 35.38%, 36.870000000000005% { opacity: 1; } 36.92%, 100% { opacity: 0; } }
@keyframes g-char { 0% { opacity: 0; } 0.4% { opacity: 1; } 92.31% { opacity: 1; } 95.38%, 100% { opacity: 0; } }
.g-stream { display: inline-block; width: 2px; height: calc(13 * var(--u)); background: rgba(185,174,255,.8); margin-left: 2px; vertical-align: middle; opacity: 0; animation: g-streamwin 13.0s linear infinite, blink-cursor .8s ease-in-out infinite; }
@keyframes g-streamwin { 0%, 58.410000000000004% { opacity: 0; } 58.46%, 60.0% { opacity: 1; } 60.38%, 100% { opacity: 0; } }
@keyframes blink-cursor { 0%, 100% { visibility: visible; } 50% { visibility: hidden; } }
/* the thread stitch, drawn with the flight then fading over a second */
.g-stitch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.g-stitch path { fill: none; stroke: url(#g-stitch-grad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-stitch 13.0s cubic-bezier(.5, 0, .3, 1) infinite; vector-effect: non-scaling-stroke; }
@keyframes g-stitch { 0%, 60.0% { stroke-dashoffset: 1; opacity: 1; } 69.23% { stroke-dashoffset: 0; opacity: 1; } 77.69%, 100% { stroke-dashoffset: 0; opacity: 0; } }
/* the pointer in flight, and at rest on the button */
.g-cursor { position: absolute; width: calc(20 * var(--cu)); height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.g-fly { left: var(--ax); top: var(--ay); opacity: 0; animation: g-fly 13.0s linear infinite; }
@keyframes g-fly {
0%, 59.9% { left: 57.00%; top: 86.00%; transform: translate(-50%,-50%) rotate(-35deg) scale(1); opacity: 0; }
60.0% { left: 57.00%; top: 86.00%; transform: translate(-50%,-50%) rotate(38.5deg) scale(1.00); opacity: 1; }
60.77% { left: 57.43%; top: 85.05%; transform: translate(-50%,-50%) rotate(39.4deg) scale(1.08); opacity: 1; }
61.54% { left: 58.66%; top: 82.51%; transform: translate(-50%,-50%) rotate(41.9deg) scale(1.15); opacity: 1; }
62.31% { left: 60.59%; top: 78.94%; transform: translate(-50%,-50%) rotate(45.8deg) scale(1.21); opacity: 1; }
63.08% { left: 63.13%; top: 74.92%; transform: translate(-50%,-50%) rotate(51.0deg) scale(1.26); opacity: 1; }
63.85% { left: 66.19%; top: 70.98%; transform: translate(-50%,-50%) rotate(57.1deg) scale(1.29); opacity: 1; }
64.62% { left: 69.63%; top: 67.51%; transform: translate(-50%,-50%) rotate(63.8deg) scale(1.30); opacity: 1; }
65.38% { left: 73.26%; top: 64.78%; transform: translate(-50%,-50%) rotate(70.4deg) scale(1.29); opacity: 1; }
66.15% { left: 76.89%; top: 62.87%; transform: translate(-50%,-50%) rotate(76.5deg) scale(1.26); opacity: 1; }
66.92% { left: 80.23%; top: 61.74%; transform: translate(-50%,-50%) rotate(81.7deg) scale(1.21); opacity: 1; }
67.69% { left: 82.99%; top: 61.19%; transform: translate(-50%,-50%) rotate(85.6deg) scale(1.15); opacity: 1; }
68.46% { left: 84.88%; top: 61.01%; transform: translate(-50%,-50%) rotate(88.1deg) scale(1.08); opacity: 1; }
69.23% { left: 85.56%; top: 60.98%; transform: translate(-50%,-50%) rotate(-35.0deg) scale(1.00); opacity: 1; }
69.33%, 100% { left: 85.56%; top: 60.98%; transform: translate(-50%,-50%) rotate(-35deg) scale(1); opacity: 0; }
}
.g-rest {
left: calc(var(--tx) + var(--tw) * .55); top: calc(var(--ty) + var(--th) * .55);
transform: translate(-50%, -50%) rotate(-35deg);
opacity: 0;
animation: g-rest 13.0s linear infinite;
}
@keyframes g-rest { 0%, 69.23% { opacity: 0; } 69.33%, 92.31% { opacity: 1; } 95.38%, 100% { opacity: 0; } }
/* the guide highlight, landing with the pointer */
.g-target { position: absolute; left: var(--tx); top: var(--ty); width: var(--tw); height: var(--th); opacity: 0; animation: g-target 13.0s ease-out infinite; }
@keyframes g-target { 0%, 68.93% { opacity: 0; transform: scale(1.18); } 69.83%, 92.31% { opacity: 1; transform: scale(1); } 95.38%, 100% { opacity: 0; } }
.g-box {
position: absolute; inset: -6px;
border: 2.5px solid rgba(185,174,255,.95); border-radius: 8px;
box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 16px 2px rgba(185,174,255,.55), inset 0 0 18px rgba(185,174,255,.18);
background: rgba(185,174,255,.08);
animation: g-breathe 2.2s ease-in-out infinite;
}
@keyframes g-breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 16px 2px rgba(185,174,255,.55), inset 0 0 18px rgba(185,174,255,.18); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 24px 4px rgba(185,174,255,.75), inset 0 0 22px rgba(185,174,255,.26); } }
.g-label {
position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
white-space: nowrap; display: flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: 7px;
font-size: calc(12 * var(--u)); font-weight: 500;
color: rgba(243,239,231,.95); background: rgba(23,25,24,.92);
border: 1px solid rgba(185,174,255,.45); box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.g-step { font-weight: 600; color: #B9AEFF; padding-right: 6px; border-right: 1px solid rgba(255,255,255,.14); font-variant-numeric: tabular-nums; }
.guide-landing { margin-top: clamp(32px, 4vw, 44px); max-width: 26ch; }
.guide-close { margin-top: 14px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
.guide-stage * { animation: none !important; }
.g-anchor, .g-fly, .g-stitch, .g-stream { display: none; }
.g-bubble, .g-text i, .g-rest, .g-target { opacity: 1; }
.g-transcript span { width: auto; }
.g-text { width: auto; max-height: none; }
.g-text i::after, .g-text::before { display: none; }
.g-bubble { transform: none; }
.g-target { transform: none; }
}
/* --------------------------------------------------------------------------
Block 09 — use cases as a to-do list. Ruled notepad, ballpoint handwriting.
Each job gets crossed off in pen as it scrolls in; its folder opens a small
window with the message, what Silk did, and the result as a real object.
Without JS (or with reduced motion) everything shows crossed off, first open.
-------------------------------------------------------------------------- */
.uc-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(56px, 8vw, 96px);
border-top: 1px solid var(--line);
}
.pad {
--rule: 40px;
--padL: 92px;
--padR: 40px;
--pen: #2B3A67;
--pen-soft: rgba(43, 58, 103, .74);
--rules: rgba(92, 130, 190, .24);
--strike: #B4653A;
position: relative;
width: 100%;
max-width: 900px;
margin-top: clamp(32px, 5vw, 52px);
padding: 0 var(--padR) var(--rule) var(--padL);
background: #FFFFFB;
border-radius: 6px 6px 10px 10px;
box-shadow: 0 1px 0 rgba(23,21,35,.05), 0 30px 60px -30px rgba(23,21,35,.35), 0 8px 18px -10px rgba(23,21,35,.18);
text-align: left;
isolation: isolate;
}
.pad::before { /* a second sheet peeking out underneath */
content: ""; position: absolute; inset: 12px 0 -10px 0; z-index: -1;
background: #F1ECE1; border-radius: 8px; transform: translate(7px, 3px);
box-shadow: 0 12px 30px -18px rgba(23,21,35,.3);
}
.pad::after { /* the margin line */
content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--padL) - 22px);
width: 2px; background: rgba(204, 96, 86, .38); z-index: 2; pointer-events: none;
}
.pad-head, .pad-grp, .todo-item {
margin-inline: calc(-1 * var(--padL)) calc(-1 * var(--padR));
padding-inline: var(--padL) var(--padR);
background-image: linear-gradient(to bottom, transparent calc(var(--rule) - 1px), var(--rules) calc(var(--rule) - 1px));
background-size: 100% var(--rule);
}
.pad-head {
display: flex; align-items: baseline; justify-content: space-between;
height: calc(var(--rule) * 2); padding-top: calc(var(--rule) - 6px);
border-top: 26px solid #2B2640; /* the binding strip */
border-radius: 6px 6px 0 0;
background-position: 0 0;
}
.pad-title { font-family: Caveat, "Segoe Print", "Bradley Hand", cursive; font-weight: 600; font-size: 40px; line-height: 40px; color: var(--pen); }
.pad-date { font-family: Caveat, "Segoe Print", "Bradley Hand", cursive; font-weight: 500; font-size: 24px; line-height: 40px; color: var(--pen-soft); }
.pad-grp {
margin-block: 0; height: calc(var(--rule) * 3); padding-top: var(--rule);
font-family: Caveat, "Segoe Print", "Bradley Hand", cursive; font-weight: 600; font-size: 26px; line-height: var(--rule);
color: var(--strike);
text-decoration: underline wavy rgba(180,101,58,.55) 1.5px; text-underline-offset: 7px;
}
.todo { list-style: none; margin: 0; padding: 0; }
.todo-item { position: relative; padding-bottom: var(--rule); }
/* the hand-drawn checkbox in the margin, ticked when the job is crossed off */
.box { position: absolute; left: calc(var(--padL) - 64px); top: 7px; width: 28px; height: 28px; overflow: visible; }
.box .sq { fill: none; stroke: var(--pen); stroke-width: 1.8; stroke-linejoin: round; opacity: .8; }
.box .ck { fill: none; stroke: var(--strike); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.todo-h {
margin: 0; padding-right: 220px;
font-family: Caveat, "Segoe Print", "Bradley Hand", cursive; font-weight: 600;
font-size: 34px; line-height: var(--rule); letter-spacing: .005em; color: var(--pen);
}
.todo-h .t { /* the pen stroke, drawn across every wrapped line in turn */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: 0 58%; background-size: 100% .38em;
}
.todo-pain {
margin: 0; max-width: 60ch;
font-family: Caveat, "Segoe Print", "Bradley Hand", cursive; font-weight: 500;
font-size: 24px; line-height: var(--rule); color: var(--pen-soft); text-wrap: pretty;
}
/* JS on: jobs start un-crossed, and cross off as they arrive */
.js .todo-item:not(.done) .todo-h .t { background-size: 0% .38em; }
.js .todo-item:not(.done) .box .ck { stroke-dashoffset: 1; }
.js .todo-h .t { transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .15s; }
.js .box .ck { transition: stroke-dashoffset .35s ease-out 1s; }
.js .todo-item.done .fold { animation: fold-pop .5s cubic-bezier(.3, 1.5, .5, 1) 1.15s both; }
@keyframes fold-pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* the folder button */
.fold {
position: absolute; top: 4px; right: var(--padR);
display: inline-flex; align-items: center; gap: 8px;
height: 32px; padding: 0 13px 0 10px;
border-radius: 8px; border: 1px solid rgba(43, 58, 103, .18);
background: #fff; color: var(--pen);
font: 600 13px/1 var(--sans); cursor: pointer; white-space: nowrap;
box-shadow: 0 2px 6px -3px rgba(23,21,35,.25);
transition: border-color .15s, box-shadow .15s, background .15s;
}
.fold:hover { border-color: rgba(106,85,232,.55); box-shadow: 0 4px 12px -4px rgba(106,85,232,.45); }
.fold-ic { width: 20px; height: 17px; flex: none; }
.todo-item.open .fold { background: #F1EEFF; border-color: rgba(106,85,232,.45); }
/* the window that opens */
.out { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.3, 0, .2, 1), opacity .3s ease; }
.js .todo-item:not(.open) .out { grid-template-rows: 0fr; opacity: 0; }
.out-in { min-height: 0; overflow: hidden; }
.out-win {
margin: 14px 0 0;
border-radius: 12px; overflow: hidden;
border: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, var(--edge) border-box;
box-shadow: 0 24px 44px -26px rgba(23,21,35,.45), 0 3px 10px -6px rgba(23,21,35,.2);
font-family: var(--sans); color: var(--ink);
}
.out-win .win-bar { height: 34px; }
.out-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 22px; padding: 20px; }
.out-copy { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; line-height: 1.5; }
.out-copy p { margin: 0; }
.uc-lab { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amethyst); }
.out-say { justify-self: auto; max-width: none; font-size: .92rem; border-radius: 4px 16px 16px 16px; }
.o-does { color: var(--text-2); }
.out-got { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px !important; }
.out-got b { font-weight: 700; }
.tick { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(180,101,58,.14); color: var(--raw); display: grid; place-items: center; }
.tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.out-obj { min-width: 0; align-self: start; font-size: 13px; line-height: 1.35; }
/* result objects — shared pieces */
.o-foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #F6F5F8; color: var(--text-3); font-size: 12px; border-top: 1px solid rgba(23,21,35,.08); }
.o-img { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(23,21,35,.08); }
.o-img img { display: block; width: 100%; height: auto; }
.th { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #E6EDE0; }
/* 1 · spreadsheet */
.o-scroll { overflow-x: auto; border-radius: 8px; border: 1px solid rgba(23,21,35,.1); }
.o-sheet { min-width: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.o-tr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1.4fr) 74px; }
.o-tr span { padding: 8px 8px; border-top: 1px solid rgba(23,21,35,.07); border-left: 1px solid rgba(23,21,35,.07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-tr span:first-child { border-left: 0; }
.o-th span { border-top: 0; background: #E3F1DA; font-weight: 700; }
.o-tr .n { text-align: right; }
.o-tr .nf { color: #9A7212; font-style: italic; background: #FFF8E3; }
/* 2 · blog */
.o-blog { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.o-post { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid rgba(23,21,35,.08); border-radius: 8px; background: #fff; }
.o-post .th { aspect-ratio: 16 / 10; }
.o-post b { font-size: 13px; line-height: 1.3; }
.o-post em { font-style: normal; font-size: 11px; font-weight: 600; color: #2F8F5B; }
/* 3 · social week */
.o-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.o-day .d { display: block; font-size: 11px; font-weight: 700; color: var(--text-3); margin-bottom: 4px; text-align: center; }
.o-pc { position: relative; padding: 5px; border-radius: 7px; border: 1px solid rgba(23,21,35,.08); background: #fff; display: flex; flex-direction: column; gap: 5px; }
.o-pc .th { aspect-ratio: 1; }
.o-pc em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--text-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-pc em.live { color: #2F8F5B; }
.net { position: absolute; top: 9px; left: 9px; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; color: #fff; font: 700 10px/1 var(--sans); }
.net-f { background: #1877F2; border-radius: 50%; }
.net-in { background: #0A66C2; }
/* 4 · email sequence */
.o-seq { border: 1px solid rgba(23,21,35,.1); border-radius: 8px; overflow: hidden; }
.o-seq-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #F6F5F8; font-weight: 700; }
.o-on { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #2F8F5B; }
.o-on i { width: 26px; height: 15px; border-radius: 8px; background: #34C759; position: relative; }
.o-on i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.o-seq ol { list-style: none; margin: 0; padding: 6px 12px 8px; position: relative; }
.o-seq ol::before { content: ""; position: absolute; left: 20px; top: 16px; bottom: 16px; border-left: 2px dashed rgba(106,85,232,.35); }
.o-seq li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 6px; padding: 5px 0; position: relative; }
.o-seq li::before { content: ""; position: absolute; left: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--amethyst); box-shadow: 0 0 0 3px #fff; }
.o-seq .dd { padding-left: 22px; font-size: 11px; font-weight: 700; color: var(--amethyst); white-space: nowrap; }
/* 5 · pdf guide */
.o-pdf { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.o-cover {
aspect-ratio: 3 / 4; border-radius: 4px 8px 8px 4px; padding: 14px 12px;
background: linear-gradient(160deg, #2F5A36, #1F3F27); color: #F3EFE7;
display: flex; flex-direction: column; gap: 6px;
box-shadow: inset 6px 0 0 rgba(0,0,0,.18), 0 12px 24px -12px rgba(0,0,0,.5);
}
.o-cover svg { width: 26px; height: 26px; }
.o-cover b { font-family: var(--display); font-size: 17px; line-height: 1.1; margin-top: 6px; }
.o-cover em { font-size: 11px; opacity: .75; }
.o-cover span { margin-top: auto; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.o-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.o-meta li { display: flex; gap: 8px; align-items: flex-start; }
.o-meta .tick { width: 18px; height: 18px; margin-top: 0; }
/* 7 · invoice folder */
.o-files { border: 1px solid rgba(23,21,35,.1); border-radius: 8px; overflow: hidden; }
.o-f { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid rgba(23,21,35,.06); }
.o-f:first-child { border-top: 0; }
.o-f span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-f.hl { background: #EEF6E9; font-weight: 600; }
.fic { flex: none; width: 14px; height: 17px; display: block; }
.fic .fi { width: 100%; height: 100%; display: block; }
.fic-pdf { color: #D2493F; } .fic-xlsx { color: #2F8F5B; }
/* 8 · clean-up report */
.o-clean { display: flex; flex-direction: column; gap: 14px; }
.o-mh { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.o-mh span { font-variant-numeric: tabular-nums; color: var(--text-2); }
.bar { height: 8px; border-radius: 4px; background: #ECEAF1; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--amethyst), #E9A97E); }
.o-meter em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 600; color: #2F8F5B; }
.o-unsub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.o-unsub b { width: 100%; }
.o-unsub span { font-size: 11.5px; padding: 3px 8px; border-radius: 12px; background: #F6F5F8; color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(180,101,58,.7); }
/* --------------------------------------------------------------------------
Block 10 — testimonials. Dark band. Paula's five messages as an incoming
thread with marker highlights on the lines that matter, her job receipt
under the intro, then eight quotes with their real score out of ten.
-------------------------------------------------------------------------- */
.testi-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(56px, 8vw, 104px);
}
.testi-sec .sec-h { max-width: 20ch; }
.paula {
width: 100%;
max-width: 960px;
margin-top: clamp(36px, 5vw, 60px);
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(28px, 5vw, 64px);
align-items: start;
text-align: left;
}
.p-intro { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; }
.p-intro .eyebrow { color: var(--raw); }
.p-lead { margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.p-proof { margin: 0; font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.4; }
/* the receipt */
.receipt {
--paper: #FBF8F1;
position: relative;
width: min(100%, 280px);
margin: 10px 0 6px 4px;
padding: 18px 20px 26px;
background: var(--paper);
color: #2A2733;
font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.5;
transform: rotate(-2deg);
box-shadow: 0 22px 40px -18px rgba(0,0,0,.8);
-webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 9px repeat-x;
mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 9px repeat-x;
}
.receipt p { margin: 0; }
.r-head { text-align: center; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; padding-bottom: 10px; border-bottom: 1px dashed rgba(42,39,51,.35); }
.r-job { padding: 10px 0 6px; font-weight: 700; }
.r-rows { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px dashed rgba(42,39,51,.35); }
.r-rows p { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.r-rows p span:last-child { font-weight: 700; }
.r-total { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid rgba(42,39,51,.6); font-size: 14px; }
.r-total span:last-child { color: #B4653A; }
.r-foot { padding-top: 10px; text-align: center; font-size: 11px; color: rgba(42,39,51,.7); }
/* the thread */
.p-thread { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; display: flex; flex-direction: column; gap: 22px; }
.p-thread::before { content: ""; position: absolute; left: 8px; top: 30px; bottom: 30px; border-left: 2px dashed rgba(233, 169, 126, .35); }
.p-msg { position: relative; }
.p-msg::before { content: ""; position: absolute; left: -27px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--raw); box-shadow: 0 0 0 4px var(--ground); }
.p-stamp { display: block; margin: 0 0 6px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.p-msg p {
margin: 0;
display: inline-block;
max-width: 34em;
padding: 14px 18px;
border-radius: 4px 20px 20px 20px;
background: #221E2B;
border: 1px solid rgba(243,239,231,.08);
color: var(--ink);
font-size: clamp(1.02rem, 1.5vw, 1.15rem);
line-height: 1.5;
text-wrap: pretty;
}
.p-msg:nth-child(2) p, .p-msg:nth-child(3) p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.hl {
color: #fff;
background-image: linear-gradient(transparent 18%, rgba(233, 169, 126, .34) 18%, rgba(233, 169, 126, .34) 96%, transparent 96%);
border-radius: 3px;
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-box-decoration-break: slice; box-decoration-break: slice;
}
.js .p-msg:not(.seen) .hl { background-size: 0% 100%; }
.js .hl { transition: background-size 1.1s cubic-bezier(.6, 0, .3, 1) .25s; }
/* the wall of quotes: masonry columns, each with its real score */
.q-wall {
width: 100%;
max-width: 960px;
margin-top: clamp(48px, 7vw, 88px);
columns: 3 260px;
column-gap: 18px;
text-align: left;
}
.q-card {
break-inside: avoid;
margin: 0 0 18px;
padding: 22px 22px 20px;
border-radius: 16px;
background: #1D1923;
border: 1px solid rgba(243,239,231,.08);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}
.q-card::before { content: "\201C"; position: absolute; top: 6px; right: 16px; font-family: var(--display); font-size: 64px; line-height: 1; color: rgba(139, 123, 255, .22); }
.q-card blockquote { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; padding-right: 18px; }
.q-card:nth-child(4) blockquote, .q-card:nth-child(6) blockquote { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; }
.q-card figcaption { display: flex; align-items: center; gap: 12px; }
.q-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #0B0A10; }
.q-c0 .q-av { background: #B9AEFF; } .q-c1 .q-av { background: #E9A97E; } .q-c2 .q-av { background: #9FD8C9; } .q-c3 .q-av { background: #E9C46A; }
.q-who { display: flex; flex-direction: column; line-height: 1.3; }
.q-who b { color: var(--ink); font-weight: 700; }
.q-who em { font-style: normal; font-size: .88rem; color: var(--text-3); }
.q-score { display: flex; align-items: center; gap: 10px; }
.q-seg { display: flex; gap: 3px; }
.q-seg i { width: 9px; height: 14px; border-radius: 2px; background: rgba(243,239,231,.12); }
.q-seg i.on { background: linear-gradient(#8B7BFF, #B9AEFF); }
.q-score b { font-size: .82rem; font-weight: 700; color: #B9AEFF; font-variant-numeric: tabular-nums; }
.q-note { margin: clamp(20px, 3vw, 32px) 0 0; max-width: 60ch; font-style: italic; font-size: .95rem; color: var(--text-3); }
/* --------------------------------------------------------------------------
Block 11 — what it costs to run. A money-flow diagram (two lanes), a working
model picker, the five promises, a spend-limit slider that stops busy months
at the line, and the runaway-spend guard.
-------------------------------------------------------------------------- */
.cost-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-block: clamp(56px, 8vw, 96px);
}
.cost-knife { color: var(--ink); font-weight: 700; margin-top: 14px; font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.cost-sec > .lead:not(.cost-knife) { margin-top: 10px; }
/* money flow */
.flow { width: 100%; max-width: 960px; margin-top: clamp(32px, 5vw, 52px); display: flex; flex-direction: column; gap: 14px; text-align: left; }
.lane { border-radius: 16px; padding: 16px 22px 22px; border: 1px solid var(--line); background: #fff; }
.lane-old { background: #F3F1F4; }
.lane-new { border-color: rgba(106,85,232,.35); box-shadow: 0 18px 40px -26px rgba(106,85,232,.5); }
.lane-k { margin: 0 0 14px; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.lane-new .lane-k { color: var(--amethyst); }
.lane-row { display: flex; align-items: center; gap: 0; }
.node {
flex: none; position: relative;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 118px; padding: 12px 16px; border-radius: 12px;
background: #fff; border: 1px solid rgba(23,21,35,.12);
font-weight: 700; font-size: 1rem; color: var(--ink); text-align: center; line-height: 1.2;
}
.node small { display: block; margin-top: 3px; font-size: .75rem; font-weight: 700; }
.node-mid { background: #FFF4EE; border-color: rgba(210,73,63,.35); }
.node-mid small { color: #C8455A; }
.node-you { background: var(--amethyst); border-color: var(--amethyst); color: #fff; }
.node-acct { background: #F1EEFF; border-color: rgba(106,85,232,.45); }
.node-silk { background: #171523; border-color: #171523; }
.node-silk .silk-word { font-size: 1.35rem; }
.node-silk .silk-stop { color: #F3EFE7; -webkit-text-fill-color: #F3EFE7; }
.node-silk small { color: #E9A97E; }
.pipe { flex: 1; position: relative; height: 44px; min-width: 40px; }
.pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(23,21,35,.2); }
.lane-new .pipe::before { border-top-color: rgba(106,85,232,.55); }
.pipe-key::before { border-top: 2px dashed rgba(23,21,35,.35) !important; }
.pipe em { position: absolute; left: 0; right: 0; top: calc(50% + 15px); text-align: center; font-style: normal; font-size: .76rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.lane-new .pipe em { color: var(--amethyst); }
.pipe-key em { color: var(--text-2) !important; top: auto; bottom: calc(50% + 7px); }
.coin {
position: absolute; top: 50%; left: 6px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
display: grid; place-items: center;
background: radial-gradient(circle at 34% 28%, #FFF4C4 0 14%, #F7D367 40%, #E0A52C 78%, #C48618 100%);
box-shadow: inset 0 0 0 2px #B97C12, inset 0 0 0 4px rgba(255, 238, 178, .7), 0 3px 7px -1px rgba(110, 72, 0, .35);
animation: coin-x 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.coin::before { content: "$"; font: 800 14px/1 var(--sans); color: #8A5A0B; text-shadow: 0 1px 0 rgba(255, 244, 200, .85); margin-top: 1px; }
.coin-sm { width: 19px; height: 19px; margin-top: -9.5px; }
.coin-sm::before { font-size: 10.5px; }
.lane-old .pipe:not(.pipe-thin) .coin { animation: coin-a 4.2s ease-in-out infinite; }
.lane-old .pipe-thin .coin { animation: coin-b 4.2s ease-in-out infinite; }
@keyframes coin-a { 0% { left: 6px; opacity: 0; } 6% { left: 6px; opacity: 1; } 40% { left: calc(100% - 32px); opacity: 1; } 46%, 100% { left: calc(100% - 32px); opacity: 0; } }
@keyframes coin-b { 0%, 48% { left: 4px; opacity: 0; } 54% { left: 4px; opacity: 1; } 88% { left: calc(100% - 23px); opacity: 1; } 94%, 100% { left: calc(100% - 23px); opacity: 0; } }
@keyframes coin-x { 0% { left: 6px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 32px); opacity: 0; } }
/* two-up cards */
.cost-two { width: 100%; max-width: 960px; margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; text-align: left; }
.cost-card { min-width: 0; padding: 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 1rem; line-height: 1.55; color: var(--ink); display: flex; flex-direction: column; gap: 12px; }
.cost-card p { margin: 0; text-wrap: pretty; }
.cost-k { margin: 0; padding: 0; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--amethyst); }
.cost-h { margin: 0; font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.cost-muted { color: var(--text-2); font-size: .95rem; }
.setup-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.setup-steps li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.setup-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #F1EEFF; color: var(--amethyst); font-size: .78rem; }
.keybox { margin-top: 6px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F6F5F8; border: 1px solid rgba(23,21,35,.08); }
.kb-l { font-size: .78rem; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.kb-f { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem; color: var(--ink); background: #fff; border: 1px solid rgba(23,21,35,.1); border-radius: 6px; padding: 5px 8px; }
.kb-ok { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: #2F8F5B; white-space: nowrap; }
.kb-ok .tick { width: 18px; height: 18px; margin: 0; background: rgba(47,143,91,.14); color: #2F8F5B; }
.brains { margin: 4px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brains legend { width: 100%; margin-bottom: 8px; }
.brain { position: relative; cursor: pointer; }
.brain input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.brain span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(23,21,35,.14); background: #fff; font-size: .9rem; font-weight: 600; color: var(--text-2); transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.brain:hover span { border-color: rgba(106,85,232,.5); color: var(--ink); }
.brain input:checked + span { background: var(--amethyst); border-color: var(--amethyst); color: #fff; box-shadow: 0 6px 16px -8px rgba(106,85,232,.8); }
.brain input:focus-visible + span { outline: 3px solid var(--amethyst); outline-offset: 2px; }
.brain-now { font-size: .95rem; color: var(--text-2); }
.brain-now b { color: var(--ink); }
/* the five promises */
.promises { list-style: none; margin: 20px 0 0; padding: 6px 26px; width: 100%; max-width: 960px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-align: left; }
.promises li { display: grid; grid-template-columns: 40px minmax(0, 15em) 1fr; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.promises li:first-child { border-top: 0; }
.pr-ic { width: 40px; height: 40px; border-radius: 12px; background: #F1EEFF; display: grid; place-items: center; }
.pr-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--amethyst); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promises b { font-size: 1.05rem; color: var(--ink); }
.promises span:last-child { color: var(--text-2); line-height: 1.5; }
/* the spend-limit slider */
.capper { --cap: 37.5; }
.cap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cap-head output { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.capper input[type=range] { width: 100%; accent-color: var(--amethyst); height: 28px; margin: 0; cursor: pointer; }
.chart { position: relative; height: 190px; margin-top: 8px; padding-bottom: 22px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; border-bottom: 1px solid var(--line); }
.cap-line { position: absolute; left: -6px; right: -6px; bottom: calc(22px + (190px - 22px) * var(--cap) / 100); border-top: 2px dashed #B4653A; z-index: 2; transition: bottom .12s linear; }
.cap-line span { position: absolute; left: 6px; bottom: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #B4653A; background: #fff; padding: 0 4px; }
.m { display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.m-col { position: relative; flex: 1; display: flex; align-items: flex-end; }
.m-bar { display: block; width: 100%; border-radius: 6px 6px 2px 2px; height: calc(min(var(--use), var(--cap)) * 1%); background: linear-gradient(#B9AEFF, #8B7BFF); transition: height .12s linear; }
.m.capped .m-bar { background: linear-gradient(#E9A97E, #B4653A); }
.m-ghost { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--use) * 1%); border: 1.5px dashed rgba(180,101,58,.55); border-radius: 6px 6px 2px 2px; background: repeating-linear-gradient(135deg, rgba(180,101,58,.08) 0 6px, transparent 6px 12px); opacity: 0; transition: opacity .15s; }
.m.capped .m-ghost { opacity: 1; }
.m-tag { position: absolute; left: auto; right: 0; bottom: calc(var(--use) * 1% + 6px); transform: none !important; z-index: 3; transform: translateX(-50%); white-space: nowrap; font-size: .66rem; font-weight: 700; color: #fff; background: #B4653A; padding: 3px 6px; border-radius: 6px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.m.capped .m-tag { opacity: 1; }
.m:not(:nth-child(6)) .m-tag { display: none; } /* label only the busiest capped month to keep it readable */
.m-l { position: absolute; }
.m { position: relative; }
.m-l { bottom: -20px; left: 0; right: 0; text-align: center; font-size: .75rem; font-weight: 600; color: var(--text-3); }
.cap-note { font-size: .82rem; color: var(--text-3); }
/* runaway-spend guard */
.loopcard { width: 100%; max-width: 960px; margin-top: 20px; display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; padding: 24px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-align: left; }
.loopcard p { margin: 8px 0 0; color: var(--ink); line-height: 1.55; text-wrap: pretty; }
.loop-ic { width: 72px; height: 72px; }
.loop-g { transform-box: view-box; transform-origin: 32px 32px; animation: loop-spin 4.5s cubic-bezier(.3, 0, .2, 1) infinite; }
.loop-stop { transform-box: view-box; transform-origin: 32px 32px; animation: loop-stop 4.5s ease-out infinite; }
@keyframes loop-spin { 0% { transform: rotate(0deg); } 55%, 100% { transform: rotate(720deg); } }
@keyframes loop-stop { 0%, 54% { transform: scale(1); } 62% { transform: scale(1.35); } 70%, 100% { transform: scale(1); } }
.cost-landing { margin-top: clamp(36px, 5vw, 52px); max-width: 28ch; }
@media (prefers-reduced-motion: reduce) {
.coin, .loop-g, .loop-stop { animation: none !important; }
.coin { left: 45%; opacity: 1; }
}
/* --------------------------------------------------------------------------
Header platform mark
-------------------------------------------------------------------------- */
.mb-apple { height: 15px; width: auto; display: block; fill: #3A3A3C; opacity: .8; margin-top: -2px; }
.win-logo { fill: currentColor; }
/* --------------------------------------------------------------------------
Block 12 — offer stack. Four items, each with a visual made of its own facts.
-------------------------------------------------------------------------- */
.stk-sec { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.stk { width: 100%; max-width: 960px; margin-top: clamp(32px, 5vw, 52px); display: flex; flex-direction: column; gap: 18px; text-align: left; }
.stk-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 36px); align-items: center; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.stk-vis { border-radius: 14px; background: var(--ivory); padding: 20px; min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.stk-txt { display: flex; flex-direction: column; gap: 10px; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.stk-txt p { margin: 0; text-wrap: pretty; }
.stk-lab { font-size: .74rem !important; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--amethyst); }
.stk-h { margin: 0; font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cap-chip { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--raw); padding: 4px 9px; border-radius: 999px; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-icon { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 8px 18px -8px rgba(23,21,35,.5); }
.plat { display: flex; gap: 8px; }
.plat span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(23,21,35,.1); font-size: .8rem; font-weight: 600; color: #3A3A3C; }
.plat svg { width: 13px; height: 13px; fill: #5A5A5E; }
.plat .mb-apple { height: 13px; margin: -2px 0 0; opacity: 1; fill: #5A5A5E; }
.today { display: flex; flex-direction: column; gap: 10px; }
.today-k { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slot { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 9px; border-radius: 10px; background: #fff; border: 1px solid rgba(23,21,35,.09); }
.slot-n { font-size: .7rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.slot-bar { display: block; height: 6px; border-radius: 3px; background: rgba(23,21,35,.08); overflow: hidden; }
.slot-bar i { display: block; height: 100%; width: 62%; border-radius: 3px; background: linear-gradient(90deg, var(--amethyst), #B9AEFF); }
.slot-bar.q { border: 1px dashed rgba(23,21,35,.18); background: transparent; }
.slot-s { font-size: .68rem; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.run { border-color: rgba(106,85,232,.45); background: #F6F4FF; }
.slot.run .slot-n, .slot.run .slot-s { color: var(--amethyst); }
.jobs-cap { margin: 0; font-size: .86rem; color: var(--text-2); }
.jobs-cap b { color: var(--ink); }
.jobs-cap span { color: var(--amethyst); font-weight: 700; }
.skill-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.skill-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid rgba(23,21,35,.09); font-size: .84rem; font-weight: 600; color: var(--ink); }
.sk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amethyst); }
.skill-chips li:nth-child(3n+2) .sk-dot { background: var(--raw); }
.skill-chips li:nth-child(3n) .sk-dot { background: #2F8F5B; }
.sessions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sess p { margin: 7px 0 0; font-size: .82rem; font-weight: 700; color: var(--ink); text-align: center; }
.sess-frame { position: relative; aspect-ratio: 16 / 11; border-radius: 10px; background: radial-gradient(circle at 30% 20%, #2B2640, #141220 70%); display: grid; place-items: center; box-shadow: 0 10px 20px -12px rgba(0,0,0,.6); }
.sess-play { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.sess-play svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
.sess-rec { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(243,239,231,.8); }
.sess-rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F07A8A; }
.stk-call { flex-direction: row; align-items: center; gap: 18px; }
.call-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 4px #fff, 0 12px 26px -12px rgba(23,21,35,.55); }
.call-meta p { margin: 0; }
.call-name { font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: var(--ink); line-height: 1.1; }
.call-role { font-size: .86rem; color: var(--text-2); margin-top: 2px !important; }
.call-len { margin-top: 10px !important; font-size: .9rem; color: var(--ink); }
.stk-landing { margin-top: clamp(32px, 5vw, 48px); }
.stk-note { margin: 10px 0 0; font-style: italic; color: var(--text-2); }
/* --------------------------------------------------------------------------
Block 13 — guarantee. Dark band, a plain seal, and a 60-day ruler.
-------------------------------------------------------------------------- */
.gar-sec { display: flex; flex-direction: column; align-items: center; padding-block: clamp(56px, 8vw, 104px); }
.gar-top { width: 100%; max-width: 960px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: clamp(24px, 5vw, 64px); align-items: center; }
.gar-txt .sec-h { text-align: left; max-width: 16ch; margin-bottom: 18px; }
.gar-txt p { margin: 0 0 1em; font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.6; color: #E6E1EA; max-width: 58ch; }
.seal { width: 210px; height: 210px; color: #E9A97E; }
.seal-ring { font: 700 11.5px var(--sans); letter-spacing: 2.6px; fill: #E9A97E; }
.seal-num { font-family: var(--display); font-weight: 600; font-size: 58px; fill: #F3EFE7; }
.seal-days { font: 700 12px var(--sans); letter-spacing: 4px; fill: #E9A97E; }
.ruler { width: 100%; max-width: 960px; margin-top: clamp(36px, 5vw, 56px); }
.ruler-labels { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); margin-bottom: 10px; font-size: .86rem; color: #CFC7D4; }
.rl { white-space: nowrap; }
.rl b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.rl-wk { grid-column: 1 / span 20; color: #E9A97E; }
.rl-std { grid-column: 22 / span 16; justify-self: center; text-align: center; }
.rl-std b { color: #9C93A6; }
.rl-end { grid-column: 41 / span 20; justify-self: end; text-align: right; color: #B9AEFF; }
.ticks { position: relative; display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 3px; height: 42px; }
.ticks i { border-radius: 3px; }
.ticks .wk { background: #E9A97E; }
.ticks .std { background: rgba(243,239,231,.16); }
.ticks .ext { background: linear-gradient(#B9AEFF, #8B7BFF); }
.ticks::after { content: ""; position: absolute; top: -10px; bottom: -10px; left: 50%; border-left: 2px dashed rgba(243,239,231,.55); }
.ruler-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: .74rem; color: #9C93A6; font-variant-numeric: tabular-nums; }
.facts { width: 100%; max-width: 960px; margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fact { padding: 20px; border-radius: 16px; background: #1D1923; border: 1px solid rgba(243,239,231,.08); display: flex; flex-direction: column; gap: 6px; }
.fact b { font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: #F3EFE7; line-height: 1.1; }
.fact span { color: #CFC7D4; line-height: 1.45; }
.gar-end { width: 100%; max-width: 62ch; margin-top: clamp(32px, 5vw, 52px); text-align: center; }
.gar-end p { margin: 0 0 1em; color: #E6E1EA; font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.6; }
.gar-thing { font-weight: 700; color: #F3EFE7 !important; font-size: clamp(1.1rem, 1.8vw, 1.3rem) !important; }
.gar-landing { margin: .4em 0 0 !important; color: #F3EFE7 !important; }
/* --------------------------------------------------------------------------
Block 14 — price. An order summary with the second button.
-------------------------------------------------------------------------- */
.buy-sec { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(56px, 8vw, 96px); }
.buy-sec .sec-h { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.buy-lead { color: var(--ink); font-weight: 600; margin-top: 12px; }
.order { width: 100%; max-width: 560px; margin-top: clamp(28px, 4vw, 40px); padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(23,21,35,.45); text-align: left; display: flex; flex-direction: column; gap: 14px; }
.order-k { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.order-lines { list-style: none; margin: 0; padding: 0; }
.order-lines li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); font-size: .98rem; line-height: 1.45; color: var(--ink); }
.order-lines li:first-child { border-top: 0; }
.order-lines .tick { margin-top: 1px; }
.order-lines em { font-style: normal; font-size: .78rem; font-weight: 700; color: #2F8F5B; padding-top: 2px; }
.order-total { display: flex; align-items: baseline; gap: 10px; padding-top: 14px; border-top: 2px solid var(--ink); }
.order-total span { flex: 1; font-weight: 700; color: var(--ink); }
.order-total b { font-family: var(--display); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--ink); }
.order-total em { font-style: normal; font-weight: 700; color: var(--amethyst); }
.order-btn { text-align: center; margin-top: 4px; }
.order .reassure, .order .guarantee { text-align: center; max-width: none; }
.buy-note { margin: 22px 0 0; max-width: 58ch; font-style: italic; color: var(--text-2); line-height: 1.55; }
/* --------------------------------------------------------------------------
Block 15 — FAQ.
-------------------------------------------------------------------------- */
.faq-sec { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.faq { width: 100%; max-width: 780px; margin-top: clamp(28px, 4vw, 44px); text-align: left; border-top: 1px solid var(--line); }
.faq-i { border-bottom: 1px solid var(--line); }
.faq-i summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.3; color: var(--ink); }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-plus { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: #F1EEFF; transition: background .15s, transform .2s; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--amethyst); border-radius: 1px; transition: transform .2s; }
.faq-plus::after { transform: rotate(90deg); }
.faq-i[open] .faq-plus { background: var(--amethyst); }
.faq-i[open] .faq-plus::before, .faq-i[open] .faq-plus::after { background: #fff; }
.faq-i[open] .faq-plus::after { transform: rotate(0deg); }
.faq-i summary:hover .faq-plus { background: #E4DEFF; }
.faq-i[open] summary:hover .faq-plus { background: var(--amethyst-deep); }
.faq-i p { margin: 0; padding: 0 52px 22px 4px; font-size: 1.02rem; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
/* --------------------------------------------------------------------------
Block 16 — who this is not for.
-------------------------------------------------------------------------- */
.nf-sec { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(56px, 8vw, 96px); background: linear-gradient(var(--ground), #F1EDE5); margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.nf-grid { width: 100%; max-width: 960px; margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
.nf { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
.nf-ic { grid-row: 1 / span 2; width: 30px; height: 30px; fill: none; stroke: #C8455A; stroke-width: 2; stroke-linecap: round; margin-top: 1px; }
.nf h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; color: var(--ink); }
.nf p { margin: 0; color: var(--text-2); line-height: 1.55; }
.nf-landing { margin-top: clamp(32px, 5vw, 48px); max-width: 30ch; }
/* --------------------------------------------------------------------------
Block 17 — close. Dark band, final button, the PS as a signed paper note.
-------------------------------------------------------------------------- */
.close-sec { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(64px, 9vw, 112px); }
.close-sec .sec-h { max-width: 20ch; }
.close-prose { margin-top: clamp(20px, 3vw, 30px); text-align: center; }
.close-prose b { color: #fff; }
.close-cta { margin-top: clamp(28px, 4vw, 40px); }
.close-sec .reassure { color: #CFC7D4; }
.close-sec .btn { background: #8B7BFF; color: #0B0A10; box-shadow: 0 14px 34px -12px rgba(139,123,255,.8); }
.close-sec .btn:hover { background: #B9AEFF; }
.ps-note {
position: relative; width: 100%; max-width: 560px; margin-top: clamp(40px, 6vw, 64px);
padding: 30px 32px 24px; text-align: left; transform: rotate(-1deg);
background: #FFFEF8; color: #2B3A67; border-radius: 4px;
background-image: linear-gradient(to bottom, transparent 35px, rgba(92,130,190,.22) 35px, rgba(92,130,190,.22) 36px, transparent 36px);
background-size: 100% 36px; background-position: 0 22px;
box-shadow: 0 30px 50px -24px rgba(0,0,0,.8);
}
.ps-note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(233,169,126,.55); transform: rotate(2deg); }
.ps-note p { margin: 0; font-family: Caveat, "Segoe Print", "Bradley Hand", cursive; font-weight: 500; font-size: 24px; line-height: 36px; }
.ps-note b { font-weight: 600; color: #B4653A; }
.ps-sign { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ps-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.ps-sign span { display: flex; flex-direction: column; font-family: var(--sans); font-size: .8rem; color: #56607F; line-height: 1.3; }
.ps-sign b { font-family: Caveat, "Segoe Print", cursive; font-size: 30px; line-height: 1; color: #2B3A67; font-weight: 600; }
/* --------------------------------------------------------------------------
Footer — a Windows 11-style taskbar, with the note pointing at the tray icon.
-------------------------------------------------------------------------- */
.site-foot { position: relative; margin-inline: calc(50% - 50vw); padding-inline: 0; background: linear-gradient(160deg, #E6E9F2, #D9DEEB 60%, #CFD6E6); }
.foot-desk { position: relative; min-height: 150px; padding: 0 max(16px, calc(50vw - 520px)) 96px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.foot-legal { margin: 22px 0 0; font-size: .82rem; color: #4A5068; }
.foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-fine { margin-top: 16px; max-width: 88ch; font-size: .72rem; line-height: 1.55; color: #5F6680; }
.foot-fine p { margin: 0 0 10px; }
.note-down { position: absolute; top: auto; bottom: -10px; right: auto; left: 60%; width: 270px; height: 70px; z-index: 3; }
.note-down .note-text { top: 4px; left: 0; color: #B4653A; }
.note-down .note-arrow { left: 168px; top: 8px; }
.taskbar { position: relative; z-index: 2; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 12px; background: rgba(243, 244, 248, .92); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid rgba(0,0,0,.08); color: #1B1B1F; }
.tb-apps { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding-left: 80px; }
.tb-btn { position: relative; width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; }
.tb-btn:hover { background: rgba(0,0,0,.05); }
.tb-start .win-logo { width: 22px; height: 22px; fill: #5F6368; }
.tb-ic { width: 24px; height: 22px; }
.tb-btn img { width: 24px; height: 24px; border-radius: 6px; }
.tb-on::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: #6A55E8; }
.tb-search { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 60px 0 12px; margin: 0 6px; border-radius: 17px; background: #fff; border: 1px solid rgba(0,0,0,.08); font-size: .86rem; color: #5F6368; }
.tb-search svg { width: 16px; height: 16px; fill: none; stroke: #5F6368; stroke-width: 2; stroke-linecap: round; }
.tb-tray { display: flex; align-items: center; gap: 12px; padding-right: 6px; }
.tb-chev { width: 16px; height: 16px; fill: none; stroke: #1B1B1F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-silk { height: 14px; width: auto; color: #1B1B1F; }
.tb-sys { width: 16px; height: 16px; color: #1B1B1F; }
.tb-batt { width: 24px; height: 12px; }
.tb-clock { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 760px) {
.proof { grid-template-columns: 1fr; gap: 22px; }
.wall-head { display: none; }
.row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
.msg { justify-self: end; font-size: .98rem; max-width: 88%; }
.link { height: 40px; width: 16px; justify-self: end; margin-right: 28px; }
.link svg { transform: rotate(90deg); transform-origin: 8px 8px; width: 40px; height: 16px; }
.link .ln { stroke-width: 3; stroke-dasharray: 4 6; opacity: .85; }
.link .hd { stroke-width: 3; opacity: 1; }
.file { font-size: .98rem; }
.closer br { display: none; }
.shot { border-radius: 8px; }
.enemies { grid-template-columns: 1fr; gap: 36px; }
.paths { grid-template-columns: 1fr; gap: 36px; }
.stk-row { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
.stk-vis { min-height: 0; padding: 16px; }
.plat span { padding: 4px 8px; font-size: .74rem; }
.slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.slot { padding: 8px 5px; }
.slot-s { font-size: .6rem; }
.stk-call { gap: 14px; }
.call-photo { width: 96px; height: 96px; }
.gar-top { grid-template-columns: minmax(0, 1fr); }
.gar-txt .sec-h { text-align: center; margin-inline: auto; }
.seal { width: 150px; height: 150px; justify-self: center; order: -1; }
.ruler-labels { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rl, .rl-std, .rl-end { justify-self: auto; text-align: left; white-space: normal; }
.rl b { display: inline; margin-right: 6px; }
.ticks { gap: 1.5px; height: 34px; }
.facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.order { padding: 20px 18px; }
.order-lines li { grid-template-columns: 22px minmax(0, 1fr); }
.order-lines em { grid-column: 2; padding-top: 0; }
.faq-i p { padding-right: 8px; }
.nf-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.nf { padding: 18px; }
.ps-note { padding: 26px 20px 20px; transform: rotate(-.6deg); }
.ps-note p { font-size: 21px; }
.foot-desk { min-height: 140px; padding-bottom: 100px; }
.foot-legal { margin-top: 18px; }
.tb-search, .tb-apps .tb-btn:nth-child(4) { display: none; }
.tb-apps { justify-content: flex-start; padding-left: 0; }
.tb-tray { gap: 9px; }
.note-down { width: 200px; bottom: -18px; }
.note-down .note-text { font-size: 22px; }
.note-down .note-arrow { left: 118px; width: 64px; height: 43px; }
.cost-two { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cost-card { padding: 20px 18px; }
.lane { padding: 14px 16px 18px; }
.lane-row { flex-direction: column; align-items: stretch; }
.node { min-width: 0; width: 100%; }
.pipe { flex: none; height: 78px; min-width: 0; }
.pipe::before { left: calc(50% - 1px); right: auto; top: 0; bottom: 0; border-top: 0 !important; border-left: 2px solid rgba(23,21,35,.2); }
.lane-new .pipe::before { border-left-color: rgba(106,85,232,.55); }
.pipe-key::before { border-left: 2px dashed rgba(23,21,35,.35) !important; }
.pipe em, .pipe-key em {
top: 50% !important; bottom: auto !important; left: 50%; right: auto; transform: translate(-50%, -50%);
z-index: 2; white-space: nowrap; text-align: center; padding: 3px 10px; border-radius: 999px;
background: #fff; border: 1px solid rgba(23,21,35,.1); font-size: .74rem; line-height: 1.3;
}
.lane-old .pipe em { background: #F3F1F4; }
.lane-new .pipe em { border-color: rgba(106,85,232,.3); }
.coin { z-index: 1; }
.coin { left: 50% !important; margin-left: -13px; top: 2px; margin-top: 0; animation-name: coin-y; }
.coin-sm { margin-left: -9.5px; }
.lane-old .pipe:not(.pipe-thin) .coin { animation-name: coin-ya; }
.lane-old .pipe-thin .coin { animation-name: coin-yb; }
@keyframes coin-ya { 0% { top: 2px; opacity: 0; } 6% { top: 2px; opacity: 1; } 40% { top: calc(100% - 28px); opacity: 1; } 46%, 100% { top: calc(100% - 28px); opacity: 0; } }
@keyframes coin-yb { 0%, 48% { top: 2px; opacity: 0; } 54% { top: 2px; opacity: 1; } 88% { top: calc(100% - 21px); opacity: 1; } 94%, 100% { top: calc(100% - 21px); opacity: 0; } }
@keyframes coin-y { 0% { top: 2px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 28px); opacity: 0; } }
.promises { padding: 4px 18px; }
.promises li { grid-template-columns: 40px 1fr; row-gap: 4px; }
.promises li > span:last-child { grid-column: 2; }
.loopcard { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px; }
.loop-ic { width: 56px; height: 56px; }
.chart { height: 170px; }
.cap-line { bottom: calc(22px + (170px - 22px) * var(--cap) / 100); }
.paula { grid-template-columns: 1fr; gap: 28px; }
.p-intro { position: static; }
.p-thread { padding-left: 24px; gap: 18px; }
.p-thread::before { left: 5px; }
.p-msg::before { left: -24px; }
.q-wall { columns: 1; }
.pad { --rule: 36px; --padL: 44px; --padR: 14px; }
.pad::after { left: calc(var(--padL) - 10px); }
.pad-head { border-top-width: 18px; }
.pad-title { font-size: 34px; line-height: 36px; }
.pad-date { font-size: 20px; line-height: 36px; }
.pad-grp { font-size: 22px; text-underline-offset: 6px; }
.box { left: 4px; top: 8px; width: 22px; height: 22px; }
.todo-h { font-size: 27px; padding-right: 0; }
.todo-pain { font-size: 20px; }
.fold { position: static; margin: 2px 0; height: 32px; }
.out-body { grid-template-columns: 1fr; padding: 14px; gap: 16px; }
/* the sheet fits the screen instead of forcing a 470px scroller: email drops, the rest stays */
.o-sheet { min-width: 0; font-size: 11.5px; }
.o-tr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 52px; }
.o-tr span:nth-child(3) { display: none; }
.o-scroll { overflow-x: hidden; }
.o-blog { grid-template-columns: 1fr 1fr; }
.o-pdf { grid-template-columns: 110px 1fr; gap: 12px; }
.o-cover b { font-size: 14px; }
.step { grid-template-columns: 1fr; gap: 18px; }
.asks { flex-direction: column; align-items: stretch; }
.guide-stage { --ax: 66%; --ay: 88%; }
.g-bubble { left: 5%; max-width: 56%; }
.asks .msg { border-radius: 14px 14px 4px 14px; }
.g-box { inset: -4px; border-width: 2px; border-radius: 6px; }
.g-label { bottom: calc(100% + 8px); }
.steps { gap: 44px; }
.steps::before { display: none; }
.step-txt { padding-left: 44px; }
.dock-2 { transform: scale(.62); top: 8%; right: 6px; }
.dock { transform: scale(.68); right: 6px; top: 10%; }
.hand { width: 250px; height: 70px; bottom: -34px; right: 4px; }
.hand .note-text { font-size: 22px; top: 38px; }
.hand .note-arrow { left: 168px; width: 70px; height: 46px; }
.vs-row span { padding: 12px 12px; font-size: .92rem; }
.vs-row span:last-child { gap: 8px; }
.vs-row:not(.vs-head) span:last-child::before { width: 16px; height: 16px; }
.mock { max-width: 440px; }
.prose { font-size: 1.05rem; }
.ph { margin: 8px; padding: 18px; }
.ph-d { font-size: .88rem; }
.proof blockquote { font-size: .98rem; }
.mb-item { display: none; }
.mb-date { display: none; }
.mb-right { gap: 11px; }
}
@media (max-width: 640px) {
.hero { padding-top: 96px; }
.sub { white-space: normal; max-width: 34ch; text-wrap: balance; }
/* Phone note: short arrow straight up to the icon, text centred beneath it */
.note { width: 200px; height: 70px; right: auto; left: 0; }
.note-arrow { left: 78px; top: -2px; width: 60px; height: 40px; }
.note-text { top: 36px; left: 0; width: auto; text-align: left; font-size: 22px; transform: rotate(-4deg); transform-origin: left center; }
.stack { gap: 14px; }
.eyebrow { font-size: .74rem; letter-spacing: .12em; }
}
@media (max-width: 480px) {
.win { border-radius: 10px; }
.win-bar { height: 32px; padding-inline: 10px; }
.dots i { width: 10px; height: 10px; }
.btn { width: 100%; text-align: center; padding: 18px 20px; font-size: 1.2rem; }
.cta { width: 100%; }
.reassure { font-size: .95rem; }
.guarantee { font-size: 1rem; }
.proof li { padding: 16px 18px 14px; }
}
/* Narrow screens: the three ways to ask break out of the input bar and become
their own pills. Stacked inside one box they read as a tall, half-empty
container with ragged lines; as pills each way to ask is its own thing. */
@media (max-width: 560px) {
.ask {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.ask i { display: none; }
.ask span {
padding: 9px 15px;
border-radius: 999px;
border: 1px solid transparent;
background:
linear-gradient(var(--ivory), var(--ivory)) padding-box,
var(--edge) border-box;
font-size: .95rem;
font-weight: 600;
color: var(--ink);
box-shadow: 0 10px 22px -18px rgba(23, 21, 35, .55);
}
}
@media (prefers-reduced-motion: reduce) {
.silk-sheen, .thread path, .note-arrow path, .note-text { animation: none !important; }
.btn { transition: none; }
html { scroll-behavior: auto; }
}
/* ==========================================================================
Price-rise countdown bar (fixed to the bottom of the viewport)
========================================================================== */
body.has-deal { padding-bottom: 76px; }
.deal-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
gap: 12px 28px;
padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
background: var(--ink);
color: #F3EFE7;
box-shadow: 0 -10px 30px -12px rgba(23, 21, 35, .45);
animation: deal-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.deal-bar[hidden] { display: none; }
@keyframes deal-in { from { transform: translateY(100%); } to { transform: none; } }
.deal-text { margin: 0; font-size: 1.02rem; font-weight: 600; }
.deal-text b { color: #B9ADFF; }
.deal-clock { display: flex; gap: 6px; }
.deal-clock span {
display: flex; flex-direction: column; align-items: center;
min-width: 48px; padding: 5px 6px 4px;
border-radius: 8px;
background: rgba(243, 239, 231, .08);
border: 1px solid rgba(243, 239, 231, .12);
}
.deal-clock b { font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.deal-clock small { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.deal-btn {
padding: 11px 22px;
border-radius: 10px;
background: var(--amethyst);
color: #fff;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background .15s ease;
}
.deal-btn:hover { background: var(--amethyst-deep); }
@media (max-width: 640px) {
body.has-deal { padding-bottom: 104px; }
.deal-bar {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 12px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.deal-text { grid-column: 1 / -1; text-align: center; font-size: .95rem; }
.deal-clock { gap: 4px; }
.deal-clock span { min-width: 0; flex: 1; padding: 4px 4px 3px; }
.deal-clock b { font-size: 1.1rem; }
.deal-clock small { font-size: .6rem; }
.deal-btn { align-self: stretch; display: flex; align-items: center; padding: 0 16px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
.deal-bar { animation: none; }
}
/* Block 11 · the route switch: ChatGPT plan, Claude plan or OpenRouter key. :has() swaps the panes without JS. */
.routes { margin: 2px 0 0; padding: 4px; border: 0; border-radius: 12px; background: #F6F5F8; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.routes legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.route { position: relative; cursor: pointer; }
.route input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.route span { display: block; padding: 9px 6px; border-radius: 9px; text-align: center; font-size: .92rem; font-weight: 700; color: var(--text-2); transition: background .15s, color .15s, box-shadow .15s; }
.route:hover span { color: var(--ink); }
.route input:checked + span { background: var(--amethyst); color: #fff; box-shadow: 0 6px 16px -8px rgba(106,85,232,.8); }
.route input:focus-visible + span { outline: 3px solid var(--amethyst); outline-offset: 2px; }
.rt { display: flex; flex-direction: column; gap: 12px; }
.cost-sec:has(#route-gpt:checked) :is(.rt-claude, .rt-or), .cost-sec:has(#route-claude:checked) :is(.rt-gpt, .rt-or), .cost-sec:has(#route-or:checked) :is(.rt-gpt, .rt-claude) { display: none; }
.kb-acct { font-family: inherit; font-weight: 600; white-space: normal; line-height: 1.3; }
.kb-acct small { display: block; font-size: .78rem; font-weight: 700; color: var(--amethyst); }
.brain input:disabled, .brain:has(input:disabled) { cursor: not-allowed; }
.brain input:disabled + span { opacity: .4; border-style: dashed; }
.brain:has(input:disabled):hover span { border-color: rgba(23,21,35,.14); color: var(--text-2); }
@media (max-width: 480px) { .keybox:has(.kb-acct) .kb-l { display: none; } }