/* /assets/system-20261012/tokens.css */ /* ══ AIOOS design system · tokens.css · updated 13 Oct 2026 ═════════════════════ One token block for every page family. Loaded before editorial-20260908/style.css on the homepage family and on the pages that use pages-20261011/shell.css. Update of the 15 Sep 2026 sheet from design.aioos.ai (VOX-core specs/design-email-20260923). Token names stay. Changes in this update: RETIRED the trial: --t-offer, --t-offer-unit, --t-offer-line, --t-offer-h3, --lh-offer, --track-offer. The website sells no trial (free sample, then Start 39 / Pro 99 / Premium 399 EUR per month, 30-day money-back guarantee). RETIRED --shadow-paper, --shadow-plinth, --shadow-core, --shadow-float, --shadow-mark, --stage-plinth, --stage-floor, --stage-dots, --t-manifesto, --t-human-r1, --r1-* faces: none of them renders on the redesigned pages. --radius-card is kept as an alias of --radius-surface. CHANGED radius is a scale, no longer "0 for everything": section 3. CHANGED shadows are two families: flat raise/hover/object (ink-violet, soft) and the device frames. Section 4. CHANGED type and section-rhythm tokens carry the values the live site renders. ADDED the icon family (assets/system-20261012/icons.svg): section 7. ADDED 13 Oct: leading of the two leads and of section copy (section 2), the section header stack --stack-label, --stack-title, --stack-block (section 3), the pressed state, exit easing and the dialog distances (section 6), one scrim blur (section 1). RULE OF USE: no colour, face, size, radius, shadow, duration or easing outside this sheet. Nearest token wins. A new value is a change to this file first, then the code. ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1 · COLOUR · nine named colours plus the lilac stage ─────────────────── */ --paper: #f2eddf; /* ground */ --panel: #f8f4e9; /* raised paper; light text on ink */ --soft: #eae5d8; /* sunken paper */ --ink: #191b1b; /* text, buttons */ --muted: #5f5d56; /* secondary text (4.9:1 on paper; 4.1:1 at the lilac end of gradients, use ink there) */ --muted-word: #80786e; /* de-emphasised word inside a headline, display sizes only */ --line: #aaa597; /* hairline between sections and cards (decoration, not a control edge) */ --accent: #473b70; /* the one hue: hover, current, focus, eyebrows */ --lilac: #b5a6cd; /* product stage material */ --tint: #e4dced; /* lilac wash: hover fills, selected fills */ --line-ui: #7f7a6e; /* edge of a control (input, chip, tab, outlined button, language trigger, segmented rail): 3.66:1 on paper, 3.21:1 on tint, WCAG 1.4.11 */ --line-soft: #aaa59766; /* card hairline on paper (live on content pages) */ --line-card: #aaa5978c; /* card hairline that needs more presence */ --line-accent: #473b7033; /* edge of a tinted card */ --error: #9b2c1f; /* invalid border, 6.5:1 on paper */ --error-tint: #f5e4de; /* ground of an error message */ --error-ink: #6e1d12; /* text of an error message, 9.2:1 on --error-tint */ --bezel: #292828; --island: #242423; --stage-ink: #42354e; --chrome: #e7e1d5; /* device mock-ups only */ --stage-panel: #ddd4e3; --stage-bubble: #e8e1ed; --stage-core: linear-gradient(135deg, #f7f3f5, #c8bbd1); --stage-field: radial-gradient(ellipse at 70% 40%, #fffafbdf 0, #f4effc9e 23%, #e7ddf451 45%, transparent 72%), linear-gradient(130deg, #e9e0f1, #daceeb 57%, #d2c1e2); /* full-bleed lilac field behind the tools hub */ --err-ink: #842c25; /* error text on --err-bg, 7.2:1 */ --err-bg: #f4e4de; /* error wash for messages and invalid fields */ --err-line: #9b3028; /* error border, 6.3:1 on paper */ --scrim: rgb(25 27 27 / .35); --scrim-blur: 6px; /* --scrim with --scrim-blur sits behind every dialog and drawer; the open menu sheet uses --scrim alone */ --photo-shade: linear-gradient(transparent, #191b1bbf); /* ── 2 · TYPE · Bebas Neue for the word AIOOS, Manrope for everything else ── --display, --body, --heading, --mono and --type-family stay defined by editorial-20260908/style.css and typography-20260910/typography.css (Manrope). */ --w-body: 400; --w-nav: 500; --w-link: 550; --w-ui: 600; --w-head: 650; /* sizes: the values the live site renders (hero.css, footer.css, app.css, faq.css, human.css) */ --t-word: clamp(158px, 19.5vw, 302px); /* hero AIOOS, line-height .86, tracking -.012em */ --t-word-closing: clamp(180px, 22vw, 340px); /* closing AIOOS (violet), line-height .83, tracking -.015em */ --t-hero-intro: clamp(32px, 4.4vw, 65px); /* hero statement h2, 1.05, -.05em */ --t-human: clamp(52px, 6.2vw, 88px); /* "fully present" h2, 550, 1.08, -.05em */ --t-section: clamp(36px, 4vw, 60px); /* section h2: app, film, FAQ (3.75rem cap), 550-600, 1.1, -.04em */ --t-feature: clamp(2.125rem, 1.6rem + 1.5vw, 3.25rem); --t-price: clamp(3rem, 2.3rem + 1.5vw, 4rem); --t-title: 1.625rem; --t-faq: 1.125rem; --t-body: clamp(1rem, .96rem + .18vw, 1.125rem); --t-ui: .9375rem; --t-nav: 13px; --t-small: .875rem; --t-note: .8125rem; --t-caption: .75rem; --t-micro: .6875rem; /* disclosure labels never go below this (docs/website.md) */ /* roles of the type scale. One section heading (h2), two leads, one label. Sizes carry a rem part so zoom and the browser font setting work. */ --t-h2: clamp(2rem, 1.5rem + 2.1vw, 3.75rem); /* 32 to 60 px (60 from 1714 px; flatter slope keeps voice and products headings at two lines near 1024), every section heading */ --w-h2: 600; --lh-h2: 1.08; --track-h2: -.035em; --t-lead-l: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); /* 20 to 28 px, lead of the idea and human sections */ --t-lead: clamp(1.0625rem, 1rem + .25vw, 1.25rem); /* 17 to 20 px, intro under every other heading */ --lh-lead-l: 1.4; --lh-lead: 1.5; --lh-copy: 1.6; /* leading of the large lead, of the lead, and of section copy (card descriptions, notes under a lead); weight --w-body, no tracking */ --t-label: .75rem; --w-label: 600; --lh-label: 1.4; --track-label: .08em; /* uppercase label: kicker, caption row */ --code: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --code-string: #7a4a1f; --lh-word: .86; --track-word: -.012em; --lh-head: 1.12; --track-head: -.045em; --lh-body: 1.65; --lh-long: 1.7; /* running text of content pages; the homepage sections use --lh-copy */ --lh-caption: 1.5; --track-kicker: .06em; --measure-lead: 34ch; --measure-body: 42ch; /* ── 3 · SPACE and RHYTHM ─────────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --wrap: 1440px; /* The header block of a section: label, --stack-label, heading, --stack-title, intro, --stack-block, content. Every section uses these three gaps. */ --stack-label: clamp(1rem, .6rem + 1.2vw, 1.5rem); /* label to heading, 16 to 24 px */ --stack-title: clamp(1rem, .6rem + 1.2vw, 1.5rem); /* heading to intro, 16 to 24 px */ --stack-block: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); /* header block to content, 28 to 40 px */ --section: clamp(54px, 4.4vw, 68px); /* section padding-block: use cases, voice, tools (the compact rhythm of 11 Oct) */ --section-photo: clamp(64px, 5.8vw, 88px); /* inner padding of the photo sections (idea) */ --nav-h: 76px; /* from 1100px; the compact header below 1100px is 66px */ --tap: 44px; --pad-card: 32px; --gap-card: clamp(16px, 2vw, 26px); --gutter: clamp(20px, 4.4vw, 80px); /* one fluid page gutter, no steps: 20 px up to 454, 34 at 768 */ /* Layout breakpoints are two and only two: 768 and 1100 (phone below 768, tablet 768 to 1099, desktop from 1100). A media query cannot read a variable, so they are written as 767/768 and 1099/1100. Inside a tier the content decides the columns. */ /* ── 4 · SHAPE · a radius scale ──────────────────────────────────────────── Structure stays square (header, bands, footer, full-bleed photos: --radius). Objects are soft. The scale is what the redesigned site renders. */ --radius: 0; --radius-xs: 4px; /* small marks, focus plates, code chips */ --radius-chip: 6px; /* chips, disclosure notes inside photos, tags */ --radius-control: 7px; /* buttons, inputs, select, segments on content pages */ --radius-sm: 8px; /* inner panels, menu rows, list items */ --radius-surface: 10px; /* cards, plan cards, FAQ items, demo panels, hub tiles, photos in the rail */ --radius-lg: 12px; /* large panels, laptop and tablet frames */ --radius-panel: 14px; /* the voice demo panel */ --radius-phone: 38px; /* phone frame, 30px for the screen ring inside */ --radius-pill: 999px; /* segmented rails, tabs, language trigger */ --radius-circle: 50%; /* dots, discs, round icon plates */ --radius-device: var(--radius-lg); --radius-card: var(--radius-surface); --radius-button: var(--radius-control); --radius-disclosure: var(--radius-sm); --rule: 1px; --focus: 3px solid var(--accent); --focus-offset: 5px; /* one primary button: 56 px high (44 px in the header), 24 px side padding, control radius, 16 to 17 px type, 16 px arrow gap, no shadow */ --btn-h: 56px; --btn-h-nav: 44px; --btn-pad-x: 24px; --btn-gap: 16px; --t-btn: clamp(1rem, .96rem + .12vw, 1.0625rem); /* ── 5 · ELEVATION · one hue (violet-ink), no neutral black drop shadow, no glow ── Flat, soft shadows for objects; hard offsets only for the tool-hub paper-cut tiles on content pages. */ --shadow-raise: 0 12px 24px -16px #55416955; /* flat cards that float: hub tiles, demo panels, product scenes */ --shadow-hover: 0 14px 28px -16px #30203c40; /* interactive card on hover and focus-within */ --shadow-object: 0 24px 34px -16px #30203c66; /* tilted product objects: wallet card, phone in products */ --shadow-device: 0 4px 0 #72706c, 0 24px 26px -15px #30263d70; /* laptop and tablet frames */ --shadow-phone: inset 0 0 0 1px #787573, 3px 2px 0 1px #74706c, 0 23px 30px -10px #27213055; --shadow-nav: 0 5px 18px #191b1b0b; /* scrolled header */ --shadow-dialog: 0 40px 100px #191b1b66; /* dialog and drawer */ --cut-1: #b8a8c1; --shadow-block: 5px 7px 0 var(--cut-1), 10px 20px 22px #32233a26; /* paper-cut tile on content pages; in use, no new use */ --shadow-card-back: 0 1px 0 var(--accent), 0 8px 16px #191b1b12; /* buttons carry no shadow. */ /* ── 6 · MOTION ───────────────────────────────────────────────────────────── */ --ease: cubic-bezier(.2, .65, .3, 1); --dur: 200ms; --dur-nav: 160ms; --dur-shell: 180ms; --dur-block: 320ms; --lift: translateY(-2px); --dur-press: 100ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 480ms; /* press; hover colour, border, tab pill; card depth, crossfade, accordion, dialog; scroll reveal, hero entrance */ --ease-in-out: cubic-bezier(.45, 0, .2, 1); /* a move between two states: height, sliding pill */ --ease-in: cubic-bezier(.4, 0, 1, 1); --dur-exit: 160ms; /* a dialog or sheet leaving: two thirds of --dur-base */ --press: translateY(1px) scale(.985); /* a pressed button, tab or chip; --dur-press, colour only under reduced motion */ --dialog-rise: 12px; --dialog-slide: 24px; /* a dialog rises 12 px; a drawer or a phone sheet slides 24 px */ /* ── 7 · ICONS · one stroke family ─────────────────────────────────────────── assets/system-20261012/icons.svg: symbols on a 24 grid, stroke 1.75, round caps and joins, currentColor. Use . Sizes 16, 20, 24. Text glyphs (arrows, check marks, the menu symbol) are not icons: Manrope does not contain them. */ --icon-s: 16px; --icon-m: 20px; --icon-l: 24px; --icon-stroke: 1.75; } .icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .icon * { vector-effect: non-scaling-stroke; } /* Text size: keep the authored size when a phone rotates (UI-266). Also set in editorial-20260908/style.css. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* /assets/editorial-20260908/style.css */ @font-face{font-family:'Bebas Neue';src:url('/assets/i18n-20260909/fonts/bebas-neue.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Bebas Neue';src:url('/assets/i18n-20260909/fonts/bebas-neue-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122} @font-face{font-family:'IBM Plex Mono';src:url('/assets/i18n-20260909/fonts/plex-mono.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('/assets/editorial-20260908/fonts/plex-mono.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+20AC,U+2122,U+2212} :root{--paper:#f2eddf;--panel:#f8f4e9;--ink:#191b1b;--muted:#5f5d56;--line:#aaa597;--soft:#eae5d8;--accent:#473b70;--lilac:#b5a6cd;--tint:#e4dced;--heading:'Arial Narrow',sans-serif;--display:'Bebas Neue','Arial Narrow',sans-serif;--body:Arial,sans-serif;--mono:'IBM Plex Mono',monospace;--ease:cubic-bezier(.2,.65,.3,1)} *{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}::selection{background:var(--accent);color:var(--panel)}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:5px}p,h1,h2,h3,figure{margin:0}h2,h3{font-family:var(--heading);font-weight:600;line-height:.98;letter-spacing:-.02em}h2{font-size:clamp(58px,7.2vw,112px)}p{text-wrap:pretty}button:disabled{cursor:default}.wrap{width:min(100% - var(--gutter)*2,1440px);margin-inline:auto}.section-space{padding-block:clamp(80px,9vw,144px)}.section-kicker{display:flex;justify-content:space-between;align-items:center;gap:24px;font:12px/1.5 var(--mono);letter-spacing:.015em}.section-kicker img{flex-shrink:0}.muted-word{color:#80786e}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;background:none;border:0;border-bottom:1px solid currentColor;padding:8px 0;font-size:14px}.text-link span{font-size:23px;line-height:1}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;background:var(--ink);color:var(--panel);padding:15px 20px;min-height:54px;white-space:nowrap;font-size:14px;transition:background 200ms var(--ease),transform 200ms var(--ease)}@media(hover:hover) and (pointer:fine){.button:hover{background:var(--accent)}}@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.button:hover{transform:var(--lift,translateY(-2px))}}.button span{font-size:24px;line-height:1}.skip-link{position:fixed;z-index:100;top:12px;left:20px;background:var(--ink);color:var(--paper);padding:14px 20px;transform:translateY(-150%)}.skip-link:focus{transform:none} .site-header{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;align-items:center;gap:10px;min-height:44px}.brand span{font:30px/1 var(--display);padding-top:4px}.brand img{width:39px;height:31px}.edition{font:11px/1.3 var(--mono);letter-spacing:.03em}.edition span{margin-inline:12px}.site-header nav{display:flex;align-items:center;gap:30px;font-size:13px}.site-header nav a{padding-block:14px}@media(hover:hover) and (pointer:fine){.site-header nav a:hover{color:var(--accent)}}.site-header nav span{padding-left:12px} .hero-word-row{display:flex;align-items:center;justify-content:space-between;padding-top:38px}.hero-word{font:400 clamp(160px,27.8vw,427px)/.81 var(--display);letter-spacing:-.012em;padding-top:.03em;margin-left:-.009em}.hero-aside{display:flex;gap:32px;align-items:center;align-self:flex-end;margin-bottom:22px;font-size:16px;line-height:1.45}.hero-aside img{width:90px}.hero-intro{display:grid;grid-template-columns:1fr 1fr auto;gap:48px;align-items:center;padding:34px 0 40px}.hero-intro h2{font-size:40px;line-height:1.04}.hero-intro p{font-size:15px;max-width:380px;line-height:1.6}.hero-stage{position:relative;height:660px;background:#d3c8dc;isolation:isolate;perspective:1800px;overflow:hidden}.hero-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 68% 20%,#efe9f299,transparent 65%),linear-gradient(120deg,#a99bb733,#e9e1ee22 50%,#84719d33)}.hero-orbit{position:absolute;width:93%;height:760px;left:-4%;top:-265px;border:1px solid #473b7038;border-radius:50%;transform:rotate(-26deg);box-shadow:0 70px 0 -69px #473b7033,0 140px 0 -139px #473b7022}.dot-plane{position:absolute;inset:22% -40% -15% -20%;background:radial-gradient(circle,#473b7080 1px,transparent 1.6px) 0 0/14px 14px;transform:rotateX(62deg) rotateZ(-14deg);mask-image:radial-gradient(ellipse,#0008,transparent 67%);transform-origin:50% 80%}.hero-plinth{position:absolute;left:10%;bottom:-13%;width:80%;height:36%;border-radius:50%;background:linear-gradient(170deg,#f6f0f2 0%,#d1c8d9 47%,#9686aa 48%,#bbadc9 65%,#c3b6d0 100%);box-shadow:22px 34px 45px #46305f44;transform:rotate(-8deg)}.stage-note{position:absolute;left:28px;top:25px;font:11px/1.5 var(--mono);letter-spacing:.06em;color:#42354e}.desktop{border:6px solid #333331;border-radius:12px;background:var(--panel);box-shadow:0 4px 0 #72706c,0 30px 50px -18px #1b182652;overflow:hidden}.desktop img{width:100%;display:block}.desktop-chrome{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#e7e1d5;border-bottom:1px solid #bbb5a8;height:25px;padding:0 12px;font:8px/1.2 var(--mono);color:#595650}.window-dots{font-size:7px;letter-spacing:2px;white-space:nowrap}.hero-desktop{position:absolute;left:11%;top:64px;width:70%;transform:rotateY(-10deg) rotateX(6deg) rotateZ(-3deg);transform-origin:50% 100%;will-change:auto}.phone{width:248px;flex-shrink:0;border:7px solid #292828;border-radius:38px;background:var(--paper);box-shadow:inset 0 0 0 1px #787573,3px 2px 0 1px #74706c,0 23px 30px -10px #27213055;overflow:hidden;position:relative}.phone::after{content:"";pointer-events:none;position:absolute;inset:0;border-radius:30px;box-shadow:inset 0 0 0 1px #aaa59770}.phone img{width:100%;height:auto;aspect-ratio:390/844}.phone-top{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 17px;font:600 9px/1 var(--body);background:var(--paper);position:relative}.phone-island{position:absolute;left:50%;top:6px;width:64px;height:16px;transform:translateX(-50%);border-radius:14px;background:#242423}.hero-phone{position:absolute;right:7.5%;bottom:34px;width:20%;min-width:180px;transform:rotateY(-10deg) rotateZ(8deg);z-index:3}.stage-emblem{position:absolute;left:3%;bottom:25px;width:20%;transform:rotateZ(-12deg);filter:drop-shadow(14px 20px 9px #23162b44);z-index:2}.stage-caption{position:absolute;inset:auto 28px 19px;display:flex;justify-content:space-between;gap:20px;font:10px/1.4 var(--mono);z-index:5}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font:10px/1.4 var(--mono)}.hero-bottom a{display:flex;align-items:center;gap:30px;min-height:44px;font:13px var(--body)} .manifesto h2{font-size:clamp(76px,10.5vw,160px);margin-top:46px;max-width:1000px;line-height:.94}.manifesto-bottom{display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:56px;align-items:start;margin-top:40px;padding-left:18%}.manifesto-bottom p{font-size:16px;line-height:1.65;max-width:410px}.small-arrow{font:60px/1 var(--body);color:var(--accent)}.manifesto-bottom p:last-child{font-size:14px;padding-top:5px;color:var(--muted)} .human-stage{position:relative;height:780px;width:100%;overflow:hidden;color:var(--panel)}.human-photo{width:100%;height:100%;object-fit:cover;object-position:center 45%}.human-shade{position:absolute;inset:0;background:linear-gradient(90deg,#191b1b8c,transparent 68%),linear-gradient(0deg,#191b1b80,transparent 40%)}.human-heading{position:absolute;left:var(--gutter);top:56px}.human-heading>span{font:11px var(--mono);letter-spacing:.08em}.human-heading h2{font-size:clamp(100px,12vw,185px);line-height:.88;margin-top:25px;text-shadow:0 2px 18px #0002}.human-paper{position:absolute;right:var(--gutter);bottom:68px;width:380px;padding:34px 34px 30px;background:var(--paper);color:var(--ink);transform:rotate(3deg);box-shadow:15px 20px 45px #1718183d}.human-paper>p{font:600 49px/.99 var(--heading);margin:28px 0 24px}.human-paper>span:not(.section-kicker){font-size:14px;line-height:1.6;display:block}.human-paper .text-link{margin-top:20px;font-size:13px}.human-telephone{position:absolute;left:24%;bottom:-17px;width:45%;pointer-events:none;filter:drop-shadow(12px 23px 18px #0007)}.human-telephone img{width:100%}.photo-caption{position:absolute;left:var(--gutter);bottom:20px;font:10px/1.4 var(--mono)} .app-heading{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:80px;margin:38px 0 60px}.app-heading p{max-width:350px;font-size:16px}.app-showroom{display:grid;grid-template-columns:34% 66%;min-height:800px;border:1px solid var(--line)}.app-editorial{padding:40px clamp(24px,3.5vw,56px);background:var(--panel);display:flex;flex-direction:column;align-items:flex-start}.index-type{font:100px/1 var(--display);color:#b8b1a6;margin-bottom:34px}.tab-list{width:100%;display:flex;flex-direction:column}.tab-list button{display:flex;justify-content:space-between;align-items:center;padding:18px 0;min-height:58px;text-align:left;font:500 clamp(28px,2.9vw,44px)/1.1 var(--heading);border-bottom:1px solid #bcb5a8;background:transparent;color:#787169;transition:color 200ms var(--ease),padding 200ms var(--ease)}.tab-list button span{font:26px var(--body);opacity:0}.tab-list button[aria-selected=true]{color:var(--ink);padding-left:12px}.tab-list button[aria-selected=true] span{opacity:1}@media(hover:hover) and (pointer:fine){.tab-list button:hover{color:var(--accent)}}.app-description{margin-top:28px;font-size:15px;min-height:95px;max-width:270px}.app-editorial>.text-link{font-size:13px;margin-top:auto}.app-panel{position:relative;background:#ddd4e3;overflow:hidden;display:flex;align-items:center;justify-content:center;perspective:1600px}.app-background-word{position:absolute;left:30px;top:25px;font:clamp(60px,8vw,130px)/1 var(--display);color:#473b7026;white-space:nowrap}.app-floor{position:absolute;left:-30%;bottom:-5%;width:150%;height:42%;border-radius:50%;background:linear-gradient(180deg,#f3edf5,#c7b9d4);box-shadow:0 -2px 1px #f8f4e966;transform:rotate(-12deg)}.app-panel-dots{position:absolute;inset:0;background:radial-gradient(circle,#473b7044 1px,transparent 1.5px) 0 0/12px 12px;mask-image:radial-gradient(ellipse at 65% 60%,#0006,transparent 63%)}.app-phone{width:285px;transform:rotate(-7deg);transition:transform 320ms var(--ease);margin-top:12px}.app-phone.is-changing{transform:rotate(-4deg) translateY(-5px)}.app-side-note{position:absolute;right:27px;top:30%;display:flex;align-items:center;flex-direction:column;gap:25px;font:11px/1.5 var(--mono)}.side-line{height:100px;width:1px;background:#75668388}.screen-caption{position:absolute;bottom:20px;left:24px;right:24px;text-align:center;font:10px/1.4 var(--mono);color:#4e405b} .access-section{padding-bottom:60px}.access-section>h2{margin:38px 0 55px}.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.web-product,.togo-product{padding:28px 32px 0;min-width:0;overflow:hidden}.web-product{background:var(--tint)}.togo-product{background:#e5dfd1}.product-topline{display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);margin-bottom:25px}.product-topline>span:last-child{font:28px/1 var(--body)}.access-grid h3{font-size:clamp(50px,5.1vw,78px);line-height:1.02}.access-grid article>p{font-size:14px;max-width:350px;margin-top:22px;min-height:69px}.access-dev{margin-top:28px}.access-dev+.access-dev{margin-top:8px}.access-grid article>p a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.browser-scene{height:415px;position:relative;perspective:1800px;margin-top:28px}.mini-browser{position:absolute;left:0;top:15px;width:105%;height:330px;background:var(--panel);border:1px solid #afa399;box-shadow:12px 28px 30px #30203c22;transform:rotateY(10deg) rotateZ(-5deg)}.browser-top{display:flex;align-items:center;gap:20px;padding:12px;border-bottom:1px solid #d0c7b9;font:9px var(--mono)}.website-example{padding:20px 25px;width:100%;background:#eae5d8}.website-example>span{font:9px var(--mono)}.website-example>div{font:500 37px/1.05 var(--heading);margin:23px 0}.website-example i{display:block;width:44%;height:80px;background:repeating-linear-gradient(120deg,transparent,transparent 9px,#a9a08d66 10px,transparent 11px)}.chat-example{position:absolute;right:-12px;top:94px;width:62%;background:var(--panel);border:1px solid #9f9488;padding:14px;box-shadow:7px 16px 25px #25163426;transform:rotate(5deg)}.chat-header{display:flex;align-items:center;gap:9px;font-size:12px}.ai-disclosure{font-size:10px;line-height:1.4;margin:8px 0 13px;padding-bottom:9px;border-bottom:1px solid #c4bcae}.chat-bubble{padding:11px;background:#e8e1ed;font-size:11px;line-height:1.4;margin-top:10px;max-width:96%}.user-bubble{background:#d3c9e0;margin-left:10%}.chat-example-note{display:block;font:9px var(--mono);margin-top:12px}.product-foot{display:flex;justify-content:space-between;gap:14px;align-items:center;border-top:1px solid #8c807b88;min-height:65px;font:10px/1.4 var(--mono)}.product-foot>a{font:11px var(--body);display:flex;gap:20px;align-items:center;min-height:44px}.togo-scene{height:443px;position:relative;perspective:1800px}.togo-ring{position:absolute;border:1px solid #897b954d;width:470px;height:470px;border-radius:50%;left:10%;top:-25px;transform:rotateX(65deg) rotateY(-16deg);box-shadow:0 0 0 38px #b5a6cd15,0 0 0 78px #b5a6cd11}.access-card{position:absolute;left:4%;top:72px;width:90%;height:242px;border-radius:14px;transform:rotateY(-14deg) rotateZ(-13deg)}.front-card{padding:25px 28px;background:linear-gradient(125deg,#e7ded5,#cac0b5 54%,#ddd3c6);border:1px solid #f6f0e7;box-shadow:2px 3px 0 #a19689,14px 28px 27px #463e4838;isolation:isolate}.front-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#60556333 .7px,transparent 1px) 0 0/5px 5px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-1;border-radius:inherit}.front-card>div{display:flex;justify-content:space-between;align-items:center;font:21px var(--display)}.front-card>div img{width:60px}.front-card strong{display:block;font:500 45px/1 var(--heading);margin-top:21px}.card-line{display:block;width:100%;height:1px;background:#766c6080;margin:15px 0 8px}.front-card small{font:8px var(--mono);letter-spacing:.03em}.back-card{background:#77688b;top:39px;left:11%;transform:rotateY(-14deg) rotateZ(-1deg);box-shadow:5px 8px 0 #544564,12px 25px 30px #362b4126}.link-slip{position:absolute;bottom:32px;right:-13px;display:flex;gap:21px;align-items:center;background:var(--panel);padding:17px 24px;transform:rotate(6deg);box-shadow:3px 8px 14px #2c203224;font:15px/1.4 var(--body)}.link-slip>span:first-child{font:45px/1 var(--body);color:var(--accent)} .voice-heading{display:grid;grid-template-columns:1.5fr .65fr;align-items:end;gap:60px;margin:38px 0 55px}.voice-heading h2{font-size:clamp(57px,6.1vw,92px)}.voice-heading>p{font-size:15px}.voice-demonstration{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0 0}.voice-controls{display:flex;justify-content:space-between;align-items:center;gap:30px}.segmented{display:inline-flex;background:transparent;border:1px solid var(--line);padding:4px;gap:4px;flex-shrink:0}.segmented button{background:transparent;padding:11px 17px;min-height:44px;font-size:13px;transition:background 200ms var(--ease),color 200ms var(--ease)}.segmented button.is-active{background:var(--ink);color:var(--paper)}.voice-controls>p{font-size:18px;color:var(--accent);max-width:510px}.voice-path{display:flex;align-items:center;justify-content:center;margin:64px auto 36px;max-width:1000px}.voice-node{width:210px;min-height:184px;display:flex;align-items:center;justify-content:center;gap:22px;flex-direction:column;flex-shrink:0;font-size:14px}.node-symbol{font:58px/1 var(--display);width:90px;height:90px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--panel)}.voice-core{border:1px solid #93859f;background:var(--tint);box-shadow:8px 10px 0 #d2c7da;transform:rotate(-3deg)}.voice-core img{height:78px;width:100px}.path-line{height:1px;background:var(--accent);flex:1;position:relative;margin-inline:25px}.path-line::after{content:"";width:7px;height:7px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg);position:absolute;right:0;top:-3px}.voice-thinker{border:1px solid var(--line);background:var(--soft);transform:rotate(3deg);transition:background 320ms var(--ease),opacity 320ms var(--ease)}.thinker-symbol{display:grid;grid-template-columns:1fr 1fr;gap:5px;transform:rotate(-6deg);padding-block:11px}.thinker-symbol i{display:block;width:24px;height:24px;background:#6a5c81}.voice-demonstration[data-mode=quick] .voice-thinker{opacity:.48}.voice-demonstration[data-mode=quick] .optional-line{opacity:.25;background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px)}.voice-demonstration[data-mode=deep] .voice-thinker{background:#cdbeda}.voice-result{display:flex;gap:25px;align-items:center;max-width:700px;margin:0 auto 45px;font-size:16px;min-height:70px}.result-arrow{font-size:38px;color:var(--accent)}.voice-foot{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;padding:20px 0;font-size:12px}.voice-foot>span:last-child{color:var(--muted)} .tools-section{background:var(--tint);position:relative;overflow:hidden}.tools-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;min-height:810px;align-items:center;padding-block:90px}.tools-copy h2{font-size:clamp(80px,8.4vw,130px);margin-top:40px}.tools-copy h2 span{color:var(--accent)}.tools-copy>p{font-size:16px;max-width:430px;margin-top:28px}.tools-copy>.tools-secondary{font-size:14px;max-width:410px;color:#554a5f;margin-top:22px}.tool-switch{margin-top:32px;border-color:#9e8faa}.tools-copy>.tools-caption{font-size:11px;line-height:1.6;margin-top:15px;color:#5c4b69;max-width:365px}.tool-sculpture{position:relative;height:620px;perspective:1400px;isolation:isolate}.tool-orbit{position:absolute;width:570px;height:570px;border:1px solid #473b703a;border-radius:50%;left:-8%;top:80px;transform:rotateX(59deg) rotateZ(-25deg);box-shadow:0 0 0 58px #b5a6cd18,0 0 0 116px #b5a6cd12}.tool-grid-floor{position:absolute;inset:160px -190px -80px -150px;background:radial-gradient(circle,#473b7066 1px,transparent 1.5px) 0 0/15px 15px;transform:rotateX(50deg) rotateZ(-15deg);mask-image:radial-gradient(ellipse,#0009,transparent 67%)}.tool-core{position:absolute;left:19%;top:206px;width:280px;height:218px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f7f3f5,#c8bbd1);border:1px solid #eae2f0;box-shadow:12px 15px 0 #ad9dbd,20px 32px 24px #4632553b;transform:rotateY(-13deg) rotateX(13deg) rotateZ(-9deg)}.tool-core img{width:145px;height:auto}.tool-core>span{font:9px var(--mono);margin-top:8px;letter-spacing:.03em}.tool-block{position:absolute;width:208px;padding:20px 23px;min-height:149px;background:var(--panel);border:1px solid #c8bdcb;box-shadow:5px 7px 0 #b8a8c1,10px 20px 22px #32233a26;display:flex;flex-direction:column;gap:5px;transform:rotate(-8deg);transition:transform 320ms var(--ease)}.tool-block-one{left:1%;top:26px}.tool-block-two{right:-2%;top:95px;transform:rotate(8deg)}.tool-block-three{right:1%;bottom:15px;transform:rotate(-2deg)}.tool-icon{font:32px/1 var(--body);margin-bottom:12px;color:var(--accent)}.tool-block strong{font:500 30px/1 var(--heading)}.tool-block>span:last-child{font-size:11px}.tool-block.changed{transform:translateY(-6px) rotate(-3deg)} .possibilities-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:38px 0 60px}.possibilities-heading p{font-size:15px;max-width:370px}.editorial-collage{position:relative;min-height:1120px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,80px);gap:10px}.collage-team{grid-column:1/7;grid-row:1/6;position:relative;z-index:1}.collage-team img{height:100%;width:100%;object-fit:cover;object-position:40% center}.editorial-collage figcaption{position:absolute;bottom:16px;left:19px;right:19px;color:var(--panel);font:10px var(--mono);text-shadow:0 1px 4px #000c}.collage-app{grid-column:6/13;grid-row:2/8;z-index:2;align-self:start;transform:rotate(5deg);padding-top:20px}.collage-app .desktop{border-width:4px;border-radius:8px;box-shadow:0 3px 0 #777269,0 23px 35px #2921312e}.collage-app>.text-link{background:var(--paper);font-size:12px;float:right;margin-top:15px}.collage-label{grid-column:1/5;grid-row:7/12;padding:26px 20px}.collage-label p{font:500 clamp(42px,4.2vw,62px)/1.02 var(--heading);margin-top:38px}.collage-label p span{color:#83796d}.collage-mobile{grid-column:6/9;grid-row:7/13;position:relative;z-index:4;align-self:start;transform:rotate(-8deg);padding-top:10px}.collage-mobile .phone{width:230px;max-width:100%}.collage-mobile>span{display:block;font:8px var(--mono);margin-top:20px;white-space:nowrap}.collage-hotel{grid-column:8/13;grid-row:8/13;position:relative;align-self:stretch;min-height:380px;background:#bbad94}.collage-hotel img{height:100%;width:100%;object-fit:cover;object-position:60% center} .closing{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-block:65px 75px;gap:30px}.closing h2{font-size:clamp(62px,7.2vw,110px);margin-top:26px}.round-link{width:135px;height:135px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font:66px/1 var(--body);transition:background 200ms var(--ease),color 200ms var(--ease),transform 200ms var(--ease)}@media(hover:hover) and (pointer:fine){.round-link:hover{background:var(--ink);color:var(--paper);transform:rotate(12deg)}}.site-footer{border-top:1px solid var(--line)}.footer-signature{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:50px 0 36px;isolation:isolate}.footer-word{font:400 clamp(140px,27.5vw,418px)/.83 var(--display);letter-spacing:-.01em;padding-top:.04em}.footer-signature img{width:27%;max-width:340px;filter:drop-shadow(10px 22px 13px #191b1b24)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;font:10px/1.5 var(--mono);padding:20px 0 28px;border-top:1px solid var(--line)}.footer-bottom a{min-height:44px;display:flex;align-items:center;gap:25px} dialog{border:1px solid var(--line);padding:0;width:min(95vw,1500px);max-width:none;max-height:94vh;background:var(--paper);color:var(--ink);box-shadow:0 40px 100px #0007}dialog::backdrop{background:#15131acc;backdrop-filter:blur(6px)}.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 22px;border-bottom:1px solid var(--line)}.dialog-toolbar h2{font:500 26px/1.2 var(--heading)}.dialog-close{display:flex;align-items:center;gap:20px;padding:10px 16px;background:var(--ink);color:var(--paper);min-height:44px;font-size:13px}.dialog-close span{font-size:22px;line-height:1}.dialog-scroll{overflow:auto;max-height:74vh;background:var(--panel)}.dialog-scroll img{width:100%;max-width:none;height:auto}dialog>p{font-size:12px;margin:10px 22px 14px}.js-off .tab-list{display:none} .no-js .tab-list,.no-js .view-screen,.no-js .voice-controls .segmented,.no-js .tool-switch{display:none} [data-depth],.app-phone,.human-photo{translate:var(--pointer-x,0px) calc(var(--pointer-y,0px) + var(--scroll-y,0px))} .human-photo{height:calc(100% + 48px);margin-top:-24px} .human-paper{z-index:3}.human-telephone{z-index:2} .skip-link{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap} .skip-link:focus{clip-path:none;width:auto;height:auto;overflow:visible} @media(min-width:1700px){.hero-stage{height:740px}.hero-desktop{top:64px;width:69%}.hero-phone{bottom:34px;right:9%;width:18.5%}.hero-intro h2{font-size:48px}.human-stage{height:890px}} @media(max-width:1100px){.edition{display:none}.hero-aside{gap:18px;font-size:13px}.hero-aside img{width:67px}.hero-word{font-size:30vw}.hero-intro{gap:28px;grid-template-columns:1fr 1.2fr auto}.hero-intro h2{font-size:34px}.hero-intro p{font-size:13px}.hero-stage{height:540px}.hero-desktop{top:82px;left:6%;width:77%}.hero-phone{right:5%;width:22%;min-width:170px;bottom:48px}.stage-emblem{width:21%;left:1%;bottom:37px}.manifesto-bottom{padding-left:5%;grid-template-columns:.4fr 1.2fr 1fr;gap:34px}.human-stage{height:680px}.human-paper{width:330px;padding:28px;bottom:60px}.human-paper>p{font-size:43px}.human-telephone{left:15%;width:53%}.app-heading{gap:45px}.app-showroom{min-height:730px;grid-template-columns:37% 63%}.app-editorial{padding:35px 28px}.app-phone{width:258px}.app-side-note{right:20px;font-size:9px}.access-grid{gap:18px}.web-product,.togo-product{padding-inline:23px}.chat-example{width:73%;right:-4px}.access-card{height:215px;padding:20px}.front-card strong{font-size:38px;margin-top:13px}.front-card>div img{width:45px}.front-card small{font-size:6px}.link-slip{font-size:13px;padding:14px 18px}.voice-heading{grid-template-columns:1.4fr .8fr;gap:40px}.voice-controls{align-items:flex-start}.voice-controls>p{font-size:15px}.segmented button{font-size:12px;padding-inline:13px}.voice-node{width:180px}.path-line{margin-inline:18px}.tools-inner{gap:20px;grid-template-columns:1fr 1fr}.tool-core{width:225px;left:11%;top:231px}.tool-block{width:176px;padding:18px}.tool-block-two{top:124px;right:-8%}.tool-block-three{right:-5%}.tool-block-one{left:2%;top:32px}.tool-block strong{font-size:27px}.tool-block>span:last-child{font-size:10px}.editorial-collage{grid-template-rows:repeat(12,68px);min-height:940px}.collage-mobile{grid-column:5/9;grid-row:7/13;justify-self:center}.collage-mobile .phone{width:196px}.collage-hotel{grid-column:8/13;grid-row:8/13;min-height:320px}.footer-word{font-size:29vw}.footer-signature img{width:28%}} @media(max-width:767px){.site-header{height:70px;gap:18px}.brand{gap:7px}.brand span{font-size:26px}.brand img{width:31px;height:25px}.site-header nav{gap:22px;font-size:12px}.site-header nav a:last-child{display:none}.hero-word-row{padding-top:28px;align-items:flex-end}.hero-word{font-size:35vw;line-height:.86}.hero-aside{margin-bottom:3px}.hero-aside img{width:55px}.hero-aside span{display:none}.hero-intro{display:grid;grid-template-columns:1fr;gap:18px;padding:27px 0 30px}.hero-intro h2{font-size:42px;line-height:1;max-width:340px}.hero-intro h2 br{display:none}.hero-intro p{font-size:14px;max-width:390px}.hero-intro .button{justify-self:start;margin-top:3px;padding:12px 17px;min-height:49px}.hero-stage{height:550px;margin-inline:calc(-1*var(--gutter));perspective:1100px}.stage-note{top:22px;left:22px;font-size:9px}.hero-desktop{top:150px;left:-14%;width:91%;transform:rotateY(11deg) rotateZ(-8deg);border-width:4px;border-radius:8px}.hero-desktop .desktop-chrome{height:16px;font-size:5px;padding:0 6px}.hero-desktop .window-dots{font-size:4px}.hero-phone{right:11%;top:55px;bottom:auto;min-width:0;width:46%;max-width:232px;border-width:6px;border-radius:32px;transform:rotate(8deg)}.hero-phone::after{border-radius:26px}.hero-phone .phone-top{height:26px;font-size:8px}.hero-phone .phone-island{height:14px;width:55px;top:5px}.hero-plinth{width:122%;height:30%;left:-11%;bottom:-5%;transform:rotate(-10deg)}.stage-emblem{left:5%;bottom:46px;width:31%}.hero-orbit{top:-100px;width:150%;height:600px;left:-40%}.stage-caption{inset:auto 22px 17px;font-size:8px;gap:15px}.stage-caption>span:first-child{max-width:100px}.hero-bottom{font-size:9px;padding-block:9px;gap:10px}.hero-bottom>span:last-child{display:none}.hero-bottom a{font-size:11px;gap:15px}.section-kicker{font-size:10px;gap:22px}.section-kicker>span:last-child:not(:first-child){text-align:right;max-width:150px}.section-space{padding-block:80px}.manifesto h2{font-size:clamp(66px,15vw,116px);line-height:.96;margin-top:34px}.manifesto-bottom{grid-template-columns:32px 1fr;padding-left:0;gap:18px;margin-top:30px}.small-arrow{font-size:37px}.manifesto-bottom p{font-size:14px}.manifesto-bottom p:last-child{grid-column:2;font-size:13px;margin-top:0}.human-stage{height:770px}.human-photo{object-position:47% center}.human-shade{background:linear-gradient(180deg,#191b1b55,transparent 40%,#191b1b66)}.human-heading{top:36px;left:22px}.human-heading>span{font-size:9px}.human-heading h2{font-size:100px;line-height:.9;margin-top:22px}.human-paper{width:255px;right:28px;bottom:57px;padding:25px 25px 21px;transform:rotate(3deg)}.human-paper>p{font-size:36px;margin:20px 0 17px}.human-paper>span:not(.section-kicker){font-size:12px}.human-paper .text-link{font-size:11px;margin-top:13px;gap:12px}.human-telephone{left:-14%;bottom:112px;width:67%;transform:rotate(-10deg)}.photo-caption{font-size:8px;left:22px;bottom:17px}.app-heading{grid-template-columns:1fr;gap:26px;margin:30px 0 38px}.app-heading h2{font-size:66px}.app-heading p{font-size:14px;max-width:380px}.app-showroom{display:flex;flex-direction:column;min-height:0}.app-editorial{padding:0 20px 24px}.index-type{display:none}.tab-list{display:grid;grid-template-columns:1fr 1fr}.tab-list button{font-size:25px;padding:16px 0 12px;min-height:57px;margin-inline:0 18px}.tab-list button:nth-child(even){margin:0}.tab-list button[aria-selected=true]{padding-left:0}.tab-list button span{font-size:20px}.app-description{font-size:13px;margin-top:20px;min-height:52px;max-width:none}.app-editorial>.text-link{font-size:12px;margin-top:10px}.app-panel{height:690px;min-height:0;order:-1}.app-phone{width:248px;margin-top:4px}.app-background-word{font-size:69px;left:19px;top:21px}.app-side-note{right:12px;top:35%;font-size:8px;gap:20px}.side-line{height:60px}.screen-caption{bottom:20px;font-size:9px}.access-section{padding-bottom:0}.access-section>h2{font-size:68px;margin:30px 0 36px}.access-grid{grid-template-columns:1fr;gap:22px}.web-product,.togo-product{padding:25px 23px 0}.access-grid h3{font-size:57px}.access-grid article>p{font-size:13px;min-height:0;margin-top:19px}.product-topline{font-size:9px;margin-bottom:18px}.browser-scene{height:409px;margin-top:30px}.mini-browser{width:104%;top:10px;height:310px}.website-example{padding:20px}.website-example>div{font-size:32px}.chat-example{width:79%;top:103px;padding:12px;right:-10px}.chat-bubble{font-size:10px;padding:10px}.chat-header{font-size:11px}.ai-disclosure{font-size:9px}.product-foot{font-size:9px;gap:14px}.product-foot>a{font-size:10px;gap:12px}.togo-scene{height:375px}.access-card{top:65px;height:195px;left:0;width:97%;padding:20px}.back-card{top:43px;left:6%;padding:0}.front-card strong{font-size:39px;margin-top:11px}.front-card>div img{width:46px}.front-card>div{font-size:18px}.card-line{margin:12px 0 6px}.front-card small{font-size:6px}.link-slip{bottom:25px;right:-8px;font-size:12px;gap:18px}.link-slip>span:first-child{font-size:34px}.togo-ring{left:-20%;width:400px;height:400px;top:-10px}.voice-heading{grid-template-columns:1fr;gap:25px;margin:30px 0 32px}.voice-heading h2{font-size:58px}.voice-heading>p{font-size:14px}.voice-demonstration{padding-top:26px}.voice-controls{flex-direction:column;gap:25px}.segmented{width:100%;padding:3px;gap:3px}.segmented button{flex:1;padding:10px 8px;font-size:11px;min-height:44px}.voice-controls>p{font-size:16px;min-height:51px}.voice-path{margin:28px 0 30px;justify-content:space-between}.voice-node{width:29%;min-height:123px;font-size:9px;gap:12px}.node-symbol{font-size:36px;width:53px;height:53px}.voice-core img{width:55px;height:44px}.voice-core{box-shadow:4px 5px 0 #d2c7da}.path-line{margin-inline:8px}.thinker-symbol{gap:3px;padding-block:4px}.thinker-symbol i{width:16px;height:16px}.voice-result{font-size:13px;gap:18px;min-height:85px;margin-bottom:26px}.result-arrow{font-size:29px}.voice-foot{flex-direction:column;gap:10px;font-size:11px;padding:17px 0}.tools-inner{grid-template-columns:1fr;gap:10px;padding-block:64px 10px;min-height:0}.tools-copy h2{font-size:86px;margin-top:30px}.tools-copy>p{font-size:14px;margin-top:24px;max-width:420px}.tools-copy>.tools-secondary{font-size:13px;margin-top:20px}.tool-switch{margin-top:27px}.tools-copy>.tools-caption{font-size:10px}.tool-sculpture{height:525px;max-width:430px;width:100%;margin:15px auto 0}.tool-core{top:184px;width:212px;height:177px;left:17%;box-shadow:8px 10px 0 #ad9dbd,15px 24px 22px #4632553b}.tool-core img{width:120px}.tool-core>span{font-size:7px}.tool-block{width:154px;min-height:123px;padding:15px 18px;gap:3px}.tool-icon{font-size:24px;margin-bottom:9px}.tool-block strong{font-size:24px}.tool-block>span:last-child{font-size:9px}.tool-block-one{top:23px;left:2%}.tool-block-two{top:81px;right:-1%}.tool-block-three{right:3%;bottom:22px}.tool-orbit{left:-30%;top:95px;width:500px;height:500px}.possibilities-heading{flex-direction:column;align-items:start;gap:26px;margin:30px 0 42px}.possibilities-heading h2{font-size:70px}.possibilities-heading p{font-size:14px}.editorial-collage{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(15,64px);gap:0;min-height:1140px}.collage-team{grid-column:1/6;grid-row:1/5}.collage-app{grid-column:2/7;grid-row:4/8;padding-top:0;margin-left:-10px;margin-right:0;transform:rotate(5deg)}.collage-app .desktop{border-width:3px;border-radius:6px}.collage-app .desktop-chrome{height:17px;font-size:5px;padding-inline:5px;gap:5px}.collage-app .window-dots{font-size:4px}.collage-app>.text-link{font-size:10px;min-height:44px;gap:14px;margin-top:9px}.collage-label{grid-column:1/4;grid-row:8/12;padding:0;margin-top:18px}.collage-label>img{width:53px}.collage-label p{font-size:33px;line-height:1.04;margin-top:26px}.collage-mobile{grid-column:4/7;grid-row:8/15;justify-self:start;padding-top:18px;width:100%;transform:rotate(7deg);margin-left:0}.collage-mobile .phone{width:170px;border-width:5px;border-radius:25px;box-shadow:inset 0 0 0 1px #787573,2px 2px 0 1px #74706c,0 18px 25px -10px #27213055}.collage-mobile .phone::after{border-radius:21px}.collage-mobile .phone-top{height:24px;font-size:7px;padding-inline:12px}.collage-mobile .phone-island{width:44px;height:12px;top:5px}.collage-mobile>span{font-size:6px;white-space:normal;max-width:140px;margin-top:14px}.collage-hotel{grid-column:1/6;grid-row:12/17;min-height:250px;margin-top:15px;margin-right:0}.editorial-collage figcaption{font-size:8px;left:14px;bottom:12px}.collage-hotel img{object-position:55% center}.closing{padding-block:48px;gap:18px;align-items:end}.closing h2{font-size:52px;margin-top:22px}.closing .section-kicker{max-width:230px;font-size:9px}.round-link{width:58px;height:58px;font-size:32px;margin-bottom:5px}.footer-signature{gap:20px;padding:30px 0}.footer-word{font-size:33vw}.footer-signature img{width:26%;max-width:none}.footer-bottom{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:8px;padding:13px 0 20px}.footer-bottom>span:nth-child(2){grid-column:1;grid-row:2}.footer-bottom>a{grid-column:2;grid-row:1/3;gap:10px}.dialog-toolbar{padding:12px;gap:10px}.dialog-toolbar h2{font-size:22px}.dialog-close{font-size:0;gap:0;padding:9px 16px}.dialog-close span{font-size:24px}.dialog-scroll img{width:1100px}.dialog-scroll{max-height:72vh}dialog>p{font-size:10px;margin-inline:12px}.dialog-scroll::after{content:"Seitlich scrollen für die vollständige Desktop-Ansicht.";display:block;padding:12px;font-size:12px;position:sticky;left:0;width:90vw}} @media(max-width:370px){.site-header nav{gap:17px;font-size:11px}.hero-intro h2{font-size:37px}.hero-aside img{width:45px}.hero-stage{height:476px}.hero-phone{width:48%;right:7%;top:55px}.hero-desktop{top:155px;width:90%}.stage-emblem{bottom:43px;width:33%}.hero-bottom{font-size:8px}.hero-bottom a{font-size:10px}.manifesto h2{font-size:65px}.human-paper{width:235px;right:24px;padding:24px}.human-paper>p{font-size:34px}.human-telephone{bottom:119px;left:-25%;width:83%}.app-heading h2{font-size:57px}.app-panel{height:635px}.app-phone{width:229px;transform:rotate(-5deg)}.app-background-word{font-size:57px}.app-side-note{display:none}.app-editorial{padding-inline:16px}.tab-list button{font-size:23px}.access-section>h2{font-size:61px}.web-product,.togo-product{padding-inline:20px}.access-grid h3{font-size:51px}.chat-example{width:88%;right:-13px}.product-foot{font-size:8px}.product-foot>a{font-size:9px}.front-card{height:174px;padding:16px}.front-card strong{font-size:35px;margin-top:8px}.front-card>div img{width:39px}.front-card small{font-size:5.5px}.back-card{height:174px}.voice-heading h2{font-size:50px}.voice-node{font-size:8px;min-height:115px}.path-line{margin-inline:6px}.tool-core{width:180px;left:18%;height:160px}.tool-block{width:134px;padding:15px;min-height:118px}.tool-block-two{top:80px}.tool-block strong{font-size:22px}.tool-block>span:last-child{font-size:8px}.possibilities-heading h2{font-size:62px}.collage-label p{font-size:28px}.editorial-collage{grid-template-rows:repeat(15,59px);min-height:1060px}.collage-mobile .phone{width:140px}.collage-app{grid-row:4/8}.collage-label,.collage-mobile{grid-row:8/12}.collage-hotel{grid-row:12/17;min-height:230px}.closing h2{font-size:43px}.round-link{width:49px;height:49px;font-size:27px}.footer-bottom{font-size:7px}} @media(max-width:767px){.site-header{position:relative;height:86px;padding-bottom:16px}.edition{display:block;position:absolute;bottom:6px;left:0;font-size:8px}.edition span{margin-inline:6px}.app-showroom{display:grid;grid-template-columns:1fr;background:var(--panel)}.app-editorial{display:contents}.tab-list{grid-column:1;grid-row:1;padding:0 20px 10px;background:var(--panel)}.app-panel{order:0;grid-column:1;grid-row:2}.app-description{grid-column:1;grid-row:3;padding:22px 20px 8px;margin:0;min-height:0}.app-editorial>.text-link{grid-column:1;grid-row:4;justify-self:start;margin:0 20px 20px}.app-side-note{display:none}.collage-mobile{margin-left:-12px;width:calc(100% - 12px)}.human-telephone{left:-17%;bottom:109px;width:68%}.no-js .app-panel{grid-row:1}.no-js .app-description{grid-row:2;padding-bottom:24px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-property:color,background-color,border-color,opacity!important;transition-duration:.18s!important;transition-delay:0s!important}.hero-desktop,.hero-phone,.stage-emblem,.front-card,.link-slip,.app-phone,.human-photo{translate:none!important}.app-phone.is-changing{transform:rotate(-7deg)}.tool-block.changed{transform:none}} @media(forced-colors:active){.ink{mask:none!important}.hero-stage,.app-panel,.tools-section,.access-card,.tool-block,.tool-core{border:1px solid CanvasText}.dot-plane,.app-panel-dots,.tool-grid-floor{display:none}.button,.segmented button.is-active{border:2px solid ButtonText}.hero-word,.footer-word{color:CanvasText}} /* Owner screenshot corrections R1 — 2026-09-08. */ .manifesto .idea-mark{width:clamp(88px,8.3vw,128px);height:auto} .small-arrow{display:inline-block;justify-self:start;will-change:auto} .small-arrow.is-in-view{animation:idea-arrow-vertical 1.6s cubic-bezier(.45,0,.55,1) 3 both} @keyframes idea-arrow-vertical{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}} .sample-qr{position:absolute;right:28px;top:86px;width:104px;text-align:center;transform:none} .sample-qr img{width:100%;height:auto;aspect-ratio:1;background:#fff} .sample-qr figcaption{font:7px/1.25 var(--mono);letter-spacing:.04em;margin-top:5px;color:var(--ink)} .front-card>.card-line{width:calc(100% - 126px)} .front-card>small{display:block;max-width:calc(100% - 120px)} .product-foot>span:last-child{text-align:right} .tool-core-title{font:500 55px/.93 var(--heading);letter-spacing:-.02em;align-self:flex-start;margin-left:35px} .tool-core>span{margin-top:17px} .collage-label p{margin-top:0} .footer-signature{justify-content:flex-start} @media(max-width:1100px){.sample-qr{width:91px;right:23px;top:74px}.front-card>.card-line{width:calc(100% - 106px)}.front-card>small{max-width:calc(100% - 101px)}.tool-core-title{font-size:48px;margin-left:27px}} @media(max-width:767px){.hero-aside{display:none}.sample-qr{width:87px;right:20px;top:68px}.sample-qr figcaption{font-size:6px;margin-top:4px}.front-card>.card-line{width:calc(100% - 103px)}.front-card>small{max-width:calc(100% - 101px);line-height:1.4}.tool-core-title{font-size:44px;margin-left:26px}.tool-core>span{margin-top:15px}.collage-label p{margin-top:0}} @media(max-width:370px){.sample-qr{width:76px;right:16px;top:59px}.front-card>.card-line{width:calc(100% - 87px)}.front-card>small{max-width:calc(100% - 87px)}.sample-qr figcaption{font-size:5.5px}.tool-core-title{font-size:38px;margin-left:22px}} @media(prefers-reduced-motion:reduce){.small-arrow.is-in-view{animation:none!important;transform:none!important}} .voice-heading{margin-bottom:0}.voice-section{padding-bottom:clamp(54px,5vw,80px)} /* Editorial connection: a line leads from the idea into the everyday-life scene. */ .idea-route{position:relative;display:block;justify-self:start;width:190px;height:200px;color:var(--accent);line-height:1;text-decoration:none;--route-progress:1} .idea-route>span{position:absolute;left:53px;top:8px;font:10px/1.4 var(--mono);letter-spacing:.06em;color:var(--muted)} .idea-route svg{display:block;width:100%;height:100%;overflow:visible} .idea-route path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .route-track{stroke-width:1.35;opacity:.18} .route-trace{stroke-width:2.75;stroke-dasharray:none;stroke-dashoffset:0} .route-origin{stroke-width:1.2;opacity:.5} .route-tip{stroke-width:2.75} @media(max-width:767px){.manifesto-bottom{grid-template-columns:92px minmax(0,1fr);gap:22px}.idea-route{width:88px;height:150px;margin-top:6px}.idea-route>span{left:3px;top:-15px;font-size:8px;letter-spacing:.03em}} @media(max-width:370px){.manifesto-bottom{grid-template-columns:72px minmax(0,1fr);gap:18px}.idea-route{width:68px;height:151px}.idea-route>span{font-size:7px}} @media(prefers-reduced-motion:reduce){.route-trace{stroke-dashoffset:0!important}} @media(forced-colors:active){.idea-route{color:CanvasText}.route-track{opacity:.35}} /* One editorial line language, composed for each scene. */ .editorial-route{color:var(--accent);--route-progress:1;pointer-events:none;user-select:none;cursor:default} .editorial-route *{pointer-events:none;cursor:default} .editorial-route path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} svg.editorial-route{position:absolute;display:block;pointer-events:none;overflow:visible} .editorial-route .route-track{stroke-width:1.35;opacity:.18} .editorial-route .route-trace,.editorial-route .route-tip{stroke-width:2.75} .hero-route{inset:0;width:100%;height:100%;z-index:0} .hero-desktop{z-index:1} .human-route{width:52%;height:190px;left:18%;bottom:80px;z-index:2;color:var(--panel);filter:drop-shadow(0 1px 2px #191b1b66)} .human-heading{z-index:3} .app-route{inset:0;width:100%;height:100%;z-index:0} .app-phone{z-index:1} .app-side-note,.screen-caption{z-index:2} .web-route,.togo-route{inset:0;width:100%;height:100%;z-index:0} .mini-browser,.access-card,.link-slip{z-index:1} .togo-ring{border-color:transparent} .voice-route{display:block;position:relative;width:410px;height:100px;margin:36px 0 -24px auto} .voice-route>span{position:absolute;left:57px;top:68px;font:10px/1.5 var(--mono);letter-spacing:.035em;color:var(--muted)} .voice-route svg,.closing-route svg{display:block;width:100%;height:100%;overflow:visible} .tools-route{inset:0;width:100%;height:100%;z-index:1} .tool-core,.tool-block{z-index:2} .tool-orbit{border-color:transparent} .tools-route .route-track{opacity:.24} .collage-route{left:2%;top:75%;width:34%;height:21%;z-index:0} .collage-label,.collage-hotel{position:relative;z-index:1} .closing-route{display:block;position:relative;width:260px;height:190px;flex-shrink:0} .closing-route>span{position:absolute;left:24px;top:16px;font:11px/1.5 var(--mono);letter-spacing:.06em} @media(max-width:1100px){.human-route{left:12%;width:54%;bottom:76px}.closing-route{width:205px;height:175px}.voice-route{width:360px}.collage-route{top:74%;height:22%}} @media(max-width:767px){ .editorial-route .route-trace,.editorial-route .route-tip{stroke-width:2.5} .hero-route{inset:auto 0 0;height:85%} .human-route{left:5%;bottom:36px;width:88%;height:140px} .app-route{inset:0 -15%;width:130%;height:100%} .voice-route{width:min(100%,350px);height:105px;margin:28px 0 -24px auto} .voice-route>span{left:22px;top:68px;font-size:9px} .collage-route{left:0;top:57%;width:43%;height:10%} .closing{flex-wrap:wrap;gap:22px} .closing>div{width:100%} .closing-route{width:190px;height:135px;margin:0 0 0 auto} .closing-route>span{left:8px;top:6px;font-size:10px} } @media(max-width:370px){.voice-route>span{font-size:8px;left:16px}.collage-route{top:57%;height:9%}.closing-route{width:175px;height:125px}} @media(prefers-reduced-motion:reduce){.editorial-route .route-trace{stroke-dashoffset:0!important}} @media(forced-colors:active){.editorial-route{color:CanvasText}a.editorial-route{color:LinkText}.human-route{filter:none}.editorial-route .route-track{opacity:.35}} .footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px}.footer-bottom{flex-wrap:wrap;row-gap:24px}.footer-legal a{text-underline-offset:4px} .index-type{color:var(--muted)} .site-header nav a[href*="signin"]{display:inline-flex} @media(max-width:600px){.site-header{height:auto;min-height:100px;flex-wrap:wrap;padding-block:14px;gap:12px}.site-header .edition{display:none}.site-header nav{width:100%;order:3;justify-content:space-between;gap:12px;font-size:12px}.site-header nav a{padding-block:8px}} .pricing-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;margin:28px 0 50px}.pricing-heading h2,.faq-section h2{font-family:var(--display);font-size:clamp(54px,7vw,100px);line-height:.94;letter-spacing:-.02em;margin:0}.pricing-heading>p{max-width:380px;line-height:1.6}.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--ink)}.price-entry{padding:32px;display:flex;flex-direction:column;gap:22px}.price-entry+ .price-entry{border-left:1px solid var(--line)}.price-entry h3{font:400 40px/1 var(--display);margin:0}.price-entry p{margin:0;line-height:1.6}.price-entry .price-number{display:flex;align-items:baseline;gap:12px}.price-number>span:first-child{font:400 80px/1 var(--display)}.price-number>span:last-child{font-size:13px}.price-entry .button{margin-top:auto;justify-content:space-between;font-size:13px}.price-note{font-size:12px;line-height:1.6;margin-top:20px}.faq-section{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;padding-bottom:80px}.faq-section h2{margin-top:28px}.faq-list{border-top:1px solid var(--ink)}.faq-list details{border-bottom:1px solid var(--line);padding:22px 0}.faq-list summary{cursor:pointer;font-size:18px;line-height:1.5}.faq-list p{font-size:15px;line-height:1.65;max-width:570px;margin:18px 0 4px}.faq-list a{text-decoration:underline;text-underline-offset:3px} @media(max-width:760px){.pricing-heading,.faq-section{grid-template-columns:1fr;gap:28px}.price-grid{grid-template-columns:1fr}.price-entry{padding:28px 0}.price-entry+ .price-entry{border-left:0;border-top:1px solid var(--line)}.price-entry .button{width:100%;max-width:360px}.faq-section{padding-bottom:48px}.site-header nav{gap:15px}} /* /assets/editorial-20260908/ink.css */ .ink{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='ink'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='3' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .35 .88 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath fill='white' filter='url(/assets/editorial-20260908/%23ink)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");mask-size:160px 160px;mask-repeat:repeat} /* /assets/photography-20260909-r4/photography.css */ /* Photograph crops and one isolated voice symbol in the approved editorial system. */ /* Give the ink mask room above/below the glyphs without moving the title or row. */ .hero-word { padding-top: .1em; padding-bottom: .04em; margin-top: -.07em; margin-bottom: -.04em; } .footer-word { padding-top: .11em; padding-bottom: .04em; margin-top: -.07em; margin-bottom: -.04em; } .human-photo { object-position: 50% 47%; } .human-picture { display: contents; } .human-heading h2 { font-size: clamp(100px, 9vw, 138px); } .voice-section { position: relative; } .voice-art { position: absolute; width: 235px; left: 2%; bottom: 18px; margin: 0; pointer-events: none; } .voice-art img { width: 100%; height: auto; } .voice-heading { position: relative; z-index: 1; } .story-cutout { display: block; height: auto; pointer-events: none; } .app-editorial.has-still-life { position: relative; } .notebook-art { position: absolute; top: 22px; right: 24px; width: clamp(112px, 11vw, 142px); } .has-still-life .tab-list button[aria-selected="false"] { color: #6b645d; } @media (min-width: 768px) and (max-width: 1100px) { .human-heading h2 { font-size: clamp(58px, 6.8vw, 74px); } } @media (max-width: 767px) { .human-photo { height: 108%; margin-top: 0; object-position: 50% 0; } .voice-art { position: relative; width: 215px; bottom: auto; left: auto; margin: 18px 0 2px; } .notebook-art { position: static; grid-column: 1; grid-row: 3; width: 110px; justify-self: end; align-self: center; margin: 0 16px 0 0; } .has-still-life .app-description { padding-right: 136px; min-height: 112px; } .no-js .notebook-art { grid-row: 2; } .possibilities-heading:has(.hotel-key-art) p { width: 100%; min-height: 100px; } } /* /assets/homepage-conversion-20260910/navigation.css */ /* AIOOS homepage conversion navigation. Current editorial tokens remain authoritative. */ html.aioos-conversion { --navigation-height: 76px; scroll-padding-top: calc(var(--navigation-height) + 24px); } html.aioos-conversion body { position: relative; } html.aioos-conversion .site-header { position: sticky; top: 0; z-index: 60; height: var(--navigation-height); min-height: 0; flex-wrap: nowrap; gap: 28px; padding-block: 0; background: var(--paper); transition: box-shadow var(--dur-fast, 180ms) var(--ease), border-color var(--dur-fast, 180ms) var(--ease); } html.aioos-conversion .site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--gutter) * -1); background: var(--paper); pointer-events: none; border-bottom: 1px solid transparent; } html.aioos-conversion.nav-scrolled .site-header { border-color: transparent; } html.aioos-conversion.nav-scrolled .site-header::before { border-bottom-color: var(--line); box-shadow: 0 5px 18px #191b1b0b; } html.aioos-conversion .site-header > .edition { display: none; } html.aioos-conversion .site-header nav { width: auto; margin-left: auto; gap: clamp(18px, 2.1vw, 34px); order: 0; font-size: 13px; } html.aioos-conversion .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; white-space: nowrap; } html.aioos-conversion .site-header nav a[aria-current="location"] { color: var(--accent); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; } html.aioos-conversion .nav-demo { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 19px; min-height: 44px; padding: 10px 17px; background: var(--ink); color: var(--panel); border: 1px solid var(--ink); font-size: 13px; line-height: 1.2; font-weight: 600; white-space: nowrap; transition: background var(--dur-nav, 160ms) var(--ease), color var(--dur-nav, 160ms) var(--ease); } html.aioos-conversion .nav-demo span { font-size: 20px; font-weight: 400; } html.aioos-conversion.nav-inline-primary .nav-demo { background: var(--paper); color: var(--ink); border-color: var(--line); } @media (hover: hover) and (pointer: fine) { html.aioos-conversion .nav-demo:hover { background: var(--accent); color: var(--panel); border-color: var(--accent); } } html.aioos-conversion .nav-menu-toggle { display: none; } html.aioos-conversion .conversion-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; } html.aioos-conversion .conversion-actions .button { margin: 0; } html.aioos-conversion .demo-cta { font-weight: 600; } html.aioos-conversion .conversion-secondary { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 5px; } @media (hover: hover) and (pointer: fine) { html.aioos-conversion .conversion-secondary:hover { color: var(--accent); } } html.aioos-conversion .conversion-secondary span { font-size: 20px; } html.aioos-conversion .price-entry .button { background: transparent; color: var(--ink); border: 1px solid var(--line); transform: none; } @media (hover: hover) and (pointer: fine) { html.aioos-conversion .price-entry .button:hover { background: var(--tint); border-color: var(--accent); } } html.aioos-conversion .closing-actions { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 13px; } html.aioos-conversion .closing > .closing-route { width: 150px; height: 120px; margin: 0; } html.aioos-conversion .closing > .closing-route > span { display: none; } html.aioos-conversion .editorial-route, html.aioos-conversion .editorial-route * { pointer-events: none; cursor: default; } html.aioos-conversion .editorial-route:hover { color: var(--accent); } html.aioos-conversion .human-route:hover { color: var(--panel); } html.aioos-conversion .human-route { display: none; } html.aioos-conversion .editorial-route:hover > span { color: var(--muted); text-decoration: none; } html.aioos-conversion .back-to-top { position: fixed; z-index: 55; left: max(18px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-ui); box-shadow: 0 4px 16px #191b1b10; font-size: 12px; line-height: 1.2; } html.aioos-conversion .back-to-top[hidden] { display: none; } html.aioos-conversion .back-to-top > span:first-child { font-size: 24px; line-height: 1; } @media (hover: hover) and (pointer: fine) { html.aioos-conversion .back-to-top:hover { border-color: var(--accent); background: var(--tint); } } html.aioos-conversion .navigation-sentinel { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; opacity: 0; } html.aioos-conversion .skip-link { z-index: 90; } html.aioos-conversion .site-header :focus-visible, html.aioos-conversion .conversion-actions :focus-visible, html.aioos-conversion .closing-actions :focus-visible, html.aioos-conversion .back-to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } @media (max-width: 900px) { html.aioos-conversion { --navigation-height: 68px; } html.aioos-conversion .site-header { gap: 14px; } html.aioos-conversion .site-header nav { gap: 18px; font-size: 12px; } html.aioos-conversion .nav-demo { padding-inline: 13px; gap: 10px; font-size: 12px; } html.aioos-conversion .closing > .closing-route { display: none; } } @media (max-width: 760px) { html.aioos-conversion { --navigation-height: 66px; } html.aioos-conversion .site-header { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; width: calc(100% - 36px); padding: 0; } html.aioos-conversion .site-header::before { inset-inline: -18px; } html.aioos-conversion .nav-demo { grid-column: 2; grid-row: 1; justify-self: end; font-size: 12px; min-height: 44px; padding: 10px 13px; gap: 9px; } html.aioos-conversion .nav-demo span { font-size: 18px; } html.aioos-conversion.nav-ready .nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; grid-column: 3; grid-row: 1; background: none; border: 1px solid var(--line-ui); min-height: 44px; min-width: 54px; padding: 9px; font-size: 12px; } html.aioos-conversion .nav-menu-toggle > span { font-size: 17px; line-height: 1; } html.aioos-conversion .site-header nav { grid-row: 2; grid-column: 1/-1; width: 100%; margin: 0; font-size: 13px; } html.aioos-conversion.nav-ready .site-header nav { display: grid; position: absolute; top: 100%; left: -18px; right: -18px; width: auto; grid-template-columns: 1fr 1fr; gap: 0 20px; padding: 12px 22px 18px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #191b1b0b; max-height: calc(100dvh - var(--navigation-height)); overflow-y: auto; } html.aioos-conversion.nav-ready .site-header nav[hidden] { display: none; } html.aioos-conversion.nav-ready .site-header nav a { min-height: 48px; border-bottom: 1px solid var(--line); padding-block: 12px; } html.aioos-conversion:not(.nav-ready) .site-header { height: auto; min-height: var(--navigation-height); padding-block: 10px; } html.aioos-conversion:not(.nav-ready) .site-header nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 15px; } html.aioos-conversion .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 23px; } html.aioos-conversion .hero-actions .button { min-height: 50px; padding-inline: 18px; } html.aioos-conversion .closing-actions { width: auto; } html.aioos-conversion .back-to-top { left: max(14px, env(safe-area-inset-left)); min-height: 46px; min-width: 46px; padding: 10px 12px; } html.aioos-conversion .back-to-top > span:last-child { display: none; } } @media (max-width: 350px) { html.aioos-conversion .site-header { width: calc(100% - 24px); gap: 8px; } html.aioos-conversion .site-header::before { inset-inline: -12px; } html.aioos-conversion .nav-demo { padding-inline: 9px; gap: 6px; } html.aioos-conversion .nav-menu-toggle { min-width: 46px; padding-inline: 6px; } } @media (max-height: 450px) and (max-width: 1000px) { html.aioos-conversion .site-header { position: relative; } } @media (prefers-reduced-motion: reduce) { html.aioos-conversion { scroll-behavior: auto; } html.aioos-conversion .site-header, html.aioos-conversion .nav-demo, html.aioos-conversion .demo-cta { transition: none; } } @media (forced-colors: active) { html.aioos-conversion .site-header, html.aioos-conversion .site-header::before, html.aioos-conversion .site-header nav { background: Canvas; } html.aioos-conversion .nav-demo, html.aioos-conversion .back-to-top { color: ButtonText; background: ButtonFace; border-color: ButtonText; } } /* Mark-only home link: retain an accessible click area without a word label. */ html.aioos-conversion .site-header > .brand { min-width: 44px; min-height: 44px; justify-content: center; } /* /assets/conversion-20260910/product-film.css */ /* AIOOS product demonstration: scoped to this section; original film unchanged. */ .aioos-product-film { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: 'copy figure' 'details figure'; align-items: start; gap: 0 clamp(32px, 5vw, 80px); padding-block: clamp(64px, 7vw, 112px); border-top: 1px solid var(--line, #aaa597); color: var(--ink, #191b1b); } .aioos-product-film__copy, .aioos-product-film__figure, .aioos-product-film__details { min-width: 0; } .aioos-product-film__copy { grid-area: copy; } .aioos-product-film__details { grid-area: details; } .aioos-product-film__eyebrow { margin: 0 0 23px; font: 11px/1.5 var(--mono, 'IBM Plex Mono', monospace); text-transform: uppercase; letter-spacing: .04em; color: var(--accent, #473b70); } .aioos-product-film h2 { margin: 0; font: 600 clamp(52px, 5.4vw, 86px)/.98 var(--heading, 'Arial Narrow', sans-serif); letter-spacing: -.025em; text-wrap: balance; } .aioos-product-film__intro { max-width: 38ch; margin: 24px 0 0; font: 400 clamp(15px, 1.25vw, 18px)/1.65 var(--body, Arial, sans-serif); color: var(--muted, #5f5d56); } .aioos-product-film__steps { display: grid; gap: 0; padding: 0; margin: 32px 0; list-style: none; } .aioos-product-film__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 17px; padding: 15px 0; border-top: 1px solid var(--line, #aaa597); } .aioos-product-film__steps li:last-child { border-bottom: 1px solid var(--line, #aaa597); } .aioos-product-film__steps li > span { padding-top: 3px; color: var(--accent, #473b70); font: 11px/1.5 var(--mono, 'IBM Plex Mono', monospace); } .aioos-product-film__steps strong { display: block; font: 600 15px/1.5 var(--body, Arial, sans-serif); } .aioos-product-film__steps p { margin: 2px 0 0; color: var(--muted, #5f5d56); font: 13px/1.6 var(--body, Arial, sans-serif); } .aioos-product-film__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; } .aioos-product-film__invitation { margin: 13px 0 0; color: var(--muted, #5f5d56); font: 12px/1.6 var(--body, Arial, sans-serif); } .aioos-product-film__figure { grid-area: figure; align-self: center; margin: 0; } .aioos-product-film__frame { position: relative; width: 100%; background: #fff; border: 1px solid var(--line, #aaa597); } .aioos-product-film__video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; color-scheme: light; } .aioos-product-film__video:focus-visible, .aioos-product-film__launch:focus-visible, .aioos-product-film__transcript summary:focus-visible { outline: 3px solid var(--accent, #473b70); outline-offset: 5px; } .aioos-product-film__launch:not([hidden]) { display: block; position: absolute; inset: 0; padding: 0; width: 100%; height: 100%; border: 0; background: #fff; cursor: pointer; } .aioos-product-film__launch img { display: block; width: 100%; height: 100%; object-fit: contain; } .aioos-product-film__launch > span { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 13px 18px; background: var(--ink, #191b1b); color: var(--panel, #f8f4e9); font: 500 14px/1.4 var(--body, Arial, sans-serif); } .aioos-product-film__launch small { margin-left: 12px; color: var(--lilac, #b5a6cd); font: 11px/1.5 var(--mono, 'IBM Plex Mono', monospace); } .aioos-product-film__launch-label { font-weight: inherit; } @media (hover: hover) and (pointer: fine) { .aioos-product-film__launch:hover > span { background: var(--accent, #473b70); } } .aioos-product-film__status { margin-top: 12px; font: 13px/1.6 var(--body, Arial, sans-serif); } .aioos-product-film figcaption { margin-top: 13px; color: var(--muted, #5f5d56); font: 10px/1.5 var(--mono, 'IBM Plex Mono', monospace); } .aioos-product-film__transcript { margin-top: 5px; font: 12px/1.65 var(--body, Arial, sans-serif); } .aioos-product-film__transcript summary { width: fit-content; min-height: 44px; padding: 12px 0; cursor: pointer; text-underline-offset: 4px; } @media (hover: hover) and (pointer: fine) { .aioos-product-film__transcript summary:hover { text-decoration: underline; } } .aioos-product-film__transcript p { max-width: 65ch; margin: 0; padding: 0 0 8px; color: var(--muted, #5f5d56); } @media (max-width: 767px) { .aioos-product-film { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'figure' 'details'; gap: 24px; padding-block: 56px; } .aioos-product-film h2 { font-size: clamp(49px, 12.3vw, 76px); } .aioos-product-film__eyebrow { margin-bottom: 18px; } .aioos-product-film__intro { max-width: 44ch; margin-top: 20px; } .aioos-product-film__steps { margin-block: 0 24px; } .aioos-product-film__steps li { padding-block: 12px; } .aioos-product-film__launch > span { left: 16px; bottom: 16px; } } @media (forced-colors: active) { .aioos-product-film__frame { border-color: CanvasText; } .aioos-product-film__steps li { border-color: CanvasText; } } /* /assets/homepage-conversion-20260910/visual-refinement.css */ /* AIOOS homepage, 10 September 2026. Applied only with body[data-aioos-visual="20260910"], after the approved styles. Same approved mark, typefaces, photographs and entry palette; no generated media. */ /* Owner: plain lettering. Remove the ink texture, including its prefixed form. */ body[data-aioos-visual="20260910"] .ink { -webkit-mask-image: none; mask-image: none; } /* Product and explanation share the opening composition. */ body[data-aioos-visual="20260910"] .hero { display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.42fr); column-gap: clamp(28px, 4vw, 64px); row-gap: 16px; } body[data-aioos-visual="20260910"] .hero-word-row { grid-column: 1; grid-row: 1; padding-top: 24px; align-items: flex-end; } body[data-aioos-visual="20260910"] .hero-word { font-size: clamp(140px, 18.8vw, 270px); line-height: .84; } body[data-aioos-visual="20260910"] .hero-aside { display: none; } body[data-aioos-visual="20260910"] .hero-intro { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; align-self: center; gap: 24px; padding: 20px 0 32px; min-width: 0; } body[data-aioos-visual="20260910"] .hero-intro h2 { font-size: clamp(43px, 4.25vw, 62px); line-height: 1.02; max-width: 8.8em; } body[data-aioos-visual="20260910"] .hero-intro p { font-size: 16px; line-height: 1.65; max-width: 34ch; } body[data-aioos-visual="20260910"] .hero-intro > .button, body[data-aioos-visual="20260910"] .hero-intro > .hero-actions { margin-top: 4px; max-width: 100%; } body[data-aioos-visual="20260910"] .hero-stage { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 0; width: 100%; height: clamp(420px, 34.5vw, 510px); margin-inline: 0; } body[data-aioos-visual="20260910"] .hero-desktop { width: 73%; left: 5%; top: 58px; transform: rotateY(-5deg) rotateX(2deg) rotateZ(-2deg); } body[data-aioos-visual="20260910"] .hero-phone { width: 22%; min-width: 140px; right: 6%; bottom: 47px; transform: rotateY(-5deg) rotateZ(5deg); } body[data-aioos-visual="20260910"] .hero-bottom { grid-column: 1 / -1; margin-top: -10px; } /* Photograph and copy have distinct space, so faces are never covered by a card. */ body[data-aioos-visual="20260910"] .human-stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .9fr); grid-template-rows: auto 1fr; height: auto; width: calc(100% - 2 * var(--gutter)); max-width: 1600px; margin-inline: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); overflow: hidden; } body[data-aioos-visual="20260910"] .human-picture { display: block; grid-column: 1; grid-row: 1 / 3; min-width: 0; min-height: 570px; height: 100%; align-self: stretch; } body[data-aioos-visual="20260910"] .human-photo { display: block; width: 100%; height: 100%; margin-top: 0; object-fit: cover; object-position: 50% 46%; translate: none; } body[data-aioos-visual="20260910"] .human-heading { position: static; grid-column: 2; grid-row: 1; padding: clamp(32px, 3.4vw, 50px) clamp(28px, 3vw, 44px) 0; } body[data-aioos-visual="20260910"] .human-heading h2 { font-size: clamp(58px, 5.7vw, 84px); line-height: .98; margin-top: 24px; text-shadow: none; } body[data-aioos-visual="20260910"] .human-paper { position: static; grid-column: 2; grid-row: 2; align-self: end; width: auto; padding: 42px clamp(28px, 3vw, 44px) 38px; background: transparent; color: var(--ink); transform: none; box-shadow: none; } body[data-aioos-visual="20260910"] .human-paper > p { font-size: clamp(34px, 3vw, 43px); line-height: 1.06; margin: 20px 0; } body[data-aioos-visual="20260910"] .human-paper > span:not(.section-kicker) { font-size: 14px; line-height: 1.7; } body[data-aioos-visual="20260910"] .human-paper .text-link { flex-wrap: wrap; gap: 14px; font-size: 13px; line-height: 1.45; min-height: 44px; } body[data-aioos-visual="20260910"] .human-stage > .photo-caption { position: absolute; inset: auto auto 16px 16px; padding: 7px 9px; color: var(--panel); background: var(--ink); font-size: 10px; line-height: 1.4; z-index: 3; } /* Deliberate image grid: common baselines, no image over another image. */ body[data-aioos-visual="20260910"] .footer-signature { padding-block: 40px 34px; } body[data-aioos-visual="20260910"] .footer-word { font-size: clamp(140px, 23.5vw, 350px); line-height: .86; } @media (max-width: 1100px) and (min-width: 768px) { body[data-aioos-visual="20260910"] .hero { grid-template-columns: minmax(240px, .87fr) minmax(0, 1.3fr); column-gap: 24px; } body[data-aioos-visual="20260910"] .hero-intro { gap: 20px; } body[data-aioos-visual="20260910"] .hero-intro h2 { font-size: 43px; } body[data-aioos-visual="20260910"] .hero-intro p { font-size: 14px; } body[data-aioos-visual="20260910"] .hero-stage { height: 400px; } body[data-aioos-visual="20260910"] .hero-desktop { top: 76px; width: 78%; left: 3%; } body[data-aioos-visual="20260910"] .hero-phone { width: 25%; min-width: 118px; bottom: 43px; right: 6%; } body[data-aioos-visual="20260910"] .hero-stage .stage-note { font-size: 8px; left: 18px; right: 18px; } body[data-aioos-visual="20260910"] .hero-stage .stage-caption { left: 18px; right: 18px; font-size: 8px; } body[data-aioos-visual="20260910"] .human-stage { grid-template-columns: minmax(0, 1.2fr) minmax(310px, 1fr); } body[data-aioos-visual="20260910"] .human-picture { min-height: 565px; } body[data-aioos-visual="20260910"] .human-heading h2 { font-size: 60px; } body[data-aioos-visual="20260910"] .human-paper { padding-top: 30px; } } @media (max-width: 767px) { body[data-aioos-visual="20260910"] .hero { display: block; } body[data-aioos-visual="20260910"] .hero-word-row { padding-top: 18px; } body[data-aioos-visual="20260910"] .hero-word { font-size: 29vw; line-height: .86; } body[data-aioos-visual="20260910"] .hero-intro { gap: 16px; padding: 22px 0 26px; } body[data-aioos-visual="20260910"] .hero-intro h2 { font-size: clamp(34px, 9.8vw, 52px); line-height: 1.02; max-width: 10em; } body[data-aioos-visual="20260910"] .hero-intro p { font-size: 14px; line-height: 1.6; max-width: 39ch; } body[data-aioos-visual="20260910"] .hero-stage { height: clamp(355px, 107vw, 510px); width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); } body[data-aioos-visual="20260910"] .hero-desktop { width: 88%; top: 94px; left: -9%; transform: rotateY(5deg) rotateZ(-4deg); } body[data-aioos-visual="20260910"] .hero-phone { width: 37%; max-width: 188px; min-width: 0; right: 6%; top: 49px; bottom: auto; transform: rotate(4deg); } body[data-aioos-visual="20260910"] .hero-bottom { margin-top: 0; } body[data-aioos-visual="20260910"] .human-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; } body[data-aioos-visual="20260910"] .human-heading { grid-column: 1; grid-row: 1; padding: 28px 24px 26px; } body[data-aioos-visual="20260910"] .human-heading > span { font-size: 10px; } body[data-aioos-visual="20260910"] .human-heading h2 { font-size: clamp(49px, 12.5vw, 78px); line-height: .98; margin-top: 17px; } body[data-aioos-visual="20260910"] .human-picture { grid-column: 1; grid-row: 2; min-height: 0; height: clamp(290px, 91vw, 480px); } body[data-aioos-visual="20260910"] .human-photo { object-position: 50% 44%; } body[data-aioos-visual="20260910"] .human-paper { grid-column: 1; grid-row: 3; padding: 28px 24px 30px; } body[data-aioos-visual="20260910"] .human-paper > p { font-size: 37px; margin-block: 18px; } body[data-aioos-visual="20260910"] .human-paper > span:not(.section-kicker) { font-size: 14px; } body[data-aioos-visual="20260910"] .human-paper .text-link { font-size: 13px; } body[data-aioos-visual="20260910"] .human-stage > .photo-caption { position: static; grid-column: 1; grid-row: 2; align-self: end; justify-self: start; margin: 12px; font-size: 9px; } body[data-aioos-visual="20260910"] .footer-signature { padding-block: 32px 26px; } body[data-aioos-visual="20260910"] .footer-word { font-size: 29vw; } } @media (prefers-reduced-motion: reduce) { body[data-aioos-visual="20260910"] .hero-desktop, body[data-aioos-visual="20260910"] .hero-phone, body[data-aioos-visual="20260910"] .human-photo { translate: none !important; } } /* /assets/homepage-conversion-20260910/card-proportions.css */ /* AI to go: a wallet-card silhouette. Fixed proportions, independent of viewport. This is the existing illustrative card concept, not a manufacturing specification. */ html.aioos-conversion .togo-scene { height: 350px; perspective: none; } html.aioos-conversion .togo-scene .access-card { width: min(340px, calc(100% - 32px)); height: auto; aspect-ratio: 85.6 / 53.98; box-sizing: border-box; left: 50%; top: 34%; border-radius: 3.75% / 5.94%; translate: none !important; } html.aioos-conversion .togo-scene .back-card { padding: 0; transform: translate(-48%, -54%) rotate(4deg); background: var(--lilac); border: 1px solid var(--accent); box-shadow: 0 1px 0 var(--accent), 0 8px 16px #191b1b12; } html.aioos-conversion .togo-scene .front-card { container-type: inline-size; padding: 18px; transform: translate(-50%, -46%) rotate(-4deg); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 0 #a49d90, 0 9px 18px #191b1b1a; } html.aioos-conversion .togo-scene .front-card::before { display: none; } html.aioos-conversion .front-card > div { align-items: center; font: 400 8cqi/1 var(--display); } html.aioos-conversion .front-card > div img { width: 17%; height: auto; object-fit: contain; } html.aioos-conversion .front-card strong { margin-top: 7cqi; margin-right: 35%; font: 500 13cqi/1 var(--heading); white-space: nowrap; } html.aioos-conversion .front-card .sample-qr { width: 28%; top: 39%; right: 5.3%; margin: 0; } html.aioos-conversion .front-card .sample-qr img { width: 100%; height: auto; aspect-ratio: 1; } html.aioos-conversion .front-card .sample-qr figcaption { margin-top: 5px; font-size: clamp(7px, 2.7cqi, 9px); } html.aioos-conversion .front-card > .card-line { width: 59%; margin: 4cqi 0 3cqi; } html.aioos-conversion .front-card > small { max-width: 59%; font-size: clamp(7px, 2.7cqi, 9px); line-height: 1.35; } html.aioos-conversion .togo-scene .link-slip { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); translate: none !important; padding: 8px 0; width: max-content; max-width: 100%; gap: 14px; background: transparent; box-shadow: none; font-size: 13px; } html.aioos-conversion .togo-scene .link-slip > span:first-child { font-size: 30px; } html.aioos-conversion .togo-scene .togo-ring, html.aioos-conversion .togo-scene .togo-route { display: none; } /* Preserve the former launcher label's readable scale on the native app link. */ html.aioos-conversion .web-product .product-foot > a.text-link { font: 13px/1.4 var(--mono); } @media (max-width: 1100px) { html.aioos-conversion .togo-scene .front-card { padding: 14px; } } @media (max-width: 767px) { html.aioos-conversion .togo-scene { height: 320px; } } @media (max-width: 370px) { html.aioos-conversion .togo-scene { height: 280px; } html.aioos-conversion .togo-scene .front-card { padding: 12px; } } /* /assets/trial-20260910/trial-home.css */ .trial-home-terms{font:14px/1.65 Arial,sans-serif!important;color:var(--ink)!important;max-width:37ch!important;margin:0!important}.nav-trial{min-width:150px}.hero-actions .trial-cta{white-space:normal}.trial-home-terms{flex-basis:100%}html.aioos-conversion .site-header nav{gap:clamp(13px,1.6vw,26px)} @media(max-width:767px){.trial-home-terms{font-size:13px!important;line-height:1.6!important}.nav-trial{min-width:0}html.aioos-conversion .hero-actions{gap:9px 22px}.closing-actions .trial-home-terms{max-width:32ch!important}.closing-actions{max-width:100%}} /* /assets/homepage-conversion-20260910/trial-prominence.css */ /* Ten-minute discovery. Existing AIOOS fonts, colors and decorative routes. */ html.aioos-conversion .trial-pricing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding: clamp(24px, 3vw, 40px); margin-bottom: 32px; background: var(--tint); border-top: 1px solid var(--accent); } html.aioos-conversion .trial-pricing h3 { font: 400 clamp(32px, 3.6vw, 50px)/1.05 var(--display); margin: 12px 0 10px; } html.aioos-conversion .trial-pricing__intro { max-width: 55ch; font-size: 15px; line-height: 1.65; } html.aioos-conversion .trial-pricing .button { min-height: 56px; } html.aioos-conversion .trial-pricing__terms { grid-column: 1/-1; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; max-width: 92ch; } html.aioos-conversion .trial-pricing__terms a, html.aioos-conversion .trial-finale__terms a { text-decoration: underline; text-underline-offset: 4px; } html.aioos-conversion .site-footer { border-top: 0; } html.aioos-conversion .trial-finale { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); position: relative; align-items: end; gap: 32px clamp(28px, 4vw, 64px); padding: clamp(28px, 4.2vw, 64px); border: 0; background: var(--tint); } html.aioos-conversion .trial-finale > div { width: auto; min-width: 0; } html.aioos-conversion .trial-finale .section-kicker { font-size: var(--t-label); max-width: none; } html.aioos-conversion .trial-finale h2 { margin: 22px 0 0; font-family: var(--display); font-weight: 400; } html.aioos-conversion .trial-finale__headline { display: block; margin-top: 20px; font-size: clamp(48px, 5.8vw, 84px); line-height: .98; letter-spacing: -.018em; } html.aioos-conversion .trial-finale__next { padding-top: 64px; } html.aioos-conversion .trial-finale__intro { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; max-width: 30ch; } html.aioos-conversion .trial-finale .closing-actions { margin-top: 24px; gap: 12px; width: 100%; } html.aioos-conversion .trial-finale .closing-actions .button { width: 100%; max-width: 370px; min-height: 60px; padding: 16px 22px; font-size: 16px; font-weight: 600; white-space: normal; gap: 18px; } html.aioos-conversion .trial-finale .conversion-secondary { font-size: 14px; } html.aioos-conversion .trial-finale__terms { margin-top: 18px; font-size: 14px; line-height: 1.65; max-width: 47ch; } html.aioos-conversion .trial-pricing :focus-visible, html.aioos-conversion .trial-finale :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; } html.aioos-conversion .footer-signature { padding-block: 34px 30px; } html.aioos-conversion .footer-word { font-size: clamp(100px, 16vw, 220px); } @media (max-width: 767px) { html.aioos-conversion .trial-pricing { grid-template-columns: 1fr; gap: 20px; padding: 25px 22px; } html.aioos-conversion .trial-pricing h3 { font-size: 35px; } html.aioos-conversion .trial-pricing .button { width: 100%; max-width: 370px; white-space: normal; } html.aioos-conversion .trial-pricing__terms { font-size: 14px; } html.aioos-conversion .trial-finale { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; } html.aioos-conversion .trial-finale h2 { margin-top: 24px; } html.aioos-conversion .trial-finale__headline { margin-top: 14px; font-size: clamp(40px, 10.5vw, 66px); } html.aioos-conversion .trial-finale__intro { font-size: 18px; } html.aioos-conversion .trial-finale .closing-actions { margin-top: 22px; } html.aioos-conversion .trial-finale .closing-actions .button { font-size: 15px; min-height: 58px; padding-inline: 17px; } html.aioos-conversion .footer-signature { padding-block: 28px; } } @media (max-width: 350px) { html.aioos-conversion .trial-finale { padding-inline: 18px; } html.aioos-conversion .trial-finale__headline { font-size: 38px; } html.aioos-conversion .trial-finale .conversion-secondary { font-size: 13px; gap: 10px; } } @media (forced-colors: active) { html.aioos-conversion .trial-pricing, html.aioos-conversion .trial-finale { background: Canvas; border: 1px solid CanvasText; } } /* /assets/sample-20260927/lead.css */ /* Sample lead dialog (lead.js) and the sample/Start now lines on the homepages. * Existing AIOOS tokens only: --paper --panel --ink --muted --line --accent --tint, * the Manrope reading family and the Bebas display face from typography.css. */ html.sample-lead-open { overflow: hidden; scrollbar-gutter: stable; background: #7d7a72; background: color-mix(in srgb, var(--paper, #f2eddf) 55%, #191b1b); } .sample-lead [hidden] { display: none !important; } dialog.sample-lead { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: min(92dvh, 860px); padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--paper); color: var(--ink); margin-block: clamp(16px, 6dvh, 64px) auto; transition: height var(--dur-base) var(--ease); font-family: var(--type-family, var(--body)); font-size: 16px; line-height: 1.6; } .sample-lead__screen.is-leaving { opacity: 0; transition: opacity 120ms linear; } .sample-lead__screen.is-entering { animation: sample-lead-in var(--dur-base) var(--ease) both; } @keyframes sample-lead-in { from { opacity: 0; transform: translateY(8px); } } .sample-lead__error:not([hidden]) { animation: sample-lead-fade 180ms linear both; } @keyframes sample-lead-fade { from { opacity: 0; } } .sample-lead__screen { display: flex; flex-direction: column; gap: 14px; padding: 18px clamp(22px, 4vw, 40px) clamp(26px, 4vw, 40px); } .sample-lead__bar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 6px; } .sample-lead__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; } @media (hover: hover) and (pointer: fine) { .sample-lead__back:hover { color: var(--accent); } } .sample-lead__close:focus-visible, .sample-lead__back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sample-lead__close { border-radius: var(--radius-control, 7px); display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--ink); color: var(--paper); font-size: 24px; line-height: 1; } @media (hover: hover) and (pointer: fine) { .sample-lead__close:hover { background: var(--accent); } } .sample-lead__kicker { color: var(--accent); justify-content: flex-start; } .sample-lead__title { margin: 0; font-family: var(--heading); font-weight: 650; font-size: clamp(34px, 6.4vw, 50px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; } .sample-lead__title:focus { outline: none; } .sample-lead__text { max-width: 46ch; font-size: 16px; line-height: 1.6; } .sample-lead__site { font-weight: 600; color: var(--accent); overflow-wrap: anywhere; } .sample-lead__site:empty { display: none; } .sample-lead__fine { font-size: 14px; line-height: 1.6; color: var(--muted); } .sample-lead__fine a, .sample-lead__consent a { text-decoration: underline; text-underline-offset: 4px; display: inline-block; padding: 12px 0; margin: -12px 0; } .sample-lead__form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .sample-lead__label { font-size: 14px; font-weight: 600; margin-top: 6px; } .sample-lead input[type=text], .sample-lead input[type=email], .sample-lead textarea { box-sizing: border-box; width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid var(--ink); border-radius: var(--radius-control, 7px); background: var(--panel); color: var(--ink); font: 500 18px/1.4 var(--type-family, var(--body)); } .sample-lead textarea { min-height: 84px; resize: vertical; font-size: 16px; } .sample-lead input:focus-visible, .sample-lead textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sample-lead [aria-invalid=true] { border-color: var(--error); } .sample-lead__consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-top: 8px; padding: 10px 0; min-height: 44px; font-size: 14px; line-height: 1.55; } .sample-lead__consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); } .sample-lead__dock { display: flex; flex-direction: column; gap: 10px; } .sample-lead__form:has(textarea) .sample-lead__dock { position: sticky; bottom: 0; padding-top: 12px; background: var(--paper); } .sample-lead textarea { scroll-margin-bottom: 160px; } .sample-lead__primary { width: 100%; margin-top: 10px; white-space: normal; text-align: left; font-size: 16px; font-weight: 600; min-height: 60px; } .sample-lead__primary:disabled, .sample-lead__primary[aria-disabled=true] { background: var(--muted); transform: none; cursor: progress; } .sample-lead__error { padding: 10px 14px; border-left: 3px solid var(--error); background: var(--error-tint); color: var(--error-ink); font-size: 14px; line-height: 1.5; } .sample-lead__inline-link { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; } .sample-lead__steps { list-style: none; margin: 8px 0 0; padding: 0; border-bottom: 1px solid var(--line); } .sample-lead__steps li { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; } .sample-lead__steps li > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; min-width: 22px; } .sample-lead__steps li.is-done { color: var(--ink); } /* a 2px line per stage: full when done, sweeping while current; a drawn check when done */ .sample-lead__line { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; } .sample-lead__steps li.is-done .sample-lead__line { transform: scaleX(1); } .sample-lead__steps li.is-current .sample-lead__line { animation: sample-lead-sweep 1.6s var(--ease) infinite; } @keyframes sample-lead-sweep { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } .sample-lead__check { width: 20px; height: 20px; margin-left: auto; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sample-lead__check path { stroke-dasharray: 22; stroke-dashoffset: 0; animation: sample-lead-draw var(--dur-block) var(--ease) both; } @keyframes sample-lead-draw { from { stroke-dashoffset: 22; } } .sample-lead__steps li.is-current { color: var(--accent); font-weight: 650; } .sample-lead__steps li.is-current::after { content: ""; width: 10px; height: 10px; margin-left: auto; border-radius: 50%; background: var(--accent); animation: sample-lead-pulse 1.2s var(--ease-in-out) infinite; } @keyframes sample-lead-pulse { 50% { opacity: .25; transform: scale(.7); } } .sample-lead__eta { font-size: 18px; font-weight: 600; } .sample-lead__eta:empty { display: none; } .sample-lead__start { border-radius: 0 0 var(--radius-surface, 10px) var(--radius-surface, 10px); display: grid; gap: 2px; justify-items: start; margin-top: 10px; padding: 12px 18px 16px; background: var(--tint); border-top: 1px solid var(--accent); font-size: 14px; line-height: 1.55; } html .sample-lead__start .conversion-secondary { font-size: 15px; font-weight: 650; } .sample-lead__live { position: absolute; top: 0; left: 0; margin: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sample-lead :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (max-height: 800px) { .sample-lead textarea { min-height: 64px; } .sample-lead__form:has(textarea) { gap: 6px; } .sample-lead__screen:has(textarea) .sample-lead__title { font-size: clamp(28px, 4.4vw, 36px); } } @media (max-width: 767px) { /* phones: an auto-height sheet that sits on the bottom edge, 12px top corners; tall screens scroll inside it */ dialog.sample-lead { width: 100%; left: 0; right: 0; max-height: 94dvh; margin: auto 0 0; border: 0; border-top: 3px solid var(--accent); } .sample-lead__screen { padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); } .sample-lead__title { font-size: clamp(32px, 9.4vw, 42px); } } @media (max-width: 340px) { .sample-lead__title { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .sample-lead__steps li.is-current::after, .sample-lead__error:not([hidden]), .sample-lead__check path { animation: none; } .sample-lead__steps li.is-current .sample-lead__line { animation: none; transform: scaleX(.5); } } @media (forced-colors: active) { dialog.sample-lead { border: 1px solid CanvasText; } .sample-lead__close, .sample-lead__primary { border: 1px solid ButtonText; } } /* Homepage lines that replace the removed trial terms. */ html.aioos-conversion .price-entry .price-terms { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: -8px; } html.aioos-conversion .trial-finale__headline.sample-finale__headline { margin-top: 0; } .sample-lead__next { font-weight: 650; } .sample-lead .sample-lead__title:focus-visible { outline: none; } /* /assets/redesign-20260930/idea.css */ /* Live pathways over a photographic desk; the scene contains no interface. */ #idee { position: relative; isolation: isolate; width: 100%; max-width: none; margin-inline: 0; padding: clamp(72px, 6vw, 96px) max(var(--gutter), calc((100% - 1440px) / 2)); background: var(--panel); border: 0; overflow: hidden; } #idee .section-kicker { position: relative; z-index: 1; align-items: center; } #idee .idea-mark { display: none; } #idee .idea-layout { display: block; margin-top: var(--stack-label); } #idee .idea-copy { position: relative; z-index: 1; min-width: 0; width: min(82%, 1120px); } #idee h2 { font-size: clamp(68px, 8.8vw, 136px); font-weight: 550; line-height: 1.045; letter-spacing: -.065em; max-width: none; margin: 0; text-wrap: balance; } #idee .idea-intro { max-width: min(71%, 740px); margin-top: var(--stack-title); font-size: var(--t-lead-l); line-height: var(--lh-lead-l); color: var(--ink); } #idee .idea-pathways { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 56px); max-width: 820px; list-style: none; padding: 0; margin: var(--stack-block) 0 36px; } #idee .idea-pathways::before { content: ''; position: absolute; top: clamp(43px, 4.35vw, 66px); left: 55px; right: calc(33.333% - 55px); height: 2px; background: var(--line); } #idee .idea-pathways li { min-width: 0; } #idee .idea-pathways a { position: relative; display: grid; gap: 8px; align-content: start; text-decoration: none; min-height: 226px; } #idee .idea-path-icon { width: clamp(86px, 8.7vw, 132px); height: clamp(86px, 8.7vw, 132px); display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--tint); color: var(--accent); margin-bottom: 14px; transition: background-color var(--dur, 180ms) var(--ease), transform var(--dur, 180ms) var(--ease); } #idee .idea-path-icon svg { width: 45%; height: 45%; } #idee .idea-pathways strong { font-size: clamp(19px, 2vw, 28px); font-weight: 600; line-height: 1.3; } #idee .idea-path-detail { color: var(--ink); font-size: clamp(16px, 1.65vw, 23px); line-height: 1.5; max-width: 240px; text-wrap: balance; } #idee .idea-path-arrow { display: none; } #idee .idea-pathways a:focus-visible .idea-path-icon { background: var(--lilac); transform: translateY(-3px); } @media (hover: hover) and (pointer: fine) { #idee .idea-pathways a:hover .idea-path-icon { background: var(--lilac); transform: translateY(-3px); } #idee .idea-pathways a:active .idea-path-icon { transform: none; background: color-mix(in srgb, var(--accent) 20%, var(--panel)); } } #idee .idea-pathways a { border-radius: 12px; } #idee .idea-pathways a:focus-visible, #idee .idea-overview:focus-visible { outline: var(--focus, 2px solid var(--accent)); outline-offset: 6px; } #idee .idea-overview:focus-visible { border-radius: 4px; } #idee .idea-pathways a:active .idea-path-icon { transform: none; background: color-mix(in srgb, var(--accent) 20%, var(--panel)); } @media (hover: hover) and (pointer: fine) { #idee .idea-overview:hover { color: var(--accent); text-decoration-color: var(--accent); } #idee .idea-overview:hover > .idea-nowrap > span { translate: 2px -2px; } } #idee .idea-overview:active > .idea-nowrap > span { translate: 0 1px; } #idee .idea-overview { display: block; width: fit-content; max-width: 100%; text-wrap: balance; font-size: clamp(21px, 2.25vw, 32px); font-weight: 500; line-height: 1.4; border-bottom: 0; padding-block: 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: currentColor; transition: color var(--dur, 180ms) var(--ease), text-decoration-color var(--dur, 180ms) var(--ease); } #idee .idea-overview > .idea-nowrap { white-space: nowrap; font-size: inherit; line-height: inherit; } #idee .idea-overview > .idea-nowrap > span { display: inline-block; margin-left: .45em; font-size: .9em; line-height: 1; text-decoration: none; transition: translate var(--dur, 180ms) var(--ease); } #idee .idea-still-life { position: absolute; inset: 0; z-index: 0; pointer-events: none; } #idee .idea-scene { width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (min-width: 768px) and (max-width: 1099px) { #idee { min-height: 780px; padding-block: 58px 68px; } #idee .idea-scene { object-position: 78% center; } #idee .idea-copy { width: 88%; } #idee h2 { font-size: clamp(64px, 8.6vw, 94px); } #idee .idea-intro { max-width: 68%; } #idee .idea-pathways { max-width: 76%; gap: 24px; } #idee .idea-pathways a { min-height: 208px; } #idee .idea-path-detail { font-size: 16px; } #idee .idea-overview { font-size: 23px; max-width: 90%; } } @media (max-width: 767px) { #idee { min-height: 0; padding-block: 48px 44px; } #idee::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--panel) 0%, #f8f4e9ee 38%, #f8f4e9c9 65%, #f8f4e9e8 100%); } #idee .idea-still-life { z-index: -1; } #idee .idea-scene { object-position: 65% center; } #idee .idea-copy { width: 100%; } #idee h2 { font-size: clamp(35px, 9.65vw, 67px); line-height: 1.1; letter-spacing: -.055em; } #idee .idea-intro { max-width: 100%; } #idee .idea-pathways { gap: 14px; margin-bottom: 22px; max-width: none; } #idee .idea-pathways::before { top: 29px; left: 29px; right: calc(33.333% - 29px); height: 1px; } #idee .idea-path-icon { width: 58px; height: 58px; margin-bottom: 8px; } #idee .idea-pathways a { min-height: 158px; } #idee .idea-pathways strong { font-size: 15px; overflow-wrap: break-word; hyphens: manual; } #idee .idea-path-detail { min-width: 0; font-size: 13px; overflow-wrap: break-word; hyphens: manual; } #idee .idea-overview { font-size: 18px; } #idee .idea-pathways a:focus-visible, #idee .idea-overview:focus-visible { outline-offset: 3px; } } /* Staged arrival, once. Hidden start state exists only under html.idh-motion, which reveal.js sets when scripting works and motion is allowed. */ html.idh-motion #idee .idea-pathways::before { transform: scaleX(0); transform-origin: left; } html.idh-motion #idee .idea-pathways li, html.idh-motion #idee .idea-overview { opacity: 0; translate: 0 16px; } html.idh-motion #idee .idea-pathways.is-in::before { transform: none; transition: transform var(--dur-slow) var(--ease); } html.idh-motion #idee .idea-pathways.is-in li, html.idh-motion #idee .idea-pathways.is-in + .idea-overview { opacity: 1; translate: 0 0; transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); } html.idh-motion #idee .idea-pathways.is-in li:nth-child(1) { transition-delay: 60ms; } html.idh-motion #idee .idea-pathways.is-in li:nth-child(2) { transition-delay: 120ms; } html.idh-motion #idee .idea-pathways.is-in li:nth-child(3) { transition-delay: 180ms; } html.idh-motion #idee .idea-pathways.is-in + .idea-overview { transition-delay: 300ms; } html.idh-motion #idee .idea-pathways.is-static::before, html.idh-motion #idee .idea-pathways.is-static li, html.idh-motion #idee .idea-pathways.is-static + .idea-overview { transition: none; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { #idee .idea-overview > .idea-nowrap > span { transition: none; } #idee .idea-path-icon { transition: none; } #idee .idea-pathways a:hover .idea-path-icon, #idee .idea-pathways a:focus-visible .idea-path-icon { transform: none; } } /* Owner decisions UI-093..113, resolved by the audit recommendation. */ body[data-aioos-visual="20260910"] #anfang .hero-bottom { border-bottom: 0; } @media (min-width: 1100px) { #idee { --idea-icon: clamp(72px, 6.6vw, 100px); } #idee h2 { font-size: clamp(64px, 7.4vw, 112px); } #idee .idea-pathways { margin-bottom: 32px; } #idee .idea-pathways::before { top: calc(var(--idea-icon) / 2 - 1px); left: calc(var(--idea-icon) / 2); right: calc(33.333% - var(--idea-icon) / 2); } #idee .idea-pathways a { min-height: 0; } #idee .idea-path-icon { width: var(--idea-icon); height: var(--idea-icon); margin-bottom: 10px; } #idee .idea-pathways strong { font-size: clamp(19px, 1.55vw, 22px); } #idee .idea-path-detail { font-size: clamp(16px, 1.25vw, 18px); } #idee .idea-overview { font-size: clamp(20px, 1.55vw, 22px); } } @media (max-width: 767px) { /* The still life is its own picture below the app link, not a ghost behind the copy. */ #idee.manifesto { padding-bottom: 0; } #idee::after { display: none; } #idee .idea-still-life { position: static; z-index: auto; aspect-ratio: 16 / 10; margin: 28px calc(-1 * var(--gutter)) 0; } #idee .idea-scene { object-position: 84% 58%; } } @media (max-width: 479px) { /* Pathways become a vertical list: icon left, title and description right. */ #idee .idea-pathways { grid-template-columns: minmax(0, 1fr); gap: 18px; } #idee .idea-pathways::before { top: 24px; bottom: 24px; left: 24px; right: auto; width: 1px; height: auto; } #idee .idea-pathways a { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; min-height: 48px; } #idee .idea-path-icon { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; position: relative; z-index: 1; } #idee .idea-pathways strong { font-size: 16px; align-self: end; } #idee .idea-path-detail { font-size: 15px; max-width: none; align-self: start; } html.idh-motion #idee .idea-pathways::before { transform: scaleY(0); transform-origin: top; } html.idh-motion #idee .idea-pathways.is-in::before { transform: none; } } /* /assets/redesign-20260930/human.css */ /* Intimate staged café scene with a live, explicitly simulated call card. */ #alltag { --human-word: 3.7; --human-col: 37.5vw; --human-pad: clamp(34px, 4.4vw, 68px); display: grid; grid-template-columns: 62.5% 37.5%; height: auto; min-height: clamp(650px, 58vw, 1040px); overflow: visible; color: var(--ink); background: var(--panel); width: 100%; max-width: none; margin-inline: 0; border: 0; grid-template-rows: auto; } html:lang(es) #alltag { --human-word: 6.95; } html:lang(fr) #alltag, html:lang(pt) #alltag { --human-word: 4.85; } html:lang(it) #alltag { --human-word: 5.25; } html:lang(nl) #alltag { --human-word: 4.3; } html:lang(ro) #alltag { --human-word: 3.9; } html:lang(sv) #alltag { --human-word: 5.1; } #alltag .human-scene { position: relative; min-width: 0; min-height: clamp(650px, 58vw, 1040px); overflow: hidden; } #alltag .human-picture { display: block; position: absolute; inset: 0; height: 100%; min-height: 0; grid-area: auto; } #alltag .human-photo { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 50%; translate: none !important; } @media (min-width: 1680px) { #alltag .human-photo { object-position: 50% 38%; } } #alltag .human-copy { align-self: stretch; display: flex; flex-direction: column; padding: clamp(58px, 8.2vw, 118px) var(--human-pad) clamp(48px, 6.1vw, 88px); } #alltag .human-heading { position: static; padding: 0; max-width: none; grid-area: auto; } #alltag .human-heading > span { display: none; } #alltag .human-heading h2 { font-size: min(clamp(54px, 6.1vw, 88px), calc((var(--human-col) - var(--human-pad) * 2) / var(--human-word))); font-weight: 550; line-height: 1.08; letter-spacing: -.05em; text-wrap: balance; overflow-wrap: normal; hyphens: manual; margin: 0; text-shadow: none; } #alltag .human-paper { align-self: stretch; position: static; width: auto; padding: 0; transform: none; box-shadow: none; background: transparent; margin-top: var(--stack-title); flex: 1; display: flex; flex-direction: column; align-items: start; } #alltag .human-paper > .section-kicker { display: none; } #alltag .human-paper > p { font-family: var(--type-family); font-size: var(--t-lead-l); font-weight: var(--w-body); line-height: var(--lh-lead-l); letter-spacing: normal; margin: 0 0 30px; } #alltag .human-paper .text-link { margin-top: auto; min-height: 44px; font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 10px; display: inline-flex; align-items: center; gap: 24px; transition: color var(--dur, 180ms) var(--ease), border-color var(--dur, 180ms) var(--ease); } #alltag .human-paper .text-link > span { display: inline-block; transition: translate var(--dur, 180ms) var(--ease); } #alltag .human-paper .text-link:focus-visible { outline: var(--focus, 2px solid var(--accent)); outline-offset: 6px; border-radius: 4px; } #alltag .human-paper .text-link:active > span { translate: 0 1px; } @media (hover: hover) and (pointer: fine) { #alltag .human-paper .text-link:hover { color: var(--accent); border-bottom-color: var(--accent); } #alltag .human-paper .text-link:hover > span { translate: 2px -2px; } } #alltag .human-summary { position: absolute; right: 24px; bottom: 50px; width: clamp(300px, 46%, 435px); color: var(--ink); padding: clamp(24px, 2.3vw, 34px); background: var(--panel); border: 1px solid #ffffff80; border-radius: var(--radius-surface); box-shadow: 0 14px 32px #191b1b28; } #alltag .human-summary-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); line-height: 1.5; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid #aaa59750; } #alltag .human-summary-label svg { color: var(--accent); width: 17px; height: 17px; } #alltag .human-summary-title { display: block; font-size: 24px; font-weight: 600; margin-top: 18px; line-height: 1.3; } #alltag .human-summary-question { font-size: 20px; line-height: 1.5; background: var(--tint); padding: 17px 20px; margin: 16px 0 21px; } #alltag .human-summary-result { display: flex; align-items: start; gap: 14px; } #alltag .human-summary-check { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; background: var(--accent); color: var(--panel); border-radius: var(--radius-circle); font-size: 15px; } #alltag .human-summary-result strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.5; } #alltag .human-summary-result div > span { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 3px; } #alltag .photo-caption { left: 26px; bottom: 20px; background: #191b1bd9; color: var(--panel); padding: 6px 10px; font-size: 12px; line-height: 1.5; } @media (min-width: 768px) and (max-width: 1099px) { #alltag { grid-template-columns: 60% 40%; min-height: 650px; --human-col: 40vw; --human-pad: 34px; } #alltag .human-scene { min-height: 650px; } #alltag .human-copy { padding: 64px 34px 46px; } #alltag .human-paper .text-link { font-size: 16px; gap: 16px; } #alltag .human-summary { right: 20px; bottom: 62px; padding: 23px; } #alltag .photo-caption { top: 18px; bottom: auto; } #alltag .human-summary-title { font-size: 19px; } #alltag .human-summary-question { font-size: 16px; padding: 13px 15px; } #alltag .human-summary-result strong { font-size: 14px; } #alltag .human-summary-result div > span { font-size: 12px; } } @media (max-width: 767px) { #alltag { display: flex; flex-direction: column; min-height: 0; } #alltag .human-scene { width: 100%; min-height: 470px; } #alltag .photo-caption { top: 14px; bottom: auto; } #alltag .human-photo { object-position: 50% 43%; } #alltag .human-summary { right: 18px; bottom: 18px; width: min(270px, calc(100% - 36px)); padding: 18px; border-radius: var(--radius-control); } #alltag .human-summary-label { font-size: 12px; padding-bottom: 10px; } #alltag .human-summary-title { font-size: 17px; margin-top: 13px; } #alltag .human-summary-question { font-size: 13px; padding: 11px 13px; margin: 12px 0 14px; } #alltag .human-summary-result { gap: 10px; } #alltag .human-summary-check { width: 20px; height: 20px; font-size: 11px; } #alltag .human-summary-result strong { font-size: 13px; } #alltag .human-summary-result div > span { font-size: 12px; } #alltag .photo-caption { left: 18px; padding: 4px 6px; font-size: 12px; } #alltag .human-copy { display: block; padding: 43px var(--gutter) 45px; width: 100%; } #alltag .human-heading h2 { font-size: min(clamp(38px, 10vw, 64px), calc((100vw - var(--gutter) * 2) / var(--human-word))); max-width: 530px; } #alltag .human-paper { display: block; } #alltag .human-paper > p { max-width: 440px; margin-bottom: 22px; } #alltag .human-paper .text-link { margin-top: 0; font-size: 16px; gap: 24px; } } @media (min-width: 600px) and (max-width: 767px) { #alltag .human-scene { min-height: 0; aspect-ratio: 4 / 3; } } /* The call card arrives once as the scene scrolls in; the demo label and the staged-scene chip never hide. */ html.idh-motion #alltag .human-scene:not(.is-in) .human-summary { opacity: 0; translate: 0 16px; } html.idh-motion #alltag .human-scene .human-summary { transition: opacity 420ms var(--ease), translate 420ms var(--ease); } html.idh-motion #alltag .human-scene.is-static .human-summary { transition: none; } /* Owner decisions UI-096, 104, 111: card geometry, long-word columns, radius scale. */ #alltag .human-summary { width: clamp(280px, 46%, 435px); border-radius: var(--radius-lg); box-shadow: 0 1px 2px #191b1b14, 0 14px 32px #191b1b24; } #alltag .human-summary-question { border-radius: var(--radius-chip); } #alltag .photo-caption { border-radius: var(--radius-xs); } @media (min-width: 768px) and (max-width: 1500px) { #alltag .human-photo { object-position: 32% 50%; } } @media (min-width: 1100px) { html:lang(es) #alltag, html:lang(fr) #alltag, html:lang(it) #alltag, html:lang(pt) #alltag, html:lang(nl) #alltag, html:lang(ro) #alltag, html:lang(sv) #alltag { grid-template-columns: 56% 44%; --human-col: 44vw; } } @media (min-width: 768px) and (max-width: 1099px) { html:lang(es) #alltag, html:lang(fr) #alltag, html:lang(it) #alltag, html:lang(pt) #alltag, html:lang(nl) #alltag, html:lang(ro) #alltag, html:lang(sv) #alltag { grid-template-columns: 52% 48%; --human-col: 48vw; } } @media (max-width: 767px) { /* The card straddles the lower edge of the photograph so faces and props stay visible. */ #alltag .human-scene { overflow: visible; margin-bottom: 64px; } #alltag .human-picture { overflow: hidden; } #alltag .human-summary { bottom: -64px; z-index: 2; border-radius: var(--radius-lg); } } /* /assets/redesign-20260930/use-cases.css */ /* Three natural scenes and translated, explicitly simulated conversation examples. */ #moeglichkeiten { padding-block: var(--section); } #moeglichkeiten .possibilities-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 56px; margin: var(--stack-label) 0 var(--stack-block); } #moeglichkeiten .possibilities-heading h2 { font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; margin: 0; } #moeglichkeiten .possibilities-summary { min-width: 0; } #moeglichkeiten .possibilities-summary > p { font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 46ch; color: var(--muted); margin: var(--stack-title) 0 0; } #moeglichkeiten [hidden] { display: none !important; } #moeglichkeiten .use-case-tabs { display: flex; justify-content: stretch; gap: 6px; margin: 0; } #moeglichkeiten .use-case-tabs button { flex: 1; min-height: 44px; min-width: 0; border: 1px solid var(--line-ui); padding: 10px 18px; background: #f8f4e930; color: var(--ink); border-radius: var(--radius-sm); font: 550 14px/1.2 var(--body); overflow-wrap: normal; hyphens: manual; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); } #moeglichkeiten .use-case-tabs button[aria-selected='true'] { color: var(--panel); background: var(--accent); border-color: var(--accent); } @media (hover: hover) and (pointer: fine) { #moeglichkeiten .use-case-tabs button:not([aria-selected='true']):hover { background: var(--tint); } } #moeglichkeiten .use-case-tabs button:focus-visible, #moeglichkeiten .text-link:focus-visible, #moeglichkeiten .use-case-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #moeglichkeiten .use-case-photos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .92fr) minmax(0, .98fr); gap: 20px; } #moeglichkeiten .use-case-photo { position: relative; margin: 0; height: clamp(260px, 22vw, 340px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #aaa59740; } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo { cursor: pointer; transition: opacity var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo img { transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease); } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo[data-case-active='false'] img { opacity: .55; filter: saturate(.7); } #moeglichkeiten .use-case-photo[data-case-active='true'] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } #moeglichkeiten .use-case-photo figcaption > span { transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } #moeglichkeiten .use-case-photo[data-case-active='true'] figcaption > span { background: var(--accent); color: var(--panel); } #moeglichkeiten .use-case-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } #moeglichkeiten .use-case-photo[data-case-photo='cafe'] img { object-position: 50% 45%; } #moeglichkeiten .use-case-photo[data-case-photo='hotel'] img { object-position: 51% center; } #moeglichkeiten .use-case-photo[data-case-photo='team'] img { object-position: 50% center; } #moeglichkeiten .use-case-photo figcaption { position: absolute; inset: 14px; z-index: 1; display: flex; flex-direction: column; align-items: start; justify-content: space-between; } #moeglichkeiten .use-case-photo figcaption > span { background: var(--panel); color: var(--ink); padding: 7px 14px; border-radius: var(--radius-control); font-size: 12px; font-weight: 500; } #moeglichkeiten .use-case-photo figcaption > small { background: #191b1bd9; color: var(--panel); font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: 6px; } #moeglichkeiten .use-case-conversations { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; margin-top: 24px; border: 1px solid #aaa59750; border-radius: var(--radius-lg); background: var(--panel); box-shadow: none; } #moeglichkeiten .use-case-app { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 24px; padding: 24px; min-width: 0; } #moeglichkeiten .use-case-app-copy { min-width: 0; align-self: center; } #moeglichkeiten .use-case-app h3 { font-size: 25px; line-height: 1.25; letter-spacing: -.035em; margin: 0 0 12px; text-wrap: balance; } #moeglichkeiten .use-case-app-copy > p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; } #moeglichkeiten .use-case-capture { align-self: center; min-width: 0; } #moeglichkeiten .use-case-capture > img { display: block; width: 100%; height: auto; object-fit: contain; background: var(--soft); border: 1px solid #aaa59740; border-radius: 5px; box-shadow: 0 8px 16px -12px #30203c50; } #moeglichkeiten .use-case-app .text-link { display: flex; justify-content: space-between; width: 100%; gap: 12px; min-height: 44px; font-size: 14px; border: 0; background: transparent; padding: 11px 0; cursor: pointer; text-align: left; } #moeglichkeiten .use-case-app-caption { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; } #moeglichkeiten .use-case-panels { display: grid; gap: 0; border-left: 1px solid #aaa59740; } #moeglichkeiten .use-case-panel { padding: 23px 26px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } #moeglichkeiten .use-case-panel + .use-case-panel { border-top: 1px solid #aaa59740; } #moeglichkeiten .use-case-panel-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--muted); } #moeglichkeiten .use-case-panel-label img { width: 32px; height: auto; } #moeglichkeiten .use-case-question { align-self: flex-end; font-size: 16px; line-height: 1.5; letter-spacing: -.015em; margin: 16px 0; max-width: 100%; padding: 12px 16px; background: var(--tint); border-radius: 9px 9px 2px 9px; } #moeglichkeiten .use-case-outcome { display: flex; align-items: start; gap: 12px; margin: 0 0 13px; } #moeglichkeiten .use-case-outcome > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; color: var(--panel); background: var(--accent); border-radius: var(--radius-circle); font-size: 13px; } #moeglichkeiten .use-case-outcome p { font-size: 15px; line-height: 1.5; margin: 0; } #moeglichkeiten .use-case-disclosure { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); } #moeglichkeiten .use-case-more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin-top: 8px; font-size: 14px; } /* Enhanced: the three panels share one grid cell, so the tallest sets a constant height and a tab change never moves what follows. */ #moeglichkeiten[data-case-enhanced='true'] .use-case-panel { grid-area: 1 / 1; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 120ms var(--ease), visibility 0s linear 120ms, transform 0s linear 120ms; } #moeglichkeiten[data-case-enhanced='true'] .use-case-panel[data-active='true'] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease) 80ms, transform var(--dur-base) var(--ease) 80ms, visibility 0s; } @media (max-width: 1099px) { #moeglichkeiten .possibilities-heading { gap: 30px; } #moeglichkeiten .use-case-photos { gap: 12px; } #moeglichkeiten .use-case-photo { height: 280px; } #moeglichkeiten .use-case-conversations { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #moeglichkeiten .use-case-app { grid-template-columns: minmax(0, 1fr); gap: 14px; } #moeglichkeiten .use-case-panel { padding: 24px; justify-content: start; } #moeglichkeiten .use-case-question { font-size: 15px; max-width: 100%; } } @media (max-width: 767px) { #moeglichkeiten { padding-block: 54px; } #moeglichkeiten .possibilities-heading { display: block; } #moeglichkeiten .possibilities-summary { margin-top: var(--stack-title); } #moeglichkeiten .use-case-tabs { justify-content: stretch; gap: 6px; } #moeglichkeiten .use-case-tabs button { min-width: 0; flex: 1; padding-inline: 8px; } #moeglichkeiten .use-case-photos { grid-template-columns: 1fr; gap: 16px; } #moeglichkeiten .use-case-photo { height: auto; aspect-ratio: 4 / 3; max-height: 56svh; } #moeglichkeiten[data-case-enhanced='true'] .use-case-photos { gap: 0; } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo { grid-area: 1 / 1; } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo[data-case-active='false'] img { opacity: 1; filter: none; } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo[data-case-active='false'] { opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base); } #moeglichkeiten .use-case-conversations { display: flex; flex-direction: column-reverse; gap: 0; margin-top: 16px; } #moeglichkeiten .use-case-panels { border-left: 0; border-bottom: 1px solid #aaa59740; } #moeglichkeiten .use-case-panel { padding: 21px; } #moeglichkeiten .use-case-question { font-size: 16px; } #moeglichkeiten .use-case-outcome p { font-size: 14px; } #moeglichkeiten .use-case-app { padding: 21px; } #moeglichkeiten .use-case-app h3 { font-size: 23px; } #moeglichkeiten .use-case-app { gap: 18px; } } @media (max-width: 480px) { #moeglichkeiten .use-case-photo { aspect-ratio: 1; } } @media (prefers-reduced-motion: reduce) { #moeglichkeiten .use-case-tabs button, #moeglichkeiten .use-case-photo, #moeglichkeiten .use-case-photo figcaption > span, #moeglichkeiten[data-case-enhanced='true'] .use-case-photo, #moeglichkeiten[data-case-enhanced='true'] .use-case-photo img, #moeglichkeiten[data-case-enhanced='true'] .use-case-panel { transition: none !important; } } /* #187 UI-219: on phones the three scenes are one sideways strip with the next photo peeking; the tabs above stay the control and follow the swipe (use-cases.js), and the selected example sits below. Native scroll snap; from 768 px the three photos keep their row. */ @media (max-width: 767px) { #moeglichkeiten .use-case-photos, #moeglichkeiten[data-case-enhanced='true'] .use-case-photos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(calc(100% - var(--s-8)), 27.5rem); gap: var(--s-3); width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } #moeglichkeiten .use-case-photos::-webkit-scrollbar { display: none; } #moeglichkeiten .use-case-photo, #moeglichkeiten[data-case-enhanced='true'] .use-case-photo { grid-area: auto; height: auto; max-height: none; aspect-ratio: 4 / 3; scroll-snap-align: start; } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo[data-case-active='false'] { opacity: 1; visibility: visible; } #moeglichkeiten[data-case-enhanced='true'] .use-case-photo[data-case-active='false'] img { opacity: .55; filter: saturate(.7); } #moeglichkeiten .use-case-photos:focus-visible { outline: var(--focus); outline-offset: -3px; } } @media (max-width: 767px) and (hover: hover) and (pointer: fine) { #moeglichkeiten .use-case-photos { scrollbar-width: thin; scrollbar-color: var(--line-ui) transparent; } } /* /assets/typography-20260910/typography.css */ /* Metric-matched fallback so the swap to Manrope does not move text. */ @font-face { font-family: 'Manrope Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 90.3%; ascent-override: 118.5%; descent-override: 33.2%; line-gap-override: 0%; } /* cyrillic-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/typography-20260910/manrope-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/typography-20260910/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/typography-20260910/manrope-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/typography-20260910/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Keep vietnamese after latin-ext so the shared vietnamese ranges win over latin-ext. */ /* vietnamese */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/typography-20260910/manrope-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* a-breve only: U+0103 (Romanian in the language list) loads 1 KB instead of the 8 KB vietnamese subset */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/typography-20260910/manrope-a-breve.woff2) format('woff2'); unicode-range: U+0102-0103; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/typography-20260910/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* AIOOS typography: one reading family, with the approved brand face retained. */ /* Match the AIOOS word's advance if its existing webfont is unavailable. */ @font-face { font-family: 'AIOOS Brand Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans'), local('Noto Sans'); size-adjust: 55.6594%; ascent-override: 161.697%; descent-override: 53.899%; line-gap-override: 0%; } :root { --type-family: 'Manrope', 'Manrope Fallback', Arial, sans-serif; --body: var(--type-family); --heading: var(--type-family); --mono: var(--type-family); --display: 'Bebas Neue', 'AIOOS Brand Fallback', sans-serif; --type-body: clamp(1rem, .96rem + .18vw, 1.125rem); --type-section: clamp(2.5rem, 1.38rem + 3.4vw, 4.75rem); } body { font-family: var(--type-family); font-size: var(--type-body); line-height: 1.65; font-weight: 400; } h2, h3 { font-family: var(--type-family); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; min-width: 0; overflow-wrap: anywhere; hyphens: auto; } h2 { font-size: var(--type-section); } button, input, select, textarea { font-family: var(--type-family); } .site-header nav { font-size: .9375rem; font-weight: 500; } .section-kicker, .edition { font-size: var(--t-label); line-height: var(--lh-label); font-weight: var(--w-label); letter-spacing: var(--track-label); } .section-kicker > span { min-width: 0; overflow-wrap: anywhere; } .button { font-size: .9375rem; font-weight: 600; line-height: 1.4; white-space: normal; text-align: start; } .text-link { font-size: .9375rem; font-weight: 550; line-height: 1.5; max-width: 100%; min-width: 0; overflow-wrap: anywhere; } .hero-intro { grid-template-columns: 1.05fr 1fr auto; gap: 36px; } .hero-intro h2 { font-size: clamp(1.875rem, 1.45rem + 1.4vw, 2.75rem); line-height: 1.14; } .hero-intro p { font-size: 1rem; line-height: 1.65; max-width: 39ch; } .hero-aside { font-size: 1rem; } .stage-note, .stage-caption, .hero-bottom, .screen-caption, .photo-caption { font-size: .75rem; line-height: 1.5; letter-spacing: .015em; } .hero-bottom a { font-size: .875rem; } .manifesto h2 { font-size: clamp(2.625rem, 1rem + 5.4vw, 6.5rem); line-height: 1.08; letter-spacing: -.055em; max-width: 17ch; } .manifesto-bottom p { font-size: var(--type-body); line-height: 1.7; } .manifesto-bottom p:last-child { font-size: 1rem; line-height: 1.7; } .idea-route > span, .voice-route > span, .closing-route > span { font-size: .75rem; line-height: 1.5; font-weight: 550; letter-spacing: .03em; } .human-heading > span { font-size: .75rem; line-height: 1.5; letter-spacing: .08em; font-weight: 600; } .human-stage { height: max(780px,48.75rem); } .human-heading { max-width: calc(100% - var(--gutter)*2); } .human-heading h2 { font-size: clamp(3rem, 2.1rem + 3.7vw, 5.5rem); line-height: 1.05; margin-top: 22px; letter-spacing: -.05em; } .human-paper { width: 400px; padding: 30px; } .human-paper > p { font-family: var(--type-family); font-size: clamp(1.875rem, 1.5rem + .7vw, 2.25rem); font-weight: 650; line-height: 1.17; letter-spacing: -.035em; margin: 24px 0 20px; } .human-paper > span:not(.section-kicker) { font-size: .9375rem; line-height: 1.65; } .human-paper .text-link { font-size: .875rem; } .app-heading { gap: 48px; } .app-heading p { font-size: var(--type-body); line-height: 1.7; } .app-heading h2 { font-size: var(--type-section); } .index-type { font-family: var(--type-family); font-size: 4.5rem; font-weight: 450; line-height: 1.1; letter-spacing: -.055em; } .tab-list button { font-family: var(--type-family); font-size: clamp(1.25rem, .85rem + 1vw, 1.75rem); font-weight: 550; line-height: 1.35; letter-spacing: -.025em; padding-block: 19px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .app-description { font-size: 1rem; line-height: 1.65; } .app-editorial > .text-link { font-size: .9375rem; } .app-background-word { font-family: var(--type-family); font-weight: 650; font-size: clamp(2.5rem, 4.5vw, 4.75rem); letter-spacing: -.045em; } .app-side-note { font-size: .75rem; } .access-section > h2 { font-size: var(--type-section); } .access-grid h3 { font-size: clamp(2.125rem, 1.6rem + 1.5vw, 3.25rem); line-height: 1.15; } .access-grid article > p { font-size: 1rem; line-height: 1.65; min-height: 0; max-width: 42ch; } .product-topline, .product-foot { font-size: .75rem; line-height: 1.5; font-weight: 550; } .product-foot > a { font-size: .875rem; } .website-example > div { font-family: var(--type-family); font-size: 1.625rem; line-height: 1.2; letter-spacing: -.025em; } .chat-header { font-size: .8125rem; font-weight: 600; } .chat-bubble { font-size: .75rem; line-height: 1.55; } .ai-disclosure, .chat-example-note { font-size: .6875rem; line-height: 1.5; } .voice-heading h2 { font-size: var(--type-section); } .voice-heading > p { font-size: var(--type-body); line-height: 1.7; } .voice-node { font-size: .8125rem; line-height: 1.5; } .tools-copy h2 { font-size: var(--type-section); } .tools-copy > p, .tools-copy > .tools-secondary, .tool-note { font-size: 1rem; line-height: 1.7; } .tools-copy > .tools-caption { font-size: .75rem; line-height: 1.6; } .segmented button { font-size: .875rem; font-weight: 550; line-height: 1.4; min-height: 44px; } .tool-core-title { font-family: var(--type-family); font-size: 2.25rem; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; margin-left: 20px; } .tool-block strong { font-family: var(--type-family); font-size: 1.625rem; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; } .tool-block { overflow-wrap: anywhere; } .tool-block > span:last-child { font-size: .75rem; line-height: 1.5; } .possibilities-heading h2 { font-size: var(--type-section); } .possibilities-heading p { font-size: var(--type-body); line-height: 1.7; } .collage-label p { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.375rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 600; } .collage-label p span { color: var(--muted); } .editorial-collage figcaption { font-size: .75rem; line-height: 1.5; } .pricing-heading h2, .faq-section h2 { font-family: var(--type-family); font-size: var(--type-section); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; } .pricing-heading > p { font-size: var(--type-body); line-height: 1.7; } .price-entry { padding-inline: 26px; } .price-entry h3 { font-family: var(--type-family); font-size: 1.625rem; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; } .price-number > span:first-child { font-family: var(--type-family); font-size: clamp(3rem, 2.3rem + 1.5vw, 4rem); line-height: 1.1; letter-spacing: -.055em; font-weight: 550; font-variant-numeric: lining-nums tabular-nums; } .price-number > span:last-child { font-size: .875rem; } .price-entry p { font-size: 1rem; line-height: 1.65; } .price-entry .button { font-size: .9375rem; } .price-note { font-size: .8125rem; line-height: 1.65; } .faq-list summary { font-size: 1.125rem; line-height: 1.5; font-weight: 500; } .faq-list p { font-size: 1rem; line-height: 1.7; } .footer-bottom { font-size: .75rem; line-height: 1.6; } .footer-legal { font-size: .8125rem; } .dialog-toolbar h2 { font-size: 1.5rem; line-height: 1.25; } .dialog-close { font-size: .9375rem; } dialog > p { font-size: .8125rem; line-height: 1.65; } .public-help, .ph-panel, .ph-launch, .ph-panel input, .ph-panel button { font-family: var(--type-family); } @media (max-width:1100px) { .hero-intro { grid-template-columns: 1fr 1fr; gap: 24px 36px; } .hero-intro .button { grid-column: 2; justify-self: start; } .human-heading h2 { font-size: clamp(2.75rem, 5.8vw, 4rem); } .human-paper { width: 345px; padding: 28px; } .human-paper > p { font-size: 1.875rem; } .tool-core-title { font-size: 2rem; margin-left: 16px; } } @media (max-width:767px) { .site-header nav { font-size: .8125rem; font-weight: 550; gap: 12px; flex-wrap: wrap; } .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; } .hero-intro { grid-template-columns: 1fr; gap: 20px; } .hero-intro .button { grid-column: 1; } .hero-intro h2 { font-size: clamp(1.875rem, 1.2rem + 3vw, 2.625rem); line-height: 1.18; max-width: 21ch; } .hero-intro p { font-size: 1rem; max-width: 42ch; } .section-kicker { font-size: .75rem; } .stage-note { font-size: .6875rem; } .stage-caption { font-size: .625rem; } .hero-bottom { font-size: .6875rem; flex-wrap: wrap; } .hero-bottom a { font-size: .8125rem; } .manifesto h2 { font-size: clamp(2.375rem, 1.3rem + 5vw, 4rem); line-height: 1.13; margin-top: 30px; } .manifesto-bottom p, .manifesto-bottom p:last-child { font-size: 1rem; } .human-heading { top: 40px; } .human-stage { height: max(770px,48.125rem); } .human-heading h2 { font-size: clamp(2.625rem, 1.4rem + 6vw, 3.75rem); line-height: 1.06; margin-top: 18px; } .human-paper { width: min(74%,310px); padding: 24px; } .human-paper > p { font-size: clamp(1.5rem, 1.04rem + 2vw, 1.875rem); line-height: 1.18; margin-block: 20px; } .human-paper > span:not(.section-kicker) { font-size: .875rem; line-height: 1.65; } .human-paper .text-link { font-size: .8125rem; } .human-paper .section-kicker { font-size: var(--t-label); } .photo-caption { font-size: .6875rem; } .app-heading h2, .access-section > h2, .voice-heading h2, .tools-copy h2, .possibilities-heading h2 { font-size: var(--type-section); line-height: 1.14; } .tab-list button { font-size: 1.125rem; line-height: 1.4; } .app-showroom { grid-template-columns: minmax(0,1fr); } .tab-list { grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; } .app-editorial > .text-link { max-width: calc(100% - 40px); } .app-description { font-size: .9375rem; line-height: 1.65; } .has-still-life .app-description { padding-right: 112px; } .notebook-art { width: 88px; } .app-background-word { font-size: 2.625rem; } .access-grid h3 { font-size: 2.125rem; line-height: 1.15; } .product-foot { font-size: .6875rem; } .product-foot > a { font-size: .8125rem; } .voice-node { font-size: .75rem; } .voice-route > span { font-size: .6875rem; } .tool-core-title { font-size: 1.8125rem; margin-left: 16px; } .tool-block strong { font-size: clamp(1rem,.7rem + 2vw,1.25rem); } .tool-block > span:last-child { font-size: .6875rem; } .collage-label p { font-size: 1.5rem; line-height: 1.25; } .editorial-collage figcaption { font-size: .6875rem; } .price-entry { padding-inline: 0; } .footer-bottom, .footer-legal { font-size: .75rem; line-height: 1.6; } .footer-bottom { gap: 20px 16px; } .dialog-toolbar h2 { font-size: 1.25rem; } .dialog-close { font-size: 0; } } @media (max-width:370px) { .site-header nav { font-size: .75rem; gap: 10px; } .human-paper { width: 76%; right: 24px; padding: 22px; } .human-heading h2 { font-size: 2.625rem; } .tab-list button { font-size: 1rem; } .tool-core-title { font-size: 1.625rem; } .tool-block > span:last-child { font-size: .625rem; } .collage-label p { font-size: 1.3125rem; } .hero-bottom { font-size: .625rem; } } /* /assets/redesign-20260930/pricing.css */ /* The pricing section uses the site's existing paper, lilac and ink tokens. */ #preise, #faq { --section-y: clamp(40px, 5vw, 64px); } #preise { padding-block: var(--section-y); } #preise .pricing-heading { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block: var(--stack-label) var(--stack-block); } #preise .pricing-heading h2 { max-width: 26ch; font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; font-weight: var(--w-h2); } #preise .trial-pricing { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr) minmax(180px, .6fr); gap: 16px 24px; padding: 20px 24px 18px 0; border: 1px solid #473b7026; border-radius: var(--radius-surface); margin-bottom: 24px; align-items: center; overflow: hidden; background: linear-gradient(110deg, var(--tint), color-mix(in srgb, var(--lilac) 28%, var(--tint))); } #preise .pricing-photo { position: relative; margin: 0; align-self: stretch; grid-row: 1 / 3; min-height: 150px; margin-block: -20px -18px; overflow: hidden; border-radius: 0; } #preise .pricing-photo img { display: block; width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 60% center; } @media (min-width: 768px) and (max-width: 1099px) { #preise .pricing-photo img { object-position: 20% 40%; } } #preise .pricing-photo figcaption { position: absolute; inset: auto 0 0; padding: 5px 8px; font-size: .6875rem; line-height: 1.5; color: var(--paper); background: #191b1bcc; } #preise .trial-pricing h3 { font-family: var(--heading); font-weight: 550; font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2rem); line-height: 1.2; margin-block: 8px; letter-spacing: -.04em; } #preise .trial-pricing .section-kicker { color: var(--accent); } #preise .trial-pricing__intro { margin: 0; font-size: var(--t-ui); line-height: var(--lh-copy); } #preise .trial-pricing .trial-cta { background: transparent; border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; color: var(--accent); padding: 12px 0; min-height: 48px; justify-self: end; box-shadow: none; white-space: normal; text-align: start; max-width: none; font-size: 1rem; font-weight: 550; text-wrap: balance; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { #preise .trial-pricing .trial-cta:hover { color: var(--ink); border-bottom-color: var(--ink); } } #preise .trial-pricing .trial-cta:active { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); } #preise .trial-pricing__terms { max-width: none; margin: 0; grid-column: 2 / -1; padding-top: 12px; font-size: .75rem; line-height: 1.5; border-color: #473b7026; } #preise .price-grid { gap: 16px; border: 0; align-items: stretch; } #preise .price-entry { min-width: 0; border: 1px solid #aaa5978c; border-radius: var(--radius-surface); padding: clamp(22px, 2vw, 28px); gap: 16px; background: var(--panel); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } #preise .price-entry:nth-child(2) { background: var(--tint); background: linear-gradient(125deg, color-mix(in srgb, var(--panel) 16%, var(--tint)), color-mix(in srgb, var(--lilac) 22%, var(--tint))); border-color: #473b7033; } #preise .price-entry:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } @supports (grid-template-rows: subgrid) { @media (min-width: 768px) { /* Name, price, minutes and button share four lines; the payment line sits once under the grid. */ #preise .price-grid { grid-template-rows: repeat(4, auto); row-gap: 0; } #preise .price-entry { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 16px; align-content: start; } #preise .price-entry .button { margin-top: 0; align-self: stretch; } } } #preise .price-entry .section-kicker { font-size: var(--t-label); letter-spacing: var(--track-label); } #preise .price-entry:nth-child(2) .section-kicker { color: var(--accent); } #preise .price-entry h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 550; } #preise .price-entry > p:not(.price-number):not(.price-terms) { font-size: clamp(1rem, .8rem + .4vw, 1.125rem); line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; } #preise .price-number { gap: 8px; flex-wrap: wrap; align-items: baseline; } #preise .price-number > span:first-child { font-size: clamp(3rem, 2.8rem + 1vw, 4rem); font-variant-numeric: lining-nums tabular-nums; } #preise .price-number .price-currency { order: -1; font-size: clamp(1.86rem, 1.74rem + .62vw, 2.48rem); font-weight: 400; line-height: 1; letter-spacing: -.04em; } #preise .price-number > span:last-child { font-size: .875rem; font-variant-numeric: lining-nums tabular-nums; } #preise .price-entry .button { background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: var(--radius-chip); box-shadow: none; width: 100%; max-width: none; min-height: 58px; padding: 14px 16px; margin-top: 8px; flex: 1 0 auto; align-items: center; font-size: clamp(1rem, .85rem + .5vw, 1.25rem); text-wrap: balance; gap: 12px; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } #preise .price-entry:nth-child(2) .button { background: var(--ink); color: var(--panel); border-color: var(--ink); } @media (hover: hover) and (pointer: fine) { #preise .price-entry .button:hover { background: var(--soft); transform: none; } #preise .price-entry:nth-child(2) .button:hover { background: var(--accent); border-color: var(--accent); } } #preise .price-entry .button:active { background: var(--tint); transform: none; } #preise .price-entry:nth-child(2) .button:active { background: color-mix(in srgb, var(--accent) 82%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 82%, var(--ink)); } #preise .price-entry .price-terms { font-size: .75rem; line-height: 1.65; color: var(--muted); } #preise .price-note { margin: 24px 0 0; font-size: .8125rem; color: var(--muted); } #preise :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } #preise .price-entry .button:focus-visible { outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { #preise .price-entry:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } } @media (min-width: 1100px) and (max-width: 1280px) { #preise .trial-pricing { grid-template-columns: minmax(0, .75fr) minmax(0, 1.75fr); padding: 24px 24px 20px 0; } #preise .pricing-photo { grid-row: 1 / 4; margin-block: -24px -20px; } #preise .trial-pricing .trial-cta { grid-column: 2; justify-self: start; max-width: none; padding-block: 8px; } #preise .trial-pricing__terms { grid-column: 2; } } @media (max-width: 1099px) { #preise .trial-pricing { grid-template-columns: minmax(0, .75fr) minmax(0, 1.75fr); gap: 12px 24px; padding: 24px 24px 20px 0; } #preise .pricing-photo { grid-row: 1 / 4; margin-block: -24px -20px; } #preise .trial-pricing .trial-cta { grid-column: 2; justify-self: start; max-width: none; padding-block: 8px; } #preise .trial-pricing__terms { grid-column: 2; } #preise .price-grid { gap: 16px; } #preise .price-entry { padding: 22px 18px; } #preise .price-entry .button { padding-inline: 12px; } } @media (max-width: 767px) { #preise { display: flex; flex-direction: column; } #preise .pricing-heading { order: 0; } #preise .price-grid { order: 1; } #preise .price-note { order: 2; } #preise .trust-strip { order: 2; } #preise .trial-pricing { order: 3; margin: 32px 0 0; } #preise .trial-pricing { padding: 0 18px 18px; grid-template-columns: minmax(0, 1fr); gap: 12px; } #preise .pricing-photo { grid-row: auto; min-height: 140px; max-height: 160px; margin: 0 -18px; } #preise .pricing-photo img { object-position: center 43%; } #preise .trial-pricing .trial-cta { grid-column: auto; justify-self: stretch; width: 100%; max-width: none; } #preise .trial-pricing__terms { grid-column: auto; font-size: .75rem; padding-top: 14px; } #preise .price-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } #preise .price-entry { padding: 22px; gap: 12px; } #preise .price-entry .button { margin-top: 6px; padding-inline: 16px; } } @media (prefers-reduced-motion: reduce) { #preise .price-entry, #preise .button, #preise .trial-cta { transition: none; transform: none; } } @media (forced-colors: active) { #preise .price-entry, #preise .trial-pricing { background: Canvas; color: CanvasText; border-color: CanvasText; } #preise .price-entry .button, #preise .price-entry:nth-child(2) .button { background: ButtonFace; color: ButtonText; border-color: ButtonText; } } /* #126 UI-267: fine-print link keeps its line, hit area grows by 4 px above and below. */ #preise .trial-pricing__terms a { display: inline-block; padding-block: 4px; margin-block: -4px; } /* #114 UI-204: one payment and guarantee line under three side-by-side plans. In the one-column layout every button keeps its own line, so the wording is always visible next to the checkout button it belongs to. */ #preise .price-terms--shared { margin: 16px 0 0; font-size: var(--t-note); line-height: 1.6; color: var(--muted); } @media (min-width: 768px) { #preise .price-entry .price-terms { display: none; } } @media (max-width: 767px) { #preise .price-terms--shared { display: none; } } /* #115 UI-215: facts that exist, linked to the legal pages. */ .trust-strip { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; margin: 16px 0 0; padding: 0; font-size: var(--t-note); line-height: 1.6; color: var(--muted); } .trust-strip li { display: inline-flex; align-items: center; min-height: 28px; } .trust-strip a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } .trust-strip a:focus-visible { color: var(--accent); text-decoration-color: currentColor; } @media (hover: hover) and (pointer: fine) { .trust-strip a:hover { color: var(--accent); text-decoration-color: currentColor; } } .trust-strip a:active { color: var(--ink); } .trust-strip a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs, 4px); } /* #114 UI-214: the hero's primary action returns after the film and after the use cases. */ .section-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 0 var(--section); margin-top: calc(var(--section) * -.4); } .section-cta .button { min-height: 58px; border-radius: var(--radius-control); padding: 16px 22px; gap: 20px; text-wrap: balance; font-size: clamp(1rem, 1.25vw, 1.125rem); max-width: 100%; } .section-cta .trial-home-terms { margin: 0; font-size: var(--t-note); line-height: 1.6; color: var(--muted); max-width: 62ch; } /* /assets/redesign-20260930/faq.css */ /* Native details keep every answer usable with keyboard and without scripts. */ #faq { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(32px, 6vw, 100px); padding-block: var(--section-y, 56px); } #faq .faq-intro { position: sticky; top: 112px; } #faq h2 { margin-block: var(--stack-label) var(--stack-title); max-width: 14ch; font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; } #faq h2 br { display: none; } #faq .faq-intro > p { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--muted); max-width: 32ch; } #faq .faq-categories { display: grid; margin-top: var(--stack-block); } #faq .faq-categories a { display: flex; justify-content: space-between; gap: 20px; padding: 16px 18px; min-height: 56px; border-bottom: 1px solid #aaa59766; font-size: 1.0625rem; text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } #faq:not(.faq-enhanced) .faq-categories a:first-child, #faq .faq-categories a[aria-current="true"] { background: var(--tint); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); } #faq .faq-categories a:focus-visible { background: var(--soft); color: var(--accent); } @media (hover: hover) and (pointer: fine) { #faq .faq-categories a:hover { background: var(--soft); color: var(--accent); } } #faq .faq-categories a:active { background: var(--tint); } #faq .faq-list { border: 0; min-width: 0; } #faq.faq-enhanced .faq-list { min-height: var(--faq-min, 0); } #faq .faq-kicker-end { display: block; margin-bottom: 24px; text-align: left; font-size: .6875rem; } #faq .faq-group[hidden] { display: none; } #faq .faq-group { scroll-margin-top: 115px; } #faq .faq-group + .faq-group { margin-top: 30px; } #faq .faq-group > h3 { font-size: .75rem; line-height: 1.5; font-weight: 600; letter-spacing: .05em; margin: 0 0 12px; color: var(--muted); } #faq.faq-enhanced .faq-group { margin-top: 0; } #faq.faq-enhanced .faq-group > h3 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #faq .faq-list details { padding: 0; margin-bottom: 14px; border: 1px solid #aaa59770; border-radius: var(--radius-sm); background: var(--panel); overflow: clip; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { #faq .faq-list details:hover { border-color: #473b7055; } } #faq .faq-list details[open] { background: var(--tint); background: linear-gradient(120deg, color-mix(in srgb, var(--panel) 20%, var(--tint)), var(--tint)); border-color: #473b702b; } #faq .faq-list summary { display: flex; align-items: start; position: relative; gap: 18px; padding: 20px 64px 20px 24px; min-height: 72px; list-style: none; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); font-size: clamp(1.125rem, 1.55vw, 1.375rem); font-weight: 550; line-height: 1.4; } #faq .faq-list summary::-webkit-details-marker { display: none; } @media (hover: hover) and (pointer: fine) { #faq .faq-list summary:hover { color: var(--accent); } } #faq .faq-list summary:active { background: var(--soft); } /* Plus drawn as two 12px bars; the vertical bar turns by 90 degrees when the answer is open. */ #faq .faq-list summary::before, #faq .faq-list summary::after { content: ""; position: absolute; right: 29px; top: calc(20px + .7em - 1px); width: 12px; height: 2px; border-radius: 1px; background: var(--accent); transition: transform var(--dur) var(--ease); } #faq .faq-list summary::before { transform: rotate(90deg); } #faq .faq-list details[open] > summary::before { transform: rotate(0deg); } #faq .faq-list p { margin: 0; padding: 0 24px 22px; font-size: var(--t-body); line-height: var(--lh-copy); max-width: none; } #faq .faq-list details { scroll-margin-top: 120px; } #faq :focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; border-radius: var(--radius-chip); } @supports selector(:has(*)) { #faq .faq-list details:has(> summary:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } #faq .faq-list summary:focus-visible { outline: none; } } #faq .faq-more { margin: 24px 0 0; } #faq .faq-more .conversion-secondary { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: .9375rem; text-decoration: underline; text-underline-offset: 5px; } @media (max-width: 767px) { #faq { grid-template-columns: minmax(0, 1fr); gap: 32px; } #faq .faq-intro { position: static; } #faq h2 { max-width: 14ch; } #faq .faq-intro > p { max-width: 40ch; } #faq .faq-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; } #faq .faq-categories a { border: 1px solid var(--line-ui); border-radius: var(--radius-chip); padding: 10px 8px; font-size: .875rem; line-height: 1.3; justify-content: center; text-align: center; align-items: center; min-height: 52px; overflow-wrap: anywhere; hyphens: auto; } #faq:not(.faq-enhanced) .faq-categories a:first-child, #faq .faq-categories a[aria-current="true"] { border-color: var(--accent); box-shadow: none; } #faq.faq-enhanced .faq-list { min-height: 0; padding-top: 0; } #faq .faq-kicker-end { display: none; } #faq .faq-list summary { font-size: 1.0625rem; padding: 20px 56px 20px 20px; gap: 16px; min-height: 68px; } #faq .faq-list summary::before, #faq .faq-list summary::after { right: 22px; } #faq .faq-list p { font-size: 1rem; padding-inline: 20px; padding-bottom: 20px; } } @media (max-width: 360px) { #faq .faq-categories { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #faq *, #faq *::before, #faq *::after { animation: none; transition: none; scroll-behavior: auto; } } @media (forced-colors: active) { #faq .faq-list details, #faq .faq-categories a { background: Canvas; color: CanvasText; border-color: CanvasText; } #faq .faq-list summary::before, #faq .faq-list summary::after { background: CanvasText; } } /* /assets/redesign-20260930/footer.css */ /* One final invitation, with the original brand face and full resource links. */ .site-footer { width: 100%; margin: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* The back-to-top button floats 20px above the bottom of the viewport and is 48px tall: at the end of the page the footer's last line ends above it, so nothing in the footer sits under the button. */ .site-footer #kostenlos-testen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 32px; /* One rhythm: the closing band uses the same section padding as every other section, top and bottom equal. */ --closing-pad: max(var(--gutter), calc((100% - 1440px) / 2)); --closing-button: 540px; /* The wordmark takes the room the copy leaves: up to 26vw and 400px, but never so large that less than 56px stay free between the primary button and the first letter (a little more than the 48px the design direction asks for). The word is 1.7 times as wide as its font size. At 1100px this gives 240px against the 242px (22vw) of 1099px, so nothing visibly steps there; 26vw applies from about 1270px. */ --closing-word: clamp(210px, min(26vw, calc((100vw - 2 * var(--gutter) - var(--closing-button) - 56px) / 1.7)), 400px); padding-block: var(--section); padding-inline: var(--closing-pad); border: 0; border-radius: 0; background: var(--tint); background: linear-gradient(115deg, color-mix(in srgb, var(--panel) 22%, var(--tint)), var(--tint) 48%, color-mix(in srgb, var(--lilac) 25%, var(--tint))); position: relative; overflow: hidden; } /* Both kickers share one row above the headline and the shared kicker style. */ #kostenlos-testen .closing-kickers { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; font-size: .75rem; line-height: 1.5; font-weight: 600; letter-spacing: .06em; color: var(--muted); } #kostenlos-testen .closing-kickers > span { min-width: 0; overflow-wrap: anywhere; } #kostenlos-testen .closing-copy { min-width: 0; } #kostenlos-testen .trial-finale__offer h2 { margin: var(--stack-label) 0 0; font-family: var(--heading); font-weight: var(--w-h2); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); } #kostenlos-testen .trial-finale__headline { font-family: var(--heading); font-weight: var(--w-h2); font-size: var(--t-h2); line-height: var(--lh-h2); max-width: none; letter-spacing: var(--track-h2); text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; margin: 0; } #kostenlos-testen .closing-lead, #kostenlos-testen .closing-accent { display: block; } #kostenlos-testen .closing-accent { color: var(--accent); } #kostenlos-testen .trial-finale__next { padding-top: 0; } #kostenlos-testen .trial-finale__intro { font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 43ch; margin-block: var(--stack-title) 0; text-wrap: pretty; } #kostenlos-testen .closing-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 24px; margin-top: var(--stack-block); } #kostenlos-testen .closing-actions .button { grid-column: 1 / -1; width: min(100%, var(--closing-button)); max-width: 100%; min-height: 58px; border-radius: var(--radius-control); padding: 16px 22px; gap: 20px; justify-content: space-between; text-align: left; text-wrap: balance; font-size: clamp(1rem, 1.25vw, 1.125rem); } #kostenlos-testen .closing-actions .button:active { background: color-mix(in srgb, var(--accent) 78%, var(--ink)); } #kostenlos-testen .conversion-secondary { font-size: .875rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-start; justify-self: start; gap: 14px; max-width: 100%; text-decoration: underline; text-underline-offset: 5px; } #kostenlos-testen .trust-strip--closing { margin-top: 12px; } #kostenlos-testen .trial-finale__terms { font-size: .8125rem; line-height: 1.65; max-width: 63ch; margin-top: 16px; color: var(--muted); text-wrap: pretty; } #kostenlos-testen .footer-signature { display: block; position: relative; align-self: center; margin-top: 28px; height: clamp(210px, 24vw, 360px); padding: 0; min-width: 0; color: var(--accent); } #kostenlos-testen .footer-word { display: block; position: absolute; right: 0; bottom: 0; width: max-content; padding: 0; font-family: var(--display); font-weight: 400; font-size: var(--closing-word); line-height: .83; letter-spacing: -.015em; white-space: nowrap; transform: none; mask: none; } /* The curve is decoration in the gap between the primary button and the wordmark. It is drawn on phones and from 1440px, where that gap is wide enough; from 768 to 1439px the wordmark leaves no room beside the button, so it is hidden (UI-221). */ #kostenlos-testen .closing-curve { display: none; position: absolute; color: var(--accent); pointer-events: none; } #kostenlos-testen .closing-curve svg { display: block; width: 100%; height: 100%; overflow: visible; } @media (min-width: 1440px) { /* The gap runs from the button's right edge to the wordmark's left edge (its width is about 1.7 times its font size, right-aligned on the content rail). The curve's box is centred in it, with its tip level with the button. Measured on the drawn path (getScreenCTM), it is 22px from the button and 26px from the first letter's box at 1440px, 23px from the button at 1536px and 42px from 1920px. */ #kostenlos-testen .closing-curve { --closing-gap: calc(100% - 2 * var(--closing-pad) - var(--closing-button) - 1.7 * var(--closing-word)); display: block; left: calc(var(--closing-pad) + var(--closing-button) + var(--closing-gap) / 2); top: 60%; width: clamp(120px, calc((var(--closing-gap) - 44px) * 1.3245), 180px); aspect-ratio: 200 / 180; transform: translate(-48.25%, -84.4%); } } .site-footer .footer-grid { display: grid; grid-template-columns: minmax(160px, .95fr) repeat(3, minmax(120px, .75fr)) minmax(150px, .9fr) minmax(200px, 1fr); gap: 24px; width: min(100% - var(--gutter) * 2, 1440px); margin-inline: auto; padding-block: 36px 16px; font-size: .9375rem; } .site-footer .footer-brand { min-width: 0; } .site-footer .footer-brand > a { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; text-decoration: none; } .site-footer .footer-brand img { width: 76px; height: auto; } .site-footer .footer-brand-word { font-family: var(--display); font-size: 60px; line-height: 1; } .site-footer .footer-brand > p { font-size: .75rem; margin: 12px 0; line-height: 1.6; max-width: 30ch; color: var(--muted); } .site-footer .footer-grid h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; margin: 0 0 10px; } .site-footer .footer-grid nav:not(.footer-languages) { display: grid; align-content: start; } .site-footer .footer-grid nav:not(.footer-languages) > a { display: flex; align-items: center; min-height: 44px; line-height: 1.45; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; color: var(--muted); padding-block: 6px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; transition: color var(--dur-fast, 180ms) var(--ease, ease-out), text-decoration-color var(--dur-fast, 180ms) var(--ease, ease-out); } .site-footer .footer-grid nav:not(.footer-languages) > a:focus-visible { color: var(--accent); text-decoration-color: currentColor; } @media (hover: hover) and (pointer: fine) { .site-footer .footer-grid nav:not(.footer-languages) > a:hover { color: var(--accent); text-decoration-color: currentColor; } } .site-footer .footer-grid nav:not(.footer-languages) > a:active { color: var(--ink); } @media (hover: hover) and (pointer: fine) { .site-footer .footer-grid nav:not(.footer-languages) > a { min-height: 36px; padding-block: 4px; } } .site-footer .footer-languages { display: flex; flex-wrap: wrap; gap: 4px 6px; } .site-footer .footer-languages > a { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-xs); min-height: 44px; min-width: 38px; padding: 6px; color: var(--muted); text-decoration: none; font-size: .75rem; transition: background-color var(--dur-fast, 180ms) var(--ease, ease-out), color var(--dur-fast, 180ms) var(--ease, ease-out); } .site-footer .footer-languages > a:focus-visible { background: var(--tint); color: var(--accent); } @media (hover: hover) and (pointer: fine) { .site-footer .footer-languages > a:hover { background: var(--tint); color: var(--accent); } } .site-footer .footer-languages > a:active { background: color-mix(in srgb, var(--accent) 14%, var(--tint)); color: var(--ink); } .site-footer .footer-languages > a[aria-current="true"] { background: var(--tint); border-color: #473b7033; color: var(--accent); } .site-footer .footer-languages > a > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-footer .footer-back, .site-footer .footer-transparency { min-height: 44px; display: flex; align-items: center; gap: 14px; font-size: .875rem; color: var(--muted); text-decoration: none; } .site-footer .footer-transparency { margin-top: 10px; } .site-footer :is(.footer-back, .footer-transparency, .footer-meta .home-language-credit) { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--dur-fast, 180ms) var(--ease, ease-out), text-decoration-color var(--dur-fast, 180ms) var(--ease, ease-out); } .site-footer :is(.footer-back, .footer-transparency, .footer-meta .home-language-credit):focus-visible { color: var(--accent); text-decoration-color: currentColor; } @media (hover: hover) and (pointer: fine) { .site-footer :is(.footer-back, .footer-transparency, .footer-meta .home-language-credit):hover { color: var(--accent); text-decoration-color: currentColor; } } .site-footer :is(.footer-back, .footer-transparency, .footer-meta .home-language-credit):active { color: var(--ink); } /* The company line and the DB-IP credit share the last row. */ .site-footer .footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; width: min(100% - var(--gutter) * 2, 1440px); margin: 8px auto 0; padding-top: 6px; border-top: 1px solid #aaa59766; font-size: .75rem; line-height: 1.6; color: var(--muted); } .site-footer .footer-meta .home-language-credit { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-size: inherit; line-height: inherit; color: var(--muted); } .site-footer :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (min-width: 1100px) { #kostenlos-testen .trial-finale__intro { max-width: 48ch; } } @media (max-width: 1099px) { #kostenlos-testen .footer-word { font-size: 22vw; } #kostenlos-testen .footer-signature { height: 20vw; } #kostenlos-testen .closing-actions { grid-template-columns: minmax(0, 1fr); } #kostenlos-testen .closing-actions .button { grid-column: auto; } .site-footer .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; } .site-footer .footer-brand { grid-column: 1/-1; display: flex; align-items: center; gap: 20px; } .site-footer .footer-brand > p { max-width: none; } .site-footer .footer-language-group { grid-column: 1/-1; } .site-footer .footer-languages { gap: 6px; } } @media (max-width: 767px) { .site-footer #kostenlos-testen { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-inline: var(--gutter); } #kostenlos-testen .closing-actions .button { width: 100%; justify-content: space-between; } /* The word stays inside its row and leaves the left quarter to the curve. */ #kostenlos-testen .footer-signature { width: 100%; height: clamp(100px, 31vw, 208px); margin-top: 0; } #kostenlos-testen .footer-word { font-size: clamp(120px, 37vw, 250px); } #kostenlos-testen .closing-curve { display: block; left: var(--gutter); top: auto; bottom: 40px; width: 21%; height: clamp(72px, 22vw, 125px); } .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; padding-top: 32px; } .site-footer .footer-brand { gap: 16px; flex-wrap: wrap; } .site-footer .footer-brand > p { margin: 0; max-width: 30ch; } .site-footer .footer-language-group { grid-column: 1 / -1; } .site-footer .footer-grid nav:not(.footer-languages) > a { font-size: .8125rem; } .site-footer .footer-languages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .site-footer .footer-languages > a { min-height: 44px; min-width: 0; } } @media (max-width: 420px) { .site-footer .footer-meta { flex-direction: column; align-items: flex-start; } } @media (max-width: 370px) { .site-footer .footer-grid { gap: 24px 14px; } .site-footer .footer-brand img { width: 64px; } } /* One-time reveal of the closing invitation. The hidden state exists only when the head script set .closing-reveal (JavaScript on, motion allowed); without it everything is visible from the first paint. */ [data-reveal="1"] { --reveal-step: 1; } [data-reveal="2"] { --reveal-step: 2; } [data-reveal="3"] { --reveal-step: 3; } @media (prefers-reduced-motion: no-preference) { html.closing-reveal #kostenlos-testen [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); } html.closing-reveal #kostenlos-testen [data-reveal] { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--reveal-step, 0) * 60ms); } html.closing-reveal #kostenlos-testen [data-reveal].is-in { transition-delay: calc(var(--reveal-step, 0) * 60ms); } } @media (prefers-reduced-motion: reduce) { .site-footer *, .site-footer *::after { animation: none; transition: none; scroll-behavior: auto; } } @media (forced-colors: active) { .site-footer #kostenlos-testen { background: Canvas; color: CanvasText; border-color: CanvasText; } #kostenlos-testen .footer-signature { color: CanvasText; } .site-footer .footer-languages > a[aria-current="true"] { background: Canvas; border-color: CanvasText; color: CanvasText; } } /* #126 UI-267 */ #kostenlos-testen .trial-finale__terms a { display: inline-block; padding-block: 4px; margin-block: -4px; } /* /assets/i18n-20260909/site-language.css */ .aioos-language-picker{display:inline-flex;position:relative;max-width:100%;color:var(--ink,#191b1b);font:inherit;font-size:13px;line-height:1.3;letter-spacing:normal;text-transform:none;flex-shrink:0;isolation:isolate;z-index:140} .aioos-language-picker .aioos-language-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:36px;padding:0 12px 0 10px;border:1px solid var(--line-ui,#7f7a6e);border-radius:var(--radius-pill,999px);background:var(--panel,#f8f4e9);color:var(--ink,#191b1b);font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;white-space:nowrap} .aioos-language-picker .aioos-language-trigger svg{fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0} .aioos-language-picker .aioos-language-value,.aioos-language-picker .aioos-language-arrow{padding:0;letter-spacing:.02em} .aioos-language-picker .aioos-language-arrow{display:inline-flex;width:10px;height:10px}.aioos-language-picker .aioos-language-arrow svg,.aioos-language-picker .aioos-language-check svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .aioos-language-picker .aioos-language-trigger[aria-expanded=true]{background:var(--tint,#e4dced);border-color:var(--accent,#473b70)} @media(hover:hover) and (pointer:fine){.aioos-language-picker .aioos-language-trigger:hover{background:var(--tint,#e4dced);border-color:var(--accent,#473b70)}} .aioos-language-picker .aioos-language-trigger:focus-visible,.aioos-language-picker .aioos-language-menu button:focus-visible{outline:2px solid var(--accent,#473b70);outline-offset:3px} .aioos-language-picker .aioos-language-trigger[aria-busy=true]{cursor:progress;opacity:.65} .aioos-language-picker .aioos-language-menu{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;width:224px;max-width:calc(100vw - 32px);max-height:min(540px,70dvh);overflow:auto;padding:8px;background:var(--panel,#f8f4e9);border:1px solid var(--line-ui,#7f7a6e);border-radius:var(--radius-panel,14px);box-shadow:var(--shadow-raise,0 12px 24px -16px #55416955);text-align:start} .aioos-language-picker .aioos-language-menu[hidden]{display:none} .aioos-language-picker .aioos-language-title{display:block;padding:8px 10px 12px;color:var(--muted,#5f5d56);font:11px/1.4 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.025em} .aioos-language-picker .aioos-language-menu button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:44px;padding:10px;border:0;border-radius:var(--radius-sm,8px);background:transparent;color:var(--ink,#191b1b);font:inherit;font-size:15px;font-weight:500;line-height:1.3;text-align:start;cursor:pointer} .aioos-language-picker .aioos-language-menu button span{padding:0} .aioos-language-picker .aioos-language-menu button:focus-visible,.aioos-language-picker .aioos-language-menu button[aria-checked=true]{background:var(--tint,#e4dced)} @media(hover:hover) and (pointer:fine){.aioos-language-picker .aioos-language-menu button:hover{background:var(--tint,#e4dced)}} .aioos-language-picker .aioos-language-check{display:inline-flex;width:14px;height:14px;color:var(--accent,#473b70)} .aioos-language-error:not(:empty){position:absolute;inset-inline-end:0;top:100%;z-index:200;width:224px;max-width:calc(100vw - 32px);padding:12px;background:var(--panel,#f8f4e9);color:var(--ink,#191b1b);border:1px solid var(--accent,#473b70);font:inherit;font-size:13px;line-height:1.45} .aioos-language-picker:has(.aioos-language-menu:not([hidden])) .aioos-language-error:not(:empty){top:auto;bottom:calc(100% + 8px)} html[data-i18n=pending] main{visibility:hidden} .aioos-language-corner{position:fixed;z-index:120;top:14px;right:18px} #langPick{display:inline-flex} main.card h1{overflow-wrap:anywhere;hyphens:auto} .nav-shell nav:has(#langPick){flex-wrap:wrap} .bk-wrap .as-card{min-width:0} .bk-wrap .as-voice{overflow-wrap:anywhere} @media(max-width:620px){.aioos-language-corner{top:10px;right:10px}.site-header nav:has(.aioos-language-picker){flex-wrap:wrap;column-gap:12px;row-gap:2px}.site-header nav>.aioos-language-picker{margin-inline-start:auto}} @media(forced-colors:active){.aioos-language-picker .aioos-language-trigger,.aioos-language-picker .aioos-language-menu{border:1px solid ButtonText}.aioos-language-picker .aioos-language-menu button[aria-checked=true]{outline:1px solid Highlight}} @media(max-width:620px){.nav-shell nav:has(#langPick){gap:10px}.nav-shell nav:has(#langPick) .back{margin-inline-start:auto;white-space:normal;max-width:100%}} /* /assets/redesign-20260930/hero.css */ /* Headline size that keeps the longer sentence on one line: 100cqi divided by its width in em (measured per language) plus 3 percent. */ :root:lang(en) { --hero-fit: 12.0cqi; } :root:lang(de) { --hero-fit: 10.5cqi; } :root:lang(es) { --hero-fit: 10.9cqi; } :root:lang(fr) { --hero-fit: 9.7cqi; } :root:lang(it) { --hero-fit: 8.7cqi; } :root:lang(nl) { --hero-fit: 9.8cqi; } :root:lang(pl) { --hero-fit: 10.4cqi; } :root:lang(pt) { --hero-fit: 8.6cqi; } :root:lang(ro) { --hero-fit: 9.8cqi; } :root:lang(sv) { --hero-fit: 12.8cqi; } /* Reference studio composition; devices contain the complete genuine captures. */ body[data-aioos-visual="20260910"] #anfang { display: grid; width: 100%; max-width: none; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(min(100% - 2 * var(--gutter), 1440px) * .44)) minmax(0, calc(min(100% - 2 * var(--gutter), 1440px) * .56)) minmax(var(--gutter), 1fr); grid-template-rows: auto 1fr auto; gap: 0; padding-top: clamp(30px, 3.2vw, 48px); } body[data-aioos-visual="20260910"] #anfang .hero-word-row { grid-column: 2; grid-row: 1; padding: 0; align-items: start; } body[data-aioos-visual="20260910"] #anfang .hero-word-row, body[data-aioos-visual="20260910"] #anfang .hero-intro { position: relative; z-index: 1; } body[data-aioos-visual="20260910"] #anfang .hero-word { font-size: min(var(--t-word), 27svh); line-height: .86; letter-spacing: -.012em; } body[data-aioos-visual="20260910"] #anfang .hero-aside { display: none; } body[data-aioos-visual="20260910"] #anfang .hero-intro { grid-column: 2; grid-row: 2; align-self: start; display: flex; flex-direction: column; align-items: start; gap: var(--stack-title); padding: 24px 0 0; } body[data-aioos-visual="20260910"] #anfang .hero-intro { container-type: inline-size; } body[data-aioos-visual="20260910"] #anfang .hero-intro h2 { max-width: none; font-size: min(var(--t-hero-intro), var(--hero-fit, 6.4cqi)); line-height: 1.05; letter-spacing: -.05em; text-wrap: initial; overflow-wrap: normal; hyphens: none; } body[data-aioos-visual="20260910"] #anfang .hero-intro h2 .hero-line { display: block; white-space: nowrap; } body[data-aioos-visual="20260910"] #anfang .hero-intro > p { max-width: 30ch; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--muted); } body[data-aioos-visual="20260910"] #anfang .hero-actions { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 28px; width: 100%; margin-top: 2px; } body[data-aioos-visual="20260910"] #anfang .hero-actions .button { grid-column: 1 / -1; justify-self: start; max-width: 100%; min-height: 58px; padding: 16px 21px; font-size: clamp(14px, 1.15vw, 17px); border-radius: var(--radius-control); white-space: normal; } body[data-aioos-visual="20260910"] #anfang .conversion-secondary { justify-self: start; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 14px; font-weight: var(--w-ui); text-decoration: none; white-space: nowrap; } body[data-aioos-visual="20260910"] #anfang .conversion-secondary__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } body[data-aioos-visual="20260910"] #anfang .conversion-secondary__label { font-size: inherit; } body[data-aioos-visual="20260910"] #anfang .conversion-secondary > span[aria-hidden] { font-size: 18px; line-height: 1; } body[data-aioos-visual="20260910"] #anfang .trial-home-terms { grid-column: 1 / -1; max-width: 62ch !important; padding-top: 3px; font-size: var(--t-note) !important; line-height: 1.6; color: var(--muted); } body[data-aioos-visual="20260910"] #anfang .hero-stage { --device-field: min(100%, 886.4px); grid-column: 3 / 5; grid-row: 1 / 3; align-self: stretch; width: 100%; margin-inline: 0; height: auto; min-height: clamp(570px, 51vw, 770px); background: transparent; overflow: visible; border-radius: 0; } body[data-aioos-visual="20260910"] #anfang .studio-backdrop { position: absolute; inset: 0 0 0 -22%; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 18%), linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 18%), linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); mask-composite: intersect; } body[data-aioos-visual="20260910"] #anfang .studio-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: right center; } body[data-aioos-visual="20260910"] #anfang .hero-stage::before, body[data-aioos-visual="20260910"] #anfang .hero-stage::after, body[data-aioos-visual="20260910"] #anfang .hero-plinth, body[data-aioos-visual="20260910"] #anfang .dot-plane, body[data-aioos-visual="20260910"] #anfang .stage-note { display: none; } body[data-aioos-visual="20260910"] #anfang .hero-desktop { width: calc(var(--device-field) * .74); left: calc(var(--device-field) * .04); top: auto; bottom: 22%; border-width: 5px; border-radius: var(--radius-lg); transform: rotateY(-4deg) rotateX(1deg) rotateZ(-3deg); box-shadow: var(--shadow-device); } body[data-aioos-visual="20260910"] #anfang .hero-devices { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1400px) rotateX(calc(var(--ty, 0) * -2deg)) rotateY(calc(var(--tx, 0) * 3deg)); } body[data-aioos-visual="20260910"] #anfang .desktop-chrome { display: none; } body[data-aioos-visual="20260910"] #anfang .hero-phone { width: calc(var(--device-field) * .25); min-width: 0; right: calc(100% - var(--device-field) * .95); top: auto; bottom: 19%; border-width: 5px; border-radius: 29px; transform: rotateY(-3deg) rotateZ(4deg); translate: 0 0 36px; box-shadow: inset 0 0 0 1px #787573, 3px 2px 0 1px #74706c, 0 22px 24px -14px #30263d88; } body[data-aioos-visual="20260910"] #anfang .hero-phone .phone-top { height: 22px; padding-inline: 12px; font-size: 7px; } body[data-aioos-visual="20260910"] #anfang .hero-phone .phone-island { width: 46px; height: 12px; top: 5px; } body[data-aioos-visual="20260910"] #anfang .hero-route { display: none; } body[data-aioos-visual="20260910"] #anfang .stage-caption { inset: auto 22px 4%; font-size: clamp(12px, 1vw, 15px); color: var(--ink); align-items: end; gap: 12px; } body[data-aioos-visual="20260910"] #anfang .stage-caption span:first-child { display: none; } body[data-aioos-visual="20260910"] #anfang .stage-caption span:last-child { margin-left: auto; width: fit-content; max-width: 100%; white-space: nowrap; text-align: end; padding: 4px 10px; border-radius: var(--radius-chip); background: color-mix(in srgb, var(--paper) 90%, transparent); } body[data-aioos-visual="20260910"] #anfang .hero-bottom { grid-column: 2 / 4; margin-top: 22px; min-height: 54px; padding: 5px 0; font-size: var(--t-caption); color: var(--muted); } html.aioos-conversion .site-header > .brand img { width: 46px; height: auto; } @media (min-width: 768px) and (max-width: 1099px) { body[data-aioos-visual="20260910"] #anfang { grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc((100% - 2 * var(--gutter)) * .43)) minmax(0, calc((100% - 2 * var(--gutter)) * .57)) minmax(var(--gutter), 1fr); } body[data-aioos-visual="20260910"] #anfang .hero-intro { padding-top: 18px; } body[data-aioos-visual="20260910"] #anfang .hero-stage { min-height: 520px; } body[data-aioos-visual="20260910"] #anfang .hero-desktop { width: 77%; bottom: 21%; } body[data-aioos-visual="20260910"] #anfang .hero-phone { width: 27%; bottom: 16%; } body[data-aioos-visual="20260910"] #anfang .hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 22px; } body[data-aioos-visual="20260910"] #anfang .hero-actions .button { flex: 0 0 100%; max-width: 100%; } body[data-aioos-visual="20260910"] #anfang .trial-home-terms { flex: 0 0 100%; } body[data-aioos-visual="20260910"] #anfang .hero-actions .button { min-height: 54px; padding: 13px 16px; font-size: 14px; gap: 14px; } body[data-aioos-visual="20260910"] #anfang .trial-home-terms { font-size: var(--t-caption) !important; } } @media (max-width: 767px) { body[data-aioos-visual="20260910"] #anfang { width: calc(100% - 2 * var(--gutter)); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 22px; } body[data-aioos-visual="20260910"] #anfang .hero-word-row { grid-column: 1; } body[data-aioos-visual="20260910"] #anfang .hero-word { font-size: min(clamp(120px, 35vw, 210px), 42svh); } body[data-aioos-visual="20260910"] #anfang .hero-intro { grid-column: 1; grid-row: 2; padding: 18px 0 22px; } body[data-aioos-visual="20260910"] #anfang .hero-intro h2 { font-size: min(clamp(30px, 7.8vw, 47px), var(--hero-fit, 6.4cqi)); } body[data-aioos-visual="20260910"] #anfang .hero-intro > p { max-width: 34ch; } body[data-aioos-visual="20260910"] #anfang .hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 24px; } body[data-aioos-visual="20260910"] #anfang .hero-actions .button { flex: 0 0 100%; max-width: 100%; } body[data-aioos-visual="20260910"] #anfang .trial-home-terms { flex: 0 0 100%; } body[data-aioos-visual="20260910"] #anfang .hero-stage { grid-column: 1; grid-row: 3; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); height: clamp(330px, 94vw, 590px); min-height: 0; } body[data-aioos-visual="20260910"] #anfang .studio-backdrop { inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); } body[data-aioos-visual="20260910"] #anfang .hero-desktop { width: 78%; left: 3%; bottom: 20%; border-width: 3px; border-radius: var(--radius-sm); } body[data-aioos-visual="20260910"] #anfang .hero-phone { width: 29%; right: 6%; bottom: 17%; border-width: 3px; border-radius: 22px; } body[data-aioos-visual="20260910"] #anfang .hero-phone .phone-top { height: 16px; padding-inline: 7px; font-size: 5px; } body[data-aioos-visual="20260910"] #anfang .hero-phone .phone-island { width: 32px; height: 8px; top: 4px; } body[data-aioos-visual="20260910"] #anfang .stage-caption { inset: auto 18px 5%; font-size: var(--t-caption); } body[data-aioos-visual="20260910"] #anfang .hero-bottom { grid-column: 1; grid-row: 4; margin-top: 13px; gap: 12px; } body[data-aioos-visual="20260910"] #anfang .hero-bottom > span:last-child { display: none; } } @media (max-width: 370px) { body[data-aioos-visual="20260910"] #anfang .hero-word { font-size: 38vw; } body[data-aioos-visual="20260910"] #anfang .hero-actions { gap: 7px 14px; } body[data-aioos-visual="20260910"] #anfang .hero-actions .button { width: 100%; font-size: 14px; padding-inline: 15px; gap: 12px; } body[data-aioos-visual="20260910"] #anfang .hero-stage { height: 320px; } } @media (prefers-reduced-motion: no-preference) { #anfang .hero-word-row, #anfang .hero-intro { animation: aioos-hero-arrive 600ms var(--ease) both; } #anfang .hero-intro { animation-delay: 70ms; } #anfang .hero-stage { animation: aioos-hero-arrive 750ms var(--ease) 100ms both; } @keyframes aioos-hero-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } } @media (prefers-reduced-motion: reduce) { body[data-aioos-visual="20260910"] #anfang .hero-devices { transform: none; } } @media (forced-colors: active) { body[data-aioos-visual="20260910"] #anfang .hero-stage { background: Canvas; border: 1px solid CanvasText; } body[data-aioos-visual="20260910"] #anfang .studio-backdrop, body[data-aioos-visual="20260910"] #anfang .hero-route { display: none; } } /* Landscape phones: the wordmark gives way so the actions stay in reach. */ @media (max-height: 450px) { body[data-aioos-visual="20260910"] #anfang .hero-word { font-size: 96px; } } /* Header, one control spec for the homepage family: 44px tap height, radius --radius-control, 160ms colour/background/border/transform, one press state, one focus ring. */ html.aioos-conversion body[data-aioos-visual="20260910"] .site-header { transition: none; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header::before { transition: box-shadow var(--dur-shell) var(--ease), border-bottom-color var(--dur-shell) var(--ease); } html.aioos-conversion.nav-scrolled body[data-aioos-visual="20260910"] .site-header::before { box-shadow: var(--shadow-nav); } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav { font-size: var(--t-nav); font-weight: var(--w-nav); } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav a { transition: color var(--dur-nav) var(--ease); text-decoration-color: transparent; } @media (hover: hover) and (pointer: fine) { html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav a:hover { color: var(--accent); } } html.aioos-conversion body[data-aioos-visual="20260910"] .nav-demo, html.aioos-conversion body[data-aioos-visual="20260910"] #anfang .hero-actions .button, html.aioos-conversion .nav-menu-toggle { border-radius: var(--radius-control); transition: color var(--dur-nav) var(--ease), background var(--dur-nav) var(--ease), border-color var(--dur-nav) var(--ease), transform var(--dur-nav) var(--ease); } html.aioos-conversion .nav-demo { font-size: var(--t-nav); font-weight: var(--w-ui); } /* The header call to action stays filled; it no longer flips with the hero button. */ html.aioos-conversion.nav-inline-primary .nav-demo { background: var(--ink); color: var(--panel); border-color: var(--ink); } @media (hover: hover) and (pointer: fine) { html.aioos-conversion.nav-inline-primary .nav-demo:hover { background: var(--accent); border-color: var(--accent); } } html.aioos-conversion .site-header :focus-visible, html.aioos-conversion .conversion-actions :focus-visible, html.aioos-conversion .back-to-top:focus-visible, html.aioos-conversion .site-header .home-language-trigger:focus-visible { outline: var(--focus); outline-offset: 3px; } /* Desktop (from 1100px): nav labels are never split inside a word; the language slot is reserved before the script shows it. */ @media (min-width: 1100px) { html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav { gap: clamp(20px, 2.1vw, 34px); } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav a { white-space: nowrap; overflow-wrap: normal; } html.aioos-conversion.nav-ready:not(.lang-slot-released) .home-language-trigger[hidden] { display: inline-flex; visibility: hidden; } } /* Menu toggle: three bars that morph into a cross. */ html.aioos-conversion .nav-menu-toggle { gap: 10px; font-weight: var(--w-ui); } html.aioos-conversion .nav-menu-toggle > [data-menu-symbol] { position: relative; display: block; flex: 0 0 auto; width: 18px; height: 12px; font-size: 0; line-height: 0; color: inherit; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; transition: background-size var(--dur-base) var(--ease); } html.aioos-conversion .nav-menu-toggle > [data-menu-symbol]::before, html.aioos-conversion .nav-menu-toggle > [data-menu-symbol]::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease); } html.aioos-conversion .nav-menu-toggle > [data-menu-symbol]::before { top: 0; } html.aioos-conversion .nav-menu-toggle > [data-menu-symbol]::after { bottom: 0; } html.aioos-conversion .nav-menu-toggle[aria-expanded="true"] > [data-menu-symbol] { background-size: 0 2px; } html.aioos-conversion .nav-menu-toggle[aria-expanded="true"] > [data-menu-symbol]::before { transform: translateY(5px) rotate(45deg); } html.aioos-conversion .nav-menu-toggle[aria-expanded="true"] > [data-menu-symbol]::after { transform: translateY(-5px) rotate(-45deg); } /* Compact header below 1100px (phone and tablet): brand, call to action and menu on one row, the links in a sheet. */ @media (max-width: 1099px) { html.aioos-conversion { --navigation-height: 66px; scrollbar-gutter: stable; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; width: 100%; height: auto; min-height: var(--navigation-height); padding-block: 8px; padding-inline: var(--gutter); } html.aioos-conversion body[data-aioos-visual="20260910"] .nav-demo { grid-column: 2; grid-row: 1; justify-self: end; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 14px; gap: 10px; white-space: normal; text-align: center; } html.aioos-conversion.nav-ready .nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; grid-column: 3; grid-row: 1; min-height: 44px; min-width: 44px; padding: 9px 12px; background: none; border: 1px solid var(--line-ui); font-size: var(--t-nav); } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav { grid-row: 2; grid-column: 1 / -1; width: 100%; margin: 0; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav a { white-space: normal; overflow-wrap: anywhere; } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav { display: grid; position: absolute; top: 100%; left: 0; right: 0; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 12px var(--gutter) 18px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-nav); max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; opacity: 1; translate: 0 0; transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease), display 240ms allow-discrete; } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav[hidden] { display: none; opacity: 0; translate: 0 -6px; transition-duration: 160ms; } @starting-style { html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav:not([hidden]) { opacity: 0; translate: 0 -6px; } } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a { min-height: 48px; border-bottom: 1px solid var(--line); padding-block: 12px; } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav .home-language-trigger { order: 10; grid-column: 1 / -1; width: 100%; justify-content: flex-start; margin-top: 10px; } /* Scrim under the open sheet; the page behind stops scrolling. */ html.aioos-conversion body[data-aioos-visual="20260910"] .site-header::after { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease); } html.aioos-conversion:has(.nav-menu-toggle[aria-expanded="true"]) body[data-aioos-visual="20260910"] .site-header::after { opacity: 1; pointer-events: auto; } html.aioos-conversion:has(.nav-menu-toggle[aria-expanded="true"]) { overflow: hidden; } /* Without script the links stay in the page flow, one wrapped row, and the header does not stick. */ html.aioos-conversion:not(.nav-ready) body[data-aioos-visual="20260910"] .site-header { position: static; } html.aioos-conversion:not(.nav-ready) body[data-aioos-visual="20260910"] .site-header nav { display: flex; flex-wrap: wrap; gap: 0 18px; } } @media (max-width: 350px) { html.aioos-conversion body[data-aioos-visual="20260910"] .site-header { padding-inline: 12px; gap: 8px; } html.aioos-conversion body[data-aioos-visual="20260910"] .nav-demo { padding-inline: 10px; gap: 6px; } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav { padding-inline: 12px; } } /* Back to top: one 44px icon at the bottom right, out of the text column, away while the footer is on screen. */ html.aioos-conversion .back-to-top { left: auto; right: max(16px, env(safe-area-inset-right), calc((100vw - min(100vw, 1440px)) / 2 - 60px)); bottom: max(16px, env(safe-area-inset-bottom)); width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-control); box-shadow: var(--shadow-nav); } html.aioos-conversion .back-to-top > span:last-child { display: none; } html.aioos-conversion.footer-in-view .back-to-top { display: none; } @media (prefers-reduced-motion: reduce) { html.aioos-conversion .nav-demo, html.aioos-conversion .nav-menu-toggle, html.aioos-conversion .nav-menu-toggle > [data-menu-symbol], html.aioos-conversion .nav-menu-toggle > [data-menu-symbol]::before, html.aioos-conversion .nav-menu-toggle > [data-menu-symbol]::after, html.aioos-conversion body[data-aioos-visual="20260910"] .site-header::before, html.aioos-conversion body[data-aioos-visual="20260910"] .site-header::after, html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav { transition: none; } } /* Hero actions (UI-082): one primary, one quieter row; each consent line sits directly under the action it qualifies. */ body[data-aioos-visual="20260910"] #anfang .hero-actions { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 14px; width: 100%; margin-top: 2px; } body[data-aioos-visual="20260910"] #anfang .hero-action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; } body[data-aioos-visual="20260910"] #anfang .hero-action .button { flex: none; width: auto; max-width: 100%; } body[data-aioos-visual="20260910"] #anfang .hero-action .trial-home-terms { flex: none; grid-column: auto; max-width: 40ch !important; padding-top: 0; } body[data-aioos-visual="20260910"] #anfang .hero-secondary-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 36px; max-width: 100%; } body[data-aioos-visual="20260910"] #anfang .hero-secondary-row .conversion-secondary { min-height: 36px; } @media (max-width: 370px) { body[data-aioos-visual="20260910"] #anfang .hero-action--primary, body[data-aioos-visual="20260910"] #anfang .hero-action--primary .button { width: 100%; } } /* Audience cue (UI-083): the existing industry pages as a chip row under the lead. */ body[data-aioos-visual="20260910"] #anfang .hero-industries { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; } body[data-aioos-visual="20260910"] #anfang .hero-industries a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink); font-size: var(--t-nav); font-weight: var(--w-nav); line-height: 1.2; white-space: nowrap; text-decoration: none; transition: color var(--dur-nav) var(--ease), background var(--dur-nav) var(--ease), border-color var(--dur-nav) var(--ease), transform var(--dur-nav) var(--ease); } @media (hover: hover) and (pointer: fine) { body[data-aioos-visual="20260910"] #anfang .hero-industries a:hover { color: var(--accent); border-color: var(--accent); background: var(--tint); } } body[data-aioos-visual="20260910"] #anfang .hero-industries :focus-visible { outline: var(--focus); outline-offset: 3px; } @media (max-width: 767px) { /* One line on phones: the row scrolls sideways inside its own box; the page itself never does. */ body[data-aioos-visual="20260910"] #anfang .hero-industries { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 3px var(--gutter); scroll-padding-inline: var(--gutter); width: calc(100% + 2 * var(--gutter)); max-width: none; } body[data-aioos-visual="20260910"] #anfang .hero-industries::-webkit-scrollbar { display: none; } body[data-aioos-visual="20260910"] #anfang .hero-industries a { flex: 0 0 auto; } } /* Second level (UI-084): "More" opens Features, Guides, Developers and the eight industries. Native details, so it works without script. */ html.aioos-conversion .site-header .nav-more { position: relative; } html.aioos-conversion .site-header .nav-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 10px; list-style: none; cursor: pointer; white-space: nowrap; transition: color var(--dur-nav) var(--ease); } html.aioos-conversion .site-header .nav-more > summary::-webkit-details-marker { display: none; } html.aioos-conversion .site-header .nav-more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-nav) var(--ease); } html.aioos-conversion .site-header .nav-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } html.aioos-conversion .site-header .nav-more[open] > summary { color: var(--accent); } @media (hover: hover) and (pointer: fine) { html.aioos-conversion .site-header .nav-more > summary:hover { color: var(--accent); } } html.aioos-conversion .site-header .nav-more > summary:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: var(--radius-xs); } html.aioos-conversion .site-header .nav-more__col { display: flex; flex-direction: column; } html.aioos-conversion .site-header .nav-more__label { margin: 0; padding-inline: 0; font-size: var(--t-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-block: 8px 2px; } @media (min-width: 1100px) { html.aioos-conversion .site-header .nav-more__panel { position: absolute; top: calc(100% + 14px); right: -24px; width: max-content; z-index: 5; display: grid; grid-template-columns: auto auto; gap: 8px 40px; padding: 18px 28px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-surface); box-shadow: var(--shadow-hover); } html.aioos-conversion .site-header .nav-more__panel a { min-height: 36px; padding-block: 6px; } html.aioos-conversion .site-header .nav-more__industries { display: grid; grid-template-columns: auto auto; column-gap: 28px; align-content: start; } html.aioos-conversion .site-header .nav-more__industries .nav-more__label { grid-column: 1 / -1; } @media (prefers-reduced-motion: no-preference) { html.aioos-conversion .site-header .nav-more[open] .nav-more__panel { animation: aioos-more-in var(--dur-nav) var(--ease) both; } @keyframes aioos-more-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } } } } @media (max-width: 1099px) { html.aioos-conversion body[data-aioos-visual="20260910"] .site-header .nav-more { grid-column: 1 / -1; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header .nav-more > summary { width: 100%; justify-content: space-between; min-height: 48px; padding-block: 12px; border-bottom: 1px solid var(--line); } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header .nav-more__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding-bottom: 8px; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header .nav-more__col { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header .nav-more__industries { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header .nav-more__industries .nav-more__label { grid-column: 1 / -1; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header .nav-more__panel a { border-bottom: 0; min-height: 44px; padding-block: 10px; } html.aioos-conversion:not(.nav-ready) body[data-aioos-visual="20260910"] .site-header .nav-more { grid-column: auto; border-bottom: 0; } } /* #187 UI-219: the page is long on a phone and Pricing is the stop people look for, so in the compact sheet its link is a chip: a row up to 360px wide, lilac wash, accent edge, the in-page arrow. The arrow is in the markup and only shows here. */ html.aioos-conversion .site-header nav a .nav-chip-icon { display: none; } @media (max-width: 1099px) { html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a[href="#preise"] { grid-column: 1 / -1; justify-self: start; width: min(100%, 22.5rem); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block: var(--s-3) var(--s-2); padding: var(--s-3) var(--s-5); border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--tint); color: var(--accent); font-weight: var(--w-ui); text-decoration: none; transition: background var(--dur-nav) var(--ease), color var(--dur-nav) var(--ease), transform var(--dur-nav) var(--ease); } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a[href="#preise"] .nav-chip-icon { display: inline-flex; align-items: center; } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a[href="#preise"] .icon { width: var(--icon-m); height: var(--icon-m); } @media (hover: hover) and (pointer: fine) { html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a[href="#preise"]:hover { background: var(--lilac); } } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a[href="#preise"]:active { transform: var(--press); } html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a[href="#preise"][aria-current="location"] { background: var(--accent); color: var(--panel); text-decoration: none; } } @media (prefers-reduced-motion: reduce) { html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav a[href="#preise"] { transition: none; } } /* /assets/redesign-20260930/app.css */ /* Compact reference showroom with native tabs and full genuine app captures. */ body[data-aioos-visual="20260910"] #app { width: 100%; max-width: none; padding-block: clamp(36px, 3.3vw, 48px); padding-inline: 0; } body[data-aioos-visual="20260910"] #app .app-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; margin: var(--stack-label) 0 var(--stack-block); } body[data-aioos-visual="20260910"] #app .app-heading h2 { font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; } body[data-aioos-visual="20260910"] #app .app-heading > .text-link { margin-bottom: 5px; font-size: 16px; } body[data-aioos-visual="20260910"] #app .app-showroom { display: block; min-height: 0; border: 0; background: transparent; } body[data-aioos-visual="20260910"] #app .app-editorial { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 20px; padding: 0 0 20px; background: transparent; } body[data-aioos-visual="20260910"] #app .index-type, body[data-aioos-visual="20260910"] #app .app-editorial > .notebook-art { display: none; } body[data-aioos-visual="20260910"] #app .tab-list { grid-column: 1; display: inline-flex; flex-direction: row; align-items: stretch; width: 100%; max-width: 100%; border: 1px solid var(--line-ui); border-radius: 40px; padding: 4px; gap: 4px; } body[data-aioos-visual="20260910"] #app .tab-list button { display: block; flex: 1 1 auto; border: 0; border-radius: 30px; min-height: 46px; padding: 10px clamp(12px, 1.4vw, 20px); margin: 0; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.4; letter-spacing: -.01em; color: var(--muted); text-align: center; overflow-wrap: normal; hyphens: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } body[data-aioos-visual="20260910"] #app .tab-list button span { display: none; } body[data-aioos-visual="20260910"] #app .tab-list button[aria-selected="true"] { background: var(--accent); color: var(--panel); } @media (hover: hover) and (pointer: fine) { body[data-aioos-visual="20260910"] #app .tab-list button:hover:not([aria-selected="true"]) { background: var(--tint); color: var(--ink); } } body[data-aioos-visual="20260910"] #app .app-description { min-height: 0; max-width: 36ch; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; color: var(--muted); } body[data-aioos-visual="20260910"] #app .app-panel { display: block; width: auto; margin-inline: 0; height: clamp(400px, 46.8vw, 745px); min-height: 0; background: var(--lilac); border: 0; border-radius: 0; isolation: isolate; overflow: hidden; } body[data-aioos-visual="20260910"] #app .studio-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; } body[data-aioos-visual="20260910"] #app .studio-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } body[data-aioos-visual="20260910"] #app .app-floor { display: none; } body[data-aioos-visual="20260910"] #app .app-preview-devices { position: relative; width: min(100%, calc(1440px + 2 * var(--gutter))); height: 100%; margin-inline: auto; } body[data-aioos-visual="20260910"] #app .app-desktop { position: absolute; left: 13%; top: auto; bottom: 12%; width: 55%; border-width: 5px; border-radius: 13px; transform: none; box-shadow: var(--shadow-device); } body[data-aioos-visual="20260910"] #app .desktop-chrome { display: none; } body[data-aioos-visual="20260910"] #app .app-phone { position: absolute; right: 12%; top: auto; bottom: 11%; width: 17%; max-width: none; margin: 0; border-width: 5px; border-radius: 28px; transform: none; translate: none; box-shadow: inset 0 0 0 1px #787573, 3px 2px 0 1px #74706c, 0 18px 20px -10px #30263d66; } body[data-aioos-visual="20260910"] #app .phone-top { height: 22px; padding-inline: 12px; font-size: 7px; } body[data-aioos-visual="20260910"] #app .phone-island { width: 46px; height: 12px; top: 5px; } body[data-aioos-visual="20260910"] #app .screen-caption { inset: auto max(var(--gutter), calc((100vw - 1440px) / 2)) 17px; font-size: clamp(11px, 1vw, 14px); text-align: start; color: #473b70; } body[data-aioos-visual="20260910"] #app [hidden] { display: none !important; } body[data-aioos-visual="20260910"] #app [data-screen-mode="call-history"] .app-desktop { width: 58%; left: 21%; bottom: 10%; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-phone { width: 18%; max-width: 245px; right: 23%; bottom: 11%; } body[data-aioos-visual="20260910"] #app .app-feature-note { position: absolute; top: 24%; left: 17%; width: 30%; max-width: none; padding: 28px; background: var(--panel); border: 1px solid #b6a6cb; box-shadow: 0 14px 24px -16px #473b7077; transform: rotate(-2deg); } body[data-aioos-visual="20260910"] #app .app-feature-note img { width: 44px; margin-bottom: 20px; } body[data-aioos-visual="20260910"] #app .app-feature-note h3 { font-size: clamp(25px, 2.7vw, 40px); margin-bottom: 16px; overflow-wrap: normal; hyphens: none; } body[data-aioos-visual="20260910"] #app .app-feature-note p { font-size: 16px; line-height: 1.6; color: var(--muted); } body[data-aioos-visual="20260910"] #app .app-knowledge { max-width: 1600px; margin-inline: auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(30px, 5vw, 75px); min-height: 100%; } body[data-aioos-visual="20260910"] #app .app-knowledge > img { width: 100%; max-width: 350px; filter: drop-shadow(15px 25px 20px #473b7026); } body[data-aioos-visual="20260910"] #app .app-knowledge h3 { font-size: clamp(32px, 4vw, 55px); margin: 20px 0; } body[data-aioos-visual="20260910"] #app .app-knowledge p { max-width: 38ch; font-size: 18px; margin-bottom: 22px; line-height: 1.6; } body[data-aioos-visual="20260910"] #app .app-knowledge .text-link { font-size: 15px; } #screen-dialog .dialog-scroll.is-mobile-view { min-width: 0; display: flex; justify-content: center; align-items: flex-start; } #screen-dialog .dialog-scroll.is-mobile-view #dialog-image { width: min(100%, 390px); min-width: 0; height: auto; } #screen-dialog .dialog-scroll.is-mobile-view::after { display: none; } html.no-js body[data-aioos-visual="20260910"] #app .tab-list, html.no-js body[data-aioos-visual="20260910"] #app [data-zoom] { display: none; } /* Move the capped padding into the editorial children; the stage itself spans the section's containing block, without viewport units or oversized devices. */ body[data-aioos-visual="20260910"] #app > .section-kicker, body[data-aioos-visual="20260910"] #app .app-heading, body[data-aioos-visual="20260910"] #app .app-editorial { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; } @media (min-width: 768px) and (max-width: 1099px) { body[data-aioos-visual="20260910"] #app .app-heading { gap: 18px; } body[data-aioos-visual="20260910"] #app .app-editorial { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: 18px; } body[data-aioos-visual="20260910"] #app .app-description { font-size: 13px; } body[data-aioos-visual="20260910"] #app .app-phone { bottom: 12%; } body[data-aioos-visual="20260910"] #app .app-feature-note { top: 14%; padding: 20px; } body[data-aioos-visual="20260910"] #app .app-feature-note p { font-size: 14px; } } @media (max-width: 767px) { body[data-aioos-visual="20260910"] #app { padding-block: 42px; } body[data-aioos-visual="20260910"] #app .app-heading { grid-template-columns: 1fr; gap: 14px; } body[data-aioos-visual="20260910"] #app .app-heading > .text-link { justify-self: start; margin: 0; font-size: 14px; } body[data-aioos-visual="20260910"] #app .app-editorial { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 18px; } body[data-aioos-visual="20260910"] #app .tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 24px; } body[data-aioos-visual="20260910"] #app .tab-list button { padding: 10px 12px; font-size: 14px; } body[data-aioos-visual="20260910"] #app .app-description { grid-row: 2; max-width: 40ch; } body[data-aioos-visual="20260910"] #app .app-panel { height: clamp(310px, 89vw, 500px); } body[data-aioos-visual="20260910"] #app .studio-backdrop img { object-position: left bottom; } body[data-aioos-visual="20260910"] #app .app-desktop { width: min(75%, 500px); left: 3%; bottom: 17%; border-width: 3px; border-radius: var(--radius-sm); } body[data-aioos-visual="20260910"] #app .app-phone { width: min(27%, 180px); right: 4%; bottom: 14%; border-width: 3px; border-radius: 21px; } body[data-aioos-visual="20260910"] #app .phone-top { height: 16px; padding-inline: 7px; font-size: 5px; } body[data-aioos-visual="20260910"] #app .phone-island { width: 32px; height: 8px; top: 4px; } body[data-aioos-visual="20260910"] #app .screen-caption { inset: auto var(--gutter) 13px; font-size: 11px; } body[data-aioos-visual="20260910"] #app [data-screen-mode="call-history"] .app-desktop { width: min(84%, 540px); left: 8%; bottom: 20%; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] { height: 550px; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-phone { width: 49%; max-width: 215px; right: 5%; bottom: 45px; } body[data-aioos-visual="20260910"] #app .app-feature-note { top: 54px; left: 5%; width: 43%; padding: 20px 16px; } body[data-aioos-visual="20260910"] #app .app-feature-note img { width: 35px; margin-bottom: 18px; } body[data-aioos-visual="20260910"] #app .app-feature-note h3 { font-size: 23px; } body[data-aioos-visual="20260910"] #app .app-feature-note p { font-size: 13px; } body[data-aioos-visual="20260910"] #app [data-screen-mode="train"] { height: auto; min-height: 470px; } body[data-aioos-visual="20260910"] #app .app-knowledge { grid-template-columns: minmax(0, 1fr); padding: 26px; gap: 4px; } body[data-aioos-visual="20260910"] #app .app-knowledge > img { width: 150px; justify-self: end; } body[data-aioos-visual="20260910"] #app .app-knowledge h3 { margin: 14px 0; } body[data-aioos-visual="20260910"] #app .app-knowledge p { font-size: 16px; } } /* Natural-height Calendar keeps translated notes clear of the full phone capture. */ @media (max-width: 767px) { body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] { height: auto; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-preview-devices { display: flex; flex-direction: column; align-items: center; gap: 24px; height: auto; padding: 24px 20px 64px; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-feature-note { position: static; order: 1; width: 100%; max-width: none; padding: 20px; transform: none; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-feature-note h3 { overflow-wrap: normal; hyphens: none; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-phone { position: relative; order: 2; inset: auto; width: 180px; max-width: 100%; transform: none; } } @media (prefers-reduced-motion: reduce) { body[data-aioos-visual="20260910"] #app .tab-list button { transition: none; } } @media (forced-colors: active) { body[data-aioos-visual="20260910"] #app .app-panel { background: Canvas; border: 1px solid CanvasText; } body[data-aioos-visual="20260910"] #app .studio-backdrop { display: none; } body[data-aioos-visual="20260910"] #app .tab-list button[aria-selected="true"] { border: 2px solid Highlight; } } /* 111: stage sizing by height, ring radius, interaction states, focus, dialog. */ @media (min-width: 768px) { body[data-aioos-visual="20260910"] #app .app-panel:not([data-screen-mode="train"]) { container-type: size; } body[data-aioos-visual="20260910"] #app .app-desktop { width: min(55%, 124cqh); } body[data-aioos-visual="20260910"] #app .app-phone { width: min(17%, 38cqh); } body[data-aioos-visual="20260910"] #app [data-screen-mode="call-history"] .app-desktop { width: min(58%, 124cqh); } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-phone { width: min(18%, 38cqh, 245px); } } body[data-aioos-visual="20260910"] #app .app-phone::after { border-radius: 23px; } @media (max-width: 767px) { body[data-aioos-visual="20260910"] #app .app-phone::after { border-radius: 18px; } body[data-aioos-visual="20260910"] #app .app-knowledge > div { background: var(--panel); padding: 20px; border: 1px solid var(--line); } body[data-aioos-visual="20260910"] #app .app-knowledge { gap: 14px; } } @media (max-width: 340px) { body[data-aioos-visual="20260910"] #app .tab-list button { font-size: 13px; padding-inline: 8px; } } body[data-aioos-visual="20260910"] #app .tab-list button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } body[data-aioos-visual="20260910"] #app .tab-list button[aria-selected="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--panel); } body[data-aioos-visual="20260910"] #app .app-panel:focus-visible { outline-offset: -6px; } #screen-dialog .dialog-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } body[data-aioos-visual="20260910"] #app .text-link > span { display: inline-block; } @media (prefers-reduced-motion: no-preference) { body[data-aioos-visual="20260910"] #app .tab-list button { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); } } @media (min-width: 768px) { #screen-dialog .dialog-scroll:not(.is-mobile-view) { text-align: center; } #screen-dialog .dialog-scroll:not(.is-mobile-view) #dialog-image { display: block; margin-inline: auto; width: auto; max-width: 100%; max-height: 72vh; object-fit: contain; } } /* Owner decisions UI-115, 129, 139, 147: one phone stage height, shared device frame, one sentence, section rhythm. */ body[data-aioos-visual="20260910"] #app { --app-stage-h: clamp(430px, 116vw, 560px); padding-block: var(--section); } body[data-aioos-visual="20260910"] #app .app-desktop { border-radius: var(--radius-device); } body[data-aioos-visual="20260910"] #app .app-phone { box-shadow: var(--shadow-phone); } body[data-aioos-visual="20260910"] #app .app-feature-note p, body[data-aioos-visual="20260910"] #app .app-knowledge p { display: none; } @media (max-width: 767px) { body[data-aioos-visual="20260910"] #app { padding-block: 42px; } body[data-aioos-visual="20260910"] #app .app-panel, body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] { height: var(--app-stage-h); } body[data-aioos-visual="20260910"] #app .app-panel:not([data-screen-mode="train"]) { container-type: size; } body[data-aioos-visual="20260910"] #app [data-screen-mode="train"] { height: auto; min-height: var(--app-stage-h); } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-preview-devices { display: block; height: 100%; padding: 0; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-feature-note { position: absolute; order: 0; top: 8%; left: 5%; width: 42%; padding: 18px 14px; } body[data-aioos-visual="20260910"] #app [data-screen-mode="calendar"] .app-phone { position: absolute; order: 0; right: 6%; bottom: 8%; width: min(44%, 40cqh, 215px); max-width: none; } body[data-aioos-visual="20260910"] #app .app-desktop { width: min(75%, 500px, 124cqh); } body[data-aioos-visual="20260910"] #app .app-phone { width: min(27%, 180px, 38cqh); } body[data-aioos-visual="20260910"] #app [data-screen-mode="call-history"] .app-desktop { width: min(84%, 540px, 124cqh); } } /* /assets/redesign-20260930/film.css */ /* Reference studio laptop; the square13-second source is contained, never stretched. */ body[data-aioos-visual="20260910"] #produktfilm { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'figure' 'details'; gap: 0; padding-block: clamp(38px, 3.3vw, 50px); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto 1fr; align-content: start; gap: 0 clamp(28px, 4vw, 60px); align-items: start; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__eyebrow { grid-column: 1 / -1; margin-bottom: var(--stack-label); font: 600 12px/1.5 var(--mono); letter-spacing: .72px; color: var(--ink); } body[data-aioos-visual="20260910"] #produktfilm h2 { grid-column: 1; grid-row: 2 / 4; font-family: var(--heading); font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__intro { grid-column: 2; max-width: 45ch; margin: 0; font-size: var(--t-lead); line-height: var(--lh-lead); } body[data-aioos-visual="20260910"] #produktfilm .home-preview-language { grid-column: 2; margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__figure { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px; margin-top: var(--stack-block); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__frame { grid-column: 1 / -1; position: relative; aspect-ratio: 2.2 / 1; padding: 0; background: var(--tint); border: 0; border-radius: 0; isolation: isolate; overflow: hidden; } body[data-aioos-visual="20260910"] #produktfilm .studio-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; } body[data-aioos-visual="20260910"] #produktfilm .studio-backdrop img { width: 100%; height: 100%; object-fit: cover; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen { position: absolute; width: 56%; height: 82%; left: 22%; top: 5%; border: 7px solid #292828; border-radius: 15px 15px 5px 5px; background: var(--panel); box-shadow: 0 2px 0 #77736e, 0 16px 28px -18px #30263daa; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen::before { content: ''; position: absolute; left: -7%; bottom: -23px; width: 114%; height: 19px; background: linear-gradient(#aca8a0, #e4e0d7 50%, #8a8780); clip-path: polygon(6% 0, 94% 0, 100% 72%, 98% 100%, 2% 100%, 0 72%); box-shadow: 0 5px 8px #191b1b33; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen::after { content: ''; position: absolute; left: 40%; bottom: -13px; width: 20%; height: 4px; border-radius: 0 0 6px 6px; background: #77736e; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: var(--panel); border-radius: 8px 8px 0 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__video[aria-hidden="true"] { visibility: hidden; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch:not([hidden]) { z-index: 1; inset: 0; width: 100%; height: 100%; background: var(--panel); border-radius: 8px 8px 0 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch img { object-fit: contain; border-radius: 8px 8px 0 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch > span { left: auto; right: calc(100% - clamp(36px, 5%, 56px)); bottom: -7%; width: max-content; max-width: 120%; min-height: 52px; padding: 13px 20px; gap: 12px; font-size: 16px; box-shadow: 0 7px 20px #473b7026; white-space: normal; text-align: start; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch-label { min-width: 0; overflow-wrap: anywhere; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch > span > :not(.aioos-product-film__launch-label) { flex-shrink: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch small { margin-left: 10px; font-size: 12px; } body[data-aioos-visual="20260910"] #produktfilm figcaption { margin-top: 0; font-size: 12px; line-height: 1.5; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__status { grid-column: 1 / -1; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript { font-size: 14px; margin: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript summary { min-height: 44px; padding: 10px 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript { grid-column: 1 / -1; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript p { max-width: 68ch; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__details { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; margin-top: 20px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; border: 0; padding: 0 20px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li:first-child { padding-left: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li + li { border-left: 1px solid var(--line); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li > span { font-size: 15px; padding-top: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps strong { font-size: 16px; font-weight: 650; line-height: 1.4; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps p { font-size: 14px; line-height: 1.5; margin-top: 4px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__actions { grid-column: 2; grid-row: 2; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__actions .button { min-height: 44px; padding: 8px 0; background: transparent; color: var(--ink); border-bottom: 1px solid currentColor; font-size: 14px; transform: none; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__invitation { grid-column: 1; grid-row: 2; margin: 0; font-size: 14px; } @media (max-width: 767px) { body[data-aioos-visual="20260910"] #produktfilm { padding-block: 42px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__copy { grid-template-columns: minmax(0, 1fr); gap: 0; } body[data-aioos-visual="20260910"] #produktfilm h2 { grid-column: 1; grid-row: auto; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__intro, body[data-aioos-visual="20260910"] #produktfilm .home-preview-language { grid-column: 1; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__intro { margin-top: var(--stack-title); } body[data-aioos-visual="20260910"] #produktfilm .home-preview-language { margin-top: 12px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__figure { grid-template-columns: minmax(0, 1fr); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__frame { aspect-ratio: 1.2; } body[data-aioos-visual="20260910"] #produktfilm .studio-backdrop img { object-position: center bottom; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen { width: 88%; height: 78%; left: 6%; top: 7%; border-width: 4px; border-radius: 10px 10px 3px 3px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen::before { height: 14px; bottom: -17px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen::after { bottom: -9px; height: 3px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch > span { left: 1%; right: auto; bottom: -10%; width: max-content; max-width: 98%; min-height: 49px; padding: 12px 14px; font-size: 14px; gap: 9px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch small { margin-left: 4px; font-size: 11px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__details { grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps { grid-template-columns: minmax(0, 1fr); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li { padding: 14px 0; border-top: 1px solid var(--line); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li + li { border-left: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li:last-child { border-bottom: 1px solid var(--line); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__actions { grid-column: 1; grid-row: auto; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__invitation { grid-column: 1; grid-row: auto; } } @media (forced-colors: active) { body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__frame { background: Canvas; border: 1px solid CanvasText; } body[data-aioos-visual="20260910"] #produktfilm .studio-backdrop { display: none; } } /* 111: pill focus and states, transcript chevron, step progress, launch fade. */ body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch:focus-visible { outline: none; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch:focus-visible > span { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 3px var(--panel); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch.is-paused:not([hidden]) { background: transparent; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch.is-paused img { visibility: hidden; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch.is-leaving { opacity: 0; pointer-events: none; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript summary { display: flex; align-items: center; gap: 10px; width: fit-content; cursor: pointer; list-style: none; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript summary::-webkit-details-marker { display: none; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript[open] summary::after { transform: rotate(-135deg) translateY(-2px); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li { position: relative; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li > span { color: var(--muted); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(var(--step-progress, 0)); transform-origin: left; opacity: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li:first-child::before { right: 0; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li.is-current::before { opacity: 1; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li.is-current > span { color: var(--accent); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__actions .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } @media (prefers-reduced-motion: no-preference) { body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch { transition: opacity var(--dur-base) var(--ease); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch > span { transition: background var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__steps li::before { transition: transform 300ms linear, opacity var(--dur-fast) var(--ease); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__transcript summary::after { transition: transform var(--dur-fast) var(--ease); } } /* Owner decisions UI-119, 129, 147: shared device frame, readable film on phones and tablets, section rhythm. */ body[data-aioos-visual="20260910"] #produktfilm { padding-block: var(--section); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen { border-width: 5px; border-radius: var(--radius-device) var(--radius-device) 5px 5px; box-shadow: var(--shadow-device); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__video, body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch:not([hidden]), body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch img { border-radius: 7px 7px 0 0; } @media (min-width: 768px) and (max-width: 1099px) { body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__frame { aspect-ratio: 1.6 / 1; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen { width: 62%; height: 84%; left: 19%; top: 4%; } } @media (max-width: 600px) { /* No laptop chrome: the square film crosses the whole rail so its interface text stays readable. */ body[data-aioos-visual="20260910"] #produktfilm { padding-block: 42px; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__frame { aspect-ratio: auto; background: transparent; overflow: visible; } body[data-aioos-visual="20260910"] #produktfilm .studio-backdrop, body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen::before, body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen::after { display: none; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__screen { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1; border: 0; border-radius: var(--radius-device); box-shadow: var(--shadow-raise); overflow: hidden; } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__video, body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch:not([hidden]), body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch img { border-radius: var(--radius-device); } body[data-aioos-visual="20260910"] #produktfilm .aioos-product-film__launch > span { left: 12px; right: auto; bottom: 12px; max-width: calc(100% - 24px); } } /* /assets/country-language-20260911/home.css */ .home-language-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;height:32px;padding:0 10px 0 8px;border:1px solid var(--line-ui,#7f7a6e);border-radius:999px;background:rgba(255,255,255,.35);color:var(--ink,#191b1b);font:600 12px/1 var(--body,Arial,sans-serif);letter-spacing:.04em;cursor:pointer;align-self:center;transition:color var(--dur-nav,160ms) var(--ease,cubic-bezier(.2,.65,.3,1)),background-color var(--dur-nav,160ms) var(--ease,cubic-bezier(.2,.65,.3,1)),border-color var(--dur-nav,160ms) var(--ease,cubic-bezier(.2,.65,.3,1)),transform var(--dur-nav,160ms) var(--ease,cubic-bezier(.2,.65,.3,1));order:1} @media(hover:hover) and (pointer:fine){.home-language-trigger:hover{background:var(--tint,#e4dced);border-color:var(--accent,#473b70);color:var(--accent,#473b70)}} @media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.home-language-trigger:hover{transform:translateY(-1px)}} .home-language-trigger:active{transform:translateY(0)} #homepage-navigation a[href*="signin"]{order:2} .home-language-trigger[hidden]{display:none} .home-language-trigger svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;opacity:.8;flex-shrink:0;transition:opacity var(--dur-nav,160ms) var(--ease,cubic-bezier(.2,.65,.3,1))} @media(hover:hover) and (pointer:fine){.home-language-trigger:hover svg{opacity:1}} .home-language-drawer{box-sizing:border-box;width:min(390px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0 0 0 auto;padding:24px;border:0;border-left:1px solid #aaa597;background:#f2eddf;color:#191b1b;font:400 16px/1.5 var(--body,Manrope,'Manrope Fallback',Arial,sans-serif);overflow-y:auto} /* Dialog recipe (design system, Dialogs): the drawer slides 24 px in from the right while it fades in over 240 ms, leaves in 160 ms; its scrim fades with it. Reduced motion: opacity only. A browser without @starting-style or allow-discrete opens and closes instantly. */ .home-language-drawer{box-shadow:var(--shadow-dialog,0 40px 100px #191b1b66);opacity:0;transform:translateX(var(--dialog-slide,24px));transition:opacity var(--dur-exit,160ms) var(--ease-in,cubic-bezier(.4,0,1,1)),transform var(--dur-exit,160ms) var(--ease-in,cubic-bezier(.4,0,1,1)),overlay var(--dur-exit,160ms) allow-discrete,display var(--dur-exit,160ms) allow-discrete} .home-language-drawer[open]{opacity:1;transform:none;transition-duration:var(--dur-base,240ms);transition-timing-function:var(--ease,cubic-bezier(.2,.65,.3,1))} @starting-style{.home-language-drawer[open]{opacity:0;transform:translateX(var(--dialog-slide,24px))}} .home-language-drawer::backdrop{background:var(--scrim,rgb(25 27 27 / .35));backdrop-filter:blur(var(--scrim-blur,6px));opacity:0;transition:opacity var(--dur-exit,160ms) var(--ease-in,cubic-bezier(.4,0,1,1)),overlay var(--dur-exit,160ms) allow-discrete,display var(--dur-exit,160ms) allow-discrete} .home-language-drawer[open]::backdrop{opacity:1;transition-duration:var(--dur-base,240ms);transition-timing-function:var(--ease,cubic-bezier(.2,.65,.3,1))} @starting-style{.home-language-drawer[open]::backdrop{opacity:0}} @media(prefers-reduced-motion:reduce){.home-language-drawer,.home-language-drawer[open]{transform:none}@starting-style{.home-language-drawer[open]{transform:none}}} .home-language-head{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:20px} .home-language-head h2{font:600 22px/1.3 var(--body,Manrope,'Manrope Fallback',Arial,sans-serif);margin:0} .home-language-head button{width:44px;height:44px;border:1px solid var(--line-ui,#7f7a6e);background:transparent;color:inherit;font:28px/1 var(--body,Manrope,'Manrope Fallback',Arial,sans-serif);cursor:pointer} .home-language-options{display:grid;gap:3px} .home-language-options a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 12px;color:inherit;text-decoration:none;border:1px solid transparent} .home-language-options a[aria-current=true]{background:#e4dced;border-color:#aaa597} @media(hover:hover) and (pointer:fine){.home-language-options a:hover{background:#e4dced;border-color:#aaa597}} .home-language-options a span:last-child{font-size:12px;letter-spacing:.05em} .home-language-auto{display:block;margin-top:18px;min-height:44px;width:100%;padding:10px 12px;border:1px solid var(--line-ui,#7f7a6e);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer} .home-language-auto[aria-pressed=true]{background:#e4dced} .home-language-drawer :focus-visible,.home-language-trigger:focus-visible{outline:2px solid #473b70;outline-offset:3px} .home-language-credit,.home-preview-language{font-size:13px;line-height:1.5;color:inherit} .home-language-credit{display:inline-block;margin-top:18px;text-underline-offset:3px} .home-languages-nojs{display:flex;flex-wrap:wrap;gap:8px 16px;padding:16px 0} .home-languages-nojs a{color:inherit;min-height:44px;display:inline-flex;align-items:center} @media(max-width:760px){#homepage-navigation .home-language-trigger{order:10;width:100%;justify-content:flex-start;gap:10px;margin-top:10px;min-height:46px;height:auto;padding:12px 14px;border-radius:4px;border:1px solid var(--line-ui,#7f7a6e);background:var(--panel,#f8f4e9);font-size:13px}#homepage-navigation .home-language-trigger svg{width:16px;height:16px}} /* The translated trial CTA and language control need the compact navigation a little earlier than the German-only header. */ @media(min-width:761px) and (max-width:820px){ html.aioos-conversion{--navigation-height:66px} html.aioos-conversion .site-header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;width:calc(100% - 36px);padding:0} html.aioos-conversion .site-header::before{inset-inline:-18px} html.aioos-conversion .nav-demo{grid-column:2;grid-row:1;justify-self:end;font-size:12px;min-height:44px;padding:10px 13px;gap:9px} html.aioos-conversion.nav-ready .nav-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;grid-column:3;grid-row:1;background:none;border:1px solid var(--line-ui);min-height:44px;min-width:54px;padding:9px;font-size:12px} html.aioos-conversion .site-header nav{grid-row:2;grid-column:1/-1;width:100%;margin:0;font-size:13px} html.aioos-conversion.nav-ready .site-header nav{display:grid;position:absolute;top:100%;left:-18px;right:-18px;width:auto;grid-template-columns:1fr 1fr;gap:0 20px;padding:12px 22px 18px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 12px 20px #191b1b0b;max-height:calc(100dvh - var(--navigation-height));overflow-y:auto} html.aioos-conversion.nav-ready .site-header nav[hidden]{display:none} html.aioos-conversion.nav-ready .site-header nav a{min-height:48px;border-bottom:1px solid var(--line);padding-block:12px} .tool-block-two{right:0} } @media(max-width:767px){.app-showroom{grid-template-columns:minmax(0,1fr)}.tab-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tab-list button{min-width:0;overflow-wrap:anywhere;gap:8px}.dialog-scroll[data-home-scroll-hint]::after{content:attr(data-home-scroll-hint)}} @media(max-width:350px){.tab-list{grid-template-columns:minmax(0,1fr)}.tab-list button{margin-inline:0}.access-section>h2{font-size:min(61px,17vw)}} /* The inherited 320px header uses 12px gutters; its open menu must use the same edges. */ @media(max-width:350px){html.aioos-conversion.nav-ready .site-header nav{left:-12px;right:-12px;grid-template-columns:repeat(2,minmax(0,1fr))}} @media(forced-colors:active){.home-language-drawer,.home-language-options a[aria-current=true]{border:1px solid CanvasText}} /* The homepage's reading family also covers the consent/paid-plan explanation. */ html.aioos-conversion .trial-home-terms{font-family:var(--body,Manrope,'Manrope Fallback',Arial,sans-serif)!important} /* Homepage rails: developer pages retain their own header layout. */ html.aioos-conversion body[data-aioos-visual="20260910"] .site-header { width: 100%; max-width: none; padding-inline: max(var(--gutter), calc((100% - 1440px) / 2)); } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header::before { inset-inline: 0; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav { min-width: 0; } html.aioos-conversion body[data-aioos-visual="20260910"] .site-header nav a { white-space: normal; overflow-wrap: anywhere; } @media (max-width: 820px) { html.aioos-conversion body[data-aioos-visual="20260910"] .site-header { grid-template-columns: auto minmax(0, 1fr) auto; height: auto; min-height: var(--navigation-height); padding-block: 8px; } /* The menu is placed in the header's grid area, inside the side padding: pull it back to the page edges so its links sit on the content rail. */ html.aioos-conversion.nav-ready body[data-aioos-visual="20260910"] .site-header nav { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: var(--gutter); /* The compact header can grow when a long action wraps: measure the menu from its real bottom edge. */ max-height: calc(100dvh - 100%); } html.aioos-conversion body[data-aioos-visual="20260910"] .nav-demo { min-width: 0; max-width: 100%; white-space: normal; text-align: center; } html.aioos-conversion body[data-aioos-visual="20260910"] .nav-demo > span { flex: 0 0 auto; } } /* /assets/redesign-20260930/products.css */ /* The two access points share one card anatomy. The scenes are examples; the chat bubbles arrive once when the web card is half in view (reduced motion and no JavaScript: static). */ #produkte { padding-block: clamp(54px, 4.4vw, 68px); } #produkte > h2 { max-width: 1240px; margin: var(--stack-label) 0 var(--stack-block); font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; hyphens: manual; } #produkte .access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0 28px; } #produkte .access-grid > article { display: grid; grid-template-rows: subgrid; grid-row: span 4; padding: 26px 30px 0; border: 1px solid #aaa59750; border-radius: 16px; overflow: hidden; box-shadow: none; } #produkte .web-product { background: var(--tint); } #produkte .togo-product { background: var(--panel); } #produkte .product-topline { margin: 0 0 14px; min-height: 34px; align-items: flex-start; font: 12px/1.5 var(--mono); letter-spacing: .04em; word-spacing: .12em; gap: 20px; color: var(--muted); } #produkte .product-topline > span:first-child { max-width: 30ch; } @media (min-width: 1100px) { #produkte .product-topline > span:first-child { max-width: 36ch; } } #produkte .product-topline > span:last-child { flex: 0 0 27px; color: var(--muted); font-size: 22px; line-height: 1; text-align: right; } #produkte .product-copy h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.18; letter-spacing: -.04em; } #produkte .access-tagline { margin-top: 8px; font-size: var(--t-lead); line-height: var(--lh-lead); } #produkte .access-description { margin-top: 12px; font-size: var(--t-body); line-height: var(--lh-copy); max-width: 49ch; } #produkte .access-description a { text-decoration: underline; text-underline-offset: 4px; } #produkte .browser-scene, #produkte .togo-scene { margin-top: 20px; position: relative; perspective: none; } #produkte .browser-scene { height: auto; min-height: 330px; padding-block: 15px 26px; } #produkte .togo-scene { height: auto; aspect-ratio: 1.5; container-type: inline-size; align-self: end; width: 100%; } #produkte .browser-scene::before, #produkte .togo-scene::before { content: ""; position: absolute; inset: auto 0 -6px; height: 12cqi; min-height: 40px; background: radial-gradient(ellipse at center, #30203c28, transparent 68%); pointer-events: none; } #produkte .web-route, #produkte .togo-route, #produkte .togo-ring, #produkte .link-slip { display: none; } #produkte .mini-browser { position: relative; top: auto; left: 0; width: 96%; height: auto; min-height: 298px; padding-bottom: 18px; transform: rotate(-2deg); transform-origin: 50% 100%; border-color: #aaa59750; border-radius: 9px; box-shadow: var(--shadow-object); } #produkte .browser-top { padding: 11px 14px; gap: 16px; font-size: 10px; } #produkte .website-example { position: absolute; inset: 38px 0 0; height: auto; padding: 22px; } #produkte .website-example > span { font-size: 10px; white-space: nowrap; } #produkte .website-example > div { max-width: 9ch; margin-top: 18px; font-size: clamp(19px, 2vw, 26px); } #produkte .chat-example { position: relative; top: auto; right: auto; width: 64%; margin: 52px -3% 0 auto; padding: 20px; transform: rotate(2deg); border-color: #aaa59745; border-radius: 9px; box-shadow: var(--shadow-object); } #produkte .chat-header { font-size: 15px; } #produkte .ai-disclosure { font-size: 12px; line-height: 1.5; margin: 7px 0 12px; } #produkte .chat-bubble { font-size: 13px; line-height: 1.5; padding: 11px 13px; margin-top: 9px; background: var(--tint); } #produkte .user-bubble { background: var(--lilac); } #produkte .chat-example-note { font: 11px/1.5 var(--mono); margin-top: 12px; } #produkte .togo-scene .access-card { width: 72%; top: 11cqi; left: -1%; aspect-ratio: 85.6 / 53.98; height: auto; translate: none !important; border-radius: var(--radius-lg); } #produkte .togo-scene .back-card { top: 7cqi; left: 5%; transform: rotate(6deg); border-color: #9584b326; background: linear-gradient(135deg, #c8b6e1, var(--lilac)); box-shadow: 0 18px 30px -15px #30203c55; } #produkte .togo-scene .front-card { padding: 23px; transform: rotate(-5deg); background: linear-gradient(135deg, #fffdf6, var(--panel)); border-color: #aaa59750; box-shadow: var(--shadow-object); z-index: 3; } #produkte .front-card > div { font: 400 8cqi/1 var(--display); } #produkte .front-card > div img { width: 17%; height: auto; } #produkte .front-card strong { font-size: 13cqi; margin-top: 6cqi; } #produkte .front-card .sample-qr { top: 34%; } #produkte .front-card .sample-qr { overflow: visible; } #produkte .front-card .sample-qr figcaption { font-size: clamp(6px, 2.4cqi, 10px); white-space: nowrap; max-width: 100%; text-align: center; } #produkte .front-card > small { font-size: clamp(8px, 2.7cqi, 10px); } #produkte .product-phone { position: absolute; right: 0; top: 1cqi; width: 29%; aspect-ratio: 1 / 2; padding: 34px 13px 15px; background: linear-gradient(135deg, #fffdf6, var(--paper)); border: 4px solid var(--ink); border-radius: 24px; transform: rotate(4deg); box-shadow: 0 24px 32px -15px #30203c70, 3px 3px 0 #5c5856; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; z-index: 2; } #produkte .product-phone::before { content: ""; position: absolute; top: 7px; left: 30%; width: 40%; height: 10px; border-radius: var(--radius-surface); background: var(--ink); } #produkte .product-phone > img:first-child { width: 44%; } #produkte .product-phone > strong { font: 600 clamp(14px, 1.45vw, 22px)/1.15 var(--heading); letter-spacing: -.04em; text-align: center; } #produkte .product-phone > img:last-of-type { width: 92%; height: auto; aspect-ratio: 1; } #produkte .product-phone > small { font: clamp(10px, 2.2cqi, 11px)/1.4 var(--mono); text-align: center; white-space: nowrap; max-width: 100%; } #produkte .product-foot { margin-top: 14px; padding-block: 6px; min-height: 56px; font: 12px/1.5 var(--mono); letter-spacing: .04em; word-spacing: .12em; gap: 12px; border-color: #aaa59740; } #produkte .web-product .product-foot > a.text-link { font: 14px/1.5 var(--body); letter-spacing: 0; word-spacing: 0; } #produkte .product-foot > span { max-width: 45%; } #produkte .access-dev { display: inline-flex; margin: 20px 32px 0 0; vertical-align: top; } #produkte .access-dev + .access-dev { margin-top: 20px; } #produkte .access-dev .text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; } #produkte .text-link > span[aria-hidden] { display: inline-block; } @media (hover: hover) and (pointer: fine) { #produkte .text-link:hover { text-decoration-thickness: 2px; } } #produkte .text-link:focus-visible, #produkte .access-description a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: no-preference) { #produkte .text-link { transition: text-decoration-thickness var(--dur-fast) var(--ease); } #produkte .mini-browser, #produkte .product-phone, #produkte .front-card { transition: translate var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } /* Depth is separation of layers: the authored angles stay, the middle layer rises 3 px, the front layer 6 px, and their shadows grow. Focus and a press raise it on every device, hover only where the device hovers. */ #produkte .web-product:is(:focus-within, :active) .mini-browser { translate: 0 -3px; } #produkte .togo-product:is(:focus-within, :active) .product-phone { translate: 0 -3px; box-shadow: 0 32px 44px -15px #30203c60, 3px 3px 0 #5c5856; } #produkte .togo-product:is(:focus-within, :active) .front-card { translate: 0 -6px !important; box-shadow: 0 36px 50px -16px #30203c58; } } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { #produkte .web-product:hover .mini-browser { translate: 0 -3px; } #produkte .togo-product:hover .product-phone { translate: 0 -3px; box-shadow: 0 32px 44px -15px #30203c60, 3px 3px 0 #5c5856; } #produkte .togo-product:hover .front-card { translate: 0 -6px !important; box-shadow: 0 36px 50px -16px #30203c58; } } @media (prefers-reduced-motion: reduce) { #produkte .togo-product:is(:focus-within, :active) .product-phone { box-shadow: 0 32px 44px -15px #30203c60, 3px 3px 0 #5c5856; } #produkte .togo-product:is(:focus-within, :active) .front-card { box-shadow: 0 36px 50px -16px #30203c58; } } @media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) { #produkte .togo-product:hover .product-phone { box-shadow: 0 32px 44px -15px #30203c60, 3px 3px 0 #5c5856; } #produkte .togo-product:hover .front-card { box-shadow: 0 36px 50px -16px #30203c58; } } @media (max-width: 1099px) { #produkte .access-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 24px; } #produkte .access-grid > article { grid-template-rows: auto auto auto auto; grid-row: auto; } #produkte .product-copy { max-width: 540px; } #produkte .browser-scene, #produkte .togo-scene { width: min(100%, 550px); margin-inline: auto; } #produkte .togo-scene { align-self: auto; } #produkte .product-phone > strong { font-size: 22px; } } @media (max-width: 540px) { #produkte .access-grid > article { padding: 22px 20px 0; border-radius: var(--radius-panel); } #produkte .product-topline { font-size: 12px; margin-bottom: 16px; } #produkte .product-copy h3 { font-size: 27px; } #produkte .browser-scene, #produkte .togo-scene { margin-top: 24px; } #produkte .browser-scene { min-height: 310px; padding-block: 12px 26px; } #produkte .togo-scene { aspect-ratio: 1 / .95; } #produkte .mini-browser { min-height: 253px; } #produkte .browser-top { padding: 10px; font-size: 9px; gap: 10px; } #produkte .website-example { inset: 34px 0 0; padding: 16px; } #produkte .website-example > div { font-size: 22px; } #produkte .chat-example { width: 103%; margin: 128px 0 10px 8%; padding: 14px; } #produkte .chat-header { font-size: 13px; } #produkte .ai-disclosure { font-size: 11px; } #produkte .chat-bubble { font-size: 12px; padding: 9px; } #produkte .chat-example-note { font-size: 10px; } #produkte .togo-scene .access-card { width: 73%; left: 0; top: 38cqi; } #produkte .togo-scene .back-card { left: 5%; top: 33cqi; } #produkte .togo-scene .front-card { padding: 12px; } #produkte .product-phone { right: 0; width: 33%; top: 6cqi; padding: 26px 8px 12px; border-width: 3px; border-radius: 18px; gap: 9px; } #produkte .product-phone::before { top: 5px; height: 8px; } #produkte .product-phone > strong { font-size: 16px; } #produkte .product-foot { font-size: 12px; min-height: 74px; margin-top: 0; } #produkte .web-product .product-foot > a.text-link { font-size: 13px; } } @media (forced-colors: active) { #produkte .access-grid > article, #produkte .product-phone { border-color: CanvasText; } } @media (max-width: 400px) { #produkte .togo-scene { aspect-ratio: 1 / .85; } #produkte .togo-scene .access-card { top: 30cqi; } #produkte .togo-scene .back-card { top: 25cqi; } #produkte .product-phone { width: 37%; top: 2cqi; padding-inline: 6px; } #produkte .product-phone > strong { font-size: clamp(11px, 4.4cqi, 16px); white-space: nowrap; } #produkte .product-phone > small { display: none; } } /* #126 UI-267: inline link in the access description gets a 24 px+ hit area without moving the text. */ #produkte .access-description a { display: inline-block; padding-block: 4px; margin-block: -4px; } /* #112 UI-152: the web card is one link target (the footer link stretched over the card). AI to go has no destination yet, so it shows no arrow. */ #produkte .web-product { position: relative; } #produkte .web-product .product-foot > a.text-link { position: static; } #produkte .web-product .product-foot > a.text-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } #produkte .web-product .access-description a { position: relative; z-index: 2; } @media (hover: hover) and (pointer: fine) { #produkte .web-product:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } #produkte .web-product:hover .product-topline > span:last-child { color: var(--accent); } } #produkte .web-product:has(.product-foot > a.text-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -3px; } #produkte .web-product .product-foot > a.text-link:focus-visible { outline: 0; text-decoration-thickness: 2px; } #produkte .togo-product .product-topline > span:last-child { display: none; } /* #112 UI-160: bubbles arrive on view (opacity 0 to 1, 8 px rise, 240 ms each, 400 ms apart); hover or tap replays. The label, the AI disclosure and the demo note stay visible. */ @media (prefers-reduced-motion: no-preference) { .acm-motion #produkte .chat-example .chat-bubble { opacity: 0; transform: translateY(8px); } .acm-motion #produkte .chat-example.is-in .chat-bubble { animation: acm-bubble-in var(--dur-base) var(--ease) both; } .acm-motion #produkte .chat-example.is-in .chat-bubble + .chat-bubble { animation-delay: 400ms; } .acm-motion #produkte .chat-example.is-static .chat-bubble { opacity: 1; transform: none; animation: none; } } @keyframes acm-bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* #187 UI-219: on phones the two access cards are one sideways track with the next card peeking. Native scroll snap, no script needed to swipe; the track bleeds to the screen edges like the industry chips, so the page itself never scrolls sideways. From 768 px the grid is unchanged. */ @media (max-width: 767px) { #produkte .access-grid { grid-template-columns: none; grid-template-rows: auto auto 1fr auto; grid-auto-flow: column; grid-auto-columns: min(calc(100% - var(--s-8)), 27.5rem); gap: 0 var(--s-3); width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } #produkte .access-grid::-webkit-scrollbar { display: none; } #produkte .access-grid > article { grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 4; scroll-snap-align: start; } #produkte .product-copy { max-width: none; } #produkte .togo-scene { align-self: end; } #produkte .access-grid:focus-visible { outline: var(--focus); outline-offset: -3px; } } @media (max-width: 767px) and (hover: hover) and (pointer: fine) { #produkte .access-grid { scrollbar-width: thin; scrollbar-color: var(--line-ui) transparent; } } /* /assets/redesign-20260930/voice.css */ /* A visual demonstration, never a live call. Its resting waveform is still. */ #stimme { padding-block: var(--section); } #stimme .voice-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: var(--stack-label); align-items: start; } #stimme .voice-heading { display: block; margin: 0; } #stimme .voice-heading h2 { width: 100%; max-width: 22ch; font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; } #stimme .voice-heading > p { max-width: 43ch; margin-top: var(--stack-title); font-size: var(--t-lead); line-height: var(--lh-lead); } #stimme .voice-art { position: relative; width: 100%; max-width: 560px; left: auto; bottom: auto; margin: 20px 0 0; } #stimme .voice-art::before { content: ""; position: absolute; left: 11%; right: 3%; bottom: 14%; height: 15%; background: radial-gradient(ellipse at center, #46384c35, transparent 70%); transform: rotate(-4deg); pointer-events: none; } #stimme .voice-art img { position: relative; width: 100%; height: auto; } #stimme .voice-demo { min-width: 0; align-self: start; margin-top: 0; background: linear-gradient(135deg, #fcf9f1, var(--panel)); border: 1px solid #aaa59750; border-radius: var(--radius-panel); padding: clamp(22px, 2.2vw, 32px); box-shadow: 0 12px 28px -22px #30203c40; } #stimme .voice-demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; } #stimme .voice-demo-heading > strong { font: 14px/1.5 var(--mono); } #stimme .voice-demo-heading img { width: 34px; height: auto; flex-shrink: 0; } #stimme .voice-disclosure { font-size: 13px; line-height: 1.55; margin-top: 8px; color: var(--muted); } #stimme .voice-question { margin: 19px 0 0 12%; padding: 16px 18px; background: var(--tint); border-radius: 12px 12px 2px 12px; font-size: 18px; line-height: 1.55; } #stimme .voice-answer { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px; border: 1px solid #aaa59725; border-radius: var(--radius-lg); background: #f1ede3a0; font-size: 17px; line-height: 1.6; } #stimme .voice-answer > img { width: 30px; height: auto; margin-top: 3px; flex-shrink: 0; } #stimme .voice-wave { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 13px; min-height: 50px; background: var(--tint); border-radius: var(--radius-surface); color: var(--accent); } #stimme .voice-wave > span { font: 10px/1.5 var(--mono); } #stimme .wave-bars { display: flex; align-items: center; justify-content: space-between; gap: 1px; flex: 1; min-width: 0; height: 36px; overflow: hidden; } #stimme .wave-bars i { flex: 0 1 2px; min-width: 1px; height: var(--bar-height); background: currentColor; border-radius: 2px; opacity: .55; transform-origin: center; } #stimme .voice-demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; padding: 0; margin: 25px 0 20px; } #stimme .voice-demo-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } #stimme .voice-step-icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid transparent; border-radius: var(--radius-circle); background: var(--tint); color: var(--accent); transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } #stimme .voice-step-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } #stimme .voice-demo-steps li.is-current .voice-step-icon { background: var(--lilac); border-color: var(--accent); transform: scale(1.06); } #stimme .voice-demo-steps li.is-done .voice-step-icon { background: var(--lilac); border-color: #473b7066; } #stimme .voice-demo-steps li.is-done .voice-step-icon::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.3 2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; } #stimme .voice-demo-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -21px; top: 12px; font-size: 24px; color: var(--muted); } #stimme .voice-demo-steps strong { font-size: 16px; font-weight: 600; line-height: 1.4; } #stimme .voice-demo-steps li > span:last-child { font-size: 13px; line-height: 1.55; color: var(--muted); } #stimme .voice-demo-actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px 16px; padding-top: 14px; border-top: 1px solid #aaa59740; } #stimme .voice-demo-actions button { transition: background-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); cursor: pointer; display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 10px 13px; background: var(--tint); color: var(--accent); border: 1px solid #473b7026; border-radius: var(--radius-surface); font-size: 14px; font-weight: 600; line-height: 1.5; text-align: left; justify-content: center; } #stimme .voice-demo-actions button[hidden] { display: none; } @media (hover: hover) and (pointer: fine) { #stimme .voice-demo-actions button:hover { background: var(--lilac); } } #stimme .voice-demo-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } #stimme .voice-demo-actions button svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } #stimme .voice-demo-actions .voice-stop { display: none; } #stimme .voice-demo-actions button[data-state="playing"] .voice-play { display: none; } #stimme .voice-demo-actions button[data-state="playing"] .voice-stop { display: block; } #stimme .voice-demo-status { margin: 0; min-height: 20px; font-size: 12px; line-height: 1.6; color: var(--muted); } #stimme .voice-demo-note { grid-column: 1 / -1; margin: 0; font: 12px/1.6 var(--mono); color: var(--muted); } @media (prefers-reduced-motion: no-preference) { #stimme[data-demo-playing="true"] .wave-bars i { animation: aioos-voice-example 640ms var(--ease-in-out) var(--bar-delay) infinite alternate; } #stimme[data-demo-playing="true"][data-demo-phase="1"] .wave-bars i { animation: aioos-voice-calm 1200ms var(--ease-in-out) var(--bar-delay) infinite alternate; } #stimme[data-demo-playing="true"][data-demo-phase="2"] .wave-bars i { animation: none; transform: scaleY(.35); } #stimme[data-demo-playing="true"] .voice-question { animation: aioos-voice-rise var(--dur-base) var(--ease) both; } #stimme .voice-answer { transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } #stimme[data-demo-playing="true"]:not([data-demo-phase="2"]) .voice-answer { opacity: 0; transform: translateY(8px); } #stimme .voice-demo-actions button svg { transition: opacity var(--dur-press) var(--ease); } @keyframes aioos-voice-example { from { transform: scaleY(.5); } to { transform: scaleY(1.1); } } @keyframes aioos-voice-calm { from { transform: scaleY(.35); } to { transform: scaleY(.6); } } @keyframes aioos-voice-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } @media (max-width: 1099px) { #stimme .voice-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } #stimme .voice-copy { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; } #stimme .voice-heading h2 { width: auto; } #stimme .voice-art { width: 100%; margin: 0; } #stimme .voice-demo { width: 100%; } } @media (max-width: 540px) { #stimme .voice-copy { display: block; } #stimme .voice-art { width: 78%; max-width: 320px; margin: 14px auto 0; } #stimme .voice-art img { max-height: 170px; object-fit: contain; object-position: left center; } #stimme .voice-demo { padding: 22px 18px; border-radius: var(--radius-panel); } #stimme .voice-question { margin-left: 5%; font-size: 15px; padding: 13px; } #stimme .voice-answer { font-size: 14px; gap: 12px; } #stimme .voice-answer > img { width: 26px; } #stimme .voice-wave { padding: 10px; gap: 10px; } #stimme .wave-bars { gap: 1px; } #stimme .voice-demo-steps { gap: 16px; } #stimme .voice-step-icon { width: 42px; height: 42px; } #stimme .voice-demo-steps strong { font-size: 14px; } #stimme .voice-demo-steps li > span:last-child { font-size: 12px; min-height: 4.6em; } #stimme .voice-demo-steps li:not(:last-child)::after { right: -12px; top: 8px; font-size: 20px; } #stimme .voice-demo-actions { grid-template-columns: minmax(0, 1fr); gap: 8px; } #stimme .voice-demo-actions button { justify-content: center; } } @media (forced-colors: active) { #stimme .voice-demo, #stimme .voice-question, #stimme .voice-wave, #stimme .voice-demo-actions button { border: 1px solid CanvasText; } #stimme .voice-demo-steps li.is-current .voice-step-icon { outline: 2px solid CanvasText; } } /* /assets/redesign-20260930/tools.css */ /* Configurable examples arranged around one assistant; no ambient motion. */ #werkzeuge { position: relative; isolation: isolate; background: var(--stage-field); } #werkzeuge::before { content: ""; position: absolute; z-index: -1; top: 32%; left: 42%; width: 52%; height: 54%; border-radius: var(--radius-circle); background: linear-gradient(170deg, #fbf6ff90, #dfd0ee70 65%, #c6b0d542); box-shadow: 0 18px 45px -35px #6e508b5c, inset 0 1px 0 #ffffff70; transform: rotate(8deg); pointer-events: none; } #werkzeuge .tools-inner { grid-template-columns: .94fr 1.06fr; gap: 0 clamp(32px, 4vw, 64px); padding-block: var(--section); min-height: 0; align-items: center; } #werkzeuge .tools-inner > .section-kicker { grid-column: 1 / -1; margin-bottom: var(--stack-label); align-self: start; } #werkzeuge .tools-copy { align-self: center; padding-top: 0; } #werkzeuge .tools-copy h2 { margin-top: 0; font-size: var(--t-h2); font-weight: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); hyphens: manual; } #werkzeuge .tools-copy > p { max-width: 34ch; margin-top: var(--stack-title); font-size: var(--t-lead); line-height: var(--lh-lead); } #werkzeuge .tools-copy > .tools-secondary { margin-top: var(--s-6); font-size: var(--t-body); line-height: var(--lh-copy); color: var(--muted); } #werkzeuge .tool-switch { max-width: 100%; margin-top: var(--stack-block); border-color: var(--line-ui); border-radius: 9px; background: #f8f4e926; } #werkzeuge .tool-switch button { white-space: normal; } #werkzeuge .tools-copy > .tools-caption { max-width: 42ch; margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); } #werkzeuge .tool-sculpture { position: relative; container-type: inline-size; width: 100%; max-width: 650px; aspect-ratio: 650 / 790; height: auto; margin: 0 auto; perspective: none; } @media (min-width: 901px) { #werkzeuge .tool-sculpture { margin-left: auto; margin-right: 0; } } #werkzeuge .tool-core { left: 12%; top: 46.9cqi; width: 42%; height: auto; min-height: 0; aspect-ratio: 1; padding: clamp(14px, 4.6cqi, 30px) clamp(12px, 4.6cqi, 30px) clamp(18px, 5.4cqi, 34px); background: linear-gradient(135deg, #fffdf6, var(--panel)); border: 1px solid #ffffffb3; border-radius: var(--radius-panel); transform: none; box-shadow: 0 12px 24px -16px #55416955; align-items: flex-start; justify-content: center; gap: 12px; } #werkzeuge .tool-core > img { width: 14cqi; height: auto; } #werkzeuge .tool-core-title { margin: 0; font: 550 clamp(16px, 4.8cqi, 40px)/1.1 var(--type-family); letter-spacing: -.05em; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; } #werkzeuge .tool-core > span { margin: 0; max-width: 100%; font: 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); overflow-wrap: anywhere; padding-bottom: 2px; } #werkzeuge .tool-block { width: 36%; min-height: 0; aspect-ratio: 1; padding: clamp(12px, 4cqi, 26px); background: linear-gradient(135deg, #fffdf6, #f4f0e7); border: 1px solid #ffffffb3; border-radius: 13px; box-shadow: 0 10px 22px -16px #55416955; transform: none; gap: 9px; justify-content: center; } #werkzeuge .tool-block-one { left: 5%; top: 1.5cqi; } #werkzeuge .tool-block-two { right: 0; top: 12.8cqi; } #werkzeuge .tool-block-three { right: 0; bottom: 1.5cqi; } #werkzeuge .tool-icon { margin: 0 0 3px; color: var(--accent); } #werkzeuge .tool-icon svg { display: block; width: clamp(26px, 5.7cqi, 37px); height: clamp(26px, 5.7cqi, 37px); fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } #werkzeuge .tool-block strong { font-size: clamp(15px, 4.3cqi, 28px); font-weight: 550; line-height: 1.15; hyphens: auto; } @media (min-width: 1024px) { #werkzeuge .tool-block strong { hyphens: manual; } } #werkzeuge .tool-block > span:last-child { font-size: clamp(12px, 2.3cqi, 15px); line-height: 1.5; color: var(--muted); } #werkzeuge .hub-connections { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); pointer-events: none; overflow: visible; } #werkzeuge .hub-connections path[data-connection] { fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; } #werkzeuge .hub-connections marker path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } /* A focused card dims the other connectors; the id selector must outrank the resting rule above. */ #werkzeuge[data-tool-focus] .hub-connections path[data-connection] { opacity: .25; } #werkzeuge[data-tool-focus="one"] .hub-connections path[data-connection="one"], #werkzeuge[data-tool-focus="two"] .hub-connections path[data-connection="two"], #werkzeuge[data-tool-focus="three"] .hub-connections path[data-connection="three"] { opacity: 1; stroke-width: 2.5; } #werkzeuge[data-tool-focus="all"] .hub-connections path[data-connection] { opacity: 1; stroke-width: 2.5; } #werkzeuge[data-tool-focus=""] .hub-connections path[data-connection] { opacity: .45; } @media (hover: hover) and (pointer: fine) { #werkzeuge .tool-block:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 18px 34px -18px #55416980; } } #werkzeuge .tool-label-enter { animation: tool-label-in var(--dur-fast) var(--ease) both; animation-delay: calc(var(--tool-i, 0) * 40ms); } @keyframes tool-label-in { from { opacity: 0; } to { opacity: 1; } } #werkzeuge .tool-icon .icon-personal { display: none; } #werkzeuge[data-tool-mode="personal"] .tool-icon .icon-personal { display: block; } #werkzeuge[data-tool-mode="personal"] .tool-icon .icon-business { display: none; } .no-js #werkzeuge .tool-switch { display: none; } @media (prefers-reduced-motion: no-preference) { #werkzeuge .hub-connections path[data-connection] { transition: opacity var(--dur-fast) var(--ease), stroke-width var(--dur-fast) var(--ease); } #werkzeuge .tool-block { transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { #werkzeuge .tool-block:hover { transform: translateY(-3px); } } @media (hover: hover) and (pointer: fine) { #werkzeuge .tool-switch button:not([aria-pressed="true"]):hover { background: var(--tint); } } @media (max-width: 900px) { #werkzeuge .tools-inner { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; } #werkzeuge .tools-inner > .section-kicker { justify-self: stretch; } #werkzeuge .tools-copy { max-width: 600px; width: 100%; margin-inline: auto; margin-bottom: var(--stack-block); } #werkzeuge .tool-sculpture { max-width: 600px; margin-inline: auto; } } /* Natural-height rows keep translated labels and their connectors together. */ @media (max-width: 767px) { #werkzeuge .tool-switch { display: flex; width: 100%; } #werkzeuge .tool-switch button { flex: 1; min-width: 0; padding: 10px 9px; font-size: 13px; } #werkzeuge .tool-sculpture { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px 16px; max-width: 600px; height: auto; aspect-ratio: auto; container-type: normal; margin: 0 auto; } #werkzeuge .tool-core, #werkzeuge .tool-block { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; grid-column: 2; width: 100%; height: auto; min-height: 0; aspect-ratio: auto; padding: 18px 16px; inset: auto; gap: 5px 12px; border-radius: var(--radius-surface); box-shadow: 0 6px 16px -12px #55416945; } #werkzeuge .tool-core { grid-row: 1; } #werkzeuge .tool-core > img { grid-row: 1 / 3; width: 34px; } #werkzeuge .tool-core-title br { display: none; } #werkzeuge .tool-core-title { font-size: 22px; } #werkzeuge .tool-core > span { grid-column: 2; } #werkzeuge .tool-block-one { grid-row: 2; } #werkzeuge .tool-block-two { grid-row: 3; } #werkzeuge .tool-block-three { grid-row: 4; } #werkzeuge .tool-icon { grid-row: 1 / 3; margin: 0; } #werkzeuge .tool-icon svg { width: 30px; height: 30px; } #werkzeuge .tool-block strong { font-size: 19px; line-height: 1.25; } #werkzeuge .tool-block > span:last-child { grid-column: 2; font-size: 13px; } /* One continuous spine on the rail; tools.js sets its ends to the centre of the first and last row. */ #werkzeuge .tool-sculpture::before { content: ""; position: absolute; left: 6px; top: var(--spine-top, 40px); bottom: var(--spine-bottom, 40px); border-left: 1px solid var(--accent); opacity: .4; pointer-events: none; transition: opacity var(--dur-nav) var(--ease); } #werkzeuge .tool-core::before, #werkzeuge .tool-block::before { content: ""; position: absolute; left: -23px; width: 22px; top: 50%; border-top: 1px solid var(--accent); opacity: .4; } /* The assistant is the root of the list: tinted ground and an accent edge. */ #werkzeuge .tool-core { background: var(--tint); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } #werkzeuge .tool-block:hover { transform: none; } #werkzeuge .tool-core:active::before, #werkzeuge .tool-block:active::before { opacity: 1; } #werkzeuge .hub-connections { display: none; } } @media (prefers-reduced-motion: reduce) { #werkzeuge .tool-label-enter { animation: none; } } .tools-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (forced-colors: active) { #werkzeuge .tool-core, #werkzeuge .tool-block, #werkzeuge .tool-switch { border-color: CanvasText; } #werkzeuge::before { display: none; } } /* /assets/redesign-20260930/rhythm.css */ /* Homepage rhythm: every section on the content rail uses the same padding token on top and bottom, and every in-page link lands with the section's top edge directly under the sticky header. */ html.aioos-conversion { scroll-padding-top: 0; } #anfang, #idee, #alltag, #app, #produktfilm, #produkte, #stimme, #werkzeuge, #moeglichkeiten, #preise, #faq, #kostenlos-testen, #faq.faq-section .faq-group { scroll-margin-top: var(--navigation-height, 76px); } #demo, #ai-to-go { scroll-margin-top: calc(var(--navigation-height, 76px) + 16px); } #app, #produktfilm, #produkte, #stimme, #moeglichkeiten, #preise, #faq { padding-block: var(--section); } #preise, #faq { --section-y: var(--section); } #idee { padding-block: var(--section-photo); } /* The app and film sections carry a body-scoped rule of their own; this one has the same specificity and loads last. */ body[data-aioos-visual="20260910"] #app, body[data-aioos-visual="20260910"] #produktfilm { padding-block: var(--section); } /* /assets/redesign-20260930/anatomy.css */ /* Component anatomy of the homepage, loaded last in the bundle: one primary button, one icon size per context, control edges that meet WCAG 1.4.11. Values come from system-20261012/tokens.css. */ /* Primary button: 56 px high, 24 px side padding, control radius, 16 to 17 px type, 16 px arrow gap, no shadow. */ html.aioos-conversion body[data-aioos-visual] :is(#anfang .hero-actions, #kostenlos-testen .closing-actions, #preise .price-entry, #preise .trial-pricing) .button { min-height: var(--btn-h); padding: 14px var(--btn-pad-x); gap: var(--btn-gap); font-size: var(--t-btn); font-weight: var(--w-ui); border-radius: var(--radius-control); box-shadow: none; } @media (max-width: 767px) { html.aioos-conversion body[data-aioos-visual] :is(#anfang .hero-actions, #kostenlos-testen .closing-actions, #preise .trial-pricing) .button { width: 100%; max-width: none; } } @media (max-width: 370px) { html.aioos-conversion body[data-aioos-visual] :is(#anfang .hero-actions, #kostenlos-testen .closing-actions, #preise .price-entry, #preise .trial-pricing) .button { padding-inline: 16px; gap: 12px; } } /* Header call to action: 44 px. */ html.aioos-conversion .nav-demo { min-height: var(--btn-h-nav); } /* Icons drawn in markup replace text glyphs: the size follows the type around them. */ .button .icon, .nav-demo .icon { width: 1.15em; height: 1.15em; } .text-link .icon { width: 1.1em; height: 1.1em; } .text-link > span[aria-hidden] { font-size: inherit; line-height: 1; display: inline-flex; align-items: center; } /* Phones: a kicker pair wraps onto two lines instead of squeezing the second label. */ @media (max-width: 767px) { .section-kicker { flex-wrap: wrap; gap: 4px 16px; } .section-kicker > span:last-child:not(:first-child) { text-align: start; max-width: none; } } /* /assets/redesign-20260930/states.css */ /* Interaction states of the homepage family, loaded last in the bundle. One recipe per kind of control; every value comes from system-20261012/tokens.css. hover only where the device hovers: colour, border and background fade in --dur-fast on --ease (never transition: all); an arrow nudges 2 px up and to the right; nothing else moves. pressed a button, tab or chip moves --press for --dur-press; a text link or summary fades to .72. reduced nothing moves: the pressed state is a change of opacity. A component keeps its own state rule only for what is specific to it (its own fill, a card that lifts). */ summary, [role="tab"] { -webkit-tap-highlight-color: transparent; } /* Text links: every kind of link on the page fades colour, border and underline the same way. */ :is(.text-link, .conversion-secondary, .hero-bottom a, .access-description a, .trial-pricing__terms a, .trial-finale__terms a, .trial-home-terms a, .price-terms a, .aioos-product-film__actions .button, .aioos-product-film__transcript summary) { transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease), opacity var(--dur-press) var(--ease); } :is(.text-link, .conversion-secondary, .button, .nav-demo) > span[aria-hidden] { transition: translate var(--dur-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { :is(.text-link, .conversion-secondary, .hero-bottom a, .access-description a, .trial-pricing__terms a, .trial-finale__terms a, .trial-home-terms a, .price-terms a, .aioos-product-film__actions .button, .aioos-product-film__transcript summary):hover { color: var(--accent); } .text-link:hover { border-bottom-color: var(--accent); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { :is(.text-link, .conversion-secondary, .button, .nav-demo):hover > span[aria-hidden] { translate: 2px -2px; } } /* Pressed. Text-like controls fade, solid controls move. */ :is(.text-link, .conversion-secondary, .hero-bottom a, .access-description a, .trial-pricing__terms a, .trial-finale__terms a, .trial-home-terms a, .price-terms a, .aioos-product-film__actions .button, .aioos-product-film__transcript summary, .site-header nav a, .site-header .nav-more > summary):active { opacity: .72; transition-duration: var(--dur-press); } @media (prefers-reduced-motion: no-preference) { :is(.button, .nav-demo, .nav-menu-toggle, .back-to-top, .home-language-trigger, .hero-industries a, .tab-list button, .use-case-tabs button, .tool-switch button, .faq-categories a, .voice-demo-actions button):active, .aioos-product-film__launch:active > span { transform: var(--press); transition-duration: var(--dur-press); } } @media (prefers-reduced-motion: reduce) { :is(.button, .nav-demo, .nav-menu-toggle, .back-to-top, .home-language-trigger, .hero-industries a, .tab-list button, .use-case-tabs button, .tool-switch button, .faq-categories a, .voice-demo-actions button):active, .aioos-product-film__launch:active > span { opacity: .85; } } /* /assets/redesign-20260930/dialogs.css */ /* Dialogs of the homepage family: the free-sample dialog and the enlarged app view. The language drawer follows the same recipe in country-language-20260911/home.css, where its other rules live. Values come from system-20261012/tokens.css. One recipe: a dialog rises --dialog-rise while it fades in over --dur-base on --ease and leaves in --dur-exit on --ease-in; a phone sheet slides --dialog-slide instead. Its scrim is --scrim with --scrim-blur and fades with it. Reduced motion: opacity only. A browser without @starting-style or allow-discrete opens and closes instantly, as before. */ dialog.sample-lead, #screen-dialog { opacity: 0; transform: translateY(var(--dialog-rise)) scale(.985); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in), overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete; } dialog.sample-lead[open], #screen-dialog[open] { opacity: 1; transform: none; transition: height var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; } @starting-style { dialog.sample-lead[open], #screen-dialog[open] { opacity: 0; transform: translateY(var(--dialog-rise)) scale(.985); } } dialog.sample-lead::backdrop, #screen-dialog::backdrop { background: var(--scrim, rgb(25 27 27 / .35)); backdrop-filter: blur(var(--scrim-blur, 6px)); opacity: 0; transition: opacity var(--dur-exit) var(--ease-in), overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete; } dialog.sample-lead[open]::backdrop, #screen-dialog[open]::backdrop { opacity: 1; transition-duration: var(--dur-base); transition-timing-function: var(--ease); } @starting-style { dialog.sample-lead[open]::backdrop, #screen-dialog[open]::backdrop { opacity: 0; } } /* The enlarged view clips its toolbar and picture to the corners. */ #screen-dialog { overflow: hidden; } /* Phones: the sample dialog is a sheet on the bottom edge (lead.css) and rises from there. */ @media (max-width: 767px) { dialog.sample-lead { border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -20px 60px #191b1b55; transform: translateY(var(--dialog-slide)); } dialog.sample-lead[open] { transform: none; } @starting-style { dialog.sample-lead[open] { transform: translateY(var(--dialog-slide)); } } } @media (prefers-reduced-motion: reduce) { dialog.sample-lead, #screen-dialog, dialog.sample-lead[open], #screen-dialog[open] { transform: none; } @starting-style { dialog.sample-lead[open], #screen-dialog[open] { transform: none; } } } /* /assets/redesign-20260930/cta-bar.css */ /* Phone call-to-action bar (#188): the hero's free-sample button, pinned to the bottom edge while no other primary action is on screen. cta-bar.js builds it from the hero button, so its words are the page's own in all ten languages; without script it does not exist. Phones only (below the 768px tier). It is fixed, so showing or hiding it moves nothing; the contents it covers are scrolled clear by html scroll-padding-bottom. */ .cta-bar { display: none; } @media (max-width: 767px) { .cta-bar { position: fixed; inset: auto 0 0; z-index: 50; display: block; padding: 10px max(var(--gutter), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); background: var(--paper); border-top: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base); } .cta-bar.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } /* A dialog, the open menu sheet and the drawer own the screen. */ html:has(dialog[open]) .cta-bar, html:has(.nav-menu-toggle[aria-expanded="true"]) .cta-bar { opacity: 0; visibility: hidden; transition: none; } .cta-bar .cta-bar__button { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; max-width: 480px; margin-inline: auto; min-height: 48px; padding: 10px 16px; gap: 12px; font-size: var(--t-ui); font-weight: var(--w-ui); line-height: 1.3; white-space: normal; text-align: left; border-radius: var(--radius-control); box-shadow: none; } /* Content and the back-to-top control stay clear of the bar while it shows; focus never lands under it. */ html.has-cta-bar { scroll-padding-bottom: calc(var(--cta-bar-h, 68px) + 12px); } /* Lifted by transform, not by bottom: a transform is not a layout shift. */ html.cta-bar-on .back-to-top { transform: translateY(calc(4px - var(--cta-bar-h, 68px))); transition: transform var(--dur-base) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .cta-bar { transform: none; transition: opacity var(--dur-fast) linear, visibility 0s linear var(--dur-fast); } .cta-bar.is-on { transition-delay: 0s; } html.cta-bar-on .back-to-top { transition: none; } }