/*
 * Tolinku overrides.
 *
 * Everything we change about the imported template lives here, loaded last, so
 * the template's own files stay untouched and replaceable. Never edit
 * app.min.css or main.css directly.
 */

/* ── Utility name collisions ──
   The template and Tailwind both define .mt-50, .pl-110 and .pr-110, with
   completely different scales: the template means 50px, Tailwind means
   50 x 0.25rem = 200px. Our Tailwind build loads after the template's CSS and
   carries equal specificity, so Tailwind was winning and the hero had a 200px
   gap where 50px was intended.

   These are the only three that collide in our markup. Restored here with the
   template's own responsive steps, read from app.min.css. Loaded last, so
   these win. Any new template utility of the form .x-NN needs the same
   treatment, or Tailwind will quietly reinterpret it. */
.mt-50 { margin-top: 50px; }
@media (max-width: 991px) { .mt-50 { margin-top: 40px; } }
@media (max-width: 767px) { .mt-50 { margin-top: 30px; } }

.pl-110 { padding-left: 110px; }
@media (max-width: 1399px) { .pl-110 { padding-left: 50px; } }
@media (max-width: 991px)  { .pl-110 { padding-left: 0; } }

.pr-110 { padding-right: 110px; }
@media (max-width: 1399px) { .pr-110 { padding-right: 50px; } }
@media (max-width: 767px)  { .pr-110 { padding-right: 0; } }

/* Our logo SVG has no intrinsic size; the template's did. */
.header-logo img,
.azzle-footer-textarea img { height: 36px; width: auto; max-width: 170px; display: block; }

/* The template pads the FOOTER logo 30px at the bottom, and box-sizing is
   border-box, so that padding ate the fixed height and left a 6px content box:
   width:auto then resolved to 26px. Space it with a margin instead.
   Footer only: this was grouped with the header logo above, which gave that a
   30px bottom margin too. Its column is vertically centred, so the taller
   margin box parked the image at the top of it, 17.5px above the nav. */
.azzle-footer-textarea img { padding-bottom: 0; margin-bottom: 30px; }

/* The template nudges the header logo up 5px. With the stray bottom margin
   gone that nudge is the only thing left off centre, and the mark now has to
   line up with the nav and the buttons at the header's midline. */
.header-logo a img { margin-top: 0; margin-bottom: 0; }

/* No overflow rule on html or body.
   `overflow-x: hidden` there makes html a scroll container and stops the page
   scrolling at all, which also silently killed IntersectionObserver. `clip`
   had the same effect here. The real sideways overflow was .pl-110, fixed
   above, so nothing needs clamping at the document level. If overflow returns,
   find the element causing it and fix that, not clip the document. */

/* ── Admin bar ──
   The template header is position:fixed; top:0, so the WordPress admin bar
   lands on top of it when logged in. WordPress already pushes <html> down;
   the fixed bar has to be moved by hand. Below 600px the admin bar is not
   fixed, so the header goes back to the top. */
body.admin-bar .azzle-header-section { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .azzle-header-section { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .azzle-header-section { top: 0; }
}

/* ── Dashboard render ──
   Replaces the template's Dashboard.png in the hero. Drawn in markup so it
   stays sharp, restyles with the site and can be clicked. */
.tolinku-dash {
	background: #fff;
	border: 1px solid var(--light-color3, #dbd6cf);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 40px 90px -40px rgba(0,0,0,.35);
	text-align: left;
	max-width: 100%;
}
.tolinku-dash-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	padding: 16px 20px; border-bottom: 1px solid var(--light-color3, #dbd6cf);
}
.tolinku-dash-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tolinku-dash-name { font-weight: 700; font-size: 15px; color: #000; }
.tolinku-dash-live {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(254,51,10,.1); color: #c32200;
	border-radius: 999px; padding: 3px 9px;
	font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.tolinku-dash-live i { width: 6px; height: 6px; border-radius: 50%; background: #fe330a; display: block; }
.tolinku-dash-tabs { display: flex; gap: 4px; border: 1px solid var(--light-color3, #dbd6cf); border-radius: 999px; padding: 4px; }
.tolinku-dash-tab {
	border: 0; background: transparent; cursor: pointer;
	border-radius: 999px; padding: 6px 12px;
	font-size: 13px; font-weight: 600; color: #5c5952;
	transition: background-color .18s ease, color .18s ease;
}
.tolinku-dash-tab:hover { color: #000; }
.tolinku-dash-tab[aria-selected="true"] { background: #000; color: #fff; }
.tolinku-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--light-color3, #dbd6cf); }
.tolinku-dash-stat { background: #fff; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tolinku-dash-stat-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5c5952; }
.tolinku-dash-stat-num { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #000; font-variant-numeric: tabular-nums; }
.tolinku-dash-stat-num.is-accent { color: #c32200; }
.tolinku-dash-chart { padding: 20px 20px 8px; }
.tolinku-dash-chart svg { display: block; width: 100%; height: 96px; }
.tolinku-dash-routes { border-top: 1px solid var(--light-color3, #dbd6cf); padding: 16px 20px; }
.tolinku-dash-routes-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5c5952; margin: 0 0 12px; }
.tolinku-dash-routes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tolinku-dash-routes li { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.tolinku-dash-route { min-width: 0; }
.tolinku-dash-route code {
	display: block; font-size: 13px; color: #000; padding: 0; background: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tolinku-dash-meter { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: #efeae3; overflow: hidden; }
.tolinku-dash-meter > span { display: block; height: 100%; border-radius: 999px; background: #fe330a; transition: width .5s ease; }
.tolinku-dash-route-num { font-size: 13px; color: #5c5952; font-variant-numeric: tabular-nums; }
.tolinku-dash-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
	border-top: 1px solid var(--light-color3, #dbd6cf); background: #fffbf4; padding: 12px 20px;
}
.tolinku-dash-sample { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5c5952; }
.tolinku-dash-foot a { font-size: 13px; font-weight: 600; color: #c32200; text-decoration: none; }
.tolinku-dash-foot a:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
	.tolinku-dash-stats { grid-template-columns: 1fr; }
	.tolinku-dash-stat-num { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.tolinku-dash-meter > span { transition: none; }
}

/* ── Mega menu ──
   The template ships plain dropdowns. Ours carry an icon, a title and a line
   of description per item, which is what the old header plugin had and what a
   product nav of this size needs. */
.main-menu ul li.tolinku-has-mega { position: static; }
.main-menu ul li.tolinku-has-mega .tolinku-mega {
	position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(6px);
	z-index: 60; padding-top: 14px; width: max-content; max-width: min(94vw, 1080px);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.main-menu ul li.tolinku-has-mega:hover .tolinku-mega,
.main-menu ul li.tolinku-has-mega:focus-within .tolinku-mega {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.tolinku-mega-inner {
	display: flex; gap: 32px; align-items: flex-start;
	background: #fffbf4; border: 1px solid var(--light-color3, #dbd6cf);
	border-radius: 16px; padding: 26px; text-align: left;
	box-shadow: 0 30px 70px -30px rgba(0,0,0,.3);
}
.tolinku-mega-col { min-width: 0; }
.tolinku-mega-label {
	margin: 0 0 14px; font-size: 11px; letter-spacing: .09em;
	text-transform: uppercase; color: #5c5952; font-weight: 600;
}
.tolinku-mega-grid { display: grid; gap: 2px; }
.tolinku-mega-grid.is-two { grid-template-columns: repeat(2, minmax(0, 240px)); column-gap: 10px; }
.tolinku-mega-item {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 9px 10px; border-radius: 10px; text-decoration: none;
	transition: background-color .16s ease;
}
.tolinku-mega-item:hover { background: #efeae3; }
.tolinku-mega-icon {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(254,51,10,.1); color: #fe330a;
	transition: background-color .16s ease, color .16s ease;
}
.tolinku-mega-item:hover .tolinku-mega-icon { background: #fe330a; color: #fff; }
.tolinku-mega-text { min-width: 0; display: block; }
.tolinku-mega-title { display: block; font-size: 15px; font-weight: 600; color: #000; line-height: 1.3; }
.tolinku-mega-desc { display: block; font-size: 13px; color: #5c5952; line-height: 1.35; }
.tolinku-mega-aside { flex: 0 0 240px; }

/* compact render inside the mega panel */
.tolinku-dash--compact { display: block; text-decoration: none; box-shadow: none; }
.tolinku-dash--compact .tolinku-dash-bar { padding: 12px 14px; }
.tolinku-dash--compact .tolinku-dash-stat { padding: 10px 14px; }
.tolinku-dash--compact .tolinku-dash-stat-num { font-size: 18px; }
.tolinku-dash--compact .tolinku-dash-chart { padding: 12px 14px 4px; }
.tolinku-dash--compact .tolinku-dash-chart svg { height: 48px; }
.tolinku-dash--compact .tolinku-dash-foot { padding: 10px 14px; }
.tolinku-dash--compact .tolinku-dash-cta { font-size: 13px; font-weight: 600; color: #c32200; }
@media (max-width: 1199.98px) { .tolinku-mega-aside { display: none; } }

/* ── Footer ──
   The template ships two link columns and no social. The old site had five
   columns, a blog-category row and social links, so the grid is widened and
   these two pieces are added in the template's own idiom. */
.tolinku-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.tolinku-footer-social a {
	width: 36px; height: 36px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(0,0,0,.14); color: #000;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tolinku-footer-social a:hover { background: #fe330a; border-color: #fe330a; color: #fff; }

.tolinku-footer-blogrow { margin-top: 42px; padding-top: 28px; border-top: 1px solid rgba(0,0,0,.1); }
.tolinku-footer-cats { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 0; }
.tolinku-footer-cats li { margin: 0; }
.tolinku-footer-cats a {
	display: inline-block; padding: 5px 12px; border-radius: 999px;
	border: 1px solid rgba(0,0,0,.14); font-size: 13px; color: #1a1a1a; text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tolinku-footer-cats a:hover { background: #000; border-color: #000; color: #fff; }

/* Five columns need less inherited indent than the template's two. */
@media (max-width: 1199.98px) {
	.azzle-footer-menu.pl-30, .azzle-footer-menu.pl-70 { padding-left: 0 !important; }
}

/* Plan feature lists. The template's pricing body is a paragraph; the real
   content is a bulleted list of limits. */
.tolinku-plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tolinku-plan-feats li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; }
.tolinku-plan-feats li::before {
	content: ""; position: absolute; left: 0; top: .45em;
	width: 14px; height: 8px; border-left: 2px solid #fe330a; border-bottom: 2px solid #fe330a;
	transform: rotate(-45deg);
}
.azzle-pricing-wrap.active .tolinku-plan-feats li::before { border-color: #fff; }

/* ── AOS neutralised ──
   The template hides every animated element at opacity 0 and relies on AOS to
   reveal it. That reveal did not resolve reliably here: elements carried
   .aos-animate, the matching rule had higher specificity, and they still
   computed to opacity 0. Content being visible beats a fade, so the hidden
   state is disabled outright.

   The data-aos attributes are deliberately left in the markup: they mark every
   element that should animate, and the GSAP pass will read them. Delete this
   block at that point. */
[data-aos] {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* ── .hidden collision ──
   app.min.css declares `.hidden { display: none !important }`. Tailwind's
   responsive display utilities carry no !important, so `hidden sm:flex` stays
   hidden at every width and the mockup's sidebar never appeared. Only these
   two combinations are used; restore Tailwind's intent for them. */
@media (min-width: 40rem) {
	.hidden.sm\:flex   { display: flex !important; }
	.hidden.sm\:inline { display: inline !important; }
}

/* ── Mockup reset ──
   The marketing Tailwind build ships no preflight (it would fight Bootstrap),
   so the template's heading and text styles bleed into the ported mockup and
   draw its UI at display sizes.

   Specificity here is deliberate and narrow. Only the ancestor is wrapped in
   :where(), so each rule weighs exactly one element selector (0,0,1):
     - the same weight as app.min.css's `h2 { font-size: 80px }`, and it
       loads later, so it wins;
     - less than any Tailwind utility class (0,1,0), so the mockup's own
       text-sm / lg:text-base still win, which is the whole point.
   Wrapping both halves in :where() made it 0,0,0 and the headings went back
   to 80px. Wrapping neither made it beat Tailwind and flattened every size. */
:where(#dashboard-scroll-wrapper) h1,
:where(#dashboard-scroll-wrapper) h2,
:where(#dashboard-scroll-wrapper) h3,
:where(#dashboard-scroll-wrapper) h4,
:where(#dashboard-scroll-wrapper) h5,
:where(#dashboard-scroll-wrapper) h6,
:where(#dashboard-scroll-wrapper) p,
:where(#dashboard-scroll-wrapper) ul,
:where(#dashboard-scroll-wrapper) ol,
:where(#dashboard-scroll-wrapper) li,
:where(#dashboard-scroll-wrapper) table,
:where(#dashboard-scroll-wrapper) th,
:where(#dashboard-scroll-wrapper) td,
:where(#dashboard-scroll-wrapper) span,
:where(#dashboard-scroll-wrapper) div,
:where(#dashboard-scroll-wrapper) code,
:where(#dashboard-scroll-wrapper) aside,
:where(#dashboard-scroll-wrapper) button,
:where(#dashboard-scroll-wrapper) a,
:where(#dashboard-scroll-wrapper) img {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
	padding: 0;
}
:where(#dashboard-scroll-wrapper) ul,
:where(#dashboard-scroll-wrapper) ol { list-style: none; }
:where(#dashboard-scroll-wrapper) a { text-decoration: none; color: inherit; }
:where(#dashboard-scroll-wrapper) img { max-width: 100%; height: auto; }
:where(#dashboard-scroll-wrapper) table { border-collapse: collapse; width: 100%; }
#dashboard-scroll-wrapper {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #111827;
	letter-spacing: normal;
}

/* ── Dashboard frame ──
   The template's hero dashboard was a PNG with the bezel baked in: a dark
   rounded shell with traffic lights. The mockup is live markup, so the shell
   is drawn here. */
/* The old site wrapped this in `max-w-7xl mx-auto px-4 lg:px-8`. That wrapper
   was one line above the block I ported, so it was lost and the frame ran
   edge to edge. Constrain it here to the template's own container width. */
.azzle-hero-dashboard {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 12px;
}

/* Match the template's dashboard proportions exactly: it rendered its
   Dashboard.png at 1116 x 551. The frame adds a 38px title bar and 10px of
   bottom bezel, so the screen inside is 551 - 48 = 503px. The ported mockup
   shipped with lg:h-[620px], which made the window noticeably taller and
   squarer than the template's. */
@media (min-width: 1200px) {
	.tolinku-dash-viewport { height: 503px !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.tolinku-dash-viewport { height: 460px !important; }
}

.tolinku-frame {
	position: relative;
	background: #1b1b1b;
	border-radius: 18px;
	padding: 0 10px 10px;
	box-shadow: 0 50px 110px -45px rgba(0,0,0,.55);
	transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
	transform-origin: center top;
	max-width: 100%;
}
.tolinku-frame-bar {
	display: flex; align-items: center; gap: 7px;
	height: 38px; padding: 0 6px;
}
.tolinku-frame-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.tolinku-frame-dot.is-red { background: #ff5f57; }
.tolinku-frame-dot.is-amber { background: #febc2e; }
.tolinku-frame-dot.is-green { background: #28c840; }
.tolinku-frame-label {
	margin-left: auto; margin-right: auto;
	font-size: 12px; color: rgba(255,255,255,.4);
	font-family: 'Inter', system-ui, sans-serif;
	transform: translateX(-17px);
}
.tolinku-frame-screen { border-radius: 10px; overflow: hidden; background: #fff; }
.tolinku-frame-hint {
	margin: 14px 0 0; text-align: center;
	font-size: 13px; color: #5c5952;
}

/* the ghost cursor that drives the idle demo */
.tolinku-cursor {
	position: absolute; top: 0; left: 0; z-index: 5;
	pointer-events: none; opacity: 0;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
	transition: transform 1s cubic-bezier(.33,1,.68,1), opacity .35s ease;
}
.tolinku-frame.is-touring .tolinku-cursor { opacity: 1; }
.tolinku-cursor.is-clicking::after {
	content: ""; position: absolute; left: 2px; top: 2px;
	width: 26px; height: 26px; margin: -13px 0 0 -13px;
	border-radius: 50%; border: 2px solid #fe330a;
	animation: tolinku-click .45s ease-out;
}
@keyframes tolinku-click {
	from { transform: scale(.2); opacity: 1; }
	to   { transform: scale(1.6); opacity: 0; }
}

/* clicking the window zooms it, screen-in-a-screen */
.tolinku-frame.is-zoomed { transform: scale(1.06); z-index: 60; box-shadow: 0 70px 140px -40px rgba(0,0,0,.6); }
/* Lift the frame's stacking context above the backdrop while zoomed.
   .azzle-hero-dashboard is z-index:1, which otherwise traps the frame below
   the overlay and makes the zoomed window unclickable. */
body.tolinku-zoomed .azzle-hero-dashboard { z-index: 60; }
body.tolinku-zoomed .tolinku-frame-screen { pointer-events: auto; }
.tolinku-frame-exit {
	position: absolute; top: 8px; right: 10px; z-index: 7;
	border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff;
	font-size: 12px; font-weight: 600; padding: 5px 12px;
	font-family: 'Inter', system-ui, sans-serif;
}
.tolinku-frame-exit:hover { background: rgba(255,255,255,.26); }
.tolinku-backdrop {
	position: fixed; inset: 0; z-index: 50;
	background: rgba(12,10,14,.55); opacity: 0;
	transition: opacity .35s ease; pointer-events: none;
}
.tolinku-backdrop.is-on { opacity: 1; pointer-events: auto; }

/* the mockup's screens stack; only one is shown at a time */
#dashboard-scroll-wrapper { position: relative; }
.dashboard-screen { transition: opacity .4s ease; }

@media (max-width: 991.98px) {
	.tolinku-frame { border-radius: 14px; padding: 0 6px 6px; }
	.tolinku-frame.is-zoomed { transform: none; }
	.tolinku-frame-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tolinku-frame, .tolinku-cursor, .dashboard-screen { transition: none; }
	.tolinku-cursor { display: none; }
}

/* ── Pricing ──
   Two faults from the template:
   1. .azzle-pricing-wrap.active colours only `span` light, so the feature list
      on the black card rendered dark-on-dark and looked like bare ticks.
   2. pricing.min.js ships as a 0-byte file, so the monthly/yearly toggle never
      worked and both prices showed at once. Driven from tolinku-pricing.js. */
.azzle-pricing-wrap.active .tolinku-plan-feats li { color: #e9e7e4; }
.azzle-pricing-wrap.active .azzle-pricing-header h3 { color: #fff; }
.azzle-pricing-wrap.active .azzle-pricing-price h2 { color: #fff; }

/* No display rules for .proMonthlyPrice / .proAnnuallyPrice here: app.js
   already drives them with jQuery show()/hide(), which writes inline styles
   that beat any stylesheet. It just never ran on load, so both showed. */

/* the outline CTA on the black card needs a visible edge */
.azzle-pricing-wrap.active .azzle-default-btn.outline-btn {
	border-color: rgba(255,255,255,.45);
	color: #fff;
}
.azzle-pricing-wrap.active .azzle-default-btn.outline-btn:hover {
	background: #fff; color: #1b1b1b; border-color: #fff;
}

/* equal-height cards so the CTAs line up across the row */
.azzle-pricing-wrap { display: flex; flex-direction: column; height: 100%; }
.azzle-pricing-wrap .azzle-pricing-footer { margin-top: auto; }

/* ── Pricing heading and saving badge ──
   .azzle-section-title.center caps at 650px, which broke an 80px heading over
   three lines. max-w-1000 is the template's own modifier; balance keeps any
   remaining wrap even, so one word is never left stranded. */
.azzle-section-title h2 { text-wrap: balance; }

/* Sits beside the toggle, not inside the label, so it cannot interfere
   with the switch's own layout. 20% is the real discount: 31/39, 63/79 and
   119/149 all round to it. */
.azzle-title-pricing-btn {
	display: flex; align-items: center; justify-content: center;
	gap: 16px; flex-wrap: wrap;
}
/* The template gives .toggle-switch `margin: 0 auto`, which centred it inside a
   block parent. As a flex item that auto margin eats all the free space and
   throws the badge against the right edge of the container. */
.azzle-title-pricing-btn .toggle-switch { margin: 0; }

/* app.js runs toggle(false) on DOM ready, which hides the yearly price. Until
   then both prices render stacked, so a slow load shows every card twice its
   height with two different figures. Hiding it in CSS makes the first paint
   match the settled state; jQuery .show() sets an inline display that wins
   over this when the toggle flips. */
.azzle-pricing-price.proMonthlyPrice { display: none; }
.tolinku-save-badge {
	display: inline-flex; align-items: center;
	background: rgba(254,51,10,.12); color: #c32200;
	border: 1px solid rgba(254,51,10,.3);
	border-radius: 999px; padding: 5px 12px;
	font-size: 13px; font-weight: 700; line-height: 1;
	white-space: nowrap;
}

/* ── SDK code tabs ── */
.tolinku-sdk { max-width: 900px; margin: 0 auto; }
.tolinku-sdk-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.tolinku-sdk-tab {
	border: 1px solid rgba(0,0,0,.14); background: transparent; cursor: pointer;
	border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; color: #1b1b1b;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tolinku-sdk-tab:hover { border-color: #1b1b1b; }
.tolinku-sdk-tab[aria-selected="true"] { background: #1b1b1b; border-color: #1b1b1b; color: #fff; }
.tolinku-sdk-window { border-radius: 14px; overflow: hidden; background: #1b1b1b; box-shadow: 0 40px 90px -45px rgba(0,0,0,.5); }
.tolinku-sdk-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #2c2c2c; }
.tolinku-sdk-file { margin-left: 10px; font-size: 12px; color: rgba(255,255,255,.45); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.tolinku-sdk-copy {
	margin-left: auto; border: 0; cursor: pointer; border-radius: 999px;
	background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px;
}
.tolinku-sdk-copy:hover { background: rgba(255,255,255,.24); }
.tolinku-sdk-code {
	margin: 0; padding: 22px 20px; overflow-x: auto;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13.5px; line-height: 1.7; color: #e7e3dd; white-space: pre; tab-size: 2;
}
.tolinku-sdk-foot { text-align: center; margin-top: 36px; }
.tolinku-sdk-foot .azzle-default-btn { display: inline-flex; }

/* Recent posts use the template's own azzle-blog-* classes, already
   styled in app.min.css. No bespoke card CSS needed. */


/* ── Blog cards ──
   Matched to this page, not to index-03. The template's azzle-blog-*2 classes
   are from a Raleway-serif demo with a tinted horizontal card, which produced
   serif headings on a green panel here. These mirror the feature strip and
   pricing cards: white on sand, 10px radius, DM Sans. */
.tolinku-blog-card {
	/* Sand on a white section, identical to the pricing cards directly above.
	   White cards here were invisible against the white section. */
	background: var(--light-color2, #efeae3);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;
	transition: transform .4s ease, box-shadow .4s ease;
}
.tolinku-blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.3); }
.tolinku-blog-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.tolinku-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tolinku-blog-card:hover .tolinku-blog-thumb img { transform: scale(1.06); }
.tolinku-blog-body { padding: 30px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tolinku-blog-meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.43em; }
.tolinku-blog-meta a {
	color: #fe330a; font-weight: 700; text-transform: uppercase;
	font-size: 12px; letter-spacing: .06em; text-decoration: none;
}
.tolinku-blog-meta a:hover { color: #c32200; }
.tolinku-blog-meta span { color: var(--light-color4, #414141); }
.tolinku-blog-card h3 {
	font-family: "DM Sans", sans-serif; font-weight: 700;
	font-size: 22px; line-height: 1.35em; letter-spacing: -.02em; margin: 0;
}
.tolinku-blog-card h3 a { color: var(--heading-color, #000); text-decoration: none; transition: color .3s ease; }
.tolinku-blog-card h3 a:hover { color: #c32200; }
.tolinku-blog-excerpt { margin: 0; font-size: 16px; line-height: 1.6em; color: var(--light-color4, #414141); }
@media (max-width: 1199.98px) { .tolinku-blog-card h3 { font-size: 20px; } }

/* ── Section subheads ──
   The template never puts a <p> inside .azzle-section-title, so it has no
   rule for one and ours sat hard against the heading. This is the standard:
   24px clear, centred, held to a readable measure. */
.azzle-section-title p {
	margin: 24px auto 0;
	max-width: 620px;
	font-size: 18px;
	line-height: 1.6em;
	color: var(--light-color4, #414141);
}
.azzle-section-title.center p { text-align: center; }
.azzle-section-title.title2 p { color: rgba(255,255,255,.62); }
@media (max-width: 767px) { .azzle-section-title p { margin-top: 18px; font-size: 16px; } }

/* Two rows of icon boxes, so the per-cell corner classes no longer work.
   The wrapper clips instead, which keeps the joined look at any count. */
.azzle-iconbox-wraper { overflow: hidden; }

/* ── Dark band ──
   index-03's pattern: bg-heading section, title2 heading, iconbox-wrap5 cards. */
.tolinku-dark-band { background-color: var(--heading-color, #000); }
.tolinku-dark-band .azzle-iconbox-wrap5 {
	height: calc(100% - 24px);
	display: flex; flex-direction: column; gap: 18px;
	transition: background-color .4s ease, transform .4s ease;
}
.tolinku-dark-band .azzle-iconbox-wrap5:hover { transform: translateY(-4px); background-color: #1b1b1b; }
.tolinku-prod-icon {
	width: 46px; height: 46px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(254,51,10,.18); color: #ff5a33; flex: 0 0 auto;
}
/* 22px inside a 46px tile left the glyph reading as a smudge against the
   inverted background. */
.tolinku-prod-icon svg { width: 26px; height: 26px; stroke-width: 1.9; }
.tolinku-prod-content h3 {
	font-family: "DM Sans", sans-serif; font-weight: 700;
	font-size: 22px; line-height: 1.35em; letter-spacing: -.02em;
	color: var(--light-color5, #f6f6eb); margin: 0 0 10px;
}
.tolinku-prod-content p { margin: 0; font-size: 16px; line-height: 1.6em; color: rgba(255,255,255,.62); }

/* ── Breaking up the long white run below the hero ──
   Pricing through to the footer was one unbroken white block. Alternate it. */
.tolinku-band-sand { background-color: var(--light-color2, #efeae3); }
/* Cards invert with their band: sand card on white section, white on sand. */
.tolinku-band-sand .tolinku-blog-card { background: #fff; }
.tolinku-band-sand .tolinku-blog-thumb { background: var(--light-color2, #efeae3); }

/* Replaced the template's animated 92%/75% counters, which were its invented
   numbers reading as our match rates, with the platform facts. */
.tolinku-match-facts { display: flex; flex-wrap: wrap; gap: 40px; }
.tolinku-match-facts .azzle-counter-item { flex: 1 1 220px; min-width: 0; }
.tolinku-match-platform {
	font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 28px;
	line-height: 1.2; letter-spacing: -.02em; color: var(--light-color5, #f6f6eb); margin: 0 0 8px;
}
.tolinku-match-how { margin: 0; font-size: 16px; line-height: 1.55em; color: rgba(255,255,255,.62); }

/* ── Heading scale ──
   The template runs h1 at 120px and h2 at 80px, which put the hero on three
   lines and most section headings on two. Scaled to about 0.65 of that,
   keeping the template's own responsive steps and their proportions, so the
   hierarchy is unchanged and only the absolute size comes down. */
/* Tracking.
   The template sets `letter-spacing: 1px` on every h3, which at 22-28px is
   roughly 0.04em of extra space between letters: wide enough on a bold display
   face to read as deliberately spaced out. Cleared here once, not per block,
   since it applied to every h3 on the site.
   h1 and h2 carried -2px, tuned for the template's 120px and 80px. The scale
   came down to 76px and 52px, so a fixed -2px is now proportionally far
   tighter than it was meant to be. Expressed in em so it tracks the size at
   every breakpoint instead of being re-tuned at each one. */
.h1, h1 { font-size: 76px; line-height: 1.05em; letter-spacing: -0.017em; }
.h2, h2 { font-size: 52px; line-height: 1.12em; letter-spacing: -0.017em; }
.h3, h3 { letter-spacing: normal; }
/* The mockup's reset sits earlier in this file and is deliberately held at zero
   specificity so utility classes inside it can win. The three rules above are
   one element selector each, so they tie it and win on order, and the hero
   dashboard's 16px panel headings started inheriting page display tracking.
   :is() takes the specificity of its argument, so this ties them back and wins
   on order in turn, without raising specificity against the utilities. */
:where(#dashboard-scroll-wrapper) :is(h1, h2, h3) { letter-spacing: normal; }
@media (max-width: 1399px) { .h1, h1 { font-size: 64px; } }
@media (max-width: 1199px) { .h2, h2 { font-size: 44px; } }
@media (max-width: 991px)  { .h1, h1 { font-size: 54px; } }
@media (max-width: 767px)  { .h1, h1 { font-size: 44px; } .h2, h2 { font-size: 36px; } }
@media (max-width: 575px)  { .h1, h1 { font-size: 34px; } .h2, h2 { font-size: 30px; } }

/* The pricing figures are h2 and should stay large and confident. */
/* Kept below the 52px section headings: a price is the loudest thing inside
   its card, not louder than the heading above the whole section. */
.azzle-pricing-price h2 { font-size: 48px; line-height: 1em; }
@media (max-width: 767px) { .azzle-pricing-price h2 { font-size: 48px; } }

/* The featured plan's card is black and .azzle-default-btn is also black, so
   the template's own solid button disappears on it. Invert it there, which is
   what the template does elsewhere on dark backgrounds. */
.azzle-pricing-wrap.active .azzle-default-btn {
	background-color: var(--light-color);
	color: var(--heading-color);
}
.azzle-pricing-wrap.active .azzle-default-btn:hover {
	background-color: var(--accent-color);
	color: var(--light-color);
}

/* ── FAQ accordion icon ──
   The template points .azzle-active-icon at assets/images/home1/%20.svg, a file
   whose name is a single space, and colours the box with --accent-bg2, which it
   never defines. Both the icon and its background are therefore missing, so the
   accordion gives no sign it opens. Drawn here instead of sourcing an image. */
.azzle-active-icon {
	position: relative;
	width: 44px; height: 44px;
	border: 1px solid var(--light-color3, #dbd6cf);
	background-color: transparent;
	border-radius: 10px;
}
.azzle-active-icon::before,
.azzle-active-icon::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 15px; height: 2px; border-radius: 2px;
	background-color: var(--heading-color, #000);
	transform: translate(-50%, -50%);
	transition: transform .3s ease, opacity .3s ease;
}
.azzle-active-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.azzle-faq-item.open .azzle-active-icon {
	border-color: var(--accent-color, #fe330a);
	background-color: var(--accent-color, #fe330a);
}
.azzle-faq-item.open .azzle-active-icon::before,
.azzle-faq-item.open .azzle-active-icon::after { background-color: #fff; }
.azzle-faq-item.open .azzle-active-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.azzle-faq-header:hover .azzle-active-icon { border-color: var(--heading-color, #000); }

/* Two buttons sit side by side in the closing CTA. */
.tolinku-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Deferred link flow (the black band) ──
   Sits in the half of .azzle-video-section that held the template's photo.
   That section has no .container, so the padding is set here. */
.tolinku-flow {
	display: flex; align-items: center;
	min-height: 100%;
	/* The band is full bleed, so the left edge is set to the same gutter every
	   other section gets from .container (max-width 1326px, centred). Without
	   this the flow hugs the window edge while the copy opposite it stays on
	   the site grid. */
	padding: 90px 60px 90px max(40px, calc((100vw - 1326px) / 2));
}
.tolinku-flow-list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 560px; }
.tolinku-flow-step {
	position: relative;
	display: flex; gap: 22px;
	padding-bottom: 38px;
}
.tolinku-flow-step:last-child { padding-bottom: 0; }
/* The rail joining the steps, stopped before the last marker. */
.tolinku-flow-step:not(:last-child)::before {
	content: ""; position: absolute;
	left: 23px; top: 54px; bottom: 8px; width: 1px;
	background: rgba(255,255,255,.16);
}
.tolinku-flow-num {
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.05);
	font-family: "DM Sans", sans-serif;
	font-size: 14px; font-weight: 700; line-height: 1;
	color: var(--accent-color, #fe330a);
}
.tolinku-flow-body { padding-top: 2px; }
.tolinku-flow-title {
	font-family: "DM Sans", sans-serif;
	font-size: 19px; font-weight: 700; line-height: 1.3;
	color: #fff; margin: 0 0 12px;
}
.tolinku-flow-card {
	display: inline-block; max-width: 100%;
	padding: 11px 16px; border-radius: 10px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.05);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px; line-height: 1.4; color: #f3efe9;
	word-break: break-word;
}
.tolinku-flow-note {
	margin: 12px 0 0; max-width: 46ch;
	font-size: 16px; line-height: 1.6;
	color: rgba(255,255,255,.62);
}
@media (max-width: 991px) {
	.tolinku-flow { padding: 70px 30px; }
	.tolinku-flow-note { max-width: none; }
}

/* ── Setup panel ──
   Stands in for the template's thumb1.png in the "Get started" row. Built to
   read as a window from the product, not an illustration of one. */
.tolinku-setup {
	border-radius: 14px; overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 40px 90px -50px rgba(0,0,0,.45);
}
.tolinku-setup-bar {
	display: flex; align-items: center; gap: 7px;
	padding: 12px 16px;
	background: #f6f4f1;
	border-bottom: 1px solid rgba(0,0,0,.07);
}
.tolinku-setup-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.16); }
.tolinku-setup-host {
	margin-left: auto; margin-right: auto; padding-left: 30px;
	font-size: 12px; color: rgba(0,0,0,.42);
}
/* .azzle-content-thumb centres its contents for the image it used to hold. */
.tolinku-setup-body { padding: 28px 28px 26px; text-align: left; }
.tolinku-setup-eyebrow {
	margin: 0 0 6px;
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--accent-color, #fe330a);
}
.tolinku-setup-heading {
	margin: 0 0 18px;
	font-family: "DM Sans", sans-serif;
	font-size: 24px; font-weight: 700; line-height: 1.2;
	color: var(--heading-color, #000);
}
.tolinku-setup-track {
	height: 6px; border-radius: 999px; overflow: hidden;
	background: rgba(0,0,0,.08); margin-bottom: 24px;
}
.tolinku-setup-fill { display: block; width: 66.6%; height: 100%; background: var(--accent-color, #fe330a); }
.tolinku-setup-list { list-style: none; margin: 0 0 24px; padding: 0; }
.tolinku-setup-row {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(0,0,0,.07);
	font-size: 15px; line-height: 1.3;
}
.tolinku-setup-row:last-child { border-bottom: none; }
.tolinku-setup-mark {
	flex-shrink: 0; position: relative;
	width: 20px; height: 20px; border-radius: 50%;
}
.tolinku-setup-row.is-done .tolinku-setup-mark { background: var(--accent-color, #fe330a); }
/* The tick, drawn as two sides of a rotated box so no icon file is needed. */
.tolinku-setup-row.is-done .tolinku-setup-mark::after {
	content: ""; position: absolute; left: 7px; top: 4px;
	width: 5px; height: 9px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(43deg);
}
.tolinku-setup-row.is-active .tolinku-setup-mark {
	border: 2px dashed rgba(0,0,0,.28);
}
.tolinku-setup-title { font-weight: 600; color: var(--heading-color, #000); }
.tolinku-setup-row.is-active .tolinku-setup-title { color: rgba(0,0,0,.55); font-weight: 500; }
.tolinku-setup-meta { margin-left: auto; font-size: 13px; color: rgba(0,0,0,.45); text-align: right; }
.tolinku-setup-snippet {
	padding: 13px 16px; border-radius: 10px;
	background: #1b1b1b; color: #f3efe9;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px; line-height: 1.4;
	overflow-x: auto; white-space: nowrap;
}
.tolinku-setup-prompt { color: var(--accent-color, #fe330a); margin-right: 8px; }

/* ── "Get started in three steps" list ──
   The template's list item is a flex row of icon + heading. Each step now
   carries a line of explanation, so the item wraps that pair in a div and the
   icon is pinned to the first line instead of stretching down the row. */
.azzle-listicon-wrap ul li { align-items: flex-start; }
.azzle-listicon-wrap ul li img { flex-shrink: 0; margin-top: 7px; }
.azzle-listicon-wrap ul li h3 { font-size: 22px; line-height: 1.3em; }
.azzle-listicon-wrap ul li p {
	margin: 6px 0 0; max-width: 46ch;
	font-size: 16px; line-height: 1.6em;
	color: var(--light-color4, #414141);
}

/* ── Footer marquee ──
   The template fixes each slide at 1400px and lets the phrase inside overflow
   it, so a long phrase collides with the next slide. tolinku-init.js re-runs
   the slider with slick's variableWidth, which requires the slide to size to
   its own content, so the fixed widths are cleared here at every breakpoint
   the template sets one. The type also came down: 120px made the marquee the
   largest thing on a page whose h1 is 76px. */
.azzle-cta-slider-item,
.azzle-cta-slider-item.slick-slide { width: auto !important; padding-right: 24px; }
@media (max-width: 1399px) { .azzle-cta-slider-item { width: auto !important; } }
@media (max-width: 991px)  { .azzle-cta-slider-item { width: auto !important; } }
@media (max-width: 767px)  { .azzle-cta-slider-item { width: auto !important; } }
@media (max-width: 575px)  { .azzle-cta-slider-item { width: auto !important; } }
.azzle-cta-slider-title { font-size: 64px; line-height: 1.05em; }
@media (max-width: 1399px) { .azzle-cta-slider-title { font-size: 54px; } }
@media (max-width: 991px)  { .azzle-cta-slider-title { font-size: 44px; } }
@media (max-width: 767px)  { .azzle-cta-slider-title { font-size: 34px; } }
@media (max-width: 575px)  { .azzle-cta-slider-title { font-size: 28px; } }
.azzle-cta-slider-item img { width: 36px; height: 36px; }

/* ── Visual builder panel ──
   Stands where the template's thumb2.png did. Dark editor chrome, light
   canvas, which is both how an editor looks and what keeps this run of the
   page from going white all the way to the inverted band. */
.tolinku-builder {
	border-radius: 14px; overflow: hidden;
	background: #1b1b1b;
	box-shadow: 0 44px 100px -55px rgba(0,0,0,.65);
	text-align: left;
}
.tolinku-builder-bar {
	display: flex; align-items: center; gap: 7px;
	padding: 13px 16px;
	border-bottom: 1px solid #2c2c2c;
}
.tolinku-builder-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tolinku-builder-file {
	margin-left: 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; color: rgba(255,255,255,.5);
}
.tolinku-builder-publish {
	margin-left: auto; padding: 5px 13px; border-radius: 999px;
	background: var(--accent-color, #fe330a); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1.4;
}

.tolinku-builder-body { display: flex; align-items: stretch; }

.tolinku-builder-palette {
	flex: 0 0 142px;
	padding: 18px 14px;
	border-right: 1px solid #2c2c2c;
}
.tolinku-builder-label {
	margin: 0 0 12px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(255,255,255,.35);
}
.tolinku-builder-palette ul { list-style: none; margin: 0; padding: 0; }
.tolinku-builder-palette li {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 9px; margin-bottom: 5px; border-radius: 7px;
	background: rgba(255,255,255,.05);
	font-size: 12.5px; line-height: 1.2; color: rgba(255,255,255,.72);
	white-space: nowrap;
}
/* The drag handle, two columns of dots drawn with a repeating gradient so the
   palette needs no icon files. */
.tolinku-builder-grip {
	flex-shrink: 0; width: 7px; height: 12px;
	background-image: radial-gradient(rgba(255,255,255,.4) 40%, transparent 42%);
	background-size: 3.5px 4px;
}

.tolinku-builder-canvas {
	flex: 1 1 auto; min-width: 0;
	padding: 20px;
	background: #121212;
}
.tolinku-builder-page {
	border-radius: 10px; padding: 20px 18px 22px;
	background: #fff;
}
.tolinku-builder-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.tolinku-builder-mark {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 6px;
	background: var(--accent-color, #fe330a); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1;
}
.tolinku-builder-name { font-size: 13px; font-weight: 700; color: #1b1b1b; }

.tolinku-builder-block {
	position: relative;
	padding: 8px; margin-bottom: 6px; border-radius: 6px;
	border: 1px dashed transparent;
}
.tolinku-builder-block.is-selected {
	border-color: var(--accent-color, #fe330a);
	border-style: solid;
}
.tolinku-builder-tag {
	position: absolute; top: -9px; left: -1px;
	padding: 2px 7px; border-radius: 4px;
	background: var(--accent-color, #fe330a); color: #fff;
	font-size: 9.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.4;
}
.tolinku-builder-headline {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
	color: #1b1b1b;
}
.tolinku-builder-sub { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(0,0,0,.55); }
.tolinku-builder-cta {
	display: inline-block; padding: 9px 18px; border-radius: 999px;
	background: #1b1b1b; color: #fff;
	font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.tolinku-builder-badges { display: flex; gap: 8px; }
.tolinku-builder-badge {
	padding: 7px 12px; border-radius: 7px;
	border: 1px solid rgba(0,0,0,.14);
	font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.62);
}

@media (max-width: 575px) {
	.tolinku-builder-palette { display: none; }
}

/* ── Platform strip (under the hero) ──
   Mark, name, and the minimum version we support, divided by hairlines. The
   tiles that sat here gave the row presence but cost it the version line, and
   a version floor is the thing a developer is actually checking at this point
   on the page. */
.tolinku-platform-strip {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	justify-content: center; align-items: stretch;
	row-gap: 24px;
}
.tolinku-platform {
	border-left: 1px solid var(--light-color3, #dbd6cf);
}
.tolinku-platform:first-child { border-left: none; }
.tolinku-platform a {
	display: block;
	padding: 2px 26px;
	text-align: center;
	color: inherit;
	transition: opacity .2s ease;
}
.tolinku-platform a:focus-visible {
	outline: 2px solid var(--accent-color, #fe330a);
	outline-offset: 4px; border-radius: 6px;
}
.tolinku-platform-head {
	display: flex; align-items: center; justify-content: center; gap: 9px;
}
.tolinku-platform-mark {
	display: block; flex-shrink: 0;
	width: 21px; height: 21px;
	color: var(--heading-color, #000);
	opacity: .85;
	transition: opacity .2s ease;
}
.tolinku-platform a:hover .tolinku-platform-mark { opacity: 1; }

/* Optical sizing. A solid silhouette reads heavier than an open mark in the
   same box, so the filled ones come down and the React atom goes up. These are
   set to look equal, which is not the same as being equal. */
.tolinku-platform--apple .tolinku-platform-mark { width: 19px; height: 19px; }
.tolinku-platform--flutter .tolinku-platform-mark { width: 18px; height: 18px; }
.tolinku-platform--expo .tolinku-platform-mark { width: 20px; height: 20px; }
.tolinku-platform--react .tolinku-platform-mark { width: 23px; height: 23px; }
/* The JavaScript mark is a filled square, the densest shape in the row. */
.tolinku-platform--javascript .tolinku-platform-mark { width: 17px; height: 17px; }

.tolinku-platform-name {
	font-family: "DM Sans", sans-serif;
	font-size: 18px; font-weight: 700; line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--heading-color, #000);
}
.tolinku-platform-where {
	display: block; margin-top: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; line-height: 1.4;
	color: var(--light-color4, #414141);
	opacity: .72;
}
.tolinku-platform a:hover .tolinku-platform-where { opacity: 1; }

/* ── Tightening the band ──
   The strip is two short lines, and the template's spacing around it was set
   for a scrolling wall of customer logos: 80px under the rule above it, 60px
   under the caption, and the hero's full 130px below. Pulled in so the row
   sits with the hero instead of drifting under it. The bottom is scoped to
   this section, so every other section keeps the shared 130px rhythm. */
.azzle-hero-section .divider { margin-bottom: 52px; }
.azzle-brand-slider-title { padding-bottom: 26px; }
.azzle-brand-slider-title p {
	font-size: 15px; line-height: 1.5em;
	color: var(--light-color4, #414141); opacity: .72;
}
.azzle-hero-section { padding-bottom: 84px; }

@media (max-width: 1199px) {
	.tolinku-platform a { padding: 2px 20px; }
	/* Three per row. */
	.tolinku-platform:nth-child(3n + 1) { border-left: none; }
}
@media (max-width: 767px) {
	.tolinku-platform a { padding: 2px 16px; }
	/* Two per row. */
	.tolinku-platform:nth-child(3n + 1) { border-left: 1px solid var(--light-color3, #dbd6cf); }
	.tolinku-platform:nth-child(odd) { border-left: none; }
}

/* ── Visually hidden text ──
   WordPress markup and our own use .screen-reader-text for labels that exist
   for assistive technology only, such as the names behind the platform marks.
   Nothing in this theme defined it, so those labels were rendering on screen.
   Clipped, not display:none, which would take them out of the
   accessibility tree along with the layout. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; white-space: nowrap;
	clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* Skip links and anything else that asks for focus must come back into view. */
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	margin: 0; overflow: visible; white-space: normal;
	clip: auto; clip-path: none;
}

/* ── Showcase illustrations ──
   One shared shell, then each panel's own insides. Markup, not images: sharp
   at any density, themeable, and fixable in a diff. */
.tolinku-panel {
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.08);
	background: #fff;
	box-shadow: 0 40px 90px -55px rgba(0,0,0,.45);
	padding: 26px;
}

/* Routing: tap, resolve, open. */
.tolinku-route-flow { display: flex; align-items: center; gap: 10px; }
.tolinku-route-step { flex: 1 1 0; min-width: 0; }
.tolinku-route-cap {
	margin: 0 0 8px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: rgba(0,0,0,.4);
}
.tolinku-route-card {
	display: flex; flex-direction: column; gap: 5px;
	min-height: 74px; justify-content: center;
	padding: 13px; border-radius: 10px;
	border: 1px solid rgba(0,0,0,.1);
	background: #f8f6f3;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px; line-height: 1.35; color: #1b1b1b;
	word-break: break-word;
}
.tolinku-route-card.is-accent {
	border-color: rgba(254,51,10,.35);
	background: rgba(254,51,10,.07);
	color: #b32200;
}
.tolinku-route-param { color: rgba(0,0,0,.45); }
/* The connector, drawn as a chevron so the row needs no icon files. */
.tolinku-route-arrow {
	flex: 0 0 auto; position: relative; width: 14px; height: 14px; margin-top: 18px;
}
.tolinku-route-arrow::before,
.tolinku-route-arrow::after {
	content: ""; position: absolute; left: 1px; width: 9px; height: 2px;
	border-radius: 2px; background: rgba(0,0,0,.28);
}
.tolinku-route-arrow::before { top: 4px; transform: rotate(45deg); }
.tolinku-route-arrow::after { top: 9px; transform: rotate(-45deg); }

/* Analytics: a week of clicks, then where they came from. */
.tolinku-an-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tolinku-an-label { margin: 0; font-size: 13px; font-weight: 700; color: #1b1b1b; }
.tolinku-an-live {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 600; color: rgba(0,0,0,.45);
}
.tolinku-an-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color, #fe330a); }
.tolinku-an-chart {
	display: flex; align-items: flex-end; gap: 10px;
	height: 128px; margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.tolinku-an-bar {
	position: relative; flex: 1 1 0;
	height: var(--h); border-radius: 5px 5px 0 0;
	background: linear-gradient(180deg, var(--accent-color, #fe330a) 0%, rgba(254,51,10,.35) 100%);
}
.tolinku-an-day {
	position: absolute; left: 0; right: 0; bottom: -19px;
	text-align: center; font-size: 10.5px; color: rgba(0,0,0,.42);
}
.tolinku-an-geo { list-style: none; margin: 0; padding: 0; }
.tolinku-an-geo li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 12.5px; }
.tolinku-an-country { flex: 0 0 112px; color: #1b1b1b; }
.tolinku-an-track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.tolinku-an-track span { display: block; height: 100%; background: #1b1b1b; border-radius: 999px; }
.tolinku-an-pct { flex: 0 0 34px; text-align: right; color: rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }

/* Smart banner, shown where it appears: the top of a mobile page. */
.tolinku-panel--banner { padding: 26px; display: flex; justify-content: center; }
.tolinku-phone {
	width: 100%; max-width: 310px;
	border-radius: 20px; overflow: hidden;
	border: 1px solid rgba(0,0,0,.12);
	background: #fff;
}
.tolinku-phone-bar {
	padding: 10px 14px; background: #f1eeea;
	border-bottom: 1px solid rgba(0,0,0,.07);
	text-align: center;
}
.tolinku-phone-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px; color: rgba(0,0,0,.45);
}
.tolinku-phone-screen { padding: 12px; }
.tolinku-smartbanner {
	display: flex; align-items: center; gap: 10px;
	padding: 10px; border-radius: 12px;
	background: #1b1b1b; color: #fff;
}
.tolinku-sb-mark {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--accent-color, #fe330a);
	font-size: 14px; font-weight: 700;
}
.tolinku-sb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tolinku-sb-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.tolinku-sb-sub { font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.62); }
.tolinku-sb-btn {
	flex-shrink: 0; margin-left: auto;
	padding: 6px 13px; border-radius: 999px;
	background: #fff; color: #1b1b1b;
	font-size: 11.5px; font-weight: 700;
}
.tolinku-phone-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 4px 10px; }
.tolinku-skel { display: block; height: 9px; border-radius: 999px; background: rgba(0,0,0,.08); }
.tolinku-skel.is-wide { width: 72%; height: 13px; background: rgba(0,0,0,.14); }
.tolinku-skel.is-short { width: 54%; }
.tolinku-skel-block { display: block; height: 68px; border-radius: 10px; background: rgba(0,0,0,.06); margin: 4px 0; }

/* Referrals: the link, then the board it feeds. */
.tolinku-ref-label {
	margin: 0 0 9px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: rgba(0,0,0,.4);
}
.tolinku-ref-label--board { margin-top: 24px; }
.tolinku-ref-link {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 11px 11px 14px; border-radius: 10px;
	border: 1px solid rgba(0,0,0,.1); background: #f8f6f3;
}
.tolinku-ref-url {
	flex: 1 1 auto; min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; color: #1b1b1b;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tolinku-ref-copy {
	flex-shrink: 0; padding: 6px 13px; border-radius: 7px;
	background: #1b1b1b; color: #fff;
	font-size: 11.5px; font-weight: 700;
}
.tolinku-ref-board { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.tolinku-ref-board li {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.07);
	font-size: 13px;
}
.tolinku-ref-board li:last-child { border-bottom: none; }
.tolinku-ref-rank { flex-shrink: 0; width: 15px; font-size: 11.5px; color: rgba(0,0,0,.38); font-variant-numeric: tabular-nums; }
.tolinku-ref-avatar {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: rgba(254,51,10,.12); color: #b32200;
	font-size: 11px; font-weight: 700;
}
.tolinku-ref-name { font-weight: 600; color: #1b1b1b; }
.tolinku-ref-count { margin-left: auto; font-size: 12px; color: rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }

@media (max-width: 575px) {
	.tolinku-route-flow { flex-direction: column; align-items: stretch; gap: 6px; }
	.tolinku-route-arrow { align-self: center; margin: 2px 0; transform: rotate(90deg); }
}

/* ── Comparison table ──
   Scrolls sideways on narrow screens instead of shrinking to unreadable: a
   five column matrix has a floor below which it stops being a table. */
.tolinku-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tolinku-cmp {
	width: 100%; min-width: 680px;
	border-collapse: collapse;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 40px 90px -58px rgba(0,0,0,.4);
}
.tolinku-cmp th,
.tolinku-cmp td {
	padding: 18px 20px;
	border-bottom: 1px solid rgba(0,0,0,.07);
	text-align: center;
	vertical-align: middle;
}
.tolinku-cmp tbody tr:last-child th,
.tolinku-cmp tbody tr:last-child td { border-bottom: none; }
.tolinku-cmp thead th {
	background: #f8f6f3;
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding-top: 22px; padding-bottom: 22px;
}
.tolinku-cmp thead th:first-child,
.tolinku-cmp tbody th {
	text-align: left;
	font-family: "DM Sans", sans-serif;
	font-size: 15px; font-weight: 700;
	color: var(--heading-color, #000);
	white-space: nowrap;
}
.tolinku-cmp-name {
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: 16px; font-weight: 700; line-height: 1.25;
	color: var(--heading-color, #000);
}
.tolinku-cmp-price {
	display: block; margin-top: 4px;
	font-size: 12.5px; line-height: 1.3;
	color: rgba(0,0,0,.5);
}
/* Our column is the one the table exists to make a case for, so it is tinted
   the whole way down, not only in the header. */
.tolinku-cmp th.is-us,
.tolinku-cmp td.is-us { background: rgba(254,51,10,.05); }
.tolinku-cmp thead th.is-us { background: rgba(254,51,10,.1); }
.tolinku-cmp thead th.is-us .tolinku-cmp-price { color: #b32200; font-weight: 700; }

/* Tick and dash drawn in CSS: two marks, no icon files, and they inherit the
   cell's colour. The text alternative sits in a .screen-reader-text span. */
.tolinku-cmp-mark {
	position: relative; display: inline-block;
	width: 20px; height: 20px; vertical-align: middle;
}
.tolinku-cmp .is-yes .tolinku-cmp-mark::before,
.tolinku-cmp .is-yes .tolinku-cmp-mark::after {
	content: ""; position: absolute; border-radius: 2px;
	background: var(--accent-color, #fe330a);
}
.tolinku-cmp .is-yes .tolinku-cmp-mark::before {
	width: 2.5px; height: 8px; left: 5px; top: 8px; transform: rotate(-45deg);
}
.tolinku-cmp .is-yes .tolinku-cmp-mark::after {
	width: 2.5px; height: 14px; left: 11px; top: 3px; transform: rotate(35deg);
}
.tolinku-cmp .is-no .tolinku-cmp-mark::before {
	content: ""; position: absolute;
	left: 4px; top: 9px; width: 12px; height: 2px; border-radius: 2px;
	background: rgba(0,0,0,.18);
}

.tolinku-cmp-foot { margin-top: 40px; text-align: center; }

/* ── Feature grid hover preview ──
   The floating card is fixed and positioned by transform only, so moving it
   never triggers layout. pointer-events: none keeps it from stealing the
   hover from the cell that raised it, which would make it flicker. */
.tolinku-preview-store { display: none; }
.tolinku-preview {
	position: fixed; top: 0; left: 0; z-index: 90;
	width: 400px; max-width: 42vw;
	pointer-events: none;
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, visibility .18s;
	will-change: transform;
}
.tolinku-preview.is-visible { opacity: 1; visibility: visible; }
.tolinku-preview .tolinku-panel,
.tolinku-preview .tolinku-builder {
	box-shadow: 0 30px 70px -28px rgba(0,0,0,.42);
}
/* The panels were drawn for a half column. Scaled down a little here so the
   card stays a glance, not a read. */
.tolinku-preview .tolinku-panel { padding: 20px; }
.tolinku-preview .tolinku-route-card { min-height: 62px; padding: 10px; font-size: 11px; }
.tolinku-preview .tolinku-an-chart { height: 104px; }
.tolinku-preview .tolinku-phone { max-width: 250px; }
.tolinku-preview .tolinku-builder-palette { flex-basis: 120px; padding: 14px 11px; }
.tolinku-preview .tolinku-builder-body { font-size: 12px; }
.tolinku-preview .tolinku-builder-headline { font-size: 19px; }

/* No hover treatment added for the cell itself: the template already inverts
   it to black with an accent icon, which is plenty alongside the card. */

/* ── A/B test panel ── */
.tolinku-ab-status,
.tolinku-wh-sig {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 600; color: rgba(0,0,0,.45);
}
.tolinku-ab-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color, #fe330a); }
.tolinku-ab-list { list-style: none; margin: 0; padding: 0; }
.tolinku-ab-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.tolinku-ab-key {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 7px;
	background: rgba(0,0,0,.06); color: rgba(0,0,0,.55);
	font-size: 12px; font-weight: 700;
}
.tolinku-ab-list li.is-winner .tolinku-ab-key { background: var(--accent-color, #fe330a); color: #fff; }
.tolinku-ab-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tolinku-ab-name { font-size: 12.5px; font-weight: 600; color: #1b1b1b; }
.tolinku-ab-track { height: 6px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.tolinku-ab-track span { display: block; height: 100%; border-radius: 999px; background: rgba(0,0,0,.28); }
.tolinku-ab-list li.is-winner .tolinku-ab-track span { background: var(--accent-color, #fe330a); }
.tolinku-ab-rate { flex-shrink: 0; font-size: 13px; font-weight: 700; color: #1b1b1b; font-variant-numeric: tabular-nums; }
.tolinku-ab-note { margin: 10px 0 0; font-size: 11.5px; color: rgba(0,0,0,.45); }

/* ── Webhook delivery log ── */
.tolinku-wh-list { list-style: none; margin: 0; padding: 0; }
.tolinku-wh-list li {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.07);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}
.tolinku-wh-list li:last-child { border-bottom: none; }
.tolinku-wh-event { flex: 1 1 auto; min-width: 0; color: #1b1b1b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tolinku-wh-code {
	flex-shrink: 0; padding: 3px 8px; border-radius: 5px;
	font-size: 11px; font-weight: 700;
}
.tolinku-wh-code.is-ok { background: rgba(0,0,0,.06); color: rgba(0,0,0,.6); }
.tolinku-wh-code.is-retry { background: rgba(254,51,10,.12); color: #b32200; }
.tolinku-wh-retry { flex-shrink: 0; font-size: 10.5px; color: rgba(0,0,0,.4); }

/* ── Short link and QR ── */
.tolinku-qr-row { display: flex; align-items: center; gap: 20px; }
.tolinku-qr-grid {
	flex-shrink: 0;
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
	width: 112px; padding: 10px;
	border-radius: 10px; background: #f8f6f3; border: 1px solid rgba(0,0,0,.08);
}
.tolinku-qr-grid span { aspect-ratio: 1; border-radius: 2px; background: transparent; }
.tolinku-qr-grid span.is-on { background: #1b1b1b; }
.tolinku-qr-side { flex: 1 1 auto; min-width: 0; }
.tolinku-qr-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(0,0,0,.45); }

/* ── SDK tabs spacing ──
   The title block puts 80px under every section heading, which is right when a
   grid or a row of cards follows it. The tabs are not a content block, they
   are the control for the window directly beneath them, so 80px above and 28px
   below stranded them: far from the copy they follow, close to the code they
   label, and reading as neither. Pulled in so the tabs and the window group as
   one unit with a clear break from the heading above. */
#sdks .azzle-section-title { padding-bottom: 44px; }
.tolinku-sdk-tabs { margin-bottom: 22px; }

/* ── Page title banner ──
   The template's inner-page opener. Same tint and the same rounded bottom as
   the hero, so an inner page and the home page share one silhouette. The
   template's own CSS for this never shipped with the HTML download we have,
   which only carried the index pages, so it is written here. */
.azzle-page-banner {
	border-radius: 0 0 50px 50px;
	background-color: var(--light-color2, #efeae3);
	padding: 180px 0 90px;
	text-align: center;
}
.azzle-page-banner-title { margin: 0 0 20px; }
.azzle-page-crumbs ol {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 10px;
	font-size: 15px; font-weight: 600;
}
.azzle-page-crumbs li { display: flex; align-items: center; gap: 10px; color: var(--heading-color, #000); }
/* The separator is drawn, not loaded: the template used an image. */
.azzle-page-crumbs li + li::before {
	content: ""; width: 6px; height: 6px;
	border-right: 2px solid rgba(0,0,0,.3); border-top: 2px solid rgba(0,0,0,.3);
	transform: rotate(45deg);
}
.azzle-page-crumbs a { color: var(--heading-color, #000); transition: color .2s ease; }
.azzle-page-crumbs a:hover { color: var(--accent-color, #fe330a); }
.azzle-page-crumbs li[aria-current] { color: var(--accent-color, #fe330a); }
@media (max-width: 991px) { .azzle-page-banner { padding: 140px 0 70px; } }
@media (max-width: 767px) { .azzle-page-banner { padding: 120px 0 56px; border-radius: 0 0 30px 30px; } }

/* ── Contact ── */
.tolinku-contact-intro { padding-right: 50px; }
.tolinku-contact-intro p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.7em; color: var(--light-color4, #414141); }
.tolinku-contact-info { margin-top: 44px; display: flex; flex-direction: column; gap: 26px; }
.tolinku-contact-info-item h5 {
	margin: 0 0 7px;
	font-family: "DM Sans", sans-serif;
	font-size: 15px; font-weight: 700; color: var(--heading-color, #000);
}
.tolinku-contact-info-item > a {
	font-size: 19px; line-height: 1.4;
	color: var(--heading-color, #000);
	border-bottom: 1px solid rgba(0,0,0,.18);
	transition: color .2s ease, border-color .2s ease;
}
.tolinku-contact-info-item > a:hover { color: var(--accent-color, #fe330a); border-color: var(--accent-color, #fe330a); }

.tolinku-contact-box {
	position: relative;
	padding: 40px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.07);
	box-shadow: 0 50px 100px -60px rgba(0,0,0,.45);
}
@media (max-width: 767px) { .tolinku-contact-box { padding: 26px; } }

/* Category picker. Native radios, visually replaced, so keyboard and screen
   reader behaviour is the browser's own and not re-implemented here. */
.tolinku-contact-cats { border: 0; margin: 0 0 26px; padding: 0; }
.tolinku-contact-cats legend {
	float: left; width: 100%; margin: 0 0 12px; padding: 0;
	font-size: 14px; font-weight: 600; color: var(--heading-color, #000);
}
.tolinku-cat-grid { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tolinku-cat { position: relative; display: block; cursor: pointer; }
.tolinku-cat input {
	position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.tolinku-cat-body {
	display: flex; flex-direction: column; gap: 4px;
	height: 100%; padding: 14px;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.12);
	background: #fbfaf8;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.tolinku-cat:hover .tolinku-cat-body { border-color: rgba(0,0,0,.3); }
.tolinku-cat input:checked + .tolinku-cat-body {
	border-color: var(--accent-color, #fe330a);
	background: rgba(254,51,10,.05);
}
.tolinku-cat input:focus-visible + .tolinku-cat-body {
	box-shadow: 0 0 0 3px rgba(254,51,10,.3);
}
.tolinku-cat-title { font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--heading-color, #000); }
.tolinku-cat-desc { font-size: 12px; line-height: 1.4; color: rgba(0,0,0,.5); }
@media (max-width: 575px) { .tolinku-cat-grid { grid-template-columns: 1fr; } }

.tolinku-contact-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 575px) { .tolinku-contact-column { grid-template-columns: 1fr; } }
.tolinku-contact-field { margin-bottom: 18px; }
.tolinku-contact-column .tolinku-contact-field { margin-bottom: 0; }
.tolinku-contact-column { margin-bottom: 18px; }
.tolinku-contact-field label {
	display: block; margin-bottom: 7px;
	font-size: 14px; font-weight: 600; color: var(--heading-color, #000);
}
.tolinku-req { color: var(--accent-color, #fe330a); }
.tolinku-hint { font-size: 12px; font-weight: 400; color: rgba(0,0,0,.42); }
.tolinku-contact-field input,
.tolinku-contact-field select,
.tolinku-contact-field textarea {
	width: 100%;
	padding: 13px 15px;
	border-radius: 11px;
	border: 1px solid rgba(0,0,0,.14);
	background: #fbfaf8;
	font-family: inherit; font-size: 15px; line-height: 1.4;
	color: var(--heading-color, #000);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.tolinku-contact-field input.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.tolinku-contact-field textarea { resize: vertical; min-height: 130px; }
.tolinku-contact-field input:focus,
.tolinku-contact-field select:focus,
.tolinku-contact-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--accent-color, #fe330a);
	box-shadow: 0 0 0 3px rgba(254,51,10,.14);
}
/* The arrow is drawn into the control, since appearance:none removes the
   browser's own and the template loaded an image for it. */
.tolinku-contact-field select {
	appearance: none; -webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}

.tolinku-contact-error {
	margin: 0 0 18px; padding: 12px 15px;
	border-radius: 11px;
	border: 1px solid rgba(254,51,10,.3);
	background: rgba(254,51,10,.08);
	font-size: 14px; line-height: 1.5; color: #b32200;
}
#tolinku-contact-submit { width: 100%; justify-content: center; }
#tolinku-contact-submit.is-busy { opacity: .65; cursor: progress; }

.tolinku-contact-sent { text-align: center; padding: 30px 0 10px; }
.tolinku-sent-mark {
	position: relative; display: inline-block;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--accent-color, #fe330a);
	margin-bottom: 20px;
}
.tolinku-sent-mark::after {
	content: ""; position: absolute; left: 19px; top: 14px;
	width: 11px; height: 21px;
	border: solid #fff; border-width: 0 3px 3px 0;
	transform: rotate(43deg);
}
.tolinku-contact-sent h3 { font-size: 26px; margin: 0 0 10px; }
.tolinku-contact-sent p { margin: 0; color: var(--light-color4, #414141); }
.tolinku-contact-again {
	margin-top: 22px; padding: 0; border: 0; background: none; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 600;
	color: var(--accent-color, #fe330a);
	border-bottom: 1px solid currentColor;
}

/* Editor content on a generic page, in the template's type styles. */
.azzle-page-content { max-width: 820px; margin: 0 auto; }
.azzle-page-content > * + * { margin-top: 1.1em; }
.azzle-page-content h2 { font-size: 36px; margin-top: 1.6em; }
.azzle-page-content h3 { font-size: 26px; margin-top: 1.4em; }
.azzle-page-content p,
.azzle-page-content li { font-size: 17px; line-height: 1.75em; color: var(--light-color4, #414141); }
.azzle-page-content ul,
.azzle-page-content ol { padding-left: 1.4em; }
.azzle-page-content ul { list-style: disc; }
.azzle-page-content ol { list-style: decimal; }
.azzle-page-content ul > li { display: list-item; list-style-type: disc; }
.azzle-page-content ol > li { display: list-item; list-style-type: decimal; }
.azzle-page-content a { color: var(--accent-color, #fe330a); text-decoration: underline; text-underline-offset: 3px; }

/* ── Legal pages ──
   Contents rail beside the document, holding its place while the document
   scrolls. These are reference documents: people arrive for one clause, not
   to read from the top. */
.tolinku-legal-grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}
.tolinku-legal-rail { position: sticky; top: 120px; }
/* Caps the rail and scrolls inside it, so a long contents list can never run
   past the bottom of the window and strand its last entries. */
.tolinku-toc {
	max-height: calc(100vh - 170px);
	overflow-y: auto;
	padding-right: 8px;
}
.tolinku-toc-label {
	margin: 0 0 16px;
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(0,0,0,.42);
}
.tolinku-toc ol { list-style: none; margin: 0; padding: 0; }
.tolinku-toc li { margin: 0; }
.tolinku-toc a {
	display: block;
	padding: 8px 0 8px 15px;
	border-left: 2px solid rgba(0,0,0,.1);
	font-size: 14px; line-height: 1.45;
	color: var(--light-color4, #414141);
	transition: color .18s ease, border-color .18s ease;
}
.tolinku-toc a:hover { color: var(--heading-color, #000); border-color: rgba(0,0,0,.35); }
.tolinku-toc a.is-current {
	color: var(--heading-color, #000); font-weight: 600;
	border-color: var(--accent-color, #fe330a);
}

.tolinku-legal-updated {
	margin: 0 0 36px; padding-bottom: 24px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	font-size: 15px; color: var(--light-color4, #414141);
}
.tolinku-legal-updated strong { color: var(--heading-color, #000); }

.tolinku-legal-body { max-width: 760px; }
/* Anchored headings land below the sticky header, not under it. */
.tolinku-legal-body section { scroll-margin-top: 120px; margin-bottom: 52px; }
.tolinku-legal-body section:last-child { margin-bottom: 0; }
.tolinku-legal-body h2 {
	font-size: 28px; line-height: 1.3em; letter-spacing: -0.01em;
	margin: 0 0 18px;
}
.tolinku-legal-body h3 {
	font-size: 19px; line-height: 1.4em;
	margin: 30px 0 12px;
}
.tolinku-legal-body p,
.tolinku-legal-body li {
	font-size: 16.5px; line-height: 1.75em;
	color: var(--light-color4, #414141);
}
.tolinku-legal-body p { margin: 0 0 16px; }
/* The template clears list markers globally, which is right for its nav and
   card lists and wrong for a document where a bulleted list is the content.
   Restored for the legal body only. */
.tolinku-legal-body ul,
.tolinku-legal-body ol { margin: 0 0 18px; padding-left: 1.4em; }
/* Set on the li, not only the list. The template's reset is `li,ol,ul{
   list-style:none}`, so putting disc on the ul alone leaves each li still
   explicitly none, which beats what it would otherwise inherit. */
.tolinku-legal-body ul { list-style: disc; }
.tolinku-legal-body ol { list-style: decimal; }
.tolinku-legal-body ul > li { display: list-item; list-style-type: disc; }
.tolinku-legal-body ol > li { display: list-item; list-style-type: decimal; }
.tolinku-legal-body li::marker { color: rgba(0,0,0,.35); }
.tolinku-legal-body li { margin-bottom: 8px; }
.tolinku-legal-body a {
	color: var(--heading-color, #000);
	border-bottom: 1px solid rgba(0,0,0,.28);
	transition: color .18s ease, border-color .18s ease;
}
.tolinku-legal-body a:hover { color: var(--accent-color, #fe330a); border-color: var(--accent-color, #fe330a); }
.tolinku-legal-body strong { color: var(--heading-color, #000); font-weight: 700; }

@media (max-width: 1199px) {
	.tolinku-legal-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 991px) {
	/* The rail stops being a rail. Sticky in a single column would pin it over
	   the text it is meant to index. */
	.tolinku-legal-grid { grid-template-columns: 1fr; gap: 0; }
	.tolinku-legal-rail { position: static; margin-bottom: 44px; }
	.tolinku-toc {
		max-height: none; overflow: visible;
		padding: 22px; border-radius: 14px;
		background: var(--light-color2, #efeae3);
	}
	.tolinku-toc a { border-left: 0; padding-left: 0; }
	.tolinku-toc a.is-current { color: var(--accent-color, #fe330a); }
}

/* ── Comparison pages ── */
.tolinku-compare-banner .azzle-page-banner-title { max-width: 900px; margin-left: auto; margin-right: auto; }
.tolinku-compare-badge {
	display: inline-block; margin: 0 0 18px;
	padding: 7px 15px; border-radius: 999px;
	background: rgba(254,51,10,.1); border: 1px solid rgba(254,51,10,.28);
	font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
	color: #b32200;
}
.tolinku-compare-sub {
	max-width: 680px; margin: 22px auto 0;
	font-size: 18px; line-height: 1.65em; color: var(--light-color4, #414141);
}
.tolinku-compare-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

/* Three reasons, numbered instead of iconned: the source data carried
   Tailwind-classed SVGs from the old stack and the numbers say the same thing
   without importing a second icon vocabulary. */
.tolinku-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tolinku-diff {
	padding: 32px; border-radius: 16px;
	border: 1px solid rgba(0,0,0,.09);
	background: #fff;
}
.tolinku-diff-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-bottom: 20px;
	border-radius: 11px;
	background: rgba(254,51,10,.1); color: var(--accent-color, #fe330a);
	font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700;
}
.tolinku-diff h3 { font-size: 21px; line-height: 1.3em; margin: 0 0 12px; }
.tolinku-diff p { margin: 0; font-size: 16px; line-height: 1.65em; color: var(--light-color4, #414141); }
@media (max-width: 991px) { .tolinku-diff-grid { grid-template-columns: 1fr; } }

/* At a glance, on the inverted band. Rows, not a table: the fourth
   column is a sentence, and a four column table of sentences is unreadable
   before it is even narrow. */
.tolinku-on-dark { color: var(--light-color5, #f6f6eb); }
.tolinku-glance { display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; }
.tolinku-glance-row {
	display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px; align-items: start;
	padding: 24px 28px; background: #0d0d0d;
}
.tolinku-glance-feature {
	margin: 0; font-family: "DM Sans", sans-serif;
	font-size: 16px; font-weight: 700; color: #fff;
}
.tolinku-glance-pair { display: flex; flex-direction: column; gap: 10px; }
.tolinku-glance-pair p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.tolinku-glance-pair span {
	display: block; margin-bottom: 3px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.tolinku-glance-us { color: rgba(255,255,255,.9); }
.tolinku-glance-us span { color: var(--accent-color, #fe330a); }
.tolinku-glance-them { color: rgba(255,255,255,.5); }
.tolinku-glance-them span { color: rgba(255,255,255,.35); }
.tolinku-glance-benefit { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.68); }
@media (max-width: 991px) {
	.tolinku-glance-row { grid-template-columns: 1fr; gap: 16px; }
}

/* Feature by feature, as collapsible groups. <details> so a closed group costs
   nothing and the whole thing works before any script runs. */
.tolinku-featable { max-width: 940px; margin: 0 auto; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; overflow: hidden; }
.tolinku-featgroup + .tolinku-featgroup { border-top: 1px solid rgba(0,0,0,.1); }
.tolinku-featgroup > summary {
	display: flex; align-items: center; gap: 12px;
	padding: 20px 24px; cursor: pointer;
	list-style: none;
	font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 700;
	background: #faf8f6;
	transition: background-color .18s ease;
}
.tolinku-featgroup > summary::-webkit-details-marker { display: none; }
.tolinku-featgroup > summary:hover { background: #f4f1ed; }
/* The chevron, drawn so the group needs no icon file. */
.tolinku-featgroup > summary::after {
	content: ""; margin-left: auto; flex-shrink: 0;
	width: 9px; height: 9px;
	border-right: 2px solid rgba(0,0,0,.45); border-bottom: 2px solid rgba(0,0,0,.45);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}
.tolinku-featgroup[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.tolinku-featgroup-count {
	padding: 3px 9px; border-radius: 999px;
	background: rgba(0,0,0,.07);
	font-size: 11.5px; font-weight: 700; color: rgba(0,0,0,.5);
}
.tolinku-feattable { width: 100%; border-collapse: collapse; background: #fff; }
.tolinku-feattable th,
.tolinku-feattable td { padding: 14px 18px; border-top: 1px solid rgba(0,0,0,.07); font-size: 14.5px; text-align: center; }
.tolinku-feattable thead th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: rgba(0,0,0,.45); border-top: none; }
.tolinku-feattable tbody th,
.tolinku-feattable thead th:first-child { text-align: left; font-weight: 600; color: var(--heading-color, #000); }
.tolinku-feattable .is-us { background: rgba(254,51,10,.045); }
.tolinku-feattable thead .is-us { color: #b32200; }
.tolinku-cmp-note { font-size: 13px; color: rgba(0,0,0,.55); }
/* The competitor's ticks are neutral. In brand orange they read as our own
   endorsement of their column, which is the opposite of what the table is
   for: the accent should mark what Tolinku does, not what anyone does.
   Applies to the matrix on the index as well as the per-page table. */
.tolinku-feattable td:not(.is-us) .tolinku-mark.is-yes::before,
.tolinku-feattable td:not(.is-us) .tolinku-mark.is-yes::after,
.tolinku-matrix td:not(.is-us) .tolinku-mark.is-yes::before,
.tolinku-matrix td:not(.is-us) .tolinku-mark.is-yes::after { background: rgba(0,0,0,.42); }
/* The key below the matrix explains our marks, so its tick stays accented. */
.tolinku-matrix-key .tolinku-mark.is-yes::before,
.tolinku-matrix-key .tolinku-mark.is-yes::after { background: var(--accent-color, #fe330a); }

/* Shared tick and dash, drawn in CSS. */
.tolinku-mark { position: relative; display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.tolinku-mark.is-yes::before,
.tolinku-mark.is-yes::after { content: ""; position: absolute; border-radius: 2px; background: var(--accent-color, #fe330a); }
.tolinku-mark.is-yes::before { width: 2.5px; height: 7px; left: 4px; top: 7px; transform: rotate(-45deg); }
.tolinku-mark.is-yes::after { width: 2.5px; height: 13px; left: 10px; top: 2px; transform: rotate(35deg); }
.tolinku-mark.is-no::before {
	content: ""; position: absolute; left: 3px; top: 8px;
	width: 12px; height: 2px; border-radius: 2px; background: rgba(0,0,0,.2);
}

/* Price side by side. */
.tolinku-pricecmp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 0 auto; }
.tolinku-pricecmp-card { padding: 32px; border-radius: 16px; border: 1px solid rgba(0,0,0,.1); background: #fff; }
.tolinku-pricecmp-card.is-us { border-color: rgba(254,51,10,.35); background: rgba(254,51,10,.04); }
.tolinku-pricecmp-who { margin: 0 0 6px; font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 700; }
.tolinku-pricecmp-who span { font-weight: 400; color: rgba(0,0,0,.45); }
.tolinku-pricecmp-price { margin: 0 0 22px; font-family: "DM Sans", sans-serif; font-size: 40px; font-weight: 700; line-height: 1; }
.tolinku-pricecmp-card ul { list-style: none; margin: 0; padding: 0; }
.tolinku-pricecmp-card li {
	position: relative; padding: 8px 0 8px 26px;
	font-size: 14.5px; line-height: 1.5; color: var(--light-color4, #414141);
}
.tolinku-pricecmp-card li::before {
	content: ""; position: absolute; left: 0; top: 14px;
	width: 12px; height: 2px; border-radius: 2px; background: rgba(0,0,0,.2);
}
.tolinku-pricecmp-card li.is-yes::before {
	top: 11px; left: 2px; width: 6px; height: 11px;
	border: solid var(--accent-color, #fe330a); border-width: 0 2px 2px 0;
	background: none; border-radius: 0; transform: rotate(43deg);
}
.tolinku-pricecmp-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(0,0,0,.45); }
@media (max-width: 767px) { .tolinku-pricecmp { grid-template-columns: 1fr; } }

.tolinku-compare-cta {
	text-align: center; padding: 60px 40px; border-radius: 20px;
	background: var(--light-color2, #efeae3);
}
.tolinku-compare-cta h2 { margin: 0 0 14px; }
.tolinku-compare-cta p { margin: 0 auto 30px; max-width: 540px; color: var(--light-color4, #414141); }
.tolinku-compare-cta .tolinku-cta-actions { justify-content: center; }

/* ── Comparison index ── */
.tolinku-rivals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tolinku-rival {
	position: relative; display: block;
	padding: 34px 34px 40px; border-radius: 16px;
	border: 1px solid rgba(0,0,0,.09); background: #fff;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tolinku-rival:hover {
	transform: translateY(-4px);
	border-color: rgba(0,0,0,.14);
	box-shadow: 0 26px 50px -30px rgba(0,0,0,.35);
}
.tolinku-rival-vs {
	margin: 0 0 12px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--accent-color, #fe330a);
}
.tolinku-rival h3 { font-size: 23px; line-height: 1.3em; margin: 0 0 12px; }
.tolinku-rival-sum { margin: 0; font-size: 15.5px; line-height: 1.65em; color: var(--light-color4, #414141); }
.tolinku-rival-go {
	position: absolute; right: 30px; bottom: 32px;
	width: 10px; height: 10px;
	border-right: 2px solid rgba(0,0,0,.35); border-top: 2px solid rgba(0,0,0,.35);
	transform: rotate(45deg);
	transition: border-color .25s ease, transform .25s ease;
}
.tolinku-rival:hover .tolinku-rival-go { border-color: var(--accent-color, #fe330a); transform: rotate(45deg) translate(3px, -3px); }
@media (max-width: 767px) { .tolinku-rivals { grid-template-columns: 1fr; } }

/* ── Comparison: hero additions ── */
.azzle-page-crumbs.is-compact { margin-bottom: 22px; }
.azzle-page-crumbs.is-compact ol { font-size: 13px; font-weight: 500; }

/* The price gap, stated where the decision is made. */
.tolinku-pricegap {
	display: inline-grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 28px;
	margin-top: 44px; padding: 26px 34px;
	border-radius: 18px;
	background: rgba(255,255,255,.75);
	border: 1px solid rgba(0,0,0,.08);
}
.tolinku-pricegap-side { text-align: center; }
.tolinku-pricegap-who {
	margin: 0 0 6px;
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(0,0,0,.42);
}
.tolinku-pricegap-side.is-us .tolinku-pricegap-who { color: var(--accent-color, #fe330a); }
.tolinku-pricegap-num {
	margin: 0 0 6px;
	font-family: "DM Sans", sans-serif;
	font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
	color: rgba(0,0,0,.45);
}
.tolinku-pricegap-side.is-us .tolinku-pricegap-num { color: var(--heading-color, #000); }
.tolinku-pricegap-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgba(0,0,0,.45); max-width: 20ch; margin-inline: auto; }
.tolinku-pricegap-vs {
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(0,0,0,.3);
}
@media (max-width: 575px) {
	.tolinku-pricegap { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
}

/* ── Where the claims came from ── */
.tolinku-verified {
	max-width: 940px; margin: 26px auto 0;
	font-size: 13px; line-height: 1.6; color: rgba(0,0,0,.45); text-align: center;
}

/* ── Migration ── */
.tolinku-migrate { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; }
.tolinku-migrate-step { position: relative; display: flex; gap: 24px; padding-bottom: 36px; }
.tolinku-migrate-step:last-child { padding-bottom: 0; }
/* The rail joining the steps, stopped before the last marker. */
.tolinku-migrate-step:not(:last-child)::before {
	content: ""; position: absolute;
	left: 23px; top: 54px; bottom: 6px; width: 1px;
	background: rgba(0,0,0,.12);
}
.tolinku-migrate-num {
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 13px;
	border: 1px solid rgba(0,0,0,.12);
	background: #fff;
	font-family: "DM Sans", sans-serif;
	font-size: 13px; font-weight: 700;
	color: var(--accent-color, #fe330a);
}
.tolinku-migrate-body { padding-top: 3px; }
.tolinku-migrate-body h3 { font-size: 20px; line-height: 1.3em; margin: 0 0 9px; }
.tolinku-migrate-body p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.65em; color: var(--light-color4, #414141); }
.tolinku-migrate-code {
	display: inline-block; margin-top: 14px;
	padding: 10px 14px; border-radius: 9px;
	background: #1b1b1b; color: #f3efe9;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px; line-height: 1.4;
	word-break: break-word;
}
.tolinku-migrate-note {
	max-width: 820px; margin: 40px auto 0;
	padding: 18px 22px; border-radius: 12px;
	background: var(--light-color2, #efeae3);
	font-size: 14.5px; line-height: 1.6; color: var(--light-color4, #414141);
}

/* ── Enterprise ── */
.tolinku-ent {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px; align-items: center;
	padding: 52px; border-radius: 20px;
	background: var(--heading-color, #000);
}
.tolinku-ent-eyebrow {
	margin: 0 0 14px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent-color, #fe330a);
}
.tolinku-ent-copy h2 { margin: 0 0 16px; font-size: 34px; line-height: 1.22em; color: var(--light-color5, #f6f6eb); }
.tolinku-ent-copy > p { margin: 0 0 30px; font-size: 16.5px; line-height: 1.7em; color: rgba(255,255,255,.66); }
.tolinku-ent-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.tolinku-ent-list li {
	position: relative; padding-left: 26px;
	font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82);
}
.tolinku-ent-list li::before {
	content: ""; position: absolute; left: 2px; top: 4px;
	width: 6px; height: 11px;
	border: solid var(--accent-color, #fe330a); border-width: 0 2px 2px 0;
	transform: rotate(43deg);
}
@media (max-width: 991px) {
	.tolinku-ent { grid-template-columns: 1fr; gap: 34px; padding: 36px; }
	.tolinku-ent-copy h2 { font-size: 28px; }
}
@media (max-width: 575px) { .tolinku-ent-list { grid-template-columns: 1fr; } }

/* ── Also compared with ── */
.tolinku-alsocmp {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
	padding: 24px 28px; border-radius: 14px;
	border: 1px solid rgba(0,0,0,.09);
}
.tolinku-alsocmp-label {
	margin: 0;
	font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(0,0,0,.42);
}
.tolinku-alsocmp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tolinku-alsocmp a {
	display: inline-block; padding: 8px 16px; border-radius: 999px;
	border: 1px solid rgba(0,0,0,.14);
	font-size: 14px; font-weight: 600; color: var(--heading-color, #000);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tolinku-alsocmp a:hover { background: var(--heading-color, #000); border-color: var(--heading-color, #000); color: #fff; }

/* .azzle-default-btn is black, and so is this band, so the primary button
   vanished into it. Same inversion the featured pricing card needs. */
.tolinku-ent .azzle-default-btn:not(.outline-btn) {
	background-color: var(--light-color, #fff);
	color: var(--heading-color, #000);
}
.tolinku-ent .azzle-default-btn:not(.outline-btn):hover {
	background-color: var(--accent-color, #fe330a);
	color: #fff;
}

/* ── Comparison index: the matrix ──
   Seven columns, so it scrolls sideways under about 900px. Shrinking a seven
   column grid to phone width stops it being a table. */
.tolinku-matrix-wrap {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	margin-bottom: 18px;
	border: 1px solid rgba(0,0,0,.1); border-radius: 16px;
}
.tolinku-matrix { width: 100%; min-width: 820px; border-collapse: collapse; background: #fff; }
.tolinku-matrix th,
.tolinku-matrix td {
	padding: 15px 16px; text-align: center; vertical-align: middle;
	border-bottom: 1px solid rgba(0,0,0,.07);
}
.tolinku-matrix tbody tr:last-child th,
.tolinku-matrix tbody tr:last-child td { border-bottom: none; }
.tolinku-matrix thead th {
	background: #faf8f6; border-bottom: 1px solid rgba(0,0,0,.1);
	font-family: "DM Sans", sans-serif; font-size: 13.5px; font-weight: 700;
	color: var(--heading-color, #000);
	white-space: nowrap;
}
.tolinku-matrix thead th:first-child,
.tolinku-matrix tbody th { text-align: left; }
.tolinku-matrix tbody th { font-size: 14.5px; font-weight: 600; color: var(--heading-color, #000); }
/* Our column is tinted the whole way down, so the eye can follow it. */
.tolinku-matrix .is-us { background: rgba(254,51,10,.05); }
.tolinku-matrix thead .is-us { background: rgba(254,51,10,.1); color: #b32200; }

/* The third state. A qualified answer is not a tick and not a dash. */
.tolinku-mark.is-text::before {
	content: ""; position: absolute; left: 4px; top: 4px;
	width: 10px; height: 10px; border-radius: 50%;
	border: 2px solid rgba(0,0,0,.28);
}
.tolinku-matrix-key {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
	margin: 0 0 56px;
	font-size: 13px; color: rgba(0,0,0,.5);
}
.tolinku-matrix-key > span { display: inline-flex; align-items: center; gap: 8px; }

/* Price gap on each card. */
.tolinku-rival-price {
	display: flex; align-items: baseline; gap: 9px;
	margin: 18px 0 0; padding-top: 16px;
	border-top: 1px solid rgba(0,0,0,.08);
	font-family: "DM Sans", sans-serif;
}
.tolinku-rival-price strong { font-size: 19px; font-weight: 700; color: var(--heading-color, #000); }
.tolinku-rival-price span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.32); }
.tolinku-rival-price em { font-style: normal; font-size: 19px; font-weight: 700; color: rgba(0,0,0,.42); }

/* Five cards in a two column grid leaves one stranded on its own row. The last
   one spans both, so the block closes square. */
.tolinku-rivals > .tolinku-rival:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tolinku-rivals > .tolinku-rival:last-child:nth-child(odd) .tolinku-rival-sum { max-width: 62ch; }

/* ── Feature pages ── */
.tolinku-feat-lead { margin-bottom: 0; }
.tolinku-feat-media { display: flex; align-items: center; height: 100%; }
.tolinku-feat-media > * { width: 100%; }
.tolinku-feat-copy { padding-left: 50px; }
.tolinku-feat-copy h2 { font-size: 32px; line-height: 1.24em; margin: 0 0 16px; }
.tolinku-feat-copy p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.7em; color: var(--light-color4, #414141); }

/* The sections below the lead, in the template's joined-border grid. One
   border on the container and one between cells, so the whole block reads as a
   single object instead of a stack of floating text. */
.tolinku-feat-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}
.tolinku-feat-cell {
	padding: 40px;
	border-right: 1px solid rgba(0,0,0,.12);
	border-bottom: 1px solid rgba(0,0,0,.12);
}
/* Right-hand cells and the bottom row lose the edge that the container already
   draws, which is what keeps the outer corners clean. */
.tolinku-feat-cell:nth-child(2n) { border-right: none; }
.tolinku-feat-cell:nth-last-child(-n+2):nth-child(2n+1),
.tolinku-feat-cell:nth-last-child(-n+2):nth-child(2n+1) ~ .tolinku-feat-cell { border-bottom: none; }
/* An odd final cell spans the row so the grid never ends on a gap. */
.tolinku-feat-cell:last-child:nth-child(2n+1) { grid-column: 1 / -1; border-right: none; }
.tolinku-feat-cell h2 { font-size: 23px; line-height: 1.3em; margin: 0 0 12px; }
.tolinku-feat-cell p { margin: 0; font-size: 16px; line-height: 1.68em; color: var(--light-color4, #414141); }

.tolinku-feat-points { list-style: none; margin: 22px 0 0; padding: 0; }
.tolinku-feat-points li {
	position: relative; padding: 0 0 0 28px; margin-bottom: 11px;
	font-size: 15.5px; line-height: 1.6em; color: var(--light-color4, #414141);
}
.tolinku-feat-points li:last-child { margin-bottom: 0; }
.tolinku-feat-points li::before {
	content: ""; position: absolute; left: 4px; top: 6px;
	width: 7px; height: 12px;
	border: solid var(--accent-color, #fe330a); border-width: 0 2px 2px 0;
	transform: rotate(43deg);
}
.tolinku-feat-copy .tolinku-feat-points li { font-size: 16px; }
/* A cell spanning the full row has the width for two columns of points. */
.tolinku-feat-cell:last-child:nth-child(2n+1) .tolinku-feat-points { columns: 2; column-gap: 44px; }
.tolinku-feat-cell:last-child:nth-child(2n+1) .tolinku-feat-points li { break-inside: avoid; }

@media (max-width: 991px) {
	.tolinku-feat-copy { padding: 36px 0 0; }
	.tolinku-feat-copy h2 { font-size: 26px; }
	.tolinku-feat-grid { grid-template-columns: 1fr; }
	.tolinku-feat-cell { padding: 30px; border-right: none; }
	.tolinku-feat-cell:last-child { border-bottom: none; }
	.tolinku-feat-cell:last-child:nth-child(2n+1) .tolinku-feat-points { columns: 1; }
}

/* ── Features index ── */
.tolinku-featgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tolinku-featcard {
	position: relative; display: block;
	/* 48px of bottom padding used to reserve room for the absolute chevron. */
	padding: 30px; border-radius: 16px;
	border: 1px solid rgba(0,0,0,.09); background: #fff; color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tolinku-featcard:hover {
	transform: translateY(-4px);
	border-color: rgba(0,0,0,.14);
	box-shadow: 0 26px 50px -30px rgba(0,0,0,.35);
}
.tolinku-featcard h3 { font-size: 20px; line-height: 1.3em; margin: 0 0 10px; }
.tolinku-featcard p { margin: 0; font-size: 15px; line-height: 1.6em; color: var(--light-color4, #414141); }
/* The card carried a bare chevron in the corner: 10px of rotated border, with
   nothing to say what it did. A labelled arrow is the affordance the rest of
   the site uses, and it reads at a glance. */
.tolinku-featcard { display: flex; flex-direction: column; }
.tolinku-featcard p { flex: 1 1 auto; }
.tolinku-featcard-go {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 14.5px; font-weight: 700; line-height: 1.2;
	color: var(--heading-color, #000);
	transition: gap .2s ease, color .2s ease;
}
.tolinku-featcard:hover .tolinku-featcard-go { gap: 13px; color: var(--accent-color, #fe330a); }

/* The tint, for the same reason the feature grid has one: white cards on a
   white page leave the hairline border carrying the whole block. */
.tolinku-featgrid-band { background: var(--light-color2, #efeae3); padding-top: 40px; padding-bottom: 96px; }

/* The hero and this band are the same cream, so the hero's rounded bottom was
   drawing a 50px curve against an identical colour: a silhouette nobody could
   see, with a faint seam where the two met. The curve moves to the foot of the
   cream instead, which is where the eye expects the block to end anyway. */
.tolinku-banner--joined { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tolinku-banner--joined + .tolinku-featgrid-band { border-radius: 0 0 50px 50px; }
@media (max-width: 767px) {
	.tolinku-banner--joined + .tolinku-featgrid-band { border-radius: 0 0 30px 30px; }
}
.tolinku-featgrid-tail { background: #fff; }
.tolinku-featgrid-tail:not(.pt-0) { padding-top: 70px; }

/* The twelfth tile closes the ragged last row. It is a different destination
   from the eleven, so it is marked as one rather than impersonating a feature. */
.tolinku-featcard--alt { background: #fbf7f2; border-style: dashed; border-color: rgba(0,0,0,.16); }
.tolinku-featcard--alt .tolinku-featcard-icon { background: rgba(0,0,0,.06); color: var(--heading-color, #000); }
.tolinku-featcard--alt:hover .tolinku-featcard-icon { background: var(--heading-color, #000); color: #fff; }
@media (max-width: 991px) { .tolinku-featgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tolinku-featgrid { grid-template-columns: 1fr; } }

/* Feature cards carry the same mark the nav uses for that feature, so the menu
   and this page agree on what each one looks like. */
.tolinku-featcard-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-bottom: 20px;
	border-radius: 12px;
	background: rgba(254,51,10,.09);
	color: var(--accent-color, #fe330a);
}
.tolinku-featcard-icon svg { width: 22px; height: 22px; }
.tolinku-featcard:hover .tolinku-featcard-icon { background: var(--accent-color, #fe330a); color: #fff; }
.tolinku-featcard-icon { transition: background-color .25s ease, color .25s ease; }

/* ── Feature lead on the inverted band ──
   The panels are light cards by design, so the band does the contrast and the
   copy beside it flips. Only the text needs restating; the panel is already
   the right colour for a dark background. */
.tolinku-feat-band .tolinku-feat-copy h2 { color: var(--light-color5, #f6f6eb); }
.tolinku-feat-band .tolinku-feat-copy p { color: rgba(255,255,255,.66); }
.tolinku-feat-band .tolinku-feat-points li { color: rgba(255,255,255,.8); }
/* The tick keeps the accent: on black it is the one spot of colour and it
   stays legible where a darker mark would disappear. */
.tolinku-feat-band .tolinku-feat-points li::before { border-color: var(--accent-color, #fe330a); }
/* The panel gets a deeper shadow, which is what separates a light card from a
   dark ground. */
.tolinku-feat-band .tolinku-panel,
.tolinku-feat-band .tolinku-builder { box-shadow: 0 50px 90px -40px rgba(0,0,0,.75); }

/* White cells on a white page gave the grid nothing to sit against, so its
   border was doing all the work. The tint separates the block from the page
   and carries the band above it into the rest of the document. */
.tolinku-feat-rest { background: var(--light-color2, #efeae3); }
.tolinku-feat-rest .tolinku-feat-grid { border-color: rgba(0,0,0,.09); }

/* ── Feature page: a second illustration and the platform reach ── */
/* The template gives .azzle-video-section a horizontal margin only, so this
   black rounded panel had nothing above it. Following the cream grid, that put
   the grid's own cream bottom padding hard against the panel's rounded top and
   the colour change sliced the corner off. */
.tolinku-feat-second { margin-bottom: 0; margin-top: 70px; }

/* Code shown as a file. Reuses the SDK window so a snippet looks the same
   wherever it appears on the site. */
.tolinku-sdk-code {
	margin: 0; padding: 22px 24px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px; line-height: 1.6;
	color: #f3efe9;
	overflow-x: auto;
	white-space: pre;
}
.tolinku-sdk-code code { font: inherit; color: inherit; background: none; padding: 0; }

.tolinku-reach {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 48px; align-items: center;
	padding: 46px 52px; border-radius: 20px;
	background: var(--light-color2, #efeae3);
}
.tolinku-reach-copy h2 { font-size: 30px; line-height: 1.25em; margin: 0 0 14px; }
.tolinku-reach-copy p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.68em; color: var(--light-color4, #414141); }
.tolinku-reach-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.tolinku-reach-list li {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 20px 10px;
	border-radius: 14px; background: #fff;
	border: 1px solid rgba(0,0,0,.07);
}
.tolinku-reach-list li span { font-size: 13px; font-weight: 600; color: var(--heading-color, #000); text-align: center; }
.tolinku-reach-list .tolinku-platform-mark { width: 26px; height: 26px; color: var(--heading-color, #000); opacity: .85; }
/* Same optical sizing as the home page strip: a solid silhouette carries more
   ink than an open mark at the same box. */
.tolinku-reach-list .tolinku-platform--apple .tolinku-platform-mark { width: 23px; height: 23px; }
.tolinku-reach-list .tolinku-platform--flutter .tolinku-platform-mark { width: 22px; height: 22px; }
.tolinku-reach-list .tolinku-platform--react .tolinku-platform-mark { width: 29px; height: 29px; }
.tolinku-reach-list .tolinku-platform--javascript .tolinku-platform-mark { width: 21px; height: 21px; }
@media (max-width: 991px) {
	.tolinku-reach { grid-template-columns: 1fr; gap: 32px; padding: 34px; }
	.tolinku-reach-copy h2 { font-size: 25px; }
}
@media (max-width: 575px) { .tolinku-reach-list { grid-template-columns: repeat(2, 1fr); } }

/* Arrow link. Defined with the five part showcase originally, which was
   removed; the class outlived it and was falling back to a default blue. */
.tolinku-showcase-link {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: "DM Sans", sans-serif;
	font-size: 15.5px; font-weight: 700; line-height: 1.3;
	color: var(--heading-color, #000);
	transition: gap .2s ease, color .2s ease;
}
.tolinku-showcase-link:hover { gap: 14px; color: var(--accent-color, #fe330a); }

/* ── Feature hero demo ──
   A link and the screen it opens. The hero was 640px of flat cream with type
   and two buttons, which is the first thing anyone sees on eleven pages. */
.tolinku-herodemo {
	max-width: 840px; margin: 52px auto 0;
	border-radius: 18px; overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 44px 90px -50px rgba(0,0,0,.42);
	text-align: left;
}
.tolinku-herodemo-bar {
	display: flex; align-items: center; gap: 8px;
	padding: 13px 18px;
	background: #f4f1ec;
	border-bottom: 1px solid rgba(0,0,0,.07);
}
.tolinku-herodemo-url {
	display: inline-flex; align-items: center; gap: 7px;
	margin-left: 10px; padding: 6px 15px;
	border-radius: 999px;
	background: #fff; border: 1px solid rgba(0,0,0,.08);
	font-family: "JetBrains Mono", monospace;
	font-size: 13px; line-height: 1.2;
	color: var(--light-color4, #414141);
}
.tolinku-herodemo-host { color: #8a8a8a; }
.tolinku-herodemo-path { color: var(--accent-color, #fe330a); font-weight: 500; }
/* The sweep is a clip, not a width animation: a monospace string of a known
   length reflows the pill if the box itself grows. */
.tolinku-herodemo-path.is-typing { animation: tolinku-hd-type .42s steps(14, end); }
@keyframes tolinku-hd-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.tolinku-herodemo-body {
	display: grid; grid-template-columns: 1fr 226px;
	gap: 36px; align-items: center;
	padding: 34px 36px 0;
}
.tolinku-herodemo-lead {
	margin: 0 0 22px;
	font-size: 16.5px; line-height: 1.6em;
	color: var(--light-color4, #414141);
}
.tolinku-herodemo-chips { display: flex; flex-direction: column; gap: 10px; }
.tolinku-herodemo-chip {
	display: flex; align-items: baseline; gap: 12px;
	padding: 13px 17px; border-radius: 11px;
	background: #faf8f5; border: 1px solid rgba(0,0,0,.08);
	text-align: left; cursor: pointer;
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tolinku-herodemo-chip:hover { transform: translateX(3px); border-color: rgba(0,0,0,.2); }
.tolinku-herodemo-chip[aria-selected="true"] {
	background: rgba(254,51,10,.07);
	border-color: rgba(254,51,10,.4);
}
.tolinku-herodemo-chip-path {
	font-family: "JetBrains Mono", monospace;
	font-size: 13.5px; font-weight: 500;
	color: var(--heading-color, #000);
}
.tolinku-herodemo-chip[aria-selected="true"] .tolinku-herodemo-chip-path { color: var(--accent-color, #fe330a); }
.tolinku-herodemo-chip-kind {
	margin-left: auto;
	font-size: 12.5px; color: #8a8a8a; white-space: nowrap;
}

/* The phone sits in the card and is cropped by it, so the hero does not grow
   by a whole device to show a screen that is mostly empty at the bottom. */
.tolinku-herodemo-phone {
	position: relative;
	width: 226px;
	margin-bottom: -1px;
	padding: 10px 10px 0;
	border-radius: 30px 30px 0 0;
	background: #111; box-shadow: 0 20px 50px -24px rgba(0,0,0,.6);
}
.tolinku-herodemo-notch {
	position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
	width: 66px; height: 5px; border-radius: 999px;
	background: #3a3a3a;
}
/* The screens are grid-stacked, not absolutely positioned, so the phone is as
   tall as its tallest screen and no demo can clip its own call to action. The
   fixed height this replaced cut 21px into a button the moment a line of copy
   wrapped, which is a bug that would land again on every feature added. */
.tolinku-herodemo-screens {
	display: grid;
	border-radius: 22px 22px 0 0; overflow: hidden;
	background: linear-gradient(170deg, #fff 0%, #f6f2ec 100%);
}
.tolinku-herodemo-screen {
	grid-area: 1 / 1;
	padding: 26px 20px 30px;
	opacity: 0; transform: translateY(9px);
	transition: opacity .34s ease, transform .34s ease;
	pointer-events: none;
}
.tolinku-herodemo-screen.is-on { opacity: 1; transform: none; }
.tolinku-herodemo-app {
	margin: 0 0 16px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--accent-color, #fe330a);
}
.tolinku-herodemo-title {
	margin: 0 0 5px;
	font-family: "DM Sans", sans-serif;
	font-size: 22px; font-weight: 700; line-height: 1.2;
	color: var(--heading-color, #000);
}
.tolinku-herodemo-meta { margin: 0 0 18px; font-size: 12.5px; color: #767676; }
.tolinku-herodemo-rows { list-style: none; margin: 0 0 20px; padding: 0; }
.tolinku-herodemo-rows li {
	list-style: none;
	padding: 9px 0; font-size: 12.5px; color: var(--light-color4, #414141);
	border-top: 1px solid rgba(0,0,0,.07);
}
.tolinku-herodemo-cta {
	margin: 0; padding: 11px 0; border-radius: 999px;
	background: var(--heading-color, #000); color: #fff;
	font-size: 12.5px; font-weight: 700; text-align: center;
}
@media (max-width: 767px) {
	.tolinku-herodemo { margin-top: 40px; }
	.tolinku-herodemo-body { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px 0; justify-items: center; }
	.tolinku-herodemo-pick { width: 100%; }
	.tolinku-herodemo-chip-kind { display: none; }
	.tolinku-herodemo-url { font-size: 12px; margin-left: 4px; padding: 5px 11px; }
}

/* ── The three standards, on white ──
   Breaks the cream into black transition the hero used to make on its own. */
.tolinku-standards-band { background: #fff; }
.tolinku-standards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	list-style: none; margin: 56px 0 0; padding: 0;
}
.tolinku-standard {
	list-style: none;
	padding: 32px; border-radius: 16px;
	border: 1px solid rgba(0,0,0,.09);
	background: var(--light-color2, #efeae3);
}
.tolinku-standard-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-bottom: 20px;
	border-radius: 12px;
	background: #fff; border: 1px solid rgba(0,0,0,.07);
	color: var(--heading-color, #000);
}
.tolinku-standard-mark .tolinku-platform-mark { width: 21px; height: 21px; }
/* The numbered variant, for the ten features whose three cards are not any
   platform's. Same 44px box, so a row of numbers and a row of marks sit at the
   same weight and the band reads as one component across all eleven pages. */
.tolinku-standard--n .tolinku-standard-mark {
	font-family: "DM Sans", sans-serif;
	font-size: 13px; font-weight: 700;
	color: var(--accent-color, #fe330a);
	background: rgba(254,51,10,.08); border-color: rgba(254,51,10,.2);
}
/* Per mark, as on the home page strip: a solid silhouette carries more ink
   than an open one at the same box. */
.tolinku-standard--apple .tolinku-platform-mark { width: 19px; height: 19px; }
.tolinku-standard--deferred .tolinku-platform-mark { width: 20px; height: 20px; }
.tolinku-standard h3 { font-size: 21px; line-height: 1.3em; margin: 0 0 10px; }
.tolinku-standard-file {
	margin: 0 0 14px;
	font-family: "JetBrains Mono", monospace;
	font-size: 12.5px; line-height: 1.4;
	color: var(--accent-color, #fe330a);
	word-break: break-all;
}
.tolinku-standard-body { margin: 0; font-size: 16px; line-height: 1.65em; color: var(--light-color4, #414141); }
@media (max-width: 991px) { .tolinku-standards { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; } }

/* The window shape: same card, same chips, a code pane instead of a device.
   For features whose output a server sees rather than a user. */
/* The pane gets the larger share. A payload is only legible if its lines do
   not wrap or scroll sideways, and an even split left room for 42 monospace
   characters when the longest line in the webhook payload is a real URL. */
.tolinku-herodemo--window .tolinku-herodemo-body {
	grid-template-columns: 0.85fr 1.15fr;
	align-items: stretch;
	padding: 34px 36px 34px;
}
.tolinku-herodemo-pane {
	position: relative;
	min-height: 272px;
	border-radius: 13px; overflow: hidden;
	background: #1b1b1b;
}
.tolinku-herodemo-code {
	position: absolute; inset: 0; margin: 0;
	padding: 20px 22px;
	overflow: auto;
	font-family: "JetBrains Mono", monospace;
	font-size: 12.5px; line-height: 1.7;
	color: #e4e4e4; background: none;
	opacity: 0; transform: translateY(8px);
	transition: opacity .34s ease, transform .34s ease;
	pointer-events: none;
}
.tolinku-herodemo-code.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tolinku-herodemo-code code { font: inherit; color: inherit; background: none; padding: 0; }
/* The window bar names an endpoint, not a URL, so it loses the host styling. */
.tolinku-herodemo--window .tolinku-herodemo-path { color: #4f9cf9; }
@media (max-width: 767px) {
	.tolinku-herodemo--window .tolinku-herodemo-body { grid-template-columns: 1fr; padding: 28px 22px; }
	.tolinku-herodemo-pane { min-height: 240px; width: 100%; }
}

/* ── Feature page tail ──
   reach, sibling links and CTA. They carry their own white, because without it
   the cream reach panel inherited the cream of the grid section above and the
   section boundary drew a hard line across the panel's rounded top. */
.tolinku-feat-tail { background: #fff; }
/* Where the tail follows the grid directly, the 130px between them is split
   either side of the colour change rather than all sitting above it. */
.tolinku-feat-rest--tight { padding-bottom: 62px; }
.tolinku-feat-tail--lead,
.tolinku-feat-gap-lead { padding-top: 70px; }

/* ── About ── */
.tolinku-about-why { background: #fff; }
.tolinku-about-tail { background: #fff; }
/* The badge is centred on hero use; here it sits in a left column. */
.tolinku-about-why .tolinku-compare-badge { margin-bottom: 16px; }
.tolinku-about-why .tolinku-feat-copy h2 { margin-bottom: 18px; }
.tolinku-about-why .tolinku-feat-copy p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.7em; color: var(--light-color4, #414141); }
.tolinku-about-why .tolinku-feat-copy p:last-child { margin-bottom: 0; }

/* The five problems. A definition list in all but markup: the name carries
   the claim and the line under it qualifies it, so they are not bullets. */
.tolinku-about-problems { list-style: none; margin: 26px 0 30px; padding: 0; }
.tolinku-about-problems li {
	list-style: none;
	position: relative;
	padding: 0 0 18px 30px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.tolinku-about-problems li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* The accent tick, as used on the dark band elsewhere. */
.tolinku-about-problems li::before {
	content: ""; position: absolute; left: 2px; top: 6px;
	width: 11px; height: 6px;
	border-left: 2px solid var(--accent-color, #fe330a);
	border-bottom: 2px solid var(--accent-color, #fe330a);
	transform: rotate(-45deg);
}
.tolinku-about-problems strong {
	display: block; margin-bottom: 5px;
	font-family: "DM Sans", sans-serif;
	font-size: 17px; font-weight: 700; line-height: 1.35;
	color: var(--light-color5, #f6f6eb);
}
.tolinku-about-problems span { font-size: 15.5px; line-height: 1.65em; color: rgba(255,255,255,.66); }
.tolinku-feat-band .tolinku-showcase-link { color: var(--light-color5, #f6f6eb); }
.tolinku-feat-band .tolinku-showcase-link:hover { color: var(--accent-color, #fe330a); }

/* ── The routes panel, ported from the live about page ── */
.tolinku-panel--routes {
	padding: 0; overflow: hidden;
	border-radius: 16px; background: #fff;
	border: 1px solid rgba(0,0,0,.09);
	box-shadow: 0 40px 80px -45px rgba(0,0,0,.4);
}
.tolinku-routes-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 15px 20px;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.tolinku-routes-title {
	margin: 0; font-family: "DM Sans", sans-serif;
	font-size: 14.5px; font-weight: 700; color: var(--heading-color, #000);
}
.tolinku-routes-new {
	padding: 6px 13px; border-radius: 999px;
	background: var(--accent-color, #fe330a); color: #fff;
	font-size: 11.5px; font-weight: 700;
}
.tolinku-routes-head,
.tolinku-routes-list li {
	display: grid;
	grid-template-columns: 1.35fr 1.15fr .95fr .7fr;
	gap: 10px; align-items: center;
	padding: 11px 20px;
}
.tolinku-routes-head {
	font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: #9a9a9a;
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.tolinku-routes-list { list-style: none; margin: 0; padding: 0; }
.tolinku-routes-list li { list-style: none; border-bottom: 1px solid rgba(0,0,0,.05); }
.tolinku-routes-list li:last-child { border-bottom: 0; }
.tolinku-routes-path {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px; color: var(--heading-color, #000);
}
.tolinku-routes-name { font-size: 12.5px; color: var(--light-color4, #414141); }
.tolinku-routes-type { display: flex; flex-wrap: wrap; gap: 5px; }
.tolinku-routes-tag {
	padding: 3px 8px; border-radius: 6px;
	font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.tolinku-routes-tag.is-dynamic { background: rgba(254,51,10,.1); color: #b32200; }
.tolinku-routes-tag.is-static { background: rgba(0,0,0,.06); color: #555; }
.tolinku-routes-tag.is-ab { background: rgba(214,158,46,.16); color: #8a6100; }
.tolinku-routes-status {
	justify-self: start;
	padding: 3px 9px; border-radius: 6px;
	background: rgba(32,150,90,.13); color: #1d6b45;
	font-size: 10.5px; font-weight: 700;
}
.tolinku-routes-foot {
	margin: 0; padding: 13px 20px 16px;
	font-size: 11.5px; color: #9a9a9a;
}
@media (max-width: 575px) {
	.tolinku-routes-head, .tolinku-routes-list li { grid-template-columns: 1.3fr 1fr; }
	.tolinku-routes-head span:nth-child(3), .tolinku-routes-head span:nth-child(4) { display: none; }
	.tolinku-routes-type, .tolinku-routes-status { display: none; }
}

/* ── About: the measured section ── */
.tolinku-about-data { background: #fff; }
.tolinku-about-datacopy h2 { font-size: 46px; line-height: 1.12em; margin: 0 0 20px; }
.tolinku-about-datacopy > p {
	margin: 0 0 40px; max-width: 520px;
	font-size: 16.5px; line-height: 1.7em; color: var(--light-color4, #414141);
}
.tolinku-about-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 560px; }
.tolinku-about-pairicon { display: block; margin-bottom: 16px; color: var(--accent-color, #fe330a); }
.tolinku-about-pairicon svg { width: 26px; height: 26px; }
.tolinku-about-pairitem h3 { font-size: 19px; line-height: 1.3em; margin: 0 0 9px; }
.tolinku-about-pairitem p { margin: 0; font-size: 15px; line-height: 1.65em; color: var(--light-color4, #414141); }
.tolinku-about-chartwrap { padding-left: 20px; }
@media (max-width: 991px) {
	.tolinku-about-datacopy h2 { font-size: 36px; }
	.tolinku-about-chartwrap { padding-left: 0; margin-top: 48px; }
}
@media (max-width: 479px) { .tolinku-about-pair { grid-template-columns: 1fr; gap: 26px; } }

/* ── The chart window ── */
.tolinku-chartwin {
	border-radius: 16px; overflow: hidden;
	background: #121212; border: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 46px 90px -48px rgba(0,0,0,.6);
}
.tolinku-chartwin-bar {
	display: flex; align-items: center; gap: 8px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.tolinku-chartwin-body { padding: 20px; }
/* Plot, ticks and bars share one 230px band so the zero line lands exactly on
   the bar baseline. The ticks are absolute across the full plot width, which
   is what lets a gridline run the whole way to the right edge instead of
   stopping wherever the tick column happened to end. */
.tolinku-chartwin-plot {
	position: relative;
	padding: 18px; border-radius: 12px;
	background: #1b1b1b; border: 1px solid rgba(255,255,255,.06);
}
.tolinku-chartwin-ticks {
	position: absolute; left: 18px; right: 18px; top: 18px;
	height: 230px; margin: 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; justify-content: space-between;
}
.tolinku-chartwin-ticks li { list-style: none; position: relative; height: 0; }
.tolinku-chartwin-ticks li span {
	position: absolute; left: 0; top: -6px; width: 40px;
	text-align: right;
	font-size: 10.5px; line-height: 1; color: rgba(255,255,255,.4);
}
.tolinku-chartwin-ticks li::after {
	content: ""; position: absolute; left: 50px; right: 0; top: 0;
	height: 1px; background: rgba(255,255,255,.07);
}
.tolinku-chartwin-bars {
	position: relative; z-index: 1;
	list-style: none; margin: 0; padding: 0 0 0 50px;
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;
}
.tolinku-chartwin-bars li { list-style: none; display: flex; flex-direction: column; }
.tolinku-chartwin-col { height: 230px; display: flex; align-items: flex-end; justify-content: center; }
.tolinku-chartwin-fill {
	display: block; width: 22px; border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, #ff4a21 0%, #e8380f 42%, #6d2a14 100%);
}
.tolinku-chartwin-label {
	height: 36px; padding-top: 11px; text-align: center;
	font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.52);
}
@media (max-width: 575px) {
	.tolinku-chartwin-fill { width: 13px; }
	.tolinku-chartwin-label { font-size: 9px; }
}

/* ── About: the values panel ── */
/* Both panels sit on the same white, so the section boundary between them was
   invisible and their two 130px paddings read as one 260px hole. One gap, paid
   once, by the section below. */
.tolinku-about-values { background: #fff; padding-bottom: 0; }
.tolinku-about-tail { padding-top: 96px; }
/* Bottom padding was all but matching the top, which left the columns
   floating with a band of dead black under them. The panel leads with a
   centred heading, so it should sit higher in its own box than lower. */
.tolinku-values {
	padding: 88px 70px 68px; border-radius: 34px;
	background: var(--heading-bg, #000);
	text-align: center;
}
.tolinku-values-head {
	margin: 0 0 64px;
	font-size: 50px; line-height: 1.12em;
	color: var(--light-color5, #f6f6eb);
}
/* The rule sits on the grid, not under the heading, so the columns and the
   line start at the same x and the dividers hang off it. */
.tolinku-values-grid {
	list-style: none; margin: 0; padding: 38px 0 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	border-top: 1px solid rgba(255,255,255,.18);
	text-align: left;
}
.tolinku-values-grid li {
	list-style: none;
	padding: 0 26px;
	border-right: 1px solid rgba(255,255,255,.12);
}
.tolinku-values-grid li:first-child { padding-left: 0; }
.tolinku-values-grid li:last-child { padding-right: 0; border-right: 0; }
.tolinku-values-icon { display: block; margin-bottom: 20px; color: var(--accent-color, #fe330a); }
.tolinku-values-icon svg { width: 24px; height: 24px; }
.tolinku-values-grid h3 {
	margin: 0 0 12px;
	font-size: 20px; line-height: 1.3em;
	color: var(--light-color5, #f6f6eb);
}
.tolinku-values-grid p { margin: 0; font-size: 15px; line-height: 1.65em; color: rgba(255,255,255,.62); }
@media (max-width: 991px) {
	.tolinku-values { padding: 64px 40px 68px; border-radius: 26px; }
	.tolinku-values-head { font-size: 36px; margin-bottom: 44px; }
	.tolinku-values-grid { grid-template-columns: repeat(2, 1fr); row-gap: 38px; }
	.tolinku-values-grid li:nth-child(2n) { border-right: 0; padding-right: 0; }
	.tolinku-values-grid li:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 575px) {
	.tolinku-values { padding: 48px 26px 52px; }
	.tolinku-values-head { font-size: 29px; }
	.tolinku-values-grid { grid-template-columns: 1fr; }
	.tolinku-values-grid li { border-right: 0; padding: 0; }
}

/* ── For Agencies ── */
.tolinku-agency-white { background: #fff; }
.tolinku-agency-cream { background: var(--light-color2, #efeae3); }
.tolinku-agency-white .tolinku-feat-copy > p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.7em; color: var(--light-color4, #414141); }
.tolinku-agency-white .tolinku-compare-badge { margin-bottom: 16px; }
.azzle-section-title .tolinku-compare-badge { margin-bottom: 18px; }

/* Four claims as chips, which is what they are: short enough that bullets
   would give each one a line it does not need. */
.tolinku-agency-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; padding: 0; }
.tolinku-agency-tags li {
	list-style: none;
	padding: 8px 15px; border-radius: 999px;
	background: rgba(254,51,10,.08); border: 1px solid rgba(254,51,10,.2);
	font-size: 13.5px; font-weight: 600; color: #b32200;
}

.tolinku-agency-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 54px; }
.tolinku-agency-tier {
	padding: 30px 32px; border-radius: 16px;
	background: var(--light-color2, #efeae3); border: 1px solid rgba(0,0,0,.07);
	text-align: center;
}
.tolinku-agency-tiername {
	margin: 0 0 12px;
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--accent-color, #fe330a);
}
.tolinku-agency-tierprice {
	margin: 0 0 8px;
	font-family: "DM Sans", sans-serif; font-size: 38px; font-weight: 700; line-height: 1;
	color: var(--heading-color, #000);
}
.tolinku-agency-tierprice span { font-size: 14px; font-weight: 500; color: var(--light-color4, #414141); }
.tolinku-agency-tiercap { margin: 0; font-size: 14.5px; color: var(--light-color4, #414141); }
@media (max-width: 767px) { .tolinku-agency-tiers { grid-template-columns: 1fr; } }

/* ── The Appspace list panel ── */
.tolinku-panel--spaces, .tolinku-panel--team {
	padding: 0; overflow: hidden;
	border-radius: 16px; background: #fff;
	border: 1px solid rgba(0,0,0,.09);
	box-shadow: 0 40px 80px -45px rgba(0,0,0,.4);
}
.tolinku-spaces-bar {
	display: flex; align-items: center; gap: 10px;
	padding: 15px 20px;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.tolinku-spaces-title {
	margin: 0; font-family: "DM Sans", sans-serif;
	font-size: 14.5px; font-weight: 700; color: var(--heading-color, #000);
}
.tolinku-spaces-count { font-size: 11.5px; color: #9a9a9a; }
.tolinku-spaces-new {
	margin-left: auto;
	padding: 6px 13px; border-radius: 999px;
	background: var(--accent-color, #fe330a); color: #fff;
	font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tolinku-spaces-list { list-style: none; margin: 0; padding: 0; }
.tolinku-spaces-list li {
	list-style: none;
	display: grid; grid-template-columns: 30px 1.5fr .8fr .9fr auto;
	gap: 10px; align-items: center;
	padding: 12px 20px;
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.tolinku-spaces-mark {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 9px;
	background: rgba(254,51,10,.1); color: var(--accent-color, #fe330a);
	font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700;
}
.tolinku-spaces-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tolinku-spaces-id strong { font-size: 13.5px; color: var(--heading-color, #000); }
.tolinku-spaces-domain { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #9a9a9a; }
.tolinku-spaces-stat { font-size: 12px; color: var(--light-color4, #414141); }
.tolinku-spaces-tier {
	justify-self: end;
	padding: 4px 10px; border-radius: 6px;
	font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.tolinku-spaces-tier.is-standard { background: rgba(254,51,10,.1); color: #b32200; }
.tolinku-spaces-tier.is-growth { background: rgba(214,158,46,.17); color: #8a6100; }
.tolinku-spaces-tier.is-free { background: rgba(0,0,0,.06); color: #555; }
.tolinku-spaces-foot {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
	padding: 16px 20px 18px;
	background: #faf8f5;
}
.tolinku-spaces-footlabel { font-size: 12.5px; color: var(--light-color4, #414141); }
.tolinku-spaces-total {
	font-family: "DM Sans", sans-serif; font-size: 22px; font-weight: 700;
	color: var(--heading-color, #000);
}
.tolinku-spaces-total span { font-size: 13px; font-weight: 500; color: var(--light-color4, #414141); }
.tolinku-spaces-breakdown { margin-left: auto; font-size: 11.5px; color: #9a9a9a; }

/* ── The team panel ── */
.tolinku-team-head,
.tolinku-team-list li {
	display: grid; grid-template-columns: 1.5fr .75fr 1.3fr;
	gap: 10px; align-items: center;
	padding: 11px 20px;
}
.tolinku-team-head {
	font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: #9a9a9a; border-bottom: 1px solid rgba(0,0,0,.06);
}
.tolinku-team-list { list-style: none; margin: 0; padding: 0; }
.tolinku-team-list li { list-style: none; border-bottom: 1px solid rgba(0,0,0,.05); }
.tolinku-team-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tolinku-team-who strong { font-size: 13px; color: var(--heading-color, #000); }
.tolinku-team-who span { font-size: 10.5px; color: #9a9a9a; word-break: break-all; }
.tolinku-team-role {
	justify-self: start;
	padding: 3px 9px; border-radius: 6px;
	font-size: 10.5px; font-weight: 700;
}
.tolinku-team-role.is-owner { background: rgba(254,51,10,.12); color: #b32200; }
.tolinku-team-role.is-admin { background: rgba(214,158,46,.17); color: #8a6100; }
.tolinku-team-role.is-editor { background: rgba(32,150,90,.13); color: #1d6b45; }
.tolinku-team-role.is-viewer { background: rgba(0,0,0,.06); color: #555; }
.tolinku-team-scope { font-size: 11.5px; color: var(--light-color4, #414141); }
.tolinku-team-key {
	list-style: none; margin: 0; padding: 14px 20px 16px;
	display: flex; flex-wrap: wrap; gap: 6px 16px;
	background: #faf8f5;
}
.tolinku-team-key li { list-style: none; font-size: 11px; color: #8a8a8a; }
.tolinku-team-key strong { color: var(--light-color4, #414141); }
@media (max-width: 575px) {
	.tolinku-spaces-list li { grid-template-columns: 30px 1fr auto; }
	.tolinku-spaces-stat { display: none; }
	.tolinku-team-head span:nth-child(3), .tolinku-team-scope { display: none; }
	.tolinku-team-head, .tolinku-team-list li { grid-template-columns: 1fr auto; }
}
/* Seven questions at full container width is too long a line to read. */
.tolinku-agency-faq { max-width: 900px; margin: 0 auto; }

/* The agencies note sits under a centred two-card block, not a left-aligned table. */
.tolinku-pricecmp-note--center { text-align: center; }

/* ── Pricing ── */
.tolinku-price-band { background: var(--light-color2, #efeae3); padding-top: 40px; padding-bottom: 96px; }
.tolinku-banner--joined + .tolinku-price-band { border-radius: 0 0 50px 50px; }
.tolinku-price-table-band { background: #fff; }
.tolinku-price-faq-band { background: var(--light-color2, #efeae3); }
.tolinku-price-cta-band { background: #fff; }
@media (max-width: 767px) {
	.tolinku-banner--joined + .tolinku-price-band { border-radius: 0 0 30px 30px; }
}

/* The featured card needs room above it for the flag, and the cards need to
   bottom-align their buttons when the feature lists differ in length. */
.tolinku-price-band .azzle-pricing-wrap {
	position: relative; height: 100%;
	display: flex; flex-direction: column;
}
.tolinku-price-band .azzle-pricing-body { flex: 1 1 auto; }
.tolinku-price-band .col-xl-3 { margin-bottom: 24px; }
.tolinku-price-flag {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	padding: 6px 15px; border-radius: 999px; white-space: nowrap;
	background: var(--accent-color, #fe330a); color: #fff;
	font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.tolinku-plan-feats li.is-lead {
	font-weight: 700; color: var(--heading-color, #000);
	list-style: none; padding-left: 0;
}
.tolinku-plan-feats li.is-lead::before { display: none; }
.tolinku-price-note {
	margin: 34px 0 0; text-align: center;
	font-size: 13.5px; line-height: 1.6em; color: #8a8a8a;
}

/* ── The comparison table ──
   68 rows, so the head sticks and the first column stays put while the plan
   columns scroll sideways on a narrow screen. */
/* No overflow on desktop, on purpose. An ancestor with overflow-x:auto becomes
   the scroll container for position:sticky, so the sticky head below silently
   did nothing: it stuck to a box that never scrolls vertically. The table fits
   at this width anyway, so the sideways scroll is only needed when it does not. */
.tolinku-ptable-scroll { margin-top: 54px; }
@media (max-width: 991px) {
	.tolinku-ptable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.tolinku-ptable {
	width: 100%; min-width: 720px;
	border-collapse: collapse;
	background: #fff;
}
.tolinku-ptable th,
.tolinku-ptable td { padding: 13px 16px; text-align: center; vertical-align: middle; }
/* The header is the page's call to action now, so it carries the price and a
   button per column and stays put while 68 rows go by underneath. Kept as
   tight as it can be: it sits under an 85px fixed site header, and the two
   together are permanent chrome on every scroll position. */
.tolinku-ptable thead th {
	position: sticky; top: 85px; z-index: 3;
	background: #fff;
	border-bottom: 1px solid rgba(0,0,0,.12);
	padding: 12px 12px 14px;
	vertical-align: bottom;
}
.tolinku-ptable thead th:first-child { vertical-align: bottom; padding-bottom: 18px; }
/* Every line here is as short as it can be on purpose. The header sits under
   an 85px fixed site header and stays for all 68 rows, so its height is
   permanent chrome: the first build came to 209px, which with the site header
   took 38% of a laptop viewport before a single row of data showed. */
.tolinku-ptable-flag {
	display: block; margin-bottom: 2px;
	font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--accent-color, #fe330a); white-space: nowrap;
}
.tolinku-ptable-btn {
	display: block; margin-top: 9px;
	padding: 8px 10px !important;
	font-size: 12px !important; line-height: 1.15 !important;
	white-space: nowrap;
}
.tolinku-ptable thead th:first-child { text-align: left; }
.tolinku-ptable-plan {
	display: block; line-height: 1.2;
	font-family: "DM Sans", sans-serif; font-size: 14.5px; font-weight: 700;
	color: var(--heading-color, #000);
}
.tolinku-ptable-cost {
	display: block; margin-top: 2px;
	font-size: 10.5px; line-height: 1.2; color: #8a8a8a;
}
.tolinku-ptable-cost strong {
	font-family: "DM Sans", sans-serif; font-size: 19px; font-weight: 700;
	color: var(--heading-color, #000);
	margin-right: 3px;
}
.tolinku-ptable tbody th[scope="row"] {
	text-align: left; font-weight: 500;
	font-size: 14.5px; color: var(--light-color4, #414141);
}
.tolinku-ptable tbody tr { border-bottom: 1px solid rgba(0,0,0,.055); }
/* A full-width tinted bar, not a line of small caps. With 9 groups and 68
   rows the group break has to be the strongest horizontal rule on the page or
   the table reads as one undifferentiated list. */
.tolinku-ptable-group th {
	text-align: left !important;
	padding: 13px 20px;
	background: var(--light-color2, #efeae3);
	font-family: "DM Sans", sans-serif;
	font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
	color: var(--heading-color, #000);
	border-top: 1px solid rgba(0,0,0,.08);
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.tolinku-ptable tbody:first-of-type .tolinku-ptable-group th { border-top: 0; }
/* The Standard column is the recommended one, so it carries a tint the whole
   way down rather than only in the header. */
.tolinku-ptable th.is-featured,
.tolinku-ptable td.is-featured { background: rgba(254,51,10,.035); }
.tolinku-ptable thead th.is-featured { background: #fdf2ef; }
.tolinku-pval { font-size: 14px; color: var(--light-color4, #414141); }
/* A filled disc reads at a glance down a long column where a bare check does
   not, and the absent state is a dash rather than a second symbol to decode. */
.tolinku-ptick {
	position: relative; display: inline-block;
	width: 21px; height: 21px; border-radius: 50%;
	background: rgba(32,150,90,.13);
}
.tolinku-ptick::after {
	content: ""; position: absolute; left: 6px; top: 7px;
	width: 7px; height: 4px;
	border-left: 2px solid #1d6b45; border-bottom: 2px solid #1d6b45;
	transform: rotate(-45deg);
}
.tolinku-pcross { display: inline-block; width: 11px; height: 1px; background: rgba(0,0,0,.2); }

/* Column rules and a row hover, so the eye can hold a line across five
   columns without losing which plan it is reading. */
.tolinku-ptable thead th + th,
.tolinku-ptable tbody td { border-left: 1px solid rgba(0,0,0,.05); }
.tolinku-ptable tbody tr:not(.tolinku-ptable-group):hover td,
.tolinku-ptable tbody tr:not(.tolinku-ptable-group):hover th { background: #faf8f5; }
.tolinku-ptable tbody tr:not(.tolinku-ptable-group):hover td.is-featured { background: rgba(254,51,10,.06); }

/* ── Tooltips ── */
.tolinku-ptable tbody th[scope="row"] { position: relative; overflow: visible; }
.tolinku-tip {
	position: relative;
	border-bottom: 1px dotted rgba(0,0,0,.35);
	cursor: help; outline: none;
}
.tolinku-tip:focus-visible { outline: 2px solid var(--accent-color, #fe330a); outline-offset: 3px; }
.tolinku-tip-bub {
	position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20;
	width: 268px; padding: 11px 14px;
	border-radius: 10px;
	background: #1b1b1b; color: #f2f2f2;
	font-size: 12.5px; line-height: 1.55; font-weight: 400; text-align: left;
	box-shadow: 0 18px 40px -16px rgba(0,0,0,.55);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	pointer-events: none;
}
.tolinku-tip-bub::after {
	content: ""; position: absolute; left: 18px; top: 100%;
	border: 6px solid transparent; border-top-color: #1b1b1b;
}
.tolinku-tip:hover .tolinku-tip-bub,
.tolinku-tip:focus .tolinku-tip-bub,
.tolinku-tip:focus-within .tolinku-tip-bub {
	opacity: 1; visibility: visible; transform: none;
}
/* The first rows of a group sit near the sticky header, so their tooltip
   opens downward instead of behind it. */
.tolinku-ptable-group + tr .tolinku-tip-bub,
.tolinku-ptable-group + tr + tr .tolinku-tip-bub {
	bottom: auto; top: calc(100% + 10px);
}
.tolinku-ptable-group + tr .tolinku-tip-bub::after,
.tolinku-ptable-group + tr + tr .tolinku-tip-bub::after {
	top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1b1b1b;
}

/* ── While you are inside the table ──
   The fixed site header is held away and the table header takes its place, so
   scrolling up a few rows does not drop an opaque bar over the plan columns. */
body.tolinku-table-lock .azzle-header-section { transform: translateY(-100%); }
body.tolinku-table-lock .tolinku-ptable thead th { top: 0; }
@media (max-width: 991px) {
	.tolinku-ptable th, .tolinku-ptable td { padding: 11px 12px; }
	.tolinku-ptable tbody th[scope="row"] { font-size: 13.5px; }
}

/* The table opens the page now, so the band carries its own top space and the
   plan columns get enough width for a price and a button. */
.tolinku-price-table-band { padding-top: 70px; }
.tolinku-ptable { min-width: 840px; }
.tolinku-ptable thead th:first-child { width: 34%; }
.tolinku-ptable-scroll { margin-top: 0; }
@media (max-width: 991px) {
	/* Inside a horizontal scroller sticky cannot track the page, so the header
	   is a normal row there rather than one that looks broken. */
	.tolinku-ptable thead th { position: static; }
}

/* ── Pricing: the enterprise panel ──
   Same component as the about page's principles, plus a centred sub and a
   button, which that one did not need. */
.tolinku-price-ent-band { background: #fff; }
.tolinku-values-sub {
	max-width: 700px; margin: -42px auto 0;
	text-align: center;
	font-size: 16.5px; line-height: 1.7em; color: rgba(255,255,255,.66);
}
.tolinku-values-sub + .tolinku-values-grid { margin-top: 56px; }
.tolinku-values-cta { margin-top: 48px; text-align: center; }
.tolinku-values-cta .azzle-default-btn { background: #fff; color: var(--heading-color, #000); border-color: #fff; }
@media (max-width: 991px) {
	.tolinku-values-sub { margin-top: -26px; font-size: 15.5px; }
	.tolinku-values-sub + .tolinku-values-grid { margin-top: 40px; }
}