/* Generated by scripts/build-writing.py from devi-product.css (light only, website preview 23). Do not edit. */
/* DEVI product pages: Tools, each tool, Feature requests, and Account.
   Calm and flat on purpose: thin borders, one accent, no shadows or blur.
   Loaded after the shared site styles, so these rules refine them. */
:root{--pline:rgba(16,17,22,0.036);--pline2:rgba(16,17,22,0.063);--pfield:rgba(255,255,255,.38);--psurface:#F8F8F9;--prad:12px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.productpage .btn:hover,.dashpage .btn:hover{box-shadow:none;background:#E4E4E7;border-color:#E4E4E7}
.productpage .btn.btnghost:hover,.dashpage .btn.btnghost:hover{background:rgba(16,17,22,0.017);border-color:rgba(16,17,22,0.126)}
.btn.btnsmall{min-height:40px;padding:8px 16px;font-size:15px}
.btn.btnghost{background:transparent;color:var(--t1);border:1px solid var(--pline2)}
.btn.btnghost:hover{background:rgba(16,17,22,0.021);color:var(--t1)}
.muted{color:var(--t3)}

/* Header */
.producthead{border-bottom:1px solid var(--pline)}
.crumbs{margin:0 0 18px;font:500 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;color:var(--t3);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--t2)}
.phead{display:grid;gap:22px;align-items:end}
@media(min-width:900px){.phead{grid-template-columns:minmax(0,1fr) auto}}
.phead h1{margin:0 0 10px}
.pheadcta{display:flex;flex-wrap:wrap;gap:10px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:30px 0 0;border:1px solid var(--pline);border-radius:var(--prad);overflow:hidden}
@media(min-width:720px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts>div{padding:14px 16px;border-right:1px solid var(--pline);border-bottom:1px solid var(--pline);min-width:0}
.facts dt{margin:0 0 4px;font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.facts dd{margin:0;color:var(--t1);font-size:15px;line-height:1.4;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid var(--pline2);border-radius:999px;font:600 12px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;color:var(--t1);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t3)}
.badge.shipped::before{background:var(--ok)}
.badge.progress::before{background:#E0B24A}

/* Body with a side index */
.productgrid{display:grid;gap:28px;padding-top:8px}
@media(min-width:1000px){.productgrid{grid-template-columns:200px minmax(0,1fr);gap:56px}}
.pagenav{display:none}
@media(min-width:1000px){
.pagenav{display:block;position:sticky;top:24px;align-self:start;padding-top:34px}
.pagenav p{margin:0 0 10px;font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.pagenav a{display:block;padding:6px 0 6px 12px;border-left:1px solid var(--pline);color:var(--t2);font-size:14px;line-height:1.35}
.pagenav a:hover{color:var(--t1);text-decoration:none;border-left-color:var(--t2)}
}
.productgrid>article{padding-top:34px;min-width:0}
.psection{padding:0 0 44px;margin:0 0 44px;border-bottom:1px solid var(--pline);scroll-margin-top:16px}
.psection:last-child{border-bottom:0}
.psection>h2{margin:0 0 6px;font-size:22px;line-height:1.25;letter-spacing:-.02em;font-weight:650;color:#0D0D0D}
.psection>.sectionlead{margin:0 0 22px;color:var(--t2);max-width:68ch}
.featuregrid{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media(min-width:720px){.featuregrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.featuregrid li{margin:0;padding:18px;border:1px solid var(--pline);border-radius:var(--prad);background:var(--psurface);max-width:none}
.featuregrid h3{margin:0 0 6px;font-size:16px;font-weight:650;color:#0D0D0D;letter-spacing:-.01em}
.featuregrid p{margin:0;font-size:14.5px;line-height:1.5}
.steps{counter-reset:step;list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.steps{margin-bottom:18px}
.steps+p{margin-top:0}
.steps li{counter-increment:step;position:relative;margin:0;padding:0 0 0 40px;max-width:none}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:26px;height:26px;border:1px solid var(--pline2);border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--t1)}
.spec{width:100%;border-collapse:collapse;display:table;font-size:15px}
.spec th,.spec td{padding:12px 14px;border-bottom:1px solid var(--pline);text-align:left;vertical-align:top}
.spec th{width:34%;color:var(--t2);font-weight:500}
.spec td{color:var(--t1)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.specwrap{border:1px solid var(--pline);border-radius:var(--prad);overflow:hidden}
.release{display:grid;gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--pline)}
.release:first-of-type{padding-top:0}
.release:last-child{border-bottom:0}
@media(min-width:720px){.release{grid-template-columns:140px minmax(0,1fr)}}
.release h3{margin:0;font-size:15px;font-weight:650;color:#0D0D0D}
.release time{display:block;color:var(--t3);font-size:13px}
.release ul{margin:0;padding-left:18px}
.release li{margin:0 0 4px;font-size:15px}
.emptynote{margin:0;padding:18px;border:1px dashed var(--pline2);border-radius:var(--prad);color:var(--t2)}
.verifyfile{padding:18px;border:1px solid var(--pline);border-radius:var(--prad);margin:0 0 12px}
.verifyfile h3{margin:0 0 8px}
.verifyfile p{max-width:none}
.productpage,.productgrid,.productgrid>article,.psection{max-width:100%;min-width:0;overflow-x:clip}
.productgrid>article .tooldownloads{max-width:none;margin:0}
.productpage .outlinebox{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--psurface)}
.productgrid>article .outlinebox{border-color:var(--pline2);border-radius:var(--prad)}

/* Tools index */
.toolgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:900px){.toolgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
article .toolgrid{max-width:none}
.toolgrid .toolentry{display:flex;flex-direction:column;gap:12px;margin:0;padding:22px;border:1px solid var(--pline2);border-radius:var(--prad);background:var(--psurface);max-width:none;color:var(--t2)}
.toolgrid .toolplanned{background:transparent;border-color:var(--pline)}
.toolgrid .toolentry h2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em;color:#0D0D0D}
.toolgrid .toolentry p{margin:0;font-size:15px;line-height:1.5;max-width:none}
.cardtop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cardtop .platform{font-size:13px;color:var(--t3)}
.cardmeta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--pline);font-size:14px}
.toolgrid .cardmeta{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;text-transform:none;letter-spacing:0;color:var(--t2)}
.cardmeta dt{color:var(--t3)}
.cardmeta dd{margin:0;color:var(--t1);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cardaction{margin-top:auto;padding-top:6px}
.toolgrid .btn{margin:0;min-height:44px}
.toolgrid .toollink{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.principles{display:grid;gap:12px;margin:12px 0 0;padding:0;list-style:none}
@media(min-width:720px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.principles li{margin:0;padding:16px 18px;border:1px solid var(--pline);border-radius:var(--prad);max-width:none}
.principles strong{display:block;margin:0 0 4px;color:#0D0D0D}

/* Ratings */
.stars{display:inline-flex;gap:1px;line-height:1;font-size:14px;letter-spacing:0}
.star.on{color:#B1871B}
.star.half{background:linear-gradient(90deg,#E8C468 50%,rgba(16,17,22,0.077) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.star.off{color:rgba(11,11,15,0.32)}
.ratingtext{color:var(--t2);font-size:14px}
.ratingsummary{display:grid;gap:20px;padding:20px;border:1px solid var(--pline);border-radius:var(--prad);margin:0 0 20px}
@media(min-width:720px){.ratingsummary{grid-template-columns:180px minmax(0,1fr);align-items:center}}
.ratingbig{display:flex;flex-direction:column;gap:6px}
.ratingnumber{font-size:40px;line-height:1;font-weight:650;letter-spacing:-.03em;color:#0D0D0D}
.ratingbig .stars{font-size:18px}
.ratingbars{display:grid;gap:6px}
.barrow{display:grid;grid-template-columns:34px minmax(0,1fr) 36px;gap:10px;align-items:center;font-size:13px;color:var(--t2)}
.bartrack{height:6px;border-radius:3px;background:rgba(16,17,22,0.028);overflow:hidden}
.barfill{display:block;height:100%;background:#E8C468;border-radius:3px}
.barcount{text-align:right}

/* Posts */
.gatecard{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid var(--pline);border-radius:var(--prad);margin:0 0 20px}
.gatecard p{margin:0;max-width:60ch}
.postform{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--pline2);border-radius:var(--prad);margin:0 0 24px}
.postform.compact{padding:14px;margin:10px 0 0;gap:10px}
.postform h3{margin:0;font-size:17px;color:#0D0D0D}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.starinput legend{color:#0D0D0D;font-weight:600;font-size:14px}
.postform input[type=text],.postform input[type=email],.postform select,.postform textarea,.requesttools select,.postactions select,.dashmenu{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--pfield);border-radius:8px;background:#FBFBFB;color:#0D0D0D;font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif}
.postform textarea{resize:vertical;min-height:96px}
.postform select{max-width:240px}
.postform input[type=text]:focus,.postform input[type=email]:focus,.postform input[type=search]:focus,.postform input[type=url]:focus,.postform input:not([type]):focus,.postform select:focus,.postform textarea:focus,.requesttools select:focus,.postactions select:focus,.dashmenu:focus{outline:none;outline-offset:0;box-shadow:none;border:2px solid transparent;background:linear-gradient(#FBFBFB,#FBFBFB) padding-box,var(--accent-gradient) border-box;background-origin:padding-box,border-box;background-clip:padding-box,border-box}
/* Native <select> menus: the closed control is dark with white label text.
   Without color-scheme + option colors, Windows/Chrome draws a light system
   list while keeping white glyphs, so every option but the hovered one is
   invisible (Feature requests category dropdown). Match DEVI dark UI. */
.productpage select,
.dashpage select,
.postform select,
.requesttools select,
.postactions select,
.dashmenu{
  color-scheme:light;
}
.productpage select option,
.dashpage select option,
.postform select option,
.requesttools select option,
.postactions select option,
.dashmenu option{
  background-color:#FBFBFB;
  color:#0D0D0D;
}
.starinput{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.starinput legend{margin:0 0 6px;padding:0;width:100%}
.starinput input{position:absolute;opacity:0;width:1px;height:1px}
.starinput label{cursor:pointer;font-size:26px;line-height:1;padding:4px 2px;color:rgba(11,11,15,0.35)}
/* Stars run input, label, input, label. The chosen star and every star before
   it are gold; the stars after the chosen star's own label are dim. The old
   rule dimmed from the chosen input onward, which caught the chosen label too,
   so a click on star five filled four. Hovering a star previews that many,
   and only hovering a star does it, not the legend or the gaps. */
.starinput input:focus-visible+label{outline:2px solid var(--accent-ring);outline-offset:2px;border-radius:4px}
.starinput:not(:has(label:hover)):has(input:checked) label{color:#B1871B}
.starinput:not(:has(label:hover)) input:checked+label~label{color:rgba(11,11,15,0.35)}
.starinput:has(label:hover) label{color:#B1871B}
.starinput:has(label:hover) label:hover~label{color:rgba(11,11,15,0.35)}
.postnotice{margin:0;padding:10px 12px;border-left:2px solid #E0B24A;background:rgba(224,178,74,.06);color:var(--t2);font-size:13.5px;line-height:1.5}
.formactions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.formstatus{margin:0;min-height:1.3em;font-size:14px;color:var(--t2)}
.formstatus.err{color:#B92113}
.linkbtn{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:var(--t2);font:600 13.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;cursor:pointer}
.linkbtn:hover{color:var(--t1);text-decoration:none}
.linkbtn:disabled{opacity:.5;cursor:default}
.postlist{display:flex;flex-direction:column}
.post{padding:20px 0;border-top:1px solid var(--pline);scroll-margin-top:16px}
.posthead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.versiontag,.tooltag{display:inline-flex;padding:1px 8px;border:1px solid var(--pline);border-radius:6px;font:500 12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--t2)}
.byline{margin:8px 0 6px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13.5px;color:var(--t3)}
.byline strong{color:var(--t1);font-weight:600}
.posttext{margin:0 0 6px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--t2);font-size:15.5px;line-height:1.6;max-width:72ch}
.mention{background:linear-gradient(90deg,#4B8DF8,#8B77EE);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.postactions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.postactions select{width:auto;min-height:32px;padding:4px 8px;font-size:13px}
.thread{margin:12px 0 0;display:flex;flex-direction:column;gap:2px}
.reply{padding:12px 0 6px 16px;border-left:1px solid var(--pline2);scroll-margin-top:16px}
.reply.depth2{margin-left:22px}
.reply .byline{margin-top:0}
.replybox:empty{display:none}
.mentionlist{list-style:none;margin:4px 0 0;padding:4px;border:1px solid var(--pline2);border-radius:8px;background:#F6F6F7;max-width:320px}
.mentionlist li{margin:0}
.mentionlist button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:6px;background:none;color:var(--t1);font:15px/1.3 inherit;cursor:pointer}
.mentionlist button:hover,.mentionlist button:focus{background:rgba(16,17,22,0.025)}

/* Feature requests */
.requesttools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.requesttools select{width:auto;min-width:160px}
.segmented{display:inline-flex;border:1px solid var(--pline2);border-radius:8px;overflow:hidden}
.segmented button{min-height:40px;padding:0 14px;border:0;background:none;color:var(--t2);font:600 14px/1 inherit;cursor:pointer}
.segmented button[aria-pressed=true]{background:rgba(16,17,22,0.028);color:#0D0D0D}
.requestcomposer{margin:0 0 18px}
.requestcomposer .postform{margin:0}
.requestlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--pline)}
.requestlist>li.muted{padding:16px 0;margin:0}
.requestitem{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;margin:0;padding:18px 0;border-bottom:1px solid var(--pline);max-width:none;scroll-margin-top:16px}
.votebtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:56px;height:60px;border:1px solid var(--pline2);border-radius:8px;background:none;color:var(--t2);font:600 15px/1 inherit;cursor:pointer}
.votebtn span:first-child{font-size:11px}
.votebtn:hover{border-color:rgba(16,17,22,0.135);color:#0D0D0D}
.votebtn[aria-pressed=true]{color:#0D0D0D;border-color:transparent;background:linear-gradient(color-mix(in srgb,var(--accent-blue) 14%,#FBFBFB),color-mix(in srgb,var(--accent-purple) 14%,#FBFBFB)) padding-box,var(--accent-gradient) border-box;background-clip:padding-box,border-box}
.requesttitle{margin:0 0 6px;font-size:16.5px;font-weight:650;color:#0D0D0D;letter-spacing:-.01em}
.requestmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px;font-size:13px;color:var(--t3)}
.statusbadge{display:inline-flex;padding:1px 9px;border-radius:999px;border:1px solid var(--pline2);font:600 12px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;color:var(--t1)}
.statusbadge.s-planned{border-color:transparent;background:linear-gradient(#FBFBFB,#FBFBFB) padding-box,var(--accent-gradient) border-box;background-clip:padding-box,border-box}
.statusbadge.s-in-progress{border-color:rgba(224,178,74,.6)}
.statusbadge.s-shipped{border-color:rgba(52,200,122,.6)}
.statusbadge.s-declined{color:var(--t3)}
.morelink{margin:14px 0 0}

/* Account dashboard */
.dash{display:grid;gap:22px;padding:28px 0 48px}
@media(min-width:900px){.dash{grid-template-columns:220px minmax(0,1fr);gap:40px}}
.dashnav{display:flex;flex-direction:column;gap:8px}
@media(min-width:900px){.dashnav{position:sticky;top:20px;align-self:start}}
.dashlinks{list-style:none;margin:0;padding:0;display:none}
@media(min-width:900px){.dashlinks{display:flex;flex-direction:column;gap:2px}.dashmenu{display:none}}
.dashlinks li{margin:0}
/* The page's gradient rule for links in main li (transparent text fill, text-clipped
   background) outranks a plain .dashlinks a, so these carry .dashnav to win in every
   state and keep the labels solid gray or white. */
.dashlinks a{display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:8px;color:var(--t2);font-size:15px}
.dashnav .dashlinks a,.dashnav .dashlinks a:is(:link,:visited,:active,:focus){background:none;color:var(--t2);-webkit-text-fill-color:currentColor;text-decoration:none}
.dashnav .dashlinks a:is(:hover,:focus-visible){background:rgba(16,17,22,0.014);color:var(--t1);-webkit-text-fill-color:currentColor;text-decoration:none}
.dashnav .dashlinks a[aria-current=page]{background:rgba(16,17,22,0.025);color:#0D0D0D;-webkit-text-fill-color:currentColor;font-weight:600}
.dashnav .textbtn{justify-content:flex-start;padding:0 12px;min-height:38px;font-size:15px}
.dashsep{height:1px;background:var(--pline);margin:8px 0}
@media(max-width:899px){.dashnav{flex-direction:row;align-items:center;gap:12px}.dashmenu{flex:1}.dashsep{display:none}}
.dashpage .dashpanel.accountcard{background:var(--psurface);border:1px solid var(--pline);border-radius:var(--prad);padding:26px 26px 24px;margin:0}
.dashpanel>h2{margin:0 0 4px;font-size:20px}
.dashpanel h2:focus{outline:none}
.dashpanel .accountlead{margin:0 0 22px}
.dashpanel h3{margin:26px 0 10px;font-size:15px;color:#0D0D0D;font-weight:650}
.summarylist{margin:0;border:1px solid var(--pline);border-radius:var(--prad)}
.summarylist>div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--pline)}
.summarylist>div:last-child{border-bottom:0}
.summarylist dt{color:var(--t2);font-size:14px}
.summarylist dd{margin:0;color:#0D0D0D;font-size:15px;overflow-wrap:anywhere}
.summarylist a{font-size:14px;font-weight:600}
@media(max-width:600px){.summarylist>div{grid-template-columns:1fr auto}.summarylist dd{grid-column:1/-1;grid-row:2}}
.listrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--pline)}
.listrow:first-child{border-top:0;padding-top:0}
.listrow a:not(.btn){color:#0D0D0D;font-weight:600}
.listrow .accounthelp{margin:2px 0 0}
.listside{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
/* The text side of a row may shrink and wrap, so a long title, name, or
   unbroken token cannot push the row wider than a phone screen. */
.listrow>div:first-child{flex:1 1 auto;min-width:0}
.listrow a:not(.btn),.listrow strong,.listrow .accounthelp{overflow-wrap:anywhere}
@media(max-width:640px){.listrow{flex-wrap:wrap}.listside{justify-content:flex-start}}
/* Settings rows stack: label, then description, then any link. A two-column
   grid here let the description claim the auto column at its full width and
   squeeze the label into a word-per-line column under it on phones. */
.dashpanel .preferencerow{display:block}
.dashpanel .preferencerow strong{display:block;overflow-wrap:anywhere}
.dashpanel .preferencerow .accounthelp{margin:4px 0 0;max-width:none}
.dashpanel .preferencerow>a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* Passkey rows keep Remove beside the name and date: the button is short,
   and the text column is the one that flexes. */
.dashpanel #account-passkeys .preferencerow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center}
.dashpanel #account-passkeys .preferencerow strong{grid-column:1;grid-row:1}
.dashpanel #account-passkeys .preferencerow .accounthelp{grid-column:1;grid-row:2;margin:0}
.dashpanel #account-passkeys .preferencerow .textbtn{grid-column:2;grid-row:1/3}
.dashpanel p[role=status]:not(:empty){margin:16px 0 0}
.dashpanel #account-passkeys{margin:0 0 18px}
.dashpanel #account-email-code{margin-top:18px}
.dangerzone{margin-top:28px;padding:18px;border:1px solid rgba(242,139,130,.35);border-radius:var(--prad)}
.dangerzone h3{margin:0 0 6px;color:#0D0D0D}
.dangerzone p{margin:0 0 10px;font-size:14px}
.productpage header.doc h1{background:none;-webkit-text-fill-color:#0D0D0D;color:#0D0D0D}
.statuslegend{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.statuslegend li{margin:0;font-size:13.5px;line-height:1.45;color:var(--t2);max-width:none}
.statuslegend .statusbadge{margin:0 0 3px}

/* Near-black layout pass: roomier product sections, quieter side index. */
.producthead{padding-bottom:40px}
.facts{background:var(--psurface)}
.facts dd{font-size:14.5px}
.psection{padding:0 0 56px;margin:0 0 56px}
.psection>h2{font-size:24px;letter-spacing:-.025em}
.featuregrid li{padding:20px 22px}
.toolgrid{gap:16px}
.toolgrid .toolentry{padding:26px}
.segmented{border-color:var(--pfield)}
.votebtn{border-color:var(--pfield)}

/* Account features: examiner badge, download history, email settings, badge
   requests, and deletion. Text sides shrink and wrap like the other rows. */
.examinerbadge{display:inline-flex;align-items:center;gap:5px;padding:0 8px;border:1px solid transparent;border-radius:999px;font:600 11.5px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;color:#0F49BD;white-space:nowrap;vertical-align:1px;background:linear-gradient(#F8F8F9,#F8F8F9) padding-box,var(--accent-gradient) border-box;background-clip:padding-box,border-box}
.examinerbadge::before{content:"\2713";font-size:10px;background-image:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.statusbadge.s-update{border-color:rgba(224,178,74,.6)}
.removedpost>.posttext{font-style:italic}
.dashpanel .accountrow{margin:12px 0}
.dashpanel .accountrow span{min-width:0;overflow-wrap:anywhere}
.historylist{margin:0 0 6px}
.verifyform{display:flex;flex-direction:column;gap:4px;max-width:560px}
.verifyform textarea{width:100%;min-height:88px;padding:10px 14px;border-radius:8px;border:1px solid var(--pfield);background:#FBFBFB;color:#0D0D0D;font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;resize:vertical}
.verifyform textarea:focus{outline:none;outline-offset:0;box-shadow:none;border:2px solid transparent;background:linear-gradient(#FBFBFB,#FBFBFB) padding-box,var(--accent-gradient) border-box;background-origin:padding-box,border-box;background-clip:padding-box,border-box}
.verifyform .postnotice{margin:0 0 12px}
.verifystate p{margin:0 0 8px;overflow-wrap:anywhere}
.dangerzone .accountfield{max-width:320px}
.dangerzone .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:430px){.verifyform .btn,.dangerzone .btn{width:100%}}
.dashpanel .listside .btn{width:auto}

/* Skeletons and settling. Nothing on Account or the community lists says
   "Loading". A value that is still on its way is a quiet bar the size of the
   text it stands in for, so the real value lands without moving anything.
   Fresh content fades in over 180ms; a value that did not change stays put.
   Reduced motion gets a still bar and no fade. */
.skel{display:inline-block;vertical-align:middle;width:8em;max-width:100%;height:.85em;border-radius:6px;background:linear-gradient(90deg,rgba(16,17,22,0.019) 0%,rgba(16,17,22,0.038) 50%,rgba(16,17,22,0.019) 100%);background-size:200% 100%;animation:skel 1.6s ease-in-out infinite}
@keyframes skel{from{background-position:100% 0}to{background-position:-100% 0}}
.skw4{width:3em}.skw6{width:6em}.skw9{width:9em}.skw12{width:12em}.skw16{width:16em}.skw24{width:min(24em,100%)}
/* A skeleton never sets the width of its column: grid items may shrink. */
.dash>*{min-width:0}
.skelrow .skel,.skelblock .skel{display:block}
.skelrow .skel{height:14px;margin:6px 0}
.skelrow .skel.skelline,.skelblock .skelline{height:12px;margin:10px 0 4px}
.skelrow .listside .skel{height:26px;margin:0;border-radius:999px}
.skelblock .skelline:first-child{margin-top:4px}
.skelblock .skelbtn{width:9em;height:44px;margin-top:16px;border-radius:8px}
.dashpanel #account-passkeys .preferencerow.skelrow{display:block}
.skelpost{padding:20px 0;border-top:1px solid var(--pline)}
.skelpost .skel{display:block;height:13px;margin:8px 0}
.skelsummary{height:132px}
.skelsummary .skel{display:block}
.requestlist>li.skelrow{padding:18px 0;margin:0;border-bottom:1px solid var(--pline);max-width:none}
input[type=checkbox][data-pending]{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin-top:2px;border:0;border-radius:5px;background:linear-gradient(90deg,rgba(16,17,22,0.019) 0%,rgba(16,17,22,0.038) 50%,rgba(16,17,22,0.019) 100%);background-size:200% 100%;animation:skel 1.6s ease-in-out infinite}
.settle{animation:settle .18s ease-out}
@keyframes settle{from{opacity:0}to{opacity:1}}
.refreshing{opacity:.55;transition:opacity .15s ease;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.skel,input[type=checkbox][data-pending]{animation:none;background:rgba(16,17,22,0.028)}
.settle{animation:none}
.refreshing{transition:none}
}

/* Tool cards line up across a row. Every card has the same five parts: the
   status and platform line, the name, the description, the facts under a
   rule, and the button. Side by side, the cards share their rows through
   subgrid, so a short description cannot lift its rule, facts, or button
   above the neighbours'. Without subgrid the description grows to fill the
   card, which pins the rule, facts and button to the bottom. The panels stay
   flat, with no shadow or blur. */
.toolgrid>.toolentry{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.toolgrid>.toolentry>p{flex:1 0 auto}
@media(min-width:900px){
@supports (grid-template-rows:subgrid){
.toolgrid>.toolentry{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px}
.toolgrid>.toolentry>p{flex:none}
.toolgrid>.toolentry>.cardaction{margin-top:0;align-self:end}
}
}
/* Navigation and row links stay flat. The accent gradient is for prose links,
   mentions, and the small brand marks above. */
.dashlinks a,.crumbs a,.pagenav a,.listrow a,.linkbtn{
  background-image:none;background-clip:border-box;-webkit-background-clip:border-box;
  -webkit-text-fill-color:currentColor}
.morelink a,.mention{background-image:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:slice;box-decoration-break:slice;text-decoration-color:var(--accent-purple)}
/* DEVI access (lockdown phase 2): the request form and its status in the download box (/auth/devi-access.js). */
.downloadapproval{display:flex;flex-direction:column;gap:10px}
.downloadapproval[hidden]{display:none}
.downloadapproval .accessform{margin:4px 0 0}
.accessstate{margin:0;font-weight:600;color:#0D0D0D}

/* Website preview 15: the offline badge under each tool's title, the platform line, the "How to get a tool" box and
   its short FAQ (Tools page and each tool's Download section), and the Reader "Coming soon" card. */
.offlinebadge{display:inline-flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:6px 12px;border:1px solid var(--pline2);border-radius:999px;font:600 13.5px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;color:var(--t1);max-width:100%}
.offlinebadge::before{content:"";flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--ok)}
@media(max-width:640px){.offlinebadge{border-radius:12px}}
.platformnote{margin:12px 0 0;font:600 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;color:var(--t2)}
.tourlink{margin:18px 0 0;font-size:15px}
.tourlink a{font-weight:600;color:#0D0D0D;text-decoration:none;border-bottom:1px solid rgba(16,17,22,0.099);padding-bottom:2px;background:none;-webkit-text-fill-color:currentColor}
.tourlink a:hover{border-bottom-color:#fff}
.getsection{margin:34px 0 8px}
.getbox{margin:0 0 18px;padding:22px;border:1px solid var(--pline2);border-radius:var(--prad);background:var(--psurface);color:var(--t2)}
.downloadgate+.downloadapproval+.getbox,.downloadapproval+.getbox{margin-top:18px}
.getbox h2,.getbox h3{margin:0 0 14px;color:#0D0D0D;letter-spacing:-.02em}
.getbox h2{font-size:22px}.getbox h3{font-size:18px}
.getsteps{margin:0 0 18px;padding:0;list-style:none;counter-reset:getstep;display:grid;gap:12px}
@media(min-width:900px){.getsection .getsteps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.getsteps li{counter-increment:getstep;position:relative;margin:0;padding:0 0 0 38px;font-size:15px;line-height:1.5;max-width:none}
.getsteps li::before{content:counter(getstep);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;border:1px solid transparent;background:linear-gradient(#F8F8F9,#F8F8F9) padding-box,var(--accent-gradient) border-box;color:#0D0D0D;font:700 13px/24px -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;text-align:center}
.getsteps strong{display:block;color:#0D0D0D;font-weight:650}
.getfacts{display:grid;gap:0;margin:0 0 18px;border:1px solid var(--pline);border-radius:var(--prad);overflow:hidden}
@media(min-width:720px){.getfacts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.getfacts>div{padding:12px 14px;border-bottom:1px solid var(--pline);min-width:0}
@media(min-width:720px){.getfacts>div{border-bottom:0;border-right:1px solid var(--pline)}.getfacts>div:last-child{border-right:0}}
.getfacts>div:last-child{border-bottom:0}
.getfacts dt{margin:0 0 4px;font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.getfacts dd{margin:0;color:var(--t1);font-size:14.5px;line-height:1.5}
.toolfaq h3,.toolfaq h4{margin:0 0 8px;font-size:16px;color:#0D0D0D}
.toolfaq details{border-top:1px solid var(--pline)}
.toolfaq details:last-child{border-bottom:1px solid var(--pline)}
.toolfaq summary{display:flex;align-items:center;min-height:44px;padding:8px 0;cursor:pointer;color:var(--t1);font-weight:600;font-size:15px;list-style:none}
.toolfaq summary::-webkit-details-marker{display:none}
.toolfaq summary::after{content:"+";margin-left:auto;padding-left:12px;color:var(--t3);font-weight:400;font-size:20px;line-height:1}
.toolfaq details[open] summary::after{content:"\2212"}
.toolfaq summary:focus-visible{outline:2px solid var(--accent-ring,#70A7FF);outline-offset:2px;border-radius:4px}
.toolfaq details p{margin:0 0 12px;font-size:15px;line-height:1.55;max-width:70ch}
.smartscreen strong{color:var(--t1)}
.toolgrid .toolplanned .badge.progress{color:var(--t1)}
/* Website preview 33: tool pages after the vendor product-page study (patterns only). */
.probar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--pline);background:#F9F9FA}
.probar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.probar p{margin:0;display:flex;align-items:center;gap:10px;min-width:0}
.probarname strong{color:var(--t1);font-size:15px;font-weight:650;white-space:nowrap}
.probarname span{font:500 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--t3)}
.probarlinks{gap:16px}
.probarsheet{font-size:14px;font-weight:600;white-space:nowrap}
.probar .btn.btnsmall{min-height:40px;white-space:nowrap}
@media(max-width:640px){.probarsheet{display:none}.probarname span{display:none}}
.ptagline{margin:0 0 14px;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--t1);max-width:32ch}
.pillars{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pillars li{margin:0;padding:5px 12px;border:1px solid var(--pline2);border-radius:999px;font-size:13.5px;font-weight:600;line-height:20px;color:var(--t2);background:var(--psurface);max-width:none}
.comparewrap{border:1px solid var(--pline);border-radius:var(--prad);overflow:hidden}
.compare{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid var(--pline);text-align:left;vertical-align:top}
.compare thead th{font-size:13px;font-weight:650;color:var(--t1);background:var(--psurface)}
.compare thead td{background:var(--psurface)}
.compare tbody th{width:24%;color:var(--t2);font-weight:500}
.compare td{color:var(--t2)}
.compare .us{color:var(--t1);font-weight:600;background:rgba(112,167,255,.07)}
.compare thead th.us{box-shadow:inset 0 3px 0 #70A7FF}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
@media(max-width:720px){
  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tr{padding:12px 14px;border-bottom:1px solid var(--pline)}
  .compare tbody tr:last-child{border-bottom:0}
  .compare tbody th{width:auto;padding:0 0 6px;border:0;color:var(--t1);font-weight:650}
  .compare td{padding:4px 0;border:0;background:none}
  .compare td::before{content:attr(data-label) ": ";color:var(--t3);font-weight:500}
  .compare .us{background:none}}
.proofgrid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:720px){.proofgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.proofgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.proofgrid li{margin:0;padding:18px 20px;border:1px solid var(--pline);border-radius:var(--prad);background:var(--psurface);max-width:none;display:flex;flex-direction:column;gap:6px}
.proofgrid svg{width:22px;height:22px;fill:none;stroke:#0F52BD;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.proofgrid h3{margin:4px 0 0;font-size:15.5px;font-weight:650;color:var(--t1)}
.proofgrid p{margin:0;font-size:14.5px;line-height:1.5;flex:1 0 auto}
.proofgrid a{font-size:14px;font-weight:600}
.psection>h3{margin:28px 0 12px;font-size:16px;font-weight:650;color:var(--t1)}
.resgrid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:720px){.resgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.resgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.resgrid li{margin:0;max-width:none}
.productpage .resgrid a,.productgrid>article .resgrid a{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 18px;border:1px solid var(--pline);border-radius:var(--prad);text-decoration:none;background:none;-webkit-text-fill-color:currentColor;color:var(--t2)}
.productpage .resgrid a:hover,.productgrid>article .resgrid a:hover{border-color:var(--pline2);background:var(--psurface)}
.productpage .resgrid strong{color:var(--t1);font-size:15px}
.productpage .resgrid span{font-size:14px;line-height:1.5}
.toolsheadcta{margin:22px 0 0}
.toolscompare{margin:48px 0}
.toolscompare h2{margin:0 0 6px}
.toolscompare .sectionlead{margin:0 0 20px;color:var(--t2);max-width:68ch}