/* Hallmark · shape: Narrative Workflow · genre: playful · theme: Hum 2 (by request, rebuilt) · job: sign up · draw: reference-directed * G (a-ha): F's system; the first-seconds timeline replaces the alternatives, four proof cards in How it works, Cue me drawn as the default, Download for Mac as the second action * hero: Stage, the live call on seven and a half columns · nav: slab, a torn brand-ink strip · footer: mast, the wordmark over the links on torn brand ink · imagery: the product drawn (call, Coach paper, plan sheet) and four drawn mode posters, no photographs · signature: the interviewer's question highlighted in the transcript, a dotted pen arrow to the speakable prompt, a yellow starburst for the free start * sections: Stage hero (Cue me pane, Download for Mac) · Definition · First-seconds timeline · How Live Copilot works: four drawn steps, the format line, four proof cards · Four mode posters · Compact Coach band · State B on mint + the one proof · Plan sheet on a yellow backer · Five stamped worries · FAQ rows · Close on a yellow sheet · Mast * axes: light/rounded-sans/brand-violet + yellow + mint · posture: full-palette · motion: press on the primary control and the plus taps only · v2.0.0 */ /* Hallmark · pre-emit critique: P4 H5 E5 S4 R4 V5 · weakest: S, the claim qualifications are long; they sit in captions and plus taps so each screen reads as one statement and one object */ /* Hallmark · waive 80 · .call, .markup, .track, .aha and the four .poster__art drawings are inline SVG and CSS of IC's own surfaces and mode motifs · Mikhail asked for Hum 2's illustrated objects, never a stock scene or a character */ /* Hallmark · waive 12 · .btn--primary press and the plus-tap rotation only · Hum 2's card-stock press uses the same spring, and nothing else on the page moves */ /* ---- tokens.css ---- */ /* E · Paper, drawn: Hum 2's paper, ink and type, with the Interview Copilot purple as a structural colour. */ :root { color-scheme: light; --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-statement: clamp(1.5rem, 1.6vw + 0.9rem, 2.375rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-snap: cubic-bezier(0.22, 1, 0.36, 1); --dur-micro: 120ms; --dur-short: 220ms; --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap: 152px; /* paper and ink (Hum 2 values; ink nudged 30 degrees toward the brand hue) */ --color-paper: oklch(97% 0.012 95); --color-paper-2: oklch(94.5% 0.018 95); --color-paper-3: oklch(91% 0.022 95); --color-card: oklch(98.8% 0.007 95); --color-fringe: oklch(99.2% 0.006 95); --color-edge: oklch(83% 0.04 88); --color-rule: oklch(87% 0.016 95); --color-ink: oklch(20% 0.02 285); --color-ink-2: oklch(29% 0.02 285); --color-muted: oklch(46% 0.02 285); /* the brand: #6415FF and its paper family */ --color-brand: oklch(50.83% 0.2888 284.31); --color-brand-deep: oklch(38% 0.21 284); --color-brand-ink: oklch(23% 0.075 284); --color-brand-ink-2: oklch(31% 0.09 284); --color-brand-tint: oklch(90.5% 0.048 290); --color-brand-wash: oklch(95% 0.022 290); --color-on-brand: oklch(99% 0.005 95); --color-on-ink: oklch(96% 0.012 95); --color-on-ink-2: oklch(86% 0.03 290); /* two supporting colours only */ --color-no: oklch(58% 0.19 27); --color-yellow: oklch(88% 0.165 96); --color-yellow-deep: oklch(74% 0.155 92); --color-mint: oklch(87% 0.1 162); --color-mint-deep: oklch(41% 0.09 162); --color-sage: oklch(91% 0.05 150); --color-focus: var(--color-brand); --font-display: "Chillax", ui-rounded, ui-sans-serif, sans-serif; --font-body: var(--font-display); --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius-card: 22px; --radius-stock: 16px; --radius-small: 10px; --radius-pill: 999px; --tracking-display: -0.03em; --shadow-card: 0 1px 2px oklch(20% 0.02 285 / 0.07), 0 14px 30px -14px oklch(20% 0.02 285 / 0.26); --shadow-paper: drop-shadow(0 0 0.6px oklch(20% 0.02 285 / 0.32)) drop-shadow(1.5px 2.5px 1.5px oklch(20% 0.02 285 / 0.1)) drop-shadow(6px 14px 16px oklch(20% 0.02 285 / 0.14)); --shadow-paper-low: drop-shadow(0 0 0.6px oklch(20% 0.02 285 / 0.34)) drop-shadow(1px 2px 1.5px oklch(20% 0.02 285 / 0.13)); --shadow-lift: drop-shadow(0 0 0.6px oklch(20% 0.02 285 / 0.3)) drop-shadow(2px 4px 2px oklch(20% 0.02 285 / 0.12)) drop-shadow(10px 22px 22px oklch(20% 0.02 285 / 0.18)); --shadow-sticker: drop-shadow(0 0 0.6px oklch(20% 0.02 285 / 0.4)) drop-shadow(3px 6px 6px oklch(20% 0.02 285 / 0.22)); --shadow-poster: 0 1px 2px 8px oklch(20% 0.02 285 / 0.06), 0 18px 30px -10px oklch(20% 0.02 285 / 0.3); /* paper textures: new seeds, rebuilt locally */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .24 0 0 0 0 .2 0 0 0 .44 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.022' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .28 -10 0 0 0 .4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --fibre-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.022' numOctaves='4' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -10 0 0 0 .42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); /* pen marks, used as masks over the brand colour */ --pen-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M30 10 C80 1 160 2 186 16 C202 26 192 46 150 53 C100 60 30 58 12 44 C-2 32 14 14 52 8 C70 5 90 5 104 6' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); --pen-under: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C40 7 90 9 130 8 S180 6 197 9 M20 17 C70 13 120 15 170 13' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); --pen-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 17 C8 19 11 23 13 26 C17 17 22 10 29 4' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --pen-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4 C10.3 8 9.8 12 10 16 M4 10.2 C8 9.8 12 10.3 16 9.9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); /* the highlighter: a felt-tip stroke with ragged ends, drawn once and stretched behind each line */ --highlighter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C60 5 140 7 220 4 S350 6 396 7 L398 13 L393 20 L397 28 L394 35 C300 37 200 34 120 37 S30 35 6 36 L2 29 L6 22 L1 15 Z' fill='%23F7D945' fill-opacity='.82'/%3E%3C/svg%3E"); } /* ---- tears.css ---- */ /* Generated by .hallmark/tears.mjs from seeded value noise (3 octaves, jitter, fibre bites). Fringe twins stand 2.2px proud. Do not edit by hand. */ :root { --tear-sheet: polygon(0% calc(0% + 4.2px), 2.2% calc(0% + 4.3px), 4.4% calc(0% + 2.2px), 6.7% calc(0% + 3px), 8.9% calc(0% + 2.3px), 11.1% calc(0% + 2.6px), 13.3% calc(0% + 1.3px), 15.6% calc(0% + 11.5px), 17.8% calc(0% + 2.5px), 20% calc(0% + 2.7px), 22.2% calc(0% + 2.7px), 24.4% calc(0% + 2.4px), 26.7% calc(0% + 2.7px), 28.9% calc(0% + 3.1px), 31.1% calc(0% + 1.5px), 33.3% calc(0% + 1.5px), 35.6% calc(0% + 2px), 37.8% calc(0% + 1.2px), 40% calc(0% + 10.7px), 42.2% calc(0% + 2.3px), 44.4% calc(0% + 2.3px), 46.7% calc(0% + 3.6px), 48.9% calc(0% + 3.1px), 51.1% calc(0% + 2.1px), 53.3% calc(0% + 3.2px), 55.6% calc(0% + 3.7px), 57.8% calc(0% + 3.9px), 60% calc(0% + 3.9px), 62.2% calc(0% + 2.8px), 64.4% calc(0% + 3.1px), 66.7% calc(0% + 3.6px), 68.9% calc(0% + 2.7px), 71.1% calc(0% + 3.4px), 73.3% calc(0% + 2.8px), 75.6% calc(0% + 2.9px), 77.8% calc(0% + 1.8px), 80% calc(0% + 3.2px), 82.2% calc(0% + 2.1px), 84.4% calc(0% + 2.2px), 86.7% calc(0% + 1px), 88.9% calc(0% + 1.2px), 91.1% calc(0% + 3.1px), 93.3% calc(0% + 2.1px), 95.6% calc(0% + 2.5px), 97.8% calc(0% + 3px), 100% calc(0% + 1.4px), calc(100% - 3.8px) 0%, calc(100% - 2px) 4%, calc(100% - 11.1px) 8%, calc(100% - 2.9px) 12%, calc(100% - 8.2px) 16%, calc(100% - 3.1px) 20%, calc(100% - 2.3px) 24%, calc(100% - 2.5px) 28%, calc(100% - 3.1px) 32%, calc(100% - 2.5px) 36%, calc(100% - 2.3px) 40%, calc(100% - 2.9px) 44%, calc(100% - 1.8px) 48%, calc(100% - 3.1px) 52%, calc(100% - 9.3px) 56%, calc(100% - 2.1px) 60%, calc(100% - 2.5px) 64%, calc(100% - 3.1px) 68%, calc(100% - 2px) 72%, calc(100% - 2.7px) 76%, calc(100% - 1.7px) 80%, calc(100% - 3.3px) 84%, calc(100% - 2.4px) 88%, calc(100% - 3.2px) 92%, calc(100% - 10.4px) 96%, calc(100% - 3.5px) 100%, 100% calc(100% - 2.1px), 97.8% calc(100% - 3.8px), 95.6% calc(100% - 3.5px), 93.3% calc(100% - 2.9px), 91.1% calc(100% - 2.7px), 88.9% calc(100% - 4.4px), 86.7% calc(100% - 3.2px), 84.4% calc(100% - 2.9px), 82.2% calc(100% - 3.3px), 80% calc(100% - 3.3px), 77.8% calc(100% - 3px), 75.6% calc(100% - 3.2px), 73.3% calc(100% - 3.9px), 71.1% calc(100% - 1.8px), 68.9% calc(100% - 3.2px), 66.7% calc(100% - 2.4px), 64.4% calc(100% - 3.8px), 62.2% calc(100% - 3px), 60% calc(100% - 1.7px), 57.8% calc(100% - 3.4px), 55.6% calc(100% - 2.6px), 53.3% calc(100% - 4.6px), 51.1% calc(100% - 4.5px), 48.9% calc(100% - 4.1px), 46.7% calc(100% - 3.2px), 44.4% calc(100% - 10px), 42.2% calc(100% - 4.2px), 40% calc(100% - 3px), 37.8% calc(100% - 4.3px), 35.6% calc(100% - 4.6px), 33.3% calc(100% - 3.5px), 31.1% calc(100% - 9.4px), 28.9% calc(100% - 3.3px), 26.7% calc(100% - 4.3px), 24.4% calc(100% - 3.8px), 22.2% calc(100% - 4.7px), 20% calc(100% - 2.8px), 17.8% calc(100% - 4.2px), 15.6% calc(100% - 5.3px), 13.3% calc(100% - 4.9px), 11.1% calc(100% - 4.4px), 8.9% calc(100% - 5.7px), 6.7% calc(100% - 4.1px), 4.4% calc(100% - 5.9px), 2.2% calc(100% - 5.8px), 0% calc(100% - 5.2px), calc(0% + 4.7px) 100%, calc(0% + 4px) 96%, calc(0% + 5.1px) 92%, calc(0% + 4.3px) 88%, calc(0% + 3.4px) 84%, calc(0% + 3.3px) 80%, calc(0% + 4px) 76%, calc(0% + 3.2px) 72%, calc(0% + 3.4px) 68%, calc(0% + 7.8px) 64%, calc(0% + 2.6px) 60%, calc(0% + 3.3px) 56%, calc(0% + 2.8px) 52%, calc(0% + 2.5px) 48%, calc(0% + 8px) 44%, calc(0% + 2.2px) 40%, calc(0% + 0.8px) 36%, calc(0% + 2.4px) 32%, calc(0% + 1.3px) 28%, calc(0% + 1.8px) 24%, calc(0% + 1.8px) 20%, calc(0% + 10.9px) 16%, calc(0% + 2.7px) 12%, calc(0% + 3.9px) 8%, calc(0% + 5.2px) 4%, calc(0% + 4px) 0%); --tear-sheetf: polygon(0% calc(0% + 2px), 2.2% calc(0% + 2.1px), 4.4% calc(0% + 0px), 6.7% calc(0% + 0.8px), 8.9% calc(0% + 0.1px), 11.1% calc(0% + 0.4px), 13.3% 0%, 15.6% calc(0% + 9.3px), 17.8% calc(0% + 0.3px), 20% calc(0% + 0.5px), 22.2% calc(0% + 0.5px), 24.4% calc(0% + 0.2px), 26.7% calc(0% + 0.5px), 28.9% calc(0% + 0.9px), 31.1% 0%, 33.3% 0%, 35.6% 0%, 37.8% 0%, 40% calc(0% + 8.5px), 42.2% calc(0% + 0.1px), 44.4% calc(0% + 0.1px), 46.7% calc(0% + 1.4px), 48.9% calc(0% + 0.9px), 51.1% 0%, 53.3% calc(0% + 1px), 55.6% calc(0% + 1.5px), 57.8% calc(0% + 1.7px), 60% calc(0% + 1.7px), 62.2% calc(0% + 0.6px), 64.4% calc(0% + 0.9px), 66.7% calc(0% + 1.4px), 68.9% calc(0% + 0.5px), 71.1% calc(0% + 1.2px), 73.3% calc(0% + 0.6px), 75.6% calc(0% + 0.7px), 77.8% 0%, 80% calc(0% + 1px), 82.2% 0%, 84.4% calc(0% + 0px), 86.7% 0%, 88.9% 0%, 91.1% calc(0% + 0.9px), 93.3% 0%, 95.6% calc(0% + 0.3px), 97.8% calc(0% + 0.8px), 100% 0%, calc(100% - 1.6px) 0%, 100% 4%, calc(100% - 8.9px) 8%, calc(100% - 0.7px) 12%, calc(100% - 6px) 16%, calc(100% - 0.9px) 20%, calc(100% - 0.1px) 24%, calc(100% - 0.3px) 28%, calc(100% - 0.9px) 32%, calc(100% - 0.3px) 36%, calc(100% - 0.1px) 40%, calc(100% - 0.7px) 44%, 100% 48%, calc(100% - 0.9px) 52%, calc(100% - 7.1px) 56%, 100% 60%, calc(100% - 0.3px) 64%, calc(100% - 0.9px) 68%, 100% 72%, calc(100% - 0.5px) 76%, 100% 80%, calc(100% - 1.1px) 84%, calc(100% - 0.2px) 88%, calc(100% - 1px) 92%, calc(100% - 8.2px) 96%, calc(100% - 1.3px) 100%, 100% 100%, 97.8% calc(100% - 1.6px), 95.6% calc(100% - 1.3px), 93.3% calc(100% - 0.7px), 91.1% calc(100% - 0.5px), 88.9% calc(100% - 2.2px), 86.7% calc(100% - 1px), 84.4% calc(100% - 0.7px), 82.2% calc(100% - 1.1px), 80% calc(100% - 1.1px), 77.8% calc(100% - 0.8px), 75.6% calc(100% - 1px), 73.3% calc(100% - 1.7px), 71.1% 100%, 68.9% calc(100% - 1px), 66.7% calc(100% - 0.2px), 64.4% calc(100% - 1.6px), 62.2% calc(100% - 0.8px), 60% 100%, 57.8% calc(100% - 1.2px), 55.6% calc(100% - 0.4px), 53.3% calc(100% - 2.4px), 51.1% calc(100% - 2.3px), 48.9% calc(100% - 1.9px), 46.7% calc(100% - 1px), 44.4% calc(100% - 7.8px), 42.2% calc(100% - 2px), 40% calc(100% - 0.8px), 37.8% calc(100% - 2.1px), 35.6% calc(100% - 2.4px), 33.3% calc(100% - 1.3px), 31.1% calc(100% - 7.2px), 28.9% calc(100% - 1.1px), 26.7% calc(100% - 2.1px), 24.4% calc(100% - 1.6px), 22.2% calc(100% - 2.5px), 20% calc(100% - 0.6px), 17.8% calc(100% - 2px), 15.6% calc(100% - 3.1px), 13.3% calc(100% - 2.7px), 11.1% calc(100% - 2.2px), 8.9% calc(100% - 3.5px), 6.7% calc(100% - 1.9px), 4.4% calc(100% - 3.7px), 2.2% calc(100% - 3.6px), 0% calc(100% - 3px), calc(0% + 2.5px) 100%, calc(0% + 1.8px) 96%, calc(0% + 2.9px) 92%, calc(0% + 2.1px) 88%, calc(0% + 1.2px) 84%, calc(0% + 1.1px) 80%, calc(0% + 1.8px) 76%, calc(0% + 1px) 72%, calc(0% + 1.2px) 68%, calc(0% + 5.6px) 64%, calc(0% + 0.4px) 60%, calc(0% + 1.1px) 56%, calc(0% + 0.6px) 52%, calc(0% + 0.3px) 48%, calc(0% + 5.8px) 44%, calc(0% + 0px) 40%, 0% 36%, calc(0% + 0.2px) 32%, 0% 28%, 0% 24%, 0% 20%, calc(0% + 8.7px) 16%, calc(0% + 0.5px) 12%, calc(0% + 1.7px) 8%, calc(0% + 3px) 4%, calc(0% + 1.8px) 0%); --tear-sheet2: polygon(0% calc(0% + 3px), 2.2% calc(0% + 3.5px), 4.4% calc(0% + 2.2px), 6.7% calc(0% + 4px), 8.9% calc(0% + 3.7px), 11.1% calc(0% + 2.7px), 13.3% calc(0% + 11.2px), 15.6% calc(0% + 3.6px), 17.8% calc(0% + 4.6px), 20% calc(0% + 10.8px), 22.2% calc(0% + 4.9px), 24.4% calc(0% + 3.9px), 26.7% calc(0% + 4.2px), 28.9% calc(0% + 4.3px), 31.1% calc(0% + 4.8px), 33.3% calc(0% + 4.4px), 35.6% calc(0% + 3.9px), 37.8% calc(0% + 3.1px), 40% calc(0% + 4.8px), 42.2% calc(0% + 4.6px), 44.4% calc(0% + 4.4px), 46.7% calc(0% + 5.2px), 48.9% calc(0% + 5.6px), 51.1% calc(0% + 4.3px), 53.3% calc(0% + 4.3px), 55.6% calc(0% + 5px), 57.8% calc(0% + 4.4px), 60% calc(0% + 3.7px), 62.2% calc(0% + 4.8px), 64.4% calc(0% + 4.7px), 66.7% calc(0% + 4.9px), 68.9% calc(0% + 3.6px), 71.1% calc(0% + 3.4px), 73.3% calc(0% + 4.8px), 75.6% calc(0% + 4.3px), 77.8% calc(0% + 5.1px), 80% calc(0% + 3.7px), 82.2% calc(0% + 3.3px), 84.4% calc(0% + 4.4px), 86.7% calc(0% + 3.4px), 88.9% calc(0% + 4.1px), 91.1% calc(0% + 3.6px), 93.3% calc(0% + 2.9px), 95.6% calc(0% + 4.4px), 97.8% calc(0% + 5.2px), 100% calc(0% + 5.2px), calc(100% - 4.2px) 0%, calc(100% - 4.4px) 4%, calc(100% - 3.3px) 8%, calc(100% - 3.8px) 12%, calc(100% - 3.7px) 16%, calc(100% - 3.5px) 20%, calc(100% - 3.3px) 24%, calc(100% - 3.4px) 28%, calc(100% - 4.3px) 32%, calc(100% - 4px) 36%, calc(100% - 2.8px) 40%, calc(100% - 3.5px) 44%, calc(100% - 2.7px) 48%, calc(100% - 4.5px) 52%, calc(100% - 3.4px) 56%, calc(100% - 3.9px) 60%, calc(100% - 3.5px) 64%, calc(100% - 3.9px) 68%, calc(100% - 3.7px) 72%, calc(100% - 2.3px) 76%, calc(100% - 3.4px) 80%, calc(100% - 4.1px) 84%, calc(100% - 4.1px) 88%, calc(100% - 4px) 92%, calc(100% - 2.8px) 96%, calc(100% - 3.8px) 100%, 100% calc(100% - 3.2px), 97.8% calc(100% - 3.3px), 95.6% calc(100% - 2.8px), 93.3% calc(100% - 4.1px), 91.1% calc(100% - 3.3px), 88.9% calc(100% - 2.1px), 86.7% calc(100% - 2.3px), 84.4% calc(100% - 4.2px), 82.2% calc(100% - 3.3px), 80% calc(100% - 3.9px), 77.8% calc(100% - 2.4px), 75.6% calc(100% - 2.5px), 73.3% calc(100% - 3.2px), 71.1% calc(100% - 3.3px), 68.9% calc(100% - 3.1px), 66.7% calc(100% - 4.1px), 64.4% calc(100% - 3px), 62.2% calc(100% - 2.6px), 60% calc(100% - 3.2px), 57.8% calc(100% - 3.8px), 55.6% calc(100% - 13.2px), 53.3% calc(100% - 13.5px), 51.1% calc(100% - 2.6px), 48.9% calc(100% - 2.3px), 46.7% calc(100% - 0.8px), 44.4% calc(100% - 1.4px), 42.2% calc(100% - 1.1px), 40% calc(100% - 2.7px), 37.8% calc(100% - 2.7px), 35.6% calc(100% - 2.7px), 33.3% calc(100% - 4.1px), 31.1% calc(100% - 4.1px), 28.9% calc(100% - 3.9px), 26.7% calc(100% - 2.6px), 24.4% calc(100% - 3.1px), 22.2% calc(100% - 9px), 20% calc(100% - 2.9px), 17.8% calc(100% - 10.6px), 15.6% calc(100% - 2.4px), 13.3% calc(100% - 2.5px), 11.1% calc(100% - 2.1px), 8.9% calc(100% - 2.7px), 6.7% calc(100% - 2.3px), 4.4% calc(100% - 2.1px), 2.2% calc(100% - 1.8px), 0% calc(100% - 1.3px), calc(0% + 9px) 100%, calc(0% + 2.4px) 96%, calc(0% + 2.5px) 92%, calc(0% + 2.1px) 88%, calc(0% + 2.2px) 84%, calc(0% + 2.6px) 80%, calc(0% + 1.1px) 76%, calc(0% + 2.2px) 72%, calc(0% + 6.8px) 68%, calc(0% + 2.6px) 64%, calc(0% + 1px) 60%, calc(0% + 2.1px) 56%, calc(0% + 0.7px) 52%, calc(0% + 0.2px) 48%, calc(0% + 1.2px) 44%, calc(0% + 1.7px) 40%, calc(0% + 1.8px) 36%, calc(0% + 1.2px) 32%, calc(0% + 1.9px) 28%, calc(0% + 1.4px) 24%, calc(0% + 2.1px) 20%, calc(0% + 1.6px) 16%, calc(0% + 6px) 12%, calc(0% + 1.7px) 8%, calc(0% + 2.8px) 4%, calc(0% + 1.6px) 0%); --tear-sheet2f: polygon(0% calc(0% + 0.8px), 2.2% calc(0% + 1.3px), 4.4% calc(0% + 0px), 6.7% calc(0% + 1.8px), 8.9% calc(0% + 1.5px), 11.1% calc(0% + 0.5px), 13.3% calc(0% + 9px), 15.6% calc(0% + 1.4px), 17.8% calc(0% + 2.4px), 20% calc(0% + 8.6px), 22.2% calc(0% + 2.7px), 24.4% calc(0% + 1.7px), 26.7% calc(0% + 2px), 28.9% calc(0% + 2.1px), 31.1% calc(0% + 2.6px), 33.3% calc(0% + 2.2px), 35.6% calc(0% + 1.7px), 37.8% calc(0% + 0.9px), 40% calc(0% + 2.6px), 42.2% calc(0% + 2.4px), 44.4% calc(0% + 2.2px), 46.7% calc(0% + 3px), 48.9% calc(0% + 3.4px), 51.1% calc(0% + 2.1px), 53.3% calc(0% + 2.1px), 55.6% calc(0% + 2.8px), 57.8% calc(0% + 2.2px), 60% calc(0% + 1.5px), 62.2% calc(0% + 2.6px), 64.4% calc(0% + 2.5px), 66.7% calc(0% + 2.7px), 68.9% calc(0% + 1.4px), 71.1% calc(0% + 1.2px), 73.3% calc(0% + 2.6px), 75.6% calc(0% + 2.1px), 77.8% calc(0% + 2.9px), 80% calc(0% + 1.5px), 82.2% calc(0% + 1.1px), 84.4% calc(0% + 2.2px), 86.7% calc(0% + 1.2px), 88.9% calc(0% + 1.9px), 91.1% calc(0% + 1.4px), 93.3% calc(0% + 0.7px), 95.6% calc(0% + 2.2px), 97.8% calc(0% + 3px), 100% calc(0% + 3px), calc(100% - 2px) 0%, calc(100% - 2.2px) 4%, calc(100% - 1.1px) 8%, calc(100% - 1.6px) 12%, calc(100% - 1.5px) 16%, calc(100% - 1.3px) 20%, calc(100% - 1.1px) 24%, calc(100% - 1.2px) 28%, calc(100% - 2.1px) 32%, calc(100% - 1.8px) 36%, calc(100% - 0.6px) 40%, calc(100% - 1.3px) 44%, calc(100% - 0.5px) 48%, calc(100% - 2.3px) 52%, calc(100% - 1.2px) 56%, calc(100% - 1.7px) 60%, calc(100% - 1.3px) 64%, calc(100% - 1.7px) 68%, calc(100% - 1.5px) 72%, calc(100% - 0.1px) 76%, calc(100% - 1.2px) 80%, calc(100% - 1.9px) 84%, calc(100% - 1.9px) 88%, calc(100% - 1.8px) 92%, calc(100% - 0.6px) 96%, calc(100% - 1.6px) 100%, 100% calc(100% - 1px), 97.8% calc(100% - 1.1px), 95.6% calc(100% - 0.6px), 93.3% calc(100% - 1.9px), 91.1% calc(100% - 1.1px), 88.9% 100%, 86.7% calc(100% - 0.1px), 84.4% calc(100% - 2px), 82.2% calc(100% - 1.1px), 80% calc(100% - 1.7px), 77.8% calc(100% - 0.2px), 75.6% calc(100% - 0.3px), 73.3% calc(100% - 1px), 71.1% calc(100% - 1.1px), 68.9% calc(100% - 0.9px), 66.7% calc(100% - 1.9px), 64.4% calc(100% - 0.8px), 62.2% calc(100% - 0.4px), 60% calc(100% - 1px), 57.8% calc(100% - 1.6px), 55.6% calc(100% - 11px), 53.3% calc(100% - 11.3px), 51.1% calc(100% - 0.4px), 48.9% calc(100% - 0.1px), 46.7% 100%, 44.4% 100%, 42.2% 100%, 40% calc(100% - 0.5px), 37.8% calc(100% - 0.5px), 35.6% calc(100% - 0.5px), 33.3% calc(100% - 1.9px), 31.1% calc(100% - 1.9px), 28.9% calc(100% - 1.7px), 26.7% calc(100% - 0.4px), 24.4% calc(100% - 0.9px), 22.2% calc(100% - 6.8px), 20% calc(100% - 0.7px), 17.8% calc(100% - 8.4px), 15.6% calc(100% - 0.2px), 13.3% calc(100% - 0.3px), 11.1% 100%, 8.9% calc(100% - 0.5px), 6.7% calc(100% - 0.1px), 4.4% 100%, 2.2% 100%, 0% 100%, calc(0% + 6.8px) 100%, calc(0% + 0.2px) 96%, calc(0% + 0.3px) 92%, 0% 88%, 0% 84%, calc(0% + 0.4px) 80%, 0% 76%, 0% 72%, calc(0% + 4.6px) 68%, calc(0% + 0.4px) 64%, 0% 60%, 0% 56%, 0% 52%, 0% 48%, 0% 44%, 0% 40%, 0% 36%, 0% 32%, 0% 28%, 0% 24%, 0% 20%, 0% 16%, calc(0% + 3.8px) 12%, 0% 8%, calc(0% + 0.6px) 4%, 0% 0%); --tear-note: polygon(0% calc(0% + 2.6px), 3.4% calc(0% + 2.3px), 6.9% calc(0% + 1.3px), 10.3% calc(0% + 1.6px), 13.8% calc(0% + 1.4px), 17.2% calc(0% + 1.9px), 20.7% calc(0% + 1.9px), 24.1% calc(0% + 2.9px), 27.6% calc(0% + 1.7px), 31% calc(0% + 2.5px), 34.5% calc(0% + 1.6px), 37.9% calc(0% + 2.1px), 41.4% calc(0% + 1.3px), 44.8% calc(0% + 1.7px), 48.3% calc(0% + 1.8px), 51.7% calc(0% + 0.8px), 55.2% calc(0% + 1.1px), 58.6% calc(0% + 1.2px), 62.1% calc(0% + 1.5px), 65.5% calc(0% + 1.9px), 69% calc(0% + 1.2px), 72.4% calc(0% + 2.2px), 75.9% calc(0% + 2px), 79.3% calc(0% + 1.2px), 82.8% calc(0% + 1.6px), 86.2% calc(0% + 2.5px), 89.7% calc(0% + 1.4px), 93.1% calc(0% + 2.1px), 96.6% calc(0% + 2.2px), 100% calc(0% + 1.8px), calc(100% - 6.3px) 0%, calc(100% - 1.5px) 5.9%, calc(100% - 1.5px) 11.8%, calc(100% - 1.7px) 17.6%, calc(100% - 1.8px) 23.5%, calc(100% - 1.8px) 29.4%, calc(100% - 2.3px) 35.3%, calc(100% - 1.5px) 41.2%, calc(100% - 2.2px) 47.1%, calc(100% - 1.1px) 52.9%, calc(100% - 1.2px) 58.8%, calc(100% - 1.3px) 64.7%, calc(100% - 0.9px) 70.6%, calc(100% - 0.8px) 76.5%, calc(100% - 1.5px) 82.4%, calc(100% - 1.4px) 88.2%, calc(100% - 1.7px) 94.1%, calc(100% - 1.2px) 100%, 100% calc(100% - 1.6px), 96.6% calc(100% - 1px), 93.1% calc(100% - 2.2px), 89.7% calc(100% - 1.9px), 86.2% calc(100% - 1.8px), 82.8% calc(100% - 1.7px), 79.3% calc(100% - 7.6px), 75.9% calc(100% - 1.9px), 72.4% calc(100% - 1.3px), 69% calc(100% - 1.8px), 65.5% calc(100% - 1.3px), 62.1% calc(100% - 1.8px), 58.6% calc(100% - 2.1px), 55.2% calc(100% - 2.4px), 51.7% calc(100% - 1.7px), 48.3% calc(100% - 1.9px), 44.8% calc(100% - 1.8px), 41.4% calc(100% - 5.3px), 37.9% calc(100% - 1.9px), 34.5% calc(100% - 1.5px), 31% calc(100% - 1.1px), 27.6% calc(100% - 1.4px), 24.1% calc(100% - 1.7px), 20.7% calc(100% - 1.5px), 17.2% calc(100% - 2.1px), 13.8% calc(100% - 3.1px), 10.3% calc(100% - 2.4px), 6.9% calc(100% - 8.3px), 3.4% calc(100% - 2.6px), 0% calc(100% - 3.3px), calc(0% + 1.8px) 100%, calc(0% + 2.5px) 94.1%, calc(0% + 2.2px) 88.2%, calc(0% + 2.1px) 82.4%, calc(0% + 2px) 76.5%, calc(0% + 1.8px) 70.6%, calc(0% + 2.2px) 64.7%, calc(0% + 1.6px) 58.8%, calc(0% + 1.6px) 52.9%, calc(0% + 1.7px) 47.1%, calc(0% + 6.5px) 41.2%, calc(0% + 2.2px) 35.3%, calc(0% + 2.1px) 29.4%, calc(0% + 1.2px) 23.5%, calc(0% + 1.2px) 17.6%, calc(0% + 1.6px) 11.8%, calc(0% + 1.8px) 5.9%, calc(0% + 1.8px) 0%); --tear-notef: polygon(0% calc(0% + 0.4px), 3.4% calc(0% + 0.1px), 6.9% 0%, 10.3% 0%, 13.8% 0%, 17.2% 0%, 20.7% 0%, 24.1% calc(0% + 0.7px), 27.6% 0%, 31% calc(0% + 0.3px), 34.5% 0%, 37.9% 0%, 41.4% 0%, 44.8% 0%, 48.3% 0%, 51.7% 0%, 55.2% 0%, 58.6% 0%, 62.1% 0%, 65.5% 0%, 69% 0%, 72.4% 0%, 75.9% 0%, 79.3% 0%, 82.8% 0%, 86.2% calc(0% + 0.3px), 89.7% 0%, 93.1% 0%, 96.6% calc(0% + 0px), 100% 0%, calc(100% - 4.1px) 0%, 100% 5.9%, 100% 11.8%, 100% 17.6%, 100% 23.5%, 100% 29.4%, calc(100% - 0.1px) 35.3%, 100% 41.2%, 100% 47.1%, 100% 52.9%, 100% 58.8%, 100% 64.7%, 100% 70.6%, 100% 76.5%, 100% 82.4%, 100% 88.2%, 100% 94.1%, 100% 100%, 100% 100%, 96.6% 100%, 93.1% calc(100% - 0px), 89.7% 100%, 86.2% 100%, 82.8% 100%, 79.3% calc(100% - 5.4px), 75.9% 100%, 72.4% 100%, 69% 100%, 65.5% 100%, 62.1% 100%, 58.6% 100%, 55.2% calc(100% - 0.2px), 51.7% 100%, 48.3% 100%, 44.8% 100%, 41.4% calc(100% - 3.1px), 37.9% 100%, 34.5% 100%, 31% 100%, 27.6% 100%, 24.1% 100%, 20.7% 100%, 17.2% 100%, 13.8% calc(100% - 0.9px), 10.3% calc(100% - 0.2px), 6.9% calc(100% - 6.1px), 3.4% calc(100% - 0.4px), 0% calc(100% - 1.1px), 0% 100%, calc(0% + 0.3px) 94.1%, calc(0% + 0px) 88.2%, 0% 82.4%, 0% 76.5%, 0% 70.6%, calc(0% + 0px) 64.7%, 0% 58.8%, 0% 52.9%, 0% 47.1%, calc(0% + 4.3px) 41.2%, calc(0% + 0px) 35.3%, 0% 29.4%, 0% 23.5%, 0% 17.6%, 0% 11.8%, 0% 5.9%, 0% 0%); --tear-note2: polygon(0% calc(0% + 6.2px), 3.4% calc(0% + 1.6px), 6.9% calc(0% + 4.7px), 10.3% calc(0% + 2.1px), 13.8% calc(0% + 1.9px), 17.2% calc(0% + 2.3px), 20.7% calc(0% + 3px), 24.1% calc(0% + 2.5px), 27.6% calc(0% + 2.2px), 31% calc(0% + 2.6px), 34.5% calc(0% + 3px), 37.9% calc(0% + 3.7px), 41.4% calc(0% + 3.4px), 44.8% calc(0% + 3.2px), 48.3% calc(0% + 2.7px), 51.7% calc(0% + 2.8px), 55.2% calc(0% + 3.2px), 58.6% calc(0% + 2.2px), 62.1% calc(0% + 2.7px), 65.5% calc(0% + 2.2px), 69% calc(0% + 2.8px), 72.4% calc(0% + 3.1px), 75.9% calc(0% + 3.3px), 79.3% calc(0% + 3.3px), 82.8% calc(0% + 2.9px), 86.2% calc(0% + 3.4px), 89.7% calc(0% + 3.3px), 93.1% calc(0% + 3.6px), 96.6% calc(0% + 2.9px), 100% calc(0% + 3.6px), calc(100% - 1.9px) 0%, calc(100% - 1.4px) 5.9%, calc(100% - 1.3px) 11.8%, calc(100% - 7.1px) 17.6%, calc(100% - 2.3px) 23.5%, calc(100% - 1.9px) 29.4%, calc(100% - 2px) 35.3%, calc(100% - 2.5px) 41.2%, calc(100% - 2.5px) 47.1%, calc(100% - 2.1px) 52.9%, calc(100% - 2.1px) 58.8%, calc(100% - 6.3px) 64.7%, calc(100% - 1.6px) 70.6%, calc(100% - 1.7px) 76.5%, calc(100% - 1.5px) 82.4%, calc(100% - 2px) 88.2%, calc(100% - 2px) 94.1%, calc(100% - 2.2px) 100%, 100% calc(100% - 2.4px), 96.6% calc(100% - 2.6px), 93.1% calc(100% - 1.6px), 89.7% calc(100% - 2.2px), 86.2% calc(100% - 2.7px), 82.8% calc(100% - 1.5px), 79.3% calc(100% - 1.6px), 75.9% calc(100% - 0.9px), 72.4% calc(100% - 1px), 69% calc(100% - 1.2px), 65.5% calc(100% - 1.2px), 62.1% calc(100% - 7px), 58.6% calc(100% - 1px), 55.2% calc(100% - 2.1px), 51.7% calc(100% - 6.1px), 48.3% calc(100% - 1.9px), 44.8% calc(100% - 1.2px), 41.4% calc(100% - 1px), 37.9% calc(100% - 1.3px), 34.5% calc(100% - 0.8px), 31% calc(100% - 1.3px), 27.6% calc(100% - 1.8px), 24.1% calc(100% - 0.9px), 20.7% calc(100% - 1.8px), 17.2% calc(100% - 1px), 13.8% calc(100% - 1.5px), 10.3% calc(100% - 2.5px), 6.9% calc(100% - 2.6px), 3.4% calc(100% - 1.7px), 0% calc(100% - 1.8px), calc(0% + 1.6px) 100%, calc(0% + 1px) 94.1%, calc(0% + 1.2px) 88.2%, calc(0% + 0.4px) 82.4%, calc(0% + 1.4px) 76.5%, calc(0% + 1.5px) 70.6%, calc(0% + 1.6px) 64.7%, calc(0% + 1.4px) 58.8%, calc(0% + 1.3px) 52.9%, calc(0% + 2.2px) 47.1%, calc(0% + 1.7px) 41.2%, calc(0% + 5.6px) 35.3%, calc(0% + 2.2px) 29.4%, calc(0% + 3px) 23.5%, calc(0% + 2.6px) 17.6%, calc(0% + 2.6px) 11.8%, calc(0% + 2.1px) 5.9%, calc(0% + 1.7px) 0%); --tear-note2f: polygon(0% calc(0% + 4px), 3.4% 0%, 6.9% calc(0% + 2.5px), 10.3% 0%, 13.8% 0%, 17.2% calc(0% + 0.1px), 20.7% calc(0% + 0.8px), 24.1% calc(0% + 0.3px), 27.6% 0%, 31% calc(0% + 0.4px), 34.5% calc(0% + 0.8px), 37.9% calc(0% + 1.5px), 41.4% calc(0% + 1.2px), 44.8% calc(0% + 1px), 48.3% calc(0% + 0.5px), 51.7% calc(0% + 0.6px), 55.2% calc(0% + 1px), 58.6% 0%, 62.1% calc(0% + 0.5px), 65.5% calc(0% + 0px), 69% calc(0% + 0.6px), 72.4% calc(0% + 0.9px), 75.9% calc(0% + 1.1px), 79.3% calc(0% + 1.1px), 82.8% calc(0% + 0.7px), 86.2% calc(0% + 1.2px), 89.7% calc(0% + 1.1px), 93.1% calc(0% + 1.4px), 96.6% calc(0% + 0.7px), 100% calc(0% + 1.4px), 100% 0%, 100% 5.9%, 100% 11.8%, calc(100% - 4.9px) 17.6%, calc(100% - 0.1px) 23.5%, 100% 29.4%, 100% 35.3%, calc(100% - 0.3px) 41.2%, calc(100% - 0.3px) 47.1%, 100% 52.9%, 100% 58.8%, calc(100% - 4.1px) 64.7%, 100% 70.6%, 100% 76.5%, 100% 82.4%, 100% 88.2%, 100% 94.1%, calc(100% - 0px) 100%, 100% calc(100% - 0.2px), 96.6% calc(100% - 0.4px), 93.1% 100%, 89.7% 100%, 86.2% calc(100% - 0.5px), 82.8% 100%, 79.3% 100%, 75.9% 100%, 72.4% 100%, 69% 100%, 65.5% 100%, 62.1% calc(100% - 4.8px), 58.6% 100%, 55.2% 100%, 51.7% calc(100% - 3.9px), 48.3% 100%, 44.8% 100%, 41.4% 100%, 37.9% 100%, 34.5% 100%, 31% 100%, 27.6% 100%, 24.1% 100%, 20.7% 100%, 17.2% 100%, 13.8% 100%, 10.3% calc(100% - 0.3px), 6.9% calc(100% - 0.4px), 3.4% 100%, 0% 100%, 0% 100%, 0% 94.1%, 0% 88.2%, 0% 82.4%, 0% 76.5%, 0% 70.6%, 0% 64.7%, 0% 58.8%, 0% 52.9%, calc(0% + 0px) 47.1%, 0% 41.2%, calc(0% + 3.4px) 35.3%, 0% 29.4%, calc(0% + 0.8px) 23.5%, calc(0% + 0.4px) 17.6%, calc(0% + 0.4px) 11.8%, 0% 5.9%, 0% 0%); --tear-card: polygon(0% calc(0% + 1.7px), 2.6% calc(0% + 1.7px), 5.1% calc(0% + 1px), 7.7% calc(0% + 1.7px), 10.3% calc(0% + 2.1px), 12.8% calc(0% + 2px), 15.4% calc(0% + 1.8px), 17.9% calc(0% + 1.3px), 20.5% calc(0% + 1.2px), 23.1% calc(0% + 0.8px), 25.6% calc(0% + 0.7px), 28.2% calc(0% + 1.4px), 30.8% calc(0% + 1.1px), 33.3% calc(0% + 1.3px), 35.9% calc(0% + 0.4px), 38.5% calc(0% + 0.7px), 41% calc(0% + 0.9px), 43.6% calc(0% + 0.6px), 46.2% calc(0% + 0.8px), 48.7% calc(0% + 1px), 51.3% calc(0% + 1.7px), 53.8% calc(0% + 1.7px), 56.4% calc(0% + 1.7px), 59% calc(0% + 1px), 61.5% calc(0% + 1.2px), 64.1% calc(0% + 1.8px), 66.7% calc(0% + 2px), 69.2% calc(0% + 1.3px), 71.8% calc(0% + 1.3px), 74.4% calc(0% + 2.4px), 76.9% calc(0% + 1.7px), 79.5% calc(0% + 1.9px), 82.1% calc(0% + 1.4px), 84.6% calc(0% + 1.4px), 87.2% calc(0% + 2.1px), 89.7% calc(0% + 2.2px), 92.3% calc(0% + 2px), 94.9% calc(0% + 2.2px), 97.4% calc(0% + 2.3px), 100% calc(0% + 1.9px), calc(100% - 1.3px) 0%, calc(100% - 1.9px) 4.3%, calc(100% - 1.4px) 8.7%, calc(100% - 1.8px) 13%, calc(100% - 1.4px) 17.4%, calc(100% - 1.2px) 21.7%, calc(100% - 1.7px) 26.1%, calc(100% - 1.9px) 30.4%, calc(100% - 1.2px) 34.8%, calc(100% - 1.6px) 39.1%, calc(100% - 1px) 43.5%, calc(100% - 1.4px) 47.8%, calc(100% - 1.4px) 52.2%, calc(100% - 1.6px) 56.5%, calc(100% - 1.6px) 60.9%, calc(100% - 1.2px) 65.2%, calc(100% - 1.6px) 69.6%, calc(100% - 1.7px) 73.9%, calc(100% - 1.2px) 78.3%, calc(100% - 0.7px) 82.6%, calc(100% - 1px) 87%, calc(100% - 1.3px) 91.3%, calc(100% - 0.9px) 95.7%, calc(100% - 1.6px) 100%, 100% calc(100% - 1.7px), 97.4% calc(100% - 2px), 94.9% calc(100% - 1.8px), 92.3% calc(100% - 1.8px), 89.7% calc(100% - 1.4px), 87.2% calc(100% - 1.7px), 84.6% calc(100% - 1.9px), 82.1% calc(100% - 1.3px), 79.5% calc(100% - 1px), 76.9% calc(100% - 1.7px), 74.4% calc(100% - 1.8px), 71.8% calc(100% - 1.8px), 69.2% calc(100% - 1.6px), 66.7% calc(100% - 1.6px), 64.1% calc(100% - 1.2px), 61.5% calc(100% - 1px), 59% calc(100% - 1.5px), 56.4% calc(100% - 1.8px), 53.8% calc(100% - 1.4px), 51.3% calc(100% - 1.8px), 48.7% calc(100% - 1.3px), 46.2% calc(100% - 2.4px), 43.6% calc(100% - 2.1px), 41% calc(100% - 2.3px), 38.5% calc(100% - 2.4px), 35.9% calc(100% - 2.3px), 33.3% calc(100% - 2.7px), 30.8% calc(100% - 2.2px), 28.2% calc(100% - 2.4px), 25.6% calc(100% - 2.5px), 23.1% calc(100% - 2.1px), 20.5% calc(100% - 1.6px), 17.9% calc(100% - 2.1px), 15.4% calc(100% - 2.2px), 12.8% calc(100% - 1.5px), 10.3% calc(100% - 1.8px), 7.7% calc(100% - 1.7px), 5.1% calc(100% - 1.9px), 2.6% calc(100% - 1.6px), 0% calc(100% - 1px), calc(0% + 1.3px) 100%, calc(0% + 1.1px) 95.7%, calc(0% + 0.9px) 91.3%, calc(0% + 1.3px) 87%, calc(0% + 1px) 82.6%, calc(0% + 1.5px) 78.3%, calc(0% + 2.1px) 73.9%, calc(0% + 2.2px) 69.6%, calc(0% + 2.2px) 65.2%, calc(0% + 1.8px) 60.9%, calc(0% + 1.4px) 56.5%, calc(0% + 1.6px) 52.2%, calc(0% + 0.8px) 47.8%, calc(0% + 1px) 43.5%, calc(0% + 0.9px) 39.1%, calc(0% + 1.3px) 34.8%, calc(0% + 4px) 30.4%, calc(0% + 1.5px) 26.1%, calc(0% + 1.6px) 21.7%, calc(0% + 1.5px) 17.4%, calc(0% + 1.6px) 13%, calc(0% + 1.5px) 8.7%, calc(0% + 1.6px) 4.3%, calc(0% + 2px) 0%); --tear-cardf: polygon(0% 0%, 2.6% 0%, 5.1% 0%, 7.7% 0%, 10.3% 0%, 12.8% 0%, 15.4% 0%, 17.9% 0%, 20.5% 0%, 23.1% 0%, 25.6% 0%, 28.2% 0%, 30.8% 0%, 33.3% 0%, 35.9% 0%, 38.5% 0%, 41% 0%, 43.6% 0%, 46.2% 0%, 48.7% 0%, 51.3% 0%, 53.8% 0%, 56.4% 0%, 59% 0%, 61.5% 0%, 64.1% 0%, 66.7% 0%, 69.2% 0%, 71.8% 0%, 74.4% calc(0% + 0.2px), 76.9% 0%, 79.5% 0%, 82.1% 0%, 84.6% 0%, 87.2% 0%, 89.7% calc(0% + 0px), 92.3% 0%, 94.9% calc(0% + 0px), 97.4% calc(0% + 0.1px), 100% 0%, 100% 0%, 100% 4.3%, 100% 8.7%, 100% 13%, 100% 17.4%, 100% 21.7%, 100% 26.1%, 100% 30.4%, 100% 34.8%, 100% 39.1%, 100% 43.5%, 100% 47.8%, 100% 52.2%, 100% 56.5%, 100% 60.9%, 100% 65.2%, 100% 69.6%, 100% 73.9%, 100% 78.3%, 100% 82.6%, 100% 87%, 100% 91.3%, 100% 95.7%, 100% 100%, 100% 100%, 97.4% 100%, 94.9% 100%, 92.3% 100%, 89.7% 100%, 87.2% 100%, 84.6% 100%, 82.1% 100%, 79.5% 100%, 76.9% 100%, 74.4% 100%, 71.8% 100%, 69.2% 100%, 66.7% 100%, 64.1% 100%, 61.5% 100%, 59% 100%, 56.4% 100%, 53.8% 100%, 51.3% 100%, 48.7% 100%, 46.2% calc(100% - 0.2px), 43.6% 100%, 41% calc(100% - 0.1px), 38.5% calc(100% - 0.2px), 35.9% calc(100% - 0.1px), 33.3% calc(100% - 0.5px), 30.8% 100%, 28.2% calc(100% - 0.2px), 25.6% calc(100% - 0.3px), 23.1% 100%, 20.5% 100%, 17.9% 100%, 15.4% 100%, 12.8% 100%, 10.3% 100%, 7.7% 100%, 5.1% 100%, 2.6% 100%, 0% 100%, 0% 100%, 0% 95.7%, 0% 91.3%, 0% 87%, 0% 82.6%, 0% 78.3%, 0% 73.9%, 0% 69.6%, 0% 65.2%, 0% 60.9%, 0% 56.5%, 0% 52.2%, 0% 47.8%, 0% 43.5%, 0% 39.1%, 0% 34.8%, calc(0% + 1.8px) 30.4%, 0% 26.1%, 0% 21.7%, 0% 17.4%, 0% 13%, 0% 8.7%, 0% 4.3%, 0% 0%); --tear-bar: polygon(0% 0%, 1.4% 0%, 2.8% 0%, 4.2% 0%, 5.6% 0%, 7% 0%, 8.5% 0%, 9.9% 0%, 11.3% 0%, 12.7% 0%, 14.1% 0%, 15.5% 0%, 16.9% 0%, 18.3% 0%, 19.7% 0%, 21.1% 0%, 22.5% 0%, 23.9% 0%, 25.4% 0%, 26.8% 0%, 28.2% 0%, 29.6% 0%, 31% 0%, 32.4% 0%, 33.8% 0%, 35.2% 0%, 36.6% 0%, 38% 0%, 39.4% 0%, 40.8% 0%, 42.3% 0%, 43.7% 0%, 45.1% 0%, 46.5% 0%, 47.9% 0%, 49.3% 0%, 50.7% 0%, 52.1% 0%, 53.5% 0%, 54.9% 0%, 56.3% 0%, 57.7% 0%, 59.2% 0%, 60.6% 0%, 62% 0%, 63.4% 0%, 64.8% 0%, 66.2% 0%, 67.6% 0%, 69% 0%, 70.4% 0%, 71.8% 0%, 73.2% 0%, 74.6% 0%, 76.1% 0%, 77.5% 0%, 78.9% 0%, 80.3% 0%, 81.7% 0%, 83.1% 0%, 84.5% 0%, 85.9% 0%, 87.3% 0%, 88.7% 0%, 90.1% 0%, 91.5% 0%, 93% 0%, 94.4% 0%, 95.8% 0%, 97.2% 0%, 98.6% 0%, 100% 0%, 100% 0%, 100% 4%, 100% 8%, 100% 12%, 100% 16%, 100% 20%, 100% 24%, 100% 28%, 100% 32%, 100% 36%, 100% 40%, 100% 44%, 100% 48%, 100% 52%, 100% 56%, 100% 60%, 100% 64%, 100% 68%, 100% 72%, 100% 76%, 100% 80%, 100% 84%, 100% 88%, 100% 92%, 100% 96%, 100% 100%, 100% calc(100% - 8px), 98.6% calc(100% - 20.3px), 97.2% calc(100% - 10.2px), 95.8% calc(100% - 16.1px), 94.4% calc(100% - 6.7px), 93% calc(100% - 10.6px), 91.5% calc(100% - 8.2px), 90.1% calc(100% - 9.9px), 88.7% calc(100% - 8.8px), 87.3% calc(100% - 16.4px), 85.9% calc(100% - 7.5px), 84.5% calc(100% - 7.5px), 83.1% calc(100% - 6.7px), 81.7% calc(100% - 5.8px), 80.3% calc(100% - 5.8px), 78.9% calc(100% - 6.2px), 77.5% calc(100% - 8.5px), 76.1% calc(100% - 6.2px), 74.6% calc(100% - 6.2px), 73.2% calc(100% - 15.6px), 71.8% calc(100% - 6.9px), 70.4% calc(100% - 5.4px), 69% calc(100% - 6.5px), 67.6% calc(100% - 4.9px), 66.2% calc(100% - 5.1px), 64.8% calc(100% - 10.4px), 63.4% calc(100% - 7.2px), 62% calc(100% - 8.7px), 60.6% calc(100% - 6.8px), 59.2% calc(100% - 7px), 57.7% calc(100% - 19.4px), 56.3% calc(100% - 9.7px), 54.9% calc(100% - 7.6px), 53.5% calc(100% - 9.9px), 52.1% calc(100% - 8.1px), 50.7% calc(100% - 18.8px), 49.3% calc(100% - 10.6px), 47.9% calc(100% - 8.2px), 46.5% calc(100% - 10.4px), 45.1% calc(100% - 10.3px), 43.7% calc(100% - 10px), 42.3% calc(100% - 8.5px), 40.8% calc(100% - 8.1px), 39.4% calc(100% - 7.6px), 38% calc(100% - 8.9px), 36.6% calc(100% - 6.9px), 35.2% calc(100% - 6.8px), 33.8% calc(100% - 7.2px), 32.4% calc(100% - 8.7px), 31% calc(100% - 6.6px), 29.6% calc(100% - 8.7px), 28.2% calc(100% - 5.3px), 26.8% calc(100% - 7.3px), 25.4% calc(100% - 5.5px), 23.9% calc(100% - 7.8px), 22.5% calc(100% - 8.1px), 21.1% calc(100% - 6.2px), 19.7% calc(100% - 7.3px), 18.3% calc(100% - 5.5px), 16.9% calc(100% - 7.3px), 15.5% calc(100% - 6.1px), 14.1% calc(100% - 7.2px), 12.7% calc(100% - 4.2px), 11.3% calc(100% - 5.5px), 9.9% calc(100% - 5.4px), 8.5% calc(100% - 6.9px), 7% calc(100% - 4.1px), 5.6% calc(100% - 7.3px), 4.2% calc(100% - 6px), 2.8% calc(100% - 4.5px), 1.4% calc(100% - 6.9px), 0% calc(100% - 5.5px), 0% 100%, 0% 96%, 0% 92%, 0% 88%, 0% 84%, 0% 80%, 0% 76%, 0% 72%, 0% 68%, 0% 64%, 0% 60%, 0% 56%, 0% 52%, 0% 48%, 0% 44%, 0% 40%, 0% 36%, 0% 32%, 0% 28%, 0% 24%, 0% 20%, 0% 16%, 0% 12%, 0% 8%, 0% 4%, 0% 0%); --tear-barf: polygon(0% 0%, 1.4% 0%, 2.8% 0%, 4.2% 0%, 5.6% 0%, 7% 0%, 8.5% 0%, 9.9% 0%, 11.3% 0%, 12.7% 0%, 14.1% 0%, 15.5% 0%, 16.9% 0%, 18.3% 0%, 19.7% 0%, 21.1% 0%, 22.5% 0%, 23.9% 0%, 25.4% 0%, 26.8% 0%, 28.2% 0%, 29.6% 0%, 31% 0%, 32.4% 0%, 33.8% 0%, 35.2% 0%, 36.6% 0%, 38% 0%, 39.4% 0%, 40.8% 0%, 42.3% 0%, 43.7% 0%, 45.1% 0%, 46.5% 0%, 47.9% 0%, 49.3% 0%, 50.7% 0%, 52.1% 0%, 53.5% 0%, 54.9% 0%, 56.3% 0%, 57.7% 0%, 59.2% 0%, 60.6% 0%, 62% 0%, 63.4% 0%, 64.8% 0%, 66.2% 0%, 67.6% 0%, 69% 0%, 70.4% 0%, 71.8% 0%, 73.2% 0%, 74.6% 0%, 76.1% 0%, 77.5% 0%, 78.9% 0%, 80.3% 0%, 81.7% 0%, 83.1% 0%, 84.5% 0%, 85.9% 0%, 87.3% 0%, 88.7% 0%, 90.1% 0%, 91.5% 0%, 93% 0%, 94.4% 0%, 95.8% 0%, 97.2% 0%, 98.6% 0%, 100% 0%, 100% 0%, 100% 4%, 100% 8%, 100% 12%, 100% 16%, 100% 20%, 100% 24%, 100% 28%, 100% 32%, 100% 36%, 100% 40%, 100% 44%, 100% 48%, 100% 52%, 100% 56%, 100% 60%, 100% 64%, 100% 68%, 100% 72%, 100% 76%, 100% 80%, 100% 84%, 100% 88%, 100% 92%, 100% 96%, 100% 100%, 100% calc(100% - 5.8px), 98.6% calc(100% - 18.1px), 97.2% calc(100% - 8px), 95.8% calc(100% - 13.9px), 94.4% calc(100% - 4.5px), 93% calc(100% - 8.4px), 91.5% calc(100% - 6px), 90.1% calc(100% - 7.7px), 88.7% calc(100% - 6.6px), 87.3% calc(100% - 14.2px), 85.9% calc(100% - 5.3px), 84.5% calc(100% - 5.3px), 83.1% calc(100% - 4.5px), 81.7% calc(100% - 3.6px), 80.3% calc(100% - 3.6px), 78.9% calc(100% - 4px), 77.5% calc(100% - 6.3px), 76.1% calc(100% - 4px), 74.6% calc(100% - 4px), 73.2% calc(100% - 13.4px), 71.8% calc(100% - 4.7px), 70.4% calc(100% - 3.2px), 69% calc(100% - 4.3px), 67.6% calc(100% - 2.7px), 66.2% calc(100% - 2.9px), 64.8% calc(100% - 8.2px), 63.4% calc(100% - 5px), 62% calc(100% - 6.5px), 60.6% calc(100% - 4.6px), 59.2% calc(100% - 4.8px), 57.7% calc(100% - 17.2px), 56.3% calc(100% - 7.5px), 54.9% calc(100% - 5.4px), 53.5% calc(100% - 7.7px), 52.1% calc(100% - 5.9px), 50.7% calc(100% - 16.6px), 49.3% calc(100% - 8.4px), 47.9% calc(100% - 6px), 46.5% calc(100% - 8.2px), 45.1% calc(100% - 8.1px), 43.7% calc(100% - 7.8px), 42.3% calc(100% - 6.3px), 40.8% calc(100% - 5.9px), 39.4% calc(100% - 5.4px), 38% calc(100% - 6.7px), 36.6% calc(100% - 4.7px), 35.2% calc(100% - 4.6px), 33.8% calc(100% - 5px), 32.4% calc(100% - 6.5px), 31% calc(100% - 4.4px), 29.6% calc(100% - 6.5px), 28.2% calc(100% - 3.1px), 26.8% calc(100% - 5.1px), 25.4% calc(100% - 3.3px), 23.9% calc(100% - 5.6px), 22.5% calc(100% - 5.9px), 21.1% calc(100% - 4px), 19.7% calc(100% - 5.1px), 18.3% calc(100% - 3.3px), 16.9% calc(100% - 5.1px), 15.5% calc(100% - 3.9px), 14.1% calc(100% - 5px), 12.7% calc(100% - 2px), 11.3% calc(100% - 3.3px), 9.9% calc(100% - 3.2px), 8.5% calc(100% - 4.7px), 7% calc(100% - 1.9px), 5.6% calc(100% - 5.1px), 4.2% calc(100% - 3.8px), 2.8% calc(100% - 2.3px), 1.4% calc(100% - 4.7px), 0% calc(100% - 3.3px), 0% 100%, 0% 96%, 0% 92%, 0% 88%, 0% 84%, 0% 80%, 0% 76%, 0% 72%, 0% 68%, 0% 64%, 0% 60%, 0% 56%, 0% 52%, 0% 48%, 0% 44%, 0% 40%, 0% 36%, 0% 32%, 0% 28%, 0% 24%, 0% 20%, 0% 16%, 0% 12%, 0% 8%, 0% 4%, 0% 0%); --tear-foot: polygon(0% calc(0% + 7.9px), 1.4% calc(0% + 5.5px), 2.8% calc(0% + 4.5px), 4.2% calc(0% + 5.8px), 5.6% calc(0% + 4.3px), 7% calc(0% + 4.8px), 8.5% calc(0% + 3.6px), 9.9% calc(0% + 4px), 11.3% calc(0% + 3.4px), 12.7% calc(0% + 5.5px), 14.1% calc(0% + 4.2px), 15.5% calc(0% + 3.8px), 16.9% calc(0% + 5px), 18.3% calc(0% + 2.2px), 19.7% calc(0% + 4.4px), 21.1% calc(0% + 12.8px), 22.5% calc(0% + 2.4px), 23.9% calc(0% + 3.4px), 25.4% calc(0% + 0.5px), 26.8% calc(0% + 10.6px), 28.2% calc(0% + 2px), 29.6% calc(0% + 2.8px), 31% calc(0% + 3.3px), 32.4% calc(0% + 2.5px), 33.8% calc(0% + 3.4px), 35.2% calc(0% + 3.6px), 36.6% calc(0% + 1.4px), 38% calc(0% + 2.9px), 39.4% calc(0% + 2.3px), 40.8% calc(0% + 4.8px), 42.3% calc(0% + 4.9px), 43.7% calc(0% + 3.6px), 45.1% calc(0% + 5.6px), 46.5% calc(0% + 5.9px), 47.9% calc(0% + 4.3px), 49.3% calc(0% + 6.1px), 50.7% calc(0% + 6.9px), 52.1% calc(0% + 6.9px), 53.5% calc(0% + 7.6px), 54.9% calc(0% + 6.3px), 56.3% calc(0% + 6.6px), 57.7% calc(0% + 8.3px), 59.2% calc(0% + 8.4px), 60.6% calc(0% + 8.9px), 62% calc(0% + 8.7px), 63.4% calc(0% + 8.2px), 64.8% calc(0% + 14.6px), 66.2% calc(0% + 16.7px), 67.6% calc(0% + 9.1px), 69% calc(0% + 10px), 70.4% calc(0% + 8.1px), 71.8% calc(0% + 6.7px), 73.2% calc(0% + 6.2px), 74.6% calc(0% + 8.7px), 76.1% calc(0% + 8.7px), 77.5% calc(0% + 6.2px), 78.9% calc(0% + 7.3px), 80.3% calc(0% + 4.7px), 81.7% calc(0% + 4.9px), 83.1% calc(0% + 5.2px), 84.5% calc(0% + 6.7px), 85.9% calc(0% + 9.2px), 87.3% calc(0% + 8.5px), 88.7% calc(0% + 7.6px), 90.1% calc(0% + 7.1px), 91.5% calc(0% + 8.9px), 93% calc(0% + 6.3px), 94.4% calc(0% + 6.9px), 95.8% calc(0% + 4.8px), 97.2% calc(0% + 5px), 98.6% calc(0% + 4.7px), 100% calc(0% + 5.5px), 100% 0%, 100% 4%, 100% 8%, 100% 12%, 100% 16%, 100% 20%, 100% 24%, 100% 28%, 100% 32%, 100% 36%, 100% 40%, 100% 44%, 100% 48%, 100% 52%, 100% 56%, 100% 60%, 100% 64%, 100% 68%, 100% 72%, 100% 76%, 100% 80%, 100% 84%, 100% 88%, 100% 92%, 100% 96%, 100% 100%, 100% 100%, 98.6% 100%, 97.2% 100%, 95.8% 100%, 94.4% 100%, 93% 100%, 91.5% 100%, 90.1% 100%, 88.7% 100%, 87.3% 100%, 85.9% 100%, 84.5% 100%, 83.1% 100%, 81.7% 100%, 80.3% 100%, 78.9% 100%, 77.5% 100%, 76.1% 100%, 74.6% 100%, 73.2% 100%, 71.8% 100%, 70.4% 100%, 69% 100%, 67.6% 100%, 66.2% 100%, 64.8% 100%, 63.4% 100%, 62% 100%, 60.6% 100%, 59.2% 100%, 57.7% 100%, 56.3% 100%, 54.9% 100%, 53.5% 100%, 52.1% 100%, 50.7% 100%, 49.3% 100%, 47.9% 100%, 46.5% 100%, 45.1% 100%, 43.7% 100%, 42.3% 100%, 40.8% 100%, 39.4% 100%, 38% 100%, 36.6% 100%, 35.2% 100%, 33.8% 100%, 32.4% 100%, 31% 100%, 29.6% 100%, 28.2% 100%, 26.8% 100%, 25.4% 100%, 23.9% 100%, 22.5% 100%, 21.1% 100%, 19.7% 100%, 18.3% 100%, 16.9% 100%, 15.5% 100%, 14.1% 100%, 12.7% 100%, 11.3% 100%, 9.9% 100%, 8.5% 100%, 7% 100%, 5.6% 100%, 4.2% 100%, 2.8% 100%, 1.4% 100%, 0% 100%, 0% 100%, 0% 96%, 0% 92%, 0% 88%, 0% 84%, 0% 80%, 0% 76%, 0% 72%, 0% 68%, 0% 64%, 0% 60%, 0% 56%, 0% 52%, 0% 48%, 0% 44%, 0% 40%, 0% 36%, 0% 32%, 0% 28%, 0% 24%, 0% 20%, 0% 16%, 0% 12%, 0% 8%, 0% 4%, 0% 0%); --tear-footf: polygon(0% calc(0% + 5.7px), 1.4% calc(0% + 3.3px), 2.8% calc(0% + 2.3px), 4.2% calc(0% + 3.6px), 5.6% calc(0% + 2.1px), 7% calc(0% + 2.6px), 8.5% calc(0% + 1.4px), 9.9% calc(0% + 1.8px), 11.3% calc(0% + 1.2px), 12.7% calc(0% + 3.3px), 14.1% calc(0% + 2px), 15.5% calc(0% + 1.6px), 16.9% calc(0% + 2.8px), 18.3% calc(0% + 0px), 19.7% calc(0% + 2.2px), 21.1% calc(0% + 10.6px), 22.5% calc(0% + 0.2px), 23.9% calc(0% + 1.2px), 25.4% 0%, 26.8% calc(0% + 8.4px), 28.2% 0%, 29.6% calc(0% + 0.6px), 31% calc(0% + 1.1px), 32.4% calc(0% + 0.3px), 33.8% calc(0% + 1.2px), 35.2% calc(0% + 1.4px), 36.6% 0%, 38% calc(0% + 0.7px), 39.4% calc(0% + 0.1px), 40.8% calc(0% + 2.6px), 42.3% calc(0% + 2.7px), 43.7% calc(0% + 1.4px), 45.1% calc(0% + 3.4px), 46.5% calc(0% + 3.7px), 47.9% calc(0% + 2.1px), 49.3% calc(0% + 3.9px), 50.7% calc(0% + 4.7px), 52.1% calc(0% + 4.7px), 53.5% calc(0% + 5.4px), 54.9% calc(0% + 4.1px), 56.3% calc(0% + 4.4px), 57.7% calc(0% + 6.1px), 59.2% calc(0% + 6.2px), 60.6% calc(0% + 6.7px), 62% calc(0% + 6.5px), 63.4% calc(0% + 6px), 64.8% calc(0% + 12.4px), 66.2% calc(0% + 14.5px), 67.6% calc(0% + 6.9px), 69% calc(0% + 7.8px), 70.4% calc(0% + 5.9px), 71.8% calc(0% + 4.5px), 73.2% calc(0% + 4px), 74.6% calc(0% + 6.5px), 76.1% calc(0% + 6.5px), 77.5% calc(0% + 4px), 78.9% calc(0% + 5.1px), 80.3% calc(0% + 2.5px), 81.7% calc(0% + 2.7px), 83.1% calc(0% + 3px), 84.5% calc(0% + 4.5px), 85.9% calc(0% + 7px), 87.3% calc(0% + 6.3px), 88.7% calc(0% + 5.4px), 90.1% calc(0% + 4.9px), 91.5% calc(0% + 6.7px), 93% calc(0% + 4.1px), 94.4% calc(0% + 4.7px), 95.8% calc(0% + 2.6px), 97.2% calc(0% + 2.8px), 98.6% calc(0% + 2.5px), 100% calc(0% + 3.3px), 100% 0%, 100% 4%, 100% 8%, 100% 12%, 100% 16%, 100% 20%, 100% 24%, 100% 28%, 100% 32%, 100% 36%, 100% 40%, 100% 44%, 100% 48%, 100% 52%, 100% 56%, 100% 60%, 100% 64%, 100% 68%, 100% 72%, 100% 76%, 100% 80%, 100% 84%, 100% 88%, 100% 92%, 100% 96%, 100% 100%, 100% 100%, 98.6% 100%, 97.2% 100%, 95.8% 100%, 94.4% 100%, 93% 100%, 91.5% 100%, 90.1% 100%, 88.7% 100%, 87.3% 100%, 85.9% 100%, 84.5% 100%, 83.1% 100%, 81.7% 100%, 80.3% 100%, 78.9% 100%, 77.5% 100%, 76.1% 100%, 74.6% 100%, 73.2% 100%, 71.8% 100%, 70.4% 100%, 69% 100%, 67.6% 100%, 66.2% 100%, 64.8% 100%, 63.4% 100%, 62% 100%, 60.6% 100%, 59.2% 100%, 57.7% 100%, 56.3% 100%, 54.9% 100%, 53.5% 100%, 52.1% 100%, 50.7% 100%, 49.3% 100%, 47.9% 100%, 46.5% 100%, 45.1% 100%, 43.7% 100%, 42.3% 100%, 40.8% 100%, 39.4% 100%, 38% 100%, 36.6% 100%, 35.2% 100%, 33.8% 100%, 32.4% 100%, 31% 100%, 29.6% 100%, 28.2% 100%, 26.8% 100%, 25.4% 100%, 23.9% 100%, 22.5% 100%, 21.1% 100%, 19.7% 100%, 18.3% 100%, 16.9% 100%, 15.5% 100%, 14.1% 100%, 12.7% 100%, 11.3% 100%, 9.9% 100%, 8.5% 100%, 7% 100%, 5.6% 100%, 4.2% 100%, 2.8% 100%, 1.4% 100%, 0% 100%, 0% 100%, 0% 96%, 0% 92%, 0% 88%, 0% 84%, 0% 80%, 0% 76%, 0% 72%, 0% 68%, 0% 64%, 0% 60%, 0% 56%, 0% 52%, 0% 48%, 0% 44%, 0% 40%, 0% 36%, 0% 32%, 0% 28%, 0% 24%, 0% 20%, 0% 16%, 0% 12%, 0% 8%, 0% 4%, 0% 0%); --tear-tape: polygon(0% 0%, 11.1% 0%, 22.2% 0%, 33.3% 0%, 44.4% 0%, 55.6% 0%, 66.7% 0%, 77.8% 0%, 88.9% 0%, 100% 0%, calc(100% - 0.9px) 0%, calc(100% - 1.1px) 14.3%, calc(100% - 0.5px) 28.6%, calc(100% - 0.8px) 42.9%, calc(100% - 0.3px) 57.1%, calc(100% - 0.7px) 71.4%, calc(100% - 3.9px) 85.7%, calc(100% - 0.7px) 100%, 100% 100%, 88.9% 100%, 77.8% 100%, 66.7% 100%, 55.6% 100%, 44.4% 100%, 33.3% 100%, 22.2% 100%, 11.1% 100%, 0% 100%, calc(0% + 0.4px) 100%, calc(0% + 1px) 85.7%, calc(0% + 0.5px) 71.4%, calc(0% + 0.2px) 57.1%, calc(0% + 1.6px) 42.9%, calc(0% + 1.1px) 28.6%, calc(0% + 0.8px) 14.3%, calc(0% + 0.9px) 0%); --tear-tapef: polygon(0% 0%, 11.1% 0%, 22.2% 0%, 33.3% 0%, 44.4% 0%, 55.6% 0%, 66.7% 0%, 77.8% 0%, 88.9% 0%, 100% 0%, calc(100% - 0.9px) 0%, calc(100% - 1.1px) 14.3%, calc(100% - 0.5px) 28.6%, calc(100% - 0.8px) 42.9%, calc(100% - 0.3px) 57.1%, calc(100% - 0.7px) 71.4%, calc(100% - 3.9px) 85.7%, calc(100% - 0.7px) 100%, 100% 100%, 88.9% 100%, 77.8% 100%, 66.7% 100%, 55.6% 100%, 44.4% 100%, 33.3% 100%, 22.2% 100%, 11.1% 100%, 0% 100%, calc(0% + 0.4px) 100%, calc(0% + 1px) 85.7%, calc(0% + 0.5px) 71.4%, calc(0% + 0.2px) 57.1%, calc(0% + 1.6px) 42.9%, calc(0% + 1.1px) 28.6%, calc(0% + 0.8px) 14.3%, calc(0% + 0.9px) 0%); --burst: polygon(50% 0.5%, 55.7% 10.2%, 64.3% 1.1%, 67.1% 12.6%, 76.9% 8.1%, 77.2% 18.7%, 88.1% 17%, 83.3% 28.6%, 94.6% 29.6%, 89.4% 38.4%, 98.8% 43%, 91.2% 50%, 99.7% 57.1%, 89.3% 61.5%, 96% 71%, 85% 72.5%, 87.3% 82.3%, 75.8% 79.8%, 76.8% 91.7%, 66.3% 85.7%, 64.2% 98.3%, 55.5% 88.5%, 50% 99.9%, 44.3% 89.4%, 36% 97.8%, 33.2% 86.7%, 22.6% 92.7%, 22.7% 81.5%, 11.5% 83.4%, 14.7% 72.7%, 5.2% 70.5%, 11.7% 61.3%, 0.9% 57.1%, 11.2% 50%, 1.1% 43%, 12% 38.9%, 5.1% 29.5%, 15.9% 28.1%, 11.9% 16.9%, 25.1% 21.3%, 23% 8%, 33% 12.7%, 36% 2.4%, 44.3% 10.5%); } /* ---- base.css ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { scroll-padding-top: var(--space-3xl); scrollbar-color: var(--color-muted) var(--color-paper); } body { margin: 0; background: var(--grain), var(--fibre), var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; } ::selection { background: color-mix(in oklab, var(--color-brand) 24%, transparent); color: var(--color-ink); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } a { color: var(--color-brand-deep); text-decoration-thickness: 1px; text-underline-offset: 0.16em; } a:hover { color: var(--color-ink); } h1, h2, h3 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-section); max-width: 22ch; } h3 { font-size: var(--text-title); line-height: 1.2; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } svg { display: block; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 60rem) { :root { --gutter: 28px; --section-gap: 104px; } } @media (max-width: 40rem) { :root { --gutter: 18px; --section-gap: 80px; --gap-columns: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @font-face { font-family: "Chillax"; src: url("/assets/fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Chillax"; src: url("/assets/fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ---------- paper ---------- */ .torn { position: relative; isolation: isolate; } .sheet { --t: var(--tear-sheet); --tf: var(--tear-sheetf); --sheet-c: var(--color-card); position: absolute; inset: 0; z-index: -1; display: block; pointer-events: none; filter: var(--shadow-paper); } .sheet > i { position: absolute; inset: 0; } .sheet > i:first-child { background: var(--fibre), color-mix(in oklab, var(--sheet-c) 18%, var(--color-fringe)); clip-path: var(--tf); } .sheet > i:last-child { background: var(--grain), var(--fibre), var(--sheet-c); clip-path: var(--t); } .sheet--2 { --t: var(--tear-sheet2); --tf: var(--tear-sheet2f); } .sheet--note { --t: var(--tear-note); --tf: var(--tear-notef); filter: var(--shadow-paper-low); } .sheet--note2 { --t: var(--tear-note2); --tf: var(--tear-note2f); filter: var(--shadow-paper-low); } .sheet--white { --sheet-c: var(--color-card); } .sheet--lav { --sheet-c: var(--color-brand-tint); } .sheet--mint { --sheet-c: var(--color-mint); } .sheet--yellow { --sheet-c: var(--color-yellow); } .sheet--ink { --sheet-c: var(--color-brand-ink); } mark { color: inherit; background: none; } mark.hl { padding: 0.04em 0.18em; margin-inline: -0.08em; background: var(--highlighter) center / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .skip { position: absolute; left: var(--space-md); top: -100px; z-index: 10; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-small); background: var(--color-card); color: var(--color-ink); } .skip:focus-visible { top: var(--space-md); } /* ---------- controls ---------- */ .btn { --edge: 5px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 56px; padding: 0 var(--space-lg); border-radius: var(--radius-stock); font: 600 1.0625rem/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: translate var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-snap); } .btn--primary { background: var(--grain), var(--fibre), var(--color-brand); color: var(--color-on-brand); box-shadow: 0 var(--edge) 0 0 var(--color-brand-deep), 2px calc(var(--edge) + 5px) 12px -3px color-mix(in oklab, var(--color-brand-ink) 40%, transparent); } .btn--primary:hover { --edge: 7px; translate: 0 -2px; color: var(--color-on-brand); } .btn--primary:active { --edge: 1px; translate: 0 4px; } .btn:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; } details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } .more > summary, .faq__list summary { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font-weight: 600; } .more > summary::after, .faq__list summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--pen-plus) center / 16px 16px no-repeat, var(--grain), var(--color-card); box-shadow: inset 0 0 0 1.5px var(--color-ink), 0 3px 0 0 var(--color-edge); transition: rotate var(--dur-short) var(--ease-spring); } details[open] > summary::after { rotate: 45deg; } .more > summary:focus-visible, .faq__list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-small); } .more__body { padding-top: var(--space-sm); color: var(--color-ink-2); } .more__body p + p { margin-top: var(--space-xs); } .more__body p { max-width: 62ch; } .stamp { display: inline-block; padding: var(--space-2xs) var(--space-sm) var(--space-2xs); border: 1.5px solid var(--color-brand); border-radius: var(--radius-small); background: var(--color-brand-wash); color: var(--color-brand-deep); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; rotate: -2deg; text-decoration: none; white-space: nowrap; } .stamp--ink { border-color: var(--color-ink); background: transparent; color: var(--color-ink); rotate: 1.5deg; } a.stamp:hover { background: var(--color-brand-tint); color: var(--color-ink); } a.stamp:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } .cells { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); } .cells > li { position: relative; padding-left: 28px; } .cells > li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 12px; height: 7px; border-left: 2.5px solid var(--color-brand); border-bottom: 2.5px solid var(--color-brand); rotate: -45deg; } .lead { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 40ch; } .text-link { display: inline-block; margin-top: var(--space-lg); font-weight: 600; } /* ---------- nav: a torn brand-ink strip ---------- */ .slab { position: relative; isolation: isolate; color: var(--color-on-ink); } .sheet--bar { --t: var(--tear-bar); --tf: var(--tear-barf); --sheet-c: var(--color-brand-ink); filter: var(--shadow-paper-low); } .sheet--bar > i:first-child { background: var(--fibre-light), var(--color-brand-ink-2); } .sheet--bar > i:last-child { background: var(--fibre-light), var(--color-brand-ink); } .slab__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: 92px; padding-bottom: var(--space-xs); } .brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-on-ink); font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; } .brand img { width: 40px; height: 40px; border-radius: 10px; } .brand:hover { color: var(--color-yellow); } .brand:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 4px; border-radius: var(--radius-small); } .slab__note { color: var(--color-on-ink-2); font-size: var(--text-sm); } .slab__links { display: flex; gap: var(--space-lg); margin-left: auto; } .slab__links a { color: var(--color-on-ink); font-size: var(--text-sm); text-decoration: none; } .slab__links a:hover { color: var(--color-yellow); text-decoration: underline; } .slab__links a:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 4px; } /* ---------- hero ---------- */ .hero { padding: 84px 0 var(--section-gap); } .hero__grid { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: 52px; align-items: center; } .hero__head { display: grid; gap: var(--space-lg); justify-items: start; } .hero__head h1 { font-size: clamp(2.75rem, 4.1vw + 1rem, 4.875rem); } .hero__head h1 > span { display: block; } .hero__head .btn { margin-top: var(--space-sm); } .hero__small { max-width: 38ch; font-size: var(--text-sm); color: var(--color-muted); } .stage { margin: 0; padding: 48px 44px 32px; } .stage > .sheet { rotate: -0.8deg; } .call { position: relative; border-radius: var(--radius-card); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); } .call__bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1.5px solid var(--color-rule); font-size: var(--text-sm); } .call__name { color: var(--color-ink); font-weight: 600; font-size: var(--text-md); } .chip { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-brand-wash); color: var(--color-brand-deep); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-brand-tint); } .call__audio { display: inline-flex; align-items: center; gap: var(--space-xs); margin-left: auto; color: var(--color-muted); } .wave { width: 92px; height: 20px; fill: var(--color-brand); } .call__panes { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } .pane { padding: var(--space-lg) var(--space-lg) var(--space-lg); } .pane--transcript { display: flex; flex-direction: column; border-right: 1.5px solid var(--color-rule); } .pane__label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; } .pane--answer .pane__label { color: var(--color-brand-deep); } .lines { list-style: none; display: grid; gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); } .who { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; } .line p { color: var(--color-muted); } .line--you .who { color: var(--color-brand-deep); } .line--now p { color: var(--color-ink); font-size: clamp(1.125rem, 0.55vw + 0.85rem, 1.4rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .line--now .who { color: var(--color-ink); } .getanswer { display: inline-flex; align-items: center; gap: var(--space-xs); align-self: flex-start; margin-top: auto; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-radius: 12px; background: var(--color-brand); color: var(--color-on-brand); font-size: var(--text-sm); font-weight: 600; box-shadow: 0 3px 0 0 var(--color-brand-deep); } kbd { padding: var(--space-2xs) var(--space-xs); border-radius: 6px; background: color-mix(in oklab, var(--color-on-brand) 18%, transparent); font: inherit; font-size: var(--text-xs); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-on-brand) 40%, transparent); } .opening { margin: var(--space-xs) 0 var(--space-lg); color: var(--color-ink); font-size: clamp(1.3rem, 0.9vw + 0.85rem, 1.75rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; } .points { list-style: none; display: grid; gap: var(--space-xs); margin-top: var(--space-xs); } .points li { position: relative; padding-left: 32px; color: var(--color-ink); font-size: clamp(1rem, 0.3vw + 0.9rem, 1.15rem); line-height: 1.35; } .points li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 20px; height: 20px; background: var(--color-brand); -webkit-mask: var(--pen-tick) center / contain no-repeat; mask: var(--pen-tick) center / contain no-repeat; } .hand-arrow { position: absolute; left: calc(46% - 34px); top: 132px; width: 76px; overflow: visible; pointer-events: none; } .hand-arrow .dots { fill: none; stroke: var(--color-brand); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0 8.5; } .hand-arrow .tip { fill: none; stroke: var(--color-brand); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .proof-stamp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); color: var(--color-ink); font-weight: 600; } .proof-stamp strong { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-small); background: var(--color-brand-ink); color: var(--color-on-ink); font-weight: 600; rotate: -1.5deg; } .stage figcaption { max-width: min(64ch, calc(100% - 128px)); margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.5; } .sticker { position: absolute; bottom: -34px; right: -30px; width: 150px; aspect-ratio: 1; rotate: 11deg; filter: var(--shadow-sticker); } .sticker__inner { display: grid; place-content: center; width: 100%; height: 100%; clip-path: var(--burst); background: var(--grain), var(--color-yellow); color: var(--color-ink); text-align: center; font-size: var(--text-sm); font-weight: 600; line-height: 1.1; } .sticker__inner strong { font-size: 2rem; letter-spacing: -0.03em; line-height: 1; } /* ---------- statement ---------- */ .statement { padding-bottom: var(--section-gap); } .statement__text { max-width: 30em; color: var(--color-ink); font-size: var(--text-statement); line-height: 1.38; letter-spacing: -0.012em; } .definition { max-width: 46ch; margin-top: var(--space-xl); font-size: var(--text-lead); line-height: 1.5; } .statement .definition { max-width: 34em; margin-top: 0; color: var(--color-ink-2); font-size: clamp(1.25rem, 0.8vw + 0.95rem, 1.75rem); line-height: 1.42; letter-spacing: -0.008em; } .definition strong { color: var(--color-ink); font-weight: 600; } /* ---------- context ---------- */ .how__head, .modes__head, .plans__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; } .how__head p, .modes__head p, .plans__head p { max-width: 46ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; } .step__n { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--grain), var(--color-brand); color: var(--color-on-brand); font-weight: 600; box-shadow: 0 3px 0 0 var(--color-brand-deep); } /* ---------- coach: marked-up paper ---------- */ .coach { padding-bottom: var(--section-gap); } .markup { margin: 0; padding: 56px 56px var(--space-xl) 92px; rotate: -0.6deg; } .sheet--lined > i:last-child { background: var(--grain), linear-gradient(90deg, transparent 62px, color-mix(in oklab, var(--color-brand) 34%, transparent) 62px 64px, transparent 64px), repeating-linear-gradient(180deg, transparent 0 39px, color-mix(in oklab, var(--color-brand) 13%, transparent) 39px 40.5px), var(--fibre), var(--color-card); } .tape { position: absolute; top: -16px; width: 120px; height: 34px; background: var(--grain), color-mix(in oklab, var(--color-yellow) 62%, transparent); clip-path: var(--tear-tape); z-index: 2; } .tape--l { left: 70px; rotate: -7deg; } .tape--r { right: 64px; rotate: 5deg; } .markup__top { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; } .markup__label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; } .markup__attempt { margin-top: 32px; } .markup__answer { margin-top: var(--space-xs); color: var(--color-ink); font-size: clamp(1.45rem, 1.1vw + 0.95rem, 2.05rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; } .ring { position: relative; white-space: nowrap; } .ring::after { content: ""; position: absolute; inset: -0.4em -0.42em -0.34em -0.36em; background: var(--color-brand); -webkit-mask: var(--pen-ring) center / 100% 100% no-repeat; mask: var(--pen-ring) center / 100% 100% no-repeat; rotate: -2deg; pointer-events: none; } .underline { position: relative; } .underline::after { content: ""; position: absolute; left: -0.1em; right: -0.2em; bottom: -0.2em; height: 0.42em; background: var(--color-brand); -webkit-mask: var(--pen-under) center / 100% 100% no-repeat; mask: var(--pen-under) center / 100% 100% no-repeat; } .markup__fix { width: min(100%, 360px); margin: var(--space-lg) 0 0 auto; padding: 20px var(--space-lg) var(--space-lg); rotate: 2.2deg; color: var(--color-ink); font-weight: 600; line-height: 1.35; } .markup__fix .markup__label { color: var(--color-mint-deep); margin-bottom: var(--space-2xs); } .pen { fill: none; stroke: var(--color-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .markup__attempt--retry { margin-top: var(--space-md); } .markup__stamp { position: absolute; right: 52px; bottom: 74px; padding: var(--space-2xs) var(--space-md) var(--space-xs); border: 3px double var(--color-brand); border-radius: var(--radius-small); color: var(--color-brand); font-size: var(--text-xl); font-weight: 600; rotate: -9deg; } .markup figcaption { margin-top: 32px; color: var(--color-muted); font-size: var(--text-xs); } /* ---------- modes: four posters ---------- */ .modes { padding-bottom: var(--section-gap); } .posters { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: 56px; } .mode { display: grid; align-content: start; gap: var(--space-lg); } .poster { display: flex; flex-direction: column; gap: var(--space-md); aspect-ratio: 4 / 5; margin: var(--space-xs); padding: var(--space-lg) var(--space-md) var(--space-md); border-radius: 10px; box-shadow: 0 0 0 8px var(--color-card), var(--shadow-poster); overflow: hidden; } .mode:nth-child(odd) .poster { rotate: -0.8deg; } .mode:nth-child(even) .poster { rotate: 0.9deg; } .poster__head { display: block; max-width: 11ch; color: inherit; font-size: clamp(1.35rem, 1.1vw + 0.8rem, 1.95rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; } .poster__art { width: 100%; margin-top: auto; overflow: visible; font-family: var(--font-display); } .poster--code { background: var(--grain), var(--color-brand-ink); color: var(--color-on-ink); } .poster--code .ed { fill: var(--color-brand-ink-2); } .poster--code .ed-tab { fill: var(--color-brand); } .poster--code .ed-file { fill: var(--color-on-brand); font-size: 14px; font-weight: 600; } .poster--code .code text { fill: var(--color-on-ink); font-family: var(--font-code); font-size: 12.4px; white-space: pre; } .poster--code .code .ln { fill: var(--color-on-ink-2); opacity: 0.55; } .poster--code .kw { fill: var(--color-yellow); } .poster--code .cursor { fill: var(--color-mint); } .sticky { fill: var(--color-yellow); } .sticky-t { fill: var(--color-ink); font-size: 15px; font-weight: 600; } .poster--story { background: var(--grain), var(--color-mint); color: var(--color-ink); } .poster--story .card { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 1.6; } .poster--story .card--lift { fill: var(--color-brand); stroke: var(--color-brand-deep); } .poster--story .card-t { fill: var(--color-ink); font-size: 14px; font-weight: 600; } .poster--story .card-t--on, .poster--story .card-q { fill: var(--color-on-brand); } .poster--story .card-q { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .scrib { fill: none; stroke: var(--color-muted); stroke-width: 2.2; stroke-linecap: round; opacity: 0.55; } .scrib--on { stroke: var(--color-on-brand); opacity: 0.55; } .poster--design { background: var(--grain), var(--color-brand-tint); color: var(--color-brand-ink); } .poster--design .box { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 2; } .poster--design .box--hot { fill: var(--color-brand); stroke: var(--color-brand-deep); } .box-t { fill: var(--color-ink); font-size: 15px; font-weight: 600; text-anchor: middle; } .box-t--on { fill: var(--color-on-brand); } .arrow { fill: none; stroke: var(--color-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cyl { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 2; } .pen-dash { fill: none; stroke: var(--color-brand); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 7; } .poster--talk { background: var(--grain), var(--color-yellow); color: var(--color-ink); } .bubble { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; } .bubble--brand { fill: var(--color-brand); stroke: var(--color-brand-deep); } .bubble-t { fill: var(--color-ink); font-size: 25px; font-weight: 600; letter-spacing: -0.02em; } .speech { fill: none; stroke: var(--color-on-brand); stroke-width: 7; stroke-linecap: round; opacity: 0.9; } .jd { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 1.6; } .jd-t { fill: var(--color-ink); font-size: 12px; font-weight: 600; } .jd-hl { fill: var(--color-brand); opacity: 0.45; } .jd-line { fill: none; stroke: var(--color-muted); stroke-width: 2; stroke-linecap: round; opacity: 0.6; } .mode__ex { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: 12px; background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); } .mode__q { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; } .mode__fmt { justify-self: start; margin-top: var(--space-xs); padding: 0 var(--space-xs); border-radius: 999px; background: var(--color-brand); color: var(--color-on-brand); font-size: 0.6875rem; font-weight: 600; line-height: 1.6; } .more--wide { margin-top: 48px; } .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); margin-top: var(--space-2xl); } .action-row p { max-width: 40ch; color: var(--color-ink-2); font-size: var(--text-sm); } /* ---------- after + proof ---------- */ .after { padding-bottom: var(--section-gap); } .after__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; } .after__grid > h2 { grid-column: 1; grid-row: 1; } .after__sheet { grid-column: 2; grid-row: 1 / span 2; padding: 44px var(--space-xl) var(--space-xl); rotate: 1.4deg; } .ticks { list-style: none; display: grid; gap: var(--space-md); } .ticks li { position: relative; padding-left: var(--space-xl); color: var(--color-ink); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .ticks li::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--color-mint-deep); -webkit-mask: var(--pen-tick) center / contain no-repeat; mask: var(--pen-tick) center / contain no-repeat; } .after__note { margin-top: var(--space-lg); color: var(--color-ink); font-weight: 500; } .proof { grid-column: 1; grid-row: 2; justify-self: start; padding: var(--space-xl) var(--space-2xl) var(--space-xl) 48px; rotate: -0.8deg; } .proof__big { display: grid; gap: var(--space-xs); } .proof__num { color: var(--color-brand); font-family: var(--font-display); font-size: clamp(3.5rem, 5vw + 1rem, 6rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; } .proof__label { color: var(--color-ink-2); font-size: var(--text-title); font-weight: 500; } /* ---------- plans ---------- */ .plans { padding-bottom: var(--section-gap); } .sheet--back { rotate: 1.8deg; translate: 12px 14px; filter: var(--shadow-paper-low); } .tiers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-top: 56px; } .tier { position: relative; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); } .tier--on { box-shadow: var(--shadow-card), 0 0 0 2px var(--color-brand); } .tier__tag { position: absolute; top: -12px; left: var(--space-lg); padding: 0 var(--space-sm); border-radius: var(--radius-small); background: var(--color-brand); color: var(--color-on-brand); font-size: var(--text-xs); font-weight: 600; line-height: 24px; } .tier__name { color: var(--color-ink); font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; } .tier__price { color: var(--color-ink-2); font-size: var(--text-sm); } .tier__price .price { margin-right: var(--space-3xs); } .tier__mins { padding-block: var(--space-sm); border-block: 1.5px dashed var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); } .tier__mins span { display: block; margin-bottom: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; } .tier__mins b { margin-right: var(--space-3xs); color: var(--color-brand-deep); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; } .tier__list { list-style: none; display: grid; align-content: start; gap: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); } .tier__list li { position: relative; padding-left: var(--space-lg); } .tier__list li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 10px; height: 6px; border-left: 2px solid var(--color-brand); border-bottom: 2px solid var(--color-brand); rotate: -45deg; } .tier__list .tier__no { color: var(--color-muted); } .tier__list .tier__no::before { top: 0.25em; width: 11px; height: 11px; border: 0; background: linear-gradient(45deg, transparent 42%, var(--color-no) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--color-no) 42% 58%, transparent 58%); rotate: 0deg; } .tier__list b { color: var(--color-ink); font-weight: 600; } .tier__group { margin-top: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; } .tier__list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .tier .btn { margin-block: var(--space-2xs) var(--space-xs); } .tier__safe { margin-top: calc(var(--space-xs) * -1); color: var(--color-mint-deep); font-size: var(--text-xs); font-weight: 600; text-align: center; } .tier__safe a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .guarantee { display: flex; align-items: center; gap: var(--space-xl); margin-top: var(--space-xl); padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 2px var(--color-mint-deep); } .guarantee .sticker { position: relative; inset: auto; flex: none; width: 112px; rotate: -8deg; } .guarantee .sticker__inner { background: var(--grain), var(--color-mint); } .guarantee .sticker__inner strong { font-size: var(--text-xl); } .guarantee__copy { display: grid; gap: var(--space-xs); max-width: 64ch; } .guarantee__copy h3 { color: var(--color-ink); font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; } .guarantee__copy p { color: var(--color-ink-2); } .guarantee__copy a { color: var(--color-brand-deep); font-weight: 600; } .tiers__note { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); } .price { font-variant-numeric: tabular-nums; color: var(--color-ink); font-size: clamp(1.75rem, 1.2vw + 1.1rem, 2.441rem); font-weight: 600; letter-spacing: -0.03em; } .price--free { padding: 0 0.2em; background: var(--highlighter) center / 100% 100% no-repeat; } .fn { margin-left: var(--space-2xs); color: var(--color-brand-deep); font-weight: 600; text-decoration: none; } .fn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* ---------- worries ---------- */ .worries { padding-bottom: var(--section-gap); } .worry-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: 56px; align-items: start; } .worries .container { display: grid; gap: var(--space-xl); } .worries .worry-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; } .worries .worry { grid-column: span 2; } .worries .worry:nth-child(4) { grid-column: 2 / span 2; } .worry { display: grid; align-content: start; justify-items: start; gap: var(--space-md); padding: 32px 28px 32px; } .worry:nth-child(odd) { rotate: -0.6deg; } .worry:nth-child(even) { rotate: 0.5deg; translate: 0 10px; } .worry__q { color: var(--color-ink); font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.015em; } .worry > p:not([class]) { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; } .stamp--tilt { rotate: -3deg; } .stamp--tilt2 { rotate: 2deg; } .worry .more > summary { font-size: var(--text-sm); } .worry .more__body { font-size: var(--text-sm); } /* ---------- faq ---------- */ .faq { padding-bottom: var(--section-gap); } .faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; } .faq__list details { border-top: 1.5px solid var(--color-rule); } .faq__list details:last-child { border-bottom: 1.5px solid var(--color-rule); } .faq__list summary { justify-content: space-between; padding: 20px 0; font-size: var(--text-lg); } .faq__list .more__body { padding: 0 0 var(--space-lg); } /* ---------- how Live Copilot works: four drawn UI steps ---------- */ .how { padding-bottom: var(--section-gap); } .how__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-2xl); } .hstep { position: relative; isolation: isolate; display: grid; align-content: start; gap: var(--space-xl); } .hstep:not(:last-child)::after { content: ""; position: absolute; top: 118px; right: -56px; width: 48px; height: 12px; background: radial-gradient(circle, var(--color-brand) 1.8px, transparent 2.3px) left center / 9px 12px repeat-x; } .plate { --plate: var(--color-brand-tint); position: relative; isolation: isolate; padding: var(--space-sm); } .plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px; background: var(--grain), var(--plate); box-shadow: var(--shadow-paper-low); rotate: -2deg; } .ui { position: relative; display: grid; align-content: start; gap: var(--space-xs); height: 252px; overflow: hidden; padding: var(--space-md) var(--space-md) var(--space-md); border-radius: 12px; background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent); font-size: 0.8125rem; line-height: 1.3; color: var(--color-ink); } .hstep:nth-child(2) .plate { --plate: var(--color-mint); } .hstep:nth-child(2) .plate::before { rotate: 1.6deg; } .hstep:nth-child(3) .plate { --plate: var(--color-yellow); } .hstep:nth-child(3) .plate::before { rotate: -1.2deg; } .hstep:nth-child(4) .plate { --plate: var(--color-brand); } .hstep:nth-child(4) .plate::before { rotate: 2deg; } .hstep:nth-child(odd) .ui { rotate: 0.6deg; } .hstep:nth-child(even) .ui { rotate: -0.7deg; } .ui__label { color: var(--color-muted); font-size: 0.75rem; font-weight: 600; } .ui__label em { font-style: normal; font-weight: 500; } .ui__label--row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); white-space: nowrap; } .ui__label--brand { color: var(--color-brand-deep); } .ui__pills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-2xs); } .ui__pills span { padding: var(--space-2xs) var(--space-xs); border-radius: 7px; box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink-2); font-size: 0.75rem; font-weight: 600; } .ui__pills .on { background: var(--color-brand); color: var(--color-on-brand); box-shadow: none; } .ui__file { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); padding: var(--space-xs) var(--space-xs); border-radius: 8px; background: var(--color-brand-wash); color: var(--color-brand-deep); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-brand-tint); } .ui__file b { width: 13px; height: 16px; border-radius: 2px; background: var(--color-card); box-shadow: inset 0 0 0 1.5px var(--color-brand-deep); } .ui__seg { display: inline-flex; gap: var(--space-3xs); padding: var(--space-3xs); border-radius: 6px; background: var(--color-paper-2); } .ui__seg span { padding: 1px var(--space-xs); border-radius: 4px; color: var(--color-muted); font-size: 0.6875rem; } .ui__seg .on { background: var(--color-card); color: var(--color-ink); box-shadow: 0 1px 0 var(--color-rule); } .ui__text { display: grid; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--color-rule); } .ui__text i { display: block; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--color-muted) 32%, transparent); } .ui__text i:nth-child(2) { width: 82%; } .ui__text i:nth-child(3) { width: 58%; } .ui__text--brand { gap: var(--space-xs); box-shadow: none; padding: var(--space-3xs) 0 0; } .ui__text--brand i { background: color-mix(in oklab, var(--color-brand) 30%, transparent); } /* step 2: two windows side by side */ .ui--desk { padding: 0; background: none; box-shadow: none; } .win { position: absolute; border-radius: 10px; background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 10%, transparent); overflow: hidden; } .win__bar { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-xs); white-space: nowrap; background: var(--color-paper-2); color: var(--color-muted); font-size: 0.6875rem; font-weight: 600; } .win__bar i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--color-muted) 40%, transparent); } .win__bar span { margin-left: var(--space-xs); } .win--call { left: 0; top: 0; width: 66%; } .win__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); padding: var(--space-xs); } .tile { position: relative; display: grid; place-items: start start; height: 104px; padding: var(--space-xs) var(--space-xs); border-radius: 7px; background: var(--color-brand-ink); color: var(--color-on-ink); font-size: 0.6875rem; font-weight: 600; overflow: hidden; } .tile b { position: absolute; left: 50%; top: 30px; width: 34px; height: 34px; translate: -50% 0; border-radius: 50%; background: var(--color-brand-ink-2); box-shadow: 0 46px 0 18px var(--color-brand-ink-2); } .tile--you { background: color-mix(in oklab, var(--color-brand-ink) 82%, var(--color-card)); } .win--tab { right: -4px; bottom: 0; width: 70%; rotate: 2.5deg; } .win__tabname { padding: var(--space-3xs) var(--space-xs); border-radius: 6px 6px 0 0; background: var(--color-card); color: var(--color-ink); } .win__btn { margin: var(--space-sm) var(--space-sm) var(--space-xs); padding: var(--space-xs) var(--space-xs); border-radius: 8px; background: transparent; color: var(--color-ink); font-size: 0.75rem; font-weight: 600; text-align: center; box-shadow: inset 0 0 0 1.5px var(--color-rule); } .win__lines { display: grid; gap: var(--space-2xs); padding: 0 var(--space-sm) var(--space-sm); } .win__lines i { display: block; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--color-muted) 30%, transparent); } .win__lines i:last-child { width: 70%; } /* step 3: transcript, newest line at the bottom as in the live pane */ .ui--transcript { display: flex; flex-direction: column; } .ui--transcript > .ui__label { margin-bottom: auto; } .ui__audio { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 500; } .wave--sm { width: 34px; height: 14px; } .tl { display: grid; gap: 1px; padding-top: var(--space-xs); color: var(--color-muted); font-size: 0.875rem; } .tl .who { font-size: 0.6875rem; } .tl--now { color: var(--color-ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .tl--now .who { color: var(--color-ink); } /* step 4: the controls and the prompt */ .ui__ctrls { display: flex; gap: var(--space-xs); margin-bottom: var(--space-xs); } .ga { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-xs); border-radius: 8px; background: var(--color-brand); color: var(--color-on-brand); font-size: 0.75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 3px 0 0 var(--color-brand-deep); } .auto { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs); border-radius: 8px; background: color-mix(in oklab, var(--color-mint) 70%, var(--color-card)); color: var(--color-mint-deep); font-size: 0.75rem; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--color-mint-deep); } .auto b { width: 8px; height: 8px; border-radius: 50%; background: var(--color-mint-deep); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-mint-deep) 25%, transparent); } .auto kbd { padding: 0 var(--space-2xs); border-radius: 4px; background: none; font-family: var(--font-code); font-size: 0.625rem; box-shadow: inset 0 0 0 1px var(--color-mint-deep); } .ui__say { color: var(--color-ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .hstep__copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-sm); align-items: start; } .hstep__copy h3 { align-self: center; font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.02em; } .hstep__copy p { grid-column: 2; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; } .how__note { margin-top: 48px; color: var(--color-muted); font-size: var(--text-xs); } /* ---------- depth: Manual vs Auto Answer, and the prompt on a hard question ---------- */ .depth { padding-bottom: var(--section-gap); } .depth__grid { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: var(--space-2xl); align-items: center; } .depth__copy { display: grid; gap: var(--space-lg); } .depth__copy h2 { max-width: 12ch; } .desk { margin: 0; padding: 48px 48px 32px; rotate: 0.5deg; } .desk__modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); } .ctl { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); border-radius: var(--radius-stock); background: var(--grain), var(--color-card); box-shadow: inset 0 0 0 1.5px var(--color-ink), 0 5px 0 0 var(--color-edge); } .ctl--auto { background: var(--grain), color-mix(in oklab, var(--color-mint) 55%, var(--color-card)); } .ctl__tag { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; } .ctl__key { display: flex; } .ga--big { flex: 0 1 auto; padding: var(--space-sm) var(--space-lg); border-radius: 10px; font-size: var(--text-md); } .auto--big { padding: var(--space-sm) var(--space-md); font-size: var(--text-md); background: var(--color-card); } .auto--big kbd { font-size: 0.75rem; padding: 1px var(--space-xs); } .ctl__say { color: var(--color-ink-2); font-size: var(--text-sm); } .ctl__status { color: var(--color-mint-deep); font-size: var(--text-sm); line-height: 1.4; } .answer { margin-top: 32px; border-radius: var(--radius-card); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent); overflow: hidden; rotate: -0.6deg; } .answer__q { padding: var(--space-md) var(--space-lg); border-bottom: 1.5px solid var(--color-brand-tint); background: var(--color-brand-wash); } .answer__q p:last-child { margin-top: var(--space-2xs); color: var(--color-ink); font-size: var(--text-md); font-weight: 600; line-height: 1.35; } .answer__body { padding: var(--space-lg) var(--space-lg) var(--space-lg); } .answer__say { margin: var(--space-xs) 0 var(--space-md); color: var(--color-ink); font-size: clamp(1.25rem, 0.8vw + 0.85rem, 1.6rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } .answer .points { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); } .desk__arrow { position: absolute; left: -58px; top: 48%; width: 84px; overflow: visible; pointer-events: none; rotate: 8deg; } .desk__arrow .dots, .close__arrow .dots { fill: none; stroke: var(--color-brand); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 8.5; } .desk__arrow .tip, .close__arrow .tip { fill: none; stroke: var(--color-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .desk figcaption { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-xs); } /* ---------- coach: one compact band ---------- */ .coach__band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; } .coach__copy { display: grid; gap: var(--space-md); justify-items: start; } .coach__copy h2 { font-size: clamp(1.9rem, 1.6vw + 1.1rem, 2.6rem); max-width: 18ch; } .coach__copy h2 span { display: block; font-size: 0.62em; letter-spacing: -0.01em; } .coach__copy > p:not([class]) { max-width: 46ch; color: var(--color-ink-2); } .coach__copy .text-link { margin-top: 0; } .coach .markup { justify-self: end; width: min(100%, 640px); padding: var(--space-xl) var(--space-xl) var(--space-lg) 80px; } .coach .markup__answer { font-size: clamp(1.2rem, 0.7vw + 0.9rem, 1.55rem); } .coach .markup__attempt { margin-top: var(--space-lg); } .coach .markup__fix { width: min(100%, 320px); margin-top: var(--space-md); padding: var(--space-sm) var(--space-lg) var(--space-md); font-size: var(--text-sm); } .coach .markup__stamp { right: 40px; bottom: 58px; font-size: var(--text-lg); } .coach .markup figcaption { margin-top: var(--space-lg); } /* ---------- close: yellow sheet, the Space key on the right ---------- */ .close { padding-bottom: 120px; } .close__sheet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; padding: var(--space-2xl) 80px var(--space-2xl); rotate: -0.5deg; } .close__copy { display: grid; justify-items: start; gap: var(--space-lg); } .close__copy h2 { max-width: 16ch; } .close__copy p { color: var(--color-ink); } .close__art { position: relative; height: 280px; } .keycap { position: absolute; left: 0; top: 18px; display: grid; gap: var(--space-xs); justify-items: center; width: min(100%, 340px); rotate: -5deg; } .keycap__top { color: var(--color-brand-deep); font-weight: 600; font-size: var(--text-lg); } .keycap__face { display: grid; place-items: center; width: 100%; height: 96px; border-radius: 20px; background: var(--grain), var(--color-card); color: var(--color-ink); font-size: var(--text-xl); font-weight: 600; box-shadow: inset 0 0 0 2px var(--color-ink), inset 0 -10px 0 0 var(--color-paper-2), 0 8px 0 0 var(--color-edge), 4px 18px 26px -8px color-mix(in oklab, var(--color-brand-ink) 35%, transparent); } .close__arrow { position: absolute; left: 20%; top: 160px; width: 110px; overflow: visible; } .close__note { position: absolute; right: 0; bottom: 0; display: grid; gap: var(--space-3xs); width: 220px; padding: var(--space-sm) var(--space-md) var(--space-md); border-radius: 6px; background: var(--grain), var(--color-card); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.2; rotate: 4deg; box-shadow: var(--shadow-paper-low), 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); } .close__note span { color: var(--color-brand-deep); font-size: var(--text-xs); } .close__note i { display: block; height: 8px; margin-top: var(--space-xs); border-radius: 4px; background: color-mix(in oklab, var(--color-ink) 70%, transparent); } .close__note i + i { width: 64%; background: color-mix(in oklab, var(--color-ink) 30%, transparent); } /* ---------- mast ---------- */ .mast { position: relative; isolation: isolate; padding: 88px 0 var(--space-xl); color: var(--color-on-ink-2); } .sheet--foot { --t: var(--tear-foot); --tf: var(--tear-footf); filter: none; } .sheet--foot > i:first-child { background: var(--fibre-light), var(--color-brand-ink-2); } .sheet--foot > i:last-child { background: var(--fibre-light), var(--color-brand-ink); } .mast__inner { display: grid; gap: var(--space-xl); } .brand--big { font-size: var(--text-3xl); } .brand--big img { width: 56px; height: 56px; border-radius: 14px; } .mast__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); } .mast a { color: var(--color-on-ink); } .mast a:hover { color: var(--color-yellow); } .mast a:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 3px; } .mast__bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-on-ink) 18%, transparent); font-size: var(--text-sm); } .mast__bottom p { margin-right: auto; } /* ---------- G: second action, Cue me, first seconds, proof cards ---------- */ .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); } .hero__head .cta-row { margin-top: var(--space-sm); } .btn--ghost { gap: var(--space-xs); background: var(--grain), var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink), 0 var(--edge) 0 0 var(--color-edge); } .btn--ghost:hover { --edge: 7px; translate: 0 -2px; color: var(--color-ink); } .btn--ghost:active { --edge: 1px; translate: 0 4px; } .btn__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); } .hstep__copy .btn--sm { grid-column: 2; justify-self: start; margin-top: var(--space-xs); } .pane__label--row, .ui__label--row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); } .fmt { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand); font-size: var(--text-xs); font-weight: 600; } .fmt--sm { padding: 1px var(--space-xs); font-size: 0.6875rem; } .fmt--alt { background: var(--color-ink); color: var(--color-card); } .cues { list-style: none; display: grid; gap: var(--space-sm); margin-top: var(--space-md); } .cues li { position: relative; padding-left: 20px; color: var(--color-ink); font-size: clamp(1rem, 0.3vw + 0.9rem, 1.125rem); line-height: 1.35; } .cues li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); } .cues li:first-child { font-size: clamp(1.2rem, 0.7vw + 0.85rem, 1.5rem); font-weight: 600; line-height: 1.24; letter-spacing: -0.015em; } .cues li:first-child::before { top: 0.45em; width: 10px; height: 10px; } .cues--sm { gap: var(--space-2xs); margin-top: var(--space-2xs); } .cues--sm li, .cues--sm li:first-child { padding-left: var(--space-md); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; } .cues--sm li:first-child { font-weight: 600; font-size: 0.875rem; } .cues--sm li::before, .cues--sm li:first-child::before { top: 0.45em; width: 6px; height: 6px; } .formats { margin-top: 72px; } .formats__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-sm) var(--space-xl); } .formats__head h3 { font-size: var(--text-title); } .formats__q { max-width: 44ch; color: var(--color-ink); font-weight: 600; } .formats__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-lg); } .fmt-card { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border-radius: 14px; background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); } .fmt-card--on { box-shadow: var(--shadow-card), 0 0 0 2px var(--color-brand); } .fmt-card__name { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-brand-deep); font-weight: 600; } .fmt-card__name small { padding: 0 var(--space-xs); border-radius: 999px; background: var(--color-brand); color: var(--color-on-brand); font-size: 0.6875rem; line-height: 1.6; } .fmt-card__for { color: var(--color-ink-2); font-size: var(--text-xs); } .fmt-card .cues--sm { margin-top: var(--space-xs); } .fmt-card__md { display: grid; gap: var(--space-sm); margin-top: var(--space-xs); } .fmt-card__md p { color: var(--color-ink); font-size: 0.8125rem; line-height: 1.35; } .fmt-card__md b { display: block; margin-bottom: var(--space-3xs); font-size: 0.875rem; font-weight: 600; } .fmt-card__say { margin-top: var(--space-xs); color: var(--color-ink); font-size: 0.875rem; line-height: 1.45; } .formats__note { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); } .aha { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); margin-top: 72px; } .aha__card { display: grid; align-content: start; gap: var(--space-sm); } .aha__card h3 { font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.02em; } .aha__card p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; } .aha__art { position: relative; display: flex; flex-wrap: wrap; align-content: center; gap: var(--space-xs); height: 150px; margin-bottom: var(--space-xs); padding: var(--space-md); border-radius: 14px; background: var(--grain), var(--color-brand-wash); box-shadow: inset 0 0 0 1.5px var(--color-brand-tint); overflow: hidden; } .aha__card:nth-child(2) .aha__art { background: var(--grain), color-mix(in oklab, var(--color-mint) 60%, var(--color-card)); box-shadow: inset 0 0 0 1.5px var(--color-mint-deep); } .aha__card:nth-child(3) .aha__art { background: var(--grain), color-mix(in oklab, var(--color-yellow) 55%, var(--color-card)); box-shadow: inset 0 0 0 1.5px var(--color-yellow-deep); } .aha__card:nth-child(4) .aha__art { background: var(--grain), var(--color-paper-2); box-shadow: inset 0 0 0 1.5px var(--color-rule); } .chip--paper { padding: var(--space-2xs) var(--space-xs); border-radius: 6px; background: var(--color-card); color: var(--color-ink); font-size: 0.75rem; box-shadow: 0 2px 0 0 var(--color-edge), inset 0 0 0 1px var(--color-rule); } .chip--paper:nth-child(1) { rotate: -3deg; } .chip--paper:nth-child(2) { rotate: 2deg; } .chip--paper:nth-child(3) { rotate: -1deg; } .chip--cue { position: absolute; right: var(--space-md); bottom: var(--space-md); background: var(--color-brand); color: var(--color-on-brand); font-size: 0.8125rem; box-shadow: 0 3px 0 0 var(--color-brand-deep); } .aha__arrow { position: absolute; right: 96px; bottom: 30px; width: 54px; overflow: visible; } .aha__arrow .dots { fill: none; stroke: var(--color-brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 7.5; } .aha__arrow .tip { fill: none; stroke: var(--color-brand); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; } .aha__art--speed { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; justify-content: center; } .aha__art--speed .wave { width: 72px; height: 26px; fill: var(--color-mint-deep); } .aha__ms small { display: block; color: var(--color-ink-2); font-size: 0.6875rem; font-weight: 600; } .aha__words { color: var(--color-ink); font-size: 1.0625rem; font-weight: 600; } .aha__words i { color: var(--color-muted); font-weight: 500; } .aha__ms { position: absolute; right: var(--space-md); top: var(--space-md); padding: var(--space-2xs) var(--space-sm); text-align: center; line-height: 1.15; border-radius: var(--radius-small); background: var(--color-card); color: var(--color-mint-deep); font-weight: 600; rotate: 4deg; box-shadow: inset 0 0 0 1.5px var(--color-mint-deep); } .aha__art--fit { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); } .tab { display: grid; gap: 0; padding: var(--space-2xs) var(--space-sm); border-radius: 8px; background: var(--color-card); color: var(--color-ink-2); font-size: 0.6875rem; box-shadow: inset 0 0 0 1px var(--color-rule); } .tab b { color: var(--color-ink); font-size: 0.75rem; font-weight: 600; } .tab--on { box-shadow: inset 0 0 0 2px var(--color-ink); translate: 8px 0; } .aha__art--say { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: var(--space-sm); } .bub { padding: var(--space-xs) var(--space-sm); border-radius: 12px; font-size: 0.8125rem; font-weight: 600; line-height: 1.25; } .bub--read { background: var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule); } .bub--read::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--space-xs) var(--space-3xs) 0; border-radius: 50%; background: var(--color-brand); } .bub--say { align-self: flex-end; border-bottom-right-radius: 3px; background: var(--color-brand); color: var(--color-on-brand); } /* ---------- responsive ---------- */ @media (max-width: 75rem) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } .hero__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); } .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--gap-columns); } .worry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .worries .worry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .worries .worry, .worries .worry:nth-child(4) { grid-column: auto; } .slab__note { display: none; } .hand-arrow { display: none; } .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-2xl); } .hstep:nth-child(2)::after { display: none; } .depth__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .depth__copy h2 { max-width: 18ch; } .desk__arrow { display: none; } .aha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); } } @media (max-width: 60rem) { .formats__list { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .hero { padding-top: var(--space-2xl); } .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } .hero__head h1 { max-width: 12ch; } .how__head, .modes__head, .plans__head, .faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .after__grid { grid-template-columns: minmax(0, 1fr); } .after__grid > h2, .after__sheet, .proof { grid-column: 1; grid-row: auto; } .after__sheet { max-width: 520px; } .ticks li { font-size: var(--text-lg); } .coach__band { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } .coach .markup { justify-self: start; } .close__sheet { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .close__art { height: 240px; max-width: 460px; } } @media (max-width: 48rem) { .guarantee { flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); max-width: 440px; } .guarantee .sticker { width: 96px; } .tiers { grid-template-columns: minmax(0, 1fr); max-width: 440px; } } @media (max-width: 40rem) { .slab__inner { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); min-height: 0; padding-block: var(--space-md) var(--space-lg); } .brand { font-size: var(--text-lg); } .brand img { width: 34px; height: 34px; } .slab__links { width: 100%; margin-left: 0; gap: var(--space-xs) var(--space-sm); flex-wrap: wrap; } .hero { padding-top: 44px; } .stage { padding: 32px var(--space-md) var(--space-lg); } .call__bar { flex-wrap: wrap; padding: var(--space-md) var(--space-md); } .call__audio { margin-left: 0; width: 100%; } .call__panes { grid-template-columns: minmax(0, 1fr); } .pane { padding: var(--space-md) var(--space-md) 20px; } .pane--transcript { border-right: 0; border-bottom: 1.5px solid var(--color-rule); } .lines { margin-bottom: var(--space-md); } .hand-arrow { display: none; } .sticker { width: 108px; top: -34px; bottom: auto; right: -6px; } .stage figcaption { max-width: none; } .sticker__inner { font-size: var(--text-xs); } .sticker__inner strong { font-size: 1.5rem; } .markup, .coach .markup { padding: var(--space-xl) var(--space-lg) var(--space-lg) var(--space-xl); } .sheet--lined > i:last-child { background: var(--grain), linear-gradient(90deg, transparent 26px, color-mix(in oklab, var(--color-brand) 34%, transparent) 26px 28px, transparent 28px), repeating-linear-gradient(180deg, transparent 0 39px, color-mix(in oklab, var(--color-brand) 13%, transparent) 39px 40.5px), var(--fibre), var(--color-card); } .markup__stamp { position: static; display: inline-block; margin-top: var(--space-md); font-size: var(--text-lg); } .tape--l { left: 30px; } .tape--r { right: 26px; } .posters { grid-template-columns: minmax(0, 1fr); } .how__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); max-width: 380px; } .ui { height: auto; } .ui--desk { height: 252px; } .hstep::after { display: none; } .desk { padding: var(--space-xl) var(--space-md) var(--space-lg); } .desk__modes { grid-template-columns: minmax(0, 1fr); } .answer__q, .answer__body { padding-inline: var(--space-md); } .answer .points { grid-template-columns: minmax(0, 1fr); } .close__sheet { padding: 52px var(--space-lg) 44px; } .close__art { height: 220px; } .keycap { width: 250px; } .keycap__face { height: 76px; } .close__note { width: 180px; font-size: var(--text-md); } .close__arrow { left: 30%; top: 124px; width: 80px; } .poster { max-width: 360px; } .worry-grid, .worries .worry-grid { grid-template-columns: minmax(0, 1fr); } .aha { grid-template-columns: minmax(0, 1fr); max-width: 420px; } .cta-row { gap: var(--space-md); } .worry:nth-child(even) { translate: 0; } .proof { padding: var(--space-xl) var(--space-lg) 32px; } } /* Hero example: STAR margin notes replace the cue dots; the tag marks the card as an example */ .cues--star li { padding-left: 32px; } .cues--star li::before, .cues--star li:first-child::before { content: attr(data-star); top: 0.02em; left: 0; width: 22px; height: 22px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--color-brand); color: var(--color-brand); font: 700 0.8125rem/22px var(--font-display); text-align: center; rotate: -8deg; } .cues--star li:first-child::before { top: 0.12em; } .stage .example-tag { position: absolute; top: 30px; left: 70px; z-index: 2; max-width: none; margin: 0; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-small); background: var(--color-yellow); color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; rotate: -3deg; box-shadow: 0 1px 0 color-mix(in oklab, var(--color-ink) 18%, transparent); } /* ---- download.css ---- */ /* Hallmark · G download page · same system as the homepage (style.css): torn paper, the brand purple, yellow and mint, drawn product objects · motion: the shared button press only */ .dl-hero { padding: 84px 0 var(--section-gap); } .dl-hero__grid { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: 56px; align-items: center; } .dl-hero__copy { display: grid; gap: var(--space-lg); justify-items: start; } .dl-hero__copy h1 { font-size: clamp(2.5rem, 3.4vw + 1rem, 4.25rem); max-width: 15ch; } .reqs { display: flex; flex-wrap: wrap; row-gap: var(--space-2xs); margin: 0 0 0 calc(-1 * var(--space-sm)); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink); font-weight: 600; } .reqs > li { padding-inline: var(--space-sm); border-left: 1.5px solid var(--color-edge); } .reqs > li:first-child { border-left: 0; } .prep-note { max-width: 58ch; margin: 0; padding: var(--space-sm) var(--space-md); border-block: 1.5px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; } .prep-note strong { color: var(--color-ink); font-weight: 600; } .mac { margin: 0; padding: 48px 44px 112px; } .mac > .sheet { rotate: 1deg; } .mac__win { border-radius: var(--radius-card); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 9%, transparent); overflow: hidden; rotate: -0.8deg; } .mac__bar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-bottom: 1.5px solid var(--color-rule); background: var(--color-paper-2); } .mac__bar i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in oklab, var(--color-ink) 22%, transparent); } .mac__bar span { margin-left: var(--space-sm); color: var(--color-ink); font-weight: 600; } .mac__body { display: grid; gap: var(--space-lg); padding: var(--space-lg); } .mac__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-radius: 12px; background: color-mix(in oklab, var(--color-mint) 55%, var(--color-card)); color: var(--color-mint-deep); font-size: var(--text-sm); box-shadow: inset 0 0 0 1.5px var(--color-mint-deep); } .mac__row b { display: block; color: var(--color-ink); font-size: var(--text-md); font-weight: 600; } .mac__row .wave { flex: none; width: 110px; height: 22px; fill: var(--color-mint-deep); } .mac__lines { display: grid; gap: var(--space-sm); } .mac__lines i { display: block; height: 9px; border-radius: 5px; background: color-mix(in oklab, var(--color-brand) 30%, transparent); } .mac__lines i:first-child { height: 14px; width: 88%; background: color-mix(in oklab, var(--color-ink) 70%, transparent); } .mac__lines i:nth-child(2) { width: 76%; } .mac__lines i:nth-child(3) { width: 58%; } .mac__key { position: absolute; right: 28px; bottom: 6px; display: grid; justify-items: center; gap: var(--space-2xs); rotate: 6deg; } .mac__keylabel { color: var(--color-brand-deep); font-weight: 600; } .mac__cap { display: flex; gap: var(--space-xs); } .mac__cap kbd { display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 var(--space-sm); border-radius: 14px; background: var(--grain), var(--color-card); color: var(--color-ink); font: 600 var(--text-lg)/1 var(--font-body); box-shadow: inset 0 0 0 2px var(--color-ink), 0 6px 0 0 var(--color-edge); } .mac__cap kbd.wide { min-width: 150px; } .dl-adds { padding-bottom: var(--section-gap); } .adds { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: 56px; align-items: start; } .add { display: grid; align-content: start; gap: var(--space-sm); padding: 32px 28px 32px; } .add:nth-child(odd) { rotate: -0.6deg; } .add:nth-child(even) { rotate: 0.5deg; translate: 0 10px; } .add h3 { font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.02em; } .add p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; } .add a { font-weight: 600; } .dl-win { padding-bottom: var(--section-gap); } .winsheet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding: var(--space-2xl) 72px; rotate: -0.4deg; } .winsheet__copy { display: grid; justify-items: start; gap: var(--space-md); } .winsheet__copy p:last-child { color: var(--color-ink); font-size: var(--text-lead); } .notify { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-stock); background: var(--grain), var(--color-card); box-shadow: inset 0 0 0 1.5px var(--color-ink), 0 5px 0 0 var(--color-edge); } .notify label { color: var(--color-ink); font-weight: 600; } .notify__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .notify input { flex: 1 1 220px; min-height: 56px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-stock); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1.2 var(--font-body); box-shadow: inset 0 0 0 1.5px var(--color-ink-2); } .notify .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; } .notify input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } .notify__use { color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.5; } @media (max-width: 75rem) { .adds { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 60rem) { .dl-hero { padding-top: var(--space-2xl); } .dl-hero__grid, .winsheet { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .winsheet { padding: var(--space-2xl) var(--space-xl); } } @media (max-width: 40rem) { .dl-hero { padding-top: 44px; } .mac { padding: 32px var(--space-md) 112px; } .mac__key { right: 16px; bottom: 8px; } .reqs { display: grid; margin-left: 0; } .reqs > li { padding-inline: 0; border-left: 0; } .mac__row { flex-wrap: wrap; } .mac__cap kbd { min-width: 48px; height: 52px; } .mac__cap kbd.wide { min-width: 110px; } .adds { grid-template-columns: minmax(0, 1fr); } .add:nth-child(even) { translate: 0; } .winsheet { padding: 44px var(--space-lg) 36px; } .notify { padding: var(--space-md); } .notify .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--space-sm); } } /* ---- site.css (production additions) ---- */ /* Production additions to the G prototype: header tools, language switch, * checkout notice, Netlify form states, long-form article layout, plain pages. */ /* ---------- header: Log in + EN/ES ---------- */ .slab__tools { display: flex; align-items: center; gap: var(--space-md); flex: none; } .slab__login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-on-ink-2); color: var(--color-on-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .slab__login:hover { color: var(--color-yellow); box-shadow: inset 0 0 0 1.5px var(--color-yellow); } .slab__login:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 4px; } .lang { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-on-ink-2); font-size: var(--text-xs); font-weight: 600; } .lang a { padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-small); color: var(--color-on-ink-2); text-decoration: none; } .lang a:hover { color: var(--color-yellow); } .lang a[aria-current="page"] { color: var(--color-on-ink); box-shadow: inset 0 -2px 0 0 var(--color-yellow); } .lang a:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 2px; } @media (max-width: 40rem) { .slab__tools { order: 2; margin-left: auto; } .slab__links { order: 3; } } /* ---------- header: signed-in user menu (auth.js builds it) ---------- */ .slab--menu-open { z-index: 20; } .usermenu { position: relative; flex: none; } .usermenu__button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-on-ink-2); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--color-on-ink-2); } .usermenu__button:hover, .usermenu__button[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--color-yellow); } .usermenu__button:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 4px; } .usermenu__avatar { display: block; width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; } .usermenu__list { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 1; display: grid; min-width: 14rem; margin: 0; padding: var(--space-2xs); list-style: none; border-radius: var(--radius-small); background: var(--color-card); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-ink) 10%, transparent); } .usermenu__list::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--space-xs); } /* bridges the gap for hover */ .usermenu__list[hidden], .usermenu[hidden], .slab__login[hidden] { display: none; } .usermenu__item { display: block; width: 100%; padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius-small); background: none; color: var(--color-ink); font: 600 var(--text-sm)/1.3 var(--font-body); text-align: left; white-space: nowrap; cursor: pointer; } .usermenu__item:hover { background: var(--color-yellow); } .usermenu__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; } /* ---------- checkout return notice (JS only) ---------- */ .notice { position: relative; isolation: isolate; display: flex; gap: var(--space-md); align-items: flex-start; max-width: 720px; margin: var(--space-lg) auto 0; padding: var(--space-lg) var(--space-xl); } .notice__body { display: grid; gap: var(--space-xs); color: var(--color-ink-2); } .notice__title { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; } .notice__body p { max-width: 62ch; } .notice__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-ink); font: 600 1.25rem/1 var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--color-ink), 0 3px 0 0 var(--color-edge); } .notice__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* ---------- Windows waitlist form (Netlify Forms) ---------- */ .notify__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .notify input:invalid:not(:placeholder-shown) { box-shadow: inset 0 0 0 2px var(--color-no); } /* ---------- plain pages: thanks, 404 ---------- */ .plain { padding: var(--space-3xl) 0 var(--section-gap); } .plain__sheet { position: relative; isolation: isolate; max-width: 760px; margin-inline: auto; padding: var(--space-2xl) var(--space-2xl) var(--space-xl); display: grid; gap: var(--space-md); } .plain__sheet h1 { font-size: clamp(2rem, 4vw, 3rem); } .plain__sheet .lead { max-width: 46ch; } .plain__sheet .cta-row { margin-top: var(--space-sm); } .plain__sheet .stamp { justify-self: start; } .plain__links { display: grid; gap: var(--space-xs); padding: 0; list-style: none; } .plain__links a { font-weight: 600; } @media (max-width: 40rem) { .plain__sheet { padding: var(--space-xl) var(--space-lg); } } /* ---------- long-form articles and legal pages ---------- */ .article { padding: var(--space-2xl) 0 var(--section-gap); } .article__inner { max-width: 44rem; margin-inline: auto; } /* ~70 characters per line at 1.125rem */ .article__inner--wide { max-width: 52rem; } .crumbs { margin-bottom: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); } .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; } .article__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); } .article__head h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.08; } .article__meta { color: var(--color-muted); font-size: var(--text-sm); } .article__head .lead { max-width: 52ch; } .article__body { color: var(--color-ink-2); font-size: 1.125rem; line-height: 1.6; } .article__body > * + * { margin-top: var(--space-md); } .article__body > h2 { margin-top: var(--space-2xl); font-size: var(--text-title); line-height: 1.15; max-width: none; } .article__body > h3 { margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.2; } .article__body > h2 + h3 { margin-top: var(--space-md); } .article__body > h2 + *, .article__body > h3 + * { margin-top: var(--space-sm); } .article__body ul, .article__body ol { display: grid; gap: var(--space-xs); padding-left: 1.35em; } .article__body li > p + p { margin-top: var(--space-2xs); } .article__body li::marker { color: var(--color-brand-deep); font-weight: 600; } .article__body strong, .article__body b { color: var(--color-ink); font-weight: 600; } .article__body a { font-weight: 600; } .article__body blockquote { position: relative; isolation: isolate; margin: var(--space-lg) 0; padding: var(--space-lg) var(--space-xl); font-size: 1.0625rem; color: var(--color-ink); } .article__body blockquote .sheet { --sheet-c: var(--color-paper-2); } .article__body .blockquote--plain { padding: 0 0 0 var(--space-lg); border-left: 3px solid var(--color-brand); font-style: italic; } .article__body .faq__list { margin-top: var(--space-md); } .faq__list summary h3 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; } .article__body hr { border: 0; border-top: 1.5px solid var(--color-rule); } .table-wrap { overflow-x: auto; margin-top: var(--space-md); } .article__body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.45; } .article__body th, .article__body td { padding: var(--space-xs) var(--space-sm); border-bottom: 1.5px solid var(--color-rule); text-align: left; vertical-align: top; } .article__body thead th { color: var(--color-ink); background: var(--color-paper-2); font-weight: 600; } .article__body tbody th { color: var(--color-ink); font-weight: 600; } .article__body figure { margin: var(--space-lg) 0; } .article__body figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); } /* CTA blocks inside articles: a torn yellow sheet with the primary control */ .article__cta { position: relative; isolation: isolate; display: grid; gap: var(--space-sm); margin: var(--space-2xl) 0; padding: var(--space-xl) var(--space-xl) var(--space-lg); color: var(--color-ink); } .article__cta .sheet { --sheet-c: var(--color-yellow); } .article__cta-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } .article__cta p { font-size: var(--text-md); } .article__cta .btn { justify-self: start; margin-top: var(--space-xs); white-space: normal; text-align: center; line-height: 1.2; } .article__cta--brand .sheet { --sheet-c: var(--color-brand-wash); } /* Related links */ .article__related { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1.5px solid var(--color-rule); } .article__related h3 { font-size: var(--text-lg); } .article__related ul { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); padding-left: 1.35em; } /* Blog index: the article column, one entry per post between hairline rules */ .posts { display: grid; list-style: none; padding: 0; border-top: 1.5px solid var(--color-rule); } .post { display: grid; gap: var(--space-xs); padding-block: var(--space-xl); border-bottom: 1.5px solid var(--color-rule); } .post__title { max-width: none; font-size: var(--text-title); line-height: 1.2; } .post__title a { color: var(--color-ink); text-decoration-color: var(--color-rule); } .post__title a:hover { color: var(--color-brand-deep); text-decoration-color: currentColor; } .post__meta { color: var(--color-muted); font-size: var(--text-sm); } .post__summary { color: var(--color-ink-2); font-size: 1.125rem; line-height: 1.55; } /* the article body size: ~70 characters per line */ /* Plans: the dated price line under the cards (muted, as .tiers__note); keep the date on one line */ .tiers__checked time { white-space: nowrap; } /* Practice page extras */ .practice__hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; padding-block: var(--space-2xl) var(--space-3xl); } /* padding-block only: .container keeps its inline gutter */ .practice__hero .cta-row { margin-top: var(--space-lg); } .practice__hero .hero__small { margin-top: var(--space-md); } .demo { position: relative; isolation: isolate; padding: var(--space-xl) var(--space-xl) var(--space-lg); display: grid; gap: var(--space-sm); color: var(--color-ink); } .demo__top { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 600; } .demo__q { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; } .scores { display: grid; gap: var(--space-2xs); list-style: none; padding: 0; font-size: var(--text-sm); } .scores li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--space-sm); } .scores i { display: block; height: 8px; border-radius: 4px; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); overflow: hidden; } .scores i::before { content: ""; display: block; height: 100%; width: calc(var(--n) / 5 * 100%); background: var(--color-brand); border-radius: 4px; } .scores b { text-align: right; font-weight: 600; } .demo__fix { position: relative; isolation: isolate; margin-top: var(--space-xs); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); } .demo__fix .sheet { --sheet-c: var(--color-mint); } .demo__fix strong { display: block; margin-bottom: var(--space-3xs); color: var(--color-ink); } .demo__retry { justify-self: end; } .plan-table th:first-child { width: 8rem; } .steps { counter-reset: step; list-style: none; padding-left: 0 !important; } .steps > li { position: relative; padding-left: 3.25rem; counter-increment: step; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand); font: 600 var(--text-sm)/1 var(--font-display); } @media (max-width: 60rem) { .practice__hero { grid-template-columns: minmax(0, 1fr); } .article__body > h2 { font-size: var(--text-2xl); } } @media (max-width: 40rem) { .article__body, .post__summary { font-size: 1.0625rem; } .article__body blockquote { padding: var(--space-md) var(--space-lg); } .article__cta { padding: var(--space-lg) var(--space-lg) var(--space-md); } .scores li { grid-template-columns: 7rem minmax(0, 1fr) 1.5rem; } .demo { padding: var(--space-lg) var(--space-md) var(--space-md); } }