.faq-hero { padding:18px 0 23px; background:radial-gradient(ellipse at 85% 70%,#bce3ff88,transparent 60%),linear-gradient(110deg,#f2f9ff,#e8f5ff); border-bottom:1px solid #deebfb; }.faq-hero .container,.faq-content .container { max-width:1360px; }.faq-hero nav { display:flex; gap:10px; font-size:.73rem; color:#536d91; margin-bottom:20px; }.faq-hero-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr); gap:35px; align-items:center; }.faq-hero h1 { font-size:clamp(2.25rem,3.8vw,3.4rem); line-height:1.13; letter-spacing:-.04em; color:#081344; margin:0 0 12px; }.faq-hero h1 span { color:#0067ff; }.faq-hero p { font-size:1rem; color:#425574; line-height:1.55; margin:0 0 19px; }.faq-hero form { display:flex; align-items:center; gap:11px; padding:6px; border:1px solid #d6e7fc; border-radius:11px; background:white; }.faq-hero form svg { width:21px; height:21px; margin-left:12px; flex-shrink:0; fill:none; stroke:#16478f; stroke-width:1.8; }.faq-hero input { width:100%; min-width:0; border:0; padding:10px 0; outline:none; font:inherit; font-size:.82rem; }.faq-hero button,.faq-button { display:inline-flex; justify-content:center; padding:11px 23px; border:0; border-radius:9px; color:#fff; background:linear-gradient(110deg,#168aff,#005cff); font:600 .82rem var(--font-sans); cursor:pointer; }.faq-art { display:flex; align-items:center; justify-content:center; height:190px; border-radius:45%; background:#c9e6ff66; }.faq-art > span { display:grid; place-items:center; width:120px; height:130px; border-radius:28px 28px 8px 28px; transform:rotate(-7deg); background:linear-gradient(140deg,#2cc3ff,#005cff); color:white; font-size:6rem; font-weight:800; box-shadow:0 10px 24px #0068ff30; }.faq-art > b { display:grid; place-items:center; width:95px; height:80px; margin:65px 0 0 -15px; border-radius:20px 20px 20px 5px; color:#20a5ff; background:white; font-size:2rem; box-shadow:0 7px 20px #125b9d14; }
.faq-content { padding:18px 0 28px; }.faq-layout { display:grid; grid-template-columns:235px minmax(0,1fr) 285px; gap:16px; align-items:start; }.faq-panel { padding:16px; border:1px solid #dce9fa; border-radius:11px; background:white; }.faq-panel h2 { font-size:1rem; color:#081344; line-height:1.4; margin:0 0 13px; }.faq-categories > a { display:flex; align-items:center; gap:10px; padding:10px 7px; border-radius:9px; color:#405b81; font-size:.78rem; }.faq-categories > a.is-active { color:#0067ff; background:#eaf4ff; }.faq-categories small { margin-left:auto; padding:3px 6px; background:#edf4ff; border-radius:7px; font-size:.72rem; }.faq-category-icon { display:grid; place-items:center; width:32px; height:34px; flex:0 0 32px; color:white; border-radius:8px; background:linear-gradient(135deg,#38c8ff,#0060ff); }.faq-category-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.faq-categories a:nth-of-type(3n+2) .faq-category-icon { background:linear-gradient(135deg,#c77cff,#7b21f6); }.faq-categories a:nth-of-type(3n) .faq-category-icon { background:linear-gradient(135deg,#00e79e,#00a779); }.faq-answers header { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }.faq-answers header > span { font-size:.7rem; color:#657b99; }.faq-answers details { padding:12px 14px; border:1px solid #e0eafa; border-radius:9px; margin-top:8px; }.faq-answers details[open] { background:#f0f8ff; }.faq-answers summary { position:relative; padding-right:27px; font-size:.86rem; line-height:1.5; font-weight:600; color:#1a345d; cursor:pointer; list-style:none; }.faq-answers summary::-webkit-details-marker { display:none; }.faq-answers summary::after { content:"+"; position:absolute; right:0; top:0; display:grid; place-items:center; width:21px; height:21px; color:#0875ff; border-radius:50%; background:#e4f1ff; font-size:1.1rem; }.faq-answers details[open] summary::after { content:"−"; }.faq-answers p { font-size:.85rem; line-height:1.7; color:#425574; margin:11px 0 0; }.faq-answers small { display:block; margin-top:8px; color:#637b9e; font-size:.7rem; }.faq-sidebar { display:grid; gap:13px; }.faq-panel p { font-size:.8rem; line-height:1.65; color:#526a8c; }.faq-help { background:#f1f8ff; }.faq-button { border-radius:23px; font-size:.76rem; }.faq-secondary { background:#dfedff; color:#0067ed; }.faq-article { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid #eaf1fb; color:#355580; font-size:.76rem; line-height:1.6; }.faq-article span { color:#0067ff; }.faq-panel > a:not(.faq-button):not(.faq-article) { color:#0067ed; font-size:.76rem; }.faq-content :is(a,summary):focus-visible,.faq-hero :is(input,button):focus-visible { outline:3px solid #7db8ff; outline-offset:3px; }
@media(max-width:1100px) { .faq-layout { grid-template-columns:210px minmax(0,1fr); }.faq-sidebar { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:750px) { .faq-hero-grid,.faq-layout { grid-template-columns:1fr; }.faq-art { display:none; }.faq-categories { display:flex; flex-wrap:wrap; gap:5px; }.faq-categories h2 { width:100%; }.faq-categories > a { font-size:.73rem; padding:6px; }.faq-categories small { margin-left:0; }.faq-category-icon { width:26px; height:28px; flex-basis:26px; }.faq-hero h1 { font-size:2rem; }.faq-hero p { font-size:.9rem; } }
@media(max-width:500px) { .faq-sidebar { grid-template-columns:1fr; }.faq-hero button { padding:10px 14px; }.faq-hero input { font-size:.75rem; } }
/* Match the reference artwork, category glyphs and three supporting panels. */
.lipicode-bold .faq-hero > .container,.lipicode-bold .faq-content > .container { width:min(1360px,calc(100% - 96px)); margin-inline:auto; }
.faq-hero-grid { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; }
.faq-art.faq-hero-illustration { height:210px; background:transparent; border-radius:0; }
.faq-hero-illustration img { width:100%; height:250px; object-fit:contain; }
.faq-categories .faq-category-icon { color:#0084ff; background:#e9f4ff; border-radius:9px; }
.faq-categories .faq-category-pdf { color:#ff2459!important; background:#ffe9f0!important; }
.faq-categories .faq-category-images { color:#00b882!important; background:#e1f9f0!important; }
.faq-categories .faq-category-text { color:#0084ff!important; background:#e6f3ff!important; }
.faq-categories .faq-category-developer { color:#8940ed!important; background:#f0e8ff!important; }
.faq-categories .faq-category-calculator { color:#ff9600!important; background:#fff2df!important; }
.faq-category-icon svg { width:23px; height:23px; stroke-width:1.8; }
.faq-categories > a { padding:11px 7px; }
.faq-categories > a.is-active { border-left:2px solid #0875ff; padding-left:5px; }
.faq-support-card,.faq-guides-card { position:relative; padding-left:64px; }
.faq-side-icon { position:absolute; top:16px; left:15px; display:grid; place-items:center; width:37px; height:39px; border-radius:50%; color:#0875ff; background:#dceeff; }
.faq-side-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.faq-sidebar h2 { font-size:.98rem; margin:0 0 7px; }
.faq-sidebar p { font-size:.79rem; line-height:1.55; margin:0 0 11px; }
.faq-articles-card h2 { display:flex; align-items:center; gap:8px; }
.faq-article-icon { display:inline-flex; color:#0875ff; }
.faq-article-icon svg { width:20px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.faq-article { padding:9px 0; font-size:.77rem; line-height:1.5; }
.faq-chat-icon { position:absolute; top:17px; left:17px; width:32px; height:34px; display:grid; place-items:center; color:white; border-radius:10px 10px 10px 3px; background:linear-gradient(135deg,#22b7ff,#0068ff); }
.faq-chat-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.faq-guides-card .faq-button { display:flex; margin-left:-48px; }
@media(max-width:1100px) { .faq-sidebar { grid-template-columns:repeat(3,minmax(0,1fr)); }.faq-support-card,.faq-guides-card { padding-left:16px; padding-top:62px; }.faq-guides-card .faq-button { margin-left:0; } }
@media(max-width:750px) { .lipicode-bold .faq-hero > .container,.lipicode-bold .faq-content > .container { width:calc(100% - 36px); }.faq-hero-grid { grid-template-columns:minmax(0,1fr); }.faq-art.faq-hero-illustration { display:none; }.faq-sidebar { grid-template-columns:1fr; }.faq-support-card,.faq-guides-card { padding-left:64px; padding-top:16px; }.faq-guides-card .faq-button { margin-left:-48px; } }
/* Center the symbol itself as well as its circular background. */
.lipicode-bold .faq-answers summary::after{top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;line-height:21px;font-family:Arial,sans-serif;font-size:17px;font-weight:400;padding:0;text-align:center;box-sizing:border-box}