/* ==========================================================================
   Image SEO for AI · Sage Swiss, green theme.
   Hand-written CSS: no Tailwind directives, neither its preflight nor its utilities are used.
   Ported from the approved template (proposals7/swiss-green: common, home and form styles), then the pages
   the template didn't draw (tool pages, legal pages, 404, cookie banner) in the same language.

   One URL, two views. #tool (the optimizer controller) starts as the landing's drop panel; once images are
   in, the optimizer sets html[data-view=workspace] and the page becomes the workspace (.app): the landing's
   header, copy, sections and footer are hidden. See "One page, two views" below.

   The Content-Security-Policy forbids inline styles: product shots, sticker colours and the illustrations'
   bar lengths are classes (see "Production additions"). Scripts may still set styles through the CSSOM.
   ========================================================================== */

/* ---------- Fonts: self-hosted (app/assets/fonts/image_seo_for_ai), swapped in (not preloaded, see the layout) ----------
   Titles: Fraunces (Spaïcy's files: weights 400–700, optical size 9–144, softness 50, with italics), set like the
   Images for AI hub: regular weight, tight, a key word in italics. Text: Funnel Sans (variable 300–800).
   While they load, local Georgia (Fraunces) and Arial (Funnel Sans) stand in, resized to the same average width
   and vertical metrics (measured in Chrome), so swapping them in moves nothing. */

@font-face{
  font-family:"Fraunces";

  font-style:normal;

  font-weight:400 700;

  font-display:swap;

  src:url("/assets/image_seo_for_ai/fraunces-normal-400-700-latin-59ef1d12.woff2") format("woff2");

  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Fraunces";

  font-style:normal;

  font-weight:400 700;

  font-display:swap;

  src:url("/assets/image_seo_for_ai/fraunces-normal-400-700-latin-ext-74f6e115.woff2") format("woff2");

  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face{
  font-family:"Fraunces";

  font-style:italic;

  font-weight:400 700;

  font-display:swap;

  src:url("/assets/image_seo_for_ai/fraunces-italic-400-700-latin-f3cba832.woff2") format("woff2");

  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Fraunces";

  font-style:italic;

  font-weight:400 700;

  font-display:swap;

  src:url("/assets/image_seo_for_ai/fraunces-italic-400-700-latin-ext-e8273f04.woff2") format("woff2");

  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face{
  font-family:"Funnel Sans";

  font-style:normal;

  font-weight:300 800;

  font-display:swap;

  src:url("/assets/image_seo_for_ai/funnel-sans-normal-300-800-latin-d63407db.woff2") format("woff2");

  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Funnel Sans";

  font-style:normal;

  font-weight:300 800;

  font-display:swap;

  src:url("/assets/image_seo_for_ai/funnel-sans-normal-300-800-latin-ext-31879f27.woff2") format("woff2");

  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

/* Fallbacks: regular weights on Georgia or Arial, semibold and up on their bold (measured at 400 and 600). They cover the
   web fonts' characters only: anything else (→) comes from the system font, before and after the swap. */

@font-face{
  font-family:"Fraunces Fallback";

  font-style:normal;

  font-weight:300 549;

  src:local("Georgia");

  size-adjust:86.46%;

  ascent-override:113.12%;

  descent-override:29.49%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Fraunces Fallback";

  font-style:normal;

  font-weight:550 900;

  src:local("Georgia Bold"), local("Georgia-Bold");

  size-adjust:77.79%;

  ascent-override:125.73%;

  descent-override:32.78%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Fraunces Fallback";

  font-style:italic;

  font-weight:300 900;

  src:local("Georgia Italic"), local("Georgia-Italic");

  size-adjust:81.04%;

  ascent-override:120.69%;

  descent-override:31.47%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Funnel Fallback";

  font-weight:300 549;

  src:local("Arial"), local("ArialMT");

  size-adjust:101.50%;

  ascent-override:98.52%;

  descent-override:24.63%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Funnel Fallback";

  font-weight:550 800;

  src:local("Arial Bold"), local("Arial-BoldMT");

  size-adjust:94.98%;

  ascent-override:105.29%;

  descent-override:26.32%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

/* ---------- Theme tokens (green). WCAG 2.2: every text pair >= 4.5:1, borders and focus >= 3:1 ----------
   canvas page background, never white        deep    deeper field (alternate sections, panels, sidebar)
   deep-2 tracks on deep                      deep-3  quiet bars on deep (decorative)
   mist   hover on white                      mat     preview mat on white cards     checker  transparency squares
   line   hairlines on canvas/white           line-2  hairlines on deep              border   input borders
   ink / ink-2 / muted  text                  accent  the one action colour (buttons, links, ticks, focus ring) */

:root{
  --canvas:#F9FBF8;
  --deep:#F0F5EE;
  --deep-2:#E3EBE0;
  --deep-3:#C8D4C3;
  --mist:#F5F8F4;
  --mat:#F1F4EF;
  --checker:#EEF2EC;
  --line:#E1E7DE;
  --line-2:#D5DED1;
  --border:#78847B;
  --ink:#121614;
  --ink-2:#3A433D;
  --muted:#515C55;
  --accent:#2C5E45;
  --accent-2:#234B37;
  --accent-soft:#DCE9DF;
  --accent-tint:rgba(44,94,69,.05);
  --accent-glow:rgba(44,94,69,.16);
  --red:#963822;
  --overlay:rgba(249,251,248,.94)

}

/* ==========================================================================
   Shared tokens and components (template: common.css)
   Large sage fields, near-black ink, one forest green for actions. One radius (14px surfaces, 12px
   controls), no borders where space separates, one soft shadow reserved for the main tool panel.
   ========================================================================== */

:root{
  color-scheme:light;
  /* Theme tokens (--canvas, --deep, --deep-2, --deep-3, --mist, --mat, --checker, --line, --line-2, --border,
     --ink, --ink-2, --muted, --accent, --accent-2, --accent-soft, --accent-glow, --red, --overlay) are defined above. */
  --white:#FFFFFF;
  --r:14px;
  /* surfaces, fields, images */
  --r-c:12px;
  /* controls: buttons, inputs, segmented tracks */
  --shadow-tool:0 1px 2px rgba(18,20,26,.05), 0 24px 60px -24px rgba(18,20,26,.24);
  --font:"Funnel Sans", "Funnel Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Fraunces", "Fraunces Fallback", Georgia, ui-serif, serif;
  --gutter:20px;
}

*,*::before,*::after{
  box-sizing:border-box
}

html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
       text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip
}

/* Titles on Fraunces, set like the Images for AI hub. Three levels:
   page titles (h1, the workspace title): regular 400 at the display optical size (opsz 144), -.025em, line-height 1.04;
   section titles (the big h2s): regular 400 at opsz 96, -.02em, line-height 1.08 (set with each section below);
   mid titles (h3s, card and panel titles, FAQ questions, legends): 500, -.01em, optical size left to the browser
   (it follows the font size). Small numbers and labels on Fraunces: 500–600, no tracking. */

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.01em;
  text-wrap:balance
}

h1{
  font-weight:400;
  font-variation-settings:"opsz" 144;
  line-height:1.04;
  letter-spacing:-.025em
}

p{
  margin:0;
  text-wrap:pretty
}

ul,ol{
  margin:0;
  padding:0;
  list-style:none
}

dl,dd{
  margin:0
}

img,svg{
  display:block;
  max-width:100%
}

a{
  color:inherit
}

button,input,textarea,select{
  font:inherit;
  color:inherit
}

button{
  cursor:pointer
}

kbd{
  display:inline-grid;
  place-items:center;
  min-width:1.6em;
  height:1.6em;
  padding:0 .35em;
  border-radius:6px;
  background:var(--deep-2);
  color:var(--ink-2);
  font:600 1em/1 var(--font);
  vertical-align:.02em
}

::-moz-selection{
  background:var(--deep-2);
  color:var(--ink)
}

::selection{
  background:var(--deep-2);
  color:var(--ink)
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px
}

/* Accent: a title's key words in Fraunces italics at the regular weight, in the forest green (the hub's effect):
   <span class="accent"> in the copy, every <em> in a title. Never body copy. */

.accent,:is(h1,h2,h3,h4,.ws-title,.wm-title) em{
  font-style:italic;
  font-weight:400;
  color:var(--accent)
}

h1 em{
  white-space:nowrap
}

/* an h1's key words (a word or two) stay on one line */

.sr{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}

.sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.skip{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:100;
  padding:12px 18px;
  border-radius:var(--r-c);
  background:var(--ink);
  color:#fff;
  font-weight:600;
  text-decoration:none
}

.skip:focus{
  top:12px
}

.i{
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.wrap{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--gutter)
}

@media (min-width:40em){
  :root{
    --gutter:32px 
  }
}

@media (min-width:64em){
  :root{
    --gutter:56px 
  }
}

@media (min-width:90em){
  :root{
    --gutter:64px 
  }
}

/* ---------- Logo ---------- */

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  text-decoration:none;
  color:var(--ink);
  border-radius:var(--r-c)
}

.brand-name{
  font:600 17px/1 var(--display);
  letter-spacing:0;
  white-space:nowrap
}

.logo{
  width:30px;
  height:30px;
  flex:none
}

.logo-bg{
  fill:var(--accent)
}

.logo-fg{
  fill:#fff;
  stroke:#fff
}

.logo-spark{
  fill:var(--accent-soft)
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:0 22px;
  border:0;
  border-radius:var(--r-c);
  font:600 16px/1.1 var(--font);
  letter-spacing:-.003em;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s, color .15s
}

.btn .i{
  width:18px;
  height:18px;
  stroke-width:1.9
}

.btn-primary{
  background:var(--accent);
  color:#fff
}

.btn-primary:hover{
  background:var(--accent-2)
}

.btn-secondary{
  background:var(--deep);
  color:var(--ink)
}

.btn-secondary:hover{
  background:var(--deep-2)
}

.btn-white{
  background:#fff;
  color:var(--ink)
}

.btn-white:hover{
  background:var(--mist)
}

.btn-quiet{
  background:transparent;
  color:var(--ink-2);
  padding-inline:14px
}

.btn-quiet:hover{
  background:var(--deep);
  color:var(--ink)
}

.btn-lg{
  min-height:56px;
  padding-inline:28px;
  font-size:16.5px
}

.icon-btn{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:var(--r-c);
  background:transparent;
  color:var(--ink-2)
}

.icon-btn:hover{
  background:var(--mist);
  color:var(--ink)
}

.icon-btn .i{
  width:20px;
  height:20px
}

/* ---------- Small labels ---------- */

.tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  color:var(--muted);
  font:500 16px/1 var(--font);
  white-space:nowrap
}

.kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  font:600 16px/1.2 var(--font);
  letter-spacing:.08em;
  text-transform:uppercase
}

.kicker .i{
  width:16px;
  height:16px
}

/* ---------- Product shots ---------- */

.ph{
  background-image:var(--img);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat
}

.checker{
  background-color:#fff;
  background-image:repeating-conic-gradient(var(--checker) 0 25%, #fff 0 50%);
  background-size:14px 14px
}

.ph.checker{
  background-image:var(--img), repeating-conic-gradient(var(--checker) 0 25%, #fff 0 50%);
  background-size:cover, 14px 14px;
  background-position:center, 0 0
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }

  html{
    scroll-behavior:auto
  }
}

/* ==========================================================================
   Landing (template: home.css)
   12-column grid, one idea per screen, studio product shots set seamlessly on sage fields.
   Hairlines only where data needs rows.
   ========================================================================== */

.grid12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  -moz-column-gap:32px;
       column-gap:32px
}

/* ---------- Header ---------- */

.header-in{
  display:flex;
  align-items:center;
  gap:40px;
  min-height:68px
}

@media (min-width:40em){
  .header-in{
    min-height:80px
  }
}

.nav{
  display:none
}

.nav-list{
  display:flex;
  gap:4px
}

.nav-list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border-radius:var(--r-c);
  color:var(--ink-2);
  font-size:16px;
  font-weight:500;
  white-space:nowrap
}

.nav-list a:hover{
  color:var(--ink);
  background:var(--deep)
}

/* The header's links to pages are underlined: the top bar, the tools' menu and the phone menu (the brand, the menu
   buttons and the call to action aren't). A light sage line at rest (the user's pick), the text's own colour on hover. */

.nav-list a,.nav-drop-panel a,.menu-panel a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  text-decoration-color:var(--deep-3)
}

.nav-list a:hover,.nav-drop-panel a:hover,.menu-panel a:hover,
.nav-list a[aria-current],.nav-drop-panel a[aria-current],.menu-panel a[aria-current]{
  text-decoration-color:currentColor
}

.header-end{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto
}

.header-cta{
  display:none;
  min-height:44px;
  padding-inline:18px;
  font-size:16px
}

@media (min-width:64em){
  .header-cta{
    display:inline-flex;
    margin-left:8px
  }
}

@media (min-width:80em){
  .nav{
    display:block
  }

  .menu{
    display:none
  }
}

.menu{
  position:relative
}

.menu-button{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:var(--r-c);
  background:var(--deep);
  color:var(--ink);
  list-style:none;
  cursor:pointer
}

.menu-button::-webkit-details-marker{
  display:none
}

.menu-button .i-shut,.menu[open] .menu-button .i-open{
  display:none
}

.menu[open] .menu-button .i-shut{
  display:block
}

.menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:20;
  width:min(312px, calc(100vw - 32px));
  padding:8px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow-tool)
}

.menu-panel a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border-radius:var(--r-c);
  font-weight:500
}

.menu-panel a:hover{
  background:var(--mist)
}

.menu-panel a[aria-current]{
  background:var(--deep);
  font-weight:600
}

/* ---------- Hero: centered — eyebrow, title, lead, tool panel and trust line share the page axis ---------- */

.hero{
  padding-top:clamp(20px, 3vw, 44px);
  text-align:center
}

.eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  color:var(--ink-2);
  font-size:16px;
  font-weight:500;
  line-height:1.35
}

.eyebrow-free{
  padding-right:14px;
  border-right:1px solid var(--line-2);
  color:var(--accent);
  font-weight:650
}

.eyebrow-short{
  display:none
}

@media (max-width:39.99em){
  .eyebrow-long{
    display:none
  }

  .eyebrow-short{
    display:inline
  }

  .eyebrow{
    gap:10px;
    font-size:16px
  }

  .eyebrow-free{
    padding-right:10px
  }
}

.hero-title{
  margin:20px auto 0;
  max-width:17em;
  font-size:clamp(32px, 1rem + 3.3vw, 64px)
}

.lead{
  margin:20px auto 0;
  max-width:52em;
  color:var(--ink-2);
  font-size:clamp(17px, 1rem + .2vw, 18.5px);
  line-height:1.55;
  text-wrap:balance
}

@media (max-width:39.99em){
  .lead{
    margin-top:16px
  }
}

/* Three promise chips under the subtitle (wording: "tags", never watermarks) */

.promise{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px
}

.promise li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px 0 11px;
  border-radius:var(--r-c);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--ink);
  font-size:16px;
  font-weight:550
}

.promise .i{
  width:16px;
  height:16px;
  stroke-width:2.1;
  color:var(--accent)
}

@media (max-width:39.99em){
  .promise{
    gap:6px;
    margin-top:14px
  }

  .promise li{
    min-height:32px;
    padding:0 11px 0 9px;
    font-size:16px
  }
}

/* Rolling destination: "in [Google Images | ChatGPT | Claude | Gemini | Perplexity]". Pure CSS, no script.
   The hidden sizer stacks every name in one grid cell, so the box keeps the widest name's width and the baseline:
   the headline never reflows. The track scrolls behind a clipping window. Reduced motion: "Google Images" only. */

.found-in{
  white-space:nowrap
}

.roller{
  position:relative;
  display:inline-grid;
  vertical-align:baseline;
  text-align:left
}

.roll-sizer{
  display:inline-grid;
  visibility:hidden
}

.roll-sizer > span{
  grid-area:1 / 1
}

.roll-window{
  position:absolute;
  inset:-.14em -.25em -.2em -.12em;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent, #000 .1em, #000 calc(100% - .06em), transparent);
  mask-image:linear-gradient(transparent, #000 .1em, #000 calc(100% - .06em), transparent)
}

.roll-track{
  position:absolute;
  left:.12em;
  top:.14em;
  display:block;
  animation:roll 12.5s cubic-bezier(.65,0,.35,1) infinite
}

.roll-track > span{
  display:block;
  height:1.4em;
  line-height:inherit;
  white-space:nowrap
}

/* each name holds 2 s, then a 0.5 s roll; the 6th item repeats the 1st, so the loop is seamless */

@keyframes roll{
  0%,16%{
    transform:translateY(0)
  }

  20%,36%{
    transform:translateY(-1.4em)
  }

  40%,56%{
    transform:translateY(-2.8em)
  }

  60%,76%{
    transform:translateY(-4.2em)
  }

  80%,96%{
    transform:translateY(-5.6em)
  }

  100%{
    transform:translateY(-7em)
  }
}

@media (prefers-reduced-motion:reduce){
  .roll-track{
    animation:none !important;
    transform:none
  }
}

/* ---------- Tool: one quiet white panel on the deeper field; product shots set seamlessly around it ---------- */

.tool{
  margin-top:clamp(24px, 3vw, 36px)
}

.stage{
  display:grid;
  grid-template-areas:"drop" "cap";
  padding:10px;
  border-radius:var(--r);
  background:var(--deep)
}

@media (min-width:40em){
  .stage{
    padding:24px
  }
}

.dropzone{
  grid-area:drop;
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  padding:34px 26px 30px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow-tool)
}

@media (min-width:40em){
  .dropzone{
    padding:46px 56px 40px
  }
}

/* The drop target: a 2px dashed accent frame inside the white panel (>= 7:1 on white). Tinted on hover and keyboard
   focus; solid while files are dragged over the page ([data-dragging] on the tool, which also shows the full-page overlay). */

.dropzone::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:-1;
  border:2px dashed var(--accent);
  border-radius:10px;
  transition:background-color .15s, border-color .15s
}

@media (min-width:40em){
  .dropzone::before{
    inset:14px
  }
}

.dropzone:has(.drop-area:hover)::before,.dropzone:has(input:focus-visible)::before{
  border-color:var(--accent-2);
  background:var(--accent-tint)
}

.tool[data-dragging=true] .dropzone::before{
  border-style:solid;
  background:var(--accent-tint)
}

.drop-area{
  display:grid;
  justify-items:center;
  gap:18px;
  cursor:pointer;
  border-radius:var(--r-c)
}

.dropzone:has(input:focus-visible) .drop-area{
  outline:2px solid var(--accent);
  outline-offset:6px
}

/* Upload cue: a large icon in a soft accent circle with one slow, quiet pulsing ring (no ring under reduced motion) */

.drop-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  transition:background-color .15s, color .15s
}

.drop-icon .i{
  width:30px;
  height:30px;
  stroke-width:1.8
}

.drop-icon::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--accent);
  border-radius:50%;
  opacity:0;
  animation:drop-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite
}

@keyframes drop-pulse{
  0%{
    transform:scale(1);
    opacity:.4
  }

  70%,100%{
    transform:scale(1.5);
    opacity:0
  }
}

.dropzone:has(.drop-area:hover) .drop-icon,.dropzone:has(input:focus-visible) .drop-icon,.tool[data-dragging=true] .dropzone .drop-icon{
  background:var(--accent);
  color:#fff
}

@media (prefers-reduced-motion:reduce){
  .drop-icon::before{
    animation:none !important;
    opacity:0
  }
}

.drop-title{
  max-width:18em;
  font:450 clamp(24px, 1rem + .95vw, 30px)/1.12 var(--display);
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance
}

.only-coarse{
  display:none
}

@media (pointer:coarse){
  .only-fine{
    display:none
  }

  .only-coarse{
    display:inline
  }
}

.drop-button{
  margin-top:22px
}

.drop-hint{
  margin-top:14px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85
}

.drop-overlay{
  display:none
}

.tool[data-dragging=true] .drop-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  padding:16px;
  background:var(--overlay);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px)
}

@media (min-width:40em){
  .tool[data-dragging=true] .drop-overlay{
    padding:24px
  }
}

/* Files dragged over the page: the whole window becomes one calm drop target */

.drop-overlay-in{
  display:grid;
  place-content:center;
  justify-items:center;
  gap:12px;
  padding:24px;
  text-align:center;
  border:2px dashed var(--accent);
  border-radius:var(--r);
  background:var(--accent-tint);
  color:var(--ink-2);
  font-size:17px
}

.drop-overlay-in .drop-icon{
  width:92px;
  height:92px;
  margin-bottom:10px;
  background:var(--accent);
  color:#fff
}

.drop-overlay-in .drop-icon .i{
  width:36px;
  height:36px
}

.drop-overlay-in strong{
  font:450 clamp(26px, 1rem + 1.4vw, 36px)/1.15 var(--display);
  letter-spacing:-.01em;
  color:var(--ink)
}

/* Product shots (decorative, from 72em when centered) and the strip of five illustrated tiles under the drop panel */

.hero-photo{
  display:none;
  background-size:contain
}

.hero-strip{
  grid-area:cap;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px, 68%);
  gap:10px;
  margin-top:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  border-radius:var(--r-c)
}

.hero-strip::-webkit-scrollbar{
  display:none
}

@media (min-width:40em){
  .hero-strip{
    grid-auto-columns:minmax(190px, 30%);
    gap:12px;
    margin-top:16px
  }
}

.hs{
  display:grid;
  grid-template-rows:auto auto;
  gap:8px;
  margin:0;
  padding:8px 8px 10px;
  border-radius:var(--r-c);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2);
  scroll-snap-align:start;
  text-align:center
}

.hs-art{
  display:grid;
  place-items:center;
  min-height:108px;
  padding:8px 6px;
  border-radius:8px;
  background:var(--canvas);
  overflow:hidden
}

.hs figcaption{
  color:var(--ink);
  font:600 16px/1.25 var(--font);
  text-wrap:balance
}

/* Each caption starts with a green tick, inline so it stays with the first word when the caption wraps */

.hs figcaption .i{
  display:inline-block;
  width:17px;
  height:17px;
  margin:0 6px 0 0;
  vertical-align:-3px;
  color:var(--accent);
  stroke-width:2.4
}

@media (min-width:72em){
  .stage{
    grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr);
    grid-template-areas:"a drop b" "cap cap cap";
    -moz-column-gap:20px;
         column-gap:20px;
    padding:28px 28px 24px
  }

  .hero-photo{
    display:block;
    align-self:center;
    aspect-ratio:1;
    background-size:112%
  }

  .hp-a{
    grid-area:a
  }

  .hp-b{
    grid-area:b
  }

  .hero-strip{
    grid-auto-flow:row;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-columns:auto;
    overflow:visible;
    margin-top:20px
  }
}

.hs .ma{
  font-size:16px
}

.hs .ma-link{
  display:none
}

/* the tile is too narrow for the licence link at 16px: the badge says it */

.trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 32px;
  margin-top:22px;
  color:var(--ink-2);
  font-size:16px
}

.trust li{
  display:flex;
  align-items:center;
  gap:10px
}

.trust .i{
  width:18px;
  height:18px;
  color:var(--accent)
}

/* Phones: a tighter hero rhythm (chips row added above the drop panel) */

@media (max-width:39.99em){
  .header-in{
    min-height:60px
  }

  .hero{
    padding-top:14px
  }

  .hero-title{
    margin-top:14px
  }

  .lead{
    margin-top:12px;
    font-size:16px;
    line-height:1.5
  }

  .promise li{
    min-height:30px
  }

  .tool{
    margin-top:18px
  }

  .dropzone{
    padding:22px 18px 22px
  }

  .drop-area{
    gap:12px
  }

  .drop-icon{
    width:54px;
    height:54px
  }

  .drop-icon .i{
    width:24px;
    height:24px
  }

  .drop-title{
    font-size:23px
  }

  .drop-button{
    margin-top:16px;
    min-height:52px
  }

  .drop-hint{
    margin-top:10px;
    line-height:1.75
  }
}

/* ---------- Mini illustrations: the five Google Images proofs (hero strip and section rows); aria-hidden ---------- */

.ma{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:7px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.2;
  white-space:nowrap
}

.ma .i{
  width:12px;
  height:12px;
  stroke-width:2
}

.ma-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px
}

.ma-tags{
  max-width:220px
}

.ma-switch-tile .ma-switch{
  padding:7px 10px;
  border-radius:8px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.ma-meta{
  justify-items:stretch;
  gap:6px;
  width:100%;
  max-width:190px;
  padding:8px 10px;
  border-radius:8px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:16px
}

.ma-meta-row{
  display:grid;
  gap:2px;
  text-align:left
}

.ma-k{
  color:var(--muted);
  font-size:1em
}

.ma-v{
  color:var(--ink);
  font-weight:600
}

.ma-kw{
  display:flex;
  flex-wrap:wrap;
  gap:3px
}

.ma-kw span{
  padding:1px 5px;
  border-radius:4px;
  background:var(--deep-2);
  color:var(--ink);
  font-size:1em
}

.ma-line{
  display:block;
  height:5px;
  margin-top:3px;
  border-radius:3px;
  background:var(--deep-2)
}

.ma-signed{
  gap:6px
}

.ma-signed .ma-credits{
  display:grid;
  justify-items:start;
  padding:6px 9px;
  gap:3px
}

.ma-signed .ma-lic{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 8px
}

.ma-signed .ma-badge{
  padding:3px 7px
}

.ma-chip{
  padding:2px 7px;
  border-radius:6px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--muted);
  text-decoration-thickness:1px
}

.ma-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  font-weight:600;
  white-space:normal;
  text-align:left
}

.ma-switch i{
  flex:none;
  position:relative;
  width:28px;
  height:16px;
  border-radius:999px;
  background:var(--accent)
}

.ma-switch i::after{
  content:"";
  position:absolute;
  right:2px;
  top:2px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff
}

.ma-names{
  gap:2px
}

.ma-file{
  padding:2px 8px;
  border-radius:6px;
  font-weight:600
}

s.ma-file{
  color:var(--muted);
  font-weight:500;
  text-decoration-thickness:1px
}

.ma-new{
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--accent);
  color:var(--accent)
}

.ma-down{
  color:var(--accent)
}

.ma-bars{
  gap:6px;
  width:100%;
  max-width:230px
}

.ma-bar{
  display:grid;
  grid-template-columns:auto minmax(24px,1fr) auto;
  align-items:center;
  gap:7px;
  width:100%
}

.ma-bl{
  color:var(--muted);
  text-align:left
}

.ma-bar b{
  color:var(--ink);
  font-weight:600;
  text-align:right
}

.ma-track{
  height:6px
}

.ma-before,.ma-after{
  display:block;
  height:6px
}

.ma-before{
  width:100%;
  background:var(--deep-3)
}

.ma-after{
  width:44%;
  background:var(--accent)
}

.ma-credits{
  justify-items:start;
  gap:5px;
  padding:8px 10px;
  border-radius:8px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--ink);
  font-weight:600
}

.ma-credits span{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.ma-credits .i{
  color:var(--muted)
}

.ma-lic{
  gap:8px
}

.ma-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:6px;
  background:var(--ink);
  color:#fff;
  font-weight:600
}

.ma-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px
}

/* White surfaces on the light canvas and fields: a hairline keeps them distinct */

.file-card,.ai-strip,.sa-card,.ai-switch,.cta-zip,.window,.btn-white,.c-card{
  box-shadow:inset 0 0 0 1px var(--line-2)
}

/* ---------- Works with ---------- */

.works{
  padding-top:clamp(72px, 9vw, 128px)
}

.works-in{
  display:grid;
  gap:32px
}

.works-title{
  font-size:21px;
  line-height:1.25
}

.works-note{
  margin-top:12px;
  max-width:25em;
  color:var(--muted);
  font-size:16px
}

.wordmarks{
  display:flex;
  flex-wrap:wrap;
  gap:16px 36px;
  font:500 clamp(18px, 1rem + .45vw, 23px)/1.2 var(--display);
  letter-spacing:-.01em;
  color:var(--ink-2)
}

@media (min-width:64em){
  .works-in{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .works-copy{
    grid-column:1 / span 4
  }

  .wordmarks{
    grid-column:6 / -1;
    gap:24px 44px;
    padding-top:2px
  }
}

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

.section{
  padding-top:clamp(104px, 12vw, 184px)
}

/* Sand sections, for warmth and rhythm between the green bands (Why it matters, Inside your files, Plain facts).
   The tokens are re-scoped, so wells, hairlines and muted text turn warm; actions stay forest green.
   AA on sand #FAF7F1 / deep #F3EDE2 / #EAE1D1: ink 17.1/15.7/14.1, ink-2 9.9/9.1/8.2, muted 7.1/6.5/5.9, accent 7.0/6.5/5.8 */

.sand{
  --canvas:#FAF7F1;
  --deep:#F3EDE2;
  --deep-2:#EAE1D1;
  --deep-3:#D3C5AA;
  --mist:#FBF9F5;
  --mat:#F4EFE6;
  --line:#E7DFD1;
  --line-2:#DED4C2;
  --ink-2:#433E36;
  --muted:#5A5347;
  --border:#857B6B

}

.section.sand:not(.alt){
  margin-top:clamp(104px, 12vw, 184px);
  padding:clamp(72px, 9vw, 128px) 0;
  background:var(--canvas)
}

.band + .section.sand,.section.sand + .section.alt{
  margin-top:0
}

/* alternate section: a full-bleed deeper field (white cards stay raised on it) */

.section.alt{
  margin-top:clamp(104px, 12vw, 184px);
  padding:clamp(72px, 9vw, 128px) 0;
  background:var(--deep)
}

.sec-head{
  display:grid;
  gap:20px;
  margin-bottom:clamp(44px, 5.5vw, 80px)
}

.sec-head h2,.band h2,.facts-title,.faq-head h2,.cta h2{
  font-size:clamp(34px, 1.1rem + 3vw, 62px);
  font-weight:400;
  font-variation-settings:"opsz" 96;
  line-height:1.08;
  letter-spacing:-.02em
}

.sec-head .kicker{
  margin-bottom:22px
}

.sec-lead,.sec-side p{
  max-width:30em;
  color:var(--ink-2);
  font-size:18px;
  line-height:1.6
}

.sec-side{
  display:grid;
  gap:24px;
  justify-items:start
}

@media (min-width:64em){
  .sec-head{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:end
  }

  .sec-head > :first-child{
    grid-column:1 / span 7
  }

  .sec-head > :last-child{
    grid-column:9 / -1
  }
}

/* ---------- Why it matters: six compact benefits on a Swiss hairline grid (3 × 2 from 72em, 2 × 3 from 44em) ---------- */

.benefits{
  display:grid;
  gap:1px;
  background:var(--line-2);
  border-block:1px solid var(--line-2)
}

.benefit{
  display:flex;
  flex-direction:column;
  padding:30px 0 34px;
  background:var(--canvas)
}

@media (min-width:44em){
  .benefits{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .benefit{
    padding:34px 28px 36px
  }

  .benefit:nth-child(2n+1){
    padding-left:0
  }

  .benefit:nth-child(2n){
    padding-right:0
  }
}

@media (min-width:72em){
  .benefits{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .benefit{
    padding:36px 32px 40px
  }

  .benefit:nth-child(n){
    padding-left:32px;
    padding-right:32px
  }

  .benefit:nth-child(3n+1){
    padding-left:0
  }

  .benefit:nth-child(3n){
    padding-right:0
  }
}

.b-num{
  font:600 16px/1 var(--display);
  letter-spacing:.04em;
  color:var(--accent)
}

.benefit h3{
  margin-top:16px;
  font-size:clamp(21px, 1rem + .5vw, 24px);
  line-height:1.15
}

.benefit > p{
  margin:10px 0 42px;
  max-width:30em;
  color:var(--ink-2);
  font-size:16px
}

.crop{
  position:relative;
  display:grid;
  place-items:center;
  min-height:232px;
  margin-top:auto;
  padding:18px;
  border-radius:var(--r);
  background:var(--deep);
  font-size:16px
}

/* One kit-style sticker per benefit (inline SVG, recoloured: green or sand fill, white die-cut rim, ink line art),
   same box everywhere, on the top-right corner of the illustration well, slightly tilted */

.b-sticker{
  position:absolute;
  z-index:1;
  top:-36px;
  right:14px;
  width:74px;
  height:74px;
  transform:rotate(-7deg);
  pointer-events:none
}

.benefit:nth-child(even) .b-sticker{
  transform:rotate(6deg)
}

.c-card{
  width:100%;
  max-width:330px;
  padding:14px;
  border-radius:var(--r-c);
  background:#fff
}

.c-ok{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--accent);
  font-weight:600;
  font-size:16px;
  white-space:nowrap
}

.c-ok .i{
  width:13px;
  height:13px;
  stroke-width:2.4
}

.c-thumb{
  flex:none;
  width:30px;
  height:30px;
  border-radius:7px
}

/* 001 */

.crop-speed{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:10px;
  align-items:stretch
}

.crop-speed .c-card{
  max-width:none
}

.c-total{
  display:grid;
  align-content:center;
  gap:6px;
  padding:14px 16px
}

.c-total-num{
  font:400 38px/1 var(--display);
  font-variation-settings:"opsz" 144;
  letter-spacing:-.03em;
  color:var(--ink)
}

.c-total-cap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 5px;
  color:var(--ink-2);
  font-size:16px
}

.c-total-cap > span{
  flex-basis:100%;
  color:var(--muted)
}

.c-total-cap s{
  color:var(--muted)
}

.c-total-cap .i{
  width:12px;
  height:12px;
  color:var(--muted)
}

.c-total-cap strong{
  color:var(--ink)
}

.c-bars{
  display:grid;
  align-content:center;
  gap:9px
}

.c-bar{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  white-space:nowrap
}

.c-bar .c-thumb{
  width:24px;
  height:24px;
  border-radius:6px
}

.c-track{
  position:relative;
  height:7px
}

.c-b,.c-a{
  position:absolute;
  left:0;
  top:0;
  height:7px
}

.c-b{
  background:var(--deep-3)
}

.c-a{
  background:var(--accent)
}

.c-val{
  text-align:right;
  font-weight:600;
  font-size:16px;
  font-variant-numeric:tabular-nums
}

@media (max-width:25em){
  .crop-speed{
    grid-template-columns:1fr
  }
}

/* 002 AI answer (neutral, no assistant branding) */

.c-answer{
  display:grid;
  gap:12px
}

.c-ans-head{
  display:flex;
  gap:10px;
  align-items:flex-start
}

.c-ans-mark{
  display:grid;
  place-items:center;
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--deep);
  color:var(--accent)
}

.c-ans-mark .i{
  width:15px;
  height:15px
}

.c-ans-lines{
  display:grid;
  gap:6px;
  flex:1;
  padding-top:4px
}

.c-ans-lines i{
  display:block;
  height:6px;
  border-radius:3px;
  background:var(--deep-2)
}

.c-ans-lines i:nth-child(2){
  width:88%
}

.c-ans-lines i:nth-child(3){
  width:56%
}

.c-ans-src{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.c-ans-thumb{
  flex:none;
  width:46px;
  height:46px;
  border-radius:8px
}

.c-ans-txt{
  display:grid;
  gap:3px;
  min-width:0
}

.c-ans-title{
  color:var(--ink);
  font-weight:600;
  font-size:16px;
  line-height:1.3
}

.c-ans-meta{
  color:var(--muted);
  font-size:16px;
  overflow-wrap:anywhere
}

/* 003 */

.c-meta{
  display:grid
}

.c-meta-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:8px
}

.c-meta-head > span:last-child{
  display:grid;
  line-height:1.25
}

.c-meta-head strong{
  font-size:16px
}

.c-meta-head > span:last-child > span{
  color:var(--muted);
  font-size:16px
}

.c-row{
  display:grid;
  grid-template-columns:16px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:32px;
  border-top:1px solid var(--line)
}

.c-row > .i{
  width:14px;
  height:14px;
  color:var(--muted)
}

/* 004 */

.c-names{
  display:grid;
  justify-items:start;
  gap:4px
}

.c-file{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  font-size:16px;
  overflow-wrap:anywhere
}

.c-file .i{
  width:14px;
  height:14px;
  color:var(--muted)
}

.c-old{
  color:var(--muted);
  font-weight:500
}

.c-new{
  color:var(--ink)
}

.c-arrow{
  padding-left:2px;
  color:var(--accent)
}

.c-arrow .i{
  width:15px;
  height:15px
}

.c-alt{
  width:100%;
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--border)
}

.c-alt p:first-child{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:16px;
  font-weight:600
}

.c-alt-text{
  margin-top:2px;
  color:var(--ink);
  font-size:16px
}

/* 005 */

.c-credits{
  display:grid
}

.c-cred-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:8px
}

.c-cred-head strong{
  font-size:16px
}

.c-cred{
  display:grid;
  grid-template-columns:16px auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:34px;
  border-top:1px solid var(--line)
}

.c-cred > .i{
  width:14px;
  height:14px;
  color:var(--muted)
}

.c-cred span{
  color:var(--muted)
}

.c-cred b{
  text-align:right;
  font-weight:600;
  overflow-wrap:anywhere
}

/* 006 */

.c-levels{
  display:grid;
  gap:4px;
  padding:8px
}

.c-lv{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding:0 10px;
  border-radius:8px;
  color:var(--ink-2);
  font-weight:600
}

.c-lv .i{
  width:16px;
  height:16px;
  color:var(--muted)
}

.c-lv.on{
  background:var(--deep);
  color:var(--ink)
}

.c-lv.on .i{
  color:var(--accent)
}

.c-lv .c-lv-check{
  margin-left:auto;
  stroke-width:2.4
}

.c-lv-note{
  padding:6px 10px 2px;
  color:var(--muted);
  font-size:16px
}

.v-ok{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  font-weight:600;
  font-size:16px;
  white-space:nowrap
}

.v-ok .i{
  width:16px;
  height:16px;
  stroke-width:2.2
}

/* ---------- Get found in Google Images: the result card (left) and five illustrated rows (right), on the deeper band ---------- */

.gi-body{
  display:grid;
  gap:40px
}

@media (min-width:64em){
  .gi-body{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .gi-figure{
    grid-column:1 / span 5;
    position:sticky;
    top:32px
  }

  .gi-points{
    grid-column:6 / -1
  }
}

/* The result card: neutral greys, a plain magnifier, no search-engine logo or brand colours */

.gi-mock{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:var(--r);
  background:#fff;
  color:#202124;
  font-size:16px;
  box-shadow:inset 0 0 0 1px var(--line-2), 0 18px 40px -26px rgba(18,20,26,.28)
}

.gm-search{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 1px #DFE1E5, 0 1px 5px rgba(32,33,36,.1);
  font-size:16px
}

.gm-search .i{
  width:17px;
  height:17px;
  color:#5F6368
}

.gm-q{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.gm-search .gm-clear{
  width:15px;
  height:15px
}

.gm-label{
  margin-top:2px;
  color:#5F6368;
  font-size:16px;
  font-weight:600
}

.gm-thumbs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}

.gm-thumb{
  aspect-ratio:1;
  border-radius:8px
}

.gm-thumb.on{
  outline:2.5px solid var(--accent);
  outline-offset:2px
}

.gm-zoom{
  background-size:150%
}

.gm-flip{
  transform:scaleX(-1)
}

.gm-photo{
  position:relative;
  aspect-ratio:4 / 3;
  margin-top:4px;
  border-radius:10px;
  background-size:cover
}

.gm-flag{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px
}

.gm-clean{
  top:10px;
  right:10px;
  flex-direction:row-reverse
}

.gm-lic{
  left:10px;
  bottom:10px
}

.gm-flag-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:0 9px;
  border-radius:6px;
  background:#fff;
  font-weight:600;
  font-size:16px;
  color:#202124;
  box-shadow:0 1px 3px rgba(32,33,36,.18)
}

.gm-flag-text .i{
  width:13px;
  height:13px;
  color:#3C4043
}

.gm-flag-dark{
  background:#202124;
  color:#fff
}

.gm-flag-dark .i{
  color:#fff
}

.gm-mark{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font:600 16px/1 var(--display);
  box-shadow:0 0 0 2px #fff
}

.gm-info{
  display:grid;
  gap:10px;
  padding:2px 2px 0
}

.gm-site{
  display:flex;
  align-items:center;
  gap:8px;
  color:#3C4043;
  font-size:16px
}

.gm-fav{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#F1F3F4;
  box-shadow:inset 0 0 0 1px #E3E5E8;
  font:700 16px/1 var(--font);
  color:#3C4043
}

.gm-file{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  font:500 17px/1.3 var(--font)
}

.gm-file > span:first-child{
  overflow-wrap:anywhere
}

.gm-credits{
  display:grid;
  gap:5px;
  padding:10px 12px;
  border-radius:8px;
  background:#F8F9FA;
  font-size:16px
}

.gm-credits p{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px
}

.gm-credits-title{
  color:#5F6368;
  font-size:16px;
  font-weight:600
}

.gm-licence{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--accent);
  font-weight:600;
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:3px
}

.gm-licence .i{
  width:14px;
  height:14px
}

.gi-fine{
  margin-top:16px;
  max-width:40em;
  color:var(--muted);
  font-size:16px
}

/* Five rows: illustration tile + numbered title + text, in one white card */

.gi-points{
  display:grid;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.gp{
  display:grid;
  gap:16px;
  padding:20px
}

.gp + .gp{
  border-top:1px solid var(--line)
}

@media (min-width:40em){
  .gp{
    grid-template-columns:200px minmax(0,1fr);
    align-items:center;
    gap:24px;
    padding:22px 26px 22px 22px
  }
}

.gp-art{
  display:grid;
  place-items:center;
  min-height:110px;
  padding:12px;
  border-radius:10px;
  background:var(--canvas)
}

.gp-art .ma{
  font-size:16px
}

@media (max-width:39.99em){
  .gp-art{
    min-height:88px
  }
}

.gp-copy h3{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  line-height:1.2
}

.gp-num{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font:600 16px/1 var(--display)
}

.gp-copy p{
  margin-top:8px;
  color:var(--ink-2);
  font-size:16px
}

.gi-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  margin-top:clamp(40px, 5vw, 64px)
}

.gi-cta p{
  color:var(--muted);
  font-size:16px
}

/* ---------- Four steps ---------- */

.steps{
  display:grid;
  gap:56px 32px
}

@media (min-width:40em){
  .steps{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (min-width:72em){
  .steps{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}

.step-art{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:5 / 4;
  padding:24px;
  border-radius:var(--r);
  background:var(--deep);
  overflow:hidden;
  font-size:16px
}

.sa-add{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:28px
}

@media (max-width:39.99em){
  .step-art{
    aspect-ratio:auto;
    min-height:220px;
    padding:28px 24px
  }

  .sa-add{
    padding:36px 28px
  }
}

.sa-thumb{
  width:100%;
  aspect-ratio:1;
  border-radius:10px
}

.sa-cursor{
  position:absolute;
  right:22%;
  bottom:20%;
  width:26px;
  height:26px;
  color:var(--ink);
  fill:#fff;
  stroke-width:1.5
}

.sa-card{
  display:grid;
  gap:10px;
  width:100%;
  max-width:290px;
  padding:18px;
  border-radius:var(--r-c);
  background:#fff
}

.sa-card-title{
  font-weight:600
}

.sa-bar{
  display:block;
  height:6px;
  background:var(--deep-2)
}

.sa-bar span{
  display:block;
  height:6px;
  background:var(--accent)
}

.sa-line{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  color:var(--ink-2)
}

.sa-mini{
  width:28px;
  height:28px;
  border-radius:6px
}

.sa-save{
  color:var(--accent);
  font-weight:600
}

.sa-label{
  color:var(--muted);
  font-size:16px;
  font-weight:600
}

.sa-input{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border:1.5px solid var(--accent);
  border-radius:10px;
  font-size:16px;
  font-weight:500
}

.caret{
  display:inline-block;
  width:1.5px;
  height:1.15em;
  margin-left:2px;
  background:var(--ink);
  animation:blink 1.1s steps(1) infinite
}

@keyframes blink{
  50%{
    opacity:0
  }
}

.sa-saves{
  color:var(--muted);
  font-size:16px
}

.sa-saves b{
  color:var(--ink);
  font-weight:600
}

.sa-zip-file{
  display:flex;
  align-items:center;
  gap:12px
}

.sa-zip-file > .i{
  width:24px;
  height:24px;
  color:var(--accent)
}

.sa-zip-file > span{
  display:grid;
  line-height:1.3
}

.sa-zip-file > span > span{
  color:var(--muted);
  font-size:16px
}

.sa-zip-done{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  font-weight:600;
  font-size:16px
}

.sa-zip-done .i{
  width:15px;
  height:15px;
  stroke-width:2.2
}

.sa-dl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  margin-top:4px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:600
}

.sa-dl .i{
  width:16px;
  height:16px
}

.step-copy{
  margin-top:24px
}

.step-num{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--accent);
  font-size:16px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase
}

.step-num span{
  font:600 16px/1 var(--display);
  letter-spacing:0
}

.step-copy h3{
  margin-top:14px;
  font-size:24px
}

.step-copy p:last-child{
  margin-top:10px;
  color:var(--ink-2);
  font-size:16.5px
}

/* ---------- Inside your files: stone before, sage after ---------- */

.compare{
  display:grid;
  gap:12px
}

@media (min-width:64em){
  .compare{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:20px;
    align-items:stretch
  }
}

.file-card{
  padding:24px;
  border-radius:var(--r)
}

@media (min-width:40em){
  .file-card{
    padding:40px
  }
}

.file-before,.file-after{
  background:#fff
}

.file-head{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding-bottom:22px
}

@media (min-width:40em){
  .file-head{
    grid-template-columns:72px minmax(0,1fr) auto;
    gap:20px
  }
}

.file-thumb{
  width:100%;
  aspect-ratio:1;
  border-radius:10px
}

.file-tag{
  color:var(--muted);
  font-size:16px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase
}

.file-after .file-tag{
  color:var(--accent)
}

.file-head h3{
  margin-top:4px;
  font-size:clamp(17px, 1rem + .4vw, 21px);
  overflow-wrap:anywhere
}

.file-size{
  display:grid;
  justify-items:end;
  font:500 clamp(18px, 1rem + .5vw, 24px)/1.15 var(--display);
  letter-spacing:-.01em;
  white-space:nowrap
}

.file-save{
  font:600 16px/1.4 var(--font);
  color:var(--accent);
  letter-spacing:0
}

.file-rows > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:center;
  gap:16px;
  min-height:54px;
  padding:8px 0;
  border-top:1px solid rgba(18,22,20,.09)
}

.file-rows dt{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink-2);
  font-size:16px
}

.file-rows dt .i{
  width:18px;
  height:18px;
  color:var(--muted)
}

.file-rows dd{
  text-align:right;
  font-weight:600;
  font-size:16px;
  overflow-wrap:anywhere
}

.file-rows dd.bad{
  color:var(--red)
}

.file-rows dd.none{
  color:var(--muted);
  font-weight:500
}

.file-rows dd.good{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  color:var(--accent)
}

.file-rows dd.good .i{
  width:16px;
  height:16px;
  stroke-width:2.2
}

.compare-arrow{
  display:none
}

@media (min-width:64em){
  .compare-arrow{
    display:grid;
    place-items:center;
    color:var(--muted)
  }

  .compare-arrow .i{
    width:24px;
    height:24px
  }
}

.fine{
  margin-top:20px;
  color:var(--muted);
  font-size:16px
}

/* ---------- AI product photos ---------- */

.ai{
  display:grid;
  gap:48px
}

@media (min-width:72em){
  .ai{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .ai-head{
    grid-column:1 / span 6
  }

  .ai-cards{
    grid-column:8 / -1
  }
}

.ai-head h2{
  margin-top:22px;
  font-size:clamp(32px, 1.1rem + 2.6vw, 54px);
  font-weight:400;
  font-variation-settings:"opsz" 96;
  line-height:1.08;
  letter-spacing:-.02em
}

.ai-lead{
  margin-top:24px;
  max-width:32em;
  color:var(--ink-2);
  font-size:18px
}

.ai-strip{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:center;
  gap:16px;
  margin-top:40px;
  padding:12px 20px 12px 12px;
  border-radius:var(--r);
  background:#fff
}

@media (min-width:40em){
  .ai-strip{
    grid-template-columns:168px minmax(0,1fr);
    gap:28px;
    padding:16px 32px 16px 16px
  }
}

.ai-shot{
  aspect-ratio:1;
  background-size:125%
}

.strip-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px 16px
}

.ai-strip-name{
  display:grid;
  gap:2px
}

.ai-strip-name strong{
  font:500 18px/1.3 var(--display);
  letter-spacing:-.01em
}

.ai-strip-name span{
  color:var(--muted);
  font-size:16px
}

.strip-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-top:14px;
  color:var(--muted);
  font-size:16px
}

.strip-tags s{
  text-decoration-thickness:1px
}

.ai-cards{
  display:grid;
  gap:40px;
  padding:clamp(28px, 4vw, 48px);
  border-radius:var(--r);
  background:var(--deep)
}

.ai-card h3{
  font-size:23px
}

.ai-card p{
  margin-top:10px;
  color:var(--ink-2);
  font-size:16.5px
}

.ai-list{
  display:grid;
  gap:10px;
  margin-top:16px
}

.ai-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:16px
}

.ai-list .i{
  width:18px;
  height:18px;
  margin-top:3px;
  stroke-width:2.1;
  color:var(--accent)
}

.ai-switch{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:20px !important;
  padding:14px 18px;
  border-radius:var(--r-c);
  background:#fff
}

.ai-switch-text{
  display:grid;
  line-height:1.35
}

.ai-switch-text b{
  color:var(--ink);
  font-weight:650
}

.ai-switch-text span{
  color:var(--muted);
  font-size:16px
}

.ai-toggle i{
  width:44px;
  height:26px
}

.ai-toggle i::after{
  top:3px;
  right:3px;
  width:20px;
  height:20px
}

/* ---------- Workspace on a sage field ---------- */

.band{
  margin-top:clamp(104px, 12vw, 184px);
  padding:clamp(72px, 9vw, 136px) 0;
  background:var(--deep)
}

.band-head{
  display:grid;
  gap:24px
}

.band h2{
  margin-top:22px
}

.band-side p{
  max-width:30em;
  color:var(--ink-2);
  font-size:18px
}

.band-side .btn{
  margin-top:28px
}

@media (min-width:64em){
  .band-head{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:end
  }

  .band-head > :first-child{
    grid-column:1 / span 7
  }

  .band-side{
    grid-column:9 / -1
  }
}

.showcase{
  margin-top:clamp(44px, 5.5vw, 80px)
}

.window{
  display:grid;
  gap:10px;
  padding:10px;
  border-radius:var(--r);
  background:#fff;
  font-size:16px;
  line-height:1.4
}

@media (min-width:60em){
  .window{
    grid-template-columns:250px minmax(0,1fr)
  }
}

.win-side{
  display:none
}

@media (min-width:60em){
  .win-side{
    display:grid;
    align-content:start;
    gap:8px;
    padding:18px 16px;
    border-radius:10px;
    background:var(--deep)
  }
}

.ws-brand{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font:600 16px/1 var(--display)
}

.ws-brand .logo{
  width:22px;
  height:22px
}

.ws-label{
  margin-top:8px;
  color:var(--ink-2);
  font-weight:600
}

.ws-seg{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  padding:3px;
  border-radius:8px;
  background:var(--deep-2)
}

.ws-seg-2{
  grid-template-columns:1fr 1fr
}

.ws-seg span{
  display:grid;
  place-items:center;
  min-height:30px;
  border-radius:6px;
  color:var(--ink-2)
}

.ws-seg .on{
  background:#fff;
  color:var(--ink);
  font-weight:600
}

.ws-brandset{
  position:relative;
  display:grid;
  gap:6px
}

.ws-field{
  display:flex;
  align-items:center;
  min-height:32px;
  padding:0 10px;
  border-radius:7px;
  background:#fff;
  color:var(--ink)
}

.ws-switch{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  color:var(--ink);
  font-weight:600
}

.ws-switch i{
  position:relative;
  width:30px;
  height:18px;
  border-radius:999px;
  background:var(--deep-3)
}

.ws-switch i::after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff
}

.ws-device{
  display:flex;
  gap:8px;
  margin-top:14px;
  color:var(--ink-2)
}

.ws-device .i{
  width:15px;
  height:15px;
  color:var(--accent)
}

.ws-device span{
  display:grid
}

.ws-device b{
  color:var(--ink)
}

.ws-pin{
  position:absolute;
  z-index:1;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font:600 16px/1 var(--display)
}

.ws-brandset > .ws-pin{
  right:-6px;
  top:2px
}

.win-main{
  display:grid;
  align-content:start;
  gap:14px;
  padding:14px 12px 12px
}

@media (min-width:60em){
  .win-main{
    padding:18px 20px 12px 18px
  }
}

.wm-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.wm-title{
  font:400 clamp(18px, 1rem + .5vw, 22px)/1.1 var(--display);
  letter-spacing:-.015em
}

.wm-steps{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted)
}

.wm-steps > span{
  display:inline-flex;
  align-items:center;
  gap:5px
}

.wm-steps b,.wm-steps .i{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--deep);
  font:600 16px/1 var(--font)
}

.wm-steps .done{
  color:var(--ink-2)
}

.wm-steps .done .i{
  padding:3px;
  background:var(--accent);
  color:#fff;
  stroke-width:3
}

.wm-steps .now{
  color:var(--ink);
  font-weight:600
}

.wm-steps .now b{
  background:var(--ink);
  color:#fff
}

.wm-steps > i{
  width:12px;
  height:1px;
  background:var(--line-2)
}

.wm-stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 28px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--mist);
  color:var(--muted)
}

.wm-stat{
  display:grid;
  line-height:1.25
}

.wm-stat b{
  font:500 20px/1.1 var(--display);
  letter-spacing:-.01em;
  color:var(--ink)
}

.wm-dl{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  margin-left:auto;
  padding:0 16px;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font-weight:600
}

.wm-dl .i{
  width:15px;
  height:15px
}

.wm-dl > .ws-pin{
  left:-10px;
  top:-10px
}

.wm-cards{
  display:grid;
  gap:10px
}

@media (min-width:40em){
  .wm-cards{
    grid-template-columns:1fr 1fr
  }
}

.wm-card{
  display:grid;
  gap:6px;
  align-content:start;
  padding:10px 10px 12px;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--line)
}

.wm-media{
  height:110px;
  margin-bottom:4px;
  border-radius:7px;
  background-size:contain;
  background-color:var(--mat)
}

.wm-media.checker{
  background-size:contain, 12px 12px
}

.wm-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 8px
}

.wm-card-head b{
  flex-basis:100%;
  color:var(--ink);
  font-size:16px
}

.wm-tags{
  display:inline-flex;
  gap:6px;
  color:var(--muted)
}

.wm-tags i{
  font-style:normal
}

.wm-tags i + i::before{
  content:"·";
  margin-right:6px
}

.wm-size{
  color:var(--muted)
}

.wm-size em{
  font-style:normal;
  font-weight:600;
  color:var(--accent)
}

.wm-label{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  color:var(--ink);
  font-weight:600
}

.wm-label span{
  color:var(--muted);
  font-weight:500
}

.wm-input{
  display:flex;
  align-items:center;
  min-height:34px;
  padding:0 10px;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px var(--border);
  color:var(--ink);
  font-weight:500
}

.wm-input-sm{
  min-height:42px;
  align-items:flex-start;
  padding-top:7px
}

.wm-focus{
  box-shadow:inset 0 0 0 1.5px var(--accent)
}

.wm-ph{
  color:var(--muted);
  font-weight:400
}

.wm-saves{
  color:var(--muted)
}

.wm-saves b{
  color:var(--ink)
}

.wm-field-pin{
  position:relative
}

.wm-field-pin > .ws-pin{
  right:-8px;
  top:-9px
}

.callouts{
  display:grid;
  gap:14px;
  margin-top:28px;
  counter-reset:callout
}

@media (min-width:48em){
  .callouts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px
  }
}

.callout{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  font-size:16px;
  font-weight:500
}

.callout::before{
  counter-increment:callout;
  content:counter(callout);
  display:grid;
  place-items:center;
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font:600 16px/1 var(--display)
}

@media (max-width:59.99em){
  .ws-pin{
    display:none
  }

  .callout::before{
    display:none
  }

  .callout{
    padding-left:14px;
    box-shadow:inset 2px 0 0 var(--accent)
  }
}

/* ---------- Plain facts: oversized numbers ---------- */

.facts-title{
  max-width:11em
}

.facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px 24px;
  margin-top:clamp(48px, 6vw, 88px)
}

@media (min-width:64em){
  .facts{
    grid-template-columns:repeat(4,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px
  }
}

.fact{
  display:grid;
  align-content:start;
  gap:18px
}

.fact dt{
  color:var(--muted);
  font-size:16px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase
}

.fact dd{
  display:grid;
  gap:14px
}

.fact b{
  font:400 clamp(48px, .5rem + 5.6vw, 96px)/.9 var(--display);
  font-variation-settings:"opsz" 144;
  letter-spacing:-.03em;
  color:var(--ink);
  white-space:nowrap
}

.fact dd span{
  max-width:14em;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.45
}

/* ---------- More tools ---------- */

.tools{
  display:grid;
  gap:44px 32px
}

@media (min-width:40em){
  .tools{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (min-width:72em){
  .tools{
    grid-template-columns:repeat(5,minmax(0,1fr))
  }

  .tools:has(> :nth-child(6)){
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  /* the guide lists all six tools */
}

.tool-card{
  position:relative;
  display:grid;
  align-content:start;
  gap:10px;
  padding-right:28px
}

.tool-icon{
  width:26px;
  height:26px;
  margin-bottom:8px;
  color:var(--accent);
  stroke-width:1.5
}

@media (max-width:39.99em){
  .tools{
    gap:32px
  }

  .tool-card{
    grid-template-columns:26px minmax(0,1fr);
    -moz-column-gap:16px;
         column-gap:16px;
    row-gap:6px
  }

  .tool-icon{
    grid-row:1 / span 2;
    margin:2px 0 0
  }
}

.tool-card h3{
  font-size:20px
}

.tool-card h3 a{
  text-decoration:none
}

.tool-card h3 a::after{
  content:"";
  position:absolute;
  inset:-14px -12px;
  border-radius:var(--r-c)
}

.tool-card h3 a:focus-visible{
  outline:none
}

.tool-card h3 a:focus-visible::after{
  outline:2px solid var(--accent);
  outline-offset:0
}

.tool-card:hover h3 a{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1.5px
}

.tool-card p{
  color:var(--ink-2);
  font-size:16px
}

.tool-go{
  position:absolute;
  right:0;
  top:0;
  color:var(--muted)
}

.tool-go .i{
  width:18px;
  height:18px
}

.tool-card:hover .tool-go{
  color:var(--accent)
}

/* ---------- FAQ ---------- */

.faq{
  display:grid;
  gap:40px
}

@media (min-width:64em){
  .faq{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .faq-head{
    grid-column:1 / span 4;
    position:sticky;
    top:32px
  }

  .faq-list{
    grid-column:6 / -1
  }
}

.faq-head > p:not(.faq-mail){
  margin-top:22px;
  color:var(--ink-2);
  font-size:18px
}

.faq-mail{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:24px;
  color:var(--ink-2);
  font-size:16px
}

.faq-mail .i{
  width:18px;
  height:18px;
  color:var(--muted)
}

.faq-mail a{
  color:var(--accent);
  font-weight:600;
  text-underline-offset:3px
}

.qa{
  border-top:1px solid var(--line)
}

.qa:last-child{
  border-bottom:1px solid var(--line)
}

.qa summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  min-height:76px;
  padding:16px 0;
  list-style:none;
  cursor:pointer;
  font:500 clamp(17px, 1rem + .3vw, 20px)/1.35 var(--display);
  letter-spacing:-.01em;
  border-radius:var(--r-c)
}

.qa summary::-webkit-details-marker{
  display:none
}

.qa summary:hover .qa-icon{
  background:var(--deep-2)
}

.qa-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:var(--r-c);
  background:var(--deep);
  transition:background-color .15s
}

.qa-icon .i{
  width:18px;
  height:18px;
  stroke-width:1.9;
  transition:transform .2s
}

.qa[open] .qa-icon .i{
  transform:rotate(45deg)
}

.qa p{
  max-width:44em;
  padding:0 64px 30px 0;
  color:var(--ink-2);
  font-size:17px
}

@media (max-width:39.99em){
  .qa p{
    padding-right:0
  }
}

/* ---------- Final CTA ---------- */

.cta-section{
  padding-top:clamp(104px, 12vw, 184px)
}

.cta{
  display:grid;
  gap:40px;
  padding:clamp(28px, 6vw, 88px);
  border-radius:var(--r);
  background:var(--deep)
}

@media (min-width:64em){
  .cta{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    -moz-column-gap:48px;
         column-gap:48px
  }
}

.cta-copy > p:first-of-type{
  margin-top:22px;
  max-width:28em;
  color:var(--ink-2);
  font-size:18px
}

.cta-copy .btn{
  margin-top:36px
}

.cta-bookmark{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:22px;
  color:var(--muted);
  font-size:16px
}

.cta-bookmark .i{
  width:17px;
  height:17px;
  margin-top:3px
}

.cta-art{
  display:grid;
  gap:16px
}

.cta-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.cta-shot{
  aspect-ratio:1;
  background-size:118%;
}

.cta-shot:nth-child(2){
  background-size:128%
}

.cta-zip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 14px;
  padding:16px 18px;
  border-radius:var(--r-c);
  background:#fff;
  font-size:16px
}

.cta-zip > .i{
  width:24px;
  height:24px;
  color:var(--accent)
}

.cta-zip > span{
  display:grid;
  line-height:1.35
}

.cta-zip > span > span{
  color:var(--muted);
  font-size:16px
}

.cta-ready{
  margin-left:auto;
  text-align:right
}

@media (max-width:39.99em){
  .cta-ready{
    margin-left:38px;
    text-align:left
  }
}

/* ---------- Footer ---------- */

.site-footer{
  margin-top:clamp(96px, 11vw, 160px);
  padding:0 0 40px
}

.foot-grid{
  display:grid;
  gap:40px;
  padding-top:48px;
  border-top:1px solid var(--line)
}

@media (min-width:40em){
  .foot-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .foot-brand{
    grid-column:1 / -1
  }
}

/* Three link columns (tools, guides, about): under the brand until 80em, then on its row */

@media (min-width:80em){
  .foot-grid{
    grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px
  }

  .foot-brand{
    grid-column:auto
  }
}

.foot-brand > p{
  margin-top:14px;
  max-width:26em;
  color:var(--ink-2);
  font-size:16px
}

.foot-promise{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--accent) !important;
  font-weight:600
}

.foot-promise .i{
  width:17px;
  height:17px
}

.site-footer nav h2{
  color:var(--muted);
  font:600 16px/1.2 var(--font);
  letter-spacing:.08em;
  text-transform:uppercase
}

.site-footer nav ul{
  display:grid;
  margin-top:12px
}

.site-footer nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--ink-2);
  font-size:16px;
  text-decoration:none;
  overflow-wrap:anywhere
}

.site-footer nav a:hover{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px
}

.site-footer nav a[aria-current]{
  color:var(--ink);
  font-weight:600
}

.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  margin-top:40px;
  color:var(--muted);
  font-size:16px
}

/* ==========================================================================
   Workspace (template: form.css), shown once images are in (html[data-view=workspace])
   An inset sage sidebar for the settings, the main area, the batch bar and generous cards with large
   previews, all flat. One spacing from 64em: 2.5rem from the window's edges, between the sidebar and the
   main area, between the main area's blocks and between cards; 2rem inside the sidebar, the bar and the cards.
   ========================================================================== */

.app{
  display:none
}

html[data-view=workspace] .app{
  display:block
}

@media (min-width:64em){
  html[data-view=workspace] .app{
    display:grid;
    grid-template-columns:380px minmax(0,1fr);
    align-items:start;
    padding-left:2.5rem
  }
}

/* ---------- Sidebar: a quiet sage panel ---------- */

/* A sage edge sets it apart (#B4C2B8). From 64em it stays in view, 2.5rem from the window's top and bottom. */

.side{
  display:flex;
  flex-direction:column;
  margin:12px 12px 0;
  padding:10px 12px 10px 16px;
  background:var(--deep);
  border:1px solid #B4C2B8;
  border-radius:var(--r)
}

@media (min-width:64em){
  .side{
    position:sticky;
    top:2.5rem;
    height:calc(100vh - 5rem);
    height:calc(100dvh - 5rem);
    margin:2.5rem 0;
    padding:2rem;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--deep-3) transparent
  }
}

.side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

/* From 64em the logo sits 2rem from the sidebar's top edge, like its other sides: the brand's 44px target spills over */

@media (min-width:64em){
  .side-top{
    margin-top:-7px
  }
}

/* Settings panel: one summary line under 64em, forced open from 64em */

.panel{
  margin-top:6px
}

.panel-summary{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:60px;
  padding:8px 0;
  border-top:1px solid var(--line-2);
  list-style:none;
  cursor:pointer
}

.panel-summary::-webkit-details-marker{
  display:none
}

.panel-summary-icon{
  display:grid;
  place-items:center;
  flex:none;
  color:var(--accent)
}

.panel-summary-text{
  display:grid;
  flex:1;
  min-width:0
}

.panel-summary-title{
  font:650 16px/1.25 var(--font);
  color:var(--ink)
}

.panel-summary-values{
  font-size:16px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.panel-summary-values .i{
  display:inline;
  width:14px;
  height:14px;
  vertical-align:-2px;
  stroke-width:2.4;
  color:var(--accent)
}

.dot{
  margin:0 .35em
}

.sum{
  display:none
}

/* Scoped to the sidebar's panel: each card has presets and choices of its own */

.tool:not(:has([data-optimizer-target~=shared]:not(:-moz-placeholder-shown))) .sum-nobrand, .tool:has([data-optimizer-target~=shared]:not(:-moz-placeholder-shown)) .sum-brand{
  display:inline
}

.panel:has([data-optimizer-quality-param="60"][aria-pressed=true]) .sum-q60,
.panel:has([data-optimizer-quality-param="80"][aria-pressed=true]) .sum-q80,
.panel:has([data-optimizer-quality-param="100"][aria-pressed=true]) .sum-q100,
.panel:not(:has([data-optimizer-quality-param][aria-pressed=true])) .sum-qx,
.panel:has([name=output_format][value=jpeg]:checked) .sum-fjpeg,
.panel:has([name=output_format][value=webp]:checked) .sum-fwebp,
.panel:has([name=output_format][value=png]:checked) .sum-fpng,
.tool:has([name=separator][value="_"]:checked) .sum-under,
.tool:not(:has([data-optimizer-target~=shared]:not(:placeholder-shown))) .sum-nobrand,
.tool:has([data-optimizer-target~=shared]:not(:placeholder-shown)) .sum-brand,
.tool:has([data-optimizer-target~=aiTag]:checked) .sum-ai,
.tool[data-pending] .sum-pending{
  display:inline
}

.sum-pending{
  color:#8A5A0A;
  font-weight:600
}

.panel-summary-edit{
  display:inline-grid;
  place-items:center;
  min-height:44px;
  padding:0 18px;
  border-radius:var(--r-c);
  background:#fff;
  color:var(--ink);
  font:600 16px/1 var(--font);
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.when-open{
  display:none
}

.panel[open] .when-open{
  display:inline
}

.panel[open] .when-closed{
  display:none
}

.panel-body{
  padding:8px 0 14px
}

.panel-head{
  display:none
}

@media (min-width:64em){
  .panel-summary{
    display:none
  }

  .panel::details-content{
    content-visibility:visible;
    display:block
  }

  .panel-body{
    padding:0
  }

  .panel-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-top:28px
  }

  .panel-head h2{
    font:600 16px/1 var(--font);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted)
  }

  .panel-head p{
    font-size:16px;
    color:var(--muted)
  }

  .panel-head + .group{
    margin-top:18px
  }
}

.group{
  margin-top:28px
}

.group-title{
  display:block;
  padding:0;
  margin-bottom:10px;
  font:600 16px/1.25 var(--font);
  color:var(--ink)
}

/* Compression: three presets in a segmented track */

.presets,.seg{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  padding:4px;
  border-radius:var(--r-c);
  background:var(--deep-2)
}

.preset{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:6px;
  min-height:62px;
  padding:8px 4px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--ink-2);
  font:600 16px/1 var(--font)
}

.preset .i{
  width:20px;
  height:20px;
  color:var(--muted)
}

.preset:hover{
  background:rgba(255,255,255,.5);
  color:var(--ink)
}

.preset[aria-pressed=true]{
  background:#fff;
  color:var(--ink)
}

.preset[aria-pressed=true] .i{
  color:var(--accent)
}

.hint{
  margin-top:10px;
  font-size:16px;
  line-height:1.45;
  color:var(--muted)
}

.qh{
  display:none
}

.panel:has([data-optimizer-quality-param="60"][aria-pressed=true]) .qh-60,
.panel:has([data-optimizer-quality-param="80"][aria-pressed=true]) .qh-80,
.panel:has([data-optimizer-quality-param="100"][aria-pressed=true]) .qh-100,
.panel:not(:has([data-optimizer-quality-param][aria-pressed=true])) .qh-x{
  display:inline
}

.group-more{
  margin-top:6px
}

.group-more > summary{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 8px;
  margin:0 -8px;
  border-radius:var(--r-c);
  list-style:none;
  cursor:pointer;
  color:var(--ink-2);
  font:600 16px/1 var(--font)
}

.group-more > summary::-webkit-details-marker{
  display:none
}

.group-more > summary:hover{
  color:var(--ink);
  background:var(--deep-2)
}

.group-more > summary .i{
  width:18px;
  height:18px
}

.chevron{
  margin-left:auto;
  transition:transform .2s
}

details[open] > summary .chevron{
  transform:rotate(180deg)
}

.panel:not(:has([data-optimizer-quality-param][aria-pressed=true])) .group-more::details-content{
  content-visibility:visible;
  display:block
}

.custom-quality{
  padding:6px 0 2px
}

.custom-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:16px;
  color:var(--ink-2)
}

.quality-value{
  font:600 16px/1 var(--display);
  color:var(--ink)
}

.range{
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  display:block;
  width:100%;
  height:44px;
  margin:0;
  background:transparent;
  cursor:pointer
}

.range::-webkit-slider-runnable-track{
  height:4px;
  background:linear-gradient(to right, var(--accent) var(--fill, 78%), var(--deep-3) var(--fill, 78%))
}

.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:22px;
  margin-top:-9px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--border)
}

.range::-moz-range-track{
  height:4px;
  background:var(--deep-3)
}

.range::-moz-range-progress{
  height:4px;
  background:var(--accent)
}

.range::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--border)
}

.range-scale{
  display:flex;
  justify-content:space-between;
  font-size:16px;
  color:var(--muted)
}

/* File names: two-option segmented control */

.names{
  margin:28px 0 0;
  padding:0;
  border:0;
  min-width:0
}

.names legend{
  float:left;
  width:100%
}

.names legend + *{
  clear:both
}

.seg{
  grid-template-columns:1fr 1fr
}

.seg.seg-4{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.formats{
  margin-top:28px
}

.seg-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  border-radius:9px;
  color:var(--ink-2);
  font:600 16px/1 var(--font);
  cursor:pointer
}

.seg-btn .i{
  width:18px;
  height:18px;
  color:var(--muted)
}

.seg-btn:hover{
  background:rgba(255,255,255,.5);
  color:var(--ink)
}

.seg-btn:has(input:checked){
  background:#fff;
  color:var(--ink)
}

.seg-btn:has(input:checked) .i{
  color:var(--accent)
}

.seg-btn:has(input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:2px
}

/* Brand */

.group-credits > summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  list-style:none;
  cursor:pointer;
  border-radius:var(--r-c)
}

.group-credits > summary::-webkit-details-marker{
  display:none
}

.group-credits > summary .chevron{
  color:var(--ink-2)
}

.summary-text{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:2px 8px;
  flex:1
}

.summary-text .group-title{
  margin:0
}

.credits-off,.credits-on{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:500 16px/1.2 var(--font)
}

.credits-off{
  color:var(--muted)
}

.credits-on{
  display:none;
  color:var(--accent);
  font-weight:650
}

.credits-on .i{
  width:14px;
  height:14px;
  stroke-width:2.6
}

.tool:has([data-optimizer-target~=shared]:not(:-moz-placeholder-shown)) .credits-on{
  display:inline-flex
}

.tool:has([data-optimizer-target~=shared]:not(:placeholder-shown)) .credits-on{
  display:inline-flex
}

.tool:has([data-optimizer-target~=shared]:not(:-moz-placeholder-shown)) .credits-off{
  display:none
}

.tool:has([data-optimizer-target~=shared]:not(:placeholder-shown)) .credits-off{
  display:none
}

.credits-body{
  display:grid;
  gap:12px;
  padding:6px 0 2px
}

.side .field label{
  display:block;
  margin-bottom:6px;
  font:500 16px/1.2 var(--font);
  color:var(--ink-2)
}

.input-wrap{
  position:relative;
  display:block
}

.input-wrap > .i{
  position:absolute;
  left:13px;
  top:50%;
  translate:0 -50%;
  width:17px;
  height:17px;
  color:var(--muted);
  pointer-events:none
}

.side .input{
  width:100%;
  min-height:46px;
  padding:0 12px 0 40px;
  border:1px solid var(--border);
  border-radius:var(--r-c);
  background:#fff;
  color:var(--ink);
  font:500 16px/1.2 var(--font);
  transition:border-color .15s, box-shadow .15s
}

.side .input::-moz-placeholder{
  color:var(--muted);
  font-weight:400;
  opacity:1
}

.side .input::placeholder{
  color:var(--muted);
  font-weight:400;
  opacity:1
}

.side .input:hover{
  border-color:var(--ink-2)
}

.side .input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow)
}

.credits-body .hint{
  display:flex;
  gap:8px;
  margin-top:0;
  font-size:16px
}

.credits-body .hint .i{
  width:15px;
  height:15px;
  margin-top:2px;
  color:var(--accent);
  stroke-width:2.2
}

/* Keep Google's AI tag: a real checkbox with role=switch */

.group-ai{
  margin-top:24px
}

.switch-row{
  display:flex;
  align-items:center;
  gap:12px
}

.switch-label{
  flex:1;
  display:flex;
  align-items:center;
  min-height:44px;
  margin:0;
  cursor:pointer
}

.switch{
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  position:relative;
  flex:none;
  width:50px;
  height:30px;
  margin:0;
  border:1.5px solid var(--border);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  transition:background-color .15s, border-color .15s
}

.switch::before{
  content:"";
  position:absolute;
  left:4px;
  top:50%;
  width:20px;
  height:20px;
  translate:0 -50%;
  border-radius:50%;
  background:var(--muted);
  transition:translate .15s, background-color .15s
}

.switch:hover{
  border-color:var(--ink-2)
}

.switch:checked{
  background:var(--accent);
  border-color:var(--accent)
}

.switch:checked::before{
  translate:19px -50%;
  background:#fff
}

.switch:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px
}

.group-ai .hint{
  margin-top:2px
}

.panel-foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  font-size:16px;
  color:var(--ink-2)
}

.panel-foot .i{
  width:16px;
  height:16px;
  color:var(--accent)
}

@media (min-width:64em){
  .panel-foot{
    display:none;
    margin-top:24px
  }
}

.side-card{
  display:none;
  align-items:flex-start;
  gap:12px;
  margin-top:auto;
  padding-top:24px
}

.side-card > .i{
  width:18px;
  height:18px;
  margin-top:2px;
  color:var(--accent)
}

.side-card p{
  display:grid;
  line-height:1.35
}

.side-card strong{
  font-size:16px;
  font-weight:600;
  color:var(--ink)
}

.side-card span{
  font-size:16px;
  color:var(--muted)
}

@media (min-width:64em){
  .side-card{
    display:flex;
    flex:none
  }

  .panel{
    margin-bottom:8px
  }
}

/* The device note needs ~60em of height; below that, the one-line foot inside the panel */

@media (min-width:64em) and (max-height:59.99em){
  .side-card{
    display:none
  }

  .panel-foot{
    display:flex
  }

  .panel{
    margin-bottom:0
  }
}

/* Short desktop screens (e.g. 1440×900): a tighter rhythm inside the sidebar (its 2rem of padding stays) */

@media (min-width:64em) and (max-height:61.99em){
  .panel-head{
    margin-top:14px
  }

  .panel-head + .group{
    margin-top:12px
  }

  .group,.names{
    margin-top:18px
  }

  .preset{
    min-height:52px;
    gap:4px
  }

  .seg-btn{
    min-height:44px
  }

  .group-credits > summary{
    min-height:44px
  }

  .hint{
    margin-top:7px;
    line-height:1.35
  }

  .group-more{
    margin-top:0
  }

  .credits-body{
    gap:8px
  }

  .side .field label{
    margin-bottom:4px
  }

  .side .input{
    min-height:44px
  }

  .group-ai{
    margin-top:12px
  }

  .panel-foot{
    margin-top:12px
  }
}

/* ---------- Main area ---------- */

.app-main{
  min-width:0;
  padding:8px 16px 148px
}

@media (min-width:40em){
  .app-main{
    padding-inline:28px
  }
}

/* flex: the stuck bar's margin never collapses; the gap is the one spacing between blocks */

@media (min-width:64em){
  .app-main{
    display:flex;
    flex-direction:column;
    gap:2.5rem;
    padding:2.5rem
  }
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px
}

/* From 64em the back link's text lines up with the sidebar's top; its 44px target spills over the spacing */

@media (min-width:64em){
  .topbar{
    min-height:0
  }

  .topbar .back{
    margin-block:-10px
  }
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 14px 0 10px;
  margin-left:-10px;
  border-radius:var(--r-c);
  color:var(--ink-2);
  font:500 16px/1 var(--font);
  text-decoration:none
}

.back:hover{
  background:var(--deep);
  color:var(--ink)
}

.back .i{
  width:18px;
  height:18px
}

.results-head{
  display:grid;
  gap:18px;
  margin-top:12px
}

@media (min-width:64em){
  .results-head{
    margin-top:0
  }
}

.results-head .ws-title{
  font-size:clamp(32px, 1rem + 2.5vw, 58px)
}

.results-lead{
  max-width:40em;
  color:var(--ink-2);
  font-size:17.5px
}

.lead-short{
  display:none
}

@media (max-width:39.99em){
  .lead-long{
    display:none
  }

  .lead-short{
    display:inline
  }
}

/* The three steps, a row of their own under the title, a third of the width each from 40em (stacked on phones,
   never two and one): a bar on top (done: green; current: ink up to --fill, set by optimizer_controller.js, over
   the sage rail; to come: the rail), then the number in a circle and, beside it, the step's name with where the
   batch is in it */

.batch-steps{
  --rail:#C9D4CA;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
  margin-top:28px
}

@media (min-width:40em){
  .batch-steps{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (min-width:64em){
  .batch-steps{
    margin-top:0
  }
}

.batch-steps > li{
  --fill:0%;
  display:grid;
  align-content:start;
  gap:12px;
  min-width:0
}

.step-track{
  display:block;
  height:6px;
  border-radius:999px;
  background:var(--rail)
}

.step-row{
  display:flex;
  align-items:flex-start;
  gap:12px
}

.step-dot{
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  border:1.5px solid var(--border);
  border-radius:50%;
  color:var(--ink-2);
  font:600 16px/1 var(--font)
}

.step-dot .i{
  width:18px;
  height:18px;
  stroke-width:2.6
}

.step-tick{
  display:none
}

.step-label{
  display:grid;
  gap:2px;
  min-width:0;
  padding-top:6px;
  line-height:1.3
}

.step-title{
  font-size:18px;
  font-weight:600
}

.step-note{
  color:var(--muted);
  font-size:16px
}

/* Current (aria-current): Name them until the batch is downloaded, then Download, its bar full */

.batch-steps [aria-current=step] .step-track{
  background:linear-gradient(to right, var(--ink) var(--fill), var(--rail) var(--fill))
}

.batch-steps [aria-current=step] .step-dot{
  border:0;
  background:var(--ink);
  color:#fff
}

.tool[data-downloaded] .step-download{
  --fill:100% 
}

/* Done: Add your images, and Name them once the batch is downloaded (a tick instead of its number) */

.step-done .step-track,.tool[data-downloaded] .step-name .step-track{
  background:var(--accent)
}

.step-done .step-dot,.tool[data-downloaded] .step-name .step-dot{
  border:0;
  background:var(--accent);
  color:#fff
}

.step-done .step-tick,.tool[data-downloaded] .step-name .step-tick{
  display:grid;
  place-items:center
}

.tool[data-downloaded] .step-name .step-digit{
  display:none
}

/* ---------- Batch bar ---------- */

/* Light beige and flat, like the cards: no shadow, no border. Floating at the bottom of phones, a hairline sets it apart. */

.bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:30;
  padding:12px 12px 12px 18px;
  --muted:#5A5347;
  --ink-2:#433E36;
  background:#FBF8F2;
  border-radius:var(--r);
  box-shadow:inset 0 0 0 1px #E7DFD1
}

@media (min-width:64em){
  .bar{
    box-shadow:none
  }
}

.bar-progress{
  display:none
}

.tool[data-state=busy] .bar-progress{
  display:block;
  position:absolute;
  left:18px;
  right:18px;
  bottom:4px;
  width:auto;
  height:3px;
  border:0;
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  background:var(--deep);
  overflow:hidden
}

.bar-progress::-webkit-progress-bar{
  background:var(--deep)
}

.bar-progress::-webkit-progress-value{
  background:var(--accent)
}

.bar-progress::-moz-progress-bar{
  background:var(--accent)
}

.bar-in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"status actions" "saved actions";
  align-items:center;
  gap:2px 12px
}

.stat-ready,.stat-skipped,.bar-zip{
  display:none
}

.stat-saved{
  grid-area:saved;
  display:flex;
  align-items:center;
  min-width:0
}

.stat-saved .stat-text{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  font-size:16px;
  color:var(--muted)
}

.stat-saved strong{
  color:var(--accent);
  font:650 16px/1 var(--font)
}

.bar-totals{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap
}

.bar-totals .i{
  width:13px;
  height:13px
}

.bar-info{
  grid-area:status;
  min-width:0
}

.bar-line{
  display:flex;
  align-items:center;
  gap:7px
}

.bar-icon{
  display:grid;
  place-items:center;
  flex:none;
  color:var(--accent)
}

.bar-icon .i{
  width:18px;
  height:18px;
  stroke-width:2.2
}

.icon-warn{
  display:none
}

.tool:has(.card[data-state=error]):not([data-downloaded]) .icon-ok{
  display:none
}

.tool:has(.card[data-state=error]):not([data-downloaded]) .icon-warn{
  display:block;
  color:var(--red)
}

.bar-status{
  font:650 16px/1.25 var(--font);
  color:var(--ink)
}

.bar-bookmark{
  display:none;
  font-size:16px;
  color:var(--muted)
}

.bar-actions{
  grid-area:actions;
  display:flex;
  align-items:center;
  gap:6px
}

.bar-download{
  min-height:52px;
  padding:0 20px;
  font-size:16px
}

.bar-restart{
  display:none
}

.tool[data-downloaded] .bar-restart{
  display:inline-flex
}

.tool[data-downloaded] .stat-saved{
  display:none
}

.tool[data-downloaded] .bar-status{
  font-size:16px
}

@media (max-width:30em){
  .tool[data-downloaded] .bar-restart span{
    display:none
  }
}

@media (min-width:64em){
  .bar{
    position:sticky;
    left:auto;
    right:auto;
    top:12px;
    bottom:auto;
    z-index:6;
    padding:2rem
  }

  /* Mask the strip above the stuck bar so cards never peek over it */

  .bar{
    overflow-anchor:none
  }

  .bar::before{
    content:"";
    position:absolute;
    left:-12px;
    right:-12px;
    top:-13px;
    height:13px;
    background:var(--canvas)
  }

  .bar-in{
    display:flex;
    align-items:center;
    gap:0
  }

  .stat{
    display:flex;
    align-items:center;
    min-width:0;
    padding-right:clamp(28px, 3.5vw, 56px)
  }

  .stat-ready,.stat-skipped{
    display:flex
  }

  .tool:not(:has(.card[data-state=error])) .stat-skipped{
    display:none
  }

  .stat-text,.stat-saved .stat-text{
    display:grid;
    justify-content:start;
    gap:6px;
    line-height:1.2;
    color:var(--muted);
    font-size:16px;
    min-width:0
  }

  .stat-text strong,.stat-saved strong{
    display:block;
    font:400 44px/1 var(--display);
    font-variation-settings:"opsz" 144;
    letter-spacing:-.03em;
    color:var(--ink)
  }

  .stat-saved strong{
    color:var(--accent)
  }

  .stat-skipped strong{
    color:var(--red)
  }

  .bar-info{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap
  }

  .tool[data-downloaded] .stat-ready,.tool[data-downloaded] .stat-skipped{
    display:none
  }

  .tool[data-downloaded] .stat-saved{
    display:flex
  }

  .tool[data-downloaded] .bar-bookmark{
    display:block;
    margin-left:32px;
    font-size:16px
  }

  .tool[data-downloaded] .bar-status{
    font:500 18px/1.25 var(--display);
    letter-spacing:-.01em
  }

  .tool[data-downloaded] .bar-info{
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip:auto;
    white-space:normal;
    order:-1;
    flex:1 1 auto;
    display:grid;
    align-content:center;
    gap:6px;
    padding-right:28px
  }

  .tool[data-downloaded] .bar-line{
    gap:12px
  }

  .tool[data-downloaded] .bar-icon{
    width:20px
  }

  .bar-actions{
    flex:0 0 auto;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:6px;
    margin-left:auto
  }

  .bar-download{
    min-height:58px;
    padding:0 34px;
    font-size:16.5px
  }

  .bar-zip{
    display:block;
    font-size:16px;
    color:var(--muted)
  }

  .tool[data-downloaded] .bar-actions{
    display:flex
  }

  .tool[data-downloaded] .bar-zip{
    display:none
  }

  .bar[data-stuck]{
    padding:10px 12px 10px 28px
  }

  .bar[data-stuck] .stat-text{
    display:flex;
    flex-direction:row;
    align-items:baseline;
    gap:8px;
    font-size:16px
  }

  .bar[data-stuck] .stat-text strong{
    font-size:26px
  }

  .bar[data-stuck] .bar-zip,.bar[data-stuck] .bar-bookmark{
    display:none !important
  }

  .bar[data-stuck] .bar-download{
    min-height:48px;
    padding:0 26px
  }

  .tool[data-downloaded] .bar[data-stuck] .bar-status{
    font-size:17px
  }
}

@media (min-width:64em) and (max-width:84.99em){
  .stat{
    padding-right:28px
  }

  .stat-text strong,.stat-saved strong{
    font-size:36px
  }

  .bar-download{
    padding:0 24px
  }
}

/* ---------- Toolbar ---------- */

.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
  margin:64px 0 20px
}

@media (min-width:64em){
  .toolbar,.app-main > .notice{
    margin:0
  }
}

.toolbar h2{
  font-size:28px
}

.clean-note{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  font:600 16px/1.3 var(--font)
}

.clean-note .i{
  width:17px;
  height:17px
}

.results-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto
}

.results-clear .i{
  width:17px;
  height:17px
}

.add-more{
  position:relative
}

.add-area{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px 0 14px;
  border:1px solid #CDBB9E;
  border-radius:var(--r-c);
  background:#FBF8F2;
  color:var(--ink);
  font:600 16px/1 var(--font);
  cursor:pointer;
  white-space:nowrap
}

.add-area .i{
  width:18px;
  height:18px;
  stroke-width:2;
  color:var(--accent)
}

.add-area:hover{
  background:#F3EDE2
}

.add-more:has(input:focus-visible) .add-area{
  outline:2px solid var(--accent);
  outline-offset:2px
}

@media (max-width:39.99em){
  .toolbar{
    gap:2px 8px;
    margin:36px 0 14px
  }

  .toolbar::before{
    content:"";
    order:2;
    flex-basis:100%
  }

  .toolbar h2{
    order:1;
    flex:1 1 auto;
    font-size:24px
  }

  .results-actions{
    display:contents
  }

  .toolbar .add-more{
    order:1
  }

  .clean-note{
    order:3;
    flex:1 1 0;
    min-width:0;
    font-size:16px
  }

  .clean-note .i{
    width:15px;
    height:15px
  }

  .results-clear{
    order:4;
    margin-right:-10px;
    padding-inline:10px
  }
}

.notice{
  margin:0 0 16px;
  padding:14px 18px;
  border-radius:var(--r-c);
  background:var(--deep);
  color:var(--ink)
}

/* ---------- Results: generous cards, large previews ---------- */

.results{
  display:grid;
  gap:20px;
  align-items:start
}

@media (min-width:64em){
  .results{
    gap:2.5rem
  }
}

@media (min-width:48em) and (max-width:63.99em), (min-width:76em){
  .results{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (min-width:120em){
  .results{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

/* A card: all light beige, the image included, everything below it with 2rem of padding. Flat: a beige edge
   (#CDBB9E), no shadow. */

.card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"media media" "title actions" "tags tags" "facts facts" "note note" "fields fields";
  --muted:#5A5347;
  --ink-2:#433E36;
  --line:#E7DFD1;
  padding:0 0 2rem;
  border:1px solid #CDBB9E;
  border-radius:var(--r);
  background:#FBF8F2
}

.card-head{
  display:contents
}

.card-title{
  grid-area:title;
  display:grid;
  gap:2px;
  min-width:0;
  padding:2rem 0 0 2rem
}

.card-label{
  color:var(--muted);
  font-size:16px
}

.card-name{
  font:600 17px/1.3 var(--font);
  letter-spacing:-.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.card-tags{
  grid-area:tags;
  display:none
}

/* The image's facts: Format, Dimensions, Size, one labelled value each, under a hairline, with a line between them.
   Dimensions is never narrower than its label (min-content), which would otherwise run into the next line. */

.card-facts{
  grid-area:facts;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(min-content,1fr) minmax(0,1.3fr);
  gap:12px 16px;
  margin:16px 2rem 0;
  padding-top:14px;
  border-top:1px solid var(--line)
}

.card-fact{
  display:grid;
  align-content:start;
  gap:2px;
  min-width:0
}

.card-fact + .card-fact{
  padding-left:16px;
  border-left:1px solid var(--line)
}

.card-fact dt{
  color:var(--muted);
  font-size:16px
}

.card-fact dd{
  margin:0;
  font-weight:600;
  font-size:16px;
  overflow-wrap:anywhere
}

.card-fact dd:empty::before{
  content:"…";
  color:var(--muted);
  font-weight:400
}

.card-fact-size dd{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px
}

.size-after{
  color:var(--ink);
  font-weight:600
}

.card:not([data-method]) .size-after{
  color:var(--muted);
  font-weight:400
}

/* the original size, until it's optimized */

/* The saving, a chip; the original size in its tooltip, on hover and keyboard focus (Esc: data-tip-hidden) */

.saved-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:650;
  cursor:help
}

.saved-chip:has(.saved:empty){
  display:none
}

.saved-chip:has(.saved[data-larger]){
  background:#EFE7D9;
  color:var(--ink-2)
}

.saved-tip{
  display:none;
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  z-index:2;
  transform:translateX(-50%);
  padding:6px 12px;
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  font:500 16px/1.5 var(--font);
  white-space:nowrap
}

.saved-tip::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:10px
}

/* the pointer can reach it */

.saved-tip::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-6px;
  border:6px solid transparent;
  border-top-color:var(--ink)
}

.saved-chip:is(:hover, :focus-visible):not([data-tip-hidden]) > .saved-tip{
  display:block
}

.card-note{
  grid-area:note;
  padding:10px 2rem 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.45
}

.card-note:empty{
  display:none
}

.card-actions{
  grid-area:actions;
  display:flex;
  align-self:start;
  padding:calc(2rem - 6px) calc(2rem - 10px) 0 8px
}

.card-media{
  grid-area:media;
  position:relative
}

.card-open{
  position:relative;
  display:block;
  height:clamp(220px, 19vw, 300px);
  padding:12px;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  overflow:hidden;
  background-color:#FBF8F2
}

.card-open.checker{
  background-size:16px 16px
}

.card-img{
  width:100%;
  height:100%;
  -o-object-fit:contain;
     object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(18,22,20,.06))
}

.card-zoom{
  position:absolute;
  right:12px;
  bottom:12px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#fff;
  color:var(--ink)
}

.card-zoom .i{
  width:16px;
  height:16px;
  stroke-width:1.9
}

.card-open:hover .card-zoom{
  background:var(--ink);
  color:#fff
}

.card-open:focus-visible{
  outline-offset:-4px;
  outline-width:3px
}

.card-status{
  position:absolute;
  left:12px;
  top:12px
}

.st{
  display:none;
  min-height:28px;
  padding:0 10px;
  border-radius:8px;
  background:#fff;
  font:600 16px/28px var(--font);
  color:var(--ink)
}

.card[data-state=working] .st-working,.card[data-state=queued] .st-queued{
  display:inline-block
}

.card-error-icon{
  display:none
}

/* Fields */

/* One column that never grows past the card: a long file name scrolls inside its field instead */

.card-fields{
  grid-area:fields;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px;
  margin-top:.75rem;
  padding:0 2rem
}

.card-fields > *{
  min-width:0
}

.card label{
  font:600 16px/1.2 var(--font);
  color:var(--ink)
}

.f-title label{
  display:block;
  margin-bottom:8px
}

.card .input{
  width:100%;
  min-height:46px;
  padding:10px 14px;
  border:1px solid #9C8B6E;
  border-radius:var(--r-c);
  background:#fff;
  color:var(--ink);
  font:500 16px/1.4 var(--font);
  transition:border-color .15s, box-shadow .15s
}

.card .input::-moz-placeholder{
  color:var(--muted);
  font-weight:400;
  opacity:1
}

.card .input::placeholder{
  color:var(--muted);
  font-weight:400;
  opacity:1
}

.card .input:hover{
  border-color:var(--ink-2)
}

.card .input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow)
}

.card .input-lg{
  min-height:52px;
  font-size:17px;
  font-weight:400;
  letter-spacing:-.005em
}

.card textarea.input{
  display:block;
  min-height:64px;
  max-height:220px;
  resize:vertical;
  field-sizing:content
}

/* Saves as: lined up with the fields (same edges, its name where their text starts), the pencil at the end; on
   hover a beige row, while editing a white field with the focus ring and an Enter hint */

.filename-edit{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 15px;
  margin:4px 0 0;
  /* 15px: the fields' 14px padding + their border */
  border-radius:var(--r-c);
  cursor:text;
  font:400 16px/1.3 var(--font) !important;
  color:var(--muted) !important
}

.filename-edit:hover{
  background:#F3EDE2
}

.filename-edit:focus-within{
  padding-right:6px;
  outline:2px solid var(--accent);
  outline-offset:0;
  background:#fff
}

.filename-label{
  flex:none
}

.filename-box{
  display:flex;
  flex:1 1 auto;
  align-items:baseline;
  min-width:0;
  color:var(--ink);
  font-weight:600
}

.filename-box input{
  field-sizing:content;
  min-width:3ch;
  max-width:100%;
  width:14ch;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  font:inherit;
  color:inherit;
  outline:none;
  text-overflow:ellipsis
}

@supports (field-sizing:content){
  .filename-box input{
    width:auto
  }
}

.ext{
  flex:none
}

.filename-pencil{
  width:16px;
  height:16px;
  flex:none;
  color:var(--muted)
}

.filename-edit:hover .filename-pencil{
  color:var(--accent)
}

.filename-enter{
  display:none;
  flex:none;
  align-items:center;
  min-height:36px;
  padding:0 10px;
  border-radius:9px;
  background:#F3EDE2;
  color:var(--ink-2);
  font:600 16px/1 var(--font)
}

.filename-edit:focus-within .filename-enter{
  display:inline-flex
}

.filename-edit:focus-within .filename-pencil{
  display:none
}

/* Alt text: DOM order as base (label, textarea, count, Copy); count and Copy sit on the label row */

.f-alt{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  -moz-column-gap:4px;
       column-gap:4px;
  margin-top:6px
}

.f-alt > label{
  grid-row:1;
  grid-column:1
}

.f-alt > textarea{
  grid-row:2;
  grid-column:1 / -1;
  margin-top:2px
}

.f-alt > .alt-count{
  grid-row:1;
  grid-column:2
}

.f-alt > .copy{
  grid-row:1;
  grid-column:3
}

.f-alt:not(:focus-within):has(textarea:-moz-placeholder-shown) .alt-count{
  visibility:hidden
}

.f-alt:not(:focus-within):has(textarea:placeholder-shown) .alt-count{
  visibility:hidden
}

.f-alt:has(textarea:-moz-placeholder-shown) .copy{
  visibility:hidden
}

.f-alt:has(textarea:placeholder-shown) .copy{
  visibility:hidden
}

.alt-count{
  font-size:16px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  padding-right:4px
}

.alt-count[data-over]{
  color:var(--red);
  font-weight:650
}

.copy{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  margin-right:-10px;
  border:0;
  border-radius:var(--r-c);
  background:transparent;
  color:var(--accent);
  font:600 16px/1 var(--font)
}

.copy > span{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.copy .i{
  width:16px;
  height:16px;
  stroke-width:1.9
}

.copy:hover{
  background:var(--deep)
}

.copy-done{
  display:none !important
}

.copy[data-copied] .copy-idle{
  display:none !important
}

.copy[data-copied] .copy-done{
  display:inline-flex !important
}

.f-more{
  margin-top:4px
}

.f-more > summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 10px;
  margin:0 -10px;
  border-radius:var(--r-c);
  list-style:none;
  cursor:pointer;
  font:600 16px/1 var(--font);
  color:var(--ink-2)
}

.f-more > summary::-webkit-details-marker{
  display:none
}

.f-more > summary:hover{
  color:var(--ink);
  background:var(--mist)
}

.f-more-chev{
  width:16px;
  height:16px;
  stroke-width:2;
  transition:transform .2s
}

.f-more[open] .f-more-chev{
  transform:rotate(90deg)
}

.f-more-hint{
  font-weight:400;
  color:var(--muted)
}

.f-more-dot{
  display:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent)
}

.f-more:not(.f-own):has(input:not(:-moz-placeholder-shown)) .f-more-dot{
  display:inline-block
}

.f-more:not(.f-own):has(input:not(:placeholder-shown)) .f-more-dot{
  display:inline-block
}

.f-more-body{
  display:grid;
  gap:14px;
  padding:6px 0 10px
}

.f-more-body .field > label{
  display:block;
  margin-bottom:6px;
  font-size:16px
}

.label-note{
  font-weight:400;
  color:var(--muted)
}

/* Refused image: first, full width, one quiet stone row */

.card[data-state=error]{
  grid-column:1 / -1;
  grid-template-columns:44px minmax(0,1fr) auto;
  grid-template-areas:"media head actions";
  align-items:center;
  -moz-column-gap:16px;
       column-gap:16px;
  padding:14px 14px 14px 20px;
  border:0;
  background:var(--deep);
  box-shadow:none
}

.card[data-state=error] .card-head{
  grid-area:head;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 14px;
  min-width:0
}

.card[data-state=error] .card-title{
  padding:0
}

.card[data-state=error] .card-label,.card[data-state=error] .card-facts{
  display:none
}

.card[data-state=error] .card-name{
  font-size:16px;
  white-space:normal;
  overflow-wrap:anywhere
}

.card[data-state=error] .card-tags{
  display:flex;
  padding:0
}

.card[data-state=error] .card-open,.card[data-state=error] .card-download{
  display:none
}

.card[data-state=error] .card-error-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--red)
}

.card[data-state=error] .card-error-icon .i{
  width:24px;
  height:24px
}

.card[data-state=error] .card-note{
  flex:0 1 auto;
  padding:0;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.45
}

.card[data-state=error] .card-actions{
  align-self:center;
  padding:0
}

.card-skipped{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--red);
  font:650 16px/1 var(--font)
}

.card-skipped .i{
  width:15px;
  height:15px;
  stroke-width:2
}

.card:not([data-state=error]) .card-how{
  display:none
}

.card-how{
  flex:none
}

.card-how > summary{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:-12px 0 -12px -6px;
  padding:0 6px;
  border-radius:var(--r-c);
  list-style:none;
  cursor:pointer;
  color:var(--ink);
  font:600 16px/1.45 var(--font);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px
}

.card-how > summary::-webkit-details-marker{
  display:none
}

.card-how > summary:hover{
  background:var(--deep-2)
}

.card-how[open]{
  flex-basis:100%
}

.card-how[open] > summary{
  margin-bottom:0
}

.card-how p{
  margin-top:4px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.45
}

@media (max-width:39.99em){
  .card[data-state=error]{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"head actions";
    -moz-column-gap:8px;
         column-gap:8px;
    padding:14px 8px 14px 18px
  }

  .card[data-state=error] .card-media{
    display:none
  }

  .card[data-state=error] .card-head{
    gap:4px 10px
  }

  .card[data-state=error] .card-actions{
    align-self:start;
    margin:-6px 0 0
  }

  .card-open{
    height:220px
  }

  .card{
    padding-bottom:18px
  }

  .card-title{
    padding:18px 0 0 18px
  }

  .card-actions{
    padding:12px 8px 0
  }

  .card-facts{
    margin-inline:18px
  }

  .card-note,.card-fields{
    padding-inline:18px
  }
}

/* Keep focused fields clear of the sticky stats bar (desktop) and the floating island (mobile): WCAG 2.4.11 */

html[data-view=workspace]{
  scroll-padding-top:16px;
  scroll-padding-bottom:124px
}

@media (min-width:64em){
  html[data-view=workspace]{
    scroll-padding-top:128px;
    scroll-padding-bottom:24px
  }
}

/* ==========================================================================
   Production additions: what the template set inline or didn't draw
   ========================================================================== */

/* ---------- One page, two views ----------
   The optimizer sets html[data-view=workspace] once images are in: the landing (header, hero copy, sections,
   footer) goes, and the tool fills the page as the workspace (.app). Without images, .app stays hidden. */

html[data-view=workspace] .site-header,
html[data-view=workspace] .site-footer,
html[data-view=workspace] #main > :not(.hero),
html[data-view=workspace] .hero-grid > :not(.tool),
html[data-view=workspace] .tool > :not(.app, .drop-overlay, .confirm){
  display:none
}

html[data-view=workspace] .hero{
  padding:0;
  text-align:left
}

html[data-view=workspace] .hero-grid{
  max-width:none;
  padding:0
}

html[data-view=workspace] .tool{
  margin:0
}

/* Batch messages on the landing (too many files, browser too old); the workspace has its own */

.tool > .notice{
  max-width:640px;
  margin:16px auto 0;
  text-align:left
}

/* The workspace title is the page's heading once the landing is hidden (role=heading, focused on arrival): set as an h1 */

.ws-title{
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:"opsz" 144;
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance
}

.ws-title:focus{
  outline:none
}

/* Cards: a note row (lossless, already optimized...) between the sizes and the fields; the error-only parts */

.card:not([data-state=error]) .card-skipped{
  display:none
}

.card[data-state=error] .card-fields,.card[data-state=error] .card-status{
  display:none
}

/* ---------- Product shots: one class per shot (studio SVGs in app/assets/images/image_seo_for_ai/products) ---------- */

.p-handbag-s1{
  --img:url("/assets/image_seo_for_ai/products/handbag-s1-29f065c8.svg") 
}

.p-handbag-s2{
  --img:url("/assets/image_seo_for_ai/products/handbag-s2-f017d55b.svg") 
}

.p-handbag-s3{
  --img:url("/assets/image_seo_for_ai/products/handbag-s3-cb40372b.svg") 
}

.p-handbag-fdeep{
  --img:url("/assets/image_seo_for_ai/products/handbag-fdeep-f3066faa.svg") 
}

.p-handbag-fwhite{
  --img:url("/assets/image_seo_for_ai/products/handbag-fwhite-72216045.svg") 
}

.p-perfume-s1{
  --img:url("/assets/image_seo_for_ai/products/perfume-s1-57152a29.svg") 
}

.p-perfume-fdeep{
  --img:url("/assets/image_seo_for_ai/products/perfume-fdeep-2a5ae7d8.svg") 
}

.p-perfume-fwhite{
  --img:url("/assets/image_seo_for_ai/products/perfume-fwhite-c826b855.svg") 
}

.p-plant-cutout-raw{
  --img:url("/assets/image_seo_for_ai/products/plant-cutout-raw-f50d1851.svg") 
}

.p-sneaker-s3{
  --img:url("/assets/image_seo_for_ai/products/sneaker-s3-fa0d1ad7.svg") 
}

.p-mug-s2{
  --img:url("/assets/image_seo_for_ai/products/mug-s2-f8b2778e.svg") 
}

.p-sunglasses-fdeep{
  --img:url("/assets/image_seo_for_ai/products/sunglasses-fdeep-9f055e68.svg") 
}

/* ---------- Benefit stickers: the kit's colours (green or sand fill, white die-cut rim, ink line art) ----------
   --line is set on the <svg> itself, or the page's own --line token would leak into the line art. */

.b-sticker{
  --edge:#FFFFFF;
  --line:#1B2A21 
}

.sk-sand{
  --fill:#E8CF96 
}

.sk-green{
  --fill:#BEDCC8 
}

.sk-base{
  fill:var(--fill);
  stroke:var(--edge);
  stroke-linejoin:round
}

.sk-line{
  fill:none;
  stroke:var(--line);
  stroke-linecap:round;
  stroke-linejoin:round
}

.sk-ink{
  fill:var(--line)
}

.sk-rim{
  fill:none;
  stroke:var(--edge);
  stroke-linecap:round
}

.sk-band{
  fill:none;
  stroke:var(--fill);
  stroke-linecap:round
}

.sk-edge{
  fill:var(--edge)
}

.sk-fill{
  fill:var(--fill)
}

/* Bar lengths in the illustrations (001: the example batch, before and after; step 2: the progress) */

.c-bar:nth-child(1) .c-b{
  width:31%
}

.c-bar:nth-child(1) .c-a{
  width:14%
}

.c-bar:nth-child(2) .c-b{
  width:85%
}

.c-bar:nth-child(2) .c-a{
  width:19%
}

.c-bar:nth-child(3) .c-b{
  width:9%
}

.c-bar:nth-child(3) .c-a{
  width:4%
}

.c-bar:nth-child(4) .c-b{
  width:100%
}

.c-bar:nth-child(4) .c-a{
  width:35%
}

.sa-bar span{
  width:60%
}

/* Rolling names: written by CSS from data-name, so the heading's text (for search engines and screen readers)
   is the one sentence in its .sr span, with no name repeated. */

.roll-sizer > span::before,.roll-track > span::before{
  content:attr(data-name)
}

/* ---------- Tool pages: the landing's hero and tool, then their own sections in the same language ---------- */

/* A section head with no lead keeps its title on the left; coloured bands that meet touch, like on the home page */

@media (min-width:64em){
  .sec-head > :only-child{
    grid-column:1 / span 8
  }
}

.section.alt + .section.sand{
  margin-top:0
}

/* How-to: numbered steps on the Swiss hairline grid (rows, then one row of columns from 64em) */

.howto{
  display:grid;
  gap:1px;
  background:var(--line-2);
  border-block:1px solid var(--line-2)
}

.howto > li{
  display:flex;
  flex-direction:column;
  padding:30px 0 34px;
  background:var(--canvas)
}

@media (min-width:64em){
  .howto{
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr)
  }

  .howto > li{
    padding:36px 28px 40px
  }

  .howto > li:first-child{
    padding-left:0
  }

  .howto > li:last-child{
    padding-right:0
  }
}

.howto h3,.point h3{
  margin-top:16px;
  font-size:clamp(20px, 1rem + .4vw, 23px);
  line-height:1.15
}

.howto p,.point p{
  margin-top:10px;
  max-width:30em;
  color:var(--ink-2);
  font-size:16px
}

/* Points: icon, title, text on the same hairline grid. points-3: three columns from 64em; points-4: two from
   44em, four from 72em; points-6: two from 44em, three from 72em (every row full, no empty cell) */

.points{
  display:grid;
  gap:1px;
  background:var(--line-2);
  border-block:1px solid var(--line-2)
}

.point{
  padding:30px 0 34px;
  background:var(--canvas)
}

.point .i{
  width:26px;
  height:26px;
  color:var(--accent);
  stroke-width:1.5
}

.point h3{
  margin-top:18px
}

@media (min-width:44em){
  .points-4,.points-6{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .points-4 .point,.points-6 .point{
    padding:34px 28px 36px
  }

  .points-4 .point:nth-child(2n+1),.points-6 .point:nth-child(2n+1){
    padding-left:0
  }

  .points-4 .point:nth-child(2n),.points-6 .point:nth-child(2n){
    padding-right:0
  }
}

@media (min-width:64em){
  .points-3{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .points-3 .point{
    padding:36px 32px 40px
  }

  .points-3 .point:first-child{
    padding-left:0
  }

  .points-3 .point:last-child{
    padding-right:0
  }
}

@media (min-width:72em){
  .points-4{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .points-6{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .points-4 .point,.points-6 .point{
    padding:36px 32px 40px
  }

  .points-4 .point:first-child{
    padding-left:0
  }

  .points-4 .point:last-child{
    padding-right:0
  }

  .points-6 .point:nth-child(n){
    padding-left:32px;
    padding-right:32px
  }

  .points-6 .point:nth-child(3n+1){
    padding-left:0
  }

  .points-6 .point:nth-child(3n){
    padding-right:0
  }
}

/* Tips: title on the left (sticky from 64em), a ticked list on the right */

.split{
  display:grid;
  gap:32px
}

@media (min-width:64em){
  .split{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .split-head{
    grid-column:1 / span 5;
    position:sticky;
    top:32px
  }

  .split-body{
    grid-column:7 / -1
  }
}

.split-head h2{
  font-size:clamp(32px, 1.1rem + 2.4vw, 52px);
  font-weight:400;
  font-variation-settings:"opsz" 96;
  line-height:1.08;
  letter-spacing:-.02em
}

.split-head p{
  margin-top:22px;
  max-width:30em;
  color:var(--ink-2);
  font-size:18px
}

.checks{
  display:grid
}

.checks li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px 0;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-size:17px
}

.checks li:last-child{
  border-bottom:1px solid var(--line)
}

.checks .i{
  width:20px;
  height:20px;
  margin-top:3px;
  color:var(--accent);
  stroke-width:2.1
}

.split-body > .checks + p,.split-body > p + p{
  margin-top:16px
}

.split-body > p{
  max-width:36em;
  color:var(--ink-2);
  font-size:17px
}

/* Alt text examples: one white card, one row per example */

.alt-examples{
  display:grid;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.alt-example{
  display:grid;
  gap:6px;
  padding:20px 22px
}

.alt-example + .alt-example{
  border-top:1px solid var(--line)
}

@media (min-width:40em){
  .alt-example{
    grid-template-columns:190px minmax(0,1fr);
    align-items:center;
    gap:24px;
    padding:22px 28px
  }
}

.alt-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:650
}

.alt-label .i{
  width:17px;
  height:17px;
  stroke-width:2.2
}

.alt-good .alt-label{
  color:var(--accent)
}

.alt-bad .alt-label{
  color:var(--red)
}

.alt-example q{
  color:var(--ink);
  font:500 clamp(16px, 1rem + .2vw, 18px)/1.4 var(--display);
  letter-spacing:0;
  overflow-wrap:anywhere
}

.alt-bad q{
  color:var(--ink-2)
}

.split-body > .alt-examples + .checks{
  margin-top:32px
}

/* Two text columns (image SEO: alt text in your store, hyphens or underscores) */

.cols{
  display:grid;
  gap:48px
}

@media (min-width:64em){
  .cols{
    grid-template-columns:repeat(2,minmax(0,1fr));
    -moz-column-gap:64px;
         column-gap:64px
  }
}

.cols h2{
  font-size:clamp(28px, 1rem + 1.6vw, 40px);
  font-weight:400;
  font-variation-settings:"opsz" 96;
  line-height:1.08;
  letter-spacing:-.02em
}

.cols p{
  margin-top:16px;
  max-width:34em;
  color:var(--ink-2);
  font-size:17px
}

/* ---------- 404 ---------- */

.hero-404{
  padding-top:clamp(56px, 9vw, 136px)
}

.hero-actions{
  display:flex;
  justify-content:center;
  margin-top:36px
}

/* ---------- Legal pages ---------- */

.legal{
  padding-top:clamp(40px, 6vw, 88px)
}

.legal-head{
  max-width:56em
}

.legal-head h1{
  margin-top:22px;
  font-size:clamp(36px, 1.1rem + 3vw, 64px)
}

.legal-updated{
  margin-top:18px;
  color:var(--muted);
  font-size:16px
}

.legal-body{
  display:grid;
  gap:48px;
  margin-top:clamp(40px, 5vw, 72px)
}

@media (min-width:64em){
  .legal-body{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .legal-aside{
    grid-column:1 / span 4;
    position:sticky;
    top:32px
  }

  .legal-body > .prose{
    grid-column:6 / -1
  }
}

.legal-summary{
  padding:26px 24px 28px;
  border-radius:var(--r);
  background:var(--deep)
}

.legal-summary h2{
  font-size:21px;
  line-height:1.2
}

.legal-summary ul{
  display:grid;
  gap:12px;
  margin-top:16px
}

.legal-summary li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--ink);
  font-size:16px;
  line-height:1.5
}

.legal-summary .i{
  width:18px;
  height:18px;
  margin-top:3px;
  color:var(--accent);
  stroke-width:2.1
}

.legal-summary .btn{
  margin-top:20px
}

.prose{
  max-width:44em;
  color:var(--ink-2);
  font-size:17px;
  line-height:1.65
}

.prose h2{
  margin-top:56px;
  color:var(--ink);
  font-size:clamp(24px, 1rem + .8vw, 30px);
  font-weight:450;
  line-height:1.15;
  letter-spacing:-.015em
}

.prose > h2:first-child{
  margin-top:0
}

.prose h3{
  margin-top:32px;
  color:var(--ink);
  font-size:19px;
  line-height:1.25
}

.prose p,.prose ul,.prose dl{
  margin-top:14px
}

.prose ul{
  display:grid;
  gap:8px;
  padding-left:20px;
  list-style:disc
}

.prose li::marker{
  color:var(--accent)
}

.prose a{
  color:var(--accent);
  font-weight:600;
  text-underline-offset:3px;
  overflow-wrap:anywhere
}

.prose strong{
  color:var(--ink);
  font-weight:650
}

.prose dl{
  display:grid;
  border-top:1px solid var(--line)
}

.prose dl > div{
  display:grid;
  gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}

@media (min-width:40em){
  .prose dl > div{
    grid-template-columns:190px minmax(0,1fr);
    gap:24px
  }
}

.prose dt{
  color:var(--muted);
  font-size:16px;
  font-weight:600
}

.prose dd{
  color:var(--ink);
  overflow-wrap:anywhere
}

.prose dt{
  overflow-wrap:anywhere
}

/* ==========================================================================
   AI & SEO tools (tools/_schema, _lens, _export; app/javascript/seo_tools)
   Same tokens as the optimizer: a white panel on the deeper field, 2px dashed drop frame, hairlines for rows.
   ========================================================================== */

/* Header: the tools' menu next to the optimizer's links, and their group in the phone menu */

.nav-list > li{
  position:relative
}

/* With the tools' menu and the longer name, the bar is tighter: smaller gaps from 80em, where the links show. */

.header-in > .brand{
  flex:none
}

@media (min-width:80em){
  .header-in{
    gap:24px
  }

  .nav-list a,.nav-drop-button{
    padding-inline:10px
  }
}

.nav-drop-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 10px 0 12px;
  border-radius:var(--r-c);
  color:var(--ink-2);
  font-size:16px;
  font-weight:500;
  white-space:nowrap;
  list-style:none;
  cursor:pointer
}

.nav-drop-button::-webkit-details-marker{
  display:none
}

.nav-drop-button:hover,.nav-drop[open] .nav-drop-button{
  color:var(--ink);
  background:var(--deep)
}

.nav-drop-button.is-current{
  color:var(--ink);
  font-weight:600
}

.nav-drop-button .i{
  width:16px;
  height:16px;
  stroke-width:2;
  transition:transform .15s
}

.nav-drop[open] .nav-drop-button .i{
  transform:rotate(180deg)
}

.nav-drop-panel{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  z-index:20;
  display:grid;
  gap:2px;
  min-width:260px;
  padding:8px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow-tool)
}

.nav-drop-panel a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border-radius:var(--r-c);
  color:var(--ink);
  font-size:16px;
  font-weight:500;
  white-space:nowrap
}

.nav-drop-panel a:hover{
  background:var(--mist)
}

.nav-drop-panel a[aria-current]{
  background:var(--deep);
  font-weight:600
}

.menu-group{
  margin:10px 14px 4px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase
}

/* The tool: a white panel under the hero's promises */

.xt{
  margin-top:clamp(24px, 3vw, 36px);
  padding:10px;
  border-radius:var(--r);
  background:var(--deep);
  text-align:left
}

.xt-panel{
  display:grid;
  gap:24px;
  padding:20px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow-tool)
}

@media (min-width:40em){
  .xt-panel{
    padding:28px
  }
}

.xt-cols{
  align-items:start
}

@media (min-width:64em){
  .xt-cols{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:36px
  }

  .xt-output{
    position:sticky;
    top:20px
  }
}

.xt-group{
  display:grid;
  gap:14px;
  min-width:0;
  margin:0;
  padding:0 0 26px;
  border:0;
  border-bottom:1px solid var(--line)
}

.xt-group:last-child{
  padding-bottom:0;
  border-bottom:0
}

.xt-group + .xt-group{
  padding-top:26px
}

/* the same room on both sides of the hairline */

.xt-legend{
  display:flex;
  align-items:center;
  gap:10px;
  float:left;
  width:100%;
  margin-bottom:2px;
  padding:0;
  font:500 18px/1.25 var(--display);
  letter-spacing:-.01em;
  color:var(--ink)
}

.xt-legend + *{
  clear:left
}

.xt-num{
  display:grid;
  place-items:center;
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  font:700 16px/1 var(--font)
}

.xt-grid{
  display:grid;
  gap:14px
}

@media (min-width:40em){
  .xt-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .xt-wide{
    grid-column:1 / -1
  }
}

.xt-grid[hidden]{
  display:none
}

.xt-field{
  display:grid;
  gap:6px;
  min-width:0
}

.xt-field label{
  font:500 16px/1.25 var(--font);
  color:var(--ink-2)
}

.xt-input{
  width:100%;
  min-height:46px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-c);
  background:#fff;
  color:var(--ink);
  font:500 16px/1.3 var(--font);
  transition:border-color .15s, box-shadow .15s
}

select.xt-input{
  padding-right:34px;
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233A433D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px
}

.xt-textarea{
  min-height:72px;
  padding:11px 12px;
  resize:vertical
}

.xt-input::-moz-placeholder{
  color:var(--muted);
  font-weight:400;
  opacity:1
}

.xt-input::placeholder{
  color:var(--muted);
  font-weight:400;
  opacity:1
}

.xt-input:hover{
  border-color:var(--ink-2)
}

.xt-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow)
}

.xt-hint{
  color:var(--muted);
  font-size:16px;
  line-height:1.5
}

.xt-hint a,.xt-note a{
  color:var(--accent);
  font-weight:600;
  text-underline-offset:3px
}

.xt-notice{
  padding:12px 16px;
  border-radius:var(--r-c);
  background:var(--deep);
  color:var(--ink);
  font-size:16px
}

.xt-empty{
  color:var(--muted);
  font-size:16px
}

.xt-private{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink-2);
  font-size:16px
}

.xt-private .i{
  width:16px;
  height:16px;
  color:var(--accent);
  stroke-width:2.1
}

.xt-note{
  color:var(--muted);
  font-size:16px;
  line-height:1.55
}

/* Drop area: the optimizer's dashed frame, compact in forms */

.xt-drop{
  position:relative;
  isolation:isolate;
  border-radius:var(--r-c)
}

.xt-drop::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:2px dashed var(--accent);
  border-radius:var(--r-c);
  transition:background-color .15s, border-color .15s
}

.xt-drop:has(.xt-drop-area:hover)::before,.xt-drop:has(input:focus-visible)::before,.xt-drop[data-dragging]::before{
  border-color:var(--accent-2);
  background:var(--accent-tint)
}

.xt-drop[data-dragging]::before{
  border-style:solid
}

.xt-drop:has(input:focus-visible) .xt-drop-area{
  outline:2px solid var(--accent);
  outline-offset:4px
}

.xt-drop-area{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 12px;
  padding:22px 18px;
  border-radius:var(--r-c);
  cursor:pointer;
  text-align:center
}

.xt-drop-area > .i{
  width:22px;
  height:22px;
  color:var(--accent);
  stroke-width:1.9
}

.xt-drop-area strong{
  color:var(--ink);
  font-size:16px;
  font-weight:650
}

.xt-drop-area span{
  color:var(--muted);
  font-size:16px
}

.xt-drop-lg .xt-drop-area{
  display:grid;
  justify-items:center;
  gap:16px;
  padding:clamp(30px, 4vw, 46px) 22px
}

.xt-drop-icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent)
}

.xt-drop-icon .i{
  width:28px;
  height:28px;
  stroke-width:1.8
}

.xt-drop-lg .xt-drop-title{
  max-width:20em;
  font:450 clamp(22px, 1rem + .8vw, 28px)/1.15 var(--display);
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance
}

.xt-drop-lg span.btn{
  color:#fff;
  font-size:16.5px
}

.xt-drop-lg .xt-drop-hint{
  color:var(--muted);
  font-size:16px
}

/* Schema generator: one row per image */

.xt-rows{
  display:grid;
  gap:12px
}

.xt-rows:empty{
  display:none
}

.xt-row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  padding:14px 48px 16px 14px;
  border:1px solid var(--line-2);
  border-radius:var(--r)
}

.xt-row:not(:has(.xt-thumb)){
  grid-template-columns:minmax(0,1fr)
}

.xt-thumb{
  width:64px;
  height:64px;
  -o-object-fit:contain;
     object-fit:contain;
  border-radius:10px;
  background:var(--checker)
}

.xt-row-body{
  display:grid;
  gap:10px;
  min-width:0
}

.xt-row-file{
  overflow:hidden;
  color:var(--ink);
  font-size:16px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}

.xt-remove{
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:0;
  border-radius:var(--r-c);
  background:transparent;
  color:var(--muted);
  cursor:pointer
}

.xt-remove:hover{
  background:var(--deep);
  color:var(--ink)
}

.xt-remove .i{
  width:18px;
  height:18px
}

.xt-add{
  justify-self:start
}

/* Schema generator: the output */

.xt-output{
  display:grid;
  gap:14px;
  min-width:0
}

.xt-output-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.xt-output-title{
  font:500 18px/1.25 var(--display);
  letter-spacing:-.01em
}

.xt-problems{
  display:grid;
  gap:6px
}

.xt-problem{
  position:relative;
  padding:9px 12px 9px 34px;
  border-radius:var(--r-c);
  font-size:16px;
  line-height:1.45
}

.xt-problem::before{
  content:"";
  position:absolute;
  left:13px;
  top:15px;
  width:9px;
  height:9px;
  border-radius:50%
}

.xt-problem.xt-error{
  background:#FBEDE9;
  color:#6E2817
}

.xt-problem.xt-error::before{
  background:var(--red)
}

.xt-problem.xt-warning{
  background:#FBF3E3;
  color:#5C4210
}

.xt-problem.xt-warning::before{
  background:#A86B0C
}

.xt-problem.xt-ok{
  background:var(--accent-soft);
  color:var(--accent-2)
}

.xt-problem.xt-ok::before{
  background:var(--accent)
}

.xt-code{
  max-height:min(70vh, 640px);
  margin:0;
  padding:16px 18px;
  overflow:auto;
  border-radius:var(--r-c);
  background:#14201A;
  color:#E4F0E7;
  font:500 16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space:pre;
  -moz-tab-size:2;
    -o-tab-size:2;
       tab-size:2
}

.xt-code:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px
}

/* Visual search checker: summary, then one card per photo */

.xt-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 16px
}

.xt-summary[hidden]{
  display:none
}

.xt-summary-text{
  color:var(--ink);
  font-size:16px;
  font-weight:600
}

.xt-results{
  display:grid;
  gap:14px
}

.xt-results:empty{
  display:none
}

.xt-result{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  padding:16px;
  border:1px solid var(--line-2);
  border-radius:var(--r)
}

.xt-result-thumb{
  width:96px;
  height:96px;
  -o-object-fit:contain;
     object-fit:contain;
  border-radius:10px;
  background:var(--checker)
}

.xt-result-thumb[hidden]{
  display:none
}

.xt-result:not(:has(.xt-result-thumb:not([hidden]))){
  grid-template-columns:minmax(0,1fr)
}

.xt-result-body{
  display:grid;
  gap:8px;
  min-width:0
}

.xt-result-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px
}

.xt-result-name{
  min-width:0;
  overflow:hidden;
  font:650 16px/1.3 var(--font);
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap
}

.xt-result-size{
  color:var(--muted);
  font-size:16px
}

.xt-result-size:empty{
  display:none
}

.xt-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:var(--deep);
  color:var(--ink-2);
  font-size:16px;
  font-weight:650
}

.xt-result[data-status=pass] .xt-badge{
  background:var(--accent-soft);
  color:var(--accent-2)
}

.xt-result[data-status=warn] .xt-badge{
  background:#FBF3E3;
  color:#5C4210
}

.xt-result[data-status=fail] .xt-badge,.xt-result[data-status=error] .xt-badge{
  background:#FBEDE9;
  color:#6E2817
}

.xt-checks{
  display:grid;
  gap:7px
}

.xt-check{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:8px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.45
}

.xt-check strong{
  color:var(--ink);
  font-weight:650
}

.xt-check .i{
  width:18px;
  height:18px;
  margin-top:1px;
  stroke-width:2.2
}

.xt-check[data-status=pass] .i{
  color:var(--accent)
}

.xt-check[data-status=warn] .i{
  color:#A86B0C
}

.xt-check[data-status=fail] .i{
  color:var(--red)
}

@media (max-width:30em){
  .xt-result{
    grid-template-columns:minmax(0,1fr)
  }

  .xt-result-thumb{
    width:100%;
    height:180px
  }
}

/* Platform export: the platforms as a segmented choice, each platform's guide, and the images as a table */

.xt-platforms{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:4px;
  border-radius:var(--r-c);
  background:var(--deep)
}

.xt-platform{
  position:relative;
  flex:1 1 auto
}

.xt-platform input{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  cursor:pointer
}

.xt-platform span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:9px;
  color:var(--ink-2);
  font-size:16px;
  font-weight:600;
  white-space:nowrap
}

.xt-platform input:hover + span{
  color:var(--ink)
}

.xt-platform input:checked + span{
  background:#fff;
  color:var(--ink);
  box-shadow:0 1px 2px rgba(18,20,26,.08)
}

.xt-platform input:focus-visible + span{
  outline:2px solid var(--accent);
  outline-offset:1px
}

.xt-guide{
  display:grid;
  gap:10px;
  padding:18px 20px;
  border-radius:var(--r);
  background:var(--mist);
  border:1px solid var(--line)
}

.xt-guide[hidden]{
  display:none
}

.xt-guide-steps{
  display:grid;
  gap:8px;
  padding-left:22px;
  list-style:decimal;
  color:var(--ink);
  font-size:16px;
  line-height:1.5
}

.xt-guide-steps li::marker{
  color:var(--accent);
  font-weight:700
}

.xt-guide-note{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:8px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.5
}

.xt-guide-note .i{
  width:16px;
  height:16px;
  margin-top:2px;
  color:var(--accent);
  stroke-width:2.1
}

.xt-table-wrap{
  overflow-x:auto
}

.xt-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:16px
}

.xt-table[hidden]{
  display:none
}

.xt-table th{
  padding:0 8px 8px;
  color:var(--muted);
  font-size:16px;
  font-weight:600;
  text-align:left;
  white-space:nowrap
}

.xt-table td{
  padding:10px 8px;
  border-top:1px solid var(--line);
  vertical-align:top
}

.xt-table th:first-child,.xt-table td:first-child{
  padding-left:0
}

.xt-td-file{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:220px
}

.xt-row-thumb{
  flex:none;
  width:44px;
  height:44px;
  -o-object-fit:contain;
     object-fit:contain;
  border-radius:8px;
  background:var(--checker)
}

.xt-row-thumb[hidden]{
  display:none
}

.xt-row-name{
  min-width:0;
  overflow:hidden;
  color:var(--ink);
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}

.xt-input-sm{
  min-height:40px;
  font-size:16px
}

.xt-table .xt-textarea{
  min-height:58px;
  padding:8px 10px
}

.xt-table .xt-remove{
  position:static;
  width:36px;
  height:36px
}

.xt-clear{
  justify-self:start
}

.xt-download{
  display:grid;
  justify-items:start;
  gap:14px;
  padding-top:4px
}

.xt-download .xt-problems{
  width:100%
}

.xt-download .btn:disabled{
  opacity:.45;
  cursor:not-allowed
}

/* On phones the table becomes one card per image; the column names live in the fields' placeholders. */

@media (max-width:40em){
  .xt-table{
    min-width:0
  }

  .xt-table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap
  }

  .xt-table,.xt-table tbody,.xt-table tr,.xt-table td{
    display:block
  }

  .xt-tr{
    position:relative;
    padding:12px 0 10px;
    border-top:1px solid var(--line)
  }

  .xt-table td{
    padding:4px 0;
    border:0
  }

  .xt-table td:last-child{
    position:absolute;
    top:10px;
    right:0;
    padding:0
  }

  .xt-table .xt-td-file{
    display:flex;
    max-width:none;
    padding-right:44px
  }
}

/* Shopify product page image audit: the address, the product and its figures, then one card per image */

.xt-audit-form{
  display:grid;
  gap:8px
}

.xt-audit-label{
  font:500 18px/1.25 var(--display);
  letter-spacing:-.01em;
  color:var(--ink)
}

.xt-audit-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.xt-audit-row .xt-input{
  flex:1 1 320px;
  min-height:56px;
  font-size:16px
}

.xt-audit-row .btn{
  flex:0 0 auto
}

.xt-audit-row .btn[aria-busy=true]{
  opacity:.6;
  cursor:progress
}

.xt-audit-status{
  color:var(--ink-2);
  font-size:16px;
  font-weight:600
}

.xt-audit-status[hidden]{
  display:none
}

.xt-audit-product{
  display:grid;
  gap:14px;
  padding:18px 20px;
  border-radius:var(--r);
  background:var(--mist);
  border:1px solid var(--line)
}

.xt-audit-product[hidden]{
  display:none
}

.xt-audit-head{
  display:grid;
  gap:4px
}

.xt-audit-store{
  color:var(--muted);
  font-size:16px;
  font-weight:600
}

.xt-audit-title{
  font:500 22px/1.2 var(--display);
  letter-spacing:-.01em;
  overflow-wrap:anywhere
}

.xt-audit-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  justify-self:start;
  color:var(--accent);
  font-size:16px;
  font-weight:600;
  text-underline-offset:3px
}

.xt-audit-link .i{
  width:15px;
  height:15px;
  stroke-width:2.1
}

/* The summary: one tile per figure, its icon tinted by what it means (a problem, all clear, a gain) */

.xt-audit-stats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));
  gap:10px
}

.xt-audit-stats li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  -moz-column-gap:12px;
       column-gap:12px;
  row-gap:6px;
  padding:14px 16px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.xt-audit-stats li > .i{
  width:40px;
  height:40px;
  padding:10px;
  border-radius:50%;
  background:var(--deep);
  color:var(--ink-2);
  stroke-width:2
}

.xt-audit-stats b{
  font:500 26px/1.1 var(--display);
  letter-spacing:-.01em;
  color:var(--ink);
  overflow-wrap:anywhere
}

.au-stat-detail{
  font:600 16px/1 var(--font);
  letter-spacing:0;
  color:var(--accent)
}

.au-stat-label{
  grid-column:1 / -1;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.3
}

.xt-audit-stats li[data-tone=bad] > .i{
  background:#FBEDE9;
  color:var(--red)
}

.xt-audit-stats li[data-tone=bad] b{
  color:#6E2817
}

.xt-audit-stats li[data-tone=good] > .i,.xt-audit-stats li[data-tone=gain] > .i{
  background:var(--accent-soft);
  color:var(--accent)
}

.xt-audit-stats li[data-tone=gain] b{
  color:var(--accent-2)
}

@media (max-width:39.99em){
  .xt-audit-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }

  .xt-audit-stats li{
    grid-template-columns:34px minmax(0,1fr);
    -moz-column-gap:8px;
         column-gap:8px;
    padding:12px
  }

  .xt-audit-stats li > .i{
    width:34px;
    height:34px;
    padding:8px
  }

  .xt-audit-stats b{
    font-size:22px
  }
}

/* A file name says what the image is: shown whole, wrapped if long */

.xt[data-seo-tool=audit] .xt-result-name{
  white-space:normal;
  overflow-wrap:anywhere
}

.xt-check[data-status=info] .i{
  color:var(--muted)
}

.xt-result[data-status=info] .xt-badge{
  background:var(--deep);
  color:var(--ink-2)
}

.xt-passed{
  margin-top:2px
}

.xt-passed[hidden]{
  display:none
}

.xt-passed summary{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  color:var(--accent);
  font-size:16px;
  font-weight:600;
  cursor:pointer
}

.xt-passed .xt-checks{
  margin-top:6px
}

/* Audit: before a run, the address and what's checked next to an illustrated product page */

.au-intro{
  display:grid;
  gap:28px;
  align-items:center
}

.au-intro > *{
  min-width:0
}

@media (min-width:64em){
  .au-intro{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:40px
  }
}

.xt[data-audited] .au-art,.xt[data-audited] .au-checks{
  display:none
}

.xt[data-audited] .au-intro{
  grid-template-columns:minmax(0,1fr)
}

.au-form{
  display:grid;
  gap:24px;
  align-content:center
}

.au-input{
  position:relative;
  display:block;
  flex:1 1 260px;
  min-width:0
}

.au-input > .i{
  position:absolute;
  left:16px;
  top:50%;
  translate:0 -50%;
  width:20px;
  height:20px;
  color:var(--muted);
  pointer-events:none
}

.xt-audit-row .au-input .xt-input{
  width:100%;
  padding-left:46px
}

.au-checks{
  display:grid;
  gap:12px 18px
}

@media (min-width:30em){
  .au-checks{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

.au-checks li{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  font-size:16px;
  font-weight:600
}

.au-check-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent)
}

.au-check-icon .i{
  width:19px;
  height:19px;
  stroke-width:2
}

/* The illustration: a store's product page, findings pinned where they apply */

.au-art{
  position:relative;
  padding:22px 26px
}

.au-window{
  border-radius:14px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2), 0 24px 60px -30px rgba(18,20,26,.35);
  overflow:hidden
}

.au-chrome{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:var(--mist)
}

.au-dots{
  display:flex;
  gap:6px;
  flex:none
}

.au-dots i,.au-mini-dots i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#E7B9AE
}

.au-dots i:nth-child(2),.au-mini-dots i:nth-child(2){
  background:#E9D49B
}

.au-dots i:nth-child(3),.au-mini-dots i:nth-child(3){
  background:#B5D3BA
}

.au-address{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:4px 12px;
  border-radius:999px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--muted);
  font-size:16px;
  white-space:nowrap
}

.au-address span{
  overflow:hidden;
  text-overflow:ellipsis
}

.au-address .i{
  flex:none;
  width:14px;
  height:14px;
  color:var(--accent)
}

.au-page{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:18px;
  padding:18px
}

.au-main{
  aspect-ratio:1;
  border-radius:10px;
  background-color:#fff;
  box-shadow:inset 0 0 0 1px var(--line)
}

.au-thumbs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:8px
}

.au-thumbs span{
  aspect-ratio:1;
  border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--line)
}

.au-info{
  display:grid;
  align-content:start;
  gap:10px;
  min-width:0
}

.au-vendor{
  color:var(--muted);
  font-size:16px;
  font-weight:600
}

.au-title{
  font:500 22px/1.15 var(--display);
  letter-spacing:-.01em;
  color:var(--ink);
  overflow-wrap:anywhere
}

.au-price{
  font:650 18px/1.2 var(--font);
  color:var(--ink)
}

.au-lines{
  display:grid;
  gap:7px;
  margin:4px 0 6px
}

.au-lines i{
  display:block;
  height:8px;
  border-radius:4px;
  background:var(--deep-2)
}

.au-lines i:nth-child(2){
  width:88%
}

.au-lines i:nth-child(3){
  width:64%
}

.au-cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 14px;
  border-radius:10px;
  background:var(--ink);
  color:#fff;
  font:600 16px/1.1 var(--font);
  white-space:nowrap
}

.au-cart .i{
  width:19px;
  height:19px;
  stroke-width:2
}

.au-pin{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px 7px 10px;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 10px 26px -12px rgba(18,20,26,.45), inset 0 0 0 1px var(--line-2);
  font:600 16px/1.2 var(--font);
  white-space:nowrap
}

.au-pin .i{
  width:17px;
  height:17px;
  stroke-width:2.3
}

.au-pin[data-status=fail]{
  background:#FBEDE9;
  color:#6E2817;
  box-shadow:0 10px 26px -12px rgba(150,56,34,.5), inset 0 0 0 1px #F0CFC5
}

.au-pin[data-status=fail] .i{
  color:var(--red)
}

.au-pin[data-status=warn]{
  background:#FBF3E3;
  color:#5C4210;
  box-shadow:0 10px 26px -12px rgba(168,107,12,.45), inset 0 0 0 1px #EEDDB8
}

.au-pin[data-status=warn] .i{
  color:#A86B0C
}

.au-pin[data-status=pass]{
  background:var(--accent-soft);
  color:var(--accent-2);
  box-shadow:0 10px 26px -12px rgba(44,94,69,.45), inset 0 0 0 1px #BFD6C6
}

.au-pin[data-status=info] .i{
  color:var(--muted)
}

.au-pin-alt{
  left:0;
  top:30%
}

.au-pin-gps{
  left:30%;
  top:16%
}

.au-pin-name{
  left:4%;
  top:56%
}

.au-pin-weight{
  left:24%;
  bottom:10px
}

.au-pin-ai{
  right:0;
  top:44%
}

@media (max-width:39.99em){
  .au-art{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0
  }

  .au-window{
    flex:1 1 100%
  }

  .au-pin{
    position:static
  }

  .au-page{
    grid-template-columns:minmax(0,1fr)
  }

  .au-lines{
    display:none
  }

  .xt-audit-row .btn{
    flex:1 1 100%
  }
}

/* While it runs: the status and a progress bar */

.au-progress{
  display:grid;
  gap:10px
}

.au-progress[hidden]{
  display:none
}

.au-bar{
  width:100%;
  height:10px;
  border:0;
  border-radius:999px;
  background:var(--deep);
  overflow:hidden;
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none
}

.au-bar::-webkit-progress-bar{
  background:var(--deep);
  border-radius:999px
}

.au-bar::-webkit-progress-value{
  background:var(--accent);
  border-radius:999px;
  -webkit-transition:width .3s;
  transition:width .3s
}

.au-bar::-moz-progress-bar{
  background:var(--accent);
  border-radius:999px
}

.xt-result-tally{
  color:var(--muted);
  font-size:16px
}

.xt-result-tally:empty{
  display:none
}

.xt-result[data-status=fail]{
  border-left:4px solid var(--red)
}

.xt-result[data-status=warn]{
  border-left:4px solid #A86B0C
}

.xt-result[data-status=pass]{
  border-left:4px solid var(--accent)
}

/* How it reads the store: three illustrated steps */

.au-flow{
  display:grid;
  gap:40px 28px
}

@media (min-width:64em){
  .au-flow{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

.au-step{
  display:grid;
  align-content:start;
  gap:10px
}

.au-step h3{
  font-size:21px;
  line-height:1.2
}

.au-step p{
  color:var(--ink-2);
  font-size:17px
}

.au-step-art{
  display:grid;
  place-items:center;
  height:290px;
  margin-bottom:10px;
  padding:24px;
  border-radius:var(--r);
  background:var(--deep)
}

.au-mini-store,.au-mini-browser,.au-mini-report{
  width:min(290px,100%);
  border-radius:12px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2), 0 18px 40px -24px rgba(18,20,26,.35)
}

.au-mini-store{
  display:grid;
  gap:10px;
  padding:12px
}

.au-mini-bar{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink-2);
  font-size:16px;
  font-weight:600
}

.au-mini-bar .i{
  width:18px;
  height:18px;
  color:var(--accent)
}

.au-mini-shot{
  aspect-ratio:2 / 1;
  border-radius:8px;
  background-color:#fff;
  background-size:contain;
  box-shadow:inset 0 0 0 1px var(--line)
}

.au-mini-cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  font:600 16px/1 var(--font)
}

.au-mini-cart .i{
  width:18px;
  height:18px
}

.au-mini-browser{
  display:grid;
  gap:14px;
  padding:14px 16px 16px
}

.au-mini-dots{
  display:flex;
  gap:6px
}

.au-mini-status{
  color:var(--ink);
  font-size:16px;
  font-weight:600
}

.au-mini-progress{
  display:block;
  height:10px;
  border-radius:999px;
  background:var(--deep);
  overflow:hidden
}

.au-mini-progress i{
  display:block;
  width:42%;
  height:100%;
  border-radius:999px;
  background:var(--accent)
}

.au-mini-lock{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--accent-2);
  font-size:16px;
  font-weight:600
}

.au-mini-lock .i{
  width:18px;
  height:18px;
  color:var(--accent)
}

.au-mini-report{
  padding:6px 16px
}

.au-mini-report li{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  color:var(--ink);
  font-size:16px;
  font-weight:600
}

.au-mini-report li + li{
  border-top:1px solid var(--line)
}

.au-mini-report .i{
  width:19px;
  height:19px;
  stroke-width:2.3
}

.au-mini-report [data-status=fail] .i{
  color:var(--red)
}

.au-mini-report [data-status=warn] .i{
  color:#A86B0C
}

.au-mini-report [data-status=pass] .i{
  color:var(--accent)
}

/* What it can't tell: a plain callout */

.au-limits{
  display:grid;
  gap:18px;
  padding:clamp(24px, 3vw, 36px);
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

@media (min-width:40em){
  .au-limits{
    grid-template-columns:auto minmax(0,1fr);
    gap:24px
  }
}

.au-limits-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent)
}

.au-limits-icon .i{
  width:24px;
  height:24px;
  stroke-width:2
}

.au-limits h2{
  font-size:clamp(24px, 1rem + 1vw, 32px);
  font-weight:450;
  line-height:1.15;
  letter-spacing:-.015em
}

.au-limits p{
  margin-top:12px;
  max-width:52em;
  color:var(--ink-2);
  font-size:17px
}

/* ==========================================================================
   Guides (pages/static/ai_search_guide) and the links to them from the tool pages (shared/_guide_note)
   A long read on the same tokens: the legal pages' sticky aside (here the contents) next to the prose column.
   ========================================================================== */

/* From a tool page: one card, the book on its accent disc, the step it links to */

.gd-note{
  display:grid;
  gap:24px;
  align-items:center;
  padding:clamp(24px, 4vw, 48px);
  border-radius:var(--r);
  background:var(--deep)
}

@media (min-width:56em){
  .gd-note{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:32px
  }
}

.gd-note-icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#fff;
  color:var(--accent)
}

.gd-note-icon .i{
  width:30px;
  height:30px;
  stroke-width:1.6
}

.gd-note-copy{
  display:grid;
  gap:12px
}

.gd-note-copy h2{
  font-size:clamp(26px, 1rem + 1.4vw, 38px);
  font-weight:400;
  font-variation-settings:"opsz" 96;
  line-height:1.08;
  letter-spacing:-.02em
}

.gd-note-copy p:not(.kicker){
  max-width:40em;
  color:var(--ink-2);
  font-size:17px
}

.gd-note .btn{
  justify-self:start
}

/* Head: kicker, title, lead, then the date, reading time and author on one quiet row */

.gd-head{
  padding-top:clamp(40px, 6vw, 88px)
}

.gd-head-in{
  max-width:60em
}

.gd-head h1{
  margin-top:22px;
  font-size:clamp(38px, 1.1rem + 3.4vw, 72px)
}

.gd-lead{
  margin-top:24px;
  max-width:40em;
  color:var(--ink-2);
  font-size:clamp(18px, 1rem + .3vw, 21px);
  line-height:1.55
}

.gd-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:28px;
  color:var(--muted);
  font-size:16px
}

.gd-meta li{
  display:flex;
  align-items:center;
  gap:8px
}

.gd-meta .i{
  width:18px;
  height:18px
}

/* Body: the contents in a sticky aside from 64em, the prose beside it */

.gd-body{
  display:grid;
  gap:48px;
  margin-top:clamp(40px, 5vw, 72px)
}

.gd-body > *{
  min-width:0
}

@media (min-width:64em){
  .gd-body{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .gd-aside{
    grid-column:1 / span 4;
    position:sticky;
    top:32px;
    max-height:calc(100vh - 64px);
    overflow-y:auto
  }

  .gd-main{
    grid-column:5 / -1
  }
}

@media (min-width:80em){
  .gd-aside{
    grid-column:1 / span 3
  }

  .gd-main{
    grid-column:5 / -1
  }
}

.gd-toc{
  padding:24px 22px;
  border-radius:var(--r);
  background:var(--deep)
}

.gd-toc h2{
  color:var(--muted);
  font:600 16px/1.2 var(--font);
  letter-spacing:.08em;
  text-transform:uppercase
}

.gd-toc ol{
  display:grid;
  margin-top:10px;
  counter-reset:toc
}

.gd-toc li:not(.gd-toc-plain){
  counter-increment:toc
}

.gd-toc a{
  display:grid;
  grid-template-columns:2.1em minmax(0,1fr);
  align-items:baseline;
  padding:7px 0;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.4;
  text-decoration:none
}

.gd-toc a::before{
  content:counter(toc, decimal-leading-zero);
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.gd-toc .gd-toc-plain a::before{
  content:""
}

.gd-toc a:hover{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px
}

.gd-toc-tools{
  display:grid;
  gap:10px;
  margin-top:16px
}

.gd-toc-tools .btn{
  justify-content:center
}

/* The prose column: the legal pages' .prose, a little wider, with a few blocks of its own */

.gd-main{
  max-width:46em
}

.gd-main h2{
  scroll-margin-top:24px
}

.gd-main > section + section{
  margin-top:clamp(64px, 7vw, 96px)
}

.gd-main h3{
  scroll-margin-top:24px
}

.gd-main code{
  padding:.1em .35em;
  border-radius:6px;
  background:var(--deep);
  color:var(--ink);
  font:500 1em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap:anywhere
}

.gd-main pre{
  margin-top:16px;
  padding:18px 20px;
  border-radius:var(--r-c);
  background:var(--ink);
  color:#F0F5EE;
  overflow-x:auto;
  -moz-tab-size:2;
    -o-tab-size:2;
       tab-size:2
}

.gd-main pre code{
  padding:0;
  background:none;
  color:inherit;
  font-size:16px;
  line-height:1.55;
  white-space:pre;
  overflow-wrap:normal
}

.gd-main table{
  width:100%;
  margin-top:16px;
  border-collapse:collapse;
  font-size:16px
}

.gd-main th,.gd-main td{
  padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top
}

.gd-main th{
  color:var(--ink);
  font-weight:650
}

.gd-scroll{
  max-width:100%;
  overflow-x:auto
}

/* Key takeaways: a white card with ticks */

.gd-takeaways{
  padding:clamp(22px, 3vw, 32px);
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.gd-takeaways h2{
  margin-top:0;
  font-size:clamp(22px, 1rem + .6vw, 26px)
}

.prose .gd-ticks{
  display:grid;
  gap:12px;
  margin-top:16px;
  padding:0;
  list-style:none
}

.gd-ticks li{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  color:var(--ink)
}

.gd-ticks .i{
  width:20px;
  height:20px;
  margin-top:3px;
  color:var(--accent);
  stroke-width:2.1
}

.gd-ticks li.gd-no .i{
  color:var(--red)
}

/* The four readers: four cards, two by two from 40em */

.prose .gd-readers{
  display:grid;
  gap:14px;
  margin-top:22px;
  padding:0;
  list-style:none
}

@media (min-width:40em){
  .prose .gd-readers{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

.gd-reader{
  display:grid;
  align-content:start;
  gap:8px;
  padding:22px;
  border-radius:var(--r);
  background:var(--deep)
}

.gd-reader .i{
  width:26px;
  height:26px;
  color:var(--accent);
  stroke-width:1.6
}

.gd-reader h3{
  margin-top:4px !important;
  font-size:19px
}

.gd-reader p{
  margin-top:0 !important;
  font-size:16px
}

.gd-reader p b{
  color:var(--ink);
  font-weight:650
}

/* Layers and steps: a kicker per layer, a numbered disc per step */

.gd-layer{
  margin-top:clamp(64px, 7vw, 96px);
  padding-top:28px;
  border-top:2px solid var(--ink)
}

.gd-layer .kicker{
  margin-bottom:12px
}

.gd-layer > h2{
  margin-top:0 !important;
  font-size:clamp(28px, 1rem + 1.6vw, 40px) !important;
  font-weight:400;
  font-variation-settings:"opsz" 96;
  line-height:1.08;
  letter-spacing:-.02em
}

.gd-layer > p{
  color:var(--ink-2)
}

.gd-step{
  margin-top:clamp(48px, 5vw, 64px)
}

.gd-step > h2{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:14px;
  margin-top:0 !important
}

.gd-num{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  font:700 16px/1 var(--font);
  letter-spacing:0
}

/* "Do this": the step's checklist */

.gd-do{
  margin-top:22px;
  padding:20px 22px;
  border-radius:var(--r);
  background:var(--deep)
}

.gd-do h3{
  margin-top:0 !important;
  font-size:18px
}

/* The tool for the step: one linked card */

.gd-tool{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin-top:22px;
  padding:16px 18px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.gd-tool-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent)
}

.gd-tool-icon .i{
  width:22px;
  height:22px
}

.gd-tool p{
  margin:0 !important;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.45
}

.prose .gd-tool a{
  color:var(--ink);
  font-weight:650;
  text-decoration:none
}

.gd-tool a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r)
}

.gd-tool a:focus-visible{
  outline:none
}

.gd-tool a:focus-visible::after{
  outline:2px solid var(--accent);
  outline-offset:2px
}

.gd-tool:hover a{
  text-decoration:underline;
  text-underline-offset:4px
}

.gd-tool > .i{
  width:18px;
  height:18px;
  color:var(--muted)
}

.gd-tool:hover > .i{
  color:var(--accent)
}

/* A note in the margin of a step: what Google or a platform says, quoted by name */

.gd-aside-note{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  margin-top:22px;
  padding:16px 18px;
  border-left:3px solid var(--accent);
  border-radius:0 var(--r-c) var(--r-c) 0;
  background:var(--accent-tint)
}

.gd-aside-note .i{
  width:20px;
  height:20px;
  margin-top:3px;
  color:var(--accent)
}

.gd-aside-note p{
  margin:0 !important;
  color:var(--ink)
}

/* Alt text examples reuse .alt-examples; inside the prose, no extra top margin from .prose ul */

.gd-main .alt-examples{
  margin-top:22px
}

/* The checklist: four groups of ticks */

.gd-checklist{
  display:grid;
  gap:14px;
  margin-top:22px
}

@media (min-width:48em){
  .gd-checklist{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

.gd-checklist > div{
  padding:20px 22px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.gd-checklist h3{
  margin-top:0 !important;
  font-size:18px
}

/* Sources: publisher, title and what it says */

.prose .gd-sources{
  display:grid;
  gap:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line)
}

.gd-sources li{
  display:grid;
  gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}

.gd-sources li > span{
  color:var(--muted);
  font-size:16px
}

/* ==========================================================================
   Settings for every image (the sidebar, a draft until applied) and for one image (each card)
   ========================================================================== */

/* Apply to all images: under the settings, stuck to the bottom of the sidebar from 64em */

.apply{
  display:grid;
  gap:10px;
  margin-top:24px;
  padding:14px 0 4px;
  border-top:1px solid var(--line-2);
  background:var(--deep)
}

@media (min-width:64em){
  .apply{
    position:sticky;
    bottom:-2rem;
    z-index:2;
    margin-bottom:-2rem;
    padding:14px 0 2rem
  }
}

.apply-state{
  display:flex;
  align-items:center;
  min-height:24px;
  font:600 16px/1.3 var(--font);
  outline:none
}

.apply-state > span{
  display:none;
  align-items:center;
  gap:8px
}

.apply-state .i{
  width:17px;
  height:17px;
  stroke-width:2.2
}

.tool:not([data-pending]) .apply-saved{
  display:inline-flex;
  color:var(--accent)
}

.tool[data-pending] .apply-pending{
  display:inline-flex;
  color:#8A5A0A
}

.apply-actions{
  display:flex;
  gap:8px
}

.apply-actions .btn{
  min-height:46px;
  padding-inline:16px
}

.apply-button{
  flex:1
}

.apply-button .i{
  width:17px;
  height:17px;
  stroke-width:2.2
}

.apply-undo{
  background:#fff;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.apply .btn:disabled{
  opacity:.45;
  cursor:not-allowed
}

.apply-undo:disabled{
  display:none
}

/* The confirmation: a modal dialog over a dimmed page */

.confirm{
  width:min(520px, calc(100vw - 32px));
  padding:28px;
  border:0;
  border-radius:var(--r);
  background:#fff;
  color:var(--ink);
  box-shadow:var(--shadow-tool)
}

.confirm::backdrop{
  background:rgba(18,22,20,.42)
}

.confirm h2{
  font-size:clamp(22px, 1rem + .6vw, 26px);
  font-weight:450;
  line-height:1.2;
  letter-spacing:-.015em
}

.confirm p{
  margin-top:12px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.5
}

.confirm .confirm-custom{
  display:flex;
  gap:8px;
  color:#8A5A0A;
  font-weight:600
}

.confirm-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px
}

.confirm-actions .btn-quiet{
  background:var(--deep);
  color:var(--ink)
}

.confirm-actions .btn .i{
  width:17px;
  height:17px;
  stroke-width:2.2
}

/* Image settings in a card: the same controls as the sidebar, smaller rhythm */

.f-own-hint{
  font-weight:400
}

.f-own-custom{
  display:none;
  color:#8A5A0A;
  font-weight:600
}

.card[data-custom] .f-own-same{
  display:none
}

.card[data-custom] .f-own-custom{
  display:inline
}

.f-own-body{
  gap:18px;
  padding-top:10px
}

.own-group{
  display:grid;
  gap:8px;
  min-width:0;
  margin:0;
  padding:0;
  border:0
}

.own-title{
  display:block;
  padding:0;
  margin:0;
  font:600 16px/1.2 var(--font) !important;
  color:var(--ink)
}

fieldset.own-group > legend{
  float:left;
  width:100%;
  margin-bottom:8px
}

fieldset.own-group > legend + *{
  clear:both
}

.f-own-body .presets{
  background:var(--deep)
}

.f-own-body .preset{
  min-height:54px
}

.f-own-body .seg{
  background:var(--deep)
}

.f-own-body .seg-btn{
  min-height:44px;
  font:600 16px/1 var(--font);
  color:var(--ink-2)
}

.f-own-body .seg-btn:has(input:checked){
  color:var(--ink)
}

.f-own-body .custom-head{
  margin-top:2px
}

.f-own-body .custom-head label{
  font:500 16px/1.2 var(--font);
  color:var(--ink-2)
}

.own-credits{
  gap:12px
}

.own-credits label{
  display:block;
  margin-bottom:6px;
  font:500 16px/1.2 var(--font) !important;
  color:var(--ink-2) !important
}

.f-own-body .switch-row{
  display:flex;
  gap:12px
}

/* Confetti on a win (optimizer_controller.js, celebrate): a ring from the bar's center, behind its numbers */

.confetti{
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  width:0;
  height:0;
  pointer-events:none
}

.confetti-piece{
  position:absolute;
  left:0;
  top:0;
  width:9px;
  height:4px;
  border-radius:1px;
  background:var(--c);
  opacity:0;
  animation:confetti 1500ms cubic-bezier(.16,.8,.3,1) var(--d) forwards
}

.confetti-round{
  width:7px;
  height:7px;
  border-radius:50%
}

@keyframes confetti{
  0%{
    transform:translate(0,0) rotate(0deg);
    opacity:0
  }

  10%,70%{
    opacity:1
  }

  100%{
    transform:translate(var(--dx),var(--dy)) rotate(var(--r));
    opacity:0
  }
}

@media (prefers-reduced-motion:reduce){
  .confetti{
    display:none
  }
}