/* ============================================================================= Digital Art Factory — BASE + COMPONENTS (assets/css/base.css) Load AFTER tokens.css. Contains, in order: 1. Reset + base element defaults 2. Reduced-motion global guard (second layer; tokens.css is the first) 3. Layout shell (header / nav / main / footer) + skip link 4. Accessibility + utility primitives (.visually-hidden, .num, .caps, .muted, .cluster, the section rhythm rules) + the facet glyph set 5. SHARED components — the chrome and the legal/404 pages: buttons, alerts, toasts, language switcher, prose, not-found block 6. Responsive rules for the shared chrome 7. HOMEPAGE layer (index.html only): hero + motif, facet-cut capability cards, the flow beam path, the trust spec list, the closing CTA band, and its own min-width enhancements Sections 5 and 7 are deliberately separate: 5 is what every page uses, 7 is the homepage redesign. Nothing in 7 is referenced by legal/*, 404.html or shell.js, so the homepage layer can be reworked without touching them. Everything is responsive and RTL-aware via CSS logical properties. Components reference ONLY the tokens in tokens.css. ============================================================================= */ /* ============================================================================ 1. RESET + BASE ELEMENTS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* The HTML `hidden` attribute must always win. Components below set `display:flex`, which otherwise overrides the UA `[hidden]{display:none}` rule and leaves JS-toggled elements visible. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + var(--s-4)); } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--s-3); line-height: var(--lh-tight); font-weight: var(--fw-semi); color: var(--c-text); text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } h4 { font-size: var(--t-h4); } p { margin: 0 0 var(--s-4); } a { color: var(--c-accent); text-decoration: none; } a:hover { color: var(--c-accent-hover); text-decoration: underline; } img, svg, picture, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); } dl { margin: 0 0 var(--s-4); } dt { font-weight: var(--fw-semi); } dd { margin-inline-start: 0; margin-block-end: var(--s-3); color: var(--c-text-2); } hr { border: 0; border-block-start: 1px solid var(--c-divider); margin-block: var(--s-5); } button, input, select, textarea { font: inherit; color: inherit; } /* Global visible focus. Never remove an outline without a replacement. */ :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--shadow-focus); border-radius: inherit; /* keep each control's own radius (pills stay pill) */ } /* Suppress the legacy outline only where :focus-visible is honored. */ :focus:not(:focus-visible) { outline: none; } ::selection { background: color-mix(in srgb, var(--c-accent) 30%, transparent); } /* ============================================================================ 2. REDUCED-MOTION GLOBAL GUARD (WCAG 2.3.3) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================================ 3. LAYOUT SHELL ========================================================================== */ .shell { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--s-4); } .shell--narrow { max-inline-size: var(--maxw-narrow); } main.shell { flex: 1 0 auto; padding-block: var(--s-6) var(--s-8); } main:focus { outline: none; } /* programmatic focus target; skip-link gives context */ /* Skip link — first focusable element (WCAG 2.4.1). */ .skip-link { position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); z-index: var(--z-modal); display: inline-flex; align-items: center; min-block-size: var(--tap); padding: var(--s-2) var(--s-4); background: var(--c-accent); color: var(--c-accent-ink); border-radius: var(--r-sm); font-weight: var(--fw-semi); transform: translateY(-200%); transition: transform var(--dur) var(--ease); } .skip-link:focus { transform: translateY(0); text-decoration: none; } /* Header */ .site-header { position: sticky; inset-block-start: 0; z-index: var(--z-header); background: var(--c-surface-2); border-block-end: 1px solid var(--c-border); } .hdr { display: flex; align-items: center; gap: var(--s-4); block-size: var(--header-h); } .brand { display: inline-flex; align-items: center; /* --tap in BOTH axes: on a phone the brand contracts to a 22px mark (below), which is a full-size tap target only if the box is held open. */ min-block-size: var(--tap); min-inline-size: var(--tap); gap: var(--s-2); color: var(--c-text); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-decoration: none; white-space: nowrap; } .brand:hover { color: var(--c-text); text-decoration: none; } .brand__mark { color: var(--c-accent); font-size: 1.75em; line-height: 1; } .brand__word { font-size: var(--t-h4); } /* PHONE: the brand contracts to its mark. A 360px bar cannot hold the wordmark (185px) AND the three controls that all have to stay — theme, the language sizes to its LONGEST option, so "Bahasa Indonesia" drove a 180px track in every locale, including English. The dropdown list itself is UA-rendered and stays full-width, so nothing becomes unreadable. */ max-inline-size: 7rem; text-overflow: ellipsis; padding-inline: var(--s-3); padding-block: var(--s-1); background: var(--c-surface-3); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text); cursor: pointer; } .lang-switch select:hover { border-color: var(--c-border-strong); } /* ── 5.5 Prose (legal pages) ── */ .prose { max-inline-size: 70ch; } .prose h2 { margin-block-start: var(--s-6); } .prose h3 { margin-block-start: var(--s-5); } .prose p, .prose li { color: var(--c-text-2); } .prose .alert p { margin: 0; color: var(--c-text); } .prose__toc { font-size: var(--t-sm); color: var(--c-text-3); } /* ── 5.6 Not-found (404) page ── */ .notfound { display: grid; justify-items: center; align-content: center; gap: var(--s-3); min-block-size: 50vh; text-align: center; } .notfound__code { font-size: var(--t-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-accent); margin: 0; } .notfound__cta { justify-content: center; margin-block-start: var(--s-4); } /* ============================================================================ 6. RESPONSIVE (shared chrome) The ONE remaining max-width query in this file is PRE-EXISTING and lives here. It is the last of the desktop-first residue the mobile-first audit flagged — the other was the nav disclosure's @media (max-width: 720px), now restructured into a mobile-first base + min-width enhancement (section 3). No new work may add one (design-plan constraint 4 — enhance upward only). This block's .panel / .card / .step padding overrides were deleted with their components in MOVE 5; only the shell and the footer nav remain. ========================================================================== */ @media (max-width: 600px) { main.shell { padding-block: var(--s-5) var(--s-7); } .ft__nav { margin-inline-start: 0; flex-basis: 100%; } } /* ============================================================================ 7. HOMEPAGE (redesign) — MOBILE-FIRST Additive component layer for index.html. Base rules target small screens; min-width media queries enhance upward. Everything styles through tokens and logical properties, so RTL + both themes come for free. The hero motif is the single deliberate motion moment and is frozen under prefers-reduced-motion. ========================================================================== */ /* ── 7.0 Shared section eyebrow (uppercase label above a section title) ── */ .section__eyebrow { margin: 0 0 var(--s-2); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-accent); } /* ── 7.1 Hero — the signature ──────────────────────────────────────────────── This is the ONE hero layer. There used to be two (a base .hero in §5.9 and a redesign .hero here) fighting over gap/padding/align-items with identical specificity, so source order silently decided the winner and half of §5.9 was dead. §5.9 is gone; everything hero lives here. The composition: the refraction motif is not a picture beside the copy, it is the ground the copy sits on. It is present at 360px — that is the whole point — and gains presence upward. The type never gets weaker to pay for it; the motif does (blur + opacity + a fan that starts BELOW the headline). Geometry contract, do not break it casually: .hero__stage is a 2-row grid. Row 1 holds .hero__motif and .hero__content in the SAME cell, so the motif's box is exactly the copy block and its bottom edge is exactly the top edge of .hero__formats. Row 2 is .hero__formats, whose border-block-start IS the surface the rays land on. There is no row gap — the air above the rule is .hero__content's padding-block-end, so it stays inside the motif's box. In the motif's viewBox (0 0 400 480): the fan apex is (250,214) = 62.5% 44.583%, and the facet's top vertex is (250,54) = 62.5% 11.25%. The facet element is anchored to the apex by translate(-50%,-100%) and is exactly 33.333% (=160/480) tall, which is what makes the beam land on its top vertex at any box size. Four numbers move together: this block-size, the beam's x2/y2 in index.html, the facet's own viewBox, and its aspect-ratio. ────────────────────────────────────────────────────────────────────────── */ .hero { position: relative; /* Full-bleed: cancel the shell's inline padding, re-apply it inside. The motif then runs to the viewport edge on a phone, and overflow-x: clip contains the beam's overhang so the body never scrolls sideways. */ margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); padding-block: var(--s-7) var(--s-6); overflow-x: clip; display: grid; gap: var(--s-5); } .hero__stage { position: relative; display: grid; } .hero__content { grid-area: 1 / 1; position: relative; z-index: 1; /* over the motif — both are positioned */ display: grid; gap: var(--s-4); min-inline-size: 0; padding-block-end: var(--s-6); /* the air above the landing rule */ } .hero__eyebrow { margin: 0; text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-accent); } .hero__title { margin: 0; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); /* large sizes only — never at body size */ font-weight: var(--fw-bold); max-inline-size: 18ch; } .hero__subtitle { margin: 0; font-size: var(--t-h4); font-weight: var(--fw-reg); /* the jump away from --fw-bold above */ line-height: var(--lh-body); color: var(--c-text-2); max-inline-size: var(--measure); } /* .hero__ctas is the sole owner of the CTA row now — the old .hero__cta class carried the flex and .hero__ctas only the margin, on the same element. */ .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); } /* The landing edge. ONE element, ONE string (45 locales) — the rays point at it rather than into it, so nothing here depends on word count or word order. */ .hero__formats { grid-area: 2 / 1; margin: 0; padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-border); font-family: var(--font-formats); /* these are data: five named formats */ font-size: var(--t-sm); /* .caps ships --t-xs; too quiet for the payoff line */ letter-spacing: var(--ls-formats); word-spacing: var(--ws-formats); color: var(--c-text-2); /* AA+ in both themes, over the motif too */ } /* Not a flex row: as one, flex-wrap stranded the ◆ alone on line 1 with the text wrapping beneath it. It is a mark on a sentence, so it flows inline. */ .hero__trustline { margin: 0; color: var(--c-text-3); font-size: var(--t-sm); line-height: var(--lh-body); } .hero__trustline .brand__mark { margin-inline-end: var(--s-1); } /* ── The motif ────────────────────────────────────────────────────────────── One layer, not three: the old .hero::before wash and the old .hero__aura blurred circle were separate boxes stacked at z-index:-1 in the same place. Both are folded into this element's background, centred on the facet. */ .hero__motif { grid-area: 1 / 1; position: relative; z-index: 0; pointer-events: none; margin-inline: calc(var(--s-4) * -1); /* out to the hero's bled edges */ /* ONE aura, centred on the facet. Its extent is deliberately arithmetic: the last stop (72%) x the radius (46%/48%) must not reach any edge from the centre (62.5% 36%), or the gradient gets cut by the box and the "ambient" glow becomes a visible rectangle. Left 29.5 / right 95.5 / top 1.4 / bottom 70.6 — all inside. Move the centre and you must redo this. */ background: radial-gradient(46% 48% at 62.5% 36%, color-mix(in srgb, var(--c-accent-2) 20%, transparent) 0%, color-mix(in srgb, var(--c-accent) 9%, transparent) 46%, transparent 72%); } /* The drawing is authored LTR (dir="ltr" on the element). Mirroring the whole layer — SVG, facet and termini together — keeps the beam reading input → output in ar/ur/fa/he, and no text lives inside it to come out backwards. */ [dir="rtl"] .hero__motif { transform: scaleX(-1); } /* Rays + beam. Stretched to the box (preserveAspectRatio="none") — straight lines stay straight under any aspect, the fan just opens wider on desktop. non-scaling-stroke keeps the weight honest. Blurred and dimmed because they cross the subtitle: this is the decoration earning its contrast, not the type giving any up. */ .facet-motif { position: absolute; /* contributes no height: the row is the copy */ inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; filter: blur(1px); /* strokes read as light, not as a diagram */ } /* Stop colours come from the tokens, so both themes and any future palette change are free. stop-color/stop-opacity are real CSS properties — this is the only way to keep the gradient tokenized (a var() in a presentation attribute would not resolve). */ .fm-grad--a stop, .fm-grad--in stop, .fm-grad--gem stop { stop-color: var(--c-accent); } .fm-grad--b stop { stop-color: var(--c-accent-2); } /* Every stop-opacity below is a MEASURED contrast budget, not a taste call. Ceilings, from rendered pixels (worst case = a stroke join, which doubles coverage, so the budgets are set ~25% under the arithmetic limit): behind .hero__subtitle / .hero__eyebrow (4.5:1 floor) -> accent alpha <= .35 / .22 behind .hero__title (>=24px bold, 3.0:1 floor) -> accent alpha <= .70 Raise any of these and re-run the contrast probe; do not raise them by eye. */ /* Rays: apex -> landing edge. */ .fm-stop--0 { stop-opacity: 0; } /* at the apex: nothing. No convergence hotspot. */ .fm-stop--1 { stop-opacity: .30; } /* crossing the subtitle: barely there */ .fm-stop--2 { stop-opacity: 1; } /* on the rule: full. The light arrives. */ /* Beam: arrives quietly past the eyebrow, brightest over the headline, spent. */ .fm-stop--in0 { stop-opacity: .10; } .fm-stop--in1 { stop-opacity: .15; } .fm-stop--in2 { stop-opacity: .45; } .fm-stop--in3 { stop-opacity: .10; } /* Facet: top -> bottom vertex. */ .fm-stop--g0 { stop-opacity: .55; } .fm-stop--g1 { stop-opacity: .38; } .fm-stop--g2 { stop-opacity: .04; } .facet-motif__in { /* stroke (the paint server) is a presentation attribute in index.html, NOT a declaration here: url(#id) inside an external stylesheet resolves against the STYLESHEET's URL in some engines, which silently kills the gradient. The colours still come from the tokens, via the stop rules above. */ stroke-width: 2; stroke-linecap: round; } .facet-motif .ray { stroke-width: 2; stroke-linecap: round; fill: none; opacity: .55; /* == the 100% keyframe: the reduced-motion resting value */ animation: facet-shimmer 5.5s var(--ease) infinite; } /* The facet. Anchored by its bottom vertex to the fan's apex; 128/480 of the box tall, so its top vertex is always exactly where the beam arrives. */ .facet-motif__facet { position: absolute; inset-inline-start: 62.5%; /* apex x */ inset-block-start: 44.583%; /* apex y = 214/480 */ block-size: 33.333%; /* = 160/480 */ inline-size: auto; aspect-ratio: 11 / 16; /* the gem's own 44:64 profile */ transform: translate(-50%, -100%); overflow: visible; opacity: .85; /* the stop-opacities above carry the budget */ } .facet-motif__gem { fill: color-mix(in srgb, var(--c-accent-2) 7%, transparent); stroke-width: 2; /* paint server: see .facet-motif__in */ stroke-linejoin: round; vector-effect: non-scaling-stroke; } .facet-motif__cut { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; } /* Ray termini. Nothing crosses them, so they are the one crisp thing in the motif — the composition resolves ON the formats line. Straddling the rule is the point: the light pools where the names are. */ .facet-motif__nodes { position: absolute; inset: 0; } .facet-motif__nodes .node { position: absolute; inset-block-end: 0; inline-size: 8px; block-size: 12px; /* the seed rhombus, taller than wide */ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: translate(-50%, 50%); background: currentColor; /* clip-path would eat a box-shadow; drop-shadow is applied to the clipped result, so the node pools light onto the rule instead of sitting on it. */ filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 70%, transparent)); opacity: .55; /* == the 100% keyframe (see above) */ animation: facet-shimmer 5.5s var(--ease) infinite; } /* x = the ray termini, as a fraction of the viewBox width (8/106/204/302/392 of 400) */ .facet-motif__nodes .node--1 { inset-inline-start: 2%; color: var(--c-accent); } .facet-motif__nodes .node--2 { inset-inline-start: 26.5%; color: var(--c-accent-2); } .facet-motif__nodes .node--3 { inset-inline-start: 51%; color: var(--c-accent); } .facet-motif__nodes .node--4 { inset-inline-start: 75.5%; color: var(--c-accent-2); } .facet-motif__nodes .node--5 { inset-inline-start: 98%; color: var(--c-accent); } .facet-motif .ray--1, .facet-motif__nodes .node--1 { animation-delay: 0s; } .facet-motif .ray--2, .facet-motif__nodes .node--2 { animation-delay: .5s; } .facet-motif .ray--3, .facet-motif__nodes .node--3 { animation-delay: 1s; } .facet-motif .ray--4, .facet-motif__nodes .node--4 { animation-delay: 1.5s; } .facet-motif .ray--5, .facet-motif__nodes .node--5 { animation-delay: 2s; } /* The page's one motion moment: slow, ambient, non-looping-looking. 100% is the RESTING value and must equal the static opacity declared above — the reduced-motion guard (§2) collapses the duration and drops fill-mode, so the element lands back on that static value. Freeze-frame correctness lives here. */ @keyframes facet-shimmer { 0% { opacity: .35; } 50% { opacity: .85; } 100% { opacity: .55; } /* resting value the reduced-motion guard freezes to */ } /* ── 7.2 Creative capabilities — FACET-CUT CARDS ───────────────────────────── Texture 1 of 3: six parallel, browsable things. They stay cards, because that is what six parallel browsable things are — but the box is CUT, not rounded. The gradient rail that used to sit on top is gone: an accent bar across a rounded card is the single most generic device available, and it was doing the gem's job badly. How the hairline survives the cut. clip-path takes the border with it — a `border: 1px` under a clip is simply sliced away on the diagonal, which is the one edge that has to look deliberate. So the card is drawn as two clipped layers instead: the element's own background IS the hairline, and ::before is the surface inset by 1px and clipped to the same polygon. The 1px that shows through traces the whole outline, cut face included — the diagonal reads as a polished facet rather than a mistake. ::before is absolutely positioned, so it would paint over the card's in-flow content; `.cap > *` are given position:relative to join the same paint layer, where DOM order puts them on top. No z-index, no stacking context. clip-path also eats a box-shadow, which is why there is none — and that is the right answer anyway: the page gets quieter to pay for the hero. The cut depth and its RTL mirror both live in tokens.css (--cut/--clip-facet); this file writes one declaration and direction is free. ─────────────────── */ .cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; } .cap { position: relative; display: flex; flex-direction: column; padding: var(--s-5); background: var(--c-border); /* the hairline, seen through ::before's inset */ clip-path: var(--clip-facet); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); } .cap::before { content: ""; position: absolute; inset: 1px; clip-path: var(--clip-facet); background: var(--c-surface); } .cap > * { position: relative; } /* over ::before, by DOM order alone */ .cap:hover { transform: translateY(-3px); background: var(--c-border-strong); /* the cut edge catches the light */ } .cap__glyph { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; margin-block-end: var(--s-3); clip-path: var(--clip-facet); /* the same cut, one order of magnitude down */ background: var(--grad-facet-soft); color: var(--c-accent); /* the .glyph's currentColor — see §4 */ } .cap__title { margin: 0 0 var(--s-1); font-size: var(--t-h4); } /* Demoted from an uppercase accent label to quiet meta (MOVE 4: the page had four competing uppercase devices). These strings are lists of formats — "Stills · Series · Storyboards" — i.e. DATA, so they take --font-num and the muted floor. The .caps class was removed from the markup: .cap__tag never declared text-transform, so restyling here alone could not have demoted it. */ .cap__tag { margin: 0 0 var(--s-3); color: var(--c-text-3); font-family: var(--font-num); font-size: var(--t-xs); font-weight: var(--fw-reg); line-height: var(--lh-tight); } .cap__body { margin: 0; color: var(--c-text-2); font-size: var(--t-sm); } /* ── 7.3 Flow (how teams work) — THE BEAM PATH ─────────────────────────────── Texture 2 of 3: four steps that are a real SEQUENCE (brief → produce → refine → ship), so they are not cards. Four boxes in a row assert an order that only their reading direction actually carries; a rail SHOWS it. The rail is the hero's beam continued into the page — one line, four termini, cut from the same rhombus as the hero's ray nodes and alternating accent / accent-2 on the same 1-3-5 / 2-4 rhythm. The numbers stay (the sequence is true information) but they stop being a counter badge asserting what the rail already shows: they are now quiet tabular meta above each title, in --font-num, per MOVE 4's rule that --font-num is reserved for things that are DATA. i18n: the counter lives on .flow__title::before. A PSEUDO-element is not a DOM child, so it survives i18n.js's `el.textContent = t(key)` wipe — putting a in there instead would be deleted the moment i18n boots. The digits are also direction-isolated: 01 must not reorder in ar/ur/fa/he. Rail geometry, one number in two places: the node is 11px wide, flush to the inline-start edge, so its centre sits at 5.5px and the 1px rail sits at 5px. Node block-start is 5px with a 15px node → centre y 12.5px, which is where the first step's rail begins and the last step's rail ends, so the beam terminates ON the outer nodes instead of overshooting into space. ────────────────────────────────────────────────────────────────────────── */ .flow { counter-reset: flow; display: grid; gap: 0; /* the rail is continuous: the steps butt together */ margin: 0; /* rhythm belongs to .ship (single writer) */ padding: 0; list-style: none; } .flow__step { counter-increment: flow; position: relative; padding-inline-start: var(--s-6); /* the rail's channel */ padding-block-end: var(--s-5); } .flow__step:last-child { padding-block-end: 0; } /* the rail */ .flow__step::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 5px; inline-size: 1px; background: var(--c-border-strong); } .flow__step:first-child::before { inset-block-start: 12.5px; } .flow__step:last-child::before { inset-block-end: auto; block-size: 12.5px; } /* the node */ .flow__step::after { content: ""; position: absolute; inset-block-start: 5px; inset-inline-start: 0; inline-size: 11px; block-size: 15px; /* the seed rhombus: taller than wide */ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--c-accent); } .flow__step:nth-child(even)::after { background: var(--c-accent-2); } .flow__title { margin: 0 0 var(--s-2); font-size: var(--t-h4); } .flow__title::before { content: counter(flow, decimal-leading-zero); display: block; margin-block-end: var(--s-1); font-family: var(--font-num); font-size: var(--t-xs); font-weight: var(--fw-reg); letter-spacing: var(--ls-caps); color: var(--c-text-3); direction: ltr; /* .num semantics: digits never reorder under RTL */ unicode-bidi: isolate; } .flow__body { margin: 0; color: var(--c-text-2); font-size: var(--t-sm); max-inline-size: var(--measure); } /* ── 7.4 "What teams ship" list — where the beam lands ── */ .ship { margin-block-start: var(--s-block); padding-block-start: var(--s-block); border-block-start: 1px solid var(--c-border); } .ship__label { margin: 0 0 var(--s-4); color: var(--c-accent); } .ship__list { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin: 0; padding: 0; list-style: none; } .ship__item { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-h4); color: var(--c-text); } .ship__mark { flex: 0 0 auto; color: var(--c-accent); line-height: 1.4; } /* ── 7.5 Trust & GDPR — THE SPEC LIST ──────────────────────────────────────── Texture 3 of 3: six assurances. Assurances are a FACT SHEET, so this reads like one — hairline-divided rows, no surface, no border box, no radius and no shadow. It is the lightest thing on the page on purpose: it is the third texture, and it is also where the page proves it is not just more boxes. The rows are ruled top-and-bottom by the grid's own border-block-end plus a border-block-start per row, so the sheet closes cleanly at both ends without a divider hanging off the last item. Structure survives: still