/* Shared product-family visual theme.
   Reference: https://commentgrid.com/ (measured 2026-09-23).
   Presentation only: no content, route, or interaction changes. */
:root{
  /* Shared text roles. Mobile changes roles once, not individual page values. */
  --font-size-meta:12px;
  --font-size-label:14px;
  --font-size-body:16px;
  --font-size-brand:18px;
  --font-size-card:20px;
  --font-size-legal:22px;
  --font-size-feature:24px;
  --font-size-price:28px;
  --font-size-section:32px;
  --font-size-title:40px;
  --text-inverse:#fff;
  --text-inverse-muted:#9898a6;
  --border-control:#d1d5db;
  --cream:#fff;
  --cream-2:#f8fafc;
  --peach:#fff4ec;
  --peach-deep:#ffe6d5;
  --text:#16161a;
  --text-2:#46464d;
  --text-3:#707176;
  --border:#ddeaf6;
  --border-soft:#eaecf0;
  --orange:#b83d15; /* Accessible small-text companion to the source brand orange. */
  --orange-deep:#9f3412;
  --dark:#16161a;
  --dark-line:#303038;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
  --mono:ui-monospace,Menlo,Monaco,Consolas,monospace;
  --brand-display:Roboto,Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  --brand-ui:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  --brand-gradient:linear-gradient(90deg,#e82a2a 0%,#c65312 100%);
  --brand-peach:linear-gradient(126deg,#fff4ec 2%,#ffe6d5 100%);
  --brand-cta:#1a1a1a;
  --brand-cta-hover:#363636;
  --orange-hover:#c4461c;
  --brand-card-shadow:none;
}
body{background:#fff;color:var(--text);font-family:var(--sans);line-height:1.6}
.wrap{max-width:1088px;padding-inline:24px}
body>header{
  background:rgba(255,255,255,.8);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(15,23,42,.08);box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.wrap.nav{max-width:1248px;height:64px;gap:40px}
.nav .logo{font-family:var(--brand-display);font-size:var(--font-size-brand);letter-spacing:-.02em;gap:8px}
.nav .brand-icon{width:26px;height:26px}
.nav nav{gap:28px}
.nav nav>a,.dropdown>button{font-family:var(--brand-display);font-size:var(--font-size-body);font-weight:500;color:var(--text-2)}
.nav nav>a:hover,.dropdown>button:hover{color:var(--text)}
.dropdown-menu{min-width:264px;background:#fff;border-color:var(--border-soft);border-radius:16px;box-shadow:0 12px 28px rgba(15,23,42,.12),0 3px 8px rgba(15,23,42,.06)}
.dropdown-menu a{font-family:var(--brand-display);font-size:var(--font-size-label);flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
.dropdown-menu .menu-icon{display:block;width:20px;height:20px;flex:0 0 20px}
.dropdown-menu a:hover{background:#f8fafc}
.menu-toggle{background:#fff;border:1px solid var(--border-soft);border-radius:12px;font-family:var(--brand-display);font-weight:600}
.btn-primary,.btn-chrome,.tool-go,.btn-dl{
  background:var(--brand-cta);color:#fff;font-family:var(--brand-ui);font-size:var(--font-size-body);font-weight:650;
  border-radius:999px;box-shadow:none;
  transition:background .2s,color .2s;
}
.btn-primary{min-height:56px;padding:14px 28px;line-height:26px}
.nav nav>a.btn-chrome{min-height:42px;padding:8px 22px;color:#fff;font-size:var(--font-size-body);line-height:26px}
.btn-primary:hover,.btn-chrome:hover,.tool-go:hover,.btn-dl:hover{
  background:var(--brand-cta-hover);color:#fff;transform:none;box-shadow:none;
}
/* Buttons brighten on hover without moving their box or surrounding content. */
button,.btn-primary,.btn-chrome,.nav nav>a.btn-chrome{transition:background-color .2s,color .2s,border-color .2s}
.dropdown>button:hover,.language-toggle:hover{color:#65656d}
.menu-toggle:hover,.preview-close:hover{background:#fff;color:#65656d;border-color:#e2b79f}
.article-preview:hover{color:#55555d}
button:disabled:hover,button[aria-disabled="true"]:hover{filter:none}
.text-link{font-family:var(--brand-ui);color:var(--orange);border-bottom-color:var(--peach-deep)}
.eyebrow,.mono-tag,.breadcrumb,.t-tag,.demo-label,.tool-field label,.tool-select label,.tool-panel-bar .ex{
  font-family:var(--brand-ui);font-weight:600;letter-spacing:.08em;
}
.eyebrow{font-size:var(--font-size-meta);color:var(--text-3);}
.eyebrow .no{border-radius:999px;background:var(--peach);font-size:var(--font-size-meta);color:var(--text-3);}
/* Global section numbering uses the shared brand highlight. */
.section-head .eyebrow .no{color:var(--orange)}
.hero{padding-top:48px}
.hero h1,.page-hero h1,.tool-hero h1{
  font-family:var(--brand-display);font-size:var(--font-size-title);font-weight:700;line-height:1.25;letter-spacing:-.01em;
}
.hero h1{max-width:680px;margin:16px auto}
.hero h1 .hl,.page-hero h1 .hl,.tool-hero h1 .hl,.final h2 .hl{
  background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding:0;
}
.hero p.lead,.page-hero p.lead,.tool-hero p.lead{
  font-family:var(--brand-ui);font-size:var(--font-size-body);line-height:1.65;color:var(--text-2);
}
.hero p.lead{max-width:680px;margin-bottom:32px}
.hero .hero-note,.hero-note{font-family:var(--brand-ui);font-size:var(--font-size-label);line-height:24px;color:var(--text-3)}
.hero .hero-note{margin-bottom:32px}
.hero-note b{color:var(--text-2)}
.hero .demo-title{font-family:var(--brand-display);font-size:var(--font-size-section);line-height:1.35;letter-spacing:-.01em}
.hero .demo-caption{font-family:var(--brand-ui);font-size:var(--font-size-label);line-height:24px;color:var(--text-3)}
.hero .demo-shell{background:var(--brand-peach);border:0;border-radius:32px;padding:24px;box-shadow:none}
.product-preview-link{border-radius:16px;box-shadow:none}
.product-preview figcaption{font-family:var(--brand-ui);padding-top:16px}
.section{padding:80px 0;border-bottom-color:var(--border-soft)}
.section-head{margin-bottom:40px}
.h2,.final h2{font-family:var(--brand-display);font-size:var(--font-size-section);line-height:1.35;letter-spacing:-.01em}
.section-intro{font-size:var(--font-size-body);line-height:26px;color:var(--text-2);}
.page-hero{padding:48px 0 72px}
.page-hero h1{max-width:760px}
.page-hero p.lead{max-width:640px}
.breadcrumb{font-size:var(--font-size-meta);letter-spacing:.04em}
.uc-card,.price-card,.tool-card{background:#fff;border:1px solid var(--border);border-radius:28px;box-shadow:none}
.uc-card:hover,.tool-card:hover{border-color:#f2b88d;box-shadow:none}
.uc-card h3,.tool-card h3,.tool-row h3,.topic h3,.tool-item h2{font-family:var(--brand-display);font-size:var(--font-size-card);line-height:30px;font-weight:700;letter-spacing:0}
.uc-card .mono-tag{color:var(--text-3);}
.uc-card p,.tool-card p,.tool-row p,.topic p,.tool-item p{color:var(--text-2);line-height:1.65;}
.price-card.featured{border-color:#f2b88d;box-shadow:none}
.pricing-section{background:#f8fafc}
.price-card .amount{font-family:var(--brand-display);letter-spacing:-.01em}
.steps-section{background:var(--brand-peach);border-color:var(--peach-deep)}
.step h3{font-family:var(--brand-display);font-size:var(--font-size-card);line-height:28px;font-weight:700}
.step .num{font-family:var(--brand-display);font-size:var(--font-size-section);color:var(--orange);}
.billing-note,.note{border-radius:16px;background:var(--peach)}
.faq-section{background:#fff}
.faq-item{border-color:var(--border-soft)}
.faq-item:last-child{border-color:var(--border-soft)}
.faq-item summary{font-family:var(--brand-display);font-size:var(--font-size-body);line-height:26px;font-weight:600;letter-spacing:0}
/* Draw the FAQ mark geometrically so font baselines cannot offset it. */
.faq-item summary .plus{
  position:relative;font-size:0;line-height:0;
  color:var(--text-2);border-color:var(--border-soft);transform-origin:center;
}
.faq-item summary .plus::before,.faq-item summary .plus::after{
  content:"";position:absolute;left:50%;top:50%;
  width:10px;height:2px;border-radius:1px;background:currentColor;
  transform:translate(-50%,-50%);
}
.faq-item summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item .a{color:var(--text-2);}
.tool-panel{border-radius:28px;border-color:var(--border);box-shadow:none}
.tool-panel-bar{background:#f8fafc}
.tool-field input.box,.tool-select select.box{border-color:#9ca3af;border-radius:12px}
.result-tabs{background:#f8fafc}
.result-tabs button[aria-selected="true"],.fmt[aria-pressed="true"]{border-color:var(--brand-cta);box-shadow:inset 0 0 0 2px var(--brand-cta)}
button:disabled,button:disabled:hover{background:#f1f3f5;color:var(--text-3);box-shadow:inset 0 0 0 1px #d1d5db;transform:none}
.field-table th,.data-table th,.result-table th{font-family:var(--brand-ui);font-size:var(--font-size-label);letter-spacing:0;text-transform:none;color:var(--text-2);}
.fmt{font-family:var(--brand-ui);font-size:var(--font-size-label);letter-spacing:0}
.final{background:var(--brand-peach);color:var(--text);padding:80px 0}
.final p,.final .final-note{color:var(--text-2)}
.final .btn-primary{box-shadow:none}
.final .text-link{color:var(--orange);border-color:#efc1a2}
.final-related{border-color:#efc1a2;color:var(--text-3);font-family:var(--brand-ui)}
.final-related a{color:var(--text-2);border-color:#efc1a2}
.handoff-footer{background:#16161a;color:#fff}
.foot .logo{color:#fff;font-family:var(--brand-display)}
.foot .brand p,.foot-bottom{color:var(--text-inverse-muted)}
.foot .footer-heading{text-transform:none;font-family:var(--sans);font-size:var(--font-size-body);font-weight:600;line-height:26px;letter-spacing:0;color:#fff}
.foot li a,.foot li a[aria-disabled="true"]:hover{color:var(--text-inverse-muted)}
.foot li a:hover{color:#fff}
.code-block{background:#16161a;color:#e4e4ec}
.code-block .c{color:#a4a4b1}
:focus-visible{outline:3px solid #7258d6;outline-offset:4px}
.final :focus-visible{outline-color:#7258d6}
@media(max-width:960px){
  :root{--font-size-title:32px;--font-size-section:28px}
  .wrap.nav{gap:16px}
  .nav nav{background:#fff;padding-inline:24px;gap:4px;max-height:calc(100dvh - 65px)}
  .dropdown-menu{min-width:0;box-shadow:none}
  .section{padding:64px 0}
  .hero h1,.page-hero h1,.tool-hero h1{font-size:var(--font-size-title);line-height:1.25;}
}
@media(max-width:600px){
  .wrap{padding-inline:24px}
  .wrap.nav{height:56px;padding-inline:16px}
  .nav .brand-icon{width:26px;height:26px}
  .nav nav{max-height:calc(100dvh - 57px);padding-inline:16px}
  .menu-toggle{min-height:40px;padding:7px 12px}
  .hero{padding-top:40px}
  .hero h1,.page-hero h1,.tool-hero h1{font-size:var(--font-size-title);line-height:1.25;letter-spacing:-.01em}
  .hero p.lead,.page-hero p.lead,.tool-hero p.lead{font-size:var(--font-size-body);line-height:1.65;color:var(--text-2);}
  .hero .hero-note{font-size:var(--font-size-label);line-height:22px}
  .hero .btn-primary{padding:14px 24px;min-height:56px}
  .hero .demo-title{font-size:var(--font-size-section);line-height:1.35;}
  .hero .demo-shell{padding:12px;border-radius:24px}
  .hero .demo-caption{font-size:var(--font-size-label);line-height:22px}
  .h2,.final h2{font-size:var(--font-size-section);line-height:1.35;}
  .section-head{margin-bottom:32px}
  .page-hero{padding:32px 0 56px}
  .uc-card,.price-card,.tool-card{padding:24px;border-radius:24px}
  .tool-panel{border-radius:24px}
  .final{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){
  .btn-primary,.btn-chrome,.tool-go,.btn-dl{transition:none}
}

/* Homepage install reassurance and supplied export-format artwork. */
.hero .hero-install-note{margin-bottom:0}
.hero-export-formats{margin:24px auto 36px;width:230px;max-width:100%;text-align:center}
.hero-format-icons{display:flex;align-items:center;justify-content:center;gap:14px}
.hero-format-icons img{display:block;width:32px;height:32px;flex:none}
.hero-format-label{margin-top:12px;color:var(--text-3);font-size:var(--font-size-label);line-height:22px}

/* Shared official logo treatment in every page footer. */
.foot .logo{font-size:var(--font-size-brand);letter-spacing:-.02em;gap:8px}
.foot .brand-icon{display:block;width:26px;height:26px;flex-shrink:0;object-fit:contain}

/* Keep homepage headings grouped by meaning without forcing mobile overflow. */
.home-headline{text-wrap:balance}
.home-headline .headline-line{display:block}
.home-headline .headline-phrase{white-space:nowrap}
.final:has(.home-headline) p{text-wrap:pretty}
@media(max-width:600px){
  .home-headline .headline-line{display:inline}
}

/* Footer article titles stay on one line within their grid column. */
.foot .footer-blog li a{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Supplied Chrome mark for installation buttons across the site. */
.btn-primary:has(.chrome-button-icon),.btn-chrome:has(.chrome-button-icon){display:inline-flex;align-items:center;justify-content:center;gap:8px}
.chrome-button-icon{display:block;width:24px;height:24px;flex:0 0 24px;object-fit:contain}

/* Important labels and input values remain readable at every breakpoint. */
.tool-field label,.tool-select label{font-size:var(--font-size-label);line-height:1.5;letter-spacing:0;text-transform:none;color:var(--text-2)}
.tool-field input.box,.tool-select select.box{font-size:var(--font-size-body)}
.result-table,.result-table .num{font-size:var(--font-size-label)}
.format-item h3{font-size:var(--font-size-card)}
.format-item p{font-size:var(--font-size-body);color:var(--text-2)}

/* Centered marketing layout shared by the homepage and use-case pages. */
.centered-layout{text-align:center}
.centered-layout :is(.page-hero h1,.page-hero .lead,.section-intro,.hero-note,
  .faq-list,.data-table,.note,.plain-note,.prose,.code-block,.code-caption,.steps-note){
  margin-inline:auto;
}
.centered-layout :is(.page-hero h1,.h2,.final h2){text-wrap:balance}
.centered-layout :is(.hero-cta,.steps-foot,.final-related){justify-content:center}
.centered-layout .section-intro{max-width:680px}
.centered-layout .final-inner{flex-direction:column;align-items:center;gap:32px}
.centered-layout .final-inner>div{width:100%}
.centered-layout .final h2{max-width:800px;margin-inline:auto}
.centered-layout .final p{max-width:680px;margin-inline:auto}
.centered-layout .final-cta{align-items:center;flex:none}
.centered-layout .format-item h3{justify-content:center;flex-wrap:wrap}
.centered-layout :is(.step p,.topic p){max-width:42ch;margin-inline:auto}
/* Keep structured data and expandable answers easy to scan within centered blocks. */
.centered-layout :is(.breadcrumb,.field-table,.data-table,.result-table,.faq-list,.code-block){text-align:left}
.centered-layout .steps-note{justify-content:center;text-align:left}
/* Illustrated homepage use cases: warm editorial artwork, quiet card surfaces. */
.home-use-cases .uc-grid{gap:28px}
.home-use-cases .uc-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border-color:#eee4da;box-shadow:none}
.home-use-cases .uc-art{display:flex;align-items:center;justify-content:center;min-height:190px;padding:10px 24px 0;background:#fff5ec}
.home-use-cases :is(.uc-creator-discovery,.uc-list-backup) .uc-art{background:#f6f5ee}
.home-use-cases .uc-art img{display:block;width:360px;max-width:100%;height:auto;aspect-ratio:400/210}
.home-use-cases .uc-card-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:26px 32px 30px}
.home-use-cases .uc-card .mono-tag{font-family:var(--brand-ui);color:var(--orange);font-size:var(--font-size-meta);letter-spacing:.08em;margin-bottom:10px}
.home-use-cases .uc-card h3{margin-bottom:10px}
.home-use-cases .uc-card p{max-width:43ch;margin-bottom:22px}
.home-use-cases .uc-card .text-link{margin-top:auto}
.home-use-cases .uc-card:hover{border-color:#e4b391;box-shadow:none}
/* Global rule: card information is left-aligned, independently of section alignment.
   New card components can opt in with .content-card. Artwork and button labels
   keep their own alignment. */
main :is(.content-card,.uc-card,.home-blog-card,.blog-card,.directory-card,.tool-card,.price-card,.field-card){text-align:left}
main :is(.home-blog-reading-time,.blog-meta){justify-content:flex-start}
/* Practical use-case examples share the site's left-aligned card layout. */
.example-card{max-width:860px;margin:36px auto 0;padding:28px;border:1px solid var(--border-soft);border-radius:24px;background:#fff;overflow-wrap:anywhere}
.example-card .example-label{margin:0 0 8px;color:var(--orange);font-size:var(--font-size-meta);font-weight:600}
.example-card h3{margin:0 0 12px;font-size:var(--font-size-card);line-height:1.4;color:var(--text)}
.example-card h4{margin:24px 0 10px;font-size:var(--font-size-body);line-height:1.5;color:var(--text)}
.example-card p,.example-card li,.example-card dd{font-size:var(--font-size-body);line-height:1.75;color:var(--text-2)}
.example-card p+p{margin-top:12px}
.example-card a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.example-card a:hover{color:var(--orange-hover)}
.example-card code{font-family:var(--brand-mono,monospace);font-size:var(--font-size-label)}
.example-instructions{margin-top:20px;padding-left:24px}
.example-instructions li+li{margin-top:20px}
.example-instructions strong{color:var(--text)}
.example-formula{margin:12px 0;padding:14px 16px;background:var(--cream-2);border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;color:var(--text)}
.example-details{margin:20px 0}
.example-details>div{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);gap:20px;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.example-details dt{font-size:var(--font-size-label);font-weight:600;line-height:1.75;color:var(--text)}
.example-card .example-reference{margin-top:20px;font-size:var(--font-size-meta)}
@media(max-width:600px){
  .example-card{padding:22px 20px;border-radius:20px}
  .example-details>div{grid-template-columns:1fr;gap:4px}
  .example-formula{padding:12px}
}
@media(max-width:600px){
  .home-use-cases .uc-grid{gap:24px}
  .home-use-cases .uc-art{min-height:0;padding:10px 20px 0}
  .home-use-cases .uc-card-body{padding:22px 22px 26px}
}
@media(max-width:600px){
  .centered-layout .final-inner{gap:28px}
}