/* Sub pages (PWA install guide, Legal Documents). Shares header, tokens, pills and the Earth closing with the partner page. */
.pg-hero{padding-top:clamp(170px,14vw,270px);padding-bottom:clamp(40px,4vw,80px)}
/* Same as the partner page section title (.section-title). */
.pg-title{font-size:var(--headline);font-weight:600;line-height:1.3;letter-spacing:-.0357em}
.pg-desc{margin-top:clamp(20px,1.6vw,30px);font-size:var(--body);line-height:1.7;letter-spacing:-.04em;color:#555}

/* ---------- PWA ---------- */
/* Figma layout: 2×2 grid — [iPhone card | phone] / [phone | Android card]. */
.pwa-guide{padding-top:clamp(40px,3vw,60px);padding-bottom:var(--section-gap)}
.pwa-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.52vw,10px)}
.pwa-card{background:#f6f6f6;padding:clamp(40px,5vw,96px) clamp(32px,9.5%,96px) clamp(40px,4.4vw,84px);min-height:clamp(420px,39vw,760px);display:flex;flex-direction:column;justify-content:center}
.pwa-card-head{display:flex;align-items:center;gap:clamp(14px,1.1vw,20px)}
.pwa-os{display:grid;place-items:center;flex:none;width:clamp(44px,3.3vw,62px);aspect-ratio:1;background:#fff}
.pwa-os img{width:44%;height:auto}
.pwa-card-head h2{font-size:clamp(19px,1.46vw,28px);font-weight:500;line-height:1.35;letter-spacing:-.03em}
.pwa-card-head h2 span{display:block}
.pwa-steps{list-style:none;margin:clamp(28px,2.6vw,50px) 0 0;padding:0;max-width:600px;border-top:1.5px solid #3d3d3d}
.pwa-step{border-bottom:1px solid #dcdcdc}
.pwa-step button{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;padding:clamp(16px,1.25vw,24px) 0;color:#6b6b6b}
.pwa-step strong{font-size:clamp(15px,1.04vw,20px);font-weight:500;letter-spacing:-.03em;transition:color .35s}
.pwa-step-desc{font-size:clamp(12.5px,.78vw,15px);letter-spacing:-.02em;color:#8a8a8a;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease}
.pwa-step.is-active strong{color:#0b0b0c;font-weight:600}
.pwa-step.is-active .pwa-step-desc{max-height:60px;opacity:1}
.pwa-visual{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:clamp(40px,5.2vw,100px);min-height:clamp(420px,39vw,760px);
  background:linear-gradient(180deg,#f3f5f8 0%,#e6ebf3 38%,#c3d3ec 100%)}
.pwa-note{margin-top:28px;font-size:14px;color:#8a94a3}
.pwa-phone{width:min(360px,46%);height:auto;overflow:visible;font-family:Pretendard,"Noto Sans KR",sans-serif;filter:drop-shadow(0 30px 40px rgba(8,30,70,.14))}
.pwa-note{margin-top:28px;font-size:14px;color:#8a94a3}
.ph-body{fill:#0b0b0c}.ph-notch{fill:#0b0b0c}.ph-screen{fill:#fff}
.ph-block{fill:#eef2f7}.ph-hero-b{fill:#d5e4fb}.ph-line{fill:#dfe5ee}.ph-soft{fill:#eef2f7}.ph-soft-b{fill:#f3f6fa}
.ph-bar{fill:#f5f6f8}.ph-url{fill:#e9ecf1}
.ph-url-text{fill:#5b6573;font-size:11px;text-anchor:middle}
.ph-ico path,.ph-ico rect,.ph-ico circle{fill:none;stroke:#0a55e8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-kebab circle{fill:#3c4450;stroke:none}
.ph-dim{fill:rgba(0,0,0,.32)}
.ph-sheet-bg{fill:#fff}
.ph-row{fill:#f3f5f8}
.ph-row.ph-target{fill:#e6efff;stroke:#0a55e8;stroke-width:1.2}
.ph-row-text{fill:#1b1f24;font-size:12.5px}
.ph-target-text{fill:#0a55e8;font-weight:600}
.ph-muted{fill:#8a94a3;text-anchor:middle}
.ph-dialog-title{fill:#0b0b0c;font-size:15px;font-weight:700}
.ph-row.ph-install{fill:#0a55e8;stroke:none}
.ph-install-text{fill:#fff;font-size:12.5px;font-weight:700;text-anchor:middle}
.ph-app{fill:#0a55e8}
.ph-home-bg{fill:#2f5fb0}
.ph-app-label{fill:#fff;font-size:10.5px;font-weight:600;text-anchor:middle}
.ph-ring{fill:none;stroke:#0a55e8;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;transition:cx .5s cubic-bezier(.16,1,.3,1),cy .5s cubic-bezier(.16,1,.3,1)}
.ph-ring.is-on{animation:ph-ring 1.3s ease-out infinite}
@keyframes ph-ring{0%{opacity:.95;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
/* which layers show for each platform/state */
.pwa-phone g.ph-ios,.pwa-phone g.ph-android,.pwa-phone g.ph-sheet,.pwa-phone g.ph-menu,.pwa-phone g.ph-dialog,.pwa-phone g.ph-home{opacity:0;transition:opacity .45s ease}
.pwa-phone[data-platform=ios]:not([data-state=home]) .ph-ios,
.pwa-phone[data-platform=android]:not([data-state=home]) .ph-android,
.pwa-phone[data-platform=ios][data-state=sheet] .ph-sheet,
.pwa-phone[data-platform=android][data-state=menu] .ph-menu,
.pwa-phone[data-platform=android][data-state=dialog] .ph-dialog,
.pwa-phone[data-state=home] .ph-home{opacity:1}
.pwa-phone .ph-sheet .ph-sheet-bg,.pwa-phone .ph-sheet .ph-row,.pwa-phone .ph-sheet .ph-row-text,.pwa-phone .ph-sheet .ph-row-ico{transition:transform .5s cubic-bezier(.16,1,.3,1);transform:translateY(40px)}
.pwa-phone[data-state=sheet] .ph-sheet .ph-sheet-bg,.pwa-phone[data-state=sheet] .ph-sheet .ph-row,.pwa-phone[data-state=sheet] .ph-sheet .ph-row-text,.pwa-phone[data-state=sheet] .ph-sheet .ph-row-ico{transform:none}
.ph-newapp{transform-box:fill-box}
.pwa-phone[data-state=home] .ph-newapp rect{animation:ph-pop .6s cubic-bezier(.3,1.6,.5,1) both .2s;transform-box:fill-box;transform-origin:center}
@keyframes ph-pop{from{transform:scale(0)}to{transform:scale(1)}}
/* FAQ */
.pwa-faq{padding-bottom:var(--section-gap)}
.faq-list{margin-top:clamp(28px,2.6vw,50px);border-top:1px solid rgba(11,11,12,.12)}
.faq{border-bottom:1px solid rgba(11,11,12,.12)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:clamp(22px,1.8vw,32px) 48px clamp(22px,1.8vw,32px) 0;font-size:clamp(18px,1.3vw,24px);font-weight:600;letter-spacing:-.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before,.faq summary:after{content:'';position:absolute;right:6px;top:50%;width:16px;height:1.6px;background:#0b0b0c;transition:transform .35s}
.faq summary:after{transform:rotate(90deg)}
.faq[open] summary:after{transform:rotate(0)}
.faq p{padding:0 48px clamp(22px,1.8vw,32px) 0;font-size:clamp(15px,1.04vw,19px);line-height:1.7;letter-spacing:-.03em;color:#5b6573}

/* ---------- LEGAL ---------- */
.lg-docs{padding-bottom:var(--section-gap)}
.lg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.04vw,20px)}
.lg-card{display:flex;flex-direction:column;padding:clamp(28px,2.6vw,48px);min-height:clamp(300px,19vw,370px);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,248,252,.75));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px rgba(11,31,68,.08),0 16px 36px rgba(8,30,70,.05);transition:box-shadow .3s}
.lg-card.is-target{box-shadow:inset 0 0 0 1.5px var(--blue),0 16px 36px rgba(8,30,70,.08)}
.lg-card-top{display:flex;align-items:flex-start;justify-content:space-between}
.lg-ico{width:clamp(44px,3vw,56px);height:auto}
.lg-ico .d-l{fill:#b7caf5}.lg-ico .d-s{fill:#0a55e8}
.lg-ico .d-s-stroke{fill:none;stroke:#0a55e8;stroke-width:2.6;stroke-linecap:round}
.lg-meta{font-size:13px;color:#8a94a3}
.lg-card.is-pending .lg-meta{color:#0a55e8;font-weight:600}
.lg-title{margin-top:auto;padding-top:clamp(28px,2.4vw,44px);font-size:clamp(20px,1.46vw,28px);font-weight:600;letter-spacing:-.02em}
.lg-label{margin-top:6px;font-size:clamp(14px,.9vw,16px);color:#6b7582}
.lg-actions{display:flex;gap:18px;margin-top:clamp(22px,1.8vw,32px);padding-top:18px;border-top:1px solid rgba(11,11,12,.1)}
.lg-btn{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:#0b0b0c}
.lg-btn span{transition:transform .3s}
.lg-btn:hover span{transform:translate(2px,-2px)}
.lg-btn.is-disabled{color:#b3bbc6;cursor:default}
.lg-note{margin-top:24px;font-size:14px;color:#8a94a3}

@media(max-width:1100px){.lg-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .pg-hero{padding-top:130px}
  .pg-desc br{display:none}
  .lg-grid{grid-template-columns:1fr}
  .lg-card{min-height:auto}
}
@media(prefers-reduced-motion:reduce){.ph-ring.is-on,.pwa-phone[data-state=home] .ph-newapp rect{animation:none}.ph-ring.is-on{opacity:1}}

@media(max-width:800px){
  .pwa-grid{grid-template-columns:1fr}
  .pwa-card[data-platform=android]{order:3}
  .pwa-visual[data-platform=android]{order:4}
  .pwa-card{min-height:auto;padding:40px 24px}
  .pwa-visual{min-height:auto;height:clamp(380px,110vw,560px);padding-top:40px}
  .pwa-phone{width:min(300px,64%)}
}
.pwa-os img:not(.playstore-icon){filter:brightness(0)}

/* PWA cards — spacing and type measured from Figma PC_설치페이지 (card 910×806 at 1920px):
   padding 100 top / 101 left, 100px icon box, 36px icon↔title, 68px head↔list, list 632 wide,
   first row 140 tall, other rows 96, 20px grid gap. Values scale with the viewport width. */
.pwa-grid{gap:clamp(10px,1.042vw,20px)}
.pwa-card,.pwa-visual{aspect-ratio:910/806;min-height:0}
.pwa-card{justify-content:flex-start;padding:5.21vw 5.26vw 5.21vw}
.pwa-card-head{gap:1.875vw}
.pwa-os{width:5.21vw;border-radius:0}
.pwa-os img{width:62%}
.pwa-card-head h2{font-size:2.083vw;font-weight:500;line-height:1.4;letter-spacing:-.03em}
.pwa-steps{margin-top:3.54vw;max-width:none;width:69.5%;border-top:2px solid #3d3d3d}
.pwa-step button{gap:.4vw;padding:1.61vw 0 1.56vw}
.pwa-step:first-child button{min-height:7.29vw}
.pwa-step strong{font-size:1.25vw;line-height:1.42}
.pwa-step-desc{font-size:.9375vw;line-height:1.6}
.pwa-step.is-active .pwa-step-desc{max-height:3vw}
.pwa-visual{padding-top:6.25vw}
@media(max-width:1100px){
  .pwa-card{padding:48px 40px}
  .pwa-card-head{gap:20px}.pwa-os{width:60px}
  .pwa-card-head h2{font-size:22px}
  .pwa-steps{margin-top:36px;width:100%}
  .pwa-step button{gap:6px;padding:18px 0}.pwa-step:first-child button{min-height:0}
  .pwa-step strong{font-size:17px}.pwa-step-desc{font-size:13.5px}
  .pwa-step.is-active .pwa-step-desc{max-height:60px}
  .pwa-visual{padding-top:48px}
}
@media(max-width:800px){.pwa-card{aspect-ratio:auto}.pwa-visual{aspect-ratio:auto}}
@media(min-width:1101px){
  .pwa-steps{width:32.92vw}
  .pwa-step button{gap:0}
  .pwa-step.is-active .pwa-step-desc{margin-top:.42vw}
}
@media(min-width:1101px){
  /* Figma row heights: active row (title + description) 140, others 96. Android has 5 steps, so cards may grow. */
  .pwa-step:first-child button{min-height:0}
  .pwa-step.is-active button{min-height:7.29vw}
  .pwa-card{aspect-ratio:auto;min-height:41.98vw}
}
@media(min-width:1101px){.pwa-visual{aspect-ratio:auto;min-height:41.98vw}}

/* Phone frame per Figma PC_설치페이지: 423×904 inside the 910×806 panel, centred, 120 from the top,
   cropped by the panel bottom; black bezel, white screen. */
.pwa-visual{display:block;padding:0;position:relative;overflow:hidden}
.pwa-frame{position:absolute;left:50%;top:14.9%;width:46.5%;aspect-ratio:423/904;transform:translateX(-50%);
  background:#0b0b0c;border-radius:12.5% / 5.85%;padding:1.9%}
.pwa-frame-screen{width:100%;height:100%;background:#fff;border-radius:10.8% / 5.1%}
@media(max-width:800px){.pwa-visual{height:auto;aspect-ratio:910/806}}
/* PWA cards: Figma Glass (fill #fff 10%, light -45° 80%, frost 26) over a soft blue glow */
.pwa-guide{position:relative;isolation:isolate}
.pwa-grid{position:relative}
.pwa-grid:before{content:"";position:absolute;z-index:-1;inset:-4% -6%;pointer-events:none;
  background:
    radial-gradient(38% 34% at 22% 30%,rgba(93,155,255,.34) 0%,rgba(93,155,255,0) 100%),
    radial-gradient(34% 30% at 78% 74%,rgba(64,120,220,.30) 0%,rgba(64,120,220,0) 100%),
    radial-gradient(30% 26% at 70% 22%,rgba(178,168,240,.26) 0%,rgba(178,168,240,0) 100%),
    radial-gradient(30% 28% at 26% 80%,rgba(140,190,255,.28) 0%,rgba(140,190,255,0) 100%);
  filter:blur(10px)}
.pwa-card{position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.26) 48%,rgba(255,255,255,.1) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.35),0 24px 60px rgba(20,60,130,.08)}
.pwa-card:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(200,220,255,.18) 100%)}
.pwa-card>*{position:relative}
.pwa-os{box-shadow:0 6px 18px rgba(20,60,130,.08)}
/* PWA grid: rows enter horizontally from both sides (same as main trade-type cards). */
.pwa-guide{overflow:clip}
@media(min-width:801px){
  .pwa-grid.split-motion>.reveal{opacity:var(--so,1);transform:translate3d(var(--sx,0),0,0);transition:none;will-change:transform,opacity}
}
@media(prefers-reduced-motion:reduce){.pwa-grid.split-motion>.reveal{opacity:1;transform:none}}
/* PWA steps: thin 20% black dividers; the thick black top line moves to the hovered step (first step by default). */
.pwa-steps{border-top:0}
.pwa-step{position:relative;border-top:1px solid rgba(0,0,0,.2);border-bottom:0}
.pwa-step:last-child{border-bottom:1px solid rgba(0,0,0,.2)}
.pwa-step:before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#0b0b0c;transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.pwa-steps:not(:hover) .pwa-step:first-child:before,.pwa-step:hover:before{transform:scaleX(1)}
.pwa-step:hover strong{color:#0b0b0c}
/* PWA step descriptions: +2px and darker (black 60%). */
.pwa-step-desc{font-size:calc(clamp(12.5px,.78vw,15px) + 2px);color:rgba(0,0,0,.6)}
.pwa-step.is-active .pwa-step-desc{max-height:90px}
@media(min-width:1101px){.pwa-step-desc{font-size:calc(.9375vw + 2px)}.pwa-step.is-active .pwa-step-desc{max-height:6vw}}
@media(max-width:1100px){.pwa-step-desc{font-size:15.5px}}
/* PWA phone panels: gradient starts from pure white at the top. */
.pwa-visual{background:linear-gradient(180deg,#fff 0%,#e6ebf3 38%,#c3d3ec 100%)}
/* Terms / Privacy full-text pages */
.doc-back{color:inherit}
.doc-wrap{padding-top:clamp(20px,2vw,40px);padding-bottom:clamp(100px,7.3vw,140px)}
.doc-body{max-width:920px;font-size:clamp(15px,1vw,18px);line-height:1.8;letter-spacing:-.01em;color:#2b3038}
.doc-body h2{margin:2.2em 0 .7em;font-size:1.35em;font-weight:600;color:#0b0b0c}
.doc-body h3{margin:1.6em 0 .5em;font-size:1.1em;font-weight:600;color:#0b0b0c}
.doc-body p,.doc-body li{margin-top:.8em}
.doc-body ul,.doc-body ol{padding-left:1.3em}
.doc-back-link{display:inline-block;margin-top:40px;font-size:15px;font-weight:600;color:#0a55e8}
.lg-grid .lg-card{min-height:clamp(260px,16vw,320px)}
/* Full-text legal pages: original markup from tiqven.com */
.doc-body h2:first-child{margin-top:0}
.doc-body p:empty{display:none}
.doc-body li>p{margin-top:0}
.doc-body ol ol,.doc-body ul ul,.doc-body ol ul,.doc-body ul ol{margin-top:.5em}
.doc-body a{color:#0a55e8;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.doc-body table{width:100%;margin-top:1.4em;border-collapse:collapse;font-size:.88em;line-height:1.6}
.doc-body td,.doc-body th{padding:12px 14px;border:1px solid rgba(0,0,0,.12);vertical-align:top}
.doc-body td p{margin-top:0}
.doc-body tr:first-child td{background:rgba(0,0,0,.035)}
@media(max-width:800px){.doc-body{overflow-x:auto}.doc-body table{min-width:640px}}
/* PDF icon opens the document in a new tab too */
.lg-ico-link{display:inline-flex;border-radius:6px;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s}
.lg-ico-link:hover{transform:translateY(-2px);opacity:.85}
/* PDF viewer page */
.pv-wrap{padding-top:clamp(10px,1vw,20px);padding-bottom:clamp(100px,7.3vw,140px)}
.pv-status{font-size:14px;color:#6b7582;margin-bottom:18px}
.pv-pages{display:flex;flex-direction:column;gap:18px;max-width:980px}
.pv-page{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 14px 34px rgba(8,30,70,.08)}
/* PWA steps: the thick top line follows the active step (auto-advance, or the hovered one) */
.pwa-steps:not(:hover) .pwa-step:first-child:before{transform:scaleX(0)}
.pwa-step:hover:before{transform:scaleX(0)}
.pwa-step.is-active:before,.pwa-steps .pwa-step.is-active:first-child:before{transform:scaleX(1)}
.pwa-step{cursor:default}
/* On-page PDF viewer (preview hosting only) */
.lg-viewer{position:fixed;inset:0;z-index:200;background:rgba(6,10,20,.72);display:flex;flex-direction:column;padding:24px}
.lg-viewer-bar{display:flex;align-items:center;gap:14px;max-width:960px;width:100%;margin:0 auto;padding:14px 18px;background:#fff;color:#0b0b0c;font-size:15px}
.lg-viewer-st{color:#6b7280;font-size:13px}
.lg-viewer-x{margin-left:auto;font-size:18px;line-height:1;padding:6px 8px;color:#0b0b0c}
.lg-viewer-pages{flex:1;overflow:auto;max-width:960px;width:100%;margin:0 auto;background:#e9edf3;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px}
.lg-viewer-pages canvas{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);max-width:100%;height:auto}
body:has(.lg-viewer) .uc-cursor{display:none}
/* thinner phone bezel */
.pwa-frame{padding:1.2%}
.pwa-frame-screen{border-radius:11.4% / 5.4%}
/* measuring pass: no transitions so the open height is read instantly */
.pwa-steps.pwa-measure *{transition:none!important}
/* while steps swap, the closing description collapses faster than the opening one grows, so the list never overflows its fixed height */
.pwa-step:not(.is-active) .pwa-step-desc{transition:max-height .25s ease,opacity .2s ease}
.pwa-steps{overflow:visible}
@media(hover:none),(max-width:600px){.lg-btn:hover span{transform:none}.lg-ico-link:hover{transform:none;opacity:1}}
/* Mobile PWA: shorter gap under the intro, and each phone visual comes before its steps card. */
@media(max-width:600px){
  body.pwa-page .pg-hero{padding-bottom:32px}
  body.pwa-page .pwa-guide{padding-top:0}
  .pwa-grid>.pwa-visual:not([data-platform=android]){order:1}
  .pwa-grid>.pwa-card:not([data-platform=android]){order:2}
  .pwa-grid>.pwa-visual[data-platform=android]{order:3}
  .pwa-grid>.pwa-card[data-platform=android]{order:4}
}
/* Mobile legal hub: documents in a 2-column grid. */
@media(max-width:600px){
  .lg-grid{grid-template-columns:1fr 1fr;gap:8px}
  .lg-grid .lg-card{min-height:220px;padding:24px 20px}
  .lg-ico{width:34px}
  .lg-meta{font-size:11px;text-align:right}
  .lg-title{padding-top:20px;font-size:16px;line-height:1.3;word-break:keep-all}
  .lg-label{font-size:12.5px}
  .lg-actions{margin-top:14px;padding-top:12px}
  .lg-btn{font-size:13.5px}
}
@media(max-width:600px){.pwa-card-head{flex-direction:row;align-items:center;gap:14px}.pwa-os{width:44px}}
@media(max-width:600px){.pwa-os{border-radius:50%}.pwa-os img{width:52%}.pwa-os img.playstore-icon{width:40%;margin-left:3px}body.pwa-page .pwa-faq{padding-top:48px}}
/* ===== PWA phone screen: animated TIQVEN install walkthrough (sizes in container units of the screen) ===== */
.pwa-frame{transition:transform .9s cubic-bezier(.65,0,.35,1)}
.pwa-frame[data-cam=up]{transform:translateX(-50%) translateY(-23%)}
.pwa-frame-screen{position:relative;overflow:hidden;container-type:size;isolation:isolate}
.sc{position:absolute;inset:0;overflow:hidden;background:#04122b;color:#0b0b0c;font-family:Pretendard,"Noto Sans KR",sans-serif;letter-spacing:-.02em;-webkit-user-select:none;user-select:none}
.sc svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc i,.sc b,.sc em{font-style:normal}
/* status bar */
.sc-status{position:absolute;z-index:6;left:0;right:0;top:0;height:9cqw;padding:2.6cqw 9cqw 0;display:flex;justify-content:space-between;color:#fff;font-size:3.3cqw;font-weight:700;pointer-events:none}
.sc-status span{display:flex;gap:1cqw;align-items:flex-end;height:2.6cqw}
.sc-status span i{display:block;width:1cqw;background:currentColor;border-radius:.3cqw}
.sc-status span i:nth-child(1){height:40%}.sc-status span i:nth-child(2){height:70%}.sc-status span i:nth-child(3){width:5cqw;height:100%;border-radius:.8cqw}
/* browser */
.sc-browser{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.sc-browser:after{content:'';position:absolute;inset:0;z-index:3;background:rgba(3,8,20,.42);opacity:0;pointer-events:none;transition:opacity .35s ease}
.sc-view{position:relative;flex:1;min-height:0;overflow:hidden;background:#04122b}
.sc-progress{position:absolute;z-index:2;left:0;top:0;height:.9cqw;width:0;background:linear-gradient(90deg,#185df1,#6ea2ff);opacity:0}
.sc[data-platform=ios] .sc-progress{top:auto;bottom:0}
/* TIQVEN site mock */
.sc-site{display:flex;flex-direction:column;height:100%}
.sc[data-platform=ios] .sc-site{padding-top:9cqw}
.sc-site-head{display:flex;align-items:center;justify-content:space-between;height:12cqw;padding:0 6cqw;flex:none}
.sc-logo{display:flex;align-items:center;gap:1.6cqw;color:#fff}
.sc-logo svg{width:5.4cqw;height:auto;fill:#f3f7fe;stroke:none}
.sc-logo b{font-size:3.8cqw;font-weight:800;letter-spacing:.02em}
.sc-burger{width:5cqw;height:2.6cqw;border-top:.5cqw solid #fff;border-bottom:.5cqw solid #fff}
.sc-site-hero{flex:none;height:78cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqw;text-align:center;
  background:radial-gradient(70% 40% at 50% 100%,rgba(140,180,255,.55),transparent 70%),linear-gradient(180deg,#020713 0%,#082056 55%,#2f63c9 100%)}
.sc-site-hero p{color:#fff;font-size:5.2cqw;line-height:1.35;font-weight:400}
.sc-site-hero b{font-weight:800}
.sc-cta{display:inline-block;padding:2.2cqw 5.4cqw;border-radius:99px;background:#fff;color:#0b0b0c;font-size:3cqw;font-weight:700}
.sc-site-cards{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw;padding:5cqw 5cqw 0;background:#fff;flex:none}
.sc-site-cards i{height:30cqw;border-radius:2cqw;background:linear-gradient(160deg,#eef3fd,#d9e4f8)}
.sc-site-rows{flex:1;display:flex;flex-direction:column;gap:3cqw;padding:5cqw;background:#fff}
.sc-site-rows i{height:3cqw;border-radius:2cqw;background:#e8ecf3}.sc-site-rows i:nth-child(1){width:70%}.sc-site-rows i:nth-child(2){width:88%}.sc-site-rows i:nth-child(3){width:52%}
/* iOS Safari bottom bar */
.sc-safari{position:relative;z-index:2;flex:none;padding:3cqw 4cqw 9cqw;background:rgba(246,247,250,.96);border-top:1px solid rgba(0,0,0,.06)}
.sc-url{display:flex;align-items:center;justify-content:center;gap:1.4cqw;height:10cqw;border-radius:3cqw;background:#e9ebf0;font-size:3.6cqw;color:#111;transition:background .25s}
.sc-lock{width:3.2cqw;height:3.2cqw;color:#555}
.sc-host{display:inline-block;overflow:hidden;white-space:nowrap}
.sc-host span{display:inline-block}
.sc-tools{display:flex;justify-content:space-between;padding:3.6cqw 3cqw 0;color:#1d6cf5}
.sc-tools i{width:6.4cqw;height:6.4cqw;border-radius:50%;transition:transform .25s,background .25s,color .25s}
.sc-tools i.is-dim{color:#b9c2d0}
/* Android Chrome top bar */
.sc-chrome{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:2.6cqw;padding:10cqw 3.4cqw 2.6cqw;background:#fff;border-bottom:1px solid #e7e9ee}
.sc-chome{width:5.6cqw;height:5.6cqw;color:#5f6368;flex:none}
.sc-chrome .sc-url{flex:1;justify-content:flex-start;padding:0 3.4cqw;height:9.6cqw;border-radius:99px;background:#eef1f5;font-size:3.4cqw}
.sc-kebab{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9cqw;width:7cqw;height:9cqw;border-radius:50%;transition:background .25s}
.sc-kebab b{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#3c4043}
/* iOS share sheet */
.sc-sheet{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:4cqw 4cqw 10cqw;background:#f2f2f7;border-radius:5cqw 5cqw 0 0;box-shadow:0 -2cqw 8cqw rgba(0,0,0,.18);transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.sc-sheet-app{display:flex;align-items:center;gap:3cqw;padding:1cqw 1cqw 4cqw;border-bottom:1px solid #dcdce2;margin-bottom:3.4cqw}
.sc-sheet-app img,.sc-dialog-app img{width:11cqw;height:11cqw;border-radius:2.6cqw;display:block}
.sc-sheet-app span,.sc-dialog-app span{display:flex;flex-direction:column;gap:.6cqw}
.sc-sheet-app b,.sc-dialog-app b{font-size:3.6cqw;font-weight:700}
.sc-sheet-app em,.sc-dialog-app em{font-size:2.9cqw;color:#8a8f99}
.sc-sheet ul{list-style:none;margin:0;padding:0;border-radius:3cqw;overflow:hidden;background:#fff}
.sc-sheet li{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;height:10.4cqw;padding:0 4cqw;font-size:3.5cqw;border-bottom:1px solid #ececf1;transition:background .25s}
.sc-sheet li:last-child{border-bottom:0}
.sc-sheet li svg{width:5cqw;height:5cqw;color:#111}
/* Android menu + install dialog */
.sc-menu{position:absolute;z-index:4;top:19cqw;right:2.4cqw;width:54cqw;padding:2cqw 0;background:#fff;border-radius:3cqw;box-shadow:0 2cqw 8cqw rgba(0,0,0,.22);transform-origin:94% 0;transform:scale(.7);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.25,1),opacity .25s ease}
.sc-menu ul{list-style:none;margin:0;padding:0}
.sc-menu li{display:flex;align-items:center;gap:3.4cqw;height:10cqw;padding:0 4cqw;font-size:3.4cqw;color:#202124;transition:background .25s}
.sc-menu li svg{width:4.8cqw;height:4.8cqw;color:#5f6368}
.sc-dialog{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:rgba(3,8,20,.45);opacity:0;transition:opacity .3s ease;pointer-events:none}
.sc-dialog-box{width:80cqw;padding:6cqw 5.4cqw 4cqw;background:#fff;border-radius:5cqw;transform:scale(.9);transition:transform .4s cubic-bezier(.2,.9,.25,1)}
.sc-dialog-box>b{display:block;font-size:4.4cqw;font-weight:700;margin-bottom:4cqw}
.sc-dialog-app{display:flex;align-items:center;gap:3cqw}
.sc-dialog-btns{display:flex;justify-content:flex-end;gap:2cqw;margin-top:6cqw;font-size:3.5cqw;font-weight:700}
.sc-dialog-btns span{padding:2.2cqw 4cqw;border-radius:99px;color:#1a5bd8;transition:background .25s}
.sc-dialog-btns .is-target{background:#1a5bd8;color:#fff}
/* home screen */
.sc-home{position:absolute;z-index:7;inset:0;opacity:0;pointer-events:none;transform:scale(1.06);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1);
  background:radial-gradient(90% 55% at 80% 15%,rgba(140,190,255,.75),transparent 60%),radial-gradient(80% 50% at 10% 85%,rgba(120,90,255,.6),transparent 65%),linear-gradient(170deg,#0b1f5c 0%,#1d47b8 50%,#5d8ef0 100%)}
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7cqw 6cqw;padding:19cqw 7cqw 0}
.sc-grid i,.sc-dock i{display:block;aspect-ratio:1;border-radius:24%;background:var(--c);opacity:.92;box-shadow:inset 0 -1.4cqw 2cqw rgba(0,0,0,.12)}
.sc-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4cqw}
.sc-app img{display:block;width:100%;aspect-ratio:1;border-radius:24%;box-shadow:0 1.6cqw 4cqw rgba(0,20,80,.45)}
.sc-app em{font-size:2.7cqw;color:#fff;font-weight:600}
.sc-dock{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6cqw;padding:3.6cqw 5cqw;border-radius:7cqw;background:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
/* launch splash: opens out of the app icon */
.sc-splash{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;pointer-events:none;
  background:radial-gradient(70% 45% at 50% 50%,#1f5ff0 0%,#08205a 60%,#031130 100%);clip-path:circle(0 at 84cqw 80cqw);opacity:0}
.sc-splash i{width:24cqw;color:#f3f7fe}.sc-splash i svg{fill:#f3f7fe;stroke:none;height:auto}
.sc-splash b{color:#f3f7fe;font-size:5cqw;font-weight:800;letter-spacing:.06em}
/* touch indicator */
.sc-touch{position:absolute;z-index:20;left:0;top:0;width:11cqw;height:11cqw;margin:-5.5cqw 0 0 -5.5cqw;pointer-events:none;opacity:0;
  transform:translate(var(--tx,50cqw),var(--ty,90cqw));transition:transform .55s cubic-bezier(.45,0,.2,1),opacity .3s ease}
.sc-touch.is-on{opacity:1}
.sc-touch:before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.42);box-shadow:0 0 0 .5cqw rgba(255,255,255,.9),0 1cqw 3cqw rgba(0,30,100,.35);backdrop-filter:blur(1px)}
.sc-touch i{position:absolute;inset:0;border-radius:50%;border:.5cqw solid rgba(255,255,255,.9);opacity:0}
.sc-touch.is-press:before{animation:sc-tap .6s .5s cubic-bezier(.3,0,.2,1) both}
.sc-touch.is-press i{animation:sc-ripple .8s .58s ease-out both}
@keyframes sc-tap{0%,100%{transform:scale(1)}40%{transform:scale(.72);background:rgba(255,255,255,.7)}}
@keyframes sc-ripple{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(2.6)}}
/* pressed feedback (after the finger lands) */
.sc .is-pressed{transition-delay:.55s}
.sc-share.is-pressed{background:rgba(29,108,245,.14);transform:scale(1.15)}
.sc-url.is-pressed{background:#dde3ee}
.sc-sheet li.is-pressed,.sc-menu li.is-pressed{background:#e3e9f6}
.sc-sheet li.is-target span,.sc-menu li.is-target span{font-weight:700}
.sc-kebab.is-pressed{background:#e6e9ef}
.sc-dialog-btns .is-target.is-pressed{background:#0f45b0}
/* ---- states ---- */
.sc[data-state=open] .sc-progress{animation:sc-load 1.3s .25s cubic-bezier(.3,.6,.4,1) both}
.sc[data-state=open] .sc-site{animation:sc-site-in .9s .7s cubic-bezier(.16,1,.3,1) both}
.sc[data-state=open] .sc-host span{animation:sc-type .7s steps(10) both}
.sc[data-state=sheet] .sc-sheet{transform:none}
.sc[data-state=sheet] .sc-browser:after,.sc[data-state=dialog] .sc-browser:after{opacity:1}
.sc[data-state=menu] .sc-menu{transform:none;opacity:1}
.sc[data-state=dialog] .sc-dialog{opacity:1}
.sc[data-state=dialog] .sc-dialog-box{transform:none}
.sc[data-state=home] .sc-browser{opacity:0;transform:scale(.92)}
.sc[data-state=home] .sc-home{opacity:1;transform:none}
.sc[data-state=home] .sc-app{animation:sc-pop .7s .35s cubic-bezier(.3,1.6,.5,1) both}
.sc[data-state=home] .sc-splash{animation:sc-splash .9s 1.65s cubic-bezier(.7,0,.2,1) both}
.sc[data-state=home] .sc-splash i,.sc[data-state=home] .sc-splash b{animation:sc-logo .8s 2.1s cubic-bezier(.16,1,.3,1) both}
.sc[data-state=home] .sc-status{color:#fff}
@keyframes sc-load{0%{width:0;opacity:1}85%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes sc-site-in{from{opacity:0;transform:translateY(4cqw)}}
@keyframes sc-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sc-pop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:none}}
@keyframes sc-splash{0%{opacity:1;clip-path:circle(0 at 84cqw 80cqw)}100%{opacity:1;clip-path:circle(160cqw at 84cqw 80cqw)}}
@keyframes sc-logo{from{opacity:0;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.sc *,.sc *:before,.sc *:after{animation:none!important;transition:none!important}.pwa-frame{transition:none}}
.sc[data-state=home] .sc-touch.is-on{animation:sc-touch-out .3s 1.7s forwards}
@keyframes sc-touch-out{to{opacity:0}}
/* iPhone: Safari keeps its controls at the bottom, so this phone is anchored to the panel bottom (top cropped). */
.pwa-frame[data-platform=ios]{top:auto;bottom:12.5%}
.pwa-frame[data-platform=ios] .sc-grid{padding-top:60cqw}
/* launch splash per brand: flat navy, horizontal logo centred */
.sc-splash{background:#011031;padding:0!important}
.sc-splash .sc-wordmark{position:absolute;left:var(--splash-center-x,50%);top:var(--splash-center-y,50%);translate:-50% -50%;width:46cqw;height:auto;fill:none;stroke:none}
.sc-splash .sc-wordmark .bl-sym,.sc-splash .sc-wordmark .bl-word{fill:#f3f7fe}
.sc[data-state=home] .sc-splash .sc-wordmark{animation:sc-logo .8s 2.1s cubic-bezier(.16,1,.3,1) both}
@keyframes sc-splash{0%{opacity:1;clip-path:circle(0 at var(--ax,84cqw) var(--ay,80cqw))}100%{opacity:1;clip-path:circle(170cqw at var(--ax,84cqw) var(--ay,80cqw))}}
/* home screen in greys so only the TIQVEN icon carries colour; splash logo dead centre */
.sc-home{background:radial-gradient(90% 55% at 80% 15%,rgba(255,255,255,.35),transparent 60%),linear-gradient(170deg,#5d636d 0%,#8a9099 55%,#b5bac2 100%)}
.sc-grid i,.sc-dock i{background:#d5d8dd;opacity:.85}
.sc-grid i:nth-child(3n+2),.sc-dock i:nth-child(2n){background:#c4c8ce}
.sc-grid i:nth-child(4n+3){background:#e3e5e9}
.sc-dock{background:rgba(255,255,255,.25)}
/* TIQVEN app sits in the middle column, at the vertical centre of the visible part of each phone */
.sc-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:9cqw 9cqw;padding:36cqw 9cqw 0}
.pwa-frame[data-platform=ios] .sc-grid{padding-top:56cqw}
.sc-app{grid-column:2;grid-row:2}
.pwa-frame[data-platform=ios] .sc-app{grid-row:3}
.sc-app em{font-size:3.2cqw}
/* Pin the screen inside the bezel (some browsers size a container-query box from its content, letting it spill past the frame). */
.pwa-frame{overflow:hidden}
.pwa-frame-screen{position:absolute;left:1.2%;right:1.2%;top:.5615%;bottom:.5615%;width:auto;height:auto}

/* iPhone card: Chrome / Safari switch */
.pwa-switch-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:clamp(18px,1.5vw,28px)}
.pwa-switch{display:inline-flex;flex:none;padding:3px;border-radius:99px;background:#e4e4e4}
.pwa-switch button{padding:.45em 1.15em;border:0;border-radius:99px;background:none;font:inherit;font-size:clamp(13px,.9vw,15px);font-weight:600;letter-spacing:-.01em;color:#6b6b6b;cursor:pointer;transition:background .25s,color .25s}
.pwa-switch button[aria-selected=true]{background:#fff;color:#0b0b0c;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pwa-switch-hint{margin:0;font-size:clamp(12px,.8vw,13.5px);line-height:1.5;letter-spacing:-.02em;color:#8a8a8a}
.pwa-switch-hint[hidden]{display:none}
/* iPhone · Chrome screen: address bar with the share button on top, Chrome toolbar at the bottom */
.sc-chrome-ios{gap:0;padding:10cqw 3.4cqw 2.4cqw}
.sc-chrome-ios .sc-url{padding:0 2.2cqw 0 3.4cqw}
.sc-chrome-ios .sc-share{margin-left:auto;flex:none;width:6cqw;height:6cqw;padding:.8cqw;border-radius:50%;color:#1a73e8;transition:transform .25s,background .25s}
.sc-ctools{position:relative;z-index:2;flex:none;display:flex;justify-content:space-between;align-items:center;padding:2.8cqw 6.5cqw 8cqw;background:#fff;border-top:1px solid #e7e9ee;color:#3c4043}
.sc-ctools i{width:6cqw;height:6cqw}
.sc-ctools i.is-dim{color:#b9c2d0}
.sc-ctools .sc-dots{display:flex;align-items:center;justify-content:center;gap:1cqw}
.sc-ctools .sc-dots b{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#3c4043}