/* GCal content additions. The original visual system remains in styles.css. */
/* Override the legacy header breakpoints consistently on every page. */
.site-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; }
.site-nav { display: flex; white-space: nowrap; }
.site-header .nav-download { font-weight: 650; color: white; background: var(--blue); border-color: var(--blue); }
.site-header .nav-download:hover, .site-header .nav-download:focus-visible { background: #2d5fce; border-color: #2d5fce; }
.maker-lockup { display: flex; grid-column: 3; }
.maker-lockup > span:first-child { display: inline; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
section[id], .guide-section, .help-category { scroll-margin-top: 110px; }
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }
.hero h1 { font-size: clamp(48px, 5.76vw, 83.2px); line-height: .98; }
.hero-anniversary { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; padding: 8px 14px; border: 1px solid rgba(145,179,255,.24); border-radius: 999px; color: rgba(230,236,255,.82); background: rgba(49,102,219,.1); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; animation: hero-copy-in 760ms 90ms both cubic-bezier(.2,.8,.2,1); }
.hero-anniversary::before { width: 6px; height: 6px; border-radius: 50%; background: #e3bb62; box-shadow: 0 0 14px rgba(227,187,98,.45); content: ""; }
.hero-meta { color: rgba(255,255,255,.62); }
.hero-rating { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.5; }
.hero-rating strong { color: white; font-weight: 600; }
.hero-rating-star { color: #e3bb62; font-size: 17px; }
.hero-rating:hover { color: white; }
.hero-rating:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 5px; border-radius: 3px; }
.hero-rating + .hero-meta { margin-top: 10px; }
.hero-product .product-overlay { object-fit: contain; }
.hero-product .product-overlay--hero { animation: none; }
.hero-window { aspect-ratio: 8 / 5; border-radius: 0; }
/* Keep desktop features spacious without forcing a full-screen section. */
@media (min-width: 1101px) {
 .story { min-height: 680px; padding-top: clamp(90px, 9vw, 140px); padding-bottom: clamp(90px, 9vw, 140px); }
}
/* Shared canvas; desktop illustrations extend beyond the outer page edge. */
.feature-visual { width: 100%; min-width: 0; aspect-ratio: 1300 / 844; overflow: hidden; }
.feature-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1101px) {
 .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
 .story-copy { min-width: 0; }
 .feature-visual { width: calc(100% + var(--page-gutter) + 64px); }
 .story--focus .feature-visual { justify-self: end; }
 .story--menu .feature-list { margin-top: 24px; }
 .story--menu .feature-list li { min-height: 44px; gap: 16px; }
}
/* Stack detailed illustrations before the desktop columns become cramped. */
@media (max-width: 1100px) {
 .story { grid-template-columns: minmax(0, 1fr); min-height: 0; }
 .story--focus .story-copy { order: 1; }
 .story--focus .feature-visual { order: 2; }
}
@media (min-width: 761px) and (max-width: 1100px) {
 .hero h1 { font-size: 64px; }
 .story { gap: 64px; padding-top: 100px; padding-bottom: 100px; }
 .story-copy { width: 100%; max-width: 680px; min-width: 0; }
}
.story--calendar, .story--menu { background: var(--paper); }
.story--appearance { background: var(--paper-bright); }
.calendar-visual { width: min(900px, 67vw); }
.calendar-visual > img { width: 100%; height: auto; }
/* ASCII escape keeps the arrow correct regardless of stylesheet decoding. */
.text-link::after { content: "\2192"; }
.story-guide, .widgets-footer .text-link { color: #265edc; line-height: 1.5; }
.story-guide { margin-top: 30px; }
.story-copy--light .story-guide { color: var(--blue-light); }
.story-copy > .story-support { margin-top: 20px; font-size: 17px; line-height: 1.55; }
.story-guide-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 30px; }
.story-guide-links .story-guide { margin-top: 0; }
.story-copy > .compatibility-note { font-size: 12px !important; margin-top: 16px !important; letter-spacing: 0; }
.faq-answer a { color: #265edc; text-decoration: underline; text-underline-offset: 3px; }
.faq-list > .story-guide { margin-top: 32px; }
.final-cta-copy > h2 + .button { margin-top: 32px; }
/* Deliberately shared, quiet typography for help and guides. */
.help-main, .guide-main { max-width: 1440px; margin: auto; padding: 92px var(--page-gutter) 0; }
.help-intro { max-width: 800px; }
.help-intro h1 { margin: 0; font-size: clamp(48px, 6.5vw, 88px); line-height: 1.02; font-weight: 580; letter-spacing: -.055em; }
.help-intro > p:last-child, .guide-intro > p:not(.eyebrow):not(.guide-requirement) { max-width: 660px; margin: 24px 0 0; font-size: 20px; line-height: 1.6; color: var(--ink-soft); }
.help-search { max-width: 780px; margin-top: 42px; }
.help-search label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.search-field { display: flex; align-items: center; gap: 16px; padding: 0 20px; min-height: 66px; border: 1px solid #989ba1; border-radius: 12px; background: white; }
.search-field:focus-within { outline: 3px solid rgba(59,111,232,.3); border-color: var(--blue); }
.search-field svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; flex-shrink: 0; }
.search-field input { width: 100%; min-width: 0; padding: 20px 0; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 17px; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field button { border: 0; padding: 12px 0 12px 10px; color: #265edc; background: transparent; font: inherit; font-size: 14px; cursor: pointer; }
#search-status { color: var(--ink-soft); font-size: 13px; min-height: 20px; margin: 12px 0 0; }
.popular-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 34px 0 64px; font-size: 14px; }
.popular-guides > span { color: var(--ink-soft); }
.popular-guides a { padding: 8px 0; color: #265edc; }
.popular-guides a span { margin-left: 6px; }
.help-topics { display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.help-topics a { padding: 5px 0; }
.help-topics a:hover, .guide-toc a:hover, .breadcrumbs a:hover { color: #265edc; text-decoration: underline; text-underline-offset: 4px; }
.help-category { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: 60px; padding: 72px 0; border-bottom: 1px solid var(--line); }
.category-heading .eyebrow { margin-bottom: 20px; }
.category-heading h2 { margin: 0; font-size: clamp(27px,3vw,40px); font-weight: 580; letter-spacing: -.04em; line-height: 1.1; }
.category-heading > p:last-child { color: var(--ink-soft); line-height: 1.6; max-width: 260px; }
.guide-row { display: flex; align-items: flex-start; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--line); transition: color 160ms ease; }
.guide-list > :first-child .guide-row, .guide-list > .guide-row:first-child { padding-top: 0; }
.guide-list > :last-child .guide-row, .guide-list > .guide-row:last-child { border-bottom: 0; }
.guide-row > span:nth-last-child(2) { flex: 1; min-width: 0; }
.guide-row strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; }
.guide-summary { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.guide-number { padding-top: 6px; color: #757b85; font-size: 10px; letter-spacing: .12em; min-width: 20px; }
.guide-arrow { padding-top: 3px; font-size: 21px; color: #265edc; transition: transform 160ms ease; }
.guide-row:hover strong { color: #265edc; }
.guide-row:hover .guide-arrow { transform: translate(3px,-3px); }
.search-empty { padding: 68px 0; }
.search-empty h2 { font-size: 32px; font-weight: 580; letter-spacing: -.035em; }
.search-empty p { max-width: 540px; color: var(--ink-soft); line-height: 1.7; }
.help-support { display: flex; gap: 40px; align-items: center; justify-content: space-between; padding: 76px 0 90px; }
.help-support h2 { margin: 0; font-size: clamp(32px,4vw,50px); letter-spacing: -.045em; font-weight: 580; }
.help-support p:not(.eyebrow) { color: var(--ink-soft); max-width: 520px; line-height: 1.65; margin-bottom: 0; }
.help-support .text-link { flex-shrink: 0; color: #265edc; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.guide-main { padding-top: 44px; max-width: 1280px; }
.guide-intro { max-width: 900px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.guide-intro h1 { margin: 0; max-width: 850px; font-size: clamp(40px,5.4vw,68px); font-weight: 580; letter-spacing: -.045em; line-height: 1.06; text-wrap: balance; }
.guide-requirement { margin: 24px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.guide-requirement a { margin-left: 5px; color: #265edc; text-decoration: underline; text-underline-offset: 3px; }
.guide-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 64px; padding-top: 48px; }
.guide-toc { align-self: start; position: sticky; top: 112px; font-size: 13px; }
.guide-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.guide-toc li { padding: 0 0 18px 18px; line-height: 1.55; }
.guide-toc li:last-child { padding-bottom: 0; }
.guide-toc .text-link { margin-top: 32px; color: #265edc; font-size: 13px; }
.guide-content { min-width: 0; max-width: 740px; }
.guide-section { padding: 0 0 38px; margin-bottom: 38px; border-bottom: 1px solid var(--line); }
.guide-content h2 { margin: 0 0 22px; font-size: clamp(25px,3vw,32px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.guide-content p, .guide-content li { color: #4e535d; font-size: 17px; line-height: 1.8; }
.guide-content p { margin: 0 0 18px; }
.guide-content strong { color: #252932; font-weight: 600; }
.guide-content a:not(.guide-row) { color: #265edc; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(38,94,220,.35); }
.guide-content ul { padding-left: 23px; }
.guide-content li + li { margin-top: 14px; }
.steps { list-style: none; counter-reset: step; margin: 20px 0; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 5px; left: 0; font-size: 11px; color: #265edc; letter-spacing: .08em; font-weight: 650; }
.guide-figure { margin: 0 0 48px; }
.guide-figure img { width: 100%; height: auto; background: #eef0f7; }
.guide-figure figcaption { color: var(--ink-soft); font-size: 12px; line-height: 1.6; margin-top: 12px; }
.guide-figure a { cursor: zoom-in; }
html.guide-image-open { overflow: hidden; }
.guide-image-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 76px 24px 24px; border: 0; background: transparent; box-sizing: border-box; }
.guide-image-viewer[open] { display: grid; place-items: center; }
.guide-image-viewer::backdrop { background: rgba(10, 14, 23, .92); }
.guide-image-viewer > img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); object-fit: contain; }
.guide-image-close { position: absolute; top: 20px; right: 24px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: #fff; background: transparent; font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.guide-image-close:hover { color: #b9ccff; }
.guide-image-close:focus-visible { outline: 3px solid #91b3ff; outline-offset: 4px; }
.guide-related { padding: 12px 0 20px; }
.guide-main > .help-support { border-top: 1px solid var(--line); margin-top: 42px; }
@media (max-width: 1000px) {
 .help-category { gap: 35px; }
 .guide-layout { grid-template-columns: 175px minmax(0,1fr); gap: 36px; }
}
@media (max-width: 760px) {
 .site-header { grid-template-columns: auto 1fr; gap: 12px; }
 .site-nav { font-size: 12px; }
 .product-lockup { font-size: 15px; gap: 8px; }
 .hero-anniversary { gap: 8px; margin-bottom: 20px; padding: 7px 12px; font-size: 10px; }
 .hero h1 { font-size: clamp(42px,11.5vw,64px); }
 .hero-summary { font-size: 17px; }
 .hero-actions .button { font-size: 14px; padding: 0 19px; }
 .calendar-visual { width: 100%; }
 .help-main { padding-top: 60px; }
 .help-intro > p:last-child, .guide-intro > p:not(.eyebrow):not(.guide-requirement) { font-size: 18px; }
 .help-search { margin-top: 30px; }
 .search-field { padding: 0 14px; gap: 10px; min-height: 60px; }
 .search-field input { font-size: 16px; }
 .popular-guides { align-items: flex-start; flex-direction: column; gap: 4px; margin: 24px 0 36px; }
 .popular-guides > span { margin-bottom: 5px; }
 .help-topics { gap: 10px 22px; font-size: 13px; }
 .help-category { grid-template-columns: 1fr; gap: 20px; padding: 44px 0; }
 .category-heading > p:last-child { max-width: none; }
 .guide-row { gap: 12px; }
 .guide-row strong { font-size: 18px; }
 .help-support { flex-direction: column; align-items: flex-start; gap: 28px; padding: 54px 0 64px; }
 .guide-main { padding-top: 28px; }
 .breadcrumbs { margin-bottom: 32px; }
 .guide-intro { padding-bottom: 32px; }
 .guide-layout { grid-template-columns: 1fr; gap: 36px; padding-top: 30px; }
 .guide-toc { position: static; }
 .guide-toc .text-link { display: none; }
 .guide-content p, .guide-content li { font-size: 16px; }
 .steps > li { padding-left: 34px; }
 .guide-section { margin-bottom: 30px; padding-bottom: 28px; }
 section[id], .guide-section, .help-category { scroll-margin-top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
 .js-reveal .reveal:not(.is-visible) { opacity: 1; transform: none; }
}
/* Keep both help navigation and the store destination available on small screens. */
@media (max-width: 760px) {
 :root { --header-height: 116px; }
 .site-header { row-gap: 14px; }
 .product-lockup { grid-column: 1; grid-row: 1; }
 .maker-lockup { display: flex; grid-column: 2; grid-row: 1; justify-self: end; }
 .site-nav { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: space-between; justify-self: stretch; gap: 12px; }
 .site-nav .nav-download { display: inline-flex; }
 section[id], .guide-section, .help-category { scroll-margin-top: 136px; }
}

/* Individual widget artwork keeps its own proportions and corner treatment. */
.widgets-showcase { padding: clamp(90px, 9vw, 140px) 0 110px; background: #eae9e4; overflow: hidden; }
.widgets-heading { max-width: 850px; margin: 0 auto 56px; padding: 0 var(--page-gutter); text-align: center; }
.widgets-heading > p:last-child { max-width: 620px; margin: 24px auto 0; color: var(--ink-soft); font-size: 20px; line-height: 1.6; }
.widget-carousel { --widget-gap: 24px; --widget-scale: .5; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.widget-carousel::-webkit-scrollbar { display: none; }
.widget-carousel + .widget-carousel { margin-top: 28px; }
.widget-track { display: flex; width: max-content; }
.widget-group { display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; min-width: 100vw; gap: var(--widget-gap); padding: 4px calc(var(--widget-gap) / 2); }
.widget-group img { display: block; flex: none; width: calc(var(--widget-width) * var(--widget-scale)); height: auto; max-width: none; }
.widget-copy { display: none; }
.widgets-footer { margin-top: 48px; padding: 0 var(--page-gutter); text-align: center; }
.widgets-footer .compatibility-note { margin: 16px 0 0; color: var(--ink-soft); font-size: 12px; }
@keyframes widget-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
 .widget-carousel.is-animated { overflow-x: hidden; }
 .widget-carousel.is-animated .widget-copy { display: flex; }
 .widget-carousel.is-animated .widget-track { animation: widget-marquee 95s linear infinite; }
 .widget-carousel--large.is-animated .widget-track { animation-duration: 90s; }
 .widget-carousel.is-offscreen .widget-track { animation-play-state: paused; }
}
.widget-carousel:focus-visible { overflow-x: auto; mask-image: none; outline: 2px solid #265edc; outline-offset: -2px; }
.widget-carousel:focus-visible .widget-track { animation: none; }
.widget-carousel:focus-visible .widget-copy { display: none; }
@media (max-width: 760px) {
 .widgets-showcase { padding: 90px 0; }
 .widgets-heading { margin-bottom: 40px; }
 .widgets-heading > p:last-child { font-size: 18px; }
 .widget-carousel { --widget-gap: 16px; mask-image: none; scroll-padding-inline: 22px; }
 .widget-carousel--small { --widget-scale: .4; }
 .widget-group { padding-inline: 22px; }
 .widget-group img { width: auto; max-width: none; }
 .widget-carousel--small img { height: min(144px, calc((100vw - 44px) / 2)); }
 .widget-carousel--large img { height: min(240px, calc((100vw - 44px) / 2)); }
 .widget-carousel + .widget-carousel { margin-top: 20px; }
 .widgets-footer { margin-top: 36px; }
}

/* App Store ratings and original customer reviews. */
.reviews-story { padding: clamp(80px, 8vw, 120px) 0; background: #eae9e4; overflow: hidden; }
.reviews-heading { display: flex; flex-direction: column; align-items: center; gap: 24px; margin: 0 auto 44px; padding: 0 var(--page-gutter); text-align: center; }
.reviews-heading .eyebrow { margin: 0; }
/* One responsive heading style for every landing-page section. */
.reviews-heading h2,
.story-copy h2,
.widgets-heading h2,
.faq-heading h2,
.final-cta h2 { margin: 0; font-size: clamp(40px, 4.5vw, 64px); font-weight: 580; letter-spacing: -.06em; line-height: 1.08; }
.reviews-rating { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 10px; row-gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.4; text-decoration: none; }
.reviews-rating strong { font-size: 16px; color: var(--ink); }
.rating-star { color: #9a6a14; font-size: 18px; }
.rating-divider { color: var(--ink-soft); }
.reviews-rating:hover { border-color: var(--ink-soft); }
.reviews-rating:focus-visible { outline: 2px solid #265edc; outline-offset: 4px; }
.review-carousel { --review-gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.review-carousel::-webkit-scrollbar { display: none; }
.review-track { display: flex; width: max-content; }
.review-group { display: flex; gap: var(--review-gap); padding: 2px var(--review-gap) 2px 0; }
.review-copy { display: none; }
.review-card { flex: 0 0 340px; width: 340px; box-sizing: border-box; display: flex; flex-direction: column; margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper-bright); }
.review-stars { margin: 0 0 12px; color: #9a6a14; font-size: 14px; letter-spacing: 2px; }
.review-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; letter-spacing: -.03em; font-weight: 600; }
.review-card blockquote { margin: 0 0 22px; }
.review-card blockquote p { margin: 0; color: #4e535d; font-size: 15px; line-height: 1.55; }
.review-card figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
.review-person { display: grid; gap: 0; min-width: 0; line-height: 1.35; }
.review-avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 600; line-height: 1; }
.review-avatar--blue { background: #dce7f5; color: #375878; }
.review-avatar--lavender { background: #e8e0f1; color: #66517c; }
.review-avatar--sage { background: #e0e9df; color: #4b664a; }
.review-avatar--peach { background: #f5e3d7; color: #845b40; }
.review-author { color: var(--ink); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
@keyframes review-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
 .review-carousel.is-animated { overflow-x: hidden; }
 .is-animated .review-copy { display: flex; }
 .is-animated .review-track { animation: review-marquee 80s linear infinite; }
 .review-carousel:hover .review-track { animation-play-state: paused; }
}
/* Keyboard focus provides a static, scrollable row; pointer clicks keep the animation. */
.review-carousel:focus-visible { overflow-x: auto; mask-image: none; outline: 2px solid #265edc; outline-offset: -2px; }
.review-carousel:focus-visible .review-track { animation: none; }
.review-carousel:focus-visible .review-copy { display: none; }
@media (max-width: 760px) {
 .reviews-heading { gap: 20px; margin-bottom: 32px; }
 .review-carousel { mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
 .review-card { flex-basis: 300px; width: 300px; padding: 20px; }
}