/* Shared visual refresh for tools, guides, and Ryla editorial pages.
   Page architecture stays role-specific; the brand language now matches the
   bold bordered system used by the AnmolApps product pages. */

:root {
  --aa-ink: #111528;
  --aa-ink-soft: #383d53;
  --aa-paper: #fffdf7;
  --aa-paper-2: #f4f1e8;
  --aa-yellow: #ffd84d;
  --aa-violet: #7765ed;
  --aa-violet-dark: #5140c8;
  --aa-mint: #84e6c3;
  --aa-coral: #ff7b6f;
  --aa-line: rgba(17, 21, 40, 0.14);
  --aa-shadow: 7px 7px 0 #111528;
  --aa-radius: 24px;
}

/* Ryla originally shipped with dark-theme semantic tokens. Its refreshed
   editorial surfaces are light, so reset the entire token family at the page
   root to keep every legacy article variant readable. */
.ryla-light {
  --ink: #111528;
  --ink-2: #2f354a;
  --sub: #4f566b;
  --sub-2: #686f82;
  --bg: #fffdf7;
  --bg-off: #f4f1e8;
  --bg-2: #f8f6ef;
  --surface: #ffffff;
  --border: rgba(17, 21, 40, 0.16);
  --border-2: #858a99;
  --brand: #5140c8;
  --brand-hover: #3d2db7;
  --brand-light: #edeaff;
  --brand-muted: #c9c1ff;
  --brand-text: #382aa0;
  --safe: #137344;
  --safe-bg: #e7fff6;
  --safe-border: #2d7c5b;
  --safe-text: #125b3c;
  --danger: #b42318;
  --danger-bg: #fff0ec;
  --danger-border: #cf594c;
  --danger-text: #7a1c17;
  --shadow-xs: 0 1px 3px rgba(17,21,40,.08);
  --shadow-sm: 0 3px 8px rgba(17,21,40,.09);
  --shadow-md: 0 8px 20px rgba(17,21,40,.1);
  --shadow-lg: 0 16px 36px rgba(17,21,40,.12);
  --shadow-xl: 0 24px 54px rgba(17,21,40,.15);
  background: var(--aa-paper-2);
  color: var(--aa-ink);
}

.ryla-light .stat-box {
  border-color: var(--safe-border);
  background: rgba(255,255,255,.72);
}

/* Ryla answers should never depend on an observer firing before they can be
   read. This also prevents tall mobile link panels from sitting transparent
   until more than ten percent of the panel enters the viewport. */
.ryla-light .animate-fade-up {
  opacity: 1;
  transform: none;
}

/* Shared brand shell */
.nav {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 76px;
  border-bottom: 1px solid var(--aa-line);
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav__inner {
  width: min(calc(100% - 40px), 1180px);
  max-width: none;
  height: 100%;
  margin-inline: auto;
  padding: 0;
  gap: 28px;
}

.nav__brand {
  gap: 11px;
  color: var(--aa-ink);
  font-size: 1rem;
  font-weight: 900;
}

.nav__brand::before {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 2px solid var(--aa-ink);
  border-radius: 12px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  content: "A";
  font-size: 0.92rem;
  font-weight: 950;
}

.nav__dot { display: none; }
.nav__links { justify-content: flex-end; gap: 20px; }

.nav__link {
  padding: 7px 0;
  border-radius: 0;
  color: var(--aa-ink-soft);
  font-size: 0.9rem;
  font-weight: 750;
}

.nav__link:hover { background: transparent; color: var(--aa-violet-dark); }

.nav__actions .btn-store {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 17px;
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
}

.footer {
  border-top: 0;
  background: var(--aa-ink);
  color: #fff;
}

.footer__tools {
  max-width: 1180px;
  border-color: rgba(255,255,255,.14);
}

.footer__tools-label { color: var(--aa-yellow); }
.footer__tools-link { color: rgba(255,255,255,.72); }
.footer__tools-link:hover { color: var(--aa-yellow); }
.footer__inner { max-width: 1180px; }
.footer__brand { color: #fff; }
.footer__copy { color: rgba(255,255,255,.55); }
.footer .btn-store { border-color: rgba(255,255,255,.28); color: #fff; }

/* Tools: preserve immediate utility, change the visual system. */
.tools-page,
.tool-page {
  --tool-bg: var(--aa-paper-2);
  --tool-surface: #fff;
  --tool-soft: var(--aa-paper);
  --tool-soft-2: #efece3;
  --tool-border: var(--aa-line);
  --tool-border-strong: var(--aa-ink);
  --tool-ink: var(--aa-ink);
  --tool-body: var(--aa-ink-soft);
  --tool-muted: #666b7d;
  --tool-dark: var(--aa-ink);
  --tool-teal: var(--aa-violet);
  --tool-teal-dark: var(--aa-violet-dark);
  --tool-teal-soft: #e9e5ff;
  background: var(--aa-paper-2);
  color: var(--aa-ink-soft);
}

.tools-hero,
.tool-detail-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: var(--aa-paper);
  color: var(--aa-ink);
}

.tools-hero::before,
.tool-detail-hero::before {
  position: absolute;
  z-index: 0;
  top: -260px;
  right: -160px;
  width: 720px;
  height: 720px;
  border: 100px solid rgba(119,101,237,.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.tools-hero__inner,
.tool-detail-hero__inner { position: relative; z-index: 1; }

.tool-breadcrumb--dark,
.tool-breadcrumb--dark a { color: var(--aa-ink-soft); }
.tool-breadcrumb--dark a:hover { color: var(--aa-violet-dark); }

.tool-kicker {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.tool-kicker__dot { background: var(--aa-violet); box-shadow: none; }

.tools-hero h1,
.tool-detail-hero h1 {
  max-width: 900px;
  color: var(--aa-ink);
  font-weight: 950;
  letter-spacing: -.055em;
}

.tools-hero__summary,
.tool-detail-hero__summary { color: var(--aa-ink-soft); }

.tool-chips span {
  border: 1px solid var(--aa-line);
  background: #fff;
  color: var(--aa-ink-soft);
}

.tools-hero__panel,
.tool-app-card {
  padding: 24px;
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
  color: var(--aa-ink);
}

.tools-hero__panel-label,
.tool-app-card__eyebrow { color: var(--aa-violet-dark); }

.tools-hero__quick a {
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  background: var(--aa-paper-2);
}

.tools-hero__quick a:hover {
  border-color: var(--aa-ink);
  background: var(--aa-yellow);
}

.tools-hero__quick strong,
.tool-app-card h2 { color: var(--aa-ink); }
.tools-hero__quick span,
.tool-app-card__copy { color: var(--aa-ink-soft); }
.tool-app-card__link { color: var(--aa-violet-dark); }

.tool-cluster,
.tool-panel,
.tool-related,
.tool-faq {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
}

.tool-cluster { padding: clamp(22px, 4vw, 34px); }

.tool-card {
  border: 2px solid var(--aa-ink);
  border-radius: 20px;
  background: var(--aa-paper);
  box-shadow: 4px 4px 0 var(--aa-ink);
}

.tool-card:hover {
  border-color: var(--aa-ink);
  box-shadow: 7px 7px 0 var(--aa-ink);
  transform: translate(-3px, -3px);
}

.tool-card__media,
.tool-related__media {
  border: 2px solid var(--aa-ink);
  border-radius: 13px;
  background: var(--aa-yellow);
}

.tool-card__app,
.tool-card__label,
.tool-section-eyebrow { color: var(--aa-violet-dark); }
.tool-card__action,
.tool-card__go { color: var(--aa-ink); }

.tool-workspace { padding-top: 44px; }

.tool-panel__header {
  border-bottom: 2px solid var(--aa-ink);
  background: var(--aa-yellow);
}

.tool-panel__body { background: #fff; }

.tool-cta {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: var(--aa-ink);
  box-shadow: 7px 7px 0 var(--aa-violet);
}

.tool-btn {
  min-height: 46px;
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  font-weight: 850;
}

.tool-btn--primary,
.tool-btn--appstore {
  background: var(--aa-yellow);
  color: var(--aa-ink);
}

.tool-btn--primary:hover,
.tool-btn--appstore:hover { background: #ffe577; color: var(--aa-ink); }

.tool-btn--ghost { background: #fff; }

.tool-related__item,
.tool-faq details,
.sn-card,
.rewrite-card,
.grammar-issue,
.correction-output,
.tool-hub,
.grocery-card,
.allergen-fieldset {
  border-color: var(--aa-line);
  border-radius: 16px;
  background: var(--aa-paper);
}

.tool-related__item:hover,
.tool-hub__grid a:hover { border-color: var(--aa-ink); box-shadow: 4px 4px 0 var(--aa-ink); }

.tool-input,
.tool-textarea,
.tool-select {
  border: 2px solid var(--aa-ink);
  border-radius: 14px;
  background: #fff;
}

.tool-input:focus,
.tool-textarea:focus,
.tool-select:focus {
  border-color: var(--aa-violet);
  box-shadow: 0 0 0 4px rgba(119,101,237,.16);
}

.tool-copy h2,
.tool-hub h2 { letter-spacing: -.035em; }

/* Published guide hub and article pages. */
.guide-index,
.guide-page {
  background: var(--aa-paper-2);
  color: var(--aa-ink);
}

.guide-index__hero,
.guide-page .guide-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: var(--aa-paper);
  color: var(--aa-ink);
}

.guide-index__hero::after,
.guide-page .guide-hero::after {
  position: absolute;
  right: -100px;
  bottom: -230px;
  width: 440px;
  height: 440px;
  border: 70px solid rgba(119,101,237,.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.guide-index__eyebrow,
.guide-page .guide-kicker {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.guide-index h1,
.guide-page .guide-hero h1 {
  color: var(--aa-ink);
  font-weight: 950;
  letter-spacing: -.055em;
}

.guide-index__sub,
.guide-page .guide-hero__summary { color: var(--aa-ink-soft); }

.guide-index__stats,
.guide-page .guide-product {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
}

.guide-index__stats strong,
.guide-page .guide-product__name { color: var(--aa-ink); }
.guide-index__stats span,
.guide-page .guide-product__copy,
.guide-page .guide-product__label { color: var(--aa-ink-soft); }

.guide-page .guide-button--primary {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
}

.guide-page .guide-button--secondary {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--aa-ink);
}

.guide-index__cluster,
.guide-page .guide-article,
.guide-page .toc,
.guide-page .sidebar-cta {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: var(--aa-shadow);
}

.guide-index__card {
  border: 1px solid var(--aa-line);
  border-radius: 16px;
  background: var(--aa-paper);
}

.guide-index__card:hover {
  border-color: var(--aa-ink);
  box-shadow: 4px 4px 0 var(--aa-ink);
}

.guide-index__icon,
.guide-page .guide-product__icon { border: 2px solid var(--aa-ink); box-shadow: 3px 3px 0 var(--aa-ink); }

.guide-page .guide-article h2 { border-color: var(--aa-line); letter-spacing: -.035em; }
.guide-page .guide-article a { color: var(--aa-violet-dark); }

.guide-page .answer-box,
.guide-page .note-box,
.guide-page .warning-box,
.guide-page .source-box,
.guide-page .guide-faq details {
  border: 2px solid var(--aa-ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--aa-ink);
}

.guide-page .answer-box { background: #fff6c9; }
.guide-page .note-box { background: #e7fff6; }
.guide-page .warning-box { background: #fff0ec; }

/* Ryla hub */
.list-hero {
  padding-block: clamp(64px, 9vw, 110px);
  border-bottom: 0;
  background: var(--aa-paper);
}

.list-hero::before {
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(119,101,237,.14) 0%, transparent 62%);
}

.list-hero__eyebrow {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.list-hero__title { color: var(--aa-ink); font-weight: 950; }
.list-hero__sub { color: var(--aa-ink-soft); }
.articles-section { max-width: 1180px; }

.article-card {
  min-height: 180px;
  padding: 24px;
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: 5px 5px 0 var(--aa-ink);
}

.article-card:hover {
  border-color: var(--aa-ink);
  box-shadow: 8px 8px 0 var(--aa-ink);
  transform: translate(-3px, -3px);
}

.article-card .badge { align-self: flex-start; background: var(--aa-mint); color: var(--aa-ink); }

.list-hero .btn-store {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 4px 4px 0 var(--aa-ink);
  color: var(--aa-ink);
  font-weight: 850;
}

/* Ryla label-check and category-guide details */
.article-header {
  position: relative;
  overflow: hidden;
  padding-block: clamp(54px, 8vw, 90px);
  border-bottom: 0;
  background: var(--aa-paper);
  color: var(--aa-ink);
}

.article-header::after {
  position: absolute;
  z-index: 0;
  right: -80px;
  bottom: -210px;
  width: 400px;
  height: 400px;
  border: 62px solid rgba(119,101,237,.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.article-header > * { position: relative; z-index: 1; }
.article-breadcrumb { color: var(--aa-ink-soft); }
.article-breadcrumb a { color: var(--aa-violet-dark); }
.article-header .ryla-title { color: var(--aa-ink); font-weight: 950; letter-spacing: -.05em; }

.art-wrap,
.ra-wrap,
.rb-wrap,
.sb-wrap,
.article-layout,
.guide-wrap { background: var(--aa-paper-2); }

.art-wrap .verdict,
.art-wrap .panel,
.article-layout .ryla-alert,
.article-layout .ryla-content,
.article-layout .ryla-faq-item,
.guide-wrap .guide-hero,
.guide-wrap .guide-toc,
.guide-wrap .guide-method,
.guide-wrap .guide-panel,
.guide-wrap .guide-cta,
.aside-cta,
.aside-nav,
.ryla-app-banner {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  box-shadow: 5px 5px 0 var(--aa-ink);
  background: #fff;
}

.art-wrap .verdict,
.article-layout .ryla-alert-safe { background: #e7fff6; }
.art-wrap .verdict--caution,
.article-layout .ryla-alert-caution { background: #fff6c9; }
.article-layout .ryla-alert-danger { background: #fff0ec; }
.article-layout .ryla-alert-risk { background: #fff0ec; }

.art-wrap .panel h2,
.guide-wrap .guide-panel h2 { border-color: var(--aa-line); }

.guide-wrap .guide-hero::before,
.aside-cta::before { background: radial-gradient(circle, rgba(119,101,237,.12), transparent 70%); }

.guide-wrap .guide-hero__label,
.guide-wrap .guide-method__eyebrow,
.guide-wrap .guide-toc a,
.art-wrap .link-list a { color: var(--aa-violet-dark); }

.ryla-app-banner__button {
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: var(--aa-yellow);
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
}

.ryla-app-banner__features span { border-color: var(--aa-line); background: var(--aa-paper-2); }

/* The legacy download banner was designed for a navy panel. The refresh makes
   the panel white, so give every piece of its copy an explicit light-theme
   color instead of retaining the former pale-on-dark values. */
.ryla-light .ryla-app-banner__eyebrow { color: var(--aa-violet-dark); }
.ryla-light .ryla-app-banner__title { color: var(--aa-ink); }
.ryla-light .ryla-app-banner__copy { color: #3f465b; }
.ryla-light .ryla-app-banner__features span { color: #263044; }
.ryla-light .ryla-app-banner__note { color: #5f6679; }

/* The app is the conversion goal for these informational pages. Keep one
   contextual, full-width promotion immediately after the page heading. */
.ryla-app-banner-slot {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}

.ryla-app-banner-slot .ryla-app-banner { margin: 0 0 8px; }

.ryla-light .ryla-app-banner {
  isolation: isolate;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 12px;
  background:
    radial-gradient(circle at 96% 12%, rgba(255, 216, 77, .92) 0 84px, transparent 85px),
    linear-gradient(135deg, #ffffff 0%, #f0edff 62%, #fff7ce 100%);
}

.ryla-light .ryla-app-banner::after {
  position: absolute;
  z-index: -1;
  left: -54px;
  bottom: -84px;
  width: 180px;
  height: 180px;
  border: 34px solid rgba(119, 101, 237, .16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.ryla-app-banner__icon { grid-column: 1; grid-row: 1 / 5; }
.ryla-app-banner__body,
.ryla-app-banner__features,
.ryla-app-banner__button,
.ryla-app-banner__note { grid-column: 2; }
.ryla-app-banner__button { justify-self: start; min-height: 48px; }

.badge-safe,
.badge-risk,
.badge-caution {
  border: 2px solid var(--aa-ink);
  color: var(--aa-ink);
  box-shadow: 2px 2px 0 var(--aa-ink);
}
.badge-safe { background: var(--aa-mint); }
.badge-risk { background: #ffb5a6; }
.badge-caution { background: var(--aa-yellow); }

.verdict-status {
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 2px solid var(--aa-ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--aa-ink);
  color: var(--aa-ink);
  font-size: .78rem;
  font-weight: 850;
}

/* High-contrast source cards replace the inherited translucent navy boxes. */
.ryla-light .ryla-evidence-panel {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: linear-gradient(145deg, #ffffff, #f5f3ff);
  box-shadow: 5px 5px 0 var(--aa-ink);
}

.ryla-light .ryla-evidence-panel__facts div {
  border: 2px solid var(--aa-line);
  background: #fff;
  box-shadow: 2px 2px 0 #d9d4c8;
}

.ryla-light .ryla-evidence-panel__facts dt { color: #665c3e; }
.ryla-light .ryla-evidence-panel__facts dd,
.ryla-light .ryla-evidence-panel__notice,
.ryla-light .ryla-evidence-panel__checklist { color: var(--aa-ink); }
.ryla-light .ryla-evidence-panel__facts a,
.ryla-light .ryla-evidence-panel__details summary { color: var(--aa-violet-dark); }

.ryla-light .ryla-evidence-panel__notice {
  border: 2px solid #e0b900;
  background: #fff6c9;
}

.ryla-light .ryla-evidence-panel__checklist {
  border: 2px solid #58b694;
  background: #e7fff6;
}

.ryla-light .stat-box,
.ryla-light .kpi-box,
.ryla-light .mini-stat {
  border: 2px solid var(--aa-line);
  background: #fff;
  box-shadow: 2px 2px 0 #d9d4c8;
}

.ryla-light .stat-box__label,
.ryla-light .stat-box__val,
.ryla-light .kpi-box__label,
.ryla-light .kpi-box__val,
.ryla-light .mini-stat__label,
.ryla-light .mini-stat__val { color: var(--aa-ink); }

.guide-product__name { overflow-wrap: anywhere; }

.ryla-link-panel {
  border: 2px solid var(--aa-ink);
  border-radius: var(--aa-radius);
  background: #fff;
  box-shadow: 5px 5px 0 var(--aa-ink);
}

.ryla-link-card {
  border-color: var(--aa-line);
  border-radius: 14px;
  background: var(--aa-paper);
}

.ryla-link-card:hover { border-color: var(--aa-ink); background: var(--aa-yellow); }
.ryla-link-card__label,
.ryla-link-panel__eyebrow { color: var(--aa-violet-dark); }

@media (max-width: 760px) {
  .nav { height: 68px; }
  .nav__inner { width: min(calc(100% - 28px), 1180px); }
  .nav__links { display: none; }
  .nav__brand::before { width: 36px; height: 36px; }
  .nav__actions .btn-store { min-height: 40px; padding: 8px 13px; }
  .tools-hero__inner,
  .tool-detail-hero__inner { padding-top: 34px; }
  .tool-cluster,
  .tool-panel,
  .tool-related,
  .tool-faq,
  .guide-index__cluster,
  .guide-page .guide-article { box-shadow: 5px 5px 0 var(--aa-ink); }

  /* On phones the app action precedes the long explanatory copy, so the
     install route is visible before the first scroll on tools and guides. */
  .tool-detail-hero__copy,
  .guide-hero__grid > div:first-child { grid-row: 2; }
  .tool-app-card,
  .guide-product { grid-row: 1; }

  /* A one-column CSS grid still uses an automatic minimum track size. Long
     article copy could therefore make the safe/risk layouts wider than an
     iPhone viewport even after their sidebar stacked. */
  .ryla-light .art-wrap,
  .ryla-light .ra-wrap,
  .ryla-light .rb-wrap,
  .ryla-light .sb-wrap,
  .ryla-light .article-layout {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .ryla-light .art-wrap > *,
  .ryla-light .ra-wrap > *,
  .ryla-light .rb-wrap > *,
  .ryla-light .sb-wrap > *,
  .ryla-light .article-layout > * {
    min-width: 0;
    max-width: 100%;
  }

  .ryla-light .article-header .ryla-title,
  .ryla-light .list-hero__title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Imported editorial tables can have an intrinsic width wider than the
     article column. Keep that width inside a local horizontal scroller rather
     than allowing it to crop the entire page. */
  .ryla-light .ryla-content {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ryla-light .ryla-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ryla-light .article-header { padding-block: 38px; }
  .ryla-light .art-wrap,
  .ryla-light .ra-wrap,
  .ryla-light .rb-wrap,
  .ryla-light .sb-wrap,
  .ryla-light .article-layout,
  .ryla-light .guide-wrap { padding: 22px 16px 68px; }

  .ryla-app-banner-slot .ryla-app-banner {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 17px;
    border-radius: 20px;
    box-shadow: 4px 4px 0 var(--aa-ink);
  }
  .ryla-app-banner__icon {
    grid-column: 1;
    grid-row: 1;
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }
  .ryla-app-banner__body { grid-column: 2; grid-row: 1; }
  .ryla-app-banner__features,
  .ryla-app-banner__button,
  .ryla-app-banner__note { grid-column: 1 / -1; }
  .ryla-app-banner__features { margin-bottom: 2px; }
  .ryla-app-banner__button { justify-self: stretch; width: 100%; min-height: 50px; }
  .ryla-app-banner__title { font-size: 1.02rem; }
  .ryla-app-banner__copy { margin-bottom: 0; font-size: .86rem; line-height: 1.48; }
  .ryla-app-banner__note { margin-top: 0; }

  .ryla-light .ryla-evidence-panel { padding: 18px; }
}

@media (max-width: 520px) {
  .nav__actions { display: none; }
  .tools-hero h1,
  .tool-detail-hero h1,
  .guide-index h1,
  .guide-page .guide-hero h1 { font-size: 2.65rem; }
  .tools-hero__panel,
  .tool-app-card { box-shadow: 5px 5px 0 var(--aa-ink); }
}