/*
Theme Name: HOWHOWAI
Version: 1.0.0
Description: A fast, accessible editorial theme for practical AI guides.
Text Domain: howhowai
*/
:root{--paper:#f7f8f5;--ink:#17271f;--muted:#64716a;--line:#dde3dc;--green:#166747;--lime:#daf58b;--white:#fff;--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #40825e;outline-offset:4px}button{cursor:pointer}img{max-width:100%;height:auto}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.13;letter-spacing:-.045em}h1{font-size:clamp(38px,5vw,64px);font-weight:650}h2{font-size:clamp(27px,3vw,38px);font-weight:620}h3{font-size:22px;font-weight:600}.container{max-width:1240px;margin:auto;padding:0 38px}.site-header{border-bottom:1px solid var(--line);background:var(--paper)}.header-inner{max-width:1320px;padding:25px 38px;margin:auto;display:flex;align-items:center;gap:36px}.brand{display:inline-flex;align-items:center;white-space:nowrap;font-size:22px;font-weight:850;letter-spacing:-1px;line-height:1}.brand-ai{color:var(--green)}.brand-dot{color:#729144}.brand-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:34px;font-size:35px;background:var(--ink);color:var(--paper);border-radius:8px;margin-right:10px;line-height:1}.brand-mark span{font-size:18px;position:absolute;right:2px;top:1px;color:var(--lime)}#main-nav{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:550}#main-nav a:hover{color:var(--green)}.header-cta{border:1px solid #b7c5b9;border-radius:8px;padding:9px 15px;font-size:13px;font-weight:600}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;padding:62px 0 52px;align-items:center}.pill{display:inline-flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:30px;padding:6px 11px;font-size:10px;letter-spacing:1.3px;font-weight:700;margin-bottom:23px}.pill span{width:6px;height:6px;background:#578254;border-radius:100%}.hero h1{font-size:clamp(48px,5.6vw,76px);line-height:1.04;margin-bottom:22px;letter-spacing:-.065em}.hero h1>span{color:var(--green)}.hero-description{font-size:17px;line-height:1.65;max-width:490px;color:var(--muted);margin-bottom:26px}.search-form{position:relative;display:flex;gap:10px;align-items:center;max-width:620px;background:white;border:1px solid #cdd8cf;padding:7px 7px 7px 14px;border-radius:10px;box-shadow:0 4px 15px #18302405}.search-form>span{font-size:28px;color:var(--muted)}.search-form input{border:0;background:transparent;min-width:0;flex:1;font-size:13px;padding:8px 0;outline-offset:0}.search-form button{border:0;background:var(--ink);color:white;border-radius:6px;font-size:12px;padding:12px 16px}.search-form button span{padding-left:9px}.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 24px #17271f18;padding:8px}.search-results a{display:block;padding:10px 12px;font-size:14px;border-radius:5px}.search-results a:hover{background:var(--paper)}.popular-searches{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin-top:13px}.popular-searches a{border-bottom:1px solid #bdc5bd}.hero-feature{border-radius:20px;background:#eaf0e6;border:1px solid #dce6d7;padding:25px 28px;position:relative;overflow:hidden}.feature-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{display:block;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:750;color:var(--green)}.feature-symbol{font-size:38px;color:var(--green);line-height:1}.feature-visual{padding:19px 14px 22px;transform:rotate(-3deg)}.prompt-note{padding:11px 15px;background:white;border:1px solid #dbe3d6;border-radius:9px;font-size:14px;box-shadow:0 4px 5px #17271f04;display:flex;align-items:center;gap:10px}.note-dot{height:9px;width:9px;border-radius:50%;background:#b3cb83}.note-cursor{margin-left:auto;color:#98a899}.step-note{background:#f8faf5;border:1px solid #dbe3d6;border-radius:7px;margin:7px 0 0 35px;padding:6px 12px;font-size:12px}.step-note span{font-size:10px;font-weight:700;padding-right:12px;color:#6d8b5e}.hero-feature h2{font-size:29px;letter-spacing:-1px;margin-bottom:10px}.hero-feature p{font-size:13px;color:var(--muted);margin-bottom:18px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:0;border-radius:7px;padding:12px 18px;font-size:13px;font-weight:600}.dark{background:var(--ink);color:white}.dark:hover{background:var(--green)}.hero-feature .button{width:100%;justify-content:space-between}.topic-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;display:flex;justify-content:space-between;gap:18px;font-size:13px}.topic-bar>span{color:var(--muted);font-size:11px;align-self:center}.topic-bar a:hover{color:var(--green)}.section{padding:53px 0 5px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.section-heading h2{font-size:29px;margin-bottom:8px}.section-heading p{font-size:14px;color:var(--muted);margin-bottom:0}.section-heading>a{font-size:12px;white-space:nowrap}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{display:flex;flex-direction:column;position:relative;border:1px solid var(--line);background:white;padding:25px;border-radius:12px;transition:transform .2s,border-color .2s;min-height:236px}.card:hover{transform:translateY(-3px);border-color:#94b19b}.card .eyebrow{margin-bottom:15px;font-size:9px}.card h3{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin-bottom:12px}.card p{font-size:13px;line-height:1.65;color:var(--muted);margin-bottom:20px}.card-link{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:650;margin-top:auto}.card-link span{font-size:18px}.editorial-banner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:39px 42px;background:#e8edde;border-radius:15px;margin:45px 0 0}.editorial-banner .eyebrow{margin-bottom:15px}.editorial-banner h2{font-size:35px;margin-bottom:15px}.editorial-banner p{color:#58634e;font-size:14px}.text-link{font-size:13px;font-weight:650;border-bottom:1px solid #718775;padding-bottom:4px}.mini-comparison{display:flex;justify-content:space-between;padding:25px 28px;background:#f8faf3;border-radius:12px;transform:rotate(2deg);box-shadow:0 7px 0 #b7c1a528}.mini-comparison>div{display:flex;flex-direction:column;gap:22px}.mini-comparison span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.mini-comparison strong,.mini-comparison a{font-size:14px;font-weight:550}.mini-comparison a{color:var(--green)}.tool-card{padding-top:22px;min-height:250px}.tool-icon{display:flex;align-items:center;justify-content:center;height:39px;width:39px;background:#eaf0e5;color:var(--green);font-size:22px;font-weight:700;border-radius:9px;margin-bottom:15px}.tool-card .eyebrow{position:absolute;top:35px;left:75px}.answers-section{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;margin-top:32px;border-top:1px solid var(--line)}.answers-section h2{margin:16px 0}.answers-section p{color:var(--muted);font-size:14px}.answer-list>a{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:19px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:550}.answer-list>a:first-child{padding-top:0}.answer-list>a span{font-size:24px;font-weight:400;color:var(--green)}.newsletter{display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--lime);padding:35px 36px;border-radius:15px;margin:50px 0 60px}.newsletter h2{font-size:28px;margin:10px 0}.newsletter p{font-size:13px;margin:0;color:#50613d}.newsletter .button{white-space:nowrap}.site-footer{border-top:1px solid var(--line);padding:42px 38px 20px;max-width:1240px;margin:auto}.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}.footer-top p{font-size:12px;color:var(--muted);margin-top:15px}.footer-top>div>a:not(.brand){display:block;font-size:12px;color:var(--muted);padding:4px 0}.footer-top strong{font-size:12px;display:block;margin-bottom:12px}.footer-bottom{border-top:1px solid var(--line);margin-top:33px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.archive-page{padding-top:35px;padding-bottom:65px}.breadcrumb{font-size:11px;color:var(--muted);margin-bottom:27px}.breadcrumb a{text-decoration:underline;text-underline-offset:3px}.archive-page h1{margin:14px 0}.archive-description{color:var(--muted);max-width:650px}.archive-cards{margin-top:30px}.pagination{margin-top:30px}.page-numbers{display:inline-block;padding:5px 14px;background:white;border-radius:6px}.page-numbers.current{background:var(--ink);color:white}.page-container{padding-top:40px;padding-bottom:65px;max-width:980px;min-height:60vh}.page-container h1{margin-bottom:30px}.article-layout{display:grid;grid-template-columns:minmax(0,800px) 220px;gap:70px;padding-top:35px}.article h1{font-size:clamp(34px,4.3vw,55px);margin:15px 0 22px}.article-deck{font-size:18px;color:var(--muted);line-height:1.7}.byline{display:flex;gap:12px;align-items:center;padding:15px 0 26px;border-bottom:1px solid var(--line);margin-bottom:30px;font-size:12px}.author-avatar{border-radius:50%;background:#dae7d5;display:flex;align-items:center;justify-content:center;width:35px;height:35px;font-weight:bold}.byline>div>span{display:block;font-size:10px;color:var(--muted)}.article-content{font-size:16px;line-height:1.85;overflow-wrap:anywhere}.article-content h2{font-size:28px;margin:38px 0 16px}.article-content h3{font-size:22px;margin:27px 0 12px}.article-content a{text-decoration:underline;color:var(--green);text-underline-offset:3px}.article-content ul,.article-content ol{padding-left:22px}.article-content li{margin-bottom:8px}.article-content blockquote,.callout{padding:20px 24px;background:#eaf0e4;border-left:3px solid #679565;margin:25px 0;border-radius:0 8px 8px 0}.article-content blockquote p:last-child{margin-bottom:0}.article-sidebar{padding-top:85px}.sidebar-sticky{position:sticky;top:35px}#table-of-contents{padding:15px 0 25px}#table-of-contents a{display:block;font-size:12px;padding:7px 0;color:var(--muted)}.sidebar-tip{padding:22px;background:#e8edde;border-radius:12px}.sidebar-tip>span{font-size:30px;color:var(--green)}.sidebar-tip h3{font-size:22px;margin:10px 0}.sidebar-tip p,.sidebar-tip a{font-size:12px}.sidebar-tip p{color:var(--muted)}.article-end{border-top:1px solid var(--line);margin-top:35px;padding-top:25px;font-size:13px}.article-end a{text-decoration:underline}.article-layout+.container{padding-bottom:60px}.tool-details{border:1px solid var(--line);background:white;padding:24px;border-radius:14px;margin-bottom:25px}.tool-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 20px}.tool-facts dt{font-size:11px;color:var(--muted)}.tool-facts dd{margin:3px 0;font-size:14px}.disclosure{font-size:12px;padding:12px 16px;background:#eff2e9;border-radius:8px;margin:16px 0}.table-wrap{max-width:100%;overflow:auto;margin:25px 0}table{border-collapse:collapse;width:100%;font-size:13px;background:white;text-align:left}th,td{border:1px solid var(--line);padding:13px;min-width:110px}th{background:#eaf0e4}.prompt-box{padding:24px;border:1px solid var(--line);background:#edf1e8;border-radius:10px}.prompt-box pre{white-space:pre-wrap;font:14px/1.85 ui-monospace,Consolas,monospace;margin-top:0}.copy-status{display:inline-block;margin-left:15px;font-size:12px}.directory-filters{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}.directory-filters a{border:1px solid var(--line);background:white;border-radius:25px;padding:5px 14px;font-size:12px}.directory-filters a.active{background:var(--ink);color:white}.contact-form{max-width:650px;display:grid;gap:15px}.contact-form label{font-size:13px;display:grid;gap:5px}.contact-form input,.contact-form textarea{width:100%;padding:10px;border:1px solid #bfcbbf;border-radius:6px;background:white}.contact-form .consent{display:flex;align-items:flex-start;gap:10px}.contact-form .consent input{width:auto;margin-top:5px}.form-status{font-size:13px}.hp-field{display:none}.empty{padding:30px;grid-column:1/-1}.ad-slot{padding:15px;border:1px solid var(--line);margin:20px 0}.ad-slot>span{display:block;font-size:10px;color:var(--muted);text-align:center}.screen-reader-text,.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{clip:auto;width:auto;height:auto;z-index:100;left:10px;top:10px;padding:10px;background:white}.notice{border:1px solid var(--line);padding:15px;background:white;border-radius:8px}.content-list{display:grid;gap:15px}.content-list>a{display:block;background:white;border:1px solid var(--line);padding:22px;border-radius:10px}.content-list h2{margin:0 0 8px;font-size:23px}.content-list p{margin:0;font-size:14px;color:var(--muted)}
@media(min-width:1450px){.hero{padding-top:75px;padding-bottom:65px}}@media(max-width:1050px){.header-inner{gap:22px}#main-nav{gap:18px}.header-cta{display:none}.hero{gap:35px}.hero h1{font-size:60px}.article-layout{gap:35px;grid-template-columns:minmax(0,1fr) 180px}.topic-bar{gap:12px}.topic-bar>span{display:none}.newsletter{align-items:flex-start;flex-direction:column}}@media(max-width:760px){.container{padding-left:22px;padding-right:22px}.header-inner{padding:21px 22px;flex-wrap:wrap}.brand{font-size:20px}.menu-toggle{display:block;margin-left:auto;border:1px solid var(--line);border-radius:6px;padding:5px 10px;background:transparent;font-size:12px}#main-nav{display:none;flex-basis:100%;flex-wrap:wrap;justify-content:space-between;margin:0;padding-top:12px}#main-nav.open{display:flex}.hero{grid-template-columns:1fr;gap:28px;padding:35px 0 30px}.hero h1{font-size:58px}.hero-description{font-size:16px}.hero-feature{padding:22px}.feature-visual{max-width:370px;margin:auto}.hero-feature h2 br{display:none}.hero-feature h2{font-size:26px}.topic-bar{overflow-x:auto;justify-content:flex-start;gap:25px;white-space:nowrap;font-size:12px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:20px}.section{padding-top:36px}.section-heading h2{font-size:25px}.section-heading p{font-size:12px}.editorial-banner{grid-template-columns:1fr;padding:27px;gap:25px;margin-top:30px}.editorial-banner br{display:none}.editorial-banner h2{font-size:31px}.mini-comparison{transform:none}.answers-section{grid-template-columns:1fr;gap:20px}.answers-section h2 br{display:none}.newsletter{padding:25px;margin-bottom:35px}.newsletter h2{font-size:26px}.footer-top{grid-template-columns:1fr 1fr;gap:25px}.site-footer{padding:30px 22px 20px}.footer-bottom{flex-direction:column;gap:6px}.article-layout{grid-template-columns:1fr;padding-top:25px}.article-sidebar{display:none}.article h1{font-size:39px}.article-deck{font-size:16px}.article-content{font-size:15px}.article-content h2{font-size:25px}.page-container{padding-top:25px}.page-container h1{font-size:38px}}@media(max-width:460px){.cards{grid-template-columns:1fr}.hero h1{font-size:52px}.search-form{gap:7px}.search-form input{font-size:11px}.search-form button{font-size:11px;padding:11px}.search-form button span{display:none}.section-heading{align-items:flex-start}.section-heading h2{font-size:24px}.section-heading>a{font-size:10px;padding-top:6px}.card{min-height:210px}.tool-card{min-height:225px}.popular-searches{gap:8px;font-size:10px}.footer-top{gap:25px 15px}.mini-comparison{padding:19px}.mini-comparison strong,.mini-comparison a{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}