/* holysnap.app guides — article layout on top of home.css's design system. */
.g-hero { position: relative; overflow: hidden; padding: clamp(120px, 18vh, 170px) 0 clamp(56px, 9vh, 90px); background: radial-gradient(1000px 600px at 85% 10%, rgba(247, 201, 72, .14), transparent 60%), radial-gradient(900px 600px at 0% -10%, rgba(143, 115, 220, .3), transparent 60%), linear-gradient(180deg, #2a1f4c 0%, var(--ink-900) 60%, var(--ink-950) 100%); }
.g-hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 700 13px/1 var(--body); color: var(--muted); margin-bottom: 22px; list-style: none; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: rgba(255, 248, 234, .35); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--cream); }
.g-title { font: 900 clamp(38px, 5.4vw, 72px)/1 var(--display); letter-spacing: -.04em; }
.g-title em { font-style: normal; color: var(--lemon); }
.g-hero .lede { margin-top: 20px; }
.g-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 28px; font: 700 13px/1 var(--body); color: rgba(255, 248, 234, .5); }
.g-visual { position: relative; height: clamp(300px, 40vw, 440px); }
.g-visual .browser { position: absolute; inset: 0; }
@media (max-width: 900px) { .g-hero .wrap { grid-template-columns: 1fr; } .g-visual { height: 320px; margin-top: 36px; } }

.answer { margin: 0 0 8px; padding: 22px 26px; border-radius: 20px; background: linear-gradient(160deg, rgba(247, 201, 72, .12), rgba(247, 201, 72, .03)); border: 1px solid rgba(247, 201, 72, .35); }
.answer > b { display: block; font: 900 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--lemon); margin-bottom: 10px; }
.answer p { color: var(--cream); font-size: 17px; }

.g-body { padding: clamp(56px, 9vh, 96px) 0; }
.g-body .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: clamp(32px, 6vw, 90px); align-items: start; }
.article { max-width: 740px; }
.article > h2 { font: 900 clamp(28px, 3.2vw, 40px)/1.1 var(--display); letter-spacing: -.03em; margin: 64px 0 18px; scroll-margin-top: 100px; }
.article > h2:first-of-type { margin-top: 48px; }
.article > h3 { font: 900 21px/1.3 var(--display); margin: 32px 0 10px; }
.article p { color: rgba(255, 248, 234, .78); margin: 0 0 16px; font-size: 17px; line-height: 1.7; }
.article p b, .article li b { color: var(--cream); }
.article a { color: var(--lemon); }
.article ul { padding-left: 1.2em; color: rgba(255, 248, 234, .78); margin: 0 0 16px; }
.article ul li { margin: 6px 0; }
.article kbd { font-size: 13px; padding: 2px 7px; }
.badge { display: inline-block; vertical-align: 4px; margin-left: 10px; padding: 5px 10px; border-radius: 999px; font: 900 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; background: var(--lemon); color: var(--ink-900); }
.badge.muted { background: rgba(255, 248, 234, .1); color: var(--muted); }

.g-steps { list-style: none; padding: 0; margin: 24px 0 26px; counter-reset: st; display: grid; gap: 12px; }
.g-steps li { position: relative; counter-increment: st; padding: 18px 20px 18px 72px; border-radius: 18px; background: rgba(255, 248, 234, .04); border: 1px solid var(--line); color: rgba(255, 248, 234, .78); }
.g-steps li::before { content: counter(st); position: absolute; left: 18px; top: 16px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--lemon); color: var(--ink-900); font: 900 17px/1 var(--display); }
.g-steps li > b:first-child { display: block; color: var(--cream); font: 900 18px/1.35 var(--display); margin-bottom: 2px; }

.tip { margin: 22px 0; padding: 18px 22px; border-radius: 16px; background: rgba(143, 227, 192, .07); border: 1px solid rgba(143, 227, 192, .28); color: rgba(255, 248, 234, .82); }
.tip > b:first-child { color: var(--mint); margin-right: 6px; }
.note { margin: 22px 0; padding: 18px 22px; border-radius: 16px; background: rgba(255, 248, 234, .04); border: 1px solid var(--line); color: var(--muted); font-size: 15px; }

.fig { margin: 30px 0; }
.fig-frame { position: relative; height: 340px; border-radius: 22px; padding: 22px; background: linear-gradient(160deg, rgba(255, 248, 234, .06), rgba(255, 248, 234, .02)); border: 1px solid var(--line); }
.fig-frame .browser { position: absolute; inset: 22px; }
.fig figcaption { margin-top: 10px; font-size: 13px; color: rgba(255, 248, 234, .5); }
.fig img.ui { border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--line); }

.compare-wrap { margin: 26px 0; overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 900 14px/1.3 var(--display); background: rgba(255, 248, 234, .05); }
.compare thead th.us { color: var(--lemon); }
.compare tbody th { font-weight: 800; color: var(--cream); width: 30%; }
.compare td { color: rgba(255, 248, 234, .72); }
.compare td.us { color: var(--cream); background: rgba(247, 201, 72, .05); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.y { color: var(--mint); font-weight: 900; }
.n { color: rgba(255, 248, 234, .4); font-weight: 900; }

.article .faq-list { margin-top: 10px; }

.toc { position: sticky; top: 100px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 248, 234, .03); }
.toc b { display: block; font: 900 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.toc ol { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.toc a:not(.btn) { font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; line-height: 1.35; display: block; }
.toc a:not(.btn):hover, .toc a.on { color: var(--lemon); }
.toc .btn { color: var(--ink-900); width: 100%; min-height: 44px; font-size: 14px; }
@media (max-width: 1000px) { .g-body .wrap { grid-template-columns: 1fr; } .toc { display: none; } }

.related { padding: 0 0 clamp(70px, 12vh, 120px); }
.related h2 { font: 900 clamp(26px, 3vw, 36px)/1.1 var(--display); letter-spacing: -.03em; margin-bottom: 22px; }
/* Chat illustration: one screen vs the whole thread. */
.chat-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: end; height: 100%; }
.chat-shot { position: relative; border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 248, 234, .2); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-shot .bar { height: 14px; border-radius: 5px; background: #241a3d; margin: -12px -12px 4px; border-radius: 0; }
.chat-shot i { display: block; height: 18px; border-radius: 9px; background: #efe6d3; width: 70%; }
.chat-shot i.me { align-self: flex-end; width: 55%; background: #ffe6a8; }
.chat-shot i.l { height: 40px; width: 85%; }
.chat-shot.cut { height: 46%; }
.chat-shot.cut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(180deg, transparent, rgba(14, 10, 28, .6)); clip-path: polygon(0 60%, 8% 100%, 16% 55%, 24% 100%, 32% 60%, 40% 100%, 48% 55%, 56% 100%, 64% 60%, 72% 100%, 80% 55%, 88% 100%, 96% 60%, 100% 100%, 100% 100%, 0 100%); }
.chat-shot.full { height: 100%; border: 2px solid var(--lemon); box-shadow: 0 0 40px rgba(247, 201, 72, .35), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.chat-label { position: absolute; top: -34px; left: 0; font: 900 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chat-shot.full + .chat-label, .chat-col.us .chat-label { color: var(--lemon); }
.chat-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 34px; }

/* PDF illustration: one long page into A4 sheets. */
.pdf-demo { display: grid; grid-template-columns: 90px 50px 1fr; align-items: center; gap: 10px; height: 100%; }
.pdf-long { height: 100%; aspect-ratio: 1 / 8; max-width: 90px; border-radius: 8px; background-color: var(--paper); background-image: var(--page); background-size: 100% auto; background-repeat: no-repeat; box-shadow: 0 0 0 2px rgba(255, 248, 234, .2); }
.pdf-arrow { font: 900 30px/1 var(--display); color: var(--lemon); text-align: center; }
.pdf-sheets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: center; }
.pdf-sheet { aspect-ratio: 210 / 297; border-radius: 6px; background-color: #fff; background-image: var(--page); background-size: 88% auto; background-repeat: no-repeat; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 248, 234, .25); position: relative; }
.pdf-sheet span { position: absolute; right: 6px; bottom: 5px; font: 800 9px var(--body); color: #8c8273; }