/* Lorne & Vale, lornevale.com. The one stylesheet. Apple France's web design, measured on apple.com/fr, applied to Lorne & Vale at the owner's request: Apple's greys, its Increase Contrast blue (so text keeps 7:1), type scale, tiles, pills and motion. The copy, the mark and the product are Lorne & Vale's own. Contrast: every ratio in these comments is WCAG 2.x, computed by tools/check_contrast.py, which reads the tokens below and fails if any pair drops under its target. Targets: reading text 7:1 or better; secondary text (inactive step numbers, display second lines) 4.5:1 or better; control edges and focus rings 3:1 or better. Inside the demo's product frames (--pw-*, --pi-*): reading ink 7:1 or better, secondary ink and accents 4.5:1. Rules for page authors - No style attributes, no inline scripts, no data: URIs (the CSP forbids them). - Type sizes follow Apple's web scale: 12 (bar and footer), 14, 17, 19, 21, 24, 28, 32, 40, page titles 36 to 65, and three clamps: display (48 to 80, 41.5 under 360px), title (32 to 72), lead (19 to 21). Weights 400 and 600 only (the demo's product frames reproduce the apps' own weights). - Spacing only from --space-8 to --space-128 (the 8px grid), through the .mt-* utilities or the tokens. Section padding 72, 96 from 48em, 150 from 64em. Text blocks at most 980 wide (--measure), media and grids 1200 (--container). Gutters 16 at 320, Apple's 87.5% column from 360 (24.4 at 390), 32 from 48em, 40 from 64em; the bar, its sheet and the footer keep 16 on phones. - Radii nest: inner = outer minus the padding between them (never under 8). Apple's tiles 18 (the limits sheet 28 from 64em), fields 12, pills 980. - Breakpoints in em (30, 48, 64, 80), so text zoom collapses a layout instead of overflowing it. - Hover lives only inside @media (hover:hover) and (pointer:fine). A control answers the press on pointer-down in colour, as Apple's pills and bar links do: a darker fill, ink, or opacity .6 in 100ms, released in 200ms. No shrink. Only the product frames (.pf-*, .pw-*) keep iOS's .97 press. - The site is white, in light mode only: no dark mode, no dark bands. Depth comes from Apple's #f5f5f7 tiles and one divider colour (#d2d2d7), drawn flat; colour appears where it means something (the one loud button, links, the decision). - [data-store-only] elements stay hidden while . Sections 1 Tokens (light only) 3 Contrast and transparency preferences 4 Base and type 5 Layout 6 Navigation 7 Controls 8 Surfaces and product 9 Media frames and rail 10 Lists and content 11 Forms 12 Footer and 404 12b Demo (try the concierge) 12c Landing page 13 Motion and reveal 14 Kit (QA page only) 15 Print */ /* 1. Tokens (light only) */ :root{ color-scheme:light; /* Surfaces */ --bg:#ffffff; --bg-soft:#f5f5f7; /* Apple's band: bands, wells, pressed rows */ --bg-inset:#e8e8ed; /* Apple's tertiary fill: tracks, address bar */ --tile:#f5f5f7; /* Apple's tile: text-1 15.46, text-2 9.20, text-3 5.09, accent 8.00 */ --card-bg:var(--tile); /* cards are Apple tiles: #f5f5f7 on white, white on the soft bands, no shadow */ --card-raised-bg:#ffffff; /* Text on bg / soft / inset */ /* Apple's neutral greys, no blue cast. Tertiary is the nearest neutral to Apple's #6e6e73 that holds 4.5:1 on the inset. */ --text-1:#1d1d1f; /* 16.83 bg, 15.46 soft, 13.78 inset */ --text-2:#424245; /* 10.01 bg, 9.20 soft, 8.20 inset, 9.00 accent-tint: all reading and caption text */ --text-3:#68686d; /* 5.54 bg, 5.09 soft, 4.54 inset: display second lines, inactive step numbers and field placeholders only */ /* Apple blue: systemBlue as Apple's HIG gives it for Increase Contrast in light mode (#0040dd), so links and button labels keep 7:1. Fills use it; text uses the next shade down. */ --accent:#0039c7; /* link text 8.71 bg, 8.00 soft, 7.14 inset, 7.83 accent-tint */ --accent-hover:#0033b3; /* 9.88 bg, 9.08 soft, 8.09 inset */ --accent-press:#002e9f; /* 11.10 bg */ --fill-accent:#0040dd; /* primary button; white label 7.56 */ --fill-accent-hover:#0039c7;/* white label 8.71 */ --fill-accent-press:#0033b3;/* white label 9.88 */ --on-accent:#ffffff; --accent-tint:#eef3fd; /* tinted controls: accent 7.83, text-1 15.13, text-2 9.00 */ --accent-tint-hover:#e3ebfb;/* accent-hover label 8.26 */ --accent-line:rgba(0,57,199,.6); /* the tinted controls' edge: renders #6688dd on white, 3.43:1 (the tint alone is 1.11:1) */ --hallmark:#4b44b0; /* graphics; as text it would give 7.63 bg */ --hallmark-glow:#5e5ce6; /* graphics only, never text: 5.06 bg */ /* Lines */ --line:#d2d2d7; /* Apple's divider: decorative hairline, 1.51 on bg, 1.38 on soft */ --field-edge:#86868b; /* Apple's text-field edge: 3.62 bg, 3.33 tile */ --line-ui:#7c8394; /* control edge 3.80 bg, 3.49 soft, 3.11 inset */ --line-strong:var(--line); /* one divider colour; follows --line to #b9c0cc under more contrast */ /* Status */ --danger:#9b1c22; /* error text 8.13 bg, 7.47 soft, 7.22 danger-tint */ --danger-tint:#fdeeee; /* text-1 14.94 */ --success:#1a6536; /* icons only, 7.10 bg */ --focus:#0039c7; /* 3px ring, 8.71 bg, 8.00 soft */ /* Materials */ --nav-material:rgba(245,245,247,.8); /* Apple's nav material; worst case, black behind it, renders #c4c4c6: text-1 10.38, nav-ink 7.23 */ --nav-solid:#fafafc; /* Apple's open-menu surface */ --nav-line:transparent; /* no hairline under the bar, as Apple; more contrast keeps one */ --nav-ink:#333336; /* Apple's nav text: 11.77 on the bar over white, 12.08 on nav-solid */ --icon-hairline:rgba(18,22,32,.14); --scrim:rgba(11,14,21,.32); /* Product frames: the web app's and the iPhone app's own light palettes, used only inside the demo's window and phone frames. */ --pw-canvas:#f5f5f7; --pw-panel:#ffffff; --pw-soft:#ebecf0; /* pills, wells */ --pw-ink:#1c1d21; /* 16.84 pw-panel, 15.47 pw-canvas, 14.26 pw-soft */ --pw-ink2:#4e5058; /* 8.04 pw-panel, 7.38 pw-canvas; secondary only on soft, 6.81 pw-soft */ --pw-ink3:#646771; /* secondary: 5.64 pw-panel, 5.18 pw-canvas, 4.78 pw-soft */ --pw-line:#c4c6cf; /* decorative */ --pw-line2:#dfe1e8; /* decorative */ --pw-accent:#0065d3; /* 5.52 pw-panel, 5.07 pw-canvas, 4.68 pw-soft; white label 5.52 */ --pw-good:#18773c; /* 5.61 pw-panel, 5.15 pw-canvas, 4.75 pw-soft */ --pi-bg:#f2f2f7; /* grouped background */ --pi-card:#ffffff; --pi-recessed:#e5e5ea; /* choice rows, fields */ --pi-ink:#000000; /* 21.00 pi-card, 18.82 pi-bg, 16.73 pi-recessed */ --pi-ink2:#48484a; /* 9.12 pi-card, 8.18 pi-bg, 7.27 pi-recessed */ --pi-ink3:#636366; /* secondary: 5.99 pi-card, 5.37 pi-bg, 4.77 pi-recessed */ --pi-line:#d1d1d6; /* decorative */ --pi-accent:#006bd8; /* fills only, white label 5.13; text uses the next token */ --pi-accent-text:#005cbf; /* 6.40 pi-card, 5.73 pi-bg, 5.09 pi-recessed */ --pi-good:#1f6c32; /* 6.46 pi-card, 5.79 pi-bg, 5.15 pi-recessed */ /* Type: one family, weights 400 and 600. Sizes in rem, so text zoom scales them; the clamps have rem bounds. */ --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --fs-14:.875rem; --fs-17:1.0625rem; --fs-21:1.3125rem; --fs-26:1.65625rem; --fs-33:2.0625rem; --fs-41:2.59375rem; --fs-52:3.25rem; --fs-65:4.0625rem; --fs-display:clamp(3rem,1.7rem + 3.6667vw,5rem); /* 48 up to 567px (Apple's headline on phones), 64.7 at 1024, 80 at 1440 */ --fs-title:clamp(2rem,1.0714rem + 3.8095vw,4.5rem); /* 32 at 390, 56.2 at 1024, 72 at 1440: Apple's section headline */ --fs-lead:clamp(1.0625rem,.909rem + .631vw,1.3125rem); /* 17 at 390, 21 from 1024 */ /* Leading tightens as size grows (a constant added to 1em); tracking tightens too, and is 0 at 17 and below. */ --lh-14:calc(1em + .375rem); /* 20 */ --lh-17:1.47; /* 25 */ --lh-21:calc(1em + .4375rem); /* 28 */ --lh-26:calc(1em + .33rem); /* 32 */ --lh-title:calc(1em + .25rem); /* 36 at 32, 76 at 72 */ --lh-41:calc(1em + .27rem); /* 46 */ --lh-65:calc(1em + .19rem); /* 68 */ --lh-display:calc(1em + .27rem); /* 52 at 48, 84 at 80 */ --lh-lead:calc(1em + .5rem); /* 25 at 17, 29 at 21 */ --tr-21:-.008em; --tr-26:-.012em; --tr-33:-.007em; --tr-41:-.01em; --tr-52:-.011em; --tr-display:-.015em; /* Spacing: the 8px grid, named by pixel value */ --space-8:8px; --space-16:16px; --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px; --space-56:56px; --space-64:64px; --space-72:72px; --space-96:96px; --space-128:128px; --section-pad:var(--space-72); /* 72 below 48em, 96 from 48em, 150 from 64em (Apple's measured section padding) */ --gutter:16px; /* 16 at 320, Apple's 87.5% column from 360 (24.4 at 390), 32 from 48em, 40 from 64em */ --container:1200px; /* media and grids */ --measure:980px; /* headers and text blocks */ --nav-h:48px; /* Apple: 48 below 64em, 44 from 64em */ --control:44px; /* the smallest target */ /* Radii nest: inner = outer minus the padding between them, never under 8 */ --r-8:8px; --r-12:12px; --r-20:20px; --r-pill:999px; --r-icon:22.37%; --r-phone:48px; --r-phone-screen:40px; /* the demo's phone: 48 outer, 8 bezel, 40 screen */ /* Depth: the site draws flat, as Apple's pages. What is left is the ring (ink at .12, 1.28:1 on white and on #f5f5f7) for an edge that must read, the segmented thumb's small shadow, the app icon's own, and the kit's raised card. Shadows are the ink colour at low alpha, never black and never blue. */ --ring:0 0 0 1px rgba(18,22,32,.12); --sh-1:0 1px 1px rgba(18,22,32,.04),0 2px 4px -1px rgba(18,22,32,.04),0 16px 32px -16px rgba(18,22,32,.14); /* cards */ --sh-raised:0 1px 1px rgba(18,22,32,.05),0 4px 8px -2px rgba(18,22,32,.05),0 24px 40px -20px rgba(18,22,32,.2); --sh-2:0 1px 2px rgba(18,22,32,.1); /* small raised parts: a thumb */ --sh-icon:0 1px 2px rgba(18,22,32,.08),0 8px 24px rgba(18,22,32,.12); /* Motion: press 100ms (feedback on pointer-down, exempt from the 200ms floor), 200 release, hover and colour, 250 controls and disclosures, 320 entrances and reveals, 360 sheets. Reduced motion: 150ms opacity only. Transitions, never keyframes; nothing loops; exits faster than entrances. */ --dur-press:100ms; --dur-fast:200ms; --dur-base:250ms; --dur-enter:320ms; --dur-sheet:360ms; --dur-reduced:150ms; --ease-out:cubic-bezier(.22,1,.36,1); /* entrances and feedback */ --ease-in-out:cubic-bezier(.65,0,.35,1); /* movement on screen */ --ease-sheet:cubic-bezier(.32,.72,0,1); /* sheets and the record drawer, both directions */ --z-nav:50; --z-sheet:60; --z-skip:100; } @media (max-width:22.49em){:root{--fs-display:2.59375rem}} /* under 360px (a 568-high phone) the headline keeps 41.5, so the hero button stays in the first view */ @media (min-width:48em){:root{--section-pad:var(--space-96);--gutter:32px}} @media (min-width:64em){:root{--section-pad:150px;--gutter:40px;--nav-h:44px}} @media (min-width:22.5em) and (max-width:47.99em){ :root{--gutter:min(6.25vw,32px)} /* Apple's 87.5% phone column: 22.5 at 360, 24.4 at 390, 32 from 512; 320 and 200% text keep 16 */ .nav,.footer{--gutter:16px} /* the global bar, its sheet and the global footer stay at 16, as Apple's */ } /* 3. Contrast and transparency preferences */ @media (prefers-contrast:more){ :root{--text-2:#1d1d1f;--text-3:#424245;--line:#b9c0cc;--line-ui:#5d6475;--nav-line:#7c8394} } /* 4. Base and type */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--space-16));interpolate-size:allow-keywords} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* overflow-wrap: a word or an address longer than its line (large text, a narrow card) breaks instead of pushing the page sideways; it changes nothing where the word fits. */ body{margin:0;background:var(--bg);color:var(--text-1);font:400 var(--fs-17)/var(--lh-17) var(--font);letter-spacing:0;overflow-wrap:break-word; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;text-rendering:optimizeLegibility} h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0} address{font-style:normal} ol,ul{padding:0} ul[role="list"],ol[role="list"]{list-style:none} img,svg,video{display:block;max-width:100%;height:auto} button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit} button{cursor:pointer} [hidden]{display:none!important} ::selection{background:var(--accent-tint);color:var(--text-1)} :focus{outline:none} :focus-visible{outline:3px solid var(--focus);outline-offset:3px} main:focus-visible,[tabindex="-1"]:focus-visible{outline:none} .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Headings default to their usual role; the classes below pick an exact step. h1: 41.5, 52 from 48em, 65 from 64em. h2: the title clamp, 33 to 52. */ h1{font-size:var(--fs-41);line-height:var(--lh-41);letter-spacing:var(--tr-41);font-weight:600} h2{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-33);font-weight:600} h3{font-size:var(--fs-21);line-height:var(--lh-21);letter-spacing:var(--tr-21);font-weight:600} h4,h5,h6{font-size:var(--fs-17);line-height:var(--lh-17);letter-spacing:0;font-weight:600} @media (min-width:48em){h1{font-size:var(--fs-52);line-height:var(--lh-title);letter-spacing:var(--tr-52)}} @media (min-width:64em){h1{font-size:var(--fs-65);line-height:var(--lh-65);letter-spacing:var(--tr-52)}} /* Type scale. Display, title and lead move smoothly between their bounds; every other step is fixed. The older names map onto the new steps: .t-hero is the display, .t-section the title, .t-card and .t-large Apple's 28/32 (.t-large 32/36 from 48em), .t-sub the 21 step, .small and .caption the footnote. */ .t-display,.t-hero{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:600} /* The display line box rounded to a whole pixel (84 at 80, 52 at 48), so what follows starts on a whole pixel. */ @supports (line-height:round(nearest,1px,1px)){.t-display,.t-hero{line-height:round(nearest,calc(1em + .27rem),1px)}} .t-page{font-size:var(--fs-41);line-height:var(--lh-41);letter-spacing:var(--tr-41);font-weight:600} @media (max-width:47.99em){.t-page{font-size:clamp(2.25rem,.6786rem + 7.857vw,2.59375rem)}} /* 36 at 320 to 41.5 at 390: the longest unbreakable word (7.37em, 265px) fits the 288 column */ .t-title,.t-section{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-33);font-weight:600} .t-26,.t-card,.t-large{font-size:1.75rem;line-height:2rem;letter-spacing:-.007em;font-weight:600} /* Apple's 28/32 */ .t-21,.t-sub{font-size:var(--fs-21);line-height:var(--lh-21);letter-spacing:var(--tr-21);font-weight:600} .t-body{font-size:var(--fs-17);line-height:var(--lh-17);letter-spacing:0;font-weight:400} .t-strong{font-size:var(--fs-17);line-height:var(--lh-17);letter-spacing:0;font-weight:600} .t-lead,.lead{font-size:clamp(1.1875rem,1.1106rem + .3155vw,1.3125rem);line-height:calc(1em + .25rem);letter-spacing:var(--tr-21);font-weight:600;color:var(--text-2);max-width:36em} /* Apple section intro: 19/23 on phones, 21/25 from 64em, semibold */ .section-head:has(>.caption)>.lead{font-weight:400;line-height:calc(1em + .5rem)} /* legal and privacy: Apple's document intro, 400 with 29px leading */ .t-footnote,.small,.caption{font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;font-weight:400;color:var(--text-2)} .eyebrow{font-size:var(--fs-21);line-height:1.5625rem;letter-spacing:var(--tr-21);font-weight:600;color:var(--text-1)} /* Apple section label: 21/25, ink */ .section-head>.eyebrow+*,.notfound>.eyebrow+*{margin-top:12px} .section-head>.eyebrow+.t-page,.notfound>.eyebrow+.t-page{margin-top:var(--space-8)} .section-head>.eyebrow:has(+.t-page),.notfound>.eyebrow{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0045em} /* a page's own eyebrow: Apple's hero eyebrow on phones, 24/28, a step above the section labels */ @media (min-width:64em){ .eyebrow{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0045em} /* 24/28 */ .section-head>.eyebrow+:not(.t-page),.notfound>.eyebrow+:not(.t-page){margin-top:10px} .section-head>.eyebrow:has(+.t-page),.notfound>.eyebrow{font-size:1.75rem;line-height:2rem;letter-spacing:-.007em} /* a page's own head: Apple's hero eyebrow, 28/32 */ } /* A page's intro under its title is Apple's hero intro, one step above the section intros: 19/23 to 24/28, as .hero__lead. Legal and privacy keep their document intro. */ .section-head:not(:has(>.caption))>.t-page+.lead,.notfound>.t-page+.lead{font-size:clamp(1.1875rem,1.0098rem + .7289vw,1.5rem);line-height:calc(1em + .25rem);color:var(--text-1)} /* in ink, as Apple's hero intro */ .mono{font-family:var(--font-mono);letter-spacing:0} .muted{color:var(--text-2)} .second-line{display:block;color:var(--text-3)} /* only inside display type of 26.5px and up */ @media (min-width:48em){ .t-page{font-size:var(--fs-52);line-height:var(--lh-title);letter-spacing:var(--tr-52)} .t-large{font-size:2rem;line-height:2.25rem;letter-spacing:-.009em} /* Apple's 32/36 */ } @media (min-width:64em){ .t-page{font-size:var(--fs-65);line-height:var(--lh-65);letter-spacing:-.004em} /* 65px on the system font: -.004em renders as Apple's 64px "normal" */ h1{letter-spacing:-.004em} } .wordmark{font-weight:600;letter-spacing:-.02em;white-space:nowrap} /* Line breaking, site wide: display lines are balanced, reading text avoids a one-word last line. Progressive: browsers without text-wrap ignore both. Hyphenated terms that must not split (French e-mail, algorithm names) are wrapped in .nowrap in the page sources. */ h1,h2,h3,h4,.t-display,.t-hero,.t-page,.t-title,.t-section,.t-26,.t-large,.t-card,.t-21,.t-sub,.card__title,.feature__title, .callout__title,.faq__q,.toc__title,.section-head--center .lead,.notfound>.lead{text-wrap:balance} p,li,dt,dd,figcaption,.lead{text-wrap:pretty} /* Prose: long-form text (legal, privacy, FAQ answers). Inline links are exempt from 44px targets. */ .prose{max-width:64ch} .prose>*+*{margin-top:var(--space-16)} .prose>h2{margin-top:var(--space-48);font-size:1.5rem;line-height:1.75rem;letter-spacing:-.005em;font-weight:600} /* Apple's legal subhead: 24/28, 32/36 from 1024 */ @media (min-width:64em){.prose>h2{font-size:2rem;line-height:2.25rem;letter-spacing:-.009em}.prose>h2+*{margin-top:var(--space-16)}} .prose>h3{margin-top:var(--space-32)} .prose>h2+*,.prose>h3+*{margin-top:var(--space-8)} .prose ul,.prose ol{padding-left:var(--space-24)} .prose li+li{margin-top:var(--space-8)} .prose a,.inline-link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em; -webkit-tap-highlight-color:transparent;transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .prose a:active,.inline-link:active{opacity:.6;transition-duration:var(--dur-press)} @media (hover:hover) and (pointer:fine){.prose a:hover,.inline-link:hover{color:var(--accent-hover);text-decoration-thickness:2px}} .prose strong{font-weight:600} .prose code,.prose .mono{font-family:var(--font-mono);font-size:var(--fs-14)} /* Skip link: parked above the viewport by its own height, so it stays hidden at any text size. */ .skip-link{position:absolute;left:var(--gutter);top:0;z-index:var(--z-skip);display:inline-flex;align-items:center;min-height:var(--control); padding:0 var(--space-16);border-radius:var(--r-12);background:var(--text-1);color:#ffffff;font-size:var(--fs-14);line-height:var(--lh-14); font-weight:600;letter-spacing:0;text-decoration:none;transform:translateY(calc(-100% - var(--space-8)));transition:transform var(--dur-fast) var(--ease-out)} .skip-link:focus-visible{transform:translateY(var(--space-8));outline-offset:2px} /* 5. Layout */ .container{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto} .container--measure{width:min(100% - 2 * var(--gutter),var(--measure));margin-inline:auto} .container--narrow{width:min(100% - 2 * var(--gutter),760px);margin-inline:auto} .section{padding-block:var(--section-pad);background:var(--bg);color:var(--text-1)} .section--soft{background:var(--bg-soft)} .section--flush-top{padding-top:0} /* Band: Apple's #f5f5f7 ground, with a hairline at each edge; tiles on it are white. */ .section--band{background:var(--bg-soft);box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)} .section-head{max-width:var(--measure)} .section-head--center{margin-inline:auto;text-align:center} .section-head--center .lead{margin-inline:auto} .section-head>*+*{margin-top:var(--space-16)} .section-head>.lead+.actions,.section-head>p+.actions{margin-top:var(--space-32)} .section-head+*{margin-top:var(--space-32)} @media (min-width:64em){ .section-head>h1+.lead,.section-head>h2+.lead,.section-head>.t-hero+.lead,.section-head>.t-page+.lead,.section-head>.t-section+.lead, .section-head>.t-display+.lead,.section-head>.t-title+.lead{margin-top:var(--space-24)} .section-head+*{margin-top:var(--space-48)} } .grid{display:grid;gap:var(--space-16);grid-template-columns:minmax(0,1fr)} @media (min-width:48em){ .grid{gap:var(--space-24)} .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:64em){ .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* Three items that never pair: one column until 64em, then three (no orphan on its own row at 768). */ @media (min-width:64em){.grid--3-wide{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Split: two columns from 64em, stacked below. Centred by default. The single column is explicit, so a long word at a large text size cannot widen it past the container. */ .split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);align-items:center} @media (min-width:64em){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-64)} .split--fit{grid-template-columns:minmax(0,1fr) auto} /* the media column takes its own width, the text the rest */ } .split--start{align-items:start} /* a heading beside its text lines up with the text's first line */ @media (min-width:64em){.split>.section-head+*{margin-top:0}} /* beside the head, not below it: the column gap separates them */ /* Media: centres a fixed-width figure (phone, app icon, hallmark) in a column or a centred band. */ .media{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-24)} .stack>*+*{margin-top:var(--space-16)} .stack--s>*+*{margin-top:var(--space-8)} .stack--l>*+*{margin-top:var(--space-32)} .center{text-align:center} /* 6. Navigation: white material, the one translucent layer, because content scrolls under it. White at .9 keeps text-2 at 7.10:1 even with solid ink behind it (blur 20, saturate 180%); solid white under reduced transparency, more contrast, or while the menu is open. Bar 56px, 64 from 64em. Below 48em: brand and menu. 48 to 64em: brand, the call to action, EN | FR and the menu (the call to action and the language switch fit in French and survive text zoom). From 64em, as Apple on laptops: brand, the four links, Sign in, the call to action and EN | FR; no menu. */ /* The material lives on a layer behind the bar, never on the bar itself: a backdrop filter on .nav would make it the containing block of the fixed menu sheet. So the bar can ease to solid #fafafc when the menu opens, over Apple's 422ms, while the blur stays underneath until it is covered, and back the same way. */ .nav{position:sticky;top:0;z-index:var(--z-nav);color:var(--text-1);background:rgba(250,250,252,0); box-shadow:inset 0 -1px 0 var(--nav-line);transition:background-color 422ms cubic-bezier(.4,0,.6,1)} .nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--nav-material); -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:opacity 422ms cubic-bezier(.4,0,.6,1)} @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .nav::before{background:rgba(245,245,247,.96)} } @media (prefers-reduced-transparency:reduce){ .nav::before{background:var(--nav-solid);-webkit-backdrop-filter:none;backdrop-filter:none} } @media (prefers-contrast:more){ .nav::before{background:var(--nav-solid);-webkit-backdrop-filter:none;backdrop-filter:none} .nav{box-shadow:inset 0 -1px 0 var(--line-ui)} } .nav[data-menu="open"]{background:var(--nav-solid)} .nav[data-menu="open"]::before{opacity:0} .nav__bar{display:flex;align-items:center;gap:var(--space-16);height:var(--nav-h)} .nav__bar,.nav__sheet-inner{width:min(100% - 2 * var(--gutter),var(--measure))} /* Apple's nav content is 980 wide */ /* The bar's own controls sit inside the root's scroll padding by design: focusing them (the menu toggle on open and on Escape) never scrolls the page. Scoped to the bar, so the sheet's links still clear it when reached with Shift+Tab. */ .nav__bar :is(a,button){scroll-margin-top:calc(-1 * (var(--nav-h) + var(--space-16)))} /* Brand: the mark on an ink tile (the icon's black field takes the tile's colour through a screen blend; the letters stay white), then the name at 17/600. No press state, as Apple's wordmarks. */ .nav__brand{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--control);min-width:0;margin-right:auto;color:var(--text-1); text-decoration:none;font-size:var(--fs-17);line-height:1.2;-webkit-tap-highlight-color:transparent} .brand-mark{position:relative;flex:none;width:28px;height:28px;border-radius:var(--r-icon);overflow:hidden;isolation:isolate;background:var(--text-1)} .brand-mark img{width:100%;height:100%;mix-blend-mode:screen} @media (forced-colors:active){.brand-mark{forced-color-adjust:none}} /* Links: Apple's 12px in #333336, a 44px target with 8px of padding each side, spread evenly. The current page reads in black with Apple's 1px rule on the bar's edge. */ .nav__links{display:none} .nav__list{display:flex;align-items:center;justify-content:space-evenly;gap:0;list-style:none;padding:0} /* Apple spreads its links evenly */ .nav__link{position:relative;display:inline-flex;align-items:center;min-height:var(--control);padding:0 var(--space-8);border-radius:var(--r-8); color:var(--nav-ink);font-size:.75rem;line-height:1;letter-spacing:-.01em;text-decoration:none;white-space:nowrap; -webkit-tap-highlight-color:transparent;transition:color .32s cubic-bezier(.4,0,.6,1)} /* Apple: 12px, colour 0.32s */ .nav__link:active{color:#000;transition-duration:var(--dur-press)} .nav__link[aria-current="page"]{color:#000} .nav__link[aria-current="page"]::after{content:"";position:absolute;left:var(--space-8);right:var(--space-8);bottom:0;height:1px;background:rgba(0,0,0,.8)} /* Apple's current-item rule, on the bar's edge */ @media (hover:hover) and (pointer:fine){.nav__link:hover{color:#000}} /* Actions. The call to action here is Apple's local-nav pill: 12px, white on blue, 24 high, with a 44px hit area. The full-size button belongs to the page. */ .nav__actions{flex:none;display:flex;align-items:center;gap:var(--space-8)} .nav__actions>.nav__signin,.nav__actions>.nav__cta,.nav__actions>.lang-switch{display:none} /* Menu button: 44px, radius 12. The glyph's lines end 13px inside the box, so the box hangs 13px past the gutter and the lines end exactly on it. */ .nav__menu-button,.nav__menu-link{display:inline-flex;align-items:center;justify-content:center;width:var(--control);height:var(--control);padding:0;margin-right:-13px; border:0;border-radius:var(--r-12);background:transparent;color:var(--text-1);-webkit-tap-highlight-color:transparent; transition:background-color var(--dur-fast) var(--ease-out)} .nav__menu-button:active,.nav__menu-link:active{background:var(--bg-soft);transition-duration:var(--dur-press)} /* Apple's menu trigger: two 1px hairlines that meet (120ms) and then turn into a cross (120ms), and back the same way, drawn from the one glyph instead of swapping icons. */ .nav__menu-button .icon--close{display:none} :is(.nav__menu-button,.nav__menu-link) .icon--menu{position:relative;width:18px;height:18px;background:none;-webkit-mask:none;mask:none} :is(.nav__menu-button,.nav__menu-link) .icon--menu::before,:is(.nav__menu-button,.nav__menu-link) .icon--menu::after{content:"";position:absolute;left:3px;width:14px;height:1px;border-radius:.5px;background:currentColor; transition:rotate 120ms cubic-bezier(.42,0,1,1),scale 120ms cubic-bezier(.42,0,1,1),translate 120ms cubic-bezier(0,0,.58,1) 120ms} :is(.nav__menu-button,.nav__menu-link) .icon--menu::before{top:4px} :is(.nav__menu-button,.nav__menu-link) .icon--menu::after{top:11px} .nav__menu-button[aria-expanded="true"] .icon--menu::before,.nav__menu-button[aria-expanded="true"] .icon--menu::after{scale:1.16 1; transition:translate 120ms cubic-bezier(.42,0,1,1),rotate 120ms cubic-bezier(0,0,.58,1) 120ms,scale 120ms cubic-bezier(0,0,.58,1) 120ms} .nav__menu-button[aria-expanded="true"] .icon--menu::before{translate:0 4.5px;rotate:45deg} .nav__menu-button[aria-expanded="true"] .icon--menu::after{translate:0 -2.5px;rotate:-45deg} @media (forced-colors:active){:is(.nav__menu-button,.nav__menu-link) .icon--menu::before,:is(.nav__menu-button,.nav__menu-link) .icon--menu::after{forced-color-adjust:none;background:ButtonText}} html:not(.js) .nav__menu-button{display:none} html.js .nav__menu-link{display:none} @media (min-width:48em){ .nav__actions>.nav__cta,.nav__actions>.lang-switch{display:inline-flex} .nav__actions{gap:0} .nav__actions>.nav__cta{margin-left:16px} /* + Sign in's 8px padding: Apple's 24 between local-nav items */ .nav__actions>.lang-switch{margin-left:10px} /* + EN's 14px inset in its 44px box: 24 */ } @media (min-width:64em){ .nav__brand{margin-right:0} .nav__links{display:block;flex:1 1 auto;margin-left:var(--space-24)} .nav__actions>.nav__signin{display:inline-flex} .nav__actions>.lang-switch{margin-right:-15px} /* FR's 44px box hangs into the gutter; its letters end on the column edge */ .nav__menu-button,.nav__menu-link,html.js .nav__menu-link{display:none} .nav__sheet{display:none!important} } /* The menu sheet: as Apple's, one full-height #fafafc surface under the bar, no shadow and no dimmed page; the toggle and Escape close it. The panel scrolls on short screens. Rows at Apple's 28px semibold, 46px apart, no separators; the pressed highlight runs edge to edge like a list cell. Below 48em the sheet also holds the call to action, Sign in and EN | FR; from 48em the bar already shows the call to action and EN | FR, so the sheet keeps Sign in only, at its own width. Opens as Apple's does: a frosted curtain (#e8e8ed at .4, blur 20) fades in over 240ms and the page blurs under it, the panel settles to #fafafc over 420ms from 80ms, then the rows arrive 20ms apart from 200ms, each rising 8px over 240ms on Apple's curve; everything closes together in 240ms. */ .nav__sheet{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:var(--z-sheet);background:rgba(232,232,237,.4); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity 240ms cubic-bezier(.4,0,.6,1)} .nav__sheet.is-open{opacity:1} .nav__panel{height:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(250,250,252,0);color:var(--text-1); box-shadow:none;transition:background-color 420ms cubic-bezier(.4,0,.6,1) 80ms} .nav__sheet.is-open .nav__panel{background:var(--nav-solid)} @media (prefers-reduced-transparency:reduce){.nav__sheet{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.nav__panel{background:var(--nav-solid)}} .nav__sheet :is(.nav__sheet-list>li,.nav__sheet-actions){opacity:0;transform:translateY(calc(-1 * var(--space-8))); transition:opacity 240ms cubic-bezier(.4,0,.6,1),transform 240ms cubic-bezier(.4,0,.6,1)} .nav__sheet.is-open :is(.nav__sheet-list>li,.nav__sheet-actions){opacity:1;transform:none} .nav__sheet.is-open .nav__sheet-list>li:nth-child(1){transition-delay:200ms} .nav__sheet.is-open .nav__sheet-list>li:nth-child(2){transition-delay:220ms} .nav__sheet.is-open .nav__sheet-list>li:nth-child(3){transition-delay:240ms} .nav__sheet.is-open .nav__sheet-list>li:nth-child(4){transition-delay:260ms} .nav__sheet.is-open .nav__sheet-actions{transition-delay:280ms} @media (prefers-reduced-motion:reduce){.nav__sheet :is(.nav__sheet-list>li,.nav__sheet-actions){transform:none}} .nav__sheet:focus-visible{outline:none} .nav__sheet-inner{padding-block:2px var(--space-24)} /* the first row's cap top at 62, as Apple's; its pressed cell still clears the bar */ .nav__sheet-list{list-style:none;padding:0} .nav__sheet-link{display:flex;align-items:center;min-height:46px;margin-inline:calc(-1 * var(--gutter));padding:3px 48px 4px; color:var(--nav-ink);font-size:1.75rem;line-height:1;font-weight:600;letter-spacing:-.007em;hyphens:auto;overflow-wrap:anywhere; text-decoration:none;-webkit-tap-highlight-color:transparent; transition:background-color var(--dur-fast) var(--ease-out)} .nav__sheet-link:active{background:var(--bg-soft);transition-duration:var(--dur-press)} .nav__sheet-link[aria-current="page"]{color:var(--nav-ink)} /* every row in the bar's ink, as Apple's menu; aria-current still tells assistive technology */ .nav__sheet-link:focus-visible{outline-offset:-3px} .nav__sheet-actions{display:grid;gap:var(--space-8);margin-top:var(--space-24)} .nav__sheet-actions .lang-switch{justify-self:start;margin-top:var(--space-8);margin-left:-12px} .nav__sheet-actions{padding-left:calc(48px - var(--gutter));justify-items:start} /* aligned with the rows' text, as Apple */ .nav__sheet-actions .button--block{display:inline-flex;width:auto;max-width:100%} @media (min-width:48em){ .nav__sheet-actions{margin-top:var(--space-16);justify-items:start} .nav__sheet-actions .nav__sheet-cta,.nav__sheet-actions .lang-switch{display:none} .nav__sheet-actions .button--block{width:auto} } html.menu-open{overflow:hidden} /* 7. Controls */ /* Icons: CSS masks over external SVG files, so they take currentColor. */ .icon{display:inline-block;flex:none;width:24px;height:24px;background:currentColor; -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat} .icon--16{width:16px;height:16px}.icon--20{width:20px;height:20px}.icon--28{width:28px;height:28px} .icon--alert{--icon:url("/img/icons/alert.svg?v=1")}.icon--arrow-right{--icon:url("/img/icons/arrow-right.svg?v=1")} .icon--ask{--icon:url("/img/icons/ask.svg?v=1")}.icon--bed{--icon:url("/img/icons/bed.svg?v=1")} .icon--briefcase{--icon:url("/img/icons/briefcase.svg?v=1")}.icon--browser{--icon:url("/img/icons/browser.svg?v=1")} .icon--building{--icon:url("/img/icons/building.svg?v=1")}.icon--calendar{--icon:url("/img/icons/calendar.svg?v=1")} .icon--check{--icon:url("/img/icons/check.svg?v=1")}.icon--chevron-down{--icon:url("/img/icons/chevron-down.svg?v=1")} .icon--chevron-left{--icon:url("/img/icons/chevron-left.svg?v=1")}.icon--chevron-right{--icon:url("/img/icons/chevron-right.svg?v=1")} .icon--clock{--icon:url("/img/icons/clock.svg?v=1")}.icon--close{--icon:url("/img/icons/close.svg?v=1")} .icon--decision{--icon:url("/img/icons/decision.svg?v=1");-webkit-mask-size:114%;mask-size:114%;-webkit-mask-position:50% 118%;mask-position:50% 118%} /* its glyph is drawn small and low in its box: scaled to the set's optical size and centred */.icon--document{--icon:url("/img/icons/document.svg?v=1")} .icon--draft{--icon:url("/img/icons/draft.svg?v=1")}.icon--external{--icon:url("/img/icons/external.svg?v=1")} .icon--faceid{--icon:url("/img/icons/faceid.svg?v=1")}.icon--follow-up{--icon:url("/img/icons/follow-up.svg?v=1")} .icon--frame{--icon:url("/img/icons/frame.svg?v=1")}.icon--info{--icon:url("/img/icons/info.svg?v=1")} .icon--iphone{--icon:url("/img/icons/iphone.svg?v=1")}.icon--language{--icon:url("/img/icons/language.svg?v=1")} .icon--location{--icon:url("/img/icons/location.svg?v=1")}.icon--lock{--icon:url("/img/icons/lock.svg?v=1")} .icon--mail{--icon:url("/img/icons/mail.svg?v=1")}.icon--menu{--icon:url("/img/icons/menu.svg?v=1")} .icon--mic{--icon:url("/img/icons/mic.svg?v=1")}.icon--nosign{--icon:url("/img/icons/nosign.svg?v=1")} .icon--pause{--icon:url("/img/icons/pause.svg?v=1")}.icon--plan{--icon:url("/img/icons/plan.svg?v=1")} .icon--plus{--icon:url("/img/icons/plus.svg?v=1")}.icon--question{--icon:url("/img/icons/question.svg?v=1")} .icon--quote{--icon:url("/img/icons/quote.svg?v=1")}.icon--record{--icon:url("/img/icons/record.svg?v=1")} .icon--seal{--icon:url("/img/icons/seal.svg?v=1")}.icon--send{--icon:url("/img/icons/send.svg?v=1")} .icon--shield{--icon:url("/img/icons/shield.svg?v=1")}.icon--team{--icon:url("/img/icons/team.svg?v=1")} .icon--ticket{--icon:url("/img/icons/ticket.svg?v=1")}.icon--token{--icon:url("/img/icons/token.svg?v=1")} .icon--wrench{--icon:url("/img/icons/wrench.svg?v=1")} @media (forced-colors:active){.icon{forced-color-adjust:none;background:CanvasText}} /* Buttons: Apple's 44px pill. The press answers on pointer-down in colour (100ms), as Apple's; release eases back in 200ms. One loud button per view: the primary, Apple's blue fill, flat. Secondary is a blue tint with a blue hairline (the tint alone is 1.16:1 on white); quiet is Apple's outline pill, a 2px ink edge on a transparent ground. */ /* A label stays on one line while it fits; only a button alone on its line and wider than it (large text on a phone) wraps, balanced, with 8px above and below. */ .button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:44px;padding:11px 22px; border:0;border-radius:980px;font-size:var(--fs-17);line-height:1.2;font-weight:600;letter-spacing:0;text-decoration:none;text-align:center; text-wrap:balance;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer; transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .button:active{transition-duration:var(--dur-press)} .button--primary{background:var(--fill-accent);color:var(--on-accent)} /* flat, as Apple's buttons are */ .button--secondary{background:var(--accent-tint);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)} .button--secondary:active{background:var(--accent-tint-hover);color:var(--accent-hover)} .button--quiet{background:transparent;color:var(--text-1);box-shadow:inset 0 0 0 2px var(--text-1);font-weight:400} /* Apple's 44px outline pill: 2px ink edge, regular label */ .button--quiet:active{background:var(--bg-soft)} @media (hover:hover) and (pointer:fine){ .button--primary:hover{background:var(--fill-accent-hover)} .button--secondary:hover{background:var(--accent-tint-hover);color:var(--accent-hover)} .button--quiet:hover{background:var(--bg-soft)} } .button--primary:active{background:var(--fill-accent-press)} /* after the hover rule, so a held button shows it */ .button--compact{min-height:var(--control);padding:var(--space-8) var(--space-16);font-size:var(--fs-14)} .nav__cta{white-space:nowrap} .nav__actions>.nav__cta{position:relative;min-height:0;padding:3px 10px;border:1px solid transparent;background:var(--fill-accent);color:var(--on-accent); box-shadow:none;font-size:.75rem;line-height:1rem;font-weight:400;letter-spacing:-.01em} .nav__actions>.nav__cta::after{content:"";position:absolute;inset:-11px -1px} /* 46 by the label's width: the 44px target */ .nav__actions>.nav__cta:active{background:var(--fill-accent-press);color:var(--on-accent)} @media (hover:hover) and (pointer:fine){.nav__actions>.nav__cta:hover{background:var(--fill-accent-hover);color:var(--on-accent)}} .button--block{display:flex;width:100%} /* Busy keeps its full fill (white on #0040dd, 7.56:1); only the cursor says "wait". */ .button[aria-busy="true"]{cursor:progress} .button[aria-disabled="true"]{cursor:not-allowed;opacity:.5} .button .icon{width:20px;height:20px} @media (forced-colors:active){.button{border:1px solid ButtonText}} .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16)} .actions--center{justify-content:center} @media (max-width:29.99em){ .actions--stack{flex-direction:column;align-items:flex-start;width:100%} /* the stack starts on its text's edge, as Apple's actions under start-aligned copy */ .actions--stack.actions--center{align-items:center} /* under a centred heading it stays centred */ } /* Text link: 44px target through its own box; pressed opacity .6. Inline-block, not flex: a label that wraps keeps its arrow after the last word, and a .nowrap span inside the label stays inline. The vertical padding centres one line in 44px at any text size (fallback without the lh unit: 8px, with the 44px minimum). The arrow sits 4px from the label (optical). */ .link{display:inline-block;min-height:var(--control);min-width:var(--control);padding-block:var(--space-8);padding-block:calc((var(--control) - 1lh) / 2); color:var(--accent);font-weight:400;text-decoration:none; -webkit-tap-highlight-color:transparent;transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .link .icon{width:16px;height:16px;margin-left:4px;vertical-align:-3px;transition:transform var(--dur-fast) var(--ease-out)} .link:active{opacity:.6;transition-duration:var(--dur-press)} @media (hover:hover) and (pointer:fine){.link:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:.2em}} /* Apple's link grammar ("En savoir plus ›"): a chevron after the words that stays put; hover only underlines. */ .link>.icon--arrow-right{--icon:url("/img/icons/chevron-right.svg?v=1")} :is(.actions,.final__actions,.how__foot,.hero__actions,.thanks .section-head+ul>li)>.link:not(:has(.icon))::after{content:"";display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:-3px; background:currentColor;-webkit-mask:url("/img/icons/chevron-right.svg?v=1") center/contain no-repeat;mask:url("/img/icons/chevron-right.svg?v=1") center/contain no-repeat} @media (forced-colors:active){:is(.actions,.final__actions,.how__foot,.hero__actions,.thanks .section-head+ul>li)>.link:not(:has(.icon))::after{forced-color-adjust:none;background:LinkText}} .link--small{font-size:var(--fs-14);line-height:var(--lh-14)} /* Segmented control: a 44px track, radius 12, on #f5f5f7. Each item is a full 44px target; the thumb is drawn 4px inside it with radius 8 (12 minus 4), so the hit area is larger than what you see. The thumb is the only mark of the chosen item, so its edge is a control edge: ink at .48 draws #888a91, 3.19:1 on the track. */ .segmented{display:inline-flex;align-items:stretch;padding:0;border-radius:var(--r-12);background:var(--bg-soft);list-style:none} .segmented__item{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--control);min-height:var(--control); padding:0 var(--space-16);border:0;border-radius:var(--r-12);background:transparent;color:var(--text-2);font-size:var(--fs-14);line-height:1; font-weight:600;letter-spacing:0;text-decoration:none;white-space:nowrap;isolation:isolate;-webkit-tap-highlight-color:transparent; transition:color var(--dur-fast) var(--ease-out)} .segmented__item::before{content:"";position:absolute;inset:4px;z-index:-1;border-radius:var(--r-8);background:var(--bg); box-shadow:0 0 0 1px rgba(18,22,32,.48),var(--sh-2);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .segmented__item[aria-current],.segmented__item[aria-selected="true"],.segmented__item[aria-pressed="true"]{color:var(--text-1)} .segmented__item[aria-current]::before,.segmented__item[aria-selected="true"]::before,.segmented__item[aria-pressed="true"]::before{opacity:1} a.segmented__item:active,button.segmented__item:active{color:var(--text-1);transition-duration:var(--dur-press)} @media (hover:hover) and (pointer:fine){.segmented__item:not([aria-current]):hover{color:var(--text-1)}} @media (forced-colors:active){.segmented__item[aria-current]::before,.segmented__item[aria-pressed="true"]::before{border:2px solid Highlight}} /* A segmented control with more segments than fit (four tabs, large text, a phone) scrolls inside its track instead of pushing the page sideways; there its focus ring is drawn inside the segment. */ .segmented:not(.lang-switch){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} .segmented:not(.lang-switch)::-webkit-scrollbar{display:none} .segmented:not(.lang-switch) .segmented__item{flex:none} .segmented:not(.lang-switch) .segmented__item:focus-visible{outline-offset:-3px} /* Language switch: two plain links, the current one marked by Apple's 1px rule under its label, no track, no thumb. */ .lang-switch{background:transparent;border-radius:0} .lang-switch .segmented__item{padding:0 var(--space-8);font-weight:400;color:var(--nav-ink);transition:color .32s cubic-bezier(.4,0,.6,1)} /* the bar links' colour change, as Apple's */ .nav__actions>.lang-switch .segmented__item{font-size:.75rem;letter-spacing:-.01em} .lang-switch .segmented__item[aria-current]{color:#000} @media (hover:hover) and (pointer:fine){.lang-switch .segmented__item:hover{color:#000}} .lang-switch .segmented__item[aria-current]::before{inset:auto calc(50% - .6em) 0;height:1px;border-radius:0;background:rgba(0,0,0,.8);box-shadow:none} /* 8. Surfaces and product */ /* Card: an Apple tile, radius 18, flat: #f5f5f7 on white sections, white on the soft bands, no ring and no shadow. Padding 24, 32 from 48em: both exceed the radius, so a child's corner sits clear of the curve and chips (999) or fields (12) inside are allowed; a surface inset by 8 takes 12. */ .card{position:relative;padding:var(--space-24);border-radius:18px;background:var(--card-bg);color:var(--text-1);box-shadow:none} :is(.section--soft,.section--band) :is(.card,.callout){background:var(--bg)} @media (prefers-contrast:more){:is(.card,.callout){box-shadow:inset 0 0 0 1px var(--line-ui)}} @media (min-width:48em){.card{padding:var(--space-32)}} .card--raised{background:var(--card-raised-bg);box-shadow:var(--ring),var(--sh-raised)} .card--outline{background:transparent;box-shadow:var(--ring)} a.card,.card--link{display:block;text-decoration:none;-webkit-tap-highlight-color:transparent; transition:background-color var(--dur-fast) var(--ease-out)} a.card:active,.card--link:active{background:var(--bg-inset);transition-duration:var(--dur-press)} @media (hover:hover) and (pointer:fine){a.card:hover,.card--link:hover{background:var(--bg-inset)}} @media (forced-colors:active){.card{border:1px solid CanvasText}} .card__title{font-size:var(--fs-21);line-height:var(--lh-21);font-weight:600;letter-spacing:var(--tr-21)} .card__title+*{margin-top:var(--space-8)} .card__text{color:var(--text-2)} .card>*+.card__footer{margin-top:var(--space-24)} .card .inset-8{border-radius:var(--r-12)} .card .inset-16{border-radius:var(--r-8)} /* App icon: the real icon, masked to the iOS superellipse approximation. */ .app-icon{display:block;flex:none;width:64px;height:64px;border-radius:var(--r-icon);background:#000; outline:1px solid var(--icon-hairline);outline-offset:-1px;box-shadow:var(--sh-icon)} .nav .app-icon,.footer .app-icon{box-shadow:none} .app-icon--lg{width:96px;height:96px} @media (min-width:48em){.app-icon--lg{width:128px;height:128px}} /* Store badges: slots only. Official badges from Apple's marketing tools go here on launch day. */ html[data-store="off"] [data-store-only]{display:none!important} .store-badges{display:flex;flex-wrap:wrap;gap:var(--space-16)} .store-badge{display:inline-flex;align-items:center;min-height:var(--control);-webkit-tap-highlight-color:transparent} .store-badge img{height:44px;width:auto} /* Illustrative label, required near every product screenshot. The icon stays on the first line when the label wraps: a 20px line, so 2px centres the 16px icon on it. */ .illustrative{display:inline-flex;align-items:flex-start;gap:var(--space-8);font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} .illustrative .icon{width:16px;height:16px;margin-top:2px} /* Hallmark: the Lorne & Vale mark (decorative). 112px, 208px from 64em. */ .hallmark{width:112px;height:auto} @media (min-width:64em){.hallmark{width:208px}} /* 9. Media frames and rail */ /* Phone: drawn in CSS around a raw 1206 x 2622 screenshot. Radius 16% of width; the screen radius nests inside the bezel (outer minus bezel). */ .phone{--w:240px;--bezel:calc(var(--w) * .05);position:relative;flex:none;width:var(--w);padding:var(--bezel); border-radius:calc(var(--w) * .16);background:#000;box-shadow:inset 0 0 0 1px #505052,inset 0 0 0 3px #39393b,0 0 0 1px rgba(18,22,32,.12)} /* flat, as Apple's: black glass, a neutral titanium rim, a 5% bezel */ .phone::before,.phone::after{content:"";position:absolute;width:3px;background:#464749;border-radius:2px} .phone::before{left:-2px;top:22%;height:6%;box-shadow:0 calc(var(--w) * .2) 0 #464749} .phone::after{right:-2px;top:27%;height:11%} .phone img{width:100%;height:auto;border-radius:calc(var(--w) * .16 - var(--bezel));background:var(--bg-inset)} @media (min-width:64em){.phone{--w:280px}} .phone--small{--w:200px} @media (min-width:64em){.phone--small{--w:220px}} /* Browser window on a Mac-proportioned (16:10) canvas, radius 20, drawn in CSS; not an Apple product image. */ .window{overflow:hidden;border-radius:var(--r-20);background:var(--bg);box-shadow:var(--ring)} /* flat: the 1px edge only, as Apple's screens */ .window__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-16);height:40px;padding:0 var(--space-16);background:var(--bg-soft);box-shadow:inset 0 -1px 0 var(--line)} .window__dots{display:flex;gap:var(--space-8)} .window__dots span{width:12px;height:12px;border-radius:var(--r-pill);background:var(--line-ui);opacity:.45} .window__address{display:inline-flex;align-items:center;gap:var(--space-8);min-width:0;padding:0 var(--space-16);height:28px;border-radius:var(--r-8);background:var(--bg-inset); font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .window__address .icon{width:16px;height:16px} .window__view{aspect-ratio:16 / 10;background:var(--bg-inset);overflow:hidden} .window__view img{width:100%;height:100%;object-fit:cover;object-position:top left} .window__view--type{display:grid;place-items:center;padding:var(--space-32);text-align:center;background:var(--bg-soft)} /* On a phone the capture is about 220px tall, so the chrome shrinks with it: 32px bar, 8px dots, 24px address. */ @media (max-width:29.99em){ .window__bar{grid-template-columns:auto 1fr;height:32px;padding:0 var(--space-16);gap:var(--space-8)} .window__bar>span:last-child{display:none} .window__dots span{width:8px;height:8px} .window__address{justify-self:end;height:24px;padding:0 12px;gap:6px;font-size:.75rem;line-height:1rem} /* Apple's smallest step, 12/16: the whole address fits from 320 */ } /* Composition: an iPhone screen in front of a browser window. */ .device-stack{position:relative;container-type:inline-size;padding-bottom:6%} .device-stack .window{width:86%} .device-stack .phone{--w:26cqi;position:absolute;right:0;bottom:0} /* Figure caption under a frame */ .figure-caption{margin-top:var(--space-16);max-width:36ch;font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} /* Screenshot rail: horizontal, scroll-snap, keyboard and touch friendly, no autoplay. */ .rail{position:relative} .rail__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-16)} @media (max-width:47.99em){.rail__head{flex-direction:column;align-items:flex-start}} /* the controls go under the heading, not beside it */ .rail__controls{display:none;gap:var(--space-8)} html.js .rail__controls{display:flex} .rail__controls[data-static]{display:none!important} .rail__button{display:inline-flex;align-items:center;justify-content:center;width:var(--control);height:var(--control);padding:0;border:0;border-radius:var(--r-pill); background:var(--bg-soft);color:var(--text-1);box-shadow:var(--ring);-webkit-tap-highlight-color:transparent; transition:background-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)} .rail__button:active{background:var(--accent-tint);transition-duration:var(--dur-press)} .rail__button[aria-disabled="true"]{opacity:.4;cursor:default} .rail__button[aria-disabled="true"]:active{transform:none;background:var(--bg-soft)} @media (hover:hover) and (pointer:fine){.rail__button:not([aria-disabled="true"]):hover{background:var(--accent-tint);color:var(--accent)}} /* The 64px bottom padding holds the phones' drop shadow (about 56px), which the scroll box would clip. */ .rail__track{position:relative;--rail-pad:max(var(--gutter),(100% - var(--container)) / 2);display:flex;gap:var(--space-24);margin:var(--space-32) 0 0;padding:var(--space-8) var(--rail-pad) var(--space-64); list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-pad); scrollbar-width:none;-webkit-overflow-scrolling:touch} .rail__track::-webkit-scrollbar{display:none} .rail__track:focus-visible{outline-offset:-3px;border-radius:0} .rail__item{flex:none;scroll-snap-align:start} @media (min-width:48em){.rail__track{gap:var(--space-32)}} @media (prefers-reduced-motion:no-preference){.rail__track{scroll-behavior:smooth}} .shot{display:flex;flex-direction:column;gap:var(--space-16);width:240px} @media (min-width:64em){.shot{width:280px}} .shot__caption{min-height:3em;font-size:var(--fs-17);line-height:var(--lh-17);font-weight:600;letter-spacing:0;color:var(--text-1)} /* 10. Lists and content */ /* Feature list. The icon is a bare glyph in ink (blue means a link): 40px above a stacked title, as Apple's icon cards, 24px beside an inline one. */ .features{display:grid;gap:var(--space-32) var(--space-24);grid-template-columns:minmax(0,1fr);list-style:none;padding:0} @media (min-width:48em){.features{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:64em){.features--3{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Three features that never pair: one column until 64em, then three. */ @media (min-width:48em){.features--3-wide{grid-template-columns:minmax(0,1fr)}} @media (min-width:64em){.features--3-wide{grid-template-columns:repeat(3,minmax(0,1fr))}} .feature__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text-1)} .features:not(.features--inline) .feature__icon,.features:not(.features--inline) .feature__icon>.icon{width:40px;height:40px} .features:not(.features--inline) :is(.feature__title,.t-21){font-size:var(--fs-21);line-height:calc(1em + .25rem);letter-spacing:var(--tr-21)} /* 21/25, as .control__title */ .feature__title{margin-top:var(--space-16);font-size:var(--fs-17);line-height:var(--lh-17);font-weight:600;letter-spacing:0} .feature__text{margin-top:var(--space-8);color:var(--text-2)} /* align-content:start keeps title and text together when a grid row stretches the item. The 24px icon sits on the title's first 25px line (1px lower, optically centred). */ .features--inline .feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--space-16);align-items:start;align-content:start} .features--inline .feature__title{margin-top:0} .features--inline .feature__text{grid-column:2} .features--inline .feature__icon{grid-row:span 2;margin-top:1px} /* The first line beside the icon starts level with it, whatever spacing utility its element carries. */ .features--inline .feature>.feature__icon+*{margin-top:0} .features--inline .feature>:not(.feature__icon){grid-column:2} /* Step list */ .steps{display:grid;gap:var(--space-32);list-style:none;padding:0;counter-reset:step} .step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 var(--space-16);align-content:start;counter-increment:step} .step::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-pill); background:var(--text-1);color:#ffffff;font-size:var(--fs-14);line-height:1;font-weight:600;letter-spacing:0;grid-row:span 2} /* ink disc: blue is for actions */ .step:not(:last-child)::after{content:"";position:absolute;left:15.5px;top:calc(32px + var(--space-8));bottom:calc(-1 * var(--space-32) + var(--space-8));width:1px;background:var(--line)} .step__title{font-size:var(--fs-21);line-height:var(--lh-21);font-weight:600;letter-spacing:var(--tr-21)} .step__text{margin-top:var(--space-8);color:var(--text-2)} /* A step with a single line of text: centre that first line on the 32px number. */ .step>:only-child{padding-top:3px;padding-top:calc((32px - 1lh) / 2)} @media (min-width:64em){ .steps--row{grid-template-columns:repeat(var(--steps,3),minmax(0,1fr));gap:var(--space-24)} .steps--row .step{grid-template-columns:minmax(0,1fr);gap:0} .steps--row .step::before{grid-row:auto} .steps--row .step__title{margin-top:var(--space-16)} .steps--row .step:not(:last-child)::after{left:calc(32px + var(--space-16));right:var(--space-16);top:15.5px;bottom:auto;width:auto;height:1px} } /* Spec list: label and value rows, hairlines between */ .spec-list{box-shadow:inset 0 -1px 0 var(--line)} .spec-list__row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-block:var(--space-16);box-shadow:inset 0 1px 0 var(--line)} .spec-list__row dt{color:var(--text-2)} .spec-list__row dd{margin:0;font-weight:400} /* values regular in ink, labels in grey: colour carries the difference, as Apple's compare rows */ @media (min-width:48em){.spec-list__row{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-24);align-items:baseline}} .spec-list--plain dd{font-weight:400;color:var(--text-1)} /* values that are full sentences */ /* An inline link in a value gets a 44px target without changing the row's rhythm. */ .spec-list dd .inline-link{display:inline-block;padding-block:var(--space-8);margin-block:calc(-1 * var(--space-8))} /* Callout: "What it will not do". White paper with the ring, no lift: it is a note, not an object. */ .callout{padding:var(--space-24);border-radius:18px;background:var(--card-bg)} @media (min-width:48em){.callout{padding:var(--space-32)}} .callout__head{display:flex;align-items:center;gap:var(--space-16)} .callout__head .icon{color:var(--text-2)} .callout__title{font-size:var(--fs-21);line-height:var(--lh-21);font-weight:600;letter-spacing:var(--tr-21)} .callout__list{display:grid;gap:var(--space-16);margin-top:var(--space-16);list-style:none;padding:0} @media (min-width:48em){.callout__list--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16) var(--space-24)}} /* The mark is positioned, not a grid cell, so inline markup inside an item (a link, a .nowrap span) stays in the text. */ .callout__list li{position:relative;padding-left:calc(20px + var(--space-16));color:var(--text-2)} .callout__list li::before{content:"";position:absolute;left:0;top:2px;top:calc((1lh - 20px) / 2);width:20px;height:20px;background:currentColor;-webkit-mask:url("/img/icons/close.svg?v=1") center/16px no-repeat;mask:url("/img/icons/close.svg?v=1") center/16px no-repeat} /* Checklist: short lines, each after a check mark in the accent colour. Single column. */ .checklist{display:grid;gap:var(--space-16);list-style:none;padding:0} .checklist li{position:relative;padding-left:calc(24px + var(--space-16))} .checklist li::before{content:"";position:absolute;left:0;top:0;top:calc((1lh - 24px) / 2);width:24px;height:24px;background:var(--accent); -webkit-mask:url("/img/icons/check.svg?v=1") center/contain no-repeat;mask:url("/img/icons/check.svg?v=1") center/contain no-repeat} @media (forced-colors:active){.checklist li::before,.callout__list li::before{forced-color-adjust:none;background:CanvasText}} /* Table of contents: two columns from 48em, each entry keeps its 44px target. */ .toc__title{font-size:var(--fs-17);line-height:var(--lh-17);font-weight:600;letter-spacing:0} .toc__list{margin-top:var(--space-8);list-style:none;padding:0} @media (min-width:48em){.toc__list{columns:2;column-gap:var(--space-32)}} .toc__list>li{break-inside:avoid} .toc__list .link{line-height:1.3} .callout__note{margin-top:var(--space-16);font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} /* Founders */ .founder__photo{flex:none;width:96px;height:96px;border-radius:var(--r-pill);background:var(--bg-inset);outline:1px solid var(--icon-hairline);outline-offset:-1px} .founder__name{font-size:var(--fs-21);line-height:var(--lh-21);font-weight:600;letter-spacing:var(--tr-21)} .founder__role{margin-top:var(--space-8);font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} /* FAQ disclosure */ .faq__item+.faq__item{border-top:1px solid #d2d2d7} /* Apple's divider, between rows only */ @media (prefers-contrast:more){.faq__item+.faq__item{border-top-color:var(--line-ui)}} .faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-16);min-height:64px;padding-block:20px;list-style:none;cursor:pointer; font-size:var(--fs-17);line-height:var(--lh-17);font-weight:600;letter-spacing:0;-webkit-tap-highlight-color:transparent;transition:opacity var(--dur-fast) var(--ease-out),color .1s linear} .faq__q::-webkit-details-marker{display:none} .faq__q::marker{content:""} .faq__q:active{opacity:.6;transition-duration:var(--dur-press)} .faq__q:focus-visible{outline-offset:3px} /* the ring runs outside the row, clear of the first letter and the marker */ /* Apple's circled plus (apple-one questions): a 2px ring and a 2px cross, no fill, no shadow; 18px on phones, 24 from 48em. */ .faq__marker{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid currentColor; border-radius:var(--r-pill);color:var(--text-1);transition:transform .3s ease-out,color .1s linear} .faq__marker{margin-top:calc((1lh - 18px) / 2)} /* on the question's first line, as Apple's */ @media (min-width:48em){.faq__marker{width:24px;height:24px;margin-top:calc((1lh - 24px) / 2)}} .faq__marker>.icon{display:none} .faq__marker::before,.faq__marker::after{content:"";position:absolute;top:50%;left:50%;width:50%;height:2px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)} .faq__marker::after{transform:translate(-50%,-50%) rotate(90deg)} @media (forced-colors:active){.faq__marker{forced-color-adjust:none;border-color:CanvasText}.faq__marker::before,.faq__marker::after{forced-color-adjust:none;background:CanvasText}} .faq__item[open] .faq__marker{transform:rotate(45deg)} @media (hover:hover) and (pointer:fine){.faq__q:hover,.faq__q:hover .faq__marker{color:var(--accent)}} /* question and marker turn blue together, as iCloud's */ .faq__a{padding-bottom:var(--space-32);color:var(--text-1);max-width:64ch} /* Apple's open answer: ink, with room below it before the next rule */ .faq__a>*+*{margin-top:var(--space-16)} @supports selector(::details-content){ .faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .4s ease-in-out,content-visibility .4s allow-discrete} /* Apple's accordion: 0.4s ease-in-out */ .faq__item[open]::details-content{block-size:auto} } @media (min-width:48em){ .faq__q{padding-block:var(--space-24);font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0135em} /* Apple's question: 24/28, rows 76 apart */ .faqs__head>.t-26{font-size:2.5rem;line-height:2.75rem;letter-spacing:-.01em} /* group titles on Apple's 40/44 step */ .faq__a{padding-bottom:var(--space-40)} /* iCloud's 37.6 below an open answer */ } /* 11. Forms: Apple's text field, 56px, radius 12, padding 16, a 1px #86868b edge; in focus, Apple's 2px edge and a 2px ring that follows the radius (outline offset 3, so 15). */ /* One explicit shrinkable track, so a long option or address at 200% text cannot widen the form past a 320px screen. */ .form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24)} .form__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24)} @media (min-width:48em){.form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form__grid>.field--full{grid-column:1 / -1}} .field{display:grid;gap:var(--space-8);align-content:start} .field__label{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;letter-spacing:0;color:var(--text-1)} .field__hint{font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} .field__input{display:block;width:100%;min-height:56px;padding:0 var(--space-16);border:0;border-radius:var(--r-12);background:var(--bg);color:var(--text-1); box-shadow:inset 0 0 0 1px var(--field-edge);font-size:var(--fs-17);line-height:var(--lh-17);letter-spacing:0;-webkit-appearance:none;appearance:none; transition:box-shadow var(--dur-fast) var(--ease-out)} @media (prefers-contrast:more){.field__input{box-shadow:inset 0 0 0 1px var(--line-ui)}} /* The first line of a textarea sits where a single-line field's text sits: (56 minus one line) / 2 above it. */ textarea.field__input{min-height:168px;padding:12px var(--space-16);padding-block:calc((56px - 1lh) / 2);resize:vertical} .field__input::placeholder{color:var(--text-3);opacity:1} .field__input:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:inset 0 0 0 2px var(--focus)} .field__input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)} .field__select{position:relative;display:block} .field__select .field__input{padding-right:var(--space-48);cursor:pointer} /* The empty first option reads like a placeholder (text-3, 5.34), not like a chosen value. */ .field__select .field__input:has(> option[value=""]:checked){color:var(--text-3)} .field__select .field__input option{color:var(--text-1)} .field__select::after{content:"";position:absolute;right:var(--space-16);top:50%;width:20px;height:20px;margin-top:-10px;background:var(--text-2);pointer-events:none; -webkit-mask:url("/img/icons/chevron-down.svg?v=1") center/contain no-repeat;mask:url("/img/icons/chevron-down.svg?v=1") center/contain no-repeat} .field__error{display:flex;align-items:flex-start;gap:var(--space-8);font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--danger)} .field__error .icon{width:16px;height:16px;margin-top:2px} .field__count{justify-self:end;font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2);font-variant-numeric:tabular-nums} .field__count[data-over]{color:var(--danger)} @media (forced-colors:active){.field__input{border:1px solid ButtonText}} .form__hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden} .form__foot{display:grid;gap:var(--space-16)} @media (min-width:48em){.form__foot{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-24)}} .form__note{font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} .form-status{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--space-16);padding:var(--space-24);border-radius:var(--r-20)} .form-status:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .form-status__title{font-size:var(--fs-17);line-height:var(--lh-17);font-weight:600;letter-spacing:0} .form-status__text{margin-top:var(--space-8);color:var(--text-2)} .form-status--success{background:var(--bg-soft);box-shadow:var(--ring)} .form-status--success>.icon{color:var(--success)} .form-status--error{background:var(--danger-tint)} .form-status--error>.icon{color:var(--danger)} .form-status--error .form-status__text{color:var(--text-1)} /* A status panel inside a card (the invitation form's failure message) nests like the fields beside it: radius 12, padding 16. */ .card .form-status{padding:var(--space-16);border-radius:var(--r-12)} /* 12. Footer and 404 */ /* Footer: Apple's global footer, 980 wide: the note first above a rule, a small brand, the directory in five columns from 64em, then the copyright; a #f5f5f7 band, 12/16 text in alpha greys (.56 notes, .72 links, .88 titles). Links keep 44px targets on touch screens and take 32px rows where the pointer is fine. */ .footer{padding-block:var(--space-16);background:var(--tile);color:var(--text-1)} .footer>.container{width:min(100% - 2 * var(--gutter),var(--measure))} .footer__note{padding-bottom:var(--space-16);margin-bottom:var(--space-8);box-shadow:inset 0 -1px 0 rgba(0,0,0,.16);font-size:.75rem;line-height:1rem;letter-spacing:-.01em;color:rgba(0,0,0,.56)} .footer .brand-mark{width:16px;height:16px} .footer__top{display:grid;gap:var(--space-24)} /* the tagline groups with the wordmark: 15 above it, 25 below */ .footer__brand{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--control);color:var(--text-1);text-decoration:none; font-size:.75rem;line-height:1rem;-webkit-tap-highlight-color:transparent} .footer__line{font-size:.75rem;line-height:1rem;letter-spacing:-.01em;color:rgba(0,0,0,.56)} .footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24) var(--space-16)} @media (min-width:48em){.footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:64em){.footer__cols{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0}} /* Apple's directory: five 196px columns */ .footer__title{font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:-.01em;color:rgba(0,0,0,.88)} .footer__list{list-style:none;margin:var(--space-8) 0 0;padding:0} .footer__link{display:inline-flex;align-items:center;min-height:var(--control);color:rgba(0,0,0,.72);font-size:.75rem;line-height:1rem;letter-spacing:-.01em; text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} @media (pointer:fine){.footer__link{min-height:32px}} .footer__link:active{opacity:.6;transition-duration:var(--dur-press)} .footer__link[aria-current="page"]{color:rgba(0,0,0,.88)} @media (hover:hover) and (pointer:fine){.footer__link:hover{text-decoration:underline;text-underline-offset:.2em}} /* Apple keeps the colour and underlines */ .footer__bottom{display:grid;gap:var(--space-8);margin-top:var(--space-32);padding-top:var(--space-16);box-shadow:inset 0 1px 0 rgba(0,0,0,.16); font-size:.75rem;line-height:1rem;letter-spacing:-.01em;color:rgba(0,0,0,.56)} @media (prefers-contrast:more){.footer__line,.footer__bottom,.footer__note{color:rgba(0,0,0,.72)}} .notfound{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;min-height:calc(100vh - var(--nav-h) - 320px);min-height:calc(100svh - var(--nav-h) - 320px);text-align:center} .notfound>*+*{margin-top:var(--space-16)} .notfound>.lead{margin-inline:auto;margin-top:var(--space-16)} .notfound>.actions{margin-top:var(--space-32)} @media (min-width:64em){.notfound>.lead{margin-top:var(--space-24)}} .notfound__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-24);margin-top:var(--space-24);list-style:none;padding:0} .thanks .section-head+ul{display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--space-24)} /* the next steps side by side, as the closing links */ /* 12b. Demo (src/partials/{en,fr}/demo.html, src/js/demo.js). The alias :is(...) is the collapsed card, also the first paint without the script. Frames use the product palettes (--pw-*, --pi-*). Transform and opacity only. */ .demo{--demo-bg:var(--bg);--demo-frame-h:576px;position:relative} @supports (overflow:clip){.demo{overflow-x:clip}} .section--soft .demo{--demo-bg:var(--bg-soft)} .demo :is(button,a,[data-act]){-webkit-tap-highlight-color:transparent} .demo[data-instant] *,.demo[data-instant] *::before,.demo[data-instant] *::after{transition:none!important} .demo__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "head" "body" "ctl" "label" "frame";align-items:start} .demo__intro{grid-area:intro} .demo__stage.is-opening{overflow:clip} .demo__intro-text{margin-top:var(--space-8);color:var(--text-2);line-height:1.5625rem} .demo__nojs{display:none;margin-top:var(--space-8);color:var(--text-2);line-height:1.5625rem} .demo__head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8) var(--space-16);min-height:64px} .demo__count{display:grid;font-size:var(--fs-14);line-height:1.25rem;font-weight:600;letter-spacing:0} .demo__clock{font-weight:400;color:var(--text-2);font-variant-numeric:tabular-nums} .demo__nav{display:flex;flex-wrap:wrap;margin-right:calc(-1 * var(--space-8))} .demo__navbtn{display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;padding:0 var(--space-8);border:0;border-radius:var(--r-12);background:transparent; color:var(--accent);font-size:var(--fs-17);line-height:1;font-weight:400; transition:background-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)} .demo__navbtn:active{background:var(--accent-tint);transition-duration:var(--dur-press)} .demo__navbtn[aria-disabled="true"]{opacity:.4;cursor:default} .demo__navbtn[aria-disabled="true"]:active{background:transparent} .demo__navbtn .icon{margin-left:calc(-1 * var(--space-8) / 2)} .demo__progress{flex:1 0 100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;height:4px;list-style:none;padding:0} .demo__progress li{position:relative;border-radius:var(--r-pill);background:var(--bg-inset)} .demo__progress li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .demo__progress li.is-on::after{opacity:1} .demo__body{grid-area:body;position:relative;display:grid;margin-top:var(--space-24)} .demo__pane,.demo__ghost,.demo__ghost>*{grid-area:1 / 1;min-width:0} .demo__ghost{display:grid;visibility:hidden} .demo__pane.is-leaving{position:absolute;inset:0 0 auto;pointer-events:none} .demo__title,.demo__intro-title,.demo__drawer-title{font-size:var(--fs-21);line-height:1.5625rem;font-weight:600;letter-spacing:-.008em;text-wrap:balance} .demo__text{margin-top:var(--space-8);color:var(--text-2);line-height:1.5625rem} .demo .dg{flex:none;width:20px;height:20px} .demo__mandate{display:grid;gap:var(--space-8);margin-top:var(--space-16);list-style:none;padding:0;line-height:1.5625rem} .demo__mandate li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-8)} .demo__mandate .dg{margin-top:2.5px;color:var(--accent)} .demo__mandate span{overflow-wrap:anywhere} .demo__note{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--space-8);margin-top:var(--space-16);font-size:var(--fs-14);line-height:1.25rem;color:var(--text-2)} .demo__note .dg{width:16px;height:16px;margin-top:2px} .demo__mail,.demo__quote{margin-top:var(--space-16);padding:var(--space-16);border-radius:var(--r-12);background:var(--bg-soft);font-size:var(--fs-14);line-height:1.25rem;color:var(--text-2)} .section--soft .demo__mail,.section--soft .demo__quote{background:var(--bg)} .demo__mail{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-16);overflow-wrap:anywhere} .demo__mail .dg{color:var(--accent)} .demo__mail-subj{margin-top:4px;font-size:var(--fs-17);line-height:1.5625rem;color:var(--text-1);overflow-wrap:anywhere} .demo__mail-body{margin-top:var(--space-8)} .demo__quote blockquote{margin:var(--space-8) 0 0;font-size:var(--fs-17);line-height:1.5625rem;color:var(--text-1)} .demo__controls{grid-area:ctl;margin-top:var(--space-24)} .demo__chips{display:flex;flex-wrap:wrap;gap:20px} .demo__chip{max-width:100%} /* sized to its label on phones too, as Apple's pills */ /* Apple's outline pill (privacy, macbook-air): a 2px edge in the label's colour, centred text; it fills with ink on hover. */ .demo__chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border:0;border-radius:calc(var(--control) / 2);background:var(--demo-bg); box-shadow:inset 0 0 0 2px var(--text-1);color:var(--text-1);font-size:var(--fs-17);line-height:1.5rem;text-align:center;text-wrap:balance; transition:background-color .35s ease-in-out,color .35s ease-in-out} .demo__chip:active{background:var(--text-1);color:#fff;transition-duration:var(--dur-press)} .demo__free{position:relative;display:grid;gap:var(--space-8);margin-top:var(--space-16)} .demo__free-label{font-size:var(--fs-14);line-height:1.25rem;font-weight:600;text-wrap:pretty} .demo__free-input,.demo__input{display:block;width:100%;min-height:56px;padding:0 var(--space-16);border:0;border-radius:var(--r-12);background:var(--demo-bg);color:var(--text-1); box-shadow:inset 0 0 0 1px var(--field-edge);font-size:var(--fs-17);line-height:1.5rem;-webkit-appearance:none;appearance:none} @media (prefers-contrast:more){.demo__free-input,.demo__input{box-shadow:inset 0 0 0 1px var(--line-ui)}} .demo__free-input{padding-right:7.5rem} /* both demo fields are Apple's 56px text field */ .demo__free-input,.demo__input{transition:box-shadow var(--dur-fast) var(--ease-out)} .demo__free-input:focus-visible,.demo__input:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:inset 0 0 0 2px var(--focus)} /* Apple's 2px edge plus a 2px ring, as the contact fields; before the error rule, so its red edge still wins */ .demo__input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)} .demo__free-go{position:absolute;bottom:4px;right:4px;min-height:48px;padding:0 var(--space-16);border:0;border-radius:var(--r-8);background:var(--fill-accent);color:var(--on-accent); font-size:var(--fs-17);font-weight:600;transition:background-color var(--dur-fast) var(--ease-out)} .demo__free-go:active{background:var(--fill-accent-press);transition-duration:var(--dur-press)} .demo__free-go:focus-visible{outline-offset:1px} /* the ring sits in the field's white gap, not over the blue */ .demo__field{display:grid;gap:var(--space-8)} .demo__field-label{font-size:var(--fs-14);line-height:1.25rem;font-weight:600} .demo__field-error{display:flex;gap:var(--space-8);font-size:var(--fs-14);line-height:1.25rem;color:var(--danger)} .demo__field-error .dg{width:16px;height:16px;margin-top:2px} .demo__gate .demo__btn{margin-top:var(--space-24)} .demo__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);max-width:100%;min-height:44px;padding:11px 22px;border:0;border-radius:980px; font-size:var(--fs-17);line-height:1.2;font-weight:600;text-decoration:none;text-align:center;text-wrap:balance; transition:background-color var(--dur-fast) var(--ease-out)} /* the same capsule as .button */ .demo__btn:active{transition-duration:var(--dur-press)} .demo__btn--primary{background:var(--fill-accent);color:var(--on-accent)} .demo__btn--primary:active{background:var(--fill-accent-press)} .demo__as{margin-bottom:var(--space-8);font-size:var(--fs-14);line-height:1.25rem;color:var(--text-2)} /* The answers are the stage's outline pill, as the request chips: a 2px ink edge that fills with ink. */ .demo__answers{display:flex;flex-wrap:wrap;gap:20px} .demo__answer{display:inline-flex;align-items:center;gap:var(--space-8);max-width:100%;min-height:44px;padding:10px 22px;border:0;border-radius:980px; background:var(--demo-bg);box-shadow:inset 0 0 0 2px var(--text-1);color:var(--text-1);font-size:var(--fs-17);line-height:1.5rem;font-weight:400;text-align:left; transition:background-color .35s ease-in-out,color .35s ease-in-out} .demo__answer:active{background:var(--text-1);color:#fff;transition-duration:var(--dur-press)} .demo__turn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-16)} .demo__textbtn{min-height:44px;padding:0 var(--space-8);margin-left:calc(-1 * var(--space-8));border:0;border-radius:var(--r-12);background:transparent;color:var(--accent); font-size:var(--fs-17);transition:opacity var(--dur-fast) var(--ease-out)} .demo__textbtn:active{opacity:.6;transition-duration:var(--dur-press)} @media (hover:hover) and (pointer:fine){ .demo__chip:hover{background:var(--text-1);color:#fff} .demo__navbtn:not([aria-disabled="true"]):hover{background:transparent;text-decoration:underline;text-underline-offset:.2em} /* Apple's text-link hover */ .demo__free-go:hover{background:var(--fill-accent-hover)} .demo__btn--primary:hover{background:var(--fill-accent-hover)} .demo__answer:hover{background:var(--text-1);color:#fff} .demo__textbtn:hover{text-decoration:underline;text-underline-offset:.2em} } /* A held blue control shows the press fill, not the hover fill that follows it in the cascade. */ @media (hover:hover) and (pointer:fine){.nav__actions>.nav__cta:active,.demo__free-go:active,.demo__btn--primary:active{background:var(--fill-accent-press)}} .demo__label{grid-area:label;position:relative;margin-top:var(--space-16)} .demo__label-phone,.demo__label-script{display:none} .demo__frame{grid-area:frame;position:relative;justify-self:center;width:min(100%,22.375rem);height:var(--demo-frame-h);margin-top:var(--space-24)} .demo__frame>*{height:100%} /* The iPhone is always cut by the edge of a #f5f5f7 plane, as Apple's device tiles are, never faded into the page: a full-bleed band on phones, a tile from 48em, the window's own panel from 64em. */ @media (max-width:47.99em){ .demo{--demo-frame-h:608px} .demo__frame{justify-self:stretch;width:auto;margin-inline:calc(-1 * var(--gutter));padding:32px var(--gutter) 0;background:var(--tile);overflow:hidden} .demo__frame>*{max-width:22.375rem;margin-inline:auto} .demo__frame{margin-bottom:calc(12px - var(--space-72))} /* the section ends 12 under the band: Apple's seam between stacked grey planes */ } @media (max-width:63.99em){.demo__label-phone{display:inline}} @media (min-width:48em){ .demo{--demo-frame-h:640px} .demo__stage{grid-template-columns:minmax(0,1fr) 22.375rem;grid-template-rows:auto auto auto 1fr;column-gap:var(--space-32); grid-template-areas:"head frame" "body frame" "ctl frame" ". frame"} .demo__frame{align-self:start;margin-top:0} .demo__label{grid-area:frame;align-self:start;margin-top:calc(var(--demo-frame-h) + var(--space-16))} } @media (min-width:48em) and (max-width:63.99em){ .demo__frame{padding:32px 24px 0;border-radius:18px;background:var(--tile);overflow:hidden} /* Apple's device tile: #f5f5f7, radius 18, the phone cut by its edge */ } @media (min-width:64em){ .demo__stage{grid-template-columns:320px minmax(0,1fr);column-gap:var(--space-24)} .demo__frame{width:100%;justify-self:stretch} .demo__title{font-size:1.75rem;line-height:2rem;letter-spacing:-.007em} .demo__mandate{font-size:var(--fs-14);line-height:1.25rem} .demo__mandate li{grid-template-columns:16px minmax(0,1fr)} .demo__mandate .dg{width:16px;height:16px;margin-top:2px} } @media (min-width:80em){.demo__stage{grid-template-columns:352px minmax(0,1fr)}} .demo__intro{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Collapsed ("Try the concierge"), the landing page's band after the hero (hero/final-white): no card of its own, the page's .try band gives the white ground and the hairline. Title 26.5 beside the chips from 64em (its 32px line centred on the 44px chip row), the chips and field in the second column: from 80em that column starts under the week strip's second card (18rem + 16 = one card and one gap). A chip or Continue opens the stage in place (demo.js animates the height). */ :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"intro" "ctl" "label"} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) :is(.demo__head,.demo__body,.demo__frame){display:none} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__intro{position:static!important;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo){--demo-bg:var(--bg)} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__intro-title{font-size:1.75rem;line-height:2rem;letter-spacing:-.007em} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__label-phone{display:none} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__label-script{display:inline} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__label{grid-area:label;margin-top:var(--space-16)} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__chip{width:auto} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__free-label{font-weight:400;color:var(--text-2)} @media (min-width:30em){:is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__chip{white-space:nowrap}} @media (min-width:64em){ :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__stage{grid-template-columns:22.5rem minmax(0,1fr);grid-template-areas:"intro ctl" ". label";column-gap:var(--space-48)} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__controls{margin-top:0} :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__intro-title{padding-top:6px} } @media (min-width:80em){ :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__stage{grid-template-columns:18rem minmax(0,1fr);column-gap:var(--space-16)} } /* Without the script there is nothing to pick: the card is its title, the note and the label, in one column. */ html:not(.js) :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__label-script{display:none} @media (min-width:64em){html:not(.js) :is(.demo[data-open="false"],.demo:not([data-open]):not([data-demo-start="open"] .demo),html:not(.js) .demo) .demo__stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "label"}} html:not(.js) .demo__nojs{display:block} html:not(.js) :is(.demo__controls,.demo__intro-text,.demo__drawer,.demo__scrim){display:none} .demo:not([data-layout="window"]) .demo__as{display:none} .demo__scrim{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--scrim);opacity:0;visibility:hidden; transition:opacity var(--dur-fast) var(--ease-out),visibility var(--dur-fast)} .demo__drawer{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-sheet) + 1);display:flex;flex-direction:column;max-height:88vh;max-height:88dvh; border-radius:var(--r-20) var(--r-20) 0 0;background:var(--bg);color:var(--text-1);box-shadow:none;transform:translateY(100%);visibility:hidden; /* flat, as Apple's sheets: the scrim and the window's edge set it apart */ transition:transform 240ms var(--ease-sheet),visibility 240ms} .demo.is-record .demo__scrim{opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease-out),visibility 0s} .demo.is-record .demo__drawer{transform:none;visibility:visible;transition:transform var(--dur-sheet) var(--ease-sheet),visibility 0s} /* the open record makes the rail inert: show it as disabled */ .demo__head,.demo__body,.demo__controls{transition:opacity var(--dur-fast) var(--ease-out)} .demo.is-record :is(.demo__head,.demo__body,.demo__controls){opacity:.4;transition-duration:var(--dur-base)} .demo__drawer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-16);padding:var(--space-24) var(--space-24) var(--space-8)} .demo__close{margin-right:calc(-1 * var(--space-8));font-weight:600} .demo__drawer-scroll{overflow-y:auto;overscroll-behavior:contain;padding:0 var(--space-24) var(--space-24);-webkit-overflow-scrolling:touch} .demo__drawer-scroll:focus-visible{outline-offset:-3px} .demo__drawer-sub,.demo__drawer-foot{font-size:var(--fs-14);line-height:1.25rem;color:var(--text-2)} .demo__log{margin-top:var(--space-16);list-style:none;padding:0} .demo__log li{display:grid;gap:4px;padding:var(--space-16) 0;box-shadow:inset 0 1px 0 var(--line);font-size:var(--fs-14);line-height:1.25rem;color:var(--text-2)} .demo__log li>span{font-variant-numeric:tabular-nums} .demo__log p:first-of-type{font-size:var(--fs-17);line-height:1.5625rem;color:var(--text-1);overflow-wrap:anywhere} .demo__log p+p{font-family:var(--font-mono)} .demo__drawer-foot{margin-top:var(--space-8);padding-top:var(--space-16);box-shadow:inset 0 1px 0 var(--line)} @media (min-width:64em){ .demo__scrim{position:absolute;grid-area:frame;inset:0 0 auto;z-index:1;height:var(--demo-frame-h);border-radius:var(--r-20)} .demo__drawer{position:absolute;grid-area:frame;top:0;bottom:auto;left:auto;right:0;z-index:2;width:400px;height:var(--demo-frame-h);max-height:none;border-radius:var(--r-20); transform:translateX(32px);opacity:0;transition:transform 240ms var(--ease-sheet),opacity var(--dur-fast) var(--ease-out),visibility 240ms} .demo.is-record .demo__drawer{transform:none;opacity:1;transition:transform var(--dur-sheet) var(--ease-sheet),opacity var(--dur-base) var(--ease-out),visibility 0s} } .pf{position:relative;padding:8px 8px 0;border-radius:var(--r-phone) var(--r-phone) 0 0;background:#000; box-shadow:inset 0 0 0 1px #505052,inset 0 0 0 3px #39393b} .pf-screen{position:relative;height:100%;overflow:hidden;border-radius:var(--r-phone-screen) var(--r-phone-screen) 0 0;background:var(--pi-bg);container-type:inline-size;isolation:isolate} .pf-root{position:absolute;inset:0;font-size:calc(100cqi * 17 / 390);line-height:1.3;letter-spacing:-.024em;color:var(--pi-ink); background:radial-gradient(24em 20em at 100% 0,rgb(0 107 216 / .09),transparent 70%)} .pf .dg{width:1.18em;height:1.18em} .pf-sb{position:absolute;inset:0 0 auto;z-index:4;display:flex;align-items:center;justify-content:space-between;height:3.3em;padding:0 1.75em 0 2.25em;font-weight:600;font-variant-numeric:tabular-nums} .pf-island{position:absolute;top:.66em;left:50%;width:7.3em;height:2.15em;margin-left:-3.65em;border-radius:999px;background:#000} .pf .pf-sb-icons{width:4.1em;height:.72em} .pf-app{position:absolute;inset:0;padding:3.5em 1.18em 0} .pf-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;height:2.6em} .pf-bar-title{text-align:center;font-weight:600} .pf-circle{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:999px;background:rgb(255 255 255 / .85);box-shadow:0 .1em .4em rgb(0 0 0 / .08)} .pf-circle.pf-accent{color:var(--pi-accent-text)} .pf-title{margin-top:1.2em;font-weight:600;line-height:1.3;text-wrap:balance} .pf-panes{display:grid;margin-top:1.1em} .pf-pane{grid-area:1 / 1;display:grid;gap:.94em;align-content:start;transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base)} .pf-pane:not(.is-on){opacity:0;visibility:hidden;transition-duration:var(--dur-fast)} .pf-q:not(.is-on){transition-duration:150ms;transition-delay:160ms} .pf[data-step="4"] .pf-p.is-on{transition-delay:150ms} .pf-card{padding:1.18em;border-radius:1.53em;background:var(--pi-card)} .pf-clar{box-shadow:inset 0 0 0 1px rgb(0 107 216 / .4),0 .5em 1.5em rgb(0 0 0 / .05)} .pf-jwn{display:flex;align-items:center;gap:.45em;font-size:1.18em;font-weight:600;letter-spacing:-.02em} .pf-jwn .dg{width:1.3em;height:1.3em} .pf-only{margin-top:.55em;font-size:.88em;color:var(--pi-ink2)} .pf-question{margin-top:.8em;font-weight:600} .pf-choice{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;min-height:3em;margin-top:.7em;padding:0 1.1em;border-radius:.94em; background:var(--pi-recessed);font-size:.94em;font-weight:600;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out)} .pf-choice::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#d5e3f4;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .pf-choice:active{transform:scale(.97);transition-duration:var(--dur-press)} .pf-ok{display:none;color:var(--pi-accent-text)} .pf[data-answer="1"] .pf-choice[data-n="1"],.pf[data-answer="2"] .pf-choice[data-n="2"]{color:var(--pi-accent-text)} .pf[data-answer="1"] .pf-choice[data-n="1"]::before,.pf[data-answer="2"] .pf-choice[data-n="2"]::before{opacity:1} .pf[data-answer="1"] .pf-choice[data-n="1"] :is(.pf-ok),.pf[data-answer="2"] .pf-choice[data-n="2"] .pf-ok{display:block} .pf[data-answer="1"] .pf-choice[data-n="1"] .pf-go,.pf[data-answer="2"] .pf-choice[data-n="2"] .pf-go{display:none} .pf-other{display:flex;align-items:center;justify-content:space-between;margin-top:.9em;font-size:.88em;color:var(--pi-accent-text);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out)} .pf-other:active{opacity:.6;transition-duration:var(--dur-press)} .pf-other .dg{color:var(--pi-ink)} .pf-capsule{display:flex;align-items:center;justify-content:center;gap:.5em;height:3.1em;border-radius:999px;font-weight:600} .pf-capsule--off{margin-top:.9em;background:#ebebf0;color:var(--pi-ink3)} .pf-row{display:flex;align-items:center;justify-content:space-between;padding:1.18em;border-radius:1.41em;color:var(--pi-accent-text);font-weight:600} .pf-row .dg{color:var(--pi-ink)} .pf-prog{display:grid;gap:1.1em;border-radius:1.65em} .pf-status{display:flex;align-items:center;gap:.45em;font-size:.88em;font-weight:600;color:var(--pi-accent-text)} .pf-ico{display:grid} .pf-more{margin-left:auto;color:var(--pi-accent-text)} .pf-chart{display:flex;align-items:center;gap:1.2em} .pf-donut{position:relative;display:grid;place-content:center;justify-items:center;flex:none;width:7.4em;height:7.4em} .pf-chart-svg{position:absolute;inset:0;width:100%;height:100%} .pf-chart-svg g{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .pf-chart-svg g.is-on{opacity:1} .pf-arc{fill:none;stroke-width:3.6;stroke-linecap:round} .pf-arc--c{stroke:#207d32}.pf-arc--w{stroke:#a05a00}.pf-arc--u{stroke:rgb(99 99 102 / .45)} .pf-pct{font-size:1.75em;line-height:1.1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .pf-pct-label{max-width:6.5em;font-size:.65em;line-height:1.15;font-weight:500;text-align:center;color:var(--pi-ink2);letter-spacing:0} .pf-legend{flex:1;display:grid;list-style:none;padding:0} .pf-legend li{display:flex;align-items:center;gap:.55em;min-height:2.3em;font-size:.7em;font-weight:500;letter-spacing:0} .pf-legend b{margin-left:auto;font-size:1.25em;font-weight:700;font-variant-numeric:tabular-nums} .pf-dot{flex:none;width:.66em;height:.66em;border-radius:999px} .pf-dot--c{background:#207d32}.pf-dot--w{background:#a05a00}.pf-dot--u{background:rgb(99 99 102 / .45)} .pf-reason{display:flex;gap:.45em;font-size:.88em;color:var(--pi-ink2)} .pf-next-k{font-size:.7em;font-weight:600;color:var(--pi-accent-text);letter-spacing:0} .pf-next-v{margin-top:.35em;font-size:.88em;color:var(--pi-ink2)} .pf-check{display:flex;align-items:center;gap:.4em;font-size:.7em;color:var(--pi-ink3);letter-spacing:0} .pf-check .dg{width:1.2em;height:1.2em} .pf-outcome{border-radius:1.41em;padding:1.41em} .pf-outcome-k{display:flex;align-items:center;gap:.45em;font-size:1.18em;font-weight:600} .pf-outcome-k .dg{color:var(--pi-accent-text)} .pf-outcome-v{margin-top:.9em} .pf-outcome-t{margin-top:.9em;font-size:.7em;color:var(--pi-ink3);letter-spacing:0} .pf-steps{border-radius:1.41em;padding:1.41em} .pf-steps-head{display:flex;align-items:baseline;justify-content:space-between;font-size:.7em;color:var(--pi-ink2);letter-spacing:0} .pf-steps-head b{font-size:1.43em;font-weight:600;color:var(--pi-ink);letter-spacing:-.02em} .pf-step{display:flex;align-items:center;gap:.82em;margin-top:.94em;padding:.82em;border-radius:1.06em;background:var(--pi-recessed);color:var(--pi-ink3)} .pf-mark{display:grid;place-items:center;flex:none;width:1.9em;height:1.9em;border-radius:999px;background:rgb(32 125 50 / .14);color:var(--pi-good)} .pf-step-body{flex:1;display:grid;gap:.3em;min-width:0} .pf-step-title{font-size:.88em;font-weight:600;letter-spacing:-.02em;color:var(--pi-ink)} .pf-step-state{font-size:.7em;color:var(--pi-good);letter-spacing:0} .pf-dim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#a9b4c6,#cfd6e1 40%);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .pf-dim.is-on{opacity:1;transition-duration:var(--dur-base)} .pf-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgb(0 0 0 / .2);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .pf-shade.is-on{opacity:1;transition-duration:var(--dur-enter);transition-delay:80ms} .pf-sheet{position:absolute;left:0;right:0;bottom:0;z-index:2;border-radius:2.2em 2.2em 0 0;transition:transform var(--dur-sheet) var(--ease-sheet),visibility var(--dur-sheet)} .pf-sheet:not(.is-on){transform:translateY(105%);visibility:hidden;transition-duration:240ms} .pf-ask{top:3.6em;padding:1em 1.18em 0;background:linear-gradient(#f6f7fa,#edf0f5);box-shadow:inset 0 1px 0 rgb(255 255 255 / .8)} .pf-ask:not(.is-on){transition-delay:160ms} .pf-ask-top{position:relative;display:flex;align-items:center;height:2.5em} .pf-glass{display:grid;place-items:center;height:2.5em;padding:0 1.1em;border-radius:999px;background:rgb(255 255 255 / .8);box-shadow:0 .15em .6em rgb(0 0 0 / .08);color:var(--pi-accent-text)} .pf-ask-name{position:absolute;left:0;right:0;text-align:center;font-weight:600;pointer-events:none} .pf-eyebrow{display:flex;align-items:center;gap:.5em;margin-top:1.6em;font-size:.76em;font-weight:600;letter-spacing:.06em;color:var(--pi-accent-text)} .pf-eyebrow .dg{width:1.1em;height:1.1em} .pf-ask-title{margin-top:.45em;font-size:2em;line-height:1.16;font-weight:700;letter-spacing:-.024em} .pf-field{position:relative;display:flex;flex-direction:column;min-height:8.6em;margin-top:1.1em;padding:1em 1.18em;border-radius:1.53em;background:var(--pi-card); box-shadow:inset 0 0 0 1px var(--pi-line);cursor:text} .pf-field-text{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .pf-field-ph{display:none;color:var(--pi-ink3)} .pf:not(.is-filled) .pf-field-text{display:none} .pf:not(.is-filled) .pf-field-ph{display:block} .pf-field-cap{margin-top:auto;padding-top:.8em;font-size:.76em;color:var(--pi-ink2)} .pf-deleg{position:relative;isolation:isolate;margin-top:1.1em;height:3.2em;background:#ebebf0;color:var(--pi-ink3);transition:transform var(--dur-fast) var(--ease-out)} .pf-deleg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pi-accent);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .pf.is-filled .pf-deleg{color:#fff} .pf.is-filled .pf-deleg::before{opacity:1} .pf[data-step="2"] .pf-deleg{cursor:pointer} .pf[data-step="2"] .pf-deleg:active{transform:scale(.97);transition-duration:var(--dur-press)} .pf-ring,.pw-ring{position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 2px var(--pi-accent);opacity:0;pointer-events:none} .pw-ring{box-shadow:0 0 0 2px var(--pw-accent)} .pf-swap,.pw-swap{display:grid} .pf-swap>*,.pw-swap>*{grid-area:1 / 1;text-align:center;transition:opacity var(--dur-fast) var(--ease-out)} .pf-swap>:not(.is-on),.pw-swap>:not(.is-on){opacity:0;transition-duration:100ms} .pf-swap>.is-on,.pw-swap>.is-on{transition-delay:60ms} /* the saving label must not widen the capsule's label (FR); the arrow goes while saving, as in the app */ .pf-deleg .pf-swap>:last-child{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap} .pf-deleg>.dg{transition:opacity var(--dur-fast) var(--ease-out)} .pf:not([data-step="1"],[data-step="2"]) .pf-deleg>.dg{opacity:0} .pf-foot{display:flex;gap:.6em;margin-top:.9em;padding:0 .3em;font-size:.76em;color:var(--pi-ink2)} .pf-foot .dg{color:var(--pi-accent-text)} .pf-review{top:3.6em;padding:.45em 1.18em 0;background:var(--pi-bg);box-shadow:0 -.1em 0 rgb(0 0 0 / .03),0 -.6em 2em rgb(0 0 0 / .14)} .pf-review.is-on{transition-duration:var(--dur-enter);transition-delay:80ms} .pf-grab{display:block;width:2.2em;height:.3em;margin:0 auto;border-radius:999px;background:#c7c7cc} .pf-review-top{position:relative;display:flex;align-items:center;height:2.6em} .pf-review-top b{position:absolute;left:0;right:0;text-align:center;font-weight:600;pointer-events:none} .pf-link{color:var(--pi-accent-text)} .pf-group{margin-top:.6em;padding:.2em 1em;border-radius:1.1em;background:var(--pi-card)} .pf-group>*{padding:.55em 0} .pf-group>*+*{box-shadow:inset 0 1px 0 var(--pi-line)} .pf-op{font-weight:600} .pf-group-k{margin:1em 1em 0;font-size:.76em;color:var(--pi-ink2);letter-spacing:0} .pf-group-k+.pf-group{margin-top:.4em} .pf-kv-k{display:block;font-size:.7em;color:var(--pi-ink2);letter-spacing:0} .pf-kv-v{margin-top:.2em;font-size:.88em;overflow-wrap:anywhere} .pf-clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .pw{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-20);background:var(--pw-canvas);color:var(--pw-ink); box-shadow:0 0 0 1px rgb(18 22 32 / .08);font-size:14px;line-height:1.5;letter-spacing:0} /* flat, as Apple sets product screens */ .pw .dg{width:16px;height:16px} .pw-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:40px;padding:0 16px;background:#e9ebef;box-shadow:inset 0 -1px 0 var(--pw-line2)} .pw-dots{display:flex;gap:8px} .pw-dots i{width:12px;height:12px;border-radius:999px;background:#c9ccd4} .pw-url{display:flex;align-items:center;gap:6px;height:26px;padding:0 14px;border-radius:8px;background:rgb(255 255 255 / .75);font-size:12px;color:var(--pw-ink2)} .pw-url .dg{width:12px;height:12px} .pw-view{position:relative;flex:1;min-height:0;overflow:hidden;container-type:inline-size} .pw-app{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%} .pw-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;background:var(--pw-panel);box-shadow:inset -1px 0 0 var(--pw-line2)} .pw-logo{display:grid;place-items:center;width:32px;height:32px;margin-bottom:12px;border-radius:8px;background:#e3eefb;color:var(--pw-accent);font-size:12px;font-weight:700} .pw-ri{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--pw-ink2)} .pw-ri .dg{width:20px;height:20px} .pw-ri.is-on{background:var(--pw-soft);color:var(--pw-ink)} .pw-main{display:flex;flex-direction:column;min-width:0} .pw-top{flex:none;display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;background:var(--pw-panel);box-shadow:inset 0 -1px 0 var(--pw-line2)} .pw-crumbs{display:flex;align-items:center;gap:6px;margin-right:auto;min-width:0;font-size:13px;color:var(--pw-ink2);white-space:nowrap} .pw-crumbs .dg{width:12px;height:12px} .pw-crumb3{display:flex;align-items:center;gap:6px} .pw-crumbs b{font-weight:600;color:var(--pw-ink)} .pw-seg{display:flex;padding:2px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--pw-line2);font-size:11px;font-weight:600;color:var(--pw-ink2)} .pw-seg span{padding:3px 8px;border-radius:999px} .pw-seg .is-on{background:var(--pw-ink);color:#fff} .pw-scroll{position:relative;flex:1;min-height:0;overflow:hidden} .pw-page{padding:20px 24px 40px} .pw-page.is-smooth,.is-smooth .pw-aside{transition:transform 300ms var(--ease-in-out)} .pw-back{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pw-ink2)} .pw-eyebrow{margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--pw-ink3)} .pw-h1{margin-top:6px;font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.02em;text-wrap:balance} .pw-grid{display:grid;gap:16px;margin-top:20px;align-items:start} @container (min-width:784px){.pw-grid{grid-template-columns:minmax(0,1fr) 208px}} .pw-col{display:grid;gap:16px;min-width:0} .pw-card,.pw-ops,.pw-aside{padding:20px;border-radius:16px;background:var(--pw-panel);box-shadow:inset 0 0 0 1px var(--pw-line)} .pw-ops,.pw-aside{border-radius:20px;box-shadow:inset 0 0 0 1px var(--pw-line2)} .pw-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .pw-card-t{font-size:18px;font-weight:600} .pw-pill{padding:5px 12px;border-radius:999px;background:var(--pw-soft);font-size:12px;font-weight:500;white-space:nowrap} .pw-pill--good{padding:4px 10px;line-height:16px;background:rgb(24 119 60 / .1);color:var(--pw-good)} .pw-sum{margin-top:16px;line-height:1.6;color:var(--pw-ink2)} .pw-act{margin-top:12px;font-weight:500} .pw-chk{margin-top:12px;font-size:12px;color:var(--pw-ink3)} .pw-box{margin-top:20px;padding:16px;border-radius:12px;background:var(--pw-soft)} .pw-box-t{font-weight:600} .pw-box ul{margin-top:10px;padding-left:20px;list-style:disc;color:var(--pw-ink)} .pw-plan{display:grid;gap:12px;margin-top:24px;list-style:none;padding:0} .pw-step{padding-left:16px;box-shadow:inset 2px 0 0 var(--pw-line)} .pw-step-t{font-weight:500} .pw-step-s{margin-left:8px;font-size:12px;font-weight:400;color:var(--pw-ink3)} .pw-step-r{margin-top:6px;line-height:1.6;color:var(--pw-ink2)} .pw-reply{margin-top:24px} .pw-reply-l{font-weight:500} .pw-field{height:78px;margin-top:8px;border-radius:12px;background:var(--pw-panel);box-shadow:inset 0 0 0 1px var(--pw-line)} .pw-reply .pw-btn{margin-top:12px;border:0;color:var(--pw-ink);font-weight:500;opacity:.5;cursor:default} .pw-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;background:var(--pw-panel); box-shadow:inset 0 0 0 1px var(--pw-line);font-weight:600;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)} .pw-btn--primary{background:var(--pw-accent);color:#fff;box-shadow:none;cursor:pointer} .pw-btn.pw-save{background:var(--pw-soft)} .pw-btn--primary:active{transform:scale(.97);transition-duration:var(--dur-press)} .pw-ops-t{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600} .pw-ops-t .dg{color:var(--pw-ink3)} .pw-op{margin-top:16px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--pw-line2);line-height:20px} .pw-op-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .pw-op-t{font-weight:600} .pw-kv{display:grid;gap:8px;margin-top:12px} .pw-kv dt{font-size:12px;line-height:16px;color:var(--pw-ink3)} .pw-kv dd{margin:4px 0 0;color:var(--pw-ink2);overflow-wrap:anywhere} .pw-receipt{margin-top:16px;padding:12px;border-radius:8px;background:rgb(24 119 60 / .05);box-shadow:inset 0 0 0 1px rgb(24 119 60 / .2)} .pw-receipt-k{display:flex;align-items:center;gap:8px;font-weight:500} .pw-receipt-k .dg{color:var(--pw-good)} .pw-receipt-id,.pw-receipt-c{margin-top:8px;font-size:12px;line-height:16px;color:var(--pw-ink2)} .pw-receipt-c{color:var(--pw-ink3)} .pw-aside-t{font-size:16px;font-weight:600} .pw-tl{display:grid;gap:12px;margin-top:16px;list-style:none;padding:0} .pw-tl li{padding-left:12px;box-shadow:inset 1px 0 0 var(--pw-line);font-size:12px} .pw-tl-k{font-weight:500;color:var(--pw-ink2)} .pw-tl-t{margin-top:4px;color:var(--pw-ink3)} .pw-scrim{position:absolute;inset:0;background:rgb(20 25 40 / .32);opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease-out) 200ms,visibility var(--dur-fast) 200ms} .pw-scrim.is-on{opacity:1;visibility:visible;transition-duration:var(--dur-base);transition-delay:0ms} .pw-modal{position:absolute;top:64px;left:0;right:0;width:min(520px,100% - 48px);margin:0 auto;padding:24px;border-radius:20px;background:var(--pw-panel); box-shadow:0 24px 70px rgb(20 25 40 / .16),0 0 0 1px rgb(20 25 40 / .06);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base)} .pw-modal:not(.is-on){opacity:0;transform:scale(.98);visibility:hidden;transition-duration:var(--dur-fast);transition-delay:200ms} .pw-modal-head{display:flex;align-items:center;justify-content:space-between} .pw-modal-t{font-size:18px;font-weight:600} .pw-x{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--pw-ink2)} .pw-ta{min-height:134px;margin-top:16px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--pw-line);line-height:1.6;cursor:text} .pw-ta-text{white-space:pre-wrap;overflow-wrap:anywhere} .pw-ta-ph{display:none;color:var(--pw-ink3)} .pw:not(.is-filled) .pw-ta-text{display:none} .pw:not(.is-filled) .pw-ta-ph{display:block} .pw-modal-foot{display:flex;justify-content:flex-end;margin-top:16px} .pw-save{isolation:isolate;background:var(--pw-soft);color:var(--pw-ink3)} .pw-save::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pw-accent);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)} .pw.is-filled .pw-save{color:#fff} .pw.is-filled .pw-save::before{opacity:1} @media (prefers-reduced-motion:reduce){ .demo *,.demo *::before,.demo *::after{transition-property:opacity!important;transition-duration:var(--dur-reduced)!important; transition-delay:0ms!important;transition-timing-function:linear!important} .demo :is(.demo__drawer,.demo__scrim,.pf-sheet,.pf-pane,.pw-modal,.pw-scrim){transition-property:opacity,visibility!important} .demo .pf-sheet:not(.is-on){transform:none;opacity:0} .demo .demo__drawer{transform:none;opacity:0} .demo.is-record .demo__drawer{opacity:1} .demo.is-record :is(.demo__drawer,.demo__scrim){transition-duration:var(--dur-reduced),0s!important} .demo .pw-modal:not(.is-on){transform:none} .demo :is(.demo__chip,.demo__btn,.demo__answer,.demo__navbtn,.demo__free-go,.pf-choice,.pf-deleg,.pw-btn):active{transform:none} } /* Forced colours drop box-shadow edges: give the rail's controls and the record a real border; the frame is a picture */ @media (forced-colors:active){ :is(.demo__chip,.demo__btn,.demo__answer,.demo__free-input,.demo__input,.demo__drawer){border:1px solid ButtonText} .demo__frame{forced-color-adjust:none} } /* 12c. Landing page (src/pages/{en,fr}/index.html). One idea per section: the hero and its week, the "Try the concierge" band, the problem, how it works, control and safety, iPhone and web, the price, the questions, the company. Apple's white and #f5f5f7: the sections alternate the two, tiles are flat (white on grey, grey on white), and colour appears only where it means something (the one loud button, links, the decision, the active step). */ /* Hero (hero/final-white, measured): centred, the headline capped so its longest word never breaks, the call to action above the fold at 390x844 and 1440x900 in both languages. Nothing animates on load. */ .hero{position:relative;isolation:isolate;overflow:hidden;padding:var(--space-56) 0 var(--space-72);background:var(--bg);color:var(--text-1);text-align:center} .hero__inner{display:flex;flex-direction:column;align-items:center} .hero__eyebrow{max-width:61.25rem;font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2);text-wrap:balance} .hero__what{color:var(--text-1);font-weight:600} @media (max-width:47.99em){.hero__eyebrow>span{display:block}} @media (min-width:48em){.hero__eyebrow{font-size:var(--fs-17);line-height:1.3125rem}} /* Apple's hero line above the headline: 17/21 */ .hero__title{max-width:61.25rem;margin-top:var(--space-16);color:var(--text-1);overflow-wrap:anywhere} .hero__title>span{display:block} /* At 200% text on a phone the size steps down instead of splitting "decision / s.": the longest word (EN "decisions." 4.21em, FR "démarches." 4.94em) is capped to the column. At default sizes the cap never binds. */ @supports (width:1cqi){ .hero__inner{container-type:inline-size} .hero__title{--display-em:4.4;font-size:min(var(--fs-display),100cqi / var(--display-em))} .hero__title:lang(fr){--display-em:5.1} } @media (max-width:29.99em){.hero__title{max-width:8em}} /* four even lines on a phone */ .hero__lead{max-width:55rem;margin-top:var(--space-16);font-size:clamp(1.1875rem,1.0098rem + .7289vw,1.5rem);line-height:calc(1em + .25rem); font-weight:600;letter-spacing:var(--tr-21);color:var(--text-1);text-wrap:balance} /* Apple's hero intro: ink, 19/23 on phones, 24/28 from 1076 */ .hero__lead .nowrap{display:inline-block;white-space:normal} /* at 320 and 200% text a nowrap phrase would widen the lead past the hero */ .hero__actions{width:100%;margin-top:var(--space-32);display:flex;flex-direction:column;align-items:center;gap:var(--space-8)} @media (min-width:48em){ .hero__actions{flex-direction:row;justify-content:center;gap:var(--space-16)} /* 16 after the pill, as .actions and Apple's (17) */ /* Optical centring: the chevron's side bearing is empty space on the right of the pair. */ .hero__demo{margin-right:-3px} } @media (min-width:48em) and (max-width:63.99em){.hero__lead{max-width:28em}} @media (min-width:64em){ .hero{padding-top:var(--space-64)} .hero__title{margin-top:var(--space-24)} .hero__lead{max-width:36em;margin-top:var(--space-24)} .hero__actions{margin-top:var(--space-40)} } @media (min-width:80em){.hero{padding-top:var(--space-48)}} @media (max-width:22.49em){.hero{padding-top:var(--space-32)}.hero__actions{margin-top:var(--space-24)}} /* under 360px (a 568-high phone) the pill ends inside the first view in both languages */ .nowrap-md{white-space:normal} @media (min-width:48em){.nowrap-md{white-space:nowrap}} /* The down chevron hints where the link goes. */ /* The week: one request from Monday to Thursday, as white tiles on a solid #f5f5f7 band that runs from just above the caption to the hero's straight lower edge, as Apple sets tiles; painted behind the hero's content. */ .loop{position:relative;width:100%;margin-top:80px;padding-top:var(--space-24)} /* the band edge sits 56 under the hero's actions (Apple One at 390: 78), and its caption 48 inside it */ .loop::before{content:"";position:absolute;z-index:-1;top:calc(-1 * var(--space-24));bottom:calc(-1 * var(--space-72));left:50%;width:100vw;margin-left:-50vw; background:var(--tile)} .loop__note{max-width:46rem;margin:0 auto var(--space-24);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2);text-wrap:balance} @media (max-width:47.99em){.loop__note{text-align:left}} /* aligned with the left-aligned panel under it */ .loop__flag{color:var(--text-1);font-weight:600} .loop__list{display:grid;text-align:left;list-style:none;padding:0} .loop__item{position:relative} .loop__when{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2);font-variant-numeric:tabular-nums} .loop__time{display:block} .loop__dot{display:none} .loop__clock{color:var(--text-1)} .loop__title{font-size:var(--fs-17);line-height:var(--lh-17);font-weight:600;color:var(--text-1)} .loop__text{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2);text-wrap:pretty} .loop__meta{margin-top:var(--space-8);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2);text-wrap:pretty} .loop__addr{display:inline-block;overflow-wrap:anywhere} /* The decision: the only coloured card, its text the product's own question. The opening quote hangs in the margin. */ .loop__item--yours .loop__title{color:var(--accent)} .loop__item--yours .loop__text{color:var(--text-1)} .loop__item--yours .loop__text:lang(en){text-indent:-.45em} /* Below 80em: one white panel, a compact list. Panel 20, padding 8, row 12 (20 minus 8). */ @media (max-width:79.99em){ .loop{max-width:40rem} .loop__list{padding:var(--space-8);border-radius:28px;background:var(--bg)} /* Apple's phone tile: white, radius 28, flat */ .loop__item{padding:var(--space-16);border-radius:20px} /* 28 minus the 8 inset */ .loop__item+.loop__item::before{content:"";position:absolute;left:var(--space-16);right:var(--space-16);top:0;height:1px;background:var(--line)} .loop__title{margin-top:var(--space-8)} .loop__item--yours{box-shadow:inset 0 0 0 1px var(--accent-line)} .loop__item--yours::before{display:none} } /* From 30em the rows gain a time column, like a schedule. */ @media (min-width:30em) and (max-width:79.99em){ .loop__item{display:grid;grid-template-columns:5rem minmax(0,1fr);column-gap:var(--space-16)} .loop__when{grid-row:1 / span 3;padding-top:2px} .loop__time+.loop__time{margin-top:var(--space-8)} .loop__day,.loop__clock{display:block} .loop__title{margin-top:0} .loop__title,.loop__text,.loop__meta{grid-column:2} } @media (min-width:64em){.loop{margin-top:104px}} /* band edge 80 under the actions, twice the air above them (Apple One at 1440: 106) */ /* From 80em: four white cards across the container, a rail above them: a 7px dot over each card's text edge on a 1px line; past moments are quiet grey, only the decision's dot is blue. The two follow-up times share one line, so every title in the row sits on the same line, and each card's quiet last line is anchored to its foot. */ @media (min-width:80em){ .loop__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-16);padding-top:var(--space-24)} .loop__item{display:flex;flex-direction:column;padding:var(--space-24);border-radius:18px;background:var(--bg)} /* Apple's tile: white, radius 18, flat */ .loop__item::before{content:"";position:absolute;z-index:1;left:calc(var(--space-24) - 3px);top:calc(-1 * var(--space-24) - 3px);width:7px;height:7px;border-radius:50%;background:#86868b} /* Apple's grey, 3.62:1 */ .loop__item::after{content:"";position:absolute;left:calc(var(--space-24) + 4px);top:calc(-1 * var(--space-24));width:calc(100% + var(--space-16) - 4px);height:1px;background:rgb(18 22 32 / .14)} .loop__item:last-child::after{display:none} .loop__time{display:inline} .loop__dot{display:inline;color:var(--text-2)} .loop__title{margin-top:var(--space-16);font-size:var(--fs-21);line-height:var(--lh-21);letter-spacing:var(--tr-21)} .loop__text{margin-top:var(--space-8)} .loop__meta{margin-top:auto;padding-top:var(--space-8)} .loop__item--yours{box-shadow:0 0 0 1px var(--accent-line)} .loop__item--yours::before{background:var(--accent)} } @media (prefers-contrast:more){ .hero__eyebrow,.loop__note,.loop__when,.loop__text,.loop__meta{color:var(--text-1)} .loop__item--yours{box-shadow:inset 0 0 0 2px var(--accent)} } @media (prefers-contrast:more) and (max-width:79.99em){.loop__list{box-shadow:inset 0 0 0 1px var(--line-ui)}} @media (prefers-contrast:more) and (min-width:80em){.loop__item{box-shadow:inset 0 0 0 1px var(--line-ui)}.loop__item--yours{box-shadow:inset 0 0 0 2px var(--accent)}} @media (forced-colors:active){ .loop__item::before,.loop__item::after{background:CanvasText} .loop__item--yours::before{background:Highlight} } @media (forced-colors:active) and (max-width:79.99em){.loop__list{border:1px solid CanvasText}.loop__item--yours{border:2px solid CanvasText}} @media (forced-colors:active) and (min-width:80em){.loop__item{border:1px solid CanvasText}.loop__item--yours{border-width:2px}} /* "Try the concierge": white again after the week's straight edge, one hairline, no fade. The demo partial sits inside. */ .try{padding-block:var(--space-72);background:var(--bg)} /* the tone change from the #f5f5f7 band is the edge, as on Apple's pages */ @media (min-width:64em){.try{padding-block:var(--space-96)}} /* The problem: three moments of a week of chasing, set as a timetable on #f5f5f7. Narrative, not claims. */ .moments__for{font-size:1.1875rem;line-height:calc(1em + .25rem);letter-spacing:var(--tr-21);font-weight:600;color:var(--text-2)} .moments__head>.t-title{margin-top:12px} @media (min-width:64em){.moments__for{font-size:1.3125rem}.moments__head>.t-title{margin-top:10px}} .moments__list{margin-top:var(--space-32);list-style:none;padding:0;box-shadow:inset 0 -1px 0 var(--line-strong)} .moments__item{padding-block:var(--space-24);box-shadow:inset 0 1px 0 var(--line-strong)} .moments__when{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums} .moments__text{margin-top:var(--space-8);font-size:var(--fs-17);line-height:var(--lh-17);letter-spacing:0;color:var(--text-1)} /* Apple's item copy: 17/25 on phones */ @media (min-width:48em){.moments__text{font-size:var(--fs-21);line-height:calc(1em + .5rem);letter-spacing:var(--tr-21)}} /* 21/29 from 48em */ .moments__turn{margin-top:var(--space-32);max-width:27em;font-size:1.5rem;line-height:calc(1em + .25rem);letter-spacing:-.0045em;font-weight:600;text-wrap:balance} /* Apple's 24/28 on phones */ @media (min-width:64em){ .moments__head{max-width:61.25rem} .moments__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-48);margin-top:var(--space-64);box-shadow:inset 0 1px 0 var(--line-strong)} .moments__item{padding-block:var(--space-32) 0;box-shadow:none} .moments__turn{margin-top:var(--space-48);font-size:1.75rem;letter-spacing:-.007em} /* 28/32, 48 below the moments, at most 756 wide (step-3 nit B7) */ } /* How it works. Phones: the five steps in full, then the illustrative request card in its finished state, as Apple keeps its tiles on phones. From 64em the card is pinned beside the steps (position sticky, no scroll listener, no scroll-jacking) and fills in as each step crosses the middle of the view (js/lorne.js, [data-pin]). The card is aria-hidden: the steps are the content. */ .how__steps{list-style:none;padding:0} .how__step{padding-block:var(--space-24)} .how__step+.how__step{box-shadow:inset 0 1px 0 var(--line)} /* rules between rows only, none under the headline */ .how__num{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums} /* grey, as Apple's labels: blue means a link */ .how__title{margin-top:var(--space-8);font-size:var(--fs-21);line-height:1.5625rem;letter-spacing:var(--tr-21)} /* Apple's 21/25 on phones */ .how__text{margin-top:var(--space-8);max-width:34em;color:var(--text-2)} .how__aside{margin-top:var(--space-48)} @media (max-width:63.99em){ .how__foot{margin-top:var(--space-48)} .pin-card__head{flex-wrap:wrap} .pin-card .pin-card__state>span{white-space:normal} /* the state's label wraps at 200% text instead of widening the card; (0,2,1) so it beats the base rule below */ } .how__foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-24);padding-top:var(--space-24);box-shadow:inset 0 1px 0 var(--line)} .how__record{font-weight:600} @media (min-width:64em){ .how__grid{display:grid;grid-template-columns:minmax(0,1fr) 22.5rem;grid-template-areas:"head head" "steps aside" "foot aside";column-gap:var(--space-64);row-gap:0} .how__head{grid-area:head} .how__steps{grid-area:steps;margin-top:var(--space-72)} .how__step{min-height:max(16rem,36vh);padding-block:var(--space-32);transition:color .32s cubic-bezier(.4,0,.6,1)} .how__title{font-size:1.75rem;line-height:2rem;letter-spacing:-.007em} /* Apple's 28/32 subhead */ .how__title,.how__num{transition:color .32s cubic-bezier(.4,0,.6,1)} /* Apple's colour change */ .how__step+.how__step,.how__foot{box-shadow:none} /* the steps are separated by space alone, as Apple's articles; phones keep their rules */ .how__foot{grid-area:foot} .how__aside{display:block;grid-area:aside;align-self:start;position:sticky;top:calc(var(--nav-h) + var(--space-16));margin-top:var(--space-72)} /* flush under the bar, as Apple pins */ .how[data-pin-ready] .how__step:not(.is-active) .how__num{color:var(--text-3)} .how[data-pin-ready] .how__step:not(.is-active) .how__title{color:var(--text-2)} /* a heading is never lighter than its own copy, as Apple's */ .how[data-pin-ready] .how__step.is-active .how__num{color:var(--text-1)} } @media (min-width:80em){.how__grid{grid-template-columns:minmax(0,1fr) 27.5rem;column-gap:var(--space-96)}} /* The card: Apple's #f5f5f7 tile, flat. Rows done so far carry a blue check; the rest wait in a #86868b ring. */ @media (min-width:64em) and (max-height:50em){.how .pin-card{padding:var(--space-24)}.pin-card :is(.pin-card__title,.pin-card__rows){margin-top:var(--space-16)}} /* short laptop screens */ .pin-card{padding:var(--space-32);border-radius:18px;background:var(--tile)} /* Apple's tile on a white section: #f5f5f7, flat */ @media (prefers-contrast:more){.pin-card{box-shadow:inset 0 0 0 1px var(--line-ui)}} .pin-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)} .pin-card__kicker{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--text-2)} .pin-card__state{display:grid;justify-items:end} .pin-card__state>span{grid-area:1 / 1;display:inline-flex;align-items:center;gap:var(--space-8);min-height:32px;padding:6px var(--space-16);border-radius:var(--r-pill); background:var(--bg);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--text-1);white-space:nowrap; opacity:0;transition:opacity .12s cubic-bezier(.4,0,.6,1)} /* the outgoing state leaves first, in 120ms */ .pin-card__state>span::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--r-pill);background:var(--accent)} .pin-card__state>[data-at="5"]{opacity:1} .pin-card__title{margin-top:var(--space-24);font-size:var(--fs-21);line-height:1.5625rem;letter-spacing:var(--tr-21);font-weight:600;text-wrap:balance} .pin-card__rows{margin-top:var(--space-24);list-style:none;padding:0} .pin-card__row{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:var(--space-16);padding-block:var(--space-16);box-shadow:inset 0 1px 0 #d2d2d7} /* Apple's divider */ .pin-card__row:last-child{padding-bottom:0} .pin-card__mark{position:relative;grid-row:span 2;width:20px;height:20px;margin-top:2.5px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--field-edge)} /* Apple's neutral #86868b, as the fields: 3.33 on the tile */ @media (prefers-contrast:more){.pin-card__mark{box-shadow:inset 0 0 0 1.5px var(--line-ui)}} .pin-card__mark::before,.pin-card__mark::after{content:"";position:absolute;inset:0;border-radius:inherit;transition:opacity .24s ease,transform .24s ease} .pin-card__mark::before{background:var(--accent)} .pin-card__mark::after{background:#ffffff;-webkit-mask:url("/img/icons/check.svg?v=1") center/14px no-repeat;mask:url("/img/icons/check.svg?v=1") center/14px no-repeat} .pin-card__label{color:var(--text-1);transition:color .32s cubic-bezier(.4,0,.6,1)} .pin-card__meta{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2);transition:color .32s cubic-bezier(.4,0,.6,1)} @media (min-width:64em){ /* the card fills in step by step only where it is pinned beside the steps */ .how[data-pin-ready] :is(.pin-card[data-step="1"] [data-at="1"],.pin-card[data-step="2"] [data-at="2"],.pin-card[data-step="3"] [data-at="3"], .pin-card[data-step="4"] [data-at="4"],.pin-card[data-step="5"] [data-at="5"]){opacity:1;transition:opacity .24s cubic-bezier(.4,0,.6,1) .12s} /* the incoming one arrives once it has gone: no two pills at once */ .how[data-pin-ready] .pin-card:not([data-step="5"]) .pin-card__state>[data-at="5"]{opacity:0} .how[data-pin-ready] :is(.pin-card[data-step="1"] .pin-card__row:nth-child(n+2),.pin-card[data-step="2"] .pin-card__row:nth-child(n+3), .pin-card[data-step="3"] .pin-card__row:nth-child(n+4),.pin-card[data-step="4"] .pin-card__row:nth-child(n+5)) :is(.pin-card__label,.pin-card__meta){color:var(--text-3)} .how[data-pin-ready] :is(.pin-card[data-step="1"] .pin-card__row:nth-child(n+2),.pin-card[data-step="2"] .pin-card__row:nth-child(n+3), .pin-card[data-step="3"] .pin-card__row:nth-child(n+4),.pin-card[data-step="4"] .pin-card__row:nth-child(n+5)) .pin-card__mark::before, .how[data-pin-ready] :is(.pin-card[data-step="1"] .pin-card__row:nth-child(n+2),.pin-card[data-step="2"] .pin-card__row:nth-child(n+3), .pin-card[data-step="3"] .pin-card__row:nth-child(n+4),.pin-card[data-step="4"] .pin-card__row:nth-child(n+5)) .pin-card__mark::after{opacity:0;transform:scale(.8)} } .how__label{margin-top:var(--space-16)} @media (forced-colors:active){.pin-card{border:1px solid CanvasText}.pin-card__mark::before{background:CanvasText}.pin-card__mark::after{background:Canvas}} /* Control and safety: the frame in six rules, then where information goes and how access works, as two sheets. */ .control__rules{display:grid;gap:var(--space-32);list-style:none;padding:0} /* Each rule as Apple's icon card (privacy): a 40px icon in ink above the title, 16px between them. */ .control__rule{display:block} .control__rule>.icon{display:block;width:40px;height:40px;margin-bottom:var(--space-16);color:var(--text-1)} .control__title{font-size:var(--fs-21);line-height:calc(1em + .25rem);letter-spacing:var(--tr-21)} /* Apple's icon-card headline: 21/25 */ :is(.control__doc,.places__card) .card__title{line-height:calc(1em + .25rem)} @media (min-width:64em){:is(.control__doc,.places__card) .card__title{font-size:1.75rem;line-height:2rem;letter-spacing:-.007em}} /* Apple's text-tile headline: 28/32 */ .control__text{margin-top:var(--space-8);color:var(--text-2);line-height:calc(1em + .25rem)} /* Apple's icon-card copy: 17/21 */ @media (min-width:48em){.control__rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-40) var(--space-32)}} @media (min-width:64em){.control__rules{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-48)}} .control__docs{display:grid;gap:var(--space-24);margin-top:var(--space-48)} /* Apple's 24px between tiles */ @media (min-width:48em){.control__docs{gap:var(--space-24)}} @media (min-width:64em){.control__docs{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;margin-top:var(--space-64)}} /* tiles in a row share a height, as Apple's */ .control__doc{min-width:0;padding:50px 40px} /* Apple's tile interior, as .places__card: 50/40, 60/70 from 80em; min-width:0 holds a long French word at 200% text */ @media (min-width:80em){.control__doc{padding:60px 70px}} .control__where{margin-top:var(--space-16);list-style:none;padding:0;color:var(--text-2)} .control__where li{padding-block:var(--space-16);box-shadow:inset 0 1px 0 #d2d2d7} /* Apple's divider */ .control__where li:last-child{padding-bottom:0} .control__more{margin-top:var(--space-32)} /* iPhone and web: the web app first, in a browser window, then the iPhone app. The window shows the top of a real capture (crop at 448 of 900, above any fixture sentence); below 48em the view is 4:3 and shows the workspace menu. */ .places__wrap{container-type:inline-size} .places__stage{display:block} /* Apple's device tile (icloud): one #f5f5f7 tile, radius 18, flat. From 48em the browser window runs off the tile's right edge and the iPhone stands in front of it, cut by the tile's bottom edge; on phones the window runs off the right edge and the iPhone sits centred below it, cut by the bottom edge, so nothing covers the window. */ .places__tile{--phone-w:min(15rem,70cqi);position:relative;overflow:hidden;padding:24px 0 0 24px;border-radius:18px;background:var(--tile)} .places__tile .window{border-radius:20px 0 0 20px} .places__tile .window__bar{background:var(--bg)} .places .window__address{max-width:100%;background:var(--tile)} /* Apple's two light surfaces; held inside the bar at 200% text */ .places .window__view{background:var(--bg)} .places .window{box-shadow:none} /* Apple sets devices flat: no drop shadows */ .places .phone{box-shadow:inset 0 0 0 1px #505052,inset 0 0 0 3px #39393b} /* on the tile: the rim without the outer ring */ .places__phone{display:flex;justify-content:center;margin:24px 24px calc(var(--phone-w) * -.62) 0} .places__phone .phone{--w:var(--phone-w)} .places__caption{margin-top:var(--space-16);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2)} .places__cards{display:grid;gap:var(--space-24);margin-top:var(--space-32);list-style:none;padding:0} .window--shell .window__view{aspect-ratio:4 / 3} .window--shell .window__view img{object-fit:cover;object-position:left top} .places__card{padding:50px 40px} /* Apple's tile interior: 50/40 on phones, 60/70 from 80em */ @media (min-width:80em){.places__card{padding:60px 70px}} .places__card>.icon{display:block;width:40px;height:40px;color:var(--text-1)} /* Apple's icon card: a 40px glyph in ink */ .places__card>.card__title{margin-top:var(--space-16)} .places__facts{margin-top:var(--space-8);list-style:none;padding:0;color:var(--text-2)} .places__more{margin-top:var(--space-8)} @media (min-width:48em){ .places__tile{--phone-w:min(300px,26cqi);padding:60px 0 0 70px} .places__tile .window{width:127.5%;border-radius:20px 0 0 0} .places__phone{position:absolute;right:70px;bottom:calc(var(--phone-w) * -.78);margin:0} .window--shell .window__view{aspect-ratio:1440 / 448} .places__cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-48)} } /* Price: the statement on the left, the limits as one sheet on the right, in plain numbers. Nothing moves. */ .price__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32)} .price__head>*+*{margin-top:var(--space-16)} .price__caps{padding:var(--space-16) var(--space-32)} /* Apple's tile interior */ .price__row{display:grid;gap:var(--space-8);padding-block:var(--space-16);box-shadow:inset 0 1px 0 var(--line)} .price__row:first-child{box-shadow:none} .price__row dt{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--text-1)} /* Apple's compare labels are in ink */ .price__row dd{margin:0} .price__note{margin-top:var(--space-24);font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-2)} .price__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-24);margin-top:var(--space-32)} @media (min-width:48em){ .price__caps{padding:var(--space-24) var(--space-40)} .price__row{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-24);align-items:baseline;padding-block:var(--space-24)} /* Apple's compare-table air */ } @media (min-width:64em){ /* one centred headline over one centred sheet, as Apple sets a price: a 72px title has no room in a side column */ .price__grid{justify-items:center;gap:var(--space-48)} /* the page's header-to-content step from 64em */ .price__head{max-width:var(--measure);text-align:center} .price__head>.lead{margin-top:var(--space-24);margin-inline:auto} .price__body{width:min(100%,760px)} .price__actions{justify-content:center} .price__note{text-align:center;text-wrap:balance} /* centred copy breaks into even lines, never one word alone */ .price__caps{border-radius:28px} /* Apple's compare-table tile; phones keep the 18 tile radius */ } /* Questions: one centred heading over one list, in the 980 text column, as Apple sets its questions. */ .faqs__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);width:min(100% - 2 * var(--gutter),var(--measure))} .faqs__head{text-align:center} .faqs__more{margin-top:var(--space-16)} @media (min-width:64em){.faqs__grid{gap:var(--space-48)}} /* The questions page nests its grids in a container: one gutter, one centred 980 column, centred head. */ .container>.faqs__grid{width:min(100%,var(--measure));margin-inline:auto} .container>.section-head:has(~.faqs__grid){margin-inline:auto;text-align:center} .container>.section-head:has(~.faqs__grid)>.lead{margin-inline:auto;text-wrap:balance} /* The last call to action, and the company behind it. */ .final__inner{display:flex;flex-direction:column;align-items:center;text-align:center} .final__inner>.t-title,#start .section-head>.t-title{max-width:15em;margin-inline:auto} #start .section-head{max-width:none} @media (max-width:47.99em){#start .actions--stack{flex-direction:column;gap:var(--space-8)}} /* the closing block spaces its actions the same on every page */ @media (min-width:64em){#start .section-head>.lead+.actions{margin-top:var(--space-40)}} #start .lead{font-size:clamp(1.1875rem,.979rem + .857vw,1.75rem);line-height:calc(1em + .25rem);font-weight:400;letter-spacing:-.007em;color:var(--text-1)} /* Apple's tile subhead: 28/32 regular, 19/23 on phones */ #start{padding-block:var(--space-96)} /* Apple gives its closing section the most air (privacy: 180) */ @media (min-width:64em){#start{padding-block:176px}} .final__lead{max-width:min(100%,36em);margin-top:var(--space-16);margin-inline:auto;text-wrap:balance} /* a centred flex item: capped, so an address breaks at 200% text */ .final__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);width:100%;margin-top:var(--space-32)} @media (min-width:48em){ .final__actions{flex-direction:row;justify-content:center;gap:var(--space-16)} } @media (min-width:64em){.final__lead{margin-top:var(--space-24)}.final__actions{margin-top:var(--space-40)}} .company{display:flex;flex-direction:column;align-items:center;width:100%;max-width:47.5rem;margin-top:var(--space-64);padding-top:var(--space-48);box-shadow:inset 0 1px 0 rgba(0,0,0,.16)} /* Apple's rule */ .company__faces{display:flex;gap:var(--space-16);list-style:none;padding:0} /* side by side, as Apple shows people: no overlap, no ring */ .company__faces img{width:48px;height:48px;border-radius:var(--r-pill);background:var(--bg-inset)} .company__line{margin-top:var(--space-16);font-weight:600;text-wrap:balance} .company__names{margin-top:var(--space-8);list-style:none;padding:0;font-size:var(--fs-14);line-height:var(--lh-14);color:var(--text-3)} /* Apple's caption grey: 5.09:1 on the band */ @media (prefers-contrast:more){.company__names{color:var(--text-2)}} .company__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-24);max-width:100%;margin-top:var(--space-16)} .company__links>.link{max-width:100%} /* row and link capped: the address breaks inside the screen at 200% text */ @media (min-width:48em){ .company__names{display:flex;flex-wrap:wrap;justify-content:center} .company__names li+li::before{content:"·";content:"·" / "";margin-inline:var(--space-8)} } /* 12d. How it works (src/pages/{en,fr}/how-it-works.html): the rules behind each step. Numbered rows between hairlines. From 64em the number and title sit in a column beside the statements (4 to 8, as the questions on the home page), and the title shares its first baseline with the first statement. The record section (.split--4-8) puts its 72px title on its own row, then its text in the same column as .rules__body, on the same edge. */ .rules{list-style:none;padding:0;box-shadow:inset 0 -1px 0 var(--line)} .rules__item{display:grid;grid-template-columns:minmax(0,1fr);padding-block:var(--space-32);box-shadow:inset 0 1px 0 var(--line)} .rules__num{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums} /* grey, as .how__num */ .rules__title{margin-top:var(--space-8);font-size:var(--fs-21);line-height:var(--lh-21);letter-spacing:var(--tr-21)} .rules__body{max-width:34em;color:var(--text-2)} .rules__body>*+*{margin-top:var(--space-16)} .rules__item>.rules__body{margin-top:var(--space-16)} @media (min-width:64em){ .rules__item{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"num ." "title body";column-gap:var(--space-64); align-items:baseline;padding-block:var(--space-48)} .rules__num{grid-area:num} .rules__title{grid-area:title;font-size:1.75rem;line-height:2rem;letter-spacing:-.007em} /* Apple's 28/32 */ .rules__item>.rules__body{grid-area:body;margin-top:0} .split--4-8{grid-template-columns:minmax(0,4fr) minmax(0,8fr);row-gap:var(--space-48)} .split--4-8>:first-child{grid-column:1 / -1} /* the 72px title takes its own row, so no word breaks inside */ .split--4-8>:last-child{grid-column:2} /* the text keeps the rules' text edge */ } /* 12e. iPhone and web page (src/pages/{en,fr}/app.html): two iPhone captures. Phones: one under another, centred, 240px. From 48em: one 280px track per phone, the pair centred 64 apart, as Apple sets a pair of devices (the frame scales with its figure through container units). */ .shots{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48)} .shots>.shot{justify-self:center} @media (min-width:48em){ .shots{grid-template-columns:repeat(auto-fit,minmax(0,280px));justify-content:center;column-gap:var(--space-64)} /* one 280 track per phone, the pair centred */ .shots>.shot{justify-self:start;width:100%;max-width:280px;container-type:inline-size} .shots .phone{--w:100cqi} } /* 13. Motion and reveal */ /* Reveal at Apple's editorial pace (macbook-air): opacity over 500ms linear, a 10px rise over 840ms ease, 80ms between items of a group. lorne.js sets html.reveal-ready only when it can observe, and never hides what is already on screen. Opacity only hides from the eye: screen readers and axe still read every revealed element. */ .reveal-ready [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(10px)} .reveal-ready [data-reveal]{transition:opacity 500ms linear,transform 840ms ease} .reveal-ready [data-reveal-group]>[data-reveal]:nth-child(3n+2){transition-delay:80ms} .reveal-ready [data-reveal-group]>[data-reveal]:nth-child(3n){transition-delay:160ms} @media (min-width:48em) and (max-width:63.99em){ /* these three-column groups sit in two columns here: left, then right, in every row */ .reveal-ready :is(.control__rules,.features--3)>[data-reveal]:nth-child(odd){transition-delay:0ms} .reveal-ready :is(.control__rules,.features--3)>[data-reveal]:nth-child(even){transition-delay:80ms} } /* Images fade in without moving, as Apple's pictures do (icloud: opacity 0.5s ease-out). */ .reveal-ready .places__tile[data-reveal]{transition:opacity .5s ease-out} .reveal-ready .places__tile[data-reveal]:not(.is-revealed){transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important} .reveal-ready [data-reveal]:not(.is-revealed){opacity:1;transform:none} .nav__sheet,.nav__panel{transform:none} .faq__item[open] .faq__marker{transform:rotate(45deg)} } /* Utilities: placed after every component so they always win. Margin-top on the 8px grid, named by pixels. */ .nowrap{white-space:nowrap} /* keeps a hyphenated term whole: French e-mail, ML-KEM-1024, États-Unis */ /* Fewer than 20em across (a phone with large text; never at the default size, where 20em is 320px): a term kept whole could be wider than the screen, so it may wrap. */ @media (max-width:19.99em){.nowrap{white-space:normal}} .mt-8{margin-top:var(--space-8)}.mt-16{margin-top:var(--space-16)}.mt-24{margin-top:var(--space-24)}.mt-32{margin-top:var(--space-32)} .mt-40{margin-top:var(--space-40)}.mt-48{margin-top:var(--space-48)}.mt-64{margin-top:var(--space-64)} /* 14. Kit (the QA page /kit.html only) */ .kit-swatches{display:grid;gap:var(--space-16);grid-template-columns:repeat(auto-fill,minmax(168px,1fr));list-style:none;padding:0} .kit-swatch{padding:var(--space-8);border-radius:var(--r-20);background:var(--card-bg);box-shadow:var(--ring)} .kit-swatch__chip{height:64px;border-radius:var(--r-12);background:var(--sw);box-shadow:inset 0 0 0 1px var(--line)} .kit-swatch__name{margin-top:var(--space-8);padding-inline:var(--space-8);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;letter-spacing:0} .kit-swatch__meta{padding-inline:var(--space-8);font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} .sw-bg{--sw:var(--bg)}.sw-soft{--sw:var(--bg-soft)}.sw-inset{--sw:var(--bg-inset)}.sw-text-1{--sw:var(--text-1)}.sw-text-2{--sw:var(--text-2)} .sw-text-3{--sw:var(--text-3)}.sw-accent{--sw:var(--accent)}.sw-fill{--sw:var(--fill-accent)}.sw-tint{--sw:var(--accent-tint)} .sw-hallmark{--sw:var(--hallmark)}.sw-glow{--sw:var(--hallmark-glow)}.sw-line{--sw:var(--line)}.sw-line-ui{--sw:var(--line-ui)} .sw-danger{--sw:var(--danger)}.sw-success{--sw:var(--success)} .kit-type{display:grid;gap:var(--space-24)} .kit-type__row{display:grid;gap:var(--space-8);padding-bottom:var(--space-24);box-shadow:inset 0 -1px 0 var(--line);overflow-wrap:anywhere} .kit-fs-65{font-size:var(--fs-65);line-height:var(--lh-65);letter-spacing:var(--tr-52);font-weight:600} .kit-fs-52{font-size:var(--fs-52);line-height:var(--lh-title);letter-spacing:var(--tr-52);font-weight:600} .kit-fs-41{font-size:var(--fs-41);line-height:var(--lh-41);letter-spacing:var(--tr-41);font-weight:600} .kit-fs-33{font-size:var(--fs-33);line-height:var(--lh-title);letter-spacing:var(--tr-33);font-weight:600} .kit-icons{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fill,minmax(112px,1fr));list-style:none;padding:0} .kit-icons li{display:grid;justify-items:center;gap:var(--space-8);padding:var(--space-16) var(--space-8);border-radius:var(--r-12);background:var(--card-bg);box-shadow:var(--ring); font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} .kit-icons .icon{color:var(--text-1)} .kit-radii{display:flex;flex-wrap:wrap;gap:var(--space-16);list-style:none;padding:0} .kit-radii li{display:grid;place-items:center;width:96px;height:96px;background:var(--accent-tint);color:var(--accent);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:600;letter-spacing:0} .kit-r-8{border-radius:var(--r-8)}.kit-r-12{border-radius:var(--r-12)}.kit-r-20{border-radius:var(--r-20)}.kit-r-pill{border-radius:var(--r-pill)} .kit-space{display:grid;gap:var(--space-8);list-style:none;padding:0} .kit-space li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:var(--space-16);font-size:var(--fs-14);line-height:var(--lh-14);letter-spacing:0;color:var(--text-2)} .kit-space span{height:12px;border-radius:var(--r-pill);background:var(--hallmark-glow)} .kit-s-8{width:8px}.kit-s-16{width:16px}.kit-s-24{width:24px}.kit-s-32{width:32px}.kit-s-40{width:40px}.kit-s-48{width:48px}.kit-s-56{width:56px} .kit-s-64{width:64px}.kit-s-72{width:72px}.kit-s-96{width:96px}.kit-s-128{width:128px} /* 15. Print */ @media print{ :root{--bg:#fff;--bg-soft:#fff;--bg-inset:#fff;--card-bg:#fff;--text-1:#000;--text-2:#222;--text-3:#444;--accent:#000;--line:#bbb} body{background:#fff;color:#000;font-size:11pt} .nav,.nav__sheet,.skip-link,.rail__controls,.store-badges,.form,.nav__menu-button{display:none!important} .section{padding-block:16pt} .section--band,.section--soft,.footer,.card,.callout{background:#fff!important;box-shadow:none!important} .reveal-ready [data-reveal]{opacity:1!important;transform:none!important} .rail__track{display:block;overflow:visible;padding:0} .rail__item{display:inline-block;vertical-align:top;margin:0 12pt 12pt 0} .phone{filter:none} a{color:#000} .prose a[href^="http"]::after,.footer__link[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt} h1,h2,h3{break-after:avoid} figure,.card,.step,.faq__item{break-inside:avoid} .faq__item::details-content{block-size:auto;content-visibility:visible} } /* The invitation form's fields sit on the page, as Apple's forms do, not inside a panel. */ .invite__form.card{padding:0;background:transparent;box-shadow:none;border-radius:0} @media (prefers-reduced-motion:reduce){.faq__item::details-content{transition:none}} /* Document pages (legal, privacy: the page head carries a "last updated" caption) take Apple's smaller document title: 32/36 on phones, 40/44 from 768, 48/52 from 1024 (Apple's legal pages). */ .section-head:has(>.caption)>.t-page{font-size:2rem;line-height:calc(1em + .25rem);letter-spacing:-.01em} @media (min-width:48em){.section-head:has(>.caption)>.t-page{font-size:2.5rem}} @media (min-width:64em){.section-head:has(>.caption)>.t-page{font-size:3rem}} @media (min-width:64em){:is(#limits .card__title,#brief>.card__title,#summary>.t-21){font-size:1.75rem;line-height:2rem;letter-spacing:-.007em}} /* Apple's text-tile headline: 28/32 */