/* ==========================================================================
   All Yono Apps - single stylesheet for all 7 pages
   --------------------------------------------------------------------------
   HOW TO EDIT / OPTIMISE CONTENT
   Every content block on the inner pages is a <section class="card">.
   Nothing in this file depends on the number of cards, so you can add or
   remove sections in the HTML without touching the CSS.

   SECTION MAP (search the tag below to jump)
     tokens ............ colours, radius, width of the phone shell
     app shell ......... the 620px column that every page sits in
     header ............ green bar, logo, hamburger button
     dropdown .......... the unfolding menu panel and its animation
     top nav ........... horizontal Home / About / Contact / Disclaimer row
     layout ............ homepage intro, showcase, tabs
     app cards ......... numbered rows and the shine download button
     content ........... prose sections, notice, steps, FAQ
     inner pages ....... card, alert-card, tick-list, contact-card, tables,
                         pill-list, sitemap rows, breadcrumbs
     footer ............ copyright bar (nothing else by design)
     responsive ........ 620px breakpoint, 379px breakpoint, print, motion
   -------------------------------------------------------------------------- */

/* ==========================================================================
   All Yono Apps - mobile-first stylesheet (v2)
   Layout: fixed 620px phone column, centered on desktop
   Theme : green, two tabs, numbered app cards, shine on the download button
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  --green:#118c3a;
  --green-2:#0c7a31;
  --green-3:#075c24;
  --green-light:#e9f7ee;
  --green-line:#d5ebdd;
  --lime:#f4c024;
  --pink:#ec1f4f;
  --ink:#12211a;
  --ink-2:#495a50;
  --ink-3:#7b8a80;
  --line:#e3eae5;
  --line-2:#eef3f0;
  --card:#ffffff;
  --page:#eef2ef;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(18,33,26,.05);
  --shadow:0 1px 2px rgba(18,33,26,.06),0 10px 22px -16px rgba(18,33,26,.4);
  --shell:620px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--green-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.1em}
li{margin-bottom:.35em}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:200;width:auto;height:auto;clip:auto;margin:0;padding:12px 16px;background:#fff;border-radius:10px;font-weight:800}

/* inline SVG sprite icons */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:currentColor;flex:0 0 auto}
.ic-sm{width:.88em;height:.88em}

/* ------------------------------------------------------------- app shell -- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  background:#fff;
  min-height:100vh;
  box-shadow:0 0 0 1px rgba(18,33,26,.05),0 18px 60px -30px rgba(18,33,26,.35);
  position:relative;
}

/* ---------------------------------------------------------------- header -- */
.site-header{
  position:sticky;
  top:0;
  z-index:70;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(112deg,var(--green-3) 0%,var(--green-2) 42%,#14a244 100%);
  color:#fff;
  box-shadow:0 3px 16px -8px rgba(7,92,36,.9);
}

.brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0;color:#fff}
.brand:hover{text-decoration:none;color:#fff}
.brand img{
  width:42px;height:42px;flex:0 0 auto;
  border-radius:10px;
  background:#0a5c22;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.35);
}
.brand-text{min-width:0}
.brand-name{
  display:block;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-tag{
  display:block;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
}

/* hamburger: 44x44, bars collapse into a cross */
.menu-btn{
  flex:0 0 auto;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn:hover{background:rgba(255,255,255,.14)}
.menu-btn .bars{position:relative;width:23px;height:15px;display:block}
.menu-btn .bars span{
  position:absolute;left:0;
  width:23px;height:2.5px;
  border-radius:2px;
  background:#fff;
  transition:transform .34s cubic-bezier(.68,-.35,.27,1.35),opacity .2s ease,top .34s cubic-bezier(.68,-.35,.27,1.35),width .3s ease;
}
.menu-btn .bars span:nth-child(1){top:0}
.menu-btn .bars span:nth-child(2){top:6.25px;width:16px;left:7px}
.menu-btn .bars span:nth-child(3){top:12.5px}
.menu-btn[aria-expanded="true"] .bars span:nth-child(1){top:6.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars span:nth-child(2){opacity:0;width:0;left:11px}
.menu-btn[aria-expanded="true"] .bars span:nth-child(3){top:6.25px;transform:rotate(-45deg)}

/* --------------------------------------------------------------- dropdown --
   The panel is pinned to the header and unfolds downwards: a small vertical
   slide plus a scale from the top-right corner, with a staggered reveal for
   each row. Closing runs the same curve in reverse.
   -------------------------------------------------------------------------- */
.dropdown{
  position:absolute;
  top:100%;
  right:8px;
  width:min(300px,86vw);
  z-index:75;
  transform-origin:top right;
  opacity:0;
  transform:translateY(-14px) scaleY(.86) scaleX(.97);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .32s cubic-bezier(.22,1.2,.36,1),visibility .32s;
  filter:drop-shadow(0 18px 26px rgba(7,40,20,.22));
}
.dropdown.is-open{
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
}
/* little pointer arrow under the hamburger */
.dropdown::before{
  content:"";
  position:absolute;
  top:-6px;right:22px;
  width:13px;height:13px;
  background:#fff;
  border-radius:2px;
  transform:rotate(45deg);
  box-shadow:-1px -1px 0 rgba(7,40,20,.06);
}
.dropdown-inner{
  position:relative;
  padding:10px 10px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  max-height:calc(100vh - 92px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.dd-label{
  margin:8px 0 4px;
  padding:0 8px;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.dropdown-list{list-style:none;margin:0;padding:0}
.dropdown-list li{margin:0}
.dd-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 9px;
  border-radius:10px;
  color:var(--ink);
  font-size:13.6px;
  font-weight:700;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.dd-link .ic{color:var(--green);font-size:15px}
.dd-link:hover,.dd-link:focus-visible{background:var(--green-light);color:var(--green-3);text-decoration:none;transform:translateX(2px)}
.dd-link:hover .ic{color:var(--green-3)}
.dropdown-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:10px;
  padding:11px;
  border-radius:11px;
  background:linear-gradient(120deg,var(--green),#0a6b2a);
  color:#fff;
  font-size:13.5px;
  font-weight:900;
}
.dropdown-cta:hover{color:#fff;text-decoration:none;filter:brightness(1.06)}
.dropdown-note{
  margin:8px 0 0;
  text-align:center;
  font-size:10.5px;
  font-weight:600;
  color:var(--ink-3);
}
/* staggered rows while opening, cheapest way without extra JS */
.dropdown .dd-link,
.dropdown .dd-label,
.dropdown-cta{
  opacity:0;
  transform:translateY(-6px);
}
.dropdown.is-open .dd-link,
.dropdown.is-open .dd-label,
.dropdown.is-open .dropdown-cta{
  animation:dd-in .3s ease forwards;
}
.dropdown.is-open li:nth-child(1) .dd-link{animation-delay:.04s}
.dropdown.is-open li:nth-child(2) .dd-link{animation-delay:.08s}
.dropdown.is-open li:nth-child(3) .dd-link{animation-delay:.12s}
.dropdown.is-open li:nth-child(4) .dd-link{animation-delay:.16s}
.dropdown.is-open .dd-label{animation-delay:.02s}
.dropdown.is-open .dropdown-cta{animation-delay:.2s}
@keyframes dd-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* ------------------------------------------------------------- top nav --- */
.top-nav{
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 10px;
  overflow-x:auto;
  background:#fff;
  border-bottom:1px solid var(--line);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.top-nav::-webkit-scrollbar{display:none}
.top-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:9px;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
.top-link .ic{color:var(--green);font-size:13.5px}
.top-link:hover{background:var(--green-light);color:var(--green-3);text-decoration:none}
.top-link.is-current{background:var(--green-light);color:var(--green-3)}
.top-link.is-current .ic{color:var(--green-3)}

/* --------------------------------------------------------------- layout -- */
.main{padding:0 0 8px}

/* intro copy */
.intro{padding:14px 14px 12px;border-bottom:1px solid var(--line-2)}
.intro-title{
  font-size:19px;
  line-height:1.3;
  letter-spacing:-.025em;
  margin:0 0 8px;
  color:var(--ink);
}
.intro-text{
  margin:0 0 8px;
  font-size:12.4px;
  line-height:1.75;
  color:var(--ink-2);
}
.intro-text strong{color:var(--ink)}
.intro-meta{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  font-size:11px;
  font-weight:700;
  color:var(--ink-3);
}
.intro-meta .ic{color:var(--green)}

/* -------------------------------------------------------------- showcase -- */
.showcase{padding:12px 12px 4px}
/* invisible scroll target used by the dropdown deep links */
.anchor-target{display:block;position:relative;top:-64px;visibility:hidden;height:0}

.tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:14px 10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  color:var(--ink-2);
  font-family:inherit;
  font-size:15.5px;
  font-weight:900;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,color .18s ease,background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.tab:hover{color:var(--green-3);border-color:var(--green-line)}
.tab.is-active{
  background:linear-gradient(112deg,var(--green-3),var(--green) 65%,#16a344);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 20px -12px rgba(7,92,36,.85);
}
.tab .tab-n{
  padding:1px 6px;
  border-radius:99px;
  background:rgba(18,33,26,.08);
  color:inherit;
  font-size:10.5px;
  font-weight:900;
}
.tab.is-active .tab-n{background:rgba(255,255,255,.22)}

.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:panel-in .26s ease both}
@keyframes panel-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ------------------------------------------------------------- app cards -- */
.apps-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.apps-list li{margin:0}

.app-card{
  position:relative;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:10px;
  padding:13px 12px 13px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.app-card:hover{border-color:var(--green-line);box-shadow:var(--shadow);transform:translateY(-1px)}

/* number badge pinned to the card corner, as in the reference screenshot */
.app-num{
  position:absolute;
  top:7px;left:0;
  min-width:23px;
  padding:2px 5px 2px 4px;
  border-radius:0 7px 7px 0;
  background:linear-gradient(120deg,var(--green-3),var(--green));
  color:#fff;
  font-size:10.5px;
  font-weight:900;
  text-align:center;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  box-shadow:0 4px 10px -5px rgba(7,92,36,.9);
}

.app-logo{
  width:58px;height:58px;
  border-radius:13px;
  overflow:hidden;
  background:#f4f7f5;
  border:1px solid var(--line);
  display:block;
}
.app-logo img{width:100%;height:100%;object-fit:cover}
.app-logo .logo-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--green-light),#fff);
  color:var(--green-3);
  font-size:16px;font-weight:900;
}

.app-meta{min-width:0}
.app-name{
  margin:0 0 3px;
  font-size:16.5px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.2;
}
.app-name a{color:var(--ink)}
.app-name a:hover{color:var(--green-3);text-decoration:none}
.app-line{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  font-size:12.4px;
  font-weight:600;
  color:var(--ink-2);
  line-height:1.6;
}
.app-line .ic{font-size:12.5px}
.app-line b{font-weight:900;color:var(--ink)}
.app-line.bonus{color:var(--pink)}
.app-line.bonus .ic{color:var(--pink)}
.app-line.bonus b{color:var(--pink)}
.app-line:not(.bonus) .ic{color:var(--green)}

/* --------------------------- download button with a slow shine sweep ------ */
.app-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 15px;
  border-radius:11px;
  background:linear-gradient(120deg,var(--green-3) 0%,var(--green) 55%,#17a648 100%);
  color:#fff;
  font-size:12.6px;
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 8px 16px -10px rgba(7,92,36,.95),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s ease,filter .16s ease;
}
.app-cta:hover{color:#fff;text-decoration:none;filter:brightness(1.07)}
.app-cta:active{transform:scale(.97)}
.app-cta .ic{font-size:12.5px}

/* the shine itself: one wide diagonal bar that sweeps across on a loop */
.app-cta::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -60%;
  width:55%;
  z-index:-1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.16) 35%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.16) 65%,transparent 100%);
  transform:skewX(-18deg);
  animation:cta-shine 3.4s ease-in-out infinite;
  animation-delay:var(--shine-delay,0s);
  pointer-events:none;
}
@keyframes cta-shine{
  0%{left:-60%}
  55%{left:120%}
  100%{left:120%}
}

/* --------------------------------------------------------------- content -- */
.prose{padding:18px 16px;border-top:1px solid var(--line-2)}
.prose h2{font-size:18px;margin:0 0 9px}
.prose h3{font-size:14.5px;margin:16px 0 6px}
.prose p,.prose li{color:var(--ink-2);font-size:13.4px;line-height:1.7}
.prose p:last-child,.prose ul:last-child,.prose ol:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}
.prose a{font-weight:700;text-decoration:underline}
.prose ul li::marker{color:var(--green)}

.callout{
  padding:12px 13px;
  margin:14px 0 0;
  border:1px solid var(--green-line);
  border-left:4px solid var(--green);
  border-radius:11px;
  background:var(--green-light);
}
.callout-head{
  display:flex;align-items:center;gap:6px;
  margin:0 0 4px!important;
  font-size:12.5px;
  font-weight:900;
  color:var(--green-3)!important;
}
.callout-head .ic{color:var(--green)}
.callout p:last-child{margin:0;font-size:12.4px;color:var(--ink-2)}

.notice{
  margin:16px 12px 0;
  padding:13px 14px;
  border:1px solid #f6cdc9;
  border-left:4px solid #d9372a;
  border-radius:11px;
  background:#fff6f5;
}
.notice h2{display:flex;align-items:center;gap:6px;font-size:14px;color:#9b2419;margin:0 0 6px}
.notice h2 .ic{color:#d9372a}
.notice p{margin:0 0 6px;font-size:12.2px;line-height:1.7;color:#6d3029}
.notice p:last-child{margin:0}
.notice a{color:#9b2419;font-weight:700;text-decoration:underline}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 13px 34px;margin:0}
.steps li:last-child{padding-bottom:0}
.steps li::before{
  content:counter(s);
  position:absolute;left:0;top:0;
  width:23px;height:23px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--green-light);
  color:var(--green-3);
  font-size:11.5px;font-weight:900;
}
.steps li::after{content:"";position:absolute;left:11px;top:25px;bottom:3px;width:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps b{display:block;font-size:13.2px;color:var(--ink);margin-bottom:1px}
.steps span{font-size:12.4px;color:var(--ink-2)}

/* faq */
.faq{border-top:1px solid var(--line-2)}
.faq-title{padding:18px 16px 6px;font-size:18px;margin:0}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;
  cursor:pointer;
  font-size:13.4px;
  font-weight:800;
  color:var(--ink);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#fafcfb}
.faq summary .ic{flex:0 0 auto;color:var(--green);transition:transform .2s ease}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq-body{padding:0 16px 13px;font-size:12.8px;color:var(--ink-2)}
.faq-body p{margin:0}

/* ---------------------------------------------------------------- footer -- */
.site-footer{
  margin-top:16px;
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(112deg,var(--green-3),var(--green-2));
  color:rgba(255,255,255,.78);
  text-align:center;
}
.site-footer p{margin:0;font-size:12px}

/* scroll top */
.to-top{
  position:fixed;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:55;
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:linear-gradient(140deg,var(--green),var(--green-3));
  color:#fff;
  box-shadow:0 12px 24px -12px rgba(7,92,36,.95);
  cursor:pointer;
  opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}


/* ==========================================================================
   INNER PAGES - about, contact, disclaimer, privacy, terms, sitemap
   Everything lives in this one file on purpose: one request, one cache entry
   ========================================================================== */

/* page head: breadcrumb + h1 + intro */
.page-head{padding:16px 16px 14px;border-bottom:1px solid var(--line-2);background:#fbfdfb}
.crumbs{
  display:flex;align-items:center;gap:6px;
  margin:0 0 9px;
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-3);
}
.crumbs a{display:inline-flex;align-items:center;gap:4px;color:var(--green-2)}
.crumbs a:hover{color:var(--green-3)}
.crumbs span[aria-current]{color:var(--ink-2)}
.page-h1{
  font-size:clamp(21px,5.4vw,26px);
  line-height:1.22;
  letter-spacing:-.03em;
  margin:0 0 7px;
}
.page-intro{
  margin:0;
  font-size:13.2px;
  line-height:1.65;
  color:var(--ink-2);
}

/* generic content card used by every inner page */
.card{
  margin:12px 12px 0;
  padding:15px 15px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.card h2{font-size:16.5px;margin:0 0 8px;letter-spacing:-.02em}
.card h3{font-size:13.8px;margin:0 0 4px}
.card p{font-size:13.2px;line-height:1.72;color:var(--ink-2)}
.card p:last-child{margin-bottom:0}
.card ul,.card ol{font-size:13.2px;line-height:1.72;color:var(--ink-2);margin-bottom:0}
.card li::marker{color:var(--green)}
.card p a,.card td a,.card .muted a{font-weight:700;text-decoration:underline}
.muted{font-size:12px!important;color:var(--ink-3)!important;margin-top:10px!important}

/* keep paragraphs separated inside a card */
.card p + p{margin-top:9px}

/* alert card */
.alert-card{
  margin:12px 12px 0;
  padding:15px;
  border:1px solid #f6cdc9;
  border-left:4px solid #d9372a;
  border-radius:var(--radius);
  background:#fff6f5;
}
.alert-card h2{display:flex;align-items:center;gap:7px;font-size:15px;color:#9b2419;margin:0 0 8px}
.alert-card h2 .ic{color:#d9372a}
.alert-card p{font-size:13px;line-height:1.72;color:#6d3029;margin:0}
.alert-card p + p{margin-top:8px}

/* icon tick list */
.tick-list{list-style:none;margin:0;padding:0}
.tick-list li{display:flex;gap:9px;align-items:flex-start;margin:0 0 9px}
.tick-list li:last-child{margin-bottom:0}
.tick{flex:0 0 auto;color:var(--green);font-size:14px;line-height:1.5}
.tick svg{width:14px;height:14px}

/* bullet list with custom markers */
.bullet-list{list-style:none;margin:0;padding:0}
.bullet-list li{position:relative;padding-left:16px;margin:0 0 7px}
.bullet-list li:last-child{margin-bottom:0}
.bullet-list li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
}

/* two column mini cards */
.grid-2{display:grid;gap:9px}
.mini{
  padding:11px 12px;
  border:1px solid var(--line-2);
  border-radius:11px;
  background:#fbfdfb;
}
.mini h3{font-size:13.2px;color:var(--green-3)}
.mini p{font-size:12.2px;margin:0;color:var(--ink-2)}

/* contact cards */
.contact-grid{display:grid;gap:9px;margin:11px 0 4px}
.contact-card{
  display:flex;align-items:center;gap:11px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:border-color .16s ease,transform .16s ease;
}
.contact-card{text-decoration:none}
.contact-card:hover{border-color:var(--green-line);text-decoration:none;transform:translateY(-1px)}
.contact-card b,.contact-card span{text-decoration:none}
.contact-ico{
  flex:0 0 auto;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:var(--green-light);
  color:var(--green-3);
  font-size:16px;
}
.contact-body{min-width:0}
.contact-body b{display:block;font-size:13.4px;color:var(--ink)}
.contact-body span{display:block;font-size:12px;color:var(--ink-2);word-break:break-word}

/* tables */
.table-wrap{overflow-x:auto;margin-top:10px;-webkit-overflow-scrolling:touch}
.card table{width:100%;border-collapse:collapse;font-size:12.4px}
.card th,.card td{
  padding:9px 10px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line-2);
}
.card th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:#f7faf8}
.card tr:last-child td{border-bottom:0}

/* state pills */
.pill-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.pill-list li{
  margin:0;
  padding:5px 10px;
  border-radius:99px;
  background:var(--green-light);
  border:1px solid var(--green-line);
  color:var(--green-3);
  font-size:11.5px;
  font-weight:800;
}

/* sitemap list */
.sitemap-list{list-style:none;margin:11px 0 0;padding:0}
.sitemap-row{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;
  margin-bottom:8px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--ink);
  background:#fff;
  transition:border-color .16s ease,transform .16s ease;
}
.sitemap-row:last-child{margin-bottom:0}
.sitemap-row{text-decoration:none}
.sitemap-row:hover{border-color:var(--green-line);text-decoration:none;transform:translateX(2px)}
.sitemap-row b,.sitemap-row span,.sitemap-row .ic{text-decoration:none}
.sitemap-row > .ic:first-child{flex:0 0 auto;color:var(--green);font-size:15px}
.sitemap-row span span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600}
.sitemap-row b{display:block;font-size:13.4px}
.sitemap-row .arrow{margin-left:auto;color:var(--ink-3);font-size:12px}

/* steps list reused on contact / privacy pages */
.card .steps b{font-size:13px}
.card .steps span{font-size:12.2px}

/* --------------------------------------------------------------- responsive
   Under 620px the shell fills the screen; above it stays a centered phone
   column so desktop visitors see the exact mobile layout.
   -------------------------------------------------------------------------- */
@media(max-width:619px){
  .shell{box-shadow:none;max-width:100%}
  body{background:#fff}
}
@media(min-width:620px){
  .to-top{right:calc(50% - (var(--shell) / 2) + 14px)}
}

@media(max-width:379px){
  .app-card{grid-template-columns:auto auto minmax(0,1fr);row-gap:9px}
  .app-cta{grid-column:2/4;justify-self:stretch}
  .app-logo{width:52px;height:52px}
  .app-name{font-size:15.5px}
  .top-link{font-size:12.4px;padding:6px 8px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .app-cta::after{display:none}
}

@media print{
  .site-header,.top-nav,.dropdown,.to-top{display:none!important}
  .shell{box-shadow:none;max-width:100%}
  body{background:#fff}
}