/* Rock Identifier landing - shared custom styles (extracted from index.html) */
/* On-brand additions (amber #D97706 / emerald #059669) */
/* The app's screenshots (screen2/screen3) are ALREADY transparent device mockups,
   so display them directly. Overlaying another iPhone frame double-framed them
   ("screenshot within a screenshot"). The drop-shadow follows the phone's alpha. */
.app_frame { display:block; position:relative; aspect-ratio:1042/2122; margin:0 auto;
             filter:drop-shadow(0 16px 30px rgba(15,23,42,.32)); }
.app_frame .screen { position:absolute; inset:0; }
.app_frame .screen img { width:100%; height:100%; object-fit:contain; display:block; }
.feature_frame { width:280px; }
/* Hero: brighter, cleaner amber fade (subtle two-color, like the template) */
.banner_section { background:linear-gradient(63deg,#E68A12 0%,#F4A52E 55%,#F8B44E 100%) !important; }
/* Hero stage = template 12's hero arrangement (upright phones, stepped tops,
   heavy overlap) but with our real framed screens, CLIPPED at the bottom like
   the template's cropped hero-image.png so the phones are cut, not full. */
/* Uniform hero rhythm: equal space text->CTAs and CTAs->phones */
.banner_section .banner_text p { margin-bottom:48px; }
/* Spoke hero fix: the spoke pages reuse .banner_text inside a narrow col-md-7, but the
   template gives .banner_text and .banner_text p 150px horizontal padding each (meant for
   the full-width centered home hero). Nested in a ~650px column that collapses the text to
   ~50px (one word per line). Reset the padding in this two-column context only. */
.banner_section .col-md-7 .banner_text,
.banner_section .col-md-7 .banner_text p { padding-left:0; padding-right:0; }
.banner_section .col-md-7 .banner_text { text-align:left; }
.banner_section .col-md-7 .banner_text::before,
.banner_section .col-md-7 .banner_text::after { display:none; }
/* Spoke pages: breathing room between the hero and the first content section
   (the how_it_section sits directly under the banner only on the spokes; on the
   home a row_am section follows, so this adjacent-sibling rule is spoke-scoped). */
.banner_section + .page_wrapper { padding-top:72px; }
/* Spoke "full profile" list -> responsive card grid (.listing_block is spoke-only). */
.listing_block { display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:20px; list-style:none; padding:0; margin:0; }
.listing_block li { display:flex; flex-direction:column; align-items:flex-start; gap:13px; margin:0; background:#fff; border:1px solid #f1ece4; border-radius:16px; padding:26px 24px; box-shadow:0 10px 30px rgba(15,23,42,.05); }
.listing_block li .icon span { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:var(--primery,#D97706); color:#fff; font-size:20px; margin:0; }
.listing_block li .text { width:auto; }
.listing_block li .text h3 { font-size:19px; font-weight:800; margin:0 0 6px; color:var(--dark-black,#181a22); }
.listing_block li .text p { margin:0; color:#5e5e5e; font-size:15px; line-height:1.55; }
.hero_stage { position:relative; width:100%; max-width:1240px; height:440px; margin:40px auto 0; overflow:hidden; }
.hero_stage .app_frame { position:absolute; left:50%; top:0;
                         filter:drop-shadow(0 16px 26px rgba(120,60,0,.20)); }
.hero_stage .ph0 { width:300px; transform:translateX(-50%);              top:0;   z-index:5; }
.hero_stage .ph1 { width:284px; transform:translateX(calc(-50% - 232px)); top:48px; z-index:4; }
.hero_stage .ph2 { width:284px; transform:translateX(calc(-50% + 232px)); top:48px; z-index:4; }
.hero_stage .ph3 { width:272px; transform:translateX(calc(-50% - 446px)); top:92px; z-index:3; }
.hero_stage .ph4 { width:272px; transform:translateX(calc(-50% + 446px)); top:92px; z-index:3; }
@media(max-width:1199px){
  .hero_stage { height:380px; }
  .hero_stage .ph3, .hero_stage .ph4 { display:none; }
  .hero_stage .ph0 { width:270px; }
  .hero_stage .ph1 { width:252px; transform:translateX(calc(-50% - 205px)); top:44px; }
  .hero_stage .ph2 { width:252px; transform:translateX(calc(-50% + 205px)); top:44px; }
}
@media(max-width:767px){
  .hero_stage { height:300px; }
  .hero_stage .ph0 { width:205px; }
  .hero_stage .ph1 { width:190px; transform:translateX(calc(-50% - 158px)); top:36px; }
  .hero_stage .ph2 { width:190px; transform:translateX(calc(-50% + 158px)); top:36px; }
}
@media(max-width:479px){
  .hero_stage { height:235px; }
  .hero_stage .ph0 { width:160px; }
  .hero_stage .ph1 { width:148px; transform:translateX(calc(-50% - 118px)); top:28px; }
  .hero_stage .ph2 { width:148px; transform:translateX(calc(-50% + 118px)); top:28px; }
}
/* Header: keep the SAME left-to-right hero fade at all times (matches
   .banner_section's gradient so the scrolled header reads identical to the
   top-of-page header), and hide on scroll down / reveal on scroll up. */
header.fix_style { background:linear-gradient(63deg,#E68A12 0%,#F4A52E 55%,#F8B44E 100%) !important; opacity:1 !important; pointer-events:auto !important;
                   backdrop-filter:none !important; box-shadow:0 6px 20px rgba(120,60,0,.10);
                   transition:transform .35s ease !important; }
header.nav-hidden { transform:translateY(-100%) !important; }
/* Hero CTA layered borders: bright (white) under the primary, black under the dark btn */
.banner_text .btn_bottom.bright { border-color:#ffffff !important; }
.emerald { color:#059669 !important; }
/* "What it identifies" band: equal space top and bottom, clear gap from the hero */
.our_client { padding-top:80px !important; padding-bottom:80px !important; }
@media(max-width:767px){ .our_client { padding-top:52px !important; padding-bottom:52px !important; } }
/* Feature cards: make the template's sticky cards actually STACK on scroll */
.task_app_section { padding-top:30px; padding-bottom:30px; }
.task_app_section .task_block { top:96px; margin-bottom:34px; }
.task_app_section .task_text .section_title .icon i { color:#fff; font-size:38px; line-height:1; }
.how_it_inner .steps_block .icon i { color:#fff; font-size:42px; line-height:1; }
/* Pricing: equal-height cards, button pinned to the bottom */
.pricing_section .tab-pane .row { align-items:stretch; }
.pricing_section .col-md-5 { display:flex; }
.pricing_section .pannel_block { width:100%; display:flex; flex-direction:column; }
.pricing_section .pannel_block .btn_block { margin-top:auto; align-self:flex-start; }
/* App Store badge (crisp SVG) */
.downaload_section .store_badge img { width:200px !important; height:auto !important; }
/* Download marquee: two real framed phones overlaid on the marquee.
   The template centers .center_screen absolutely (z-index 999), so DON'T override its
   position; just give the phone stage a width and center the two phones within it. */
.downaload_section .dl_phones { position:relative; height:430px; width:440px; max-width:90vw; margin:0 auto 30px; }
.downaload_section .dl_phones .app_frame { position:absolute; bottom:0; left:50%; filter:drop-shadow(0 18px 30px rgba(15,23,42,.28)); }
.downaload_section .dl_phones .ph_back { width:202px; transform:translateX(calc(-50% - 96px)) rotate(-8deg); z-index:1; }
.downaload_section .dl_phones .ph_front { width:214px; transform:translateX(calc(-50% + 80px)) rotate(6deg); z-index:2; }
.downaload_section .app_btn li a img { width:200px; height:auto; }
@media(max-width:575px){
  .downaload_section .dl_phones { height:330px; width:300px; }
  .downaload_section .dl_phones .ph_back { width:152px; transform:translateX(calc(-50% - 70px)) rotate(-8deg); }
  .downaload_section .dl_phones .ph_front { width:162px; transform:translateX(calc(-50% + 58px)) rotate(6deg); }
}
footer .download_side .app_btn li a img { width:190px; height:auto; }
/* Footer: big GeoLens mascot as a left background, content above it */
footer { position:relative; overflow:hidden; }
footer::before { content:""; position:absolute; left:-58px; bottom:-46px; width:360px; height:520px;
                 background:url(../images/mascot.png) no-repeat left bottom / contain; opacity:0.6;
                 z-index:0; pointer-events:none; }
footer .container { position:relative; z-index:1; }
.task_app_section .task_img .app_frame { width:248px; }
.task_app_section .task_img::before { width:266px !important; height:266px !important; }
@media(max-width:991px){
  .task_app_section .task_block { position:relative; top:0; margin-bottom:24px; }
}
/* Identify chips / grid */
.identify_grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.identify_grid a { display:flex; align-items:center; gap:12px; padding:18px 20px; border-radius:16px;
                   background:#fff; border:1px solid #efe7dc; color:#181a22; font-weight:600;
                   text-decoration:none; transition:.2s; box-shadow:0 8px 24px rgba(180,83,9,.05); }
.identify_grid a:hover { transform:translateY(-3px); border-color:#d97706; box-shadow:0 14px 30px rgba(180,83,9,.12); }
.identify_grid .ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
                     background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-size:20px; flex:none; }
@media(max-width:767px){ .identify_grid{ grid-template-columns:1fr 1fr; } }
/* FAQ accordion */
.faq_block { max-width:820px; margin:0 auto; }
.faq_item { background:#fff; border:1px solid #efe7dc; border-radius:14px; margin-bottom:14px; overflow:hidden; }
.faq_item summary { cursor:pointer; list-style:none; padding:22px 26px; font-weight:700; font-size:18px;
                    display:flex; justify-content:space-between; align-items:center; color:#181a22; }
.faq_item summary::-webkit-details-marker { display:none; }
.faq_item summary::after { content:"\002B"; color:#d97706; font-size:24px; line-height:1; }
.faq_item[open] summary::after { content:"\2212"; }
.faq_item .faq_a { padding:0 26px 24px; color:#5b6072; line-height:1.7; }
.badge_chips { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }
.badge_chips span, .badge_chips a { background:#fff; border:1px solid #efe7dc; border-radius:40px; padding:14px 30px;
                    font-weight:700; color:#454b5c; font-size:18px; text-decoration:none; display:inline-block; transition:.2s; }
.badge_chips a:hover { border-color:#d97706; color:#d97706; transform:translateY(-2px); }
.store_badge img { height:54px; width:auto; }
.free_note { font-size:14px; color:#848484; margin-top:14px; }

/* Doc + guide article pages */
.doc_content h2 { margin:36px 0 14px; font-size:28px; line-height:1.25; }
.doc_content p { line-height:1.8; margin-bottom:18px; color:#3f4452; font-size:17px; }
.doc_content ul { margin:0 0 20px 22px; }
.doc_content li { line-height:1.8; color:#3f4452; margin-bottom:6px; }
.doc_content a { color:#b45309; font-weight:600; }
.guide_sidebar { position:sticky; top:100px; }
.guide_cta { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border-radius:20px; padding:28px 26px; text-align:center; box-shadow:0 14px 30px rgba(180,83,9,.18); }
.guide_cta h3 { color:#fff; margin-bottom:8px; }
.guide_cta p { color:#fff; opacity:.92; font-size:15px; margin-bottom:16px; }
.guide_cta .store_badge img { width:170px; height:auto; }
.related_box { background:#fff; border:1px solid #efe7dc; border-radius:18px; padding:22px 24px; margin-top:22px; }
.related_box h4 { font-size:17px; margin-bottom:10px; }
.related_box a { display:block; padding:9px 0; color:#181a22; font-weight:600; text-decoration:none; border-bottom:1px solid #f3eee6; }
.related_box a:last-child { border-bottom:0; }
.related_box a:hover { color:#d97706; }
@media(max-width:991px){ .guide_sidebar { position:static; margin-top:34px; } }

/* Logo wordmark: Unbounded (subset of just the "Rock Identifier" letters, variable wght 200-900) */
@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded/Unbounded-RockIdentifier-subset.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
.navbar-brand > span,
footer .logo a { font-family: 'Unbounded', sans-serif; letter-spacing:-0.01em; }

/* ---- Guide/blog post format (content-templates.md) ---- */
.guide_hero { max-width:980px; margin:6px auto 4px; }
.guide_hero img { width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:22px; box-shadow:0 18px 40px rgba(15,23,42,.12); display:block; }
.guide_cta_callout { background:linear-gradient(120deg,#fff7ec,#fdeed0); border-left:5px solid #d97706; border-radius:16px; padding:24px 26px; margin:36px 0 6px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; }
.guide_cta_callout p { margin:0; font-weight:700; color:#181a22; font-size:18px; flex:1 1 300px; }
.guide_cta_callout .btn_block { margin:0; }
.guide_cta .qr { background:#fff; border-radius:14px; padding:11px; width:142px; margin:0 auto 14px; }
.guide_cta .qr img { width:100%; display:block; border-radius:6px; }
@media(max-width:991px){ .guide_cta .qr { display:none; } }
.related_box a.related_card { display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid #f3eee6; text-decoration:none; }
.related_card:last-child { border-bottom:0; }
.related_card img { width:78px; height:50px; object-fit:cover; border-radius:8px; flex:none; }
.related_card span { font-weight:600; color:#181a22; font-size:15px; line-height:1.3; flex:1; }
.related_card:hover span { color:#d97706; }
/* Guides hub image cards */
.hub_grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px; }
@media(max-width:991px){ .hub_grid { grid-template-columns:1fr 1fr; } }
@media(max-width:575px){ .hub_grid { grid-template-columns:1fr; } }
.hub_card { display:block; text-decoration:none; background:#fff; border:1px solid #efe7dc; border-radius:18px; overflow:hidden; transition:.2s; box-shadow:0 8px 24px rgba(180,83,9,.05); }
.hub_card:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(180,83,9,.12); }
.hub_card .thumb { aspect-ratio:1200/630; overflow:hidden; }
.hub_card .thumb img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.hub_card:hover .thumb img { transform:scale(1.05); }
.hub_card .body { padding:18px 20px 22px; }
.hub_card .tag { font-size:13px; font-weight:700; color:#d97706; text-transform:uppercase; letter-spacing:.04em; }
.hub_card h2 { font-size:20px; margin:6px 0 10px; color:#181a22; line-height:1.3; }
.hub_card .more { font-weight:700; color:#181a22; }
/* Floating QR download dock (desktop only). Bottom-LEFT so it never collides with the
   cookie consent banner, which the library renders bottom-right. */
.qr_dock { position:fixed; left:22px; bottom:22px; z-index:9000; background:#fff; border-radius:16px; box-shadow:0 16px 40px rgba(15,23,42,.22); padding:15px 15px 12px; width:170px; text-align:center; }
.qr_dock img { width:130px; height:130px; display:block; margin:0 auto 6px; border-radius:8px; }
.qr_dock .lbl { font-weight:700; font-size:14px; color:#181a22; }
.qr_dock .x { position:absolute; top:5px; right:9px; cursor:pointer; color:#d97706; font-weight:700; font-size:19px; line-height:1; background:none; border:0; }
@media(max-width:1199px){ .qr_dock { display:none !important; } }

/* Language switcher (injected into the nav by site.js from the page's hreflang tags) */
.lang-switch { position:relative; }
.lang-switch .lang-toggle { cursor:pointer; display:flex; align-items:center; gap:6px; }
.lang-menu { display:none; position:absolute; right:0; top:100%; background:#fff; border-radius:12px; box-shadow:0 16px 40px rgba(15,23,42,.18); padding:8px; min-width:190px; z-index:10000; max-height:64vh; overflow:auto; }
.lang-switch.open .lang-menu { display:block; }
.lang-menu .lang-item { display:block; padding:9px 14px; border-radius:8px; color:#181a22; text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap; }
.lang-menu .lang-item:hover { background:#FFF3E0; }
.lang-menu .lang-item.active { color:#D97706; background:#FFF3E0; }
@media(max-width:991px){ .lang-menu { position:static; box-shadow:none; padding:4px 0; min-width:0; } }