/* Teleport: marketing site and help center.
   Brand: docs/brand/Teleport-Brand-Guidelines.md layered on docs/brand/Sur-Brand-Guidelines-v1.1.md.
   DM Sans only (Instrument Serif italic for one word per H1, Ember), charcoal is the dark, Portal amber once per view
   (the single primary button), no SUR yellow or SUR mark, teal only for checkmarks, red only for errors,
   radii 10/16/24, 1px #E7E5E4 hairlines, Unicode glyph icons in Stone. No blue. */
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/fonts/dm-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/fonts/dm-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-display:swap;font-weight:400;src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}
:root{
  --sur-charcoal:#1C1917;--sur-charcoal-light:#292524;--sur-yellow:#FEF08A;--sur-offwhite:#FAFAF9;--sur-stone:#78716C;--sur-stone-light:#A8A29E;
  --sur-border:#E7E5E4;--sur-teal:#0F766E;--sur-red:#DC2626;--sur-r-sm:10px;--sur-r-md:16px;--sur-r-lg:24px;
  --tp-amber:#FBBF24;--tp-amber-deep:#F59E0B;--tp-ember:#92400E;--tp-glow:#FFFBEB;--tp-wordmark-tracking:-0.035em;
  --tp-font:'DM Sans','Segoe UI Symbol','DejaVu Sans',sans-serif;--tp-hair-dark:#44403C;
  --wrap:1160px;
}
*{box-sizing:border-box}
html{accent-color:var(--sur-charcoal);scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.6 var(--tp-font);color:var(--sur-charcoal);background:var(--sur-offwhite);-webkit-font-smoothing:antialiased}
::selection{background:var(--sur-border);color:var(--sur-charcoal)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--sur-charcoal);margin:0 0 12px}
h1{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(38px,6vw,64px)}
h2{font-weight:700;letter-spacing:-.03em;line-height:1.12;font-size:clamp(28px,3.6vw,40px)}
h3{font-weight:700;line-height:1.3;font-size:19px}
h4{font-weight:700;font-size:16px}
p{font-weight:400;line-height:1.75;color:var(--sur-stone);margin:0 0 14px}
a{color:var(--sur-charcoal);text-decoration:underline;text-decoration-color:var(--sur-stone-light);text-underline-offset:3px}
a:hover{text-decoration-color:var(--sur-charcoal)}
:focus-visible{outline:2px solid var(--sur-charcoal);outline-offset:2px}
.accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--tp-ember);letter-spacing:0}
.eyebrow{font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-stone);font-size:12px;margin:0 0 12px}
.caption{font-weight:500;color:var(--sur-stone-light);font-size:13px}
.lead{font-size:19px;line-height:1.7;color:var(--sur-stone);max-width:620px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;border:1px solid var(--sur-border);border-radius:var(--sur-r-sm);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.glyph{font-family:'Segoe UI Symbol','DejaVu Sans',var(--tp-font);color:var(--sur-stone);font-size:20px;line-height:1;font-weight:400}
.glyph.yes{color:var(--sur-teal)}

/* Lockup (mark + "Teleport" + hairline + tagline "Get hired faster") */
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--sur-charcoal)}
.tp-mark{display:block;flex:none}
.wordmark{display:flex;flex-direction:column;line-height:1}.wordmark .name{font-weight:700;letter-spacing:var(--tp-wordmark-tracking);font-size:20px;color:var(--sur-charcoal)}
.lockup-rule{width:1px;height:22px;background:var(--sur-border)}
.tagline{display:inline-flex;align-items:center;font-weight:500;font-size:12px;line-height:16px;color:#78716C;letter-spacing:.01em;white-space:nowrap}
.on-dark .tagline{color:#A8A29E}.on-dark .wordmark .name{color:var(--sur-offwhite)}.on-dark .lockup-rule{background:var(--tp-hair-dark)}
.lockup.compact .wordmark{gap:5px}

/* Buttons. One primary (amber, arrow) per view; secondary is a hairline with no arrow; tertiary is a text link with an arrow. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--sur-border);border-radius:var(--sur-r-sm);padding:12px 18px;
  font:600 15px/1.1 var(--tp-font);background:transparent;color:var(--sur-charcoal);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--sur-stone-light);background:#fff}
.btn.primary{background:var(--tp-amber);border-color:var(--tp-amber);font-weight:700}
.btn.primary::after{content:'\2192';font-family:'Segoe UI Symbol','DejaVu Sans',var(--tp-font);font-weight:400}
.btn.primary:hover{border-color:var(--tp-amber-deep);background:var(--tp-amber)}
.btn.small{padding:9px 14px;font-size:14px}
.on-dark .btn{color:var(--sur-offwhite);border-color:var(--tp-hair-dark)}.on-dark .btn:hover{background:var(--sur-charcoal-light);border-color:var(--sur-stone)}
.tertiary{font-weight:600;text-decoration:none;border-bottom:1px solid var(--sur-stone-light);padding-bottom:1px}
.tertiary::after{content:' \2192';font-family:'Segoe UI Symbol','DejaVu Sans',var(--tp-font);font-weight:400}
.tertiary:hover{border-bottom-color:var(--sur-charcoal)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--sur-border)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:68px}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{font-weight:600;font-size:15px;text-decoration:none;color:var(--sur-stone);padding:8px 12px;border-radius:var(--sur-r-sm)}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--sur-charcoal)}
.site-nav a[aria-current=page]{background:#fff;box-shadow:inset 0 0 0 1px var(--sur-border)}
.site-nav .btn{margin-left:8px;color:var(--sur-charcoal)}
.menu-btn{display:none;margin-left:auto;font:600 14px/1 var(--tp-font);background:transparent;border:1px solid var(--sur-border);border-radius:var(--sur-r-sm);padding:9px 12px;color:var(--sur-charcoal);cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;gap:0;background:var(--sur-offwhite);border-bottom:1px solid var(--sur-border);padding:8px 16px 16px}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 8px;font-size:16px}
  .site-nav .btn{margin:8px 0 0}
  .site-header .lockup-rule,.site-header .tagline{display:none}
}

/* Sections */
section{padding:88px 0}
section.tight{padding:56px 0}
.band-white{background:#fff;border-top:1px solid var(--sur-border);border-bottom:1px solid var(--sur-border)}
.band-dark{background:var(--sur-charcoal);color:var(--sur-offwhite)}
.band-dark h2,.band-dark h3{color:var(--sur-offwhite)}.band-dark p{color:var(--sur-stone-light)}.band-dark .eyebrow{color:var(--sur-stone-light)}
.band-dark a{color:var(--sur-offwhite);text-decoration-color:var(--sur-stone)}
.section-head{max-width:720px;margin-bottom:44px}
.hero{padding:72px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero .note{margin-top:18px}
.shot{border:1px solid var(--sur-border);border-radius:var(--sur-r-md);background:#fff;overflow:hidden}
.shot img{width:100%}
.shot.tall{max-height:620px}
figure{margin:0}
figcaption{font-size:13px;color:var(--sur-stone-light);font-weight:500;margin-top:10px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}section{padding:64px 0}.hero{padding:48px 0 40px}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{background:#fff;border:1px solid var(--sur-border);border-radius:var(--sur-r-md);padding:22px}
.steps .num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--sur-r-sm);background:var(--sur-charcoal);color:var(--sur-offwhite);font-weight:700;margin-bottom:14px}
.steps p{margin:0;font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media (max-width:560px){.steps{grid-template-columns:1fr}}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0;border-top:1px solid var(--sur-border)}
.feature:first-of-type{border-top:0}
.feature.flip .feature-text{order:2}
.feature-text .glyph{display:block;margin-bottom:14px}
.feature ul{list-style:none;padding:0;margin:16px 0 0}
.feature li{display:flex;gap:10px;align-items:flex-start;color:var(--sur-stone);line-height:1.6;margin:8px 0}
.feature li .glyph{font-size:16px;margin-top:3px}
.feature .shot{max-height:560px}
.feature .shot img{object-fit:cover;object-position:top}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px}.feature.flip .feature-text{order:0}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--sur-border);border-radius:var(--sur-r-md);padding:24px}
.card .glyph{display:block;margin-bottom:14px}
.card p{margin:0;font-size:15px}
.card h3{margin-bottom:8px}
.band-dark .card{background:var(--sur-charcoal-light);border-color:var(--tp-hair-dark)}
@media (max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}

.callout{background:var(--tp-glow);border:1px solid var(--sur-border);border-radius:var(--sur-r-md);padding:18px 20px;color:var(--tp-ember);font-size:15px;line-height:1.65}
.callout p{color:var(--tp-ember);margin:0}.callout p+p{margin-top:8px}.callout a{color:var(--tp-ember)}
.callout strong{color:var(--tp-ember)}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:10px;margin:10px 0;color:var(--sur-stone);line-height:1.6}
.checks li .glyph{font-size:16px;margin-top:3px}

.page-head{padding:64px 0 40px;border-bottom:1px solid var(--sur-border);background:#fff}
.page-head h1{font-size:clamp(36px,5vw,54px)}
.prose{max-width:760px}
.prose h2{font-size:26px;margin-top:44px}
.prose h3{margin-top:28px}
.prose p,.prose li{color:var(--sur-stone);line-height:1.75}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose strong{color:var(--sur-charcoal)}
.prose table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--sur-border);border-radius:var(--sur-r-md);overflow:hidden;margin:18px 0}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sur-border);font-size:14px;vertical-align:top;color:var(--sur-stone)}
.prose tr:last-child td{border-bottom:0}
.prose th{background:var(--sur-offwhite);color:var(--sur-stone);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.prose code,.kbd{font-family:var(--tp-font);font-weight:600;color:var(--sur-charcoal);background:var(--sur-offwhite);border:1px solid var(--sur-border);border-radius:var(--sur-r-sm);padding:1px 6px;font-size:.92em}
.prose figure{margin:22px 0}
.prose .callout{margin:20px 0}
.prose .anchor{margin-left:6px;text-decoration:none;color:var(--sur-stone-light);font-weight:400;opacity:0}
.prose h2:hover .anchor,.prose h3:hover .anchor,.prose .anchor:focus{opacity:1}

/* FAQ accordion: question in 700 with a plus sign at the right */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--sur-border);padding:18px 0}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:18px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:400;font-size:24px;color:var(--sur-stone);line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details p{margin:12px 0 0}
.faq h2{font-size:22px;margin:48px 0 4px}

/* Download */
.install-steps{counter-reset:s;list-style:none;padding:0;margin:0;max-width:760px}
.install-steps li{counter-increment:s;position:relative;padding:0 0 26px 56px}
.install-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:var(--sur-r-sm);background:var(--sur-charcoal);color:var(--sur-offwhite);display:grid;place-items:center;font-weight:700}
.install-steps h3{margin:4px 0 6px}
.install-steps p{margin:0}
.meta-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}

/* Help center */
.help-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding:40px 24px 88px}
.help-side{position:sticky;top:92px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;padding-right:8px}
.help-side h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-stone);font-weight:700;margin:22px 0 6px}
.help-side ul{list-style:none;margin:0;padding:0}
.help-side a{display:block;text-decoration:none;color:var(--sur-stone);font-size:14px;padding:6px 10px;border-radius:var(--sur-r-sm);line-height:1.4}
.help-side a:hover{color:var(--sur-charcoal)}
.help-side a[aria-current=page]{color:var(--sur-charcoal);background:#fff;box-shadow:inset 0 0 0 1px var(--sur-border);font-weight:600}
.help-search{position:relative}
.help-search input{width:100%;font:400 15px/1.4 var(--tp-font);padding:11px 12px;border:1px solid var(--sur-border);border-radius:var(--sur-r-sm);background:#fff;color:var(--sur-charcoal)}
.help-search input:focus{outline:none;border-color:var(--sur-charcoal)}
.help-search input::placeholder{color:var(--sur-stone-light)}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--sur-border);border-radius:var(--sur-r-md);padding:6px;z-index:40;max-height:420px;overflow:auto}
.search-results[hidden]{display:none}
.search-results a{display:block;text-decoration:none;padding:10px 12px;border-radius:var(--sur-r-sm)}
.search-results a:hover,.search-results a.active{background:var(--sur-offwhite)}
.search-results .t{font-weight:700;color:var(--sur-charcoal);font-size:14px}
.search-results .s{display:block;color:var(--sur-stone);font-size:13px;line-height:1.5;margin-top:2px}
.search-results .none{padding:10px 12px;color:var(--sur-stone);font-size:14px}
.help-hero{padding:56px 0 36px;background:#fff;border-bottom:1px solid var(--sur-border)}
.help-hero .help-search{max-width:620px;margin-top:22px}
.help-hero .help-search input{padding:14px 16px;font-size:17px}
.help-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.help-cats .card ul{list-style:none;padding:0;margin:10px 0 0}
.help-cats .card li{margin:7px 0;font-size:15px}
.breadcrumbs{font-size:13px;color:var(--sur-stone);margin-bottom:14px}
.breadcrumbs a{color:var(--sur-stone)}
.article-foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--sur-border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article-foot a{text-decoration:none}
.article-foot .dir{display:block;font-size:12px;color:var(--sur-stone);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.article-foot .ttl{font-weight:700;color:var(--sur-charcoal)}
.toc-mobile{display:none}
@media (max-width:900px){
  .help-layout{grid-template-columns:1fr;gap:20px;padding-top:24px}
  .toc-mobile{justify-self:start;margin-bottom:16px}
  .help-side{position:static;max-height:none;display:none}
  .help-side.open{display:block}
  .toc-mobile{display:inline-flex}
  .help-cats{grid-template-columns:1fr}
}

/* Footer */
.site-footer{background:var(--sur-charcoal);color:var(--sur-stone-light);padding:56px 0 40px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.site-footer h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-stone-light);font-weight:700;margin:0 0 12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:8px 0}
.site-footer a{color:var(--sur-offwhite);text-decoration:none;font-size:15px}
.site-footer a:hover{text-decoration:underline;text-decoration-color:var(--sur-stone)}
.site-footer p{color:var(--sur-stone-light);font-size:14px;margin-top:14px}
.site-footer .legal-line{border-top:1px solid var(--tp-hair-dark);margin-top:40px;padding-top:20px;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer .cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Help extras */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.h3{font-size:19px;margin:0 0 4px}
.help-article h1{font-size:clamp(32px,4vw,44px);margin-bottom:12px}
.help-article .lead{font-size:18px;margin-bottom:8px}
.on-page{margin:20px 0 8px;padding:16px 20px;background:#fff;border:1px solid var(--sur-border);border-radius:var(--sur-r-md)}
.on-page .eyebrow{margin-bottom:6px}
.on-page ul{list-style:none;padding:0;margin:0;columns:2;column-gap:24px}
.on-page li{margin:4px 0;font-size:14px;break-inside:avoid}
.on-page a{color:var(--sur-stone);text-decoration:none}
.on-page a:hover{color:var(--sur-charcoal);text-decoration:underline}
.prose h2 .anchor,.prose h3 .anchor{margin-left:8px;color:var(--sur-stone-light);text-decoration:none;font-weight:500;opacity:0}
.prose h2:hover .anchor,.prose h3:hover .anchor,.prose .anchor:focus{opacity:1}
.prose h2,.prose h3{scroll-margin-top:90px}
.help-side .help-search{margin-bottom:6px}
.help-article .faq{max-width:none}
.draft-notice{margin-bottom:28px}
@media (max-width:560px){.on-page ul{columns:1}}
.table-wrap{overflow-x:auto;margin:20px 0;border-radius:var(--sur-r-md)}
.table-wrap table{margin:0}
@media (max-width:560px){.prose th,.prose td{padding:8px 10px;font-size:13px}}
.prose code{overflow-wrap:anywhere}
.prose p,.prose li,.prose td{overflow-wrap:break-word}
.prose .shot-fig.portrait{max-width:460px}