/* Where's My Drive — guides & SEO pages. Same tokens as the landing page. */
:root{
  --ink:#201D18; --surface:#2A2620; --surface-2:#332E27; --paper:#F0EAD9;
  --amber:#E3A73B; --amber-dark:#8C6320; --teal:#5C9C8E; --teal-dark:#2E4E47;
  --text:#EEE7D6; --text-mute:#A79D89; --line:rgba(238,231,214,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--ink); color:var(--text); font-family:'IBM Plex Mono', monospace; line-height:1.65;}
img{max-width:100%; height:auto;}
a{color:var(--amber);}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-.01em; line-height:1.15;}
.wrap{max-width:1040px; margin:0 auto; padding:0 32px;}
.narrow{max-width:760px; margin:0 auto;}

/* header */
.top{position:sticky; top:0; z-index:40; background:rgba(32,29,24,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:62px;}
.logo{display:inline-flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:600; font-size:19px; color:var(--text); text-decoration:none;}
.logo-mark{width:30px; height:30px; border-radius:7px; flex:none;}
.logo span{color:var(--amber);}
.nav{display:flex; gap:24px; font-size:14px;}
.nav a{color:var(--text-mute); text-decoration:none;}
.nav a:hover, .nav a.on{color:var(--amber);}
.btn{display:inline-block; font:600 14px 'IBM Plex Mono', monospace; padding:10px 18px; border-radius:4px; text-decoration:none; cursor:pointer; border:none;}
.btn-amber{background:var(--amber); color:#241A06;}
.btn-ghost{border:1px solid var(--line); color:var(--text); background:transparent;}
@media (max-width:820px){ .nav{display:none;} }

/* article */
.crumbs{font-size:12px; color:var(--text-mute); padding:22px 0 0;}
.crumbs a{color:var(--text-mute); text-decoration:none;}
.crumbs a:hover{color:var(--amber);}
.hero-a{padding:26px 0 30px;}
.kicker{font-size:14px; color:var(--teal); margin-bottom:12px;}
.hero-a h1{font-size:50px; margin:0 0 18px;}
.lead{font-size:18px; color:var(--text-mute); max-width:720px; margin:0;}
.meta{font-size:12px; color:var(--text-mute); margin-top:18px;}
.cover{margin:10px 0 36px; border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.cover img{display:block; width:100%; aspect-ratio:21/9; object-fit:cover;}
article.body{font-size:16px; padding-bottom:30px;}
article.body h2{font-size:32px; margin:48px 0 14px;}
article.body h3{font-size:22px; margin:30px 0 10px;}
article.body p{margin:0 0 16px; color:#DDD5C3;}
article.body ul, article.body ol{margin:0 0 18px; padding-left:22px; color:#DDD5C3;}
article.body li{margin:6px 0;}
article.body strong{color:var(--text);}
article.body code{background:var(--surface-2); padding:2px 6px; border-radius:4px; font-size:14px; color:var(--amber);}
article.body blockquote{margin:22px 0; padding:14px 20px; border-left:3px solid var(--teal); background:rgba(92,156,142,.08); color:var(--text-mute);}
.toc{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px 22px; margin:0 0 30px; font-size:14px;}
.toc b{display:block; margin-bottom:8px; font-family:'Fraunces',serif; font-weight:500; font-size:17px;}
.toc ol{margin:0; padding-left:20px;}
.toc a{color:var(--text-mute); text-decoration:none;}
.toc a:hover{color:var(--amber);}
figure.fig{margin:26px 0; }
figure.fig img{display:block; width:100%; border-radius:10px; border:1px solid var(--line);}
figure.fig figcaption{font-size:12px; color:var(--text-mute); margin-top:8px;}
.table-wrap{overflow-x:auto; margin:20px 0 26px; border:1px solid var(--line); border-radius:10px;}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px;}
th, td{padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
th{font-family:'Fraunces',serif; font-weight:500; font-size:15px; background:var(--surface); color:var(--text);}
tr:last-child td{border-bottom:none;}
td{color:#DDD5C3;}
.callout{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:8px; padding:16px 18px; margin:24px 0; font-size:15px;}
.callout .ic{font-size:20px; line-height:1.3;}
.callout p{margin:0 !important;}

/* inline CTA */
.cta-box{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:linear-gradient(135deg, #2f2a22, #26221c); border:1px solid rgba(227,167,59,.45); border-radius:12px; padding:22px 24px; margin:34px 0;}
.cta-box h3{margin:0 0 6px !important; font-size:22px;}
.cta-box p{margin:0 !important; color:var(--text-mute) !important; font-size:14px;}
.cta-box .acts{display:flex; gap:10px; flex-wrap:wrap;}
@media (max-width:700px){ .cta-box{grid-template-columns:1fr;} }

/* product cards (printers) */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:24px 0 30px;}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, transform .15s;}
.pcard:hover{border-color:var(--amber); transform:translateY(-2px);}
.pcard .pimg{background:#fff; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.pcard .pimg img{width:100%; height:100%; object-fit:contain;}
.pcard .pbody{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pcard h3{margin:0 !important; font-size:20px !important;}
.pcard .tag{align-self:flex-start; font-size:11px; letter-spacing:.04em; text-transform:uppercase; background:var(--teal-dark); color:#D9EDE7; padding:3px 8px; border-radius:3px;}
.pcard .tag.best{background:var(--amber); color:#241A06;}
.pcard ul{list-style:none; padding:0 !important; margin:0 !important; font-size:13px;}
.pcard li{padding:5px 0; border-top:1px dashed var(--line); margin:0 !important; color:var(--text-mute) !important;}
.pcard li b{color:var(--text); font-weight:500;}
.pcard .pfor{font-size:13px; color:#DDD5C3; margin:0 !important;}
.pcard .btn{margin-top:auto; text-align:center;}
@media (max-width:900px){ .pgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pgrid{grid-template-columns:1fr;} }
.disclosure{font-size:12px; color:var(--text-mute); border:1px dashed var(--line); border-radius:8px; padding:10px 14px; margin:18px 0;}

/* picker */
.pick{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:24px 0;}
.pick .q{font-family:'Fraunces',serif; font-size:20px; margin-bottom:12px;}
.pick .opts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.pick button{font:13px 'IBM Plex Mono',monospace; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--text-mute); cursor:pointer;}
.pick button.on, .pick button:hover{border-color:var(--amber); color:var(--text);}
.pick .ans{min-height:60px; font-size:15px; color:#DDD5C3;}
.pick .ans b{color:var(--amber);}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; padding:16px 34px 16px 0; position:relative; font-family:'Fraunces',serif; font-size:19px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; position:absolute; right:4px; top:12px; font-size:22px; color:var(--amber); transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 18px !important;}

/* related + guides hub */
.related{margin:50px 0 10px;}
.related h2{font-size:26px !important;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px;}
.card{display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s;}
.card:hover{border-color:var(--amber); transform:translateY(-2px);}
.card .k{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal);}
.card b{font-family:'Fraunces',serif; font-weight:500; font-size:19px; line-height:1.25;}
.card span{font-size:13px; color:var(--text-mute);}
@media (max-width:860px){ .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cards{grid-template-columns:1fr;} .hero-a h1{font-size:34px;} article.body h2{font-size:26px;} .wrap{padding:0 18px;} }
.hub-sec{margin:40px 0 0;}
.hub-sec h2{font-size:28px; margin:0 0 6px;}
.hub-sec > p{color:var(--text-mute); margin:0 0 6px;}

/* final CTA + footer */
.final{margin:56px 0 0; border-radius:14px; overflow:hidden; position:relative;}
.final img{display:block; width:100%; height:340px; object-fit:cover; object-position:75% 50%;}
.final::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,18,15,.96) 0%, rgba(20,18,15,.78) 45%, rgba(20,18,15,.15) 100%);}
.final .in{position:absolute; inset:0; z-index:1; padding:40px; display:flex; flex-direction:column; justify-content:center; max-width:560px;}
.final h2{font-size:34px; margin:0 0 10px;}
.final p{color:var(--text-mute); margin:0 0 20px;}
@media (max-width:700px){ .final img{height:420px;} .final::after{background:linear-gradient(0deg, rgba(20,18,15,.97) 45%, rgba(20,18,15,.3) 100%);} .final .in{justify-content:flex-end; padding:24px;} }
footer.foot{border-top:1px solid var(--line); margin-top:60px; padding:30px 0 40px; font-size:13px; color:var(--text-mute);}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:24px;}
.foot-grid b{display:block; color:var(--text); font-family:'Fraunces',serif; font-weight:500; font-size:15px; margin-bottom:8px;}
.foot-grid a{display:block; color:var(--text-mute); text-decoration:none; padding:3px 0;}
.foot-grid a:hover{color:var(--amber);}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.logo-txt{font-weight:inherit;}