/* wi.css, the one Wright Ideas stylesheet (Website Style Standard, all nine rules ruled by Dave 2026-10-25).
   Version 1, 2026-10-24: covers the free 15 page (/start). Version 2, 2026-10-24 evening: the gear page's rules, scoped to body.gear (two layout rules; the new-tab arrow off its buttons and 19 px side padding on its cards, so the long button words break exactly where they do today). Version 3, 2026-10-24 evening: the store page's rules (the search box, the help chip, the tiles with their covers, the tags, the count line, the two boxes behind the search, the sign-in strip), unscoped because the free and gear pages carry none of those classes; the front and gig-work pages share them when they join. Version 4, 2026-10-24 night: the front page's rules (the three-tile row .tier3 with its phone rules, the picked tile's gold ring, the store mosaic cover, the two small lines under the tiles, which were inline in the page's head, and Kit's sign-up form's focus ring and phone tap sizes, which the old stylesheet carried and this one did not). Only the front page carried those classes until version 5. Version 5, 2026-10-24 night: the gig work page's rules (the pyramid with the wide free tile, its cover at the left; the two small tools' row; the two step labels; the store strip; the three bottom buttons; the small-phone button sizes the old stylesheet gave them), and its three-tile row shares the front page's .tier3 rules. All five pages are covered. Version 6, 2026-10-25: the members site's block (body.members-site: the cream bar with the deep red mark, the one card, the fields and buttons, the tags, the footer band), carried on this file while the members site itself still serves its own inline rules; the members site joins on its own yes. Version 7, 2026-10-25: the body class renamed members-site, because the store strip's own .members rule (a section on three public pages) caught the body of the test copies and boxed the whole page in white with centred text (the gate's finding at 3:3x AM; Dave's ruling is the cream ground) and its phone rule sized the copies' buttons; the reduced-motion block now also stills the members buttons' lift. Version 8, 2026-10-25: the members block names --line (the old shell's name for its thin border colour, which the tool page's own rules use fifteen times), so the test copies' steps, panels, tabs and prompt box keep their borders without the old shell (the gate's finding at 3:5x AM); no public page carries the class, so nothing else moves.
   Colours and fonts come from the brand kit (wi_brand_kit.json); this file only says how pages use them.
   Dave's rulings 2026-10-24: cream ground stays; deep red for buttons and anything carrying white text,
   bright red for decoration only; the gold band stays and reads at 800/16px; 8 px corners everywhere;
   the members bar cream with a deep red mark (the members site loads this file too, under body.members-site). The band keeps its uppercase (the kit: badges 800, uppercase, tracked). */
:root{--wi-ink:#17171B;--wi-ground:#F6F1E7;--wi-surface:#FFFFFF;--wi-line:#E5DFD3;--wi-muted:#55524C;
--wi-action:#B01F16;--wi-action-hover:#8A140D;
--wi-accent:#E8352A;
--wi-gold:#F5A623;--wi-gold-tile:#F7B955;--wi-ok:#2E7D4F;--wi-radius:8px;
--wi-shadow:0 1px 2px rgba(23,23,27,.06),0 8px 24px rgba(23,23,27,.08);--wi-shadow-lift:0 14px 34px rgba(23,23,27,.16);--wi-shadow-menu:0 6px 16px rgba(0,0,0,.12);
/* the old names from site.css (retired; this file replaced it), kept so rules still written with them resolve */
--red:var(--wi-accent);--deep:var(--wi-action);--gold:var(--wi-gold);--cream:var(--wi-ground);--ink:var(--wi-ink);--rule:var(--wi-line);--white:var(--wi-surface);--muted:var(--wi-muted)}

/* ground */
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:16px}
body{background:var(--wi-ground);color:var(--wi-ink);font-family:"Montserrat","Segoe UI",Arial,sans-serif;font-weight:500;font-size:17px;line-height:1.55;border-left:8px solid var(--wi-accent)}
.wrap{width:min(1320px,calc(100% - 48px));margin:0 auto}
@media (max-width:600px){.wrap{width:calc(100% - 32px)}}

/* type */
h1,h2,h3,.mark{font-family:"Archivo Black","Arial Black",Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;margin:0}
h3{text-transform:none;letter-spacing:0}
h1{font-size:clamp(28px,4.2vw,52px);margin-top:22px}
h2{font-size:clamp(21px,2.6vw,32px);margin-bottom:16px}
.lede{font-size:19px;max-width:62ch;margin:14px auto 0}
.small{font-size:15px;color:var(--wi-muted)}
.notes{font-size:16px;max-width:54ch}
.jump,.also,section>p.small,section:not([class])>p:not([class]),.how li,.help details p,.pyr .tier1 .tile .body p{max-width:54ch} /* long lines stop near 70 characters on wide screens (2026-10-30, Dave's tap "Fix both"); a ch here is the width of a 0, wider than the average Montserrat letter, so 54ch measured about 70 letters */
.notes li{margin:6px 0}
.also{margin-top:16px;font-size:15px}
.num{display:block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--wi-action);margin-bottom:6px}
.lbl{font-family:"Montserrat",sans-serif;font-weight:800;font-size:16px;letter-spacing:.06em;color:var(--wi-action);text-transform:uppercase;margin:0}
.sortlbl{font-weight:700;margin:0}
.shown{margin:10px 0 0}

/* links: deep red, darker on hover, never bright red under text */
a{color:var(--wi-action);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--wi-action-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--wi-gold);outline-offset:2px}
a[target="_blank"]::after{content:"\2197";margin-left:.3em;opacity:0;display:inline-block;transform:translate(-2px,2px);transition:opacity .15s,transform .15s}
a[target="_blank"]:hover::after,a[target="_blank"]:focus-visible::after{opacity:1;transform:none}

/* nav and header */
nav.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 6px;flex-wrap:wrap;text-align:left}
nav.top .mark{font-size:clamp(22px,5vw,30px);text-decoration:none}
nav.top .links{display:flex;gap:6px;flex-wrap:wrap}
nav.top .links a{font-weight:700;font-size:16px;color:var(--wi-ink);text-decoration:none;padding:8px 10px;border-bottom:3px solid transparent;border-radius:var(--wi-radius) var(--wi-radius) 0 0;transition:border-color .15s,color .15s}
nav.top .links a:hover{border-bottom-color:var(--wi-action);color:var(--wi-action)}
nav.top .links a[aria-current="page"]{border-bottom-color:var(--wi-gold)} /* the page you are on keeps its gold bar (the store marks Store; the old stylesheet did the same). Version 3. */
nav.top .links a::after{content:none}
header{padding:32px 0 8px;text-align:center}
.mark{color:var(--wi-action);font-size:clamp(26px,7vw,40px);letter-spacing:4px}
.kicker{display:inline-block;margin-top:12px;background:var(--wi-gold);color:var(--wi-ink);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.03em;padding:8px 16px;border-radius:var(--wi-radius)}
section{padding:36px 0 0}

/* buttons: deep red, white text, hover darker and lifted, gold focus ring, pressed state */
.btn{display:inline-block;background:var(--wi-action);color:var(--wi-surface);text-decoration:none;font-weight:700;font-size:16px;line-height:1.25;padding:13px 20px;text-align:center;border-radius:var(--wi-radius);transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--wi-action-hover);color:var(--wi-surface);transform:translateY(-1px);box-shadow:0 6px 16px rgba(138,20,13,.25)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:focus-visible{outline:3px solid var(--wi-gold);outline-offset:2px}
.btn.big{font-size:18px;padding:16px 26px;width:100%;max-width:420px}
.btn.ghost{background:var(--wi-surface);color:var(--wi-action);border:2px solid var(--wi-action);padding:11px 18px}
.btn.ghost:hover{background:var(--wi-action);color:var(--wi-surface)}
.btn::after{vertical-align:baseline}
body:not(.members-site) .btn:not(.ghost),body.members-site .btn:not(.ghost){background:var(--wi-surface);color:var(--wi-action);box-shadow:inset 0 0 0 2px var(--wi-action)} /* one button rule for both sites (Website Style Standard rule 4): every button is white with a red edge, the edge drawn inside so no button changes size, and fills red when the pointer is on it. Dave's 10/25 tap "Buy buttons solid" kept Gumroad buttons solid red; his tap 2026-10-28 11:08 PM "All white with red edge", after asking why "Get it free" was red and "Start the path" white, made every button the same */
body:not(.members-site) .btn:hover,body.members-site .btn:hover{background:var(--wi-action);color:var(--wi-surface);transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--wi-gold)}
body:not(.members-site) .btn.corner,body:not(.members-site) .btn[href^="http"]:not([href*="wrightideasshop.com"]),body.members-site .btn[href^="http"]:not([href*="wrightideasshop.com"]){position:relative;padding-right:26px} /* a little more room on the right for the corner mark, as on the arrow board Dave picked from */
body:not(.members-site) .btn.corner::after,body:not(.members-site) .btn[href^="http"]:not([href*="wrightideasshop.com"])::after,body.members-site .btn[href^="http"]:not([href*="wrightideasshop.com"])::after{content:"";position:absolute;top:4px;right:4px;width:12px;height:12px;margin:0;opacity:1;transform:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%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 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%3E%3C/svg%3E") center/contain no-repeat} /* a button that leaves Wright Ideas (Gumroad, Amazon, an app's signup, YouTube) carries the box-and-arrow mark in its top right corner, always showing (Dave's picks 2026-10-25: "a little arrow up in the corner", then number 5 of the arrow board, GitHub's Octicons link-external, MIT); drawn in the button's own text colour so it turns white with the fill, and it sits outside the words, so it never pushes them off center */
body:not(.members-site) .btn[href*="gumroad.com/l/"]:hover,body.members-site .btn[href*="gumroad.com/l/"]:hover{background:var(--wi-action);transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--wi-gold)} /* every button pops on hover (Website Style Standard rule 4, Dave's tap 2026-10-25 "Gumroad-style pop, gold", after his dictation "a pop up and look three-dimensional when they pop up so they know they can be hit"): it rises up and to the left and a solid gold block shows where it sat, the way Gumroad's buttons do, in our colours; the colour change stays (white fills red). These selectors outrank the reduced-motion line near the end of this file, so a computer set to reduce motion still sees the pop, only without the glide */
body:not(.members-site) .btn:not([href*="gumroad.com/l/"]):active,body:not(.members-site) .btn[href*="gumroad.com/l/"]:active,body.members-site .btn:not([href*="gumroad.com/l/"]):active,body.members-site .btn[href*="gumroad.com/l/"]:active{transform:none;box-shadow:none} /* pressing it pushes it back down onto the block */
body.members-site button:not([role=tab]):not(.linkish):not(.done){background:var(--wi-surface);color:var(--wi-action);box-shadow:inset 0 0 0 2px var(--wi-action)} /* the members site gets the public look (Dave's tap 2026-10-25 "Members site buttons"): every button white with a red edge, filling red with the gold pop on hover; it sells nothing, so no button there stays solid */
body.members-site button:not([role=tab]):not(.linkish):not(.done):hover{background:var(--wi-action);color:var(--wi-surface);transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--wi-gold)}
body.members-site button:not([role=tab]):not(.linkish):not(.done):active{transform:none;box-shadow:none}
body.members-site :is(.dl,.gtools) .btn:not(.ghost):not(:hover){border-color:var(--wi-action);box-shadow:none} /* the download list and the guide's PDF button already draw a 2 px edge of their own; it turns red and the inner edge is left off so they do not show two */
.gearline{display:inline-flex;align-items:center;gap:8px} /* a gear button and its small "Ad" mark, kept together so the mark sits beside the link (Amazon and FTC: the disclosure near the link) */
.adtag{font-size:15px;font-weight:600;line-height:1.3;color:var(--wi-muted);background:var(--wi-surface);border:1px solid var(--wi-line);border-radius:999px;padding:3px 10px;white-space:nowrap} /* the "Ad" tag, Dave's dictations 10/25: the button says "Shop gear", the tag says it pays, the note above the list says Amazon */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* words for screen readers only */
.gearline .btn::after{content:none} /* the hidden hover arrow's reserved width pushed the short words "Shop gear" off center; the tag beside it and the note above the list already say it */
.row{display:flex;flex-wrap:wrap;gap:12px}

/* the one card: white, thin line, gold top, 8 px corners, still at rest */
.app,.step,.free,.how{background:var(--wi-surface);border:1px solid var(--wi-line);border-top:4px solid var(--wi-gold);border-radius:var(--wi-radius)}
.free,.how{box-shadow:var(--wi-shadow)}
.price{display:inline-block;background:var(--wi-gold);color:var(--wi-ink);font-weight:800;font-size:16px;letter-spacing:.03em;padding:5px 12px;white-space:nowrap;border-radius:var(--wi-radius)}

/* the free box (the tracker) */
.free{padding:26px 20px;text-align:center}
.free p{margin:8px auto 20px;max-width:60ch}

/* how to use */
.how{padding:22px 20px}
.how ol{margin:0;padding-left:22px}
.how li{margin:6px 0}
.jump{font-size:16px;line-height:2.1}

/* the 15 */
.apps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.app{padding:20px;display:flex;flex-direction:column;gap:12px}
.app .row{margin-top:auto}
.app h3{font-size:24px}
.app p{margin:0}
.app .btn{align-self:flex-start}
.app .price{white-space:normal}
.app[hidden]{display:none}
@media (min-width:640px){.apps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.apps{grid-template-columns:repeat(3,minmax(0,1fr))}.how ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 40px}}

/* the gear page only (body.gear): the two buttons stacked in each card, four across on a wide screen (the 2026-10-17 draft). The free page keeps three across. */
body.gear .app .row{flex-direction:column;align-items:flex-start;gap:10px}
@media (min-width:1280px){body.gear .apps{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.gear .btn::after{content:none} /* no corner mark on the gear page's buttons: their words already say "(paid link)" (first set when the mark was an arrow whose width wrapped the GoPuff button onto two lines at 390 px) */
body.gear .app{padding:20px 19px} /* the card's 1 px side lines take 2 px from the inside; 19 px padding gives the buttons the same width as the live page, so the long button words break where they do today */

/* the ladder */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.step{padding:20px;display:grid;gap:10px}
.step .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.step h3{font-size:21px}
.step p{margin:0;max-width:54ch}
.step .btn{justify-self:start}
@media (min-width:640px){.step{grid-template-columns:1fr auto;align-items:center}.step .top{grid-column:1/-1}.step p{grid-column:1}.step .btn{grid-column:2;grid-row:2}}
.addons-wrap{display:grid;gap:10px;padding-left:14px;border-left:3px solid var(--wi-gold)}
.addons{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:1000px){.addons{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.step.addon{display:flex;flex-direction:column}.step.addon .btn{align-self:flex-start;margin-top:auto}.addons:has(>.addon:only-child){grid-template-columns:minmax(0,1fr)}.addons:has(>.addon:only-child)>.step.addon{display:grid}.addons:has(>.addon:only-child)>.step.addon .btn{align-self:center;margin-top:0}} /* one add-on alone (the remote page) is laid out like the full-width cards above and below it instead of a third of the row: vet run 2, 2026-11-01 */

/* sort chips: they click, so they say so */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{font:inherit;font-weight:600;font-size:16px;padding:8px 14px;border:2px solid var(--wi-ink);background:var(--wi-surface);color:var(--wi-ink);cursor:pointer;border-radius:var(--wi-radius);transition:background .12s,border-color .12s,transform .12s}
.chip:hover{background:var(--wi-ground);border-color:var(--wi-action);transform:translateY(-1px)}
.chip:active{transform:translateY(0)}
.chip.on{background:var(--wi-action);color:var(--wi-surface);border-color:var(--wi-action)}
.chip:focus-visible{outline:3px solid var(--wi-gold);outline-offset:2px}

/* the store page (and the front and gig-work pages when they join): the search box, the help chip, the tiles, the tags, the count line, the two boxes behind the search, the sign-in strip. Version 3. */
.search{width:100%;font:inherit;font-size:18px;padding:14px 16px;border:2px solid var(--wi-ink);background:var(--wi-surface);color:var(--wi-ink);border-radius:var(--wi-radius)}
.search:focus-visible{outline:3px solid var(--wi-gold);outline-offset:2px}
.chip.help{border-color:var(--wi-gold);background:var(--wi-gold)}
.chip.help:hover{background:var(--wi-gold);border-color:var(--wi-action)}
.chip.help.on{background:var(--wi-action);border-color:var(--wi-action);color:var(--wi-surface)}
.count{margin:14px 0 0;font-size:15px;color:var(--wi-muted)}
.count a{margin-left:8px}
.tiles{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{background:var(--wi-surface);border:0;border-top:4px solid var(--wi-gold-tile);border-left:4px solid var(--wi-gold-tile);border-radius:var(--wi-radius);box-shadow:var(--wi-shadow);overflow:hidden;display:flex;flex-direction:column;list-style:none;margin:0}
.tile.hide{display:none}
.tile .cover{display:block;width:100%;height:auto}
.tile .body{padding:18px 17px;display:flex;flex-direction:column;gap:10px;flex:1} /* 1 px less at the sides: the tile's 1 px side lines take 2 px from the inside, so the buttons keep the width they have on the live page and break where they do today */
.tile h2{font-size:24px;margin:0}
.tile h3{font-size:20px}
.tile p{margin:0;font-size:16px}
.tile .btn{align-self:flex-start;margin-top:auto}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;font-weight:700;font-size:15px;color:var(--wi-surface);background:var(--wi-action);padding:3px 9px;border-radius:var(--wi-radius)}
.tag.gold{background:var(--wi-gold);color:var(--wi-ink)}
.tag.line{background:transparent;color:var(--wi-action);border:1px solid var(--wi-action)}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.next{font-size:15px;color:var(--wi-muted)}
.none{display:none;background:var(--wi-surface);padding:20px;margin-top:14px;border:1px solid var(--wi-line);border-left:6px solid var(--wi-gold);border-radius:var(--wi-radius)}
.none.show{display:block}
.help{display:none;margin-top:12px;background:var(--wi-surface);padding:6px 18px;border:1px solid var(--wi-line);border-left:6px solid var(--wi-gold);border-radius:var(--wi-radius)}
.help.show{display:block}
.help details{border-bottom:1px solid var(--wi-line);padding:10px 0}
.help details:last-child{border-bottom:0}
.help summary{font-weight:800;cursor:pointer;border-radius:var(--wi-radius)}
.help summary:hover{color:var(--wi-action)}
.help summary:focus-visible{outline:3px solid var(--wi-gold);outline-offset:2px}
.help p{margin:8px 0 0;font-size:16px}
.members{background:var(--wi-surface);border:1px solid var(--wi-line);border-top:4px solid var(--wi-gold);border-radius:var(--wi-radius);box-shadow:var(--wi-shadow);padding:26px 24px;margin-top:32px;text-align:center}
.members p{margin:0 0 14px}
.btn.gold{background:var(--wi-action);color:var(--wi-surface)} /* the old gold sign-in button is a button, so deep red (Dave's ruling 4:00 PM); the class stays so the generated page needs no body change */
.btn.gold:hover{background:var(--wi-action-hover)}
@media (min-width:720px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.tile .body{padding:20px 19px}}
@media (min-width:1200px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:420px){.tiles{gap:10px}.tile .body{padding:10px 9px}.tile h3{font-size:16px}.tile .btn,.members .btn{font-size:15px;padding:11px 14px}} /* the old stylesheet shrank every button on small phones; here only the store's tile buttons and its sign-in button, so the free and gear pages are untouched */

/* the front page (index.html): the three-tile row, the picked tile, the store mosaic, the two small lines under the tiles, Kit's sign-up form. Version 4. */
.tier3{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
/* 2026-10-31: the front door's four tiles, two by two at every width (added with the free remote list tile; the three-tile rows elsewhere keep .tier3). */
.tier3.tier4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile.pick{outline:2px solid var(--wi-gold);outline-offset:0} /* the one tile the page points at keeps its gold ring; the ring follows the rounded corners */
.door{padding-top:28px} /* was inline in the page's head, moved here so the page carries no styles of its own */
.tile .cover.mosaic{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1005/565;overflow:hidden;background:var(--wi-ink)}
.tile .cover.mosaic img{display:block;width:100%;height:100%;object-fit:cover}
.soonline{text-align:center;font-size:15px;color:var(--wi-muted);margin:14px 0 0} /* 14 px inline on the live page; the type floor is 15 */
.soonline b{color:var(--wi-action)}
@media (max-width:600px){.tier3{gap:8px}.tier3 .tile p,.tier3 .tags .tag:not(.gold){display:none}.tier3 .tile h3{font-size:15px}.tier3 .tag{font-size:15px;padding:3px 5px}.tier3 .tile .body{padding:10px 7px;gap:6px}.tier3 .btn{font-size:15px;padding:10px 8px;align-self:stretch}} /* the live page's phone rules for the three tiles; 7 px at the sides (8 on the live page) because the tile's 1 px side lines take 2 px from the inside, so the three buttons keep their width and break where they do today; the three gold tags are 15 px with 5 px at the sides (Dave's tap 2026-10-25 "Put it live" took them to 16 px; at 16 the gig work page's "Start here" broke onto two lines on phones 375 to 389 px wide, so his tap "Fix it at 15" the same night set 15, the one place a badge sits under the 16 px badge size): measured, "The path" and "Start here" keep one line on phones 375 px and wider, and 360 px and narrower wrap as the 14 px tag already did */
/* Kit's sign-up form (the front page only): Kit's script switches the focus ring off on its box and button, so the gold ring is drawn back; on phones its button and the Built with Kit link reach 44 px (the 2026-10-22 site check). The body prefix outranks Kit's own rules; the negative margin keeps the layout where it was. */
body .formkit-form[data-uid] .formkit-input:focus-visible,body .formkit-form[data-uid] .formkit-submit:focus-visible,body .formkit-form[data-uid] .formkit-powered-by-convertkit:focus-visible{outline:3px solid var(--wi-gold);outline-offset:2px}
@media (max-width:600px){body .formkit-form[data-uid] .formkit-submit>span{padding-top:13.5px;padding-bottom:13.5px}body .formkit-form[data-uid] .formkit-powered-by-convertkit{height:44px;margin:-4px auto}}

/* the gig work page (gig-work.html): the pyramid (the wide free tile, cover at the left, words at the right; the three-tile row shares .tier3 above; the two small tools), the two step labels, the store strip, the three bottom buttons. Version 5. Only this page carries these classes. */
.center{text-align:center}
.kind{font-size:15px;color:var(--wi-muted)} /* 14 px on the old stylesheet; the type floor is 15 */
.pyr{display:grid;gap:22px}
.pyr .tier1{display:grid;justify-content:stretch}
.pyr .tier1 .tile{max-width:none;width:100%;flex-direction:row}
.pyr .tier1 .tile .cover{width:44%;flex:0 0 44%;height:auto;object-fit:cover;align-self:stretch}
.pyr .tier1 .tile .body{text-align:left;align-items:flex-start;justify-content:center;padding:18px 21px} /* 22 px at the sides on the old stylesheet; the tile's 1 px side lines take 2 px from the inside */
.pyr .tier1 .tile .btn{align-self:flex-start}
.tile.free{padding:0;text-align:left} /* .free is also the free page's tracker box above; here it is a tile and keeps the tile's shape */
.tile.free p{margin:0;max-width:none}
.tier2{list-style:none;margin:0 auto;padding:0;display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;width:100%}
.strip{background:var(--wi-surface);border:1px solid var(--wi-line);border-left:6px solid var(--wi-gold);border-radius:var(--wi-radius);box-shadow:var(--wi-shadow);padding:18px 20px;margin-top:28px;text-align:center}
.strip p{margin:0 0 12px}
.strip .btn::after{content:none} /* the new-tab arrow's reserved width would widen "Browse the full store"; the line under the button already says it opens a new tab */
.row3{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-top:22px}
@media (max-width:600px){.pyr .tier1 .tile{flex-direction:column}.pyr .tier1 .tile .cover{width:100%;flex:none}.pyr .tier1 .tile .body{padding:14px 13px}}
@media (max-width:420px){.tier2{gap:10px}.tier2 .kind{flex-basis:100%}.strip .btn,.row3 .btn{font-size:15px;padding:11px 14px}.row3 .btn.ghost,.tier2 .tile .btn.ghost{padding:11px 18px}} /* the old stylesheet shrank every button on small phones and kept the outlined ones' side padding; the same here, so this page's buttons keep the size they have today. The "AI prompt" label takes its own line under the price in both small tools on phones: at 390 px the price badge plus the label no longer fit one line in a tile 166 px wide (the old stylesheet broke them on one tile at 360 and on both at 320) */

/* the members site (members.wrightideasshop.com, body.members-site): the cream bar with the deep red mark, the one card, the fields and buttons, the tags, the footer band. Version 6, 2026-10-25; version 8 adds the --line name. Written with :where(body.members-site), which adds no weight, so these rules beat the base rules above by order alone and a members page's own style block (the tool page, the review page, the guide) still wins a tie. The rules written as plain body.members-site win on purpose over the tool page's own strings: 8 px corners and the gold top on its steps and panels, and the full width on tool pages (the corners and the deep red are Dave's rulings of 2026-10-24; the full width is rule 8 of the Website Style Standard, ruled 2026-10-25: keep it as it is). No public page carries body.members-site, so nothing here reaches them. The live members site reads this block since 2026-10-25 4:59 AM (Dave's tap "Apply it to the real members site"); the four test copies came down at 5:00 AM. */
:where(body.members-site){--line:var(--wi-line)} /* the old shell's name for the thin border colour; the tool page's own rules read it, and without this line the copies drew no borders on the steps, panels, tabs and prompt box (version 8) */
body.members-site{border-left:0} /* no bright red left-edge stripe on members pages (Dave's tap 2026-10-25, "Take the red stripe off the members pages"); the public pages keep theirs from the body rule above. Written as plain body.members-site because :where carries no weight and the body rule would win */
:where(body.members-site) header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 24px;background:var(--wi-ground);border-bottom:1px solid var(--wi-line);text-align:left}
:where(body.members-site) header b{color:var(--wi-action);font-family:"Archivo Black","Arial Black",Arial,sans-serif;font-weight:400;font-size:clamp(22px,5vw,30px);letter-spacing:4px;line-height:1.1}
:where(body.members-site) header nav{display:flex;gap:6px;flex-wrap:wrap}
:where(body.members-site) header a{font-weight:700;font-size:16px;color:var(--wi-ink);text-decoration:none;padding:8px 10px;border-bottom:3px solid transparent;border-radius:var(--wi-radius) var(--wi-radius) 0 0;transition:border-color .15s,color .15s}
:where(body.members-site) header a:hover{border-bottom-color:var(--wi-action);color:var(--wi-action)}
:where(body.members-site) main{width:min(960px,calc(100% - 48px));margin:0 auto;padding:16px 0 8px}
body.members-site main.wide{width:min(1320px,calc(100% - 48px));max-width:none;padding:16px 0 8px} /* tool pages use the width (the standard's rule 8, ruled 2026-10-25: keep it as it is); wins over the tool page's own main.wide */
:where(body.members-site) .row h3{margin:0 0 6px;font-size:20px}
:where(body.members-site) .card{background:var(--wi-surface);border:1px solid var(--wi-line);border-top:4px solid var(--wi-gold);border-radius:var(--wi-radius);box-shadow:var(--wi-shadow);padding:20px;margin:14px 0}
:where(body.members-site) .card.row{display:block} /* .row above is the public pages' button row; a members card is a block */
:where(body.members-site) .card p{margin:10px 0 0}
:where(body.members-site) input,:where(body.members-site) select,:where(body.members-site) textarea{font:inherit;font-size:17px;padding:12px 14px;border:2px solid var(--wi-ink);border-radius:var(--wi-radius);background:var(--wi-surface);color:var(--wi-ink);max-width:100%}
:where(body.members-site) input:focus-visible,:where(body.members-site) select:focus-visible,:where(body.members-site) textarea:focus-visible{outline:3px solid var(--wi-gold);outline-offset:2px}
:where(body.members-site) button{font:inherit;font-weight:700;font-size:16px;line-height:1.25;background:var(--wi-action);color:var(--wi-surface);border:0;cursor:pointer;padding:13px 20px;border-radius:var(--wi-radius);transition:background .15s,transform .15s,box-shadow .15s}
:where(body.members-site) button:hover{background:var(--wi-action-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(138,20,13,.25)}
:where(body.members-site) button:active{transform:none;box-shadow:none}
:where(body.members-site) .tabs button:hover{background:var(--wi-ground);border-color:var(--wi-action);color:var(--wi-action);box-shadow:none}
:where(body.members-site) .tabs button[aria-selected=true]:hover{background:var(--wi-action-hover);color:var(--wi-surface);border-color:var(--wi-action-hover)}
body.members-site .tabs button[aria-selected=true]{background:var(--wi-action);color:var(--wi-surface);border-color:var(--wi-action)} /* the chosen tab: deep red carries white (6.9 to 1), the brand rule; the tool page's own string says ink, which the checker flags as glare */
body.members-site .tabs button[aria-selected=true]:hover{background:var(--wi-action-hover);border-color:var(--wi-action-hover)}
:where(body.members-site) .dl .btn:hover{background:var(--wi-action);color:var(--wi-surface)}
:where(body.members-site) .err{color:var(--wi-action);font-weight:700}
:where(body.members-site) .muted{color:var(--wi-muted);font-size:15px}
:where(body.members-site) .tag{margin-right:4px}
:where(body.members-site) .tag.status,:where(body.members-site) .tag.tested{background:var(--wi-gold);color:var(--wi-ink)}
:where(body.members-site) label{display:block;margin:12px 0;font-weight:600}
:where(body.members-site) label input,:where(body.members-site) label select,:where(body.members-site) label textarea{width:100%;margin-top:6px;font-weight:500}
:where(body.members-site) .filters{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
:where(body.members-site) .filters>*{flex:1 1 10rem}
:where(body.members-site) .pager{display:flex;justify-content:space-between;gap:12px;margin:18px 0}
:where(body.members-site) .wm{position:fixed;right:8px;bottom:6px;font-size:15px;color:var(--wi-muted);background:var(--wi-ground);padding:2px 8px;border-radius:var(--wi-radius);pointer-events:none;user-select:none} /* the membership mark: 12 px and faint on the old shell; the type floor is 15, so it reads, on a cream pill so it never sits on words */
:where(body.members-site) footer.muted{color:var(--wi-surface);font-size:15px;padding:24px;line-height:1.6}
:where(body.members-site) .card.row>div>a,:where(body.members-site) main .muted a{display:inline-block;padding:11px 0;margin:-5px 0} /* the card's Website, Sign up and Gear links, the terms link under the sign-in form, the breadcrumb on a tool page: 44 px tall to tap, the line kept tight by the margin */
:where(body.members-site) .row h3 a{display:inline-block;padding:11px 0;margin:-11px 0} /* the card's title link on the Master List, 44 px tall to tap */
:where(body.members-site) .row h3 a::after{content:"";display:inline-block;width:16px;height:16px;margin:2px 0 0 4px;vertical-align:top;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.53 4.75A.75.75 0 0 1 5.28 4h6.01a.75.75 0 0 1 .75.75v6.01a.75.75 0 0 1-1.5 0v-4.2l-5.26 5.261a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L9.48 5.5h-4.2a.75.75 0 0 1-.75-.75Z'/%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 16 16'%3E%3Cpath d='M4.53 4.75A.75.75 0 0 1 5.28 4h6.01a.75.75 0 0 1 .75.75v6.01a.75.75 0 0 1-1.5 0v-4.2l-5.26 5.261a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L9.48 5.5h-4.2a.75.75 0 0 1-.75-.75Z'/%3E%3C/svg%3E") center/contain no-repeat} /* a plain arrow at the end of each app's name on the list, Start Here and My Tracker cards, so people see the name opens that app's page (Dave's tap 2026-10-26 "Plain arrow, put it live", Octicons arrow-up-right, MIT); plain, not the box and arrow, because the name stays on the site and the box mark means a link that leaves it */
:where(body.members-site) details.prompt summary{padding:9px 0} /* "See the whole prompt": 44 px tall to tap */
body.members-site .step,body.members-site .panel{border-radius:var(--wi-radius);border-top:4px solid var(--wi-gold)} /* the one card: 8 px corners and the gold top; the tool page's own strings say 12 px and a plain line */
body.members-site .step .n{color:var(--wi-action)} /* the tool page made easier to read (Dave's tap 2026-10-25 "Tool page easier to read"): the step numbers in deep red (6.9 to 1 on white; the bright red was 4.2), the prompt text 16 px (was 14), the copy button's done green and its "Now paste it" line in the kit green #2E7D4F (they were #1F7A3A; white on it 5.1 to 1, the line on white 5.1) */
body.members-site pre.ptext{font-size:16px}
body.members-site .copy.done{background:var(--wi-ok)}body.members-site .ok{color:var(--wi-ok)}
@media (max-width:600px){:where(body.members-site) main{width:calc(100% - 32px)}body.members-site main.wide{width:calc(100% - 32px)}:where(body.members-site) header{padding:10px 16px}:where(body.members-site) header a{padding-top:9px;padding-bottom:9px}:where(body.members-site) button{min-height:44px}:where(body.members-site) .card{padding:16px 15px}}
@media (max-width:600px){body.members-site .card.row>p+div:not(.acts){font-size:0;line-height:0}body.members-site .card.row>p+div>a{display:block;font-size:17px;line-height:1.55;padding:11px 0;margin:0}} /* the Master List card's Website, Sign up and Gear links stack one per line on phones (Dave's tap 2026-10-25, "Fix the wrapping links on the Master List phone cards"): the links div is the one after the card's <p>, its " · " separators vanish at font-size 0 and each link gets its size back as a 44 px block; plain selectors so these beat the inline-block rule above */
:where(body.members-site) .card.row>div>.gearline>a{display:inline-block;padding:11px 0;margin:-5px 0} /* the members card's "Shop gear" link and its "Ad" tag kept side by side (Dave's dictation 2026-10-25: the Amazon words go once at the bottom, the card keeps only "Ad"), the link as tall to tap as Website and Sign up */
@media (max-width:600px){body.members-site .card.row>p+div>.gearline{display:flex;font-size:17px;line-height:1.55}body.members-site .card.row>p+div>.gearline>a{display:block;padding:11px 0;margin:0}} /* on phones the "Ad" tag stays beside "Shop gear" on its own row, like the stacked Website and Sign up links */

/* footer: deep red carries the white text, at 700 as the kit sets footers */
footer{background:var(--wi-action);color:var(--wi-surface);margin-top:48px;padding:24px 0;font-weight:700;font-size:15px;text-align:center}
footer a{color:var(--wi-surface);display:inline-block;padding:3px 2px;margin:0 -2px}
footer a:hover{color:var(--wi-surface)}
footer p{margin:4px 0}
a[href^="mailto:"]{display:inline-block;max-width:100%;overflow-wrap:anywhere;padding:3px 0;margin:0}

/* phones: 44 px tap targets (the 2026-10-22 site check rulings, carried over) */
@media (max-width:600px){footer a{padding:11px 7px;margin:0 -7px}a[href^="mailto:"]{padding:11px 0}footer .sep{display:none}footer .follow a{margin:0 4px}}
@media (max-width:600px){.jump{line-height:1.5}.jump a{display:inline-block;padding:11px 4px}.small a{display:inline-block;padding:11px 0}}
@media (max-width:600px){a.mark{display:inline-block;padding:10px 0;margin:-10px 0}nav.top .links a{padding-top:9px;padding-bottom:9px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}.soonline a,.next a,.also a{padding:13px 0}}

/* motion off when the phone asks for it */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.btn:hover,.chip:hover,:where(body.members-site) button:hover{transform:none}}

/* the red lettering kept crisp (Dave's round 3 parts 6, 12 and 13, 2026-10-27: the mark and the footer read blurry). On Windows
   the red letters drew with yellow and blue edges; this draws them plain, measured on a 3x zoom: the mark's edging down about 90%, the footer's gone. */
.mark,:where(body.members-site) header b,footer{filter:grayscale(0)}

/* card tops as real text (2026-10-28): sizes are covers7's, in parts of the card width, so they stay crisp at any width */
.tile .cover.cv{position:relative;container-type:inline-size;aspect-ratio:1005/565;background:var(--wi-ground);overflow:hidden}
.cv .in{position:absolute;left:0;right:0;top:0;bottom:max(6.368cqw,18px);padding:0 5.373cqw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.cv .bd{display:inline-block;background:var(--wi-gold);color:var(--wi-ink);font-weight:800;font-size:max(2.786cqw,12px);line-height:1.2;letter-spacing:.07em;padding:.6cqw 1.79cqw;border-radius:.4cqw}
.cv .tt{font-family:"Archivo Black","Arial Black",Arial,sans-serif;font-size:6.965cqw;line-height:1.02;letter-spacing:.03em;text-transform:uppercase;color:var(--wi-ink);margin-top:2.587cqw}
.cv .ln{font-weight:600;font-size:max(2.786cqw,12px);line-height:1.2;color:var(--wi-ink);margin-top:2.189cqw;white-space:nowrap}
.cv .ft{position:absolute;left:0;right:0;bottom:0;height:max(6.368cqw,18px);background:var(--wi-action);color:var(--wi-ground);font-weight:800;font-size:max(2.786cqw,12px);letter-spacing:.07em;padding:0 5.373cqw;display:flex;align-items:center}
/* the red name drawn sharp (Dave's round 4, 2026-10-28: still blurry after the 10/27 fix). On an ordinary 1x screen the browser gives red lettering soft grey edges;
   mark-30.png is the same name at the same size with every upright stroke on whole pixels. Wider screens than 600 px only (where the name is 30 px); phones and sharp screens keep the live text. The words stay in the page for readers and search. */
@media (min-width:601px) and (max-resolution:1.01dppx){nav.top .mark,:where(body.members-site) header b{display:inline-block;width:297px;height:33px;overflow:hidden;white-space:nowrap;color:transparent;background:url(/mark-30.png) no-repeat 0 0;filter:none;vertical-align:middle}}
/* one footer on every page (Dave's round 4, 2026-10-28: the members footer, one wide band with the links on one line and the notice under it, is the one he wants everywhere). The public footer takes the members spacing; size and weight stay as both are live (15 px, 700) */
footer{padding:24px 0;line-height:1.6}footer p{margin:0}footer .wrap{width:calc(100% - 48px)}
/* link marks by kind on the members site (Dave's round 4 parts 7 and 13, 2026-10-28): a button that opens another page (in this tab or a new one) carries the little box with the arrow in its top right corner, like the store buttons; a download shows a download sign in its bottom right corner when the pointer is on it */
body.members-site a.btn:not([href^="/get/"]),body.members-site a.btn[href^="/get/"][target="_blank"]{position:relative;padding-right:26px}
body.members-site a.btn:not([href^="/get/"])::after,body.members-site a.btn[href^="/get/"][target="_blank"]::after{content:"";position:absolute;top:4px;right:4px;width:12px;height:12px;margin:0;opacity:1;transform:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%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 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%3E%3C/svg%3E") center/contain no-repeat}
body.members-site a.btn[href^="/get/"]:not([target="_blank"]){position:relative;padding-right:26px}
body.members-site a.btn[href^="/get/"]:not([target="_blank"])::after{content:"";position:absolute;bottom:4px;right:4px;width:13px;height:13px;margin:0;opacity:0;transform:none;transition:opacity .15s;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z'/%3E%3Cpath d='M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z'/%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 16 16'%3E%3Cpath d='M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z'/%3E%3Cpath d='M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z'/%3E%3C/svg%3E") center/contain no-repeat}
body.members-site a.btn[href^="/get/"]:not([target="_blank"]):is(:hover,:focus-visible)::after{opacity:1}
/* the box arrow hides until the pointer is on the button, the same as the download sign, so every button shows what it will do only when you point at it (Dave's dictation 2026-10-28 10:52 PM: "hide the arrows until you cursor over them, so there's a uniformity to them") */
body:not(.members-site) .btn.corner::after,body:not(.members-site) .btn[href^="http"]:not([href*="wrightideasshop.com"])::after,body.members-site .btn[href^="http"]:not([href*="wrightideasshop.com"])::after,body.members-site a.btn:not([href^="/get/"])::after,body.members-site a.btn[href^="/get/"][target="_blank"]::after{opacity:0;transition:opacity .15s}
body:not(.members-site) .btn.corner:is(:hover,:focus-visible)::after,body:not(.members-site) .btn[href^="http"]:not([href*="wrightideasshop.com"]):is(:hover,:focus-visible)::after,body.members-site .btn[href^="http"]:not([href*="wrightideasshop.com"]):is(:hover,:focus-visible)::after,body.members-site a.btn:not([href^="/get/"]):is(:hover,:focus-visible)::after,body.members-site a.btn[href^="/get/"][target="_blank"]:is(:hover,:focus-visible)::after{opacity:1}

/* one button everywhere (Dave's dictation 2026-10-28 10:58 PM on the home page: "Start the path lights up, but there's no arrow... Sign me up just has a complete button"): every button on the public site carries the box arrow, hidden until the pointer is on it, and Kit's Sign me up button pops the same way as ours */
body:not(.members-site) a.btn{position:relative;padding-right:26px}body .formkit-form[data-uid] .formkit-submit{position:relative} /* Kit draws its own colour on the words inside its button, so its button gets no extra room on the right; the mark sits in the corner over it */
body:not(.members-site) a.btn::after,body .formkit-form[data-uid] .formkit-submit::after{content:"";position:absolute;top:4px;right:4px;width:12px;height:12px;margin:0;transform:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%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 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transition:opacity .15s}
body:not(.members-site) a.btn:is(:hover,:focus-visible)::after,body .formkit-form[data-uid] .formkit-submit:is(:hover,:focus-visible)::after{opacity:1}
body .formkit-form[data-uid] .formkit-submit{transition:transform .15s,box-shadow .15s}
body .formkit-form[data-uid] .formkit-submit:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--wi-gold)}
body .formkit-form[data-uid] .formkit-submit:active{transform:none;box-shadow:none}
body .formkit-form[data-uid] .formkit-submit{background-color:var(--wi-surface)!important;color:var(--wi-action)!important;box-shadow:inset 0 0 0 2px var(--wi-action);border-radius:var(--wi-radius)!important;font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-weight:700!important}body .formkit-form[data-uid] .formkit-submit:hover{background-color:var(--wi-action)!important;color:var(--wi-surface)!important} /* Kit writes its button colours on the button itself, so these carry !important to make Sign me up the same white button with the red edge as every other one (Dave's tap 2026-10-28 11:08 PM) */
/* drop-downs on both sites (Dave's round 4, 2026-10-28): the choice under the pointer is deep red with white letters, the open menu is a white box with a dark edge, the chosen one is bold; browsers without the styleable drop-down keep their own */
select,::picker(select){appearance:base-select}
select{background:var(--wi-surface);display:inline-flex;align-items:center}
select::picker-icon{color:var(--wi-ink)}
::picker(select){border:2px solid var(--wi-ink);border-radius:8px;background:var(--wi-surface);padding:4px 0;margin-top:4px;box-shadow:var(--wi-shadow-menu)}
option{padding:8px 14px;font:inherit}
option::checkmark{display:none}
option:is(:hover,:focus-visible){background:var(--wi-action);color:var(--wi-surface)}
option:checked{font-weight:700}
/* the per-page chooser on every list longer than 10, both sites (Dave's tap "Lists longer than 10", 2026-10-28): Previous, Show [25] per page, Next */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}
.pager .per{margin:0;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--wi-ink)}
.pager .per select{width:auto;flex:none;margin:0;font:inherit;font-size:17px;padding:8px 12px;border:2px solid var(--wi-ink);border-radius:var(--wi-radius);color:var(--wi-ink)}
/* Master List category tags orange with black letters; the status badge is a slim link to that app on My Tracker, red with the box arrow under the pointer (Dave, 2026-10-28) */
body.members-site .plat .pmeta .tag{background:var(--wi-gold);color:var(--wi-ink)}
body.members-site .plat a.tag.status{display:block;position:relative;padding:3px 21px 3px 9px;margin:2px 0 0;text-decoration:none;transition:background .15s,color .15s}
body.members-site .plat a.tag.status:is(:hover,:focus-visible){background:var(--wi-action);color:var(--wi-surface)}
body.members-site .plat a.tag.status::after{content:"";position:absolute;top:3px;right:4px;width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%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 16 16'%3E%3Cpath d='M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transition:opacity .15s}
body.members-site .plat a.tag.status:is(:hover,:focus-visible)::after{opacity:1}
/* My Tracker: the row the Master List badge lands on gets a gold frame */
body.members-site .card.row[id^="t-"]{scroll-margin-top:24px}
body.members-site .card.row:target{box-shadow:inset 6px 0 0 var(--wi-gold),0 0 0 3px var(--wi-gold)}

/* text cards on a phone (2026-10-29): one under 130px shows the band as a plain stripe, so nothing spills out of the box. The small words have a 12px floor (Dave's tap 2026-11-01, pick 6:
   "Bigger, drop the line on small cards"), so on a card under 460px the line wraps to a second line instead of running off, and a card under 240px (phones) still drops it. On a card under 240px the red band keeps its colour but drops its words (Dave's tap 2026-11-01, "Yes, all live plus the phone fix"): at 12px they wrapped to two lines and spilled out of the band on 18 store and home cards; the chips under the card already name the kind */
@container (max-width:240px){.cv .ln{display:none}.cv .ft{font-size:0}}@container (max-width:460px){.cv .ln{white-space:normal}}@container (max-width:130px){.cv .in{bottom:6.368cqw}.cv .ft{height:6.368cqw;font-size:0}}

/* phones (2026-10-29): "Also on Whop, Payhip and Etsy" takes its own footer line with the commas tight; the other follow links keep their 44 px tap rows */
@media (max-width:600px){footer .follow .stores{display:block}footer .follow .stores a{margin:0;padding:11px 0}footer .follow .stores a:last-child{padding:11px 6px;margin:0 -6px}} /* Etsy, the shortest word, gets 6 px of tap room a side so it is 44 px wide like the others (2026-10-30, Dave's tap "Fix both"); the margin takes the 6 px back, so nothing moves */

/* the comparison table on the two free lists, /start and /remote-start (2026-11-01, Dave's tap "Reshape the two pages in place", the comparison pages brief): the whole list as one table inside the one card look (white, thin line, gold top, 8 px corners), the heading row deep red with white letters, every pay figure beside where it came from and the date it was checked, the name a link to that card below. Body 16 px, headings 15 px at 700 (the type floor, rule 6). On a phone (under 700 px) the heading row is kept for screen readers only and each row stacks its cells with the column name at the left, drawn from data-l, so nothing scrolls sideways at 320 px (rule 5). */
.cmp{background:var(--wi-surface);border:1px solid var(--wi-line);border-top:4px solid var(--wi-gold);border-radius:var(--wi-radius);box-shadow:var(--wi-shadow);overflow:hidden;margin-top:18px}
.cmp table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.cmp caption{text-align:left;padding:14px 16px 10px;font-weight:700;font-size:16px}
.cmp th,.cmp td{padding:10px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--wi-line)}
.cmp thead th{background:var(--wi-action);color:var(--wi-surface);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.03em;border-top:0;white-space:nowrap}
.cmp tbody th{font-weight:700;white-space:nowrap}
.cmp tbody th a{font-weight:700;display:inline-block;padding:3px 0;margin:-3px 0} /* the name link is a 24 px tap target (the check found 19 px); the margin takes the padding back so the row height does not move */
.cmp tbody tr:nth-child(even){background:var(--wi-ground)}
.cmp .src{color:var(--wi-muted)}
.cmp .when{white-space:nowrap}
@media (max-width:700px){
.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp table,.cmp caption,.cmp tbody,.cmp tr{display:block} /* the caption too: as a table-caption inside a block it shrank to one word a line at 390 px */
.cmp tbody tr{border-top:1px solid var(--wi-line);padding:6px 0 10px}
.cmp tbody th{display:block;border-top:0;padding:0 14px;font-size:17px;white-space:normal}
.cmp tbody th a{display:block;padding:12px 0 9px;margin:0} /* on a phone the name link is the whole line, 44 px tall (the check flagged 30 px) */
.cmp td{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:0 10px;border-top:0;padding:3px 14px}
.cmp td::before{content:attr(data-l);font-weight:700;font-size:15px;color:var(--wi-action)}
.cmp .when{white-space:normal}
}