/* Tilora — what every page shares, the home page too: the footer, the sheet after Download (get.js), and a few small
   things. Each part carries its own colours, so it reads the same over the home page's screens and the other pages. */

/* Read aloud, not seen. */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 99; }
.skip:focus { left: 16px; padding: 10px 16px; border-radius: 999px; background: #F1F0EC; color: #0B0B0C; font: 600 15px/1.2 "Bricolage Grotesque", Arial, sans-serif; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
/* The price said in a button, struck through for a sale (sale.js), at the button's own size, over its glass. */
.btn .plan-price { position: relative; z-index: 1; }
.btn .plan-price sup, .button .plan-price sup { font-size: inherit; vertical-align: baseline; top: 0; margin: 0; opacity: 1; }
.btn .plan-price s, .button .plan-price s { font-size: inherit; opacity: .6; margin-right: .3em; vertical-align: baseline; }
.head .plan-price s { font-size: .45em; opacity: .55; margin-right: .3em; vertical-align: middle; text-decoration-thickness: .08em; }
/* the home page's headline rises word by word, each word a box of its own, which a strike-through doesn't reach:
   each struck word carries its own line */
.head .plan-price s .wi { text-decoration: line-through; text-decoration-thickness: .08em; }
.head .plan-price sup { font-size: .5em; vertical-align: .55em; }

/* ── The footer: the wordmark and the way in, the site's links, the legal line, on night silk ─────────────── */
.site-foot {
  --sf-ink: #F1F0EC; --sf-dim: rgba(241, 240, 236, .64); --sf-faint: rgba(241, 240, 236, .5); --sf-hair: rgba(241, 240, 236, .13);
  --g-ink: #fff; --g-sub: rgba(255, 255, 255, .78); --g-body: rgba(255, 255, 255, .09); --g-rim: rgba(255, 255, 255, .55); --g-rim2: rgba(255, 255, 255, .16);
  --g-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55); --g-tint: rgba(255, 122, 60, .34); --g-text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
  position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(104px, 12vw, 160px); background: #0B0B0C; color: var(--sf-dim);
  font: 400 14px/1.45 "Bricolage Grotesque", Arial, sans-serif; letter-spacing: 0; text-align: left;
}
/* the night silk, rising behind the wordmark and gone by the columns */
.site-foot::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: min(560px, 90%); background: url("/assets/silk/price.webp") 50% 88% / cover no-repeat;
  -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent); opacity: .9; }
.sf-in { max-width: 1168px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) 24px calc(28px + env(safe-area-inset-bottom)); }
.sf-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 32px; padding-bottom: clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--sf-hair); }
.site-foot .sf-mark { grid-column: 1 / -1; display: inline-flex; align-items: baseline; width: fit-content; color: var(--sf-ink); font: 800 clamp(64px, 11vw, 150px)/.86 "Bricolage Grotesque", Arial, sans-serif; letter-spacing: -.055em; text-decoration: none; }
.sf-mark i { width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: #FF4F00; display: inline-block; box-shadow: 0 0 40px rgba(255, 79, 0, .45); }
.sf-say { color: var(--sf-ink); font: 650 clamp(20px, 2vw, 26px)/1.2 "Bricolage Grotesque", Arial, sans-serif; letter-spacing: -.025em; }
.sf-get { display: flex; flex-wrap: wrap; gap: 10px; }
.site-foot .btn { height: 48px; padding: 0 22px; font-size: 16px; color: var(--g-ink); }   /* a button's words at full ink, not the links' grey */
.site-foot .btn.primary { background: var(--g-tint); }
.sf-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding: clamp(36px, 5vw, 56px) 0; }
.sf-cols h3 { margin: 0 0 14px; color: var(--sf-ink); font: 650 14px/1.3 "Bricolage Grotesque", Arial, sans-serif; letter-spacing: -.01em; }
.sf-cols ul { list-style: none; margin: 0; padding: 0; }
.sf-cols li { margin: 0 0 9px; }
.site-foot a { color: inherit; text-decoration: none; transition: color .3s cubic-bezier(.2, .7, .1, 1); }
.sf-cols a:hover, .sf-legal a:hover, .sf-note a:hover { color: var(--sf-ink); }
.sf-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px; border-top: 1px solid var(--sf-hair); font-size: 13px; color: var(--sf-faint); }
.sf-legal nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.sf-legal a { color: var(--sf-dim); }
.sf-note { margin: 14px 0 0; font-size: 12px; color: var(--sf-faint); }
.sf-note a { text-decoration: underline; text-underline-offset: 2px; }
.site-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
/* Each column is a disclosure (make-pages.py): its heading the summary. Wherever there's room it is open and the heading
   is only a heading; on a phone, below, a row to tap. */
.sf-group > summary { display: block; list-style: none; }
.sf-group > summary::-webkit-details-marker { display: none; }
.sf-group > summary::marker { content: ""; }
@media (min-width: 821px) { .sf-group > summary { cursor: default; pointer-events: none; } }
@media (max-width: 1000px) { .sf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  /* a phone: the columns are a short list of headings, each opening under itself with a plus that turns to a minus,
     as the questions above do; the links, rows for a finger */
  .sf-cols { display: block; padding: 0; }
  /* a hairline between headings; the line over the legal words closes the list */
  .sf-cols > div:not(:last-child) { border-bottom: 1px solid var(--sf-hair); }
  .sf-group > summary { position: relative; display: flex; align-items: center; min-height: 54px; padding-right: 40px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sf-group > summary h3 { margin: 0; font-size: 16px; }
  .sf-group > summary::before, .sf-group > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 1.5px; margin-top: -.75px; border-radius: 2px;
    background: var(--sf-dim); transition: transform .45s cubic-bezier(.2, .9, .25, 1.04); }
  .sf-group > summary::after { transform: rotate(90deg); }
  .sf-group[open] > summary::after { transform: rotate(0); }
  .sf-group > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
  .sf-group ul { padding-bottom: 12px; }
  .sf-group[open] ul { animation: sf-open .4s cubic-bezier(.33, 0, .15, 1) both; }
  .sf-cols li { margin: 0; }
  .sf-cols li a { display: block; padding: 9px 0; }
}
@keyframes sf-open { from { opacity: 0; transform: translate3d(0, -4px, 0); } }
@media (max-width: 700px) {
  .sf-in { padding-left: 18px; padding-right: 18px; }
  .sf-top { grid-template-columns: 1fr; }
  .sf-get .btn { flex: 1 1 auto; }
  .sf-legal nav a { position: relative; padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-group > summary::before, .sf-group > summary::after { transition: none; }
  .sf-group[open] ul { animation: none; }
}

/* Black Friday (sale.js, only while it's on, or coming): a line under the footer's words, and on the home page a
   capsule over the price. */
.sf-sale { display: block; margin-top: 12px; color: var(--sf-dim); font: 550 15px/1.35 "Bricolage Grotesque", Arial, sans-serif; letter-spacing: -.005em; }
.sf-sale b { color: #FF8A52; font-weight: 700; }
.screen .copy > .sale-note.line { width: fit-content; max-width: 100%; margin: 0 auto 22px; padding: 9px 16px; border-radius: 999px; color: #fff;
  background: rgba(255, 122, 61, .2); box-shadow: inset 0 0 0 .5px rgba(255, 160, 110, .6); font: 550 16px/1.25 "Bricolage Grotesque", Arial, sans-serif; text-shadow: none; }
.sale-note b { font-weight: 700; }
/* On the home page the footer closes its last screen, on the same night as the questions: its silk rises out of
   the dark rather than starting at an edge. */
.faq .site-foot { margin-top: clamp(56px, 8vw, 96px); }
.faq .site-foot::before { -webkit-mask: linear-gradient(transparent, #000 30%, #000 50%, transparent); mask: linear-gradient(transparent, #000 30%, #000 50%, transparent); }

/* ── After "Download": a sheet over the page. On a Mac, three steps from the file to the notch; anywhere else, a way
   to send the page to the Mac (get.js). It comes out of the notch as a drop of clear glass and spreads into the sheet;
   the dialog is the whole window, see-through: the veil, the drop's glass, the sheet ─────────────────────────── */
.get-sheet {
  --ink: #0B0B0C; --dim: #5C5B57; --faint: #6B6A65; --hair: rgba(11, 11, 12, .12); --panel: #EFEDE8; --blue: #B33A00;
  --text: "Bricolage Grotesque", Arial, sans-serif; --display: "Bricolage Grotesque", Arial, sans-serif; --settle: cubic-bezier(.33, 0, .15, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.04); --sheet: #FAF9F6;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  color: var(--ink); font: 400 16px/1.5 var(--text); text-align: left;
}
.get-sheet[open] { display: grid; place-items: center; }
.get-sheet::backdrop { background: transparent; }
:where(.get-sheet) h2 { margin: 0; font-family: var(--display); font-weight: 750; }
:where(.get-sheet) :where(p, ol) { margin: 0; }
:where(.get-sheet) button { font: inherit; cursor: pointer; border: 0; padding: 0; background: none; color: inherit; }
:where(.get-sheet) img { display: block; max-width: 100%; }
:where(.get-sheet) a { color: var(--blue); text-decoration: none; }
:where(.get-sheet) a:hover { text-decoration: underline; }
:where(.get-sheet) :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
html.sheet-open { overflow: hidden; }
/* the page behind, dimmed and softened; open over the notch (get.js cuts it out) so the glass runs into it clear */
.get-veil { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; transition: opacity .45s ease; }
.get-sheet.up .get-veil { opacity: 1; }
.get-sheet.out .get-veil { opacity: 0; transition-duration: .55s; }
.get-card { position: relative; z-index: 2; box-sizing: border-box; width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 44px 40px 28px; border-radius: 30px; text-align: center;
  background: color-mix(in srgb, var(--sheet) calc(var(--m, 1) * 100%), transparent); }
.get-card.other { width: min(480px, calc(100vw - 32px)); }
.get-sheet.plain .get-card { box-shadow: 0 30px 90px rgba(0, 0, 0, .26), 0 0 0 .5px rgba(0, 0, 0, .08); animation: get-in .5s var(--settle); }
.get-sheet.plain.out .get-card { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .26s var(--settle); }
@keyframes get-in { from { opacity: 0; transform: translateY(22px) scale(.975); } }
/* the drop: hidden until it lands (clipped to its shape each frame); what it says comes out from inside it */
.get-sheet.drop .get-card { box-shadow: none; }
.get-sheet.drop .get-card:not(.on) { visibility: hidden; }
.get-card.clip { will-change: clip-path; }
.get-sheet.drop .get-card > * { opacity: 0; translate: 0 10px; transition: opacity .14s var(--settle), translate .2s var(--settle); }
.get-sheet.drop .get-card.in > * { opacity: 1; translate: 0 0; transition: opacity .4s var(--settle) calc(30ms + var(--d, 0) * 50ms), translate .7s var(--spring) calc(30ms + var(--d, 0) * 50ms); }
.get-card > :nth-child(2) { --d: 0; } .get-card > :nth-child(3) { --d: 1; } .get-card > :nth-child(4) { --d: 2; } .get-card > :nth-child(5) { --d: 3; } .get-card > :nth-child(n+6) { --d: 4; } .get-card > .get-close { --d: 4; }
.get-sheet :is(.mt-shade, .mt-sheen).get-glass { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 30px; pointer-events: none; opacity: 0; }
.get-sheet .mt-shade.get-glass { z-index: 1; box-shadow: 0 30px 90px rgba(0, 0, 0, .26), 0 0 0 .5px rgba(0, 0, 0, .08); }
.get-sheet .mt-sheen.get-glass { z-index: 3; clip-path: inset(50%);
  background: radial-gradient(90% 70% at 32% -8%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 62%), linear-gradient(to top, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 30%); }
.get-sheet .mt-goo { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: none; background: none; }
.get-sheet .mt-goo.on { display: block; }
/* what it says */
.get-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel); transition: background .2s; }
.get-close:hover { background: #e6e4de; }
.get-close::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.get-close svg { width: 11px; height: 11px; fill: none; stroke: var(--dim); stroke-width: 1.8; stroke-linecap: round; }
.get-icon { width: 64px; height: 64px; margin: 0 auto 16px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .14)); }
.get-card h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.get-sub { margin-top: 8px !important; color: var(--dim); text-wrap: balance; }
.get-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0 0 !important; padding: 0; list-style: none; counter-reset: step; }
.get-steps li { display: flex; flex-direction: column; align-items: center; gap: 12px; counter-increment: step; color: var(--ink); font: 600 14px/1.3 var(--text); letter-spacing: -.01em; }
.get-steps li > span::before { content: counter(step); display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--dim); font: 600 11px/1 var(--text); vertical-align: 1px; }
.get-art { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; height: 116px; border-radius: 18px; background: var(--panel); overflow: hidden; }
.get-art svg { display: block; }
.get-dmg { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.get-dmg svg { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .12)); }
.get-dmg b { color: var(--ink); font: 500 11px/1 var(--text); letter-spacing: 0; }
.get-folder { filter: drop-shadow(0 3px 6px rgba(0, 60, 140, .18)); }
.get-art-drag img { position: relative; z-index: 1; width: 40px; height: 40px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .16)); animation: get-drag 3s var(--settle) infinite; }
.get-art-drag i { position: relative; width: 18px; height: 1.5px; margin: 0 8px 0 10px; background: var(--faint); opacity: .7; }
.get-art-drag i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border: solid var(--faint); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
/* the icon carried over to the folder and let go into it, then back for another go */
@keyframes get-drag { 0% { transform: none; opacity: 0; } 10%, 24% { transform: none; opacity: 1; } 64% { transform: translateX(82px) scale(.6); opacity: .95; } 74%, 100% { transform: translateX(82px) scale(.45); opacity: 0; } }
/* the question macOS asks once, of anything from the internet: Open is the one to click */
.get-alert { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 150px; padding: 9px 10px 9px; border-radius: 13px; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .1); }
.get-alert img { width: 22px; height: 22px; }
.get-alert em { color: var(--ink); font: 600 11px/1.2 var(--text); font-style: normal; letter-spacing: 0; text-wrap: balance; }
.get-alert > span { display: flex; gap: 5px; width: 100%; }
.get-alert u { flex: 1; padding: 4px 0; border-radius: 6px; background: #e8e8ed; color: var(--ink); font: 500 11px/1.1 var(--text); text-align: center; text-decoration: none; }
.get-alert u.go { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--blue); }
.get-foot { margin-top: 26px !important; color: var(--dim); font-size: 13px; line-height: 1.5; text-wrap: balance; }
.get-foot a { color: var(--blue); }
.get-foot a:hover { text-decoration: underline; }
/* not on a Mac: the way to send it there */
.get-sheet .button { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; font: 650 15px/1 var(--display);
  color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--hair); transition: scale .35s cubic-bezier(.2, .9, .2, 1.02), background .3s; }
.get-sheet .button.blue { color: #F1F0EC; background: radial-gradient(70% 140% at 14% 0%, rgba(255, 110, 40, .5), rgba(255, 110, 40, 0) 60%), #0B0B0C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.get-sheet .button.outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.get-sheet .button:active { scale: .96; }
.get-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.get-said { min-height: 20px; margin-top: 12px !important; color: var(--dim); font-size: 14px; overflow-wrap: anywhere; }
.get-said + .get-foot { margin-top: 6px !important; }
@media (max-width: 600px) {
  /* a phone: a sheet up from the foot of the screen, as the phone's own are */
  .get-sheet[open] { place-items: end stretch; }
  .get-card, .get-card.other { width: 100%; max-height: calc(100dvh - 24px); padding: 36px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; }
  .get-sheet.plain .get-card { animation: get-up .5s var(--settle); }
  .get-sheet.plain.out .get-card { transform: translateY(100%); opacity: 1; transition: transform .3s cubic-bezier(.4, 0, .9, .6); }
  @keyframes get-up { from { transform: translateY(100%); } }
  .get-steps { grid-template-columns: 1fr; gap: 10px; margin-top: 24px !important; }
  .get-steps li { flex-direction: row; gap: 14px; text-align: left; }
  .get-art { flex: none; align-self: auto; width: 112px; height: 76px; border-radius: 14px; }
  .get-art .get-alert { scale: .78; }
  .get-art-drag img { width: 32px; height: 32px; } .get-art-drag svg { width: 38px; }
  .get-art-drag i { width: 10px; margin: 0 5px 0 6px; }
  @keyframes get-drag { 0% { transform: none; opacity: 0; } 10%, 24% { transform: none; opacity: 1; } 64% { transform: translateX(56px) scale(.6); opacity: .95; } 74%, 100% { transform: translateX(56px) scale(.45); opacity: 0; } }
  .get-actions { flex-direction: column; }
  .get-actions .button { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .get-sheet.plain .get-card { animation: get-fade .3s ease; }
  .get-sheet.plain.out .get-card { transform: none; opacity: 0; transition: opacity .2s ease; }
  .get-art-drag img { animation: none; }
  @keyframes get-fade { from { opacity: 0; } }
}
@media (prefers-color-scheme: dark) {
  .get-sheet { --ink: #F1F0EC; --dim: #A8A7A2; --faint: #8E8D88; --hair: rgba(241, 240, 236, .16); --panel: #26262A; --blue: #FF7A3D; --sheet: #1A1A1D; }
  .get-sheet.plain .get-card, .get-sheet .mt-shade.get-glass { box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .12); }
  .get-sheet .mt-sheen.get-glass { background: radial-gradient(90% 70% at 32% -8%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, 0) 62%), linear-gradient(to top, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%); }
  .get-veil { background: rgba(0, 0, 0, .55); }
  .get-sheet .button { background: #2A2A2E; }
  .get-sheet .button.blue { color: #0B0B0C; background: radial-gradient(70% 140% at 14% 0%, rgba(255, 110, 40, .35), rgba(255, 110, 40, 0) 60%), #F1F0EC; }
  .get-close:hover { background: #34343a; }
  .get-alert { background: #3a3a3c; box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 255, 255, .12); }
  .get-alert u { background: #5a5a5e; }
}
/* On a phone the home page's nav sits at the foot of the screen: the footer's last line stays clear of it. */
@media (max-width: 820px) { .faq .site-foot .sf-in { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }