/* Generated by tools/build_rtl.py from v2/site.css. Do not edit. */
/* Textumi public design, second version. Shared by every v2 page: tokens, type, header, footer, components.
   Light theme only. Motion is added by core.js; everything here reads without it. */
@font-face{font-family:'Tx Display';src:url('/static/fonts/prata.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Tx Sans';src:url('/static/fonts/dm-sans.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Tx Sans';src:url('/static/fonts/dm-sans-bold.woff2') format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:'Tx Label';src:url('/static/fonts/plex-sans.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Tx Label';src:url('/static/fonts/plex-sans-semibold.woff') format('woff');font-weight:500 700;font-display:swap}
@font-face{font-family:'Tx Serif';src:url('/static/fonts/source-serif.woff') format('woff');font-weight:400;font-display:swap}

:root{
  --ink:#12172e;--ink-2:#3b4161;--muted:#646a84;--paper:#fbfaf6;--surface:#fff;--line:#e5e4ea;--line-strong:#cfd0dc;
  --accent:#3547cd;--accent-ink:#2635a6;--accent-wash:#eef0fd;--violet:#6f4bb8;--violet-wash:#f4effb;
  --mint:#1f7a55;--mint-wash:#e7f4ed;--sand-wash:#f7f0e2;--mark:#ffe27a;--mark-soft:#fff4c9;--done:#c5ecd4;
  --navy:#101531;--navy-2:#1b2247;
  --display:'Tx Display','Iowan Old Style',Georgia,serif;--sans:'Tx Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --label:'Tx Label','Tx Sans',system-ui,sans-serif;--serif:'Tx Serif',Georgia,serif;
  --h1:clamp(2.2rem,3.3vw + 1rem,4rem);--h2:clamp(1.9rem,2.6vw + 1rem,3.25rem);--h3:clamp(1.15rem,.5vw + 1rem,1.375rem);
  --lead:clamp(1.06rem,.45vw + .95rem,1.28rem);--gap:clamp(20px,4vw,48px);--section:clamp(72px,10vw,150px);
  --r-s:10px;--r-m:16px;--r-l:26px;--ease:cubic-bezier(.2,.8,.2,1);--header:68px;
  --shadow-s:0 1px 2px rgba(18,23,46,.05),0 4px 14px rgba(18,23,46,.05);--shadow-m:0 2px 4px rgba(18,23,46,.04),0 18px 48px -12px rgba(18,23,46,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
[hidden]{display:none!important}
img,svg,video{max-width:100%;display:block}img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}
h3{font:700 var(--h3)/1.25 var(--sans);letter-spacing:-.012em}
::selection{background:var(--mark)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(100%,1288px);margin-inline:auto;padding-inline:var(--gap)}
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;right:16px;top:-80px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
.icon{flex:none}
.sandbox-notice{padding:8px var(--gap);background:var(--sand-wash);font-size:14px;text-align:center}

/* Buttons and links */
.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border:1px solid transparent;border-radius:999px;font:600 15.5px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s;}
.btn .arrow,.link-arrow .arrow,.related-card .arrow,.content-links .arrow,.cta-tool .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow,.link-arrow:hover .arrow,a:hover>.link-arrow .arrow,.related-card:hover .arrow,.content-links a:hover .arrow,.cta-tool:hover .arrow{transform:translateX(-4px)}
.btn-primary,.button-dark{background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 22px -10px rgba(18,23,46,.6)}
.btn-primary:hover,.button-dark:hover{background:var(--accent)}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-ink)}
.btn-ghost,.button-outline{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover,.button-outline:hover{border-color:var(--ink);background:#fff}
.btn-muted,.button-muted{background:#eeeef2;color:var(--muted);cursor:not-allowed}
.btn-small,.button-small{min-height:38px;padding:0 16px;font-size:14.5px}
.btn-large{min-height:54px;padding:0 28px;font-size:16.5px}
.btn-full{width:100%}
.link-arrow,.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:border-color .25s,color .25s}
.link-arrow:hover,a:hover>.link-arrow,.text-link:hover{color:var(--accent);border-color:var(--accent)}
.kicker,.eyebrow,.section-kicker{font:500 13px/1.3 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.kicker,.section-kicker{display:flex;align-items:center;gap:8px}
.kicker .icon,.section-kicker .icon{width:16px;height:16px}
.fine-print{display:flex;gap:10px;align-items:flex-start;max-width:70ch;margin-top:26px;color:var(--muted);font-size:14.5px;line-height:1.55}
.fine-print .icon{width:17px;height:17px;margin-top:2px}
.section-head{display:grid;gap:18px;max-width:780px}
.section-head>p:not(.kicker){color:var(--ink-2);font-size:var(--lead);line-height:1.55;max-width:60ch}
.icon-button,.icon-round{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;transition:border-color .2s,background-color .2s,color .2s}
.icon-round:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.icon-round[disabled]{opacity:.35;pointer-events:none}
.flip{transform:scaleX(-1)}

/* Header: slim, glass once the page has moved */
.site-header{position:sticky;top:0;z-index:50;height:var(--header);background:var(--paper)}
.site-header::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--line);opacity:0;transition:opacity .35s}

.site-header.is-scrolled::after{opacity:1}

.header-inner{display:flex;align-items:center;gap:28px;height:100%;width:min(100%,1288px);margin-inline:auto;padding-inline:var(--gap)}
.brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;flex:none}
.brand-logo{width:128px;height:auto}
/* The wordmark is mostly lower-case: lifted so that its letters, not its box, sit on the line of the menu. */
.site-header .brand-logo{position:relative;top:-4px}.brand-icon,.brand-name{display:none}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.main-nav>a,.nav-menu>summary,.header-link{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 13px;border-radius:999px;font-weight:500;font-size:15px;color:var(--ink-2);text-decoration:none;cursor:pointer;list-style:none;transition:background-color .2s,color .2s}
.nav-menu>summary::-webkit-details-marker,.mobile-menu>summary::-webkit-details-marker,.language-menu>summary::-webkit-details-marker{display:none}
.main-nav>a:hover,.nav-menu>summary:hover,.nav-menu[open]>summary,.header-link:hover,.main-nav>a[aria-current]{background:rgba(18,23,46,.06);color:var(--ink)}
.chevron{width:16px;height:16px;transition:transform .3s var(--ease)}
[open]>summary .chevron{transform:rotate(180deg)}

.header-inner{position:relative}
/* Header menus in the manner of the first design: a panel as wide as the header that hangs from it. */
.mega{position:absolute;top:100%;right:var(--gap);left:var(--gap);display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:28px;padding:24px;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;background:#fff;box-shadow:0 24px 45px rgba(35,36,80,.08);animation:menu-in .2s cubic-bezier(.22,.8,.25,1)}
.mega::before{content:'';position:absolute;inset:-16px 0 100%}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
.mega-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mega-tile{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:160px;padding:25px;border-radius:11px;text-decoration:none;overflow:hidden}
.tile-symbol{display:block;margin-bottom:16px}.tile-symbol .icon{width:24px;height:24px}
.mega-tile strong{font-size:18px;font-weight:600;line-height:1.5}
.mega-guides .mega-tile>span:last-child{margin-top:5px;font-size:14px;line-height:1.5}
.tile-detect{--tint:#edf0ff;--tint-over:#e0e5ff;--tone:var(--accent);--fold:#b9c2f3}
.tile-rewrite{--tint:#f7eaf0;--tint-over:#f0dce7;--tone:#963e68;--fold:#e6bcd0}
.tile-mint{--tint:var(--mint-wash);--tint-over:#d9eee2;--tone:var(--mint);--fold:#b5d9c5}
.tile-sand{--tint:var(--sand-wash);--tint-over:#f0e6cf;--tone:#7a5a16;--fold:#e2cf9f}
/* Products: tinted tiles, a shade deeper under the pointer (as on the first design). */
.mega-tile{background:var(--tint);color:var(--tone);transition:background-color .25s}
.mega-tile:hover,.mega-tile:focus-visible{background:var(--tint-over)}
/* Guides: neutral at rest; on hover, on keyboard focus and for the page being read a tile takes its own tint and
   colour. The hairline is drawn inside the tile, so the folded corner can cut it away cleanly. */
.mega-guides .mega-tile{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.mega-guides .tile-symbol{color:var(--ink-2);transition:color .22s var(--ease)}
.mega-guides .mega-tile>span:last-child{color:var(--muted);transition:color .22s var(--ease)}
.mega-guides .mega-tile:hover,.mega-guides .mega-tile:focus-visible,.mega-guides .mega-tile[aria-current]{background:var(--tint);color:var(--tone);box-shadow:inset 0 0 0 1px var(--tint)}
.mega-guides .mega-tile:hover .tile-symbol,.mega-guides .mega-tile:focus-visible .tile-symbol,.mega-guides .mega-tile[aria-current] .tile-symbol{color:var(--tone)}
.mega-guides .mega-tile:hover>span:last-child,.mega-guides .mega-tile:focus-visible>span:last-child,.mega-guides .mega-tile[aria-current]>span:last-child{color:var(--ink-2)}
/* The folded corner, on hover and focus: the corner of the tile is cut away to the white of the panel and the flap
   (the back of the paper, a deeper shade of the tile's tint) lies on the diagonal. Both grow from the corner by the
   same transform, so they stay together; the white square lies under the flap, so no tint shows along the diagonal. */
.mega-tile::before,.mega-tile::after{content:'';position:absolute;top:0;left:0;width:38px;height:38px;transform:scale(0);transform-origin:top left;transition:transform .42s cubic-bezier(.22,.8,.25,1);pointer-events:none}
.mega-tile::before{background:#fff}
.mega-tile::after{background:var(--fold);clip-path:polygon(0 0,100% 100%,0 100%)}
.mega-tile:hover::before,.mega-tile:focus-visible::before,.mega-tile:hover::after,.mega-tile:focus-visible::after{transform:scale(1)}
.mega-guides .mega-tile::before,.mega-guides .mega-tile::after{width:30px;height:30px;transition-duration:.3s}
/* What a tool gives, inside its tile: three short points and a line that says where the tile leads. */
.tile-points{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(18,23,46,.1);color:var(--ink-2);font-size:14px;line-height:1.45}
.tile-points li{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start}
.tile-points .icon{width:15px;height:15px;margin-top:3px;color:var(--tone)}
.tile-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-weight:600;font-size:14.5px;color:var(--tone)}
.tile-go .arrow{transition:transform .35s var(--ease)}
.mega-tile:hover .tile-go .arrow,.mega-tile:focus-visible .tile-go .arrow{transform:translateX(-4px)}
.mega-tools .mega-tile>span:not(.tile-symbol):not(.tile-go){margin-top:5px;color:var(--ink-2);font-size:14px;line-height:1.5}
@media (max-width:1100px){.mega{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:18px}.mega-tile{padding:20px}}
.mega-links{display:block;padding:8px 4px}
.mega-label,.dropdown-label{display:block;margin:0 0 14px;font:500 12px/1.5 var(--sans);color:var(--muted)}
.mega-links a{display:flex;align-items:center;gap:14px;margin-inline:-12px;padding:11px 12px;border-radius:5px;font-size:15px;color:var(--ink);text-decoration:none;transition:background-color .2s}
.mega-links a:hover,.mega-links a:focus-visible{background:#f0f2fb}
.mega-links .icon{width:20px;height:20px}
.mega-links small{display:block;font-size:12px;color:var(--muted)}
.mega-guides{display:block;padding:0;overflow:hidden}
.mega-featured{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:24px}
.mega-guides .mega-tile{min-height:132px;padding:18px}
/* Every other guide: a quiet list in two columns under the tiles, without icons or boxes. */
.mega-more{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 12px;align-items:start;padding:18px 24px 20px;border-top:1px solid var(--line);background:var(--paper)}
.mega-more ul{grid-column:2/-1}
.mega-more .mega-label{margin:9px 0 0}
.mega-more ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin:0;padding:0;list-style:none}
.mega-more li{min-width:0}
.mega-more a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;margin-inline:-10px;border-radius:7px;font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none;transition:background-color .2s,color .2s}
.mega-more a>span{min-width:0;overflow-wrap:anywhere}
.mega-more a .arrow,.mega-more a svg{flex:0 0 auto;width:15px;height:15px;color:var(--accent);opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s}
.mega-more a:hover,.mega-more a:focus-visible{background:#fff;color:var(--accent)}
.mega-more a:hover .arrow,.mega-more a:focus-visible .arrow,.mega-more a:hover svg,.mega-more a:focus-visible svg{opacity:1;transform:none}
@media (max-width:1100px){.mega-featured{padding:18px}.mega-more{grid-template-columns:minmax(0,1fr);padding:16px 18px}.mega-more ul{grid-column:auto}.mega-more .mega-label{margin:0 0 4px}}
.mega-guides .tile-symbol{margin-bottom:12px}
.mega-guides .mega-tile strong{font-size:15.5px;line-height:1.3}
.mega-guides .mega-tile>span:last-child{font-size:13px;line-height:1.4}
.header-actions{display:flex;align-items:center;gap:6px}
.language-menu{position:relative}
.language-menu>summary{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:999px;font:500 13px/1 var(--label);letter-spacing:.04em;color:var(--ink-2);cursor:pointer;list-style:none}
.language-menu>summary:hover,.language-menu[open]>summary{background:rgba(18,23,46,.06)}
.language-menu>summary .icon:first-child{width:17px;height:17px}
.language-options{position:absolute;left:0;top:calc(100% + 12px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 18px 44px rgba(36,36,61,.09);animation:menu-in .2s cubic-bezier(.22,.8,.25,1)}
.language-options>.dropdown-label{grid-column:1/-1}
.language-options a,.language-options button{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:40px;padding:8px 9px;border:0;border-radius:7px;background:none;font-size:14px;text-align:right;text-decoration:none}
.language-options a:hover,.language-options button:hover,.language-options [aria-current]{background:#f0f2fb}
.language-options .icon{margin-right:auto;width:16px;height:16px;color:var(--accent)}
.language-code{width:22px;font-size:11px;color:var(--muted)}
.mobile-menu{display:none}
.mobile-menu>summary{list-style:none}
.mobile-menu:not([open]) .menu-opened,.mobile-menu[open] .menu-closed{display:none}
.mobile-menu>nav{position:absolute;top:calc(100% + 7px);right:12px;left:12px;z-index:60;display:block;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);padding:20px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 18px 30px rgba(18,23,46,.1);overflow-y:auto;overscroll-behavior:contain;animation:menu-in .2s cubic-bezier(.22,.8,.25,1)}
.mobile-menu>nav a{display:flex;align-items:center;gap:13px;min-height:45px;padding:12px 6px;border-radius:5px;font-size:15px;text-decoration:none}
.mobile-menu>nav a:hover{background:#f0f2fb}
/* The guides in the mobile menu: neutral, tinted while pressed and for the page being read. */
.mobile-menu>nav a.mobile-guide{transition:background-color .2s var(--ease),color .2s var(--ease)}
.mobile-menu>nav a.mobile-guide .icon{color:var(--ink-2)}
.mobile-menu>nav a.mobile-guide:active,.mobile-menu>nav a.mobile-guide[aria-current]{background:#edf0ff;color:var(--accent)}
.mobile-menu>nav a.mobile-guide:active .icon,.mobile-menu>nav a.mobile-guide[aria-current] .icon{color:var(--accent)}
.mobile-menu>nav .mega-label{margin:4px 6px 6px}
.mobile-menu>nav hr{margin:9px 0;border:0;border-top:1px solid var(--line)}
.mobile-menu>nav .mobile-menu-start{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.mobile-menu>nav .mobile-menu-start a{justify-content:center;min-height:45px;padding:12px 16px;border-radius:9px;font-weight:600;text-align:center}
.mobile-menu>nav .mobile-menu-secondary{border:1px solid var(--line);color:var(--ink)}
.mobile-menu>nav .mobile-menu-action{justify-content:center;padding:12px 20px;border-radius:9px;background:var(--accent);color:#fff;font-weight:600}
.mobile-guides>summary{display:flex;align-items:center;justify-content:space-between;gap:13px;min-height:45px;padding:12px 6px;border-radius:5px;font-size:15px;cursor:pointer;list-style:none}
.mobile-guides>summary::-webkit-details-marker{display:none}
.mobile-guides>summary:hover{background:#f0f2fb}
.mobile-guides>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mobile-guides>div{padding:2px 0 4px}
.mobile-menu>nav .mobile-menu-action:hover{background:var(--accent-ink)}
@media (max-width:1020px){.main-nav,.header-link,.header-actions>.btn{display:none}.header-actions{margin-right:auto}.mobile-menu{display:block}.site-header:has(.mobile-menu[open]){background:var(--paper)}}

/* The reading scene */
.scene{position:relative}
.scene figcaption{margin-top:14px;font:400 12.5px/1.4 var(--label);letter-spacing:.03em;color:var(--muted);text-align:left}
.scene-card{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow-m);overflow:hidden}
.scene-bar,.mock-bar{display:flex;align-items:center;gap:14px;height:46px;padding:0 16px;border-bottom:1px solid var(--line);font:500 12.5px/1 var(--label)}
.scene-dots{display:flex;gap:6px}.scene-dots i{width:9px;height:9px;border-radius:50%;background:#dcdde6}
.scene-tool{display:flex;gap:4px;padding:3px;border-radius:999px;background:#f1f1f5}
.scene-tool b{padding:6px 11px;border-radius:999px;font-weight:500;color:var(--muted);transition:background-color .4s,color .4s}
.scene-tool b.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(18,23,46,.12)}
.scene-status{margin-right:auto;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.scene-body{position:relative;padding:22px 24px 8px;height:calc(1.62em * 8 + 34px);font-size:clamp(15px,.35vw + 13.5px,17.5px);overflow:hidden}
.scene-text{font-family:var(--serif);line-height:1.62;color:var(--ink)}
.scene-text .s{display:block}.scene-text .s+.s{margin-top:.3em}
.s-mark>span{border-radius:4px;padding:1px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 0/0% 100%;transition:background-size .7s var(--ease)}
.s-mark.is-marked>span{background-size:100% 100%}
.s-mark.is-done>span{background-image:linear-gradient(var(--done),var(--done))}
.s-new .w,.s-old .w{display:inline-block;}
.scene-scan{position:absolute;right:0;left:0;top:0;height:64px;margin-top:-64px;background:rgba(53,71,205,.06);border-bottom:1.5px solid var(--accent);opacity:0;pointer-events:none;}
.scene-foot{display:flex;align-items:center;justify-content:flex-start;gap:20px;padding:12px 24px 18px;border-top:1px dashed var(--line)}
.scene-gauge{display:flex;align-items:center;gap:14px}
.scene-gauge .tx-gauge{width:112px;margin:0}
@media (max-width:640px){.scene-gauge .tx-gauge{width:96px}}
.scene-score{display:grid;gap:4px}
.scene-score b{display:flex;align-items:center;gap:8px;font:400 21px/1.15 var(--display);transition:opacity .3s}
.scene-score b::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.scene-gauge[data-tone=high] .scene-score b::before{background:#d4574a;box-shadow:0 0 0 4px rgba(212,87,74,.16)}
.scene-gauge[data-tone=low] .scene-score b::before{background:#4f9a72;box-shadow:0 0 0 4px rgba(79,154,114,.16)}
.scene-gauge:not([data-tone]) .scene-score b{opacity:0}
@media (min-width:600px){.scene-score b{white-space:nowrap}}
.scene-score small{font:500 11.5px/1.2 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scene-note{margin-right:auto;max-width:20ch;font-size:12.5px;line-height:1.4;color:var(--muted);text-align:left}

/* The demo desk (ids and structure belong to static/home.js and rich-text.js) */
.writing-desk{position:relative;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow-m);overflow:hidden}
.desk-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:#fcfcfd}
.desk-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:#f1f1f5}
.desk-tab{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:none;font-weight:600;font-size:15px;color:var(--muted);transition:background-color .3s,color .3s,box-shadow .3s}
.desk-tab .icon{width:18px;height:18px}
.desk-tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(18,23,46,.14)}
.writing-desk[data-topic=detect] .desk-tab.active{color:var(--accent)}.writing-desk[data-topic=rewrite] .desk-tab.active{color:var(--violet)}
.draft-panel{position:relative;padding:8px 22px 0}
.draft-panel textarea,.draft-panel .rich-editor{display:block;width:100%;min-height:210px;max-height:46vh;padding:14px 0;border:0;background:none;font:400 17.5px/1.65 var(--serif);color:var(--ink);resize:none;outline:none;overflow-y:auto}
.draft-panel textarea::placeholder{color:#9a9eb3}
.draft-helpers{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 14px}
.draft-helpers button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font-size:14px;font-weight:500;transition:border-color .2s,background-color .2s}
.draft-helpers button:hover{border-color:var(--ink)}
.draft-helpers .icon{width:16px;height:16px}
#home-word-count{margin-right:auto;font:400 13px/1 var(--label);color:var(--muted);font-variant-numeric:tabular-nums}
.desk-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);background:#fcfcfd}
#draft-hint{font:400 13px/1.4 var(--label);color:var(--muted)}
.draft-feedback{margin:0;padding:12px 22px;background:#fff3ea;color:#8a3b12;font-size:14.5px}
.format-offer{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;border-radius:12px;background:var(--accent-wash);font-size:14px}
.format-offer button{border:0;background:none;font-weight:600;color:var(--accent)}
.format-offer-close{margin-right:auto;display:grid}

/* Questions */
.faq>h2{margin-bottom:26px}
.faq details{border-bottom:1px solid var(--line-strong);overflow:hidden}
.faq details:first-of-type{border-top:1px solid var(--line-strong)}
.faq summary{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 4px;font-weight:600;font-size:clamp(1.02rem,.3vw + 1rem,1.18rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink);cursor:pointer;list-style:none;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:'';flex:none;width:30px;height:30px;margin-top:-2px;border:1px solid var(--line-strong);border-radius:50%;background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;transition:transform .4s var(--ease),background-size .3s,background-color .3s}
.faq details[open] summary::after{transform:rotate(180deg);background-size:11px 1.5px,1.5px 0}
.faq details>p,.faq details>.faq-answer{margin:0;padding:0 4px 24px 56px;max-width:74ch;color:var(--ink-2);line-height:1.65}

/* Long copy. The markup is the one templates/content_blocks.html writes for both designs: plain sections, lists,
   tables, notes and links. The outline rail of a page with extra copy is added by core.js. */
.content-extra,.article-layout{padding-block:clamp(56px,7vw,110px)}
.article-layout,.content-extra.has-rail{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.article-layout+.content-extra{padding-top:0}
.page-outline{position:sticky;top:calc(var(--header) + 28px);display:grid;gap:2px;max-height:calc(100vh - var(--header) - 56px);overflow-y:auto;padding-right:1px;border-right:1px solid var(--line-strong)}
.page-outline>span{padding:0 18px 10px 0;font:500 12px/1.3 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-outline a{position:relative;margin-right:-1px;padding:7px 18px 7px 0;border-right:2px solid transparent;font-size:14.5px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .25s,border-color .25s}
.page-outline a:hover{color:var(--ink)}
.page-outline a.is-active{color:var(--ink);font-weight:600;border-color:var(--accent)}
.legal-copy{min-width:0;max-width:68ch;font-size:clamp(1.03rem,.2vw + 1rem,1.14rem);line-height:1.72;color:var(--ink-2);counter-reset:part}
.content-extra:not(.has-rail)>.legal-copy{margin-inline:auto}
.legal-copy>*+*{margin-top:clamp(52px,6vw,84px)}
.legal-copy>section:not(.faq):not(.operator-box){position:relative;counter-increment:part}
.legal-copy>section:not(.faq):not(.operator-box)::before{content:counter(part,decimal-leading-zero);display:block;margin-bottom:14px;padding-top:26px;border-top:1px solid var(--line-strong);font:500 12.5px/1 var(--label);letter-spacing:.1em;color:var(--accent)}
.legal-copy h2{margin-bottom:22px;font-size:clamp(1.7rem,1.5vw + 1.1rem,2.45rem);color:var(--ink);line-height:1.12}
.legal-copy h3{margin:34px 0 10px;color:var(--ink)}
.legal-copy section>p+p,.legal-copy section>p+ul,.legal-copy section>p+ol,.legal-copy section>ul+p,.legal-copy section>ol+p,.legal-copy section>div+p{margin-top:1.05em}
.legal-copy section>ul,.legal-copy section>ol{display:grid;gap:12px;margin-block:1.1em}
.legal-copy section>ul>li{position:relative;padding-right:30px}
.legal-copy section>ul>li::before{content:'';position:absolute;right:2px;top:.62em;width:14px;height:6px;border-radius:3px;background:var(--mark)}
.legal-copy section>ol{counter-reset:step}
.legal-copy section>ol>li{counter-increment:step;position:relative;padding:16px 62px 16px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}
.legal-copy section>ol>li::before{content:counter(step,decimal-leading-zero);position:absolute;right:18px;top:17px;font:500 13px/1.6 var(--label);letter-spacing:.06em;color:var(--accent)}
.legal-copy .content-note,.section-copy-body .content-note{position:relative;display:block;margin-block:34px;padding:6px 28px 6px 0;border-radius:0;background:none}
.content-note::before{content:'';position:absolute;right:0;top:0;bottom:0;width:6px;border-radius:3px;background:var(--mark)}
.content-note p{font:400 clamp(1.25rem,.9vw + 1rem,1.6rem)/1.4 var(--display);letter-spacing:-.012em;color:var(--ink)}
.content-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.content-links a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none;transition:border-color .25s,color .25s}
.content-links a::after,.related-arrow::after{content:'';flex:none;width:14px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h12M9 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h12M9 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s var(--ease)}
.content-links a:hover{border-color:var(--accent);color:var(--accent)}
.content-links a:hover::after{transform:translateX(-4px)}
.content-table-wrap,.policy-table-wrap{margin-block:28px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff;overflow-x:auto}
.content-table,.policy-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.content-table th,.content-table td,.policy-table th,.policy-table td{padding:14px 18px;text-align:right;vertical-align:top;border-bottom:1px solid var(--line)}
.content-table thead th,.policy-table thead th{font:500 12px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#fafafc}
.content-table tbody tr:last-child>*,.policy-table tbody tr:last-child>*{border-bottom:0}
.content-table td:first-child,.policy-table tbody th{font-weight:600;color:var(--ink)}
.content-table tbody tr{transition:background-color .2s}.content-table tbody tr:hover{background:#fafaff}
.policy-table caption{padding:14px 18px;text-align:right;font-weight:600;color:var(--ink)}
@media (max-width:640px){.content-table-wrap.is-cards{border:0;background:none;overflow:visible}.is-cards .content-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.is-cards .content-table,.is-cards tbody,.is-cards tr,.is-cards td{display:block}.is-cards tr{margin-bottom:12px;padding:6px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}.is-cards .content-table td{padding:10px 0;border-bottom:1px dashed var(--line)}.is-cards .content-table td:last-child{border-bottom:0}.is-cards .content-table td:first-child{font-size:16.5px}.is-cards td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 11.5px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}}
.content-related h2{font-size:clamp(1.4rem,1vw + 1rem,1.8rem);margin-bottom:18px}
.content-related .content-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:0}
.content-related .content-links a{flex:1 1 210px}
.content-related .content-links a{align-items:flex-end;justify-content:space-between;gap:14px;min-height:104px;padding:18px;border-color:var(--line);border-radius:var(--r-m);font-size:16px;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s,color .25s}
.content-related .content-links a:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:transparent}
.content-related .content-links a::after{color:var(--accent);margin-bottom:4px}
.article-help,.help-box{display:grid;gap:12px;justify-items:start;padding:26px;border-radius:var(--r-l);background:var(--accent-wash)}
.article-help>div{display:flex;align-items:center;gap:10px}
.legal-copy .article-help h2,.help-box h2{font:700 1.25rem/1.25 var(--sans);letter-spacing:-.01em;margin:0}
.article-help p,.help-box p{font-size:16px}
@media (max-width:900px){.article-layout,.content-extra.has-rail{grid-template-columns:1fr}.page-outline{position:static;max-height:none;padding:6px 1px 6px 0}}

/* Reading progress (guides) */
.read-progress{position:fixed;inset:0 0 auto;z-index:70;height:3px;pointer-events:none;display:none}
.read-progress span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:right}
.has-progress .read-progress{display:block}

/* Inner pages */
.page-hero{position:relative;border-bottom:1px solid var(--line);background:#f4f3ee;padding:clamp(40px,6vw,84px) 0 clamp(40px,5vw,72px)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.page-hero-copy{display:grid;gap:22px;justify-items:start}
.page-hero h1{font-size:clamp(2.05rem,2.6vw + 1rem,3.4rem)}
.page-hero .lead,.page-hero-copy>h1+p{max-width:62ch;color:var(--ink-2);font-size:var(--lead);line-height:1.55}
.page-hero.is-narrow .page-hero-grid{grid-template-columns:minmax(0,860px)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font:400 13px/1.3 var(--label);letter-spacing:.03em;color:var(--muted)}
.breadcrumb a{text-decoration:none}.breadcrumb a:hover{color:var(--accent)}
.document-date{font:400 13px/1.3 var(--label);letter-spacing:.03em;color:var(--muted)}
.action-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.limit-strip{display:flex;flex-wrap:wrap;gap:10px}
.limit-strip>span{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);font-size:14px;color:var(--ink-2)}
.limit-strip .icon{width:16px;height:16px;color:var(--accent)}.limit-strip a{text-decoration:none}.limit-strip a:hover{color:var(--accent)}
.tool-stage{padding-bottom:clamp(48px,6vw,90px)}
.tool-stage-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,3vw,40px);align-items:start}
.feature-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-block:clamp(40px,6vw,90px)}
.feature-row{display:grid;align-content:start;gap:14px;padding:clamp(22px,2.4vw,34px);border:1px solid var(--line);border-radius:var(--r-l);background:#fff;transition:transform .5s var(--ease),box-shadow .5s}
.feature-row:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.feature-row>span{font:500 12.5px/1 var(--label);letter-spacing:.1em;color:var(--accent)}
.feature-row h2{font:700 clamp(1.2rem,.6vw + 1rem,1.45rem)/1.22 var(--sans);letter-spacing:-.015em}
.feature-row p{color:var(--ink-2);font-size:16px;line-height:1.6}
.band{position:relative;isolation:isolate;margin-block:clamp(40px,6vw,90px);padding:clamp(36px,5vw,72px);border-radius:var(--r-l);background:var(--navy);color:#fff;overflow:hidden}
.band h2{font-size:clamp(1.8rem,2.2vw + 1rem,2.9rem);max-width:18ch}
.band p{margin-top:14px;max-width:52ch;color:#c5c9e4}
.band-inner{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.band .btn-primary{background:#fff;color:var(--ink)}.band .btn-primary:hover{background:var(--mark)}

.cards-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.topic-card{display:grid;align-content:start;gap:10px;min-height:190px;padding:24px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s,border-color .3s}
.topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:transparent}
.topic-card .icon{width:26px;height:26px;margin-bottom:auto;color:var(--accent)}
.topic-card h2{font:700 1.2rem/1.25 var(--sans);letter-spacing:-.01em}
.topic-card p{font-size:15px;color:var(--ink-2);line-height:1.5}
.simple-copy{max-width:72ch;display:grid;gap:clamp(34px,4vw,56px)}
.simple-copy section{display:grid;gap:12px}
.simple-copy h2{font:700 clamp(1.25rem,.7vw + 1rem,1.55rem)/1.22 var(--sans);letter-spacing:-.015em}
.simple-copy p{color:var(--ink-2);line-height:1.7}
.policy-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.policy-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;text-decoration:none;transition:border-color .25s,color .25s}
.policy-links a:hover{border-color:var(--accent);color:var(--accent)}
.operator-box{padding:26px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.policy-contacts{display:grid;gap:10px;margin-top:14px}.policy-contacts div{display:flex;flex-wrap:wrap;gap:6px 14px}.policy-contacts dt{color:var(--muted)}
.policy-anchor{position:absolute;margin-top:-100px}
.policy-note{font-size:14.5px;color:var(--muted)}
.notice-inline{display:flex;gap:12px;padding:18px 20px;border-radius:var(--r-m);background:var(--sand-wash)}

/* Plans */
.billing-period{display:inline-flex;gap:4px;margin:0;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
.billing-period label{position:relative;cursor:pointer}
.billing-period input{position:absolute;opacity:0;inset:0}
.billing-period span{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;font-weight:600;font-size:15px;color:var(--muted);transition:background-color .3s,color .3s}
.billing-period input:checked+span{background:var(--ink);color:#fff}
.billing-period input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;gap:20px;padding:26px 24px 28px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;transition:transform .5s var(--ease),box-shadow .5s}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.price-card.featured{background:var(--navy);color:#fff;border-color:var(--navy)}
.plan-tag{position:absolute;top:-13px;right:22px;padding:5px 12px;border-radius:999px;background:var(--mark);color:var(--ink);font:500 11.5px/1.2 var(--label);letter-spacing:.07em;text-transform:uppercase}
.plan-name{font:500 13px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.featured .plan-name{color:#aab4ff}
.price-card h2{margin-top:14px;font:400 clamp(2.4rem,2vw + 1.4rem,3.2rem)/1 var(--display);font-variant-numeric:tabular-nums}
.price-card h2 small{font:400 15px/1 var(--sans);letter-spacing:0;color:var(--muted)}
.featured h2 small,.featured .annual-total{color:#b9bedb}
.annual-total{margin-top:8px;font-size:13.5px;color:var(--muted)}
.price-card>div>p:last-child{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-2);min-height:3em}
.featured>div>p:last-child{color:#d4d7ee}
.price-card ul{display:grid;gap:11px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45}
.featured ul{border-color:rgba(255,255,255,.16)}
.price-card li{position:relative;padding-right:24px}
.price-card li::before{content:'';position:absolute;right:0;top:.5em;width:12px;height:5px;border-radius:3px;background:var(--mark)}
.price-card li small{color:var(--muted);font-size:13px}.featured li small{color:#b9bedb}
.featured .btn-primary{background:#fff;color:var(--ink)}.featured .btn-primary:hover{background:var(--mark)}
.plan-checkout{display:grid;gap:12px}
.check-row{display:flex;gap:10px;font-size:13.5px;line-height:1.45}
.check-row input{margin-top:3px;accent-color:var(--accent)}
.pricing-note{max-width:80ch;margin-top:18px;font-size:14.5px;color:var(--muted)}
.pricing-note a{color:var(--ink)}
.included{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);margin-top:clamp(56px,7vw,110px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line-strong)}
.included h2{font-size:clamp(1.7rem,1.8vw + 1rem,2.6rem);margin-top:14px}
.included-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.included-list p{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff;font-weight:600;font-size:15.5px}
.included-list p::before{content:'';flex:none;width:14px;height:6px;border-radius:3px;background:var(--mark)}
.small-print{max-width:86ch;margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.page-faq{max-width:900px;margin-top:clamp(56px,7vw,100px)}

/* How it works */
.how-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
.how-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:none;font-weight:600;font-size:15.5px;color:var(--muted);transition:background-color .3s,color .3s}
.how-tabs [aria-selected=true]{background:var(--ink);color:#fff}
.how-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:start;margin-top:28px}
.how-steps{display:grid;gap:14px;counter-reset:how}
.how-steps li:not(.how-start){display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.how-steps li>span{font:400 2rem/1 var(--display);color:var(--accent);min-width:1.4ch}
.how-steps h2{font:700 1.2rem/1.25 var(--sans);letter-spacing:-.01em;margin-bottom:6px}
.how-steps p{color:var(--ink-2);font-size:16px}
.how-visual{position:sticky;top:calc(var(--header) + 24px)}
.facts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);padding-block:clamp(56px,7vw,110px)}
.facts h2{font-size:clamp(1.7rem,1.8vw + 1rem,2.6rem);margin:14px 0}
.facts>div>p{color:var(--ink-2)}
.facts dl{display:grid;gap:12px}
.facts dl div{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}
.facts dt{font:500 12px/1.3 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.facts dd{color:var(--ink-2);font-size:15.5px;line-height:1.6}
.language-coverage{padding-block:clamp(40px,5vw,80px)}
.language-heading{display:grid;gap:14px;margin-bottom:26px}.language-heading h2{font-size:clamp(1.7rem,1.8vw + 1rem,2.6rem);margin-top:12px}
.language-heading>p{color:var(--ink-2)}
.language-tables{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.language-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-m);background:#fff;font-size:15px;overflow:hidden}
.language-table th,.language-table td{padding:11px 16px;text-align:right;border-bottom:1px solid var(--line)}
.language-table tr:last-child>*{border-bottom:0}
.language-table thead th{font:500 12px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#fafafc}
.language-table tbody th{font-weight:600}.language-table tbody th bdi{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.language-status{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}
.language-status.is-available{color:var(--mint)}.language-status .icon{width:15px;height:15px}
.language-footnote{display:flex;gap:10px;margin-top:16px;font-size:14.5px;color:var(--muted)}.language-footnote .icon{width:17px;height:17px;margin-top:2px}
.signal-note{display:grid;gap:16px;justify-items:start;margin-block:clamp(40px,6vw,90px);padding:clamp(28px,4vw,56px);border-radius:var(--r-l);background:var(--mark-soft)}
.signal-note>div{display:flex;align-items:center;gap:12px}.signal-note h2{font-size:clamp(1.6rem,1.6vw + 1rem,2.3rem)}
.signal-note p{max-width:70ch;color:var(--ink-2)}

/* Desktop page */
.platform-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px}
.platform-row>div{display:grid;gap:4px;padding:20px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}
.platform-glyph{font-size:22px}.platform-row small{color:var(--muted)}
.field-hint{font-size:14.5px;color:var(--muted);max-width:60ch}
.device{position:relative}.device .place{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(18,23,46,.14))}

/* Contact and simple forms */
.contact-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start;padding-bottom:var(--section)}
.contact-layout aside{display:grid;gap:14px;justify-items:start}
.contact-layout aside h2{font:700 1.3rem/1.25 var(--sans)}.contact-layout aside p{color:var(--ink-2)}
.contact-form{padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow-s)}
.contact-form form{display:grid;gap:8px}
.contact-form label{margin-top:10px;font-weight:600;font-size:14.5px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s}
.contact-form :is(input,select,textarea):focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.contact-form button{justify-self:start;margin-top:14px}
.contact-form h2{font:700 1.4rem/1.2 var(--sans);margin-bottom:8px}
.form-error{padding:12px 14px;border-radius:12px;background:#fff0ea;color:#8a3b12}
.support-reference{display:inline-block;margin:10px 0;padding:8px 14px;border-radius:10px;background:var(--accent-wash);font:500 16px/1.3 var(--label);letter-spacing:.05em}
.flow-symbol{display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border-radius:50%;background:var(--mint-wash);color:var(--mint)}

/* Footer */
.site-footer{margin-top:var(--section);padding:clamp(48px,6vw,84px) 0 28px;border-top:1px solid var(--line);background:#f5f4ef}
.page-home .site-footer{margin-top:0}
.footer-top{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.footer-brand{display:grid;align-content:start;gap:18px}
.footer-brand p{font:400 1.45rem/1.25 var(--display);letter-spacing:-.01em}

.footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.footer-links>div{display:grid;align-content:start;gap:10px}
.footer-links span{margin-bottom:6px;font:500 12px/1.3 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.footer-links a{font-size:14.5px;line-height:1.4;color:var(--ink-2);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(40px,5vw,72px);padding-top:22px;border-top:1px solid var(--line-strong);font-size:13.5px;color:var(--muted)}
@media (max-width:1020px){.footer-top{grid-template-columns:1fr}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}.page-hero-grid,.tool-stage-grid,.how-panel,.facts,.included,.contact-layout{grid-template-columns:1fr}.feature-rows{grid-template-columns:1fr}.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}.how-visual{position:static}.language-tables{grid-template-columns:1fr}}
@media (max-width:640px){body{font-size:16.5px}.pricing-grid,.cards-4,.included-list{grid-template-columns:1fr}.scene-note{display:none}.scene-body{padding:18px 18px 6px;height:calc(1.62em * 11 + 24px)}.scene-foot{padding:12px 18px 16px}.scene-status{display:none}.draft-panel{padding-inline:16px}.desk-bottom{padding-inline:16px}.desk-bottom .btn{width:100%}.desk-topbar{flex-wrap:nowrap;gap:8px}.desk-tabs{flex:1;min-width:0}.desk-tab{flex:1 1 auto;min-width:0;justify-content:center;padding:4px 10px;text-align:center;line-height:1.15}.faq details>p{padding-left:8px}.brand-logo{width:112px}.price-card>div>p:last-child{min-height:0}}

/* Motion helpers. The classes are set by core.js only when motion is allowed. */
.split-line-inner-mask{padding-bottom:.16em;margin-bottom:-.16em}

.is-disabled{opacity:.35;pointer-events:none}
.swiper-notification{position:absolute;right:0;top:0;opacity:0;pointer-events:none;z-index:-1000}
@media (prefers-reduced-motion:no-preference){
  .page-hero-copy>*,.hero-copy>*{animation:rise .9s var(--ease) both}
  .page-hero-copy>:nth-child(2),.hero-copy>:nth-child(2){animation-delay:.07s}.page-hero-copy>:nth-child(3),.hero-copy>:nth-child(3){animation-delay:.14s}.page-hero-copy>:nth-child(4),.hero-copy>:nth-child(4){animation-delay:.21s}.page-hero-copy>:nth-child(n+5),.hero-copy>:nth-child(n+5){animation-delay:.28s}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.tool-stage-copy{display:grid;gap:14px;padding-top:10px}
.tool-stage-copy h2{font-size:clamp(1.6rem,1.6vw + 1rem,2.4rem)}
.tool-stage-copy p{color:var(--ink-2);font-size:16px}
.tool-intro{padding-top:14px;border-top:1px solid var(--line)}
.how-visual-caption{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;color:var(--ink-2)}
.how-visual-caption .icon{color:var(--accent)}
.how-figure .specimen{box-shadow:var(--shadow-m)}
.page-hero-scene{min-width:0}
.how-visual img{width:100%;border-radius:var(--r-l);box-shadow:var(--shadow-m)}
.product-bottom{padding-bottom:0}
.legal-copy>section[data-reveal]>p{white-space:normal}
.draft-notice .icon{flex:none;margin-top:3px}

/* Plans: three paid cards, the Free plan as a quieter strip under them */
.free-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 28px;margin-top:14px;padding:18px 24px;border:1px solid var(--line);border-radius:var(--r-l);background:#f4f3ee}
.free-strip>div{display:flex;align-items:baseline;gap:14px}
.free-strip strong{font:400 1.7rem/1 var(--display)}
.free-strip p{color:var(--ink-2);font-size:15px;line-height:1.5}
@media (max-width:1020px){.pricing-grid{grid-template-columns:1fr}.price-card>div>p:last-child{min-height:0}}
@media (max-width:760px){.free-strip{grid-template-columns:1fr;justify-items:start}}
/* Pictures: product screenshots in a plain browser frame, photographs */
.browser-frame{display:block;border:1px solid var(--line-strong);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--shadow-m)}
.frame-bar{display:flex;gap:6px;align-items:center;height:30px;padding:0 12px;border-bottom:1px solid var(--line);background:#f4f3ee}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:#d5d6de}
.browser-frame img{width:100%;height:auto}
.shot-band{padding-bottom:clamp(40px,6vw,90px)}
.shot-band figcaption{margin-top:12px;font:400 12.5px/1.4 var(--label);letter-spacing:.03em;color:var(--muted);text-align:left}
.shot-band .photo{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-l)}
.page-hero.has-photo .page-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.guide-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l)}
/* The app page */
.app-hero{align-items:start}
.app-points{display:grid;gap:10px;color:var(--ink-2)}
.app-points li{position:relative;padding-right:28px}
.app-points li::before{content:'';position:absolute;right:2px;top:.62em;width:14px;height:6px;border-radius:3px;background:var(--mark)}
.app-side{display:grid;gap:18px;min-width:0}
.app-demo{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:#eceae3;box-shadow:var(--shadow-m)}
.app-demo img,.app-demo video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.download-block{display:grid;gap:14px;justify-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.download-block .button{min-height:54px;padding:0 28px;font-size:16.5px}
.download-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.platform-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:14px}
.platform-chip small{color:var(--mint)}
/* Textumi for Chrome (templates/v2/chrome.html): three screenshots under the hero, and a link inside a dark band */
.chrome-shots{padding-top:clamp(48px,6vw,96px)}
.chrome-shots h2{font-size:clamp(1.8rem,2.2vw + 1rem,2.6rem);max-width:22ch}
.chrome-shot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(24px,3vw,40px)}
.chrome-shot{display:grid;align-content:start;gap:16px;margin:0}
.chrome-shot-frame{display:block;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:#eceae3}
.chrome-shot-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.chrome-shot figcaption p{margin-top:8px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.band .link-arrow{color:#fff}
@media (max-width:1020px){.chrome-shot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.chrome-shot-grid{grid-template-columns:1fr}}
@media (max-width:1020px){.page-hero.has-photo .page-hero-grid{grid-template-columns:1fr}.guide-photo{aspect-ratio:16/9;max-height:320px}}

/* Button hover: the label rolls letter by letter, as on the first design (static/button-motion.js), with a flat
   change of fill. core.js wraps the label while the pointer or the keyboard focus is on the button. */
textumi-rhythm{position:relative;display:inline-block;vertical-align:bottom;white-space:pre;color:transparent}
textumi-rhythm-letters{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--rhythm-ink);pointer-events:none}
textumi-rhythm-glyph{position:relative;display:block;white-space:pre;line-height:inherit}
textumi-rhythm-glyph::before,textumi-rhythm-glyph::after{content:attr(data-letter);display:block;transition:transform .42s cubic-bezier(.22,.8,.25,1);transition-delay:var(--rhythm-delay)}
textumi-rhythm-glyph::after{position:absolute;inset:0;transform:translateY(115%)}
textumi-rhythm.is-running textumi-rhythm-glyph::before{transform:translateY(-115%)}
textumi-rhythm.is-running textumi-rhythm-glyph::after{transform:translateY(0)}
.btn .icon,.button .icon{transition:transform .42s cubic-bezier(.22,.8,.25,1)}
.btn:focus-visible .arrow,.button:hover .arrow{transform:translateX(-4px)}
.btn[aria-disabled=true],.button[aria-disabled=true],.btn:disabled,.button:disabled{pointer-events:none}
@media (prefers-reduced-motion:reduce){textumi-rhythm{color:var(--rhythm-ink)}textumi-rhythm-letters{display:none}}

/* Sign-in, sign-up and the pages of the same flow. The forms are the first design's, unchanged. */
.auth-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(28px,6vw,96px);align-items:start;width:min(100%,1288px);margin-inline:auto;padding:clamp(28px,5vw,72px) var(--gap) 0}
.auth-copy{display:grid;gap:18px;justify-items:start;align-content:start}
.auth-copy h1{font-size:clamp(2rem,2.4vw + 1rem,3.2rem)}
.auth-copy>p{max-width:46ch;color:var(--ink-2);font-size:var(--lead);line-height:1.55}
.auth-points{display:grid;gap:10px;max-width:46ch;color:var(--ink-2);font-size:16px;line-height:1.45}
.auth-points li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.auth-points .icon{width:17px;height:17px;margin-top:3px;color:var(--mint)}
.auth-art{width:100%;height:auto;aspect-ratio:16/10;margin-top:8px;border:1px solid var(--line);border-radius:var(--r-l)}
.auth-panel{display:grid;gap:14px;padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow-m)}
.auth-panel h2{font:400 clamp(1.6rem,1vw + 1.2rem,2rem)/1.15 var(--display);letter-spacing:-.015em}
.auth-panel>p{color:var(--ink-2);font-size:16px}
.auth-panel form{display:grid;gap:8px}
.auth-panel label:not(.check-row){margin-top:10px;font-weight:600;font-size:14.5px}
.auth-panel input:not([type=checkbox]):not([type=hidden]),.auth-panel textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;font-size:16.5px;transition:border-color .2s,box-shadow .2s}
.auth-panel input:not([type=checkbox]):focus,.auth-panel textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.auth-panel form>.button,.auth-panel>.button{margin-top:14px;min-height:52px}
.button-full{width:100%}
.auth-panel .check-row{margin-top:10px;font-size:14px;color:var(--ink-2)}
.auth-panel .check-row input{width:18px;height:18px;flex:none}
.auth-panel .check-row a,.forgot-link{color:var(--ink);text-underline-offset:.2em}
.forgot-link{justify-self:end;font-size:14.5px}
.auth-legal{margin:14px 0 18px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.auth-legal a{color:var(--ink);text-underline-offset:.2em}
.auth-foot{padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.auth-divider{display:flex;align-items:center;gap:14px;font:500 12px/1 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.google-button span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font-weight:700;font-size:13px}
.form-success,.flash-message{padding:12px 14px;border-radius:12px;background:var(--mint-wash);color:#14553a;font-size:15px}
.form-error{padding:12px 14px;border-radius:12px;background:#fff0ea;color:#8a3b12;font-size:15px}
.auth-panel .notice-inline{align-items:flex-start;font-size:15px}.auth-panel .notice-inline .icon{flex:none;margin-top:2px}
.back-link{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:14.5px;color:var(--ink-2);text-decoration:none}.back-link:hover{color:var(--accent)}
.invite-address{font:500 15px/1.3 var(--label);color:var(--ink)}
.field-help{font-size:14px;color:var(--muted)}.optional{font-weight:400;color:var(--muted)}
.auth-panel .field-hint{font-size:14px}
.auth-panel .action-row{margin-top:6px}
@media (prefers-reduced-motion:no-preference){.auth-panel{animation:rise .8s var(--ease) both}.auth-copy>:not(img){animation:rise .9s var(--ease) both}.auth-copy>:nth-child(2){animation-delay:.06s}.auth-copy>:nth-child(n+3):not(img){animation-delay:.12s}}
@media (max-width:900px){.auth-page{grid-template-columns:1fr}.auth-panel{order:-1}}

/* No word alone on a last line: headings and short leads are balanced, running text avoids a lonely last word.
   Where a browser has no `text-wrap: pretty`, core.js ties the last two words of a block together. */
h3,h4,summary,figcaption,.lead,.hero-lead,.section-head>p,.page-hero-copy>h1+p,.auth-copy>p,.cta-inner>p,.band p,.desk-head p,.tool-stage-copy p,.pull-note p,.content-note p,.btn,.button,.link-arrow,.kicker,.plan-chip small,.free-strip p{text-wrap:balance}
p,li,dd,dt,small,td,th,blockquote{text-wrap:pretty}
.auth-copy>p,.hero-lead,.lead,.section-head>p,.page-hero-copy>h1+p,.cta-inner>p{text-wrap:balance}

/* The form of a sign-in page stays in view while the side column scrolls past it (not on a phone, and not where the
   screen is too short for the card: there it is ordinary flow, so the button is always within reach). */
@media (min-width:901px){
  /* With scripts core.js measures the card: a card that fits is pinned by its top under the header; a taller one
     scrolls with the page until its bottom reaches the bottom of the screen and is pinned there. No inner scrollbar. */
  .js .auth-panel{position:sticky;align-self:start;top:min(clamp(88px,12vh,140px),calc(100vh - var(--card,0px) - 24px))}
  .auth-copy{padding-bottom:clamp(24px,5vh,72px)}
}
@media (min-width:901px) and (min-height:760px){html:not(.js) .auth-panel{position:sticky;align-self:start;top:clamp(88px,12vh,140px)}}
/* One line at a time: core.js turns the list into a calm rotating line. Without scripts or with reduced motion it
   stays a plain list. */
.auth-points.is-rotating{position:relative;display:block;width:100%}
.auth-points.is-rotating li{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.auth-points.is-rotating li.is-on{opacity:1;transform:none;pointer-events:auto}
.auth-points.is-rotating li.is-out{opacity:0;transform:translateY(-8px)}

/* Footer guides: five links and an arrow that opens the rest (all of them are in the page; core.js folds the list). */
.footer-more{display:grid;gap:10px;overflow:hidden}
.footer-more.is-folded{height:0}
.footer-toggle{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:2px;padding:6px 0;border:0;background:none;font-weight:600;font-size:14.5px;color:var(--ink)}
.footer-toggle:hover{color:var(--accent)}
.footer-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}
.footer-brand{gap:14px}.footer-brand p{max-width:16ch}

/* A sign-in page is a column as tall as the screen: header, the block, a one-line footer. The block stands in the
   middle of what is left, with the same space above and below, and the page does not scroll where the form fits.
   Beside a tall form the side column has a photograph and is exactly as tall as the form card: the column is
   size-contained, so it never sets the height of the row, and the photograph takes the room that is left. Nothing
   here is measured by a script, and nothing depends on a height the photograph itself changes. */
.page-auth{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.page-auth>main{flex:1 0 auto}
.page-auth .site-footer{margin-top:0;padding:0;border-top:0;background:none}
.page-auth .footer-top{display:none}
.page-auth .footer-bottom{margin-top:0;padding-block:16px 18px}
.auth-page{padding-block:calc(clamp(24px,6vh,72px) + clamp(32px,5vh,64px)) clamp(12px,2vh,40px);align-items:stretch;align-content:center}
.auth-art{width:100%;height:auto;aspect-ratio:16/10;margin-top:8px;border:0;border-radius:var(--r-l);object-fit:cover}
@media (min-width:901px){
  .auth-copy{align-self:center;padding-bottom:0}
  .auth-copy.has-photo{display:flex;flex-direction:column;align-self:stretch;contain:size;overflow:hidden}
  .auth-copy.has-photo>*{flex:none}
  /* The photograph takes the rest of the column, so the column ends level with the form card however tall the
     form is (the Google and Apple buttons made it taller); cover keeps its proportions. */
  .auth-copy.has-photo .auth-art{flex:1 1 0;min-height:0;aspect-ratio:auto;margin-top:14px;object-position:50% 45%}
}
/* A screen of laptop height: the card a little tighter, so the sign-in form with its two provider buttons fits. */
@media (min-width:901px) and (max-height:920px){.auth-panel{padding-block:30px}}
@media (min-width:901px) and (max-height:760px){.auth-page{padding-block:clamp(32px,5vh,64px) 8px}.page-auth .footer-bottom{padding-block:6px 8px}.auth-panel{padding-block:22px}}
/* A phone: the form card starts right under the header (owner, 2026-10-24). */
@media (max-width:900px){.auth-page{padding-block:12px 24px;align-content:start}}

/* A lead that arrives word by word (core.js). Its words are pieces that keep their place in the line. Until the
   script takes over, the lead waits unseen for a moment so it is not shown twice; without scripts it simply appears. */
.lead-word{display:inline-block;vertical-align:baseline}
@media (prefers-reduced-motion:no-preference){.page-hero-copy>[data-words],.hero-copy>[data-words]{animation:lead-wait .9s both}@keyframes lead-wait{0%,99%{opacity:0}100%{opacity:1}}}
[data-words]{text-wrap:wrap!important}

/* The choice about analytics: a quiet card at the bottom of the screen, over the page, two equal buttons. */
.consent{position:fixed;z-index:80;right:50%;bottom:16px;transform:translateX(50%);display:flex;align-items:center;gap:18px 28px;width:min(calc(100% - 32px),860px);padding:18px 22px;border:1px solid var(--line-strong);border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow-m)}
.consent-copy{display:grid;gap:4px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.consent-copy strong{font-size:15.5px;color:var(--ink)}
.consent-copy a{color:var(--ink)}
.consent-actions{display:flex;gap:10px;flex:none}
.consent-actions .btn{min-width:150px}
.footer-consent{padding:0;border:0;background:none;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:.2em}
.footer-consent:hover{color:var(--accent)}
@media (max-width:760px){.consent{flex-direction:column;align-items:stretch;bottom:10px;padding:16px}.consent-actions{display:grid;grid-template-columns:1fr 1fr}.consent-actions .btn{min-width:0;padding-inline:10px}}

/* Long words of other languages: a heading may break inside a word rather than push the page wide. */
h1,h2,h3,summary,.btn,.button,.link-arrow{overflow-wrap:break-word}
@media (max-width:640px){h1,h2,h3{hyphens:auto}.btn,.button{white-space:normal;text-align:center;padding-block:10px}.how-tabs{display:flex;max-width:100%}.how-tabs button{flex:1;min-width:0;padding-inline:12px}.language-table th,.language-table td{padding-inline:10px}.language-table{font-size:14px}}
.legal-copy,.simple-copy,.facts dl,.how-steps li>div{min-width:0}

/* Long copy with air: a measure of about 66 characters, open leading, clear space between paragraphs and sections;
   the first paragraph of a section is its lead. */
.legal-copy{max-width:66ch;line-height:1.78}
.legal-copy>*+*{margin-top:clamp(64px,7vw,104px)}
.legal-copy section>p+p,.legal-copy section>p+ul,.legal-copy section>p+ol,.legal-copy section>ul+p,.legal-copy section>ol+p,.legal-copy section>div+p{margin-top:1.25em}
.legal-copy section>h2+p{color:var(--ink);font-size:1.07em}
.legal-copy h3{margin:42px 0 12px}
.legal-copy section>ul,.legal-copy section>ol{gap:14px;margin-block:1.4em}
.faq details>p:not(:last-child){padding-bottom:12px}
.content-extra,.article-layout{padding-block:clamp(64px,8vw,128px)}
.page-hero-copy>h1+p+p{max-width:62ch;margin-top:-8px;color:var(--ink-2);font-size:var(--lead);line-height:1.55;text-wrap:balance}
.content-note p+p{margin-top:.7em}

/* A row of cards that sits on the lower edge of the hero: the hero's surface and its bottom line run on behind the
   upper half of the row, so the line passes through the middle of the cards at any height of theirs. Where the
   cards stand in two rows the line keeps to the first one; where they are stacked it is a fixed step. */
.page-hero.hero-rider{border-bottom:0}
.rides-edge{position:relative;z-index:0;margin-top:0}
.rides-edge::before{content:'';position:absolute;z-index:-1;top:0;right:50%;width:100vw;height:50%;transform:translateX(50%);background:#f4f3ee;border-bottom:1px solid var(--line);pointer-events:none}
.rides-edge>*{box-shadow:var(--shadow-s)}
@media (max-width:1020px){.cards-4.rides-edge::before{height:calc(25% - 4px)}.pricing-grid.rides-edge::before{height:44px}}
@media (max-width:640px){.rides-edge::before,.cards-4.rides-edge::before{height:40px}}
.pricing-page .page-hero .billing-period{margin-top:6px}
/* Ordinary content after a hero keeps its distance from the hero's line. */
.tool-stage{padding-top:clamp(56px,6vw,84px)}
.how-demo{padding-top:clamp(56px,6vw,84px)}
.contact-layout{margin-top:clamp(56px,6vw,84px)}

/* How it works: the tool switch sits on the hero's lower line, like the cards of Help and Pricing. */
.how-demo.rides-first{padding-top:0}
.how-tabs-row{display:flex;margin-bottom:clamp(36px,4vw,56px)}
.how-tabs-row.rides-edge::before,.how-tabs-row.rides-edge::before{height:50%}
@media (max-width:640px){.how-tabs-row.rides-edge::before{height:50%}}

/* Header wordmark: on hover the feather writes across the word; behind it the stem of the T closes and the whole word,
   T included, is marked green as a humanized passage is; the feather turns round on the last letters while it is still moving, so it never stops before turning (owner 29.10.2026). */
.site-header .brand-logo{overflow:visible}
.logo-mark{fill:var(--done);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);opacity:0}
.logo-stem{opacity:0}
.logo-pen,.logo-turn{transform-box:view-box}
.logo-turn{transform-origin:34.5px 44.4px}
.site-header .brand:hover .logo-mark,.site-header .brand:focus-visible .logo-mark{transform:scaleX(1);opacity:1}
.site-header .brand:hover .logo-stem,.site-header .brand:focus-visible .logo-stem{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .logo-mark{transition:transform .75s cubic-bezier(.65,0,.35,1),opacity .2s}
  .logo-stem{transition:opacity .2s .85s}   /* on the way back the stem stays until the feather has returned */
  .logo-pen{transition:transform .75s cubic-bezier(.65,0,.35,1) .1s}
  .logo-turn{transition:transform .4s cubic-bezier(.45,0,.55,1) .1s}   /* on the way back it turns round as it sets off */
  .site-header .brand:hover .logo-stem,.site-header .brand:focus-visible .logo-stem{transition-delay:.12s}
  .site-header .brand:hover .logo-pen,.site-header .brand:focus-visible .logo-pen{transform:translateX(-132px);transition-delay:0s}
  .site-header .brand:hover .logo-turn,.site-header .brand:focus-visible .logo-turn{transform:scaleX(-1);transition-delay:.34s}
}

/* One rhythm between consecutive blocks on the same background, with no divider or colour change between them
   (owner, 14.10.2026): the bottom padding of one and the top padding of the next no longer add up to an empty band.
   Blocks that change background or carry a line keep their own padding. */
:root{--rhythm:clamp(56px,7vw,96px)}
.tool-stage{padding-bottom:var(--rhythm)}
.tool-stage+.feature-rows{padding-top:0}
.feature-rows,.shot-band{padding-bottom:var(--rhythm)}
:is(.tool-stage,.feature-rows,.shot-band,.wrap)+.content-extra{padding-top:var(--rhythm)}
.content-extra:has(+ :is(.product-bottom,.wrap)){padding-bottom:0}
.shot-band:has(+ .content-extra){padding-bottom:0}
:is(.content-extra,.language-coverage)+:is(.product-bottom,.wrap)>:first-child{margin-top:var(--rhythm)}
.facts{padding-block:var(--rhythm)}
.facts+.language-coverage{padding-top:0}
.language-coverage:has(+ .wrap){padding-bottom:0}
/* The footer has its own line and colour: the last block's padding is the distance to it. */
.site-footer{margin-top:0}
main>:last-child>:is(.band,.signal-note):last-child{margin-bottom:var(--rhythm)}
.contact-layout{padding-bottom:var(--rhythm)}
/* The footer's guide columns (Guides, Use cases, Comparisons) beside the site links: three to a row. */
@media (min-width:1021px){.footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A content file's {"tool": "detector"} block: the entry to the detector inside a guide, a card with one action. */
.legal-copy .content-tool{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-block:34px;padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--accent-wash)}
.content-tool>div{flex:1 1 300px;min-width:0}
.legal-copy .content-tool p{margin:0}
.legal-copy .content-tool .content-tool-title{margin-bottom:6px;font:400 clamp(1.3rem,.8vw + 1.05rem,1.6rem)/1.25 var(--display);letter-spacing:-.012em;color:var(--ink)}
.content-tool .btn{flex:none}
@media (max-width:640px){.content-tool .btn{width:100%}}
/* A {"sources": [...]} block: outside addresses a page relies on, small and after the text they support. */
.legal-copy .content-sources{margin-block:28px;padding-top:16px;border-top:1px solid var(--line)}
.legal-copy .content-sources-title{margin:0 0 8px;font:500 12px/1.3 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.legal-copy .content-sources ul{margin:0;padding-right:1.1em}
.legal-copy section>.content-sources>ul>li{padding-right:0}
.legal-copy section>.content-sources>ul>li::before{content:none}
.content-sources li{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.content-sources a{color:var(--ink-2);text-underline-offset:.2em}
.content-sources a:hover{color:var(--accent)}
/* Scripts the site's fonts do not draw (2026-10-22): the reader's system fonts for Arabic, Devanagari and Hangul. */
html:lang(ar){--display:'Tx Display','Geeza Pro','Noto Naskh Arabic','Segoe UI',Tahoma,serif;--sans:'Tx Sans','SF Arabic','Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;--label:var(--sans)}
html:lang(hi){--display:'Tx Display','Kohinoor Devanagari','Noto Serif Devanagari','Nirmala UI',serif;--sans:'Tx Sans','Kohinoor Devanagari','Noto Sans Devanagari','Nirmala UI',sans-serif;--label:var(--sans)}
html:lang(ko){--display:'Tx Display','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;--sans:'Tx Sans','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;--label:var(--sans)}
/* Hebrew (2026-10-28): the reader's system sans for both headings and text; the display serif has no Hebrew letters. */
html:lang(he){--display:'Tx Display',system-ui,-apple-system,'Arial Hebrew','Noto Sans Hebrew','Segoe UI',Arial,sans-serif;--sans:'Tx Sans',system-ui,-apple-system,'Arial Hebrew','Noto Sans Hebrew','Segoe UI',Arial,sans-serif;--label:var(--sans)}
html:lang(he) h1,html:lang(he) h2{letter-spacing:0}
html:lang(ar) body,html:lang(hi) body{line-height:1.75}
[dir=rtl] textarea,[dir=rtl] [contenteditable=true],[dir=rtl] .text-sheet{unicode-bidi:plaintext;text-align:start}
/* Korean breaks lines between words, not inside them. */
html:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:600px){.language-options{position:fixed;right:16px;left:16px;top:72px;width:auto;max-height:calc(100vh - 96px)}}
/* A command or a settings file in a setup guide (content block "code"): a dark card, the copy button on its own row
   above the text, the text scrolling sideways when it is longer than the line. */
.content-code{display:flex;flex-direction:column;margin:14px 0 20px;border-radius:12px;background:#12172e;overflow:hidden}
.content-code pre{order:2;margin:0;padding:4px 18px 16px;overflow-x:auto;color:#f3f2ec;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;text-align:right;tab-size:2}
.content-code code{font:inherit;color:inherit;background:none;padding:0}
.content-code-copy{order:1;align-self:flex-end;display:grid;place-items:center;width:36px;height:36px;margin:8px 8px 0;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.08);color:#f3f2ec;cursor:pointer;transition:background .2s,border-color .2s}
/* An icon instead of the word (owner, 29.10.2026); a check for two seconds after copying. */
.content-code-copy .icon{grid-area:1/1;width:18px;height:18px;transition:opacity .2s,transform .2s}
.content-code-copy .copied-icon{opacity:0;transform:scale(.6);color:#9be3b5}
.content-code-copy.is-copied{border-color:rgba(155,227,181,.55)}
.content-code-copy.is-copied .copy-icon{opacity:0;transform:scale(.6)}
.content-code-copy.is-copied .copied-icon{opacity:1;transform:none}
.content-code-copy:hover{background:rgba(255,255,255,.16)}
.content-code-copy:focus-visible{outline:2px solid #ffe27a;outline-offset:2px}

/* --- Controls, everywhere (owner, 2026-10-28). A list's arrow stands 12px inside its right edge with room before the
   words; the browser's own arrow, which some systems draw against the edge, is replaced. --- */
html select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:left 12px center!important;background-size:12px 12px!important;padding-left:36px!important}
html[data-theme=dark] select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a3abb8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")!important}
/* A button in a row of fields: as tall as the field, on its line, in one line of words. */
html .inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
html .inline-form>input:not([type=hidden]),html .inline-form>select,html .inline-form>.button,html .inline-form>button{box-sizing:border-box;height:48px;min-height:0;margin:0 !important}
html .inline-form>input:not([type=hidden]){flex:1 1 220px;min-width:0}
html .inline-form>.button,html .inline-form>button,html :is(input,select)~:is(.button,button.button){flex:none;white-space:nowrap}

/* Message pages (error, checkout link; 2026-10-29): one centred card under the site header. */
.message-page{display:grid;place-items:center;min-height:62vh;padding-block:clamp(40px,7vw,96px)}
.message-card{width:100%;max-width:680px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-s);padding:clamp(28px,5vw,52px);text-align:center}
.message-card h1{font:400 var(--h2)/1.12 var(--display);letter-spacing:-.02em;margin:12px 0 16px;text-wrap:balance}
.message-card p{color:var(--ink-2);font-size:var(--lead);line-height:1.6;max-width:52ch;margin:0 auto 14px}
.message-card .section-kicker{justify-content:center}
.message-card .action-row{justify-content:center;margin-top:24px}
.message-card .error-code{display:block;font:400 clamp(56px,8vw,84px)/1 var(--display);color:var(--accent)}
.page-consent .desktop-consent-page{margin-block:clamp(32px,6vw,80px) clamp(56px,8vw,112px)}

/* Setup guides (/connect-*), owner 29.10.2026: the chat animation in the hero is cropped to its window, so the window is about
   30 % larger than in the first picture; the tiles picture, half its first size, sits in the first section
   with the text running beside it. */
.guide-connect{object-fit:cover;object-position:50% 50%}
.page-hero.has-connect .guide-connect{width:108%;max-width:none;margin-right:-8%}
@media (max-width:1020px){.page-hero.has-connect .guide-connect{width:100%;margin-right:0}}
/* The picture of a setup guide stands under the first section's line, level with "01" (owner, 31.10.2026): the section
   follows it without its gap, and the picture starts at the label (line 1 px + padding 26 px). No frame: a transparent
   picture on the section's own background. */
.connect-demo{float:left;width:min(380px,44%);margin:27px clamp(20px,3vw,36px) 20px 0}
.connect-demo img{display:block;width:100%;height:auto}
.legal-copy>.connect-demo+section{margin-top:0}
@media (max-width:720px){.connect-demo{float:none;width:auto;margin:0 0 8px;padding-top:27px;border-top:1px solid var(--line-strong)}.connect-demo img{width:min(380px,100%);margin:0 auto}.legal-copy>.connect-demo+section{margin-top:0}.legal-copy>.connect-demo+section:not(.faq):not(.operator-box)::before{padding-top:0;border-top:0}}
/* The MCP card: a quiet tag, so that it does not read as a recommendation (owner, 2026-11-02). */
.price-card .plan-tag.plan-tag-note{background:var(--paper);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}

.arrow,.link-arrow svg,.tile-go svg,.icon-forward{scale:-1 1}