/* The pages search engines read (features, templates, guides), on top of site.css. Made by
   scripts/seo-pages.mjs; the pictures are the real app (scripts/screenshots.mjs). */

/* ---- Accents: each page takes one of the note colours --------------------------------------- */

.accent-butter { --accent: var(--butter); --accent-2: var(--peach); --accent-3: var(--sky); }
.accent-sky { --accent: var(--sky); --accent-2: var(--lilac); --accent-3: var(--mint); }
.accent-sage { --accent: var(--sage); --accent-2: var(--butter); --accent-3: var(--sky); }
.accent-lilac { --accent: var(--lilac); --accent-2: var(--rose); --accent-3: var(--sky); }
.accent-peach { --accent: var(--peach); --accent-2: var(--butter); --accent-3: var(--rose); }
.accent-rose { --accent: var(--rose); --accent-2: var(--lilac); --accent-3: var(--peach); }
.accent-mint { --accent: var(--mint); --accent-2: var(--sky); --accent-3: var(--sage); }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px/1.2 var(--body); color: var(--ink-soft);
}
.pill .icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--accent, var(--butter)); color: var(--ink); stroke-width: 2; }
.pill.plain { padding: 7px 14px; }
.eyebrow-line { display: block; margin-bottom: 14px; font: 700 13px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---- Hero: centred words, then the product ---------------------------------------------------- */

.hx { position: relative; padding: 36px 0 0; overflow-x: clip; isolation: isolate; }
.hx::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 980px; z-index: -1;
  background:
    radial-gradient(40% 46% at 18% 30%, color-mix(in srgb, var(--accent) 85%, transparent), transparent 70%),
    radial-gradient(36% 40% at 84% 22%, color-mix(in srgb, var(--accent-2) 75%, transparent), transparent 70%),
    radial-gradient(44% 40% at 60% 78%, color-mix(in srgb, var(--accent-3) 60%, transparent), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.hx::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 980px; z-index: -1;
  background-image: radial-gradient(var(--dots) 1.5px, transparent 1.9px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(#000 20%, transparent 85%); mask-image: linear-gradient(#000 20%, transparent 85%);
}
.hx .crumbs ol { justify-content: center; }
.hx-copy { text-align: center; }
.hx-copy .pill { margin-bottom: 22px; }
.hx h1 { font-size: clamp(42px, 6.6vw, 86px); max-width: 15ch; margin: 0 auto 22px; letter-spacing: -.045em; line-height: .98; }
.hx h1 em, .tx h1 em, .gx h1 em, .gh h1 em {
  font-style: normal; padding-inline: .05em;
  background: linear-gradient(transparent 60%, var(--accent, var(--butter)) 60%, var(--accent, var(--butter)) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hx-lead { max-width: 640px; margin: 0 auto 30px; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--muted); }
.hx .cta-row { justify-content: center; margin-bottom: 18px; }
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; font: 600 15px/1.3 var(--body); color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust .icon { width: 18px; height: 18px; stroke-width: 2.4; color: var(--ink); }

/* The notepad page: the notepad comes up into the first screen. */
.hx.compact h1 { font-size: clamp(38px, 4.6vw, 60px); max-width: 20ch; margin-bottom: 16px; }
.hx.compact .hx-lead { margin-bottom: 22px; font-size: 18px; }
.hx.compact .hx-copy .pill { margin-bottom: 16px; }
.hx.compact .hx-stage { margin-top: 32px; }
.hx-stage { position: relative; margin: 56px auto 0; max-width: 1120px; padding-bottom: 72px; }
.hx-stage::before {
  content: ""; position: absolute; inset: 12% 8% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 90%, transparent), transparent); filter: blur(30px);
}
.hx-stage .browser { margin-inline: auto; max-width: 1000px; }
.hx-stage .phone { position: absolute; width: 230px; inset-inline-end: 0; bottom: 20px; transform: rotate(4deg); z-index: 2; }
.hx-stage.has-phone .browser { margin-inline: 0 auto; max-width: 920px; }
.hx-stage .float-card { z-index: 3; }
.hx-stage .float-card.popup { top: 18%; inset-inline-start: -2%; animation: float 6s ease-in-out infinite; }
.hx-stage .float-card.saved { inset-inline-start: 6%; inset-inline-end: auto; bottom: 36px; }
.hx-stage .float-card.chip-card { top: 10%; inset-inline-end: 4%; padding: 12px 18px; border-radius: 999px; align-items: center; gap: 10px; font: 700 15px/1.2 var(--body); animation: float 7s ease-in-out infinite reverse; }
.hx-stage.has-phone .float-card.chip-card { inset-inline-end: 18%; }
.chip-card .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; box-sizing: content-box; background: var(--accent); }
@media (max-width: 980px) {
  .hx-stage .phone { width: 180px; inset-inline-end: -8px; bottom: 10px; }
  .hx-stage .float-card.popup { display: none; }
}
@media (max-width: 640px) {
  .hx-stage { margin-top: 40px; padding-bottom: 48px; }
  .hx-stage .phone { width: 128px; padding: 6px; border-radius: 26px; }
  .hx-stage .phone img { border-radius: 21px; }
  .hx-stage .float-card.chip-card { top: auto; bottom: 6px; inset-inline-start: 12px; inset-inline-end: auto; font-size: 13px; padding: 9px 14px; }
  .hx-stage .float-card.saved { display: none; }
}

/* ---- Devices ---------------------------------------------------------------------------------- */

.browser {
  position: relative; display: block; margin: 0; overflow: hidden; border-radius: 18px; background: var(--card);
  box-shadow: 0 50px 110px -40px rgba(30, 27, 38, .45), 0 0 0 1px var(--line);
}
.browser-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--paper-deep); border-bottom: 1px solid var(--line); }
.browser-bar > i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; flex: none; }
.browser-bar > i + i { background: #FEBC2E; }
.browser-bar > i + i + i { background: #28C840; }
.browser-bar .url {
  display: inline-flex; align-items: center; gap: 6px; margin-inline: auto; padding: 4px 16px; border-radius: 8px;
  background: var(--card); font: 500 13px/1.3 var(--body); color: var(--muted); transform: translateX(-24px);
}
[dir="rtl"] .browser-bar .url { transform: translateX(24px); }
.browser-bar .url .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.browser img { display: block; width: 100%; height: auto; }
.browser.crop img { aspect-ratio: 16 / 9.5; object-fit: cover; object-position: 0 0; }
.browser.crop[dir="rtl"] img { object-position: 100% 0; }
@media (max-width: 640px) { .browser { border-radius: 12px; } .browser-bar { height: 28px; gap: 5px; padding: 0 10px; } .browser-bar > i { width: 8px; height: 8px; } .browser-bar .url { font-size: 11px; padding: 2px 10px; } }

/* ---- The notepad on /features/online-notepad/ --------------------------------------------------- */

.pad { max-width: 920px; margin-inline: auto; text-align: start; }
.pad-sheet { display: grid; grid-template-rows: auto 1fr; min-height: 380px; background: var(--card); }
.pad-title { width: 100%; border: 0; padding: 26px 32px 6px; background: transparent; color: var(--ink); font: 800 clamp(26px, 3vw, 34px)/1.15 var(--display); letter-spacing: -.03em; outline: none; }
.pad-text {
  width: 100%; min-height: 300px; resize: vertical; border: 0; padding: 8px 32px 24px; background: transparent; color: var(--ink);
  font: 400 18px/30px var(--body); outline: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, var(--line) 29px, var(--line) 30px); background-attachment: local; background-position: 0 8px;
}
.pad-title::placeholder, .pad-text::placeholder { color: var(--muted); opacity: .7; }
.pad-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper-deep); }
.pad-status { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; font: 600 14px/1.3 var(--body); color: var(--muted); }
.pad-status i { width: 9px; height: 9px; border-radius: 50%; background: #3E9B5A; box-shadow: 0 0 0 4px color-mix(in srgb, #3E9B5A 22%, transparent); }
.pad-bar .btn { min-height: 42px; padding: 0 16px; font-size: 15px; }
.pad-bar .btn .icon { width: 18px; height: 18px; }
.pad-words { font-size: 14px; color: var(--muted); margin-inline-end: 6px; }
.pad-note { margin: 14px auto 0; max-width: 640px; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .pad-title { padding: 18px 18px 4px; } .pad-text { padding: 6px 18px 18px; font-size: 17px; } .pad-bar .btn span { display: none; } }

/* ---- Sections ---------------------------------------------------------------------------------- */

.sx { padding: 88px 0; }
.sx.tight { padding: 56px 0; }
.sx-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.sx-head h2 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 14px; }
.sx-head p { margin: 0; font-size: 19px; color: var(--muted); }
.sx-head.start { margin-inline: 0; text-align: start; }
@media (max-width: 640px) { .sx { padding: 64px 0; } }

/* Four short points */
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.perks li { position: relative; padding: 26px 24px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.perks li::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--tone, var(--accent)); opacity: .35; filter: blur(30px); }
.perks .badge { position: relative; z-index: 1; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; color: var(--ink); background: var(--tone, var(--accent)); }
.perks strong { position: relative; z-index: 1; display: block; margin-bottom: 6px; font: 700 19px/1.3 var(--body); }
.perks span:not(.badge) { position: relative; z-index: 1; display: block; font-size: 16px; line-height: 1.5; color: var(--muted); }
.perks li:nth-child(4n+1) { --tone: var(--accent); }
.perks li:nth-child(4n+2) { --tone: var(--accent-2); }
.perks li:nth-child(4n+3) { --tone: var(--accent-3); }
.perks li:nth-child(4n+4) { --tone: var(--butter); }
@media (max-width: 980px) { .perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .perks { grid-template-columns: 1fr; gap: 10px; }
  .perks li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 18px; border-radius: 22px; }
  .perks .badge { grid-row: span 2; width: 44px; height: 44px; margin: 0; border-radius: 14px; }
  .perks strong { font-size: 17px; margin-bottom: 2px; }
  .perks span:not(.badge) { font-size: 15px; }
}

/* Three steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.steps li { counter-increment: step; position: relative; padding: 30px 26px 28px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font: 800 20px/1 var(--display);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 53px; inset-inline-start: calc(26px + 46px + 12px); inset-inline-end: -18px;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.steps strong { display: block; margin-bottom: 6px; font: 700 19px/1.3 var(--body); }
.steps span { display: block; font-size: 16px; line-height: 1.55; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .steps li:not(:last-child)::after { display: none; } }

/* A picture beside a sentence */
.showcase { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.showcase h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 14px; }
.showcase p { color: var(--muted); font-size: 18px; }
.showcase .stage { padding: 36px 0 36px 36px; }
[dir="rtl"] .showcase .stage { padding: 36px 36px 36px 0; }
.showcase .stage .browser { border-start-end-radius: 0; border-end-end-radius: 0; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; gap: 28px; } .showcase .stage { padding: 24px 0 24px 24px; } }

.stage {
  position: relative; border-radius: 36px; overflow: hidden;
  background-color: var(--accent, var(--butter));
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1.5px, transparent 1.9px); background-size: 24px 24px;
}

/* The ink band: privacy, in plain words */
.proof { position: relative; overflow: hidden; border-radius: 44px; padding: 64px; background: var(--band); color: #F3F1EC; }
.proof::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 92% 0%, rgba(251, 231, 161, .2), transparent 70%), radial-gradient(rgba(255, 255, 255, .05) 1.6px, transparent 2px); background-size: auto, 28px 28px; }
.proof > * { position: relative; z-index: 1; }
.proof-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.proof h2 { font-size: clamp(32px, 4vw, 50px); color: #F3F1EC; margin-bottom: 16px; }
.proof p { color: rgba(243, 241, 236, .75); font-size: 18px; }
.proof a { color: #FBE7A1; }
.proof .eyebrow-line { color: rgba(243, 241, 236, .6); }
.proof dl { margin: 0; display: grid; gap: 0; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.proof dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 18px 22px; background: rgba(255, 255, 255, .04); }
.proof dl > div + div { border-top: 1px solid rgba(255, 255, 255, .1); }
.proof dt { font-weight: 700; color: #FBE7A1; }
.proof dd { margin: 0; color: rgba(243, 241, 236, .85); font-size: 16px; line-height: 1.55; }
@media (max-width: 900px) { .proof { padding: 44px 24px; border-radius: 32px; } .proof-grid { grid-template-columns: 1fr; gap: 28px; } .proof dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* Numbers that are simply true */
.numbers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.numbers li { padding: 28px 18px; text-align: center; }
.numbers li + li { border-inline-start: 1px solid var(--line); }
.numbers b { display: block; font: 800 clamp(36px, 4.4vw, 52px)/1 var(--display); letter-spacing: -.04em; }
.numbers span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--muted); }
@media (max-width: 900px) { .numbers { grid-template-columns: repeat(3, 1fr); } .numbers li:nth-child(4) { border-inline-start: 0; } .numbers li:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .numbers { grid-template-columns: repeat(2, 1fr); } .numbers li { border: 0 !important; } .numbers li:nth-child(n+3) { border-top: 1px solid var(--line) !important; } .numbers li:nth-child(even) { border-inline-start: 1px solid var(--line) !important; } }

/* Theme swatches (the themes page) */
.theme-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.theme-tile { position: relative; display: grid; align-content: space-between; aspect-ratio: 3 / 3.4; padding: 16px; border-radius: 22px; overflow: hidden; background: var(--t-page); color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.theme-tile b { font: 400 30px/1 var(--t-font, var(--display)); }
.theme-tile .tl { display: grid; gap: 7px; }
.theme-tile .tl i { display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--t-ink) 18%, transparent); }
.theme-tile .tl i:first-child { width: 56%; background: var(--t-accent); }
.theme-tile .tl i:last-child { width: 78%; }
.theme-tile span { font: 700 14px/1.2 var(--body); }
@media (max-width: 900px) { .theme-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .theme-strip { grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-tile { padding: 12px; border-radius: 18px; } .theme-tile b { font-size: 24px; } }

/* Backup flow: device → encrypted → your Drive → other device */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; max-width: 1040px; margin-inline: auto; }
.flow li { position: relative; list-style: none; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 26px 18px; margin: 0 10px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); text-align: center; }
.flow ol { display: contents; }
.flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; inset-inline-end: -21px; width: 22px; height: 2px; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px);
}
.flow .badge { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--tone, var(--accent)); color: var(--ink); }
.flow .badge .icon { width: 28px; height: 28px; }
.flow strong { font: 700 17px/1.3 var(--body); }
.flow span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.flow li:nth-child(1) { --tone: var(--butter); } .flow li:nth-child(2) { --tone: var(--lilac); } .flow li:nth-child(3) { --tone: var(--mint); } .flow li:nth-child(4) { --tone: var(--sky); }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr 1fr; gap: 16px; } .flow li { margin: 0; } .flow li::after { display: none; } }

/* ---- Reading: the long part of features and guides ---------------------------------------------- */

.read { display: grid; grid-template-columns: 250px minmax(0, 720px); justify-content: center; gap: 64px; align-items: start; }
.read .toc { position: sticky; top: 96px; }
.toc a.is-on { background: var(--paper-deep); color: var(--ink); font-weight: 700; }
.read .prose { font-size: 18.5px; line-height: 1.75; color: var(--ink-soft); }
.read .prose h2 { color: var(--ink); font-size: clamp(28px, 3.2vw, 38px); margin: 64px 0 16px; padding-top: 4px; }
.read .prose h2:first-child, .read .prose > .in-short + h2 { margin-top: 0; }
.read .prose h3 { color: var(--ink); }
.read .prose strong { color: var(--ink); }
.read .prose a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.read .prose a:hover { text-decoration-color: var(--ink); }
.read .prose ul { list-style: none; padding-inline-start: 0; }
.read .prose ul > li { position: relative; padding-inline-start: 28px; }
.read .prose ul > li::before { content: ""; position: absolute; inset-inline-start: 6px; top: .72em; width: 8px; height: 8px; border-radius: 3px; background: var(--accent, var(--butter)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); }
.read .prose ol { padding-inline-start: 0; list-style: none; counter-reset: li; }
.read .prose ol > li { counter-increment: li; position: relative; padding-inline-start: 40px; }
.read .prose ol > li::before { content: counter(li); position: absolute; inset-inline-start: 0; top: .2em; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--accent, var(--butter)); color: var(--ink); font: 800 14px/1 var(--body); }
.in-short { margin: 0 0 44px; padding: 24px 26px; border-radius: 24px; background: color-mix(in srgb, var(--accent, var(--butter)) 70%, var(--card)); color: var(--ink); }
.in-short strong { display: block; margin-bottom: 10px; font: 700 13px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.in-short ul { margin: 0 !important; }
.in-short li { margin-bottom: 8px; font-size: 17px; line-height: 1.55; }
.in-short li:last-child { margin-bottom: 0; }
@media (max-width: 980px) { .read { grid-template-columns: 1fr; gap: 24px; } .read .toc { position: static; } }

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
[dir="rtl"] .progress i { transform-origin: 100% 50%; }

/* Questions: heading beside the answers */
.faq2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.faq2 h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 14px; }
.faq2 .faq { max-width: none; margin: 0; }
.faq2 > div:first-child p { color: var(--muted); }
@media (max-width: 900px) { .faq2 { grid-template-columns: 1fr; gap: 24px; } }

/* Cards that lead elsewhere */
.lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.lcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.lcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.lcard .badge { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 12px; background: var(--tone, var(--butter)); color: var(--ink); }
.lcard small { font: 700 12.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lcard strong { font: 700 19px/1.3 var(--body); }
.lcard > span:not(.badge) { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.lcard .go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); }
.lcard .go .icon { width: 17px; height: 17px; stroke-width: 2.3; transition: transform .2s ease; }
.lcard:hover .go .icon { transform: translateX(3px); }
.tone-butter { --tone: var(--butter); } .tone-sky { --tone: var(--sky); } .tone-sage { --tone: var(--sage); } .tone-lilac { --tone: var(--lilac); }
.tone-peach { --tone: var(--peach); } .tone-rose { --tone: var(--rose); } .tone-mint { --tone: var(--mint); }

/* The features hub: a bento of every feature */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .lcard { grid-column: span 2; }
.bento .lcard.wide { grid-column: span 3; padding-bottom: 0; }
.bento .lcard.half { grid-column: span 3; }
.bento .lcard.wide .shot { margin: 18px -24px 0; padding: 0 0 0 24px; }
.bento .lcard.wide .browser { border-end-start-radius: 0; border-end-end-radius: 0; border-start-end-radius: 0; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .lcard, .bento .lcard.wide { grid-column: span 1; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } }

/* Closing: the band with the app peeking out */
.closing2 { text-align: center; }
.closing2 .band { padding: 80px 48px 0; }
.closing2 .band .lead { margin-inline: auto; }
.closing2 .cta-row { justify-content: center; }
.closing2 .peek { max-width: 900px; margin: 36px auto 0; }
.closing2 .peek .browser { border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5); }
.closing2 .peek img { aspect-ratio: 16 / 6.2; object-fit: cover; object-position: 50% 0; }
@media (max-width: 640px) { .closing2 .band { padding: 56px 20px 0; } }

/* ---- Templates ------------------------------------------------------------------------------- */

.tx { position: relative; padding: 32px 0 24px; overflow-x: clip; isolation: isolate; }
.tx::before { content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: -1; background: radial-gradient(46% 60% at 85% 30%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%), radial-gradient(30% 40% at 0% 0%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%); }
.tx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: center; }
.tx h1 { font-size: clamp(40px, 5.4vw, 68px); margin: 18px 0 18px; letter-spacing: -.045em; }
.tx .lead { margin-bottom: 26px; }
.tx .cta-row { margin-bottom: 18px; }
.tx .trust { justify-content: flex-start; }
.tx-stage { padding: 44px 40px; }
.tx-stage .tpl-sheet { transform: rotate(-1.5deg); box-shadow: 0 40px 80px -36px rgba(30, 27, 38, .5), inset 0 0 0 1px var(--line); }
.tx-stage .float-card { position: absolute; z-index: 2; }
.tx-stage .float-card.saved { inset-inline-end: 18px; inset-inline-start: auto; bottom: 18px; }
.tx-stage .float-card.popup { width: auto; max-width: 290px; top: 18px; inset-inline-end: 18px; inset-inline-start: auto; padding: 12px 14px; border-radius: 20px; animation: float 6s ease-in-out infinite; }
.tx-stage .popup .bell { width: 38px; height: 38px; }
.tx-stage .popup .title { font-size: 15px; margin-bottom: 0; }
@media (max-width: 960px) { .tx-hero { grid-template-columns: 1fr; gap: 32px; } .tx-stage { padding: 32px 22px; } }
@media (max-width: 560px) { .tx-stage .float-card.popup { display: none; } }

.tx-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.tx-main > section + section { margin-top: 64px; }
.tx-main h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 20px; }
.tx-aside { position: sticky; top: 96px; display: grid; gap: 14px; padding: 22px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.tx-aside .tpl-mini { height: 150px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.tx-aside h2 { font: 700 20px/1.25 var(--body); margin: 4px 0 0; letter-spacing: -.01em; }
.tx-aside dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 15px; }
.tx-aside dt { color: var(--muted); }
.tx-aside dd { margin: 0; font-weight: 600; text-align: end; }
.tx-aside .btn { width: 100%; }
.tx-aside .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tx-aside .row .btn { min-height: 44px; padding: 0 12px; font-size: 14.5px; }
.tx-aside .btn .icon { width: 18px; height: 18px; }
.tx-aside .fine { margin: 0; text-align: center; font-size: 13.5px; color: var(--muted); }
@media (max-width: 960px) { .tx-body { grid-template-columns: 1fr; } .tx-aside { position: static; order: -1; } .tx-aside .tpl-mini { display: none; } }

.inventory { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inventory li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.inventory .badge { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tone, var(--accent)); color: var(--ink); }
.inventory .badge .icon { width: 20px; height: 20px; }
.inventory strong { color: var(--ink); }
.inventory li:nth-child(5n+1) { --tone: var(--accent); } .inventory li:nth-child(5n+2) { --tone: var(--accent-2); } .inventory li:nth-child(5n+3) { --tone: var(--accent-3); }
.inventory li:nth-child(5n+4) { --tone: var(--butter); } .inventory li:nth-child(5n+5) { --tone: var(--sage); }
.tips { list-style: none; counter-reset: tip; margin: 0; padding: 0; display: grid; gap: 12px; }
.tips li { counter-increment: tip; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px 22px; border-radius: 22px; background: color-mix(in srgb, var(--accent) 55%, var(--card)); font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.tips li::before { content: counter(tip, decimal-leading-zero); font: 800 22px/1.2 var(--display); letter-spacing: -.03em; opacity: .55; }
.tx-main .steps { grid-template-columns: 1fr; }
.tx-main .steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 20px 22px; }
.tx-main .steps li::before { grid-row: span 2; margin: 0; width: 40px; height: 40px; font-size: 17px; }
.tx-main .steps li::after { display: none; }

/* Template cards: the note on a coloured stage */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.tcard { display: flex; flex-direction: column; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.tcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -34px rgba(30, 27, 38, .45); }
.tcard .stage { margin: 8px 8px 0; border-radius: 22px; padding: 20px 22px 0; height: 196px; }
.tcard .tpl-mini { height: 200px; border-radius: 14px 14px 0 0; transform: rotate(-2deg) translateY(4px); transform-origin: 50% 100%; box-shadow: 0 18px 40px -18px rgba(30, 27, 38, .45), inset 0 0 0 1px var(--line); -webkit-mask-image: none; mask-image: none; transition: transform .25s ease; }
.tcard:hover .tpl-mini { transform: rotate(0) translateY(0); }
.tcard-body { display: grid; gap: 4px; padding: 16px 20px 20px; }
.tcard-body strong { font: 700 18px/1.3 var(--body); }
.tcard-body > span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tags span { padding: 4px 10px; border-radius: 999px; background: var(--paper-deep); font: 600 12.5px/1.3 var(--body); color: var(--ink-soft); }
.tcard.big .stage { height: 270px; padding: 28px 32px 0; }
.tcard.big .tpl-mini { height: 280px; --lh: 24px; font-size: calc(14px * var(--s-scale, 1)); }
.tcard.big .tcard-body strong { font-size: 21px; }
.tgrid.featured { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tgrid.featured { grid-template-columns: 1fr; } }
.stage[data-tone="BUTTER"] { --accent: var(--butter); } .stage[data-tone="SKY"] { --accent: var(--sky); } .stage[data-tone="SAGE"] { --accent: var(--sage); }
.stage[data-tone="LILAC"] { --accent: var(--lilac); } .stage[data-tone="PEACH"] { --accent: var(--peach); } .stage[data-tone="ROSE"] { --accent: var(--rose); }
.stage[data-tone="MINT"] { --accent: var(--mint); } .stage[data-tone="AQUA"] { --accent: var(--sky); } .stage[data-tone="LIME"] { --accent: var(--sage); }
.stage[data-tone="SAND"] { --accent: var(--peach); } .stage[data-tone="STONE"] { --accent: var(--paper-deep); } .stage[data-tone="DEFAULT"] { --accent: var(--paper-deep); }

/* The gallery: search and groups */
.gx { position: relative; padding: 36px 0 8px; text-align: center; overflow-x: clip; isolation: isolate; }
.gx::before { content: ""; position: absolute; inset: 0 0 auto; height: 620px; z-index: -1; background: radial-gradient(40% 60% at 20% 20%, color-mix(in srgb, var(--butter) 85%, transparent), transparent 70%), radial-gradient(36% 50% at 85% 10%, color-mix(in srgb, var(--sky) 80%, transparent), transparent 70%), radial-gradient(30% 40% at 60% 70%, color-mix(in srgb, var(--rose) 60%, transparent), transparent 70%); }
.gx .crumbs ol { justify-content: center; }
.gx h1 { font-size: clamp(44px, 6.6vw, 84px); margin: 18px auto 18px; letter-spacing: -.045em; max-width: 14ch; }
.gx .hx-lead { margin-bottom: 30px; }
.search { position: relative; max-width: 560px; margin: 0 auto 22px; }
.search .icon { position: absolute; inset-inline-start: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; min-height: 60px; padding: 0 22px 0 54px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font: 500 17px/1.2 var(--body); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
[dir="rtl"] .search input { padding: 0 54px 0 22px; }
.search input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto; max-width: 980px; }
.filters a, .filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; }
.filters a:hover, .filters button:hover { background: var(--paper-deep); color: var(--ink); }
.filters [aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.filters b { font-weight: 700; opacity: .55; }
.tgroups { padding-bottom: 32px; }
.tgroup { scroll-margin-top: 96px; }
.tgroup + .tgroup { margin-top: 64px; }
.tgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 22px; }
.tgroup-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.tgroup-head p { margin: 0; color: var(--muted); font-size: 17px; }
.tgroup-head .count { margin-inline-start: auto; font: 700 14px/1 var(--body); color: var(--muted); }
.empty { display: none; padding: 48px 16px; text-align: center; color: var(--muted); font-size: 18px; }
.is-filtering .tgroup:not(.has-match), .is-filtering .tcard.no-match { display: none; }
.is-filtering .tgroup + .tgroup { margin-top: 40px; }
.is-filtering.no-results .empty { display: block; }
.is-filtering .featured-wrap { display: none; }

/* ---- Guides -------------------------------------------------------------------------------------- */

.gh { position: relative; padding: 36px 0 0; text-align: center; overflow-x: clip; isolation: isolate; }
.gh::before { content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; background: radial-gradient(42% 46% at 20% 26%, color-mix(in srgb, var(--accent) 80%, transparent), transparent 70%), radial-gradient(36% 40% at 86% 18%, color-mix(in srgb, var(--accent-2) 65%, transparent), transparent 70%); }
.gh .crumbs ol { justify-content: center; }
.gh h1 { font-size: clamp(40px, 5.8vw, 74px); max-width: 17ch; margin: 18px auto 20px; letter-spacing: -.045em; line-height: 1; }
.gh .hx-lead { margin-bottom: 22px; }
.byline2 { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-size: 15.5px; color: var(--muted); }
.byline2 img { width: 34px; height: 34px; border-radius: 10px; }
.byline2 strong { color: var(--ink); }
.byline2 .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.cover { position: relative; max-width: 1080px; margin: 44px auto 0; padding: 40px 48px 0; border-radius: 36px 36px 0 0; overflow: hidden; }
.cover .browser { border-end-start-radius: 0; border-end-end-radius: 0; }
.cover .browser img { aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 0; }
.cover .phone { position: absolute; width: 190px; inset-inline-end: 34px; bottom: -120px; transform: rotate(5deg); }
@media (max-width: 640px) { .cover { padding: 20px 16px 0; border-radius: 24px 24px 0 0; } .cover .phone { width: 110px; inset-inline-end: 10px; bottom: -60px; padding: 5px; border-radius: 22px; } .cover .phone img { border-radius: 18px; } }

.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 20px; }
.gcard { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.gcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -34px rgba(30, 27, 38, .45); }
.gcard .stage { margin: 8px 8px 0; border-radius: 22px; padding: 22px 0 0 22px; height: 210px; }
[dir="rtl"] .gcard .stage { padding: 22px 22px 0 0; }
.gcard .stage .browser { border-end-start-radius: 0; border-end-end-radius: 0; border-start-end-radius: 0; height: 100%; }
.gcard .stage .browser img { height: calc(100% - 40px); object-fit: cover; object-position: 0 0; }
.gcard-body { display: grid; gap: 8px; padding: 18px 22px 24px; }
.gcard-body small { font-size: 14px; color: var(--muted); }
.gcard-body strong { font: 800 23px/1.15 var(--display); letter-spacing: -.025em; }
.gcard-body span { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.gcard.big { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
.gcard.big .stage { height: auto; min-height: 340px; margin: 8px 0 8px 8px; }
.gcard.big .gcard-body { align-content: center; padding: 36px; }
.gcard.big .gcard-body strong { font-size: clamp(28px, 3vw, 38px); }
@media (max-width: 860px) { .gcard.big { grid-template-columns: 1fr; } .gcard.big .stage { min-height: 240px; margin: 8px 8px 0; } }

.mt { margin-top: 20px; }
.tx-figure { margin: 0; }
.hx-stage.flow-stage { padding-top: 8px; }
.hx-stage.flow-stage::before { inset: 0 10%; }
/* Search and filters need the page script. */
html:not(.js) .search, html:not(.js) .filters { display: none; }

/* ---- Feature cards in note colours, each with a little picture of the app (scripts/seo-pages.mjs ART) */

.lcard.tinted { background: color-mix(in srgb, var(--tone, var(--butter)) 34%, var(--card)); box-shadow: inset 0 0 0 1px var(--ring); }
.lcard.tinted:hover { box-shadow: inset 0 0 0 1px var(--ring), var(--lift); }
.lcard.tinted .badge { background: var(--card); }
.lcard.tinted > span:not(.badge):not(.art-wrap):not(.go):not(.shot) { color: var(--ink-soft); }
.lcard.tinted small { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.art-wrap {
  position: relative; display: grid; place-items: center; height: 156px; margin: -10px -10px 18px; border-radius: 20px; overflow: hidden;
  background-color: color-mix(in srgb, var(--tone, var(--butter)) 75%, var(--card));
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1.4px, transparent 1.8px); background-size: 20px 20px;
}
.art { position: relative; display: grid; place-items: center; color: var(--ink); font-family: var(--body); text-align: start; }
.art .icon { width: 24px; height: 24px; }
.art .sheet {
  display: grid; gap: 8px; width: 176px; padding: 14px 16px; border-radius: 14px; background: var(--card);
  box-shadow: 0 16px 30px -16px rgba(30, 27, 38, .38), inset 0 0 0 1px var(--ring); transform: rotate(-3deg);
  transition: transform .35s ease;
}
.lcard:hover .art .sheet { transform: rotate(0) translateY(-3px); }
.art .tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--card);
  font: 600 12.5px/1 var(--body); white-space: nowrap; box-shadow: 0 10px 22px -14px rgba(30, 27, 38, .4), inset 0 0 0 1px var(--ring);
}
.art .tag .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.art .box {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--card);
  box-shadow: 0 14px 26px -14px rgba(30, 27, 38, .4), inset 0 0 0 1px var(--ring);
}
.art .box.on { background: var(--ink); color: var(--paper); }
.art .box .icon { width: 27px; height: 27px; }
/* A note being written */
.art-note b { font: 800 17px/1.1 var(--display); letter-spacing: -.02em; }
.art-note i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.art-note i.s { width: 58%; }
.art-note .caret { width: 2px; height: 15px; margin-top: -4px; background: var(--ink); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* A locked note */
.art-lock .sheet { justify-items: center; width: 150px; padding: 18px 16px; gap: 14px; transform: rotate(3deg); }
.art-lock .icon { width: 26px; height: 26px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: var(--tone, var(--lilac)); }
.art-lock .pin { display: flex; gap: 9px; }
.art-lock .pin i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.art-lock .pin i:last-child { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
/* A checklist */
.art-list .row { display: flex; align-items: center; gap: 9px; font: 600 14px/1.2 var(--body); }
.art-list .row i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--ink); }
.art-list .row.on { color: var(--muted); text-decoration: line-through; }
.art-list .row.on i { background: var(--ink); color: var(--paper); }
.art-list .row i .icon { width: 12px; height: 12px; stroke-width: 3; }
/* A reminder ringing */
.art-remind { gap: 10px; }
.art-remind .pop { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: 0 16px 30px -16px rgba(30, 27, 38, .38), inset 0 0 0 1px var(--ring); animation: float 6s ease-in-out infinite; }
.art-remind .bell { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--peach); color: #6A3A28; }
.art-remind .bell .icon { width: 18px; height: 18px; fill: currentColor; stroke-width: 1.3; }
.art-remind small { display: block; font: 500 11.5px/1.2 var(--body); color: var(--muted); margin-bottom: 2px; }
.art-remind b { font: 700 14.5px/1.25 var(--body); }
.art-remind .tag { justify-self: end; margin-inline-end: -20px; }
/* Device to device, locked on the way */
.art-flow { display: flex; align-items: center; }
.art-flow .dash { width: 54px; height: 2px; background-image: linear-gradient(90deg, var(--ink) 55%, transparent 55%); background-size: 10px 2px; opacity: .55; animation: dash 1s linear infinite; }
[dir="rtl"] .art-flow .dash { animation-direction: reverse; }
@keyframes dash { to { background-position: 10px 0; } }
/* No signal, still saved */
.art-offline { gap: 12px; }
.art-offline .tag i { width: 8px; height: 8px; border-radius: 50%; background: #3E9B5A; box-shadow: 0 0 0 4px color-mix(in srgb, #3E9B5A 22%, transparent); }
/* A voice note playing */
.art-voice .player { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px; background: var(--card); box-shadow: 0 16px 30px -16px rgba(30, 27, 38, .38), inset 0 0 0 1px var(--ring); }
.art-voice .play { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--ink); }
.art-voice .play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--paper); transform: translateX(2px); }
.art-voice .wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.art-voice .wave i { width: 3px; height: 30%; border-radius: 2px; background: var(--ink); opacity: .8; animation: wave 1.3s ease-in-out infinite; }
.art-voice .wave i:nth-child(3n+1) { height: 55%; animation-delay: -.2s; }
.art-voice .wave i:nth-child(3n+2) { height: 85%; animation-delay: -.5s; }
.art-voice .wave i:nth-child(4n) { height: 40%; animation-delay: -.8s; }
.art-voice .wave i:nth-child(n+12) { opacity: .3; animation: none; }
.art-voice small { font: 600 12.5px/1 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes wave { 50% { transform: scaleY(.45); } }
/* Urdu in Nastaliq */
.art-urdu .sheet { width: 186px; gap: 0; transform: rotate(2.5deg); text-align: right; font-family: "Memlow Nastaliq", var(--body); }
.art-urdu b { font-size: 20px; font-weight: 700; line-height: 2.1; }
.art-urdu span { font-size: 15px; line-height: 2.1; color: var(--ink-soft); }
/* Themes: a fan of notes */
.art-themes { display: flex; }
.art-themes i { width: 64px; height: 84px; margin-inline-start: -18px; border-radius: 13px; box-shadow: 0 14px 26px -14px rgba(30, 27, 38, .45), inset 0 0 0 1px var(--ring); }
.art-themes i:nth-child(1) { margin: 0; background: var(--butter); transform: rotate(-10deg); }
.art-themes i:nth-child(2) { background: var(--sky); transform: rotate(-3deg) translateY(-6px); }
.art-themes i:nth-child(3) { background: var(--rose); transform: rotate(4deg); }
.art-themes i:nth-child(4) { background: var(--sage); transform: rotate(11deg) translateY(4px); }

/* ---- Features up close: words and points beside the app (the home page) --------------------------- */

.frow-sx { padding: 56px 0; }
.frow { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.frow.flip .frow-copy { order: 2; }
.frow-copy .pill { margin-bottom: 18px; }
.frow h2 { font-size: clamp(32px, 4vw, 50px); letter-spacing: -.04em; line-height: 1.02; margin-bottom: 16px; }
.frow h2 em { font-style: normal; padding-inline: .05em; background: linear-gradient(transparent 60%, var(--accent) 60%, var(--accent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.frow-lead { font-size: 19px; line-height: 1.55; color: var(--muted); margin-bottom: 26px; }
.frow-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.frow-points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.frow-points .badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--accent); color: var(--ink); }
.frow-points .badge .icon { width: 19px; height: 19px; }
.frow-points li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--muted); }
.frow-points strong { display: block; margin-bottom: 3px; font: 700 16.5px/1.3 var(--body); color: var(--ink); }
.frow-visual { position: relative; padding-block: 48px; padding-inline: 48px 0; }
.frow.flip .frow-visual { padding-inline: 0 48px; }
.frow-visual .browser { border-start-end-radius: 0; border-end-end-radius: 0; box-shadow: 0 40px 80px -36px rgba(30, 27, 38, .5), 0 0 0 1px var(--line); }
.frow.flip .frow-visual .browser { border-radius: 18px; border-start-start-radius: 0; border-end-start-radius: 0; }
.frow-visual .browser.crop img { aspect-ratio: 16 / 10.5; }
.frow-visual .phone { position: absolute; z-index: 2; width: 150px; padding: 7px; border-radius: 30px; inset-inline-end: 28px; bottom: 22px; transform: rotate(4deg); }
.frow-visual .phone img { border-radius: 24px; }
.frow.flip .frow-visual .phone { inset-inline-end: auto; inset-inline-start: 28px; transform: rotate(-4deg); }
@media (max-width: 960px) {
  .frow { grid-template-columns: 1fr; gap: 28px; }
  .frow.flip .frow-copy { order: 0; }
  .frow-visual { padding-block: 28px; padding-inline: 28px 0; }
  .frow.flip .frow-visual { padding-inline: 0 28px; }
}
@media (max-width: 600px) {
  .frow-points { grid-template-columns: 1fr; gap: 16px; }
  .frow-visual .phone { width: 104px; padding: 5px; border-radius: 22px; bottom: 12px; }
  .frow-visual .phone img { border-radius: 18px; }
}

/* ---- Guides: the one to start with, then all of them ---------------------------------------------- */

.gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gcards { grid-template-columns: 1fr; } }
.gcard { box-shadow: inset 0 0 0 1px var(--ring); }
.gcard:hover { box-shadow: inset 0 0 0 1px var(--ring), var(--lift); }
.gcard-body { gap: 10px; padding: 18px 22px 24px; }
.gcard-body > span:not(.gmeta):not(.go) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gcard-body .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 15px/1.2 var(--body); color: var(--ink); }
.gcard-body .go .icon { width: 17px; height: 17px; stroke-width: 2.3; transition: transform .2s ease; }
.gcard:hover .go .icon { transform: translateX(3px); }
[dir="rtl"] .gcard:hover .go .icon { transform: scaleX(-1) translateX(3px); }
.gmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 600 13.5px/1.2 var(--body); color: var(--muted); }
.gmeta b { padding: 5px 11px; border-radius: 999px; background: var(--tone, var(--butter)); color: var(--ink); font: 700 12.5px/1.2 var(--body); letter-spacing: .01em; }
.gcard .gcard-body strong { font-size: 22px; }

.gfeature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); border-radius: 36px; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--ring), var(--lift); }
.gfeature-cover { position: relative; display: block; min-height: 440px; margin: 10px; padding-block-start: 40px; padding-inline-start: 40px; border-radius: 28px; overflow: hidden; }
.gfeature-cover .browser { position: absolute; inset-block: 40px 0; inset-inline: 40px 0; border-start-end-radius: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
.gfeature-cover .browser img { height: calc(100% - 40px); object-fit: cover; object-position: 0 0; }
.gfeature-cover .phone { position: absolute; z-index: 2; width: 150px; padding: 7px; border-radius: 30px; inset-inline-end: 26px; bottom: -36px; transform: rotate(5deg); }
.gfeature-cover .phone img { border-radius: 24px; }
.gfeature-body { display: grid; align-content: center; justify-items: start; gap: 14px; padding: 40px 44px; }
.gfeature h2 { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.04em; line-height: 1.04; }
.gfeature h2 a { text-decoration: none; }
.gfeature h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.gfeature p { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--muted); }
.gfeature-toc { list-style: none; counter-reset: gt; display: grid; gap: 9px; margin: 6px 0 10px; padding: 16px 0 0; border-top: 1px solid var(--line); width: 100%; }
.gfeature-toc li { counter-increment: gt; display: grid; grid-template-columns: 28px 1fr; align-items: baseline; font-size: 15.5px; line-height: 1.4; color: var(--ink-soft); }
.gfeature-toc li::before { content: counter(gt, decimal-leading-zero); font: 800 13px/1 var(--display); color: var(--muted); }
@media (max-width: 900px) {
  .gfeature { grid-template-columns: 1fr; }
  .gfeature-cover { min-height: 280px; }
  .gfeature-body { padding: 14px 26px 30px; }
}
/* ---- Print: a template prints as the note itself ------------------------------------------------ */

@media print {
  .site-header, .site-footer, .crumbs, .cta-row, .trust, .tx-copy .pill, .tx-aside, .closing2, .sx, .float-card, .progress, .skip-link, .tx-copy .lead { display: none !important; }
  body { background: #fff; }
  .tx { padding: 0; }
  .tx::before { display: none; }
  .tx-hero { display: block; }
  .tx-copy h1 { font-size: 20pt; margin: 0 0 12pt; }
  .tx-stage { padding: 0; background: none !important; }
  .tx-stage .tpl-sheet { transform: none; box-shadow: none; border: 1px solid #ccc; }
  .tx-figure figcaption { display: none; }
}