/* Swiftwing: swiftw.ing and swiftwing.fr.
   Sizes step up at four widths: phones (up to 767 px), tablets (768–1024), laptops (1025–1540) and large screens. */

/* Montserrat, the font of the retired Swiftwing app (SIL Open Font License, assets/fonts/swiftwing-app/OFL.txt). */
@font-face { font-family: "Montserrat"; src: url("assets/fonts/swiftwing-app/Montserrat-Regular.woff2") format("woff2"); font-weight: 100 449; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/swiftwing-app/Montserrat-Medium.woff2") format("woff2"); font-weight: 450 549; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/swiftwing-app/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 550 649; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/swiftwing-app/Montserrat-Bold.woff2") format("woff2"); font-weight: 650 1000; font-display: swap; }

:root {
  --purple: #6D5FED;
  --purple-deep: #574AC0;
  --purple-ink: #443795;
  --night: #1B173D;
  --lavender: #DFDCFC;
  --mist: #E9E6FE;
  --sky: #E4F0FE;
  --haze: #F3F2FE;
  --haze-2: #F0EEFE;
  --snow: #F9F8FF;
  --ink: #1A1A1C;
  --text: #5E6088;
  --line: #DBDCE8;
  --line-soft: #DCD8FB;

  /* Phones */
  --wrap: calc(100% - 64px);
  --gap: 12px;
  --space: 40px;
  --edge: 24px;
  --r-media: 24px;
  --r-band: 64px;
  --pad-card: 20px;
  --h1: 32px / 40px;
  --h2: 32px / 40px;
  --lead: 18px / 26px;
  --h3: 18px / 26px;
  --small: 14px / 22px;
  --body: 16px / 24px;
  --ui: 14px / 22px;
}
@media (min-width: 768px) {
  :root { --wrap: 576px; --gap: 16px; --space: 80px; --edge: 32px; --pad-card: 24px; --h1: 40px / 48px; --lead: 20px / 28px; }
}
@media (min-width: 1025px) {
  :root { --wrap: 896px; --r-media: 32px; }
}
@media (min-width: 1541px) {
  :root {
    --wrap: 1200px; --gap: 24px; --space: 120px; --edge: 48px; --r-media: 48px; --r-band: 96px; --pad-card: 36px;
    --h1: 48px / 56px; --h2: 40px / 48px; --lead: 24px / 32px; --h3: 20px / 28px; --small: 16px / 24px; --body: 18px / 26px; --ui: 16px / 24px;
  }
}

/* One language shows at a time; the EN/FR switch picks it. */
html[lang=en] [lang=fr], html[lang=fr] [lang=en] { display: none !important; }
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font: 450 18px / 26px "Montserrat", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--ink); font-weight: 700; text-wrap: balance; }
h2 { font: 700 var(--h2) "Montserrat", system-ui, sans-serif; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 60; padding: 8px 16px; border-radius: 8px; background: var(--purple); color: #fff; }
.skip:focus { top: 16px; }
.wrap { width: var(--wrap); margin-inline: auto; }

/* Both languages share one spot, so a block keeps the taller one's height when the language changes. */
.stack { display: grid; }
.stack > [lang] { grid-area: 1 / 1; }
html[lang=en] .stack > [lang=fr], html[lang=fr] .stack > [lang=en] { display: block !important; visibility: hidden; }

/* Buttons, labels and links */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; white-space: nowrap; transition: background-color .2s; }
.btn--small { height: 40px; padding: 0 12px; background: var(--purple); color: #fff; font-size: 14px; line-height: 22px; }
.btn--small:hover { background: var(--purple-deep); }
.btn--dark { height: 50px; padding: 0 16px; background: var(--night); color: #fff; font-size: 18px; line-height: 26px; }
.btn--dark:hover { background: #2B2560; }
.round { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--haze); color: var(--purple); cursor: pointer; transition: background-color .2s; }
.round:hover { background: var(--mist); }
.pill { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; padding: 4px 12px; border-radius: 15px; background: var(--lavender); color: var(--purple); font: 450 14px / 22px "Montserrat", system-ui, sans-serif; }
.pill--dark { align-self: center; background: var(--purple-ink); color: #fff; }
.link { display: inline-flex; align-items: center; color: var(--purple); font-size: 18px; line-height: 26px; font-weight: 700; }
.link .icon { width: 16px; height: 16px; stroke-width: 2.5; transition: transform .2s; }
.link:hover .icon { transform: translateX(3px); }
@media (min-width: 1541px) {
  .pill { padding: 8px 16px; border-radius: 20px; }
  .btn--small { font-size: 16px; line-height: 24px; }
  .btn--dark { height: 56px; padding: 0 24px; font-size: 20px; line-height: 28px; }
  .link { gap: 4px; font-size: 20px; line-height: 28px; }
  .link .icon { width: 20px; height: 20px; }
}

/* EN/FR switch */
.switch { display: inline-flex; gap: 2px; height: 40px; padding: 2px; border: 1px solid var(--line-soft); border-radius: 10px; }
.switch button { height: 100%; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 450 var(--ui) "Montserrat", system-ui, sans-serif; cursor: pointer; }
.switch button[aria-pressed=true] { background: var(--purple); color: #fff; }
.switch button:not([aria-pressed=true]):hover { background: var(--haze-2); }
.switch--wide { display: flex; width: 100%; height: 56px; padding: 4px; border-radius: 24px; }
.switch--wide button { flex: 1; padding: 0 12px; border-radius: 20px; font-size: 16px; line-height: 24px; }

/* Header: a white bar with the links centred between the logo and the buttons. On tablets and phones the
   links move into the side menu. Scrolling down hides the bar, scrolling up brings it back. */
.top { position: sticky; top: 0; z-index: 20; padding: 16px 0; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.top.is-hidden { transform: translateY(-100%); }
.top__bar { display: flex; align-items: center; gap: 16px; width: var(--wrap); height: 62px; margin-inline: auto; padding: 0 24px; border-radius: 31px; background: #fff; transition: box-shadow .45s; }
.top.is-raised .top__bar { box-shadow: 0 8px 32px rgba(55, 45, 94, .12); }
.brand img { width: 154px; height: 26px; object-fit: contain; }
.top__nav { display: flex; flex: 1; justify-content: center; gap: 16px; }
.top__nav a { font-size: 14px; line-height: 22px; transition: color .2s; }
.top__nav a:hover { color: var(--purple); }
.top__actions { display: flex; align-items: center; gap: 8px; }
.top__menu { display: none; margin-left: auto; }
@media (min-width: 1541px) {
  .top { padding: 24px 0; }
  .top__bar { height: 72px; padding: 0 36px; border-radius: 36px; }
  .top__nav { gap: 24px; }
  .top__nav a { font-size: 16px; line-height: 24px; }
}
@media (max-width: 1024px) {
  .top__bar { width: calc(var(--wrap) + 64px); height: 72px; padding: 16px 32px; border-radius: 36px; }
  .top__nav, .top__actions { display: none; }
  .top__menu { display: grid; }
}
@media (max-width: 767px) {
  .top__bar { width: calc(100% - 16px); padding: 16px 24px; }
  .brand img { width: 130px; height: 22px; }
}

/* Side menu (tablets and phones): the panel's logo and close button sit where the header's logo and menu button
   are; the links, then the demo link in its own card, then the EN/FR switch. */
.drawer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(26, 26, 28, .15); opacity: 0; transition: opacity .35s; }
.drawer__panel { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; gap: 16px; width: min(100% - 64px, 576px); padding: 32px; overflow-y: auto; border-radius: 0 32px 32px 0; background: #fff; transform: translateX(-100%); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.drawer__card { padding: 0 24px; border: 1px solid var(--line); border-radius: 24px; }
.drawer__card li + li { border-top: 1px solid var(--line); }
.drawer__card a { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: 18px; line-height: 26px; transition: color .2s; }
.drawer__card a:hover { color: var(--purple); }
.drawer__demo { color: var(--purple); }
.drawer__demo .icon { width: 16px; height: 16px; stroke-width: 2.5; }
@media (min-width: 1025px) { .drawer { display: none; } }
@media (max-width: 379px) { .drawer__demo .icon { display: none; } }

/* Hero: the video and the purple panel side by side on laptops, the panel above the video below that. */
.hero { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); max-width: 1824px; margin: 0 var(--edge) var(--edge); }
.hero__panel { grid-column: 6 / -1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 80px 48px; border-radius: 32px 32px 160px; background: var(--purple); }
.hero__panel > * { max-width: 512px; }
.hero h1 { color: #fff; font: 700 var(--h1) "Montserrat", system-ui, sans-serif; }
.hero__lead { color: var(--lavender); font: 450 var(--lead) "Montserrat", system-ui, sans-serif; }
.hero__media { grid-column: 1 / 6; grid-row: 1; overflow: hidden; border-radius: var(--r-media); }
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__next { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; }
.hero__next .icon { width: 20px; height: 20px; }
@media (min-width: 1541px) {
  .hero { margin-inline: max(48px, (100% - 1824px) / 2); }
  .hero__panel { gap: 24px; padding: 120px 72px; border-radius: 48px 48px 240px; }
  .hero__panel > * { max-width: 672px; }
  .hero__next { width: 72px; height: 72px; }
  .hero__next .icon { width: 24px; height: 24px; }
}
@media (max-width: 1024px) {
  .hero__panel, .hero__media { grid-column: 1 / -1; }
  .hero__panel { border-radius: 24px 24px 32px; }
  .hero__panel > * { max-width: none; }
  .hero__media { grid-row: 2; aspect-ratio: 16 / 9; }
  .hero__next { display: none; }
}
@media (max-width: 767px) {
  .hero__panel { padding: 40px 32px; }
}

/* Y Combinator badge */
.yc { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 5px 14px 5px 11px; border: 1px solid currentColor; border-radius: 999px; color: var(--lavender); font-size: 14px; line-height: 22px; }
.yc__mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: #F26522; color: #fff; font: 700 13px / 1 Helvetica, Arial, sans-serif; }
@media (max-width: 400px) {
  .yc { gap: 6px; padding: 4px 12px 4px 8px; font-size: 12px; line-height: 20px; white-space: nowrap; }
  .yc__mark { width: 18px; height: 18px; font-size: 12px; }
}
@media (max-width: 358px) { .yc { white-space: normal; border-radius: 14px; } }

/* A slot-machine reel in the heading: car, parcel, letter, 2 s each; the second car makes the loop seamless. */
.reel { --h: 1.3em; display: inline-block; vertical-align: middle; width: calc(var(--h) * 1.39); height: var(--h); margin-left: .2em; overflow: hidden; transform: translateZ(0); }
.reel__strip { display: flex; flex-direction: column; height: 400%; animation: reel 6s cubic-bezier(.5, 1.6, .5, 1) infinite; }
.reel__strip img { flex: none; width: 100%; height: 25%; object-fit: contain; }
@keyframes reel { 0%, 28% { transform: none; } 33.3%, 61.6% { transform: translateY(-25%); } 66.6%, 95% { transform: translateY(-50%); } 100% { transform: translateY(-75%); } }

/* Sections */
.band { padding: var(--space) 0; }
.band--top { padding-bottom: 0; }
.band--bottom { padding-top: 0; }
.band--tint { border-radius: var(--r-band); background: var(--snow); }

/* A picture and a text column on a 12-column grid. */
.split { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 24px var(--gap); }
.split > figure { grid-column: 1 / 6; grid-row: 1; }
.split__text { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 16px; }
.split--photo-right .split__text { grid-column: 1 / 7; }
.split--photo-right > figure { grid-column: 8 / -1; }
.split__body { font: 450 var(--body) "Montserrat", system-ui, sans-serif; }
.more { margin-top: 8px; }
@media (min-width: 1541px) {
  .split { row-gap: 36px; }
  .split__text { gap: 24px; }
  .more { margin-top: 12px; }
}
@media (max-width: 1024px) {
  .split { row-gap: 32px; }
  .split > figure, .split__text, .split--photo-right .split__text, .split--photo-right > figure { grid-column: 1 / -1; }
  .split__text { grid-row: 2; }
}
@media (max-width: 767px) { .split { row-gap: 24px; } }

/* The app screenshot: a 3:4 light panel, the phone 65% of its width, its top cut off by the panel. */
.phone { position: relative; align-self: start; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-media); background: var(--sky); }
.phone img { position: absolute; left: 17.5%; bottom: 13%; width: 65%; height: auto; filter: drop-shadow(0 12px 24px rgba(20, 14, 50, .12)); }
.photo { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-media); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

.perks { display: grid; gap: 24px; }
.perks li { display: flex; align-items: flex-start; gap: 12px; }
.perks img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.perks h3 { margin-bottom: 8px; font: 700 var(--h3) "Montserrat", system-ui, sans-serif; }
.perks p { font: 450 var(--small) "Montserrat", system-ui, sans-serif; }
@media (min-width: 1541px) { .perks { gap: 36px; } .perks li { gap: 16px; } }
@media (max-width: 767px) { .perks { gap: 20px; } }

/* App Store and Google Play badges (they link nowhere: the app is closed). */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.store { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 14px 0 12px; border: 1px solid #A6A6A6; border-radius: 9px; background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; transition: border-color .3s; }
.store:hover { border-color: #fff; }
.store__mark { width: 26px; height: 26px; flex: none; }
.store span { display: grid; gap: 2px; }
.store small { font-size: 10.5px; line-height: 1; }
.store--play small { text-transform: uppercase; letter-spacing: .4px; }
.store b { font-size: 21px; line-height: 1; font-weight: 600; }

/* What we move */
.intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-bottom: calc(var(--gap) * 2); }
.intro h2 { grid-column: 1 / 7; }
.intro p { grid-column: 7 / -1; font: 450 18px / 26px "Montserrat", system-ui, sans-serif; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--pad-card); padding: var(--pad-card); border: 1px solid var(--line); border-radius: var(--r-media); }
.card > img { width: auto; height: 64px; align-self: flex-start; }
.card > div { display: flex; flex-direction: column; gap: 8px; padding-right: 32px; }
.card h3 { font: 700 var(--h3) "Montserrat", system-ui, sans-serif; }
.card p { font: 450 var(--small) "Montserrat", system-ui, sans-serif; }
.pill--soon { position: absolute; top: var(--pad-card); right: var(--pad-card); background: var(--haze); color: var(--purple); }
@media (min-width: 1541px) {
  .intro p { font: 450 20px / 28px "Montserrat", system-ui, sans-serif; }
  .card > div { gap: 12px; padding-right: 48px; }
}
@media (max-width: 1024px) {
  .intro { margin-bottom: var(--gap); }
  .intro h2, .intro p { grid-column: 1 / -1; }
  .cards { grid-template-columns: 1fr; }
  .card { border-radius: 24px; }
}

/* Questions: two tabs, one open answer at a time. */
#faq h2 { max-width: calc((var(--wrap) - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap)); margin-bottom: calc(var(--gap) * 2); }
.tabs { display: flex; gap: 8px; margin-bottom: var(--gap); }
.tabs button { height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--haze-2); color: var(--purple); font: 450 var(--ui) "Montserrat", system-ui, sans-serif; cursor: pointer; transition: background-color .2s; }
.tabs button[aria-selected=true] { background: var(--purple); color: #fff; }
.faq { display: grid; gap: var(--gap); }
.qa { overflow: hidden; border-radius: 16px; background: var(--haze); }
.qa h3 { font: inherit; }
.qa button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: var(--pad-card); border: 0; background: none; color: var(--ink); font: 700 var(--h3) "Montserrat", system-ui, sans-serif; text-align: left; cursor: pointer; }
.qa button .icon { color: var(--purple); transition: transform .3s; }
.qa button[aria-expanded=true] .icon { transform: rotate(45deg); }
.qa__answer { height: 0; overflow: hidden; transition: height .35s cubic-bezier(.22, 1, .36, 1); }
.qa__answer p { max-width: calc((var(--wrap) - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap) - var(--pad-card)); padding: 0 var(--pad-card) var(--pad-card); font: 450 var(--body) "Montserrat", system-ui, sans-serif; }
@media (min-width: 1541px) { .qa { border-radius: 24px; } .qa button .icon { width: 24px; height: 24px; } }
@media (max-width: 1024px) { .qa__answer p { max-width: none; } }

/* Closing call to action on purple, running into the footer. */
.closer { padding-top: var(--space); border-radius: var(--r-band) var(--r-band) 0 0; background: var(--purple); text-align: center; }
.closer__box { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px calc((var(--wrap) - 11 * var(--gap)) / 12 * 2 + 2 * var(--gap) + 48px); border-radius: var(--r-media); background: var(--purple-deep); }
.closer h2 { color: #fff; }
.closer .btn { margin-top: 8px; }
@media (min-width: 1541px) { .closer__box { gap: 24px; padding: 72px calc((var(--wrap) - 11 * var(--gap)) / 12 * 2 + 2 * var(--gap) + 72px); } }
@media (max-width: 1024px) { .closer__box { padding: 48px; } }
@media (max-width: 767px) { .closer__box { padding: 32px; } }

/* Footer */
.foot { padding: 128px 0 24px; background: var(--purple); color: #fff; font-size: 15px; line-height: 24px; }
.foot__brand img { width: 154px; height: 26px; object-fit: contain; object-position: left; }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); }
.foot__links { display: flex; gap: 8px 22px; white-space: nowrap; }
.foot__links a:hover { text-decoration: underline; }
.foot p { white-space: nowrap; }
@media (min-width: 1541px) { .foot { padding: 192px 0 36px; } .foot__row { margin-top: 36px; padding-top: 36px; } }
@media (max-width: 1024px) { .foot__row, .foot__links { flex-wrap: wrap; } }
@media (max-width: 767px) {
  .foot { padding: 64px 0 20px; }
  .foot__brand img { width: 130px; height: 22px; }
  .foot__row { flex-direction: column; align-items: flex-start; margin-top: 20px; padding-top: 20px; }
}

/* Mission, legal notice and privacy policy */
.prose { padding: 48px 0 80px; }
.prose__body { max-width: calc((var(--wrap) - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap)); margin-inline: auto; }
.prose h1 { margin-bottom: 24px; font: 700 40px / 48px "Montserrat", system-ui, sans-serif; }
.prose h2 { margin: 80px 0 24px; }
.prose h3 { margin: 40px 0 16px; font: 700 24px / 32px "Montserrat", system-ui, sans-serif; }
.prose p { margin-bottom: 16px; }
.prose ul { margin-bottom: 32px; list-style: disc; }
.prose li { margin: 0 0 16px 32px; }
.prose li::marker { color: var(--purple); }
.prose a { color: var(--purple); }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose mark.todo { padding: 0 5px; border-radius: 3px; background: #FFE58A; color: inherit; }
@media (min-width: 1541px) { .prose { padding: 72px 0 120px; } .prose h1 { margin-bottom: 32px; font: 700 48px / 56px "Montserrat", system-ui, sans-serif; } .prose h2 { margin: 96px 0 32px; } }
@media (max-width: 1024px) { .prose__body { max-width: none; } }
@media (max-width: 767px) {
  .prose { padding: 32px 0 40px; }
  .prose h1 { margin-bottom: 20px; font: 700 32px / 40px "Montserrat", system-ui, sans-serif; }
  .prose h2 { margin: 40px 0 20px; font: 700 24px / 32px "Montserrat", system-ui, sans-serif; }
  .prose ul { margin-bottom: 24px; }
  .prose li { margin-left: 24px; }
}

/* swiftwing.fr: the founder's letter (letter.js opens it). */
html:has(#letter[open]) { overflow: hidden; }
#letter { position: fixed; inset: 0; z-index: 50; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(12px, 5vh, 56px) 12px; border: 0; color: #1C1C1C; background: rgba(55, 44, 117, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#letter[open] { display: grid; place-items: center; }
#letter::backdrop { background: transparent; }
#letter .sheet { width: min(880px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 24px; box-shadow: 0 40px 100px rgba(20, 12, 70, .35); }
#letter .sheet-bar { display: flex; align-items: center; gap: 14px; padding: 20px 20px 14px 50px; }
#letter .sheet-bar img { width: 154px; height: auto; margin-right: auto; }
#letter .close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--haze-2); color: var(--purple); cursor: pointer; }
#letter .close .icon { width: 20px; height: 20px; }
#letter .sheet-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 10px 50px 50px; font-size: 18px; line-height: 1.5; -webkit-mask-image: linear-gradient(#000 calc(100% - 70px), transparent); mask-image: linear-gradient(#000 calc(100% - 70px), transparent); }
#letter .sheet-body::-webkit-scrollbar { display: none; }
#letter .sheet-body:focus { outline: none; }
#letter.at-end .sheet-body { -webkit-mask-image: none; mask-image: none; }
#letter .sheet-body h2 { max-width: 13em; margin: 6px 0 26px; font-size: 32px; line-height: 1.2; color: inherit; }
#letter .sheet-body p { margin: 0 0 16px; }
#letter .sheet-body strong { font-weight: 700; }
#letter .sheet-body ul { margin: 0 0 18px; }
#letter .sheet-body li { position: relative; padding-left: 26px; margin-bottom: 12px; }
#letter .sheet-body li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 10px; height: 10px; border-radius: 2px; background: var(--purple); }
#letter .sheet-body .sign { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--line-soft); }
#letter .sheet-body .sign::first-line { font-weight: 700; }
@media (max-width: 767px) {
  #letter { padding: 16px; }
  #letter .sheet-bar { padding: 20px 20px 12px 28px; }
  #letter .sheet-bar img { width: 130px; }
  #letter .sheet-body { padding: 8px 28px 44px; font-size: 17px; }
  #letter .sheet-body h2 { margin: 4px 0 20px; font-size: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  #letter[open] { animation: fade .3s ease; }
  #letter[open] .sheet { animation: rise .6s cubic-bezier(.2, .7, .2, 1); }
  #letter.closing { animation: fade .25s ease reverse forwards; }
  #letter.closing .sheet { animation: rise .25s ease reverse forwards; }
  @keyframes fade { from { opacity: 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(50px); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reel__strip { animation: none; }
}