:root{
  --brand:#0f97c4;--brand-dark:#0a7096;--brand-deep:#08536f;
  --ink:#16262e;--ink-soft:#39494f;--muted:#5c7480;
  --bg:#f4f8fa;--card:#ffffff;--line:#e3edf2;--line-soft:#eef4f7;
  --radius:16px;--radius-sm:10px;
  --shadow:0 1px 2px rgba(16,42,56,.04),0 8px 24px -12px rgba(16,42,56,.14);
  --measure:72ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink);
background:var(--bg);line-height:1.7;font-size:17px;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
video,iframe,embed,object,canvas,svg{max-width:100%}
a{color:var(--brand-dark);text-underline-offset:2px}
a:hover{color:var(--brand-deep)}
:focus-visible{outline:3px solid #86cbe4;outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4{line-height:1.25;text-wrap:balance}

/* header */
.site-head{background:#fff;border-bottom:1px solid var(--line);
position:sticky;top:0;z-index:60}
.head-inner{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap}
.logo{height:52px;width:auto}
.site-title{font-size:1.3rem;font-weight:700;line-height:1.2;margin-right:auto;
letter-spacing:-.01em}
.site-title a{text-decoration:none;color:var(--ink)}
.site-title small{display:block;font-weight:500;color:var(--muted);font-size:.8rem;
letter-spacing:.01em;margin-top:2px}
.head-cta{background:var(--brand-dark);color:#fff !important;text-decoration:none;
padding:11px 22px;border-radius:999px;font-weight:600;white-space:nowrap;
box-shadow:0 1px 2px rgba(10,112,150,.3);transition:background .15s,transform .08s}
.head-cta:hover{background:var(--brand-deep)}
.head-cta:active{transform:translateY(1px)}
.head-phone{color:var(--ink-soft);text-decoration:none;white-space:nowrap;font-weight:500}
.head-phone:hover{color:var(--brand-dark)}

/* nav — one calm row; long guide titles live in a dropdown (see group_long_nav) */
.nav{background:#fff;border-bottom:1px solid var(--line);
position:sticky;top:80px;z-index:55}
.nav-toggle{display:none}
.nav-burger{display:none;color:var(--ink);padding:13px 22px;cursor:pointer;
font-weight:600;user-select:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.nav>.wrap>ul>li{position:relative}
.nav a{display:block;color:var(--ink-soft);text-decoration:none;padding:13px 11px;
font-size:.9rem;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;
transition:color .15s,border-color .15s}
.nav a:hover{color:var(--brand-dark);border-bottom-color:var(--brand)}
.nav>.wrap>ul>li.has-sub>a::after{content:"›";display:inline-block;
transform:rotate(90deg);margin-left:7px;font-size:.85em;opacity:.6}
.nav li.lang a{color:var(--brand-dark);font-weight:600}
.nav li ul{display:none;position:absolute;left:0;top:100%;background:#fff;
min-width:290px;z-index:70;border:1px solid var(--line);border-radius:var(--radius-sm);
box-shadow:var(--shadow);padding:6px;overflow:hidden}
.nav li:hover>ul,.nav li:focus-within>ul{display:block}
.nav li ul a{padding:9px 12px;border-radius:7px;border-bottom:0;font-size:.9rem;
line-height:1.4}
.nav li ul a:hover{background:var(--bg);border-bottom:0}

/* main */
main{padding:38px 0 68px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:40px 44px;box-shadow:var(--shadow);overflow-wrap:break-word}
.card h1{margin:0 0 20px;color:var(--brand-deep);font-size:2.05rem;letter-spacing:-.02em}
.card h2{color:var(--brand-deep);font-size:1.4rem;margin:34px 0 12px;letter-spacing:-.01em}
.card h3{font-size:1.15rem;margin:26px 0 10px;color:var(--ink)}
/* keep running prose to a readable measure; grid columns set their own width */
.card>p,.card>ul,.card>ol,.card>blockquote,.card>h2,.card>h3{max-width:var(--measure)}
.card>p{color:var(--ink-soft)}
.p-intro{font-size:1.12rem;color:var(--ink) !important;line-height:1.62}
.card ul,.card ol{padding-left:22px}
.card li{margin:7px 0}
.card blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--brand);
color:var(--ink-soft);font-style:italic}
.card hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.card table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;
font-size:.95rem;margin:20px 0}
.card th,.card td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.card th{background:var(--bg);font-weight:600}
.post-meta{color:var(--muted);font-size:.88rem;margin:-8px 0 24px}
.post-meta .cat{background:var(--bg);border:1px solid var(--line);
border-radius:999px;padding:3px 11px;margin-left:6px;font-size:.78rem}

/* content helpers */
.su-row{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 38px;margin:22px 0;
align-items:start}
.su-col{min-width:0}
.su-col-1-3{grid-column:span 2}
.su-col-1-2{grid-column:span 3}
.su-col-2-3{grid-column:span 4}
.su-col-full{grid-column:1/-1}
.su-row>*:not(.su-col){grid-column:1/-1}
.su-col>*:first-child{margin-top:0}
.su-col>*:last-child{margin-bottom:0}
.su-col>p.col-head,.su-col>h3:first-child{color:var(--brand-deep);font-size:1.06rem;
font-weight:700;padding-bottom:10px;margin:0 0 14px;border-bottom:2px solid var(--line)}
.su-col>p.col-head strong{font-weight:700}
.page-list{padding-left:0;list-style:none}
.page-list li{margin:6px 0;padding-left:0}
.page-list a{font-weight:600;text-decoration:none}
.page-list a:hover{text-decoration:underline}
.page-list li.current a{color:var(--ink)}
.portal-note,.newsletter-box{background:#eff7fb;border:1px solid var(--line);
border-left:4px solid var(--brand);border-radius:var(--radius-sm);padding:16px 20px;margin:20px 0}
.iframe-container{overflow:hidden;padding-top:56.25%;position:relative;
border-radius:var(--radius-sm)}
.iframe-container iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}
.wp-caption{margin:24px auto;text-align:center;max-width:100%}
.wp-caption figcaption{color:var(--muted);font-size:.85rem;margin-top:8px}
.alignleft{float:left;margin:6px 26px 16px 0}
.alignright{float:right;margin:6px 0 16px 26px}
.aligncenter{display:block;margin:18px auto}

/* blog index */
.year-head{color:var(--brand-deep);font-size:1.5rem;
border-bottom:2px solid var(--line);padding-bottom:8px;margin:38px 0 6px}
.post-item{margin:0;padding:16px 14px;border-radius:var(--radius-sm);
border-bottom:1px solid var(--line-soft);transition:background .13s}
.post-item:hover{background:var(--bg)}
.post-item .date{color:var(--muted);font-size:.82rem;display:block;margin-bottom:3px;
letter-spacing:.01em}
.post-item h3{margin:0 0 5px;font-size:1.1rem;line-height:1.35}
.post-item h3 a{text-decoration:none;color:var(--brand-deep)}
.post-item:hover h3 a{text-decoration:underline}
.post-item p{margin:0;color:var(--ink-soft);font-size:.94rem;max-width:var(--measure)}

/* footer */
.site-foot{background:#12333f;color:#c7dde6;margin-top:32px}
.foot-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:34px;padding:44px 0}
.site-foot h4{color:#fff;margin:0 0 12px;font-size:.95rem;letter-spacing:.03em;
text-transform:uppercase;opacity:.9}
.site-foot p{margin:0 0 8px;font-size:.93rem;line-height:1.65}
.site-foot a{color:#8ecfe6;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:5px 0;font-size:.93rem}
.foot-bottom{border-top:1px solid #24505f;padding:16px 0;font-size:.84rem;color:#7fa5b4}

/* the menu stops fitting on one line before the layout needs to change, so the
   burger comes in at its own breakpoint rather than at the layout one */
@media(max-width:1100px){
 .nav{position:static}
 .nav-burger{display:block}
 .nav>.wrap>ul{display:none;flex-direction:column;align-items:stretch;padding-bottom:8px}
 .nav-toggle:checked~ul{display:flex}
 .nav a{padding:11px 8px;border-bottom:1px solid var(--line-soft);white-space:normal}
 .nav>.wrap>ul>li.has-sub>a::after{float:right}
 .nav li ul{display:block;position:static;background:transparent;border:0;
 box-shadow:none;padding:0 0 0 14px;min-width:0}
}
@media(max-width:860px){
 .su-row{grid-template-columns:1fr;gap:10px}
 .su-col,.su-col-1-3,.su-col-1-2,.su-col-2-3{grid-column:span 1}
 .foot-inner{grid-template-columns:1fr;gap:26px;padding:34px 0}
 .card{padding:26px 22px;border-radius:var(--radius-sm)}
 .card h1{font-size:1.6rem}
 main{padding:24px 0 48px}
 .site-head{position:static}
 .head-inner{gap:12px;padding:12px 0}
 .site-title{font-size:1.08rem}
 .logo{height:44px}
 .alignleft,.alignright{float:none;display:block;margin:18px auto}
}
@media(prefers-reduced-motion:reduce){
 *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media print{
 .site-head,.nav,.site-foot,.head-cta{display:none}
 .card{border:0;box-shadow:none;padding:0}
 body{background:#fff;font-size:12pt}
}

/* PediaTree app call-to-action */
.app-cta{border:1px solid #dbe7ee;border-radius:14px;padding:22px 24px;margin:18px 0;background:#f7fbfd}
.app-cta h2{margin:0 0 12px;font-size:1.15rem;color:#0a7096}
.app-points{margin:0 0 20px;padding-left:20px}
.app-points li{margin:6px 0}
.store-buttons{display:flex;flex-wrap:wrap;gap:14px}
.store-btn{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:10px 22px 10px 18px;
border-radius:12px;background:#14303d;border:1px solid #14303d;color:#fff !important;text-decoration:none;
transition:background .15s,border-color .15s,transform .08s}
.store-btn:hover{background:#0a7096;border-color:#0a7096}
.store-btn:active{transform:translateY(1px)}
.store-btn:focus-visible{outline:3px solid #7cc7e0;outline-offset:2px}
.store-ico{flex:0 0 auto;opacity:.95}
.store-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-eyebrow{font-size:.72rem;letter-spacing:.02em;opacity:.85}
.store-name{font-size:1.18rem;font-weight:600;letter-spacing:.01em}
.store-buttons.badges{align-items:center;gap:10px}
.store-badge{display:inline-flex;text-decoration:none;border-radius:10px}
.store-badge:focus-visible{outline:3px solid #7cc7e0;outline-offset:2px}
/* both official badges are tight to their artwork (measured), so equal height = equal
   visual weight, which is what Apple's and Google's guidelines both ask for */
.badge-img{display:block;width:auto;height:54px}
@media(max-width:560px){.store-buttons.badges{flex-direction:column;align-items:flex-start}}
.app-fallback{margin-top:16px;color:#4b5563}
.foot-app{margin:0 0 8px}
@media(max-width:560px){
 .store-buttons{flex-direction:column}
 .store-btn{width:100%;justify-content:flex-start}
}