/* Lievora 18.0 — public pages as a website, not an app shell. */
:root{--bg:#FFF7ED;--surface:#FFFCF7;--brick:#B9563D;--brick2:#99422F;--olive:#526A3B;--ink:#302821;--muted:#74685E;--line:rgba(48,40,33,.11);--page:1440px;--article:780px;--wide:1260px}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.68}a{color:var(--brick2)}a:focus-visible,button:focus-visible{outline:3px solid rgba(185,86,61,.22);outline-offset:3px}
.v17-public-shell{min-height:100dvh;display:block}.v17-public-sidebar{position:sticky;top:0;z-index:40;height:76px;display:flex;align-items:center;padding:0 max(28px,calc((100vw - var(--page))/2));background:rgba(255,252,247,.96);border:0;border-bottom:1px solid var(--line);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 5px 18px rgba(67,46,31,.035)}
.v17-public-brand{display:flex;align-items:center;gap:10px;margin-right:34px;padding:0;color:var(--ink);text-decoration:none}.v17-public-brand img{width:42px;height:42px;border-radius:12px}.v17-public-brand span{display:flex;flex-direction:column}.v17-public-brand strong{font-size:16px;line-height:1.05}.v17-public-brand small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.2;white-space:nowrap}
.v17-public-nav{display:flex;align-items:center;gap:4px;flex:1}.v17-public-nav a{min-height:42px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:11px;color:var(--muted);font-size:13px;font-weight:720;text-decoration:none}.v17-public-nav a:hover,.v17-public-nav a[aria-current="page"]{background:#FFF0E7;color:var(--brick2)}.v17-public-nav a[data-key="settings"]{margin-left:auto}.v17-public-nav i{font-style:normal;font-size:11px}.v17-public-sidefoot{display:none}
.v17-public-main{min-width:0}.v17-public-mobile-head,.v17-public-bottom{display:none}.v17-public-content{padding:64px max(28px,calc((100vw - var(--page))/2)) 96px}.v17-public-content>main,.v17-public-content>.content-shell{width:100%;max-width:var(--wide);margin:0 auto}.site-head,.content-site-head{display:none!important}.v17-public-content main{min-height:72vh}.v17-public-content article{max-width:none!important;margin:0!important;padding:0!important}.v17-public-content .hero{padding:0 0 44px!important;border-bottom:1px solid var(--line)!important;background:none!important}.v17-public-content .hero .wrap,.v17-public-content .wrap{width:auto!important;margin:0!important}.v17-public-content .hero .wrap{max-width:1100px!important}.v17-public-content .article-body,.v17-public-content article>.wrap,.v17-public-content main>.wrap{max-width:var(--article)!important;margin:0!important;padding-top:38px!important;padding-bottom:34px!important}.v17-public-content article>section.hero+.wrap{max-width:var(--article)!important}
.eyebrow,.content-kicker{display:block;margin:0 0 10px;color:var(--brick2);font-size:10px;font-weight:820;text-transform:uppercase;letter-spacing:.09em}.hero h1,article>h1{max-width:15ch;margin:0;font-size:clamp(52px,5.2vw,78px);line-height:.96;letter-spacing:-.045em}.lead{max-width:760px;margin:18px 0 0;color:var(--muted);font-size:19px;line-height:1.55}.editorial-meta{margin:12px 0 0!important;color:var(--muted)!important;font-size:12px!important}.cta,.content-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin:24px 0 0;padding:11px 18px;border:0;border-radius:15px;background:var(--brick);color:#fff;font-weight:780;text-decoration:none;box-shadow:0 10px 24px rgba(185,86,61,.14)}
.answer,.content-answer{margin:0 0 28px;padding:18px 0;border-bottom:1px solid var(--line);font-size:18px}.answer strong,.content-answer strong{display:block;margin-bottom:5px;color:var(--brick2);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.v17-public-content h2{margin:44px 0 10px;font-size:29px;line-height:1.14;letter-spacing:-.03em}.v17-public-content h3{margin:25px 0 8px}.v17-public-content p,.v17-public-content li{color:#554B43}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.callout,.content-note{margin:30px 0;padding:18px 20px;border:1px solid rgba(110,132,80,.16);border-radius:18px;background:#F1F3E9}.v14-bottom-cta{margin:54px 0 10px;padding:28px;border:1px solid rgba(185,86,61,.13);border-radius:24px;background:#FFF1E8}.v14-bottom-cta h2{margin:5px 0}.content-related,.related{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}.content-related a{display:block;padding:11px 0;border-bottom:1px solid rgba(48,40,33,.07);color:var(--ink);font-weight:650;text-decoration:none}.content-legal-links,.legal-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:11px}.content-legal-links a,.legal-links a{color:var(--muted)}footer:not(.content-legal-links){display:none!important}.editorial-note,.refs,.content-method,.editorial-trust-enrichment,.editorial-depth-floor{display:none!important}
.v17-public-content .contact-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:48px}.v17-public-content textarea{width:100%;min-height:180px;margin-top:8px;padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:#fff;font:inherit;color:inherit}.v17-public-content .grid.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.v17-public-content .card:has(h3:empty){display:none}

/* Contact: preserve the anonymous launch contract while giving the form and
   its useful context a deliberate public-page composition. */
.v17-public-content .contact-layout {
  align-items: start;
}

.v17-public-content .contact-card {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(185, 86, 61, .14);
  border-radius: 26px;
  background: rgba(255, 252, 247, .86);
  box-shadow: 0 18px 38px rgba(102, 65, 37, .06);
}

.v17-public-content .contact-card fieldset {
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.v17-public-content .contact-card legend {
  margin-bottom: 12px;
  padding: 0;
  color: var(--brick2);
  font-size: 12px;
  font-weight: 800;
}

.v17-public-content .contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.v17-public-content .contact-option {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(48, 40, 33, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  line-height: 1.3;
}

.v17-public-content .contact-option:last-child {
  grid-column: 1 / -1;
}

.v17-public-content .contact-card > form > label {
  display: block;
  margin-top: 22px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
}

.v17-public-content .contact-card textarea {
  margin-top: 8px;
  min-height: 196px;
  line-height: 1.55;
}

.v17-public-content .contact-card .cta {
  width: 100%;
}

.v17-public-content .contact-aside {
  padding: 28px;
  border: 1px solid rgba(110, 132, 80, .17);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(241, 243, 233, .92), rgba(255, 252, 247, .82));
}

.v17-public-content .contact-aside h2 {
  margin-top: 0;
}

@media (max-width: 999px) {
  .v17-public-content .contact-card {
    padding: 20px;
    border-radius: 22px;
  }

  .v17-public-content .contact-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .v17-public-content .contact-option:last-child {
    grid-column: auto;
  }

  .v17-public-content .contact-aside {
    padding: 22px;
    border-radius: 22px;
  }
}
@media(max-width:999px){body{background:var(--bg)}.v17-public-sidebar{display:none}.v17-public-main{padding-bottom:76px}.v17-public-mobile-head{position:sticky;top:0;z-index:35;display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:8px 16px;background:rgba(255,247,237,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.v17-public-mobile-head a{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;text-decoration:none}.v17-public-mobile-head img{width:38px;height:38px;border-radius:11px}.v17-public-mobile-head>a:last-child{color:var(--brick2);font-size:12px}.v17-public-content{padding:18px 20px 48px}.v17-public-bottom{position:fixed;left:0;right:0;bottom:0;z-index:50;height:72px;display:grid;grid-template-columns:repeat(4,1fr);padding:5px 5px env(safe-area-inset-bottom);background:rgba(255,252,247,.98);border-top:1px solid var(--line)}.v17-public-bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;color:#8F8378;font-size:9px;font-weight:650;text-decoration:none;text-align:center}.v17-public-bottom a[aria-current="page"]{background:#FFF0E7;color:var(--brick2)}.hero h1,article>h1{font-size:clamp(40px,10vw,58px)}.lead{font-size:17px}.grid,.v17-public-content .grid.guide-grid,.v17-public-content .contact-layout{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Contact is a standalone public page and does not load the app form CSS.
   Keep its fieldset/options inside the mobile canvas instead of letting the
   browser's default inline radio labels create horizontal overflow. */
.v17-public-content .contact-card,
.v17-public-content .contact-card form,
.v17-public-content .contact-card fieldset{min-width:0;max-width:100%}
.v17-public-content .contact-card fieldset{margin:0 0 0;padding:0 14px 14px;border:1px solid var(--line);border-radius:14px}
.v17-public-content .contact-card legend{padding:0 4px}
.v17-public-content .contact-options{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.v17-public-content .contact-option{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:normal}
.v17-public-content .contact-option input{flex:0 0 auto}
.v17-public-content .contact-card textarea{display:block;max-width:100%;box-sizing:border-box}
.v17-public-content .contact-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media(max-width:999px){
  .v17-public-content .hero h1,
  .v17-public-content article>h1{max-width:100%;overflow-wrap:anywhere}
  .v17-public-content .contact-card{width:100%;overflow:hidden}
  .v17-public-content .contact-options{gap:7px 10px;font-size:14px}
}

/* 18.0.1 corrective desktop shell: public pages keep the same Lievora sidebar. */
@media (min-width:1000px){
  .v17-public-shell{display:grid;grid-template-columns:244px minmax(0,1fr);align-items:start;min-height:100dvh}
  .v17-public-sidebar{position:sticky;top:0;width:244px;height:100dvh;min-height:100dvh;display:flex;flex-direction:column;align-items:stretch;padding:24px 16px 18px;border:0;border-right:1px solid var(--line);background:rgba(255,252,247,.97);box-shadow:8px 0 34px rgba(71,49,32,.035)}
  .v17-public-brand{display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;align-items:center;margin:0 0 26px;padding:0 6px}.v17-public-brand img{width:48px;height:48px;border-radius:14px}.v17-public-brand small{white-space:normal}
  .v17-public-nav{display:grid;grid-template-columns:1fr;gap:5px;align-items:stretch;flex:0}.v17-public-nav a{width:100%;min-height:48px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:center;padding:0 12px;border-radius:13px;text-align:left}.v17-public-nav a:not([aria-current="page"]):hover{background:#FFF6EE;color:var(--ink)}.v17-public-nav a[aria-current="page"]{background:#FFF0E7;color:var(--brick2)}.v17-public-nav a[data-key="settings"]{margin-left:0}
  .v17-public-sidefoot{display:block;margin-top:auto;padding:18px 8px 2px;color:#998B7F;font-size:9px;line-height:1.45}.v17-public-sidefoot a{display:inline-block;margin:7px 8px 0 0;color:inherit;text-decoration:none}
  .v17-public-main{grid-column:2;min-width:0}.v17-public-content{padding:64px clamp(34px,4vw,64px) 96px}.v17-public-content>main,.v17-public-content>.content-shell{width:100%;max-width:1380px;margin:0 auto}.v17-public-content .hero .wrap{max-width:1160px!important}.v17-public-content .grid.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Keep public reading screens on the same desktop optical scale as the app. */
@media (min-width: 1000px) {
  .v17-public-shell { grid-template-columns: 264px minmax(0, 1fr); }
  .v17-public-sidebar { width: 264px; padding: 30px 20px 22px; }
  .v17-public-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; margin: 0 0 32px; padding-inline: 0; text-align: center; }
  .v17-public-brand img { width: 52px; height: 52px; border-radius: 15px; }
  .v17-public-brand strong { font-size: 19px; color: var(--brick2); letter-spacing: .06em; text-transform: uppercase; }
  .v17-public-brand small { margin-top: 5px; font-size: 11px; line-height: 1.35; }
  .v17-public-brand > span { display: flex; flex-direction: column; align-items: center; }
  .v17-public-nav { gap: 7px; }
  .v17-public-nav a { min-height: 54px; grid-template-columns: 32px minmax(0, 1fr); gap: 11px; padding-inline: 14px; font-size: 15px; }
  .v17-public-sidefoot { padding: 22px 8px 2px; font-size: 11px; line-height: 1.5; }
  .v17-public-content { max-width: 1680px; padding-inline: clamp(32px, 4vw, 72px); }
  .v17-public-content .hero .wrap { max-width: 1240px !important; }
  .v17-public-content .hero h1,
  .v17-public-content article > h1 { font-size: clamp(58px, 5vw, 86px); }
  .v17-public-content .lead,
  .v17-public-content .answer,
  .v17-public-content .content-answer { font-size: 20px; }
  .v17-public-content h2 { font-size: 32px; }
}

@media (min-width: 1000px) and (max-width: 1279px) {
  .v17-public-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .v17-public-sidebar { width: 236px; }
  .v17-public-content h2 { font-size: 29px; }
}

/* Public navigation uses a text fallback in the static HTML. Give those
   marks a deliberate icon footprint so the public shell keeps the same visual
   rhythm as the product shell. */
.v17-public-nav i {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}

/* Public pages use the same icon system as the product shell. */
.v17-public-nav .svg,
.v17-public-bottom .svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 999px) {
  .v17-public-main,
  .v17-public-content,
  .v17-public-content > main,
  .v17-public-content article,
  .v17-public-content .hero,
  .v17-public-content .wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .v17-public-content h1,
  .v17-public-content h2,
  .v17-public-content p,
  .v17-public-content li {
    overflow-wrap: anywhere;
  }

  .v17-public-content .hero h1,
  .v17-public-content article > h1,
  .v17-public-content .lead {
    width: 100%;
    max-width: 100%;
  }

  .v17-public-bottom {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .v17-public-bottom a {
    min-width: 0;
  }

  .v17-public-bottom a > span:first-child {
    font-size: 16px;
    line-height: 1;
  }

  .v17-public-content .hero h1,
  .v17-public-content article > h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere !important;
  }

  /* Contact has a short, high-impact headline: keep words intact so the
     mobile title reads as a designed two-line block instead of splitting
     "idée" at the edge of the canvas. */
  .v17-public-content main:has(#contactForm) > .hero h1 {
    font-size: clamp(34px, 8.4vw, 44px) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* Individual guides: the article hero is a reading doorway, not a plain
   heading row. Reuse the approved guide illustration as a shared editorial
   scene while keeping every title and answer in the HTML. */
:is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr);
  align-items: stretch;
  gap: clamp(28px, 5vw, 86px);
  min-height: 390px;
  padding: 0 0 42px !important;
  overflow: hidden;
  border: 1px solid rgba(185, 86, 61, .14) !important;
  border-radius: 30px;
  background: linear-gradient(125deg, #fffaf3 0%, #fff0e3 62%, #f0eddf 100%) !important;
  isolation: isolate;
}

:is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero)::after {
  display: block;
  min-height: 390px;
  background-image: url('/assets/illustrations/guides-hero.webp');
  background-position: center;
  background-size: cover;
  content: '';
  filter: saturate(.92);
}

:is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero)::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 64%;
  background: linear-gradient(90deg, rgba(255, 250, 243, .98) 0%, rgba(255, 250, 243, .93) 68%, rgba(255, 250, 243, 0) 100%);
  content: '';
}

:is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: center;
  padding: 38px clamp(26px, 4vw, 58px) 38px !important;
}

:is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) h1 {
  max-width: 12ch;
}

:is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) .lead {
  max-width: 52ch;
}

@media (max-width: 999px) {
  :is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding-bottom: 0 !important;
    border-radius: 24px;
  }

  :is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero)::after {
    min-height: 220px;
    background-image: url('/assets/illustrations/guides-hero-mobile.webp');
    background-position: center bottom;
  }

  :is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero)::before {
    top: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 62%;
    background: linear-gradient(180deg, rgba(255, 250, 243, .99) 0%, rgba(255, 250, 243, .94) 76%, rgba(255, 250, 243, 0) 100%);
  }

  :is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) .wrap {
    min-height: 0;
    padding: 28px 22px 24px !important;
  }

  :is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) h1 {
    max-width: 15ch;
  }
}

/* Public pages share the current four-destination vocabulary. The static
   legacy markup still carries a settings link for compatibility, but it is
   not a fifth product destination in the visible shell. */
.v17-public-nav a[data-key="settings"],
.v17-public-bottom a[data-key="settings"] {
  display: none !important;
}

@media (max-width: 999px) {
  .v17-public-bottom {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .v17-public-bottom .svg {
    width: 21px;
    height: 21px;
  }
}

/* Site-wide public typography owner. Public articles keep their readable
   measure, but share the same display hierarchy as the product screens. */
:root {
  --lv-public-display-font: Georgia, 'Times New Roman', serif;
  --lv-public-ui-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lv-public-primary-title-size: clamp(52px, 4.7vw, 68px);
  --lv-public-primary-title-line: .96;
  --lv-public-primary-title-tracking: -.055em;
}

.v17-public-content :is(.hero h1, article > h1) {
  font-family: var(--lv-public-display-font) !important;
  font-size: var(--lv-public-primary-title-size) !important;
  font-weight: 700 !important;
  line-height: var(--lv-public-primary-title-line) !important;
  letter-spacing: var(--lv-public-primary-title-tracking) !important;
}

.v17-public-content :is(.hero .lead, article > .content-answer) {
  font-family: var(--lv-public-ui-font) !important;
  line-height: 1.55 !important;
}

.v17-public-content :is(.eyebrow, .content-kicker) {
  font-family: var(--lv-public-ui-font) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
}

.v17-public-content :is(h2, h3) {
  font-family: var(--lv-public-display-font) !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
}

@media (max-width: 999px) {
  :root { --lv-public-primary-title-size: clamp(40px, 10.5vw, 52px); }
  .v17-public-content :is(.hero h1, article > h1) {
    line-height: 1 !important;
  }
}

/* Final typography contract for the public shell. It deliberately mirrors
   the product shell so a user does not feel they changed websites at the
   navigation boundary. */
html,
body,
button,
input,
select,
textarea {
  font-family: var(--lv-public-ui-font) !important;
  font-synthesis: none !important;
}

.v17-public-content :is(
  h1,
  h2,
  h3,
  .hero h1,
  article > h1
) {
  font-family: var(--lv-public-display-font) !important;
  font-synthesis: none !important;
  font-weight: 700 !important;
}

.v17-public-content :is(.eyebrow, .content-kicker, .answer strong) {
  font-family: var(--lv-public-ui-font) !important;
  font-synthesis: none !important;
  font-weight: 760 !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
}

/* Public guides use the same open-canvas image treatment as the product shell.
   The content stays responsible for the crop; the frame is shared. */
:is(
  .v17-public-content .public-guides-hero,
  .v17-public-content article > .hero:not(.public-guides-hero)
) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:is(
  .v17-public-content .public-guides-hero-art img,
  .v17-public-content article > .hero:not(.public-guides-hero)::after
) {
  filter: none !important;
}

/* Public Guides: an editorial entry point before the practical link groups. */
.v17-public-content .public-guides-hero {
  position: relative;
  display: grid;
  min-height: 420px;
  margin-bottom: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(48, 40, 33, .1) !important;
  border-radius: 28px;
  background: #f1e7d8 !important;
  isolation: isolate;
}

.public-guides-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(247, 239, 226, .98) 0%, rgba(247, 239, 226, .9) 39%, rgba(247, 239, 226, .18) 69%, rgba(247, 239, 226, 0) 100%);
  content: '';
}

.public-guides-hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.public-guides-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.v17-public-content .public-guides-hero .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 420px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 44px clamp(28px, 5vw, 62px) !important;
}

.public-guides-hero h1 {
  max-width: 10ch;
  margin: 0;
}

.public-guides-hero .lead {
  max-width: 520px;
  margin-top: 18px;
}

.public-guides-hero-note {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.v17-public-content .public-guides-content {
  max-width: 1240px;
  padding-top: 20px !important;
}

.public-guide-cluster {
  margin-top: 44px;
}

.public-guide-cluster:first-child {
  margin-top: 0;
}

.public-guide-cluster .content-kicker {
  margin-bottom: 8px;
}

.public-guide-cluster h2 {
  margin-top: 0;
}

.public-guide-cluster .card {
  min-height: 86px;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.public-guide-cluster .card:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 86, 61, .25);
  box-shadow: 0 12px 24px rgba(102, 65, 37, .06);
}

.public-guide-cluster .card h3 {
  width: 100%;
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.public-guide-cluster .card a {
  color: var(--ink);
  text-decoration: none;
}

.public-guide-cluster .card a::after {
  display: inline-block;
  margin-left: 8px;
  color: var(--brick2);
  content: '→';
}

@media (max-width: 999px) {
  .v17-public-content .public-guides-hero {
    min-height: 500px;
    border-radius: 22px;
  }

  .public-guides-hero::before {
    background: linear-gradient(180deg, rgba(247, 239, 226, .98) 0%, rgba(247, 239, 226, .9) 35%, rgba(247, 239, 226, .24) 67%, rgba(247, 239, 226, .04) 100%);
  }

  .public-guides-hero-art img {
    object-position: center bottom;
  }

  .v17-public-content .public-guides-hero .wrap {
    min-height: 500px;
    justify-content: flex-start;
    padding: 30px 22px !important;
  }

  .public-guides-hero .lead {
    max-width: 34ch;
  }

  .public-guides-hero-note {
    max-width: 30ch;
  }

  .v17-public-content .public-guides-content {
    padding-top: 2px !important;
  }

  .public-guide-cluster {
    margin-top: 34px;
  }

  .public-guide-cluster .card {
    min-height: 72px;
  }
}

/* Final public-page owner: mobile titles must stay inside the readable
   canvas. The older hero rules above intentionally keep desktop measures,
   but their 10ch/15ch limits are too narrow once the layout becomes one
   column. Keep overflow visible so a future regression is observable. */
@media (max-width: 999px) {
  .v17-public-content,
  .v17-public-content > main,
  .v17-public-content article,
  .v17-public-content .hero,
  .v17-public-content .hero .wrap,
  .v17-public-content .public-guides-hero .wrap {
    min-width: 0;
    max-width: 100%;
  }

  .v17-public-content .hero .wrap,
  .v17-public-content .public-guides-hero .wrap {
    width: 100% !important;
  }

  .v17-public-content .hero h1,
  .v17-public-content article > h1,
  .v17-public-content .public-guides-hero h1,
  :is(.v17-public-content article, .v17-public-content main:has(.answer)) > .hero:not(.public-guides-hero) h1 {
    width: 100%;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal;
  }

  .v17-public-content .lead,
  .v17-public-content .public-guides-hero .lead {
    width: 100%;
    max-width: 100% !important;
  }
}

/* Public editorial hierarchy: display titles follow the same serif/sans
   strategy as the product shell; controls and body copy remain system sans. */
.v17-public-content h1,
.v17-public-content h2,
.v17-public-content h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

.v17-public-brand strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

/* Editorial article owner — older guides do not have a .hero wrapper. They
   still deserve the same visual doorway as the newer long-form pages. Keep
   the rule structural so one correction upgrades every existing article. */
.v17-public-content article:not(:has(> .hero)) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 4vw, 64px) clamp(22px, 5vw, 76px) 78px !important;
  border: 1px solid rgba(185, 86, 61, .13);
  border-radius: 32px;
  background: linear-gradient(180deg, #fffaf3 0%, #fffaf3 30rem, rgba(255, 252, 247, .58) 54rem, rgba(255, 252, 247, 0) 100%);
}

.v17-public-content article:not(:has(> .hero))::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(52%, 720px);
  height: 420px;
  background: linear-gradient(90deg, #fffaf3 0%, rgba(255, 250, 243, .28) 35%, rgba(255, 250, 243, 0) 100%), url('/assets/illustrations/guides-hero.webp') center right / cover no-repeat;
  content: '';
  opacity: .92;
  pointer-events: none;
}

.v17-public-content article:not(:has(> .hero)) > .content-kicker,
.v17-public-content article:not(:has(> .hero)) > h1,
.v17-public-content article:not(:has(> .hero)) > .content-answer {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.v17-public-content article:not(:has(> .hero)) > .content-kicker {
  margin-top: 8px;
}

.v17-public-content article:not(:has(> .hero)) > h1 {
  max-width: 14ch;
  margin-top: 0;
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: .97;
}

.v17-public-content article:not(:has(> .hero)) > .content-answer {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid rgba(185, 86, 61, .14);
  border-radius: 20px;
  background: rgba(255, 252, 247, .84);
  box-shadow: 0 18px 34px rgba(102, 65, 37, .06);
}

.v17-public-content article:not(:has(> .hero)) > .content-answer p {
  margin: 0;
}

/* Give the reading column a deliberate rhythm while allowing comparison
   grids and related links to use the full article rail. */
.v17-public-content article:not(:has(> .hero)) > :is(section, p, h2, h3, .content-cta) {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}

.v17-public-content article:not(:has(> .hero)) > section:not(.content-related):not(.related) + section:not(.content-related):not(.related) {
  border-top: 1px solid rgba(48, 40, 33, .08);
}

.v17-public-content article:not(:has(> .hero)) > section:not(.content-related):not(.related) {
  padding-top: 24px;
}

.v17-public-content article:not(:has(> .hero)) > section:not(.content-related):not(.related) h2 {
  margin-top: 0;
}

.v17-public-content article:not(:has(> .hero)) > .content-cta {
  margin-top: 34px;
}

/* The hub is a route finder, not a stack of identical white boxes. */
.v17-public-content .public-guide-cluster .grid {
  align-items: stretch;
}

.v17-public-content .public-guide-cluster .card {
  position: relative;
  min-height: 118px;
  border-color: rgba(48, 40, 33, .09);
  background: linear-gradient(145deg, rgba(255, 252, 247, .96), rgba(247, 239, 226, .72));
}

.v17-public-content .public-guide-cluster .card::before {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brick);
  box-shadow: 0 0 0 6px rgba(185, 86, 61, .1);
  content: '';
}

.v17-public-content .public-guide-cluster .card h3 {
  padding-top: 16px;
}

.v17-public-content .public-guide-cluster .card h3 a::after {
  transition: transform .18s ease;
}

.v17-public-content .public-guide-cluster .card:hover h3 a::after {
  transform: translateX(4px);
}

@media (max-width: 999px) {
  .v17-public-content article:not(:has(> .hero)) {
    padding: 26px 18px 58px !important;
    border-radius: 24px;
  }

  .v17-public-content article:not(:has(> .hero))::before {
    top: 0;
    width: 100%;
    height: 360px;
    background: linear-gradient(180deg, rgba(255, 250, 243, .97) 0%, rgba(255, 250, 243, .78) 43%, rgba(255, 250, 243, 0) 100%), url('/assets/illustrations/guides-hero-mobile.webp') center bottom / cover no-repeat;
  }

  .v17-public-content article:not(:has(> .hero)) > h1 {
    max-width: 100% !important;
    font-size: clamp(38px, 10vw, 56px);
  }

  .v17-public-content article:not(:has(> .hero)) > .content-answer {
    padding: 18px;
  }

  .v17-public-content article:not(:has(> .hero)) > :is(section, p, h2, h3, .content-cta) {
    max-width: 100%;
  }

  /* Rich articles use a two-column hero on desktop. Reset every grid item
     that can otherwise keep its min-content width on narrow viewports. */
  .v17-public-content article > .hero,
  .v17-public-content article > .hero .wrap,
  .v17-public-content article > .hero h1,
  .v17-public-content article > .hero .lead,
  .v17-public-content article > .hero .cta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .v17-public-content article > .hero h1,
  .v17-public-content article > .hero .lead {
    overflow-wrap: anywhere !important;
  }
}

/* Final public hero-image owner: older article layers cannot reintroduce a
   closed card after the shared open-canvas decision. */
:is(
  .v17-public-content .public-guides-hero,
  .v17-public-content article > .hero:not(.public-guides-hero)
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(
  .v17-public-content .public-guides-hero-art img,
  .v17-public-content article > .hero:not(.public-guides-hero)::after
) {
  filter: none !important;
}