/* Zoho client access guide: shared MaroonDM type, surfaces and chrome. */
.zoho-guide .page-hero{padding-block:70px}.zoho-guide .page-hero h1{max-width:850px}.zoho-guide .page-hero p{max-width:720px}.guide-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}.guide-actions a{min-height:44px}.guide-actions .guide-text-link{text-decoration:underline;text-underline-offset:5px}.guide-overview{background:var(--gray)}.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:70px;align-items:start}.guide-grid h2{font-size:clamp(30px,3vw,44px);line-height:1.15}.guide-grid h3{font-size:23px;line-height:1.3;margin-bottom:12px}.guide-grid p+p{margin-top:16px}.guide-grid .eyebrow{margin-bottom:20px}.guide-method{background:var(--theme-bg,#fff);scroll-margin-top:32px}.guide-method--blue{background:var(--blue)}.guide-method-head p{margin-top:24px;max-width:40ch}.guide-steps{margin:0;padding:0;list-style:none;counter-reset:steps}.guide-steps li{counter-increment:steps;display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;padding-block:20px;border-bottom:1px solid var(--line)}.guide-steps li:first-child{padding-top:0}.guide-steps li:before{content:counter(steps,decimal-leading-zero);color:var(--theme-accent,var(--maroon));font-size:14px;font-weight:600;padding-top:4px}.guide-safety{padding-inline-start:20px;border-inline-start:2px solid var(--theme-accent,var(--maroon));margin-top:24px}.guide-nav{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}.guide-nav a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:underline;text-underline-offset:5px}.guide-nav svg,.guide-actions svg{width:20px;height:20px;flex:0 0 20px}.guide-help{background:var(--blue)}.guide-faq{display:grid;gap:30px}.guide-sources{font-size:14px;border-top:1px solid var(--line);padding-top:24px;margin-top:34px}.guide-sources a{text-decoration:underline;text-underline-offset:4px}.guide-language{margin-top:18px;font-size:15px}.guide-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.zoho-guide a:focus-visible{outline:3px solid var(--theme-accent,var(--maroon));outline-offset:5px}.zoho-guide .btn svg{margin-inline-start:8px}[dir=rtl] .guide-grid{text-align:right}@media(max-width:800px){.zoho-guide .page-hero{padding-block:44px}.guide-grid{grid-template-columns:1fr;gap:30px}.guide-grid h2{font-size:34px}.guide-method-head p{max-width:none;margin-top:18px}.guide-steps li{gap:12px}.guide-nav{gap:8px 22px}.guide-actions{gap:12px}.guide-actions .btn{justify-content:center}.guide-safety{padding-inline-start:16px}.guide-grid p{line-height:1.75}}

/* Original MaroonDM concept art: no third-party interface or logo artwork. */
.guide-device{margin:28px 0 0;max-width:480px}.guide-device img{display:block;width:100%;height:auto;border-radius:6px}.guide-device figcaption{font-size:12px;line-height:1.6;margin-top:12px;color:var(--theme-muted,#647383)}.guide-device-link{display:flex;align-items:center;gap:8px;width:fit-content;min-height:44px;font-size:14px;color:var(--theme-text,#273747);text-decoration:underline;text-underline-offset:4px}.guide-device-link svg{width:17px;height:17px;flex:none}.guide-device-link:hover{color:var(--theme-accent,var(--maroon))}[data-theme=dark] .guide-device figcaption{color:#b8c8d3}[data-theme=dark] .guide-device-link{color:#d6e3ec}@media(max-width:800px){.guide-device{max-width:420px;margin-top:24px}}@media print{.guide-device{break-inside:avoid;max-width:260px}.guide-device figcaption{color:#46596b}.guide-device-link{color:#263b50;font-size:11px}.guide-device img{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* Owner-supplied product media; preserve artwork proportions and keep motion opt-in. */
.guide-device img{object-fit:contain}.guide-device--phone{max-width:250px}.guide-product-logo{display:block;width:145px;height:auto;margin-block:22px;background:#fff;border-radius:5px;padding:8px}.guide-animation-toggle{display:block;margin-block:12px;border:1px solid currentColor;background:transparent;color:var(--theme-accent,var(--maroon));padding:9px 14px;font:inherit;font-size:14px;cursor:pointer;border-radius:5px;min-height:44px}.guide-animation-toggle:focus-visible{outline:3px solid currentColor;outline-offset:4px}.guide-store-link{display:block;border-radius:5px}.guide-store-crop{display:block;width:180px;height:64px;overflow:hidden;position:relative;background:#fff;border-radius:5px}.guide-store-crop img{position:absolute;width:180px;height:180px;max-width:none;top:50%;left:0;transform:translateY(-50%);object-fit:contain}.guide-actions .guide-text-link,.guide-device-link{display:inline-flex;align-items:center;gap:.25em}.guide-actions .guide-text-link svg,.guide-device-link svg{width:.75em;height:.75em;flex:0 0 .75em;vertical-align:middle}.guide-device figcaption{margin-top:12px}.guide-device-link{margin-top:6px}@media print{.guide-animation-toggle{display:none}.guide-device--phone{max-width:150px}.guide-product-logo{max-width:110px}}

.guide-device-link{display:flex}

/* Each product visual has its own row; concise instruction row above it. */
.zoho-guide .guide-method{padding-block:56px}.guide-visual-row{margin-top:28px}.guide-visual-row .guide-device{max-width:1040px;margin:0 auto}.guide-visual-row .guide-device--phone{max-width:380px}.guide-visual-row .guide-device figcaption{margin-top:12px}.guide-store-crop{height:53.33px;background:transparent;border-radius:6px}.guide-store-link[href*="MailAndroid"] .guide-store-crop img{width:200px;height:200px;left:-10px}.guide-method .guide-actions{margin-top:22px}@media(max-width:800px){.zoho-guide .guide-method{padding-block:36px}.guide-visual-row{margin-top:24px}.guide-visual-row .guide-device--phone{max-width:340px}}@media print{.guide-visual-row .guide-device{max-width:500px}.guide-visual-row .guide-device--phone{max-width:180px}.zoho-guide .guide-method{padding-block:24px}}

.guide-device--phone [data-mail-animation-image]{clip-path:inset(1% 1.5% 0 round 20% 20% 0 0 / 12.6% 12.6% 0 0)}

/* A single reading flow keeps instructions, actions and imagery in order. */
.zoho-guide .guide-overview>.guide-grid,.zoho-guide .guide-method>.guide-grid{display:block;max-width:960px;margin-inline:auto}
.zoho-guide .guide-overview .eyebrow,.zoho-guide .guide-method .eyebrow{display:block;margin-bottom:18px}
.zoho-guide .guide-overview h2{margin-bottom:24px}
.zoho-guide .guide-overview h2+p{max-width:70ch}
.zoho-guide .guide-overview .guide-safety{max-width:70ch;margin-top:30px}
.zoho-guide .guide-method-head p{max-width:70ch;margin-top:20px}
.zoho-guide .guide-method-head+div{margin-top:30px}
.zoho-guide .guide-method .guide-actions{margin-top:26px}
.zoho-guide .guide-visual-row{margin-top:48px}
@media(max-width:800px){.zoho-guide .guide-visual-row{margin-top:36px}.zoho-guide .guide-method-head+div{margin-top:26px}}
@media print{.zoho-guide .guide-visual-row{margin-top:24px}}

/* Centre only the guide hero, including its logo and actions. */
.zoho-guide .page-hero{text-align:center}.zoho-guide .page-hero h1,.zoho-guide .page-hero p,.zoho-guide .page-hero .guide-product-logo{margin-inline:auto}.zoho-guide .page-hero .guide-actions{justify-content:center}
.zoho-guide .page-hero .eyebrow{justify-content:center;text-align:center}
.zoho-guide .page-hero h1,.zoho-guide .page-hero p{text-align:center}
/* Consistent guide reading order, including blue narrative sections. */
.feedback-guide .guide-method--blue>.guide-grid{display:block;max-width:960px;margin-inline:auto}
.feedback-guide .guide-grid>div+div{margin-top:28px}
.feedback-guide .guide-method--blue .eyebrow{display:block;margin-bottom:18px}
.feedback-guide .guide-grid p+.guide-steps{margin-top:24px}
